/* ============================================================
   ARCLIGHT — Version C ("Chew" direction) — styles.css

   Contents
     1. Tokens & reset
     2. Nav (fixed header + WORK submenu)
     3. Deck (full-screen slides, wipe transitions)
     4. Slide title (typed reveal) + PLAY link
     5. Bottom rail + tick nav
     6. Contact slide
     7. Shared page chrome (sticky CLOSE bar, kickers)
     8. Overlays: film player · 8b about/contact · 8c work index · 8d case pages
     9. Responsive + reduced motion

   Conventions
     - One type family (Inter Tight — free stand-in for Elza/Blackletra,
       the production license target); hierarchy = weight/size/tracking.
     - All colors and shared values live in :root tokens — edit them there.
     - Layers open with a top-to-bottom wipe (clip-path), mirroring the deck.
     - z-index map: nav 40 / player 39 (below nav on purpose) / pages 70 /
       overlays 80 / faux-fullscreen 85.
   ============================================================ */


/* ---------- 1. tokens & reset ---------- */
:root{
  --ink:#0A0A0A;            /* page black */
  --paper:#F1EFE9;          /* off-white text */
  --paper-dim:rgba(241,239,233,.6);
  --signal:#E8302A;         /* accent red — selection, scrollbar */
  --gutter:clamp(20px,4.5vw,64px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --layer-wipe:650ms;       /* page/player open-close wipe; deck wipe = WIPE in app.js */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
html{
  /* stops Safari's rotate font-boost from surviving the trip back to portrait */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body{touch-action:manipulation}   /* kills double-tap zoom delay; pinch still works */
body{
  background:var(--ink);color:var(--paper);
  font-family:'Inter Tight',sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--signal);color:var(--paper)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
a{color:inherit;text-decoration:none}
button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;text-align:left}


/* ---------- 2. nav: brand hard left; links occupy the right two-thirds, chew-style ---------- */
nav{
  position:fixed;inset:0 0 auto 0;z-index:40;height:76px;
  display:flex;align-items:center;
  padding:0 var(--gutter);
}
.wordmark{font-weight:800;font-size:22px;letter-spacing:.01em;text-transform:uppercase;flex:0 0 auto}
.nav-menu{
  margin-left:auto;width:min(67vw,1500px);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.nav-btn{
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.85;transition:opacity .25s var(--ease-io);padding:6px 0;
}
/* active tab reads through full opacity alone — no underline (client call) */
.nav-btn:hover,.nav-btn[aria-current="true"]{opacity:1}

/* ---------- 2b. mobile menu (burger + full-screen typographic overlay) ---------- */
.nav-burger{
  display:none;margin-left:auto;
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 0 14px 20px;                    /* generous tap target */
}
.m-menu{
  position:fixed;inset:0;z-index:95;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(76px + env(safe-area-inset-top)) var(--gutter) calc(34px + env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path var(--layer-wipe) var(--ease-io),visibility 0s var(--layer-wipe);
}
.m-menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path var(--layer-wipe) var(--ease-io)}
.m-close{
  position:absolute;top:calc(22px + env(safe-area-inset-top));right:var(--gutter);
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 0 8px 20px;
}
.m-links{display:flex;flex-direction:column;gap:clamp(10px,2.5vh,22px)}
.m-link{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(44px,13vw,100px);line-height:.95;letter-spacing:-.02em;
  opacity:0;transform:translateY(16px);
}
.m-menu.open .m-link{animation:m-in .55s var(--ease-out) forwards}
.m-menu.open .m-link:nth-child(2){animation-delay:.07s}
.m-menu.open .m-link:nth-child(3){animation-delay:.14s}
.m-menu.open .m-link:nth-child(4){animation-delay:.21s}
@keyframes m-in{to{opacity:1;transform:none}}
.m-foot{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:calc(30px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.m-mail{font-weight:600;font-size:13px;letter-spacing:.04em}
.m-build{
  position:absolute;right:0;top:-22px;
  font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,239,233,.35);
}
.m-foot .socials{display:flex;gap:18px}
.m-foot .socials svg{width:18px;height:18px;fill:var(--paper)}



/* ---------- 3. the deck: directional wipes ---------- */
.deck{position:fixed;inset:0}
.slide{position:absolute;inset:0;visibility:hidden}
.slide.stage{visibility:visible}       /* participating in view or transition */
.slide.under{z-index:2}
.slide.over{z-index:3}
.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .tint{position:absolute;inset:0;background:rgba(10,10,10,.24)}


/* ---------- 4. title: typed out ---------- */
/* the slide's text is one tight stack: title → subtitle → VIEW PROJECT,
   all wearing the project accent (g&g rhythm, our left-anchored layout) */
.s-stack{
  position:absolute;left:var(--gutter);top:50%;transform:translateY(-46%);
  max-width:86vw;
  color:var(--slide-accent,var(--paper));
}
.s-title{
  /* g&g ratio: title ~13x the small lines (they run ~208px vs 16px) */
  font-weight:900;text-transform:uppercase;      /* elza-black display, g&g-style */
  font-size:clamp(64px,10.5vw,210px);line-height:.93;letter-spacing:-.02em;
  margin-left:-0.025em; /* optical: glyph edge sits on the gutter line */
}
.s-title .line{display:block;white-space:nowrap}
.s-title .ch{opacity:0}
.s-title .ch.on{opacity:1}
/* subtitle sits ABOVE the title, set exactly like the CTA below it —
   the two small lines bracket the display title at matched voice */
.s-sub{
  margin-bottom:clamp(6px,.65vw,13px);           /* matched tight gaps */
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease-io),transform .6s var(--ease-io);
}
.slide.typed .s-sub{opacity:.95;transform:none}
/* the CTA at g&g weight; the ↗ is an SVG stroked to match (see ARROW_NE) */
.s-watch{
  margin-top:clamp(6px,.65vw,13px);              /* mirror of the gap above */
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease-io),transform .6s var(--ease-io) .08s;
}
.slide.typed .s-watch{opacity:.95;transform:none}
.s-watch .arrow{width:.78em;height:.78em;flex:0 0 auto;transition:transform .4s var(--ease-out)}
.s-watch:hover .arrow{transform:translate(4px,-4px)}   /* ↗ escapes up-right */

/* showreel slide: the cursor IS the play button — a floating PLAY label
   tracks the pointer; the native cursor hides over the footage */
.slide.reel{cursor:none}
.cursor-play{
  position:fixed;left:0;top:0;z-index:45;pointer-events:none;
  transform:translate(-50%,-50%);
  font-weight:700;font-size:15px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);
  opacity:0;transition:opacity .25s var(--ease-io);
  will-change:transform;
}
.cursor-play.on{opacity:1}
body.player-open .cursor-play{opacity:0 !important}


/* ---------- 5. bottom rail + tick nav ---------- */
.rail{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:26px;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;
  font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  transition:opacity .4s var(--ease-io);
}
.rail .tagline{justify-self:start;line-height:1.7;font-weight:700;color:var(--paper)}
.rail .meta{
  justify-self:center;text-align:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease-io),transform .6s var(--ease-io);
}
.rail.typed .meta{opacity:1;transform:none}
.rail .meta b{font-weight:700;color:var(--paper)}
.rail .meta span{color:var(--paper-dim)}
.rail .idx{justify-self:end;display:flex;align-items:center;gap:14px}
.rail .idx .cur{font-size:13px;font-weight:700}
.rail .idx .tot{color:var(--paper-dim)}

