/* legacy-bridge.css — the subset of styles.css that index.html consumes.
   Generated from the live CSSOM: every rule here matches a real node in
   the homepage DOM (base, project layer, dialogs, menu, 390/768/1280/1440).
   index.html no longer loads styles.css; interior pages still do. */

@font-face { font-family: Archivo; src: url("assets/fonts/archivo-400.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: Archivo; src: url("assets/fonts/archivo-500.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 500; }
@font-face { font-family: "Archivo Condensed"; src: url("assets/fonts/archivo-condensed-900.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 900; }
@font-face { font-family: "Archivo Black"; src: url("assets/fonts/archivo-black.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 500; }
:root { color-scheme: dark; --ink: #f2f1ed; --paper: #080808; --surface: #111111; --line: #2a2a2a; --muted: #aaa9a4; --quiet: #74736f; --pad: 64px; --nav-height: 72px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 200ms; --dur-fast: 150ms; --dur-slow: 300ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --delay-step: 40ms; --dist-1: 6px; --dist-2: 12px; --dist-3: 20px; --scale-in: 0.97; --scale-over: 1.02; --modal-open-dur: 250ms; --modal-close-dur: 150ms; --modal-scale: 0.96; --modal-scale-close: 0.96; --modal-ease: cubic-bezier(.22,1,.36,1); --resize-dur: 300ms; --resize-ease: cubic-bezier(0.22, 1, 0.36, 1); --digit-dur: 500ms; --digit-distance: 8px; --digit-stagger: 70ms; --digit-blur: 2px; --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1); --digit-dir-x: 0; --digit-dir-y: 1; --badge-slide-dur: 260ms; --badge-pop-dur: 500ms; --badge-pop-close-dur: 180ms; --badge-fade-dur: 400ms; --badge-fade-close-dur: 180ms; --badge-blur: 2px; --badge-offset-x: -8.2px; --badge-offset-y: 12.4px; --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1); --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1); --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1); --text-swap-dur: 150ms; --text-swap-translate-y: 4px; --text-swap-blur: 2px; --text-swap-ease: ease-in-out; --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms; --dropdown-pre-scale: 0.97; --dropdown-closing-scale: 0.99; --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1); --panel-open-dur: 400ms; --panel-close-dur: 350ms; --panel-translate-y: 100px; --panel-blur: 2px; --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); --page-slide-dur: 200ms; --page-fade-dur: 200ms; --page-slide-distance: 8px; --page-blur: 3px; --page-stagger: 0ms; --page-exit-enabled: 1; --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1); --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1); --icon-swap-dur: 200ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out; --check-opacity-dur: 550ms; --check-rotate-dur: 550ms; --check-rotate-from: 80deg; --check-bob-dur: 450ms; --check-y-amount: 40px; --check-blur-dur: 500ms; --check-blur-from: 10px; --check-path-dur: 550ms; --check-path-delay: 80ms; --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1); --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1); --avatar-lift: -4px; --avatar-dur: 320ms; --avatar-scale: 1.05; --avatar-falloff: 0.45; --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1); --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1); --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: cubic-bezier(0.22, 1, 0.36, 1); --revert-hold: 3000ms; --revert-dur: 280ms; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0px; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: Archivo, Arial, sans-serif; letter-spacing: 0px; }
body.menu-open, body.dialog-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
#work, #photo, #studio, #learn { scroll-margin-top: var(--nav-height); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0px); }
.site-nav { position: fixed; inset: 0px 0px auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--nav-height); padding: 0 var(--pad); overflow: hidden; border-bottom: 1px solid transparent; transition: background-color 240ms var(--ease), border-color 240ms var(--ease), opacity 640ms var(--ease), transform 640ms var(--ease); }
body.motion-ready:not(.is-page-ready) .floating-logo { opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); white-space: nowrap; border: 0px; }
.site-nav.is-solid { border-color: var(--line); background: rgba(8, 8, 8, 0.94); }
.desktop-nav { grid-column: 1; justify-self: start; display: flex; gap: 32px; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: 11px; text-transform: uppercase; }
body.motion-ready:not(.is-page-ready) .site-nav { opacity: 0; transform: translateY(-14px); }
body.motion-ready.is-page-ready .site-nav { opacity: 1; transform: translateY(0px); transition-delay: 0ms, 0ms, 520ms, 520ms; }
.desktop-nav a, .footer-bottom a { transition: color 180ms var(--ease); }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--muted); }
.nav-cta { grid-column: 3; display: inline-flex; gap: 10px; align-items: center; justify-self: end; min-height: 40px; padding: 0px 16px; border: 1px solid rgba(242, 241, 237, 0.7); font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease); }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--ink); color: var(--paper); }
.nav-cta:active, .button:active, .lane:active { transform: scale(0.98); }
.menu-toggle { grid-column: 3; display: none; justify-self: end; border: 0px; background: transparent; font-family: "IBM Plex Mono", monospace; font-size: 11px; text-transform: uppercase; cursor: pointer; }
.mobile-menu { position: fixed; inset: 0px; z-index: 19; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: calc(var(--nav-height) + 20px) 24px 40px; background: var(--paper); text-align: center; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 14px 8px; font-family: "Archivo Black", Impact, sans-serif; font-size: 32px; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
.hero { position: relative; min-height: 100dvh; overflow: hidden; background: rgb(5, 5, 5); view-timeline-name: --hero; view-timeline-axis: block; }
.hero-media, .hero-fallback, .hero-video, .hero-scrim { position: absolute; inset: 0px; }
.hero-media { overflow: hidden; clip-path: inset(0px); }
.hero-fallback { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.045); will-change: transform; }
.hero-scrim { background: linear-gradient(rgba(5, 5, 5, 0.28) 0%, rgba(5, 5, 5, 0.32) 48%, rgba(5, 5, 5, 0.42) 68%, rgba(5, 5, 5, 0.66) 80%, rgba(5, 5, 5, 0.88) 90%, rgb(5, 5, 5) 100%); box-shadow: rgba(5, 5, 5, 0.18) 0px 120px 120px inset; }
@keyframes hero-fallback-life { 
  0% { transform: scale(1.055) translate3d(-0.4%, 0px, 0px); }
  100% { transform: scale(1.02) translate3d(0.4%, -0.5%, 0px); }
}
.section-label, .production-copy p, .lane > span, .lane strong, .footer-bottom, .film-loader, .film-meta a { font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.4; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .hero-fallback { animation: hero-fallback-life 9s var(--ease-out) both; }
  body.motion-ready .hero-media { transition: clip-path 900ms var(--ease-out); }
  body.motion-ready:not(.is-page-ready) .hero-media { clip-path: inset(0px 0px 100%); }
  body.motion-ready.is-page-ready .hero-media { clip-path: inset(0px); }
}
@keyframes hero-media-away { 
  100% { opacity: 0.42; transform: scale(1.08); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
  .hero-media { animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: hero-media-away; animation-range: exit; animation-timeline: --hero; }
}}
.campaign-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); align-items: start; gap: 18px; }
.campaign-grid.is-mosaic { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.campaign-grid.is-mosaic > :first-child { grid-area: span 2 / span 2; align-self: stretch; }
.campaign-grid.is-mosaic > :first-child .campaign-media { height: 100%; aspect-ratio: auto; }
.campaign-grid.is-mosaic > :first-child .campaign-still { height: 100%; }
.campaign-card { position: relative; display: block; min-width: 0px; padding: 0px; border: 0px; background: transparent; color: var(--ink); opacity: 0; clip-path: inset(0px 0px 10%); text-align: left; transform: translateY(42px) scale(0.992); transform-origin: center center; cursor: pointer; transition: clip-path 780ms var(--ease) calc(var(--reveal-index) * 55ms), opacity 700ms var(--ease) calc(var(--reveal-index) * 55ms), transform 780ms var(--ease) calc(var(--reveal-index) * 55ms); }
.campaign-card.is-revealed { opacity: 1; clip-path: inset(0px); transform: translateY(0px); }
.campaign-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); transform: translateY(0px); transition: transform 520ms var(--ease); }
.campaign-media::after { position: absolute; inset: 0px; z-index: 1; box-shadow: rgba(8, 8, 8, 0.72) 0px -150px 120px inset; content: ""; pointer-events: none; }
.campaign-still, .campaign-video { position: absolute; inset: 0px; width: 100%; height: 100%; }
.campaign-still { object-fit: cover; transition: opacity 420ms var(--ease), transform 720ms var(--ease); }
.campaign-video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 0px; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease); will-change: opacity; }
.campaign-card.is-previewing .campaign-still, .campaign-card:focus-visible .campaign-still { transform: scale(1.025); }
.campaign-card.is-previewing, .campaign-card:focus-visible { z-index: 1; }
.campaign-card.is-previewing .campaign-media, .campaign-card:focus-visible .campaign-media { transform: translateY(-4px); }
.campaign-card.is-previewing.is-preview-ready .campaign-still { opacity: 0; }
.campaign-card.is-previewing.is-preview-ready .campaign-video { opacity: 1; }
.campaign-credit { position: absolute; right: 20px; bottom: 18px; left: 20px; z-index: 2; display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 5px 18px; min-height: 0px; padding: 0px; transition: transform 260ms var(--ease); }
.campaign-card.is-previewing .campaign-credit, .campaign-card:focus-visible .campaign-credit { transform: translateY(-2px); }
.campaign-title { grid-column: 1 / -1; font-family: "Archivo Black", Impact, sans-serif; font-size: 25px; font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .campaign-grid:has(.campaign-card.is-previewing) .campaign-card:not(.is-previewing) { opacity: 0.42; transform: scale(0.986); }
}
.campaign-card .campaign-title { transition: transform 300ms var(--ease); }
.campaign-card.is-previewing .campaign-title, .campaign-card:focus-visible .campaign-title { transform: translateY(-3px); }
.galaxy-chapter { position: relative; height: 280dvh; min-height: 1980px; margin-top: -1px; background: rgb(5, 5, 5); --galaxy-copy-opacity: 0; --galaxy-copy-scale: 0.97; --galaxy-exit: 1; }
.galaxy-sticky { position: sticky; top: 0px; display: grid; width: 100%; height: 100dvh; overflow: hidden; place-items: center; background: rgb(5, 5, 5); }
.galaxy-canvas, .galaxy-vignette { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: var(--galaxy-exit, 1); transition: opacity 80ms linear; }
.galaxy-canvas { display: block; }
.galaxy-vignette { box-shadow: rgba(5, 5, 5, 0.72) 0px 0px 190px inset, rgba(5, 5, 5, 0.74) 0px -160px 130px inset, rgba(5, 5, 5, 0.52) 0px 130px 110px inset; pointer-events: none; }
.galaxy-copy { position: relative; z-index: 1; width: min(1200px, calc(100% - (var(--pad) * 2))); margin: 0px; color: var(--ink); font-family: "Archivo Black", Impact, sans-serif; font-size: 82px; font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; text-align: center; text-transform: uppercase; opacity: var(--galaxy-copy-opacity); transform: scale(var(--galaxy-copy-scale)); transition: opacity 80ms linear, transform 80ms linear; will-change: opacity, transform; }
.galaxy-copy span { display: block; white-space: nowrap; opacity: var(--line-progress, 0); transform: translateY(var(--line-y, 34px)); will-change: opacity, transform; }
.galaxy-copy .galaxy-final-line { margin-top: 0px; font-size: 1.32em; line-height: 0.72; }
.photo-motion { padding: 70px 0px 154px; overflow: hidden; border-top: 1px solid var(--line); view-timeline-name: --photo-runway; view-timeline-axis: block; }
.photo-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 0 var(--pad); }
.photo-intro h2, .work-intro h2, .photo-page-hero h1, .reviews-heading h2, .final-cta-content h2, .footer-wordmark, .photo-dialog-meta h2 { margin: 0px; font-family: "Archivo Black", Impact, sans-serif; font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
.photo-intro h2 { font-size: 66px; }
.photo-scroller { position: relative; margin-top: 64px; padding: 34px 0px; overflow: hidden; }
.photo-scroller-rot { transform: rotate(-2deg) scale(1.045); transform-origin: center center; }
.photo-row { display: flex; gap: 14px; width: max-content; margin-bottom: 14px; animation: 92s linear 0s infinite normal none running photo-loop-a; will-change: transform; }
.photo-row-reverse { animation-name: photo-loop-b; }
.photo-row-alt { animation-name: photo-loop-a; animation-duration: 116s; }
.photo-row:last-child { margin-bottom: 0px; }
.photo-frame { flex: 0 0 auto; height: clamp(190px, 22vw, 318px); aspect-ratio: var(--photo-ratio); padding: 0px; overflow: hidden; border: 0px; background: var(--surface); cursor: zoom-in; }
.photo-frame img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--photo-position, 50% 50%); transition: transform 760ms var(--ease); }
.photo-frame:hover img, .photo-frame:focus-visible img { transform: scale(1.055); }
@keyframes photo-loop-a { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes photo-loop-b { 
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0px); }
}
@keyframes photo-runway-shift { 
  0% { transform: translateX(3vw) rotate(-2deg) scale(1.045); }
  100% { transform: translateX(-5vw) rotate(-2deg) scale(1.045); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
  .photo-scroller-rot { animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: photo-runway-shift; animation-range: entry exit; animation-timeline: --photo-runway; }
}}
@keyframes kls-vt-out { 
  100% { opacity: 0; }
}
@keyframes kls-vt-in { 
  0% { opacity: 0; }
}
.studio-section { position: relative; padding: 150px var(--pad) 170px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.story-play { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; padding: 0px; border: 1px solid rgba(242, 241, 237, 0.72); border-radius: 50%; background: rgba(8, 8, 8, 0.72); color: var(--ink); cursor: pointer; transform: translate(-50%, -50%); transition: background-color 220ms var(--ease), color 220ms var(--ease), opacity 220ms var(--ease), transform 220ms var(--ease); }
.story-play:hover, .story-play:focus-visible { background: var(--ink); color: var(--paper); transform: translate(-50%, -50%) scale(1.06); }
@keyframes final-cta-drift { 
  0% { transform: scale(1.08); }
  100% { transform: scale(1.02); }
}
.instagram-heading { display: grid; justify-items: center; text-align: center; }
.ig-avatar { display: block; width: 96px; height: 96px; margin-bottom: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; transition: transform 320ms var(--ease), border-color 320ms var(--ease); }
.ig-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-avatar:hover, .ig-avatar:focus-visible { border-color: var(--ink); transform: translateY(-3px); }
.instagram-heading h2 { max-width: 100%; margin: 0px; font-family: "Archivo Black", Impact, sans-serif; font-size: 54px; font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; overflow-wrap: anywhere; text-transform: uppercase; }
.instagram-heading h2 a { transition: opacity 200ms var(--ease); }
.instagram-heading h2 a:hover, .instagram-heading h2 a:focus-visible { opacity: 0.72; }
.label-eyebrow, .section-label, .lane > span, .ig-label, .ig-followers { font-family: Archivo, Arial, sans-serif; font-weight: 500; font-size: 11px; line-height: 1.5; letter-spacing: 0.3em; text-transform: uppercase; }
.instagram-grid { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 4px; margin-top: 64px; }
.instagram-tile { position: relative; display: block; aspect-ratio: 1 / 1; min-width: 0px; overflow: hidden; background: var(--surface); }
.instagram-tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position, 50% 50%); transform: scale(1.01); transition: transform 700ms var(--ease), filter 350ms var(--ease); }
.instagram-tile::after { position: absolute; inset: 0px; background: rgba(8, 8, 8, 0); content: ""; transition: background-color 300ms var(--ease); }
.instagram-tile:hover img, .instagram-tile:focus-visible img { filter: saturate(1.05) contrast(1.02); transform: scale(1.065); }
.instagram-tile:hover::after, .instagram-tile:focus-visible::after { background: rgba(8, 8, 8, 0.28); }
body.motion-ready .instagram-tile { transition-delay: calc(var(--instagram-index) * 35ms); }
.site-footer { padding: 150px var(--pad) 36px; border-top: 1px solid var(--line); text-align: center; }
.footer-email { display: inline-block; max-width: 100%; margin-top: 52px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 28px; overflow-wrap: anywhere; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px 34px; justify-content: center; max-width: 760px; margin: 80px auto 0px; font-family: "IBM Plex Mono", monospace; font-size: 11px; text-transform: uppercase; }
.footer-nav a, .footer-social a { transition: color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--muted); }
.footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 54px; }
.footer-social a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); }
.footer-social a:hover, .footer-social a:focus-visible { border-color: var(--ink); transform: translateY(-3px); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; margin-top: 150px; color: var(--quiet); }
.film-dialog, .photo-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0px; padding: 0px; border: 0px; background: rgba(8, 8, 8, 0.98); color: var(--ink); }
.film-dialog::backdrop, .photo-dialog::backdrop { background: rgba(8, 8, 8, 0.96); }
.t-modal { transform-origin: center center; transform: scale(var(--modal-scale)); opacity: 0; pointer-events: none; transition: transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease); will-change: transform, opacity; }
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing { transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none; transition: transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease); }
@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}
.film-close { position: fixed; top: 18px; right: 24px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0px; border: 1px solid var(--line); background: var(--paper); font-size: 34px; line-height: 1; cursor: pointer; transition: border-color 200ms var(--ease), color 200ms var(--ease), opacity 380ms var(--ease), transform 380ms var(--ease); }
.film-close:hover, .film-close:focus-visible { border-color: var(--ink); }
.photo-dialog-shell { display: grid; place-content: center; min-height: 100dvh; padding: 72px var(--pad) 28px; }
.photo-dialog-shell > img { width: auto; max-width: min(1380px, -128px + 100vw); height: auto; max-height: calc(100dvh - 150px); margin: auto; object-fit: contain; }
.photo-dialog-meta { display: flex; justify-content: space-between; align-items: end; gap: 28px; padding-top: 16px; }
.photo-dialog-meta h2 { max-width: 900px; font-size: 28px; }
.photo-dialog-meta span { color: var(--quiet); font-family: "IBM Plex Mono", monospace; font-size: 10px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
@media (max-width: 1280px) {
  :root { --pad: 40px; }
  .hero h1 { font-size: 126px; }
  .photo-intro h2, .work-intro h2 { font-size: 58px; }
  .instagram-heading h2 { font-size: 52px; }
  .galaxy-copy { font-size: 66px; }
}
@media (max-width: 980px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .desktop-nav, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .campaign-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .campaign-grid.is-mosaic { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .campaign-grid.is-mosaic > :first-child { grid-area: span 1 / span 2; }
  .instagram-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .instagram-heading h2 { font-size: 44px; }
  .galaxy-copy { font-size: min(58px, 8vw); }
}
@media (max-width: 720px) {
  :root { --pad: 20px; --nav-height: 64px; }
  .hero { min-height: 86dvh; }
  .campaign-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .campaign-grid.is-mosaic { grid-template-columns: 1fr; }
  .campaign-grid.is-mosaic > :first-child { grid-area: span 1 / span 1; }
  .campaign-media { aspect-ratio: 16 / 9; }
  .campaign-credit { right: 12px; bottom: 12px; left: 12px; column-gap: 12px; }
  .campaign-title { font-size: 29px; }
  .galaxy-chapter { height: 275dvh; min-height: 1780px; }
  .galaxy-copy { width: calc(100% - 40px); font-size: min(40px, 6.8vw); line-height: 0.98; }
  .galaxy-copy .galaxy-final-line { margin-top: 0px; font-size: 1.26em; line-height: 0.72; }
  .galaxy-vignette { box-shadow: rgba(5, 5, 5, 0.68) 0px 0px 90px inset, rgba(5, 5, 5, 0.78) 0px -100px 90px inset, rgba(5, 5, 5, 0.56) 0px 90px 80px inset; }
  .photo-motion { padding-top: 68px; padding-bottom: 96px; }
  .photo-intro, .work-intro { align-items: center; flex-direction: column; gap: 22px; text-align: center; }
  .photo-intro h2, .work-intro h2 { font-size: min(42px, 10vw); white-space: nowrap; }
  #work-title { font-size: min(42px, 7.2vw); }
  .photo-scroller { margin-top: 38px; padding: 22px 0px; }
  .photo-row { gap: 10px; margin-bottom: 10px; }
  .photo-frame { height: 180px; }
  .studio-section { padding: 92px var(--pad) 108px; }
  .story-play { width: 62px; height: 62px; }
  .instagram-heading { padding: 0px 10px; }
  .instagram-heading h2 { font-size: min(26px, 6.5vw); }
  .instagram-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 2px; margin-top: 44px; }
  .site-footer { padding-top: 100px; }
  .footer-email { margin-top: 38px; font-size: 18px; }
  .footer-nav { gap: 14px 18px; max-width: 210px; margin-top: 58px; font-size: 10px; }
  .footer-social { margin-top: 42px; }
  .footer-bottom { flex-direction: column; margin-top: 100px; }
  .photo-dialog-shell { padding: 70px 12px 20px; }
  .photo-dialog-shell > img { max-width: calc(-24px + 100vw); max-height: calc(100dvh - 150px); }
  .photo-dialog-meta { align-items: start; flex-direction: column; gap: 8px; }
  .photo-dialog-meta h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .campaign-video { display: none; }
  .photo-scroller { overflow-x: auto; }
  .photo-scroller-rot { transform: none; }
  .photo-row { animation: auto ease 0s 1 normal none running none; }
  .galaxy-chapter { height: auto; min-height: 0px; }
  .galaxy-sticky { position: relative; min-height: 82dvh; }
  .galaxy-copy { --galaxy-copy-opacity: 1; --galaxy-copy-scale: 1; }
  .galaxy-copy span { --line-progress: 1; --line-blur: 0px; --line-y: 0px; filter: none; transform: none; }
}
:root { --layer-dur: 440ms; }
.project-open { overflow: hidden; }
.project-layer { position: fixed; inset: 0px; z-index: 140; width: 100%; height: 100dvh; background: rgb(5, 5, 5); color: var(--ink); transform-origin: 0px 0px; will-change: transform, opacity; transition: transform var(--layer-dur) var(--ease), opacity var(--layer-dur) var(--ease); }
.project-layer[hidden] { display: none; }
.project-scroll { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.project-scroll::-webkit-scrollbar { display: none; }
.project-close { position: fixed; top: 0px; right: var(--pad); z-index: 160; display: inline-flex; align-items: center; gap: 10px; height: var(--nav-height); padding: 0px; border: 0px; background: none; color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 180ms var(--ease), opacity 180ms var(--ease); }
.project-close::after { display: block; width: 9px; height: 9px; content: ""; background: currentcolor; clip-path: polygon(0px 8%, 8% 0px, 50% 42%, 92% 0px, 100% 8%, 58% 50%, 100% 92%, 92% 100%, 50% 58%, 8% 100%, 0px 92%, 42% 50%); }
.project-close:hover, .project-close:focus-visible { color: var(--muted); }
body.project-open .site-nav.site-nav { z-index: 150; background-color: var(--paper); border-bottom-color: var(--line); opacity: 1; transform: none; }
body.project-open .nav-cta { opacity: 0; pointer-events: none; }
@media (min-width: 981px) {
  body.project-open .menu-toggle { opacity: 0; pointer-events: none; }
}
@media (max-width: 980px) {
  .project-close { right: calc(var(--pad) + 74px); }
}
.project-hero { position: relative; width: 100%; height: 78dvh; min-height: 420px; margin-top: var(--nav-height); overflow: hidden; background: rgb(5, 5, 5); }
.project-hero-img, .project-hero-video { position: absolute; inset: 0px; width: 100%; height: 100%; border: 0px; object-fit: cover; }
.project-hero-video { opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.project-hero-video iframe, .project-hero-video.is-frame { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%; transform: translate(-50%, -50%); }
.project-hero.is-playing .project-hero-video { opacity: 1; }
.project-hero.is-playing .project-hero-img { opacity: 0; }
.project-hero-img { transition: opacity 600ms var(--ease); }
.project-hero::after { position: absolute; inset: 0px; z-index: 1; background: linear-gradient(to top, rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0) 48%); content: ""; pointer-events: none; }
.project-hero-title { position: absolute; right: clamp(18px, 5vw, 64px); bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); left: clamp(18px, 5vw, 64px); z-index: 2; }
.project-hero-name { margin: 0px; font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(40px, 9vw, 104px); font-weight: 400; line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; }
.project-body { --pg-gap: 8px; --pg-gutter: clamp(8px, 1.4vw, 20px); padding: clamp(28px, 4vw, 56px) var(--pg-gutter) clamp(40px, 6vw, 96px); }
.project-block + .project-block { margin-top: clamp(28px, 4vw, 56px); }
.project-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: var(--pg-gap); padding: 0px 2px; }
.project-block-head h2 { margin: 0px; font-family: "Archivo Black", Impact, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; }
.project-films { display: grid; grid-template-columns: repeat(var(--pg-cols, 3), minmax(0, 1fr)); gap: var(--pg-gap); }
.project-films .project-video, .project-films .project-media { width: 100%; aspect-ratio: var(--pg-ratio, 16 / 9); height: auto; margin: 0px; }
.project-films.is-vertical { --pg-cols: 5; --pg-ratio: 9 / 16; }
.project-photos { column-count: var(--pg-cols, 3); column-gap: var(--pg-gap); }
.project-photos .project-row { break-inside: avoid; margin: 0 0 var(--pg-gap); }
.project-photos .project-media { width: 100%; height: auto; }
.project-photos .project-media img { display: block; width: 100%; height: auto; }
@media (max-width: 1100px) {
  .project-films { --pg-cols: 2; }
  .project-films.is-vertical { --pg-cols: 3; }
  .project-photos { --pg-cols: 2; }
}
@media (max-width: 640px) {
  .project-body { --pg-gap: 6px; }
  .project-films { --pg-cols: 1; }
  .project-films.is-vertical { --pg-cols: 2; }
  .project-photos { --pg-cols: 2; }
}
.project-row { opacity: 0; transform: translateY(26px); transition: opacity 660ms var(--ease), transform 660ms var(--ease); }
.project-row.is-in { opacity: 1; transform: none; }
.project-media { position: relative; width: 100%; overflow: hidden; background: rgb(13, 13, 13); }
.project-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: rgb(13, 13, 13); }
.project-video-play { position: absolute; inset: 0px; display: grid; place-items: center; gap: 14px; width: 100%; height: 100%; padding: 0px; border: 0px; background: radial-gradient(circle at 50% 46%, rgba(20, 20, 20, 0.55), rgb(11, 11, 11)); color: var(--ink); cursor: pointer; }
.project-video-play span { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(242, 241, 237, 0.45); border-radius: 50%; transition: border-color 200ms var(--ease), transform 200ms var(--ease); }
.project-video-play:hover span { border-color: var(--ink); transform: scale(1.06); }
.project-video-play small { font-family: Archivo, Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.project-next { position: relative; display: block; width: 100%; min-height: 46dvh; padding: 0px; overflow: hidden; border: 0px; background: rgb(5, 5, 5); color: var(--ink); text-align: left; cursor: pointer; }
.project-next-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; transition: opacity 520ms var(--ease), transform 900ms var(--ease); }
.project-next:hover .project-next-img { opacity: 0.48; transform: scale(1.03); }
.project-next::after { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(5, 5, 5, 0.62), rgba(5, 5, 5, 0.3)); content: ""; pointer-events: none; }
.project-next-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 46dvh; padding: clamp(28px, 6vw, 84px); }
.project-next-label { color: rgba(242, 241, 237, 0.74); }
.project-next-name { margin: 0px; font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(34px, 7vw, 88px); font-weight: 400; line-height: 0.94; letter-spacing: -0.015em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .project-layer { transition: opacity 160ms linear; }
  .project-row { opacity: 1; transform: none; transition: none; }
}
.project-hero-context { margin: 12px 0px 0px; color: rgba(242, 241, 237, 0.74); font-family: Archivo, Arial, sans-serif; font-size: clamp(13px, 1.5vw, 15px); font-weight: 500; letter-spacing: 0.01em; }
.project-video-poster { position: absolute; inset: 0px; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.project-video .project-video-play { z-index: 1; background: rgba(5, 5, 5, 0.44); }
.project-video .project-video-play:hover { background: rgba(5, 5, 5, 0.32); }
.course-section.is-paper .course-compare-col:not(.is-featured) dt { color: rgba(8, 8, 8, 0.55); }