/* ============================================================
   RITANSH — cinematic site · shared design system
   ============================================================ */
:root{
  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --f-type:"Courier New",Courier,monospace;
  --film-black:#1b1916;
  --film-ink:#201d1a;
  --film-panel:#25221e;
  --film-panel2:#2d2924;
  --film-paper:#e8e2d4;
  --film-dim:#8a8374;
  --film-faint:#5e584e;
  --film-amber:#c8102e;   /* REC light */
  --film-gold:#c8102e;
  --film-blue:#3a6ea5;    /* scope/monitor blue */
  --frame:#36312b;
  --letterbox:#000;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--film-black);
  color:var(--film-paper);
  font-family:var(--f-text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* letterbox */
.bar{position:fixed;left:0;right:0;background:var(--letterbox);z-index:9990;pointer-events:none;transition:height .6s var(--ease)}
.bar.top{top:0;height:var(--lb,34px);border-bottom:1px solid #000}
.bar.bot{bottom:0;height:var(--lb,34px);border-top:1px solid #000}
.bar .fmt{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;bottom:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--film-paper);opacity:0;transition:.4s}
.bar.bot .fmt{opacity:.85}

/* HUD */
.hud{position:fixed;z-index:9991;font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;color:var(--film-dim);pointer-events:none}
.hud.tl{top:9px;left:16px;display:flex;gap:10px;align-items:center}
.hud.tr{top:9px;right:16px}
.hud.bl{bottom:9px;left:16px}
.hud.br{bottom:9px;right:16px;color:var(--film-amber)}
.rec{width:8px;height:8px;border-radius:50%;background:var(--film-amber);animation:blink 1.4s steps(1) infinite;box-shadow:0 0 8px var(--film-amber)}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:.15}}

/* cue mark / cigarette burn */
.cue{position:fixed;top:60px;right:60px;width:46px;height:46px;border-radius:50%;z-index:9995;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,240,200,.9) 0%,rgba(255,220,150,.5) 40%,transparent 70%);
  mix-blend-mode:screen}
.cue.flash{animation:cue .5s ease}
@keyframes cue{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}

/* NAV */
nav.filmnav{position:fixed;top:var(--lb,34px);left:0;right:0;z-index:9992;display:flex;justify-content:space-between;align-items:center;
  padding:12px max(28px, calc((100vw - 1180px) / 2 + 28px)) 22px;pointer-events:none;background:linear-gradient(var(--film-black) 60%,transparent);transition:top .6s var(--ease)}
nav.filmnav .brand{font-weight:700;font-family:var(--f-display);font-size:14.96px;letter-spacing:-.02em;color:var(--film-paper);text-decoration:none;pointer-events:auto}
nav.filmnav .brand b{color:var(--film-amber)}
nav.filmnav .links{display:flex;gap:22px;pointer-events:auto;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
nav.filmnav .links a{color:var(--film-dim);text-decoration:none;transition:.3s;position:relative;padding-bottom:3px}
nav.filmnav .links a:hover,nav.filmnav .links a.active{color:var(--film-paper)}
nav.filmnav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--film-amber)}
.nav-toggle{display:none;pointer-events:auto;background:none;border:1px solid var(--frame);color:var(--film-paper);font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;padding:8px 12px;cursor:pointer}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.page{padding-top:150px;padding-bottom:60px}

/* eyebrow / headings */
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.35em;color:var(--film-amber);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:34px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--film-amber)}
.eyebrow .no{color:var(--film-dim)}
h1.big{font-weight:700;font-family:var(--f-display);font-size:clamp(38.08px,8.16vw,102px);letter-spacing:-.02em;line-height:.86}
h1.big .cut{color:var(--film-amber)}
h2{font-weight:700;font-family:var(--f-display);font-size:clamp(25.84px,4.08vw,48.96px);letter-spacing:-.02em;line-height:.95}
.lead{font-family:var(--f-text);font-weight:400;font-style:normal;font-size:clamp(17px,2.2vw,22px);color:var(--film-dim);max-width:640px;line-height:1.55;margin-top:22px}

