/* Nelawa landing — Daylight → Lamproom */
:root{
  --ui:"Hanken Grotesk",system-ui,sans-serif;
  --voice:"Fraunces",Georgia,serif;

  --ivory:#F8F2E3; --paper:#F1E8D3; --parch:#E7DCC4;
  --ink:#2B241C; --soft:#6E6353; --faint:#A2947C;
  --dusk:#33425C; --dusk-2:#4C5E80;
  --amber:#C9812A; --amber-deep:#8A5210; --amber-soft:#E7C68C;

  /* colour journey grounds */
  --g1:#F8F2E3;            /* S1 daylight */
  --g2:#F4ECD8;            /* S2 */
  --g3:#EBEBED;            /* S3 the only cold section */
  --g3-ink:#42454C; --g3-soft:#6E717A;
  --g4:#F3E7CB;            /* S4 golden hour */
  --g5:#E9DCBE;            /* S5 late gold */
  --g6:#3A4A68;            /* founder dusk */
  --lamp:#1D2637;          /* S6/S7 lamproom (JS-tweakable) */

  --line:rgba(43,36,28,.14);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ui);color:var(--ink);background:var(--g1);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--dusk)}
.dark a{color:var(--amber-soft)} .dark a:hover{color:#fff}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* serif = the shelterer's spoken lines only */
.voice{font-family:var(--voice);font-weight:500;letter-spacing:-.01em}

/* ---------- nav ---------- */
nav{padding:26px 0}
nav .wrap{display:flex;align-items:center;justify-content:space-between}
nav img{height:56px;width:auto}

/* ---------- sections ---------- */
section{padding:96px 0}
.lead{font-family:var(--voice);font-weight:500;font-size:clamp(28px,3.6vw,42px);
  line-height:1.2;margin:0 0 18px;color:var(--dusk)}
.dark .lead{color:var(--paper)}

/* ---------- S1 hero ---------- */
#hero{background:var(--g1);padding:36px 0 110px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
#hero h1{font-family:var(--voice);font-weight:560;font-size:clamp(38px,4.6vw,58px);
  line-height:1.12;color:var(--dusk);margin:0 0 20px}
#hero .sub{font-size:clamp(17px,1.6vw,20px);color:var(--soft);max-width:34em;margin:0 0 30px}
#hero .sub b{color:var(--ink);font-weight:600}

/* video slot — 16:9, poster = calm Today still */
.filmslot{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:var(--parch);box-shadow:0 24px 60px -24px rgba(43,36,28,.35),0 2px 6px rgba(43,36,28,.08);
  border:1px solid var(--line)}
.filmslot img{width:126%;max-width:none;margin:-3% 0 0 -11%}
.filmslot .settle{position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--dusk) 0 62%,var(--amber) 62% 66%,var(--dusk) 66% 100%);opacity:.9}
.filmslot .playbtn{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:8px;
  font:inherit;font-weight:600;font-size:14px;color:var(--paper);background:rgba(29,38,55,.85);
  border:0;border-radius:99px;padding:10px 18px 10px 13px;cursor:pointer}
.filmslot .playbtn:hover{background:var(--dusk)}
.filmslot .playbtn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.filmslot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#1D2637}

