/* ==========================================================================
   stuuph landing — stylesheet
   1. Tokens          6. Hero
   2. Reset & base    7. Phone / shorts feed
   3. Utilities       8. Sections & reveal
   4. Page chrome     9. Marquee wall
   5. Buttons        10. Device mocks
                     11. Get-the-app
                     12. Motion policy
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root{
  --ink:#0D0906;--ink2:#161009;--ink3:#221809;
  --cream:#F7EFE0;--dim:rgba(247,239,224,.62);--faint:rgba(247,239,224,.36);--hair:rgba(247,239,224,.13);
  --amber:#EBA941;--amberD:#D6810C;--ember:#FF4D3D;--mint:#4EC98D;
  --serif:"Fraunces",Georgia,serif;--sans:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  /* mock-screen palette (light UI inside the device frames) */
  --mink:#1A1310;--mrust:#C2541F;--mgreen:#1F8A5B;
  --mdim:rgba(26,19,16,.5);--mfaint:rgba(26,19,16,.45);--mhair:rgba(26,19,16,.07);
}

/* 2. Reset & base ========================================================== */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--cream)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

/* film grain */
body:before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;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")}

/* 3. Utilities ============================================================= */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.7px;text-transform:uppercase;color:var(--amber)}
.grow{flex:1}
.grow0{flex:1;min-width:0}

/* 4. Page chrome =========================================================== */
#glow{position:fixed;width:640px;height:640px;border-radius:50%;pointer-events:none;z-index:0;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(235,169,65,.13),transparent 62%);opacity:0;transition:opacity .6s}
#prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--amber),var(--ember));z-index:60;width:0}

nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 0;transition:background .3s,backdrop-filter .3s,padding .3s}
nav.stuck{background:rgba(13,9,6,.8);backdrop-filter:blur(16px);padding:11px 0;border-bottom:1px solid var(--hair)}
.navin{display:flex;align-items:center;gap:14px}
.navin>.mag{margin-left:auto}
.logo{display:flex;align-items:center;gap:9px;background:none;border:none;padding:0;cursor:pointer;color:var(--cream)}
.logo b{font-family:var(--serif);font-size:25px;font-weight:800;font-style:italic;letter-spacing:-.6px}
.logo svg{color:var(--amber)}