/* buttons */
.btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--film-paper);border:1px solid var(--film-dim);background:none;padding:14px 24px;cursor:pointer;transition:.3s;text-decoration:none;display:inline-block}
.btn:hover{background:var(--film-paper);color:var(--film-black);border-color:var(--film-paper)}
.btn.amber{border-color:var(--film-amber);color:var(--film-amber)}
.btn.amber:hover{background:var(--film-amber);color:var(--film-black)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

footer.foot{padding:80px 0 90px;border-top:1px solid var(--frame);text-align:center;margin-top:80px}
footer.foot .colophon{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;color:var(--film-faint);text-transform:uppercase}
footer.foot .socials{margin-bottom:34px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase}
footer.foot .socials a{color:var(--film-dim);text-decoration:none;transition:.3s}
footer.foot .socials a:hover{color:var(--film-paper)}

@media(max-width:820px){
  .hud.tr,.hud.bl{display:none}
  nav.filmnav .links{display:none;position:absolute;top:100%;right:28px;flex-direction:column;background:var(--film-panel);border:1px solid var(--frame);padding:18px 22px;gap:16px}
  nav.filmnav .links.open{display:flex}
  .nav-toggle{display:block}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ============================================================
   CLAPPERBOARD — static end-slate, embedded in the footer
   ============================================================ */
.clapper{width:260px;margin:0 auto 40px;font-family:var(--f-mono);filter:drop-shadow(0 16px 34px rgba(0,0,0,.5))}
.clapper .sticks{height:36px;position:relative;margin-bottom:-2px;transform-origin:16px 32px}
.clapper.clap .sticks{animation:clapdown .6s var(--ease)}
@keyframes clapdown{0%{transform:rotate(-26deg)}55%{transform:rotate(2deg)}70%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.clapper .sticks .bar-stick{position:absolute;left:0;right:0;height:16px;top:9px;border:1px solid #000;background-image:repeating-linear-gradient(115deg,#111 0 16px,#e8e2d4 16px 32px)}
.clapper .sticks .hinge{position:absolute;left:7px;top:6px;width:12px;height:24px;background:#1a1a1a;border-radius:2px;z-index:2}
.clapper .board{background:#e8e2d4;color:#12100e;border:1px solid #000;border-radius:2px;padding:11px 13px 13px;text-align:left}
.clapper .prod{font-size:9px;letter-spacing:.1em;font-weight:500;border-bottom:1px solid #12100e;padding-bottom:6px;margin-bottom:7px;text-transform:uppercase}
.clapper .prod b{margin-left:4px}
.clapper .rst{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #12100e;margin-bottom:8px}
.clapper .rst>div{padding:4px 2px;text-align:center;border-right:1px solid #12100e}
.clapper .rst>div:last-child{border-right:none}
.clapper .rst .lab{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#57534a}
.clapper .rst .val{font-weight:700;font-family:var(--f-display);font-size:21.76px;line-height:.9;margin-top:1px}
.clapper .rst .val.amber{color:var(--film-amber)}
.clapper .meta{font-size:8px;letter-spacing:.05em;line-height:1.8;text-transform:uppercase}
.clapper .meta .row{display:flex;justify-content:space-between;gap:8px}
.clapper .meta .row b{font-weight:700;letter-spacing:.04em}
.clapper .light{color:#bdb6a6;font-weight:700}
.clapper .light.on{color:#12100e}
.clapper .light.strike{text-decoration:line-through;color:#8a8374}
@media(max-width:520px){.clapper{width:220px}}

/* ── Safelight red touches ── */
::selection{background:var(--film-amber);color:#fff}
html{scrollbar-width:thin;scrollbar-color:var(--film-amber) var(--film-black)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--film-black)}
::-webkit-scrollbar-thumb{background:var(--film-amber);border-radius:4px}
nav.filmnav .links a.active{color:var(--film-amber)}
.filmnav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--film-amber);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease,ease)}
.filmnav .links a:hover::after,.filmnav .links a.active::after{transform:scaleX(1)}
.theme-row span{transition:border-color .3s,color .3s}
.theme-row span:hover{border-color:var(--film-amber);color:var(--film-paper)}
.frame-cell.active .thumb{box-shadow:0 0 0 1px var(--film-amber),0 0 26px rgba(200,16,46,.45)}
.frame-cell.active .cap{color:var(--film-amber)}
.script-cv .scene .no,.script-cv .trans{color:var(--film-amber)}
.contact-lines a[href^="mailto"]{background:linear-gradient(var(--film-amber),var(--film-amber)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease,ease);padding-bottom:2px}
.contact-lines a[href^="mailto"]:hover{background-size:100% 1px}
.contact-lines a:not([href^="mailto"]){text-decoration-color:var(--film-amber)!important}
.lightbox .count{color:var(--film-amber)}

/* ── True aspect ratio: side bars (pillarbox) + content offset by the opening scene's bars ── */
.bar.side{top:0;bottom:0;width:var(--pb,0px);transition:width .6s var(--ease)}
.bar.side.l{left:0;right:auto}
.bar.side.r{right:0;left:auto}
.page{padding-top:calc(var(--lb0,34px) + 116px)}
nav.filmnav{left:var(--pb,0px);right:var(--pb,0px);padding-left:max(28px, calc((100vw - 1180px) / 2 + 28px - var(--pb,0px)));padding-right:max(28px, calc((100vw - 1180px) / 2 + 28px - var(--pb,0px)));transition:top .6s var(--ease),left .6s var(--ease),right .6s var(--ease)}