/* =====================================================================
   AusraTheFool — design system  (mockup v0.1)
   A digital cabinet of curiosities, rendered as an illuminated manuscript.
   Day = serious (default) · Night = lax (reading dark-mode).
   Brand source of truth: brand-repository/02_SUB_BRANDS/AusraTheFool (visual-direction v2)
   ===================================================================== */

/* ---- Fonts: Lora (display) + Satoshi (body). FiptySerif = SVG drop-caps only. ---- */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');
/* Satoshi via Fontshare */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
/* Noto Sans — pan-Unicode safety net ("no tofu"): covers scripts our reading fonts don't.
   We don't fight the system — we fall back to it gracefully. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&display=swap');

/* ---- Brand palette (raw) ---- */
:root{
  --ink:#13140F; --linen:#FAF6F4;
  --sage:#C4C9B5; --sage-dark:#868C73;
  --plum:#B19ACA; --plum-dark:#4D2761;
  --sage-glow:#D6E3AA; --plum-glow:#CBA9F5;

  /* pan-Unicode fallback chain: native CJK/system fonts catch anything Lora/Satoshi can't. */
  --uni: 'Noto Sans', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
         'Microsoft YaHei', 'Malgun Gothic', 'Noto Sans CJK SC', 'Apple Color Emoji', sans-serif;
  --serif:'Lora', Georgia, 'Noto Serif', var(--uni), serif;
  --sans:'Satoshi', var(--uni);

  --measure: 68ch;           /* reading column */
  --gutter: clamp(1.5rem, 6vw, 5rem);
  --rhythm: clamp(1.6rem, 1.2rem + .9vw, 2.1rem);   /* generous paragraph air */
  --reading-scale: 1;        /* the visible text-size toggle multiplies this */

  --ease: cubic-bezier(.4,.1,.2,1);
}

/* ---- DAY (default) — sage-warm, plum-illuminated ---- */
:root, [data-theme="day"]{
  --bg: var(--linen);
  --bg-raised: color-mix(in srgb, var(--sage) 10%, var(--linen));
  --text: var(--ink);
  --text-soft: color-mix(in srgb, var(--ink) 88%, var(--linen));   /* near-ink: no grey drift */
  --text-faint: color-mix(in srgb, var(--ink) 58%, var(--linen));  /* only for true micro-labels */
  --sage-accent: var(--sage-dark);           /* theme-correct shades for warren theming */
  --plum-accent: var(--plum-dark);
  --accent: var(--sage-dark);                /* PRIMARY accent = sage family (plants) */
  --accent-2: var(--plum-dark);              /* secondary / structural = plum */
  --rule: color-mix(in srgb, var(--sage-dark) 34%, transparent);   /* sage-cast hairline */
  --rule-strong: color-mix(in srgb, var(--sage-dark) 58%, transparent);
  --field: color-mix(in srgb, var(--sage) 34%, var(--linen));      /* warm sage wash */
  --panel: color-mix(in srgb, var(--sage) 18%, var(--linen));      /* subtle section wash */
  --radius: 0px;                     /* square in day */
  --grain-opacity: 0;
  --glow: none;
  --dc-color: var(--plum-dark);      /* illuminated initial in ATF Plum (brand) */
  --illumination: var(--plum-dark);
}

/* ---- NIGHT (lax / reading dark-mode) ---- */
[data-theme="night"]{
  --bg: var(--ink);
  --bg-raised: #1b1c15;
  --text: var(--linen);
  --text-soft: color-mix(in srgb, var(--linen) 90%, var(--ink));   /* near-linen: no grey drift */
  --text-faint: color-mix(in srgb, var(--linen) 58%, var(--ink));
  --sage-accent: var(--sage);
  --plum-accent: var(--plum);
  --accent: var(--plum);
  --accent-2: var(--sage);
  --rule: color-mix(in srgb, var(--linen) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--linen) 34%, transparent);
  --field: color-mix(in srgb, var(--ink) 70%, var(--plum-dark));
  --panel: color-mix(in srgb, var(--ink) 82%, var(--plum-dark));
  --radius: 12px;                    /* rounded at night */
  --grain-opacity: .035;
  --glow: 0 0 30px rgba(203,169,245,.18), 0 0 80px rgba(214,227,170,.07);
  --dc-color: var(--plum-glow);      /* illuminated initial in Light Plum (brand) */
  --illumination: var(--plum-glow);
}
/* follow the OS unless the visitor chose */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg: var(--ink); --bg-raised:#1b1c15; --text:var(--linen);
    --text-soft: color-mix(in srgb, var(--linen) 90%, var(--ink));
    --text-faint: color-mix(in srgb, var(--linen) 58%, var(--ink));
    --sage-accent: var(--sage); --plum-accent: var(--plum);
    --accent: var(--plum); --accent-2: var(--sage);
    --rule: color-mix(in srgb, var(--linen) 16%, transparent);
    --rule-strong: color-mix(in srgb, var(--linen) 34%, transparent);
    --field: color-mix(in srgb, var(--ink) 70%, var(--plum-dark));
    --panel: color-mix(in srgb, var(--ink) 82%, var(--plum-dark));
    --radius:12px; --grain-opacity:.035;
    --glow:0 0 30px rgba(203,169,245,.18),0 0 80px rgba(214,227,170,.07);
    --dc-color: var(--plum-glow); --illumination: var(--plum-glow);
  }
}

/* ===================== base ===================== */
*{ box-sizing:border-box; }
/* Universal guard against the page becoming sideways-scrollable/pannable on
   mobile — the "have to pinch-zoom out to put it back" bug. Any element that
   overflows the viewport width even slightly (a fixed-position element wider
   than 100vw, a rogue margin) makes the WHOLE page horizontally scrollable
   unless html clamps it here. Belt-and-suspenders with fixing the actual
   overflowing elements (see .floatie below) — this is what stops the NEXT
   one of these from becoming a wide, hard-to-diagnose bug again.
   overflow-x on html ONLY — giving body a non-visible overflow too turns body
   into a SECOND scroll container nested inside html's, which silently breaks
   every position:sticky element on the page (the in-article Contents rail
   stopped sticking at all — it just scrolled off with the rest of the page). */
html{ overflow-x:hidden; max-width:100%; }
body{ max-width:100%; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* tighter side margins on a phone — more reading width, less wasted gutter, so
   the justified body sets cleanly (a narrow, wide-guttered column justifies
   into big word-gaps otherwise) */
@media (max-width:44rem){ :root{ --gutter:1.15rem; } }
/* ---- per-warren accent themes: 80% primary + 20% secondary, picked from brand palette
   for closest semantic fit. Set data-warren on <body>. Theme-aware shades via --*-accent. ---- */
[data-warren="botany"], [data-warren="plants"]{ --accent:var(--sage-accent); --accent-2:var(--plum-accent); }
[data-warren="language"]{ --accent:var(--plum-accent); --accent-2:var(--sage-accent); }
[data-warren="design"]{ --accent:var(--plum-accent); --accent-2:var(--sage-accent); }
[data-warren="media"], [data-warren="attention"]{ --accent:var(--plum-accent); --accent-2:var(--sage-accent); }
[data-warren="fool"]{ --accent:var(--plum-accent); --accent-2:var(--sage-accent); }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:400;
  font-size:calc(clamp(1.02rem,.62rem + .92vw,1.16rem) * var(--reading-scale));
  line-height:1.75; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .5s var(--ease), color .5s var(--ease);
}
/* film grain — night only */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url('../img/noise-grain.svg');
  background-size:180px;
  transition:opacity .5s var(--ease);
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--bg); color:var(--text);
  padding:.6rem 1rem; border:1px solid var(--rule-strong); z-index:10000; }
.skip:focus{ left:1rem; top:1rem; }

/* ===================== type ===================== */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; font-style:normal; line-height:1.14;
  margin:0 0 .5em; letter-spacing:-.005em; }
.display{ font-style:italic; font-weight:500; }       /* showpiece titles only */
h1{ font-size:calc(clamp(2.3rem,1.4rem + 3.4vw,4.2rem) * var(--reading-scale)); line-height:1.07; }
h2{ font-size:calc(clamp(1.5rem,1.1rem + 1.7vw,2.15rem) * var(--reading-scale)); margin-top:2.6em; }
h3{ font-size:calc(clamp(1.15rem,1rem + .8vw,1.5rem) * var(--reading-scale)); margin-top:2em; }
p{ margin:0 0 var(--rhythm); }
em{ font-style:italic; }
strong{ font-weight:600; }
.lede{ font-size:1.15em; color:var(--text); }          /* reading text = ink, never grey */
.kicker{ font-family:var(--sans); font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; font-size:.72rem; color:var(--accent-2); }

/* Article section headings: upright, bold, the warren's primary colour (book hierarchy). */
.flow h2, h2.rubric, .hole h2{ font-style:normal; font-weight:650; color:var(--accent); }
.flow h3, .hole h3{ font-style:normal; font-weight:600; color:var(--text); }

/* ===================== layout ===================== */
.wrap{ width:min(100% - 2*var(--gutter), 78rem); margin-inline:auto; }
.col{ width:min(100% - 2*var(--gutter), var(--measure)); margin-inline:auto; }
.flow > * + *{ margin-top:var(--rhythm); }
/* The article's flowing DESCENT prose is fully justified (both edges flush —
   the editorial/book look Ausra asked for). Everything else stays left-aligned:
   headings, meta, the epigraph, and the apparatus sections (glossary, sources,
   names) — justifying a list or a definition grid looks broken, so those are
   explicitly held ragged-left below. */
