:root{
  color-scheme: dark;
  --char:#0E0A06; --smoke:#17110A; --smoke-2:#201810; --ash:#34291C;
  --line:rgba(244,236,221,.11); --line-2:rgba(244,236,221,.2);
  --cream:#F4ECDD; --cream-2:#CFC2AB; --mute:#978B77;
  --gold:#E3A63C; --gold-soft:#EECF8A; --gold-deep:#A87B2F; --ink:#1A1206; --rec:#E5483A;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --eo:cubic-bezier(.16,1,.3,1); --eio:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(16px,4.2vw,56px); --maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--char);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--char);color:var(--cream);font-family:var(--display);font-variation-settings:"opsz" 14;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;margin:0}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
[id]{scroll-margin-top:84px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.gold{color:var(--gold)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:4px;font-family:var(--mono);font-size:12px;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* grain + cursor */
.grain{position:fixed;inset:-120px;z-index:90;pointer-events:none;opacity:.07;background-image:var(--noise);animation:grain .7s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-70px,40px)}33%{transform:translate(50px,-80px)}50%{transform:translate(-30px,90px)}67%{transform:translate(80px,20px)}83%{transform:translate(-90px,-50px)}}
.cur{position:fixed;left:0;top:0;z-index:120;pointer-events:none;opacity:0;transition:opacity .3s}
.cur.on{opacity:1}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold);transition:opacity .2s}
.cur-ring.big~.cur-dot{opacity:0}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(238,207,138,.55);display:grid;place-items:center;transition:width .45s var(--eo),height .45s var(--eo),margin .45s var(--eo),background .35s,border-color .35s}
.cur-ring span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s}
.cur-ring.big{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--gold);border-color:transparent}
.cur-ring.big span{opacity:1}
.cur-ring.lk{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--gold)}
.cur-ring.hide{width:0;height:0;margin:0;border-color:transparent}
html.has-cur,html.has-cur a,html.has-cur button{cursor:none}
html.has-cur input,html.has-cur select{cursor:auto}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform .6s var(--eo),background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(14,10,6,.74);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.nav.hide{transform:translateY(-110%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.025em;text-decoration:none;font-variation-settings:"opsz" 48}
.brand b{color:var(--gold);font-weight:700}
.brand svg{width:30px;height:17px;color:var(--gold);transition:transform .6s var(--eo)}
.brand:hover svg{transform:translateY(-3px) rotate(-8deg)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);text-decoration:none;position:relative;padding-block:6px;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--eo)}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:4px;height:40px;padding-inline:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.menu{position:fixed;inset:0;z-index:49;background:var(--smoke);clip-path:circle(0 at calc(100% - 48px) 36px);transition:clip-path .8s var(--eio),visibility 0s linear .8s;visibility:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:110px var(--gutter) 140px}
.menu.open{clip-path:circle(150% at calc(100% - 48px) 36px);visibility:visible;transition:clip-path .8s var(--eio),visibility 0s}
.menu a{font-size:clamp(40px,11vw,64px);font-weight:700;font-variation-settings:"opsz" 96,"wdth" 84;letter-spacing:-.028em;line-height:1.05;text-decoration:none;display:flex;align-items:baseline;gap:14px;transform:translateY(40px);opacity:0;transition:transform .7s var(--eo),opacity .5s}
.menu a span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold)}
.menu.open a{transform:none;opacity:1}
.menu.open a:nth-child(1){transition-delay:.18s}.menu.open a:nth-child(2){transition-delay:.24s}.menu.open a:nth-child(3){transition-delay:.3s}.menu.open a:nth-child(4){transition-delay:.36s}.menu.open a:nth-child(5){transition-delay:.42s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding-inline:26px;border-radius:4px;background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;border:0;cursor:pointer;will-change:transform;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;background:var(--cream);transform:translateY(101%);transition:transform .6s var(--eo);z-index:-1}
.btn:hover::before{transform:none}
.btn .arr{transition:transform .5s var(--eo)}
.btn:hover .arr{transform:translateX(5px)}
.btn.sm{height:40px;padding-inline:16px;font-size:11px}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost::before{background:var(--gold)}
.btn.ghost:hover{color:var(--ink)}
.roll{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em}
.roll > span{display:block;text-shadow:0 1.3em 0 currentColor;transition:transform .55s var(--eo)}
.btn:hover .roll > span,.lnk:hover .roll > span{transform:translateY(-1.3em)}
.lnk{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-decoration:none;font-weight:500}
.lnk .arr{transition:transform .5s var(--eo)}
.lnk:hover .arr{transform:translateX(6px)}