/* auto-advance progress: a thin line that fills across the dwell, then the
   deck moves to the next project (forms.world pattern) */
.aa{
  position:relative;width:clamp(110px,11vw,200px);height:12px;overflow:hidden;
}
.aa::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(241,239,233,.25)}
.aa-fill{
  position:absolute;left:0;right:0;top:50%;height:1px;background:var(--paper);
  transform:scaleX(0);transform-origin:left;
}

body.player-open .rail{opacity:0 !important;pointer-events:none}


/* ---------- 6. contact slide (deck teaser — the full page is #page-contact) ---------- */
.slide.contact{background:var(--ink)}
.contact-wrap{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 var(--gutter);text-align:center;
}
/* title + CTA match the project slides exactly (same scale, same voice) */
.contact-wrap h2{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(64px,10.5vw,210px);line-height:.93;letter-spacing:-.02em;
}
.c-cta{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:clamp(6px,.65vw,13px);
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  transition:opacity .25s var(--ease-io);
}
.c-cta:hover{opacity:.7}
.c-cta .arrow{width:.78em;height:.78em;flex:0 0 auto;transition:transform .4s var(--ease-out)}
.c-cta:hover .arrow{transform:translate(4px,-4px)}
.c-rows{display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;justify-content:center}
.c-link{
  font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .35s var(--ease-io),color .3s var(--ease-io);
}
.c-link:hover{background-size:100% 1px;color:#fff}
.socials{display:inline-flex;gap:22px;justify-content:center}
.socials a{opacity:.8;transition:opacity .25s var(--ease-io);display:inline-flex}
.socials a:hover{opacity:.5}
.socials svg{width:18px;height:18px;fill:var(--paper)}
.c-foot{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim);
}


/* ---------- 7. shared page chrome (sticky BACK/CLOSE bar, kickers) ---------- */
.p-top{
  position:sticky;top:0;z-index:5;height:76px;
  display:flex;align-items:center;justify-content:flex-end;   /* CLOSE alone, right edge */
  padding:0 var(--gutter);
  background:linear-gradient(180deg,var(--ink) 55%,transparent);
}
.p-close{
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.85;transition:opacity .25s var(--ease-io);padding:6px 0;
}
.p-close:hover{opacity:1}
.p-kicker{
  font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-dim);
}



/* ---------- 8. overlays: shared shell, film player ---------- */
.lay{
  position:fixed;inset:0;z-index:80;background:rgba(5,5,5,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease-io),visibility 0s .4s;
}
.lay.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease-io)}

/* film player — custom text controls, no native chrome.
   Opens with the same top-to-bottom wipe as the other layers. */
