/* site.css — LIMINAL, "Brutalist" world (industry-facing pages: Home, Synopsis, Cast & Crew,
   Industry/Pitch, Contact). Palette pulled from the film's own red-key-light grade, pushed
   colder and starker than a typical warm premium site — this is the pitch-deck register.
   OKLCH throughout, no pure #000/#fff, per the engine's design laws. The Notebook/Crayon
   world (Universe, Gallery) defines its own separate token set in site-crayon.css. */

:root{
  --bg:    oklch(0.10 0.006 30);   /* near-black, cool-neutral stage */
  --flag:  oklch(0.15 0.010 30);   /* raised surfaces (cards, nav-solid) */
  --ctb:   oklch(0.20 0.020 30);   /* ambient fill */
  --accent:     oklch(0.55 0.19 32); /* ember red — the one committed accent, from Vincent's key light */
  --accentDeep: oklch(0.32 0.13 28); /* deep ember, low intensity */
  --gold:  oklch(0.74 0.12 70);    /* muted amber — secondary, used sparingly */
  --ink:   oklch(0.95 0.004 90);   /* cold near-white */
  --muted: oklch(0.62 0.010 50);   /* cool gray */
  --hair:  color-mix(in oklch, var(--ink) 16%, transparent);
  --holo:  linear-gradient(100deg, oklch(0.55 0.19 32), oklch(0.60 0.17 45), oklch(0.74 0.12 70));
  --disp:  'Archivo Black', 'Arial Black', sans-serif;
  --sans:  'Inter', 'Helvetica Neue', sans-serif;
  --mono:  'IBM Plex Mono', monospace;
}

body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;background:var(--holo);z-index:70}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{text-transform:uppercase;font-family:var(--disp);font-weight:400;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}

/* ---- nav ---- */
nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(20px,4vw,56px);transition:.4s;border-bottom:1px solid transparent}
nav.solid{background:color-mix(in oklch,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-color:var(--hair);padding:14px clamp(20px,4vw,56px)}
.wm{font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.12em}
.wm a{color:inherit}
/* seven items now, so the row has to tighten on narrower desktops rather than wrap */
.nl{display:flex;gap:clamp(13px,1.9vw,28px);font-size:clamp(10.5px,1.05vw,12px);
  letter-spacing:clamp(.08em,.14vw,.14em);text-transform:uppercase;color:var(--muted)}
.nl a{position:relative;padding-bottom:3px;white-space:nowrap}
.nl a:hover{color:var(--ink)}
.nl a[aria-current="page"]{color:var(--ink)}
.nl a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent)}
.navtoggle{display:none}
@media(max-width:820px){
  .nl{position:fixed;inset:0;z-index:59;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:26px;font-size:18px;opacity:0;pointer-events:none;transition:opacity .35s}
  .nl.open{opacity:1;pointer-events:auto}
  .navtoggle{display:block;position:relative;z-index:61;width:26px;height:18px;background:none;border:none;cursor:pointer}
  .navtoggle span{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.3s}
  .navtoggle span:nth-child(1){top:0}.navtoggle span:nth-child(2){top:8px}.navtoggle span:nth-child(3){top:16px}
  .navtoggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .navtoggle.open span:nth-child(2){opacity:0}
  .navtoggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

.btn{display:inline-block;position:relative;overflow:hidden;isolation:isolate;font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:var(--bg);background-image:var(--holo);background-size:200% 100%;padding:14px 30px;border-radius:2px;transition:background-position .4s,filter .3s}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%);mix-blend-mode:overlay;pointer-events:none}
.btn:hover{background-position:100% 0;filter:brightness(1.06)}
.btn-outline{background-image:none;background:transparent;border:1px solid var(--hair);color:var(--ink)}
.btn-outline::before{display:none}

/* ---- home hero: 3D scroll-driven classroom (warm, soft window light, not flat fluorescent) ---- */
.hworld{position:relative;height:760vh;background:#6f5c44}
.hworld-sticky{position:sticky;top:0;height:100svh;width:100%;overflow:hidden}
.hworld-canvas{position:absolute;inset:0;z-index:0}
.hworld-canvas canvas{display:block;width:100%;height:100%}
.hworld-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(12,8,3,.34) 100%),
             linear-gradient(180deg,rgba(12,8,3,.3) 0%,transparent 20%,transparent 78%,rgba(12,8,3,.34) 100%)}
.hworld .eye{position:absolute;z-index:3;top:clamp(24px,6vh,54px);left:0;right:0;margin:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:#f2ecd4;text-align:center;transition:opacity .5s}
.hworld-title-canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity .5s}

