/* =====================================================================
   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; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* ---- 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); }
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:1.02em;        /* Noto runs a hair small against Lora/Satoshi — nudge to match */
  letter-spacing:0; }
.gloss .uni, .conv .uni, .tier .uni, .flag .uni{ font-size:1em; }

/* ===================== 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: symbol + controls on row 1, nav alone on row 2 */
@media (max-width:44rem){
  .site-head .wrap{ flex-wrap:wrap; gap:.5rem .75rem; padding-block:.7rem; }
  .brand{ order:1; }
  .brand .logo-full{ display:none !important; }
  .brand .logo-mark{ height:1.8rem; }
  .logo-mark.logo-day{ display:block; }
  [data-theme="night"] .logo-mark.logo-day{ display:none; }
  [data-theme="night"] .logo-mark.logo-night{ display:block; }
  .controls{ order:2; margin-left:auto; }
  .nav{ order:3; width:100%; margin-left:0; justify-content:space-between;
    gap:.4rem .9rem; font-size:.9rem; padding-top:.55rem;
    border-top:1px solid var(--rule); }
}
@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; }
}

/* day/night toggle */
.toggle{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:none; border:1px solid var(--rule); border-radius:999px; padding:.3rem .55rem;
  color:var(--text-soft); }
.toggle:hover{ border-color:var(--rule-strong); color:var(--text); }
/* unicode sun/moon — always visible. Sage sun in day, plum moon at night. */
.toggle .ic{ font-size:1.05rem; line-height:1; color:var(--sage-accent); }
[data-theme="night"] .toggle .ic{ color:var(--plum-accent); }
@media(prefers-color-scheme:dark){ :root:not([data-theme]) .toggle .ic{ color:var(--plum-accent); } }
/* on the narrowest screens the word label drops; the icon carries it */
@media (max-width:24rem){ .toggle .lbl{ display:none; } }

/* reading-size control (the visible text-size toggle) */
.sizer{ display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:999px; overflow:hidden; }
.sizer button{ background:none; border:0; cursor:pointer; color:var(--text-soft); font-family:var(--serif);
  padding:.2rem .55rem; line-height:1; }
.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) */
.rubric{ display:flex; align-items:baseline; gap:.7rem; }
.rubric .n{ font-family:var(--serif); font-style:italic; color:var(--illumination);
  font-size:.95rem; }

/* ---- 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; }

/* 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; }

/* 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; }
.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){
  .hole-grid{ display:grid; grid-template-columns:15rem minmax(0,var(--measure)); gap:3.5rem;
    justify-content:center; align-items:start; }
  .hole-grid .col{ margin:0; width:100%; }
  .toc-rail{ position:sticky; top:5rem; }
  .toc{ margin:0; }
  .toc[open] > summary{ border-bottom:1px solid var(--rule); }
}
@media (max-width:75rem){
  .toc-rail{ width:min(100% - 2*var(--gutter), var(--measure)); margin-inline:auto; }
}

/* ---- 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; }

/* ---- 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:"–"; }