.hole .col{ text-align:left; }
.hole .flow p{ text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.hole .glossary p, .hole .sources-full p, .hole .names-list p, .hole .names-note,
.hole .colophon p, .pocket .card p, .hole .errata{ text-align:left; hyphens:manual; }
hr.rule{ border:0; border-top:1px solid var(--rule); margin:3rem 0; }
.center{ text-align:center; }

/* Diacritic / non-Latin fallback (INCLUSIVITY rule — see src/lib/inline.ts wrapUni).
   Any word carrying a mark the reading fonts lack (ā ī ū ṛ ṃ ḥ ṅ ñ ṭ ḍ ṇ ś ṣ …, or
   Cyrillic / Greek / CJK / Devanagari) is wrapped in .uni so the pan-Unicode chain renders
   it instead of tofu. Keeps the surrounding line's size/weight; only the font swaps. */
.uni{ font-family:var(--uni); font-weight:inherit; font-style:inherit;
  font-size:.94em;         /* Noto's x-height towers over Lora/Satoshi — at 1em (worse at the
                              old 1.02em) non-Latin words read LOUD, thick and oversized.
                              Down-size so Cyrillic/CJK/IAST sit quietly inside the line. */
  letter-spacing:0; }
/* damp apparent weight: Noto 600 looks far heavier than Lora 600 — step bold contexts down */
strong .uni, b .uni, h1 .uni, h2 .uni, h3 .uni{ font-weight:500; }
.gloss .uni, .conv .uni, .tier .uni, .flag .uni{ font-size:.96em; }

/* Ruby annotations — furigana-style dual text (transliteration / second meaning riding a word).
   Raw <ruby><rt> passes straight through the markdown renderer; this just makes it look native
   to the illuminated-manuscript system instead of the browser's plain default. */
ruby{ ruby-position:over; }
rt{ font-family:var(--sans); font-weight:500; font-size:.52em; letter-spacing:.02em;
  color:var(--illumination); text-transform:none; user-select:none; }
rp{ display:none; } /* fallback parens — hidden since every target browser supports <ruby> */

/* ===================== site header ===================== */
.site-head{ position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.1) blur(8px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.85rem; }
.brand{ display:inline-flex; align-items:center; }
.brand .logo{ height:2.1rem; width:auto; display:none; }
/* desktop: full logotype, theme-swapped (mark variants hidden until mobile) */
.logo-full.logo-day{ display:block; }
[data-theme="night"] .logo-full.logo-day{ display:none; }
[data-theme="night"] .logo-full.logo-night{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .logo-full.logo-day{ display:none; }
  :root:not([data-theme]) .logo-full.logo-night{ display:block; }
}
/* legacy fallback mark (if a page still uses text brand) */
.brand .mark{ width:1.4rem; height:1.4rem; background:var(--text);
  -webkit-mask:url('../icons/compass-rose-light.svg') center/contain no-repeat;
  mask:url('../icons/compass-rose-light.svg') center/contain no-repeat; }

.nav{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.7rem); font-size:.92rem;
  margin-left:auto; }
.nav a{ color:var(--text-soft); position:relative; padding-block:.2rem; white-space:nowrap; }
.nav a:hover{ color:var(--text); }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--accent); transition:right .3s var(--ease); }
.nav a:hover::after{ right:0; }

/* the accessibility cluster — text-size + day/night, grouped, kept together */
.controls{ display:inline-flex; align-items:center; gap:.55rem; }

/* mobile header — the top row is logo · toggles · hamburger (nav links live in
   the hamburger dropdown). The search is a THIN full-width bar on its own line
   BENEATH that row — it was too cramped squeezed into the row itself. */
.menu-toggle{ display:none; }
.mobile-menu{ display:none; }
@media (max-width:44rem){
  .site-head .wrap{ flex-wrap:wrap; gap:.5rem .6rem; padding-block:.6rem; }
  .brand{ order:1; flex:none; }
  .brand .logo-full{ display:none !important; }
  .brand .logo-mark{ height:1.7rem; }
  .logo-mark.logo-day{ display:block; }
  [data-theme="night"] .logo-mark.logo-day{ display:none; }
  [data-theme="night"] .logo-mark.logo-night{ display:block; }
  /* search drops to its own thin row below (order last, full width). 16px font
     is deliberate: any smaller and iOS auto-zooms the whole page on focus and
     never zooms back — the "it zooms and I have to pinch out" bug. */
  .seek{ order:5; flex:1 1 100%; max-width:none; margin:0; min-width:0; }
  .seek input{ font-size:16px; padding-block:.34rem; }
  /* only the nav LINKS move into the hamburger dropdown — the reading controls
     (text size + day/night) stay right on the top bar, always reachable */
  .site-head > .wrap > .nav{ display:none; }
  .site-head > .wrap > .controls{ order:3; flex:none; gap:.4rem; margin-left:auto; }
  .menu-toggle{ order:4; flex:none; display:grid; place-items:center;
    width:2.1rem; height:2.1rem; padding:0; border-radius:999px;
    background:var(--field); border:1px solid color-mix(in srgb, var(--sage-accent) 26%, transparent);
    cursor:pointer; }
  .menu-bars, .menu-bars::before, .menu-bars::after{
    display:block; width:1.05rem; height:1.5px; background:var(--text); border-radius:2px;
    transition:transform .25s var(--ease), opacity .25s var(--ease); }
  .menu-bars{ position:relative; }
  .menu-bars::before, .menu-bars::after{ content:""; position:absolute; left:0; }
  .menu-bars::before{ top:-.4rem; }
  .menu-bars::after{ top:.4rem; }
  .menu-toggle[aria-expanded="true"] .menu-bars{ background:transparent; }
  .menu-toggle[aria-expanded="true"] .menu-bars::before{ top:0; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-bars::after{ top:0; transform:rotate(-45deg); }

  .mobile-menu{ display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--rule);
    box-shadow:0 14px 30px rgba(18,20,15,.16);
    padding:.4rem var(--gutter) 1.1rem; }
  .mobile-menu[hidden]{ display:none; }
  .mobile-menu nav{ display:flex; flex-direction:column; }
  .mobile-menu nav a{ padding:.7rem .1rem; color:var(--text); font-size:1.02rem;
    border-bottom:1px solid var(--rule); }
  .mobile-menu nav a:last-child{ border-bottom:0; }
}
@media (max-width:44rem) and (prefers-color-scheme:dark){
  :root:not([data-theme]) .logo-mark.logo-day{ display:none; }
  :root:not([data-theme]) .logo-mark.logo-night{ display:block; }
}

/* reading controls — two sage pills of the SAME height (text-size · day-night) */
.controls .toggle, .controls .sizer{ height:2rem; box-sizing:border-box; border-radius:999px;
  background:var(--field); border:1px solid color-mix(in srgb, var(--sage-accent) 26%, transparent); }
/* day/night toggle — the pill is a FIXED size (never resizes); the rabbit
   slides from one side to the other and the label swaps to the opposite side
   with it, matching Ausra's own toggle artwork exactly: DayForm has the
   rabbit at the left with "Day" to its right; NightForm has the rabbit at
   the right with "Night" to its left. Only the rabbit's fills, its position,
   and the word change — the pill itself never moves or resizes. */
.toggle{ position:relative; width:5.5rem; cursor:pointer; padding:0; color:var(--text-soft); }
.toggle:hover{ border-color:var(--sage-accent); color:var(--text); }
.toggle .lbl{ position:absolute; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:.82rem; white-space:nowrap;
  left:2.15rem; right:.6rem; text-align:left;
  transition:left .45s var(--ease), right .45s var(--ease), text-align .45s; }
[data-theme="night"] .toggle .lbl{ left:.6rem; right:2.15rem; text-align:right; }
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) .toggle .lbl{ left:.6rem; right:2.15rem; text-align:right; }
}
/* the rabbit toggle — ONE rabbit; its two fills morph between forms on toggle.
   day = sage circle · plum rabbit   ·   night = plum circle · sage rabbit */
.toggle .rabbit{ position:absolute; top:50%; left:.35rem; width:22px; height:22px;
  display:block; overflow:visible;
  transition:left .45s var(--ease), transform .4s var(--ease);
  transform:translateY(-50%); }
[data-theme="night"] .toggle .rabbit{ left:calc(100% - 22px - .35rem); }
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) .toggle .rabbit{ left:calc(100% - 22px - .35rem); }
}
/* day = sage circle · dark-plum rabbit  ·  night = dark-plum circle · sage rabbit
   (matches the mascot artwork exactly — never light plum). Unscoped (not just
   .toggle .rabbit) so any rabbit on the site — the footer's included — shares
   the same colour-morph rule. */
.rabbit .r-back{ fill:var(--sage); transition:fill .5s var(--ease); }
.rabbit .r-body{ fill:var(--plum-dark); transition:fill .5s var(--ease); }
[data-theme="night"] .rabbit .r-back{ fill:var(--plum-dark); }
[data-theme="night"] .rabbit .r-body{ fill:var(--sage); }
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) .rabbit .r-back{ fill:var(--plum-dark); }
  :root:not([data-theme]) .rabbit .r-body{ fill:var(--sage); }
}
/* the rabbit hops in place on hover/active — its slide transform (left) is
   separate from this bounce transform, so they don't fight each other */
.toggle:hover .rabbit{ transform:translateY(-50%) translateY(-1px) rotate(-8deg) scale(1.12); }
.toggle:active .rabbit{ transform:translateY(-50%) translateY(1px) rotate(7deg) scale(.9); }
/* on the narrowest screens the word label drops; the pill shrinks to the rabbit alone */
@media (max-width:24rem){ .toggle{ width:2rem; } .toggle .lbl{ display:none; } }

/* reading-size control (the visible text-size toggle) */
.sizer{ display:inline-flex; align-items:center; overflow:hidden; }
.sizer button{ background:none; border:0; cursor:pointer; color:var(--text-soft); font-family:var(--serif);
  padding:0 .6rem; line-height:1; height:100%; }
