/* ============================================================
   JESS ARAN — Writer & Director
   Swiss / brutalist system · cool monochrome · grotesque
   Shared across: index · filmography · about · contact
   ============================================================ */

:root{
  /* —— cool monochrome palette —— */
  --paper:    #ffffff;
  --paper-2:  #eceef1;   /* cool band */
  --paper-3:  #e2e5e9;
  --ink:      #0e1113;   /* cool near-black */
  --ink-2:    #5c636b;   /* secondary */
  --ink-3:    #969da5;   /* faint / labels */
  --line:     rgba(14,17,19,.16);
  --line-2:   rgba(14,17,19,.30);
  --line-3:   rgba(14,17,19,.52);
  --accent:   #1f33d6;   /* single cool signal — cobalt */
  --accent-ink:#ffffff;

  /* —— type —— */
  --grotesk: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* —— metrics —— */
  --pad: clamp(18px, 4.4vw, 64px);
  --maxw: 1640px;
  --nav-h: 62px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grotesk);
  font-size:clamp(14.5px,1vw,16px);
  line-height:1.5;
  font-weight:420;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1, "ss01" 1;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* —— shared utilities —— */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--ink{ background:var(--line-3); }

.label{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); line-height:1;
}
.idx{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* big display helpers */
.display{
  font-weight:800; line-height:.86; letter-spacing:-.035em; text-transform:uppercase;
  font-stretch:expanded;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   NAV  — fixed top band, hairline grid
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-inline:var(--pad);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav__brand{
  display:flex; align-items:baseline; gap:.5ch;
  font-weight:800; font-size:16px; letter-spacing:-.01em; text-transform:uppercase;
  justify-self:start;
}
.nav__brand sup{ font-size:9px; font-weight:600; color:var(--accent); top:-.7em; }
.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); justify-self:center; }
.nav__links a{
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-2); position:relative; padding:6px 0; transition:color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--ink); transition:right .3s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ right:0; }
.nav__links a.active{ color:var(--ink); }
.nav__links a.active::after{ right:0; background:var(--accent); }
.nav__reel{ justify-self:end; display:flex; align-items:center; gap:10px; }
.nav__reel a{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--line-2); padding:9px 16px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav__reel a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.nav__menu-btn{ display:none; }

/* language toggle (EN/ES) */
.nav__lang{ display:inline-flex; border:1px solid var(--line-2); }
.nav__lang button{
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); background:none; border:0;
  padding:8px 10px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.nav__lang button + button{ border-left:1px solid var(--line-2); }
.nav__lang button:hover{ color:var(--ink); }
.nav__lang button.active{ background:var(--ink); color:var(--paper); }

@media(max-width:880px){
  .nav{ grid-template-columns:1fr auto; }
  .nav__links{ display:none; }
  .nav__reel{ display:none; }
  .nav__menu-btn{
    display:flex; flex-direction:column; gap:5px; background:none; border:0;
    cursor:pointer; padding:8px; justify-self:end;
  }
  .nav__menu-btn span{ width:24px; height:2px; background:var(--ink); transition:.3s; }
  .nav.open .nav__menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav__menu-btn span:nth-child(2){ opacity:0; }
  .nav.open .nav__menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav.open .nav__links{
    display:flex; position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column;
    align-items:stretch; gap:0; padding:6px var(--pad) 22px;
    background:var(--paper); border-bottom:1px solid var(--line-2);
  }
  .nav.open .nav__links a{ font-size:18px; padding:16px 0; border-bottom:1px solid var(--line); letter-spacing:0; }
  .nav.open .nav__reel{ display:flex; position:fixed; inset:auto 0 auto 0; top:calc(var(--nav-h) + 0px); }
}

/* page top spacer so fixed nav doesn't overlap */
.page{ padding-top:var(--nav-h); }

/* ============================================================
   SECTION HEADER (shared) — Swiss index header
   ============================================================ */
.shead{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,64px);
  align-items:end; padding:clamp(34px,5vw,68px) 0 clamp(22px,3vw,38px);
}
.shead__l{ display:flex; flex-direction:column; gap:14px; }
.shead__num{ font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--accent); }
.shead h1,.shead h2{
  margin:0; font-weight:800; font-size:clamp(40px,8vw,120px); line-height:.84;
  letter-spacing:-.04em; text-transform:uppercase; font-stretch:expanded;
}
.shead__r{ justify-self:end; max-width:42ch; text-align:left; }
.shead__r p{ margin:0; color:var(--ink-2); font-size:clamp(14px,1.05vw,16.5px); line-height:1.5; }
@media(max-width:780px){
  .shead{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .shead__r{ justify-self:start; }
}

/* generic eyebrow used inside blocks */
.eyebrow{
  display:inline-flex; align-items:center; gap:.8em;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--line-3); }

