/* ==========================================================================
   drkareemtannous.com — site.css · "Aurora Midnight" (§4-v2)
   Zero-build. Custom properties, logical properties, mobile-first.
   Palette: indigo/plum night · animated aurora mesh (violet · sky-cyan · coral glow)
            coral = the single filled action colour · corona gold for orb, numbers, hairlines
            ivory type on dark · cream book section · ivory "daylight" band (teaching, contact)
   ========================================================================== */

/* ---------- Fonts (local, swap) ---------- */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/PlayfairDisplay-Bold.woff2") format("woff2"),url("../assets/fonts/PlayfairDisplay-Bold.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/Montserrat.woff2") format("woff2"),url("../assets/fonts/Montserrat.ttf") format("truetype")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/EBGaramond.woff2") format("woff2"),url("../assets/fonts/EBGaramond.ttf") format("truetype")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../assets/fonts/JetBrainsMono.woff2") format("woff2"),url("../assets/fonts/JetBrainsMono.ttf") format("truetype")}

/* ---------- Animated properties (aurora mesh) ---------- */
@property --a1x{syntax:"<percentage>";inherits:false;initial-value:18%}
@property --a1y{syntax:"<percentage>";inherits:false;initial-value:12%}
@property --a2x{syntax:"<percentage>";inherits:false;initial-value:84%}
@property --a2y{syntax:"<percentage>";inherits:false;initial-value:28%}
@property --a3x{syntax:"<percentage>";inherits:false;initial-value:62%}
@property --a3y{syntax:"<percentage>";inherits:false;initial-value:78%}
@property --a4x{syntax:"<percentage>";inherits:false;initial-value:10%}
@property --a4y{syntax:"<percentage>";inherits:false;initial-value:70%}

/* ---------- Tokens (sRGB fallbacks first, OKLCH under @supports) ---------- */
:root{
  /* palette */
  --night:#1B1434;        /* oklch(22% .06 290) */
  --night-floor:#110A22;  /* oklch(17% .05 295) */
  --plum:#361E57;         /* oklch(30% .10 300) */
  --violet:#8362ED;       /* oklch(60% .20 290) */
  --cyan:#52CFF3;         /* oklch(80% .12 220) */
  --cyan-deep:#0096B8;    /* oklch(62% .12 220) */
  --coral:#FD6844;        /* oklch(70% .19 35)  */
  --coral-deep:#E14D28;   /* oklch(62% .19 35)  */
  --coral-soft:#FFA189;   /* oklch(80% .12 35)  */
  --peach:#FFC9A9;        /* oklch(86% .07 45)  — daylight mesh */
  --apricot:#FDB171;      /* oklch(81% .11 60)  — daylight mesh */
  --gold:#E3AD4B;         /* oklch(78% .13 80) — corona */
  --gold-deep:#7E5500;    /* oklch(48% .11 80) — gold as TEXT on light */
  --ivory:#FBF7F0;
  --ivory-2:#C3C1D7;      /* oklch(82% .03 290) — secondary type on dark */
  --ink-plum:#1E142E;     /* oklch(22% .05 300) — type on light */
  --ink-plum-2:#544272;   /* oklch(42% .08 300) — secondary type on light */
  --cream:#F1E9D9;
  --cream-2:#E4DBC5;
  --ink:#231C11;
  --ink-2:#5C4E2E;
  --black:#0A0A0A;
  --red:#9E1B2A;          /* monogram ring red — artwork only, never a field */

  /* legacy aliases kept for JS/markup that may reference them */
  --warm:var(--ivory);
  --tint:var(--ivory-2);
  --olive:#8D7A4C;

  /* semantic — dark is the default scheme */
  --bg:var(--night);
  --bg-floor:var(--night-floor);
  --fg:var(--ivory);
  --fg-2:var(--ivory-2);
  --line:rgba(251,247,240,.14);
  --line-gold:rgba(227,173,75,.45);
  --line-bright:rgba(82,207,243,.55);
  --card:rgba(251,247,240,.055);
  --card-hover:rgba(251,247,240,.10);
  --glass:rgba(27,20,52,.45);
  --glass-edge:rgba(251,247,240,.12);
  --accent:var(--coral);
  --accent-hover:var(--coral-soft);
  --accent-fg:var(--ink-plum);
  --focus:var(--cyan);
  --gold-text:var(--gold);
  --nav-bg:rgba(17,10,34,.62);
  --matte:var(--ivory);
  --keyline:rgba(253,104,68,.6);
  --shadow:0 30px 80px -30px rgba(5,2,16,.85);
  --mesh-a:rgba(131,98,237,.70);   /* violet */
  --mesh-b:rgba(82,207,243,.42);   /* cyan   */
  --mesh-c:rgba(253,104,68,.22);   /* coral  */
  --mesh-d:rgba(54,30,87,.9);      /* plum   */

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-label:"Montserrat","Segoe UI",Helvetica,Arial,sans-serif;
  --font-prose:"EB Garamond",Garamond,"Times New Roman",Georgia,serif;
  --font-mono:"JetBrains Mono",Consolas,"SF Mono",Menlo,monospace;

  --measure:62ch;
  --gutter:clamp(1.25rem,4vw,3rem);
  --section:clamp(4rem,10vw,8rem);
  --radius:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@supports (color:oklch(50% 0.1 200)){
  :root{
    --night:oklch(22% .06 290);
    --night-floor:oklch(17% .05 295);
    --plum:oklch(30% .10 300);
    --violet:oklch(60% .20 290);
    --cyan:oklch(80% .12 220);
    --cyan-deep:oklch(62% .12 220);
    --coral:oklch(70% .19 35);
    --coral-deep:oklch(62% .19 35);
    --coral-soft:oklch(80% .12 35);
    --peach:oklch(86% .07 45);
    --apricot:oklch(81% .11 60);
    --gold:oklch(78% .13 80);
    --gold-deep:oklch(48% .11 80);
    --ivory-2:oklch(82% .03 290);
    --ink-plum:oklch(22% .05 300);
    --ink-plum-2:oklch(42% .08 300);
    --mesh-a:oklch(60% .20 290 / .70);
    --mesh-b:oklch(80% .12 220 / .42);
    --mesh-c:oklch(70% .19 35 / .22);
    --mesh-d:oklch(30% .10 300 / .9);
  }
}
/* Light scheme: ivory dawn — same aurora, whispered (~20% alpha) */
:root[data-scheme="light"]{
  --bg:var(--ivory);
  --bg-floor:#F1ECE4;
  --fg:var(--ink-plum);
  --fg-2:var(--ink-plum-2);
  --line:rgba(30,20,46,.14);
  --line-gold:rgba(140,95,0,.45);
  --line-bright:rgba(0,150,184,.45);
  --card:rgba(255,255,255,.5);
  --card-hover:rgba(255,255,255,.8);
  --glass:rgba(251,247,240,.55);
  --glass-edge:rgba(255,255,255,.6);
  --accent:var(--coral);
  --accent-hover:var(--coral-soft);
  --accent-fg:var(--ink-plum);
  --focus:var(--cyan-deep);
  --gold-text:var(--gold-deep);
  --nav-bg:rgba(251,247,240,.7);
  --shadow:0 30px 80px -30px rgba(30,20,46,.35);
  --mesh-a:rgba(131,98,237,.22);
  --mesh-b:rgba(82,207,243,.24);
  --mesh-c:rgba(253,104,68,.18);
  --mesh-d:rgba(227,173,75,.16);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:5rem;background:var(--bg-floor)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-prose);font-size:clamp(1.05rem,1rem + .35vw,1.22rem);line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative;
  min-block-size:100dvh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}