/* ---------- waitlist form ---------- */
.waitform{display:flex;gap:10px;max-width:480px}
.waitform input{flex:1;min-width:0;font:inherit;padding:14px 16px;border-radius:12px;
  border:1.5px solid var(--line);background:#FFFDF6;color:var(--ink)}
.waitform input::placeholder{color:var(--faint)}
.waitform input:focus-visible{outline:3px solid var(--amber);outline-offset:1px;border-color:transparent}
.waitform button{font:inherit;font-weight:600;padding:14px 22px;border-radius:12px;border:0;
  background:var(--dusk);color:var(--paper);cursor:pointer;white-space:nowrap}
.waitform button:hover{background:var(--dusk-2)}
.waitform button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.micro{font-size:14px;color:var(--faint);margin:12px 0 0}
.dark .micro{color:rgba(241,232,211,.55)}
.confirmed{font-family:var(--voice);font-size:22px;color:var(--dusk);padding:14px 0}
.dark .confirmed{color:var(--amber-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- S2 the pile ---------- */
#pile{background:linear-gradient(var(--g1),var(--g2) 18%);position:relative;overflow:hidden}
#pile .wrap{position:relative;z-index:1;max-width:820px}
.recog{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px}
.recog li{font-size:clamp(19px,2vw,23px);color:var(--ink);border-left:3px solid var(--parch);padding-left:18px}
.recog li b{font-weight:600}
/* drifting task-scraps */
.scrap{position:absolute;padding:9px 14px;border-radius:8px;background:#FBF6E9;
  border:1px solid var(--line);color:var(--faint);font-size:13px;box-shadow:0 6px 18px rgba(43,36,28,.07);
  transform:rotate(var(--rot,-2deg));white-space:nowrap;pointer-events:none}
@keyframes drift{from{translate:0 0}to{translate:0 -26px}}
[data-motion="on"] .scrap{animation:drift var(--dur,14s) ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.scrap{animation:none !important}}

/* ---------- S3 graveyard (the only cold section) ---------- */
#graveyard{background:linear-gradient(var(--g2),var(--g3) 14%,var(--g3) 86%,var(--g4));color:var(--g3-ink)}
#graveyard .wrap{max-width:940px}
#graveyard .lead{color:var(--g3-ink)}
#graveyard .support{font-size:clamp(18px,1.8vw,21px);color:var(--g3-soft);max-width:36em;margin:0}
#graveyard .support b{color:var(--g3-ink);font-weight:600}
.morgue{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0 0}
.dead{background:#F4F4F6;border:1px solid #DDDDE2;border-radius:12px;padding:18px;color:#7C7F88;
  font-size:14px}
.dead .appbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#9A9DA6;font-weight:600}
.dead .appbar .glyph{width:22px;height:22px;border-radius:6px;background:#C9CBD2}
.dead .rowline{height:9px;border-radius:5px;background:#E3E3E8;margin:9px 0}
.dead .rowline.short{width:62%}
.dead .tag{display:inline-block;margin-top:10px;padding:3px 9px;border-radius:99px;background:#E3E3E8;font-size:12px;font-weight:600}
.dead .badge{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:99px;
  background:#C0392B;color:#fff;font-size:11.5px;font-weight:700;margin-left:auto}

/* ---------- S4 give it here ---------- */
#give{background:var(--g4);padding-top:0}
.settleline{display:block;width:100%;height:auto;margin:0 0 64px}
.settleline path{fill:none;stroke:var(--dusk);stroke-width:4;stroke-linecap:round}
[data-motion="on"] .settleline path{stroke-dasharray:1700;stroke-dashoffset:1700;transition:stroke-dashoffset 2.2s ease-out}
[data-motion="on"] .settleline.drawn path{stroke-dashoffset:0}
[data-motion="on"] .settleline circle{opacity:0;transition:opacity .8s ease 1.6s}
[data-motion="on"] .settleline.drawn circle{opacity:1}
@media (prefers-reduced-motion:reduce){
  .settleline path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .settleline circle{opacity:1 !important}
}
.beats{display:grid;gap:72px;margin:64px 0 72px}
.beat{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.beat:nth-child(even) .beat-copy{order:2}
.beat h3{font-family:var(--voice);font-weight:540;font-size:clamp(24px,2.6vw,32px);color:var(--dusk);margin:0 0 12px;line-height:1.2}
.beat p{color:var(--soft);margin:0;max-width:30em}
.beat p b{color:var(--ink);font-weight:600}
.shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--parch);
  box-shadow:0 18px 44px -18px rgba(43,36,28,.3)}
.shot img{width:136%;max-width:none}
.shot.crop-capture img{margin:-6% 0 -34% -16%}
.shot.crop-today img{margin:-32% 0 -4% -16%}
.shot.crop-fierce img{margin:-32% 0 -4% -16%}
.shot.crop-sweep img{width:118%;margin:-12% 0 -8% -9%}
/* inline sorting vignette (beat 2) */
.sortcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  box-shadow:0 18px 44px -18px rgba(43,36,28,.3);display:grid;gap:14px}
.sortrow{display:flex;align-items:center;gap:12px;font-size:15px}
.sortrow .item{color:var(--ink);background:#FBF6E9;border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.sortrow .arrow{color:var(--faint)}
.sortrow .dest{margin-left:auto;font-size:13px;font-weight:600;color:var(--dusk);
  background:rgba(51,66,92,.08);border-radius:99px;padding:4px 12px;white-space:nowrap}
.sortrow .dest.lamp{color:var(--amber-deep);background:rgba(201,129,42,.13)}

/* ---------- CTA band (repeat) ---------- */
.ctaband{max-width:560px;margin:0}

/* ---------- S5 fierce & forgiving ---------- */
#guard{background:linear-gradient(var(--g4),var(--g5) 16%)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:48px 0 0}
.pane{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:30px 30px 0;overflow:hidden}
.pane.fierce{border-top:5px solid var(--amber)}
.pane.forgiving{border-top:5px solid var(--dusk-2)}
.pane h3{font-family:var(--voice);font-weight:540;font-size:26px;margin:0 0 10px;color:var(--dusk)}
.pane p{color:var(--soft);margin:0 0 24px;min-height:5.2em}
.pane p b{color:var(--ink);font-weight:600}
.pane .shot{border-radius:12px 12px 0 0;border-bottom:0;box-shadow:none;margin:0 -1px}
.trust{font-family:var(--voice);font-weight:540;text-align:center;font-size:clamp(22px,2.6vw,30px);
  color:var(--dusk);margin:72px auto 0;max-width:22em}
.also{text-align:center;color:var(--soft);font-size:16px;margin:18px auto 0;max-width:34em}

/* ---------- founder note ---------- */
#founder{background:linear-gradient(var(--g5),var(--g6) 30%);padding:130px 0 96px}
#founder .card{max-width:680px;margin:0 auto;color:var(--paper)}
#founder .portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:32% 20%;
  border:3px solid rgba(231,198,140,.5);box-shadow:0 14px 36px -12px rgba(0,0,0,.5);margin:0 0 24px}
#founder .kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-soft);margin:0 0 18px}
#founder p{margin:0 0 16px;color:rgba(241,232,211,.87);font-size:clamp(17px,1.7vw,19px)}
#founder .sig{font-family:var(--voice);font-size:22px;color:var(--paper);margin-top:26px}
[data-founder="off"] #founder{display:none}
[data-founder="off"] #enough{background:linear-gradient(var(--g5),var(--lamp) 42%)}

/* ---------- S6 that was enough ---------- */
#enough{background:linear-gradient(var(--g6),var(--lamp) 34%);padding:150px 0 130px;position:relative;overflow:hidden}
#enough .pool{position:absolute;inset:auto 0 -40% 0;height:130%;pointer-events:none;
  background:radial-gradient(42% 52% at 50% 62%,rgba(201,129,42,.28),rgba(201,129,42,0) 70%)}
#enough .wrap{position:relative;text-align:center;max-width:760px}
#enough .setup{font-family:var(--voice);font-size:clamp(22px,2.6vw,30px);line-height:1.4;color:rgba(241,232,211,.85);margin:0 0 44px}
#enough .said{font-family:var(--voice);font-weight:560;font-size:clamp(42px,6vw,72px);color:var(--amber-soft);margin:0}
#enough .aud{font-size:16px;color:rgba(241,232,211,.6);margin:60px 0 0}

/* ---------- S7 final CTA + FAQ + footer ---------- */
#final{background:var(--lamp);padding-top:20px}
#final .wrap{max-width:760px}
#final .lead{font-size:clamp(30px,3.6vw,44px);margin-bottom:30px}
#final .waitform input{background:rgba(241,232,211,.07);border-color:rgba(241,232,211,.25);color:var(--paper)}
#final .waitform input::placeholder{color:rgba(241,232,211,.4)}
#final .waitform button{background:var(--amber);color:#2B1A05}
#final .waitform button:hover{background:var(--amber-soft)}
.faq{margin:88px 0 0;border-top:1px solid rgba(241,232,211,.15)}
.faq h2{font-family:var(--voice);font-weight:540;font-size:26px;color:var(--paper);margin:36px 0 8px}
.faq details{border-bottom:1px solid rgba(241,232,211,.15)}
.faq summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;font-weight:600;color:var(--paper);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:22px;color:var(--amber-soft);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
.faq .a{padding:0 0 22px;color:rgba(241,232,211,.75);max-width:38em}
footer{padding:70px 0 46px;color:rgba(241,232,211,.55);font-size:14px}
footer .wm{font-weight:700;font-size:18px;color:var(--paper);letter-spacing:.01em;margin:0 0 10px}
footer .wm .dot{color:var(--amber)}
footer p{margin:4px 0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  section{padding:72px 0}
  .hero-grid,.beat,.two{grid-template-columns:1fr;gap:32px}
  .beat:nth-child(even) .beat-copy{order:0}
  #hero{padding-bottom:80px}
  .morgue{grid-template-columns:1fr}
  .dead:nth-child(3){display:none}
  .pane p{min-height:0}
  .scrap{display:none}
  #pile .scrap:nth-of-type(1),#pile .scrap:nth-of-type(2){display:block}
}
@media (max-width:560px){
  .waitform{flex-direction:column}
  .waitform button{padding:15px 22px}
  nav img{height:46px}
}