.player{
  z-index:39;background:var(--ink);   /* below the nav (z40): the header stays live, chew-style */
  opacity:1;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--layer-wipe) var(--ease-io),visibility 0s var(--layer-wipe);
}
.player.open{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--layer-wipe) var(--ease-io);
}
.pl-wrap{position:absolute;inset:0}
.player video{
  position:absolute;left:0;right:0;top:132px;bottom:96px;
  width:100%;height:calc(100% - 228px);object-fit:contain;background:#000;
}
/* native fullscreen: the video owns the WHOLE screen and the bar rides
   on top of it — nothing is reserved, so the footage gets every pixel
   the aspect ratio allows (the old stacked layout boxed it on phones).
   webkit-prefixed copies kept separate: an unknown pseudo-class voids
   a whole selector list. */
/* prev/next project arrows — thin single-line chevrons riding the video's
   edges. Mouse-revealed (hover devices only), gone in every fullscreen. */
.pl-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  padding:18px 12px;opacity:0;transition:opacity .35s var(--ease-io);
}
.pl-prev{left:8px}
.pl-next{right:8px}
.pl-arrow svg{width:34px;height:34px;display:block;fill:none;stroke:var(--paper);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* hover-capable devices only: phones keep :hover stuck on the last
   tapped element, which pinned a tapped arrow visible through the fade */
@media (hover:hover){
  .pl-wrap:hover .pl-arrow{opacity:.85}
  .pl-wrap .pl-arrow:hover{opacity:1}
}
.player.solo .pl-arrow{display:none}
.pl-wrap:fullscreen .pl-arrow{display:none}
.pl-wrap:-webkit-full-screen .pl-arrow{display:none}
.player.faux-fs .pl-arrow{display:none}
/* touch: no hover to reveal them, so the arrows stay quietly present;
   tap steps between projects (fullscreen and solo rules still apply) */
@media (hover:none){
  .pl-arrow{opacity:.75}
  .pl-arrow svg{width:28px;height:28px}
  .player.arrows-idle .pl-arrow{opacity:0;pointer-events:none}
}

/* fullscreen: controls sleep after a beat of stillness, wake on movement
   (.fs-idle set by fsIdleHide() in app.js; harmless outside fullscreen) */
.pl-bar{transition:opacity .4s var(--ease-io)}
.player.fs-idle .pl-wrap:fullscreen .pl-bar{opacity:0;pointer-events:none}
.player.fs-idle .pl-wrap:-webkit-full-screen .pl-bar{opacity:0;pointer-events:none}
.player.faux-fs.fs-idle .pl-bar{opacity:0;pointer-events:none}
.player.fs-idle .pl-wrap:fullscreen{cursor:none}
.player.fs-idle .pl-wrap:-webkit-full-screen{cursor:none}
.player.faux-fs.fs-idle{cursor:none}

.pl-wrap:fullscreen{background:#000}
.pl-wrap:fullscreen video{top:0;bottom:0;height:100%}
.pl-wrap:fullscreen .pl-cap{display:none}
.pl-wrap:fullscreen .pl-close{display:none}
.pl-wrap:-webkit-full-screen{background:#000}
.pl-wrap:-webkit-full-screen video{top:0;bottom:0;height:100%}
.pl-wrap:-webkit-full-screen .pl-cap{display:none}
.pl-wrap:-webkit-full-screen .pl-close{display:none}
/* faux-fullscreen: same takeover drawn by us — for hosts without the
   Fullscreen API (iframes, iPhones) and for the rotate-to-landscape
   auto-fullscreen on phones */
.player.faux-fs{z-index:96;background:#000}
.player.faux-fs video{top:0;bottom:0;height:100%}
.player.faux-fs .pl-cap{display:none}
.player.faux-fs .pl-close{display:none}

.pl-bar{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:2;
  display:flex;align-items:flex-end;gap:clamp(24px,3.5vw,56px);
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.pl-bar button{padding:4px 0;opacity:.9;transition:opacity .25s var(--ease-io);text-transform:uppercase;letter-spacing:.16em}
.pl-bar button:hover{opacity:.55}
.pl-sound.off{text-decoration:line-through;opacity:.55}
.pl-track{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.pl-time{font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.pl-line{position:relative;width:100%;height:16px}
.pl-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(241,239,233,.3)}
.pl-fill{position:absolute;left:0;top:50%;height:1px;background:var(--paper);width:0;transition:none}
.pl-cap{
  position:absolute;left:var(--gutter);right:var(--gutter);top:94px;z-index:2;
  display:flex;justify-content:space-between;gap:24px;
  font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.pl-cap span{color:var(--paper-dim);font-weight:500}

/* fullscreen diagnostics readout — only rendered with ?fsdebug in the URL */
.fs-debug{
  position:fixed;left:12px;bottom:12px;z-index:99;
  padding:10px 14px;background:rgba(5,5,5,.85);border:1px solid rgba(241,239,233,.25);
  font-family:monospace;font-size:11px;line-height:1.6;color:var(--paper);
  white-space:pre;pointer-events:none;
}


/* ---------- 8b. about + contact pages ---------- */
.page{
  position:fixed;inset:0;z-index:70;background:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path var(--layer-wipe) var(--ease-io),visibility 0s var(--layer-wipe);
}
.page.open{
  clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path var(--layer-wipe) var(--ease-io);
}
.page::-webkit-scrollbar{width:10px;background:var(--ink)}
.page::-webkit-scrollbar-thumb{background:var(--signal)}

/* about — ghost-watermark hero (forms.world) with the statement at the
   work-page display spec, then manifesto, film band, dictionary,
   clients marquee, closing band */
.ab-hero{
  position:relative;overflow:hidden;
  /* the statement clears the watermark completely — one monument only */
  padding:calc(60px + 18.5vw + clamp(20px,4vh,44px)) var(--gutter) clamp(48px,9vh,110px);
}
.ab-ghost{
  position:absolute;left:var(--gutter);top:60px;   /* left-indented like every page title */
  white-space:nowrap;pointer-events:none;user-select:none;
  font-weight:900;text-transform:uppercase;
  font-size:clamp(120px,17.5vw,380px);line-height:1;letter-spacing:-.03em;
  color:rgba(241,239,233,.05);          /* the near-black watermark owns the hero */
}
.ab-hero h1{
  position:relative;
  font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,3.8vw,62px);line-height:1.04;letter-spacing:-.01em;
  max-width:24ch;
}
.ab-sec{
  display:grid;grid-template-columns:minmax(150px,22%) 1fr;column-gap:clamp(32px,5vw,90px);
  padding:clamp(48px,9vh,110px) var(--gutter);
  border-top:1px solid rgba(241,239,233,.22);
}
.ab-sec .p-kicker{padding-top:6px}
.ab-sec h2{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,58px);line-height:1.02;letter-spacing:-.02em;
  max-width:22ch;
}
.ab-sec .ab-body{margin-top:28px;max-width:62ch;display:flex;flex-direction:column;gap:18px}
.ab-sec .ab-body p{font-weight:400;font-size:16px;line-height:1.7;color:var(--paper-dim)}
.ab-band{margin:0 var(--gutter) clamp(48px,9vh,110px);aspect-ratio:21/9;overflow:hidden;background:#050505}
.ab-band video{width:100%;height:100%;object-fit:cover}

/* the word squares — THE NAME (5×5 original) and OUR ANSWER (4×4).
   Letter grid + gloss column; accented letters carry the structure
   (TENET cross / the diagonal). */
.sq-intro{
  font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:26px;max-width:52ch;line-height:1.9;
}
.sq-flex{display:flex;gap:clamp(32px,4.5vw,80px);align-items:flex-start;flex-wrap:wrap}
.sq-grid{display:grid;border:1px solid rgba(241,239,233,.35);flex:0 0 auto}
.sq-grid.c5{grid-template-columns:repeat(5,clamp(46px,6.2vw,92px));grid-auto-rows:clamp(46px,6.2vw,92px)}
.sq-grid.c4{grid-template-columns:repeat(4,clamp(54px,7vw,104px));grid-auto-rows:clamp(54px,7vw,104px)}
.sq-grid span{
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(241,239,233,.16);
  font-weight:900;font-size:clamp(20px,3vw,44px);line-height:1;
  color:rgba(241,239,233,.42);
}
.sq-grid span.on{color:var(--paper)}
.sq-side{flex:1 1 260px;min-width:240px;max-width:430px}
.sq-word{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(241,239,233,.14)}
.sq-word:last-of-type{border-bottom:0}
.sq-word b{font-weight:900;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.01em;text-transform:uppercase}
.sq-word span{font-weight:500;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(241,239,233,.5);margin-left:auto;text-align:right;max-width:60%}
.sq-note{
  margin-top:24px;font-weight:500;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(241,239,233,.45);line-height:2;
}

/* clients marquee — slow auto-drift, duplicated track for a seamless wrap,
   masked edges, pauses on hover. Flagged by motion linters; conscious choice. */
.ab-mq{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ab-mq-track{
  display:flex;align-items:baseline;gap:clamp(44px,6vw,110px);width:max-content;
  padding:10px 0;
  animation:ab-mq 60s linear infinite;
}
.ab-mq:hover .ab-mq-track{animation-play-state:paused}
.ab-mq span{
  white-space:nowrap;text-transform:uppercase;color:var(--paper);opacity:.42;
  font-size:clamp(20px,2.2vw,34px);letter-spacing:.03em;
}
.ab-mq span:nth-child(4n+1){font-weight:800}
.ab-mq span:nth-child(4n+2){font-weight:500;letter-spacing:.14em}
.ab-mq span:nth-child(4n+3){font-weight:700;font-style:italic}
.ab-mq span:nth-child(4n){font-weight:600}
@keyframes ab-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ab-based{
  padding:clamp(72px,16vh,180px) var(--gutter);text-align:center;
  border-top:1px solid rgba(241,239,233,.22);
}
.ab-based h2{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(48px,8.5vw,132px);line-height:.93;letter-spacing:-.025em;
}

/* ---------- 8c. work index ----------
   giant left-anchored WORK. title, filter row in the CTA
   voice, and a breathing grid of thumbnail tiles (footage on hover).
   Filtering floats matches up with a FLIP translate (renumbered) and
   dims the rest in place. Arclight language, not the g&g mosaic.      */
.wk-head{padding:clamp(40px,8vh,90px) var(--gutter) clamp(28px,4.5vh,56px)}
.wk-title{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(64px,10.5vw,210px);line-height:.93;letter-spacing:-.02em;
  margin-left:-0.025em;
}
.wk-filter{
  display:flex;flex-wrap:wrap;gap:12px clamp(22px,3vw,44px);
  margin-top:clamp(18px,2.6vh,30px);
}
.wk-filter button{
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(241,239,233,.35);transition:color .3s var(--ease-io);
}
.wk-filter button:hover{color:var(--paper-dim)}
.wk-filter button[aria-pressed="true"]{color:var(--paper)}

.wk-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vh,44px) clamp(14px,1.6vw,26px);
  padding:0 var(--gutter) 10vh;
}
.wk-item{transition:opacity .5s var(--ease-io);will-change:transform}
.wk-item.dim{opacity:.18;pointer-events:none}
.wk-tile{
  display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:#050505;padding:0;cursor:pointer;
}
.wk-tile video{width:100%;height:100%;object-fit:cover}
/* rest state: still thumbnail; hover lifts it and the loop plays under */
.wk-thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .45s var(--ease-io);
}
/* coming-soon tiles: black card, the brand wordmark set in the site's
   own display voice (these marks ARE the logos), COMING SOON on hover */
.wk-tile.soon{
  display:flex;align-items:center;justify-content:center;
  background:#050505;cursor:default;position:relative;
}
.wk-mark{
  font-weight:900;font-size:clamp(26px,3.2vw,52px);letter-spacing:-.01em;
  text-transform:uppercase;color:var(--paper);
}
.wk-soon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.88);opacity:0;transition:opacity .35s var(--ease-io);
  font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper-dim);
}
.wk-tile.soon:hover .wk-soon{opacity:1}
/* touch has no hover — the notice sits as a quiet corner tag instead */
@media (hover:none){
  .wk-soon{
    inset:auto 12px 12px auto;background:none;opacity:1;
    font-size:10px;color:rgba(241,239,233,.55);
  }
}

/* the thumb yields only once footage is actually PLAYING (.live, set by
   the video's playing/pause events) — hover alone used to hide it while
   a preload="none" loop was still fetching, leaving a black tile */
.wk-tile.live .wk-thumb{opacity:0}
/* touch/hover landed but frames are still fetching: the thumb dims and
   a small caps LOADING sits where the slate line usually is */
.wk-tile.loading .wk-thumb{opacity:.45}
.wk-tile.loading::after{
  content:"Loading";
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);
  animation:wk-load 1.1s ease-in-out infinite;
}
@keyframes wk-load{0%,100%{opacity:.35}50%{opacity:1}}
.wk-info{padding-top:12px}
.wk-info .t{
  font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wk-info .t .n{color:var(--paper-dim);font-weight:500;margin-right:10px}
.wk-info .d{
  margin-top:4px;
  font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);
}

