/* ================================================================
   HUNWOO — Haute-couture design archive
   ================================================================ */

:root {
  --bg: #f4f4f3;
  --ink: #121212;
  --muted: #6e6e6a;
  --line: rgba(18, 18, 18, 0.12);
  --line-soft: rgba(18, 18, 18, 0.06);
  --frame: rgba(18, 18, 18, 0.04);
  --panel: #161616;
  --panel-text: #ececea;
  --panel-muted: rgba(236, 236, 234, 0.42);

  --margin: clamp(20px, 5vw, 88px);
  --gutter: clamp(12px, 1.6vw, 20px);
  --max: 1440px;

  --display: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-heavy: cubic-bezier(0.22, 1, 0.36, 1);

  --meta: 9px;
  --body: 14px;

  /* Apple-inspired tokens (DESIGN-apple.md) */
  --apple-ink: #1d1d1f;
  --apple-muted: #7a7a7a;
  --apple-muted-soft: #86868b;
  --apple-hairline: #e0e0e0;
  --apple-parchment: #f5f5f7;
  --apple-body: 17px;

  /* Liquid Glass (Apple Music-style floating surfaces) */
  --glass-bg: rgba(255, 255, 255, 0.55);
  /* Opaque composite of glass-bg over --bg: same look, no per-frame backdrop cost */
  --glass-bg-flat: color-mix(in srgb, #ffffff 55%, var(--bg));
  --glass-border: rgba(18, 18, 18, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 12px 32px rgba(18, 18, 18, 0.1);

  /* Apple radius scale — concentric rule: inner = outer - padding */
  --r-xl: 28px;      /* large cards / tiles */
  --r-lg: 18px;      /* nested media (28 - 10 mat), chips */
  --r-md: 14px;
  --r-sm: 10px;
  --r-capsule: 999px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161616;
  --ink: #ececea;
  --muted: #8a8a86;
  --line: rgba(236, 236, 234, 0.12);
  --line-soft: rgba(236, 236, 234, 0.06);
  --frame: rgba(236, 236, 234, 0.04);
  --panel: #0e0e0e;
  --panel-text: #ececea;
  --panel-muted: rgba(236, 236, 234, 0.38);
  --apple-ink: #f5f5f7;
  --apple-muted: #a1a1a6;
  --apple-muted-soft: #86868b;
  --apple-hairline: rgba(255, 255, 255, 0.14);
  --apple-parchment: #1d1d1f;
  --glass-bg: rgba(28, 28, 30, 0.55);
  --glass-bg-flat: color-mix(in srgb, #1c1c1e 55%, var(--bg));
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161616;
    --ink: #ececea;
    --muted: #8a8a86;
    --line: rgba(236, 236, 234, 0.12);
    --line-soft: rgba(236, 236, 234, 0.06);
    --frame: rgba(236, 236, 234, 0.04);
    --panel: #0e0e0e;
    --panel-text: #ececea;
    --panel-muted: rgba(236, 236, 234, 0.38);
    --apple-ink: #f5f5f7;
    --apple-muted: #a1a1a6;
    --apple-muted-soft: #86868b;
    --apple-hairline: rgba(255, 255, 255, 0.14);
    --apple-parchment: #1d1d1f;
    --glass-bg: rgba(28, 28, 30, 0.55);
    --glass-bg-flat: color-mix(in srgb, #1c1c1e 55%, var(--bg));
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

html { background: var(--bg); }

body {
  font-family: var(--display);
  font-size: var(--body);
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ink);
  background: var(--bg);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.intro-active { overflow: hidden; touch-action: none; }
body.intro-active .site-header { opacity: 0; pointer-events: none; }

a, button { color: inherit; text-decoration: none; cursor: pointer; background: none; border: none; }
img, video, canvas { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection { background: var(--ink); color: var(--bg); }

/* Film grain */

#grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #grain { opacity: 0.07; mix-blend-mode: soft-light; }
}

html[data-theme="dark"] #grain { opacity: 0.07; mix-blend-mode: soft-light; }

/* Grain sits above content; custom cursor removed in favour of system pointer */

@media (pointer: coarse) {
  a, button { cursor: pointer; }
}

/* Typography system */

.meta {
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.body-sm {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 32ch;
}

.display-massive {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(72px, 13.5vw, 196px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-top: clamp(12px, 2vh, 24px);
}

.display-line { display: block; }
.display-line--indent { padding-left: clamp(24px, 4vw, 72px); color: var(--muted); }

.display-section {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-top: 8px;
}

.display-section--light { color: var(--panel-text); }

.display-close {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.038em;
}

/* Layout */

.layout {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--margin);
}

.layout--center { text-align: center; padding-block: clamp(80px, 12vh, 140px); }
.layout--footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 28px 40px;
  border-top: 1px solid var(--line);
}

/* Header */

.site-header {
  position: fixed;
  top: clamp(12px, 1.6vh, 18px);
  left: clamp(16px, 2.5vw, 32px);
  right: clamp(16px, 2.5vw, 32px);
  z-index: 9000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px clamp(20px, 2.5vw, 32px);
  border-radius: var(--r-capsule);
  /* Apple's adaptive chrome: nearly invisible at rest, materialising on scroll */
  background: color-mix(in srgb, var(--glass-bg) 35%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid transparent;
  box-shadow: none;
  pointer-events: none;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
    border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), opacity 0.8s var(--ease);
}

/* Once the page moves, the glass thickens and its edges pick up light */
.site-header.is-floating {
  background: var(--glass-bg);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 color-mix(in srgb, var(--glass-highlight) 40%, transparent),
    var(--glass-shadow);
}

/* Soft specular sheen across the top of the capsule */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--glass-highlight) 90%, transparent) 0%,
    transparent 42%
  );
}

.site-header.is-floating::after {
  opacity: 1;
}

.site-header > * { pointer-events: auto; }

.wordmark {
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
  justify-self: center;
}

.site-nav a {
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.5s var(--ease);
}

.site-nav a:hover { color: var(--ink); }

.site-header__end {
  /* Pin to the right column even when .site-nav is display:none on mobile
     (otherwise grid auto-placement pulls this into the middle column) */
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.theme-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  border-radius: 50%;
  transition: color 0.35s var(--ease), background 0.35s var(--ease), transform 0.22s var(--ease);
}

.theme-toggle:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle__icon {
  width: 15px;
  height: 15px;
  display: block;
  grid-area: 1 / 1;
}

.theme-toggle .theme-toggle__icon--sun { opacity: 0; visibility: hidden; pointer-events: none; }
.theme-toggle .theme-toggle__icon--moon { opacity: 1; visibility: visible; }

.theme-toggle.is-dark .theme-toggle__icon--sun { opacity: 1; visibility: visible; pointer-events: auto; }
.theme-toggle.is-dark .theme-toggle__icon--moon { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 680px) {
  .site-clocks { display: none; }
}

.site-clocks {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.footer-links a[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.footer-links a[aria-disabled="true"]:hover {
  opacity: 0.7;
}

/* Chapters */

.chapter {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line-soft);
}

.chapter--hero {
  min-height: 100svh;
  border-bottom: none;
}

/* Hero — stacked single column */

.hero-layout {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 100vw;
}

.hero-video {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(300px, 62vh, 72vh);
  width: 100%;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--frame) center / cover no-repeat;
  background-image: var(--hero-poster, none);
  overflow: hidden;
  will-change: transform;
}

.hero-video.is-playing {
  background-image: none;
}

/* Floating 3D image field */

.hero-float {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
}

.hero-float__scene {
  position: absolute;
  inset: -6%;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-float__card {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  will-change: transform;
}

.hero-float__card.is-in {
  opacity: 1;
}

.hero-float__card img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.hero-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 80px) var(--margin) clamp(40px, 6vh, 64px);
  flex: 0 0 auto;
  will-change: transform;
}

