:root{--bg:#22140D;--glow:#2F1D13;--brown:#3B200D;--y:#FCF389;--cream:#F4ECDC;--muted:#B9A890;--line:rgba(252,243,137,.16);
--serif:'Instrument Serif',Georgia,serif;--sans:'Archivo',system-ui,sans-serif;--ar:'Noto Kufi Arabic',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
html,body{background:var(--bg);color:var(--cream);font:400 16px/1.5 var(--sans)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.eb{font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--y)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--y);color:#291910;font:600 15px/1 var(--sans)}
.btn.gh{background:transparent;color:var(--cream);border:1px solid rgba(244,236,220,.35)}
/* header */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:68px;display:flex;align-items:center;gap:28px;padding:0 clamp(16px,3.5vw,48px);background:linear-gradient(rgba(34,20,13,.92),rgba(34,20,13,.75));backdrop-filter:blur(8px);border-bottom:1px solid rgba(252,243,137,.08)}
.hd .brand{display:flex;align-items:center;gap:10px;margin-right:auto}.hd .badge{width:38px;height:38px}.hd .wm{height:17px}
.hd nav{display:flex;gap:26px;font-size:15px;color:#d9ccb4}.hd nav b{color:var(--y);font-weight:500}
.hd .burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,236,220,.25);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.hd .burger i{width:16px;height:1.5px;background:var(--cream)}
/* story stage */
.st{position:relative;min-height:100svh;padding:96px clamp(16px,3.5vw,48px) 40px;display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(260px,1.15fr);gap:clamp(24px,4vw,64px);align-items:center;overflow:hidden}
.st .bd{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(60px) saturate(1.2);opacity:.28;transition:background-image .6s}
.st .bd:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent,var(--bg) 75%)}
.rail{position:relative;list-style:none;display:flex;flex-direction:column;gap:2px;justify-self:end;max-width:260px}
.rail button{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline;width:100%;text-align:left;padding:9px 10px;border-radius:10px;color:rgba(244,236,220,.45);transition:color .4s,background .4s}
.rail button:hover{color:var(--cream)}
.rail button .n{font:600 11px/1 var(--sans);letter-spacing:.1em}
.rail button b{display:block;font:400 21px/1.05 var(--serif)}
.rail button small{display:block;font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.rail button.on{color:var(--cream);background:rgba(252,243,137,.06)}.rail button.on .n,.rail button.on small{color:var(--y)}
.rail button.done{color:rgba(244,236,220,.7)}
.fr{position:relative;height:min(80vh,780px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(252,243,137,.1);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.fr video,.fr .pst{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.fr video.on,.fr .pst.on{opacity:1}
.fr .top{position:absolute;inset:0 0 auto;z-index:8;padding:12px 12px 40px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.bars{display:flex;gap:4px}.bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.bars i b{display:block;height:100%;width:0;background:var(--cream)}
.tools{display:flex;align-items:center;gap:8px;margin-top:12px}
.day{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--y);margin-right:auto;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ic{min-width:44px;height:36px;padding:0 12px;border-radius:999px;background:rgba(34,20,13,.45);backdrop-filter:blur(6px);font:600 12px/1 var(--sans);letter-spacing:.06em;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ic svg{width:14px;height:14px;fill:var(--cream)}
.arw{position:absolute;top:50%;z-index:9;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:rgba(34,20,13,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.arw svg{width:16px;height:16px;stroke:var(--cream);stroke-width:2.2;fill:none}
.arw.p{left:10px}.arw.n{right:10px}.arw[disabled]{opacity:0;pointer-events:none}
.fr.fin .arw.n{opacity:0;pointer-events:none}
.tap{position:absolute;top:0;bottom:0;z-index:3}.tap.l{left:0;width:32%}.tap.r{right:0;width:68%}
.cap{position:absolute;inset:auto 0 0;z-index:4;padding:90px 22px 30px;background:linear-gradient(transparent,rgba(26,15,10,.88) 55%);pointer-events:none;display:none}
.cap h2,.side h2{font:400 34px/1.02 var(--serif);margin:10px 0 8px}
.cap p,.side p{color:#e7dcc6;font-size:15.5px}
.ar{font-family:var(--ar);color:var(--y)}
.side{position:relative;max-width:440px}
.side h2{font-size:clamp(44px,4.4vw,68px);margin:16px 0 14px}
.side p{font-size:18px;max-width:380px}
.side .sw,.cap .sw{transition:opacity .35s ease,transform .35s ease}.sw.out{opacity:0;transform:translateY(8px)}
.side .hint{margin-top:34px;color:var(--muted);font-size:13px;display:flex;gap:16px;flex-wrap:wrap}
.side kbd{font:600 11px/1 var(--sans);border:1px solid rgba(244,236,220,.3);border-radius:5px;padding:3px 6px;margin-right:4px}
/* end card */
.clues{display:flex;gap:5px;margin-right:4px}
.clues i{height:26px;min-width:26px;padding:0 6px;white-space:nowrap;border-radius:999px;border:1px dashed rgba(252,243,137,.55);font:600 10.5px/24px var(--sans);font-style:normal;letter-spacing:.06em;color:var(--y);text-align:center;background:rgba(34,20,13,.4);transition:all .5s cubic-bezier(.2,.8,.2,1)}
.clues i.got{border-style:solid;background:var(--y);color:#291910}
.clues i.pop{transform:scale(1.25)}
.crd{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;padding:90px 58px 40px;background:radial-gradient(ellipse at 50% 40%,#2a170c,#0e0805 75%);background-size:cover;background-position:center;opacity:0;pointer-events:none;transition:opacity .5s}
.crd.on{opacity:1;pointer-events:auto}
.crd .u{width:58px;height:58px;margin-bottom:22px}
.crd h2{font:400 40px/1.02 var(--serif);margin:14px 0 12px}.crd h2 em{color:var(--y)}
.crd p{color:#e7dcc6;font-size:16px}
.crd .ch{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.crd .ch button{min-height:54px;border-radius:16px;border:1px solid rgba(252,243,137,.45);background:rgba(34,20,13,.5);text-align:left;padding:12px 16px;font:500 16px/1.25 var(--sans);display:flex;justify-content:space-between;align-items:center;gap:10px}
.crd .ch button:after{content:"→";color:var(--y)}
.crd .ch button:hover,.crd .ch button:focus-visible{background:rgba(252,243,137,.12)}
.crd .auto{margin-top:16px;color:var(--muted);font-size:13px}
.crd .found{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.crd .found span{padding:8px 14px;border-radius:999px;background:var(--y);color:#291910;font:600 13px/1 var(--sans);opacity:0;transform:translateY(10px);transition:all .5s}
.crd.on .found span{opacity:1;transform:none}
.crd .found span:nth-child(2){transition-delay:.35s}.crd .found span:nth-child(3){transition-delay:.7s}
.crd.soon{background-color:#0e0805}.crd.soon:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(26,15,10,.3),rgba(26,15,10,.85))}
.crd>*{position:relative}
.crd .tag{display:inline-block;padding:7px 12px;border:1px solid var(--y);border-radius:999px;font:600 11px/1 var(--sans);letter-spacing:.2em;color:var(--y);text-transform:uppercase;align-self:flex-start}
.crd .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.more .again.top{display:block;margin:0 auto 34px;max-width:1100px;width:100%;text-align:left;color:var(--y);font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;min-height:44px;text-decoration:none}
.end{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 22px 30px;background:linear-gradient(rgba(26,15,10,.15),rgba(26,15,10,.92) 62%);opacity:0;pointer-events:none;transition:opacity .6s}
.end.on{opacity:1;pointer-events:auto}
.fr.fin .cap,.fr.oncard .cap{opacity:0;transition:opacity .3s}
.end .u{width:54px;height:54px;margin-bottom:18px}
.end h2{font:400 44px/.98 var(--serif)}.end h2 em{color:var(--y)}
.end .ar{font-size:20px;margin:8px 0 6px;display:block}
.end p{color:#e7dcc6;font-size:15px}
.end .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.end .again{margin-top:14px;align-self:flex-start;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;min-height:44px}
/* below */
.more{padding:clamp(56px,9vw,120px) clamp(16px,3.5vw,48px);border-top:1px solid rgba(252,243,137,.08)}
.more .in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,90px)}
.more h1{font:400 clamp(40px,4.6vw,64px)/.98 var(--serif);margin-top:16px}.more h1 em{color:var(--y)}
.more .lede{color:#dccfb8;margin-top:18px;font-size:17px;max-width:420px}
.tl{list-style:none;border-left:1px solid var(--line)}
.tl li{position:relative;padding:0 0 26px 26px}.tl li:before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--y)}
.tl b{display:block;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--y);margin-bottom:8px}
.tl span{font:400 25px/1.15 var(--serif)}
.more .in.one{grid-template-columns:1fr}
.more .big{font:400 clamp(28px,3vw,40px)/1.15 var(--serif);color:#e9dfcb;align-self:end}
.three{max-width:1100px;margin:clamp(36px,5vw,64px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.three figure{margin:0}.three img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block}
.three figcaption{margin-top:16px}.three b{display:block;font:400 36px/1 var(--serif);color:var(--y)}.three span{display:block;color:#dccfb8;margin-top:8px}
.come{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.come img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.come:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(34,20,13,.92) 80%)}
.come .cw{position:relative;z-index:1;padding:clamp(28px,5vw,72px) clamp(16px,3.5vw,48px);max-width:720px}
.come h3{font:400 clamp(52px,7vw,104px)/.95 var(--serif);margin-top:14px}.come h3 em{color:var(--y)}
.come .ar{display:block;font-size:clamp(22px,2.4vw,32px);margin:10px 0 14px}.come p{color:#e7dcc6;font-size:17px;max-width:520px}
.tl2{list-style:none;max-width:1100px;margin:clamp(30px,4vw,56px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 18px}
.tl2 li{display:flex;flex-direction:column;gap:14px}
.tl2 img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.tl2 b{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--y)}
.tl2 h4{font:400 26px/1.1 var(--serif);margin:8px 0 6px}.tl2 p{color:#cbbda4;font-size:15px}
.ppl .pw{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.ppl img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;display:block}
.ig .grid{max-width:1100px;margin:clamp(28px,4vw,48px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ig .grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
.igb{text-align:center;margin-top:26px}
.fin2{padding:clamp(70px,10vw,140px) clamp(16px,3.5vw,48px);text-align:center;background:radial-gradient(ellipse at 50% 100%,var(--glow),var(--bg) 70%)}
.fin2 h3{font:400 clamp(44px,6vw,88px)/.98 var(--serif);margin:16px 0 14px}.fin2 h3 em{color:var(--y)}.fin2 p{color:#dccfb8}
.fin2 .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.tl,.more .in{}
.ft{padding:40px clamp(16px,3.5vw,48px);border-top:1px solid rgba(252,243,137,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.ft .badge{width:44px;height:44px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ===== phone first: the story is the whole screen ===== */
@media (max-width:760px){
 .hd{height:60px;background:linear-gradient(rgba(26,15,10,.7),transparent);border:0;backdrop-filter:none}
 .hd nav{display:none}.hd .burger{display:flex}.hd .badge{width:34px;height:34px}.hd .wm{height:15px}
 .st{display:block;padding:0;min-height:0}
 .st .bd,.rail,.side{display:none}
 .fr{height:100svh;width:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
 .fr .top{padding:64px 12px 40px}
 .cap{display:block}.cap.card-on{display:none}
 .end{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
 .more .in{grid-template-columns:1fr}
 .three,.tl2,.ppl .pw{grid-template-columns:1fr}.three{gap:34px}
 .tl2 li{display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:start}.tl2 img{aspect-ratio:1}.tl2 h4{font-size:22px}
 .ig .grid{grid-template-columns:repeat(2,1fr)}.come{min-height:92svh}
 .arw{width:38px;height:38px;margin-top:-19px}
}
@media (prefers-reduced-motion:reduce){.fr video,.fr .pst,.sw{transition:none}}
.hd.open nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:14px;padding:20px clamp(16px,3.5vw,48px) 26px;background:rgba(34,20,13,.97);border-bottom:1px solid rgba(252,243,137,.1)}

/* laptop: a bigger, wider reel. The clips are vertical, so the frame goes 4:5
   (still sharp) instead of 9:16, and the blurred backdrop fills more of the page. */
@media (min-width:1000px){
 .st{grid-template-columns:minmax(180px,.8fr) auto minmax(240px,1fr);padding-top:84px;padding-bottom:24px}
 .fr{height:min(calc(100svh - 108px),900px);aspect-ratio:4/5;border-radius:26px}
 .st .bd{opacity:.5;filter:blur(40px) saturate(1.25)}
 .cap h2{font-size:42px}.cap p{font-size:17px}
}
/* half a laptop screen: hide the chapter list so the reel and words get the room */
@media (min-width:761px) and (max-width:999px){
 .st{grid-template-columns:auto minmax(220px,1fr)}
 .rail{display:none}
 .fr{height:min(calc(100svh - 120px),820px);aspect-ratio:3/4}
}
/* hold to fast-forward: a small 2x badge while the clip runs at double speed */
.fr.fast:after{content:"2×  ▸▸";position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:9;font:700 13px/1 var(--sans);letter-spacing:.12em;color:var(--bg);background:var(--y);padding:8px 12px;border-radius:999px}

/* Story now shares the site's top bar and footer */
img.u{-webkit-mask:none;mask:none}
body{overflow-x:hidden}
.st{padding-top:96px}
@media (max-width:760px){.st{padding-top:0}}
/* keep the shared top bar behaving the same as on the other pages */
@media (max-width:960px){.site-h .h-cta,.site-h .nav,.site-h>.open-pill{display:none!important}.site-h .burger{display:flex!important}}
.site-h .btn{padding:13px 20px;font:650 14px/1 var(--sans)}