/* ---------- 8d. case page (g&g format) ----------
   centered accent header, then info column left /
   media column right, then a NEXT PROJECT footer that keeps people inside */
.cs-head{
  /* tight top: the film's control bar must land inside the first viewport */
  padding:clamp(14px,2.5vh,28px) var(--gutter) clamp(36px,6vh,72px);
  text-align:center;color:var(--case-accent,var(--paper));
}
.cs-tags{
  margin-bottom:clamp(10px,1.2vw,20px);line-height:1.5;
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
}
.cs-head h1{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(64px,10.5vw,210px);line-height:.93;letter-spacing:-.02em;
}
.cs-grid{
  display:grid;grid-template-columns:minmax(300px,38%) 1fr;
  column-gap:clamp(28px,3vw,56px);align-items:start;
  padding:0 var(--gutter) clamp(48px,8vh,96px);
}
.cs-info{position:sticky;top:90px}
.cs-info h3{
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--case-accent,var(--paper));margin:0 0 10px;
}
.cs-info p{
  font-weight:500;font-size:16px;line-height:1.6;
  color:var(--case-accent,var(--paper));margin-bottom:clamp(24px,3.5vh,40px);
}
.cs-slate{display:flex;flex-direction:column;margin-top:clamp(10px,1.5vh,20px)}
.cs-slate .row{
  display:grid;grid-template-columns:minmax(110px,28%) 1fr;column-gap:20px;
  padding:14px 0;border-top:1px solid rgba(241,239,233,.22);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}