/* Apple tile hierarchy: headline → tagline → body → fine print */
.hero-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04em;
  font-family: var(--display);
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.hero-headline__line {
  display: block;
}

.hero-tagline {
  margin-top: clamp(14px, 2vh, 20px);
  max-width: 30ch;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.hero-lead {
  margin-top: clamp(20px, 2.8vh, 28px);
  max-width: 42ch;
  margin-inline: auto;
  font-size: var(--apple-body, 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: var(--muted);
  text-wrap: pretty;
}

.hero-route {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-align: center;
}

.hero-type__meta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(32px, 4.5vh, 48px);
  padding-top: clamp(20px, 2.8vh, 28px);
  border-top: 1px solid var(--line-soft);
}

.canvas-frame {
  overflow: hidden;
  position: relative;
  transition: border-color 0.6s var(--ease);
}

.canvas-frame:hover { border-color: var(--ink); }

#video-canvas { width: 100%; height: 100%; }

.canvas-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.canvas-fallback[hidden] {
  display: none !important;
}

.hero-video.is-playing .canvas-fallback {
  display: none;
}

/* Work — natural scroll, next card peeks from below (Apple-style flow) */

.chapter--works {
  padding-block: clamp(32px, 5vh, 56px) clamp(64px, 10vh, 96px);
  border-bottom: none;
}

.works-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.work {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(5px, 0.75vh, 8px) var(--margin) clamp(6px, 0.9vh, 9px);
  /* Fixed rhythm between projects — 1/8 of the first pass at Hunwoo's
     request: ~15-25px total gap including block padding. */
  margin-bottom: clamp(4px, 0.6vh, 8px);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.work:nth-child(even) {
  background: transparent;
}

html[data-theme="dark"] .work:nth-child(even) {
  background: transparent;
}

.work:last-child {
  margin-bottom: 0;
  padding-bottom: clamp(64px, 10vh, 96px);
}

.work__stage {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.work__copy {
  margin-bottom: clamp(20px, 3vh, 28px);
  max-width: 52ch;
}


.work__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.work__desc {
  margin-top: 14px;
  font-size: var(--apple-body, 17px);
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--muted);
}

.work__meta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Nested media gallery carousel (Apple highlights) */

.work__gallery.work-carousel {
  --carousel-gap: clamp(12px, 1.6vw, 20px);
  /* How much of each neighbour peeks in on the left AND right (coverflow) */
  --carousel-peek: clamp(40px, 6vw, 96px);
}

.work-carousel__viewport {
  overflow: hidden;
  cursor: default;
  /* Own horizontal + vertical gestures while interacting with media */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  container-type: inline-size;
  position: relative;
}

/* Resting hint: the lower edge sits under a soft scrim, which lifts on drag */
.work-carousel__viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent);
  transition: opacity 0.4s var(--ease);
}

