/* ============================================================
   The Good Board — typographic system
   A reference on good corporate governance under Swiss law.
   Monochrome, book-like, deliberate. Bradford LL Book with a
   careful fallback stack. Fluid type across all viewport sizes.
   ============================================================ */

/* --------------------------------------------------------------
   Bradford LL (Book + Book Italic). Files shipped from /fonts/.
   -------------------------------------------------------------- */
@font-face {
  font-family: "Bradford LL";
  src: url("../fonts/BradfordLLWeb-Book.woff2") format("woff2"),
       url("../fonts/BradfordLLWeb-Book.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bradford LL";
  src: url("../fonts/BradfordLLWeb-BookItalic.woff2") format("woff2"),
       url("../fonts/BradfordLLWeb-BookItalic.woff")  format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Bradford Mono LL — Web licensed for thegoodboard.ch. The
   file name and font-family string below must match the licensed
   identifier exactly (Lineto license forbids renaming). Used for
   the citation register only. */
@font-face {
  font-family: "BradfordMonoLLWeb-Regular";
  src: url("../fonts/BradfordMonoLLWeb-Regular.woff2") format("woff2"),
       url("../fonts/BradfordMonoLLWeb-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------
   Custom properties — light mode default
   -------------------------------------------------------------- */
:root {
  /* Palette — paper-warm monochrome */
  --bg:         #FBFBF9;
  --ink:        #14110F;
  --secondary:  #6B6762;
  --rule:       #E5E2DC;
  --subtle:     #F2EFE9;
  color-scheme:  light dark;

  /* Type families */
  --serif: "Bradford LL", "Iowan Old Style", "Palatino Linotype",
           Palatino, "Baskerville Old Face", Baskerville,
           "Hoefler Text", Garamond, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue",
           Helvetica, Arial, sans-serif;
  --mono:  "iA Writer Mono", "SF Mono", ui-monospace, Menlo,
           Consolas, "Courier New", monospace;
  --mono-serif: "BradfordMonoLLWeb-Regular", "iA Writer Mono", "SF Mono",
           ui-monospace, Menlo, Consolas, "Courier New", monospace;

  /* Scale — minor third (1.2) */
  --text-xs:   0.694rem;
  --text-sm:   0.833rem;
  --text-base: 1rem;
  --text-md:   1.2rem;
  --text-lg:   1.44rem;
  --text-xl:   1.728rem;
  --text-2xl:  2.488rem;
  --text-3xl:  3.583rem;

  /* Measure */
  --measure:        37rem;
  --measure-wide:   44rem;

  /* Baseline — the vertical rhythm unit. Equal to body line-height × 1em
     (1.5rem). Paragraph-level spacing and heading margins snap to baseline
     multiples so the reader's eye falls on a consistent grid when scanning. */
  --baseline: 1.5rem;

  /* Spacing scale. Section-level tokens keep the historical 0.5rem progression;
     the baseline-critical tokens (--bl-*) are multiples of --baseline and
     should be preferred for paragraph, heading, blockquote, and caveat
     vertical rhythm. */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --space-8:  8rem;

  --bl-half:  calc(var(--baseline) * 0.5);   /* 0.75rem */
  --bl-1:     var(--baseline);               /* 1.5rem  */
  --bl-1half: calc(var(--baseline) * 1.5);   /* 2.25rem */
  --bl-2:     calc(var(--baseline) * 2);     /* 3rem    */
  --bl-3:     calc(var(--baseline) * 3);     /* 4.5rem  */
  --bl-4:     calc(var(--baseline) * 4);     /* 6rem    */
}

/* Dark mode — raised surface contrast for callouts/prompt bodies */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14110F;
    --ink:       #F2EFE9;
    --secondary: #9B968F;
    --rule:      #33302A;
    --subtle:    #1F1C18;
  }
}

/* Higher-contrast preference — used by readers who have opted in at OS level */
@media (prefers-contrast: more) {
  :root {
    --secondary: #4A4743;
    --rule:      #B5B0A8;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --secondary: #C7C2BA;
      --rule:      #4F4B44;
    }
  }
}

/* --------------------------------------------------------------
   Reset (targeted, not total)
   -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding-left: 1.25em; }

/* Prose lists — calibrated markers in the sans register for numerals and
   em-dash for bullets.  Keeps body prose in the serif face while the markers
   read as apparatus, not as content. */
.prose ol { padding-left: 2.75ch; }
.prose ol > li::marker {
  font-family: var(--sans);
  font-size: 0.82em;
  color: var(--secondary);
  font-variant-numeric: tabular-nums lining-nums;
}
.prose ul {
  list-style-type: "— ";
  padding-left: 1.75em;
}
.prose ul > li::marker {
  color: var(--secondary);
}
.prose ol, .prose ul { margin-bottom: var(--bl-1); }
.prose li { margin-bottom: var(--bl-half); }
.prose li:last-child { margin-bottom: 0; }

img { max-width: 100%; display: block; }
hr { border: none; border-top: 1px solid var(--rule); margin: var(--bl-2) 0; }

/* --------------------------------------------------------------
   Page shell — fluid base font size
   -------------------------------------------------------------- */
html {
  /* 16.5px on smallest phones, 18px around 1024px, up to 19px on ultrawide */
  font-size: clamp(16.5px, calc(15px + 0.25vw), 19px);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--serif);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "dlig" 0;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-synthesis: none;  /* real italic only — no faux slant */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  hanging-punctuation: first last;
  overflow-wrap: break-word;  /* long URLs / compound words break rather than overflow the measure */
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------
   Site header
   -------------------------------------------------------------- */
.site-header {
  width: 100%;
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.site-title {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.site-title:hover { text-decoration: none; }

.lang-switcher {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 0.5ch;
  color: var(--secondary);
}
.lang-switcher a {
  color: var(--secondary);
  text-decoration: none;
  padding: 0 0.1em;
}
.lang-switcher a[aria-current="page"] { color: var(--ink); }
.lang-switcher a:hover { color: var(--ink); }

/* --------------------------------------------------------------
   Main layout
   -------------------------------------------------------------- */
main {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}

main.wide { max-width: var(--measure-wide); }

/* --------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------- */
.breadcrumb {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6ch;
  align-items: baseline;
}
.breadcrumb a {
  color: var(--secondary);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* --------------------------------------------------------------
   Typography — headings and text
   -------------------------------------------------------------- */
h1, h2, h3 {
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "lnum" 1;
  font-variant-numeric: lining-nums;
  orphans: 3; widows: 3;
  hyphens: none;  /* don't hyphenate display type */
}

h1 {
  font-size: clamp(var(--text-lg), 1.3rem + 0.9vw, var(--text-xl));
  margin-bottom: var(--bl-1);
  letter-spacing: -0.012em;
  scroll-margin-top: var(--bl-1);
}

h2 {
  font-size: clamp(var(--text-md), 0.95rem + 0.7vw, var(--text-lg));
  margin-top: var(--bl-2);
  margin-bottom: var(--bl-1);
  letter-spacing: -0.006em;
  scroll-margin-top: var(--bl-1);
  page-break-after: avoid;
  break-after: avoid;
}

h3 {
  font-size: var(--text-md);
  margin-top: var(--bl-1half);
  margin-bottom: var(--bl-half);
  font-style: italic;
  scroll-margin-top: var(--bl-1);
  page-break-after: avoid;
  break-after: avoid;
}

p {
  margin-bottom: var(--bl-1);
  orphans: 2; widows: 2;
  /* Progressive enhancement — modern browsers get prose-aware balancing */
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

.prose p + p { text-indent: 0; }

/* First paragraph opener — small caps on first line (book tradition) */
.lede::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink);
  text-decoration-skip-ink: auto;
}
@media (hover: hover) {
  a:hover {
    text-decoration-thickness: 2px;
  }
}

em, i, cite { font-style: italic; }
strong, b { font-weight: inherit; font-style: italic; }  /* italic for emphasis, not bold */
small { font-size: var(--text-sm); color: var(--secondary); }

/* Abbreviation with title — classical dotted underline + help cursor */
abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  cursor: help;
}

blockquote {
  font-style: italic;
  padding-left: var(--bl-1half);
  border-left: 1px solid var(--rule);
  margin: var(--bl-1) 0;
  color: var(--ink);
}
blockquote p { margin-bottom: var(--bl-half); }
blockquote p:last-child { margin-bottom: 0; }

.author-signoff {
  font-style: italic;
  text-align: right;
  margin-top: var(--bl-1half);
  color: var(--ink);
}

/* Regeste / In brief — Swiss legal-publishing headnote, set between
   the meta card and the caveat. Hairline rule above and below, label
   as small caps, body copy in Bradford Book at body measure. */
.regeste {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--bl-1) 0;
  margin: var(--bl-1) 0 var(--bl-1half);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink);
  max-width: 38rem;
}
.regeste .label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  font-weight: 500;
  margin-bottom: var(--bl-half);
}
.regeste p { margin-bottom: var(--bl-half); }
.regeste p:last-child { margin-bottom: 0; }
.regeste .tags {
  font-family: var(--mono-serif);
  font-size: 0.92em;
  color: var(--secondary);
  margin-bottom: var(--bl-half);
}