/* status dots — monochrome + accent */
.dot{ width:8px; height:8px; flex:none; border:1.5px solid var(--ink); border-radius:50%; }
.dot.released{ background:var(--ink); }
.dot.production{ background:var(--accent); border-color:var(--accent); }
.dot.development{ background:transparent; }
.dot.developed{ background:linear-gradient(90deg, var(--ink) 0 50%, transparent 50% 100%); }

/* ============================================================
   FOOTER (shared)
   ============================================================ */
.foot{ border-top:1px solid var(--line-3); margin-top:clamp(60px,9vh,120px); }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,4vw,60px);
  padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px);
}
.foot__big{
  font-weight:800; font-size:clamp(30px,4.4vw,64px); line-height:.92; letter-spacing:-.03em;
  text-transform:uppercase; font-stretch:expanded; margin:0;
}
.foot__big a{ border-bottom:3px solid var(--accent); }
.foot__col h4{ margin:0 0 16px; }
.foot__col a{ display:block; padding:7px 0; color:var(--ink-2); font-size:14px; transition:color .2s ease; }
.foot__col a:hover{ color:var(--ink); }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  padding:18px 0 30px; border-top:1px solid var(--line);
}
.foot__bar span, .foot__bar a{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.foot__bar .top{ cursor:pointer; transition:color .2s ease; }
.foot__bar .top:hover{ color:var(--ink); }
@media(max-width:760px){ .foot__grid{ grid-template-columns:1fr; gap:34px; } }

/* ============================================================
   MARQUEE / TICKER
   ============================================================ */
.ticker{
  border-top:1px solid var(--line-3); border-bottom:1px solid var(--line-3);
  overflow:hidden; padding:12px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.ticker__track{ display:flex; width:max-content; animation:ticker 40s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  display:flex; align-items:center; gap:30px; white-space:nowrap;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  padding:0 30px;
}
.ticker__item::after{ content:""; width:5px; height:5px; background:var(--accent); border-radius:50%; }
@keyframes ticker{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{ padding-top:clamp(20px,3vw,40px); }
.hero__meta{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.hero__meta .label{ color:var(--ink-2); }
.hero__meta .c{ text-align:center; }
.hero__meta .r{ text-align:right; }
.hero__main{
  display:grid; grid-template-columns:1fr minmax(280px,38%); gap:clamp(24px,4vw,56px);
  align-items:end; padding:clamp(28px,4vw,52px) 0 clamp(20px,3vw,36px);
}
.hero__title{ margin:0; font-weight:800; font-stretch:expanded;
  font-size:clamp(64px,18vw,300px); line-height:.8; letter-spacing:-.045em; text-transform:uppercase; }
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{ display:block; }
.hero__title .accent{ color:var(--accent); }
.hero__portrait{ position:relative; }
.hero__portrait .frame{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--paper-3); border:1px solid var(--line-2); }
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  filter:grayscale(1) contrast(1.05); transition:filter .8s ease; }
.hero__portrait:hover img{ filter:grayscale(0) contrast(1.02); }
.hero__portrait .tag{
  position:absolute; left:0; bottom:0; background:var(--ink); color:var(--paper);
  padding:8px 12px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.hero__sub{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end;
  padding:clamp(20px,3vw,34px) 0; border-top:1px solid var(--line);
}
.hero__sub p{ margin:0; max-width:46ch; font-size:clamp(16px,1.5vw,24px); line-height:1.32; letter-spacing:-.01em; }
.hero__sub p b{ font-weight:700; }
.hero__scroll{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.hero__scroll::after{ content:""; width:1px; height:30px; background:var(--line-3); }
@media(max-width:820px){
  .hero__main{ grid-template-columns:1fr; align-items:start; gap:28px; }
  .hero__portrait{ max-width:280px; }
  .hero__meta{ grid-template-columns:1fr 1fr; }
  .hero__meta .c{ display:none; }
}

/* ============================================================
   STATEMENT (home)
   ============================================================ */
.statement{ padding:clamp(54px,9vh,120px) 0; }
.statement__big{
  font-weight:600; font-size:clamp(24px,3.8vw,52px); line-height:1.06; letter-spacing:-.025em;
  margin:0; max-width:40ch;
}
.statement__big em{ font-style:normal; color:var(--accent); }
.statement__foot{
  margin-top:clamp(36px,5vw,64px);
}
.statement__lede{
  background:var(--paper); padding:0 clamp(8px,2vw,24px) clamp(28px,3.4vw,44px);
  color:var(--ink-2); font-size:clamp(15px,1.2vw,18px); line-height:1.55; max-width:64ch;
  margin-inline:auto; text-align:center;
}
.statement__stats{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(28px,5vw,72px);
  background:#3a4248; color:#fff;
  padding:clamp(34px,4.4vw,56px) clamp(20px,4vw,48px);
}
.stat{ text-align:center; }
.stat .k{ font-weight:500; font-size:clamp(30px,3vw,44px); line-height:1; letter-spacing:-.02em; display:block; color:#fff; }
.stat .l{ margin-top:12px; color:rgba(255,255,255,.55); }

/* ============================================================
   WORK GRID (home — selected work)
   ============================================================ */
.work{ padding-bottom:clamp(40px,7vh,90px); }
.work-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line-3); border-left:1px solid var(--line);
}
.wcard{ position:relative; display:block; cursor:pointer; border-right:1px solid var(--line); }
.wcard__media{ position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--paper-3); }
.wcard__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04);
  transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.wcard:hover .wcard__media img{ transform:scale(1.04); filter:grayscale(0); }
.wcard__no{ position:absolute; top:10px; left:12px; z-index:2; font-size:11px; font-weight:600; color:var(--paper); mix-blend-mode:difference; }
.wcard__arrow{ position:absolute; top:10px; right:12px; z-index:2; width:30px; height:30px; border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-4px); transition:.35s; mix-blend-mode:difference; }
.wcard:hover .wcard__arrow{ opacity:1; transform:none; }
.wcard__arrow svg{ width:13px; height:13px; stroke:#fff; }
.wcard__body{ padding:14px 14px 18px; border-top:1px solid var(--line); }
.wcard__status{ display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:10px; }
.wcard__title{ margin:0; font-weight:800; font-size:clamp(17px,1.4vw,23px); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; }
.wcard__role{ margin-top:8px; font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--ink-2); }
@media(max-width:1100px){ .work-grid{ grid-template-columns:repeat(3,1fr); } .wcard:nth-child(n+4){ display:none; } }
@media(max-width:620px){ .work-grid{ grid-template-columns:repeat(2,1fr); } .wcard:nth-child(n+3){ display:none; } }