.cs-slate dt{font-weight:500;color:var(--paper-dim)}
.cs-slate dd{font-weight:700}
.cs-media{display:flex;flex-direction:column;gap:clamp(10px,1vw,18px)}
.cs-media video,.cs-media img{width:100%;display:block;background:#050505}
/* collage rows: full-width 16:9 stills, or a pair of half-frames side by
   side (each 8:9). pos/zoom in data.js crop into subjects and jewelry. */
.cs-full{aspect-ratio:16/9;overflow:hidden}
.cs-full img{height:100%;object-fit:cover}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1vw,18px)}
.cs-pair .cell{aspect-ratio:8/9;overflow:hidden;background:#050505}
.cs-pair .cell img{width:100%;height:100%;object-fit:cover}

/* ---- text player: the site-wide rule for ANY embedded video asset ----
   No native chrome, ever. The same typographic bar as the screening room:
   PAUSE · SOUND · timeline · FULLSCREEN, riding the bottom of the frame. */
.tp{position:relative;overflow:hidden;background:#050505}
.tp video{width:100%;display:block}
/* text-player fullscreen — native (element API) and faux (our own
   takeover: iPhones + rotate-to-landscape). Video gets the whole
   viewport, the bar overlays it, the chapter strip hides. */
.tp:fullscreen .tp-strip{display:none}
.tp:-webkit-full-screen .tp-strip{display:none}
.tp.faux-fs .tp-strip{display:none}
/* controls sleep in fullscreen after a beat, wake on movement */
.tp-bar{transition:opacity .4s var(--ease-io)}
.tp:fullscreen.fs-idle .tp-bar{opacity:0;pointer-events:none}
.tp:-webkit-full-screen.fs-idle .tp-bar{opacity:0;pointer-events:none}
.tp.faux-fs.fs-idle .tp-bar{opacity:0;pointer-events:none}
.tp:fullscreen.fs-idle{cursor:none}
.tp:-webkit-full-screen.fs-idle{cursor:none}
.tp.faux-fs.fs-idle{cursor:none}
.tp:fullscreen{background:#000}
.tp:fullscreen video{width:100%;height:100%;object-fit:contain}
.tp:-webkit-full-screen{background:#000}
.tp:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}
.tp.faux-fs{position:fixed;inset:0;z-index:96;background:#000}
.tp.faux-fs video{width:100%;height:100%;object-fit:contain}
.tp.faux-fs .tp-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.tp-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;gap:clamp(16px,2vw,32px);
  padding:14px 18px;
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.55));
  font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);
}
.tp-bar button{padding:2px 0;opacity:.9;transition:opacity .25s var(--ease-io);text-transform:uppercase;letter-spacing:.16em}
.tp-bar button:hover{opacity:.55}
.tp-sound.off{text-decoration:line-through;opacity:.55}
.tp-track{flex:1;display:flex;align-items:center;gap:12px;cursor:pointer}
.tp-time{font-weight:500;font-size:10px;letter-spacing:.1em;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.tp-line{position:relative;flex:1;height:14px}
.tp-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(241,239,233,.3)}
.tp-fill{position:absolute;left:0;top:50%;height:1px;background:var(--paper);width:0}
/* chapter filmstrip: scene thumbnails on the film's right edge; the
   chapter under the playhead stays lit (forms.world pattern) */