footer{padding:38px 0;border-top:1px solid var(--hair)}
.fin{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.fin .mono{margin-left:auto}
.flinks{display:flex;gap:22px;font-size:13px;color:var(--dim);flex-wrap:wrap}
.flinks a{color:inherit}

/* 5. Buttons =============================================================== */
.mag{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:26px;font-size:14.5px;font-weight:700;cursor:pointer;border:none;background:var(--cream);color:var(--ink);white-space:nowrap;will-change:transform;transition:box-shadow .3s}
.mag:hover{box-shadow:0 12px 34px rgba(247,239,224,.22)}
.mag.amb{background:linear-gradient(102deg,var(--amber),#F5C061);color:#2B1A05}
.mag.amb:hover{box-shadow:0 14px 40px rgba(235,169,65,.36)}
.mag.gh{background:transparent;color:var(--cream);border:1px solid var(--hair)}
.mag.gh:hover{border-color:var(--cream);box-shadow:none}
.mag.sm{height:40px;padding:0 17px;font-size:13.5px}

.store{display:flex;align-items:center;gap:11px;height:58px;padding:0 24px;border-radius:15px;background:var(--cream);color:var(--ink);cursor:pointer;border:none;will-change:transform;transition:box-shadow .3s;font-family:inherit;text-align:left}
.store:hover{box-shadow:0 16px 44px rgba(247,239,224,.24)}
.store small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;opacity:.6}
.store b{font-size:16px;font-weight:700;letter-spacing:-.3px}

/* 6. Hero ================================================================== */
#hero{padding:130px 0 40px}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:center}
h1{font-family:var(--serif);font-size:clamp(46px,7vw,94px);font-weight:800;line-height:.95;letter-spacing:-2.8px;margin-bottom:4px}
h1 .w{display:inline-block;position:relative;padding:0 .06em;margin:0 -.02em;border-radius:8px;transition:color .18s}
h1 .w.on{color:#2B1A05}
h1 .w:after{content:"";position:absolute;inset:.06em -.02em .1em;border-radius:8px;background:var(--amber);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.4,0,.2,1)}
h1 .w.on:after{transform:scaleX(1)}
h1 em{font-style:italic;color:var(--amber)}
#hwave{display:block;width:100%;height:54px;margin:10px 0 20px}
.hsub{font-size:18.5px;line-height:1.55;color:var(--dim);max-width:470px;margin-bottom:26px}
.hsub b{color:var(--cream);font-weight:600}
.hcta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hnote{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.6px;margin-top:15px}
@media(max-width:1000px){
  .hgrid{grid-template-columns:minmax(0,1fr);gap:36px}
  #phonewrap{justify-self:center}
}

/* 7. Phone / shorts feed =================================================== */
#phonewrap{perspective:1400px}
.phone{width:300px;height:614px;border-radius:42px;background:#000;padding:9px;box-shadow:0 50px 110px rgba(0,0,0,.7),0 0 0 1px rgba(247,239,224,.12);will-change:transform;transform-style:preserve-3d}
.pscr{width:100%;height:100%;border-radius:34px;overflow:hidden;position:relative;background:var(--ink2)}
.pnotch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:78px;height:22px;border-radius:12px;background:#000;z-index:9}
.sfeed{height:100%;position:relative;overflow:hidden}
.scard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 18px 26px;transition:transform .72s cubic-bezier(.7,0,.2,1),opacity .5s}
.scard:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 4%,rgba(0,0,0,.1) 46%,rgba(0,0,0,.4))}
.scap{position:relative;z-index:2;font-family:var(--serif);font-size:23px;font-weight:700;line-height:1.24;letter-spacing:-.4px;text-shadow:0 2px 14px rgba(0,0,0,.6);margin-bottom:16px}
.scap span{opacity:.3;transition:opacity .2s,color .2s}
.scap span.lit{opacity:1;color:#FFF3DC}
.smeta{position:relative;z-index:2;display:flex;align-items:center;gap:9px}
.savi{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.sname{font-size:12px;font-weight:700}
.shand{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.55)}
.sbar{position:relative;z-index:2;height:3px;border-radius:2px;background:rgba(255,255,255,.25);margin-top:16px;overflow:hidden}
.sbar i{display:block;height:100%;background:#fff;width:0}
.srail{position:absolute;right:14px;bottom:104px;z-index:3;display:flex;flex-direction:column;gap:17px;align-items:center;color:#fff}
.srail div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:700}

/* 8. Sections & reveal ===================================================== */
section{position:relative;padding:78px 0}
.sechead{max-width:700px;margin-bottom:32px}
.sechead h2{font-family:var(--serif);font-size:clamp(31px,4.4vw,54px);font-weight:800;letter-spacing:-1.6px;line-height:1.04;margin-bottom:11px}
.sechead h2 em{font-style:italic;color:var(--amber)}
.sechead p{font-size:16.5px;line-height:1.55;color:var(--dim);max-width:500px}
.sechead.mid{margin:0 auto 34px;text-align:center}
.sechead.mid p{margin:0 auto}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* 9. Marquee wall ========================================================== */
.marq{position:relative;overflow:hidden;padding:5px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mrow{display:flex;gap:16px;width:max-content;animation:marq 46s linear infinite}
.mrow.rev{animation-direction:reverse;animation-duration:56s;margin-top:16px}
.marq:hover .mrow{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.tile{flex:0 0 208px;aspect-ratio:9/15;border-radius:16px;position:relative;overflow:hidden;color:#fff;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;will-change:transform}
.tile:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 26px 60px rgba(0,0,0,.55);z-index:3}
.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 8%,transparent 56%)}
.tgen{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;padding:5px 9px;border-radius:11px;background:rgba(0,0,0,.42);backdrop-filter:blur(6px)}
.tq{position:absolute;left:14px;right:14px;top:34%;transform:translateY(-50%);z-index:2;font-family:var(--serif);font-size:15.5px;font-weight:700;line-height:1.3;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.tfoot{position:absolute;left:14px;right:14px;bottom:13px;z-index:2}
.tbook{font-size:12.5px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmeta{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.66)}
.gline{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.gpill{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);padding:7px 14px;border:1px solid var(--hair);border-radius:16px}

/* 10. Device mocks ========================================================= */
.trio{display:flex;justify-content:center;align-items:flex-end;gap:22px;flex-wrap:wrap}
.mock{width:230px;flex-shrink:0}
.mock .glass{width:100%;aspect-ratio:230/480;border-radius:32px;background:#000;padding:7px;box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 0 1px rgba(247,239,224,.11);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mock:hover .glass{transform:translateY(-12px)}
.mock.lift .glass{transform:translateY(-24px)}
.mock.lift:hover .glass{transform:translateY(-34px)}
.mscreen{width:100%;height:100%;border-radius:28px;overflow:hidden;position:relative;background:#FBF7F0;color:var(--mink);display:flex;flex-direction:column}
.mscreen.dark{background:linear-gradient(168deg,#8B3E52,#2E0D18);color:#fff}
.mcap{text-align:center;margin-top:18px}
.mcap b{display:block;font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:-.4px}
.mcap span{display:block;font-size:13px;color:var(--dim);margin-top:3px;line-height:1.4}

/* screen furniture */
.mbar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-family:var(--mono);font-size:8px;color:var(--mdim);flex-shrink:0}
.mbar.onDark{color:rgba(255,255,255,.6)}
.mhead{padding:6px 16px 10px;display:flex;align-items:center;gap:9px;flex-shrink:0}
.mhead.tight{padding-bottom:6px}
.mhead.tighter{padding-bottom:4px}
.mtitle{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:-.3px}
.mbody{flex:1;overflow:hidden;padding:0 16px}
.mfoot{padding:0 16px 12px}
.mfoot.row{display:flex;gap:6px}
.mback{opacity:.55}
.meyebrow{font-family:var(--mono);font-size:7.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--mfaint)}
.msub{font-size:9.5px;color:var(--mdim);margin-top:2px}
.msub.md{font-size:10px}
.msub.sm{font-size:9px}
.mbtn{height:34px;border-radius:10px;background:var(--mink);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.mnote{font-size:8px;color:var(--mfaint);text-align:center;margin-top:6px;line-height:1.4}
.cover{background:linear-gradient(160deg,var(--mrust),#5E2410)}

.mtab{display:flex;gap:16px;padding:0 16px 8px;font-size:10.5px;font-weight:700;color:rgba(26,19,16,.4);flex-shrink:0;border-bottom:1px solid rgba(26,19,16,.08)}
.mtab b{color:var(--mink);position:relative;font-weight:700}
.mtab b:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--mrust)}

.chrow{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--mhair)}
.chrow.last{border:none}
.chn{font-family:var(--mono);font-size:8.5px;color:rgba(26,19,16,.4);width:14px;flex-shrink:0}
.chttl{flex:1;font-size:10.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chlabel{flex:1;font-size:10.5px;font-weight:600}
.chval{font-family:var(--mono);font-size:10px}
.chtag{font-family:var(--mono);font-size:7.5px;letter-spacing:.5px;text-transform:uppercase;padding:3px 6px;border-radius:8px;flex-shrink:0}
.chtag.f{background:rgba(31,138,91,.14);color:var(--mgreen)}
.chtag.l{background:var(--mhair);color:var(--mfaint)}
.chtag.wide{flex:1;text-align:center}

.mnav{height:46px;border-top:1px solid rgba(26,19,16,.09);display:flex;align-items:center;justify-content:space-around;flex-shrink:0;color:rgba(26,19,16,.32)}
.mnav .on{color:var(--mrust)}
.mnav.onDark{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.45)}
.mnav.onDark .on{color:#fff}

/* shorts screen inside a mock */
.mfeed{flex:1;position:relative}
.mfeed .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 12%,transparent 58%)}
.mfeedcap{position:absolute;left:16px;right:56px;bottom:74px;z-index:3;font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.28;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.mfeedmeta{position:absolute;left:16px;bottom:52px;z-index:3;font-family:var(--mono);font-size:8.5px;color:rgba(255,255,255,.7)}
.mfrail{position:absolute;right:12px;bottom:80px;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center;color:#fff;font-size:7.5px;font-weight:700}
.mfrail div{display:flex;flex-direction:column;align-items:center;gap:2px}
.mfeedbar{position:absolute;left:16px;right:16px;bottom:38px;height:2.5px;border-radius:2px;background:rgba(255,255,255,.28);z-index:3}
.mfeedbar i{display:block;height:100%;border-radius:2px;background:#fff}

/* player screen */
.mplayer{padding:14px 18px 0;text-align:center;flex:1;display:flex;flex-direction:column}
.mart{width:132px;height:132px;border-radius:14px;margin:6px auto 16px;box-shadow:0 16px 34px rgba(0,0,0,.28)}
#pwave{width:100%;height:44px;display:block}
.ptime{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;color:rgba(26,19,16,.42);margin-top:2px}
.pctl{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:8px;color:var(--mink)}
.pctl .big{width:46px;height:46px;border-radius:23px;background:var(--mrust);color:#fff;display:flex;align-items:center;justify-content:center}
.pchips{display:flex;gap:7px;justify-content:center;margin-top:14px}

/* reader screen */
.rline{font-family:var(--serif);font-size:11px;line-height:1.65;color:rgba(26,19,16,.42);margin-bottom:9px}
.rline.tight{margin-bottom:7px}
.rline.lit{color:var(--mink)}
.rline.now{background:rgba(194,84,31,.11);border-radius:4px;box-shadow:0 0 0 4px rgba(194,84,31,.11)}
.rline.pick{background:rgba(235,169,65,.28);border-radius:5px;box-shadow:0 0 0 4px rgba(235,169,65,.28);margin-bottom:11px}
.caret{display:inline-block;width:1.5px;height:10px;background:var(--mrust);vertical-align:-1px;margin-left:1px}
.rmini{position:absolute;left:12px;right:12px;bottom:52px;height:40px;border-radius:13px;background:rgba(26,19,16,.94);display:flex;align-items:center;gap:9px;padding:0 11px;color:var(--cream)}
.rmini .cv{width:24px;height:24px;border-radius:5px;flex-shrink:0}
.rmini .tx{flex:1;min-width:0;font-size:9px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* narrator-voice picker */
.voice{display:flex;align-items:center;gap:9px;padding:10px;border-radius:11px;border:1.5px solid var(--mrust);background:rgba(194,84,31,.07);margin-bottom:8px}
.vplay{width:30px;height:30px;border-radius:15px;background:var(--mrust);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vname{font-size:11px;font-weight:700}
.vdesc{font-size:9px;color:var(--mdim)}
.vcheck{color:var(--mrust)}
.vtweaks{display:flex;gap:6px;margin-bottom:12px}
.vlabel{font-family:var(--mono);font-size:7.5px;letter-spacing:1px;text-transform:uppercase;color:rgba(26,19,16,.42);margin-bottom:7px}

/* clip picker */
.cliptime{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;color:var(--mdim);margin-bottom:5px}
.clipbar{height:4px;border-radius:3px;background:rgba(26,19,16,.1);overflow:hidden;margin-bottom:10px}
.clipbar i{display:block;height:100%;background:var(--mrust)}

/* earnings */
.money{font-family:var(--serif);font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1}
.money .cents{font-size:19px;opacity:.45}
.payout{font-size:9.5px;color:var(--mdim);margin:4px 0 14px}
.split{margin-top:10px;padding:9px 11px;border-radius:10px;background:rgba(31,138,91,.1);font-size:9px;color:var(--mgreen);line-height:1.45}

/* book-detail header art */
.bcover{width:44px;height:66px;border-radius:6px;flex-shrink:0}
.btags{display:flex;gap:5px;margin-top:6px}
.mdoc{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:-.3px;margin-bottom:9px}

/* 11. Get-the-app ========================================================== */
#get{padding:100px 0 86px;text-align:center;position:relative;overflow:hidden}
#ctawave{position:absolute;left:0;right:0;bottom:0;height:210px;width:100%;opacity:.5}
#get h2{font-family:var(--serif);font-size:clamp(38px,6vw,76px);font-weight:800;letter-spacing:-2.4px;line-height:.98;margin-bottom:14px}
#get h2 em{font-style:italic;color:var(--amber)}
#get .lede{font-size:18px;color:var(--dim);max-width:440px;margin:0 auto}
.stores{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.textme{max-width:440px;margin:26px auto 0}
.tmrow{display:flex;gap:9px}
.tmrow input{flex:1;min-width:0;height:50px;border-radius:14px;border:1px solid var(--hair);background:rgba(247,239,224,.05);color:var(--cream);padding:0 16px;font-family:var(--sans);font-size:15px;outline:none;transition:border-color .25s}
.tmrow input:focus{border-color:var(--amber)}
.tmrow input::placeholder{color:var(--faint)}
.tmrow button{height:50px;padding:0 20px;border-radius:14px;border:none;background:var(--cream);color:var(--ink);font-size:14.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.tmnote{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:10px;text-align:center;letter-spacing:.5px;min-height:15px}

/* 12. Motion policy ========================================================
   Resolved onto html[data-motion] before first paint by the inline script in
   index.html: the OS preference by default, forced with ?motion=on|off.
   The media query below is the no-JS fallback — it only matches while the
   attribute is unset. */
html[data-motion="off"] *{animation-duration:.01ms!important;transition-duration:.01ms!important}
html[data-motion="off"] .rv{opacity:1;transform:none}
html[data-motion="off"] .mrow{animation:none}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion]) *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html:not([data-motion]) .rv{opacity:1;transform:none}
  html:not([data-motion]) .mrow{animation:none}
}