/* ═════════════════════════════════════════════════════════════════
   JACELYN PARRY 林登丽 — VISUAL GRAMMAR
   Extracted from the homepage. Every value here already exists there.

   Rules of the house
   ──────────────────
   1. Nothing animates on scroll. Things fade in because the page loaded.
   2. No parallax. Anywhere.
   3. No cards, no grids of tiles, no icons, no counters.
   4. Type carries the emotion. Space carries the pace.
   5. When in doubt, remove.

   Principles
   ──────────
   These decide what belongs here. The rules above only decide how it looks.

   I.   Experience is a by-product, never an effect.
        A page feels architectural because it is a structure, not because
        it was styled to seem like one. If an atmosphere has to be
        performed, it is not there.

   II.  Do not put two hands on the reader's shoulder.
        Never explain before they have experienced. Naming an idea at the
        top of a page is instruction; the same words at the foot are
        recognition. Let them draw the line between the stars first.

   III. Looseness lives in the content, not in the arrangement.
        The freest pages need the strictest frame. One unexpected
        photograph has force only because everything around it held still.

   IV.  Chapters differ by rhythm, density and material — never by new
        tokens. No page invents a typeface, a colour or a spacing step.
        Variation comes from what a chapter contains: photographs here,
        facsimiles there, blank paper somewhere else. The system stays
        constant so the content can move.
        (One licensed exception: the three resonance panels in
        A Way of Seeing, which carry no information.)
   ═════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   SELF-HOSTED FONTS
   Cormorant Garamond and DM Sans served from /assets/fonts/.
   No external request to Google Fonts.
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-v17-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}





/* ─────────────────────────────────────────────────────────────────
   1 · TOKENS
   ───────────────────────────────────────────────────────────────── */
:root {

  /* Ground */
  --paper:   #F8F6F1;
  --ink:     #161311;
  --gold:    #9B7D52;
  --mist:    #8C8480;

  /* Ink on paper */
  --on-paper:        var(--ink);
  --on-paper-soft:   var(--mist);
  --rule:            rgba(22,19,17,0.11);

  /* Paper on ink — four weights, no more */
  --on-ink:          rgba(248,246,241,0.92);
  --on-ink-soft:     rgba(248,246,241,0.62);
  --on-ink-faint:    rgba(248,246,241,0.40);
  --on-ink-whisper:  rgba(248,246,241,0.24);
  --rule-l:          rgba(248,246,241,0.10);

  /* Letterforms */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;

  /* Type scale — fluid, six sizes and two labels. Resist adding a seventh. */
  --t-question: clamp(1.60rem, 3.10vw, 2.80rem);  /* the page's one question  */
  --t-display:  clamp(1.90rem, 3.20vw, 2.75rem);  /* section headline          */
  --t-voice:    clamp(1.30rem, 2.50vw, 1.85rem);  /* the narrating line        */
  --t-lede:     clamp(1.15rem, 1.90vw, 1.50rem);  /* opening paragraph         */
  --t-body:     clamp(1.00rem, 1.30vw, 1.12rem);  /* running prose             */
  --t-detail:   clamp(0.92rem, 1.15vw, 1.05rem);  /* secondary prose, captions */
  --t-eyebrow:  0.62rem;                          /* sans, uppercase           */
  --t-tag:      0.60rem;                          /* sans, uppercase           */

  /* Spacing — seven steps. Use these, not arbitrary rem values. */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: 3rem;
  --s5: 5rem;
  --s6: 8rem;
  --s7: 12rem;

  /* Measure — long lines are the enemy of quiet */
  --gutter:     max(1.75rem, 8vw);
  --m-question: 24ch;          /* the question never runs wide     */
  --m-voice:    640px;         /* narrating lines                  */
  --m-prose:    40rem;         /* long-form: ~62 characters        */
  --m-narrow:   30ch;          /* the facing template's text side  */

  /* Motion — one duration for fades, one for page changes */
  --fade:  1.6s;
  --leave: 220ms;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Global link reset — prevents browser default blue */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--gold);
}

::selection { background: rgba(155,125,82,0.18); }

section { position: relative; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* Any block laid on ink flips its text colours by declaring it. */
.on-ink { background: var(--ink); color: var(--on-ink); }


/* ─────────────────────────────────────────────────────────────────
   2 · MOTION
   Two behaviours exist. There is no third.
   ───────────────────────────────────────────────────────────────── */

/* (a) Fade in because the page loaded — never because it scrolled. */
.fade { opacity: 0; transition: opacity var(--fade) ease; }
.fade.in { opacity: 1; }

/* (b) Page-to-page. The paper dims, the next page comes up. */
body { animation: arrive 420ms ease both; }
@keyframes arrive { from { opacity: 0 } to { opacity: 1 } }
body.leaving { opacity: 0; transition: opacity var(--leave) ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade { opacity: 1 !important; }
}


/* ─────────────────────────────────────────────────────────────────
   3 · NAVIGATION
   Two words in the corners. The chapter list lives behind one of them.
   The bar never hides, never shrinks, never follows the scroll.
   ───────────────────────────────────────────────────────────────── */

.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s3) var(--gutter);
  pointer-events: none;
}
.site-head > * { pointer-events: auto; }

.wordmark {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--on-paper);
  text-decoration: none;
}
.wordmark span {
  margin-left: 0.55rem;
  color: var(--on-paper-soft);
  letter-spacing: 0.14em;
}

.index-toggle {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-paper-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.35s ease;
}
.index-toggle:hover { color: var(--gold); }

