/* ═══════════════════════════════════════════════════════
   BUNR — brandonbunr.com
   Shared stylesheet · dark editorial · DM Sans + DM Mono
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:       #080807;
  --bg2:      #0f0e0c;
  --ink:      #ddd8d0;
  --ink-2:    #a09890;
  --ink-3:    #8a827a;   /* ≥4.5:1 on --bg — contrast floor for small mono labels */
  --blue:     #7b9ccc;
  --hairline: rgba(221,216,208,0.08);
  --sans:     'DM Sans', sans-serif;
  --mono:     'DM Mono', monospace;
}

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

/* overflow-x on html, not body — body breaks position:fixed on iOS Safari */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a:focus-visible, button:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 3px;
}

/* paper tooth — desktop only (the @supports guard excludes iOS).
   Pre-rendered PNG noise tile, NOT an SVG feTurbulence filter: desktop
   Safari rasterizes SVG-filter backgrounds on the CPU and janks badly
   compositing them over the animating canvas. Identical look at 1.4%. */
@supports not (-webkit-touch-callout: none) {
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/png;base64,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");
    opacity: 0.014; pointer-events: none; z-index: 9980;
  }
}

/* ——— CURSOR RING — desktop pointer devices only ——— */
.cursor-ring {
  position: fixed;
  display: none;                /* JS + media query opt in */
  left: 0; top: 0;
  width: 28px; height: 28px;
  border: 1px solid rgba(220,215,205,0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  /* positioned via transform (compositor-only) — left/top updates
     force layout on every mousemove, which lags in Safari */
  transform: translate(-200px, -200px) translate(-50%, -50%);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  html.has-cursor-ring, html.has-cursor-ring body,
  html.has-cursor-ring a, html.has-cursor-ring button { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none !important; }
}

/* ——— DOT CANVAS ———
   Desktop: fixed full-viewport, lives behind every section.
   Mobile (≤900px): absolute inside the hero only — avoids iOS
   fixed-element quirks and stops painting behind content. */
/* contain:strict lets the compositor treat the canvas as a sealed box —
   its 60fps repaints can never dirty the scrolling content above it */
/* contain:strict lets the compositor treat the canvas as a sealed box —
   its 60fps repaints can never dirty the scrolling content above it */
#dot-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; contain: strict; }
@media (max-width: 900px) {
  #dot-canvas { position: absolute; inset: auto; top: 0; left: 0; height: 100svh; }
}
/* Desktop Safari runs the mobile shuffle language, but the surface stays
   inside the hero instead of remaining fixed beneath the entire document. */
@media (min-width: 901px) {
  .field-safari-shuffle #dot-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100svh;
  }
}

/* ——— SAFARI WORDMARK — desktop only, no canvas ———
   field.js adds .field-static and removes the canvas. The mark receives one
   deliberate registration-lock entrance, then rests completely still. */
/* Faint static dot field behind the Safari wordmark — echoes the canvas
   identity at zero runtime cost: a plain CSS radial-gradient painted once,
   scoped to the hero so it scrolls away as one composited layer. NOT
   background-attachment:fixed (that repaints every scroll frame — the
   exact failure we removed) and no JS/canvas anywhere near it. */
.field-static #hero {
  background-image: radial-gradient(rgba(220, 215, 205, 0.10) 1px, transparent 1.7px);
  background-size: 25px 25px;
  background-position: center;
}

.hero-mark { display: none; }
/* Motion-layer stack: mark = centring, fx = fade, rack = scroll exit,
   span = letter arrival, i = letter settle. No nested element fights another
   element for the same transform channel. */
.field-static .hero-mark {
  display: block;
  position: absolute;
  top: 43%; left: 0; right: 0;
  transform: translateY(-50%);      /* centring only — never animated */
  pointer-events: none;
  user-select: none;
}
/* The wrapper fades in without a filter. Safari only needs to composite this
   small mark once; the letters provide the visible motion. */
.field-static .hero-fx {
  opacity: 1;
  animation: safariMarkFade .28s ease-out backwards;
}
/* Scroll exit — opacity + transform only. A previous version carried a
   scroll-linked blur to 16px. WebKit kept its filtered backing store alive
   after the mark had faded offscreen, which competed with work-tile hovers.
   This keeps the same dissolve without any long-lived filter layer. */
@supports (animation-timeline: scroll()) {
  .field-static .hero-rack {
    animation: rackScroll 1s linear both;
    animation-timeline: scroll(root);
    /* sharp at the top → fully gone by 50vh of scroll (tuning knob) */
    animation-range: 0 50vh;
  }
}
.field-static .hero-wordmark {
  display: flex;
  justify-content: center;
  padding-left: 0.16em;             /* offset trailing letter-spacing */
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(70px, 15vw, 190px);
  line-height: 1;
  letter-spacing: 0.16em;
  color: #e8e4dc;
}
/* Four short, staggered arrivals read as a title locking into register—not a
   generic fade. They finish within 620ms, leaving zero perpetual animation
   work while the visitor moves to the work grid. */
