/* ============================================================
   GOOD GRIEF — Concept A: "THE GRADE"
   A colorist's suite built around the footage. The films are the
   only full colour in the room; everything else is a neutral grade.
   Navigation spine = colour TEMPERATURE (cold doc -> warm commercial).
   ============================================================ */

/* ---- Redaction grade ladder (self-hosted). Ink degrades along the theme. ---- */
@font-face{font-family:"Redaction";     src:url("../fonts/redaction.woff2")     format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction20";   src:url("../fonts/redaction-20.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction35";   src:url("../fonts/redaction-35.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction50";   src:url("../fonts/redaction-50.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction70";   src:url("../fonts/redaction-70.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction100";  src:url("../fonts/redaction-100.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --leader:#0B0A09;      /* warm film-leader black, the canvas (not #000) */
  --leader-2:#121010;
  --surface:#151312;     /* raised letterbox interior */
  --bone:#E9E4D7;        /* projector/paper off-white */
  --bone-dim:rgba(233,228,215,.52);
  --bone-faint:rgba(233,228,215,.30);
  --line:rgba(233,228,215,.13);
  --line-2:rgba(233,228,215,.22);
  --grief:#5F7C8A;       /* COLD Kelvin pole */
  --good:#E3A63F;        /* WARM Kelvin pole */
  --t:0;                 /* 0 = grief/cold … 1 = good/warm; lerped on scroll */
  --temp:var(--grief);   /* current temperature colour (JS keeps it in sync as a fallback) */
  --serif:"Redaction",Georgia,serif;
  --sans:"General Sans",-apple-system,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",monospace;
  --pad:clamp(18px,4.2vw,64px);
  --bar:max(18px,3.2vh);         /* scope letterbox bar height */
  --maxw:1720px;
  --ease:cubic-bezier(.19,1,.22,1);
}
@supports(color:color-mix(in oklab,#000,#fff)){
  :root{--temp:color-mix(in oklab, var(--grief), var(--good) calc(var(--t) * 100%))}
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  background:var(--leader);color:var(--bone);
  font-family:var(--sans);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--good);color:var(--leader)}
:focus-visible{outline:2px solid var(--good);outline-offset:3px}
.js [data-reveal]{opacity:0;transform:translateY(20px)}

/* ---- utility type ---- */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);font-weight:400}
.serif{font-family:var(--serif)}
.g20{font-family:"Redaction20",var(--serif)}
.g35{font-family:"Redaction35",var(--serif)}
.g50{font-family:"Redaction50",var(--serif)}
.g70{font-family:"Redaction70",var(--serif)}
.g100{font-family:"Redaction100",var(--serif)}

/* ============================================================
   GRAIN — a single fixed film-grain wash (texture, not decoration)
   ============================================================ */
.grain{position:fixed;inset:-120%;z-index:900;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;mix-blend-mode:overlay}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,3%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}

/* faint temperature vignette — the grade you're standing in */
.tint{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 8%, transparent 55%, color-mix(in oklab, var(--temp) 30%, transparent) 140%);
  opacity:.5;transition:background .6s linear}

/* ============================================================
   SCOPE FRAME — the whole site is 2.39:1 anamorphic
   ============================================================ */
.scope-bar{position:fixed;left:0;right:0;height:var(--bar);background:var(--leader);z-index:80;pointer-events:none}
.scope-bar.top{top:0;border-bottom:1px solid var(--line)}
.scope-bar.bot{bottom:0;border-top:1px solid var(--line)}
.scope-bar .stamp{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-faint);top:50%;transform:translateY(-50%)}
.scope-bar.top .stamp.l{left:var(--pad)} .scope-bar.top .stamp.r{right:var(--pad)}
.scope-bar.bot .stamp.l{left:var(--pad)} .scope-bar.bot .stamp.r{right:var(--pad)}
@media(max-width:640px){.scope-bar .stamp.r{display:none}}

/* ============================================================
   LEADER COUNTDOWN — an academy leader, not a % preloader
   ============================================================ */
#leader{position:fixed;inset:0;z-index:1000;background:var(--leader);display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s}
#leader.done{opacity:0;visibility:hidden}
.leader-stage{position:relative;width:min(60vw,60vh);aspect-ratio:1}
.leader-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-2)}
.leader-ring::before,.leader-ring::after{content:"";position:absolute;background:var(--line-2)}
.leader-ring::before{left:50%;top:-4%;width:1px;height:108%;transform:translateX(-.5px)}
.leader-ring::after{top:50%;left:-4%;height:1px;width:108%;transform:translateY(-.5px)}
.leader-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg, color-mix(in oklab,var(--good) 45%,transparent) var(--sweep,0%), transparent 0);
  -webkit-mask:radial-gradient(circle, transparent 44%, #000 45%);mask:radial-gradient(circle, transparent 44%, #000 45%)}
.leader-num{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-size:min(34vw,34vh);line-height:1;color:var(--bone)}
.leader-cap{position:absolute;left:0;right:0;bottom:-14%;text-align:center}

/* ============================================================
   CHROME / NAV  (no blur pill — a plain hairline bar)
   ============================================================ */
.topbar{position:fixed;top:var(--bar);left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);}
.topbar .mark{display:flex;align-items:baseline;gap:12px}
.topbar .wordmark{font-family:var(--serif);font-size:23px;letter-spacing:.01em;color:var(--bone)}
.topbar .aperture{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--temp);
  display:inline-block;transition:border-color .5s linear;transform:translateY(1px)}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);
  position:relative;padding:4px 0;transition:color .3s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--temp)}