code, pre, kbd, samp {
  font-family: var(--mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}
pre {
  background: var(--subtle);
  padding: var(--space-3);
  overflow-x: auto;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* --------------------------------------------------------------
   Tracked uppercase labels — sans-serif, ligatures off
   -------------------------------------------------------------- */
.label, .caps {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  font-weight: 500;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------
   Citations — tabular lining numerals, slight tracking, real small caps
   -------------------------------------------------------------- */
.cite {
  font-family: var(--mono-serif);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------
   Jurisdiction tag — used on comparative commentary entries
   -------------------------------------------------------------- */
.jurisdiction {
  display: inline;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  font-weight: 500;
  margin-right: 0.5em;
  white-space: nowrap;
}
.jurisdiction::after {
  content: " · ";
  margin: 0 0.1em 0 0.3em;
  color: var(--rule);
}

/* --------------------------------------------------------------
   Frontispiece (landing) — fluid display type
   -------------------------------------------------------------- */
.frontispiece {
  padding-top: clamp(var(--space-5), calc(var(--space-3) + 3vw), var(--space-7));
  padding-bottom: var(--space-6);
  text-align: left;
}

.frontispiece .work-title {
  font-size: clamp(2.2rem, 1.2rem + 4.5vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
  font-weight: 400;
  text-wrap: balance;
}

.frontispiece .work-subtitle {
  font-size: clamp(var(--text-md), 0.9rem + 0.9vw, var(--text-lg));
  font-style: italic;
  color: var(--ink);
  margin-bottom: var(--space-5);
  line-height: 1.28;
  max-width: 32rem;
  text-wrap: balance;
}

.frontispiece .work-framing {
  font-size: var(--text-base);
  max-width: 32rem;
  color: var(--ink);
  margin-bottom: var(--space-6);
}

.frontispiece .attribution {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
}
.frontispiece .attribution a { color: var(--secondary); }
.frontispiece .attribution a:hover { color: var(--ink); }

/* --------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------- */
.toc {
  margin-top: var(--space-5);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-5);
}
.toc h2 {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  font-weight: 500;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.2;
}

.toc ol {
  list-style: none;
  padding: 0;
  counter-reset: toc-item;
}

.toc li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--bl-half) 0;
  border-bottom: 1px solid var(--rule);
  counter-increment: toc-item;
}
.toc li:last-child { border-bottom: none; }

.toc .num {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--secondary);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.04em;
  min-width: 2.4ch;
}
.toc .num::before { content: counter(toc-item, decimal-leading-zero); }

.toc .title {
  flex: 1;
  font-size: var(--text-base);
  line-height: 1.4;
}
.toc .title a {
  text-decoration: none;
  color: var(--ink);
}
.toc .title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink);
}

