/* BharatClinic Health Guides · v3 "Glass & Thread" · design system
   Each guide is a pane of coloured glass; a gold thread runs through them: the reader's path from a question
   to care. Liquid glass is the material for everything a reader touches. Long reading stays on calm paper.
   Motion is scroll-linked (never scroll-jacked), off under reduced motion and behind a "Motion" switch.
   Prototype CSS controls the whole page. Scope under .bc-journal before WordPress integration. */

@font-face { font-family: "Cormorant"; src: url(../fonts/cormorant-latin-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(../fonts/cormorant-latin-600-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url(../fonts/literata-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(../fonts/literata-latin-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Mukta"; src: url(../fonts/mukta-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mukta"; src: url(../fonts/mukta-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- tokens: day (light) is the base ---------- */
:root {
  --bg: #F6F0E4;
  --bg-deep: #EEE4D2;
  --paper: #FAF7F0;
  --ink: #261F19;
  --ink-2: #3A3229;
  --ink-3: #5F574B;
  --rule: #D3C5AE;
  --rule-strong: #BFAE91;
  --accent: #6F2631;
  --accent-strong: #4E1822;
  --accent-wash: #F4E5E2;
  --green: #143D2C;
  --green-wash: #E4ECE5;
  --gold: #B69357;
  --gold-ink: #765822;
  --wire: #B69357;
  --alert: #8E2B33;
  --alert-bg: #F7E3DC;
  --alert-rule: #E26C3C;
  --focus: #143D2C;
  --band-bg: #143D2C;
  --band-ink: #F2EADB;
  --band-ink-2: #C9C0AE;
  --band-accent: #E2C37F;
  --note-bg: #FFF4CC;
  --note-ink: #4A3A06;
  --note-rule: #C9A227;
  /* glass hues (rgb triplets, used with alpha) */
  --amber: 200 138 52;
  --sage: 98 146 120;
  --maroon: 122 31 43;
  --ember: 178 78 40;
  /* liquid glass */
  --glass-rgb: 252 249 243;
  --glass-a: .58;
  --lg-rim: .9;
  --lg-gloss: .6;
  --lg-blur: 22px;
  --lg-sat: 1.9;
  --lg-caustic: var(--amber);
  --lg-tint: linear-gradient(transparent, transparent);
  --shadow-rgb: 46 35 22;
  --ak-ground: #F0E7D7;
  --hue-ember: #A2441F;
  --hue-gold: #86662B;
  --hue-rose: #7A2B37;
  --hue-sage: #2F6B52;
  --hue-forest: #143D2C;
  --hue-silver: #4E5D57;
  --bindu: #C2953F;
  --seal-ground: #0E1B15;
  --logo-plate: transparent;
  --grain-a: .05;
  --disc-blend: multiply;
  --disc-a: .92;
  color-scheme: light;

  --f-display: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-read: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-ui: "Mukta", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans Devanagari", "Noto Sans Gurmukhi", sans-serif;

  --t-xs: .78rem;
  --t-s: .875rem;
  --t-m: 1rem;
  --t-read: 1.1875rem;
  --t-lead: 1.3125rem;
  --t-h3: 1.3rem;
  --t-h2: clamp(2rem, 1.4rem + 2vw, 3.1rem);
  --t-h1: clamp(2.3rem, 1.5rem + 3.3vw, 4.1rem);
  --t-display: clamp(2.8rem, 1.5rem + 5.4vw, 6.4rem);
  --lead-read: 1.75;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem;
  --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 30px; --r-pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --t-fast: .18s; --t-med: .3s;
  --w-page: 77.5rem;
  --w-read: 38rem;
  --rail: 15.5rem;
  --bar-h: 3.25rem;
  --rail-pad: max(16px, calc((100vw - var(--w-page)) / 2 + 16px));
  --heading: #143D2C; --focus-halo: #D9C190;
}

/* ---------- tokens: night ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08150F; --bg-deep: #0D1F17; --paper: #12291F;
    --ink: #F6F0E4; --ink-2: #ECE4D3; --ink-3: #C7BDAA;
    --rule: rgba(217, 193, 144, .18); --rule-strong: rgba(217, 193, 144, .32);
    --accent: #E8B3B9; --accent-strong: #F5CBD1; --accent-wash: #2A1A1F;
    --green: #E8D9B2; --green-wash: #16281F;
    --gold: #D9C190; --gold-ink: #D9C190; --wire: #D9C190;
    --alert: #F0B9BF; --alert-bg: #3A1A1F; --alert-rule: #E26C3C;
    --focus: #EFE6D4;
    --band-bg: #0C2B20; --band-ink: #ECE4D5; --band-ink-2: #B5AC9C; --band-accent: #E2C37F;
    --note-bg: #3A3110; --note-ink: #FBEBB5; --note-rule: #9C8226;
    --glass-rgb: 17 31 25; --glass-a: .56; --lg-rim: .24; --lg-gloss: .12; --lg-sat: 1.5; --shadow-rgb: 0 0 0;
    --ak-ground: #0A140F;
    --hue-ember: #EE8C5E; --hue-gold: #EBCB86; --hue-rose: #E3A3AE; --hue-sage: #8CC6A8; --hue-forest: #5E9C80; --hue-silver: #CBD6D0;
    --bindu: #F0CB75; --seal-ground: #0A140F; --logo-plate: #F6F0E4; --grain-a: .07;
    --disc-blend: screen; --disc-a: .62;
    color-scheme: dark;
  --heading: #EDE0C2; --focus-halo: rgba(217, 193, 144, .55);
}
}
:root[data-theme="dark"] {
  --bg: #08150F; --bg-deep: #0D1F17; --paper: #12291F;
  --ink: #F6F0E4; --ink-2: #ECE4D3; --ink-3: #C7BDAA;
  --rule: rgba(217, 193, 144, .18); --rule-strong: rgba(217, 193, 144, .32);
  --accent: #E8B3B9; --accent-strong: #F5CBD1; --accent-wash: #2A1A1F;
  --green: #E8D9B2; --green-wash: #16281F;
  --gold: #D9C190; --gold-ink: #D9C190; --wire: #D9C190;
  --alert: #F0B9BF; --alert-bg: #3A1A1F; --alert-rule: #E26C3C;
  --focus: #EFE6D4;
  --band-bg: #0C2B20; --band-ink: #ECE4D5; --band-ink-2: #B5AC9C; --band-accent: #E2C37F;
  --note-bg: #3A3110; --note-ink: #FBEBB5; --note-rule: #9C8226;
  --glass-rgb: 17 31 25; --glass-a: .56; --lg-rim: .24; --lg-gloss: .12; --lg-sat: 1.5; --shadow-rgb: 0 0 0;
  --ak-ground: #0A140F;
  --hue-ember: #EE8C5E; --hue-gold: #EBCB86; --hue-rose: #E3A3AE; --hue-sage: #8CC6A8; --hue-forest: #5E9C80; --hue-silver: #CBD6D0;
  --bindu: #F0CB75; --seal-ground: #0A140F; --logo-plate: #F6F0E4; --grain-a: .07;
  --disc-blend: screen; --disc-a: .62;
  color-scheme: dark;
  --heading: #EDE0C2; --focus-halo: rgba(217, 193, 144, .55);
}
/* a night band inside a day page (questions band, next step): same night tokens, scoped */
.theme-night {
  --bg: #0C2B20; --bg-deep: #08150F; --paper: #12291F;
  --ink: #F3EBDC; --ink-2: #E2D8C4; --ink-3: #C9BFA8;
  --rule: rgba(217, 193, 144, .26); --rule-strong: rgba(217, 193, 144, .42);
  --accent: #E8B3B9; --accent-strong: #F5CBD1; --accent-wash: #2A1A1F;
  --green: #E8D9B2; --green-wash: #16281F;
  --gold: #D9C190; --gold-ink: #D9C190; --wire: #D9C190;
  --alert: #F0B9BF; --alert-bg: #3A1A1F; --alert-rule: #E26C3C;
  --focus: #F6F0E4;
  --note-bg: #3A3110; --note-ink: #FBEBB5; --note-rule: #9C8226;
  --glass-rgb: 14 26 21; --glass-a: .5; --lg-rim: .28; --lg-gloss: .14; --lg-sat: 1.6; --shadow-rgb: 0 0 0;
  --seal-ground: #0A140F;
  color-scheme: dark;
  background-color: var(--bg);
  color: var(--ink);
  --heading: #F6F0E4; --focus-halo: rgba(217, 193, 144, .6);
}

/* reader text size (persisted UI preference, not health data) */
:root[data-text="l"] { --t-read: 1.375rem; --t-lead: 1.5rem; --lead-read: 1.72; --w-read: 40rem; }
:root[data-text="xl"] { --t-read: 1.5625rem; --t-lead: 1.65rem; --lead-read: 1.68; --w-read: 42rem; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 1.5rem); background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-m)/1.55 var(--f-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: 8px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; color: var(--heading); } /* breaks a word only if it cannot fit, e.g. at 200% text */
p, li, dd { text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.no-js .js-only { display: none !important; }
.skip { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: -100px; z-index: 100; padding: .7rem 1rem; border-radius: var(--r-s); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); color: var(--paper); }
.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.page { position: relative; z-index: 1; }

.eyebrow { margin: 0; font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.quiet { color: var(--ink-3); }
.dot { display: inline-block; flex: none; width: .62rem; height: .62rem; border-radius: 50%; vertical-align: .05em; margin-right: .1rem;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .85), rgb(var(--tint) / .9) 45%, rgb(var(--tint)));
  box-shadow: 0 0 0 1px rgb(var(--tint) / .35), 0 1px 3px rgb(var(--tint) / .6); }
.dot--digestive { --tint: var(--amber); }
.dot--piles { --tint: var(--sage); }
.dot--mens { --tint: var(--maroon); }
.dot--womens { --tint: var(--maroon); }
.dot--skin-hair { --tint: var(--sage); }
.dot--bones-joints { --tint: var(--amber); }
.dot--sleep-stress { --tint: var(--sage); }
.dot--sehat { --tint: var(--amber); }
/* one class per hub hue, for anything tinted by its concern */
.hue--amber { --tint: var(--amber); --lg-caustic: var(--amber); } .hue--sage { --tint: var(--sage); --lg-caustic: var(--sage); }
.hue--maroon { --tint: var(--maroon); --lg-caustic: var(--maroon); } .hue--ember { --tint: var(--ember); --lg-caustic: var(--ember); }

/* ---------- liquid glass ----------
   Layers, back to front: backdrop (blurred, saturated; in Chromium also bent at the rim by an SVG lens),
   a hue tint (--lg-tint), a top gloss, the tint colour, inner rim light, a coloured caustic at the base,
   a conic edge-light (::after), and a specular highlight that follows the pointer (::before). */
.glass {
  position: relative;
  isolation: isolate;
  background:
    var(--lg-tint),
    linear-gradient(180deg, rgb(255 255 255 / calc(var(--lg-gloss) * .55)) 0%, rgb(255 255 255 / 0) 42%),
    rgb(var(--glass-rgb) / var(--glass-a));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--lg-rim)),
    inset 0 0 0 1px rgb(255 255 255 / calc(var(--lg-rim) * .32)),
    inset 0 -1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .28)),
    inset 0 16px 26px -20px rgb(255 255 255 / calc(var(--lg-rim) * .85)),
    inset 0 -20px 32px -26px rgb(var(--lg-caustic) / .55),
    0 1px 2px rgb(var(--shadow-rgb) / .08),
    0 24px 56px -30px rgb(var(--shadow-rgb) / .55),
    var(--lg-glow, 0 0 0 0 transparent);
}
.glass::after { /* edge light: brighter where the light falls (top left), a warm caustic lower right */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; pointer-events: none;
  background: conic-gradient(from 200deg at 50% 50%,
    rgb(255 255 255 / calc(var(--lg-rim) * 1)) 0deg, rgb(255 255 255 / calc(var(--lg-rim) * .15)) 70deg,
    rgb(var(--amber) / .55) 120deg, rgb(255 255 255 / calc(var(--lg-rim) * .1)) 165deg,
    rgb(255 255 255 / calc(var(--lg-rim) * .7)) 230deg, rgb(var(--sage) / .45) 300deg, rgb(255 255 255 / calc(var(--lg-rim) * 1)) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass::before { /* specular highlight, follows the pointer on pointer devices */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 30%) var(--my, 0%), rgb(255 255 255 / calc(var(--lg-rim) * .5)), transparent 62%);
}
.glass:hover::before, .glass.is-lit-pointer::before { opacity: 1; }
.glass--panel { --glass-a: .8; --lg-blur: 26px; }
.theme-night .glass--panel { --glass-a: .62; }
:root[data-theme="dark"] .glass--panel { --glass-a: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .glass--panel { --glass-a: .7; } }
/* Chromium: real refraction at the rim (backdrop-filter: url()); other engines keep the blur. Desktop only, and only on
   small controls that do not move with the page: an SVG lens re-runs every frame on anything sticky or animated. */