.sizer button:hover{ color:var(--accent); }
.sizer .s{ font-size:.78rem; } .sizer .l{ font-size:1.05rem; }
.sizer .mid{ width:1px; align-self:stretch; background:var(--rule); }

/* ===================== HERO / landing ===================== */
.hero{ padding-block:clamp(3rem,8vw,7rem) clamp(2rem,5vw,4rem); position:relative; }
.hero .eyebrow{ display:flex; align-items:center; gap:.6rem; justify-content:center;
  color:var(--text-faint); }
.hero h1{ margin-top:.4rem; }
.hero .sub{ max-width:46ch; margin-inline:auto; color:var(--text-soft); font-size:1.15rem; }

/* the Fool — character card on landing */
.character{ display:grid; gap:1.6rem; align-items:start; }
@media (min-width:48rem){ .character{ grid-template-columns: 1fr; } }

/* invitation block */
.invite{ border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--glow);
  padding:clamp(1.4rem,4vw,2.4rem); background:var(--field);
  position:relative; overflow:hidden; }
[data-theme="night"] .invite, :root:not([data-theme]) .invite{
  background-image:linear-gradient(135deg, color-mix(in srgb,var(--sage) 14%,transparent), transparent 60%);
  border-color:color-mix(in srgb,var(--plum) 30%, transparent);
}
.invite h2{ margin-top:0; }
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans);
  font-weight:500; font-size:1rem; padding:.7rem 1.2rem; border:1px solid var(--text);
  border-radius:var(--radius); color:var(--text); transition:.25s var(--ease);
  box-shadow:var(--glow); }
.btn:hover{ background:var(--text); color:var(--bg); gap:.85rem; }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

/* ===================== the cabinet (specimen grid) ===================== */
.cabinet{ display:grid; gap:0; background:var(--bg);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
@media (min-width:40rem){ .cabinet{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:62rem){ .cabinet{ grid-template-columns:repeat(3,1fr); } }
.specimen{ background:var(--bg); padding:1.6rem 1.5rem 1.7rem; display:flex; flex-direction:column;
  gap:.6rem; min-height:13rem; transition:background .3s var(--ease); position:relative;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:-1px -1px 0 0; }
.specimen:hover{ background:var(--field); }
.specimen .dom{ display:flex; align-items:center; gap:.45rem; }
.specimen .dom .ic{ width:1rem; height:1rem; background:var(--accent-2);
  -webkit-mask:var(--src) center/contain no-repeat; mask:var(--src) center/contain no-repeat; }
.specimen h3{ font-size:1.45rem; margin:.1rem 0 0; line-height:1.1; }
.specimen .latin{ font-style:italic; color:var(--text-faint); font-size:.9rem; }
.specimen .pull{ color:var(--text-soft); font-size:.97rem; margin-top:auto; }
.specimen .threadrow{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }

/* thread chips — restrained, hairline */
.thread{ font-family:var(--sans); font-size:.74rem; letter-spacing:.04em;
  color:var(--text-soft); border:1px solid var(--rule); border-radius:999px;
  padding:.15rem .6rem; transition:.2s var(--ease); }
.thread:hover{ border-color:var(--accent); color:var(--text); }

/* tier badge */
.tier{ font-family:var(--sans); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:3px; padding:.05rem .4rem; }

/* ===================== ARTICLE (a hole) ===================== */
.hole{ padding-block:clamp(2rem,5vw,4rem) 5rem; }
.hole .epigraph{ font-family:var(--serif); font-style:italic; color:var(--illumination);
  font-size:1.15rem; line-height:1.5; max-width:50ch; border-left:2px solid var(--illumination);
  padding-left:1.3rem; margin:0 0 3rem; }
.hole .epigraph cite{ display:block; font-style:normal; font-family:var(--sans);
  font-size:.8rem; letter-spacing:.04em; color:var(--accent-2); margin-top:.7rem; }
.hole-title{ margin:0 0 .4rem; }
.hole-meta{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center;
  font-size:.82rem; color:var(--text-faint); font-family:var(--sans);
  padding-bottom:1.6rem; border-bottom:1px solid var(--rule); margin-bottom:2.4rem; }
.hole-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-faint); }

/* section label (manuscript rubric).
   NOT flex: under display:flex a heading's mixed inline content (text + <em>) splits into
   separate flex items and stacks in fragments ("From bread-dough to / pâte brisée / : the …").
   Block + inline .n keeps the title flowing as one sentence. */
.rubric{ display:block; }
.rubric .n{ font-family:var(--serif); font-style:italic; color:var(--illumination);
  font-size:.95rem; margin-right:.55rem; }

/* ---- DROP CAP (illuminated initial) — controlled float + stepped indent ----
   The real first letter stays in the DOM (copy/paste + screen readers intact), hidden via
   ::first-letter{font-size:0}. .dropcap is a rectangular FLOAT (the text reserve, --core-w wide ×
   --core-h tall); the glyph is painted on ::before, sized --g-w/--g-h and seated with --g-y, free
   to overflow the reserve. For letters whose flourish juts out on one line we add a SECOND float,
   .dropstep, that drops below the cap (clear:left) and reserves a different width for that single
   line — a hand-placed "shaped wrap" (E,K,L step OUT on line 3; X,Y nest IN, half-width, on line 4).
   CSS shape-outside auto-wrap was tried and removed: it needed endless tuning and broke per width.

   EVERYTHING IS IN em — this is what keeps it from fraying. The prose font-size scales with the
   reading-size toggle AND a viewport clamp (see body{}), and line-height is unitless (1.75), so a
   line is always 1.75em. Sizing the cap in em means it scales WITH the text, and an em height is a
   constant number of lines at any reading size or viewport width. --core-h ≈ 3.6em ≈ 3 lines;
   2-line caps (stepped E,K,L) use ≈ 3.24em; a step line is ≈ 1.5–1.8em (≈ 1 line). Never use rem
   or px here. Re-tune at /dropcap-sheet.html (it mirrors the prose font exactly).
   Knobs:  --core-w how close prose starts · --core-h lines reserved · --g-y seat · --step-w/-h the stepped line. */
.lead{ position:relative; }
.lead::first-letter{ font-size:0; }                 /* hide native letter, keep in DOM */
.dropcap{ float:left; position:relative;
  width:var(--core-w,3em); height:var(--core-h,3.63em);
  margin:var(--core-mt,.39em) var(--core-gap,.49em) 0 0; }
.dropcap::before{ content:"";
  position:absolute; left:var(--g-x,0); top:var(--g-y,-.18em);
  width:var(--g-w,3.3em); height:var(--g-h,5em);
  background:var(--dc-color);
  -webkit-mask:var(--dc-src) left top/contain no-repeat;
          mask:var(--dc-src) left top/contain no-repeat; }
/* the stepped line: a 0-size float by default; a letter sets --step-w/--step-h (em) to reserve one
   line at a different indent (it clears below the cap, so it lands on the next free line). */
.dropstep{ float:left; clear:left; width:var(--step-w,0); height:var(--step-h,0); }
/* Per-letter map — ALL 26 (em). --g-w/--g-h = glyph size (uniform scale; C/I/O a notch larger so the
   round/narrow caps read the same optical size; U,V,W,X,Y,Z a little larger per Ausra).
   --core-w = how close prose starts · --core-h = lines reserved (≈3.24em≈2 lines for the stepped
   E,K,L; ≈3.63em≈3 lines otherwise) · --g-y = vertical seat (more negative = higher). */