.tp-strip{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:6px;
}
.tp-strip button{
  width:clamp(72px,6.5vw,104px);aspect-ratio:16/9;padding:0;overflow:hidden;
  background:#050505;border:1px solid rgba(241,239,233,.18);
  opacity:.5;transition:opacity .3s var(--ease-io),border-color .3s var(--ease-io);
}
.tp-strip button:hover{opacity:.85}
.tp-strip button.on{opacity:1;border-color:rgba(241,239,233,.75)}
.tp-strip img{width:100%;height:100%;object-fit:cover;display:block}

.tp:fullscreen{display:flex;align-items:center;justify-content:center;background:#000}
.tp:fullscreen video{max-height:100vh;object-fit:contain}
.tp:-webkit-full-screen{display:flex;align-items:center;justify-content:center;background:#000}
.tp:-webkit-full-screen video{max-height:100vh;object-fit:contain}
/* next-project footer — the engagement loop */
.cs-next{
  padding:clamp(48px,8vh,96px) var(--gutter) clamp(32px,5vh,56px);
  border-top:1px solid rgba(241,239,233,.22);
}
.cs-next .p-kicker{margin-bottom:26px}
.cs-next-row{
  display:grid;grid-template-columns:auto 1fr auto;column-gap:clamp(20px,3vw,48px);align-items:baseline;
  width:100%;padding:18px 0;border-bottom:1px solid rgba(241,239,233,.22);
  text-transform:uppercase;transition:opacity .25s var(--ease-io);
}
.cs-next-row:hover{opacity:.6}
.cs-next-row .n{font-weight:500;font-size:12px;letter-spacing:.14em;color:var(--paper-dim)}
.cs-next-row .t{font-weight:800;font-size:clamp(22px,2.6vw,42px);letter-spacing:-.01em;line-height:1}
.cs-next-row .a{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:13px;letter-spacing:.04em;
}
.cs-next-row .a .arrow{width:.78em;height:.78em}
.cs-all{
  margin-top:34px;display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  transition:opacity .25s var(--ease-io);
}
.cs-all:hover{opacity:.6}
.cs-all .arrow{width:.78em;height:.78em}

/* site footer (g&g-style page ending): socials + nav links + copyright,
   giving long pages a landing zone instead of a hard edge */
.site-foot{
  padding:clamp(36px,6vh,64px) var(--gutter) clamp(44px,7vh,72px);
  border-top:1px solid rgba(241,239,233,.22);
  display:flex;flex-direction:column;gap:clamp(30px,5vh,52px);
}
.sf-row{display:flex;justify-content:space-between;align-items:center;gap:24px}
.sf-nav{display:flex;gap:clamp(24px,4vw,56px)}
.sf-nav button{
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.85;transition:opacity .25s var(--ease-io);
}
.sf-nav button:hover{opacity:1}
/* centered brand base, version-A flavor: the mark, then the rights line */
.sf-base{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-dim);
}
.sf-mark{font-weight:800;font-size:clamp(24px,2.4vw,38px);letter-spacing:.01em;text-transform:uppercase;color:var(--paper)}

/* the case page opens with a CENTER SPLIT — the seam parts from the
   middle and wipes left+right to reveal the page (overrides the shared
   top-to-bottom page wipe) */
#page-case{clip-path:inset(0 50% 0 50%)}
#page-case.open{clip-path:inset(0 0 0 0)}

/* case entrance: keyframe animations (transitions never fire on freshly
   inserted nodes) — copy fades in top-to-bottom, THEN the slate's
   separator lines draw left-to-right */
@keyframes cs-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes cs-line{from{width:0}to{width:100%}}
#page-case.open .cs-info > *{
  opacity:0;
  animation:cs-in .6s var(--ease-io) forwards;
}
#page-case.open .cs-info > *:nth-child(1){animation-delay:.35s}
#page-case.open .cs-info > *:nth-child(2){animation-delay:.5s}
#page-case.open .cs-info > *:nth-child(3){animation-delay:.65s}
#page-case.open .cs-info > *:nth-child(4){animation-delay:.8s}
#page-case.open .cs-info > *:nth-child(5){animation-delay:.95s}
#page-case .cs-slate .row{border-top:0;position:relative}
#page-case .cs-slate .row::before{
  content:"";position:absolute;top:0;left:0;height:1px;width:0;
  background:rgba(241,239,233,.22);
}
#page-case.open .cs-slate .row::before{animation:cs-line .7s var(--ease-io) forwards}
#page-case.open .cs-slate .row:nth-child(1)::before{animation-delay:1.05s}
#page-case.open .cs-slate .row:nth-child(2)::before{animation-delay:1.17s}
#page-case.open .cs-slate .row:nth-child(3)::before{animation-delay:1.29s}
#page-case.open .cs-slate .row:nth-child(4)::before{animation-delay:1.41s}
#page-case.open .cs-slate .row:nth-child(5)::before{animation-delay:1.53s}