@media (hover: hover) and (min-width: 64rem) {
  .lens .glass--lens { -webkit-backdrop-filter: url(#lg-lens) blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: url(#lg-lens) blur(var(--lg-blur)) saturate(var(--lg-sat)); }
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .glass { --glass-a: .95; } }
@media (prefers-reduced-transparency: reduce) { .glass { --glass-a: .97; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

/* ---------- akshara light: brand light seen only through letters (signals, roots) ---------- */
.ak { position: relative; overflow: hidden; isolation: isolate; background: var(--ak-ground); --l1: var(--hue-gold); --l2: var(--hue-ember); --l3: var(--hue-rose); --l4: var(--hue-sage); }
.ak__light { position: absolute; inset: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; }
.ak__light::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(38% 46% at 34% 38%, var(--l1), transparent 72%),
    radial-gradient(42% 50% at 68% 58%, var(--l2), transparent 74%),
    radial-gradient(48% 40% at 52% 92%, var(--l3), transparent 72%),
    linear-gradient(150deg, var(--l4), var(--l1) 55%, var(--l2));
  animation: ak-drift 34s var(--ease) infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
@keyframes ak-drift { from { transform: translate3d(-6%, -3%, 0) rotate(-4deg) scale(1.02); } to { transform: translate3d(6%, 4%, 0) rotate(5deg) scale(1.08); } }
.ak.is-live .ak__light::before, .card:hover .ak__light::before, .card:focus-within .ak__light::before { animation-play-state: running; }
html.motion-off .ak__light::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .ak__light::before { animation: none; transform: none; } }

.ak--banyan { --l1: var(--hue-sage); --l2: var(--hue-gold); --l3: var(--hue-forest); --l4: var(--hue-ember); }
.ak--agni { --l1: var(--hue-gold); --l2: var(--hue-ember); --l3: var(--hue-rose); --l4: var(--hue-forest); }
.ak--wheat { --l1: var(--hue-gold); --l2: var(--hue-sage); --l3: var(--hue-ember); --l4: var(--hue-forest); }
.ak--hourglass { --l1: var(--hue-gold); --l2: var(--hue-rose); --l3: var(--hue-sage); --l4: var(--hue-forest); }
.ak--sunrise { --l1: var(--hue-ember); --l2: var(--hue-gold); --l3: var(--hue-rose); --l4: var(--hue-sage); }
.ak--moon { --l1: var(--hue-silver); --l2: var(--hue-rose); --l3: var(--hue-gold); --l4: var(--hue-sage); }
.ak--banyan { --art-day: url(../art/banyan-day.webp); --art-night: url(../art/banyan.webp); --art-signal: url(../art/banyan-signal.webp); }
.ak--agni { --art-day: url(../art/agni-day.webp); --art-night: url(../art/agni.webp); --art-signal: url(../art/agni-signal.webp); }
.ak--wheat { --art-day: url(../art/wheat-day.webp); --art-night: url(../art/wheat.webp); --art-signal: url(../art/wheat-signal.webp); }
.ak--hourglass { --art-day: url(../art/hourglass-day.webp); --art-night: url(../art/hourglass.webp); --art-signal: url(../art/hourglass-signal.webp); }
.ak--sunrise { --art-day: url(../art/sunrise-day.webp); --art-night: url(../art/sunrise.webp); --art-signal: url(../art/sunrise-signal.webp); }
.ak--moon { --art-day: url(../art/moon-day.webp); --art-night: url(../art/moon.webp); --art-signal: url(../art/moon-signal.webp); }
.ak { --art: var(--art-day); }
:root[data-theme="dark"] .ak { --art: var(--art-night); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ak { --art: var(--art-night); } }
.signal.ak { --art: var(--art-signal); }
.ak.is-lit .ak__light, .no-js .ak .ak__light { -webkit-mask-image: var(--art); mask-image: var(--art); }
.js .ak:not(.is-lit) .ak__light { visibility: hidden; }
.ak__bindu { position: absolute; width: clamp(10px, 2.2%, 18px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 35%, #FFF3CF, var(--bindu) 60%); box-shadow: 0 0 22px 6px color-mix(in srgb, var(--bindu) 45%, transparent); }

/* signal: a small lamp-lit glass seal carrying a guide's akshara motif */
.signal { --size: 3.25rem; position: relative; display: inline-grid; width: var(--size); height: var(--size); flex: none; border-radius: 50%; overflow: hidden; background: var(--seal-ground);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 16px -6px rgb(0 0 0 / .55); }
.signal .ak__light { -webkit-mask-size: cover; mask-size: cover; }
.signal { --l1: #EBCB86; --l2: #EE8C5E; --l3: #E3A3AE; --l4: #8CC6A8; }
.signal.ak--moon { --l1: #CBD6D0; --l2: #E3A3AE; }
.signal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 80% at 30% 0%, rgb(255 255 255 / .28), transparent 50%); pointer-events: none; }

/* photo (owner stills; hg-01 is a vector stand-in) */
.photo { position: relative; overflow: hidden; background-color: var(--ph, var(--bg-deep)); background-size: cover; background-position: center; }
.photo picture, .photo img { width: 100%; height: 100%; }
.photo img { object-fit: cover; object-position: var(--focal, 50% 50%); }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; max-width: 100%; text-align: center; min-height: 2.9rem; padding: .7rem 1.25rem; border-radius: var(--r-pill); border: 1px solid transparent; font: 600 var(--t-m)/1.1 var(--f-ui); text-decoration: none; cursor: pointer; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--green); color: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 24px -12px rgb(20 61 44 / .7); }
.btn--primary:hover { color: var(--paper); background: color-mix(in srgb, var(--green) 88%, var(--ink)); }
:root[data-theme="dark"] .btn--primary, .theme-night .btn--primary { background: var(--green); color: #0B2117; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--primary { color: #0B2117; } }
.btn--quiet { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn--quiet:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--glass { color: var(--ink); }
.btn--glass:hover { color: var(--ink); }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--rule); background: rgb(var(--glass-rgb) / .55); color: var(--ink); cursor: pointer; transition: background-color var(--t-fast), transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.icon-btn.glass { border: 0; }
.icon-btn:hover { background-color: rgb(var(--glass-rgb) / .95); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------- masthead: a floating glass bar ---------- */
.mast { position: relative; z-index: 30; padding: .6rem max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); }
.mast__inner { max-width: 76rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem var(--s-4); padding: .45rem .5rem .45rem .9rem; border-radius: 1.4rem; }
.mast__logo { display: inline-flex; align-items: center; padding: 3px 7px; margin-left: -7px; border-radius: 10px; background: var(--logo-plate); text-decoration: none; }
.mast__logo img { height: 34px; width: auto; }
.mast__nav { display: flex; flex-wrap: wrap; gap: .2rem; margin-left: auto; }
.mast__nav a { padding: .55rem .85rem; border-radius: var(--r-pill); color: var(--ink-2); font-weight: 600; font-size: var(--t-s); text-decoration: none; letter-spacing: .01em; transition: background-color var(--t-fast), color var(--t-fast); }
.mast__nav a:hover { color: var(--ink); background: rgb(var(--glass-rgb) / .8); }
.mast__nav a[aria-current="page"] { color: var(--ink); background: rgb(255 255 255 / calc(var(--lg-rim) * .55)); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--lg-rim)), 0 2px 8px -4px rgb(var(--shadow-rgb) / .4); }
.mast__tools { display: flex; gap: .4rem; }
.mast .icon-btn { border: 0; background: rgb(255 255 255 / calc(var(--lg-rim) * .35)); }
@media (max-width: 47.99rem) {
  .mast__logo img { height: 30px; }
  .mast__tools { margin-left: auto; }
  .mast__nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid rgb(var(--shadow-rgb) / .1); padding-top: .35rem; }
  .mast__nav a { padding: .5rem .55rem; }
}
@media (min-width: 64rem) {
  .mast__inner { border-radius: var(--r-pill); padding-left: 1.2rem; }
  .page--lib .mast { position: sticky; top: env(safe-area-inset-top, 0px); padding-top: .75rem; }
}

.theme-btn .i-moon, :root[data-theme="dark"] .theme-btn .i-sun { display: block; }
.theme-btn .i-sun, :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; } :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; } }

/* ---------- library: ambient light behind the whole page ---------- */
.page--lib::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 88% 6%, rgb(var(--amber) / .2), transparent 70%),
    radial-gradient(36% 30% at 6% 58%, rgb(var(--sage) / .16), transparent 70%),
    radial-gradient(40% 36% at 92% 96%, rgb(var(--maroon) / .12), transparent 72%);
}

/* ---------- library: hero ---------- */
.hero { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: min(94svh, 56rem); padding-block: clamp(1.2rem, 2.5vw, 2.5rem) 1rem; overflow: clip; }
.hero__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__sun { position: absolute; width: clamp(18rem, 46vw, 44rem); aspect-ratio: 1; right: 8%; top: 2%; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 240 210 / .95), rgb(255 226 178 / .5) 30%, rgb(var(--amber) / .12) 55%, transparent 68%); }
:root[data-theme="dark"] .hero__sun { opacity: .28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__sun { opacity: .28; } }
.disc { position: absolute; width: var(--d); aspect-ratio: 1; mix-blend-mode: var(--disc-blend); opacity: var(--disc-a);
  translate: calc(var(--px, 0) * var(--depth)) calc(var(--py, 0) * var(--depth)); transition: translate 1.1s var(--ease); }
.disc img { width: 100%; height: 100%; }
.disc--amber { --d: clamp(15rem, 31vw, 31rem); right: 21%; top: 3%; --depth: 14px; }
.disc--sage { --d: clamp(13rem, 27vw, 27rem); right: 2%; top: 21%; --depth: 26px; }
.disc--maroon { --d: clamp(11rem, 23vw, 23rem); right: 27%; top: 47%; --depth: 40px; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; align-self: center; }
.hero__copy { min-width: 0; }
.hero__eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; padding: .3rem .95rem .3rem .3rem; border-radius: var(--r-pill); font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.hero__seal { --size: 2rem; }
.hero__since { color: var(--ink-2); letter-spacing: .08em; }
.hero__title { margin: 1.1rem 0 0; font: 500 var(--t-display)/.94 var(--f-display); letter-spacing: -.02em; color: var(--heading); max-width: 12ch; }
.hero__title em { position: relative; font-style: italic; font-weight: 500; color: var(--accent); white-space: nowrap; }
.hero__title em::after { /* a gold thread drawn under the word */
  content: ""; position: absolute; left: -.04em; right: -.08em; bottom: -.04em; height: .22em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 13 C 40 4, 80 18, 120 10 S 180 4, 198 9' fill='none' stroke='%23B8913F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hero__deck { margin: 1.4rem 0 0; max-width: 33rem; font: 400 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.62 var(--f-read); color: var(--ink-2); }

.search { display: flex; align-items: center; gap: .6rem; margin-top: 1.8rem; padding: .45rem .45rem .45rem 1.3rem; border-radius: var(--r-pill); max-width: 37rem; min-height: 4.1rem; --glass-a: .8;
  --lg-glow: 0 0 0 1px rgb(var(--amber) / .3), 0 24px 60px -26px rgb(var(--amber) / .8); transition: box-shadow var(--t-med); }
.search:focus-within { --lg-glow: 0 0 0 1px rgb(var(--amber) / .55), 0 28px 70px -24px rgb(var(--amber) / .95); }
.search > svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ink-2); }
.search__field { position: relative; flex: 1; min-width: 0; display: flex; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .85rem 0; font: 400 clamp(1.05rem, 1rem + .25vw, 1.18rem)/1.2 var(--f-ui); color: var(--ink); outline: none; }
.search__hint { position: absolute; inset: 0 0 0 0; display: none; align-items: center; pointer-events: none; white-space: nowrap; overflow: hidden; font: 400 clamp(1.05rem, 1rem + .25vw, 1.18rem)/1.2 var(--f-ui); color: var(--ink-2); }
.search.has-hint .search__hint { display: flex; }
.search.has-hint input::placeholder { color: transparent; }
.search__hint-q { margin-left: .3em; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: clip; }
.search__caret { flex: none; width: 2px; height: 1.15em; margin-left: 2px; border-radius: 1px; background: var(--accent); }
.search__kbd { display: none; flex: none; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem; border-radius: .45rem; border: 1px solid rgb(var(--shadow-rgb) / .2); font: 600 .8rem/1 var(--f-ui); color: var(--ink-2); background: rgb(255 255 255 / calc(var(--lg-rim) * .4)); }
@media (hover: hover) and (min-width: 64rem) { .search.has-hint .search__kbd { display: inline-grid; } }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.search__clear { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; min-width: 2.5rem; min-height: 2.5rem; border-radius: 50%; }
.search__go { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; cursor: pointer; color: #FBF8F1; background: radial-gradient(circle at 35% 25%, #9B4450, var(--accent-strong, #521A24) 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 18px -8px rgb(82 26 36 / .8); transition: transform var(--t-fast) var(--spring); }
.search__go:hover { transform: scale(1.06); }
.search__go svg { width: 1.2rem; height: 1.2rem; }
:root[data-theme="dark"] .search__go { color: #2A1A1F; background: radial-gradient(circle at 35% 25%, #FBE1E5, #E8AAB4 70%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .search__go { color: #2A1A1F; background: radial-gradient(circle at 35% 25%, #FBE1E5, #E8AAB4 70%); } }
.search__note { margin: .7rem 0 0 1.2rem; font-size: var(--t-xs); color: var(--ink-2); }
.try { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem; }
.try__k { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-right: .2rem; }
.try__b { min-height: 2.5rem; padding: .35rem .9rem; border-radius: var(--r-pill); border: 1px solid rgb(var(--shadow-rgb) / .16); background: rgb(var(--glass-rgb) / .5); color: var(--ink); font: 600 var(--t-s)/1 var(--f-ui); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--t-fast), transform var(--t-fast) var(--ease); }
.try__b:hover { background: rgb(var(--glass-rgb) / .9); transform: translateY(-1px); }

/* the fan: five guides held like a hand of glass-faced cards */
.hero__fan { position: relative; height: clamp(272px, 70vw, 384px); min-width: 0; perspective: 1600px; }
/* one flat plane, tilted as a whole: preserve-3d made the browser re-sort five coplanar cards on every pointer move, which read as a shiver */
.fan { position: absolute; inset: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease); }
.fan__card { --w: clamp(128px, 29vw, 248px); /* decorative: sized in px so text zoom does not inflate it */ position: absolute; left: 50%; bottom: 4%; width: var(--w); aspect-ratio: 3 / 4.1; margin-left: calc(var(--w) / -2); z-index: var(--z);
  transform-origin: 50% 100%; transform: translateX(calc(var(--o) * 38%)) rotate(calc(var(--o) * 8deg)) translateY(calc(var(--ao) * 6%)); color: inherit; text-decoration: none; }