@media(max-width:600px){.nav{gap:16px}}

.wrap{max-width:var(--maxw);margin:0 auto}

/* ============================================================
   HERO — the self-assembling scope reel
   ============================================================ */
.hero{position:relative;height:100svh;overflow:hidden;background:var(--leader)}
.hero-reel{position:absolute;inset:0}
.hero-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-reel video.under{opacity:0}
.hero-reel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, color-mix(in oklab,var(--leader) 55%,transparent), transparent 26%, transparent 60%, color-mix(in oklab,var(--leader) 88%,transparent))}
.hero-grade{position:absolute;inset:0;mix-blend-mode:soft-light;pointer-events:none;
  background:color-mix(in oklab,var(--temp) 40%, transparent);opacity:.4;transition:background .6s linear}

.hero-center{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;padding:0 var(--pad)}
.hero-word{font-family:var(--serif);line-height:.86;letter-spacing:-.01em;
  font-size:clamp(64px,15vw,240px);color:var(--bone)}
.hero-word .good{color:color-mix(in oklab,var(--bone) 62%, var(--good))}
.hero-word .grief{font-family:"Redaction35",var(--serif);color:color-mix(in oklab,var(--bone) 66%, var(--grief))}
.hero-sub{margin-top:22px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:center}
.hero-sub .tag{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}

/* running timecode + shot marker, bottom scope bar area */
.hero-hud{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--bar) + 16px);z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim)}
.hero-hud .tc{color:var(--bone)}
.hero-hud .now{display:flex;gap:10px;align-items:center}
.hero-hud .rec{width:8px;height:8px;border-radius:50%;background:var(--good);animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:.25}}
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + 14px);z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint)}

/* ============================================================
   TEMPERATURE INDEX — work laid along the cold->warm axis
   ============================================================ */
.spine{padding:clamp(60px,10vw,150px) var(--pad) clamp(40px,7vw,90px)}
.spine-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:8px}
.spine-head h2{font-family:var(--serif);font-size:clamp(30px,5vw,68px);font-weight:400;line-height:.94;letter-spacing:-.01em}
.spine-head .lead{max-width:40ch;color:var(--bone-dim);font-size:clamp(15px,1.5vw,18px);line-height:1.55}

/* the axis rail */
.axis{display:flex;align-items:center;gap:16px;margin:26px 0 4px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}
.axis .rail{flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--grief),var(--good))}
.axis .pole.cold{color:var(--grief)} .axis .pole.warm{color:var(--good)}

/* filter row (categories are a practical overlay, not the spine) */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 34px}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);background:transparent;border:1px solid var(--line-2);border-radius:2px;
  padding:8px 14px;cursor:pointer;transition:.25s}
.filters button:hover{color:var(--bone);border-color:var(--bone-dim)}
.filters button[aria-pressed="true"]{color:var(--leader);background:var(--bone);border-color:var(--bone)}

/* the list: each row is a film at its temperature */
.reel-list{display:flex;flex-direction:column}
.filmrow{position:relative;display:grid;grid-template-columns:64px 1.1fr 2fr auto;align-items:center;gap:24px;
  padding:20px 0 20px 22px;border-top:1px solid var(--line);cursor:pointer;
  transition:background .4s var(--ease),padding-left .45s var(--ease)}
