/* ============================================================
   BINX PALM — DARKROOM EDITORIAL
   A single artifact at a time, floating in warm darkness.
   Cream type is the only decoration; ember is spent once.

   Adapted from a darkroom product-editorial system (warm-void
   canvas, uppercase display type, single rare accent) and refit
   for a five-wing portfolio: each wing's signature piece gets a
   full-viewport reveal instead of one hero product. Committed
   to one dark world on purpose — no light/dark toggle here.
   ============================================================ */

/* Cross-document view transitions: a smooth cross-fade between pages in
   browsers that support it (Chrome/Edge 126+), a plain instant navigation
   everywhere else. One rule, whole site, zero JS. */
@view-transition {
  navigation: auto;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}

:root {
  --paper: #100904;      /* walnut shadow — the canvas, every page */
  --ink: #ffedd7;        /* warm cream — the only text color that matters */
  --clay: #dc5000;       /* ember — spent once per screen, never on buttons */
  --sand: #382416;       /* bark brown — elevated surface + the one filled button */
  --sand-deep: #443021;  /* bark, one step up — hover state for elevated surfaces */
  --mute: #6c5f51;       /* driftwood — secondary text, muted structure */
  --hair: #40372e;       /* cork — dashed dividers, hairline borders */
  --nav-veil: rgba(16, 9, 4, .82);
  --screen: #0b0603;     /* just past the canvas — video wells, deepest void */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body:has(dialog[open]) { overflow: hidden; }

/* Two voices, no more: uppercase 500 is the default declarative register;
   .voice (body copy) is the sole mixed-case, conversational exception. */
h1, h2, h3, h4,
.serif, .label, .room, .nav .mark, .nav ul a, .crumb a, .wing-jump a,
.work-cap h3, .work-count, .doc-kicker, .doc-open, .live-card h3,
.now-list dt, .socials a, .foot, .skip, .btn-primary, .btn-ghost,
.reveal-kicker, .reveal-heading, .contact h2, .wing-hero h1, .about-copy h2 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: normal;
}
em.tilt, .tilt { font-style: normal; color: var(--clay); }

.voice { font-weight: 400; text-transform: none; letter-spacing: normal; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--clay); color: var(--ink); }

img, video { max-width: 100%; display: block; }

.label {
  font-size: .78rem; letter-spacing: .14em; color: var(--mute);
}
.room { font-size: .88rem; letter-spacing: .1em; color: var(--clay); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--sand); color: var(--ink); padding: .5rem 1rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* ============ SCROLL PROGRESS ============ */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 210; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--clay); transform-origin: 0 50%; transform: scaleX(0); }

/* ============ SCROLL RAIL — the site's signature companion ============ */
.rail {
  position: fixed; top: 5.5rem; bottom: 1.5rem; left: clamp(.9rem, 2.4vw, 1.8rem);
  width: 1px; background: var(--hair); z-index: 90; pointer-events: none;
  display: none;
}
@media (min-width: 1080px) and (min-height: 560px) { .rail { display: block; } }
.rail i {
  position: absolute; left: 50%; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay); transform: translate(-50%, 0);
  box-shadow: 0 0 0 4px var(--paper);
}
@media (prefers-reduced-motion: reduce) { .rail i { transition: none; } }

/* ============ CURSOR — an ember ring that morphs over artifacts ============
   Pure addition, never load-bearing: the native cursor stays usable the
   whole time underneath. Fine-pointer + motion-ok only. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 240; pointer-events: none;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border: 1px solid var(--clay); border-radius: 50%;
  display: none; opacity: 0;
  transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1),
              margin .25s cubic-bezier(.2,.7,.2,1), opacity .2s, background .25s;
  will-change: transform;
}
.cursor.on { opacity: 1; }
.js.has-cursor .cursor { display: block; }
.cursor .cta {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .58rem; letter-spacing: .1em; color: var(--paper);
  opacity: 0; transition: opacity .2s;
}
.cursor.big {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: var(--clay); border-color: var(--clay);
}
.cursor.big .cta { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none !important; } }

/* ============ TILT — every artifact rotates gently toward you ============
   Base transform + transition live on .frame itself and on
   .work-panel-figure .frame-shell (below); this just kills the motion
   for anyone who asked for less of it. */