.fan__inner { position: relative; display: block; width: 100%; height: 100%; border-radius: clamp(.9rem, 1.6vw, 1.4rem); overflow: hidden; background: var(--bg-deep);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 0 0 1px rgb(255 255 255 / .28) inset, 0 28px 50px -26px rgb(var(--shadow-rgb) / .75), 0 6px 14px -8px rgb(var(--shadow-rgb) / .4);
  transition: translate .5s var(--spring), scale .5s var(--spring); will-change: translate, scale; }
.fan__inner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(128deg, rgb(255 255 255 / .42), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 68%, rgb(255 255 255 / .14)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.fan__photo { position: absolute; inset: 0; }
/* the hovered card comes forward: its whole box takes the pointer, so neighbours cannot steal hover mid-lift */
.fan__card:hover { z-index: 20; }
.fan__card:hover .fan__inner { translate: 0 -1.4rem; scale: 1.04; }
.fan__label { position: absolute; left: .45rem; right: .45rem; bottom: .45rem; z-index: 1; display: grid; gap: .1rem; padding: .5rem .65rem .55rem; border-radius: .8rem;
  font: 600 clamp(.72rem, .66rem + .3vw, .86rem)/1.2 var(--f-ui); color: #261F19; background: rgb(252 249 243 / .9); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 4px 12px -6px rgb(0 0 0 / .35); }
.fan__label b { font-size: .64em; letter-spacing: .14em; text-transform: uppercase; color: #775A23; }

.hero__foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; }
.hero__cue { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink-2); font: 600 var(--t-s)/1.2 var(--f-ui); letter-spacing: .04em; text-decoration: none; }
.hero__cue:hover { color: var(--ink); }
.hero__cue-line { width: 2.6rem; height: 1px; background: var(--wire); position: relative; }
.hero__cue-line::after { content: ""; position: absolute; right: -2px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wire); box-shadow: 0 0 10px var(--wire); }
.motion-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .4rem .95rem; border: 0; border-radius: var(--r-pill); font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .05em; color: var(--ink); cursor: pointer; }

@media (max-width: 63.99rem) {
  /* phones and tablets: the fan comes first, so the first screen carries the image */
  .hero { min-height: 0; }
  .hero__fan { order: -1; height: clamp(200px, 52vw, 336px); margin: .25rem 0 .6rem; }
  .fan__card { bottom: 11%; }
  .hero__grid { gap: 1rem; }
  .hero__title { margin-top: .9rem; }
  .disc--amber { --d: clamp(11rem, 44vw, 20rem); right: -9%; top: 2.2rem; }
  .disc--sage { --d: clamp(9.5rem, 38vw, 17rem); left: -12%; right: auto; top: 6rem; }
  .disc--maroon { --d: clamp(7rem, 28vw, 13rem); right: 22%; top: 10.5rem; }
  .hero__sun { top: -4rem; right: -20%; width: 110vw; }
}
@media (max-width: 29.99rem) { .hero__since { display: none; } }
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: var(--s-6); }
  .hero__fan { height: clamp(416px, 40vw, 576px); }
  .fan__card { bottom: 8%; }
}

/* ---------- library: shelf = the stack ---------- */
.shelf { position: relative; padding-block: var(--s-8) var(--s-8); --bar-top: calc(env(safe-area-inset-top, 0px) + .5rem); --bar-h: 3.5rem; --stack-top: calc(var(--bar-top) + var(--bar-h) + .9rem); --peek: .7rem; }
@media (min-width: 64rem) { .shelf { --bar-top: calc(env(safe-area-inset-top, 0px) + 5.1rem); --peek: 1rem; } }
.shelf__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: end; }
.shelf__title { margin: .35rem 0 0; font: 500 var(--t-h2)/1.02 var(--f-display); letter-spacing: -.01em; }
.shelf__lead { margin: 0; max-width: 30rem; font: 400 1.05rem/1.6 var(--f-read); color: var(--ink-2); }
@media (min-width: 64rem) { .shelf__head { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } }
.shelf__bar { position: sticky; top: var(--bar-top); z-index: 20; margin-top: var(--s-5); }
.shelf__bar-inner { display: flex; align-items: center; gap: .75rem; padding: .35rem; border-radius: var(--r-pill); min-height: var(--bar-h); --glass-a: .68; }
.shelf__find { flex: none; border: 0; background: rgb(255 255 255 / calc(var(--lg-rim) * .4)); }
.filters { flex: 1; min-width: 0; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: .1rem; }
.filters.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); }
.filters::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink-2); font: 600 var(--t-s)/1 var(--f-ui); cursor: pointer; scroll-snap-align: start; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.chip:hover { color: var(--ink); background: rgb(255 255 255 / calc(var(--lg-rim) * .35)); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 14px -8px rgb(var(--shadow-rgb) / .8); }
.chip__n { font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; }
.beads { flex: none; display: none; align-items: center; gap: .55rem; margin: 0 .9rem 0 0; padding: 0; list-style: none; position: relative; }
.beads::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--wire); opacity: .7; }
.beads li { position: relative; width: .62rem; height: .62rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--wire); transition: background-color .3s, transform .3s var(--spring), box-shadow .3s; }
.beads li.is-on { background: var(--wire); transform: scale(1.35); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wire) 25%, transparent), 0 0 12px var(--wire); }
.beads li.is-past { background: var(--wire); }
.beads li.is-off { display: none; }
@media (min-width: 48rem) { .beads { display: flex; } }
.shelf__count { margin: var(--s-4) 0 var(--s-4) .3rem; font-size: var(--t-s); color: var(--ink-2); scroll-margin-top: calc(var(--bar-top) + var(--bar-h) + .8rem); }
.shelf__talk { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: var(--s-6) 0 0; color: var(--ink-2); font: 400 1.02rem/1.5 var(--f-read); }

.stack { list-style: none; margin: 0; padding: 0 0 var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vh, 3rem); }
.stack .card { position: sticky; top: calc(var(--stack-top) + var(--i) * var(--peek)); }
.stack.is-flat .card { position: relative; top: auto; }
.scard { --card-h: min(38rem, calc(100svh - var(--stack-top) - var(--n) * var(--peek) - 1rem));
  position: relative; display: flex; flex-direction: column; min-height: max(30rem, var(--card-h)); border-radius: clamp(1.25rem, 1rem + 1vw, 2rem); overflow: hidden; isolation: isolate; background: var(--bg-deep); transform-origin: 50% 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 0 0 1px rgb(var(--shadow-rgb) / .08), 0 40px 80px -42px rgb(var(--shadow-rgb) / .75), 0 10px 24px -14px rgb(var(--shadow-rgb) / .35); }
.stack.is-flat .scard { min-height: 0; }
.scard::after { /* the veil that dims a card once the next settles over it */
  content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; background: rgb(9 16 13); opacity: 0; }
.scard__media { position: relative; flex: 1 1 auto; min-height: 12rem; overflow: hidden; }
.scard__photo { position: absolute; inset: 0; }
.scard__photo img { transition: scale 1.4s var(--ease); }
.scard:hover .scard__photo img { scale: 1.035; }
.scard__frost { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; clip-path: var(--frost, inset(50%)); }
.scard__frost img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.6) brightness(1.05); transform: scale(1.06); }
.stack .scard__panel { -webkit-backdrop-filter: none; backdrop-filter: none; } /* frosted by .scard__frost: a still image, not a per-frame blur */
.scard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .18), transparent 30%, transparent 62%, rgb(0 0 0 / .26)); }
.scard__big { position: absolute; right: 1rem; top: .4rem; z-index: 1; font: 500 clamp(4.2rem, 3rem + 7vw, 10.5rem)/.9 var(--f-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.4px rgb(255 255 255 / .8); text-shadow: 0 12px 30px rgb(0 0 0 / .18); pointer-events: none; }
.scard__tag { position: absolute; left: .8rem; top: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .55rem; padding: .28rem .9rem .28rem .28rem; border-radius: var(--r-pill); font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); --glass-a: .82; }
.scard__tag .signal { --size: 2rem; }
.scard__panel { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin: -3rem .55rem .55rem; padding: 1.15rem 1.2rem 1.2rem; border-radius: clamp(1rem, .9rem + .6vw, 1.5rem); }
.card__kicker { margin: 0; display: flex; align-items: center; gap: .5rem; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.card__title { margin: 0; font: 600 clamp(1.6rem, 1.2rem + 1.6vw, 2.55rem)/1.04 var(--f-display); letter-spacing: -.01em; color: var(--heading); }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: -100vmax; z-index: 4; } /* clipped by the card: the whole card opens the guide */
.card__link:hover { color: inherit; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) .scard { outline: 2px solid var(--focus); outline-offset: 4px; }
.card__desc { margin: 0; font: 400 1rem/1.55 var(--f-read); color: var(--ink-2); }
.card__peek { margin: .15rem 0 0; padding-top: .7rem; border-top: 1px solid rgb(var(--shadow-rgb) / .14); font: 400 .97rem/1.55 var(--f-read); color: var(--ink-2); }
.card__peek b { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-right: .45rem; }
.card__meta { margin: .2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: var(--t-s); color: var(--ink-2); }
.card__meta .go { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); transition: gap var(--t-med) var(--spring); }
.card__meta .go svg { width: 1rem; height: 1rem; }
.scard:hover .card__meta .go { gap: .75rem; }
.card[hidden] { display: none; }
@media (max-width: 47.99rem) { .card__peek { display: none; } }
@media (min-width: 48rem) {
  .scard { display: grid; grid-template-columns: minmax(0, 1fr); }
  .scard__media { position: absolute; inset: 0; }
  .scard__big { right: auto; left: 1.4rem; top: auto; bottom: 1.1rem; }
  .scard__tag { left: 1.2rem; top: 1.2rem; }
  .scard__panel { margin: 1.1rem; justify-self: end; align-self: end; width: min(32rem, 54%); padding: clamp(1.4rem, 1rem + 1vw, 2.1rem); gap: .7rem; }
}

.empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-l); }
.empty h3 { margin: 0; font: 600 1.7rem/1.15 var(--f-display); }
.empty p { margin: 0; color: var(--ink-2); max-width: 38rem; }
.empty__routes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }

/* ---------- shared band heads ---------- */
.band__head { display: grid; gap: .6rem; max-width: 44rem; margin-bottom: var(--s-6); }
.band__title { margin: 0; font: 500 var(--t-h2)/1.04 var(--f-display); letter-spacing: -.01em; }
.band__lead { margin: 0; color: var(--ink-2); font: 400 1.06rem/1.62 var(--f-read); }

/* ---------- library: journey (four panes on one gold thread) ---------- */
.journey { position: relative; padding-block: var(--s-9) var(--s-8); overflow: clip; }
.journey::before { content: ""; position: absolute; inset: 10% -10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 40% at 18% 70%, rgb(var(--amber) / .2), transparent 70%), radial-gradient(30% 40% at 48% 50%, rgb(var(--sage) / .2), transparent 70%), radial-gradient(30% 40% at 82% 62%, rgb(var(--maroon) / .16), transparent 70%); }
.journey__stage { position: relative; }
.panes { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pane { padding: 1.3rem 1.3rem 1.4rem 3.4rem; border-radius: 1.2rem; --glass-a: .5; }
.pane--amber { --lg-caustic: var(--amber); --lg-tint: linear-gradient(160deg, rgb(var(--amber) / .26), rgb(var(--amber) / .05) 70%); }
.pane--sage { --lg-caustic: var(--sage); --lg-tint: linear-gradient(160deg, rgb(var(--sage) / .26), rgb(var(--sage) / .05) 70%); }
.pane--ember { --lg-caustic: var(--ember); --lg-tint: linear-gradient(160deg, rgb(var(--ember) / .2), rgb(var(--ember) / .04) 70%); }
.pane--maroon { --lg-caustic: var(--maroon); --lg-tint: linear-gradient(160deg, rgb(var(--maroon) / .22), rgb(var(--maroon) / .05) 70%); }
.pane__n { display: block; font: 500 2.4rem/1 var(--f-display); color: var(--gold-ink); letter-spacing: -.02em; }
.pane__t { margin: .55rem 0 .4rem; font: 600 1.5rem/1.12 var(--f-display); color: var(--heading); }
.pane__d { margin: 0; color: var(--ink-2); font: 400 1rem/1.58 var(--f-read); }
.pane__d span[lang] { font-family: "Mukta", "Noto Sans Devanagari", "Noto Sans Gurmukhi", var(--f-ui); }
.wire { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.wire path { fill: none; stroke-linecap: round; }
.wire__shadow { vector-effect: non-scaling-stroke; }
.wire__line { stroke: var(--wire); stroke-width: 2.2; stroke-dasharray: 1 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--wire) 60%, transparent)); }
.wire__shadow { stroke: rgb(var(--shadow-rgb) / .16); stroke-width: 3; transform: translate(5px, 12px); filter: blur(2.5px); }
.wire--h { display: none; }
.wire--v { left: .45rem; top: -1rem; width: 2.6rem; height: calc(100% + 2rem); }
@media (min-width: 64rem) {
  .panes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; perspective: 1600px; }
  .pane { padding: 1.6rem 1.5rem 1.7rem; min-height: 19rem; transform-origin: 0 50%; }
  .pane__n { font-size: 3.4rem; }
  .wire--v { display: none; }
  .wire--h { display: block; left: -6%; top: 14%; width: 112%; height: 72%; }
}