/* On a dark chapter opening, declare the ground and the bar inverts. */
.site-head[data-ground="ink"] .wordmark        { color: var(--on-ink); }
.site-head[data-ground="ink"] .wordmark span,
.site-head[data-ground="ink"] .index-toggle    { color: var(--on-ink-faint); }
.site-head[data-ground="ink"] .index-toggle:hover { color: var(--gold); }

/* ── The chapter list ── */
.site-index {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--paper);
  display: flex;
  align-items: center;
  padding: var(--s6) var(--gutter) var(--s5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
  overflow-y: auto;
}
.site-index.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 0s;
}

/* The menu is a list of names and nothing else. Each page's question
   is not a label for the door — it is the first line inside the room. */
.site-index ol { list-style: none; width: 100%; }

.site-index a {
  display: block;
  padding: 0.42rem 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--on-paper);
  text-decoration: none;
  transition: color 0.35s ease;
}
.site-index a:hover { color: var(--gold); }
.site-index [aria-current="page"] { color: var(--gold); }


/* ─────────────────────────────────────────────────────────────────
   4 · COMPONENTS
   ───────────────────────────────────────────────────────────────── */

/* Eyebrow — names the chapter. One per section, never two. */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* Rule — a breath before something begins. */
.rule {
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--gold);
  margin-bottom: var(--s4);
}

/* Epigraph — the question, set directly beneath a page's title.
   Every chapter opens with one. It is the site's only recurring device. */
.epigraph {
  display: block;
  margin-top: 1.05rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--gold);
}

/* Question — the one thing each page asks. Italic, always. */
.question {
  font-family: var(--serif);
  font-size: var(--t-question);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: var(--m-question);
  text-wrap: pretty;
}

/* Display — a headline that is not a question. */
.display {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 1.2;
}

/* Voice — the narrating line. Stands alone, never in a paragraph. */
.voice {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-voice);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  max-width: var(--m-voice);
}
.voice + .voice { margin-top: var(--s3); }

/* Lede — the paragraph that opens a passage. */
.lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.72;
  max-width: var(--m-prose);
}

/* Prose — running text. */
.prose { max-width: var(--m-prose); }
.prose p {
  font-family: var(--serif);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.85;
}
.prose p + p { margin-top: var(--s2); }
.prose em { font-style: italic; }
.prose strong { font-weight: 400; }

/* Pull — a line lifted out of the prose. Not a decorative quote mark. */
.pull {
  margin: var(--s5) 0;
  padding-left: var(--s3);
  border-left: 1px solid var(--gold);
  font-family: var(--serif);
  font-size: var(--t-voice);
  font-style: italic;
  line-height: 1.55;
  color: var(--on-paper);
  max-width: var(--m-voice);
}

/* Tag — metadata. Sans, uppercase, small. Never a coloured pill. */
.tag {
  font-family: var(--sans);
  font-size: var(--t-tag);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-paper-soft);
  line-height: 1.6;
}
.tag--gold { color: var(--gold); }

/* Caption — belongs to an image. Serif, italic, quiet. */
.caption {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--serif);
  font-size: var(--t-detail);
  font-style: italic;
  line-height: 1.6;
  color: var(--on-paper-soft);
  max-width: 42ch;
}

/* Link — underline arrives on hover, colour with it. */
.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Colophon — the imprint at the very bottom edge of a page. */
.colophon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-paper-soft);
}
.on-ink .colophon { border-top-color: var(--rule-l); color: var(--on-ink-whisper); }
.colophon a { color: inherit; text-decoration: none; transition: color 0.35s ease; }
.colophon a:hover { color: var(--gold); }


/* ─────────────────────────────────────────────────────────────────
   5 · IMAGES
   Four kinds only. The kind decides the treatment, the crop and
   whether it may bleed to the edge.

   ATMOSPHERE   sea, mist, light      full-bleed, veiled, type may sit on it
   EVIDENCE     maps, documents       inset, hairline, always captioned
   PRESENCE     portraits, family     column or inset, never veiled
   OBSERVATION  travel photographs    in the flow of prose, captioned

   Three of these are monochrome. EVIDENCE is not.

   A document keeps the colour it actually has. The cream of an albumen
   mount, the foxing on a census page, the red ink of a gazetteer cover —
   that is not decoration, it is information about the age and material of
   the object, and desaturating it destroys evidence on a page whose whole
   purpose is to present evidence. In practice this breaks nothing: aged
   paper and black ink already sit within a shade of --paper and --ink, so
   a scanned document reads as paper rather than as colour. Give it only
   enough exposure and contrast to make the ink legible, and nothing else.

   Tone is baked into the file, not applied in CSS. A filter on a large
   image is recomputed every time the browser paints it.
   ───────────────────────────────────────────────────────────────── */

figure { display: block; box-sizing: border-box; max-width: 100%; }
figure img { max-width: 100%; }

.img { display: block; width: 100%; height: auto; }

/* Atmosphere — the only kind allowed to bleed and to carry text. */
.atmosphere {
  position: relative;
  overflow: hidden;
  contain: paint;
  background: var(--ink);
}
.atmosphere > .img,
.atmosphere > .bleed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
/* The veil is what makes type legible. Never place type without it. */
.veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(22,19,17,0.30) 0%,
    rgba(22,19,17,0.62) 48%,
    rgba(22,19,17,0.96) 100%);
}

/* Evidence — a document is an object on a page, not a background.
   Never cropped: a document is shown whole or not at all. */
.evidence img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--rule);
}

/* Presence — people. Warm grey, full tonal range, no veil. */
.presence { position: relative; overflow: hidden; }
.presence img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

/* Observation — sits in the prose column, or breaks one margin wider. */
.observation { margin: var(--s5) 0; max-width: var(--m-prose); }
.observation.wide { max-width: min(100%, 62rem); }