@media (prefers-reduced-motion: reduce) { .frame, .frame-shell { transition: none !important; } }

/* ============ MAGNETIC — the CTA leans toward the cursor ============ */
.btn-primary, .wing-next a {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
  display: inline-block;
}

/* ============ MARQUEE — one energetic beat between hero and work ============
   Driven entirely by JS (site.js), not a CSS keyframe: a percentage-based
   translateX only loops seamlessly if the duplicated content happens to be
   wider than the viewport, which silently fails (a visible gap of nothing)
   on any screen wide enough that it isn't. JS measures the real pixel
   width of one copy and loops against that instead, so it's correct at
   any viewport size, and duplicates copies until the track safely
   overflows the widest visible window. */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 1px dashed var(--hair); border-bottom: 1px dashed var(--hair);
  padding: .9rem 0;
}
.marquee .track { display: inline-flex; will-change: transform; }
.marquee span {
  font-size: .82rem; letter-spacing: .16em; padding: 0 1.1rem; color: var(--ink); opacity: .7;
}
.marquee span.hi { color: var(--clay); opacity: 1; }

/* ============ GRAIN — one quiet texture pass, sitewide ============ */
.grain {
  position: fixed; inset: 0; z-index: 205; pointer-events: none;
  opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
}

/* ============ NAV — fixed, transparent, four items max ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.2rem clamp(1.25rem, 5vw, 4rem);
  background: var(--nav-veil);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px dashed var(--hair);
}
.nav .mark { font-size: 1rem; letter-spacing: .08em; text-decoration: none; }
.nav .mark i { font-style: normal; color: var(--clay); }
.nav ul { display: flex; gap: clamp(.8rem, 2.6vw, 2.2rem); list-style: none; flex-wrap: wrap; }
.nav ul a {
  font-size: .8rem; letter-spacing: .13em;
  text-decoration: none; color: var(--ink); opacity: .75; transition: opacity .25s; position: relative;
}
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px;
  border-bottom: 1px dashed var(--clay); transition: right .3s cubic-bezier(.2,.7,.2,1);
}
.nav ul a:hover { opacity: 1; }
.nav ul a:hover::after { right: 0; }
.nav ul a[aria-current="page"] { color: var(--clay); opacity: 1; }

/* "Work" quick-jump — the six wings, one click away from anywhere on the
   site instead of scrolling back through the foyer's horizontal walk
   every time. Click-to-toggle works on every device; hover is a bonus
   shortcut only where a real hover state exists (desktop). */
.nav-drop { position: relative; display: flex; align-items: center; gap: .25rem; }
.nav-drop-toggle {
  background: none; border: none; padding: .2rem; margin: 0; cursor: pointer;
  font: inherit; font-size: .7rem; color: var(--ink); opacity: .6; line-height: 1;
  transition: opacity .25s, transform .25s;
}
.nav-drop-toggle:hover { opacity: 1; }
.nav-drop-menu.open ~ .nav-drop-toggle,
.nav-drop:hover .nav-drop-toggle { opacity: 1; }
/* top:100% with no gap — the previous margin-top left a dead strip
   between the trigger and the menu where the cursor wasn't hovering
   *either* element, so a diagonal move into the menu dropped :hover
   and closed it before arriving. The box now starts flush against the
   nav (its own border/background reads as "attached" to it, which is
   the standard, bug-free way to build this), no hoverable gap left. */
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; margin-top: 0;
  transform: translate(-50%, -6px);
  min-width: 168px; list-style: none; padding: .65rem .4rem .4rem;
  background: var(--nav-veil); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 150;
}
.nav-drop-menu a {
  display: block; padding: .6rem .8rem; border-radius: 6px;
  font-size: .78rem; letter-spacing: .1em; text-decoration: none;
  color: var(--ink); opacity: .75; transition: background .2s, opacity .2s;
}
.nav-drop-menu a::after { display: none; }
.nav-drop-menu a:hover { background: var(--sand); opacity: 1; }
.nav-drop-menu a[aria-current="page"] { color: var(--clay); opacity: 1; }
.nav-drop-menu.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
@media (hover: hover) and (pointer: fine) {
  .nav-drop:hover .nav-drop-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  }
}