.field-static .hero-wordmark > span {
  display: inline-block;
  opacity: 1;
  animation: safariLetterLock .62s cubic-bezier(0.16, 1, 0.30, 1) backwards;
}
.field-static .hero-wordmark > span > i {
  display: inline-block;
  font-style: normal;
  animation: safariLetterSettle .42s cubic-bezier(.16, 1, .3, 1) backwards;
}
/* field.js toggles this once the hero leaves the viewport. The static Safari
   path then has no perpetual decorative animations while work is in view. */
.field-static.hero-offscreen .hero-wordmark,
.field-static.hero-offscreen .hero-wordmark > span > i {
  animation-play-state: paused;
}
.field-static.hero-offscreen .hero-rack {
  animation: none;
  opacity: 0;
  transform: scale(1.03);
}
/* Offset the letters in time rather than creating a persistent idle loop. */
.field-static .hero-wordmark > span:nth-child(1) { animation-delay: .04s; }
.field-static .hero-wordmark > span:nth-child(2) { animation-delay: .12s; }
.field-static .hero-wordmark > span:nth-child(3) { animation-delay: .20s; }
.field-static .hero-wordmark > span:nth-child(4) { animation-delay: .28s; }
.field-static .hero-wordmark > span:nth-child(1) > i { animation-delay: .33s; }
.field-static .hero-wordmark > span:nth-child(2) > i { animation-delay: .41s; }
.field-static .hero-wordmark > span:nth-child(3) > i { animation-delay: .49s; }
.field-static .hero-wordmark > span:nth-child(4) > i { animation-delay: .57s; }

@keyframes safariMarkFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes safariLetterLock {
  from { opacity: 0; transform: translateY(22px) scale(0.94); }
  72%  { opacity: 1; transform: translateY(-2px) scale(1.012); }
  to   { opacity: 1; transform: none; }
}
@keyframes safariLetterSettle {
  from { transform: scaleX(1.08); }
  to   { transform: scaleX(1); }
}
/* Scroll exit, mapped across the scroll range. The title holds, then fades
   while drifting a touch for depth — no paint-triggering filter animation. */
@keyframes rackScroll {
  0%   { opacity: 1; transform: none; }
  65%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.03); }
}
/* The one-time registration lock and transform/opacity scroll exit are the
   only Safari hero motion. */

/* ── Wordmark treatments (Safari static path) ──────────────────────────
   field.js sets [data-mark] (default 2). All zero extra font-load: DM
   Sans 900 is already loaded; Futura / Helvetica Neue are macOS system
   faces, free on the only OS this path runs on. Flip with ?mark=1..5. */

/* 1 · solid — clean DM Sans 900 (the original) */

/* 2 · registration offset — a faint, STATIC cyan/red channel split, like
      film misregistration or a slipped registration cross. Two transform-
      positioned pseudo-copies at a fixed ±0.018em; they soften together
      with the mark during the scroll focus-pull (they sit inside
      .hero-rack) but never separate further. Matches the old look. */
.field-static[data-mark="2"] .hero-wordmark > span > i { position: relative; z-index: 0; }
.field-static[data-mark="2"] .hero-wordmark > span > i::before,
.field-static[data-mark="2"] .hero-wordmark > span > i::after {
  content: attr(data-l);
  position: absolute; left: 0; top: 0;
  z-index: -1;                        /* behind the ink letter */
}
.field-static[data-mark="2"] .hero-wordmark > span > i::before {
  color: rgba(86, 198, 245, 0.55); transform: translateX(-0.018em);
}
.field-static[data-mark="2"] .hero-wordmark > span > i::after {
  color: rgba(232, 88, 116, 0.5);  transform: translateX(0.018em);
}

/* ——— NAV ——— */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 24px 48px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);   /* solid — the warm gradient band read off-palette */
}

.nav-logo {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color .25s;
}
.nav-logo:hover { color: var(--blue); }

.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  transition: color .25s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 100%; height: 1px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* hamburger + dropdown — mobile only */
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 15px 11px;            /* 44×44px touch target with spans */
  margin: -11px -6px;
  background: none; border: none;
  z-index: 1001; cursor: pointer;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink-2); transition: all .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

.nav-dropdown {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(13,12,11,0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  z-index: 999;
  padding: 72px 24px 28px;
  flex-direction: column;
  border-bottom: 1px solid var(--hairline);
}
.nav-dropdown.open { display: flex; }
.nav-dropdown a {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(220,215,205,0.06);
  transition: color .2s;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover, .nav-dropdown a:active { color: var(--ink); }

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* ——— HERO ——— */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid var(--hairline);
  z-index: 2;
}

.hero-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  padding: 0 48px 36px;
  opacity: 0;
  animation: fadeUp .9s ease 2.1s forwards;
}

.hero-id { display: flex; flex-direction: column; gap: 6px; }
.hero-id-name {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
}
.hero-id-role {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
}