/* ─────────────────────────────────────────────────────────────────
   5b · GLYPHS
   Oracle-bone and bronze-script marks, one per chapter. They are not
   icons. They carry no link, no tooltip, no label, and they are never
   explained on the page they open — the Symbol Register exists for
   that, and finding it is part of the reading.

   Pressed into the paper rather than printed on it: a dark copy set
   fractionally up and left, a light copy down and right, neither at
   full strength. Warm bronze, never black.
   ───────────────────────────────────────────────────────────────── */

:root {
  --emboss-dark:  rgba(84, 66, 42, 0.30);
  --emboss-light: rgba(255, 253, 248, 0.85);
  --emboss-dark-on-ink:  rgba(0, 0, 0, 0.42);
  --emboss-light-on-ink: rgba(190, 168, 130, 0.26);
}

/* The threshold: a screen of paper holding nothing but the mark. */
.threshold {
  min-height: 78vh;
  min-height: 78svh;
  display: grid;
  place-items: center;
  padding: var(--s7) var(--gutter);
  background: var(--paper);
}

.glyph {
  position: relative;
  width: clamp(5rem, 11vw, 9.5rem);
  aspect-ratio: 1;
  /* Surfacing, not arriving — a rubbing coming up out of the paper.
     Driven by CSS, not script: if anything fails, the mark is still there. */
  animation: rise 1.9s ease 0.25s both;
}
.glyph::before,
.glyph::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Longhand, not the shorthand — the `/ contain` size syntax inside a
     prefixed mask shorthand is unreliable in older WebKit. */
  -webkit-mask-image: var(--mark);
          mask-image: var(--mark);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  /* The PNGs carry the mark in their alpha channel, not their luminance. */
  mask-mode: alpha;
}
.glyph::after  { background: var(--emboss-light); transform: translate(1.5px, 1.5px); }
.glyph::before { background: var(--emboss-dark);  transform: translate(-1px, -1px); z-index: 1; }

.on-ink .glyph::after  { background: var(--emboss-light-on-ink); }
.on-ink .glyph::before { background: var(--emboss-dark-on-ink); }

@keyframes rise {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}

/* If masking is unavailable, show the mark plainly rather than nothing. */
@supports not ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .glyph::before { display: none; }
  .glyph::after {
    background: none;
    background-image: var(--mark);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.22;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glyph { animation: none; }
}


/* ─────────────────────────────────────────────────────────────────
   6 · PAGE TEMPLATES
   Seven. Every page in the site is built by stacking these.
   ───────────────────────────────────────────────────────────────── */

/* ── t-threshold ──────────────────────────────────────────────────
   Opens a chapter. Full-bleed atmosphere, eyebrow and question set
   low and left. One per page, always the first thing.            */
.t-threshold {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.t-threshold .t-body {
  position: relative;
  z-index: 2;
  padding: var(--s6) var(--gutter) var(--s6);
  max-width: 980px;
}
.t-threshold .eyebrow { margin-bottom: var(--s4); }
.t-threshold .question { color: var(--paper); }

/* ── t-prose ──────────────────────────────────────────────────────
   Long-form. One column, left, wide margins.                     */
.t-prose { padding: var(--s7) var(--gutter); }
.t-prose .lede + .prose { margin-top: var(--s4); }

/* ── t-facing ─────────────────────────────────────────────────────
   A narrow image column against text. Reversible.                */
.t-facing {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 34% 1fr;
  overflow: hidden;
}
.t-facing.flip { grid-template-columns: 1fr 34%; }
.t-facing.flip .presence { order: 2; }
.t-facing .t-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s6) max(var(--s4), 5vw);
}
.t-facing .lede,
.t-facing .prose { max-width: var(--m-narrow); }

/* ── t-plate ──────────────────────────────────────────────────────
   A photograph given a page of its own. Caption sits in the margin
   beneath it, never over it.                                     */
.t-plate { padding: var(--s6) 0 var(--s5); }
.t-plate .frame { width: 100%; overflow: hidden; }
.t-plate .frame img { display: block; width: 100%; height: auto; }
.t-plate .caption { margin-left: var(--gutter); margin-right: var(--gutter); }
/* .t-plate.inset keeps the picture off the edge — use for evidence. */
.t-plate.inset .frame { margin: 0 var(--gutter); }

/* ── t-index ──────────────────────────────────────────────────────
   A list of works, entries or credits. Rules, not cards.
   Nothing slides. Only the title changes colour.                 */
.t-index { padding: var(--s6) var(--gutter); }
.t-index .t-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s5);
  margin-bottom: var(--s5);
}
.t-index .t-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.32;
  max-width: 22ch;
}
.t-index .rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 13rem 1fr 15rem;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.row-title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  transition: color 0.35s ease;
}
.row:hover .row-title { color: var(--gold); }
.row-desc {
  font-family: var(--serif);
  font-size: var(--t-detail);
  font-style: italic;
  color: var(--on-paper-soft);
  line-height: 1.65;
  max-width: 46ch;
}

/* ── t-evidence ───────────────────────────────────────────────────
   The archive. A document, then its caption in the outer margin.
   A sequence, not a gallery wall.                                */
.t-evidence { padding: var(--s6) var(--gutter); }
.t-evidence .item {
  display: grid;
  grid-template-columns: minmax(0,1fr) 16rem;
  gap: var(--s5);
  align-items: start;
}
.t-evidence .item + .item { margin-top: var(--s6); }
.t-evidence .caption { margin-top: 0; }

/* ── t-close ──────────────────────────────────────────────────────
   How every page ends. A held line, silence, then the imprint at
   the bottom edge.                                               */