.toc .scope {
  display: block;
  font-size: var(--text-sm);
  color: var(--secondary);
  margin-top: 0.35em;
  font-style: italic;
  max-width: 38em;
  line-height: 1.45;
}

.toc .status {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  white-space: nowrap;
  align-self: baseline;
  font-weight: 500;
}

@media (max-width: 36em) {
  .toc li { flex-wrap: wrap; }
  .toc .status { order: 3; margin-left: calc(2.4ch + var(--space-2)); margin-top: 0.3em; }
}

/* --------------------------------------------------------------
   Article meta
   -------------------------------------------------------------- */
.article-meta {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.article-meta dt { font-weight: 500; }
.article-meta dd { margin-left: 0.6ch; display: inline; }
.article-meta .meta-item { display: flex; gap: 0.6ch; align-items: baseline; }

.article-header {
  margin-bottom: var(--space-5);
}
.article-header .eyebrow { margin-bottom: var(--space-2); }
.article-header h1 {
  margin-bottom: var(--space-2);
}
.article-header .scope-line {
  font-style: italic;
  color: var(--secondary);
  font-size: var(--text-md);
  max-width: 32rem;
  text-wrap: balance;
  line-height: 1.4;
}

/* End-of-article ornament */
.end-ornament {
  text-align: center;
  margin: var(--bl-3) 0 var(--bl-2);
  color: var(--secondary);
  font-size: var(--text-base);
  letter-spacing: 1.2em;
  padding-left: 1.2em;
}

/* Section dividers */
.divider {
  text-align: center;
  margin: var(--space-5) 0;
  color: var(--secondary);
  font-size: var(--text-sm);
  letter-spacing: 0.6em;
  padding-left: 0.6em;
}

/* --------------------------------------------------------------
   Glossary
   -------------------------------------------------------------- */
.glossary {
  margin-top: var(--space-4);
}
.glossary .entry {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}
.glossary .entry:last-child { border-bottom: none; }

.glossary .term {
  font-family: var(--serif);
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  font-size: var(--text-md);
  color: var(--ink);
  margin-bottom: var(--space-1);
  font-weight: 400;
}

.glossary .gloss {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  margin-left: 0.6ch;
  font-weight: 400;
}

.glossary .definition {
  font-size: var(--text-base);
  line-height: 1.52;
}

.glossary .see-also {
  font-size: var(--text-sm);
  color: var(--secondary);
  margin-top: 0.4em;
  font-style: italic;
}
.glossary .see-also a { color: var(--secondary); }
.glossary .see-also a:hover { color: var(--ink); }

/* --------------------------------------------------------------
   Prompts
   -------------------------------------------------------------- */
.prompt-meta {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.prompt-body {
  font-family: var(--mono);
  font-size: 0.94rem;
  line-height: 1.6;
  background: var(--subtle);
  padding: var(--space-4);
  border-left: 2px solid var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: var(--space-3) 0 var(--space-5);
  hyphens: none;
  hanging-punctuation: none;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums lining-nums;
}

.caveat {
  padding: var(--bl-1) var(--bl-1) var(--bl-1) calc(var(--bl-1) + 2px);
  margin: var(--bl-1half) 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink);
  background: var(--subtle);
  border-left: 1px solid var(--rule);
}
.caveat .label { margin-bottom: var(--bl-half); }
.caveat p { margin-bottom: var(--bl-half); }
.caveat p:last-child { margin-bottom: 0; }

.prompt-categories {
  margin-top: var(--space-4);
}
.prompt-categories h2 {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--secondary);
  font-weight: 500;
  margin: var(--space-5) 0 var(--space-2);
}