.footer{flex:0 0 auto}
/* Signature background: a fixed aurora mesh that drifts slowly behind everything. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(55% 45% at var(--a1x) var(--a1y),var(--mesh-a),transparent 70%),
    radial-gradient(40% 40% at var(--a2x) var(--a2y),var(--mesh-b),transparent 70%),
    radial-gradient(45% 38% at var(--a3x) var(--a3y),var(--mesh-c),transparent 70%),
    radial-gradient(60% 55% at var(--a4x) var(--a4y),var(--mesh-d),transparent 72%),
    linear-gradient(180deg,var(--bg),var(--bg-floor));
  animation:aurora 28s ease-in-out infinite alternate;
}
/* a veil keeps long text columns calm on top of the mesh */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,10,34,.0),rgba(17,10,34,.25));
}
:root[data-scheme="light"] body::after{background:linear-gradient(180deg,rgba(251,247,240,0),rgba(251,247,240,.4))}
@keyframes aurora{
  0%  {--a1x:18%;--a1y:12%;--a2x:84%;--a2y:28%;--a3x:62%;--a3y:78%;--a4x:10%;--a4y:70%}
  33% {--a1x:30%;--a1y:22%;--a2x:72%;--a2y:14%;--a3x:48%;--a3y:88%;--a4x:22%;--a4y:58%}
  66% {--a1x:12%;--a1y:30%;--a2x:90%;--a2y:40%;--a3x:70%;--a3y:64%;--a4x:4%;--a4y:84%}
  100%{--a1x:26%;--a1y:8%;--a2x:78%;--a2y:22%;--a3x:56%;--a3y:72%;--a4x:16%;--a4y:66%}
}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

img,video,canvas,svg{display:block;max-inline-size:100%;block-size:auto}
a{color:inherit;text-decoration-color:var(--line-gold);text-underline-offset:.18em;transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--accent)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--coral);color:var(--ink-plum)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.5rem,2rem + 3.6vw,5rem)}
h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,3.2rem)}
h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
p{margin:0 0 1em;max-inline-size:var(--measure);text-wrap:pretty}
.label,.eyebrow{font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.eyebrow{display:block;margin-block-end:1rem}
.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--fg-2)}
.wrap{inline-size:min(100% - 2*var(--gutter),1200px);margin-inline:auto}
.section{padding-block:var(--section);position:relative}
.section + .section{border-block-start:1px solid var(--line)}
/* thin bright hairline between fields (Cobalt graft) */
.section + .section::after{content:"";position:absolute;inset-inline:0;inset-block-start:-1px;block-size:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--line-bright) 18%,var(--line-bright) 82%,transparent 100%)}
.hero + .section{border-block-start:0}
.visually-hidden{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:1rem;inset-block-start:-4rem;z-index:100;background:var(--coral);color:var(--ink-plum);padding:.75rem 1rem;font-family:var(--font-label);font-weight:600;border-radius:6px}
.skip:focus{inset-block-start:1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-block-size:44px;padding:.7rem 1.3rem;border-radius:999px;
  font-family:var(--font-label);font-weight:600;font-size:.86rem;letter-spacing:.04em;
  text-decoration:none;border:1px solid var(--line);background:var(--card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-1px);background:var(--card-hover);border-color:var(--line-gold)}
/* Coral is THE filled action colour. Gold is the corona — secondary, quieter, outlined. */
.btn-primary{background:var(--coral);color:var(--ink-plum);border-color:transparent;box-shadow:0 10px 30px -10px rgba(253,104,68,.6)}
.btn-primary:hover{background:var(--coral-soft);color:var(--ink-plum);box-shadow:0 14px 34px -10px rgba(253,104,68,.7)}
.btn-gold{background:transparent;color:var(--gold-text);border-color:var(--line-gold)}
.btn-gold:hover{background:var(--gold);color:var(--ink-plum);border-color:var(--gold)}
.btn-ghost{background:transparent}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- Nav (glass) ---------- */
.nav{
  position:sticky;inset-block-start:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-block-end:1px solid var(--line);
}
/* Cobalt graft: a thin bright hairline under the nav */
.nav::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;block-size:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--gold) 50%,var(--cyan) 70%,transparent);opacity:.7}
:root[data-scheme="light"] .nav::after{background:linear-gradient(90deg,transparent,var(--cyan-deep) 30%,var(--gold-deep) 50%,var(--cyan-deep) 70%,transparent);opacity:.5}
.nav-inner{display:flex;align-items:center;gap:1rem;min-block-size:64px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--font-display);font-size:1.05rem}
.brand img{inline-size:40px;block-size:40px;border-radius:50%;box-shadow:0 0 0 1px rgba(251,247,240,.2),0 0 18px -4px rgba(131,98,237,.8)}
.nav-links{display:none;margin-inline-start:auto;gap:1.4rem;list-style:none;padding:0;margin-block:0}
.nav-links a{font-family:var(--font-label);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.6rem .4rem;display:inline-block;min-block-size:44px;box-sizing:border-box;color:var(--fg-2);position:relative}
.nav-links a::after{content:"";position:absolute;inset-inline:.4rem;inset-block-end:.3rem;block-size:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--fg)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem}
.icon-btn{inline-size:44px;block-size:44px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--card)}
.icon-btn:hover{background:var(--card-hover);border-color:var(--line-gold)}
.icon-btn svg{inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.scheme-btn{color:var(--gold-text)}
.scheme-btn .sun,:root[data-scheme="light"] .scheme-btn .moon{display:none}
:root[data-scheme="light"] .scheme-btn .sun{display:block}
.nav-toggle{display:inline-grid}
.nav-menu{display:none;position:absolute;inset-inline:0;inset-block-start:100%;background:var(--nav-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-block-end:1px solid var(--line);padding:1rem var(--gutter) 1.5rem}
.nav-menu[data-open="true"]{display:block}
.nav-menu ul{list-style:none;padding:0;margin:0;display:grid;gap:.25rem}
.nav-menu a{display:block;padding:.75rem 0;font-family:var(--font-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;text-decoration:none;min-block-size:44px}
@media (min-width:900px){
  .nav-links{display:flex}
  .nav-actions{margin-inline-start:1.5rem}
  .nav-toggle,.nav-menu{display:none!important}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3rem,8vw,6rem) clamp(3rem,6vw,5rem)}
.orb-layer{position:absolute;inset:0;z-index:-1;pointer-events:none}
.orb-layer canvas{inline-size:100%;block-size:100%}
@media (max-width:999px){.hero .orb-layer{display:none}}
/* a violet bloom + the coral dawn sit behind the hero copy; the bottom settles into the night */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  background:
    radial-gradient(60% 70% at 0% 0%,rgba(131,98,237,.35),transparent 70%),
    radial-gradient(40% 50% at 95% 100%,rgba(253,104,68,.22),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(27,20,52,0) 80%,rgba(17,10,34,.08) 100%);pointer-events:none}
:root[data-scheme="light"] .hero::before{background:
    radial-gradient(60% 70% at 0% 0%,rgba(131,98,237,.18),transparent 70%),
    radial-gradient(40% 50% at 95% 100%,rgba(253,104,68,.14),transparent 70%)}
:root[data-scheme="light"] .hero::after{background:linear-gradient(180deg,rgba(251,247,240,0) 60%,rgba(251,247,240,.5) 100%)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4rem}}
.greeting{font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);margin-block-end:1.2rem;display:flex;align-items:center;gap:.6rem}
.greeting::before{content:"";inline-size:2rem;block-size:1px;background:var(--gold)}
.hero h1{margin-block-end:.6rem}
.hero .title-line{font-family:var(--font-label);font-size:clamp(.8rem,.75rem + .3vw,.95rem);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);margin-block-end:1.6rem;line-height:1.7;max-inline-size:none}
.hero .title-line b{color:var(--fg);font-weight:600}
.hero-lede{font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);line-height:1.4;max-inline-size:30ch;margin-block-end:1.8rem;min-block-size:2.8em}
.hero-thesis{color:var(--fg-2);max-inline-size:52ch;margin-block-end:2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-end:2.5rem}
/* Portrait graft: warm photography sits IN light — an ivory matte with a soft peach/coral keyline, a violet halo behind */
.portrait{position:relative;inline-size:min(100%,420px);margin-inline:auto;border-radius:var(--radius);overflow:hidden;
  --matte-pad:.6rem;padding:var(--matte-pad);background:var(--matte);
  box-shadow:0 0 0 1px var(--keyline),0 40px 90px -30px rgba(5,2,16,.9),0 0 80px -20px rgba(131,98,237,.55)}
