/* Hallmark · genre: editorial · macrostructure: Long Document · theme: Paper · enrichment: none · nav: N6 · footer: Ft4
 * Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5
 */

/* ──────────────────────────────────────────────────────────────
   TOKENS — locked. Every colour + font-family references a token.
   Default = Specimen; page opts into Paper via <html data-theme>.
   ────────────────────────────────────────────────────────────── */
:root,
[data-theme="specimen"] {
  --color-paper:    oklch(96%  0.018 80);
  --color-paper-2:  oklch(93%  0.020 80);
  --color-paper-3:  oklch(89%  0.022 75);
  --color-rule:     oklch(82%  0.014 75);
  --color-rule-2:   oklch(70%  0.012 70);
  --color-muted:    oklch(52%  0.012 65);
  --color-neutral:  oklch(38%  0.014 60);
  --color-ink-2:    oklch(26%  0.014 60);
  --color-ink:      oklch(18%  0.014 60);
  --color-accent:   #FC4C02;
  --color-accent-ink: oklch(55% 0.21 32);
  --color-focus:    #FC4C02;

  --font-display: "EB Garamond", "Garamond", "Adobe Garamond Pro", "Apple Garamond", ui-serif, Georgia, serif;
  --font-body:    "EB Garamond", "Garamond", "Adobe Garamond Pro", "Apple Garamond", ui-serif, Georgia, serif;
  --font-label:   "EB Garamond", "Garamond", ui-serif, Georgia, serif;

  --display-weight: 340;
  --display-style: normal;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.75rem;
  --text-display:   clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3rem);

  --lh-tight:   1.02;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-display: -0.025em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.12em;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 10rem;

  --section-gap: 6.5rem;
  --section-head-gap: 1.5rem;

  --page-max:      76rem;
  --page-gutter:   clamp(1.25rem, 4vw, 3rem);
  --measure:       68ch;
  --rule-hair:     0.5px;
  --rule-fine:     1px;

  --radius-card:   0;
  --radius-pill:   0;
  --radius-input:  0;
  --rule-card:     1px;
  --shadow-card:   none;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --z-sticky: 200;
}

/* PAPER — a plain white page. Near-white paper, ink-black text,
   neutral greys, one restrained warm accent. */
[data-theme="paper"] {
  color-scheme: light;

  --color-paper:    oklch(99%   0.002 80);
  --color-paper-2:  oklch(96.5% 0.003 80);
  --color-paper-3:  oklch(94%   0.004 75);
  --color-rule:     oklch(86%   0.005 70);
  --color-rule-2:   oklch(62%   0.008 60);
  --color-muted:    oklch(52%   0.008 55);
  --color-neutral:  oklch(36%   0.010 50);
  --color-ink-2:    oklch(26%   0.012 45);
  --color-ink:      oklch(14%   0.012 40);
  --color-accent:   oklch(45%   0.160 32);
  --color-accent-ink: oklch(55% 0.170 34);
  --color-focus:    oklch(55%   0.180 32);

  --font-display: "EB Garamond", "Garamond", "Adobe Garamond Pro", "Apple Garamond", ui-serif, Georgia, serif;
  --font-body:    "EB Garamond", "Garamond", "Adobe Garamond Pro", "Apple Garamond", ui-serif, Georgia, serif;
  --font-label:   "EB Garamond", "Garamond", ui-serif, Georgia, serif;

  --display-weight: 600;
  --display-style: normal;

  --text-base: 1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   1.375rem;
  --text-xl:   1.625rem;
  --text-2xl:  2rem;
  --text-display:   clamp(2.75rem, 5.0vw + 1.0rem, 5.0rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 2.875rem);

  --tracking-display: -0.022em;
  --tracking-tight:   -0.008em;
  --tracking-label:   0.06em;

  --lh-normal:  1.55;
  --lh-relaxed: 1.65;

  --section-gap: 6rem;
  --section-head-gap: 1.5rem;
  --measure: 68ch;
}

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

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration-color: var(--color-rule); text-underline-offset: 0.14em; }
a:hover { text-decoration-color: var(--color-accent); }

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

.skip {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-xs) var(--space-md); font-family: var(--font-label);
  font-size: var(--text-sm); text-decoration: none;
}
.skip:focus { left: var(--space-md); top: var(--space-md); }

/* ──────────────────────────────────────────────────────────────
   MASTHEAD — N6 newspaper masthead
   ────────────────────────────────────────────────────────────── */