.work-carousel__viewport.is-dragging::after {
  opacity: 0;
}

.work__credits {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Collaborators sit a step quieter than the role line: sentence case,
   dimmed, tight to it — present for the record, not for the pitch. */
.work__credits--team {
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.5;
  /* Each credit entry stays on its own single line (escapes the 52ch copy cap) */
  white-space: nowrap;
  width: max-content;
  max-width: calc(100cqi - 2 * var(--margin, 0px));
}

@media (max-width: 900px) {
  .work__credits--team {
    white-space: normal;
    width: auto;
  }
}

/* Two-tone credits: dim uppercase role, clearer name */
.work__credits--team .cr-role {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.work__credits--team .cr-name {
  color: var(--ink);
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.work__credits--team .cr-sep {
  opacity: 0.35;
  padding: 0 3px;
}

.work-carousel__viewport.is-dragging {
  touch-action: none;
  cursor: default;
}

.work-carousel__viewport img,
.work-carousel__viewport video,
.work-carousel__viewport .tile,
.work-media-slide,
.work-media-slide__card,
.work-media-slide__media {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Keep hits on the viewport itself so drag always starts cleanly */
.work-carousel__viewport {
  pointer-events: auto;
}

html.is-carousel-drag,
html.is-carousel-drag body {
  cursor: default !important;
  user-select: none !important;
}

html.is-carousel-drag body {
  overflow: hidden;
}

.work__gallery.is-interacting {
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

.work-carousel__viewport.is-dragging .work-media-slide {
  opacity: 1 !important;
  transition: none !important;
}

.work-carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  will-change: transform;
  backface-visibility: hidden;
}

.work-media-slide {
  /* Symmetric room so a neighbour peeks on each side (coverflow) */
  flex: 0 0 calc(100cqi - 2 * (var(--carousel-peek) + var(--carousel-gap)));
  width: calc(100cqi - 2 * (var(--carousel-peek) + var(--carousel-gap)));
  margin: 0;
  opacity: 0.4;
  filter: blur(6px);
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
  flex-shrink: 0;
}

.work-media-slide.is-active {
  opacity: 1;
  filter: none;
}

/* While dragging, everything is sharp so you can see where you're heading */
.work-carousel__viewport.is-dragging .work-media-slide {
  filter: none !important;
}

.work-media-slide__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: 10px;
  /* Flat composite instead of live backdrop blur — 30+ of these exist,
     and each backdrop-filter re-blurs every Lenis scroll frame. */
  background: var(--glass-bg-flat);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  aspect-ratio: 16 / 10;
}

.work-media-slide__caption {
  flex: 0 0 auto;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px) clamp(12px, 2vh, 16px);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--panel-text);
  text-wrap: balance;
}

.work-media-slide__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--frame);
}

