/* ------------------------------------------------------------------
   The Bedtime Scientist
   Invisible Science: near-darkness, one volumetric shaft of light,
   dust that glows only where the light catches it.
   Warm light, cool shadow. Everything on an 8px grid.
   ------------------------------------------------------------------ */

/* self-hosted variable fonts: three files, no third-party requests */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:300 500;font-display:swap;
  src:url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;

  /* palette */
  --void:#04060c;
  --navy:#0a0f1c;
  --gold:#d9ae57;
  --gold-bright:#f0ce86;
  --cream:#f3eddf;
  --muted:#93a6bd;
  --faint:#6b7d99;

  /* type */
  --display:"Fraunces",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --t-xs:0.75rem;    /* 12 */
  --t-sm:0.8125rem;  /* 13 */
  --t-base:0.9375rem;/* 15 */
  --t-md:1.0625rem;  /* 17 */
  --t-lg:1.3125rem;  /* 21 */

  /* 8px spacing grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s7:56px; --s8:64px;
  --s10:80px; --s12:96px; --s16:128px;

  --body-text:#c3cdd9;

  /* motion: inertia with a long tail, nothing snaps or bounces */
  --ease:cubic-bezier(0.19,1,0.22,1);
  --ease-soft:cubic-bezier(0.16,0.84,0.28,1);

  /* wordmark scale: "Scientist" is the base line, "Bedtime" is
     tracked a hair tighter so both lines are the same width */
  --wm-size:clamp(4rem,11.5vw,8.25rem);
}
@media (max-height:700px){
  :root{--wm-size:clamp(3.25rem,10vw,6.75rem);}
}