/* tagline sits just under the neon wordmark. pre-wrap keeps the preserved spaces intact
   while the decode animation churns the letters, so line breaks never shift mid-animation. */
.hworld-tagline{position:absolute;z-index:4;left:0;right:0;top:50%;margin:0 auto;
  transform:translateY(clamp(48px,7.5vh,92px));max-width:min(92vw,680px);padding:0 24px;
  text-align:center;white-space:pre-wrap;font-family:var(--mono);font-weight:400;
  font-size:clamp(11.5px,1.35vw,15px);letter-spacing:.09em;line-height:1.7;
  color:#ece0c6;text-shadow:0 0 4px rgba(10,6,2,.92),0 2px 16px rgba(0,0,0,.85);
  transition:opacity .5s}

/* section 2 (red room): the 404 story beat, styled after the reference still */
.hworld-404{position:absolute;z-index:4;left:0;right:0;top:42%;margin:0;text-align:center;
  font-family:var(--mono);font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:.4em;text-indent:.4em;
  color:#fff4ec;text-shadow:0 0 10px rgba(255,90,60,.9),0 0 34px rgba(255,60,40,.6);
  opacity:0;transition:opacity .6s}
.hworld-notfound{position:absolute;z-index:4;left:0;right:0;bottom:16%;margin:0 auto;max-width:min(92vw,680px);padding:0 24px;
  text-align:center;white-space:pre-wrap;font-family:var(--mono);font-weight:600;
  font-size:clamp(14px,1.7vw,21px);letter-spacing:.2em;line-height:1.7;
  color:#ffe9dc;text-shadow:0 0 4px rgba(30,4,2,.95),0 2px 18px rgba(0,0,0,.85);
  opacity:0;transition:opacity .6s}

/* skip the 3D journey — for anyone who came to do business, not explore */
.skip-journey{position:absolute;z-index:6;right:clamp(16px,3vw,40px);bottom:clamp(18px,3vh,34px);
  padding:10px 16px;border:1px solid var(--hair);border-radius:2px;background:transparent;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;transition:opacity .5s,color .3s,border-color .3s}
.skip-journey:hover{color:var(--ink);border-color:color-mix(in oklch,var(--ink) 42%,transparent)}
.skip-journey[hidden]{display:none}

/* section 3 (TV room) */
.hworld-tvhint{position:absolute;z-index:4;left:0;right:0;bottom:12%;margin:0;padding:0 24px;text-align:center;
  font-family:var(--mono);font-size:clamp(10.5px,1.2vw,13px);letter-spacing:.26em;text-transform:uppercase;
  color:#cfe2ff;text-shadow:0 0 4px rgba(2,6,16,.95),0 2px 16px rgba(0,0,0,.9);
  opacity:0;transition:opacity .6s}

/* full-teaser overlay */
.teaser-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,3,.93);backdrop-filter:blur(6px);padding:clamp(16px,4vw,48px)}
.teaser-modal[hidden]{display:none}
.teaser-frame{position:relative;width:min(100%,1100px);aspect-ratio:16/9;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.teaser-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.teaser-close{position:absolute;top:clamp(10px,2.4vw,26px);right:clamp(10px,2.4vw,26px);z-index:2;
  width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;background:transparent;
  color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:background .25s}
.teaser-close:hover{background:color-mix(in oklch,var(--ink) 14%,transparent)}

/* ---- interior pages: 3D room header + readable content below ---- */
.proom{position:relative;height:clamp(420px,62vh,640px);overflow:hidden;background:#0d0a07}
.proom-canvas{position:absolute;inset:0;z-index:0}
.proom-canvas canvas{display:block;width:100%;height:100%}
.proom-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(10,7,3,.55) 100%),
             linear-gradient(180deg,rgba(10,7,3,.55) 0%,transparent 30%,transparent 55%,rgba(10,7,3,.92) 100%)}
.proom-hd{position:absolute;z-index:2;left:0;right:0;bottom:clamp(28px,5vh,56px);padding:0 clamp(20px,4vw,56px);text-align:center}
.proom-hd .eyebrow{margin-bottom:12px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.proom-hd h1{margin:0;font-size:clamp(34px,6.4vw,78px);line-height:.98;color:#f7f3e4;
  text-shadow:0 4px 34px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.8)}

/* interior-page title rendered as the same RGB-split neon sign as the home wordmark */
.proom-title-canvas{display:block;width:min(94%,640px);height:clamp(74px,15vw,160px);margin:0 auto}