/* ============ SHARED SCAFFOLD ============ */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
section, .wing-hero { padding-top: clamp(4.5rem, 11vh, 8rem); padding-bottom: clamp(4.5rem, 11vh, 8rem); }
.rule-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 1px dashed var(--hair); padding-top: 1.1rem;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* the arms-out photo, presenting a rotating card of the work — tucked in
   the hero's bottom-right corner (mirroring .hero-card at bottom-left),
   hidden below the breakpoint where there's no real room for it */
.work-intro-figure-wrap {
  position: absolute; z-index: 3; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: none;
}
@media (min-width: 860px) { .work-intro-figure-wrap { display: block; } }
.work-intro-figure {
  display: block; height: clamp(218px, 24vw, 345px); width: auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45));
}
/* a little card of the work itself, floating in the gap his arms make —
   percentages are hand-tuned to this specific photo's pose */
.work-rotator {
  position: absolute; top: 21%; left: 9%; width: 30%; aspect-ratio: 4 / 5;
  transform: rotate(8deg);
  border-radius: 6px; overflow: hidden;
  border: 2px solid var(--ink); background: var(--sand);
  box-shadow: 0 10px 20px rgba(0,0,0,.45);
}
.work-rotator-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.work-rotator-slide.in { opacity: 1; }

/* ============ HERO — text behind subject, in front of the room ============
   Three layers, three parallax speeds: the room photo (slowest, furthest
   back), the wordmark (middle), Binx's cutout (fastest, closest to you) —
   he's standing in front of his own name, which is standing in front of
   the room. data-parallax on each layer is read by site.js. */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, #983d0e 0%, #843511 42%, transparent 75%),
    var(--paper);
}

.hero-tag {
  position: absolute; z-index: 3; top: clamp(6rem, 13vh, 8.5rem); left: clamp(1.25rem, 5vw, 4rem);
  right: clamp(1.25rem, 5vw, 4rem); max-width: 46ch;
  font-size: .88rem; letter-spacing: .14em; color: var(--ink); opacity: .85;
}
.hero-tag .paren { color: var(--clay); }

/* vertical sidebar label — a physical-product serial, translated to a portfolio */
.hero-side {
  position: absolute; z-index: 3; right: clamp(.75rem, 2.5vw, 2rem); top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: center;
  font-size: .76rem; letter-spacing: .22em; color: var(--ink); opacity: .55;
  white-space: nowrap; display: none;
}
@media (min-width: 780px) { .hero-side { display: block; } }

/* the wordmark — huge, centered, sitting behind the cutout */
.hero-wordmark {
  position: absolute; z-index: 1; left: 50%; top: 16%;
  transform: translate3d(-50%, 0, 0);
  width: 100%; text-align: center; pointer-events: none;
  font-size: clamp(5.5rem, 25vw, 19rem); line-height: .82; letter-spacing: -0.025em;
  color: var(--ink); white-space: nowrap;
  will-change: transform;
}

/* opacity-only entrance for the two parallax-driven layers — see the
   markup comment for why these can't use the shared .rv system */
.hero-fade { opacity: 0; }
.js .hero-fade { animation: heroFadeIn 1s ease .25s forwards; }
@keyframes heroFadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-fade { opacity: 1; animation: none; } }

/* the cutout — on top of the wordmark, anchored so his head crosses it */
.hero-cutout {
  position: absolute; z-index: 2; left: 50%; top: 6%;
  transform: translate3d(-50%, 0, 0);
  width: clamp(320px, 44vw, 640px); height: auto;
  pointer-events: none;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.5)) saturate(1.3) sepia(.08);
  will-change: transform;
}