/* ---------- library: questions band (night), a slideable rail ---------- */
.asks-band { position: relative; padding-block: var(--s-9) var(--s-8); overflow: clip; isolation: isolate;
  background: radial-gradient(60% 70% at 80% 60%, rgb(122 31 43 / .45), transparent 70%), radial-gradient(50% 60% at 10% 10%, rgb(34 70 55 / .6), transparent 70%), var(--bg); }
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .95; }
.asks-band__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); }
.asks-band__head .band__head { margin-bottom: var(--s-5); }
.rail-ctl { display: flex; gap: .5rem; margin-bottom: var(--s-5); }
.no-js .rail-ctl { display: none; }
.rail { position: relative; z-index: 1; }
.rail__track { list-style: none; margin: 0; display: flex; gap: clamp(.8rem, 1.5vw, 1.25rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1rem var(--rail-pad) 1.6rem; scroll-padding-inline: var(--rail-pad); }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.rail__track.is-dragging a { pointer-events: none; }
.qcard { flex: 0 0 min(21rem, 80vw); scroll-snap-align: start; border-radius: 1.6rem; }
.qcard a { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto auto; gap: .7rem; height: 100%; min-height: 16rem; padding: 1.5rem 1.5rem 1.4rem; color: var(--ink); text-decoration: none; border-radius: inherit; }
.qcard__mark { font: 500 4.4rem/.55 var(--f-display); color: var(--gold); height: 2rem; }
.asks__q { font: 500 clamp(1.45rem, 1.25rem + .8vw, 1.85rem)/1.14 var(--f-display); color: var(--ink); }
.asks__src { font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.qcard__go { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent); font: 600 var(--t-s)/1 var(--f-ui); transition: gap var(--t-med) var(--spring); }
.qcard__go svg { width: 1rem; height: 1rem; }
.qcard a:hover .qcard__go { gap: .8rem; }
.qcard a:hover .asks__q { color: var(--accent-strong); }
.rail__progress { position: relative; height: 2px; border-radius: 2px; background: rgb(var(--glass-rgb) / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); overflow: hidden; }
.asks-band .rail__progress { background: rgb(255 255 255 / .12); }
.rail__progress span { position: absolute; top: 0; bottom: 0; left: calc(var(--rp, 0) * (100% - var(--rs, .3) * 100%)); width: calc(var(--rs, .3) * 100%); border-radius: inherit; background: var(--wire); box-shadow: 0 0 10px var(--wire); }
.no-js .rail__progress { display: none; }

/* ---------- library: care areas (a deck that deals out) ---------- */
.care-band { position: relative; padding-block: var(--s-9) var(--s-8); overflow: clip; }
.care-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(34% 40% at 12% 30%, rgb(var(--sage) / .18), transparent 70%), radial-gradient(30% 36% at 88% 70%, rgb(var(--amber) / .2), transparent 70%); }
.care { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.ctile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon main" "icon guides"; gap: .35rem 1rem; align-items: start; padding: 1.1rem 1.15rem; border-radius: 1.3rem; --glass-a: .72; transition: translate var(--t-med) var(--ease); }
/* tiles on calm paper: the backdrop blur was invisible but cost a frame budget per scroll step (tools/perf.mjs) */
.ctile, .principles li { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ctile--amber { --tint: var(--amber); --lg-caustic: var(--amber); }
.ctile--sage { --tint: var(--sage); --lg-caustic: var(--sage); }
.ctile--maroon { --tint: var(--maroon); --lg-caustic: var(--maroon); }
.ctile:hover { translate: 0 -3px; }
.ctile__icon { grid-area: icon; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .8), rgb(var(--tint) / .3) 55%, rgb(var(--tint) / .55));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 0 0 1px rgb(var(--tint) / .35), 0 10px 20px -12px rgb(var(--tint) / .9); }
.ctile__icon svg { width: 2.1rem; height: 2.1rem; }
.care__main { grid-area: main; min-width: 0; display: grid; gap: .2rem; color: var(--ink); text-decoration: none; }
.care__q { font: 500 clamp(1.3rem, 1.15rem + .5vw, 1.55rem)/1.15 var(--f-display); }
.care__name { font-size: var(--t-s); color: var(--ink-2); }
.care__main:hover .care__q { color: var(--accent); }
.care__guides, .care__none { grid-area: guides; justify-self: start; margin-top: .45rem; }
.care__guides { position: relative; z-index: 2; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: .6rem .8rem; border-radius: var(--r-pill); background: var(--green-wash); color: var(--green); text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 25%, transparent); }
.care__guides:hover { color: var(--green); text-decoration: underline; }
.care__none { font-size: var(--t-xs); color: var(--ink-2); }
@media (min-width: 36rem) { .care { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .care { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
  .ctile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "main" "guides"; min-height: 15.5rem; padding: 1.4rem; align-content: start; }
  .ctile__icon { margin-bottom: .7rem; }
  .care__guides, .care__none { align-self: end; }
}

/* ---------- library: roots + principles ---------- */
.roots-band { position: relative; padding-block: var(--s-8) var(--s-9); }
.roots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.roots__art { aspect-ratio: 4 / 5; max-height: 30rem; border-radius: var(--r-xl); margin: 0; box-shadow: 0 40px 80px -50px rgb(var(--shadow-rgb) / .8), inset 0 0 0 1px rgb(255 255 255 / .08); }
.roots__art .ak__light { -webkit-mask-size: 170%; mask-size: 170%; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
@media (max-width: 47.99rem) { .roots__art { display: none; } }
.roots__copy { display: grid; gap: var(--s-4); min-width: 0; }
.roots__quote { margin: 0; font: 500 clamp(2rem, 1.4rem + 2.4vw, 3.4rem)/1.04 var(--f-display); color: var(--heading); letter-spacing: -.01em; }
.roots__body { margin: 0; font: 400 1.08rem/1.7 var(--f-read); color: var(--ink-2); max-width: 36rem; }
.roots__links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
@media (min-width: 48rem) { .roots { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); } }
.principles-head { display: grid; gap: .6rem; max-width: 44rem; margin: var(--s-9) 0 var(--s-6); }
.principles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.principles li { padding: var(--s-5); border-radius: 1.3rem; --glass-a: .72; }
.principles strong { display: block; font: 600 1.4rem/1.15 var(--f-display); margin-bottom: .35rem; }
.principles span { color: var(--ink-2); }
@media (min-width: 48rem) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- article: cinematic head ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-s); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--rule-strong); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.a-head { position: relative; padding-bottom: var(--s-5); }
.a-head__crumbs { padding-block: .8rem .9rem; }
.a-hero { position: relative; margin: 0; height: clamp(10.5rem, 32vw, 27rem); overflow: hidden; background: var(--bg-deep); }
.a-hero__photo { position: absolute; inset: -6% 0; }
.a-hero .photo img { view-transition-name: hero-photo; }
.a-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .12), transparent 28%, transparent 55%, var(--bg) 100%); }
.a-head__wrap { position: relative; z-index: 2; margin-top: calc(-1 * clamp(2.6rem, 9vw, 11rem)); }
.a-plate { max-width: 52rem; padding: clamp(1.15rem, .8rem + 1.8vw, 2.6rem); border-radius: clamp(1.25rem, 1rem + 1vw, 2rem); }
.a-head__kicker { display: flex; align-items: center; gap: .8rem; }
.a-head__kicker .signal { --size: 2.75rem; }
.a-head__kicker .eyebrow { min-width: 0; }
.a-head__kicker .eyebrow .dot { margin-right: .35rem; }
.a-title { margin: var(--s-4) 0 0; font: 600 var(--t-h1)/1.03 var(--f-display); letter-spacing: -.012em; color: var(--heading); max-width: 20ch; view-transition-name: hero-title; }
.a-deck { margin: var(--s-4) 0 0; max-width: 38rem; font: 400 var(--t-lead)/1.55 var(--f-read); color: var(--ink-2); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-top: var(--s-5); }
.byline__mark { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #FBF8F1; box-shadow: inset 0 0 0 1px var(--rule); padding: 4px; }
.byline p { margin: 0; min-width: 0; flex: 1 1 10rem; display: grid; gap: .1rem; font-size: var(--t-s); color: var(--ink-2); }
.byline__opts { margin-left: auto; }
@media (min-width: 48rem) { .byline__opts { display: none; } }
/* wide screens: title on the left, deck and byline on the right, so the short answer arrives sooner */
@media (min-width: 64rem) {
  .a-plate { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "kicker kicker" "title deck" "title byline" "title tools"; column-gap: clamp(2rem, 1rem + 2.5vw, 3.5rem); max-width: 74rem; align-items: end; }
  .a-plate > .a-head__kicker { grid-area: kicker; }
  .a-plate > .a-title { grid-area: title; align-self: end; }
  .a-plate > .a-deck { grid-area: deck; margin-top: 0; font-size: 1.12rem; }
  .a-plate > .byline { grid-area: byline; margin-top: var(--s-4); }
  .a-plate > .tools-row { grid-area: tools; margin-top: var(--s-4); }
}
@media (min-width: 70rem) { .a-head .tools-row { display: none; } } /* the trail carries them */
.byline a { font-weight: 600; color: var(--ink); text-decoration: none; font-size: var(--t-m); }
.byline a:hover { text-decoration: underline; }
@media (max-width: 47.99rem) {
  .a-head__crumbs { padding-block: .45rem .55rem; }
  .a-hero { height: 9.25rem; }
  .a-head__wrap { margin-top: -2.75rem; }
  .a-plate { padding: 1.05rem 1.1rem 1.15rem; }
  .a-deck { margin-top: var(--s-3); font-size: 1.0625rem; line-height: 1.55; }
  .a-title { margin-top: var(--s-3); font-size: clamp(1.95rem, 1.4rem + 2.6vw, 2.3rem); line-height: 1.04; }
  .a-head__kicker .signal { --size: 2.2rem; }
  .byline { margin-top: var(--s-4); }
  .a-head .tools-row { display: none; }
}

.tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--s-5); }
.seg { display: inline-flex; padding: .2rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.seg button { min-width: 2.75rem; min-height: 2.5rem; padding: .3rem .7rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-family: var(--f-read); cursor: pointer; }
.seg button:nth-child(1) { font-size: .9rem; } .seg button:nth-child(2) { font-size: 1.05rem; } .seg button:nth-child(3) { font-size: 1.25rem; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pill-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .4rem .95rem; border-radius: var(--r-pill); border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-2); font: 600 var(--t-s)/1 var(--f-ui); cursor: pointer; }
.pill-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.pill-btn[aria-pressed="true"] { background: var(--green-wash); color: var(--green); border-color: transparent; }
.pill-btn svg { width: 1.05rem; height: 1.05rem; }

/* ---------- article: layout & reading surface ---------- */
.a-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-bottom: var(--s-7); }
.a-body { min-width: 0; max-width: var(--w-read); margin-inline: auto; width: 100%; }
@media (min-width: 70rem) {
  .a-layout { grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); column-gap: var(--s-7); }
  .a-body { grid-column: 2; }
}
.prose { font: 400 var(--t-read)/var(--lead-read) var(--f-read); color: var(--ink); font-optical-sizing: auto; hanging-punctuation: first; }
.prose p { margin: 0 0 1em; }
.prose strong { font-weight: 640; }
.prose ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin: .35em 0; padding-left: .2em; }
.prose li::marker { color: var(--gold); content: "◆  "; font-size: .62em; }
.prose a { overflow-wrap: anywhere; }
/* a drop cap opens the first section */
.prose > .a-sec:first-child > p:first-of-type::first-letter { float: left; margin: .06em .12em 0 0; font: 600 3.55em/.82 var(--f-display); color: var(--accent); }

.a-sec { position: relative; padding-top: var(--s-6); }
.a-sec h2, .faq h2, .sources h2, .about h2 { margin: 0 0 .75rem; font: 600 var(--t-h2)/1.08 var(--f-display); color: var(--heading); scroll-margin-top: calc(var(--bar-h) + 1.25rem); }
.a-sec h2 { font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.4rem); }
.a-sec h2 .num { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .16em; color: var(--gold-ink); }
.a-sec h2 .num::before { content: ""; width: 1.6rem; height: 1px; background: var(--wire); }
.a-sec--safety { margin-top: var(--s-6); padding: var(--s-5) var(--s-5) var(--s-3); border-radius: var(--r-m); background: var(--alert-bg); box-shadow: inset 0 0 0 1px var(--alert-rule); }
.a-sec--safety h2 .num { color: var(--alert); }
.a-sec--safety h2 .num::before { background: var(--alert); }
.a-sec--safety h2 .num::after { content: " · When to seek care"; letter-spacing: .12em; }
p.urgent { position: relative; padding-left: 2.1rem; font-weight: 500; }
p.urgent::before { content: "!"; position: absolute; left: 0; top: .2em; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; background: var(--alert); color: var(--paper); font: 700 .9rem/1 var(--f-ui); }