/* view-transition morph: the slide's subtitle/title travel into the case
   header. Only the NEW snapshot is shown (no crossfade ghosting), and the
   root stays static so the center split carries the reveal. */
#page-case .cs-head h1{view-transition-name:case-title}
#page-case .cs-head .cs-tags{view-transition-name:case-tags}
::view-transition-group(case-title),
::view-transition-group(case-tags){animation-duration:.65s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(case-title),
::view-transition-old(case-tags){display:none}
::view-transition-new(case-title),
::view-transition-new(case-tags){animation:none;height:100%;width:100%}
::view-transition-old(root),
::view-transition-new(root){animation:none}

/* contact — full-height film strip left, everything else right.
   negative top margin slides the strip under the sticky BACK/CLOSE bar */
.ct-grid{display:grid;grid-template-columns:minmax(280px,34vw) 1fr;min-height:100vh;margin-top:-76px}
.ct-media{position:relative;overflow:hidden;background:#050505}
.ct-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ct-media::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.24)}
.ct-main{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(76px + 6vh) clamp(28px,4.5vw,80px) 34px;gap:clamp(36px,6vh,64px);
}
.ct-title{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(48px,6.8vw,116px);line-height:.93;letter-spacing:-.025em;
}
/* flex-wrap, not auto-fit grid: the email is one unbreakable string whose
   width tracks the viewport font clamp, so a fixed 220px column floor let
   it spill into the next column at mid window widths. max-content floors
   each block at its own natural width — blocks wrap instead of colliding */
.ct-rows{
  display:flex;flex-wrap:wrap;
  gap:clamp(28px,4vw,56px);
}
.ct-rows .ct-block{flex:1 1 220px;min-width:max-content}
.ct-block .p-kicker{margin-bottom:12px}
.ct-big{
  display:inline-block;
  font-weight:700;text-transform:uppercase;font-size:clamp(17px,1.7vw,26px);letter-spacing:.01em;
  transition:opacity .25s var(--ease-io);
}
a.ct-big:hover{opacity:.55}
/* the email reads as typed — lowercase is the address's real form */
a.ct-big[href^="mailto:"]{text-transform:none}
.ct-block address{
  font-style:normal;font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.7vw,26px);line-height:1.25;letter-spacing:.01em;
}
.ct-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-top:26px;border-top:1px solid rgba(241,239,233,.22);
  font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim);
}
.ct-foot .tag{line-height:1.7}
.ct-follow{display:flex;align-items:center;gap:22px}