/* intro paragraph, pinned to the foot of the hero — bottom offset sized
   to clear the hero-card sitting below it, now that the scroll cue that
   used to occupy that gap is gone */
.hero-foot {
  position: absolute; z-index: 3; left: clamp(1.25rem, 5vw, 4rem); right: clamp(1.25rem, 5vw, 4rem);
  bottom: clamp(9rem, 18vh, 12.5rem);
}
.hero-intro {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--ink); opacity: .85;
}
.hero-intro b { font-weight: 600; opacity: 1; }

/* credit card, lower-left, dashed divider inside */
.hero-card {
  position: absolute; z-index: 3; left: clamp(1.25rem, 5vw, 4rem); bottom: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 30ch; padding: 1rem 1.15rem;
  background: rgba(16, 9, 4, .6); border: 1px solid var(--hair); border-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none;
}
@media (min-width: 640px) { .hero-card { display: block; } }
.hero-card .label { display: block; margin-bottom: .6rem; }
.hero-card p { font-size: .86rem; color: var(--ink); opacity: .8; padding-top: .6rem; border-top: 1px dashed var(--hair); }

/* phones — the hero is an absolutely-positioned stack, and on a short
   screen its layers were landing on top of each other: the tag ran into
   the wordmark, and the intro ran into the cutout. Desktop has the height
   to absorb that; a phone doesn't. Each layer gets its own band here
   (tag → wordmark + cutout → intro), the cutout is sized off the viewport
   instead of a 320px floor that was wider than the phone's own text
   column, and the intro drops nearer the floor now that .hero-card is
   hidden at this width and no longer needs clearing. */
@media (max-width: 639.98px) {
  .hero { min-height: 640px; }
  .hero-tag {
    top: clamp(5rem, 11vh, 6.5rem);
    font-size: .74rem; letter-spacing: .1em; max-width: 30ch;
  }
  .hero-wordmark { top: 25%; font-size: clamp(4rem, 21vw, 7rem); }
  .hero-cutout { top: 17%; width: min(74vw, 290px); }
  .hero-foot { bottom: clamp(2rem, 6vh, 3.5rem); }
  .hero-intro { font-size: .95rem; max-width: 34ch; }
}

/* ============ THE WORK — a horizontal walk past five artifacts ============
   Desktop, fine pointer, motion allowed: the section pins to the viewport
   and the row of panels translates sideways in step with vertical scroll,
   so scrolling down *feels* like walking past five framed pieces — the
   sticky-pin + scroll-scrubbed-transform pattern used by a lot of the
   agency/portfolio sites this design draws from. Touch, narrow, or
   reduced-motion visitors get a plain native horizontal scroll-snap
   carousel instead — scroll-jacking a transform against a finger swipe
   is exactly what reads as broken on a phone, so it never attempts to. */
.work-outer { position: relative; }
.work-sticky { position: relative; }
.js .work-outer.enhanced .work-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.work-track {
  display: flex; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 1rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
  scrollbar-width: none;
}
.work-track::-webkit-scrollbar { display: none; }
.js .work-outer.enhanced .work-track {
  overflow: visible; scroll-snap-type: none; will-change: transform;
}

.work-panel {
  flex: 0 0 auto; width: min(88vw, 960px); scroll-snap-align: center;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
}
@media (min-width: 700px) {
  .work-panel { grid-template-columns: 1.3fr 1fr; }
  /* the lone single-image panel (Web) no longer fills its column edge to
     edge now that the box is sized to its own aspect ratio — give it a
     narrower figure track instead of leaving a wide gap before the copy */
  .work-panel:has(.frame-shell) { grid-template-columns: .7fr 1.3fr; }
}
.work-panel-figure { display: block; text-decoration: none; }
/* no forced aspect-ratio here on purpose — most of this work is portrait
   (listing decks, Instagram posts); cropping them into a landscape box
   was hiding most of the content. Each artifact keeps its own shape,
   capped by height so nothing dominates the panel. */