/* the short answer: first thing after the title, on paper with a glass rim and the gold thread */
.answer { position: relative; margin-top: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-5); border-radius: var(--r-l); background: var(--paper); overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .9)), inset 0 0 0 1px var(--rule), 0 30px 60px -44px rgb(var(--shadow-rgb) / .65); }
.answer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 120 1, 220 12, 330 6 S 520 1, 600 7' fill='none' stroke='%23B8913F' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.answer__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .7rem; }
.answer h2 { margin: 0; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.answer__time { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .04em; }
.answer__text { font: 400 var(--t-lead)/1.6 var(--f-read); color: var(--ink); }
.answer__text p { margin: 0; }
.points { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.points h3 { margin: 0 0 .5rem; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.points ol { margin: 0; padding: 0; list-style: none; counter-reset: pt; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.points ol::before { content: ""; position: absolute; left: .62rem; top: 1.1rem; bottom: 1.1rem; width: 1px; background: var(--wire); opacity: .6; }
.points li { counter-increment: pt; position: relative; }
.points a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .7rem; align-items: baseline; padding: .6rem 0; color: var(--ink); text-decoration: none; font: 400 1.02rem/1.5 var(--f-read); }
.points a::before { content: counter(pt); display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--wire); font: 600 .7rem/1 var(--f-ui); color: var(--gold-ink); position: relative; top: .1rem; }
.points a::after { content: "↓"; color: var(--accent); font-family: var(--f-ui); }
.points a:hover { color: var(--accent); }
.points__note { margin: .5rem 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.safety-jump { display: inline-flex; align-items: center; gap: .55rem; margin-top: var(--s-4); padding: .55rem .95rem; border-radius: var(--r-pill); background: var(--alert-bg); color: var(--alert); font: 600 var(--t-s)/1.2 var(--f-ui); text-decoration: none; box-shadow: inset 0 0 0 1px var(--alert-rule); }
.safety-jump::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--alert); }
.safety-jump:hover { color: var(--alert); text-decoration: underline; }

/* in-flow contents (mobile/tablet) */
.toc-inline { margin-top: var(--s-5); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--rule); background: var(--paper); }
.toc-inline summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; min-height: 3.25rem; padding: .6rem 1.1rem; cursor: pointer; font-weight: 600; list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--ink-3); }
.toc-inline[open] summary::after { content: "−"; }
.toc-inline summary span { font-weight: 400; color: var(--ink-3); font-size: var(--t-s); margin-left: auto; }
.toc-inline ol { margin: 0; padding: 0 1.1rem 1rem 2.6rem; display: grid; gap: .1rem; }
.toc-inline li::marker { color: var(--gold-ink); font: 600 var(--t-xs) var(--f-ui); }
.toc-inline a { display: block; padding: .45rem 0; color: var(--ink); text-decoration: none; }
.toc-inline a:hover { color: var(--accent); text-decoration: underline; }
@media (min-width: 70rem) { .toc-inline { display: none; } }

/* reading trail (desktop rail): the gold thread fills as you read */
.trail { display: none; }
@media (min-width: 70rem) {
  .trail { display: block; grid-column: 1; grid-row: 1; }
  .trail__inner { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1.5rem); max-height: calc(100vh - 3rem); overflow: auto; padding: 1.1rem 1rem 1rem; border-radius: var(--r-l); scrollbar-width: thin; }
}
.trail__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.trail__head .signal { --size: 2.4rem; }
.trail__title { margin: 0; font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.trail__left { margin: 0; font-size: var(--t-s); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.trail ol::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--rule); border-radius: 2px; }
.trail ol::after { content: ""; position: absolute; left: .45rem; top: .6rem; width: 2px; height: calc((100% - 1.2rem) * var(--p, 0)); background: linear-gradient(var(--wire), var(--accent)); border-radius: 2px; box-shadow: 0 0 8px color-mix(in srgb, var(--wire) 60%, transparent); }
.trail li { position: relative; z-index: 1; }
.trail li > a { position: relative; display: block; padding: .42rem .25rem .42rem 1.6rem; color: var(--ink-2); text-decoration: none; font-size: .92rem; line-height: 1.35; border-radius: 8px; }
.trail li > a::before { content: ""; position: absolute; left: .2rem; top: .75rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--rule-strong); transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.trail li > a:hover { color: var(--ink); background: rgb(var(--glass-rgb) / .6); }
.trail li > a.is-done::before { background: var(--wire); box-shadow: 0 0 0 2px var(--wire); }
.trail li > a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.trail li > a[aria-current="true"]::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.trail li > a.is-safety { color: var(--alert); }
.trail__tools { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); display: grid; gap: .5rem; }
.trail__tools .seg { justify-self: start; }

/* reading bar (mobile/tablet; appears after the title) */
.rbar { position: fixed; z-index: 40; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 0; transform: translateY(-120%); transition: transform var(--t-med) var(--ease); }
.rbar.is-on { transform: none; }
.rbar__inner { display: flex; align-items: center; gap: .5rem; min-height: var(--bar-h); padding: 0 .35rem; border-radius: var(--r-pill); overflow: hidden; }
.rbar__sec { flex: 1; min-width: 0; display: grid; gap: .05rem; line-height: 1.2; }
.rbar__sec strong { font-size: var(--t-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar__sec span { font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rbar__progress { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 2px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--wire), var(--accent)); border-radius: 3px; }
.rbar .icon-btn { width: 2.6rem; height: 2.6rem; border: 0; background: transparent; }
@media (min-width: 70rem) { .rbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .rbar { transition: none; } }
.sheet { position: fixed; z-index: 45; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 14px); max-height: min(70vh, 34rem); overflow: auto; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-l); --glass-a: .9; }
.sheet h2 { margin: 0 0 .5rem; font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.sheet .trail { display: block; }
.sheet__opts { display: grid; gap: .8rem; }
.sheet__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.progress-top { position: fixed; z-index: 30; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--wire), var(--accent)); display: none; }
@media (min-width: 70rem) { .progress-top { display: block; } }

/* belief → what is more accurate */
.belief { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin: var(--s-6) 0 var(--s-2); }
.belief__k { margin: 0 0 .45rem; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.belief__myth { position: relative; padding: 1.2rem 1.3rem; border-radius: var(--r-m); background: var(--bg-deep); color: var(--ink-2); }
.belief__myth .belief__k { color: var(--ink-3); }
.belief__myth p:not(.belief__k) { margin: 0; font: italic 400 1.2rem/1.5 var(--f-read); }
.belief__fact { padding: 1.2rem 1.3rem; border-radius: var(--r-m); background: var(--green-wash); box-shadow: inset 3px 0 0 var(--green); }
.belief__fact .belief__k { color: var(--green); }
.belief__fact p:not(.belief__k) { margin: 0; font: 400 1.06rem/1.62 var(--f-read); color: var(--ink); }
@media (min-width: 40rem) { .belief { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; } }

/* FAQ */
.faq { padding-top: var(--s-7); }
.faq details { margin-top: .6rem; border-radius: var(--r-m); background: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .8)), inset 0 0 0 1px var(--rule); transition: box-shadow var(--t-fast); }
.faq details[open] { box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .8)), inset 0 0 0 1px var(--rule-strong), 0 18px 40px -30px rgb(var(--shadow-rgb) / .55); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; font: 600 1.08rem/1.4 var(--f-read); color: var(--ink); scroll-margin-top: calc(var(--bar-h) + 1.25rem); border-radius: inherit; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; justify-self: end; width: 1.9rem; height: 1.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-strong);
  background: linear-gradient(var(--ink-2), var(--ink-2)) center / .7rem 1.6px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) center / 1.6px .7rem no-repeat; transition: transform var(--t-fast) var(--ease); }
.faq details[open] summary::after { background: linear-gradient(var(--ink-2), var(--ink-2)) center / .7rem 1.6px no-repeat; transform: rotate(180deg); }
.faq summary:hover { color: var(--accent); }
.faq__a { padding: 0 3.6rem 1.1rem 1.1rem; }
.faq__a p { margin: 0; font: 400 1.05rem/1.65 var(--f-read); color: var(--ink-2); }
.faq details:target summary, .faq details.is-target summary { color: var(--accent); }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--ease), content-visibility .32s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }
}

.endmark { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: var(--s-7) 0 0; font: 400 2rem/1 "Mukta", "Noto Sans Devanagari", serif; color: var(--gold); letter-spacing: .1em; }
.endmark::before, .endmark::after { content: ""; width: 4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--wire)); }
.endmark::after { background: linear-gradient(90deg, var(--wire), transparent); }

.sources { padding-top: var(--s-6); }
.sources ol { margin: 0; padding-left: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.sources li { font: 400 .98rem/1.6 var(--f-read); color: var(--ink-2); }
.sources li::marker { color: var(--gold-ink); font: 600 var(--t-s) var(--f-ui); }
.sources a { color: var(--accent); }
.ext::after { content: " ↗"; font-family: var(--f-ui); font-size: .85em; }
.sources__note { margin: .9rem 0 0; font-size: var(--t-s); color: var(--ink-3); }

.about { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-m); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.about h2 { font-size: 1.5rem; }
.about dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.2rem; font-size: var(--t-m); }
.about dt { color: var(--ink-3); }
.about dd { margin: 0; color: var(--ink); }
.about p { margin: .9rem 0 0; font-size: var(--t-s); color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 30rem) { .about dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .about dd { margin-bottom: .55rem; } }

/* next step: a night band; the guide's still behind one large glass panel */
.next { position: relative; padding-block: clamp(3.5rem, 8vw, 7.5rem); overflow: clip; isolation: isolate; }
.next__media { position: absolute; inset: -12% 0; z-index: -1; }
.next__photo { position: absolute; inset: 0; }
.next__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 21 17 / .62), rgb(11 21 17 / .5) 40%, rgb(11 21 17 / .78)); }
.next__glass { position: relative; max-width: 60rem; margin-inline: auto; padding: clamp(1.4rem, 1rem + 2.4vw, 3rem); border-radius: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
.next__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.next__head .signal { --size: 2.6rem; }
.next__title { margin: .6rem 0 .5rem; font: 500 clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem)/1.02 var(--f-display); letter-spacing: -.01em; }
.next__lead { margin: 0; max-width: 34rem; color: var(--ink-2); font: 400 1.1rem/1.6 var(--f-read); }
.routes { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.routes a { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: 1rem 1.15rem; border-radius: var(--r-m); background: rgb(var(--glass-rgb) / .55); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .8)), inset 0 0 0 1px var(--rule); color: var(--ink); text-decoration: none; transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease); }
.routes a:hover { box-shadow: inset 0 0 0 1px var(--ink-3); transform: translateY(-2px); }
.routes__k { font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.routes__t { font: 600 1.4rem/1.2 var(--f-display); }
.routes__d { font-size: var(--t-s); color: var(--ink-2); }
@media (min-width: 40rem) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.next__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--s-5); }
.next__fine { margin: .9rem 0 0; display: grid; gap: .35rem; font-size: var(--t-s); color: var(--ink-2); }
.next__fine p { margin: 0; }
.next__tz strong { color: var(--ink); font-weight: 600; }

/* read next: a rail of the other guides */
.readnext { padding-block: var(--s-8) var(--s-7); }
.readnext__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); }
.readnext h2 { margin: .3rem 0 0; font: 500 var(--t-h2)/1.05 var(--f-display); }
.readnext .rail-ctl { margin-bottom: 0; }
.rcard { position: relative; flex: 0 0 min(19rem, 74vw); scroll-snap-align: start; display: flex; flex-direction: column; overflow: clip; border-radius: 1.5rem; }
.rcard__media { position: relative; aspect-ratio: 4 / 4.4; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 30px 60px -36px rgb(var(--shadow-rgb) / .7); }
.rcard__photo { position: absolute; inset: 0; }
.rcard__media--amber, .rcard__media--sage, .rcard__media--maroon, .rcard__media--library, .rcard--care .rcard__media, .rcard--hub .rcard__media { display: grid; place-items: center; }
.rcard__media--amber { --tint: var(--amber); } .rcard__media--sage { --tint: var(--sage); } .rcard__media--maroon { --tint: var(--maroon); }
.rcard--care .rcard__media, .rcard--hub .rcard__media { background: radial-gradient(70% 60% at 30% 25%, rgb(255 255 255 / .55), transparent 60%), radial-gradient(90% 80% at 70% 80%, rgb(var(--tint) / .55), rgb(var(--tint) / .2) 70%), var(--bg-deep); }
.rcard__icon { width: 46%; height: 46%; margin-bottom: 22%; color: var(--ink); opacity: .78; }
.rcard__media--library { background: radial-gradient(60% 50% at 50% 30%, rgb(255 240 210 / .7), transparent 70%), var(--bg-deep); }
.rcard__media--library .disc { --d: 58%; mix-blend-mode: var(--disc-blend); }
.rcard__media--library .disc--amber { left: 6%; top: 8%; right: auto; } .rcard__media--library .disc--sage { left: 34%; top: 14%; right: auto; } .rcard__media--library .disc--maroon { left: 20%; top: 30%; right: auto; --d: 48%; }
.rcard__photo img { transition: scale 1.2s var(--ease); }
.rcard:hover .rcard__photo img { scale: 1.05; }
.rcard__body { position: relative; z-index: 2; display: grid; gap: .4rem; margin: -5.5rem .5rem 0; padding: 1rem 1.1rem 1.1rem; border-radius: 1.15rem; }
.rcard__link { color: var(--heading); text-decoration: none; font: 600 1.3rem/1.15 var(--f-display); }
.rcard__link::after { content: ""; position: absolute; inset: -100vmax; z-index: 4; }
.rcard__link:hover { color: var(--accent); }
.rcard__link:focus-visible { outline: none; }
.rcard:has(.rcard__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.rcard__meta { margin: 0; font-size: var(--t-s); color: var(--ink-2); }
.readnext__more { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.readnext__note { margin: .5rem 0 0; max-width: 34rem; color: var(--ink-2); }
.links-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 46rem; }
.links-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem .1rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.links-list a::after { content: "→"; color: var(--accent); }
.links-list a:hover { color: var(--accent); }

.disclaimer { margin: 0 auto; padding-bottom: var(--s-6); max-width: 46rem; text-align: center; font-size: var(--t-s); color: var(--ink-3); }


/* ---------- quiet companions: video consultation hint, Google preferred source ---------- */
.vhint { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; min-height: 2.6rem; padding: .45rem .9rem .45rem .75rem; border-radius: var(--r-pill); color: var(--ink-2); font: 400 var(--t-s)/1.35 var(--f-ui); text-decoration: none;
  background: rgb(var(--glass-rgb) / .5); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .7)), inset 0 0 0 1px rgb(var(--shadow-rgb) / .13); transition: background-color var(--t-fast), color var(--t-fast); }