/* ============================================================
   SERVICES (home — "Also I do")
   ============================================================ */
.services{ padding:clamp(54px,9vh,120px) 0; background:var(--paper-2); border-top:1px solid var(--line-3); border-bottom:1px solid var(--line-3); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc{ background:var(--paper-2); padding:clamp(24px,2.6vw,40px); display:flex; flex-direction:column; gap:16px; min-height:300px; transition:background .35s ease; }
.svc:hover{ background:var(--paper); }
.svc__num{ font-weight:800; font-size:clamp(28px,3vw,44px); letter-spacing:-.03em; color:var(--ink); line-height:1; }
.svc__title{ margin:auto 0 0; font-weight:800; font-size:clamp(22px,2.2vw,32px); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; }
.svc__desc{ color:var(--ink-2); font-size:14.5px; line-height:1.5; max-width:38ch; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); padding:6px 11px; }
@media(max-width:820px){ .svc-grid{ grid-template-columns:1fr; } .svc{ min-height:0; } }

/* CTA band */
.cta{ padding:clamp(54px,10vh,130px) 0; }
.cta__inner{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:30px; }
.cta__big{ margin:0; font-weight:800; font-size:clamp(40px,9vw,150px); line-height:.84; letter-spacing:-.04em; text-transform:uppercase; font-stretch:expanded; }
.cta__big em{ font-style:normal; color:var(--accent); }
.cta__link{ display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:8px; transition:.25s; }
.cta__link:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   FILMOGRAPHY INDEX (filmography page)
   ============================================================ */