.portrait img{inline-size:100%;aspect-ratio:4/5;object-fit:cover;transition:opacity .5s;border-radius:calc(var(--radius) - var(--matte-pad))}
.portrait[data-variant="portrait-square"] img{aspect-ratio:1/1}
.portrait figcaption{position:absolute;inset-inline:var(--matte-pad);inset-block-end:var(--matte-pad);z-index:1;padding:1rem 1.1rem;border-radius:0 0 calc(var(--radius) - var(--matte-pad)) calc(var(--radius) - var(--matte-pad));background:linear-gradient(0deg,rgba(17,10,34,.92),rgba(17,10,34,0));font-family:var(--font-label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.thought{margin-block-start:1.6rem;padding:1rem 1.1rem;border-inline-start:2px solid var(--gold);border-radius:0 12px 12px 0;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-style:italic;color:var(--fg-2);max-inline-size:48ch}
.thought .label{display:block;font-style:normal;margin-block-end:.3rem}
/* Hear from Kareem: compact portrait tile in the hero column (was buried in Builder) */
.hero-video{margin:1.2rem auto 0;max-inline-size:min(100%,320px)}
@media (min-width:1000px){.hero-video{inline-size:180px;max-inline-size:180px;margin:1.2rem 0 0 auto}.hero-video .play span{font-size:.66rem;padding:.6rem .9rem;gap:.5rem}}
/* Roots: first person, EB Garamond, a thin gold hairline on the inline-start edge */
.roots{margin-block-start:2.2rem;padding-inline-start:1.25rem;border-inline-start:1px solid var(--gold);max-inline-size:var(--measure)}
.roots .eyebrow{color:var(--gold-text);margin-block-end:.6rem}
.roots p{font-size:1.08em;line-height:1.6}
.roots .sign{font-size:.8rem;letter-spacing:.08em;margin:0}

/* ---------- Receipts ---------- */
.receipts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.5rem;margin-block-end:2rem;list-style:none;padding:0;margin-inline:0}
@media (min-width:600px){.receipts{grid-template-columns:repeat(3,auto);justify-content:start;gap:1rem 2.2rem}}
@media (min-width:1100px){.receipts{grid-template-columns:repeat(5,auto)}}
.receipt{display:grid;gap:.15rem;padding-inline-start:.75rem;border-inline-start:1px solid var(--line-gold)}
.receipt .num{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);font-weight:600;color:var(--gold-text);line-height:1}
.receipt .num sup{font-size:.5em;vertical-align:top;color:var(--fg)}
.receipt .label{font-size:.72rem}

/* ---------- Intent chooser (glass) ---------- */
.intent{border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);max-inline-size:680px;box-shadow:inset 0 1px 0 var(--glass-edge)}
.intent-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-block-end:.7rem}
.intent-head .label{margin:0}
.intent-reset{font-family:var(--font-label);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);text-decoration:underline;text-underline-offset:.2em;min-block-size:44px;display:inline-flex;align-items:center}
.intent-reset[hidden]{display:none}
.intent-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chip{
  min-block-size:44px;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-family:var(--font-label);font-weight:600;font-size:.78rem;letter-spacing:.04em;
  transition:background .2s,border-color .2s,color .2s;
}
.chip:hover{background:var(--card-hover);border-color:var(--line-gold)}
.chip[aria-pressed="true"]{background:var(--coral);color:var(--ink-plum);border-color:var(--coral)}

/* ---------- Generative section fields ---------- */
.field{position:relative;isolation:isolate}
.field::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;pointer-events:none;
  background:
    radial-gradient(60% 50% at var(--fx,20%) var(--fy,10%),rgba(131,98,237,.14),transparent 70%),
    radial-gradient(50% 60% at calc(100% - var(--fx,20%)) calc(100% - var(--fy,10%)),rgba(82,207,243,.08),transparent 70%)}