.t-close {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s6) var(--gutter) var(--s6);
  text-align: center;
}
.t-close .lead-in { margin-bottom: clamp(var(--s5), 20vh, 13rem); }
.t-close .lead-in span {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-detail);
  font-style: italic;
  line-height: 1.85;
  color: var(--on-ink-faint);
}
.t-close .call {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--on-ink);
}
.t-close .echo {
  display: block;
  margin-top: 1.15rem;
  font-family: var(--serif);
  font-size: var(--t-detail);
  font-style: italic;
  color: var(--on-ink-faint);
}
.t-close .colophon {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 2.25rem;
}


/* ─────────────────────────────────────────────────────────────────
   7 · RESPONSIVE
   Three breakpoints. The page gets narrower, never busier.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .row { grid-template-columns: 10rem 1fr; }
  .row .tag { grid-column: 2; }
  .t-evidence .item { grid-template-columns: minmax(0,1fr) 13rem; gap: var(--s4); }
}

@media (max-width: 860px) {
  .t-facing,
  .t-facing.flip { grid-template-columns: 40% 1fr; }
  .t-facing.flip .presence { order: 0; }
  .t-facing .t-body { padding: var(--s5) var(--s4); }
}

/* ═══════════════════════════════════════════════════════════════
   FIELD NOTES · Notebook integration on main pages
   A quiet editorial layer that treats the notebook as marginalia.
   Reusable component for all main pages (Seeing, Ways, Gamble, Music, Research).
   ═══════════════════════════════════════════════════════════════ */

.field-notes {
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) 0;
  max-width: var(--m-prose);
  border-top: 1px solid var(--rule);
  margin: clamp(3rem, 8vh, 5rem) 0 0;
}

.field-notes .eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: var(--s4);
}

.field-notes .intro {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.75;
  color: var(--on-paper-soft);
  margin-bottom: clamp(3rem, 8vh, 4.5rem);
}

.field-note-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: clamp(1.8rem, 4vw, 2.8rem);
  align-items: start;
  padding: clamp(2.5rem, 6vh, 3.5rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.field-note-row:hover { opacity: 0.75; }

.field-note-row .thumb {
  width: 112px;
  height: 112px;
  overflow: hidden;
  flex-shrink: 0;
}

.field-note-row .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.field-note-row .content h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.field-note-row .description {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(0.92rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: var(--mist);
}

@media (max-width: 640px) {
  .field-note-row {
    grid-template-columns: 96px 1fr;
    gap: 1.4rem;
  }
  .field-note-row .thumb {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 480px) {
  .field-notes {
    padding: clamp(3rem, 8vh, 4rem) var(--gutter) 0;
  }
  .field-note-row {
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    padding: 1.8rem 0;
  }
  .field-note-row .thumb {
    width: 80px;
    height: 80px;
  }
  .field-note-row .content h3 {
    font-size: 0.95rem;
  }
  .field-note-row .description {
    font-size: 0.88rem;
  }
}

@media (max-width: 680px) {
  :root { --s6: 5rem; --s7: 6rem; }

  .threshold { min-height: 58vh; min-height: 58svh; }

  .t-facing,
  .t-facing.flip { grid-template-columns: 1fr; min-height: 0; }
  .t-facing .presence { height: 62vw; order: 0; }
  .t-facing .t-body { padding: var(--s5) var(--gutter); }
  .t-facing .lede,
  .t-facing .prose { max-width: none; }

  .question { max-width: none; }

  .t-index .t-head { flex-direction: column; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
  .row { grid-template-columns: 1fr; gap: 0.5rem; padding: var(--s2) 0; }
  .row .tag { grid-column: 1; margin-top: 0.4rem; }

  .t-evidence .item { grid-template-columns: 1fr; gap: var(--s2); }

  .t-plate.inset .frame { margin: 0; }

  .site-index { align-items: flex-start; padding-top: var(--s6); }
  .colophon { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .t-close { padding-bottom: 9rem; }
}

/* ─────────────────────────────────────────────────────────────────
   5 · SYSTEM v2.1 — SEMANTIC TOKENS + EDITORIAL UTILITIES
   Frozen: August 2026.

   v2.0 established the token vocabulary and utility classes.
   v2.1 adds the cinematic and research components after the
   two-page promotion threshold was crossed by Film and Research:
     — .standing, .litany (cinematic / research shared)
     — .glyph-link, .frontispiece (Film + Research)
     — .composition-row, .composition-list (index archetype)
     — .onward base style (index archetype)

   Five canonical archetypes are now defined. The taxonomy is stable.
   The system stays constant so the content can move.

   GOVERNANCE RULES — read before editing
   ───────────────────────────────────────
   1. No page may introduce new clamp() values in page-level CSS.
   2. No page may introduce new prose widths.
   3. No page may introduce new spacing values.
   4. No page may introduce new link treatments.
   5. If a page genuinely needs something new, add it here first,
      with a comment explaining the editorial reason.
   6. Page-level <style> blocks may only contain:
      — hero background images,
      — page-specific layout (e.g. photo grids unique to one page),
      — overrides with a documented reason.

   The discipline of these rules is what keeps the site coherent
   five years from now. Every page is a chapter. This file is the book.

   Principle: "The system stays constant so the content can move."

   Audit sequence (Pass 1 → Pass 3):
   Pass 1: Home, The Sound of Rooms, Syurga Selvaggio
   Pass 2: Music index, Film index, Research
   Pass 3: Notebook templates, Tag pages, Archive pages

   For each page, ask:
     1. Can this become var(--text-body)?
     2. Can this become var(--measure)?
     3. Can this become var(--space-xl)?
     4. Can this become .section, .prose-block, or .gallery-pair?
   If yes, delete the page rule.
   ───────────────────────────────────────────────────────────────── */

:root {

  /* ── Typography — semantic aliases of the existing type scale ── */
  --text-hero:      var(--t-question);          /* 2.4–4rem    hero title          */
  --text-section:   var(--t-display);           /* 1.8–2.6rem  section heading     */
  --text-title:     var(--t-voice);             /* 1.4–2rem    initiative title    */
  --text-body:      var(--t-body);              /* 1–1.15rem   running prose       */
  --text-body-lg:   var(--t-lede);              /* 1.05–1.28rem  opening text      */
  --text-caption:   var(--t-detail);            /* 0.9rem      captions            */
  --text-eyebrow:   var(--t-eyebrow);           /* 0.68rem     labels              */
  --text-link-meta: 0.78rem;                    /* external links, cta             */

  /* ── Line heights — named for use ── */
  --leading-heading: 1.15;
  --leading-body:    1.9;
  --leading-tight:   1.6;
  --leading-caption: 1.65;

  /* ── Measure — prose width system ── */
  --measure:         48rem;   /* standard: body text, opening, closing        */
  --measure-wide:    54rem;   /* wider: hero subtitle, display prose           */
  --measure-gallery: 62rem;   /* gallery rows, archive lists, image containers */

  /* ── Vertical rhythm — named spatial steps ── */
  /* Use these instead of raw rem or clamp in page CSS.            */
  --space-xs:  0.75rem;      /* tight: between caption and paragraph         */
  --space-sm:  1.25rem;      /* small: between related elements               */
  --space-md:  2rem;         /* medium: paragraph spacing                     */
  --space-lg:  3.5rem;       /* large: between content blocks                 */
  --space-xl:  5rem;         /* xlarge: medium section break                  */
  --space-2xl: 7rem;         /* xxlarge: major section break                  */
  --space-3xl: 9rem;         /* xxxlarge: hero → first content                */

  /* ── Image ratios — standard across the site ── */
  /* Reference these in aspect-ratio declarations.  */
  /* --ratio-hero:     16/9  or full viewport        */
  /* --ratio-feature:  unrestricted                  */
  /* --ratio-gallery:  4/3                           */
  /* --ratio-portrait: 3/4                           */
}


/* ─────────────────────────────────────────────────────────────────
   EDITORIAL UTILITY CLASSES
   Reusable patterns. Compose these on every page.
   ───────────────────────────────────────────────────────────────── */

/* ── Prose containers ── */
.prose-block {
  padding: var(--space-3xl) var(--gutter) var(--space-2xl);
  max-width: var(--measure);
}

.prose-block-wide {
  padding: var(--space-3xl) var(--gutter) var(--space-2xl);
  max-width: var(--measure-wide);
}

.prose-block p,
.prose-block-wide p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--ink);
}

.prose-block p + p,
.prose-block-wide p + p {
  margin-top: var(--space-md);
}

.prose-block p em,
.prose-block-wide p em {
  font-style: italic;
}

/* ── Section wrapper ── */
.section {
  padding: var(--space-2xl) 0;
}

.section-tight {
  padding: var(--space-xl) 0;
}

/* ── Section heading ── */
.section-head {
  padding: 0 var(--gutter);
  margin-bottom: var(--space-lg);
}

.section-head .eyebrow-label {
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: var(--space-xs);
}

.section-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-section);
  line-height: var(--leading-heading);
  color: var(--ink);
}

/* ── Pull quote ── */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-title);
  line-height: var(--leading-tight);
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: clamp(1.2rem, 3vw, 2rem);
  margin: var(--space-lg) 0;
}