.filters{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:16px 0; border-top:1px solid var(--line-3); border-bottom:1px solid var(--line);
  position:sticky; top:var(--nav-h); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); z-index:60;
}
.filters__label{ margin-right:6px; }
.chip{
  font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); background:none; border:1px solid var(--line-2); padding:8px 14px; cursor:pointer;
  transition:all .2s ease;
}
.chip:hover{ color:var(--ink); border-color:var(--ink); }
.chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.filters__sep{ width:1px; height:20px; background:var(--line-2); margin:0 4px; }
.filters__count{ margin-left:auto; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

.flist{ position:relative; }
.frow{
  display:grid; grid-template-columns:54px minmax(0,4fr) minmax(0,2.2fr) minmax(0,1.6fr) auto 34px;
  gap:clamp(12px,2vw,30px); align-items:center;
  padding:clamp(16px,2vw,26px) 0; border-bottom:1px solid var(--line);
  cursor:pointer; transition:padding-left .35s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.frow:hover{ padding-left:14px; background:var(--paper-2); }
.frow__idx{ font-size:12px; font-weight:600; color:var(--ink-3); }
.frow__title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.frow__title h3{ margin:0; font-weight:800; font-size:clamp(22px,3vw,42px); line-height:.96; letter-spacing:-.03em; text-transform:uppercase; transition:color .2s ease; }
.frow:hover .frow__title h3{ color:var(--accent); }
.frow__title .yr{ font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.04em; }
.frow__role{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.frow__fmt{ font-size:11.5px; font-weight:500; letter-spacing:.02em; color:var(--ink-3); }
.frow__status{ display:flex; align-items:center; gap:9px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.frow__plus{ justify-self:end; width:24px; height:24px; position:relative; opacity:.55; transition:opacity .25s; }
.frow:hover .frow__plus{ opacity:1; }
.frow__plus::before,.frow__plus::after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:2px; background:var(--ink); transform:translate(-50%,-50%); transition:.35s; }
.frow__plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.frow.open .frow__plus::after{ transform:translate(-50%,-50%) rotate(0); }
.frow.open .frow__title h3{ color:var(--accent); }
.frow.open{ background:var(--paper-2); }

.fdrawer{ overflow:hidden; border-bottom:1px solid var(--line); }
.fdrawer__inner{ overflow:hidden; max-height:0; transition:max-height .5s cubic-bezier(.2,.7,.2,1); }
.fdrawer__pad{
  display:grid; grid-template-columns:minmax(170px,240px) minmax(0,1fr); gap:clamp(24px,4vw,56px);
  padding:6px 0 clamp(30px,4vw,48px); align-items:start; background:var(--paper-2);
}
.fdrawer__media{ position:relative; overflow:hidden; background:var(--paper-3); aspect-ratio:2/3; border:1px solid var(--line); }
.fdrawer__media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.02); }
.fdrawer__media .noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.fdrawer__syn{ font-size:clamp(17px,1.7vw,24px); line-height:1.35; letter-spacing:-.015em; color:var(--ink); max-width:50ch; margin:0; font-weight:500; }
.fdrawer__specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:18px 26px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.spec .sk{ display:block; margin-bottom:6px; }
.spec .sv{ font-size:14px; line-height:1.4; }
.fdrawer__award{ margin-top:24px; display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:600; color:var(--accent); line-height:1.45; }
.fdrawer__award::before{ content:"★"; flex:none; }

@media(max-width:880px){
  .frow{ grid-template-columns:34px minmax(0,1fr) auto 30px; gap:14px; }
  .frow__role,.frow__fmt,.frow__status{ display:none; }
  .fdrawer__pad{ grid-template-columns:1fr; }
  .fdrawer__media{ max-width:180px; }
}

/* poster peek (desktop) — sized to each image's own format via JS */
.poster-peek{ position:fixed; z-index:800; width:188px; height:282px; pointer-events:none; overflow:hidden;
  opacity:0; transform:translate(-50%,-50%) scale(.94); transition:opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  border:1px solid var(--line-2); box-shadow:0 26px 60px rgba(14,17,19,.28); background:var(--paper-3); }
.poster-peek.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.poster-peek img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
@media(max-width:980px){ .poster-peek{ display:none; } }

/* ============================================================
   ABOUT page
   ============================================================ */
.about-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,80px); align-items:start; padding:clamp(34px,5vw,64px) 0; }
.about-hero__body h1{ margin:0 0 30px; font-weight:600; font-size:clamp(26px,3.6vw,52px); line-height:1.08; letter-spacing:-.025em; }
.about-hero__body h1 em{ font-style:normal; color:var(--accent); }
.about-hero__body p{ margin:0 0 16px; color:var(--ink-2); font-size:clamp(15px,1.1vw,17px); line-height:1.6; max-width:56ch; }
.about-hero__body p b{ color:var(--ink); font-weight:600; }
.about-bio p:last-child{ margin-bottom:0; }
.about-block{ margin-top:clamp(30px,3.6vw,46px); padding-top:clamp(26px,3vw,38px); border-top:1px solid var(--line); }
.about-block__label{ color:var(--ink-3); margin:0 0 14px; }
.about-block p:last-of-type{ margin-bottom:0; }
.edu-logos{ display:flex; align-items:center; gap:clamp(22px,3vw,40px); margin-top:22px; }
.edu-logo{ height:30px; width:auto; display:block; filter:grayscale(1); opacity:.78; transition:filter .4s ease, opacity .4s ease; }
.edu-logo--round{ height:40px; }
.edu-logo--wbd{ height:32px; }
.edu-logo--smi{ height:30px; }
.edu-logo:hover{ filter:grayscale(0); opacity:1; }
.about-media{ position:relative; }
.about-media .pa{ position:relative; overflow:hidden; background:var(--paper-3); border:1px solid var(--line-2); }
.about-media .pa img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .7s ease; }
.about-media .pa:hover img{ filter:grayscale(0); }
.about-media .pa.main{ aspect-ratio:4/5; }
.about-media .pa.small{ position:absolute; width:46%; aspect-ratio:1; right:-5%; bottom:-8%; border:6px solid var(--paper); }
.about-media .cap{ margin-top:14px; }
.markets{ padding:clamp(20px,2.4vw,28px) 0 0; }
.mk-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mk{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); padding:9px 14px; transition:.2s; }
.mk:hover{ color:var(--ink); border-color:var(--ink); }
@media(max-width:880px){ .about-hero{ grid-template-columns:1fr; gap:48px; } .about-media{ max-width:420px; } }