:root[data-scheme="light"] .field:not(.daylight){background:linear-gradient(180deg,#F3EFF8,#EEE9F4)}
:root[data-scheme="light"] .field:not(.daylight) .builder-receipts li,:root[data-scheme="light"] .field:not(.daylight) .tl-btn,:root[data-scheme="light"] .field:not(.daylight) .body-card{background:rgba(255,255,255,.7)}
:root[data-scheme="light"] .field::before{background:
    radial-gradient(60% 50% at var(--fx,20%) var(--fy,10%),rgba(131,98,237,.10),transparent 70%),
    radial-gradient(50% 60% at calc(100% - var(--fx,20%)) calc(100% - var(--fy,10%)),rgba(82,207,243,.12),transparent 70%)}

/* ---------- Daylight band (Teaching, Contact): warm ivory, peach/apricot mesh ---------- */
.daylight{--bg:var(--ivory);--bg-floor:#F1ECE4;--fg:var(--ink-plum);--fg-2:var(--ink-plum-2);--line:rgba(30,20,46,.14);--line-gold:rgba(140,95,0,.5);--line-bright:rgba(253,104,68,.5);
  --card:rgba(255,255,255,.55);--card-hover:rgba(255,255,255,.85);--glass:rgba(255,255,255,.5);--glass-edge:rgba(255,255,255,.7);--focus:var(--cyan-deep);--gold-text:var(--gold-deep);--keyline:rgba(253,104,68,.5);
  background:var(--ivory);color:var(--ink-plum);color-scheme:light}
.daylight.field::before{opacity:1;background:
    radial-gradient(55% 50% at calc(100% - var(--fx,20%)) 0%,rgba(255,201,169,.55),transparent 70%),
    radial-gradient(50% 60% at var(--fx,20%) 100%,rgba(253,177,113,.34),transparent 70%),
    radial-gradient(40% 40% at 100% 100%,rgba(82,207,243,.12),transparent 70%)}
/* the cream book section flows into the daylight band */
.book + .daylight{background:linear-gradient(180deg,var(--cream-2),var(--ivory) 16%)}
.book + .daylight::after,.daylight + .daylight::after,.daylight + .book::after{display:none}
.daylight .eyebrow,.daylight .label{color:var(--ink-plum-2)}
.daylight .btn-gold{color:var(--gold-deep);border-color:rgba(140,95,0,.5)}
.daylight .btn-gold:hover{background:var(--gold-deep);color:var(--ivory);border-color:var(--gold-deep)}

.nowrap{white-space:nowrap}
/* ---------- Through-line ---------- */
#throughline,#orbit{--section:clamp(3.5rem,8vw,6.5rem)}
/* The stage halo (::before/::after, negative inset) must not widen the layout viewport at 375. */
#orbit{overflow-x:clip}
.throughline-prose{display:grid;gap:0 2.5rem;margin-block-start:2rem}
.throughline-prose > p{max-inline-size:var(--measure)}
@media (min-width:900px){.throughline-prose{grid-template-columns:1fr 1fr;align-items:start}.throughline-prose > p{max-inline-size:none}.throughline-prose .roots{grid-column:1/-1}}
/* SYSTEMSs(TM) wordmark: one word on >=700px, vertical acrostic below (brief §9) */
.letters{list-style:none;padding:0;margin:1.25rem 0 0;position:relative;inline-size:100%}
.letters b{font-family:var(--font-display);color:var(--gold-text);display:block;line-height:1}
.letters span{font-family:var(--font-label);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);display:block}
@media (min-width:700px){
  .letters{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;padding-block-end:.5rem}
  .letters li{text-align:center;padding:.4rem 0 0;min-inline-size:0}
  .letters b{font-size:clamp(1.9rem,.4rem + 3.1vw,4rem);padding-block-end:.35rem;border-block-end:1px solid var(--line-gold)}
  .letters li:last-child b{position:relative}
  .letters li:last-child b > i{font-style:normal;font-size:.72em;font-weight:500;opacity:.85;line-height:1}
  .letters li:last-child b::after{content:"\2122";position:absolute;font-size:.3em;font-weight:500;inset-block-start:.1em;margin-inline-start:.1em;opacity:.9}
  .letters span{padding-block-start:.55rem;white-space:nowrap;font-size:clamp(.5rem,.3rem + .45vw,.68rem)}
}
@media (min-width:900px){.letters span{font-size:clamp(.52rem,.2rem + .42vw,.7rem)}}
@media (max-width:699px){
  .letters{display:grid;gap:0}
  .letters li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:baseline;white-space:nowrap;padding:.35rem 0;border-block-end:1px solid var(--line)}
  .letters b{font-size:2.1rem;text-align:center}
  .letters li:last-child b{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;inline-size:100%;position:static;white-space:nowrap}
  .letters li:last-child b > i{font-style:normal;font-size:.72em;font-weight:500;opacity:.85;line-height:1;flex:none}
  .letters li:last-child b::after{content:"\2122";position:static;flex:none;font-size:.3em;font-weight:500;line-height:1;margin-inline-start:.15em;margin-block-start:.15em}
  .letters span{font-size:.8rem;letter-spacing:.12em}
}
.wordmark-mini{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:.35em;color:var(--gold-text);margin:.2rem 0 .6rem;line-height:1;white-space:nowrap}
.wordmark-mini small{font-size:.72em;font-weight:500;opacity:.85;letter-spacing:.35em}
.wordmark-mini sup{font-family:var(--font-label);font-size:.45em;letter-spacing:0;margin-inline-start:-.3em;vertical-align:top}


