/* VNMSFX Originals hub. Same family as Saints (charcoal, paper, wordmark) but a
   warmer neutral ground; headlines in Editorial New, set regular with one italic
   word. Genre accents (satire acid / horror red) are kept to tags and chips. */
@font-face{font-family:Editorial;src:url(fonts/PPEditorialNew-Ultralight.otf) format('opentype');font-weight:200;font-display:swap}
@font-face{font-family:Editorial;src:url(fonts/PPEditorialNew-UltralightItalic.otf) format('opentype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:Editorial;src:url(fonts/PPEditorialNew-Regular.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Editorial;src:url(fonts/PPEditorialNew-Italic.otf) format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Montreal;src:url(fonts/neuemontreal-regular.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Montreal;src:url(fonts/neuemontreal-medium.otf) format('opentype');font-weight:500;font-display:swap}

:root{--bg:#121110;--bg-2:#1a1917;--paper:#ece8df;--muted:#a9a59c;--line:#ffffff1c;--satire:#ccff70;--horror:#d9412f;--ink:#151413;
  --serif:Editorial,Georgia,serif;--body:Montreal,Arial,sans-serif;--mono:'Space Mono',ui-monospace,monospace;--gut:clamp(16px,4vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--paper);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
body:after{content:'';position:fixed;inset:-50%;z-index:15;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
img{display:block;max-width:100%}
em{font-style:italic}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{position:fixed;top:0;left:0;z-index:60;background:var(--paper);color:#000;padding:10px}
.eyebrow{font:10px/1.6 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--paper);margin:0}
.dim,.muted{color:var(--muted)}
.muted{font-size:14px;max-width:46ch}
.mono{font:10px var(--mono);letter-spacing:1px;opacity:.75}
h1,h2,.big,.signup-head,.tier-line,.endcard-head,.flagship-line,.ep-title,.drop-ep{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}

/* Footage and stills sit above the page grain, so the grain never touches the picture. */
.drop-media,.quest-art,.flagship-art,.cast-track{z-index:16}

/* Header */
.bar{position:sticky;top:0;z-index:20;height:76px;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#121110e8;backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s}
.mark img{height:62px;width:auto}
.bar nav{display:flex;gap:30px;font-size:13px}
.bar nav a:hover{color:#fff}
.pill-cta{font-size:12px;font-weight:500;padding:10px 16px;border-radius:999px;background:var(--paper);color:var(--ink);transition:background .3s}
.pill-cta:hover{background:#fff}

/* Buttons + fields */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 22px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap;border:0;transition:transform .3s,background .3s}
.paper{background:var(--paper);color:var(--ink)}
.ink{background:var(--ink);color:var(--paper)}
.button:hover{transform:translateY(-2px);background:#fff;color:var(--ink)}
.field-row{display:flex;gap:8px}
.field-row input{flex:1;min-width:0;padding:15px 18px;border-radius:999px;border:1px solid #ffffff30;background:#ffffff0d;color:var(--paper);font:16px var(--body)}
.field-row input::placeholder{color:#a9a59c99}
.status{min-height:1.4em;margin:10px 0 0;font-size:13px}
.status.ok{color:var(--paper)}
.status.ok:before{content:'✓ ';color:var(--satire)}
.status.err{color:#ff8a7a}
.fine{font:10px/1.6 var(--mono);letter-spacing:.8px;color:var(--muted);margin:4px 0 0}
.fine a{border-bottom:1px solid currentColor}
.hp{position:absolute;left:-9999px}
.tag{display:inline-block;padding:4px 8px;border-radius:3px;font:9px var(--mono);letter-spacing:1.3px;vertical-align:1px}
.tag.satire{background:var(--satire);color:var(--ink)}
.tag.horror{background:var(--horror);color:#fff}

/* Latest drop */
.drop{position:relative}
.drop-media{position:relative;aspect-ratio:2.39;max-height:54vh;width:100%;overflow:hidden;background:#000}
.drop-loop{width:100%;height:100%;object-fit:cover;display:block}
.drop-shade{position:absolute;inset:0;background:linear-gradient(180deg,#12111000 74%,#121110 100%)}
.drop-play{position:absolute;left:var(--gut);bottom:clamp(16px,3vw,36px);display:inline-flex;align-items:center;gap:14px;padding:11px 18px;border-radius:999px;border:1px solid #ffffff55;background:#12111099;backdrop-filter:blur(10px);color:var(--paper);font-size:14px;transition:background .3s,color .3s}
.drop-play:hover{background:var(--paper);color:var(--ink)}
.drop-copy{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,7vw,140px);align-items:end;padding:clamp(28px,3vw,48px) var(--gut) clamp(64px,8vw,128px)}
.drop-title .eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h1{margin:10px 0 0;font-size:clamp(44px,5.2vw,92px);line-height:.95}
.drop-ep{margin:10px 0 6px;font-size:clamp(20px,1.9vw,28px)}
.logline{font-size:15px;max-width:44ch;color:var(--muted);margin:16px 0 0}
.logline strong{font-weight:500;color:var(--paper)}
.signup.inline{padding:0 0 4px}
.signup-head{margin:0 0 20px;font-size:clamp(22px,2vw,30px);line-height:1.15}

/* Manifesto */
.manifesto{padding:clamp(96px,14vw,220px) var(--gut);text-align:center}
.big{margin:0;font-size:clamp(40px,6.4vw,104px);line-height:1;font-weight:200}
.lede{max-width:44ch;margin:36px auto 0;color:var(--muted);font-size:16px}

/* Section rail */
.section-label{display:flex;justify-content:space-between;gap:20px;padding:0;margin-bottom:22px}
.side-quests,.main-show{padding:clamp(72px,10vw,160px) var(--gut);max-width:1800px;margin:auto}
.side-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(32px,4vw,56px)}
h2{margin:0;font-size:clamp(44px,5.6vw,92px);line-height:1}
.show-h{margin-bottom:clamp(32px,4vw,56px)}

/* Quest cards */
.quest-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,48px);align-items:start}
.quest[hidden]{display:none}
.quest-art{position:relative;display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:2.29;background:#1b1a18}
.quest-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.quest-art:hover img{transform:scale(1.035)}
.quest-art .tag{position:absolute;left:16px;top:16px}
.runtime{position:absolute;right:16px;top:16px;font:10px var(--mono);color:var(--paper);background:#121110b0;padding:5px 8px;border-radius:3px}
.quest-art:hover .quest-copy{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 0 0}
.quest h3{margin:6px 0 2px;font:500 22px/1.2 var(--body);letter-spacing:-.01em}
.ep-title{margin:0;font-size:22px;color:var(--muted)}
.text-link{flex:none;padding:6px 0;border:0;border-bottom:1px solid var(--paper);background:none;color:var(--paper);font-size:13px}
.text-link:hover{color:#fff}

/* Cast: a sideways row of stand-up cards. On desktop the section pins and the row
   pans as the page scrolls (html.mo + .pinned, set by originals.js); elsewhere it swipes. */
.cast{position:relative}
.cast-pin{padding:clamp(64px,8vw,120px) 0 clamp(40px,5vw,72px);overflow:hidden}
.cast-head{box-sizing:border-box;width:100%;padding:0 var(--gut);max-width:1800px;margin:0 auto}
.cast-head h2{margin:0}
.cast-lede{margin:16px 0 0;max-width:44ch;color:var(--muted);font-size:16px}
.cast-track{display:flex;gap:clamp(20px,2.6vw,44px);padding:clamp(40px,5vw,72px) var(--gut) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none;outline-offset:-4px}
.cast-track::-webkit-scrollbar{display:none}
.cast-card{flex:0 0 clamp(250px,25vw,380px);margin:0;scroll-snap-align:start}
.cast.pinned .cast-card{flex-basis:clamp(220px,min(25vw,calc((100vh - 400px) * .8)),380px)}
.cast-art{position:relative;aspect-ratio:4/5;border-radius:14px;background:radial-gradient(ellipse at 50% 28%,#2c2a27,#171615 72%);box-shadow:0 26px 44px -22px #000d;transform:rotate(var(--tilt,0deg));transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cast-card:nth-child(5n+1){--tilt:-1.6deg}.cast-card:nth-child(5n+2){--tilt:1.1deg}.cast-card:nth-child(5n+3){--tilt:-.7deg}.cast-card:nth-child(5n+4){--tilt:1.5deg}.cast-card:nth-child(5n+5){--tilt:-1.1deg}
.cast-card:hover .cast-art{transform:rotate(0deg) translateY(-8px)}
.cast-art:not(.cutout){overflow:hidden}
.cast-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cast-art.cutout img{position:absolute;left:0;right:0;bottom:0;height:106%;object-fit:contain;object-position:50% 100%;border-radius:0 0 14px 14px;filter:drop-shadow(0 16px 18px #0008)}
.cast-card:hover .cast-art img{transform:scale(1.03)}
.cast-card figcaption{padding:22px 2px 0;max-width:32ch}
.cast-role{margin:0;font:10px/1.5 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.cast-card h3{margin:6px 0 0;font:400 clamp(26px,2.2vw,34px)/1.05 var(--serif);letter-spacing:-.02em}
.cast-line{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.cast.pinned .cast-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:84px 0 28px}
.cast.pinned .cast-track{padding-top:clamp(28px,4vh,56px)}
.cast.pinned .cast-track{overflow:visible;scroll-snap-type:none;transform:translate3d(var(--cx,0px),0,0);will-change:transform}

/* Main show */
.flagship{display:block;border-radius:14px;overflow:hidden;background:var(--bg-2)}
.flagship-art{position:relative;aspect-ratio:2.29;overflow:hidden}
.flagship-art>img:first-child{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.flagship:hover .flagship-art>img:first-child{transform:scale(1.03)}
.flagship-cover{position:absolute;inset:0;background:linear-gradient(90deg,#242628 0%,#242628 30%,#242628e6 34%,#24262800 50%)}
.flagship-title{position:absolute;left:5%;top:50%;transform:translateY(-50%);width:27%;height:auto}
.flagship-copy{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:clamp(24px,2.6vw,40px) clamp(22px,3.4vw,52px)}
.flagship-line{font-size:clamp(22px,2.2vw,32px);line-height:1.2;margin:0 0 6px}
.flagship:hover .button{background:#fff}

/* Free / VIP */
.join{padding:clamp(88px,12vw,180px) var(--gut);background:linear-gradient(#121110,#181715)}
.join-head{text-align:center;margin-bottom:clamp(44px,6vw,90px)}
.join-head h2{margin-top:12px}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px);max-width:1180px;margin:auto}
.tier{display:flex;flex-direction:column;padding:clamp(28px,3.4vw,52px);border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.tier-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.price{margin:0;font:200 clamp(44px,4.6vw,72px)/1 var(--serif);letter-spacing:-.03em}
.price span{font:13px var(--body);letter-spacing:0;color:var(--muted);margin-left:4px}
.tier-line{margin:18px 0 30px;font-size:clamp(20px,1.8vw,26px);line-height:1.2}
.tier .field-row{margin-top:auto}
fieldset{border:0;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
legend{margin-bottom:10px}
.check{position:relative;cursor:pointer}
.check input{position:absolute;opacity:0;inset:0;cursor:pointer}
.check span{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid #ffffff30;font-size:13px;color:var(--muted)}
.check input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.check.satire input:checked+span{box-shadow:inset 0 -3px 0 var(--satire)}
.check.horror input:checked+span{box-shadow:inset 0 -3px 0 var(--horror)}
.check input:focus-visible+span{outline:2px solid var(--paper);outline-offset:3px}
.vip{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.vip .eyebrow{color:var(--ink)}
.vip .price span{color:#5f5b53}
.soon{margin-left:8px;padding:3px 7px;border:1px solid #15141350;border-radius:3px;font-size:9px}
.vip ul{list-style:none;padding:0;margin:0 0 32px;font-size:14px}
.vip li{padding:9px 0;border-top:1px solid #15141320}
.vip li:before{content:'↗';margin-right:10px;color:var(--horror)}
.vip .field-row input{border-color:#15141340;background:#f6f3ec;color:var(--ink)}
.vip .field-row input::placeholder{color:#15141380}
.vip .button:hover{background:var(--horror);color:#fff}
.vip .fine{color:#5f5b53;margin-top:8px}
.vip .status.err{color:#a0231a}
.vip .status.ok{color:var(--ink)}
.center{text-align:center;margin-top:40px}

/* Footer */
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:36px var(--gut) 90px;border-top:1px solid var(--line);font:10px var(--mono);letter-spacing:1px;color:var(--muted)}
.foot img{height:54px;width:auto}
.foot nav{display:flex;gap:22px}
.foot a:hover{color:var(--paper)}

/* Mobile dock */
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:none;justify-content:space-between;padding:15px 20px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;box-shadow:0 10px 30px #0008;transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.dock.show{transform:none}
.dock[hidden]{display:none}

/* Player */
.player{width:min(1280px,94vw);padding:16px;border:1px solid var(--line);border-radius:12px;background:#0c0c0b;color:var(--paper)}
.player::backdrop{background:#000d;backdrop-filter:blur(8px)}
.player-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.close{border:0;background:none;color:var(--paper);font:11px var(--mono);letter-spacing:1px;padding:8px}
.player-stage{position:relative}
.player video{display:block;width:100%;aspect-ratio:2.29;background:#000;border-radius:6px}
.endcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:24px;border-radius:6px;background:#0c0c0bf0;text-align:center}
.endcard[hidden]{display:none}
.endcard-head{margin:0 0 16px;font-size:clamp(24px,3vw,44px);line-height:1.1;max-width:22ch}
.endcard .field-row{width:min(520px,100%)}
.replay{margin-top:8px;border:0;background:none;color:var(--muted);font:10px var(--mono);letter-spacing:1px;text-transform:uppercase;padding:8px}

/* Motion: everything here is set up by originals.js only when motion is allowed
   (html.mo). Without it the page renders complete and still. */
.bar.tuck{transform:translateY(-100%)}
.bar.scrolled{border-bottom-color:var(--line)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--paper);opacity:.55;transform:scaleX(var(--read,0));transform-origin:0 50%}
.tc{position:absolute;right:var(--gut);top:clamp(14px,2vw,24px);font:10px var(--mono);letter-spacing:1.4px;color:var(--paper);opacity:.7;font-variant-numeric:tabular-nums}
.tc:before{content:'● ';color:var(--horror)}
.mo .drop-loop{transform:scale(calc(1.03 - var(--hp,0) * .03)) translateY(calc(var(--hp,0) * 6%));will-change:transform}
.mo .drop-shade{opacity:calc(1 + var(--hp,0) * .5)}
.mo [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.mo [data-rv].in{opacity:1;transform:none}
.mo .shutter{clip-path:inset(7% 6% round 12px);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1)}
.mo .shutter.in{clip-path:inset(0 round 12px)}
.mo .big .w{opacity:var(--o,.16);transition:opacity .25s linear}
.preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.preview.on{opacity:1}
.mo .magnet{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}

@media(max-width:900px){
  .bar{height:64px}.mark img{height:46px}.bar nav{display:none}
  .drop-copy,.quest-grid,.tiers{grid-template-columns:1fr}
  .side-head{flex-direction:column;align-items:flex-start}
  .flagship-copy{flex-direction:column;align-items:flex-start}
  .flagship-title{width:34%}
  .dock{display:flex}
}
@media(max-width:560px){
  .pill-cta{display:none}
  .drop-media{aspect-ratio:4/3;max-height:none}
  .section-label .dim{display:none}
  .field-row{flex-direction:column}
  .field-row .button{justify-content:space-between}
  .foot nav{flex-wrap:wrap}
  .flagship-cover{background:linear-gradient(90deg,#242628 0%,#242628 34%,#242628e6 38%,#24262800 56%)}
  .endcard-head{font-size:20px;margin-bottom:8px}
  .endcard{position:static;margin-top:10px;padding:18px 4px 4px;background:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}