*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
html,body{min-height:100%;}
body{
  background:var(--void);
  color:var(--cream);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
::selection{background:rgba(217,174,87,0.9);color:#0a0f1c;}
/* the outline follows each element's own radius; never reshape the element */
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}

/* skip link: hidden until a keyboard user tabs to it */
.skip{position:fixed;left:var(--s3);top:calc(-1 * var(--s8));z-index:20;
  background:var(--gold);color:#0a0f1c;font-family:var(--body);font-weight:600;
  font-size:var(--t-sm);letter-spacing:0.02em;padding:10px 18px;border-radius:10px;
  text-decoration:none;box-shadow:0 12px 32px -12px rgba(0,0,0,0.7);
  transition:top 0.35s var(--ease);}
.skip:focus{top:var(--s3);outline:2px solid #0a0f1c;outline-offset:2px;}

/* scrollbar, quiet and in-world */
html{scrollbar-width:thin;scrollbar-color:#1b2740 var(--void);}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{background:#1b2740;border-radius:8px;border:2px solid var(--void);}
::-webkit-scrollbar-thumb:hover{background:#2a3a5c;}

/* ------------------------------------------------------------------
   Hero: the flagship. A full-viewport section, layered back to front:
   base, haze, beams, dust, grade, vignette, content, grain.
   ------------------------------------------------------------------ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;}

.hero .base{position:absolute;inset:0;z-index:0;
  background:radial-gradient(125% 120% at 40% -6%, #0e1729 0%, #0a0f1c 34%, #06080f 72%, #03040a 100%);}

.hero .haze{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;}
.hero .haze b{position:absolute;display:block;border-radius:50%;filter:blur(60px);}
.hero .haze .h1{width:60vw;height:44vw;left:8%;top:-6%;
  background:radial-gradient(circle,rgba(120,150,190,0.06),transparent 62%);
  animation:hazeDrift 46s var(--ease-soft) infinite alternate;}
@keyframes hazeDrift{to{transform:translate(4vw,3vh) scale(1.12);}}

.hero .beams{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  animation:beamsIn 2.4s var(--ease) 0.2s forwards;
  /* real light decays: the shaft dissolves before it reaches the floor */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 94%);}
@keyframes beamsIn{to{opacity:1;}}
.hero .beam{position:absolute;top:-12%;left:41%;height:155%;transform-origin:top center;
  mix-blend-mode:screen;will-change:opacity;}
.hero .b0{width:min(880px,96vw);transform:translateX(-50%) rotate(7deg);filter:blur(90px);
  background:linear-gradient(90deg,transparent 0%,rgba(248,238,214,0.02) 38%,rgba(248,238,214,0.05) 50%,rgba(248,238,214,0.02) 62%,transparent 100%);
  animation:breathA 14s var(--ease-soft) infinite alternate;}
.hero .b1{width:min(560px,64vw);transform:translateX(-50%) rotate(6deg);filter:blur(48px);
  background:linear-gradient(90deg,transparent 0%,rgba(250,242,222,0.045) 42%,rgba(250,242,222,0.10) 50%,rgba(250,242,222,0.045) 58%,transparent 100%);
  animation:breathA 12.5s var(--ease-soft) infinite alternate;}
.hero .b2{width:min(320px,42vw);transform:translateX(-50%) rotate(9deg);filter:blur(26px);
  background:linear-gradient(90deg,transparent 0%,rgba(252,244,216,0.07) 44%,rgba(252,244,216,0.17) 50%,rgba(252,244,216,0.07) 56%,transparent 100%);
  animation:breathB 9s var(--ease-soft) infinite alternate;}
.hero .b3{width:min(150px,24vw);transform:translateX(-50%) rotate(8deg);filter:blur(11px);
  background:linear-gradient(90deg,transparent 0%,rgba(255,248,228,0.09) 46%,rgba(255,248,228,0.23) 50%,rgba(255,248,228,0.09) 54%,transparent 100%);
  animation:breathA 10.5s var(--ease-soft) infinite alternate;}
.hero .src{position:absolute;top:-9%;left:41%;transform:translateX(-50%);
  width:min(280px,36vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,228,0.26),rgba(255,246,222,0.05) 42%,transparent 70%);
  filter:blur(6px);mix-blend-mode:screen;
  animation:breathB 8s var(--ease-soft) infinite alternate;}
@keyframes breathA{from{opacity:0.72;}to{opacity:1;}}
@keyframes breathB{from{opacity:0.58;}to{opacity:0.96;}}

.hero canvas#dust{position:absolute;inset:0;width:100%;height:100%;z-index:3;}

/* filmic grade: warm where the light falls, cool in the shadows */
.hero .grade{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:soft-light;
  background:
    radial-gradient(70% 58% at 41% 4%, rgba(255,206,140,0.16), transparent 62%),
    linear-gradient(196deg, transparent 32%, rgba(22,40,72,0.5) 100%);}

.hero .vignette{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(125% 105% at 46% 42%, transparent 40%, rgba(4,7,16,0.5) 78%, rgba(2,4,10,0.9) 100%);}

.hero .content{position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--s3);}
.hero .content::before{content:"";position:absolute;width:120%;height:60%;left:-10%;top:20%;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(4,6,12,0.5) 0%, transparent 66%);}

.hero .grain{position:absolute;inset:-6%;z-index:7;pointer-events:none;opacity:0.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .55s steps(6) infinite;}
@keyframes grain{
  0%{transform:translate(0,0);}17%{transform:translate(-3%,2%);}33%{transform:translate(2%,-3%);}
  50%{transform:translate(-2%,3%);}67%{transform:translate(3%,1%);}83%{transform:translate(-1%,-2%);}100%{transform:translate(0,0);}
}

/* ------------------------------------------------------------------
   The wordmark: The Frontispiece.
   A small gold THE, two lines of Fraunces cut to equal width,
   closed by a star-chart glyph between two drawn hairlines.
   ------------------------------------------------------------------ */
.wm{display:flex;flex-direction:column;align-items:center;font-weight:400;}
.wm-the{display:block;font-family:var(--body);font-size:var(--t-sm);font-weight:600;
  letter-spacing:0.42em;margin-right:-0.42em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 1px 16px rgba(0,0,0,0.5);}
.wm-word{display:block;font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:"opsz" 144;font-weight:340;
  font-size:var(--wm-size);line-height:1.02;letter-spacing:-0.022em;}