.vhint:hover { color: var(--ink); background: rgb(var(--glass-rgb) / .85); }
.vhint b { color: var(--ink); font-weight: 600; }
.vhint__t { min-width: 0; }
.vhint__tz { color: var(--ink-2); }
.vhint__dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--wire); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire) 22%, transparent); }
.vhint svg { flex: none; width: .95rem; height: .95rem; color: var(--accent); transition: translate var(--t-med) var(--spring); }
.vhint:hover svg { translate: .2rem 0; }
.vhint--trail { display: flex; align-items: flex-start; border-radius: .9rem; padding: .65rem .8rem; font-size: .82rem; }
.vhint--trail .vhint__dot { margin-top: .35rem; }
.vhint--trail svg { margin-top: .15rem; }

.pref-src { display: inline-flex; align-items: center; gap: .7rem; max-width: 100%; padding: .5rem 1.05rem .5rem .5rem; border-radius: var(--r-pill); text-decoration: none; color: var(--ink);
  background: rgb(var(--glass-rgb) / .72); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--lg-rim)), inset 0 0 0 1px rgb(var(--shadow-rgb) / .14), 0 12px 26px -18px rgb(var(--shadow-rgb) / .7); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast); }
.pref-src:hover { color: var(--ink); transform: translateY(-1px); }
.pref-src__mark { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #FFF8E6; background: radial-gradient(circle at 35% 28%, #F6DEA4, #B8913F 58%, #7E5E22); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 4px 10px -4px rgb(126 94 34 / .8); }
.pref-src__mark svg { width: 1.1rem; height: 1.1rem; }
.pref-src__t { display: grid; gap: .05rem; min-width: 0; font: 600 var(--t-s)/1.25 var(--f-ui); }
.pref-src__t small { font: 600 .68rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.foot .pref-src { margin-top: .4rem; color: var(--band-ink); background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.foot .pref-src:hover { color: var(--band-accent); }
.foot .pref-src__t small { color: var(--band-ink-2); }
.prefer { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-l); display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; justify-items: start; --glass-a: .7; }
.prefer__t { margin: 0; font: 600 1.4rem/1.2 var(--f-display); color: var(--heading); }
.prefer__d { margin: 0 0 .3rem; max-width: 34rem; color: var(--ink-2); font-size: var(--t-s); }

/* ---------- catalogue scale: guide cards, hub rows, search results, hub pages ----------
   A hundred guides cannot all stack. The stack keeps the editors' "Start here" five; every guide also sits in
   its hub's row, the hub page, and the search results. These cards carry no backdrop blur, and their art is
   still until hovered, so a long page scrolls as lightly as a short one. */
.gitem { list-style: none; display: flex; }
.gitem[hidden] { display: none; }
.gcard { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: 1.35rem; overflow: clip; background: var(--paper);
  box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .1), inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .7)), 0 22px 40px -30px rgb(var(--shadow-rgb) / .7);
  transition: translate .45s var(--spring), box-shadow .3s var(--ease); }
.gcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-deep); }
.gcard__photo { position: absolute; inset: 0; }
.gcard__photo img { transition: scale 1.1s var(--ease); }
.gcard__photo.ak { --ak-ground: color-mix(in srgb, rgb(var(--tint, var(--amber))) 12%, var(--bg-deep)); }
.gcard .ak__light { -webkit-mask-size: 112%; mask-size: 112%; }
.gcard__num { position: absolute; right: .8rem; bottom: .2rem; font: 500 3.6rem/1 var(--f-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ink) 45%, transparent); pointer-events: none; }
.gcard__body { flex: 1; min-width: 0; display: grid; align-content: start; gap: .45rem; padding: 1rem 1.1rem 1.1rem; }
.gcard__title { margin: 0; font: 600 1.32rem/1.14 var(--f-display); letter-spacing: -.005em; color: var(--heading); overflow-wrap: anywhere; }
.gcard__link { color: inherit; text-decoration: none; }
.gcard__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.gcard__link:focus-visible { outline: none; }
.gcard:has(.gcard__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.gcard__meta { margin: .1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: var(--t-s); color: var(--ink-2); }
.gcard__new, .gcard__draft { padding: .22rem .55rem; border-radius: var(--r-pill); font: 600 var(--t-xs)/1.1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.gcard__new { background: var(--green-wash); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }
.gcard__draft { background: var(--note-bg); color: var(--note-ink); box-shadow: inset 0 0 0 1px var(--note-rule); }
.gcard.is-draft { box-shadow: inset 0 0 0 2px var(--note-rule), 0 22px 40px -30px rgb(var(--shadow-rgb) / .7); }
@media (hover: hover) and (pointer: fine) {
  .gcard:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .14), inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .7)), 0 30px 50px -30px rgb(var(--shadow-rgb) / .8); }
  .gcard:hover .gcard__photo img { scale: 1.045; }
  .gcard:hover .ak__light::before { animation-play-state: running; }
  .gcard:hover .gcard__title { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .gcard, .gcard__photo img { transition: none; } .gcard:hover { translate: none; } }

.shelf__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0 0 var(--s-4) .3rem; color: var(--ink-2); font: 400 1rem/1.5 var(--f-read); }
.shelf__sub--hubs { margin-top: var(--s-7); }
.browse[hidden], .results[hidden] { display: none; }
.shelf.is-results .beads { display: none; }

.hubrow { padding-top: var(--s-6); scroll-margin-top: calc(var(--bar-top, 0px) + var(--bar-h, 3.5rem) + 1rem); }
.hubrow__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem 1rem; }
.hubrow__tools { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .2rem; }
.hubrow__tools .rail-ctl { margin: 0; }
@media (max-width: 39.99rem) { .hubrow__tools .rail-ctl { display: none; } } /* phones swipe; the first row nudges once to show it can */
@media (min-width: 40rem) { .hubrow__head { grid-template-columns: auto minmax(0, 1fr) auto; } .hubrow__tools { grid-column: auto; margin-top: 0; } }
.hubrow__title { margin: 0; font: 500 clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem)/1.08 var(--f-display); letter-spacing: -.01em; }
.hubrow__title a { color: inherit; text-decoration: none; }
.hubrow__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.hubrow__meta { margin: .15rem 0 0; font-size: var(--t-s); color: var(--ink-2); }
.hubrow__all { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: var(--r-pill); color: var(--ink); font: 600 var(--t-s)/1 var(--f-ui); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule-strong); transition: gap var(--t-med) var(--spring), box-shadow var(--t-fast); }
.hubrow__all svg { width: 1rem; height: 1rem; }
.hubrow__all:hover { gap: .7rem; box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink); }
.hubrow__track { padding-top: .9rem; }
.hubrow__track > .gitem { flex: 0 0 min(17.5rem, 76vw); scroll-snap-align: start; }
.gmore { position: relative; flex: 1; display: grid; place-content: center; justify-items: center; gap: .4rem; min-height: 14rem; padding: 1.2rem; border-radius: 1.35rem; text-align: center; color: var(--ink); text-decoration: none; font: 600 var(--t-s)/1.3 var(--f-ui); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.gmore__n { font: 500 2.6rem/1 var(--f-display); color: var(--gold-ink); }
.gmore svg { width: 1.1rem; height: 1.1rem; }
.gmore:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); color: var(--ink); }

.hubmark { flex: none; display: inline-grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; color: var(--ink);
  background: radial-gradient(70% 70% at 32% 26%, rgb(255 255 255 / .7), transparent 62%), radial-gradient(100% 100% at 70% 80%, rgb(var(--tint, var(--amber)) / .5), rgb(var(--tint, var(--amber)) / .16));
  box-shadow: inset 0 0 0 1px rgb(var(--tint, var(--amber)) / .35), 0 8px 18px -10px rgb(var(--tint, var(--amber)) / .9); }
.hubmark svg { width: 62%; height: 62%; opacity: .85; }
.hubmark--sm { width: 2.1rem; height: 2.1rem; }
.hubmark--new { --tint: var(--amber); }

.results { padding-top: var(--s-2); }
.results__grid, .hgroup__grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
@media (max-width: 39.99rem) { /* phones: a long list reads as compact rows, thumbnail beside the title */
  :is(.results__grid, .hgroup__grid) { gap: .7rem; }
  :is(.results__grid, .hgroup__grid) .gcard { flex-direction: row; border-radius: 1.1rem; }
  :is(.results__grid, .hgroup__grid) .gcard__media { flex: 0 0 min(6.25rem, 30%); aspect-ratio: auto; min-height: min(6.25rem, 30vw); }
  :is(.results__grid, .hgroup__grid) .gcard__num { right: .4rem; font-size: 2.1rem; }
  :is(.results__grid, .hgroup__grid) .gcard__body { padding: .8rem .95rem .85rem; gap: .3rem; }
  :is(.results__grid, .hgroup__grid) .gcard__title { font-size: 1.16rem; }
  :is(.results__grid, .hgroup__grid) .gcard .card__kicker { font-size: .7rem; letter-spacing: .1em; }
}