/* ON SET gallery */
.onset{ padding:clamp(40px,6vh,90px) 0; }
.onset-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.onset-cell{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-3); cursor:pointer; }
.onset-cell img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.onset-cell:hover img{ transform:scale(1.05); filter:grayscale(0); }
.onset-cell .expand{ position:absolute; right:10px; bottom:10px; width:28px; height:28px; border:1px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.85); transition:.3s; color:#fff; font-size:15px; mix-blend-mode:difference; }
.onset-cell:hover .expand{ opacity:1; transform:none; }
.onset-cell:first-child{ grid-column:span 2; grid-row:span 2; }
@media(max-width:760px){ .onset-grid{ grid-template-columns:repeat(2,1fr); } .onset-cell:first-child{ grid-column:span 2; grid-row:auto; } }

/* PRESS ledger */
.press{ padding:clamp(40px,6vh,90px) 0; }
.press-media{ position:relative; overflow:hidden; aspect-ratio:16/8; background:var(--paper-3); border:1px solid var(--line-2); margin-bottom:clamp(34px,4vw,56px); }
.press-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.press-list{ border-top:1px solid var(--line-3); }
.prow{ display:grid; grid-template-columns:80px minmax(0,2.4fr) minmax(0,3fr); gap:clamp(14px,2.2vw,40px);
  align-items:baseline; padding:clamp(16px,1.8vw,24px) 0; border-bottom:1px solid var(--line); }
.prow__yr{ font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.04em; }
.prow__title{ font-weight:800; font-size:clamp(18px,1.9vw,28px); line-height:1.04; letter-spacing:-.02em; text-transform:uppercase; }
.prow__award{ font-size:14px; color:var(--ink-2); line-height:1.45; }
.press-note{ margin-top:26px; }
@media(max-width:680px){ .prow{ grid-template-columns:60px 1fr; } .prow__award{ grid-column:2; } }