.work-media-slide__media img,
.work-media-slide__media video,
.work-media-slide__media .tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait footage: fit top-to-bottom inside the same frame, never cropped */
.work-media-slide__media.is-portrait img,
.work-media-slide__media.is-portrait video {
  object-fit: contain;
  background: #0b0b0b;
}

/* 1px playback progress — sits on the bottom edge of video frames */
.media-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.media-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--ink);
  will-change: transform;
}

.work-media-slide__media:not(:has(video)) .media-progress {
  display: none;
}

/* Embargoed film — blurred poster, not clickable (see JS: click/hover/hero
   autoplay all skip .is-blurred; data-src is omitted so no real URL is ever
   set, even inside the lightbox clone). */
.work-media-slide__media video.is-blurred {
  filter: blur(14px) saturate(0.9);
  transform: scale(1.08); /* hide the blurred edge fringe */
  cursor: default;
}

.work-media-slide__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  font: 500 11px/1 var(--mono, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Lightbox prev/next — same chevrons as the cards, fixed at screen edges */
.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-bg-flat);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  cursor: none;
  opacity: 0.92;
  transition: opacity 0.3s var(--ease), transform 0.2s var(--ease);
}

.lightbox__nav--prev { left: 22px; }
.lightbox__nav--next { right: 22px; }

.lightbox__nav:active { transform: translateY(-50%) scale(0.92); }

.lightbox__nav.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Lightbox scrubber — thin line, generous invisible hit area for dragging */
.lightbox__scrub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  cursor: none;
  touch-action: none;
}

.lightbox__scrub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.lightbox__scrub-fill {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: #fff;
  will-change: transform;
}

.lightbox__scrub:hover::before,
.lightbox__scrub:hover .lightbox__scrub-fill {
  height: 4px;
}

/* Same speaker button as the hero/card, lifted clear of the scrubber */
.lightbox__sound {
  z-index: 4;
  bottom: 34px;
  right: 20px;
}

.work-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(20px, 3vh, 28px);
}

/* Instagram-style indicator dots — overlaid at the bottom center of the image */
.work__gallery.work-carousel {
  position: relative;
}

.work-carousel__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: auto;
}

.work-carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease);
}

.work-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.15);
}

.work-carousel__dot.is-active {
  background: #fff;
  opacity: 1;
  transform: scale(1.2);
}

/* Instagram-style prev/next chevrons — appear on hover, hidden at the edges */
.work-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-bg-flat);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.work-carousel:hover .work-carousel__nav {
  opacity: 0.92;
}

.work-carousel__nav--prev {
  left: 16px;
}

.work-carousel__nav--next {
  right: calc(var(--carousel-peek) + var(--carousel-gap) + 16px);
}

.work-carousel__nav.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

@media (hover: none) {
  .work-carousel__nav {
    opacity: 0.9;
  }
}