.work-panel-figure .frame-shell {
  position: relative; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden;
  background: var(--sand);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s;
  /* height matched to the .work-panel-mini tile row (below) — this is now
     only used by wings with a single real image (Web), and it was
     dwarfing its three-tile neighbors at the old 60vh ceiling.
     Width is no longer forced to the full column — that left wide sand
     margins either side of a narrower-than-column image. It's sized by
     its own aspect-ratio (set inline per instance, same as the mini-grid
     tiles) and centered instead, so the box matches the piece. */
  height: clamp(150px, 20vw, 215px);
  width: auto; margin: 0;
}
.work-panel-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-panel-figure:hover .frame-shell { border-color: var(--clay); }

/* the foyer teaser, upgraded: three real pieces per wing instead of one
   static image, so a first-time visitor sees actual work with zero
   clicks — "Enter the wing" is still there for anyone who wants the rest.
   Each panel sets its own grid-template-columns inline, in fr units equal
   to that tile's real aspect ratio, and each .frame carries its own
   inline aspect-ratio to match — so the box is shaped like the actual
   piece (a landscape thumbnail gets a wide box, a poster gets a narrow
   one) instead of forcing every shape into the same portrait mat and
   letterboxing whatever doesn't fit. Because the fr proportions equal
   the ratios themselves, all three tiles in a row still land on the
   same height without any of them needing to crop or pad. */
.work-panel-mini { display: grid; gap: clamp(.5rem, 1.2vw, .9rem); }
.work-panel-mini .frame { width: 100%; height: auto; }
.work-panel-mini .frame img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.work-panel-copy .reveal-kicker { display: block; color: var(--clay); font-size: .84rem; letter-spacing: .14em; margin-bottom: .9rem; }
.work-panel-copy .reveal-heading { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: .96; max-width: 13ch; }
.work-panel-copy p.voice { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink); opacity: .8; max-width: 40ch; margin: .9rem 0 0; }
.reveal-count { display: inline-block; margin-top: 1.1rem; font-size: .76rem; letter-spacing: .14em; color: var(--mute); }

.work-progress {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem);
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}
.work-progress-track { flex: 1; height: 1px; background: var(--hair); position: relative; }
.work-progress-track i { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--clay); }
.work-progress .count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-progress .count b { color: var(--clay); font-weight: 500; }