.wm-word.w-bedtime{margin-top:var(--s3);letter-spacing:-0.0237em;}
.wm-word.w-scientist{margin-top:-0.04em;}
/* the plate fade runs continuously across both lines, angled a few
   degrees toward the beam so the light reads as coming from it */
.wm-word .grad{background-clip:text;-webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 44px rgba(0,0,0,0.55)) drop-shadow(0 0 70px rgba(250,240,214,0.07))
    drop-shadow(-4px -7px 18px rgba(255,242,214,0.09));}
.w-bedtime .grad{background-image:linear-gradient(186deg,#fdf9ee 0%,#eee4cd 100%);}
.w-scientist .grad{background-image:linear-gradient(186deg,#eee4cd 0%,#cec2a5 100%);}

.wm-mark{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s5);}
.wm-mark i{display:block;width:var(--s8);height:1px;}
.wm-mark i:first-child{background:linear-gradient(90deg,transparent,rgba(217,174,87,0.55));transform-origin:right center;}
.wm-mark i:last-child{background:linear-gradient(90deg,rgba(217,174,87,0.55),transparent);transform-origin:left center;}
.wm-mark svg{display:block;filter:drop-shadow(0 0 9px rgba(240,206,134,0.65));}

.support{margin-top:var(--s5);font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.0625rem,2.2vw,1.3125rem);letter-spacing:0.01em;color:var(--muted);
  text-shadow:0 1px 24px rgba(0,0,0,0.6);}

.cta{margin-top:var(--s6);
  font-family:var(--body);font-size:var(--t-base);font-weight:600;letter-spacing:0.02em;
  color:#0a0f1c;
  background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold) 62%);
  padding:var(--s2) calc(var(--s4) + var(--s1));border-radius:999px;border:0;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.32),
    0 24px 48px -20px rgba(217,174,87,0.55),
    0 8px 24px -12px rgba(0,0,0,0.6);
  transition:transform 0.5s var(--ease), filter 0.4s var(--ease), box-shadow 0.5s var(--ease);}
.cta:hover{filter:brightness(1.07);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.38),
    0 30px 56px -20px rgba(240,206,134,0.62),
    0 10px 28px -12px rgba(0,0,0,0.6);}
.cta:active{transform:translateY(0);transition-duration:0.15s;}

/* scroll cue: a hairline with a mote falling along it */
.cue{position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);z-index:6;
  pointer-events:none;}
.cue-line{position:relative;display:block;width:1px;height:var(--s5);overflow:hidden;
  background:linear-gradient(180deg,transparent,rgba(217,174,87,0.35) 30%,rgba(217,174,87,0.35) 70%,transparent);}
.cue-line::after{content:"";position:absolute;left:-1px;top:0;width:3px;height:3px;border-radius:50%;
  background:var(--gold-bright);box-shadow:0 0 6px 1px rgba(240,206,134,0.7);
  animation:cueFall 4.5s var(--ease-soft) infinite;}
@keyframes cueFall{
  0%{transform:translateY(-4px);opacity:0;}
  18%{opacity:1;}
  72%{opacity:1;}
  100%{transform:translateY(42px);opacity:0;}
}

/* ------------------------------------------------------------------
   Load choreography. The light blooms first, unconditionally.
   The typography waits for Fraunces so the reveal is never broken,
   then rises into focus, back to front.
   ------------------------------------------------------------------ */