.dropcap[data-letter="A"]{ --core-w:4.61em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="A"]::before{ --dc-src:url('../dropcaps/A.svg'); --g-w:6.63em; --g-h:5.35em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="B"]{ --core-w:3.06em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="B"]::before{ --dc-src:url('../dropcaps/B.svg'); --g-w:3.06em; --g-h:4.94em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="C"]{ --core-w:4.00em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="C"]::before{ --dc-src:url('../dropcaps/C.svg'); --g-w:4.00em; --g-h:4.68em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="D"]{ --core-w:4.33em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="D"]::before{ --dc-src:url('../dropcaps/D.svg'); --g-w:4.33em; --g-h:4.76em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="E"]{ --core-w:3.82em; --core-h:3.24em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="E"]::before{ --dc-src:url('../dropcaps/E.svg'); --g-w:5.83em; --g-h:4.97em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="F"]{ --core-w:3.47em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="F"]::before{ --dc-src:url('../dropcaps/F.svg'); --g-w:3.47em; --g-h:5.20em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="G"]{ --core-w:3.90em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="G"]::before{ --dc-src:url('../dropcaps/G.svg'); --g-w:3.90em; --g-h:5.35em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="H"]{ --core-w:4.46em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="H"]::before{ --dc-src:url('../dropcaps/H.svg'); --g-w:4.46em; --g-h:5.25em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="I"]{ --core-w:1.94em; --core-h:3.63em; --core-gap:.59em; --core-mt:.39em; }
.dropcap[data-letter="I"]::before{ --dc-src:url('../dropcaps/I.svg'); --g-w:1.94em; --g-h:4.47em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="J"]{ --core-w:3.62em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="J"]::before{ --dc-src:url('../dropcaps/J.svg'); --g-w:3.62em; --g-h:5.35em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="K"]{ --core-w:3.92em; --core-h:3.24em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="K"]::before{ --dc-src:url('../dropcaps/K.svg'); --g-w:6.22em; --g-h:4.94em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="L"]{ --core-w:2.55em; --core-h:3.24em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="L"]::before{ --dc-src:url('../dropcaps/L.svg'); --g-w:4.76em; --g-h:5.20em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="M"]{ --core-w:5.83em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="M"]::before{ --dc-src:url('../dropcaps/M.svg'); --g-w:5.83em; --g-h:4.76em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="N"]{ --core-w:4.85em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="N"]::before{ --dc-src:url('../dropcaps/N.svg'); --g-w:6.40em; --g-h:5.45em; --g-x:0; --g-y:-.49em; }
.dropcap[data-letter="O"]{ --core-w:4.65em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="O"]::before{ --dc-src:url('../dropcaps/O.svg'); --g-w:4.65em; --g-h:4.71em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="P"]{ --core-w:3.24em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="P"]::before{ --dc-src:url('../dropcaps/P.svg'); --g-w:3.24em; --g-h:4.94em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="Q"]{ --core-w:4.02em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="Q"]::before{ --dc-src:url('../dropcaps/Q.svg'); --g-w:5.10em; --g-h:4.97em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="R"]{ --core-w:3.92em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="R"]::before{ --dc-src:url('../dropcaps/R.svg'); --g-w:5.43em; --g-h:5.23em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="S"]{ --core-w:3.53em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="S"]::before{ --dc-src:url('../dropcaps/S.svg'); --g-w:4.56em; --g-h:5.02em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="T"]{ --core-w:3.31em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="T"]::before{ --dc-src:url('../dropcaps/T.svg'); --g-w:3.31em; --g-h:5.27em; --g-x:0; --g-y:-.18em; }
.dropcap[data-letter="U"]{ --core-w:4.26em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="U"]::before{ --dc-src:url('../dropcaps/U.svg'); --g-w:4.26em; --g-h:5.72em; --g-x:0; --g-y:-.88em; }
.dropcap[data-letter="V"]{ --core-w:4.10em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="V"]::before{ --dc-src:url('../dropcaps/V.svg'); --g-w:4.10em; --g-h:6.48em; --g-x:0; --g-y:-.98em; }
.dropcap[data-letter="W"]{ --core-w:5.80em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="W"]::before{ --dc-src:url('../dropcaps/W.svg'); --g-w:5.80em; --g-h:6.48em; --g-x:0; --g-y:-.93em; }
.dropcap[data-letter="X"]{ --core-w:3.92em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="X"]::before{ --dc-src:url('../dropcaps/X.svg'); --g-w:4.49em; --g-h:7.32em; --g-x:0; --g-y:-.78em; }
.dropcap[data-letter="Y"]{ --core-w:3.92em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="Y"]::before{ --dc-src:url('../dropcaps/Y.svg'); --g-w:4.26em; --g-h:7.34em; --g-x:0; --g-y:-.78em; }
.dropcap[data-letter="Z"]{ --core-w:4.90em; --core-h:3.63em; --core-gap:.49em; --core-mt:.39em; }
.dropcap[data-letter="Z"]::before{ --dc-src:url('../dropcaps/Z.svg'); --g-w:4.90em; --g-h:5.10em; --g-x:0; --g-y:-.05em; }
/* stepped-indent lines (mimic a shaped wrap): E,K,L step OUT on line 3; X,Y nest IN on line 4 */
.dropstep[data-letter="E"]{ --step-w:5.49em; --step-h:1.47em; }
.dropstep[data-letter="K"]{ --step-w:5.88em; --step-h:1.47em; }
.dropstep[data-letter="L"]{ --step-w:4.51em; --step-h:1.47em; }
.dropstep[data-letter="X"]{ --step-w:2.65em; --step-h:1.81em; }
.dropstep[data-letter="Y"]{ --step-w:2.35em; --step-h:1.81em; }

/* inline glossing — the house signature: **term** *(plain explanation)* */
.gloss{ position:relative; }
.gloss > .term{ border-bottom:1px dotted var(--accent); cursor:help;
  text-decoration:none; color:inherit; }
.gloss > .note{
  position:absolute; left:0; bottom:calc(100% + .5rem); z-index:20;
  width:min(22rem, 70vw); background:var(--bg); color:var(--text-soft);
  border:1px solid var(--rule-strong); border-radius:var(--radius); box-shadow:var(--glow);
  padding:.7rem .85rem; font-size:.86rem; line-height:1.5; font-family:var(--sans);
  opacity:0; visibility:hidden; transform:translateY(4px); transition:.22s var(--ease);
}
.gloss > .note::before{ content:"⌖ "; color:var(--accent); }
.gloss:hover > .note, .gloss:focus-within > .note, .gloss.open > .note{
  opacity:1; visibility:visible; transform:none; }
/* On a phone an absolute popover anchored to the word runs off the screen when
   the word sits near the right edge (unreadable). Pin it as a fixed bottom
   sheet instead — always fully in the viewport, whatever word opened it. */
@media (max-width:44rem){
  .gloss > .note, .conv > .note{
    position:fixed; left:1rem; right:1rem; bottom:1rem; top:auto;
    width:auto; max-width:none; max-height:45vh; overflow:auto;
    transform:translateY(8px); }
  .gloss:focus-within > .note, .gloss.open > .note,
  .conv:focus-within > .note, .conv.open > .note{ transform:none; }
}

/* ---- recipe deck: tiered cards, one visible, swipe / tab / step through ---- */
.recipe-deck{ margin:1.6rem 0 var(--rhythm); border:1px solid var(--rule-strong);
  background:var(--bg); }
.deck-tabs{ display:flex; flex-wrap:wrap; gap:.35rem; padding:.7rem .7rem 0; }
.deck-tab{ font-family:var(--sans); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.38rem .75rem; border:1px solid var(--rule);
  background:none; color:var(--text-soft); cursor:pointer; }
.deck-tab.on{ border-color:var(--accent); color:var(--accent); }
.deck-track{ display:flex; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; transition:height .25s ease; }
.deck-track::-webkit-scrollbar{ display:none; }
.recipe-card{ flex:0 0 100%; min-width:100%; scroll-snap-align:start;
  padding:1.1rem 1.3rem 1.3rem; box-sizing:border-box; }
.recipe-card .card-tier{ font-family:var(--sans); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-2); margin:0 0 .8rem; }
.deck-nav{ display:flex; align-items:center; justify-content:space-between;
  padding:.4rem .8rem .7rem; border-top:1px solid var(--rule); }
.deck-nav button{ background:none; border:1px solid var(--rule-strong); color:var(--text);
  font-size:.95rem; line-height:1; padding:.35rem .9rem; cursor:pointer; }
.deck-nav button:hover{ border-color:var(--accent); color:var(--accent); }
.deck-count{ font-family:var(--sans); font-size:.7rem; letter-spacing:.12em;
  color:var(--text-faint); }

/* any table scrolls within its own box, never pushing the page sideways */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }

/* the names, across languages — labelled entries (no fixed columns, so nothing
   can overflow a phone; the term WRAPS, which a <ruby> base would not). Each has
   a small language kicker, the term below it, then the note. Deliberately unlike
   the glossary's two-column term/definition grid so the two don't read alike:
   here a left sage hairline + a kicker label, a serif term, a plain note. */
.names-list{ margin:1rem 0 var(--rhythm); display:flex; flex-direction:column; gap:.2rem; }
.name-entry{ padding:.7rem 0 .9rem 1rem; border-left:2px solid color-mix(in srgb,var(--sage-dark) 40%,transparent); }
.name-lang{ display:block; font-family:var(--sans); font-size:.62rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--sage-dark); margin-bottom:.15rem; }
[data-theme="night"] .name-lang{ color:var(--sage-glow); }
@media (prefers-color-scheme:dark){ :root:not([data-theme]) .name-lang{ color:var(--sage-glow); } }
.name-term{ display:block; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.18rem; line-height:1.4; color:var(--illumination); overflow-wrap:break-word; }
.name-note{ margin:.35rem 0 0; color:var(--text-soft); font-size:.9rem; line-height:1.6;
  text-align:left; overflow-wrap:break-word; }

/* names / glossary table */
.ledger-table{ width:100%; border-collapse:collapse; font-size:.95rem; margin:1rem 0 var(--rhythm); }
.ledger-table caption{ text-align:left; color:var(--text-faint); font-family:var(--sans);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding-bottom:.6rem; }
.ledger-table th, .ledger-table td{ text-align:left; padding:.6rem .8rem;
  border-bottom:1px solid var(--rule); vertical-align:top; }
.ledger-table th{ font-family:var(--sans); font-weight:500; color:var(--text-soft);
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.ledger-table .native{ font-size:1.05rem; }

/* the PROVENANCE LEDGER — the colophon (a sealed thing you open) */
.colophon{ border:1px solid var(--rule-strong); border-radius:var(--radius);
  background:var(--field); margin:3rem 0; box-shadow:var(--glow); }
.colophon > summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem;
  display:flex; align-items:center; gap:.8rem; font-family:var(--sans); }
.colophon > summary::-webkit-details-marker{ display:none; }
.colophon .seal{ width:1.5rem; height:1.5rem; flex:none; background:var(--accent);
  -webkit-mask:url('../icons/scroll-light.svg') center/contain no-repeat;
          mask:url('../icons/scroll-light.svg') center/contain no-repeat; }
.colophon .summ-t{ font-weight:500; }
.colophon .summ-sub{ color:var(--text-faint); font-size:.85rem; }
.colophon .chev{ margin-left:auto; transition:transform .3s var(--ease); color:var(--text-faint); }
.colophon[open] .chev{ transform:rotate(90deg); }
.colophon .body{ padding:0 1.3rem 1.3rem; border-top:1px solid var(--rule); }
.colophon dl{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem; margin:1.1rem 0; font-size:.9rem; }
.colophon dt{ color:var(--text-faint); font-family:var(--sans); font-size:.8rem; letter-spacing:.04em; }
.colophon dd{ margin:0; }
.colophon ol.sources{ list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-direction:column; gap:.55rem; }
.colophon ol.sources li{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  padding-bottom:.55rem; border-bottom:1px solid var(--rule); font-size:.88rem; }
.colophon ol.sources a{ border-bottom:1px solid var(--rule); }
.colophon ol.sources a:hover{ border-color:var(--accent); }
.flag{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2);
  border:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent); border-radius:3px; padding:0 .35rem; }