.hero-tc {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 10px;
}
.hero-tc::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #c4524a; opacity: 0.8;
  animation: recBlink 2.4s steps(1) infinite;
}
@keyframes recBlink { 0%, 70% { opacity: 0.8 } 71%, 100% { opacity: 0.15 } }

/* Safari desktop omits the timecode entirely. The early html class prevents
   even its rec-dot animation from entering WebKit's first paint. */
@media (min-width: 901px) {
  .safari-desktop .hero-tc { display: none; }
}

.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 96px;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  animation: fadeIn 1.2s ease 2.8s forwards;
  pointer-events: none;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ——— SHARED SECTION ——— */
section { padding: 96px 48px; position: relative; z-index: 2; }

.eyebrow {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 48px;
  display: flex; align-items: center; gap: 18px;
}
.eyebrow::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(220,215,205,0.15), transparent);
}

/* ——— WORK GRID — desktop mosaic ——— */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 52vw 26vw 36vw;
  gap: 2px;
  background: rgba(220,215,205,0.05);
}

.work-item {
  position: relative; overflow: hidden;
  display: block;
  background: var(--bg2);
  text-decoration: none;
  min-height: 0;
}

.work-item:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; }
.work-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.work-item:nth-child(3) { grid-column: 1 / 5;  grid-row: 2; }
.work-item:nth-child(4) { grid-column: 5 / 9;  grid-row: 2; }
.work-item:nth-child(5) { grid-column: 9 / 13; grid-row: 2; }
.work-item:nth-child(6) { grid-column: 1 / 4;  grid-row: 3; }
.work-item:nth-child(7) { grid-column: 4 / 13; grid-row: 3; }

.work-thumb { width: 100%; height: 100%; position: relative; background: var(--bg2); }
.work-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.75) saturate(0.85);
  transition: filter .5s ease;
}
.work-item:hover .work-thumb img,
.work-item:focus-visible .work-thumb img { filter: brightness(0.6) saturate(0.8); }

/* Desktop Safari: animating `filter` on these large stills forces WebKit to
   repaint the image on every hover frame. After a few tile crossings that
   paint work starves the overlay transition. The static grade remains, while
   the hover darkening moves to a lightweight opacity layer instead. Scoped to
   the existing no-canvas Safari path so Chrome, Firefox, and mobile keep the
   original grade transition. */
.field-static .work-thumb img {
  transition: none;
}
.field-static .work-item:hover .work-thumb img,
.field-static .work-item:focus-visible .work-thumb img {
  filter: brightness(0.75) saturate(0.85);
}
.field-static .work-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(8, 8, 7, 0.18);
  opacity: 0;
}
.field-static .work-item:hover .work-thumb::after,
.field-static .work-item:focus-visible .work-thumb::after {
  opacity: 1;
}
/* The Safari tile must acknowledge hover on its very next paint. Even a short
   fade over a large still makes the response appear late while WebKit prepares
   the blend layer. Keep this state change immediate; do not pre-promote every
   full-size tile with `will-change`, which costs more memory than it saves. */
.field-static .work-reg,
.field-static .work-overlay { transition: none; }

/* Safari desktop keeps the original mosaic but uses one immediate hover
   surface. Timeline recording 04 showed 100 transitions each on the full-tile
   scrim and full-tile text overlay while the pointer crossed the grid. Some
   tiles cover ~1.9m CSS pixels, so even opacity-only fades make WebKit blend
   two enormous layers repeatedly. Fold the darkening into the text gradient,
   change that single surface immediately, and animate only the 10px register
   mark. Chrome, Firefox and mobile retain the original hover treatment. */
@media (min-width: 901px) {
  .safari-desktop .work-thumb img,
  .safari-desktop .work-item:hover .work-thumb img,
  .safari-desktop .work-item:focus-visible .work-thumb img {
    filter: brightness(0.75) saturate(0.85);
    transition: none;
  }
  .safari-desktop .work-thumb::after {
    content: none;
  }
  .safari-desktop .work-overlay {
    background: linear-gradient(to top,
      rgba(13,12,11,0.86) 0%, rgba(13,12,11,0.46) 40%, rgba(8,8,7,0.18) 100%);
    transition: none;
  }
  .safari-desktop .work-reg { transition: opacity .08s linear; }

  .safari-desktop .proj-hero-play img,
  .safari-desktop .proj-hero-play:hover img,
  .safari-desktop .proj-hero-play:focus-visible img {
    filter: none;
    transition: none;
  }
}

/* registration cross — top left, on hover */
.work-reg {
  position: absolute; top: 12px; left: 12px;
  width: 10px; height: 10px;
  opacity: 0; transition: opacity .3s;
  z-index: 3;
}
.work-reg::before, .work-reg::after { content: ''; position: absolute; background: var(--blue); }
.work-reg::before { width: 1px; height: 100%; left: 50%; transform: translateX(-50%); }
.work-reg::after  { height: 1px; width: 100%; top: 50%; transform: translateY(-50%); }
.work-item:hover .work-reg { opacity: 1; }

