/* ==========================================================================
   WORLD 04 — I CAN SEE ME
   The doorway. Dark, slow, cinematic. Type is the whole design: enormous
   serif statements on black, one idea at a time, gold used like candlelight.
   This should not feel like a website section. It should feel like entering
   somewhere else entirely.
   ========================================================================== */
:root{
  --ink:#F4EFE6;
  --paper:#08070A;
  --surface:#111014;
  --surface-2:#191720;
  --muted:#A79E92;
  --line:rgba(244,239,230,.16);
  --brand:#E9C46A;
  --brand-ink:#0A0810;
  --accent:#E9C46A;
  --indigo:#3A2A56;
  --focus:#E9C46A;
  --foot-bg:#050408;
  --foot-fg:#F4EFE6;

  --font-display:"Instrument Serif", "Fraunces", Georgia, serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --header-h:70px;
}
body{ background:var(--paper); }
h1,h2,h3{ font-weight:400; letter-spacing:-.02em; line-height:1; }
.eyebrow,.link-arrow,.card__kicker{ color:var(--brand); }
.eyebrow{ letter-spacing:.28em; }
.site-header{ background:rgba(8,7,10,.6); border-bottom-color:rgba(244,239,230,.1); }
.site-header.is-stuck{ background:rgba(8,7,10,.95); }
.drawer{ background:var(--paper); }
.worldbar{ background:#050408; color:var(--ink); }
.worldmark{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:0; }
.card,.panel{ background:var(--surface); }
.btn{ font-family:var(--font-body); }
.btn--solid{ --btn-bg:#F4EFE6; --btn-fg:#0A0810; }
.btn--ghost{ --btn-fg:var(--ink); }
.imgph{ --ph-a:#6B5A8A; --ph-b:#0A0810; }
.lede{ color:rgba(244,239,230,.72); }

/* --------------------------------------------------------------- HERO */
.gh{
  position:relative; min-height:100svh; display:grid; place-items:center;
  text-align:center; overflow:hidden; isolation:isolate;
  padding:clamp(5rem,12vh,9rem) var(--gutter);
}
.gh__bg{ position:absolute; inset:0; z-index:-2; }
.gh::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(72% 62% at 50% 42%, rgba(8,7,10,.28) 0%, rgba(8,7,10,.86) 62%, #08070A 100%),
    linear-gradient(#08070A, transparent 22%, transparent 74%, #08070A);
}
.gh__title{
  font-size:clamp(3.4rem, 13vw, 11rem);
  line-height:.86; letter-spacing:-.045em; margin:0;
  text-wrap:balance;
}
.gh__title em{ font-style:italic; color:var(--brand); }
.gh__sub{
  margin:clamp(1.4rem,3vw,2.2rem) auto 0; max-width:44ch;
  font-size:var(--step-1); color:rgba(244,239,230,.74);
}
.gh__hint{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-size:var(--step--2); letter-spacing:.34em; text-transform:uppercase;
  color:rgba(244,239,230,.44); font-weight:600;
  animation:breathe 3.4s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.4; transform:translate(-50%,0) } 50%{ opacity:1; transform:translate(-50%,6px) } }

/* Curtain — the door opening, once, on arrival. */
.curtain{ display:none; }
/* Only drawn when the script that tears it down is running. */
html.js .curtain{
  position:fixed; inset:0; z-index:9997; background:#08070A;
  display:grid; place-items:center; pointer-events:none;
  animation:curtain 1.5s var(--ease-out-expo) .25s forwards;
}
.curtain span{
  font-family:var(--font-display); font-style:italic; color:var(--brand);
  font-size:clamp(1.4rem,5vw,3rem); letter-spacing:.02em;
}
@keyframes curtain{
  0%{ clip-path:inset(0 0 0 0); opacity:1 }
  55%{ opacity:1 }
  100%{ clip-path:inset(0 0 100% 0); opacity:1; visibility:hidden }
}
@media (prefers-reduced-motion: reduce){ .curtain{ display:none; } }

/* ------------------------------------------------------ BIG STATEMENTS */
.state{
  padding-block:clamp(5rem,14vh,10rem);
  text-align:center;
}
.state h2{
  font-size:clamp(2.2rem, 6.6vw, 5.4rem);
  line-height:1.02; letter-spacing:-.035em;
  max-width:19ch; margin-inline:auto;
}
.state h2 em{ font-style:italic; color:var(--brand); }
.state p{ max-width:56ch; margin:1.6rem auto 0; color:rgba(244,239,230,.72); font-size:var(--step-1); }
.state--left{ text-align:left; }
.state--left h2,.state--left p{ margin-inline:0; }

.rule-gold{ width:64px; height:2px; background:var(--brand); margin:0 auto var(--sp-5); }
.state--left .rule-gold{ margin-inline:0; }

/* ----------------------------------------------------------- THE IDEA */
.idea{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:900px){ .idea{ grid-template-columns:repeat(3,1fr); } }
.idea__cell{ background:var(--paper); padding:clamp(1.8rem,4vw,3rem); }
.idea__n{
  font-family:var(--font-display); font-style:italic; font-size:var(--step-4);
  color:var(--brand); line-height:1; display:block; margin-bottom:1rem;
}
.idea__cell h3{ font-size:var(--step-2); margin-bottom:.7rem; }
.idea__cell p{ color:var(--muted); font-size:var(--step--1); margin:0; }

/* ------------------------------------------------------------- BOOKS */
.book{
  display:grid; gap:1rem; text-decoration:none; color:inherit;
  transition:transform var(--dur) var(--ease);
}
.book:hover{ transform:translateY(-6px); }
.book__cover{
  position:relative; aspect-ratio:3/4.2; border-radius:3px 8px 8px 3px;
  overflow:hidden; box-shadow:-6px 0 0 rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.9);
  background:linear-gradient(150deg,var(--ph-a,#6B5A8A),var(--ph-b,#0A0810));
  display:grid; place-items:center; padding:1.4rem; text-align:center;
}
.book__cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:14px;
  background:linear-gradient(90deg, rgba(0,0,0,.45), transparent);
}
.book__cover span{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.86); background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.24);
  padding:.35rem .6rem; border-radius:var(--r-pill);
}
.book h3{ font-size:var(--step-1); margin:0; }
.book p{ margin:0; font-size:var(--step--1); color:var(--muted); }

/* ------------------------------------------------------------ STORIES */
.gstory{
  display:grid; gap:0; text-decoration:none; color:inherit; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gstory:hover{ border-color:var(--brand); transform:translateY(-4px); }
.gstory .imgph{ border-radius:0; }
.gstory__body{ padding:1.4rem; }
.gstory h3{ font-size:var(--step-2); margin:.4rem 0 .5rem; }

.featured{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr;
}
@media (min-width:900px){ .featured{ grid-template-columns:1fr 1.1fr; } }
.featured blockquote{ margin:0; }
.featured .quote{ font-family:var(--font-display); font-size:var(--step-4); line-height:1.08; font-style:italic; }

/* ---------------------------------------------------------- MENTORSHIP */
.pathway{ position:relative; display:grid; gap:0; }
.pathway__step{
  position:relative; padding:clamp(1.6rem,4vw,2.4rem) 0;
  border-top:1px solid var(--line);
  display:grid; gap:.6rem 2.5rem; grid-template-columns:1fr;
}
@media (min-width:800px){ .pathway__step{ grid-template-columns:.35fr 1fr; align-items:start; } }
.pathway__step:last-child{ border-bottom:1px solid var(--line); }
.pathway__label{
  font-family:var(--font-display); font-style:italic; font-size:var(--step-2);
  color:var(--brand);
}
.pathway__step p{ margin:0; color:rgba(244,239,230,.74); }

/* -------------------------------------------------------------- GIVE */
.give{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(1.6rem,3.5vw,2.4rem);
  display:flex; flex-direction:column; gap:.9rem;
  background:linear-gradient(170deg, rgba(233,196,106,.07), transparent 60%);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.give:hover{ border-color:var(--brand); transform:translateY(-4px); }
.give h3{ font-size:var(--step-2); margin:0; }
.give__amt{ font-family:var(--font-display); font-style:italic; font-size:var(--step-3); color:var(--brand); }
.give ul{ margin:0; padding-left:1.1em; font-size:var(--step--1); color:var(--muted); }

/* --------------------------------------------------------------- BANDS */
.band-indigo{ background:linear-gradient(160deg,#171226 0%, #0B0912 70%); }
.band-paper{ background:#F4EFE6; color:#0A0810; }
.band-paper .lede,.band-paper p{ color:rgba(10,8,16,.72); }
.band-paper .eyebrow{ color:#7A5B12; }
.band-paper .card,.band-paper .panel{ background:#fff; border-color:rgba(10,8,16,.14); color:#0A0810; }
.band-paper .ni{ color:rgba(10,8,16,.7); }
.band-paper .btn--ghost{ --btn-fg:#0A0810; border-color:rgba(10,8,16,.28); }
.band-paper .acc__btn{ color:#0A0810; }
.band-paper .acc,.band-paper .acc__item{ border-color:rgba(10,8,16,.14); }
.band-paper .acc__panel p{ color:rgba(10,8,16,.7); }
.band-paper .link-arrow{ color:#7A5B12; }

.acc__btn{ font-family:var(--font-display); font-weight:400; font-size:var(--step-2); }
.notice{ background:rgba(233,196,106,.07); border-color:rgba(233,196,106,.32); }

/* Stats sitting on the pale band need the pale band's ink, not the dark world's. */
.band-paper .stats{ background:rgba(10,8,16,.14); border-color:rgba(10,8,16,.14); }
.band-paper .stat{ background:#fff; color:#0A0810; }
.band-paper .stat__label,
.band-paper .stat__note{ color:rgba(10,8,16,.72); }
.band-paper .stat__val{ color:rgba(10,8,16,.34); }
.band-paper .ni{ color:#0A0810; border-color:rgba(122,91,18,.55); background:rgba(233,196,106,.16); }