/* Hallmark · genre: editorial · macrostructure: Index-First (home) + Long Document (post)
 * theme: custom (vibe: "ferd.ca on cream paper" · paper oklch(97% 0.012 95) · accent oklch(58% 0.219 16) crimson · Lora 700 italic + PT Sans + IBM Plex Mono)
 * tone: plain blog · anchor hue: 95 · enrichment: none · nav: N9 edge-aligned · footer: Ft4 two columns · axes: light / sans / warm
 * note: layout, type and greys follow https://ferd.ca at the user's request, italic headings included; only the paper colour is ours. */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */

/* ───────────────────────── Fonts ───────────────────────── */
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/PTSans-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/PTSans-Italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PTSans-Bold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Lora-BoldItalic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* CJK text inside the italic display face. Chrome on macOS slants a fallback CJK font even with
   font-synthesis: none, so the family gets an explicit "italic" face for CJK code points that maps to
   the system's upright bold sans. If none of these fonts exist the browser falls back as usual. */
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 700;
  src: local("PingFang SC Semibold"), local("PingFangSC-Semibold"), local("Hiragino Sans GB W6"),
       local("Microsoft YaHei Bold"), local("MicrosoftYaHei-Bold"), local("Noto Sans CJK SC Bold"),
       local("NotoSansCJKsc-Bold"), local("Source Han Sans SC Bold");
  unicode-range: U+2E80-2EFF, U+3000-303F, U+3040-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────────────────────── Base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-ui);
  font-kerning: normal;
}

::selection { background: var(--color-selection); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Links are grey and underlined everywhere, darker on hover */
a { color: var(--color-muted); }
a:hover { color: var(--color-ink); }

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.skip {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  padding: 0.4em 0.8em;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-rule-2);
  font-size: var(--text-base);
  text-decoration: none;
}
.skip:focus-visible { top: 0.5rem; }

/* Display voice: Lora, bold, italic. The wordmark, page titles and section headings. */
.wordmark, .hello, .post-title, .prose h2, .prose h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  line-height: var(--lh-heading);
  font-synthesis-style: none; /* Lora has a real italic; other fallbacks should not get a fake one (see the CJK face above) */
}

/* Label voice: mono, italic, small, grey. Dates, counts, tags. */
.date, .post-date, .count, .post-updated, .list-desc, .toc summary, .post-nav small {
  font-family: var(--font-mono);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

/* ───────────────────────── Shell ─────────────────────────
 * One column. 960px at most, 80% of the viewport below that, a 20px inset on the smallest screens. */
.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 25rem) {
  .container { width: 85%; padding-inline: 0; }
}
@media (min-width: 34.375rem) {
  .container { width: 80%; }
}

/* ───────────────────────── Header ───────────────────────── */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 4%;
  padding-top: 1.6rem;
}

.wordmark {
  flex: 1 1 auto;
  font-size: var(--text-wordmark);
  line-height: 1.2;
  letter-spacing: -0.1rem;
}
.wordmark a { color: var(--color-ink); text-decoration: none; }
.wordmark a:hover { color: var(--color-ink); }
.hilight { color: var(--color-accent); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.6em;
  row-gap: 0.25em;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-nav);
  line-height: 1.4;
}
.site-nav a { color: var(--color-muted); }
.site-nav a:hover { color: var(--color-ink); }
.site-nav a[aria-current="page"] { color: var(--color-muted-2); }

@media (max-width: 34.3125rem) {
  .wordmark, .site-nav { flex-basis: 100%; }
  .site-nav { margin-top: 0.6rem; }
}

.theme-toggle {
  all: unset;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  color: var(--color-muted);
  vertical-align: middle;
}
.theme-toggle:hover { color: var(--color-ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 50%; }
.theme-toggle__disc {
  --disc-rotate: 0deg;
  width: 0.8em;
  height: 0.8em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transform: rotate(var(--disc-rotate));
  transition: transform var(--dur-short) var(--ease-out);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__disc { --disc-rotate: 180deg; }

/* ───────────────────────── Main ───────────────────────── */
.site-main { padding-block: 2rem 1.5rem; }

/* The greeting on the home page and the title of a list page: crimson, italic */
.hello {
  margin: 0.2em 0;
  font-size: var(--text-title);
  letter-spacing: -0.02em;
  color: var(--color-accent);
}
.hello a { color: inherit; text-decoration: none; }
.list-desc { margin: 0.2em 0 0; font-size: var(--text-xs); }

/* The index: a bulleted list, date — title, one line each */
.index {
  margin: 1em 0 0.4em;
  padding-inline-start: 2.2em;
  list-style: disc;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-neutral);
}
.index li { margin-bottom: 0.3em; padding-inline-start: 0.5em; overflow-wrap: anywhere; }
.index .date, .index .count { font-size: 0.8em; }
.index .count { margin-inline-start: 0.4em; }
.index a { color: var(--color-muted); }
.index a:hover { color: var(--color-ink); }

.more { margin: 1em 0 0.4em; font-size: var(--text-body); }
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 1.5em;
  font-size: var(--text-body);
}
.pager__pos { font-family: var(--font-mono); font-style: italic; font-size: 0.8em; color: var(--color-muted); align-self: center; }