/* contested / honesty block */
.contested{ border-left:2px solid var(--accent-2); padding-left:1.1rem; }

/* errata — the engine's own margin-note, confessing a mistake in its own research.
   Sage, not the warren's usual accent — a deliberate visual break from the rest
   of the piece, so it reads as a different voice speaking. */
.errata{ border-left:2px solid var(--sage-dark); padding:.2rem 0 .2rem 1.1rem;
  margin:2.4rem 0; background:color-mix(in srgb, var(--sage) 10%, transparent); }
.errata-label{ margin:0 0 .5rem; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sage-dark); }
.errata-label span{ text-transform:none; letter-spacing:normal; font-style:italic; color:var(--text-faint); }
[data-theme="night"] .errata{ background:color-mix(in srgb, var(--sage-dark) 14%, transparent); }
[data-theme="night"] .errata-label{ color:var(--sage-glow); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .errata{ background:color-mix(in srgb, var(--sage-dark) 14%, transparent); }
  :root:not([data-theme]) .errata-label{ color:var(--sage-glow); }
}

/* the Fool's close */
.fools-close{ font-family:var(--serif); font-style:italic; font-size:1.25rem;
  text-align:center; max-width:40ch; margin:3.5rem auto 0; color:var(--text); line-height:1.4; }
.fools-close .by{ display:block; font-family:var(--sans); font-style:normal; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-top:1rem; }

/* original-work plate */
.plate{ margin:3rem 0; }
/* an image is never flush against the next one — consecutive plates always get a break */
.vif-plates > * + *{ margin-top:1.75rem; }
.plate + .plate{ margin-top:2.5rem; }
.plate figure{ margin:0; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
  background:var(--field); box-shadow:var(--glow); }
.plate .ph{ aspect-ratio:3/2; display:grid; place-items:center; color:var(--text-faint);
  font-family:var(--sans); font-size:.85rem; text-align:center; gap:.4rem;
  background:repeating-linear-gradient(45deg,transparent,transparent 14px,var(--rule) 14px,var(--rule) 15px); }
.plate figcaption{ padding:.8rem 1rem; font-size:.85rem; color:var(--text-soft); border-top:1px solid var(--rule); }

/* a POCKET OF WONDER — one hand-placed delight (here: a tucked field-note "envelope") */
.pocket{ position:relative; margin:2.5rem 0; }
.pocket > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--serif); font-style:italic; color:var(--illumination);
  border-bottom:1px dashed var(--illumination); padding-bottom:.15rem; }
.pocket > summary::-webkit-details-marker{ display:none; }
.pocket .env{ width:1.2rem; height:1.2rem; background:currentColor;
  -webkit-mask:url('../icons/sparkle-light.svg') center/contain no-repeat;
          mask:url('../icons/sparkle-light.svg') center/contain no-repeat; }
.pocket .card{ margin-top:1rem; padding:1.2rem 1.3rem; border:1px solid var(--rule-strong);
  border-radius:var(--radius); background:var(--bg);
  box-shadow:var(--glow); font-size:.95rem; color:var(--text-soft); }
.pocket[open] .card{ animation:unfold .4s var(--ease); }
@keyframes unfold{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* threads-forward (doorways) */
.doorways{ margin-top:4rem; border-top:1px solid var(--rule); padding-top:2rem; }
.doorways h3{ margin-top:0; }
.doorrow{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ===================== footer ===================== */
.site-foot{ border-top:1px solid var(--rule); margin-top:5rem; padding-block:3rem;
  color:var(--text-faint); font-size:.88rem; }
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:space-between; }
.site-foot a{ color:var(--text-soft); }
.site-foot a:hover{ color:var(--text); }
.placeholder-note{ font-family:var(--sans); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-2); border:1px dashed color-mix(in srgb,var(--accent-2) 45%,transparent);
  border-radius:3px; padding:.05rem .4rem; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  body::after{ display:none; }
}

/* simple placeholder page */
.stub{ min-height:60vh; display:grid; place-items:center; text-align:center; padding:4rem 1rem; }
.stub .col{ }
.stub p{ color:var(--text-soft); }

/* ============================================================
   v0.2 additions
   ============================================================ */

/* warren chips read plum (the structural jewel) */
.thread{ border-color:color-mix(in srgb,var(--accent-2) 30%,transparent); }
.thread:hover{ border-color:var(--accent-2); color:var(--text);
  background:color-mix(in srgb,var(--accent-2) 8%,transparent); }

/* ---- AI × human provenance marker (we are not ashamed) ---- */
.madeby{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  font-family:var(--sans); font-size:.8rem; color:var(--text-soft);
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:.6rem .9rem; background:var(--panel); box-shadow:var(--glow); }
.madeby .tag{ display:inline-flex; align-items:center; gap:.4rem; }
.madeby .swatch{ width:.7rem; height:.7rem; border-radius:50%; flex:none; }
.madeby .swatch.ai{ background:var(--accent); }
.madeby .swatch.human{ background:var(--accent-2); }
.madeby a{ border-bottom:1px solid var(--rule); }
.madeby a:hover{ border-color:var(--accent); }
/* the inverse, for human/original works */
.madeby.is-human{ border-left-color:var(--accent-2); }

/* ---- in-article navigation (Contents) — sticky rail on wide, collapsible on narrow ---- */
.hole-grid{ width:min(100% - 2*var(--gutter), 78rem); margin-inline:auto; }
.toc{ border:1px solid var(--rule); border-radius:var(--radius); background:var(--panel);
  margin:0 0 2.5rem; box-shadow:var(--glow); }
.toc > summary{ list-style:none; cursor:pointer; padding:.7rem 1rem; font-family:var(--sans);
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft);
  display:flex; align-items:center; gap:.5rem; }
.toc > summary::-webkit-details-marker{ display:none; }
.toc > summary .ic{ width:1rem; height:1rem; background:var(--accent);
  -webkit-mask:url('../icons/compass-rose-light.svg') center/contain no-repeat;
          mask:url('../icons/compass-rose-light.svg') center/contain no-repeat; }
.toc ol{ list-style:none; margin:0; padding:.2rem 1rem 1rem; counter-reset:toc;
  display:flex; flex-direction:column; gap:.45rem; font-size:.92rem; }
.toc ol li{ counter-increment:toc; }
.toc ol a{ color:var(--text-soft); display:flex; gap:.6rem; }
.toc ol a::before{ content:counter(toc,lower-roman) "."; color:var(--illumination);
  font-family:var(--serif); font-style:italic; min-width:1.6rem; }
.toc ol a:hover{ color:var(--text); }
.hole h2[id], .hole section[id]{ scroll-margin-top:5rem; }

@media (min-width:75rem){
  /* two columns: the Contents rail spans both rows on the left; the header and
     the body stack in the right column — so the title top-aligns with the rail
     ("Contents on the same line as the logo"). */
  .hole-grid{ display:grid; grid-template-columns:15rem minmax(0,var(--measure));
    grid-template-areas:"toc head" "toc body"; column-gap:3.5rem; row-gap:0;
    justify-content:center; align-items:start; }
  .hole-head{ grid-area:head; margin:0; width:100%; }
  .hole-body{ grid-area:body; margin:0; width:100%; }
  /* flush against the sticky header's own height (63px, the same figure used
     for the homepage hero) — the Contents rail reads as sitting on the same
     line as the logo, and holds there without a separate settle-in offset. */
  .toc-rail{ grid-area:toc; position:sticky; top:63px; }
  .toc{ margin:0; }
  .toc[open] > summary{ border-bottom:1px solid var(--rule); }
}
@media (max-width:75rem){
  /* stacked: epigraph + title (head) first, then the collapsible Contents,
     then the body — matches the DOM order. */
  .toc-rail{ width:min(100% - 2*var(--gutter), var(--measure)); margin-inline:auto; }
  .hole-head{ margin-bottom:1.5rem; }
}

/* ---- the consolidated glossary (every term, gathered) ---- */
.glossary dl{ display:grid; gap:0; margin:1rem 0 0;
  border-top:1px solid var(--rule); }
.glossary div{ display:grid; grid-template-columns:minmax(8rem,12rem) 1fr; gap:1.2rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule); }
@media (max-width:34rem){ .glossary div{ grid-template-columns:1fr; gap:.2rem; } }
.glossary dt{ font-family:var(--serif); font-style:italic; color:var(--illumination); font-size:1.05rem; }
.glossary dd{ margin:0; color:var(--text-soft); font-size:.95rem; }

/* ---- tier legend (what Tier 1/2/3 mean) ---- */
.tier-legend{ display:grid; gap:.7rem; margin:1.2rem 0 var(--rhythm); }
.tier-legend .row{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  padding:.7rem .9rem; border:1px solid var(--rule); border-radius:var(--radius); background:var(--panel); }
.tier-legend .row .tier{ margin-top:.1rem; }
.tier-legend .row b{ font-weight:600; }
.tier-legend .row span{ color:var(--text-soft); font-size:.92rem; }

/* ---- full sources, grouped ---- */
.sources-full{ margin-top:1rem; }
.sources-full h3{ font-size:1.05rem; margin:1.6rem 0 .6rem; color:var(--text-soft); }
.sources-full ol{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; }
.sources-full li{ padding-bottom:.7rem; border-bottom:1px solid var(--rule); font-size:.92rem; }
.sources-full li .src-top{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; }
.sources-full a{ border-bottom:1px solid var(--rule); color:var(--text); }
.sources-full a:hover{ border-color:var(--accent); }
.sources-full .note{ color:var(--text-faint); font-size:.85rem; display:block; margin-top:.25rem; font-style:italic; }