/* hub page */
.hub-hero { position: relative; overflow: clip; isolation: isolate; padding-block: clamp(1.6rem, 1rem + 3vw, 3.5rem) var(--s-6); }
.hub-hero__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hub-hero__glow { position: absolute; right: -18%; top: -30%; width: min(70rem, 120vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--tint) / .34), rgb(var(--tint) / .1) 55%, transparent 72%); }
.hub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.hub-hero__copy { display: grid; gap: var(--s-4); justify-items: start; }
.hub-hero__copy > * { margin: 0; }
.hub-hero__q { display: inline-flex; align-items: center; gap: .65rem; font: italic 400 1.1rem/1.4 var(--f-read); color: var(--ink-2); }
.hub-hero__title { font: 500 var(--t-h1)/1.02 var(--f-display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.hub-hero__title span { font-style: italic; color: var(--ink-2); }
.hub-hero__deck { max-width: 36rem; font: 400 var(--t-lead)/1.55 var(--f-read); color: var(--ink-2); }
.hub-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding: 0; list-style: none; font-size: var(--t-s); color: var(--ink-2); }
.hub-stats b { display: block; font: 500 2rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.hub-jump ul, .hub-others ul { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.chip--link { text-decoration: none; color: var(--ink); background: rgb(var(--glass-rgb) / .62); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.chip--link:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.chip--care .chip__n { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.hub-hero__art { display: none; }
@media (min-width: 56rem) {
  .hub-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .hub-hero__art { display: block; margin: 0; aspect-ratio: 1; border-radius: 2rem; background: color-mix(in srgb, rgb(var(--tint)) 14%, var(--bg-deep));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 40px 70px -44px rgb(var(--shadow-rgb) / .8); }
}
.hub-body { padding-block: var(--s-4) var(--s-8); }
.hgroup { padding-top: var(--s-6); scroll-margin-top: 1rem; }
.hgroup + .hgroup { margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.hgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: var(--s-5); }
.hgroup__title { margin: 0; font: 500 clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.01em; }
.hgroup__meta { margin: 0; font-size: var(--t-s); color: var(--ink-2); }
.hgroup__care { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; min-width: 0; max-width: 100%; min-height: 2.75rem; color: var(--green); font: 600 var(--t-s)/1.2 var(--f-ui); text-decoration: none; }
.hgroup__care span { padding: .3rem .6rem; border-radius: var(--r-pill); background: var(--green-wash); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }
.hgroup__care svg { width: 1rem; height: 1rem; transition: translate var(--t-med) var(--spring); }
.hgroup__care:hover { color: var(--green); text-decoration: underline; }
.hgroup__care:hover svg { translate: 3px 0; }
.hwait { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.hwait h2 { margin: 0 0 .4rem; font: 500 1.7rem/1.15 var(--f-display); }
.hwait p { margin: 0 0 var(--s-4); color: var(--ink-2); }
.hwait__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hub-care { padding-block: var(--s-6) var(--s-7); }
.hub-care__panel { max-width: 60rem; margin-inline: auto; padding: clamp(1.4rem, 1rem + 2.4vw, 3rem); border-radius: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); --glass-a: .8; }
.hub-care__head { display: flex; align-items: center; gap: .75rem; }
.hub-care__title { margin: .6rem 0 .5rem; font: 500 clamp(2rem, 1.5rem + 2vw, 3.2rem)/1.04 var(--f-display); letter-spacing: -.01em; }
.hub-care__lead { margin: 0; max-width: 36rem; color: var(--ink-2); font: 400 1.08rem/1.6 var(--f-read); }
.hub-others { display: grid; gap: var(--s-4); padding-block: var(--s-6) var(--s-7); }
.hub-others h2 { margin: 0; font: 500 1.8rem/1.1 var(--f-display); }
.hub-others__all { margin: 0; }
.hub-others__all a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.hub-others__all svg { width: 1rem; height: 1rem; }
.rcard__plate { position: absolute; inset: 0; background: transparent; }
.rcard--hub .ak__light { -webkit-mask-size: 92%; mask-size: 92%; }
@media (forced-colors: active) { .gcard, .gmore { border: 1px solid CanvasText; } }

/* ---------- up next: the next guide, always a different topic ---------- */
.upnext { padding-block: var(--s-8) 0; }
.upnext__card { position: relative; isolation: isolate; display: grid; min-height: clamp(28rem, 62vw, 34rem); border-radius: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); overflow: hidden; background: var(--bg-deep);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 0 0 1px rgb(var(--shadow-rgb) / .08), 0 40px 80px -46px rgb(var(--shadow-rgb) / .8); }
.upnext__media { position: absolute; inset: 0; }
.upnext__photo { position: absolute; inset: 0; }
.upnext__photo img { transition: scale 1.4s var(--ease); }
.upnext__card:hover .upnext__photo img { scale: 1.04; }
.upnext__panel { position: relative; z-index: 2; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin: .55rem; padding: 1.2rem 1.25rem 1.25rem; border-radius: 1.3rem; --glass-a: .86; } /* denser: it sits over light and dark stills alike */
.upnext__k { margin: 0; display: flex; align-items: center; gap: .7rem; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.upnext__line { width: 2.4rem; height: 1px; background: var(--wire); }
.upnext__title { margin: 0; font: 600 clamp(1.7rem, 1.2rem + 2vw, 2.8rem)/1.04 var(--f-display); letter-spacing: -.01em; }
.upnext__link { color: var(--heading); text-decoration: none; }
.upnext__link::after { content: ""; position: absolute; inset: -100vmax; z-index: 4; }
.upnext__link:hover { color: var(--heading); }
.upnext__link:focus-visible { outline: none; }
.upnext__card:has(.upnext__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.upnext__desc { margin: 0; color: var(--ink-2); font: 400 1rem/1.55 var(--f-read); }
.upnext__card:hover .card__meta .go { gap: .75rem; }
/* denser than other panels in every theme: it sits over light and dark stills alike (beats the night .glass--panel rules) */
.upnext .upnext__panel.glass--panel { --glass-a: .86; }
@media (max-width: 47.99rem) {
  .upnext__card { display: flex; flex-direction: column; min-height: 0; }
  .upnext__media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .upnext__panel { margin: -3.2rem .55rem .55rem; }
}
@media (min-width: 48rem) { .upnext__panel { justify-self: start; width: min(34rem, 58%); margin: 1.3rem; padding: clamp(1.4rem, 1rem + 1vw, 2.1rem); gap: .7rem; } }

/* trail footer: up next + video hint (desktop rail and the mobile contents sheet) */
.trail__more { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rule); display: grid; gap: .55rem; }
.trail__next { display: grid; gap: .2rem; padding: .7rem .8rem; border-radius: .9rem; background: rgb(var(--glass-rgb) / .6); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); text-decoration: none; font: 600 1.05rem/1.2 var(--f-display); }
.trail__next span { font: 600 .7rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.trail__next:hover { color: var(--accent); }

/* reading bar: the contents button carries a progress ring */
.rbar__ring { position: relative; }
.rbar__ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--wire) calc(var(--p, 0) * 1turn), rgb(var(--shadow-rgb) / .14) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }

/* ---------- touch: tactile feedback, calmer phone layouts ---------- */
html { -webkit-tap-highlight-color: transparent; }
::selection { background: rgb(var(--amber) / .32); }
@media (hover: none) {
  :is(.scard, .qcard, .rcard, .ctile, .upnext__card, .chip, .btn, .try__b, .vhint, .pref-src, .trail__next, .icon-btn) { transition: scale .25s var(--spring); }
  :is(.scard, .qcard, .rcard, .ctile, .upnext__card):active { scale: .985; }
  :is(.chip, .btn, .try__b, .vhint, .pref-src, .trail__next, .icon-btn):active { scale: .95; }
}
@media (max-width: 47.99rem) { .scard__big { display: none; } }
@media (max-width: 29.99rem) {
  .fan__card--outer { display: none; }
  .fan__card--side .fan__label { display: none; }
}
@keyframes nudge { 0%, 100% { translate: 0 0; } 45% { translate: -2.4rem 0; } }
@keyframes rise-up { from { transform: translateY(2.5rem) scale(.96); } to { transform: none; } }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 1; background: var(--band-bg); color: var(--band-ink); padding-block: var(--s-8) var(--s-6); }
.foot__thread { position: absolute; left: 0; right: 0; top: -26px; width: 100%; height: 52px; overflow: visible; pointer-events: none; }
.foot__thread path { fill: none; stroke: var(--wire); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.foot a { color: var(--band-ink); text-decoration-color: rgb(255 255 255 / .35); }
.foot a:hover { color: var(--band-accent); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.foot__brand { display: grid; gap: .6rem; max-width: 22rem; }
.foot__brand p { margin: 0; color: var(--band-ink-2); }
.foot__mark { width: 3rem; height: 3rem; border-radius: 50%; background: #F6F0E4; padding: 5px; }
.foot h2 { margin: 0 0 .6rem; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--band-accent); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot address { font-style: normal; color: var(--band-ink-2); font-size: var(--t-s); line-height: 1.55; }
.foot address strong { color: var(--band-ink); display: block; font-size: var(--t-m); }
.foot__base { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / .12); display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; font-size: var(--t-s); color: var(--band-ink-2); }
.foot__base p { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.5rem; margin-block: .15rem; padding: .45rem .8rem; border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .2); background: transparent; color: var(--band-ink); cursor: pointer; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .06em; }
.switch[aria-pressed="true"] { background: rgb(226 195 127 / .15); border-color: var(--band-accent); }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .foot__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); } }

/* ---------- preview notes (design-review annotations, hide with the footer switch) ---------- */
.note { display: block; margin: .6rem 0; padding: .55rem .75rem .6rem; border-radius: 8px; border: 1px dashed var(--note-rule); background: var(--note-bg); color: var(--note-ink); font: 400 .8rem/1.45 var(--f-ui); max-width: 44rem; }
.note::before { content: "Preview note · "; font-weight: 600; letter-spacing: .04em; }
.note--missing::before { content: "Missing fact · "; }
.note a { color: inherit; }
:root[data-notes="off"] .note { display: none; }
.foot .note { color: var(--note-ink); }
.hero .note { position: relative; z-index: 1; }

/* ---------- focus mode ---------- */
.focus-exit { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + .75rem); right: max(12px, env(safe-area-inset-right, 0px)); display: none; }
:root.is-focus .focus-exit { display: inline-flex; }
:root.is-focus .mast, :root.is-focus .trail, :root.is-focus .readnext, :root.is-focus .next, :root.is-focus .foot, :root.is-focus .tools-row, :root.is-focus .rbar, :root.is-focus .a-hero { display: none !important; }
:root.is-focus .a-head__wrap { margin-top: var(--s-6); }
:root.is-focus .a-layout { grid-template-columns: minmax(0, 1fr); }
:root.is-focus .a-body { grid-column: 1; }
:root.is-focus body::after { opacity: 0; }

/* =====================================================================
   MOTION. Scroll-linked, never scroll-jacked. Two drivers, one set of keyframes:
   - native scroll-driven animations (html.sda): animation-timeline: scroll() / view()
   - fallback (html.scrub-js): the same keyframes, paused, seeked by --p from tools in journal.js
   Both are switched on by journal.js only when reduced motion is not requested and the reader has not
   turned motion off; without JavaScript every element rests in its final, readable state.
   ===================================================================== */
@keyframes fan-close { to { transform: translateX(calc(var(--o) * 4%)) rotate(calc(var(--o) * 1deg)) translateY(18%) scale(.84); } }
@keyframes disc-rise { to { transform: translateY(var(--rise, -18%)) rotate(var(--turn, 24deg)); } }
@keyframes recede { to { transform: translateY(-.6rem) scale(calc(1 - (var(--n) - var(--i)) * .028)); } }
@keyframes veil { 40% { opacity: .3; } to { opacity: .5; } } /* dims early, so a half-covered card never competes */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pane-turn { from { transform: rotateY(-42deg) translateX(-.6rem) scale(.94); } to { transform: none; } }
@keyframes pane-flat { from { transform: translateY(1.2rem) scale(.97); } to { transform: none; } }
@keyframes deal { from { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(.9); } to { transform: none; } }
@keyframes drift-y { from { transform: translateY(-7%); } to { transform: translateY(7%); } }
@keyframes hero-par { to { transform: translateY(14%) scale(1.06); } }
@keyframes rail-focus { 0%, 100% { scale: .94; } 28%, 72% { scale: 1; } }
@keyframes ribbon-slide { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes rise-in { from { transform: translateY(1.2rem); opacity: .35; } } /* starts visible: a first frame is never blank; no blur (it repaints every frame) */
@keyframes deal-in { from { transform: translateY(42%) rotate(calc(var(--o) * -9deg)) scale(.9); opacity: .4; } }
@keyframes thread-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* time-based entrances (once, on load) */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-off) .hero__copy > * { animation: rise-in .9s var(--ease) both; }
  html.js:not(.motion-off) .hero__copy > :nth-child(2) { animation-delay: .08s; }
  html.js:not(.motion-off) .hero__copy > :nth-child(3) { animation-delay: .16s; }
  html.js:not(.motion-off) .hero__copy > :nth-child(n+4) { animation-delay: .24s; }
  html.js:not(.motion-off) .hero__title em::after { animation: thread-draw 1.1s .7s var(--ease) both; }
  html.js:not(.motion-off) .fan__inner { animation: deal-in 1s var(--spring) both; animation-delay: calc(.3s + var(--k) * .09s); }
}