.rise{opacity:0;}
html.fonts-in .rise{animation:rise 1.4s var(--ease) both;animation-delay:var(--d,0.45s);}
@keyframes rise{
  from{opacity:0;transform:translateY(20px);filter:blur(10px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}
/* the two big lines settle like a lens finding focus.
   No filter here on purpose: the wordmark is gradient-clipped text
   (background-clip:text), and an animated blur filter on such an element
   renders it invisible on Android Chrome until the blur reaches zero,
   which made the name vanish for most of the entrance on phones. The
   scale settle carries the "finding focus" feeling without a filter. */
html.fonts-in .wm-word.rise{animation:riseSettle 1.6s var(--ease) both;animation-delay:var(--d,0.45s);}
@keyframes riseSettle{
  from{opacity:0;transform:translateY(20px) scale(1.035);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.wm-mark i{transform:scaleX(0);}
html.fonts-in .wm-mark i{animation:draw 1.4s var(--ease) both;animation-delay:1.3s;}
@keyframes draw{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.wm-mark svg{opacity:0;}
html.fonts-in .wm-mark svg{
  animation:starIn 1.2s var(--ease) both, starBreath 9s var(--ease-soft) 2.4s infinite alternate;
  animation-delay:1.15s,2.4s;}
@keyframes starIn{from{opacity:0;transform:scale(0.4) rotate(-90deg);}to{opacity:1;transform:scale(1) rotate(0deg);}}
@keyframes starBreath{from{opacity:1;}to{opacity:0.82;}}

.cue{opacity:0;}
html.fonts-in .cue{animation:fadeIn 1.6s var(--ease) 2.6s both;}
@keyframes fadeIn{to{opacity:1;}}

/* ------------------------------------------------------------------
   Reduced motion: the room is already lit, everything is in place.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero .haze b,.hero .beam,.hero .src,.hero .grain{animation:none;}
  .hero .beams{animation:none;opacity:1;}
  .rise,html.fonts-in .rise,
  html.fonts-in .wm-word.rise{animation:none;opacity:1;transform:none;filter:none;}
  .wm-mark i,html.fonts-in .wm-mark i{animation:none;transform:scaleX(1);}
  .wm-mark svg,html.fonts-in .wm-mark svg{animation:none;opacity:1;transform:none;}
  .cue,html.fonts-in .cue{animation:none;opacity:1;}
  .cue-line::after{animation:none;opacity:0;}
  .cta{transition:none;}
}

/* ------------------------------------------------------------------
   The page below the light. Same world, quieter.
   ------------------------------------------------------------------ */

/* quiet top navigation, absolute over the first screen, scrolls away */
.top{position:absolute;top:0;left:0;right:0;z-index:8;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s4);}
.top .brandmark{display:flex;align-items:center;gap:var(--s2);text-decoration:none;
  color:var(--muted);font-family:var(--display);font-size:1rem;letter-spacing:0.01em;
  transition:color 0.4s var(--ease);}
.top .brandmark:hover{color:var(--cream);}
.top .brandmark svg{display:block;opacity:0.85;}
.top nav{display:flex;gap:var(--s3);}
.top nav a{position:relative;font-size:0.8125rem;font-weight:500;letter-spacing:0.06em;
  color:var(--muted);text-decoration:none;padding:var(--s1) 2px;
  transition:color 0.4s var(--ease);}
.top nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
  background:var(--gold);transition:right 0.5s var(--ease);}
.top nav a:hover{color:var(--cream);}
.top nav a:hover::after{right:0;}
.top nav a[aria-current="page"]{color:var(--gold);}
@media (max-width:640px){
  .top{padding:var(--s3);}
  .top .brandmark span{display:none;}
  .top nav{gap:var(--s2);}
}

/* section scaffolding */
.section{position:relative;padding:var(--s16) var(--s3);}
.wrap{max-width:680px;margin:0 auto;text-align:center;}
.wrap-wide{max-width:1080px;margin:0 auto;}
.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:0.3em;margin-right:-0.3em;
  text-transform:uppercase;color:var(--gold);}
.section h2{font-family:var(--display);font-optical-sizing:auto;font-weight:380;
  font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.15;letter-spacing:-0.015em;
  color:var(--cream);margin-top:var(--s3);}
.section .lead{margin-top:var(--s4);font-size:var(--t-md);line-height:1.75;color:var(--body-text);}
.section .lead + .lead{margin-top:var(--s3);}
.quote{margin-top:var(--s6);font-family:var(--display);font-style:italic;font-weight:400;
  font-size:var(--t-lg);line-height:1.5;color:var(--muted);}

/* scroll reveal: soft rise, once */
.sr{opacity:0;transform:translateY(24px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  transition-delay:var(--srd,0s);}
.sr.in{opacity:1;transform:none;}

/* divider: the mark, reused as punctuation between acts */
.divider{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:0 var(--s3);}
.divider i{display:block;width:var(--s8);height:1px;}
.divider i:first-child{background:linear-gradient(90deg,transparent,rgba(217,174,87,0.4));}
.divider i:last-child{background:linear-gradient(90deg,rgba(217,174,87,0.4),transparent);}
.divider svg{display:block;filter:drop-shadow(0 0 8px rgba(240,206,134,0.4));}

/* one story number, told quietly */
.proof{margin-top:var(--s6);font-size:var(--t-md);font-weight:500;
  letter-spacing:0.01em;color:var(--body-text);}

/* the world in numbers: a strip, not a dashboard */
.eco{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s5) var(--s8);margin:var(--s7) auto 0;padding:0;list-style:none;}
.eco a{display:block;text-decoration:none;transition:transform 0.5s var(--ease);}
.eco a:hover{transform:translateY(-2px);}
.eco .n{display:block;font-family:var(--display);font-optical-sizing:auto;font-weight:380;
  font-size:2.25rem;line-height:1;letter-spacing:-0.01em;color:var(--cream);
  transition:color 0.5s var(--ease);}
.eco a:hover .n{color:var(--gold-bright);}
.eco .l{display:block;margin-top:var(--s2);font-size:var(--t-xs);font-weight:600;
  letter-spacing:0.18em;margin-right:-0.18em;text-transform:uppercase;color:var(--faint);}

/* accolades: quiet, provisional wording */
.accolades{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2) var(--s5);margin:var(--s6) 0 0;padding:0;list-style:none;}
.accolades li{font-size:var(--t-sm);color:var(--faint);letter-spacing:0.04em;}

/* listen: platform pills */
.platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);
  margin-top:var(--s6);padding:0;list-style:none;}