.masthead {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-md);
  text-align: center;
}
.masthead__home { display: inline-block; text-decoration: none; color: inherit; }
.masthead__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}
.masthead__sub {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-top: var(--space-xs);
}
.masthead__byline {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.rule-double {
  max-width: var(--page-max);
  margin: 0 auto;
  border-top: var(--rule-fine) solid var(--color-ink);
  border-bottom: var(--rule-fine) solid var(--color-ink);
  height: 3px;
}

/* ──────────────────────────────────────────────────────────────
   LAYOUT — Long Document · contents rail + prose column
   ────────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, var(--measure));
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-4xl);
  align-items: start;
}

/* Contents rail */
.contents { position: sticky; top: var(--space-lg); min-width: 0; }
.contents__label,
.index__list + .contents__label { margin: 0 0 var(--space-sm); }
.contents__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.contents__list { list-style: none; margin: 0; padding: 0; }
.contents__link {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: var(--space-xs);
  padding: var(--space-2xs) 0;
  text-decoration: none;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.3;
  min-width: 0;
}
.contents__link:hover { color: var(--color-accent); }
.contents__link.is-current { color: var(--color-ink); }
.contents__link.is-current .contents__num { color: var(--color-accent); border-color: var(--color-accent); }
.contents__link.is-current .contents__name { font-weight: 600; }
.contents__num {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-left: 2px solid transparent;
  padding-left: var(--space-xs);
  min-width: 0;
}
.contents__name { min-width: 0; overflow-wrap: anywhere; }

/* Document column */
.document { min-width: 0; }
.chapter__head { margin-bottom: var(--space-xl); }
.chapter__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
.chapter__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: var(--text-display-s);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
  min-width: 0;
}
.chapter__title::after {
  content: "";
  display: block;
  width: 3rem;
  border-top: var(--rule-fine) solid var(--color-accent);
  margin-top: var(--space-lg);
}

/* Prose */
.prose { font-size: var(--text-md); line-height: var(--lh-relaxed); }
.prose p {
  margin: 0 0 var(--space-md);
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
}
.prose p + p { text-indent: 1.3em; margin-top: -0.35rem; }
.prose > p:first-of-type { text-indent: 0; }
.prose em { font-style: italic; }
.prose blockquote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-lg);
  border-left: var(--rule-fine) solid var(--color-rule-2);
  color: var(--color-ink-2);
}
.prose-head {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-xl) 0 var(--space-sm);
}
.prose-head + p { text-indent: 0; }
.prose--refs p { text-align: left; text-indent: 0 !important; font-size: var(--text-base); line-height: 1.5; margin-bottom: var(--space-2xs); }

/* Chapter pager */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-fine) solid var(--color-rule);
}
.chapter-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: 46%;
  min-width: 0;
  text-decoration: none;
  color: var(--color-ink);
}
.chapter-nav__link--next { text-align: right; align-items: flex-end; }
.chapter-nav__dir {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.chapter-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.chapter-nav__link:hover .chapter-nav__title { color: var(--color-accent); }

/* Colophon — Ft4 dense colophon */
.colophon {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.colophon__line {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1.6;
}
.colophon__mark { color: var(--color-ink-2); }

/* ──────────────────────────────────────────────────────────────
   HOME — frontispiece (left-biased, not centred)
   ────────────────────────────────────────────────────────────── */
.home { background: var(--color-paper); }
.frontispiece {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-4xl) var(--page-gutter) var(--space-3xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.frontispiece__eyebrow {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-fine) solid var(--color-ink);
}
.frontispiece__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
  min-width: 0;
}
.frontispiece__question {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  color: var(--color-accent);
}
.frontispiece__byline {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.frontispiece__blurb {
  max-width: 46ch;
  margin: var(--space-lg) 0 0;
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
}

/* Index — the contents as an editorial list */
.index { margin-top: var(--space-2xl); border-top: var(--rule-fine) solid var(--color-ink); padding-top: var(--space-lg); }
.index__list { list-style: none; margin: 0; padding: 0; column-gap: var(--space-3xl); }
.index__link {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-decoration: none;
  color: var(--color-ink);
  min-width: 0;
}
.index__link:hover { color: var(--color-accent); }
.index__link:hover .index__num { color: var(--color-accent); }
.index__num {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.index__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  min-width: 0;
}
@media (min-width: 62rem) {
  .index__list { columns: 2; }
  .index__link { break-inside: avoid; }
}

/* ──────────────────────────────────────────────────────────────
   MOTION — one quiet entrance; honours reduced-motion
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .document, .frontispiece { animation: rise var(--dur-long) var(--ease-out); }
}
@keyframes rise { from { transform: translateY(6px); } to { transform: none; } }

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */
@media (max-width: 52rem) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: var(--space-xl); }
  .contents { position: static; padding-bottom: var(--space-lg); border-bottom: var(--rule-fine) solid var(--color-rule); }
  .document { max-width: none; }
  .prose { font-size: var(--text-base); }
  .prose p { text-align: left; }
  .chapter-nav { flex-direction: column; gap: var(--space-lg); }
  .chapter-nav__link { max-width: 100%; }
  .chapter-nav__link--next { text-align: left; align-items: flex-start; }
  .masthead { padding-top: var(--space-2xl); }
  .frontispiece { padding-top: var(--space-2xl); }
}