/* ── Feature image: full-width, cinematic ── */
.feature-image {
  margin: var(--space-lg) 0;
}

.feature-image img {
  display: block;
  width: 100%;
  height: clamp(320px, 50vh, 600px);
  object-fit: cover;
}

.feature-image figcaption {
  padding: var(--space-xs) var(--gutter) 0;
  font-family: var(--sans);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--mist);
}

/* ── Gallery: image + text alternating ── */
.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: var(--space-xl) var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.gallery-pair:last-child { border-bottom: none; }

.gallery-pair.reverse { direction: rtl; }
.gallery-pair.reverse > * { direction: ltr; }

.gallery-pair .pair-image {
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4/3;
}

.gallery-pair .pair-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-pair .pair-text .eyebrow-label {
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: var(--space-xs);
}

.gallery-pair .pair-text h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-title);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-md);
  color: var(--ink);
}

.gallery-pair .pair-text p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--on-paper-soft);
}

.gallery-pair .pair-text p + p {
  margin-top: var(--space-sm);
}

/* ── Closing section ── */
.closing {
  padding: var(--space-3xl) var(--gutter);
  max-width: var(--measure);
}

.closing p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--ink);
}

.closing p + p { margin-top: var(--space-md); }

.closing .closing-question {
  font-style: italic;
  font-size: var(--text-title);
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.closing .closing-tag {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 2;
  color: var(--on-paper-soft);
}

/* ── Editorial link — all external/CTA links ── */
.editorial-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-link-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.editorial-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── Section divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0 var(--gutter);
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE — gallery-pair collapses on mobile
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .gallery-pair {
    grid-template-columns: 1fr;
  }
  .gallery-pair.reverse {
    direction: ltr;
  }
  .gallery-pair .pair-image {
    aspect-ratio: 16/9;
  }
}


/* ─────────────────────────────────────────────────────────────────
   NOTEBOOK ENTRY UTILITIES
   Shared components for all notebook entries. Pages should not
   re-declare these — they inherit automatically from system.css.
   ───────────────────────────────────────────────────────────────── */