/* --------------------------------------------------------------
   Figures, tables — hygiene for when they appear
   -------------------------------------------------------------- */
figure {
  margin: var(--bl-1) 0;
}
figcaption {
  font-size: var(--text-sm);
  color: var(--secondary);
  font-style: italic;
  margin-top: var(--bl-half);
  line-height: 1.45;
  max-width: 32rem;
}

table {
  border-collapse: collapse;
  margin: var(--bl-1) 0;
  font-size: var(--text-sm);
  width: 100%;
  font-variant-numeric: tabular-nums lining-nums;
}
th, td {
  padding: 0.55em 1em 0.55em 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.4;
}
th {
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--secondary);
  border-bottom: 1px solid var(--ink);
}
tbody tr:last-child td {
  border-bottom: 1px solid var(--ink);
}

/* --------------------------------------------------------------
   Empty-state
   -------------------------------------------------------------- */
.empty-state {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-6) var(--space-3);
  text-align: center;
  color: var(--secondary);
  font-style: italic;
  margin: var(--space-4) 0;
}

/* --------------------------------------------------------------
   Footer — matches body measure for unified reading flow
   -------------------------------------------------------------- */
.site-footer {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
  color: var(--secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.site-footer .footer-title {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.site-footer .footer-meta {
  max-width: 32rem;
  margin-bottom: var(--space-2);
}
.site-footer a { color: var(--secondary); }
.site-footer a:hover { color: var(--ink); }

.site-footer .footer-copyright {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  margin-top: var(--space-3);
  color: var(--secondary);
}

/* --------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------- */

/* Narrow mobile — tighten padding to buy content width */
@media (max-width: 30em) {
  main { padding: var(--space-4) var(--space-2) var(--space-5); }
  .site-header { padding: var(--space-2) var(--space-2) var(--space-2); }
  .site-footer { padding: var(--space-4) var(--space-2) var(--space-3); }
  .article-meta { gap: var(--space-2) var(--space-3); }
}

/* Very narrow — slightly relax tracking on labels */
@media (max-width: 22em) {
  .lang-switcher { letter-spacing: 0.12em; gap: 0.3ch; }
  .eyebrow, .site-title, .site-footer .footer-title { letter-spacing: 0.14em; }
}

/* Large desktop — generous breathing above frontispiece */
@media (min-width: 72em) {
  .frontispiece { padding-top: var(--space-8); }
}

/* --------------------------------------------------------------
   Landing — two-column opening spread
   At viewports ≥ 64em, the landing becomes a facing-pages spread:
   frontispiece on the verso (left), Agenda on the recto (right).
   The reader lands directly on the primary entry point without
   scrolling past the title. Subsequent sections (Reference,
   Commentary) resume a single-column reading measure beneath.
   -------------------------------------------------------------- */
@media (min-width: 64em) {
  main.home {
    max-width: 66rem;
    display: grid;
    grid-template-columns: 24rem minmax(0, 1fr);
    column-gap: var(--bl-3);
    row-gap: var(--bl-3);
    align-items: start;
  }
  main.home > :nth-child(1) { grid-column: 1 / 2; }
  main.home > :nth-child(2) { grid-column: 2 / 3; }
  main.home > :nth-child(n+3) {
    grid-column: 1 / -1;
    max-width: var(--measure);
    margin-inline: auto;
    width: 100%;
  }
  main.home > .frontispiece {
    padding-top: var(--bl-2);
    padding-bottom: 0;
  }
  main.home > :nth-child(2).toc {
    margin-top: 0;
    border-top: 0;
    padding-top: var(--bl-2);
  }
}

/* --------------------------------------------------------------
   Utility
   -------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------
   Index-page utility classes (replacing former inline styles)
   -------------------------------------------------------------- */
.toc h3.toc-section-label {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondary);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.toc h2 .scope-italic {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.glossary .entry .term-link {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------
   Search
   -------------------------------------------------------------- */
.search-form { margin: var(--space-3) 0; }
.search-form input[type="search"] {
  width: 100%;
  font-family: var(--serif);
  font-size: var(--text-lg);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--secondary);
  background: transparent;
  color: var(--ink);
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
}
.search-form input[type="search"]:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.search-meta, .search-no-results, .search-error {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--secondary);
  margin: var(--space-2) 0;
}
.search-list { margin: var(--space-2) 0; }
.search-list .entry { margin-bottom: var(--space-2); }
.search-list .term { font-weight: 600; margin-bottom: 0.2rem; }
.search-list .term a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.search-list .term a:hover {
  border-bottom-color: var(--ink);
}
.search-list .eyebrow-inline {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--secondary);
  margin-left: 0.4em;
}
.search-list .definition { margin: 0.2rem 0 0; color: var(--ink); }
.search-list mark {
  background: rgba(255, 218, 130, 0.45);
  color: inherit;
  padding: 0 0.05em;
  border-radius: 1px;
}
@media (prefers-color-scheme: dark) {
  .search-list mark { background: rgba(255, 200, 90, 0.35); }
}