.work-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(13,12,11,0.82) 0%, rgba(13,12,11,0.38) 40%, transparent 75%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 20px;
  opacity: 0; transition: opacity .35s;
}
.work-item:hover .work-overlay,
.work-item:focus-visible .work-overlay { opacity: 1; }

/* featured tile — larger title, but info appears on hover like the rest */
.work-item:nth-child(1) .work-title { font-size: clamp(24px, 3.2vw, 46px); }

.work-type {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(220,215,205,0.65); margin-bottom: 8px;
}
.work-title {
  font-family: var(--sans);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 400; color: var(--ink);
  line-height: 1.1; letter-spacing: -0.01em;
}
.work-role {
  font-family: var(--mono); font-size: 12px;
  color: rgba(220,215,205,0.55); margin-top: 8px;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* mobile card meta — hidden on desktop, shown ≤640px */
.work-meta { display: none; }

/* ——— ABOUT ——— */
#about {
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; padding: 0;
}

.about-img-col {
  padding: 96px 48px;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 20px;
}

.about-portrait {
  width: 65%; aspect-ratio: 3/4; overflow: hidden;
  position: relative; background: var(--bg2);
}
.about-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) contrast(1.05) brightness(0.94);
}

.about-text-col { padding: 96px 48px; }

.about-name-block { margin-bottom: 48px; }
.about-full-name {
  font-family: var(--mono); font-size: clamp(22px, 3vw, 38px);
  font-weight: 300; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
  line-height: 1.2; margin-bottom: 10px;
}
.about-role-line {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2);
}
.about-body {
  font-family: var(--sans); font-size: 17px;
  font-weight: 400; line-height: 1.8;
  letter-spacing: 0.01em;        /* light-on-dark optical compensation */
  color: var(--ink); max-width: 52ch;
}

/* ——— CONTACT ——— */
#contact {
  padding: 120px 48px 100px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

.contact-email {
  font-family: var(--mono); font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 400; letter-spacing: 0.1em;
  color: var(--ink-2); text-decoration: none;
  display: inline-block; position: relative;
  transition: color .3s;
  margin-bottom: 48px;
  padding: 8px 0;                /* touch target */
}
.contact-email::after {
  content: ''; position: absolute; bottom: 4px; left: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.contact-email:hover { color: var(--ink); }
.contact-email:hover::after { transform: scaleX(1); }

.contact-links { display: flex; gap: 40px; justify-content: center; }
.contact-links a {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; transition: color .25s;
  padding: 13px 4px;             /* ≥44px touch target */
}
.contact-links a:hover { color: var(--ink); }

/* ——— FOOTER ——— */
footer {
  border-top: 1px solid var(--hairline);
  padding: 20px 48px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 2; background: var(--bg);
}
footer span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}

/* ——— SCROLL REVEAL ——— */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════
   PROJECT PAGES
   ═══════════════════════════════════════════ */

/* On project pages the main nav sits in flow and scrolls away;
   the project bar below it then sticks — one bar at a time, no overlap. */
body.proj nav {
  position: relative;
  background: var(--bg);
}