/* ============ WING HERO (subpages) ============ */
.wing-hero { padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.crumb { display: flex; gap: .6rem; align-items: baseline; margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
.crumb a { font-size: .82rem; letter-spacing: .14em; color: var(--mute); text-decoration: none; }
.crumb a:hover { color: var(--clay); }
.crumb .sep { color: var(--clay); }
.wing-hero h1 { font-size: clamp(2rem, 5.6vw, 4.2rem); line-height: .98; max-width: 16ch; }
.wing-hero .lede { margin-top: 1.5rem; max-width: 56ch; color: var(--ink); opacity: .78; font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.wing-hero .meta-row { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 2rem; align-items: baseline; }

/* jump strip */
.wing-jump {
  display: flex; flex-wrap: wrap; gap: .4rem .3rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  border-top: 1px dashed var(--hair);
}
.wing-jump a {
  font-size: .8rem; letter-spacing: .1em;
  text-decoration: none; color: var(--mute);
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid transparent;
  transition: color .25s, border-color .25s, background .25s;
}
.wing-jump a:hover { color: var(--ink); border-color: var(--hair); }
.wing-jump a[aria-current="page"] { color: var(--clay); background: var(--sand); border-color: var(--hair); }

/* ============ EXHIBITS (wing pages) ============ */
.exhibit { margin-bottom: clamp(4rem, 10vh, 7rem); }
.exhibit:last-child { margin-bottom: 0; }
.x-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.x-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.x-lede { color: var(--ink); opacity: .78; max-width: 60ch; margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
.x-lede a { color: var(--clay); }

/* horizontal flip-through strip */
.strip-shell { position: relative; }
.strip {
  display: flex; gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem .25rem 1rem;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip.wheeling { scroll-snap-type: none; }
.strip .leaf { flex: 0 0 auto; scroll-snap-align: center; width: min(74vw, 420px); }
.strip .leaf.landscape { width: min(84vw, 640px); }
.strip-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .35rem; }
.strip-count { font-variant-numeric: tabular-nums; }
.strip-count b { color: var(--clay); font-weight: 500; }

.strip-viewport { position: relative; }
.strip-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(11,6,3,.6); color: var(--ink); border: 1px solid var(--hair);
  font-size: 1rem; cursor: pointer; opacity: 0;
  transition: opacity .25s, background .25s, border-color .25s;
}
.strip-viewport:hover .strip-nav, .strip-nav:focus-visible { opacity: 1; }
.strip-nav:hover { background: var(--sand); border-color: var(--clay); }
.strip-nav[disabled] { opacity: 0 !important; pointer-events: none; }
.strip-nav.prev { left: .5rem; }
.strip-nav.next { right: .5rem; }
@media (hover: none), (max-width: 640px) { .strip-nav { display: none; } }

/* framed artwork */
.frame {
  position: relative; display: block; width: 100%;
  background: var(--sand); border: 1px solid var(--hair); border-radius: 10px;
  overflow: hidden; cursor: pointer; padding: 0;
  transition: border-color .3s, transform .5s cubic-bezier(.2,.7,.2,1);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  font: inherit; color: inherit; text-align: inherit;
}
.frame img { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.frame:hover { border-color: var(--clay); }
.frame:hover img { transform: scale(1.025); }
.frame .tag {
  position: absolute; left: .75rem; bottom: .75rem;
  background: var(--paper); color: var(--ink);
  font-size: .7rem; letter-spacing: .13em;
  padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--hair);
  opacity: 0; transition: opacity .3s;
}
.frame:hover .tag { opacity: 1; }

/* grids */
.grid-3 { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 760px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.grid-2 { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 figure figcaption, .grid-2 figure figcaption { margin-top: .7rem; }
.grid-3 figure figcaption .label, .grid-2 figure figcaption .label { display: block; }
.grid-3 figure figcaption p, .grid-2 figure figcaption p { color: var(--ink); opacity: .7; font-size: .92rem; margin-top: .25rem; }

/* document placards (PDFs) */
.doc-row { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 760px) { .doc-row { grid-template-columns: 1fr 1fr; } }
.doc-card {
  display: flex; flex-direction: column; gap: .5rem;
  border: 1px solid var(--hair); border-radius: 12px;
  background: var(--sand); padding: clamp(1.5rem, 3.5vw, 2.25rem);
  text-decoration: none; position: relative; overflow: hidden;
  transition: border-color .3s, transform .4s;
}
.doc-card:hover { border-color: var(--clay); transform: translateY(-3px); }
.doc-preview {
  display: block; position: relative;
  height: clamp(240px, 34vw, 360px);
  margin: 0 0 1rem; border: 1px dashed var(--hair); border-radius: 8px;
  overflow: hidden; background: var(--paper);
}
.doc-preview::before {
  content: "PDF — open to read"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .78rem; letter-spacing: .16em; color: var(--mute);
}
.doc-preview iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; pointer-events: none; background: transparent;
}
.doc-card .doc-kicker { color: var(--clay); font-size: .76rem; letter-spacing: .16em; }
.doc-card h3 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.1; }
.doc-card p { color: var(--ink); opacity: .78; font-size: .95rem; }
.doc-card .doc-open { margin-top: .75rem; color: var(--ink); font-size: .8rem; letter-spacing: .14em; }
.doc-card .doc-open i { font-style: normal; color: var(--clay); }
.doc-card .corner {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px;
  background: linear-gradient(225deg, var(--paper) 50%, var(--sand-deep) 50%);
  border-left: 1px dashed var(--hair); border-bottom: 1px dashed var(--hair);
  border-bottom-left-radius: 8px;
}

/* live-site cards */
.live-card {
  display: flex; flex-direction: column; gap: .4rem;
  border: 1px solid var(--hair); border-radius: 12px; padding: clamp(1.5rem, 3.5vw, 2.25rem);
  text-decoration: none; transition: border-color .3s, transform .4s; position: relative;
}
.live-card:hover { border-color: var(--clay); transform: translateY(-3px); }
.live-card .pulse {
  position: absolute; top: 1.4rem; right: 1.4rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--clay);
}
.live-card .pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--clay); opacity: .5;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-card .pulse::after { animation: none; } }
.live-card h3 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
.live-card p { color: var(--ink); opacity: .78; font-size: .95rem; }
.live-card .doc-open { margin-top: .6rem; font-size: .8rem; letter-spacing: .14em; }
.live-card .doc-open i { font-style: normal; color: var(--clay); }