/* ---------- Orbit ---------- */
.orbit{position:relative;display:grid;gap:1.25rem}
@media (min-width:760px){.orbit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.orbit{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The stage owns its own box (aspect-ratio) so following cards always flow below it. */
.orbit-stage{position:relative;isolation:isolate;inline-size:min(100%,520px);aspect-ratio:600/560;margin:0 auto 2.5rem;overflow:visible}
@media (min-width:900px){.orbit-stage{inline-size:min(640px,56vw)}}
/* Orbit graft: a soft violet/plum halo and a faint drifting mesh behind the diagram */
.orbit-stage::before{content:"";position:absolute;inset:-10%;z-index:-2;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(131,98,237,.30),rgba(54,30,87,.35) 45%,rgba(82,207,243,.06) 62%,transparent 75%)}
.orbit-stage::after{content:"";position:absolute;inset:-18%;z-index:-3;border-radius:50%;pointer-events:none;opacity:.7;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 78%);mask-image:radial-gradient(closest-side,#000 40%,transparent 78%);
  background:
    radial-gradient(40% 40% at var(--a1x) var(--a1y),rgba(131,98,237,.35),transparent 70%),
    radial-gradient(35% 35% at var(--a2x) var(--a2y),rgba(82,207,243,.18),transparent 70%),
    radial-gradient(35% 35% at var(--a3x) var(--a3y),rgba(253,104,68,.14),transparent 70%);
  animation:aurora 36s ease-in-out infinite alternate}
:root[data-scheme="light"] .orbit-stage::before{background:radial-gradient(closest-side,rgba(131,98,237,.16),rgba(54,30,87,.10) 45%,rgba(82,207,243,.06) 62%,transparent 75%)}
:root[data-scheme="light"] .orbit-stage::after{opacity:.45}
@media (prefers-reduced-motion:reduce){.orbit-stage::after{animation:none}}
.orbit-stage .orb-layer{opacity:.95}
.orbit-svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.orbit-svg .ring{fill:none;stroke:rgba(227,173,75,.42);stroke-width:1}
.orbit-svg .core{fill:rgba(10,10,10,.94)}
.orbit-svg .corona{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.8}
.orbit-svg .body-link{cursor:pointer}
.orbit-svg .body{fill:var(--gold);transition:r .2s;filter:drop-shadow(0 0 6px rgba(227,173,75,.7))}
.orbit-svg .body[data-hot],.orbit-svg .body-link:hover .body,.orbit-svg .body-link:focus-visible .body{r:13;fill:var(--coral)}
.orbit-svg .body-link:hover text,.orbit-svg .body-link:focus text{fill:var(--fg)}
.orbit-svg .body-link:focus{outline:none}
.orbit-svg .body-link:focus-visible .body{stroke:var(--cyan);stroke-width:3}
.orbit-svg .lbl text{paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;stroke-opacity:.75}
.orbit-svg text{font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;fill:var(--fg-2)}
.orbit-svg .entity{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:none;fill:var(--fg);opacity:.92}
/* Core label sits on the black disc in both schemes: pinned to the ivory palette. */
.orbit-svg .law{font-family:var(--font-display);font-size:15px;letter-spacing:.02em;text-transform:none;fill:var(--ivory)}
.orbit-svg .law-sub{font-size:11px;fill:var(--ivory-2)}
@media (max-width:599px){.orbit-svg .body-link text{font-size:14px}.orbit-svg .body-link .entity{font-size:13px}.orbit-svg .law{font-size:18px}.orbit-svg .law-sub{font-size:12px}}
/* Bodies and labels are positioned by js/orbit.js (rAF, paused off-screen, static under reduced motion). */
.body-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;gap:.6rem;align-content:start;
  padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--glass-edge);
  transition:transform .35s var(--ease),background .35s,border-color .35s,box-shadow .35s;
}
.body-card:hover,.body-card:focus-within{transform:translateY(-4px);background:var(--card-hover);border-color:var(--line-gold);box-shadow:inset 0 1px 0 var(--glass-edge),0 30px 50px -30px rgba(5,2,16,.8)}
.body-card:target{border-color:var(--gold)}
.body-card .eyebrow{margin-block-end:0}
.body-card h3{font-size:1.3rem}
.body-card p{font-size:1rem;margin:0;color:var(--fg-2)}
.body-card .meta{font-family:var(--font-mono);font-size:.78rem;color:var(--fg-2);line-height:1.7;margin-block-start:.4rem;overflow-wrap:break-word}
/* Container queries: each card sizes its own type to the width it actually gets */
.body-card{container-type:inline-size;container-name:card}
@container card (max-width:300px){.body-card .meta{font-size:.7rem}.body-card h3{font-size:1.15rem}.wordmark-mini{font-size:1.15rem;letter-spacing:.28em}}
@container card (max-width:240px){.body-card{padding:1.2rem}.body-card .meta{font-size:.66rem}.body-card .out-url{font-size:.72rem}}
@container card (min-width:420px){.body-card p{font-size:1.06rem}.body-card .meta{font-size:.84rem}}
.body-card .meta a{text-decoration:none;display:inline-block;min-block-size:44px;padding-block:.6rem;line-height:1.2;box-sizing:border-box}
.body-card .meta a:hover{text-decoration:underline}
.body-card .out{margin-block-start:auto;padding-block-start:.8rem;font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.08em;min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;min-block-size:44px}
.body-card .out::after{content:"\2197";color:var(--accent);flex:none}
.body-card .out-url{text-transform:none;letter-spacing:.02em;font-size:.8rem}
/* each body carries its own aurora hue on the top edge: cyan practice · violet teaching · coral framework · gold thinking */
.body-card[data-register="practice"]{border-block-start:3px solid var(--cyan)}
.body-card[data-register="teaching"]{border-block-start:3px solid var(--violet)}
.body-card[data-register="framework"]{border-block-start:3px solid var(--coral)}
.body-card[data-register="book"]{border-block-start:3px solid var(--gold);background:linear-gradient(180deg,rgba(227,173,75,.10),var(--glass))}
.body-card .out:focus-visible{outline-offset:6px}

/* ---------- Book section (cream palette — the cover's own ground) ---------- */
.book{--bg:var(--cream);--fg:var(--ink);--fg-2:var(--ink-2);--line:rgba(35,28,17,.16);--line-gold:rgba(140,95,0,.5);--line-bright:rgba(253,104,68,.45);--card:rgba(35,28,17,.04);--card-hover:rgba(35,28,17,.08);--focus:var(--cyan-deep);--gold-text:var(--gold-deep);--glass:rgba(251,247,240,.6);--glass-edge:rgba(255,255,255,.7);
  background:linear-gradient(180deg,var(--ivory) 0%,var(--cream) 30%,var(--cream-2) 100%);color:var(--ink);position:relative;isolation:isolate;overflow:hidden;color-scheme:light}