/* ---------- 9. responsive + reduced motion ---------- */

/* notch / home-indicator clearance on every fixed chrome piece;
   in landscape the camera island eats the left edge — the gutter
   absorbs whichever inset is larger so content never hides behind it */
@supports (padding:env(safe-area-inset-top)){
  :root{--gutter:max(clamp(20px,4.5vw,64px), env(safe-area-inset-left), env(safe-area-inset-right))}
  nav{padding-top:env(safe-area-inset-top);height:calc(76px + env(safe-area-inset-top))}
  .rail{bottom:calc(26px + env(safe-area-inset-bottom))}
  .pl-bar{bottom:calc(26px + env(safe-area-inset-bottom))}
}

/* the second query keeps LANDSCAPE phones on the mobile layout too —
   without it, iOS Safari (which maps device-width to 852 in landscape)
   flips to the desktop layout while Chrome-iOS stays mobile */
@media (max-width:820px), (pointer:coarse) and (max-width:1000px){
  .nav-menu{display:none}
  .nav-burger{display:block}
  .rail{grid-template-columns:1fr auto;gap:12px}
  .rail .tagline{display:none}
  .s-title,.contact-wrap h2,.wk-title{font-size:clamp(44px,13vw,100px)}
  .ab-sec{grid-template-columns:1fr;row-gap:20px}
  .ab-hero{padding-top:calc(76px + 26vw)}
  .ab-ghost{font-size:clamp(48px,17vw,150px)}   /* fits the viewport it can't overflow */
  .ct-grid{grid-template-columns:1fr}
  .ct-media{display:none}
  .wk-grid{grid-template-columns:1fr}
  .tp-strip{display:none}
  .cs-grid{grid-template-columns:1fr;row-gap:36px}
  .cs-info{position:static}
  .cs-head h1{font-size:clamp(44px,13vw,100px)}
  /* thumb-sized controls: player + embedded text-player bars, page chrome */
  .pl-bar button,.tp-bar button{padding:12px 6px}
  .p-close{padding:14px 0}
  /* grow tap areas without moving the layout: padding eaten by margin */
  .ct-big{display:inline-block;padding:8px 0;margin:-8px 0}
  .c-link{padding:12px 0;margin:-12px 0}
  .s-watch,.c-cta{padding:12px 0;margin:-12px 0}
  .socials a{padding:11px;margin:-11px}
  /* the screening-room bar restacks: timeline gets its own full row below
     the buttons — five controls never share 375px with a scrubber */
  .pl-bar{flex-wrap:wrap;gap:0 22px;row-gap:2px}
  .pl-track{flex:1 1 100%;order:2}
  .pl-bar button{order:1}
}
@media (min-width:821px) and (max-width:1200px) and (pointer:fine){
  .wk-grid{grid-template-columns:repeat(2,1fr)}
}

/* touch devices: the cursor-follow PLAY can't exist — the reel slide
   carries a fixed PLAY chip instead (same voice as the deck CTAs) */
@media (hover:none){
  .slide.reel{cursor:default}
  .cursor-play{display:none}
  .slide.reel::after{
    content:"Play";
    /* lower third: clear of the reel's title cards, inside thumb reach */
    position:absolute;left:50%;top:auto;
    bottom:max(16vh, calc(96px + env(safe-area-inset-bottom)));
    transform:translate(-50%,0);
    padding:14px 30px;border:1px solid rgba(241,239,233,.55);border-radius:999px;
    font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--paper);
    pointer-events:none;                       /* the whole slide is the button */
  }
}

/* landscape phones: shorter chrome, tighter display type — everything
   must survive ~375px of height without the stack touching the rail */
@media (max-height:450px) and (max-width:1000px){
  .s-title,.contact-wrap h2{font-size:clamp(34px,12vh,72px)}
  .s-sub,.s-watch{font-size:13px}
  .ab-hero{padding-top:calc(60px + 14vw)}
  .ab-ghost{font-size:clamp(48px,13vw,110px)}
  .m-link{font-size:clamp(30px,9vh,56px)}
}
@media (prefers-reduced-motion:reduce){
  .s-title .ch{opacity:1}
  .s-watch,.rail .meta{transition:none}
  .page,.player{clip-path:none;transition:opacity .3s var(--ease-io),visibility 0s .3s}
  .page.open,.player.open{transition:opacity .3s var(--ease-io)}
  .page:not(.open){opacity:0}
  .ab-mq-track{animation:none;flex-wrap:wrap;width:auto}
  #page-case.open .cs-info > *{animation:none;opacity:1;transform:none}
  #page-case.open .cs-slate .row::before{animation:none;width:100%}
  .aa{display:none}                /* no attract loop without motion */
}