.platform{display:inline-block;padding:14px var(--s4);
  border:1px solid rgba(147,166,189,0.18);border-radius:999px;
  color:var(--cream);font-size:var(--t-base);font-weight:500;text-decoration:none;
  background:rgba(255,255,255,0.015);
  transition:border-color 0.5s var(--ease),transform 0.5s var(--ease),background 0.5s var(--ease);}
.platform:hover{border-color:rgba(217,174,87,0.5);transform:translateY(-2px);
  background:rgba(217,174,87,0.06);}
/* the "and everywhere else" note: a real supporting line, not a footnote */
.ph-note{margin-top:var(--s5);font-size:var(--t-sm);line-height:1.7;
  color:var(--muted);letter-spacing:0.01em;max-width:44ch;margin-inline:auto;}

/* worlds: each episode is a place */
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  max-width:1080px;margin:var(--s8) auto 0;padding:0;list-style:none;}
@media (max-width:960px){.worlds{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.worlds{grid-template-columns:1fr;}}
.world{position:relative;display:block;padding:var(--s5) var(--s4);border-radius:16px;
  border:1px solid rgba(147,166,189,0.14);background:#070b14;overflow:hidden;
  text-decoration:none;
  transition:border-color 0.6s var(--ease),transform 0.6s var(--ease);}
.world::before{content:"";position:absolute;inset:0;background:var(--tint,none);
  opacity:0.55;transition:opacity 0.6s var(--ease);}
.world:hover{transform:translateY(-3px);border-color:rgba(217,174,87,0.4);}
.world:hover::before{opacity:0.9;}
.world > *{position:relative;}
.world .w-mote{display:block;width:5px;height:5px;border-radius:50%;
  background:var(--gold-bright);opacity:0.8;
  box-shadow:0 0 8px 1px rgba(240,206,134,0.6),0 0 24px 6px rgba(240,206,134,0.15);}
.world h3{margin-top:var(--s3);font-family:var(--display);font-style:italic;font-weight:400;
  font-size:1.4375rem;letter-spacing:-0.01em;color:var(--cream);}
.world p{margin-top:var(--s2);font-size:var(--t-sm);line-height:1.65;color:var(--muted);}

/* the book: a typeset cover, swapped for real art when it arrives */
.book-grid{display:grid;grid-template-columns:300px 1fr;gap:var(--s10);align-items:center;
  max-width:880px;margin:0 auto;}
@media (max-width:760px){.book-grid{grid-template-columns:1fr;gap:var(--s8);}
  .book-grid .book-copy{text-align:center;}}
.book{width:min(260px,72vw);aspect-ratio:5/7;margin:0 auto;position:relative;
  border-radius:4px 12px 12px 4px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(28,44,76,0.55), transparent 70%),
    linear-gradient(160deg,#0e1628 0%,#0a101f 55%,#070c17 100%);
  border:1px solid rgba(217,174,87,0.32);
  box-shadow:-28px 36px 64px -32px rgba(0,0,0,0.85),
    inset -10px 0 28px -14px rgba(0,0,0,0.7),
    inset 1px 1px 0 rgba(240,206,134,0.1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--s5) var(--s4);gap:var(--s3);}
.book::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(217,174,87,0.25) 20%,rgba(217,174,87,0.25) 80%,transparent);}
.book .b-eyebrow{font-size:0.5625rem;font-weight:600;letter-spacing:0.32em;margin-right:-0.32em;
  text-transform:uppercase;color:var(--gold);}