/* ───────────────────────── Post ───────────────────────── */
.post-date { display: block; margin: 0; font-size: var(--text-xs); line-height: 1.5; }
.post-date a { color: inherit; text-decoration: none; }
.post-date a:hover { color: var(--color-ink); text-decoration: underline; }

.post-title {
  margin: 0.2em 0;
  font-size: var(--text-title);
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

.post-foot { margin-top: 2em; font-size: var(--text-base); color: var(--color-neutral); }
.post-updated { margin: 0 0 0.4em; font-size: var(--text-xs); }
.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4em 1.5em;
  margin: 1em 0 0;
  padding-top: 0.8em;
  border-top: var(--rule-hair) dotted var(--color-rule-2);
}
.post-nav a { color: var(--color-muted); overflow-wrap: anywhere; }
.post-nav a:hover { color: var(--color-ink); }
.post-nav small { font-size: 0.8em; margin-inline-end: 0.4em; }
.post-nav__newer { margin-inline-start: auto; text-align: right; }

/* ───────────────────────── Contents ───────────────────────── */
.toc {
  margin: 1.2em 0 0.4em 1.5em;
  max-width: 90%;
  padding: 0.5em 0.8em;
  background: var(--color-paper-2);
  border: 0.1em dotted var(--color-rule);
  font-size: var(--text-base);
  line-height: 1.5;
}
.toc summary { cursor: pointer; font-size: var(--text-xs); }
.toc ol { margin: 0.4em 0 0; padding-inline-start: 1.6em; list-style: decimal; }
.toc ol ol { margin: 0.2em 0; list-style: lower-alpha; }
.toc li { margin: 0.15em 0; }
.toc a { color: var(--color-muted); }
.toc a:hover, .toc a[aria-current="true"] { color: var(--color-ink); }

/* ───────────────────────── Prose ───────────────────────── */
.prose {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
  overflow-wrap: break-word;
}

.prose p { margin: 1.2em 0 0.4em; }

.prose h2 { margin: 1.2em 0 0.4em; font-size: var(--text-h2); color: var(--color-ink); }
.prose h3 { margin: 1.2em 0 0.4em; font-size: var(--text-h3); color: var(--color-ink); }
.prose h4, .prose h5, .prose h6 {
  margin: 1.2em 0 0.4em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}

.prose a { color: var(--color-muted); }
.prose a:hover { color: var(--color-ink); }

.prose .zola-anchor {
  margin-inline-start: 0.35em;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.prose :is(h1, h2, h3, h4, h5, h6):hover .zola-anchor, .prose .zola-anchor:focus-visible { opacity: 1; }

.prose ul, .prose ol, .prose dl { margin: 1em 0 0.4em; padding-inline-start: 2.2em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ol[type="a"] { list-style: lower-alpha; }
.prose li { margin-bottom: 0.3em; padding-inline-start: 0.5em; }
.prose li::marker { color: var(--color-neutral); }
.prose li > ul, .prose li > ol { margin: 0.3em 0; }
.prose dt { margin-top: 1em; font-style: italic; color: var(--color-neutral); }
.prose dd { margin-inline-start: 0.7em; }
.prose input[type="checkbox"] { accent-color: var(--color-accent); margin-inline-end: 0.4em; }

.prose blockquote {
  margin: 1.2em 0 0.4em 1.5em;
  max-width: 90%;
  padding: 0.5em;
  line-height: 1.5;
  color: var(--color-neutral);
  background: var(--color-paper-2);
  border: 0.1em dotted var(--color-rule);
}
.prose blockquote p { margin: 1.2em 0 0.4em; color: var(--color-ink-2); }
.prose blockquote p:first-child { margin: 0 0 0.4em; }
.prose blockquote blockquote {
  margin: 1em 0 0.4em 0.4em;
  max-width: none;
  padding: 0 0 0 0.5em;
  background: none;
  border: 0;
  border-inline-start: 0.2em solid var(--color-rule);
}
.prose blockquote blockquote p { margin: 0 0 0.3em; }

.prose hr { margin: 2em 0; border: 0; border-top: var(--rule-hair) dotted var(--color-muted); }

.prose img { display: block; max-width: 100%; height: auto; }
.prose figure { margin: 1.2em 0 0.4em; }
.prose figcaption, .prose img + em {
  display: block;
  margin-top: 0.3em;
  font-size: var(--text-base);
  color: var(--color-muted);
}

.prose strong { font-weight: 700; }
.prose abbr[title] { border-bottom: 0.1em dotted var(--color-neutral); text-decoration: none; }
.prose mark { background: var(--color-selection); color: inherit; padding-inline: 0.1em; }
.prose kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--color-rule-2);
  border-bottom-width: 2px;
  background: var(--color-code-bg);
}