/* ============ SCREENING (video wells go one step darker) ============ */
.screening { background: var(--screen); }
.screen-main { border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); background: #000; }
.screen-main video { display: block; width: 100%; height: auto; }
.screen-cap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; }
.bumpers { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2.5rem, 6vh, 4rem); }
@media (min-width: 700px) { .bumpers { grid-template-columns: 1fr 1fr; } }
.bumper { border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); background: #000; }
.bumper video { display: block; width: 100%; height: auto; }

/* vertical/social video pairs — capped narrower than .screen-main since
   these are 9:16, not 16:9, and would otherwise tower over the page */
.game-clips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(2rem, 5vh, 3rem);
}
.game-clip { width: min(100%, 380px); }
.game-clip video {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--hair); background: #000;
}
.game-clip figcaption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .7rem; }
.after-hours {
  margin-top: clamp(2.5rem, 6vh, 4rem); display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-end; gap: clamp(1.5rem, 4vw, 2.5rem);
}
.after-hours figure { display: grid; justify-items: center; gap: .9rem; }
.after-hours .ph {
  width: min(60vw, 260px); border: 1px solid var(--hair); border-radius: 10px;
  overflow: hidden; transform: rotate(1.6deg);
}
.after-hours figure:nth-child(2) .ph { transform: rotate(-2deg); }
.after-hours img { display: block; width: 100%; }

/* ============ SERVICES / ABOUT / CONTACT (foyer) ============ */
.services-grid { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .services-grid { grid-template-columns: 1fr 1fr 1fr; } }
.service { border-top: 1px dashed var(--hair); padding-top: 1.4rem; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.service:hover { transform: translateY(-4px); }
.service h3 { font-size: 1.2rem; margin: .9rem 0 .55rem; }
.service .num { font-size: .9rem; color: var(--clay); display: inline-block; transition: transform .4s; }
.service:hover .num { transform: rotate(-8deg) scale(1.15); }
.service p { color: var(--ink); opacity: .78; font-size: .98rem; }

.about-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 860px) { .about-grid { grid-template-columns: 5fr 7fr; } }
.portrait {
  position: relative; background: var(--sand); border: 1px solid var(--hair);
  border-radius: 16px;
  aspect-ratio: 4 / 5; overflow: hidden; max-width: 420px;
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.3) sepia(.06) brightness(.92); }
.portrait-cap { margin-top: .8rem; font-size: .84rem; color: var(--clay); }

.about-copy h2 { font-size: clamp(1.7rem, 3.8vw, 2.7rem); line-height: 1.02; margin-bottom: 1.5rem; }
.about-copy p { margin-bottom: 1.15rem; max-width: 58ch; color: var(--ink); opacity: .82; }
.about-copy p b { font-weight: 600; opacity: 1; }
.now-list { margin-top: 2.25rem; border-top: 1px dashed var(--hair); }
.now-list div { display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px dashed var(--hair); }
.now-list dt { font-size: .78rem; letter-spacing: .16em; color: var(--clay); padding-top: .25em; }
.now-list dd { color: var(--ink); opacity: .78; font-weight: 400; text-transform: none; }

.contact { text-align: center; }
.contact h2 { font-size: clamp(2rem, 6.4vw, 4.6rem); line-height: 1; max-width: none; }
.contact .sub { color: var(--ink); opacity: .8; max-width: 44ch; margin: 1.5rem auto 0; }