.book .b-title{font-family:var(--display);font-weight:380;font-size:1.75rem;line-height:1.12;
  letter-spacing:-0.01em;color:var(--cream);}
.book .b-sub{font-family:var(--display);font-style:italic;font-size:0.9375rem;color:var(--muted);}
.book svg{filter:drop-shadow(0 0 7px rgba(240,206,134,0.5));}
.book-copy{text-align:left;}
.book-copy h2{margin-top:var(--s3);}
.book-copy .lead{margin-top:var(--s3);font-size:var(--t-md);line-height:1.75;color:var(--body-text);}
.book-copy .cta-row{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;}
@media (max-width:760px){.book-copy .cta-row{justify-content:center;}}
.soon{display:inline-block;font-size:var(--t-xs);font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);padding:6px 14px;
  border:1px solid rgba(217,174,87,0.3);border-radius:999px;}

/* secondary action: ghost gold */
.cta-ghost{display:inline-block;padding:14px var(--s4);border-radius:999px;
  border:1px solid rgba(217,174,87,0.45);color:var(--gold-bright);
  font-size:var(--t-base);font-weight:500;letter-spacing:0.02em;text-decoration:none;
  background:transparent;cursor:pointer;
  transition:border-color 0.5s var(--ease),background 0.5s var(--ease),transform 0.5s var(--ease);}
.cta-ghost:hover{border-color:rgba(240,206,134,0.8);background:rgba(217,174,87,0.08);
  transform:translateY(-2px);}

/* quiet inline link */
.link-quiet{color:var(--muted);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(217,174,87,0.4);
  transition:color 0.4s var(--ease),text-decoration-color 0.4s var(--ease);}
.link-quiet:hover{color:var(--gold-bright);text-decoration-color:rgba(240,206,134,0.9);}

/* the why: the emotional center */
.why .lead{text-align:left;}
@media (max-width:640px){.why .lead{text-align:center;}}
.signature{margin-top:var(--s8);}
.signature .sig-line{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:var(--t-lg);color:var(--gold-bright);}
.signature .sig-name{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted);
  letter-spacing:0.04em;}

/* field researcher: one quiet card */
.member-card{max-width:680px;margin:0 auto;padding:var(--s8) var(--s6);
  border:1px solid rgba(217,174,87,0.22);border-radius:20px;text-align:center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(217,174,87,0.05), transparent 70%),
    rgba(255,255,255,0.01);}
.member-perks{margin:var(--s6) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--s2);}
.member-perks li{font-size:var(--t-base);color:var(--body-text);}
.member-perks li::before{content:"";display:inline-block;width:4px;height:4px;
  border-radius:50%;background:var(--gold);margin:0 var(--s2) 3px 0;
  box-shadow:0 0 6px rgba(240,206,134,0.5);}