.book::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 40% at 90% 10%,rgba(131,98,237,.10),transparent 70%),radial-gradient(40% 40% at 100% 90%,rgba(253,104,68,.10),transparent 70%)}
.book .orb-layer{opacity:.9}
@media (max-width:899px){.book .orb-layer{inset-block-end:auto;block-size:clamp(300px,130vw,560px);opacity:.75}}
.book-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:900px){.book-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem;padding-inline-start:clamp(0px,4vw,3rem)}}
.cover{inline-size:min(100%,360px);margin-inline:auto;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,28,17,.12),0 40px 80px -30px rgba(54,30,87,.55);transform:perspective(1200px) rotateY(0deg);transition:transform .6s var(--ease)}
.cover:hover{transform:perspective(1200px) rotateY(-4deg) translateY(-4px)}
.cover img{aspect-ratio:2/3;inline-size:100%;object-fit:cover}
.book .eyebrow{color:var(--ink-2)}
.book h2,.book h3{color:var(--ink)}
.book .subtitle{font-family:var(--font-prose);font-style:italic;font-size:1.25rem;color:var(--ink-2);margin-block-end:1.4rem;max-inline-size:40ch}
.book .triad{font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);margin-block-end:1.5rem}
.book p{color:var(--ink)}
.book .btn{border-color:rgba(35,28,17,.25);color:var(--ink);background:rgba(251,247,240,.5)}
.book .btn:hover{background:rgba(35,28,17,.06)}
.book .btn-primary{background:var(--coral);color:var(--ink-plum);border-color:transparent}
.book .btn-primary:hover{background:var(--coral-soft);color:var(--ink-plum)}
.book .btn-gold{background:var(--ink);color:var(--cream);border-color:transparent}
.book .btn-gold:hover{background:#3A3020;color:var(--cream)}
.retailers{margin-block:1.5rem 2rem;padding:1.25rem;border:1px solid rgba(35,28,17,.16);border-radius:var(--radius);background:rgba(251,247,240,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.retailers .label{color:var(--ink-2);display:block;margin-block-end:.75rem}
.retailer-marks{display:flex;flex-wrap:wrap;gap:.5rem .75rem;list-style:none;padding:0;margin:0 0 1rem;font-family:var(--font-label);font-weight:600;font-size:.84rem;letter-spacing:.04em}
.retailer-marks li{display:inline-flex;align-items:center;gap:.6rem}
.retailer-marks li:not(:last-child)::after{content:"\00B7";color:var(--gold-deep)}
.retailer-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.retailers .fine{font-size:.9rem;color:var(--ink-2);margin:.9rem 0 0}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-block-start:.9rem}
.share-row .btn{min-block-size:44px;padding-block:.6rem}
.share-row .btn svg{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.share-status{font-family:var(--font-label);font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.share-status[hidden]{display:none}
.share-url{font-family:var(--font-mono);font-size:.8rem;min-block-size:44px;inline-size:min(100%,22rem);padding:.4rem .6rem;border:1px solid var(--ink-2);border-radius:8px;background:var(--cream);color:var(--ink)}
.book :focus-visible{outline-color:var(--cyan-deep)}

/* Chapter explorer */
.chapters{list-style:none;padding:0;margin:0;border-block-start:1px solid rgba(35,28,17,.16)}
.chapters li{border-block-end:1px solid rgba(35,28,17,.16)}
.chapter-btn{inline-size:100%;display:grid;grid-template-columns:3rem 1fr auto;align-items:baseline;gap:1rem;padding:1rem 0;text-align:start;min-block-size:44px}
.chapter-btn .n{font-family:var(--font-mono);font-size:.85rem;color:var(--gold-deep)}
.chapter-btn .t{font-family:var(--font-display);font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:var(--ink)}
.chapter-btn .i{inline-size:24px;block-size:24px;border-radius:50%;border:1px solid rgba(35,28,17,.3);display:grid;place-items:center;font-family:var(--font-mono);font-size:.9rem;color:var(--ink-2);transition:transform .3s var(--ease);align-self:center}
.chapter-btn[aria-expanded="true"] .i{transform:rotate(45deg);background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chapter-panel{padding:0 0 1.25rem 4rem;color:#3A3020;font-size:1.08rem;max-inline-size:var(--measure)}
.chapter-panel[hidden]{display:none}
.chapter-panel p{margin:0;color:#3A3020}
@media (max-width:600px){.chapter-btn{grid-template-columns:2.2rem 1fr auto}.chapter-panel{padding-inline-start:2.2rem}}

/* ---------- Teaching & Research (sits on the daylight band) ---------- */
.two-col{display:grid;gap:2.5rem}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr}}
.list-plain{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.list-plain li{padding-inline-start:1.2rem;position:relative}
.list-plain li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.7em;inline-size:.45rem;block-size:.45rem;border-radius:50%;background:var(--gold)}
.daylight .list-plain li::before{background:var(--coral)}
.degrees{list-style:none;padding:0;margin:0;display:grid;gap:0}
.degrees li{display:grid;grid-template-columns:4rem 1fr;gap:1rem;align-items:baseline;padding-block:.9rem;border-block-end:1px solid var(--line)}
.degrees .num{font-size:1.05rem;color:var(--gold-text);font-weight:600}
.degrees small{display:block;color:var(--fg-2);font-family:var(--font-label);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-block-start:.2rem}
.teach-cta{margin-block-start:2rem;padding:1.25rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-inline-start:3px solid var(--violet)}
.teach-cta h3{font-size:1.15rem}
.teach-cta p{font-size:1rem;color:var(--fg-2);margin:.5rem 0 0}
.teach-cta .teach-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-block-start:.9rem}
.teach-cta .teach-mail{font-family:var(--font-mono);font-size:.82rem;text-decoration:none;color:var(--fg);overflow-wrap:anywhere}
.teach-cta .teach-mail:hover{text-decoration:underline}

/* ---------- Builder ---------- */
.builder-receipts{display:grid;gap:1rem;list-style:none;padding:0;margin:2rem 0}
@media (min-width:700px){.builder-receipts{grid-template-columns:repeat(3,1fr)}}
.builder-receipts li{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--glass-edge);display:grid;gap:.4rem;transition:transform .3s var(--ease),border-color .3s}
.builder-receipts li:hover{transform:translateY(-3px);border-color:var(--line-gold)}
.builder-receipts .num{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);font-weight:600;line-height:1;color:var(--gold-text)}
.builder-receipts .num sup{font-size:.5em;color:var(--fg);vertical-align:top}
.builder-receipts .label{font-size:.7rem}
.builder-receipts p{font-size:1rem;color:var(--fg-2);margin:.4rem 0 0}
.builder-close{display:grid;gap:2rem;align-items:start}
.builder-close > p{max-inline-size:62ch}
@media (min-width:900px){.how-steps{grid-template-columns:1fr 1fr;column-gap:2.5rem}.how-card{padding:2rem}.how-card h3{font-size:1.45rem}}
/* How the concierge works: the content that fills the Builder's right column at >=900px */
.how-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--glass-edge);border-block-start:3px solid var(--cyan)}
.how-card .eyebrow{margin-block-end:.6rem}
.how-card h3{font-size:1.25rem;margin-block-end:1rem}
.how-steps{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.how-steps li{display:grid;grid-template-columns:2.6rem 1fr;gap:.8rem;align-items:baseline;font-size:1rem;color:var(--fg-2);padding-block-end:.7rem;border-block-end:1px solid var(--line)}
.how-steps li:last-child{border-block-end:0}
.how-steps .num{color:var(--gold-text);font-size:.85rem;font-weight:600}
.how-steps b{color:var(--fg);font-weight:600}
.how-privacy{font-family:var(--font-label);font-size:.72rem;letter-spacing:.06em;color:var(--fg-2);margin:.6rem 0 0}
.how-actions{margin:1rem 0 0}
.video-card{margin-block-start:2rem;border:1px solid var(--line-gold);border-radius:var(--radius);overflow:hidden;background:var(--black);position:relative;max-inline-size:320px;margin-inline:auto;box-shadow:var(--shadow),0 0 60px -20px rgba(131,98,237,.5)}
.video-card video{inline-size:100%;aspect-ratio:9/16;max-block-size:80vh;object-fit:cover;display:block}
.video-card[hidden]{display:none}
.video-card .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,rgba(17,10,34,.55),transparent);color:var(--ivory)}
.video-card .play span{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--font-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;background:rgba(17,10,34,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.8rem 1.2rem;border-radius:999px;border:1px solid var(--coral)}
.video-card .play[hidden]{display:none}

/* ---------- Timeline ---------- */
.timeline{position:relative;margin-block-start:2rem}
.tl-rail{block-size:1px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--coral),var(--gold));opacity:.7;margin-block-end:0}
.tl-track{display:flex;gap:.75rem;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-padding-inline:1rem;padding:1.5rem 1rem 1.25rem;margin:0 calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:thin;list-style:none;overscroll-behavior-x:contain}
.tl-track::-webkit-scrollbar{block-size:6px}
.tl-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tl-item{flex:0 0 min(78vw,300px);scroll-snap-align:center}
.tl-item:first-child{scroll-snap-align:start}
.tl-item:last-child{scroll-snap-align:end}
.tl-btn{inline-size:100%;block-size:100%;text-align:start;display:grid;gap:.5rem;align-content:start;padding:1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s,border-color .25s,transform .3s var(--ease);min-block-size:44px;position:relative}
.tl-btn::before{content:"";position:absolute;inset-block-start:-1.5rem;inset-inline-start:1.2rem;inline-size:.6rem;block-size:.6rem;border-radius:50%;background:var(--fg-2);transform:translateY(-50%)}
.tl-btn:hover{background:var(--card-hover);border-color:var(--line-gold)}
.tl-btn[aria-selected="true"]{border-color:var(--coral);background:var(--card-hover)}
.tl-btn[aria-selected="true"]::before{background:var(--coral);box-shadow:0 0 0 4px rgba(253,104,68,.28)}
.tl-btn .year{font-family:var(--font-mono);font-size:.85rem;color:var(--gold-text);line-height:1.2}
.tl-btn .what{font-family:var(--font-display);font-size:1.1rem;line-height:1.2}
.tl-btn .where{font-family:var(--font-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.tl-detail{margin-block-start:1.25rem;padding:1.5rem;border-inline-start:2px solid var(--coral);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;max-inline-size:var(--measure);min-block-size:7rem}
.tl-detail p{margin:0}
.tl-detail .year{display:block;margin-block-end:.3rem}
.tl-hint{font-family:var(--font-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);margin-block-start:.5rem}
/* Small screens: a vertical list, every card fully visible, no horizontal scroll. */
@media (max-width:700px){
  .tl-rail{display:none}
  .tl-track{flex-direction:column;overflow:visible;scroll-snap-type:none;margin:0;padding:0 0 0 1.25rem;border-inline-start:1px solid var(--line-gold);gap:.6rem}
  .tl-item{flex:none;inline-size:100%}
  .tl-btn::before{inset-block-start:1.45rem;inset-inline-start:calc(-1.25rem - .3rem - 1px)}
}

/* ---------- Contact (sits on the daylight band) ---------- */
.contact-grid{display:grid;gap:2rem}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.contact-grid{grid-template-columns:1.2fr 1fr .8fr}}
.socials li[hidden],.socials li[data-pending]{display:none}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--glass-edge);display:grid;gap:.5rem;align-content:start}
.contact-card address{font-style:normal;font-family:var(--font-mono);font-size:clamp(.78rem,2.3vw,.9rem);line-height:1.8;color:var(--fg-2);overflow-wrap:anywhere}
.contact-card address a{text-decoration:none;color:var(--fg);display:inline-block;min-block-size:44px;padding-block:.6rem;line-height:1.2;box-sizing:border-box}
.contact-card address a:hover{text-decoration:underline}
.socials{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1rem 0 0}
.socials a{display:inline-flex;align-items:center;min-block-size:44px;padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--fg-2);background:var(--card)}
.socials a:hover{color:var(--fg);background:var(--card-hover);border-color:var(--line-gold)}