.proj-nav {
  position: sticky; top: 0; z-index: 10;
  padding: 22px 48px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.proj-back {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  transition: color .25s;
}
.proj-back .arrow { display: inline-block; transition: transform .25s; }
.proj-back:hover { color: var(--ink); }
.proj-back:hover .arrow { transform: translateX(-4px); }

.proj-nav-title {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.proj-nav-count {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

main { position: relative; z-index: 2; }

.proj-hero {
  width: 100%;
  background: var(--bg2); overflow: hidden;
  position: relative;
}
/* Full image, edge to edge: the hero takes the still's natural height at full
   width, so it is never cropped on any viewport. On very wide screens the hero
   can run a little past the fold (scroll a touch for the title); the image is
   always shown whole. Landscape stills stay short at phone widths, so this is
   unchanged on mobile. */
.proj-hero img {
  display: block;
  width: 100%; height: auto;
}

/* trailer facade — the still itself is the play button; zero player
   bytes load until the visitor taps */
.proj-hero-play {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer; position: relative;
  font: inherit; color: inherit;
}
.proj-hero-play img { transition: filter .4s ease; }
.proj-hero-play:hover img,
.proj-hero-play:focus-visible img { filter: brightness(0.72); }
.proj-play-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  padding: 14px 22px 14px 20px;
  border: 1px solid rgba(221,216,208,0.32);
  background: rgba(8,8,7,0.55);
  transition: border-color .3s, background .3s;
}
.proj-play-badge::before {
  content: ''; width: 0; height: 0;
  border-left: 7px solid var(--ink);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.proj-hero-play:hover .proj-play-badge,
.proj-hero-play:focus-visible .proj-play-badge {
  border-color: rgba(221,216,208,0.6);
  background: rgba(8,8,7,0.72);
}
.proj-embed { width: 100%; aspect-ratio: 16/9; background: var(--bg2); }
.proj-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.proj-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 50vh;
  border-top: 1px solid var(--hairline);
}

.proj-sidebar {
  padding: 56px 48px;
  border-right: 1px solid var(--hairline);
}

.proj-title {
  font-family: var(--sans); font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 300; color: var(--ink);
  line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 40px;
}

.proj-meta-row { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.proj-meta-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.proj-meta-value {
  font-family: var(--sans); font-size: 16px;
  font-weight: 400; color: var(--ink-2); line-height: 1.4;
}

.proj-divider { width: 32px; height: 1px; background: rgba(220,215,205,0.12); margin: 32px 0; }

.proj-festival-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid rgba(220,215,205,0.12);
  background: rgba(220,215,205,0.025);
  padding: 6px 10px; margin: 3px 3px 3px 0;
  transition: background .3s, border-color .3s, color .3s;
}
.proj-festival-tag:hover {
  color: var(--ink-2);
  background: rgba(220,215,205,0.07);
  border-color: rgba(220,215,205,0.18);
}

.proj-content { padding: 56px 64px; }

.proj-description {
  font-family: var(--sans); font-size: 16px;
  font-weight: 400; line-height: 1.9;
  letter-spacing: 0.01em;        /* light-on-dark optical compensation */
  color: var(--ink-2); max-width: 640px;
  margin-bottom: 48px;
}

.proj-credits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px; margin-bottom: 48px;
}

.proj-credits-group { margin-bottom: 48px; }
.proj-credits-group:last-child { margin-bottom: 48px; }
.proj-credits-group .proj-credits { margin-bottom: 0; }
.proj-credits-heading {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.proj-credit-role {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.proj-credit-name {
  font-family: var(--sans); font-size: 15px;
  font-weight: 400; color: var(--ink-2);
}

/* external watch link — only for films that block embedding */
.proj-watch-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border: 1px solid rgba(220,215,205,0.2);
  padding: 14px 22px;
  transition: border-color .3s, color .3s, background .3s;
}
.proj-watch-btn:hover {
  border-color: rgba(220,215,205,0.5);
  background: rgba(220,215,205,0.05);
}

.proj-adjacent {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.proj-adj-item {
  padding: 32px 48px;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
  transition: background .3s;
}
.proj-adj-item:first-child { border-right: 1px solid var(--hairline); }
a.proj-adj-item:hover { background: rgba(220,215,205,0.03); }
.proj-adj-dir {
  font-family: var(--mono); font-size: 8px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3);
}
.proj-adj-title {
  font-family: var(--sans); font-size: 14px;
  font-weight: 400; color: var(--ink-2); transition: color .25s;
}
a.proj-adj-item:hover .proj-adj-title { color: var(--ink); }
.proj-adj-item.next { text-align: right; align-items: flex-end; }

/* ═══════════════════════════════════════════════════════
   SAFARI DESKTOP EDITION — picture lock / contact sheet
   `.field-static` is added only for desktop Safari (or ?safari=1).
   Everything here is additionally width-gated so mobile is untouched.
   No canvas, filters, backdrop blur, fixed textures, or large animated layers.
   ═══════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  html.field-static {
    --safari-gutter: clamp(32px, 4.4vw, 72px);
    --safari-rule: rgba(221, 216, 208, 0.13);
    --safari-panel: #0b0b0a;
  }

  html.field-static body { background: #070706; }

  /* Navigation becomes a precise edit-bay rail. */
  .field-static nav {
    height: 72px;
    padding: 0 var(--safari-gutter);
    border-bottom: 1px solid var(--safari-rule);
    background: #070706;
  }
  .field-static .nav-logo {
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    letter-spacing: 0.34em;
  }
  .field-static .nav-links { gap: 0; border-left: 1px solid var(--safari-rule); }
  .field-static .nav-links li { border-right: 1px solid var(--safari-rule); }
  .field-static .nav-links a {
    min-height: 71px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    transition: color .12s linear;
  }
  .field-static .nav-links a::after { display: none; }

  /* Hero: a one-shot picture-lock sequence. */
  .field-static #hero {
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: #070706;
    border-bottom-color: var(--safari-rule);
  }
  .field-static #hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: clamp(112px, 15vh, 160px) var(--safari-gutter) clamp(116px, 16vh, 164px);
    border: 1px solid var(--safari-rule);
    opacity: 1;
    transform: none;
    animation: safariFrameIn .72s cubic-bezier(.16, 1, .3, 1) .06s backwards;
    pointer-events: none;
  }
  .field-static #hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 72px;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--blue);
    opacity: 0;
    transform: translate3d(-44vw, 0, 0);
    animation: safariPlayhead 1.18s cubic-bezier(.65, 0, .35, 1) .14s;
    pointer-events: none;
  }
  .field-static .hero-mark {
    z-index: 2;
    top: 46%;
    padding-inline: var(--safari-gutter);
  }
  .field-static .hero-mark::before {
    content: 'Picture lock / 24 fps';
    position: absolute;
    left: calc(var(--safari-gutter) + 18px);
    top: -52px;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink-3);
    opacity: 1;
    animation: safariMetaIn .3s linear .9s backwards;
  }
  .field-static .hero-wordmark {
    justify-content: space-between;
    width: 100%;
    padding-left: 0;
    font-size: clamp(6rem, 14.5vw, 12rem);
    letter-spacing: 0;
  }
  .field-static .hero-wordmark > span {
    width: 24%;
    display: inline-flex;
    justify-content: center;
    border-left: 1px solid var(--safari-rule);
  }
  .field-static .hero-wordmark > span:last-child { border-right: 1px solid var(--safari-rule); }
  .field-static .hero-wordmark > span > i { line-height: .88; }

  .field-static .hero-foot {
    padding: 20px var(--safari-gutter) 24px;
    border-top: 1px solid var(--safari-rule);
    opacity: 1;
    animation: safariMetaIn .3s linear 1s backwards;
  }
  .field-static .hero-scroll-cue {
    left: var(--safari-gutter);
    bottom: 112px;
    transform: none;
    opacity: 1;
    animation: safariMetaIn .3s linear 1.08s backwards;
  }
  .field-static .hero-tc::before { animation: none; opacity: .8; }

  @keyframes safariFrameIn {
    from { opacity: 0; transform: scaleX(.965); }
    to   { opacity: 1; transform: scaleX(1); }
  }
  @keyframes safariPlayhead {
    0%   { opacity: 0; transform: translate3d(-44vw, 0, 0); }
    10%  { opacity: .58; }
    88%  { opacity: .58; }
    100% { opacity: 0; transform: translate3d(44vw, 0, 0); }
  }
  @keyframes safariMetaIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Content loads in its final state; the hero owns the page choreography. */
  .field-static .reveal,
  .field-static .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .field-static section { padding: clamp(88px, 8vw, 128px) var(--safari-gutter); }
  .field-static .eyebrow {
    margin-bottom: 48px;
    font-size: 0.6875rem;
    color: var(--ink-2);
  }
  .field-static .eyebrow::after { background: var(--safari-rule); }

  /* Work becomes a contact sheet. Metadata is persistent, so hover is an
     accent—not the only way to discover what a frame contains. */
  .field-static #work {
    background: var(--safari-panel);
    border-bottom: 1px solid var(--safari-rule);
  }
  .field-static .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: clamp(56px, 6vw, 88px) 24px;
    background: none;
  }
  .field-static .work-item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    overflow: visible;
    min-width: 0;
    background: transparent;
  }
  .field-static .work-item:nth-child(1) { grid-column: 1 / -1; }
  .field-static .work-thumb,
  .field-static .work-item:nth-child(1) .work-thumb {
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--safari-rule);
    background: var(--bg2);
  }
  .field-static .work-item:nth-child(1) .work-thumb { aspect-ratio: 2.15 / 1; }
  .field-static .work-thumb img,
  .field-static .work-item:hover .work-thumb img,
  .field-static .work-item:focus-visible .work-thumb img {
    filter: none;
    transition: none;
  }
  .field-static .work-thumb::after,
  .field-static .work-overlay { display: none; }
  .field-static .work-reg {
    display: block;
    opacity: 1;
    transition: none;
  }
  .field-static .work-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'meta meta'
      'title role';
    gap: 8px 24px;
    padding-top: 16px;
  }
  .field-static .work-meta-top {
    grid-area: meta;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--safari-rule);
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .field-static .work-meta-num { color: var(--blue); font-variant-numeric: tabular-nums; }
  .field-static .work-meta .work-title {
    grid-area: title;
    min-width: 0;
    font-size: clamp(1.4rem, 2.2vw, 2.25rem);
    color: var(--ink);
    transition: color .12s linear;
  }
  .field-static .work-item:nth-child(1) .work-meta .work-title {
    font-size: clamp(1.75rem, 3vw, 3rem);
  }
  .field-static .work-meta .work-role {
    grid-area: role;
    align-self: end;
    margin: 0 0 3px;
    font-size: 0.6875rem;
    color: var(--ink-3);
  }
  .field-static .work-item:hover .work-meta .work-title,
  .field-static .work-item:focus-visible .work-meta .work-title { color: var(--blue); }
  .field-static .work-item:focus-visible { outline-offset: 10px; }

  /* About is a measured two-up plate rather than another full-width band. */
  .field-static #about {
    padding: 0;
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
    border-bottom: 1px solid var(--safari-rule);
  }
  .field-static .about-img-col {
    min-height: 720px;
    padding: clamp(72px, 7vw, 112px) var(--safari-gutter);
    border-right: 1px solid var(--safari-rule);
    align-items: flex-end;
  }
  .field-static .about-portrait {
    width: min(100%, 390px);
    padding: 0;
    border: 1px solid var(--safari-rule);
  }
  .field-static .about-portrait::before { display: none; }
  .field-static .about-portrait img { filter: none; }
  .field-static .about-text-col {
    min-height: 720px;
    padding: clamp(72px, 7vw, 112px) var(--safari-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .field-static .about-text-col .eyebrow { margin-bottom: 72px; }
  .field-static .about-full-name { font-size: clamp(2.25rem, 4vw, 4rem); }
  .field-static .about-body { max-width: 48ch; font-size: 1rem; line-height: 1.85; }

  .field-static #contact {
    padding: clamp(88px, 8vw, 128px) var(--safari-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 48px;
    text-align: left;
    border-bottom: 1px solid var(--safari-rule);
  }
  .field-static .contact-email {
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: var(--ink);
  }
  .field-static .contact-email::after { transform: scaleX(1); background: var(--safari-rule); }
  .field-static .contact-links { justify-content: flex-end; }
  .field-static footer { padding: 20px var(--safari-gutter); border-top: 0; }

  /* Project pages become a quiet screening-room layout. */
  .field-static body.proj nav { position: fixed; }
  .field-static body.proj main { padding-top: 72px; }
  .field-static .proj-nav {
    top: 72px;
    padding: 16px var(--safari-gutter);
    border-bottom-color: var(--safari-rule);
    background: #070706;
  }
  .field-static .proj-hero {
    width: auto;
    margin: 0 var(--safari-gutter);
    border-inline: 1px solid var(--safari-rule);
    background: #050504;
  }
  .field-static .proj-hero img {
    width: 100%;
    max-height: calc(100svh - 176px);
    object-fit: contain;
    filter: none;
  }
  .field-static .proj-hero-play img,
  .field-static .proj-hero-play:hover img,
  .field-static .proj-hero-play:focus-visible img { filter: none; transition: none; }
  .field-static .proj-play-badge {
    background: #070706;
    border-color: rgba(221,216,208,.48);
    transition: color .12s linear, border-color .12s linear;
  }
  .field-static .proj-hero-play:hover .proj-play-badge,
  .field-static .proj-hero-play:focus-visible .proj-play-badge {
    background: #070706;
    color: var(--blue);
    border-color: var(--blue);
  }
  .field-static .proj-body {
    margin-inline: var(--safari-gutter);
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    border: 1px solid var(--safari-rule);
  }
  .field-static .proj-sidebar {
    padding: clamp(48px, 5vw, 80px);
    border-right-color: var(--safari-rule);
  }
  .field-static .proj-content { padding: clamp(48px, 5vw, 80px); }
  .field-static .proj-title { font-size: clamp(2rem, 4vw, 4rem); }
  .field-static .proj-meta-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .field-static .proj-festival-tag { transition: none; background: transparent; }
  .field-static .proj-description { max-width: 54ch; font-size: 1rem; }
  .field-static .proj-adjacent { margin-inline: var(--safari-gutter); border-inline: 1px solid var(--safari-rule); }
  .field-static .proj-adj-item { transition: none; }
  .field-static a.proj-adj-item:hover { background: transparent; }
  .field-static a.proj-adj-item:hover .proj-adj-title { color: var(--blue); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

/* ── TABLET ≤900px ── */
@media (max-width: 900px) {
  nav { padding: 20px 28px; }
  .nav-links { gap: 20px; }

  section { padding: 80px 28px; }
  .hero-foot { padding: 0 28px 32px; }

  .work-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .work-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .work-item:nth-child(1) { grid-column: 1 / -1; }
  .work-thumb { aspect-ratio: 16/9; height: auto; }
  .work-overlay { opacity: 1; }

  #about { grid-template-columns: 1fr; }
  .about-img-col {
    padding: 80px 28px 40px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .about-portrait { width: 50%; }
  .about-text-col { padding: 48px 28px 80px; }

  #contact { padding: 80px 28px 72px; }

  .proj-nav { padding: 16px 28px; }
  .proj-body { grid-template-columns: 1fr; }
  .proj-sidebar {
    padding: 40px 28px 24px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .proj-content { padding: 40px 28px 56px; }
  .proj-adj-item { padding: 24px 28px; }

  footer { padding: 20px 28px; }
}

/* ── MOBILE ≤640px ── */
@media (max-width: 640px) {
  nav { padding: 14px 20px; }
  .nav-logo { font-size: 10px; letter-spacing: 0.2em; padding: 8px 0; }

  #hero { min-height: 100svh; }
  .hero-foot {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 0 20px 28px;
  }
  .hero-scroll-cue { bottom: 132px; }

  section { padding: 56px 20px; }
  .eyebrow { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 28px; }

  /* WORK — editorial cards: image breathes, meta sits below */
  .work-grid { display: flex; flex-direction: column; gap: 0; background: none; }
  .work-item:nth-child(n) {
    grid-column: auto; grid-row: auto;
    background: none;
    padding: 0 0 36px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgba(220,215,205,0.07);
  }
  .work-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .work-thumb { aspect-ratio: 16/9; height: auto; background: var(--bg2); }
  .work-thumb img { filter: brightness(0.92) saturate(0.95); }
  .work-overlay { display: none; }          /* meta moves below the image */
  .work-reg { display: none; }

  .work-meta {
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 14px;
  }
  .work-meta-top {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .work-meta-num { font-variant-numeric: tabular-nums; color: var(--blue); }
  .work-meta .work-title { font-size: 19px; color: var(--ink); }
  .work-meta .work-role { margin-top: 2px; font-size: 10px; color: var(--ink-3); }

  /* ABOUT — text first, photo after */
  .about-img-col {
    order: 2;
    border-bottom: none;
    border-top: 1px solid rgba(220,215,205,0.07);
    padding: 40px 20px 56px;
    align-items: center;
  }
  .about-text-col { order: 1; padding: 56px 20px 40px; }
  .about-portrait { width: 60%; }
  .about-full-name { font-size: clamp(22px, 7vw, 32px); }
  .about-role-line { font-size: 10px; }
  .about-body { font-size: 15px; line-height: 1.7; }

  #contact { padding: 56px 20px 48px; }
  .contact-email { font-size: clamp(12px, 3.8vw, 15px); overflow-wrap: anywhere; }
  .contact-links { gap: 24px; flex-wrap: wrap; }

  /* PROJECT PAGE */
  .proj-nav { padding: 12px 20px; }
  .proj-nav-title { display: none; }
  .proj-back { font-size: 10px; gap: 8px; padding: 8px 0; }
  .proj-play-badge { padding: 11px 16px 11px 15px; letter-spacing: 0.2em; gap: 10px; }
  .proj-sidebar { padding: 28px 20px 20px; }
  .proj-title { font-size: clamp(24px, 7vw, 34px); margin-bottom: 22px; }
  .proj-meta-row { flex-direction: row; flex-wrap: wrap; gap: 20px 28px; margin-bottom: 0; }
  .proj-divider { margin: 22px 0; }
  .proj-content { padding: 28px 20px 48px; }
  .proj-description { font-size: 15px; line-height: 1.75; margin-bottom: 32px; }
  .proj-credits { grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
  .proj-credit-name { font-size: 13px; }
  .proj-adj-item { padding: 20px; min-height: 64px; justify-content: center; }
  .proj-adj-title { font-size: 13px; }

  footer { padding: 16px 20px; flex-direction: column; gap: 5px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-foot, .hero-scroll-cue { animation: none; opacity: 1; }
  .field-static .hero-wordmark { animation: none; opacity: 1; }
  .field-static .hero-wordmark > span,
  .field-static .hero-wordmark > span > i { animation: none; opacity: 1; transform: none; }
  /* no focus-pull in or scroll-pull off — mark just sits sharp and
     scrolls away naturally */
  .field-static .hero-fx,
  .field-static .hero-rack { animation: none; opacity: 1; filter: none; transform: none; }
  .hero-tc::before { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════
   MATCH CUT — cross-document view transitions
   The clicked work still morphs into the project-page hero
   (and back). Chrome / Edge / Safari 18+; Firefox simply
   navigates as before. Each index tile is paired with its
   project page via an inline view-transition-name there.
   ═══════════════════════════════════════════ */
@view-transition { navigation: auto; }

.work-item:nth-child(1) .work-thumb img { view-transition-name: work-1; }
.work-item:nth-child(2) .work-thumb img { view-transition-name: work-2; }
.work-item:nth-child(3) .work-thumb img { view-transition-name: work-3; }
.work-item:nth-child(4) .work-thumb img { view-transition-name: work-4; }
.work-item:nth-child(5) .work-thumb img { view-transition-name: work-5; }
.work-item:nth-child(6) .work-thumb img { view-transition-name: work-6; }
.work-item:nth-child(7) .work-thumb img { view-transition-name: work-7; }

/* the rest of the page cuts quickly; the still carries the moment */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .25s; }

/* snapshots keep covering their frame while the box morphs — no stretch */
::view-transition-old(work-1), ::view-transition-new(work-1),
::view-transition-old(work-2), ::view-transition-new(work-2),
::view-transition-old(work-3), ::view-transition-new(work-3),
::view-transition-old(work-4), ::view-transition-new(work-4),
::view-transition-old(work-5), ::view-transition-new(work-5),
::view-transition-old(work-6), ::view-transition-new(work-6),
::view-transition-old(work-7), ::view-transition-new(work-7) {
  width: 100%; height: 100%;
  object-fit: cover;
}

::view-transition-group(work-1), ::view-transition-group(work-2),
::view-transition-group(work-3), ::view-transition-group(work-4),
::view-transition-group(work-5), ::view-transition-group(work-6),
::view-transition-group(work-7) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}