/* press — auto-scrolling carousel (full-bleed) */
.press-carousel{ position:relative; overflow:hidden;
  border-top:1px solid var(--line-3); border-bottom:1px solid var(--line-3);
  margin-bottom:clamp(30px,4.5vw,60px); background:var(--paper-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.press-carousel__track{ display:flex; width:max-content; animation:press-scroll 80s linear infinite; }
.press-carousel:hover .press-carousel__track{ animation-play-state:paused; }
.pc-cell{ margin:0; height:clamp(190px,23vw,300px); flex:none; overflow:hidden;
  border-right:1px solid var(--line); background:var(--paper-3); }
.pc-cell img{ height:100%; width:auto; display:block;
  filter:grayscale(1) contrast(1.04); transition:filter .55s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.pc-cell:hover img{ filter:grayscale(0) contrast(1.02); transform:scale(1.03); }
@keyframes press-scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .press-carousel__track{ animation:none; } }

/* press — section subheads */
.press-subhead{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--line-3); margin-bottom:4px; }
.press-subhead h3{ margin:0; font-weight:800; font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.02em; text-transform:uppercase; line-height:1; }
.press-subhead .label{ color:var(--ink-3); }

/* press — in-the-media notes */
.nrow{ display:grid; grid-template-columns:minmax(130px,190px) minmax(0,1fr) 32px; gap:clamp(14px,2.4vw,40px);
  align-items:center; padding:clamp(15px,1.7vw,22px) 0; border-bottom:1px solid var(--line);
  color:inherit; transition:padding-left .35s cubic-bezier(.2,.7,.2,1), background .25s ease; }
.nrow:hover{ padding-left:12px; }
.nrow__outlet{ color:var(--accent); }
.nrow__title{ font-weight:600; font-size:clamp(16px,1.45vw,21px); line-height:1.22; letter-spacing:-.01em; }
.nrow:hover .nrow__title{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.nrow__go{ justify-self:end; width:32px; height:32px; flex:none; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; opacity:.45; transition:.3s; }
.nrow__go svg{ width:13px; height:13px; stroke:var(--ink); }
.nrow:hover .nrow__go{ opacity:1; background:var(--ink); border-color:var(--ink); }
.nrow:hover .nrow__go svg{ stroke:var(--paper); }
@media(max-width:680px){
  .nrow{ grid-template-columns:minmax(0,1fr) 28px; row-gap:5px; align-items:start; }
  .nrow__outlet{ grid-row:1; grid-column:1; }
  .nrow__title{ grid-row:2; grid-column:1; }
  .nrow__go{ grid-row:1 / span 2; align-self:center; }
}

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:9500; background:rgba(236,238,241,.96); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:clamp(20px,5vw,80px); }
.lightbox.open{ display:flex; }
.lightbox__img{ max-width:100%; max-height:86vh; object-fit:contain; border:1px solid var(--line-2); box-shadow:0 40px 90px rgba(14,17,19,.3); }
.lightbox__close{ position:absolute; top:22px; right:28px; background:none; border:0; color:var(--ink); font-size:34px; line-height:1; cursor:pointer; opacity:.7; transition:.2s; }
.lightbox__close:hover{ opacity:1; color:var(--accent); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); background:var(--paper); border:1px solid var(--line-2); color:var(--ink); width:52px; height:52px; font-size:24px; line-height:1; cursor:pointer; opacity:.85; transition:.2s; display:flex; align-items:center; justify-content:center; }
.lightbox__nav:hover{ opacity:1; background:var(--ink); color:var(--paper); border-color:var(--ink); }
.lightbox__nav.prev{ left:clamp(14px,3vw,40px); }
.lightbox__nav.next{ right:clamp(14px,3vw,40px); }
@media(max-width:600px){ .lightbox__nav{ width:42px; height:42px; font-size:20px; } }

/* ============================================================
   CONTACT page
   ============================================================ */
.contact{ padding:clamp(40px,6vw,80px) 0 0; }
.contact__big{ margin:0; font-weight:800; font-size:clamp(48px,11vw,180px); line-height:.82; letter-spacing:-.045em; text-transform:uppercase; font-stretch:expanded; }
.contact__big em{ font-style:normal; color:var(--accent); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(40px,6vw,72px); }
.contact__cell{ background:var(--paper); padding:clamp(26px,3vw,44px); }
.contact__cell h4{ margin:0 0 18px; }
.contact__email{ font-weight:700; font-size:clamp(22px,3vw,40px); letter-spacing:-.02em; border-bottom:2px solid var(--line-2); padding-bottom:8px; display:inline-block; transition:.2s; }
.contact__email:hover{ color:var(--accent); border-color:var(--accent); }
.contact__socials{ display:flex; flex-direction:column; }
.contact__socials a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-weight:600; font-size:15px; transition:.2s; }
.contact__socials a:last-child{ border-bottom:0; }
.contact__socials a:hover{ color:var(--accent); padding-left:8px; }
.contact__socials a span.h{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
@media(max-width:760px){ .contact__grid{ grid-template-columns:1fr; } }