/* native scroll-driven */
@media (prefers-reduced-motion: no-preference) {
  html.sda:not(.motion-off) .fan__card { animation: fan-close linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
  html.sda:not(.motion-off) .disc { animation: disc-rise linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  html.sda:not(.motion-off) .disc--sage { --rise: -30%; --turn: -30deg; }
  html.sda:not(.motion-off) .disc--maroon { --rise: -46%; --turn: 40deg; }
  html.sda:not(.motion-off) .stack:not(.is-flat) { view-timeline: --stack block; view-timeline-inset: var(--stack-top) 0px; }
  html.sda:not(.motion-off) .stack:not(.is-flat) .scard { animation: recede linear both; animation-timeline: --stack; animation-range: exit-crossing calc(var(--i) / var(--n) * 100%) exit-crossing calc((var(--i) + 1) / var(--n) * 100%); }
  html.sda:not(.motion-off) .stack:not(.is-flat) .scard::after { animation: veil linear both; animation-timeline: --stack; animation-range: exit-crossing calc(var(--i) / var(--n) * 100%) exit-crossing calc((var(--i) + 1) / var(--n) * 100%); }
  html.sda:not(.motion-off) .journey { view-timeline: --journey block; }
  html.sda:not(.motion-off) .journey .wire__line { animation: draw linear both; animation-timeline: --journey; animation-range: cover 12% cover 52%; }
  html.sda:not(.motion-off) .journey .pane { animation: pane-flat linear both; animation-timeline: --journey; animation-range: cover calc(10% + var(--k) * 6%) cover calc(30% + var(--k) * 6%); }
  html.sda:not(.motion-off) .qcard { animation: rail-focus linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
  html.sda:not(.motion-off) .ribbon { animation: ribbon-slide linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  html.sda:not(.motion-off) .care { view-timeline: --care block; }
  html.sda:not(.motion-off) .care.is-dealable .ctile { animation: deal linear both; animation-timeline: --care; animation-range: entry 20% cover 46%; }
  html.sda:not(.motion-off) .roots__art .ak__light { animation: drift-y linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  html.sda:not(.motion-off) .a-hero__photo { animation: hero-par linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  html.sda:not(.motion-off) .next__media { animation: drift-y linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  html.sda:not(.motion-off) .upnext__card { animation: rise-up linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  @media (min-width: 64rem) {
    html.sda:not(.motion-off) .journey .pane { animation-name: pane-turn; }
  }
}

/* fallback driver: same keyframes, paused, seeked by --p (0 → 1), which journal.js computes per element
   with the same range maths as the native timelines above */
@media (prefers-reduced-motion: no-preference) {
  html.scrub-js:not(.motion-off) :is(.fan__card, .disc, .stack:not(.is-flat) .scard, .journey .wire__line, .journey .pane, .care.is-dealable .ctile, .a-hero__photo, .next__media, .roots__art .ak__light) {
    animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s);
  }
  html.scrub-js:not(.motion-off) .stack:not(.is-flat) .scard::after { animation: veil 1s linear both paused; animation-delay: calc(var(--p, 0) * -1s); }
  html.scrub-js:not(.motion-off) .fan__card { animation-name: fan-close; }
  html.scrub-js:not(.motion-off) .disc { animation-name: disc-rise; }
  html.scrub-js:not(.motion-off) .disc--sage { --rise: -30%; --turn: -30deg; }
  html.scrub-js:not(.motion-off) .disc--maroon { --rise: -46%; --turn: 40deg; }
  html.scrub-js:not(.motion-off) .stack:not(.is-flat) .scard { animation-name: recede; }
  html.scrub-js:not(.motion-off) .journey .wire__line { animation-name: draw; }
  html.scrub-js:not(.motion-off) .journey .pane { animation-name: pane-flat; }
  html.scrub-js:not(.motion-off) .care.is-dealable .ctile { animation-name: deal; }
  html.scrub-js:not(.motion-off) .roots__art .ak__light { animation-name: drift-y; }
  html.scrub-js:not(.motion-off) .a-hero__photo { animation-name: hero-par; }
  html.scrub-js:not(.motion-off) .next__media { animation-name: drift-y; }
  @media (min-width: 64rem) { html.scrub-js:not(.motion-off) .journey .pane { animation-name: pane-turn; } }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .rail.is-hint .rail__track { animation: nudge 1.1s var(--ease) .15s 1 both; }
  html.js:not(.motion-off) .search.has-hint .search__caret { animation: caret 1.05s steps(1) infinite; }
}
@keyframes caret { 50% { opacity: 0; } }

/* No view transitions between pages: they held each page back until the old snapshot was done, shook the Vijaya door's leaf
   and, inside a hosted frame, sometimes opened the next page part-way down (owner, 28 Oct 2026). Pages simply navigate. */
@view-transition { navigation: none; }

/* ---------- doors into the Vijaya room (the room itself is styled by vijaya-room.css) ----------
   Dusk colours borrowed from the room, so a door reads as a way somewhere else; site fonts, so no room font loads here.
   The leaf is seven leaflets (sprite dl-*): --spread folds them (-) or fans them (+) about the leaf's base. */
.door-card, .door-band, .door-hit, .door-pill { --door-bg: #1B1022; --door-bg-2: #351A3B; --door-ink: #F4E9D4; --door-ink-2: #D8C6B0; --door-gold: #EBB54F; --door-leaf: #93B475; --door-leaf-2: #5F8B4B; --door-rule: rgb(235 181 79 / .38); }
.dleaf { display: block; width: 100%; height: auto; overflow: visible; }
.dleaf__l { fill: var(--door-leaf); transform-box: view-box; transform-origin: 0 0; rotate: calc(var(--a) * var(--spread, 0) * 1deg);
  transition: rotate .8s var(--spring); transition-delay: calc(max(var(--a), var(--a) * -1) * 1.4ms); }
.dleaf__l:last-of-type { fill: #AECB8E; }   /* the middle leaflet catches the light */
.dleaf__stem { fill: var(--door-leaf-2); }

/* the hero door: a dusk card with the leaf; it leans toward the pointer and its leaflets fan on hover or focus */
.door-card { --spread: 0; position: relative; z-index: 2; isolation: isolate; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 1rem; width: min(100%, 27rem); margin-top: .2rem; padding: .95rem 1.2rem .95rem .85rem;
  border-radius: 1.35rem; color: var(--door-ink); text-decoration: none; background: radial-gradient(130% 120% at 0% 0%, var(--door-bg-2), var(--door-bg) 62%);
  box-shadow: inset 0 0 0 1px var(--door-rule), inset 0 1px 0 rgb(255 255 255 / .1), 0 24px 46px -24px rgb(27 16 34 / .85), 0 6px 14px -8px rgb(27 16 34 / .55);
  transition: box-shadow .4s var(--ease), translate .5s var(--spring), transform .5s var(--ease); }
.door-card::before { /* a low sun behind the leaf, as on the room's posters */ content: ""; position: absolute; z-index: -1; left: .1rem; top: 50%; width: 5.8rem; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(235 181 79 / .5), rgb(235 181 79 / .12) 45%, transparent 70%); }
.door-card:hover { color: var(--door-ink); translate: 0 -2px; box-shadow: inset 0 0 0 1px rgb(235 181 79 / .62), inset 0 1px 0 rgb(255 255 255 / .12), 0 30px 54px -24px rgb(27 16 34 / .9), 0 8px 18px -8px rgb(27 16 34 / .6); }
.door-card:hover, .door-card:focus-visible { --spread: .14; }
.door-card__art { width: 4.6rem; }
.door-card__leaf { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); transition: translate .6s var(--spring); }
.door-card:hover .door-card__leaf, .door-card:focus-visible .door-card__leaf { translate: 0 -3px; }
.door-card__copy { display: grid; gap: .12rem; min-width: 0; }
.door-card__k { font: 700 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--door-gold); }
.door-card__k [lang], .door-band__k [lang] { margin-left: .25rem; letter-spacing: 0; text-transform: none; }
.door-card__name { font: 600 italic clamp(2rem, 1.7rem + .9vw, 2.5rem)/.95 var(--f-display); letter-spacing: -.01em; color: var(--door-ink); }
.door-card__aka { font: 500 var(--t-s)/1.35 var(--f-ui); color: var(--door-ink-2); }
.door-card__aka b { color: var(--door-ink); font-weight: 700; }
.door-card__line { margin-top: .3rem; font: 400 .9rem/1.45 var(--f-read); color: var(--door-ink-2); }
.door-card__go { margin-top: .45rem; justify-self: start; font: 700 var(--t-s)/1.2 var(--f-ui); color: var(--door-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
@media (min-width: 64rem) {
  /* tucked into the top corner of the fan's column, above the cards, like a postcard on a stack */
  .hero__copy { grid-column: 1; grid-row: 1; }
  .hero__fan { grid-column: 2; grid-row: 1; }
  .door-card { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; width: min(100%, 21rem); margin: 0; rotate: 1.5deg; }
}

/* with the owner's art approved, the card's tile is a picture (ART-D01) that drifts closer on hover or focus */
.door-card:has(.door-card__art--pic) { grid-template-columns: 5.5rem minmax(0, 1fr); padding-block: .8rem; }
.door-card:has(.door-card__art--pic)::before { display: none; }
.door-card__art--pic { width: 5.5rem; aspect-ratio: 3 / 4; border-radius: .95rem; overflow: hidden; background: var(--ph, var(--door-bg));
  box-shadow: inset 0 0 0 1px var(--door-rule), 0 12px 24px -14px rgb(0 0 0 / .8); }
.door-card__art--pic picture, .door-card__art--pic img { display: block; width: 100%; height: 100%; }
.door-card__art--pic img { object-fit: cover; object-position: var(--focal, 50% 50%); transition: scale 1.4s var(--ease); }
.door-card:hover .door-card__art--pic img, .door-card:focus-visible .door-card__art--pic img { scale: 1.08; }

/* after "Start here": the band */
.door-band { --spread: 0; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin: var(--s-7) 0 0; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--r-xl); color: var(--door-ink); background: linear-gradient(180deg, rgb(255 255 255 / .04), transparent 40%), radial-gradient(110% 90% at 88% 112%, #5B2A3A, transparent 62%), var(--door-bg);
  box-shadow: inset 0 0 0 1px var(--door-rule), 0 40px 70px -40px rgb(27 16 34 / .9); }
.door-band::before { /* the room's sunburst, faint */ content: ""; position: absolute; z-index: -1; right: -14%; bottom: -60%; width: min(38rem, 95%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 3deg, rgb(235 181 79 / .16) 0 6deg, transparent 6deg 12deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%); mask: radial-gradient(circle, #000 18%, transparent 70%); }
.door-band__art { width: clamp(6rem, 4rem + 8vw, 9.5rem); }
.door-band__art .dleaf { filter: drop-shadow(0 10px 18px rgb(0 0 0 / .4)); }
.door-band__k { margin: 0; font: 700 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--door-gold); }
.door-band__t { margin: .55rem 0 0; max-width: 30ch; font: 500 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.08 var(--f-display); color: var(--door-ink); }
.door-band__d { margin: .8rem 0 0; max-width: 40rem; font: 400 1.02rem/1.6 var(--f-read); color: var(--door-ink-2); }
.door-band__go { margin: 1.2rem 0 0; }
.door-band .btn, .door-hit .btn { background: var(--door-gold); color: #241307; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 10px 22px -12px rgb(235 181 79 / .8); }
.door-band .btn:hover, .door-hit .btn:hover { background: #F3C468; color: #241307; }
@media (min-width: 48rem) { .door-band { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.2rem; } }
/* with the owner's art approved, the painted sunburst (ART-D02) replaces the drawn one: mirrored, so the sun sits behind
   the leaf and the words sit on its dark side */
.door-band--pic::before { display: none; }
.door-band__bg { position: absolute; inset: 0; z-index: -2; background: var(--ph, var(--door-bg)); pointer-events: none; }
.door-band__bg picture, .door-band__bg img { display: block; width: 100%; height: 100%; }
.door-band__bg img { object-fit: cover; object-position: 100% 50%; scale: -1 1; }
.door-band--pic::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(27 16 34 / .1), rgb(27 16 34 / .5) 30%, rgb(27 16 34 / .88) 55%, rgb(27 16 34 / .93)); }
@media (max-width: 47.99rem) {
  .door-band__bg img { object-position: 100% 0%; }
  .door-band--pic::after { background: linear-gradient(180deg, rgb(27 16 34 / .15), rgb(27 16 34 / .7) 32%, rgb(27 16 34 / .92) 55%); }
}

/* search: the plant's names lead to the room */
.door-hit { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1.1rem; margin: 0 0 var(--s-5); padding: 1rem 1.2rem; border-radius: var(--r-l); color: var(--door-ink); background: var(--door-bg); box-shadow: inset 0 0 0 1px var(--door-rule); }
.door-hit[hidden] { display: none; }
.door-hit__art svg { display: block; width: 3.2rem; height: 2.5rem; fill: var(--door-leaf); }
.door-hit__t { margin: 0; font: 600 1.15rem/1.25 var(--f-ui); color: var(--door-ink); }
.door-hit__copy p { margin: .25rem 0 0; font: 400 .98rem/1.5 var(--f-read); color: var(--door-ink-2); }
.door-hit__go { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 40rem) { .door-hit { grid-template-columns: auto minmax(0, 1fr) auto; } .door-hit__go { grid-column: auto; } }

/* the filter bar on wide screens: a chip that leaves the library for the room */
.chip--room { display: none; }
.chip--room svg { width: 1.4rem; height: 1.1rem; fill: #5F8B4B; }
@media (min-width: 48rem) { .chip--room { display: inline-flex; } }

/* a pill for readers who scrolled past the hero (journal.js shows it; dismissing lasts for this visit only) */
.door-pill { position: fixed; z-index: 35; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; padding: .3rem; border-radius: var(--r-pill);
  color: var(--door-ink); background: rgb(27 16 34 / .94); box-shadow: inset 0 0 0 1px var(--door-rule), 0 16px 34px -14px rgb(0 0 0 / .7);
  transition: opacity .35s var(--ease), translate .5s var(--spring), visibility 0s .5s; }
.door-pill[hidden] { display: none; }
.door-pill:not(.is-shown) { opacity: 0; translate: 0 1.2rem; visibility: hidden; pointer-events: none; }
.door-pill.is-shown { transition: opacity .35s var(--ease), translate .5s var(--spring), visibility 0s; }
.door-pill__go { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .3rem .95rem .3rem .65rem; border-radius: var(--r-pill); color: var(--door-ink); font: 600 var(--t-s)/1.1 var(--f-ui); text-decoration: none; }
.door-pill__go:hover { color: var(--door-ink); background: rgb(255 255 255 / .07); }
.door-pill__go svg { width: 1.6rem; height: 1.25rem; flex: none; fill: var(--door-leaf); }
.door-pill__x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--door-ink-2); cursor: pointer; }
.door-pill__x:hover { color: var(--door-ink); background: rgb(255 255 255 / .08); }

.foot__room { display: inline-flex; align-items: center; gap: .45rem; }
.foot__room svg { width: 1.35em; height: 1.05em; flex: none; fill: currentColor; }

/* the leaf opens as its door comes into view (journal.js adds .is-in); without motion it is simply open */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-off) .door-card:not(.is-in), html.js:not(.motion-off) .door-band:not(.is-in) { --spread: -.62; }
}
@media (prefers-reduced-motion: reduce) { .dleaf__l, .door-card, .door-card__leaf, .door-pill { transition: none; } }
html.motion-off .dleaf__l, html.motion-off .door-card__leaf, html.motion-off .door-pill { transition: none; }

/* ---------- forced colours, print ---------- */
@media (forced-colors: active) {
  .glass, .answer, .about, .routes a, .principles li, .faq details { border: 1px solid CanvasText; background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before, .glass::after, .scard::after { display: none; }
  .ak, .signal, .photo, .disc { forced-color-adjust: none; }
  .chip[aria-pressed="true"], .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .door-card, .door-band, .door-hit, .door-pill { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .door-card::before, .door-band::before, .door-band--pic::after, .door-band__bg { display: none; }
}
@media print {
  body::after, .mast, .rbar, .trail, .tools-row, .next, .readnext, .foot, .a-hero, .note, .safety-jump, .focus-exit, .door-pill { display: none !important; }
  body { background: #fff; color: #000; }
  .faq details > *:not(summary) { display: block !important; }
  .ext::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* tilt toward the pointer (rails, read-next cards) */
@media (hover: hover) and (pointer: fine) {
  [data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
}

/* ---------- refinements ---------- */
/* no root smooth scrolling: a page that is placed (a link's #anchor, the top on arrival) must arrive there, not travel; the pages' own
   scrollIntoView calls ask for smoothness themselves */
@media (prefers-reduced-motion: reduce) { .motion-btn, [data-motion-toggle] { display: none; } }
.rbar[inert] { pointer-events: none; }

/* ---------- lighter glass on phones: the guides' own glass is more solid and takes no blur there (see bc-brand.css in the site build) ---------- */
@media (max-width: 899.98px), (pointer: coarse) {
  .glass { --glass-a: .9; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass--panel { --glass-a: .94; }
}


/* ---------- hold and drag the fan (fan-drag.js adds .is-draggable only on screens that proved they can hold the frame rate) ---------- */
.hero__fan.is-draggable { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hero__fan.is-draggable.is-held { cursor: grabbing; }
.hero__fan.is-draggable .fan__card { opacity: var(--vis, 1); }
.hero__fan.is-draggable .fan__card--outer { display: block; }
.hero__fan.is-draggable .fan__card:not(.is-front) .fan__label { display: none; }
.hero__fan.is-draggable .fan__card.is-front .fan__label { display: grid; }
.hero__fan.is-draggable .fan__card.is-gone { visibility: hidden; pointer-events: none; }
/* held: the front card is pressed in; released: it settles with a small detent */
.hero__fan.is-held .fan__card.is-front .fan__inner { scale: .985; translate: 0 .18rem; transition-duration: .12s; }
.fan__card.is-snap .fan__inner { animation: fan-detent .36s var(--spring); }
@keyframes fan-detent { 0% { scale: .965; } 55% { scale: 1.018; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .fan__card.is-snap .fan__inner { animation: none; } }
html.motion-off .fan__card.is-snap .fan__inner { animation: none; }
.hero__fan.is-held .fan__card, .hero__fan.is-gliding .fan__card { will-change: transform, opacity; }   /* each card is its own layer only while the hand moves */