/* Sources gets a SAGE cast so it reads as its own zone, distinct from the plum
   body. The simple view up top is name + link + tier only (no explanations);
   the full list with notes lives behind the "Every source" details. */
.sources-full{ --accent:var(--sage-dark); border-left:2px solid color-mix(in srgb,var(--sage-dark) 45%,transparent);
  padding-left:1.1rem; }
.src-simple{ list-style:none; padding:0; margin:.4rem 0 0; display:flex; flex-direction:column; gap:.55rem; }
.src-simple li{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  padding-bottom:.55rem; border-bottom:1px solid var(--rule); font-size:.92rem; }
.src-simple a{ border-bottom:1px solid color-mix(in srgb,var(--sage-dark) 40%,transparent); color:var(--text); }
.src-simple a:hover{ border-color:var(--sage-dark); }
.sources-full .tier{ color:var(--sage-dark); }
[data-theme="night"] .sources-full .tier{ color:var(--sage-glow); }
@media (prefers-color-scheme:dark){ :root:not([data-theme]) .sources-full .tier{ color:var(--sage-glow); } }
/* provenance kept short — a scannable colophon, sage seal to match sources */
.prov-concise{ --accent:var(--sage-dark); }
.prov-concise .seal{ background:var(--sage-dark); }
.prov-concise dl{ grid-template-columns:auto 1fr; }

/* ---- rotating quote (landing hero) ---- */
.rotator{ position:relative; min-height:7.5em; display:grid; }
.rotator .q{ grid-area:1/1; opacity:0; transition:opacity .9s var(--ease);
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,.9rem+1vw,1.5rem);
  line-height:1.45; color:var(--text); }
.rotator .q.on{ opacity:1; }
.rotator .q cite{ display:block; font-style:normal; font-family:var(--sans); font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-top:.9rem; }
@media (prefers-reduced-motion:reduce){ .rotator .q{ transition:none; } }

/* a soft sage halo behind the hero mark (day gets color; flat, per brand) */
.hero{ isolation:isolate; }
.hero .halo{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 30%, color-mix(in srgb,var(--sage) 26%,transparent), transparent 70%); }
[data-theme="night"] .hero .halo, :root:not([data-theme]) .hero .halo{
  background:radial-gradient(60% 50% at 50% 30%, color-mix(in srgb,var(--plum) 16%,transparent), transparent 70%); }

/* recent descents — an evenly-filled, centered grid (cards span the full width so they read
   justified, never bunched to one side). Wraps down to 1–2 columns on narrow screens. */
.rolodex{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.rolodex .specimen{ border-right:1px solid var(--rule); border-bottom:0; }
.rolodex .specimen:last-child{ border-right:0; }
@media (max-width:44rem){
  .rolodex{ grid-template-columns:1fr; }
  .rolodex .specimen{ border-right:0; border-bottom:1px solid var(--rule); }
  .rolodex .specimen:last-child{ border-bottom:0; }
}

/* ---- unit-conversion inline tag (inclusivity): same gesture as a gloss, sage underline ---- */
.conv{ position:relative; }
.conv > .u{ border-bottom:1px dotted var(--accent-2); cursor:help; }
.conv > .note{
  position:absolute; left:0; bottom:calc(100% + .45rem); z-index:20;
  width:max-content; max-width:18rem; background:var(--bg); color:var(--text);
  border:1px solid var(--rule-strong); border-radius:var(--radius); box-shadow:var(--glow);
  padding:.45rem .7rem; font-size:.85rem; line-height:1.45; font-family:var(--sans);
  opacity:0; visibility:hidden; transform:translateY(3px); transition:.2s var(--ease); }
.conv > .note::before{ content:"≈ "; color:var(--accent-2); }
.conv:hover > .note, .conv:focus-within > .note, .conv.open > .note{ opacity:1; visibility:visible; transform:none; }

/* more air around the in-article nav so it doesn't crowd the text */
.toc{ margin:0 0 3.5rem; }
.toc ol{ gap:.6rem; padding:.4rem 1.2rem 1.2rem; }
@media (min-width:75rem){
  .hole-grid{ grid-template-columns:14rem minmax(0,var(--measure)); gap:5rem; }
  .toc{ margin:0; }
}
@media (max-width:75rem){ .toc{ margin:0 auto 4rem; } }

/* drop-cap stays clearly the largest mark — bump leading so flourishes have room */
.lead{ line-height:1.78; }

/* let the original-work image live quietly — no loud chapter label */
.plate.quiet{ margin:3.5rem 0; }
.plate.quiet .ph{ aspect-ratio:4/3; }
.plate.quiet figcaption{ font-size:.82rem; color:var(--text-faint); font-style:italic; }
.plate.quiet .mark{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); margin-bottom:.6rem; }
.plate.quiet .mark .dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--accent-2); }

/* provenance shown open & first; sources visible with a deeper dive */
.colophon.is-open{ background:var(--panel); }
.colophon.is-open .prov-head{ display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.3rem;
  border-bottom:1px solid var(--rule); font-family:var(--sans); }
.colophon.is-open .prov-head .seal{ width:1.4rem; height:1.4rem; flex:none; background:var(--accent);
  -webkit-mask:url('../icons/scroll-light.svg') center/contain no-repeat;
          mask:url('../icons/scroll-light.svg') center/contain no-repeat; }
.more-sources[open] > summary{ color:var(--accent); }
.more-sources > summary{ list-style:none; cursor:pointer; font-family:var(--sans); font-size:.9rem;
  color:var(--accent-2); padding:.6rem 0; display:inline-flex; gap:.4rem; align-items:center; }
.more-sources > summary::-webkit-details-marker{ display:none; }
.more-sources > summary::before{ content:"+"; font-size:1.1rem; line-height:1; }
.more-sources[open] > summary::before{ content:"–"; }

/* ---- THE FOOL'S HAND — her own written pieces. A different creature from the wiki:
       serif body, warm, wide-margined, no apparatus. The seam is stated, never hidden. ---- */
.piece-page .piece, .piece-page .piece-list{ max-width: 62ch; margin: 0 auto; padding: 0 var(--gutter); }
.piece-head{ text-align: center; margin: 3rem 0 3.5rem; }
.piece-head .kicker{ letter-spacing: .14em; }
.piece-byline{ font-family: var(--serif); font-style: italic; color: var(--text-soft); font-size: .95rem; }
.human-mark{ font-style: normal; font-family: var(--sans); font-size: .72rem; border: 1px solid var(--accent-2);
  color: var(--accent-2); border-radius: 999px; padding: .1rem .55rem; vertical-align: 2px; }
.piece-body{ font-family: var(--serif); font-size: 1.13rem; line-height: 1.9; color: var(--text); }
.piece-body p{ margin: 0 0 var(--rhythm); }
.piece-body h2, .piece-body h3{ font-family: var(--serif); font-weight: 500; color: var(--accent-2);
  margin: 2.6rem 0 1rem; font-style: normal; }
.piece-body blockquote{ border-left: 2px solid var(--accent); margin-left: 0; padding-left: 1.2rem;
  font-style: italic; color: var(--text-soft); }
.piece-seam{ margin: 4rem 0 2rem; border-top: 1px solid var(--rule); padding-top: 1.2rem;
  font-size: .88rem; color: var(--text-soft); }
.piece-list{ display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.5rem; }
.piece-item{ display: block; text-decoration: none; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; background: var(--panel); }
.piece-item:hover{ border-color: var(--accent); }
.piece-title{ display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--text); }
.piece-summary{ display: block; font-family: var(--serif); font-style: italic; color: var(--text-soft); margin: .3rem 0; }
.piece-item .piece-byline{ font-size: .85rem; }