.pbody{position:relative;z-index:2;background:var(--bg);padding:clamp(52px,8vh,96px) 0 clamp(60px,10vh,120px)}
.pwrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.pnarrow{max-width:70ch;margin:0 auto}
.plead{font-size:clamp(17px,1.9vw,22px);line-height:1.62;color:var(--ink);margin:0 0 1.5em}
.pbody p{font-size:16.5px;line-height:1.78;color:var(--muted);margin:0 0 1.35em}
.pbody p strong{color:var(--ink);font-weight:600}
.pbody h2{font-size:clamp(22px,2.9vw,34px);margin:2.6em 0 .9em;color:var(--ink)}
.pkicker{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 1.2em}
.pquote{margin:2.4em 0;padding:0 0 0 clamp(18px,3vw,32px);border-left:2px solid var(--accent)}
.pquote p{font-size:clamp(18px,2.2vw,25px);line-height:1.5;color:var(--ink);font-style:italic;margin:0}
.pquote cite{display:block;margin-top:1em;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-style:normal}
.prule{height:1px;background:var(--hair);border:0;margin:clamp(40px,6vh,72px) 0}

/* ---- cast & crew ---- */
/* the classroom room is daylit, so its scrim has to darken rather than the usual lift */
.proom-scrim-lit{background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(12,10,7,.6) 100%),
  linear-gradient(180deg,rgba(12,10,7,.5) 0%,transparent 26%,transparent 42%,rgba(12,10,7,.95) 100%)}
.cc-h{text-align:center;margin:0 0 clamp(28px,4vh,44px)}
.cc-dept{margin-bottom:clamp(34px,5vh,56px)}
.cc-dept-name{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);text-align:center;margin:0 0 18px}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(10px,1.4vw,18px);max-width:900px;margin:0 auto}
.cc-cast{max-width:320px}
.cc-card{padding:20px 18px;border:1px solid var(--hair);border-radius:2px;text-align:center;
  background:color-mix(in oklch,var(--ink) 3%,transparent);transition:border-color .3s,background .3s}
.cc-card:hover{border-color:color-mix(in oklch,var(--ink) 32%,transparent);
  background:color-mix(in oklch,var(--ink) 6%,transparent)}
.cc-name{font-family:var(--disp);font-size:15px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.cc-role{margin-top:7px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.cc-cast .cc-name{font-size:19px}
.cc-cast .cc-role{color:var(--accent)}

/* ---- gallery grid + lightbox ---- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr));gap:clamp(8px,1.2vw,16px);margin-top:clamp(28px,5vh,52px)}
.gal-item{position:relative;display:block;padding:0;border:0;background:#0b0908;cursor:pointer;overflow:hidden;
  aspect-ratio:1620/1080;outline-offset:3px}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s;opacity:.86}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.045);opacity:1}
.gal-item::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ink) 9%,transparent)}

.lightbox{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,3,.95);backdrop-filter:blur(8px);padding:clamp(14px,4vw,54px)}
.lightbox[hidden]{display:none}
.lb-stage{margin:0;max-width:1400px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-stage img{max-width:100%;max-height:78vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lb-stage figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--muted)}
.lb-close,.lb-nav{position:absolute;z-index:2;border:1px solid var(--hair);border-radius:50%;background:transparent;
  color:var(--ink);cursor:pointer;transition:background .25s,border-color .25s;display:flex;align-items:center;justify-content:center}
.lb-close{top:clamp(10px,2.4vw,26px);right:clamp(10px,2.4vw,26px);width:44px;height:44px;font-size:26px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1;padding-bottom:4px}
.lb-prev{left:clamp(8px,2vw,26px)}
.lb-next{right:clamp(8px,2vw,26px)}
.lb-close:hover,.lb-nav:hover{background:color-mix(in oklch,var(--ink) 14%,transparent);border-color:color-mix(in oklch,var(--ink) 40%,transparent)}
@media(max-width:600px){.lb-nav{width:42px;height:42px;font-size:24px}}

/* visually hidden, still read by screen readers and search engines */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.vscroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);animation:vbounce 2s ease-in-out infinite;opacity:0;transition:opacity .6s}
.vscroll.show{opacity:1}
@keyframes vbounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@media(prefers-reduced-motion:reduce){.vscroll{animation:none}}

section.blk{position:relative;z-index:6;background:var(--bg)}
.pad{padding:clamp(56px,8vh,100px) 0}
.subline{margin:20px auto 0;max-width:62ch;font-size:16.5px;color:var(--muted)}
.center{text-align:center}

footer{border-top:1px solid var(--hair);padding:44px 0}
.fwm{font-family:var(--disp);letter-spacing:.1em;font-size:15px}
.fmeta{font-size:12px;color:var(--muted)}
.frow{display:flex;justify-content:space-between;align-items:center;width:100%;flex-wrap:wrap;gap:16px}
.fsocial{display:flex;gap:18px}
.fsocial a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fsocial a:hover{color:var(--ink)}