/* slates + headings */
.slate{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.slate .sc{color:var(--cream);opacity:.5}
.clap{width:20px;height:18px;flex:none;overflow:visible}
.clap .stk{transform-box:fill-box;transform-origin:0% 100%;transform:rotate(-24deg);transition:transform .35s cubic-bezier(.6,0,.9,.4)}
.clapped .clap .stk{transform:rotate(0)}
.h2{font-size:clamp(42px,6.6vw,100px);line-height:.94;font-weight:700;letter-spacing:-.028em;font-variation-settings:"opsz" 96,"wdth" 86;margin-top:22px}
.h2 .serif{font-size:1.06em;color:var(--gold)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--cream-2);max-width:56ch}
.sec{position:relative;padding-block:clamp(88px,11vw,170px)}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;padding-right:.04em}
.wi{display:inline-block}

/* hero */
.hero{position:relative;padding-block:calc(72px + clamp(36px,7vh,90px)) clamp(64px,8vw,120px);overflow:clip}
.hero::before{content:"";position:absolute;width:min(78vw,980px);aspect-ratio:1;right:-12vw;top:-8%;background:radial-gradient(closest-side,rgba(227,166,60,.2),rgba(227,166,60,.05) 55%,transparent 72%);pointer-events:none;animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(.92);opacity:.75}to{transform:scale(1.06);opacity:1}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,5vw,88px);align-items:center;position:relative}
.hero .slate{animation:fadeUp .9s var(--eo) .05s both}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 12px var(--rec);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.hero-h1{font-size:clamp(44px,7.2vw,112px);line-height:.9;font-weight:700;letter-spacing:-.028em;font-variation-settings:"opsz" 96,"wdth" 88;margin:26px 0 30px}
.hero-h1 .line{display:block;overflow:hidden;padding:.02em .1em .12em 0;margin:-.02em -.1em -.12em 0;will-change:transform}
.hero-h1 .line > span{display:inline-block;animation:lineUp 1.15s var(--eo) both}
.hero-h1 .line:nth-child(2) > span{animation-delay:.1s}
.hero-h1 .line:nth-child(3) > span{animation-delay:.2s}
.hero-h1 .serif{font-size:1.08em;color:var(--gold);letter-spacing:-.025em;background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,var(--gold-soft) 50%,var(--gold) 62%,var(--gold) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s ease-in-out 2.4s infinite}
@keyframes shimmer{0%{background-position:100% 0}55%,100%{background-position:-60% 0}}
@keyframes lineUp{from{transform:translateY(112%) rotate(4deg)}to{transform:none}}
.redact{position:relative;display:inline-block}
.redact::after{content:"";position:absolute;left:-.04em;right:-.06em;top:.1em;bottom:.02em;background:var(--gold);transform-origin:right center;animation:unredact .9s var(--eio) 1.45s both}
@keyframes unredact{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.hero .lede{animation:fadeUp 1s var(--eo) .45s both}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:36px;animation:fadeUp 1s var(--eo) .6s both}
.hero .micro{margin-top:22px;color:var(--mute);animation:fadeUp 1s var(--eo) .75s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.vf-wrap{position:relative;justify-self:center;width:min(100%,410px);perspective:1400px;will-change:transform}
.vf-float{position:relative;animation:vfIn 1.4s var(--eo) .1s both}
@keyframes vfIn{from{opacity:0;transform:translateY(60px) rotate(4deg) scale(.94)}to{opacity:1;transform:none}}
.vf{position:relative;aspect-ratio:9/16;width:100%;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 70px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(244,236,221,.09),0 0 90px -10px rgba(227,166,60,.28);transform-style:preserve-3d;will-change:transform;isolation:isolate}
.vf-media{position:absolute;inset:0;animation:kb 16s ease-in-out 2.4s infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
.vf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:rack 1.9s var(--eo) .5s both}
@keyframes rack{0%{filter:blur(16px) brightness(.55);transform:scale(1.14)}55%{filter:blur(1.5px) brightness(.95)}68%{filter:blur(4px) brightness(.97)}100%{filter:blur(0) brightness(1);transform:scale(1)}}
.steam{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.75;pointer-events:none}
.vf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%,transparent 70%,rgba(0,0,0,.7));pointer-events:none}
.iris{position:absolute;inset:0;width:100%;height:100%;z-index:4;animation:irisOut .01s linear 1.5s both}
@keyframes irisOut{to{opacity:0;visibility:hidden}}
.iris .bl{transform-box:view-box;transform-origin:45px 80px;transform:rotate(var(--a)) translateY(0);animation:irisOpen 1.25s var(--eio) .15s both}
@keyframes irisOpen{from{transform:rotate(var(--a)) translateY(0)}to{transform:rotate(calc(var(--a) + 38deg)) translateY(104px)}}
.hud{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,236,221,.92)}
.hud-top,.hud-bot{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;gap:8px;animation:fadeIn .6s ease 1.5s both}
.hud-top{top:14px}.hud-bot{bottom:14px;align-items:flex-end}
.hud-bot b{display:block;font-family:var(--display);font-size:15px;letter-spacing:-.01em;text-transform:none;font-weight:600;margin-top:4px;color:var(--cream)}
.hud .rec{display:inline-flex;align-items:center;gap:6px}
.hud .rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1s steps(1) infinite 2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.thirds{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(244,236,221,.1) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(244,236,221,.1) 66.66%,transparent calc(66.66% + .5px)),linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(244,236,221,.1) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(244,236,221,.1) 66.66%,transparent calc(66.66% + .5px));animation:fadeIn .6s ease 1.5s both}
.af{position:absolute;left:10%;right:30%;top:50%;bottom:22%;color:#fff;animation:afLock 1.5s var(--eo) .7s both}
.af i{position:absolute;width:16px;height:16px;border:1.5px solid currentColor}
.af i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.af i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}.af i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.af i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.af em{position:absolute;left:0;top:-18px;font-style:normal;color:var(--gold);animation:fadeIn .3s ease 2s both}
@keyframes afLock{0%{transform:scale(1.8);opacity:0;color:#fff}45%{transform:scale(.92);opacity:1;color:#fff}65%{transform:scale(1.04)}100%{transform:scale(1);opacity:1;color:var(--gold)}}
.meters{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;gap:3px;height:70px;animation:fadeIn .6s ease 1.6s both}
.meters i{width:3px;height:100%;background:rgba(244,236,221,.14);position:relative;overflow:hidden;border-radius:2px}
.meters i::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#6fbf73 0 60%,var(--gold) 60% 85%,var(--rec) 85%);transform-origin:bottom;animation:meter .5s ease-in-out infinite alternate}
.meters i:nth-child(2)::after{animation-duration:.37s;animation-delay:-.2s}
@keyframes meter{from{transform:scaleY(.25)}to{transform:scaleY(.8)}}
.vf-back{position:absolute;width:44%;aspect-ratio:9/16;left:-19%;bottom:-7%;border-radius:14px;overflow:hidden;z-index:-1;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(244,236,221,.08);animation:backIn 1.4s var(--eo) .35s both}
.vf-back img{width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.9)}
@keyframes backIn{from{opacity:0;transform:translate(30%,10%) rotate(0)}to{opacity:1;transform:rotate(-9deg)}}
.chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:4px;background:rgba(23,17,10,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;will-change:transform}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.chip.c1{right:-12%;top:14%;animation:chipIn .9s var(--eo) 1.9s both}
.chip.c2{left:-14%;top:48%;animation:chipIn .9s var(--eo) 2.05s both}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}