/* ---- WORKS — developed plates from the Darkroom ---- */
.plate-grid{ display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); margin-top: 2rem; }
.plate-card{ border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.plate-card img{ display: block; width: 100%; height: auto; }
.plate-card figcaption{ padding: .7rem .9rem; font-size: .85rem; color: var(--text-soft); }
.plate-card .threadrow{ margin-top: .4rem; }


/* ===================== HOMEPAGE — the descent ===================== */
/* The scenes ARE the theme here: their colours are the artwork's own and hold
   in day and night. Text ON the art uses hard values, not theme vars, so
   neither mode can strand it. Below scene 1 the world is night. The page's
   own base paint is a one-off plum-black. */
.fh{ --deep:#161118; --deep-soft:#e9e5de; --deep-faint:#b9b4a8; }

/* homepage chrome: no header seam, footer sits on the deep base */
body:has(.fh){ background:#161118; }
body:has(.fh) .site-head{ border-bottom-color:transparent; }
/* NB: hardcoded colours, not var(--deep-soft/--deep-faint) — those custom
   properties are scoped to .fh (the <main>), and .site-foot is a SIBLING of
   it, not a descendant, so they're invisible here. Referencing them silently
   drops the whole declaration and falls back to the INHERITED value instead
   (body's own themed --text/--rule) — a near-black "color" on this near-black
   background (copy unreadable) was the same class of bug as the "crazy bright
   line" border this comment already covers below. */
body:has(.fh) .site-foot{ background:#161118; color:#b9b4a8;
  border-top-color:rgba(233,229,222,.13); margin-top:1.5rem; }
body:has(.fh) .site-foot p{ color:#b9b4a8; }
body:has(.fh) .site-foot a{ color:#cbb3e6; }
body:has(.fh) .site-foot .logo-day{ display:none; }
body:has(.fh) .site-foot .logo-night{ display:block; }

/* the iconic gradient — sage → plum, applied to category glyphs via mask */
.grad-ic{ display:inline-block; width:1.15rem; height:1.15rem; flex:none;
  background:linear-gradient(140deg, #868C73 0%, #B19ACA 55%, #4D2761 100%);
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; }

/* the little "Fall in ▽" cues */
.fh .cue{ display:inline-flex; flex-direction:column; align-items:center; gap:.15rem;
  font-family:var(--sans); font-size:.9rem; letter-spacing:.07em; color:#6a6076; text-decoration:none; }
.fh .cue .tri{ font-size:.8rem; transition:transform .3s var(--ease); }
.fh .cue:hover .tri{ transform:translateY(3px); }

/* ---- scene 1: the cliff coast. The image is shown IN FULL, top to bottom —
   it's an in-flow child, so it sets the section's height. The hero, the figure
   and the descents are laid OVER it as absolute layers. The figure layer takes
   the same box (width + aspect) as the image, so the silhouette (a % child)
   stays locked onto its baked-in twin at any width. */
.scene1{ position:relative; overflow:hidden; z-index:0; background:#161118; }
/* NB: z-index:0 (not isolation:isolate) scopes the children's stacking — isolated
   stacking contexts with a large image child hit a Chromium first-paint skip that
   dropped scene 1 to black on the first dark-mode paint. */
.scene1 picture{ display:block; }
.s1-bg{ display:block; width:100%; height:auto; }  /* the whole coast; sets the height */
/* the figure layer shares Scene 1's EXACT 2009×3010 canvas (pixel-registered —
   not a guessed percentage), so it's laid on with a plain inset over a box of
   the same aspect ratio; the silhouette image itself fills it edge to edge.
   Desktop only: on mobile the figure is baked into Ausra's own dedicated
   mobile composition (see the <picture> source), so this is hidden there
   rather than overlaid at the wrong coordinates. */
.s1-front{ position:absolute; top:0; left:0; width:100%; aspect-ratio:2009/3010;
  z-index:4; pointer-events:none; }
.s1-sil{ position:absolute; inset:0; width:100%; height:100%; }
/* a whisper of a fade only at the very bottom edge, so the full image meets the
   deep section without a hard seam (it does NOT crop the image) */
.scene1::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5%;
  background:linear-gradient(to bottom, rgba(22,17,24,0), #161118); z-index:5; pointer-events:none; }

/* the rabbit floatie — fixed to the VIEWPORT; wall bleeds off right + bottom so
   its canvas edge is never exposed. Bigger, with a slow breath; home.js adds the
   scroll parallax + zoom and retires it behind the viewport.
   .floatie (fixed) carries opacity only. .floatie-scroll (a normal, unpositioned
   child) carries the JS scroll transform. .floatie-scroll img carries its own
   separate CSS breathing animation. Three layers so nothing ever combines
   position:fixed with a transform on the SAME element — see the comment on
   this markup in index.astro for why that matters on mobile Safari. */
.floatie{ position:fixed; z-index:2; right:0; --fl:min(104vw, 60rem);
  width:var(--fl); top:calc(108svh - var(--fl));
  will-change:opacity; pointer-events:none; }
.floatie-scroll{ transform-origin:100% 100%; will-change:transform; }
.floatie-scroll img{ display:block; width:100%; height:auto; transform-origin:100% 100%;
  animation:floatie-breathe 8s var(--ease) infinite; }
@keyframes floatie-breathe{ 0%,100%{ transform:scale(1) translateY(0);} 50%{ transform:scale(1.016) translateY(-.8%);} }
@media (prefers-reduced-motion:reduce){ .floatie-scroll img{ animation:none; } }

/* the mobile floatie — NOT fixed at all; an in-flow (well, absolute-within-
   scene1) element near the bottom of the hero that scrolls away with the
   page naturally. Its own art fades to transparent at the bottom edge, so it
   needs no JS opacity fade to avoid a hard cutoff. Hidden on desktop. */
.floatie-mobile{ display:none; }

/* the expansive hero — floating in the sky over the top of the image.
   Height is 100svh MINUS the sticky header's own height (63px) — .scene1
   starts below the header, so a plain 100svh hero ran 63px past the actual
   visible fold, meaning "Fall in" (pinned to the hero's bottom) was already
   scrolled just out of view on load. This puts it right at the fold instead. */
.fh-hero{ position:absolute; top:0; left:0; right:0; z-index:3;
  height:min(calc(100svh - 63px), 96%);  /* capped against the scene itself — see .fh-descents note below */
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:clamp(4rem,10svh,7rem) var(--gutter) 4.5rem; }
.fh-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; margin:0;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:#7c7466; }
.fool-mark{ color:#4d2761; font-size:1rem; line-height:1; }
.fh-hero h1{ margin:1rem 0 0; color:#4d2761; font-style:italic; font-weight:500;
  font-size:clamp(2.9rem, 1.8rem + 4.6vw, 5.2rem); line-height:1.03; text-wrap:balance;
  text-shadow:0 1px 30px rgba(250,246,244,.5); }
.fh-quotes{ max-width:42ch; margin:2.1rem auto 0; min-height:6.5em;
  font-family:var(--serif); font-style:italic; font-size:1.08rem; }
.fh-quotes .q{ margin:0; color:#5a5240; }  /* fixed on the artwork — beats the themed .rotator colour */
.fh-hero .cue{ position:absolute; bottom:1.7rem; left:50%; transform:translateX(-50%); color:#6a6076; }

/* the descents — positioned to Ausra's OWN layout, pulled straight from the
   Affinity doc (Desktop View!!! mockup): "Latest Descents" heading top sits
   at 34.1% of Scene 1's height, the cards run 37.1%→80.0% — just above the
   figure's feet (83.5%). bottom:20% reproduces that block's floor exactly.
   The top is the LARGER of that 34% design position and one full viewport
   height (+ a little air) — so on short/wide viewports where 34% would fall
   inside the first screen, the heading stays below the fold and "Fall in"
   (pinned to the hero's own bottom, one viewport down) is what a visitor
   sees first, not the heading peeking in early. */
.fh-descents{ position:absolute; z-index:3; left:0; right:0;
  /* clamp, not max(): on a viewport taller than the scene render itself (rare,
     but real — a tall/narrow window), a plain max() with 100svh can push top
     past the scene's own height and collapse the box to nothing. 55% caps it
     so there's always room left for the cards above bottom:20%. */
  top:clamp(34%, 100svh - 63px + 1.5rem, 55%); bottom:20%;
  display:flex; flex-direction:column; align-items:center; }
.fh-descents h2{ flex:none; text-align:center; color:#4d2761; font-style:italic; font-weight:500;
  font-size:clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); margin:0 0 1.2rem;
  text-shadow:0 1px 24px rgba(250,246,244,.55); }
/* flex-start (not flex-end): with justify-content:flex-end, a card list
   taller than its box doesn't reliably start scrolled to show the right
   content — the newest card was rendering clipped to a blank sliver. Normal
   top-down order + scroll is predictable and, now that the box is sized to
   Ausra's real measurements, the cards fill it without needing to overflow. */
.rolo{ list-style:none; margin:0; padding:.25rem; width:min(100% - 1.4rem, 34rem);
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:clamp(1.2rem,2vw,1.9rem);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(177,154,202,.5) transparent; }
.rolo::-webkit-scrollbar{ width:6px; }
.rolo::-webkit-scrollbar-thumb{ background:rgba(177,154,202,.5); border-radius:6px; }
.rolo > li{ flex:none; }
.rolo-card{ position:relative; display:flex; flex-direction:column; gap:.4rem;
  background:rgba(250,246,244,.78); border:1px solid rgba(77,39,97,.16);
  padding:2rem 2.1rem 2.05rem 2.5rem; color:#12140f; text-decoration:none;
  box-shadow:0 10px 34px rgba(18,20,15,.16);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.rolo-card:hover{ background:rgba(250,246,244,.94); border-color:rgba(77,39,97,.42); transform:translateY(-2px); }
.rolo-card::before{ content:""; position:absolute; left:1.15rem; top:2.3rem; bottom:2.3rem; width:2px;
  border-radius:2px; background:linear-gradient(#4d2761, #b19aca); }
.rolo-dom{ position:absolute; top:1.5rem; right:1.7rem; display:inline-flex; align-items:center; gap:.42rem; }
.dom-label{ font-family:var(--sans); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:#6d5a80; }
.rolo-title{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:1.65rem; line-height:1.16;
  color:#241a2b; padding-right:5rem; }
.rolo-latin{ font-family:var(--serif); font-style:italic; font-size:1rem; color:#6d6455; }
.rolo-pull{ font-family:var(--sans); font-size:.9rem; line-height:1.6; color:#463f52; margin-top:.45rem; }
.s1-more{ display:flex; margin:1.8rem auto 0; width:max-content; color:#cfc9bd; }

/* ---- the deep — below scene 1, night in both themes ---- */
.fh-deep{ position:relative; z-index:6; background:var(--deep); color:var(--deep-soft); }
.fh-why{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4.5rem);
  width:min(100% - 2*var(--gutter), 64rem); margin-inline:auto; padding-block:clamp(4rem, 9vw, 7.5rem); }
@media (max-width:52rem){ .fh-why{ grid-template-columns:1fr; } }
.fh-why-col p{ margin:0 0 1.2rem; font-size:.98rem; line-height:1.75; color:var(--deep-soft); }
.fh-why-col em{ color:var(--deep-faint); }
.fh-why-col strong{ color:#cbb3e6; font-weight:600; }
.fh-why-col a{ color:#cbb3e6; border-bottom:1px solid rgba(203,179,230,.4); }
.fh-why-col a:hover{ border-bottom-color:#cbb3e6; }

.scene2{ margin:0; line-height:0; }
.scene2 img{ width:100%; height:auto; display:block; }

.fh-doors{ display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  width:min(100% - 2*var(--gutter), 74rem); margin-inline:auto; padding-block:clamp(3rem, 6vw, 5rem); }
.fh-doors a{ flex:1 1 12rem; padding:1.3rem 1.4rem; text-decoration:none; margin:-.5px;
  border:1px solid rgba(233,229,222,.14); text-align:center;
  display:flex; flex-direction:column; align-items:center;
  transition:border-color .25s var(--ease), background .25s var(--ease); }
.fh-doors a:hover{ border-color:rgba(203,179,230,.5); background:rgba(203,179,230,.05); }
/* icon stacked ABOVE the title, both centred — the icon+title-on-one-line
   version read as clutter; this is the clean centred column she asked for. */
.door-head{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.door-ic{ width:1.5rem; height:1.5rem; flex:none; }
.fh-doors strong{ display:block; font-family:var(--serif); font-style:italic; font-weight:500;
  color:#cbb3e6; font-size:1.1rem; }
.fh-doors span{ display:block; font-family:var(--sans); font-size:.8rem; color:var(--deep-faint); margin-top:.4rem; }

/* scene 3 — the tunnel: tumble into a random hole */
.scene3{ position:relative; line-height:0; }
.scene3 img{ width:100%; height:clamp(26rem, 66vw, 62rem); object-fit:cover; display:block; }
.s3-cta{ position:absolute; inset:0; display:grid; place-items:center; }
.s3-tumble{ display:flex; align-items:center; text-decoration:none;
  color:#f3efe8; padding:1.1rem 2.6rem; border-radius:999px; text-align:center;
  background:radial-gradient(closest-side, rgba(18,20,15,.42), rgba(18,20,15,0));
  transition:transform .35s var(--ease); }
.s3-tumble:hover{ transform:scale(1.05); }
.s3-word{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,1.05rem+.9vw,1.7rem); }

.fh-colophon{ margin:0; padding:2.2rem var(--gutter) 1rem; text-align:center; font-size:.8rem; color:var(--deep-faint); }
.fh-colophon a{ color:#cbb3e6; border-bottom:1px solid rgba(203,179,230,.35); }

/* the plain-text index — visually hidden, fully present for readers of every kind */
.sr-index{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ===================== the header search (seek) ===================== */
.seek{ position:relative; flex:1 1 auto; max-width:30rem; margin-inline:clamp(.6rem, 2vw, 1.6rem); }
.seek input{ width:100%; box-sizing:border-box; font-family:var(--sans); font-size:.9rem; color:var(--text);
  background:color-mix(in srgb, var(--bg) 60%, transparent); border:1px solid var(--rule);
  border-radius:999px; padding:.42rem 1.05rem; outline-offset:2px; }
.seek input::placeholder{ color:var(--text-faint); font-style:italic; }
.seek input:focus{ border-color:var(--rule-strong); }
.seek input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.seek-panel{ position:absolute; top:calc(100% + .55rem); left:0; right:0; z-index:70;
  background:var(--bg); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(18,20,15,.22); max-height:min(26rem, 60vh); overflow:auto; }
.seek-list{ list-style:none; margin:0; padding:.35rem; }
.seek-list a{ display:flex; flex-direction:column; gap:.08rem; padding:.55rem .7rem;
  text-decoration:none; border-radius:calc(var(--radius) / 2); }
.seek-list a:hover, .seek-list a:focus{ background:var(--field); }
.seek-t{ font-family:var(--serif); color:var(--text); font-size:.98rem; }
.seek-t em{ color:var(--text-faint); font-size:.88em; }
.seek-e{ font-family:var(--sans); font-size:.78rem; color:var(--text-soft); }
.seek-kind{ font-family:var(--sans); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); }
.seek-miss{ padding:1rem 1.1rem 1.15rem; }
.seek-sorry{ margin:0; font-family:var(--serif); font-style:italic; color:var(--text); }
.seek-tease{ margin:.4rem 0 .5rem; font-size:.85rem; color:var(--text-soft); }
.seek-fancy{ font-family:var(--serif); color:var(--accent-2); border-bottom:1px solid var(--rule); }
.seek-fancy em{ color:var(--text-faint); }

/* the homepage's other mobile-only rules (the header's own single-row layout,
   including .seek, lives with the rest of the header CSS above) */
@media (max-width:44rem){
  /* on mobile the <picture> swaps in Ausra's own dedicated mobile composition
     (scene-1-mobile.webp) — no CSS zoom/crop of the desktop art. Its figure is
     baked in, so the separate desktop overlay (registered to a different
     canvas) is hidden rather than shown misaligned. */
  .s1-front{ display:none; }
  /* the desktop floatie (fixed, 104vw, scroll-transformed) is replaced
     entirely by .floatie-mobile below — both for her dedicated mobile art
     and because a position:fixed element wider than the viewport is exactly
     the shape of bug that makes a mobile page sideways-pannable. */
  .floatie{ display:none; }
  /* edge to edge, sitting high. The art carries a tall band of transparent
     sky above the rabbit, so a plain bottom-anchor strands the visible rabbit
     low on the screen — raised well up (bottom:52%) so the rabbit + wall sit
     in the upper–middle, a gradient breath of purple below them, then the
     descents. */
  .floatie-mobile{ display:block; position:absolute; z-index:2;
    left:0; right:0; width:100%; bottom:47%; pointer-events:none; }
  .floatie-mobile img{ display:block; width:100%; height:auto; }
  /* the hero ends right where the colour block begins, so "Latest Descents"
     starts as early as the art allows, not gated behind a fixed svh guess. */
  .fh-hero{ height:35.1%; padding-block:clamp(1.6rem,5svh,3rem) 2.5rem; }
  /* the hero is much shorter here (ends at the colour block), so the type
     scales down and the rotating quote — a nice-to-have on the spacious
     desktop sky — steps aside rather than forcing scroll before "Fall in". */
  .fh-hero h1{ font-size:clamp(1.9rem, 1.3rem + 5vw, 2.7rem); margin-top:.5rem; }
  /* restored — sits directly under the title per Ausra's mockup */
  .fh-quotes{ font-size:.86rem; margin-top:.9rem; min-height:4.2em; }
  .fh-eyebrow{ font-size:.72rem; }
  /* "Fall in" adds nothing here (the hero is short enough that the cue to
     scroll is redundant) — dropped. "Fall further" stays, but now tumbles
     into a random hole instead of anchoring to #why (see index.astro). */
  .fh-hero .cue{ display:none; }
  /* Ausra's gradient-fill panel (measured in Affinity: left/right 10.2%,
     35.1%→84.2% of the image height) is where the cards live. The block's
     TOP is pushed well past where the hero ends, past typical phone viewport
     heights (not just past the hero), so "Latest Descents" never appears on
     first load — only "Fall in" is visible before any scrolling happens. */
  /* tucked right under the rabbit — the floatie's box runs to ~53% but its
     lower band is faded wall, so the solid rabbit+wall ends higher; 48% seats
     "Latest Descents" just beneath the figure instead of a long purple gap. */
  .fh-descents{ top:48%; bottom:9%; left:10.2%; right:10.2%; }
  .fh-descents h2{ margin-bottom:.6rem; }
  .rolo{ width:100%; max-width:none; flex:1 1 auto; min-height:0;
    max-height:none; overflow-y:auto; gap:.5rem; }
  .rolo > li:nth-child(n+5){ display:none; }  /* 4 fit now that cards are tighter */
  .rolo-card{ padding:.75rem .9rem .8rem 1.3rem; gap:.15rem; }
  .rolo-card::before{ left:.6rem; top:.9rem; bottom:.9rem; }
  .rolo-dom{ top:1rem; right:1.1rem; }
  .rolo-title{ font-size:1rem; line-height:1.15; padding-right:2.2rem; }
  .rolo-latin{ font-size:.78rem; margin-top:.1rem; }
  .dom-label{ display:none; }  /* the gradient icon alone is enough at this size */
  .rolo-pull{ display:none; }  /* a cleaner, more open card — not a more crowded one */

  /* five doors: flex-grow on mismatched row counts was stretching some doors
     wider than others — a plain, uneven-looking wrap. One door per row, all
     the same width, all centred, fixes it outright. */
  .fh-doors a{ flex:1 1 100%; }
}

/* ── Scene 1 on tablet/desktop — a STABLE-height frame the image COVERS ──────
   The old model let the portrait image set the section height (width:100%;
   height:auto), so narrowing the window shrank the whole scene — and the
   fixed-size descent cards, sitting in a panel measured as a % of that
   shrinking height, collapsed to a sliver (measured: the card area fell from
   ~633px at 1280 to ~171px at 820). Ausra's fix: keep the cards a fixed size
   and TRIM THE IMAGE instead.
   So here the frame height rides the viewport height (one hero screen) + a
   FIXED card zone in rem — never the image width. object-fit:cover fills that
   frame, so a narrower window trims the image's sides rather than rescaling
   the scene; the card panel stays exactly the same at every width. The height
   is tuned so at ~1280 the frame matches the image's natural aspect (no crop —
   the view Ausra already approved is unchanged); only narrower/wider windows
   crop. The pixel-registered figure covers with the identical object-position,
   so it stays locked onto its baked-in twin. */
@media (min-width:44rem){
  .scene1{ height:calc((100svh - 63px) + 74rem); }
  .scene1 picture{ position:absolute; inset:0; display:block; }
  .s1-bg{ position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center top; }
  .s1-front{ inset:0; width:100%; height:100%; aspect-ratio:auto; }
  .s1-sil{ object-fit:cover; object-position:center top; }
  /* the descent panel: a fixed zone directly under the hero, same height at
     every window width, so the cards always fit the same way. */
  .fh-descents{ top:calc(100svh - 63px + 1.5rem); bottom:auto; height:48rem;
    left:0; right:0; }
}