/* The Bottleneck Is You — "Through the Neck" world.
   Palette: ink navy chamber, gold sand, chalk. Fraunces / Archivo / Caveat. */
:root{
  --ink:#0B1F3A; --ink-deep:#071527; --gold:#C9A227; --gold-hi:#E8C55A;
  --chalk:#F4EFE4; --mute:#8FA0B5; --line:rgba(201,162,39,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo',sans-serif;background:var(--ink);color:var(--chalk);
  overflow-x:hidden;line-height:1.65;font-weight:300;font-size:1.06rem}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.06}
em{font-style:italic;color:var(--gold-hi)}
a{color:var(--gold-hi)}
.hand{font-family:'Caveat',cursive;color:var(--gold-hi);font-size:1.45rem;transform:rotate(-2deg)}
.eyebrow{letter-spacing:.24em;text-transform:uppercase;font-size:.72rem;color:var(--gold);margin-bottom:1.2rem}
.tiny{font-size:.8rem;color:var(--mute);margin-top:.8rem}

#sand{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.5}
body>*{position:relative;z-index:1}

/* ---- hero / top chamber ---- */
.chamber-top{min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:6rem 1.5rem 8rem;position:relative;
  background:radial-gradient(120% 90% at 50% -20%, #12325a 0%, var(--ink) 55%, var(--ink-deep) 100%)}
.press-mark{position:absolute;top:1.6rem;left:50%;transform:translateX(-50%);
  letter-spacing:.3em;text-transform:uppercase;font-size:.68rem;color:var(--mute)}
.hats{position:absolute;inset:0;pointer-events:none}
.hats span{position:absolute;font-family:'Fraunces',serif;font-style:italic;color:var(--mute);
  opacity:0;transform:translateY(-10px);font-size:clamp(.9rem,1.6vw,1.25rem);white-space:nowrap}
/* Hats live in the wide upper chamber — kept clear of the centre column so they
   never collide with the hero title (which owns roughly 28%–72% horizontally). */
.hats span:nth-child(1){top:14%;left:8%}.hats span:nth-child(2){top:22%;right:10%}
.hats span:nth-child(3){top:36%;left:4%}.hats span:nth-child(4){top:50%;left:11%}
.hats span:nth-child(5){top:40%;right:5%}.hats span:nth-child(6){top:60%;left:7%}
.hats span:nth-child(7){top:64%;right:8%}.hats span:nth-child(8){top:30%;left:21%}
.hero-title{font-size:clamp(3.2rem,11vw,8.5rem);font-weight:900;letter-spacing:-.03em}
.hero-title .line{display:block;overflow:hidden}
.hero-title .gold{color:var(--gold);font-style:italic}
.hero-sub{margin:2rem auto 1rem;max-width:34rem;font-size:1.15rem;color:#cdd8e6}
.hero-sub strong{color:var(--chalk);font-weight:500}
.hero-hand{margin:1.4rem 0 2.2rem}
.neck-glow{position:absolute;bottom:-6rem;left:50%;transform:translateX(-50%);
  width:14rem;height:14rem;border-radius:50%;filter:blur(60px);
  background:radial-gradient(circle,rgba(201,162,39,.5),transparent 70%)}

.btn-gold{display:inline-block;background:var(--gold);color:var(--ink-deep);text-decoration:none;
  font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.04em;border:0;cursor:pointer;
  padding:1rem 2.2rem;border-radius:2px;font-size:1rem;transition:transform .25s,box-shadow .25s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(201,162,39,.35);background:var(--gold-hi)}

/* ---- story ---- */
.story{padding:9rem 1.5rem;background:var(--ink-deep)}
.narrow{max-width:38rem;margin:0 auto}
.story p{margin-bottom:1.6rem}
.big-quote{font-family:'Fraunces',serif;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.35;
  color:var(--chalk);font-weight:400;margin-bottom:2.4rem}
.big-quote .cite{display:block;font-family:'Caveat',cursive;font-size:1.3rem;color:var(--gold);margin-top:1rem}
.punch{font-family:'Fraunces',serif;font-style:italic;font-size:1.5rem;color:var(--gold-hi)}

/* ---- squeeze ---- */
.squeeze{height:100svh;background:var(--ink-deep)}
.squeeze-stage{height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.glass{width:min(92vw,68rem);text-align:center;position:relative;z-index:2}
.sq-line{font-family:'Fraunces',serif;font-size:clamp(1.3rem,3.4vw,2.6rem);
  color:var(--mute);margin:1rem 0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.sq-neckline{font-family:'Fraunces',serif;font-weight:900;opacity:0;
  font-size:clamp(1.2rem,2.6vw,2rem);color:var(--chalk);margin-top:2rem}
.glass-frame{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none;opacity:.85}
.glass-frame svg{height:100%;width:min(90vw,44rem);overflow:visible}
/* the silhouette is the signature of this world — give it its own stroke
   rather than the dimmer shared --line used for card borders */
.glass-frame path{fill:none;stroke:rgba(201,162,39,.42);stroke-width:1.5;
  stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(201,162,39,.18))}
/* light at the neck — peaks at maximum compression */
.squeeze-glow{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:16rem;height:16rem;border-radius:50%;filter:blur(52px);opacity:0;z-index:1;
  background:radial-gradient(circle,rgba(232,197,90,.55),rgba(201,162,39,.18) 45%,transparent 70%)}

/* ---- wide chamber / truth ---- */
.chamber-wide{padding:9rem 1.5rem;background:linear-gradient(var(--ink-deep),var(--ink))}
.wide{max-width:66rem;margin:0 auto}
.chamber-wide h2,.steps h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:3rem;letter-spacing:-.02em}
.grains-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:.5rem;max-width:44rem;margin:0 0 3.5rem}
.grains-grid .g{aspect-ratio:1;border-radius:50%;background:#22364f;display:block}
.grains-grid .gold{background:var(--gold);box-shadow:0 0 12px rgba(201,162,39,.55)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:4.5rem}
.gold-t{color:var(--gold);font-size:1.5rem;margin-bottom:.8rem}
.mute-t{color:var(--mute);font-size:1.5rem;margin-bottom:.8rem}
.center{text-align:center;max-width:44rem;margin-inline:auto}

/* ---- steps ---- */
.steps{padding:8rem 1.5rem 9rem;background:var(--ink)}
.step-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.step-card{border:1px solid var(--line);padding:2rem 1.6rem;border-radius:4px;
  background:linear-gradient(160deg,rgba(201,162,39,.06),rgba(7,21,39,.4))}
.step-card .num{font-family:'Fraunces',serif;font-style:italic;font-size:2.2rem;color:var(--gold);display:block;margin-bottom:.6rem}
.step-card h3{font-size:1.35rem;margin-bottom:.6rem}
.step-card p{font-size:.94rem;color:#c3cfdd}
.center-hand{text-align:center;display:block;margin-top:3rem}

/* ---- offer ---- */
.offer{padding:8rem 1.5rem;background:radial-gradient(90% 90% at 50% 110%, #14335c 0%, var(--ink-deep) 60%)}
.offer-grid{max-width:64rem;margin:0 auto;display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:4rem;align-items:center}
.offer-book img{width:100%;height:auto;border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px var(--line)}
.offer-copy h2{font-size:clamp(2.4rem,5vw,4rem);font-style:italic;color:var(--gold-hi);margin-bottom:1.2rem}
.offer-lead{margin-bottom:1.6rem}
.lesson-menu{list-style:none;margin-bottom:2rem}
.lesson-menu li{padding:.5rem 0;border-bottom:1px dashed rgba(143,160,181,.25);font-size:.96rem}
.lesson-menu b{color:var(--gold);font-family:'Fraunces',serif;margin-right:.5rem}
#signup{display:flex;gap:.8rem;flex-wrap:wrap}
#signup input{flex:1 1 240px;padding:1rem 1.2rem;border-radius:2px;border:1px solid var(--line);
  background:rgba(7,21,39,.7);color:var(--chalk);font-size:1rem;font-family:'Archivo',sans-serif}
#signup input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.form-msg{margin-top:.8rem;color:var(--gold-hi);min-height:1.3em;font-size:.92rem}

.foot{padding:3rem 1.5rem;text-align:center;color:var(--mute);font-size:.85rem;background:var(--ink-deep)}

/* ---- lesson pages ---- */
.lesson-wrap{max-width:42rem;margin:0 auto;padding:7rem 1.5rem 6rem}
.lesson-eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.hourmeter{display:flex;gap:.35rem}
.hourmeter i{width:.7rem;height:.7rem;border-radius:50%;border:1px solid var(--gold);display:block}
.hourmeter i.full{background:var(--gold);box-shadow:0 0 8px rgba(201,162,39,.6)}
.lesson-wrap h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:2rem;letter-spacing:-.02em}
.lesson-wrap h2{font-size:1.5rem;margin:2.6rem 0 1rem;color:var(--gold-hi)}
.lesson-wrap p,.lesson-wrap li{margin-bottom:1.3rem;color:#d7dfe9}
.lesson-wrap ul,.lesson-wrap ol{padding-left:1.3rem}
.mentor-note{border-left:3px solid var(--gold);padding:1.4rem 1.6rem;margin:2.6rem 0;
  background:rgba(201,162,39,.07);font-size:.98rem}
.mentor-note b{font-family:'Caveat',cursive;font-size:1.35rem;color:var(--gold-hi);display:block;margin-bottom:.4rem}
.do-this{border:1px dashed var(--gold);padding:1.6rem;margin:2.6rem 0;border-radius:4px}
.do-this h3{color:var(--gold);margin-bottom:.8rem;font-size:1.2rem}
.lesson-nav{display:flex;justify-content:space-between;margin-top:4rem;gap:1rem;flex-wrap:wrap}
.next-note{color:var(--mute);font-size:.9rem;margin-top:1rem}
.gate{max-width:34rem;margin:14vh auto;padding:2.5rem;border:1px solid var(--line);border-radius:6px;
  text-align:center;background:rgba(7,21,39,.8)}
.gate h2{margin-bottom:1rem}
.gate-msg{margin-top:.8rem;color:var(--gold-hi);min-height:1.3em;font-size:.9rem}
.gate form{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.gate input{flex:1 1 200px;padding:.9rem 1rem;border-radius:2px;border:1px solid var(--line);
  background:var(--ink-deep);color:var(--chalk)}
/* Gate state is driven entirely by the [data-gate-ready] flag that the inline
   pre-paint script in each lesson <head> sets ONLY when (a) JS is alive and
   (b) the reader is not yet unlocked. This is pure CSS on purpose: it stays
   correct even if neck.js never loads, so a lesson can never render blank.
     no JS            -> no flag -> gate hidden, lesson readable
     JS + locked      -> flag    -> gate shown,  lesson hidden (before paint)
     JS + unlocked    -> no flag -> gate hidden, lesson readable (no flash) */
#gate{display:none}
[data-gate-ready] #gate{display:block}
[data-gate-ready] [data-gated]{display:none}

/* ---- focus visibility (keyboard) ---- */
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:2px}

/* ---- film grain: atmosphere over the ink chambers ---- */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- thanks ---- */
.thanks-hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;background:radial-gradient(100% 80% at 50% 0%, #12325a, var(--ink-deep))}
.thanks-hero h1{font-size:clamp(2.6rem,7vw,5rem);margin:1rem 0 1.4rem}
.thanks-hero p{max-width:34rem;margin-bottom:1rem;color:#cdd8e6}

@media (max-width:760px){
  .cols,.offer-grid{grid-template-columns:1fr}
  .offer-book{max-width:240px;margin:0 auto}
  .grains-grid{grid-template-columns:repeat(10,1fr)}
  /* narrow viewport: the title fills the width, so keep only the four corner
     hats and drop the ones that would sit under it */
  .hats span:nth-child(3),.hats span:nth-child(4),
  .hats span:nth-child(6),.hats span:nth-child(8){display:none}
  .hats span:nth-child(1){top:11%;left:4%}.hats span:nth-child(2){top:17%;right:4%}
  .hats span:nth-child(5){top:74%;right:4%}.hats span:nth-child(7){top:80%;left:4%}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}