/* Per-project video sound toggle — same Apple video chrome as the hero */
.work-carousel__sound {
  position: absolute;
  /* Anchored to the slide's own media box, so it rides along on every swipe */
  right: 14px;
  bottom: 14px;
  pointer-events: auto;
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(37, 37, 37, 0.78);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.22s ease, opacity 0.4s var(--ease);
}

.work-carousel__sound[hidden] {
  display: none !important;
}

.work-carousel__sound:hover {
  background: rgba(50, 50, 50, 0.62);
}

.work-carousel__sound:active {
  transform: scale(0.9);
}

.work-carousel__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-capsule);
  background: var(--frame);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.work-carousel__play:hover {
  background: var(--line-soft);
}

.work-carousel__play-icon {
  display: none;
}

.work-carousel__play-icon--pause {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 10px;
  height: 10px;
}

.work-carousel__play-icon--pause::before,
.work-carousel__play-icon--pause::after {
  content: "";
  display: block;
  width: 3px;
  height: 10px;
  background: currentColor;
  border-radius: 1px;
}

.work-carousel__play:not(.is-paused) .work-carousel__play-icon--pause {
  display: flex;
}

.work-carousel__play.is-paused .work-carousel__play-icon--play {
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.tile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px;
  color: #ececea;
  min-height: 100%;
}

.tile .num {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
}

.tile .cat {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  writing-mode: vertical-rl;
}

.section-head { margin-bottom: clamp(40px, 6vh, 72px); }

/* Index */

.chapter--index {
  background: var(--panel);
  color: var(--panel-text);
  padding-block: clamp(80px, 12vh, 140px);
}

.chapter--index .meta { color: var(--panel-muted); }

.archive {
  list-style: none;
  margin-top: clamp(32px, 5vh, 56px);
}

.archive li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: none;
  font-family: var(--mono);
  font-size: 10px;
  transition: opacity 0.4s var(--ease);
}

.archive li .n { color: var(--panel-muted); font-size: 8px; }
.archive li.extra .t { color: rgba(236, 236, 234, 0.45); }
.archive li:hover .t { color: var(--panel-text); }

.archive-count {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--panel-muted);
}

/* Close */

.contact-link {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color 0.5s var(--ease), letter-spacing 0.5s var(--ease);
}

.contact-link:hover {
  border-color: var(--ink);
  letter-spacing: 0.16em;
}

/* Close chapter: the email stands alone as the finale */
.contact-link--solo {
  margin-top: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 64px);
  letter-spacing: -0.02em;
  text-transform: none;
  border-bottom-width: 2px;
  padding-bottom: 10px;
}

.contact-link--solo:hover {
  letter-spacing: 0;
}

.site-footer {
  position: relative;
  z-index: 1;
}

.footer-links { display: flex; gap: 20px; }
.footer-links a {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.45s var(--ease);
}
.footer-links a:hover { color: var(--ink); }

/* Left rail — shows where you are in the work stack */
.side-index {
  position: fixed;
  left: clamp(14px, 1.8vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-index__item {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.45;
  padding: 6px 10px;
  text-align: left;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.side-index__item.is-active {
  opacity: 1;
  color: var(--ink);
  transform: translateX(3px);
}

body.intro-active .side-index {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .side-index {
    display: none;
  }
}

.hero-sound {
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Apple video chrome — solid dark pill (backdrop blur over playing video
     forces a re-blur on every video frame) */
  background: rgba(37, 37, 37, 0.78);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.22s ease, opacity 0.4s var(--ease);
}

.hero-sound[hidden] {
  display: none !important;
}

.hero-sound:hover {
  background: rgba(50, 50, 50, 0.62);
}

.hero-sound:active {
  transform: scale(0.9);
}

.hero-sound__icon {
  width: 17px;
  height: 17px;
  display: block;
  overflow: visible;
}

/* Same speaker+waves icon; muted only adds the slash */
.hero-sound:not(.is-muted) .hero-sound__slash,
.work-carousel__sound:not(.is-muted) .hero-sound__slash { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}

.lightbox__media {
  position: absolute;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
}

.lightbox__media img,
.lightbox__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.back-top {
  position: fixed;
  right: var(--margin);
  bottom: var(--margin);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--r-capsule);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease),
    border-color 0.45s var(--ease),
    color 0.45s var(--ease);
}

.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-top:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.back-top__arrow {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
}

.back-top__label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.intro-active .back-top { display: none; }

/* Intro (Variant stream) */

.intro {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #000;
  overflow: hidden;
  cursor: default;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  --scan-x: 50%;
  --scan-y: 50%;
  --scan-energy: 0;
}

.intro.is-dragging {
  cursor: default;
}

.intro.is-gravity {
  cursor: default;
  pointer-events: none;
}

.intro-gravity {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.intro-gravity .intro-node {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  will-change: left, top, opacity, font-size, filter;
}

.intro-gravity .intro-node.is-assembling {
  z-index: 6;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.04em;
}

.intro-gravity .intro-node.is-snapping {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.1);
}

.intro-meta {
  position: absolute;
  top: var(--margin);
  left: var(--margin);
  z-index: 3;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.intro-meta p { display: flex; gap: 10px; margin-bottom: 5px; }
.intro-meta__key { min-width: 72px; color: rgba(255, 255, 255, 0.22); }

.intro-texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.01) 35%, transparent 65%);
  opacity: 0.22;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 22%, transparent 58%);
}