/* ---------- Footer ---------- */
.footer{border-block-start:1px solid var(--line-gold);padding-block:3rem 2.5rem;background:linear-gradient(180deg,var(--bg),var(--bg-floor) 45%);font-size:.95rem;position:relative;isolation:isolate}
:root[data-scheme="light"] .footer{background:linear-gradient(180deg,var(--bg),var(--bg-floor) 45%)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-block-end:1.6rem}
.footer-top img{inline-size:44px;block-size:44px;border-radius:50%;box-shadow:0 0 0 1px rgba(251,247,240,.2)}
.footer-top nav a{font-family:var(--font-label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--fg-2);margin-inline-end:1.2rem;display:inline-flex;align-items:center;min-block-size:44px;padding-block:.4rem}
.footer-top nav a:hover{color:var(--fg)}
.licensing{color:var(--fg-2);max-inline-size:80ch;font-size:.92rem}
.footer .fine{font-family:var(--font-mono);font-size:.74rem;color:var(--fg-2);margin:0}

/* ---------- Concierge drawer ---------- */
/* The "Ask" pill floats over night AND daylight bands, so it carries its own night ground. */
.concierge-fab{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;z-index:60;background:var(--night-floor);color:var(--ivory);border-color:var(--line-gold);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 0 0 1px rgba(227,173,75,.25),0 20px 40px -15px rgba(5,2,16,.8)}
.concierge-fab:hover{background:var(--gold);color:var(--ink-plum);border-color:var(--gold)}
:root[data-scheme="light"] .concierge-fab{background:var(--ink-plum);color:var(--ivory)}
:root[data-scheme="light"] .concierge-fab:hover{background:var(--gold-deep);color:var(--ivory);border-color:var(--gold-deep)}
/* Small screens: compact pill, and the retailer / hero action rows keep clear of the pill's column */
@media (max-width:700px){
  .concierge-fab{padding:.55rem .95rem;font-size:.78rem;inset-inline-end:.75rem;inset-block-end:.75rem}
  .retailer-actions{padding-inline-end:4rem}
  .footer{padding-block-end:5.5rem}
  .retailer-actions .btn{font-size:.76rem;padding-inline:.95rem;white-space:nowrap}
}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(100vw,440px);max-inline-size:100vw;z-index:70;background:linear-gradient(180deg,rgba(27,20,52,.92),rgba(17,10,34,.96));backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);color:var(--fg);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-30px 0 60px -30px rgba(5,2,16,.9);visibility:hidden}
:root[data-scheme="light"] .drawer{background:linear-gradient(180deg,rgba(251,247,240,.94),rgba(241,236,228,.97))}
.drawer[data-open="true"]{transform:none;visibility:visible}
.drawer-scrim{position:fixed;inset:0;z-index:65;background:rgba(17,10,34,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-scrim[data-open="true"]{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border-block-end:1px solid var(--line)}
.drawer-head h2{font-size:1.1rem}
.drawer-head .muted{font-family:var(--font-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-block-start:.15rem}
.drawer-head .icon-btn{margin-inline-start:auto}
.drawer-log{flex:1;overflow-y:auto;padding:1.1rem;display:grid;gap:.75rem;align-content:start}
.msg{max-inline-size:90%;padding:.75rem .95rem;border-radius:14px;font-size:1rem;line-height:1.5}
.msg p{margin:0;max-inline-size:none;white-space:pre-line}
.msg p + p{margin-block-start:.5em}
.msg-user{justify-self:end;background:var(--coral);color:var(--ink-plum);border-end-end-radius:4px}
.msg-bot{justify-self:start;background:var(--card-hover);border-end-start-radius:4px}
.msg-err{justify-self:start;border:1px solid var(--coral);background:transparent}
.msg-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.6rem}
.msg-actions a{display:inline-flex;align-items:center;min-block-size:44px;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line-gold);font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-decoration:none;color:inherit}
.msg-actions a:hover{background:var(--gold);color:var(--ink-plum)}
.typing{display:inline-flex;gap:.3rem;padding:.75rem .95rem;justify-self:start}
.typing i{inline-size:.45rem;block-size:.45rem;border-radius:50%;background:var(--fg-2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.7}.drawer{transition:none}}
.quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .5rem}
.quick button{min-block-size:44px;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line-gold);background:transparent;color:var(--gold-text);font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-align:start}
.quick button:hover{background:var(--gold);color:var(--ink-plum);border-color:var(--gold)}
.msg-actions button{display:inline-flex;align-items:center;min-block-size:44px;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line-gold);font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.06em;color:inherit}
.msg-actions button:hover{background:var(--gold);color:var(--ink-plum)}
.suggest{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .75rem}
.suggest button{min-block-size:44px;padding:.55rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--card);font-family:var(--font-label);font-size:.72rem;letter-spacing:.04em;text-align:start}
.suggest button:hover{background:var(--card-hover);border-color:var(--line-gold)}
.drawer-form{display:flex;gap:.5rem;padding:.9rem 1.1rem;border-block-start:1px solid var(--line)}
.drawer-form textarea{flex:1;resize:none;min-block-size:44px;max-block-size:120px;overflow:hidden;field-sizing:content;scrollbar-width:none;padding:.65rem .9rem;border-radius:12px;border:1px solid var(--line);background:var(--card);color:inherit;font:inherit;font-size:1rem;line-height:1.35}
.drawer-form button{flex:0 0 auto}
.drawer-foot{padding:0 1.1rem .9rem;font-family:var(--font-label);font-size:.72rem;letter-spacing:.06em;color:var(--fg-2)}