/* marquee */
.marquee{position:relative;border-block:1px solid var(--line);background:var(--smoke);padding-block:24px;overflow:hidden;display:grid;gap:10px}
.mq-row{display:flex;width:max-content;will-change:transform}
.mq-item{display:inline-flex;align-items:center;gap:.4em;padding-right:.4em;white-space:nowrap;font-size:clamp(34px,5.4vw,78px);line-height:1;font-weight:750;font-variation-settings:"opsz" 96,"wdth" 76;text-transform:uppercase;letter-spacing:-.02em}
.mq-item svg{width:.56em;height:.32em;color:var(--gold);flex:none}
.mq-row.b .mq-item{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:clamp(30px,4.4vw,64px);color:transparent;-webkit-text-stroke:1px var(--gold)}
.mq-row.b .mq-item i{font-style:normal;color:var(--gold-deep);-webkit-text-stroke:0;font-family:var(--mono);font-size:.3em;letter-spacing:.2em}

/* stopper */
.work-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px 64px;align-items:end}
.stopper{position:relative;height:290vh;margin-top:clamp(20px,4vw,60px)}
.stop-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);overflow:hidden}
.caps{position:relative;min-height:14em}
.cap{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .8s var(--eo)}
.cap.on{opacity:1;transform:none}
.cap .mono{color:var(--gold)}
.cap h3{font-size:clamp(30px,3.5vw,52px);line-height:1;font-weight:700;letter-spacing:-.024em;font-variation-settings:"opsz" 96,"wdth" 90;margin:16px 0 16px}
.cap h3 .serif{color:var(--gold);font-size:1.06em}
.cap p{color:var(--cream-2);max-width:34ch}
.phone{position:relative;height:min(76svh,660px);aspect-ratio:9/19.5;border-radius:46px;background:#050403;padding:9px;box-shadow:0 0 0 1.5px #3b2f21,0 0 0 7px #0b0805,0 0 0 8.5px #2a2016,0 80px 120px -40px rgba(0,0,0,.95),0 0 140px -30px rgba(227,166,60,.22)}
.screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:#0d0c0b;isolation:isolate}
.island{position:absolute;top:9px;left:50%;width:30%;height:24px;transform:translateX(-50%);background:#000;border-radius:20px;z-index:6}
.sbar{position:absolute;inset:0 0 auto 0;height:62px;z-index:5;background:linear-gradient(#0d0c0b 58%,transparent);display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,236,221,.8)}
.feed{position:absolute;left:0;right:0;top:62px;will-change:transform,filter}
.post{padding-bottom:16px}
.post-h{display:flex;align-items:center;gap:8px;padding:0 12px 8px;font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.post-h i{width:24px;height:24px;border-radius:50%;background:#3a3834;flex:none}
.post-h small{font-weight:400;color:#8b877f;font-size:10.5px}
.post-m{position:relative;aspect-ratio:4/5;overflow:hidden;background:#55534d}
.post-m.g{background:radial-gradient(60% 40% at 50% 62%,#8b8a7e,#6c6b63 60%,transparent 61%),radial-gradient(38% 20% at 42% 58%,#9a9383,transparent 70%),linear-gradient(170deg,#6e6d66,#4c4b46);filter:saturate(.5)}
.post-m.g2{background:radial-gradient(50% 34% at 50% 60%,#8d8475,#6a655b 70%,transparent 72%),linear-gradient(10deg,#5d625c,#7a7c74)}
.post-m.g3{background:linear-gradient(160deg,#4d4c47,#6a6861)}
.post-m .tag{position:absolute;left:50%;top:18%;transform:translateX(-50%);white-space:nowrap;font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:17px;color:#f2f0e8;letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.post-a{display:flex;gap:12px;padding:9px 12px 4px;color:#9b978f}
.post-a svg{width:18px;height:18px}
.post-c{padding:0 12px;font-size:11px;color:#a8a49b;line-height:1.4}
.post.hero-post .post-h i{background:conic-gradient(from 200deg,var(--gold),var(--gold-deep),var(--gold-soft),var(--gold));padding:2px}
.post.hero-post .post-m{box-shadow:inset 0 0 0 1px rgba(227,166,60,.4)}
.post.hero-post .post-m img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.post.hero-post .post-c{color:var(--cream)}
.post.hero-post .post-a{color:var(--cream)}
.heart{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;color:#fff;opacity:0;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.burst .heart{animation:heartPop 1.1s var(--eo) both}
@keyframes heartPop{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.18)}40%{transform:scale(.95)}55%{transform:scale(1.02)}80%{opacity:1}100%{opacity:0;transform:scale(1) translateY(-14px)}}
.spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--gold);opacity:0}
.burst .spark{animation:spark .9s var(--eo) .08s both}
@keyframes spark{0%{opacity:1;transform:rotate(var(--r)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--r)) translateY(-78px) scale(.3)}}
.burst .post-a .lk{color:var(--rec);animation:likePop .5s var(--eo) .1s both}
@keyframes likePop{from{transform:scale(.4)}to{transform:none}}
.speed{justify-self:start;display:grid;gap:14px;justify-items:start}
.gauge{position:relative;width:10px;height:clamp(160px,30vh,260px);border-radius:6px;background:var(--smoke-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.gauge i{position:absolute;inset:0;background:linear-gradient(0deg,var(--gold) 0%,#e08a3a 55%,var(--rec) 100%);transform-origin:bottom;transform:scaleY(var(--v,1))}
.gauge-ticks{position:absolute;left:18px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.1em}
.gauge-wrap{position:relative;padding-right:70px}
.speed-v{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--rec);transition:color .3s}
.speed-v.stop{color:var(--gold)}

/* film strip */
.strip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.strip-head h3{font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variation-settings:"opsz" 96,"wdth" 88}
.strip-head p{color:var(--cream-2);max-width:52ch;margin-top:12px}
.strip-ctrl{display:flex;gap:10px}
.sq{width:48px;height:48px;border-radius:4px;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.sq:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.strip-wrap{position:relative;background:#090604;border-block:1px solid var(--line)}
.strip-wrap::before,.strip-wrap::after{content:"";position:absolute;left:0;right:0;height:14px;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Crect x='8' y='3' width='14' height='8' rx='2' fill='%23F4ECDD' fill-opacity='.17'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position-x:var(--sp,0px)}
.strip-wrap::before{top:6px}.strip-wrap::after{bottom:6px}
.strip{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:34px var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip.drag{scroll-snap-type:none;cursor:grabbing}
.frame{position:relative;flex:0 0 auto;width:clamp(232px,23vw,318px);aspect-ratio:9/16;scroll-snap-align:center;perspective:1400px;transform:skewX(var(--sk,0deg));transition:transform .4s var(--eo)}
.flipper{position:absolute;inset:0;z-index:3;background:none;border:0;padding:0;cursor:pointer;border-radius:10px}
.frame-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s var(--eo)}
.frame.flipped .frame-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(244,236,221,.1)}
.front img{position:absolute;top:0;left:-12%;width:124%;height:100%;object-fit:cover;transform:translateX(var(--px,0px)) scale(1.02);transition:scale 1.2s var(--eo),filter .6s}
.frame:hover .front img{scale:1.08}
.front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 20%,transparent 58%,rgba(0,0,0,.85))}
.f-top,.f-bot{position:absolute;left:14px;right:14px;z-index:2;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,236,221,.85)}
.f-top{top:14px}.f-bot{bottom:16px;flex-direction:column;gap:6px}
.f-bot b{font-family:var(--display);font-size:21px;font-weight:650;letter-spacing:-.02em;text-transform:none;color:var(--cream);line-height:1.1}
.f-bot .cz{color:var(--gold)}
.back{transform:rotateY(180deg);background:var(--smoke-2);padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 1px rgba(227,166,60,.35)}
.back .mono{color:var(--gold);font-size:10.5px}
.back h4{margin:0;font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.back dl{margin:0;display:grid;gap:12px}
.back dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.back dd{margin:2px 0 0;font-size:14.5px;line-height:1.4;color:var(--cream)}
.back .flip-hint{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.strip-note{margin-top:18px;color:var(--mute);font-size:14.5px}