/* Tables: hairlines on the left and below each cell, none on the outside */
.table-wrap { margin: 0.5em 0; overflow-x: auto; }
.prose table {
  margin: 0.5em 0;
  border-collapse: collapse;
  font-size: var(--text-base);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.table-wrap > table { margin: 0; }
.prose th, .prose td {
  padding: 0.2em 0.5em;
  text-align: left;
  vertical-align: top;
  border-left: 0.1em solid var(--color-rule);
  border-bottom: 0.1em solid var(--color-rule);
}
.prose th:first-child, .prose td:first-child { border-left: 0; }
.prose th { font-weight: 700; }

/* Code: a shade lighter than the page, a dotted rule under inline code, a hairline box around blocks */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-code-bg);
  border-bottom: 1px dotted var(--color-rule-2);
}
.prose pre, .code-block {
  margin: 1.2em 0 0.4em 1.5em;
  width: 90%;
}
.prose pre {
  padding: 1em;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: var(--lh-mono);
  tab-size: 4;
  color: var(--color-neutral);
  background: var(--color-code-bg) !important; /* over Giallo's own background, so every block sits on the same paper */
  border: 1px solid var(--color-rule);
}
.code-block > pre, .mermaid-figure > pre { margin: 0; width: 100%; }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose pre .giallo-ln {
  display: inline-block;
  min-width: 2.5ch;
  margin-inline-end: 1em;
  text-align: right;
  color: var(--color-muted) !important;
  user-select: none;
}
.prose .z-l-hl, .prose .z-d-hl { display: inline-block; width: 100%; background: var(--color-code-hl) !important; }

.code-block { position: relative; }
.copy-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.1em 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-code-bg);
  border: 1px solid var(--color-rule);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.code-block:hover .copy-btn, .copy-btn:focus-visible, .copy-btn[data-state] { opacity: 1; }
.copy-btn:hover { border-color: var(--color-ink); color: var(--color-ink); }
.copy-btn:active { transform: translateY(1px); }
.copy-btn[data-state="copied"] { color: var(--color-accent); border-color: var(--color-accent); }
.copy-btn[data-state="error"] { color: var(--color-warning); border-color: var(--color-warning); }
@media (hover: none) { .copy-btn { opacity: 1; } }

/* Alerts (Zola emits a single class, markdown-alert-<type>): a blockquote with a coloured edge and a label */
.prose [class^="markdown-alert-"] {
  --alert: var(--color-note);
  margin: 1.2em 0 0.4em 1.5em;
  max-width: 90%;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: var(--color-paper-2);
  border: 0.1em dotted var(--color-rule);
  border-inline-start: 0.2em solid var(--alert);
  color: var(--color-ink-2);
}
.prose [class^="markdown-alert-"]::before {
  content: "Note";
  display: block;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 0.8em;
  color: var(--alert);
}
.prose [class^="markdown-alert-"] p { margin: 0.2em 0; }
.prose .markdown-alert-tip { --alert: var(--color-tip); }
.prose .markdown-alert-tip::before { content: "Tip"; }
.prose .markdown-alert-important { --alert: var(--color-important); }
.prose .markdown-alert-important::before { content: "Important"; }
.prose .markdown-alert-warning { --alert: var(--color-warning); }
.prose .markdown-alert-warning::before { content: "Warning"; }
.prose .markdown-alert-caution { --alert: var(--color-caution); }
.prose .markdown-alert-caution::before { content: "Caution"; }

/* Footnotes */
.footnote-reference a { vertical-align: super; font-size: 0.8em; line-height: 0.8em; }
.footnotes {
  margin-top: 2em;
  padding-top: 0.6em;
  border-top: var(--rule-hair) dotted var(--color-muted);
  font-size: 0.9em;
}
.footnotes ol { margin: 0.4em 0; padding-inline-start: 2.2em; }
.footnotes li:target { background: var(--color-paper-2); }
.footnotes p { margin: 0 0 0.4em; }

/* Mermaid and math */
.mermaid-figure { margin: 1.2em 0 0.4em; overflow-x: auto; }
.mermaid-figure.is-rendered { text-align: center; }
.mermaid-figure svg { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.render-error { margin: 0.4em 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-warning); }

.math-display { margin: 1.2em 0 0.4em; overflow-x: auto; overflow-y: hidden; padding-block: 0.2em; }
.math-display .katex-display { margin: 0; }
.math-inline .katex { font-size: 1.05em; }
.math--unrendered { font-family: var(--font-mono); font-size: 0.9em; }

/* ───────────────────────── Footer ───────────────────────── */
.site-foot {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
  border-top: 0.1em solid var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1;
}
.site-foot > div { flex: 1 1 48%; min-width: 0; }
.site-foot__right { text-align: right; }
.site-foot ul { margin: 1em 0; padding: 0; list-style: none; }
.site-foot li { margin: 0.2em 0; line-height: 1.3; }
.site-foot a { color: var(--color-neutral); text-decoration: none; }
.site-foot a:hover { color: var(--color-muted); text-decoration: underline; }
@media (max-width: 34.3125rem) {
  .site-foot > div { flex-basis: 100%; }
  .site-foot__right { text-align: left; }
  .site-foot__left ul { margin-bottom: 0; }
  .site-foot__right ul { margin-top: 0.75em; }
}

/* ───────────────────────── Motion preference ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}