/* ---------- 404 ---------- */
.notfound{min-block-size:80vh;display:grid;place-items:center;text-align:center;position:relative;isolation:isolate;overflow:hidden}
.notfound .num{font-size:clamp(4rem,10vw,8rem);color:var(--gold-text);line-height:1}
.notfound p{margin-inline:auto}

/* ---------- Reveal on scroll ---------- */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
/* Scroll-driven: where animation-timeline is supported the reveal is tied to the element's own
   entry into the viewport; the IntersectionObserver in main.js remains the fallback. */
@keyframes reveal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none;animation:reveal-in linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@media (prefers-reduced-motion:reduce){html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none;animation:none}.btn,.body-card,.cover,.tl-btn{transition:none}}

/* ---------- Intent re-weighting ---------- */
.section-head{margin-block-end:2.5rem}
.section-head p{color:var(--fg-2);font-size:1.15rem}
.section[data-weight="lead"] .section-head h2::after{content:"";display:block;inline-size:3rem;block-size:3px;background:linear-gradient(90deg,var(--coral),var(--gold));margin-block-start:1rem;border-radius:2px}
.section[data-weight="quiet"]{padding-block:clamp(3rem,6vw,5rem)}
.section[data-weight="quiet"] .section-head{margin-block-end:1.5rem}

@media print{.nav,.concierge-fab,.drawer,.drawer-scrim,.orb-layer,body::before,body::after{display:none!important}body{background:#fff;color:#000}}


/* Small screens: mark only in the brand, keep the nav to one row */
@media (max-width:560px){.brand span{display:none}.nav-actions .btn{padding-inline:.9rem;font-size:.76rem}}
.brand span{white-space:nowrap}
/* 900-1059: the full link row is up; drop the wordmark so nothing wraps */
@media (min-width:900px) and (max-width:1059px){.brand span{display:none}.nav-actions .btn{padding-inline:1rem}}

/* Shop: Lydd & Yaffa (brief section 11), driven by data/shop.json like the book.
   Night ground, aurora glow behind the grid, gold hairlines, coral exactly once (the single action). */
#shop .h-sub{display:block;font-size:.5em;font-weight:400;color:var(--fg-2);margin-block-start:.3rem}
.shop-grid{display:grid;gap:1.5rem;list-style:none;padding:0;margin:0;position:relative;isolation:isolate}
.shop-grid::before{content:"";position:absolute;inset:-12% -4%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(55% 60% at 30% 35%,rgba(131,98,237,.30),transparent 70%),radial-gradient(40% 50% at 78% 70%,rgba(82,207,243,.14),transparent 70%),radial-gradient(35% 40% at 55% 95%,rgba(227,173,75,.16),transparent 70%);
  filter:blur(24px)}
:root[data-scheme="light"] .shop-grid::before{opacity:.5}
@media (min-width:700px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shop-card{border:1px solid var(--line);border-block-start:1px solid var(--line-gold);border-radius:var(--radius);padding:1.2rem;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--glass-edge);display:grid;gap:.5rem;align-content:start;transition:transform .3s var(--ease),border-color .3s}
.shop-card:hover{transform:translateY(-3px);border-color:var(--line-gold)}
.shop-card img{border-radius:calc(var(--radius) - 4px);inline-size:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ivory)}
.shop-card h3{font-size:1.35rem;margin-block-start:.2rem}
.shop-card .meaning{font-family:var(--font-label);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-block-start:.2rem;padding-block-start:.6rem;border-block-start:1px solid var(--line-gold)}
.shop-card .btn{justify-self:start;margin-block-start:.4rem}
.shop-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-block-start:1.6rem}
.shop-actions[hidden]{display:none}
.shop-actions .fine{margin:0;color:var(--fg-2)}
.shop-intro{max-inline-size:62ch;color:var(--fg-2);margin-block-end:1.2rem}
.shop-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem;margin-block-end:1.4rem}
.shop-head .label{font-family:var(--font-label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.shop-collection{margin:2.5rem 0 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-gold);box-shadow:0 40px 90px -40px rgba(5,2,16,.9),0 0 70px -24px rgba(131,98,237,.5)}
.shop-collection[hidden]{display:none}
.shop-collection img{display:block;inline-size:100%;block-size:auto}
.shop-collection figcaption{font-family:var(--font-label);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);padding:.8rem 1rem;border-block-start:1px solid var(--line-gold)}
.roots .shop-link{color:var(--gold-text);text-underline-offset:.2em;display:inline-block;min-block-size:44px;padding-block:.6rem;line-height:1.2;box-sizing:border-box}