.intro-canvas {
  display: none;
}

.intro-columns {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  will-change: opacity, filter;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

.intro-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    circle 180px at var(--scan-x) var(--scan-y),
    rgba(42, 42, 245, calc(0.14 + var(--scan-energy) * 0.22)),
    transparent 72%
  );
  opacity: calc(0.35 + var(--scan-energy) * 0.65);
  transition: opacity 0.12s linear;
  mix-blend-mode: screen;
}

.intro-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
}

.intro-field {
  display: flex;
  flex-shrink: 0;
  gap: clamp(8px, 1.1vw, 18px);
  width: max-content;
  padding: 0 clamp(18px, 3vw, 48px);
}

.intro-col {
  flex: 0 0 var(--col-width, clamp(68px, 8.8vw, 108px));
  height: 140vh;
  overflow: hidden;
  opacity: var(--col-opacity, 0.45);
  transform: translate3d(calc(var(--col-pan-x, 0) + var(--col-offset, 0)), var(--col-pan-y, 0), 0);
  will-change: transform;
}

.intro-col__track {
  display: flex;
  flex-direction: column;
  animation: introColScroll var(--col-duration, 38s) linear infinite;
  animation-delay: var(--col-delay, 0s);
  will-change: transform;
}

.intro-col__block {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.55vh, 8px);
  padding-bottom: clamp(5px, 0.55vh, 8px);
}

.intro-line {
  display: block;
  margin-left: var(--line-shift, 0);
  opacity: var(--line-opacity, 1);
  font-family: var(--mono);
  font-size: clamp(6px, 0.58vw, 8px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.intro-line.is-gap {
  height: clamp(10px, 1.6vh, 22px);
  pointer-events: none;
}

.intro-line.is-dim {
  opacity: calc(var(--line-opacity, 1) * 0.38);
}

.intro-line.is-bright {
  opacity: calc(var(--line-opacity, 1) * 1.15);
  color: rgba(255, 255, 255, 0.68);
}

.intro-line.is-short {
  max-width: 62%;
}

.intro-line.is-code {
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.1em;
}

.intro-line.is-morphing {
  color: rgba(255, 255, 255, 0.92);
}

.intro-line.is-hot {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 0 12px rgba(42, 42, 245, 0.35);
}

.intro-line.is-image {
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.08em;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
  filter: contrast(1.12);
}

@keyframes introColScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

#intro-filings {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.intro-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 50% at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.6) 100%);
}

.intro-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  opacity: 0;
  filter: blur(12px);
  pointer-events: none;
}

.intro-cross {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.intro-cross::before,
.intro-cross::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.88);
}