/* the temperature made visible: a grade stripe per row, slate -> gold down the list */
.filmrow::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:4px;background:var(--rt,var(--grief));opacity:.85;transition:width .35s var(--ease)}
.filmrow:hover::before{width:8px;opacity:1}
.filmrow:hover{background:linear-gradient(90deg, color-mix(in oklab,var(--rt,var(--grief)) 12%, transparent), transparent 60%);padding-left:30px}
.filmrow .kelvin{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--rt,var(--grief))}
.filmrow .cl{font-family:var(--serif);font-size:clamp(22px,3.2vw,42px);line-height:1;color:var(--bone)}
.filmrow .ti{color:var(--bone-dim);font-size:clamp(14px,1.4vw,17px)}
.filmrow .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint);text-align:right}
/* a thumbnail that reveals in scope on hover */
.filmrow .peek{position:absolute;right:calc(18% );top:50%;transform:translateY(-50%) scale(.96);
  width:min(34vw,420px);aspect-ratio:2.39;overflow:hidden;border:1px solid var(--line-2);
  opacity:0;pointer-events:none;z-index:4;transition:opacity .35s var(--ease),transform .5s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.filmrow .peek video,.filmrow .peek img{width:100%;height:100%;object-fit:cover}
.filmrow:hover .peek{opacity:1;transform:translateY(-50%) scale(1)}
.filmrow.dim{opacity:.24;filter:saturate(.4)}
@media(hover:none){.filmrow .peek{display:none}}
@media(max-width:820px){
  .filmrow{grid-template-columns:52px 1fr auto;gap:14px}
  .filmrow .ti{display:none}
}

/* ============================================================
   WORK PAGE — hero film + temperature spine
   ============================================================ */
.work-hero{position:relative;height:88svh;overflow:hidden}
.work-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, color-mix(in oklab,var(--leader) 92%,transparent))}
.work-hero .cap{position:absolute;z-index:2;left:var(--pad);bottom:calc(var(--bar) + 22px);max-width:24ch}
.work-hero .cap h1{font-family:var(--serif);font-size:clamp(44px,9vw,132px);line-height:.88;font-weight:400}
.work-hero .cap .lead{margin-top:14px;color:var(--bone-dim);font-size:clamp(16px,1.7vw,22px);max-width:34ch}

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero{padding:clamp(140px,22vh,260px) var(--pad) clamp(40px,7vw,90px);max-width:1200px}
.about-hero .ey{margin-bottom:22px}
.about-hero h1{font-family:var(--serif);font-size:clamp(40px,8vw,150px);line-height:.9;font-weight:400;letter-spacing:-.01em}
.about-hero h1 em{font-style:normal;font-family:"Redaction35",var(--serif);color:color-mix(in oklab,var(--bone) 42%,var(--grief))}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:start;
  padding:clamp(50px,8vw,110px) var(--pad);border-top:1px solid var(--line)}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:44px}}
.about-grid p{font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:var(--bone);max-width:48ch;margin-bottom:18px}
.about-grid p.small{font-size:clamp(15px,1.3vw,17px);color:var(--bone-dim)}
.bts{position:relative;aspect-ratio:4/5;background:var(--surface);overflow:hidden;filter:grayscale(1) contrast(1.05)}
.bts img{width:100%;height:100%;object-fit:cover}
.bts .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--bone-faint);
  background:radial-gradient(circle at 50% 40%, #1c1917, #0b0a09);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
/* halftone dot texture over the BTS */
.bts .half{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.5;
  background-image:radial-gradient(var(--bone) 1px, transparent 1.4px);background-size:5px 5px}
.bts .frame-cap{position:absolute;left:14px;bottom:12px;z-index:2;color:var(--bone);
  mix-blend-mode:difference}

.duo{display:flex;flex-wrap:wrap;gap:8px 46px;align-items:baseline;
  padding:clamp(46px,8vw,100px) var(--pad);border-top:1px solid var(--line)}
.duo .name{font-family:var(--serif);font-size:clamp(34px,7vw,104px);line-height:.9;font-weight:400}
.duo .role{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}

.services{padding:clamp(46px,8vw,100px) var(--pad);border-top:1px solid var(--line)}
.svc{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:24px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.svc:hover{padding-left:16px}
.svc .n{font-family:var(--mono);font-size:12px;color:var(--bone-faint);width:44px;flex:none}
.svc .s{flex:1;font-family:var(--serif);font-size:clamp(22px,3.6vw,50px);font-weight:400;line-height:1}
.svc .d{color:var(--bone-dim);font-size:14px;max-width:32ch;text-align:right}
@media(max-width:680px){.svc .d{display:none}}

.clients{padding:clamp(40px,6vw,90px) var(--pad);border-top:1px solid var(--line)}
.client-list{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:22px}
.client-list span{font-family:var(--serif);font-size:clamp(18px,2.3vw,34px);color:var(--bone-dim);transition:color .3s}
.client-list span:hover{color:var(--bone)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:clamp(70px,11vw,170px) var(--pad) calc(var(--bar) + 30px);border-top:1px solid var(--line)}
.footer .big{font-family:var(--serif);font-size:clamp(44px,12vw,190px);line-height:.84;font-weight:400}
.footer .big a{transition:opacity .3s}.footer .big a:hover{opacity:.6}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:56px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim)}
.footer-row .col{display:flex;flex-direction:column;gap:8px}
.footer-row a:hover{color:var(--bone)}

/* ============================================================
   MOTION SAFETY + RESPONSIVE
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .grain{display:none}
  .hero-reel video{opacity:1}
}
@media(max-width:600px){
  :root{--bar:14px}
  .topbar{padding:12px var(--pad)}
  .topbar .wordmark{font-size:18px}
  .nav{gap:14px}
  .nav a{font-size:10px;letter-spacing:.1em}
  .hero-word{font-size:clamp(58px,19vw,96px)}
  .hero-word .good,.hero-word .grief{display:block}
  .spine-head{flex-direction:column;align-items:flex-start}
  .filmrow .meta{font-size:10px}
}
@media(max-width:480px){
  .topbar .wordmark{display:none}      /* aperture dot remains as the home mark */
  .topbar .aperture{width:15px;height:15px}
}