.member-card .cta-row{margin-top:var(--s6);}
.donate-line{margin-top:var(--s4);font-size:var(--t-sm);color:var(--faint);}

/* newsletter */
.nl-form{display:flex;gap:var(--s2);max-width:460px;margin:var(--s6) auto 0;}
@media (max-width:520px){.nl-form{flex-direction:column;}}
.nl-form input[type="email"]{flex:1;min-width:0;
  background:rgba(255,255,255,0.03);border:1px solid rgba(147,166,189,0.22);
  border-radius:999px;padding:14px var(--s3);color:var(--cream);
  font-family:var(--body);font-size:var(--t-base);
  transition:border-color 0.4s var(--ease),background 0.4s var(--ease);}
.nl-form input[type="email"]::placeholder{color:var(--faint);}
.nl-form input[type="email"]:focus{outline:none;border-color:rgba(217,174,87,0.6);
  background:rgba(255,255,255,0.045);}
.nl-form .cta{margin-top:0;}
.nl-note{margin-top:var(--s3);font-size:var(--t-xs);color:var(--faint);letter-spacing:0.03em;}

/* footer */
.footer{border-top:1px solid rgba(147,166,189,0.1);
  padding:var(--s10) var(--s3) var(--s8);text-align:center;}
.footer .f-mark{display:flex;justify-content:center;}
.footer .f-mark svg{filter:drop-shadow(0 0 8px rgba(240,206,134,0.4));}
.footer .f-name{margin-top:var(--s3);font-family:var(--display);font-size:1.1875rem;
  color:var(--cream);letter-spacing:0.01em;}
.footer nav{margin-top:var(--s5);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s4);}
.footer nav a{font-size:var(--t-sm);color:var(--muted);text-decoration:none;
  transition:color 0.4s var(--ease);}
.footer nav a:hover{color:var(--gold-bright);}
.footer .fine{margin-top:var(--s6);font-size:var(--t-xs);color:var(--faint);letter-spacing:0.04em;}

/* inner pages: same world, quieter */
.page-hero{position:relative;padding:calc(var(--s16) + var(--s10)) var(--s3) var(--s10);
  text-align:center;
  background:radial-gradient(70% 55% at 50% -12%, rgba(22,35,60,0.65), transparent 72%);}
.page-hero h1{font-family:var(--display);font-optical-sizing:auto;font-weight:380;
  font-size:clamp(2.25rem,5vw,3.25rem);line-height:1.1;letter-spacing:-0.02em;
  color:var(--cream);margin-top:var(--s3);}
.page-hero .lead{max-width:620px;margin:var(--s4) auto 0;
  font-size:var(--t-md);line-height:1.75;color:var(--body-text);}

/* episodes index */
.ep-list{max-width:760px;margin:0 auto;padding:0 0 var(--s8);list-style:none;}
.ep{display:flex;align-items:baseline;gap:var(--s4);
  padding:var(--s4) var(--s2);border-bottom:1px solid rgba(147,166,189,0.09);
  text-decoration:none;border-radius:4px;
  transition:background 0.4s var(--ease);}
.ep:hover{background:rgba(255,255,255,0.02);}
.ep:hover h3{color:var(--gold-bright);}
.ep h3{transition:color 0.4s var(--ease);}
.ep-list li:first-child .ep{border-top:1px solid rgba(147,166,189,0.09);}
.ep h3{flex:0 0 220px;font-family:var(--display);font-weight:400;font-size:1.1875rem;
  letter-spacing:-0.005em;color:var(--cream);}
.ep p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--muted);}
@media (max-width:600px){
  .ep{flex-direction:column;gap:var(--s1);}
  .ep h3{flex:none;}
}

