/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--masthead-h) + var(--s-5)); }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* belt and braces: no horizontal page scroll, ever */
  min-height: 100vh;
}

::selection { background: color-mix(in oklab, var(--rubric) 28%, transparent); }

/* ── Layout: one editorial grid. Children sit in the text column unless told otherwise. ── */
.page,
.chapter,
.masthead,
.colophon {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter)) [text-end]
    minmax(0, calc((var(--wide) - var(--measure)) / 2)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.page > *, .chapter > *, .masthead > *, .colophon > * { grid-column: text; min-width: 0; }
.page > .wide, .chapter > .wide, .masthead > .wide, .colophon > .wide { grid-column: wide; }
.page > .full, .chapter > .full { grid-column: full; }

/* ── Type ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-color: color-mix(in oklab, var(--rubric) 60%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--rubric); }

.kicker {
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.kicker--rubric { color: var(--rubric); }
.num, .tabular { font-family: var(--f-ui); font-variant-numeric: lining-nums tabular-nums; }
.ui { font-family: var(--f-ui); font-size: var(--t-small); line-height: 1.45; }
.meta { font-family: var(--f-ui); font-size: var(--t-small); color: var(--ink-3); line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
[lang="ml"] { font-family: var(--f-text); line-height: 1.5; }
.display [lang="ml"], .display[lang="ml"] { font-family: var(--f-display); }

.prose > * + * { margin-top: 1em; }
.prose { color: var(--ink); max-width: var(--measure); }

/* ── Focus ─────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100;
  padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper);
  font-family: var(--f-ui); font-size: var(--t-small); border-radius: var(--radius-ui);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

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

/* ── Masthead: sticky, 48px. Once the hero is gone a chapter button fades into its centre. ── */
.masthead {
  position: sticky; top: 0; z-index: 30; block-size: var(--masthead-h); align-content: center;
  border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease-out);
}
/* The frosted paper sits on a layer of its own: a backdrop-filter on .masthead itself would
   become the containing block of the phone sheet (position: fixed) inside it. */
.masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in oklab, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.masthead.is-stuck { border-bottom-color: var(--rule); }
.masthead__bar { grid-column: wide; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; position: relative; }
.wordmark { font-family: var(--f-display); font-size: 1.375rem; line-height: 1; text-decoration: none; letter-spacing: 0.005em; white-space: nowrap; flex: none; }