/* the one filled button on the site — spent here, on purpose */
.btn-primary {
  display: inline-block; margin-top: clamp(2rem, 5vh, 3rem);
  font-size: .95rem; letter-spacing: .08em;
  text-decoration: none; color: var(--ink); background: var(--sand);
  border: 1px solid var(--hair);
  padding: 1rem 2rem; border-radius: 36px;
  transition: background .25s, transform .25s;
}
.btn-primary:hover { background: var(--sand-deep); }

.socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1rem 2.2rem; margin-top: clamp(2.25rem, 5vh, 3.25rem); }
.socials a {
  font-size: .84rem; letter-spacing: .14em;
  text-decoration: none; color: var(--mute); transition: color .25s;
  border-bottom: 1px solid transparent;
}
.socials a:hover { color: var(--ink); border-color: var(--hair); }

/* ============ WING FOOT NAV (next wing) ============ */
.wing-next { border-top: 1px dashed var(--hair); }
.wing-next a {
  display: block; text-decoration: none; text-align: center;
  padding: clamp(3rem, 8vh, 5rem) 1rem;
}
.wing-next .label { display: block; margin-bottom: .6rem; }
.wing-next .next-name { font-size: clamp(1.7rem, 4.8vw, 3rem); color: var(--ink); transition: color .3s; }
.wing-next a:hover .next-name { color: var(--clay); }

/* ============ LIGHTBOX ============ */
dialog.lightbox {
  border: none; border-radius: 0; background: transparent; padding: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  display: grid; place-items: center;
}
dialog.lightbox:not([open]) { display: none; }
dialog.lightbox::backdrop { background: rgba(6, 3, 1, .93); backdrop-filter: blur(4px); }
.lb-stage { position: relative; width: min(94vw, 1200px); max-height: 92vh; display: grid; justify-items: center; }
.lb-stage img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  border-radius: 8px; border: 1px solid var(--hair);
  background: var(--paper);
}
.lb-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  width: 100%; margin-top: 1rem; color: var(--ink);
}
.lb-bar .lb-cap { font-size: .9rem; opacity: .8; text-transform: none; font-weight: 400; }
.lb-bar .lb-count { font-variant-numeric: tabular-nums; font-size: .82rem; letter-spacing: .14em; color: var(--mute); }
.lb-btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,237,215,.06); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 999px;
  width: 52px; height: 52px; font-size: 1.1rem; cursor: pointer;
  transition: background .25s, border-color .25s;
}
.lb-btn:hover { background: var(--sand); border-color: var(--clay); }
.lb-btn.prev { left: clamp(.5rem, 3vw, 2.5rem); }
.lb-btn.next { right: clamp(.5rem, 3vw, 2.5rem); }
.lb-close {
  position: fixed; top: clamp(.75rem, 3vh, 2rem); right: clamp(.75rem, 3vw, 2.5rem);
  background: transparent; color: var(--ink); border: 1px solid var(--hair);
  border-radius: 999px; width: 44px; height: 44px; cursor: pointer; font-size: 1rem;
  transition: background .25s, border-color .25s;
}
.lb-close:hover { background: var(--sand); border-color: var(--clay); }
@media (max-width: 700px) {
  .lb-btn { top: auto; bottom: 1rem; transform: none; }
  .lb-btn.prev { left: 25%; }
  .lb-btn.next { right: 25%; }
}

/* ============ FOOTER ============ */
.foot {
  border-top: 1px dashed var(--hair);
  padding: 1.4rem clamp(1.25rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  font-size: .82rem; letter-spacing: .1em; color: var(--mute);
}
.foot i { font-style: normal; color: var(--clay); }

/* ============ REVEAL (js-gated, subtle) ============ */
.js .rv { opacity: 0; transform: translateY(12px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .rv.d2.in { transition-delay: .08s; }
.js .rv.d3.in { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1 !important; transform: none !important; }
}