.intro-cross::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.intro-cross::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.intro-hunwoo {
  display: flex;
  gap: 0.04em;
  font-family: var(--display);
  font-size: clamp(36px, 9vw, 88px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.intro-hunwoo__letter {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.intro-brand.is-hunwoo {
  width: auto;
  height: auto;
}

.intro-brand.is-hunwoo .intro-cross {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
}

.intro-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(32px, 8vh, 72px);
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: opacity 0.5s var(--ease);
}

.intro-hint__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.intro-hint__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  animation: introHintPulse 2.4s var(--ease) infinite;
}

@keyframes introHintPulse {
  0%, 100% { opacity: 0.4; border-color: rgba(255, 255, 255, 0.12); }
  50% { opacity: 0.95; border-color: rgba(255, 255, 255, 0.32); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-col__track { animation: none; }
  .intro-hint__key { animation: none; opacity: 0.6; }
}

.intro.is-entering .intro-hint { opacity: 0; }

body.intro-active .intro { cursor: default; }
body.intro-active .intro.is-dragging { cursor: default; }
body.intro-active .intro.is-zoom-drag { cursor: default; }

.intro.is-entering {
  cursor: default;
  pointer-events: none;
}

/* Reveal */

.reveal {
  opacity: 0;
  filter: blur(16px);
  will-change: opacity, filter;
}

/* Responsive */

.reveal-soft {
  opacity: 0;
  will-change: opacity;
}

@media (max-width: 960px) {
  .hero-layout {
    min-height: auto;
  }

  .hero-video {
    min-height: clamp(240px, 52vh, 56vh);
  }

  .work-media-slide__card {
    aspect-ratio: 4 / 3;
  }

  .site-nav { display: none; }

  .back-top { bottom: calc(var(--margin) + 56px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-soft { opacity: 1 !important; filter: none !important; }
  #grain { display: none; }
  .work-media-slide { transition: none; }
  .work-carousel__dot { transition: none; }
}

/* ---- Contact-sheet gallery: the whole project on screen, two rows ---- */
.work-carousel--grid .work-carousel__viewport {
  overflow: visible;
  cursor: inherit;
  touch-action: auto;
}

.work-carousel--grid .work-carousel__track {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  /* One gap value for rows and columns, so every distance in the sheet reads
     the same — including the one between the hero and the block of four. */
  --sheet-gap: clamp(8px, 0.85vw, 11px);
  gap: var(--sheet-gap);
  /* no strip to slide, and the drag code is not running here */
  transform: none !important;
  will-change: auto;
}

/* Tiles size themselves from the grid cell, and none of them is ever dimmed */
.work-carousel--grid .work-media-slide {
  flex: none;
  width: auto;
  opacity: 1;
  filter: none;
  transition: transform 0.5s var(--ease);
}

/* The strip mode kills pointer events so a drag never lands on a child;
   here each tile IS the hit target for hover and click. */
.work-carousel--grid .work-media-slide {
  pointer-events: auto;
}

/* Small tiles need tighter chrome than the full-bleed slide did */
.work-carousel--grid .work-media-slide__card {
  padding: 6px;
  border-radius: var(--r-md);
}

.work-carousel--grid .work-media-slide__media {
  border-radius: var(--r-sm);
}

/* The lead tile carries the project: 2x2, so five tiles fill the 4x2 grid
   exactly. Equal-weight rectangles read as a catalogue; this reads as a
   direction — one image is the face of the campaign, the rest support it. */
.work-carousel--grid .work-media-slide:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* The small cards hold 16/10; the hero instead fills whatever its 2x2 area is,
   so the two rows line up flush on both sides of the grid. */
.work-carousel--grid .work-media-slide:first-child .work-media-slide__card {
  aspect-ratio: auto;
  height: 100%;
}

.work-carousel--grid .work-media-slide:first-child .work-media-slide__media {
  border-radius: var(--r-md);
}

/* Hover lifts the tile forward so it reads at a glance */
.work-carousel--grid .work-media-slide:hover {
  transform: scale(1.06);
  z-index: 5;
}

.work-carousel--grid .work-media-slide:first-child:hover {
  transform: scale(1.02);
}

/* Two rows of 5 is unreadable on a phone — go two across instead */
@media (max-width: 700px) {
  .work-carousel--grid .work-carousel__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Full-width hero, then two rows of two beneath it */
  .work-carousel--grid .work-media-slide:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .work-carousel--grid .work-media-slide:first-child .work-media-slide__card {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}