/* the shelf: published books */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  max-width:1080px;margin:var(--s8) auto 0;padding:0;list-style:none;}
@media (max-width:960px){.shelf{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.shelf{grid-template-columns:1fr;}}
.bk{position:relative;display:flex;flex-direction:column;align-items:flex-start;height:100%;
  padding:var(--s5) var(--s4);border-radius:16px;text-align:left;text-decoration:none;
  border:1px solid rgba(147,166,189,0.14);background:#070b14;
  transition:border-color 0.6s var(--ease),transform 0.6s var(--ease);}
.bk:hover{transform:translateY(-3px);border-color:rgba(217,174,87,0.4);}
.bk .bk-num{font-size:var(--t-xs);font-weight:600;letter-spacing:0.2em;color:var(--gold);}
.bk h3{margin-top:var(--s2);font-family:var(--display);font-weight:400;font-size:1.3125rem;
  line-height:1.25;letter-spacing:-0.01em;color:var(--cream);}
.bk .bk-sub{margin-top:var(--s1);font-family:var(--display);font-style:italic;
  font-size:var(--t-base);color:var(--muted);}
.bk .bk-date{margin-top:var(--s2);font-size:var(--t-xs);color:var(--faint);letter-spacing:0.05em;}
.bk .bk-link{margin-top:var(--s4);}

/* episode guides */
.g-list{max-width:560px;margin:var(--s5) auto 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--s3);text-align:left;}
.g-list li{position:relative;padding-left:var(--s3);
  font-size:var(--t-md);line-height:1.7;color:var(--body-text);}
.g-list li::before{content:"";position:absolute;left:0;top:0.66em;width:5px;height:5px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(240,206,134,0.5);}
.g-calm{max-width:560px;margin:var(--s5) auto 0;padding:var(--s5);
  border:1px solid rgba(217,174,87,0.22);border-radius:16px;
  font-size:var(--t-md);line-height:1.75;color:var(--body-text);text-align:left;
  background:radial-gradient(80% 60% at 50% 0%, rgba(217,174,87,0.05), transparent 70%);}

/* contact form */
.contact-form{max-width:560px;margin:var(--s8) auto 0;
  display:flex;flex-direction:column;gap:var(--s3);text-align:left;}
.contact-form label{display:block;font-size:var(--t-sm);font-weight:500;
  color:var(--muted);letter-spacing:0.04em;}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;margin-top:var(--s1);
  background:rgba(255,255,255,0.03);border:1px solid rgba(147,166,189,0.22);
  border-radius:14px;padding:14px var(--s3);color:var(--cream);
  font-family:var(--body);font-size:var(--t-base);line-height:1.6;resize:vertical;
  transition:border-color 0.4s var(--ease),background 0.4s var(--ease);}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--faint);}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;
  border-color:rgba(217,174,87,0.6);background:rgba(255,255,255,0.045);}
.contact-form select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393a6bd' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;}
.contact-form .cta{align-self:center;margin-top:var(--s2);}

/* ------------------------------------------------------------------
   Mobile: tighten the vertical rhythm so a phone held at bedtime
   scrolls less, without losing the calm. Composed for the small
   screen, not merely reflowed onto it.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  .section{padding:var(--s10) var(--s4);}
  #world.section{padding-top:0;}
  .page-hero{padding:calc(var(--s12) + var(--s5)) var(--s4) var(--s8);}
  .member-card{padding:var(--s7) var(--s4);}
  .book-grid{gap:var(--s6);}
  .signature{margin-top:var(--s6);}
  .eco{gap:var(--s4) var(--s6);}
  /* platforms align into two even columns instead of a ragged wrap;
     an odd last pill (the episodes page has seven) spans the full width */
  .platforms{margin-top:var(--s5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
  .platforms > li{display:flex;}
  .platforms .platform{width:100%;text-align:center;padding-inline:var(--s2);}
  .platforms > :last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (max-width:380px){
  .section{padding:var(--s10) var(--s3);}
  .top nav{gap:12px;}
  .top nav a{letter-spacing:0.03em;}
}

@media (prefers-reduced-motion:reduce){
  .sr{opacity:1;transform:none;transition:none;}
  .top nav a,.top .brandmark,.platform,.world,.bk,.cta-ghost,.link-quiet,.footer nav a{transition:none;}
}