/* ── Hero metadata ── */
.breadcrumb-hero {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E8DDD0;
  opacity: 0.62;
  margin-bottom: var(--s3);
}
.breadcrumb-hero a { color: inherit; text-decoration: none; }
.breadcrumb-hero a:hover { opacity: 0.85; }
.breadcrumb-hero .sep { margin: 0 0.45em; opacity: 0.7; }

.hero-date {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-tag);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E8DDD0;
  opacity: 0.8;
  margin-bottom: var(--s3);
}

/* ── Essay section ── */
.essay {
  padding: clamp(var(--s6), 14vh, 9.5rem) var(--gutter);
}
.essay .rule { margin-bottom: var(--s5); }
.essay .prose p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
}
.essay .prose p + p { margin-top: clamp(var(--s3), 4vh, 2.1rem); }

/* ── Movement heading ── */
.movement {
  padding: clamp(var(--s3), 5vh, 2.5rem) var(--gutter) clamp(var(--s3), 3vh, 1.5rem);
}
.movement .movement-label {
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: var(--s2);
}
.movement h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-title);
  line-height: var(--leading-heading);
  color: var(--ink);
}

/* ── Video / audio embed ── */
.video-figure {
  padding: 0 var(--gutter);
  margin: 0 0 var(--space-lg) 0;
}
.video-container {
  max-width: var(--measure-gallery);
  aspect-ratio: 16 / 9;
  background: var(--mist);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.625rem;
}
.video-container video,
.video-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}
.video-caption {
  font-family: var(--sans);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--mist);
  max-width: var(--measure-gallery);
}

/* ── Entry navigation ── */
.entry-nav {
  padding: clamp(var(--s6), 14vh, 8rem) var(--gutter) var(--s7);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.entry-nav .side { display: flex; flex-direction: column; gap: 0.4rem; min-width: 10rem; }
.entry-nav .side.next { text-align: right; margin-left: auto; }
.entry-nav .label {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.entry-nav .back {
  width: 100%;
  text-align: center;
  margin-top: var(--s5);
}
.entry-nav .back a {
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
}
.entry-nav .back a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .entry-nav { flex-direction: column; }
  .entry-nav .side.next { text-align: left; margin-left: 0; }
}

/* ── Related entries grid ── */
.related-entries {
  padding: clamp(var(--s6), 12vh, 7rem) var(--gutter) 0;
  border-top: 1px solid var(--rule);
  margin: 0 var(--gutter);
}
.related-entries .eyebrow {
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: var(--s4);
  margin-left: var(--gutter);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.related-grid a { text-decoration: none; display: block; }
.related-grid .thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 0.9rem;
}
.related-grid .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}
.related-grid a:hover .thumb img { opacity: 0.75; }
.related-grid .rel-cat {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.related-grid h4 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-body);
  color: var(--ink);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .related-grid { grid-template-columns: 1fr; }
  .related-entries { margin: 0; }
}

.page-foot { padding: 0 var(--gutter) 2.25rem; }


/* ─────────────────────────────────────────────────────────────────
   INDEX ARCHETYPE UTILITIES
   Components for aggregation pages (Music, Film, Research).
   These are table-of-contents components, not essay components.
   Promotion note: added August 2026 for Music index; Film and
   Research will inherit on Pass 2.
   ───────────────────────────────────────────────────────────────── */

/* ── Composition / work row ── */
.composition-list {
  padding: 0 var(--gutter) clamp(var(--s6), 14vh, 9rem);
  max-width: var(--measure-gallery);
  border-top: 1px solid var(--rule);
}
.composition-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2.5rem, 6vh, 4rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.composition-row .comp-thumb {
  width: 160px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  flex-shrink: 0;
}
.composition-row .comp-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.composition-row:hover .comp-thumb img { opacity: 1; }
.composition-row .comp-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.composition-row .comp-thumb.placeholder span {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--mist);
  opacity: 0.3;
}
.composition-row .comp-content h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-title);
  line-height: var(--leading-heading);
  color: var(--ink);
  margin-bottom: var(--space-xs);
}
.composition-row .comp-sub {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}
.composition-row .comp-desc {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--on-paper-soft);
  max-width: 44ch;
}

@media (max-width: 640px) {
  .composition-row { grid-template-columns: 1fr; }
  .composition-row .comp-thumb { width: 100%; aspect-ratio: 16 / 9; }
}

/* ── Onward navigation ── */
.onward {
  padding: clamp(var(--s6), 24vh, 14rem) var(--gutter) var(--s7);
  border-top: 1px solid var(--rule);
}
.onward a {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-body);
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.onward a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.onward a i { font-style: normal; margin-left: 0.6rem; opacity: 0.5; }

@media (max-width: 680px) {
  .onward { padding: clamp(4rem, 16vh, 8rem) var(--gutter) var(--s7); }
}


/* ─────────────────────────────────────────────────────────────────
   CINEMATIC / RESEARCH COMPONENTS
   Promoted August 2026. Appeared on Film index and Research index —
   two-page threshold crossed. Available to all future pages.
   ───────────────────────────────────────────────────────────────── */

/* ── Glyph link: oracle bone / bronze script character link ── */
/* Appears on Film and Research. The glyph itself is page-specific; */
/* the interactive treatment is shared.                             */
.glyph-link {
  display: inline-block;
  line-height: 0;
  outline-offset: 6px;
  transition: opacity 0.4s ease;
}
.glyph-link:hover,
.glyph-link:focus-visible { opacity: 0.72; }