/* The chapter button. Hidden (and out of the tab order) until the hero has left the screen. */
.rail { position: absolute; left: 50%; transform: translateX(-50%); }
.rail__btn {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; max-inline-size: 15rem; padding: 0 var(--s-3);
  border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--f-display); font-size: 1.1875rem; line-height: 1; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms, background-color var(--dur-1) var(--ease-out);
}
.masthead.is-on .rail__btn { opacity: 1; visibility: visible; transition: opacity 160ms var(--ease-out), visibility 0s, background-color var(--dur-1) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rail__btn, .masthead.is-on .rail__btn { transition: none; } }
.rail__btn:hover, .rail__btn[aria-expanded="true"] { background: var(--paper-sunk); }
.rail__no { font-style: italic; color: var(--rubric); }
.rail__no::after { content: "·"; font-style: normal; color: var(--ink-3); margin-left: 6px; }
.rail__no[hidden] { display: none; }
.rail__title { overflow: hidden; text-overflow: ellipsis; }
.rail__btn svg { inline-size: 12px; block-size: 12px; flex: none; color: var(--ink-3); }
.rail__menu {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); inline-size: 20rem; z-index: 31;
  padding: var(--s-2); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-ui); box-shadow: var(--shadow-float);
}
.rail__menu[hidden] { display: none; }
.rail__sheethead, .rail__scrim { display: none; }
.rail__menu ol { list-style: none; padding: 0; }
.rail__link {
  display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; min-block-size: 44px; padding: 10px var(--s-3); border-radius: 6px;
  font-family: var(--f-display); font-size: 1.1875rem; line-height: 1.2; text-decoration: none;
}
.rail__link:hover { background: var(--paper-sunk); }
.rail__link[aria-current] { background: var(--rubric-wash); }
.rail__link[aria-current] span:last-child { color: var(--rubric); }
.rail__lno { font-style: italic; color: var(--rubric); }
/* Phones: the wordmark gives the centre to the button; the menu is a sheet from the bottom */
@media (max-width: 599px) {
  .rail { position: static; transform: none; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
  .rail__btn { max-inline-size: 100%; font-size: 1.0625rem; padding: 0 var(--s-2); }
  .rail__menu {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; transform: none; inline-size: auto; max-block-size: 80dvh; overflow-y: auto;
    padding: var(--s-2) var(--s-3) calc(var(--s-4) + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; border-width: 1px 0 0;
    animation: sheet-in var(--dur-2) var(--ease-out);
  }
  .rail__sheethead { display: flex; align-items: center; justify-content: space-between; padding-left: var(--s-3); }
  .rail__scrim {
    display: block; position: fixed; inset: 0; z-index: 30; background: rgb(12 10 7 / 0.32);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .rail__btn[aria-expanded="true"] ~ .rail__scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-out), visibility 0s; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
}
.wordmark em { color: var(--rubric); }
.masthead__nav { display: flex; align-items: center; gap: var(--s-1); }
.masthead__link {
  font-family: var(--f-ui); font-size: var(--t-small); text-decoration: none; color: var(--ink-2);
  min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--s-3); border-radius: 999px;
}
.masthead__link:hover { color: var(--ink); background: var(--paper-sunk); }
/* Narrow: the chapter button replaces the Contents link (and, once it shows, the Highlights link) */
/* Once the chapter button shows, it replaces the Contents link (and on narrow screens the Highlights link too) */
.masthead.is-on .masthead__link--contents { display: none; }
@media (max-width: 599px) { .masthead.is-on .masthead__link { display: none; } }
@media (max-width: 399px) { .wordmark { font-size: 1.1875rem; } .masthead__link--contents { display: none; } }

.icon-button {
  inline-size: 44px; block-size: 44px; display: inline-grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-2); border-radius: 999px;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.icon-button:hover { background: var(--paper-sunk); color: var(--ink); }
.icon-button svg { width: 20px; height: 20px; }

/* ── Contents ──────────────────────────────────────────────────────────── */
.contents { padding-block: var(--s-9) var(--s-8); }
.contents h2 { margin-bottom: var(--s-5); }
.contents ol { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.contents li { border-bottom: 1px solid var(--rule); }
.contents a {
  display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: baseline; gap: var(--s-3);
  padding-block: var(--s-4); text-decoration: none; min-height: 44px;
}
.contents a:hover .contents__title { color: var(--rubric); }
.contents__no { font-family: var(--f-display); font-style: italic; color: var(--rubric); font-size: 1.25rem; }
.contents__title { font-family: var(--f-display); font-size: 1.625rem; line-height: 1.15; transition: color var(--dur-1) var(--ease-out); }
.contents__desc { display: block; font-family: var(--f-text); font-size: var(--t-small); color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.contents__go { color: var(--ink-3); font-family: var(--f-ui); }

/* ── Chapters ──────────────────────────────────────────────────────────── */
.chapter { padding-block: var(--s-9) var(--s-8); }
.chapter__head { margin-bottom: var(--s-7); }
.chapter__no { display: block; margin-bottom: var(--s-4); }
.chapter__title { font-family: var(--f-display); font-size: var(--t-display); line-height: 1; letter-spacing: -0.01em; }
.chapter__title em { color: var(--rubric); }
.chapter__intro { margin-top: var(--s-5); font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); }
/* A rubricated initial, as in the manuscripts the colour comes from */
.chapter__intro > p:first-child::first-letter {
  -webkit-initial-letter: 3 2; initial-letter: 3 2;
  font-family: var(--f-display); color: var(--rubric); margin-right: 0.12em;
}
@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
  .chapter__intro > p:first-child::first-letter { float: left; font-size: 3.9em; line-height: 0.82; margin: 0.06em 0.1em 0 0; }
}
.section-title { font-family: var(--f-display); font-size: var(--t-title); line-height: 1.15; margin-top: var(--s-8); margin-bottom: var(--s-3); }

/* Placeholder copy for slots the narrative will fill. Visible in development only via [data-empty]. */
[data-slot]:empty { display: none; }

/* ── Pull-quotes: real highlights, set between chapters ───────────────── */
.pullquote { grid-column: text; padding-block: var(--s-8); margin: 0; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .pullquote { grid-column: wide; padding-inline: calc((100% - var(--measure)) / 2 - 2rem) 0; } }
.pullquote p {
  font-family: var(--f-display); font-style: italic; font-size: var(--t-quote); line-height: 1.12;
  text-indent: -0.42em; letter-spacing: -0.005em;
}
.pullquote p::before { content: "\201C"; color: var(--rubric); }
.pullquote p::after { content: "\201D"; color: var(--rubric); }
.pullquote footer { margin-top: var(--s-4); }
.pullquote cite { font-style: normal; color: var(--ink-2); }
.pullquote:not(:has(p)) { display: none; }

/* ── Colophon ──────────────────────────────────────────────────────────── */
.colophon { padding-block: var(--s-8) var(--s-9); border-top: 1px solid var(--rule); margin-top: var(--s-8); }
.colophon p { font-size: var(--t-small); color: var(--ink-2); }
.colophon h2 { font-family: var(--f-display); font-size: var(--t-title); margin-bottom: var(--s-3); }

/* ── Small parts ───────────────────────────────────────────────────────── */
.mark { display: inline-block; inline-size: 0.7em; block-size: 0.7em; border-radius: 50%; vertical-align: 0.02em; border: 1.5px solid currentColor; }
.mark--finished  { color: var(--st-finished);  background: currentColor; }
.mark--deferred  { color: var(--st-deferred);  background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.mark--abandoned { color: var(--st-abandoned); background: transparent; }

.stars { color: var(--rubric); letter-spacing: 0.08em; font-family: var(--f-ui); }
.stars .off { color: var(--rule-strong); }

.badge-fixture {
  position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 40;
  font-family: var(--f-ui); font-size: var(--t-micro); letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); opacity: 0.85;
}