/* ── Frontispiece: title page after the threshold ── */
.frontispiece { padding: var(--s5) var(--gutter) var(--s7); }
.frontispiece h1 {
  font-family: var(--serif);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 1.08;
}
.frontispiece .epigraph { margin-top: 1.05rem; }

/* ── Standing line: one sentence, full-height moment of stillness ── */
/* Used in Film as a pause between sequences; in Research as a       */
/* moment of reflection between archival sections.                   */
.standing {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: var(--s6) var(--gutter);
}
.standing p {
  font-family: var(--serif);
  font-size: var(--text-section);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  max-width: 28ch;
}

/* ── Litany: one clause per line ── */
/* A sequence of short italic propositions. Each line is a breath.  */
.litany { padding: clamp(var(--s5), 10vh, 6rem) var(--gutter); }
.litany p {
  font-family: var(--serif);
  font-size: var(--text-title);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  max-width: 30ch;
}
.litany p + p { margin-top: clamp(1.4rem, 4.5vh, 2.8rem); }
.litany.lead-in p:first-child {
  font-style: normal;
  margin-bottom: var(--s3);
  color: var(--on-paper-soft);
}

@media (max-width: 680px) {
  .standing { min-height: 0; }
}

/* ── Full-width plate image ─────────────────────────────────── */
.plate-figure {
  width: 100%;
  margin: 0 0 3.5rem 0;   /* 56px: generous gap below caption to paragraph */
}

.plate-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.plate-figure figcaption {
  margin-top: 0.625rem;                       /* 10px: caption sits comfortably below image */
  padding: 0 var(--gutter);
  max-width: 46ch;
  font-family: var(--sans);
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  line-height: 1.65;
  color: var(--mist);
}

/* ── Inline/contained image ─────────────────────────────────── */
.inline-figure-wrap {
  padding: 0 var(--gutter);
  margin: 0 0 3.5rem 0;   /* 56px: generous gap below caption to paragraph */
}

.inline-figure figcaption {
  margin-top: 0.625rem;                       /* 10px: caption sits comfortably below image */
  max-width: 46ch;
  font-family: var(--sans);
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  line-height: 1.65;
  color: var(--mist);
}

/* ── Diptych (two-up) image ─────────────────────────────────── */
.diptych-wrap {
  margin: 0 0 3.5rem 0;   /* 56px: generous gap below caption to paragraph */
}

/* ── Essay section following an image block ─────────────────── */
/* Prevents double-spacing: image already has generous bottom margin,
   so essay needs only a modest top gap to begin the narrative movement. */
.plate-figure + .essay,
.inline-figure-wrap + .essay,
.diptych-wrap + .essay {
  padding-top: clamp(1rem, 2vh, 1.5rem);
}

/* ── Section gap: paragraph → next image ────────────────────── */
/* Standard essay padding already handles this via .essay padding.
   No extra rule needed unless an image immediately follows another image. */
.plate-figure + .plate-figure,
.plate-figure + .diptych-wrap,
.diptych-wrap + .plate-figure {
  margin-top: clamp(1rem, 2vh, 1.5rem);
}

/* ═══════════════════════════════════════════════════════════════
   NOTEBOOK METADATA · Filed under + Series navigation
   Global rules so every notebook entry inherits consistent
   taxonomy and series treatment automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Filed under: category + tags ──────────────────────────── */
.filed-under-links {
  padding: 0 var(--gutter) clamp(var(--s5), 10vh, 6rem);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: baseline;
}

.filed-under-links .label {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--mist);
}

.filed-under-links a {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.4s ease, border-color 0.4s ease;
}

.filed-under-links a.cat-link {
  color: var(--gold);
  border-bottom-color: transparent;
}

.filed-under-links a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── Series · sits below tags, 20px gap to distinguish from filed-under ── */
.entry-series {
  padding: clamp(var(--s6), 12vh, 7rem) var(--gutter) 0;
  margin-top: 1.25rem;   /* 20px separation above series from filed-under */
  max-width: 44rem;
}

.entry-series .series-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.entry-series .series-label a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;   /* editorial rule beneath text, not touching letters */
  transition: border-color 0.4s ease;
}

.entry-series .series-label a:hover { border-bottom-color: var(--gold); }

.entry-series .series-position {
  font-family: var(--sans);
  color: var(--mist);
  opacity: 0.75;
}

/* ── Editorial link rule: 3px gap between text and underline border ── */
/* Applied to all key navigational links in the notebook              */
.entry-nav a.title-link {
  padding-bottom: 3px;
}

.related-grid h4 a {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: color 0.4s ease, border-color 0.4s ease;
}

.related-grid h4 a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── Interleaf responsive containment ────────────────────────── */
@media (max-width: 680px) {
  .interleaf,
  .interleaf.right,
  .interleaf.wide-plate {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── Shared language switcher ─────────────────────────────────── */
.page-foot .footer-language {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--s4);
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-foot .footer-language a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--on-paper-soft);
  text-decoration: none;
  transition: color 0.35s ease;
}
.page-foot .footer-language a:hover { color: var(--gold); }
.page-foot .footer-language a[aria-current="page"] { color: var(--gold); }
.page-foot .footer-language span { color: var(--on-paper-soft); opacity: 0.45; }

.homepage-language-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 2rem 0 1.1rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.homepage-language-switcher a {
  color: rgba(248,246,241,.72);
  text-decoration: none;
  transition: color .35s ease, opacity .35s ease;
}
.homepage-language-switcher a:hover { color: rgba(248,246,241,1); }
.homepage-language-switcher a[aria-current="page"] { color: var(--gold); }
.homepage-language-switcher span { color: rgba(248,246,241,.28); }

@media (max-width: 600px) {
  .homepage-language-switcher {
    font-size: .68rem;
    gap: .55rem;
    margin-top: 1.6rem;
    margin-bottom: .9rem;
  }
}

/* Keep the menu control legible against the open paper-coloured index. */
.site-head:has(+ .site-index.open) .index-toggle { color: var(--ink) !important; }
.site-head:has(+ .site-index.open) .index-toggle:hover { color: var(--gold) !important; }

/* ── Shared language switcher ─────────────────────────────────── */
.site-index .language-switcher {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-index .language-switcher a {
  display: inline-block;
  padding: 0.25rem 0;
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-index .language-switcher span {
  font-family: var(--sans);
  font-size: var(--text-eyebrow);
  color: var(--on-paper-soft);
}

/* ── Culture del Mondo: featured initiative ───────────────────── */
.accordi-feature {
  display: grid;
  grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.55fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  padding: 0 var(--gutter);
  margin-bottom: var(--space-2xl);
}
.accordi-feature-copy .section-head {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: var(--space-md);
}
.accordi-feature-lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--ink);
  max-width: 30rem;
  margin: 0 0 var(--space-lg);
}
.accordi-feature-image { margin: 0; }
.accordi-feature-image img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 720px) {
  .accordi-feature {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
  }
}

/* ── Interleaf responsive containment ────────────────────────── */
@media (max-width: 680px) {
  .interleaf,
  .interleaf.right,
  .interleaf.wide-plate {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .interleaf picture,
  .interleaf img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
}


/* Notebook archive / tag pages — shared component */
.archive-head {
    padding: clamp(8rem, 22vh, 12rem) var(--gutter) clamp(3rem, 8vh, 5rem);
    max-width: 48rem;
  }
  .archive-head .eyebrow {
    font-family: var(--sans);
    font-size: var(--t-eyebrow);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: var(--s3);
  }
  .archive-head h1 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: var(--s4);
  }
  .archive-head p.intro {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.85;
    color: var(--on-paper-soft);
    max-width: 42rem;
  }
  .archive-body {
    padding: 0 var(--gutter) clamp(6rem, 14vh, 9rem);
    max-width: 62rem;
  }
  
  .archive-row {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(2.5rem, 6vh, 4rem) 0;
    border-bottom: 1px solid var(--rule);
    align-items: flex-start;
  }
  .archive-row:first-child { padding-top: 0; }
  .archive-row .thumb {
    flex: 0 0 auto;
    width: clamp(120px, 18vw, 220px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .archive-row .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .archive-row .row-text { flex: 1 1 auto; min-width: 0; }
  .archive-row .meta {
    font-family: var(--sans);
    font-size: var(--t-tag);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 0.6rem;
  }
  .archive-row .meta .category { color: var(--gold); }
  .archive-row h3 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.3;
    margin-bottom: 0.7rem;
  }
  .archive-row h3 a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.4s ease, border-color 0.4s ease;
  }
  .archive-row h3 a:hover { color: var(--gold); border-bottom-color: var(--gold); }
  .archive-row p.excerpt {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.8;
    color: var(--on-paper-soft);
    max-width: 46ch;
  }
  .archive-row .row-tags {
    margin-top: 0.9rem;
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
  }
  .archive-row .row-tags a {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mist);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
  }
  .archive-row .row-tags a:hover { color: var(--gold); border-bottom-color: var(--gold); }

  @media (max-width: 640px) {
    .archive-row { flex-direction: column; gap: 1.25rem; }
    .archive-row .thumb { width: 100%; aspect-ratio: 16 / 10; }
  }

  .breadcrumb {
    padding: var(--s5) var(--gutter) 0;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mist);
  }
  .breadcrumb a { color: var(--mist); text-decoration: none; }
  .breadcrumb a:hover { color: var(--gold); }
  .breadcrumb .sep { margin: 0 0.5rem; opacity: 0.5; }


/* Notebook tag index — shared component */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; }
  .tag-link {
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.2rem;
    transition: color 0.4s ease, border-color 0.4s ease;
  }
  .tag-link span { color: var(--mist); font-size: 0.75rem; }
  .tag-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ─────────────────────────────────────────────────────────────────
   PERSONAL MARK
   One quiet signature in the header. The mark is an external SVG used
   as a mask so it follows the existing paper/ink colour system.
   ───────────────────────────────────────────────────────────────── */
.site-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: clamp(3.9rem, 5.6vw, 5.4rem);
  height: 1.8rem;
  background-color: var(--on-paper-soft);
  -webkit-mask-image: var(--site-mark-image, url('/assets/images/shared/jacelyn-mark-08.svg'));
          mask-image: var(--site-mark-image, url('/assets/images/shared/jacelyn-mark-08.svg'));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.site-head[data-ground="ink"] .site-mark {
  background-color: var(--on-ink);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.wordmark .wordmark-name {
  font: inherit;
  letter-spacing: inherit;
}
.wordmark .wordmark-cn {
  margin-left: 0;
}
.home-mark {
  width: clamp(4.2rem, 6vw, 5.8rem);
}

@media (max-width: 680px) {
  .site-mark {
    width: 4.1rem;
    height: 1.55rem;
  }
  .wordmark {
    gap: 0.42rem;
  }
}
.site-mark.mark-01 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-01.svg'); }
.site-mark.mark-02 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-02.svg'); }
.site-mark.mark-03 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-03.svg'); }
.site-mark.mark-04 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-04.svg'); }
.site-mark.mark-05 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-05.svg'); }
.site-mark.mark-06 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-06.svg'); }
.site-mark.mark-07 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-07.svg'); }
.site-mark.mark-08 { --site-mark-image: url('/assets/images/shared/jacelyn-mark-08.svg'); }