/* ============================================================
   rbaileyad.com — The CD
   Aesthetic: near-black field, paper-white type, iridescent disc.
   Type system: Instrument Serif (display) + JetBrains Mono (UI).
   ============================================================ */

:root {
  --bg:        #0a0a0c;
  --bg-2:      #111114;
  --paper:     #ece9df;
  --paper-d:   #d8d4c6;
  --muted:     rgba(248, 244, 232, 0.96);
  --muted-2:   rgba(248, 244, 232, 0.78);
  --ink-dim:   rgba(248, 244, 232, 0.62);
  --rule:      rgba(248, 244, 232, 0.32);
  --amber:     oklch(0.78 0.14 70);
  --amber-d:   oklch(0.62 0.13 65);

  --disc-d: min(72vh, 70vw);
  --track-radius: calc(var(--disc-d) * 0.425);

  --serif: 'Instrument Serif', 'EB Garamond', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans:  'Instrument Sans', system-ui, -apple-system, sans-serif;
  --body:  'Work Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #1a0d07;
  color: var(--paper);
  font-family: var(--sans);
  font-feature-settings: 'ss01', 'kern';
  overflow: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Background video — replaces the cabinet photo plate.
   Fixed, full-viewport, centered, cover-fit so it behaves like the old
   background-image: cover/center/fixed declaration. */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  z-index: -1;
  pointer-events: none;
  background: #1a0d07;
}

/* Procedural room props superseded by the photo plate */
.room-wood,
.room-prop,
.room-sleeve,
.room-books,
.room-glass,
.room-amp { display: none !important; }

/* Walnut wood grain across the cabinet top */
.room-wood {
  position: fixed;
  inset: 6vh 4vw;
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
  background:
    /* fine grain lines */
    repeating-linear-gradient(91deg,
      rgba(255, 180, 120, 0.04) 0px,
      rgba(255, 180, 120, 0.04) 1px,
      transparent 1px,
      transparent 3px),
    /* coarser grain bands */
    repeating-linear-gradient(89deg,
      rgba(20, 10, 4, 0.32) 0px,
      transparent 2px,
      transparent 18px,
      rgba(20, 10, 4, 0.22) 19px,
      transparent 21px,
      transparent 44px),
    /* warm wood field — richer, brighter mids, more photographic depth */
    radial-gradient(ellipse 55% 45% at 50% 50%,
      rgba(255, 200, 140, 0.18) 0%,
      transparent 70%),
    linear-gradient(94deg,
      #6e3e22 0%,
      #4e2814 30%,
      #371b0a 65%,
      #200e05 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 160, 0.10),
    inset 0 0 100px rgba(0, 0, 0, 0.55),
    0 40px 110px rgba(0, 0, 0, 0.9),
    0 2px 0 rgba(255, 230, 190, 0.08);
  filter: saturate(1.15) contrast(1.08);
}
/* a soft, even pool around the platter — gentle, no heavy edges */
.room-wood::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 4px;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%,
      rgba(0,0,0,0.0) 0%,
      rgba(0,0,0,0.10) 75%,
      rgba(0,0,0,0.22) 100%);
}

/* Props sitting on the cabinet, glimpsed at the edges */
.room-prop {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.65));
}
/* Whiskey tumbler, lower-right */
.room-glass {
  right: 7vw;
  bottom: 9vh;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(255,200,130,0.55) 0%,
      rgba(180,90,30,0.45) 35%,
      rgba(70,30,8,0.55) 70%,
      rgba(30,12,4,0.7) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,225,180,0.18),
    inset 0 0 0 3px rgba(0,0,0,0.4),
    inset 6px -10px 22px rgba(0,0,0,0.5),
    inset -8px 6px 18px rgba(255,210,140,0.18);
}
.room-glass::before {
  /* highlight crescent */
  content: '';
  position: absolute;
  inset: 6% 55% 55% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,240,210,0.55), transparent 70%);
  filter: blur(2px);
}
.room-glass::after {
  /* ice cube hint */
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  top: 38%; left: 30%;
  background: linear-gradient(135deg, rgba(255,240,220,0.35), rgba(255,210,170,0.1));
  transform: rotate(-12deg);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,240,220,0.25);
}

/* Open book / record sleeve at upper-left */
.room-sleeve {
  top: 10vh;
  left: 5vw;
  width: 160px;
  height: 160px;
  background:
    linear-gradient(140deg, #c8a06a 0%, #7d5a32 60%, #3a2614 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,230,190,0.18),
    inset 0 0 30px rgba(0,0,0,0.55),
    0 14px 30px rgba(0,0,0,0.75);
  transform: rotate(-7deg);
}
.room-sleeve::before {
  /* worn corner */
  content: '';
  position: absolute;
  top: -6px; right: -6px;
  width: 36px; height: 36px;
  background: linear-gradient(225deg, transparent 50%, rgba(0,0,0,0.6) 51%);
}
.room-sleeve::after {
  /* thin spine line */
  content: '';
  position: absolute;
  inset: 12% 8% 12% auto;
  width: 1px;
  background: rgba(0,0,0,0.45);
}

/* Stack of books, lower-left */
.room-books {
  left: 4vw;
  bottom: 10vh;
  width: 200px;
  height: 90px;
  transform: rotate(4deg);
}
.room-books::before {
  /* bottom book */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  background: linear-gradient(180deg, #5e3320 0%, #2a1408 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,210,160,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.6),
    0 10px 16px rgba(0,0,0,0.6);
}
.room-books::after {
  /* top book, slightly inset */
  content: '';
  position: absolute;
  left: 18px; right: 26px; bottom: 24px;
  height: 24px;
  background: linear-gradient(180deg, #6a4030 0%, #3a1f12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,200,150,0.16),
    inset 0 -2px 4px rgba(0,0,0,0.55),
    0 8px 12px rgba(0,0,0,0.55);
}

/* Ashtray hint at upper-right */
.room-ashtray {
  top: 12vh;
  right: 7vw;
  width: 110px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 35%, rgba(80,80,84,0.6), rgba(30,28,30,0.85) 80%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 18px rgba(0,0,0,0.7),
    0 12px 22px rgba(0,0,0,0.6);
}
.room-ashtray::before {
  /* lit ember */
  content: '';
  position: absolute;
  top: 55%; left: 38%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff8a3a 0%, #c43c0a 60%, transparent 100%);
  box-shadow: 0 0 12px 4px rgba(255,120,40,0.55);
}

/* ─── Tube amplifier console (right of the platter) ─────────── */

.room-amp {
  position: fixed;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  width: 168px;
  height: 360px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  pointer-events: none;
  z-index: 2;
  background:
    /* faceplate brushed metal */
    repeating-linear-gradient(180deg,
      rgba(255,225,190,0.025) 0px,
      transparent 1px,
      rgba(255,225,190,0.025) 2px,
      transparent 3px),
    linear-gradient(180deg, #2a241e 0%, #1a1612 55%, #0e0a08 100%);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(255,210,160,0.18),
    inset 0 0 0 4px rgba(0,0,0,0.55),
    inset 0 0 0 5px rgba(255,210,160,0.08),
    inset 0 10px 22px rgba(0,0,0,0.6),
    0 30px 50px rgba(0,0,0,0.8);
}
.room-amp::before {
  /* brand etching at top */
  content: 'BAILEY \00B7 MODEL 1792 \00B7 30W';
  position: absolute;
  top: 6px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.18em;
  color: rgba(255,210,160,0.55);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.room-amp::after {
  /* subtle screw at corners (top-left), via shadow trick */
  content: '';
  position: absolute;
  top: 7px; left: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #b8a888, #2a2218);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    /* mirror to other three corners */
    calc(168px - 14px - 6px) 0 0 0 #1a1410,
    calc(168px - 14px - 6px) 0 0 -1px rgba(0,0,0,0),
    0 calc(360px - 14px - 6px) 0 0 #1a1410,
    calc(168px - 14px - 6px) calc(360px - 14px - 6px) 0 0 #1a1410;
}

/* Vacuum tubes — sit at top */
.amp-tubes {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding-top: 14px;
  height: 92px;
}
.amp-tube {
  position: relative;
  width: 28px;
  height: 78px;
  border-radius: 14px 14px 4px 4px;
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(255, 165, 70, 0.55) 0%,
      rgba(220, 90, 30, 0.32) 32%,
      rgba(70, 28, 12, 0.55) 65%,
      rgba(18, 10, 6, 0.9) 100%),
    linear-gradient(180deg, rgba(255,210,160,0.22) 0%, rgba(0,0,0,0.45) 100%);
  box-shadow:
    0 0 22px rgba(255, 130, 50, 0.55),
    0 0 48px rgba(255, 100, 40, 0.22),
    inset 0 2px 3px rgba(255,225,180,0.55),
    inset -3px 0 5px rgba(255,180,120,0.18),
    inset 0 -10px 14px rgba(0,0,0,0.7);
  animation: tubeBreathe 4.2s ease-in-out infinite alternate;
}
.amp-tube:nth-child(2) { animation-delay: -1.8s; }
.amp-tube::before {
  /* inner filament glow */
  content: '';
  position: absolute;
  inset: 22% 32% 32% 32%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(255, 220, 150, 0.95) 0%,
    rgba(255, 140, 55, 0.7) 30%,
    rgba(220, 70, 20, 0.4) 55%,
    transparent 80%);
  filter: blur(2px);
}
.amp-tube::after {
  /* socket */
  content: '';
  position: absolute;
  left: -3px; right: -3px;
  bottom: -8px;
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,210,160,0.18) 0 2px,
      transparent 2px 4px),
    linear-gradient(180deg, #3c352d 0%, #15110d 100%);
  border-radius: 2px 2px 5px 5px;
  box-shadow:
    0 3px 5px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,210,160,0.25);
}
@keyframes tubeBreathe {
  0%   { filter: brightness(0.92); }
  100% { filter: brightness(1.08); }
}

/* VU meter */
.amp-vu {
  position: relative;
  height: 56px;
  margin-top: 10px;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 30%,
      #efe6cc 0%, #c8bea4 50%, #8a8270 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 2px 3px rgba(0,0,0,0.35),
    inset 0 -1px 2px rgba(255,255,255,0.25),
    0 1px 0 rgba(255,210,160,0.12);
  overflow: hidden;
}
.amp-vu::before {
  /* arc dashes */
  content: '';
  position: absolute;
  inset: 6px 8px;
  background:
    repeating-conic-gradient(
      from -55deg at 50% 130%,
      rgba(0,0,0,0.85) 0deg 0.6deg,
      transparent 0.6deg 6deg,
      rgba(0,0,0,0.55) 6deg 6.6deg,
      transparent 6.6deg 12deg);
  -webkit-mask: radial-gradient(circle at 50% 130%,
    transparent 0 60%, #000 60.5% 67%, transparent 67.5%);
          mask: radial-gradient(circle at 50% 130%,
    transparent 0 60%, #000 60.5% 67%, transparent 67.5%);
}
.amp-vu::after {
  /* red overload zone */
  content: 'VU';
  position: absolute;
  top: 6px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.3em;
  color: rgba(20,16,10,0.7);
}
.amp-vu-needle {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 1.4px;
  height: 60px;
  background: linear-gradient(180deg, #1a1006 0%, #4a2f18 100%);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-26deg);
  animation: vuTwitch 5.5s ease-in-out infinite;
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
}
.amp-vu-needle::after {
  /* pivot */
  content: '';
  position: absolute;
  bottom: -4px; left: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a4a30, #14100a);
  box-shadow: 0 1px 1px rgba(255,210,160,0.3);
}
@keyframes vuTwitch {
  0%   { transform: translateX(-50%) rotate(-30deg); }
  18%  { transform: translateX(-50%) rotate(-6deg); }
  29%  { transform: translateX(-50%) rotate(12deg); }
  41%  { transform: translateX(-50%) rotate(-2deg); }
  55%  { transform: translateX(-50%) rotate(18deg); }
  68%  { transform: translateX(-50%) rotate(-10deg); }
  82%  { transform: translateX(-50%) rotate(8deg); }
  100% { transform: translateX(-50%) rotate(-26deg); }
}

/* Knobs row */
.amp-knobs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 6px;
  gap: 10px;
}
.amp-knob {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      rgba(255,225,190,0.20) 0deg 2deg,
      rgba(0,0,0,0.55) 2deg 4deg),
    radial-gradient(circle at 35% 30%,
      #c8c0b0 0%,
      #6a635a 50%,
      #2a2620 95%);
  box-shadow:
    0 5px 9px rgba(0,0,0,0.75),
    inset 0 2px 3px rgba(255,225,190,0.4),
    inset 0 -4px 6px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.5);
}
.amp-knob::before {
  /* center cap */
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #b8b0a0 0%,
      #4a4640 60%,
      #1c1814 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,225,190,0.45),
    inset 0 -2px 3px rgba(0,0,0,0.6);
}
.amp-knob::after {
  /* indicator tick */
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2.4px;
  height: 14px;
  background: linear-gradient(180deg, #ffbc66 0%, #c46228 100%);
  border-radius: 1px;
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(255,140,50,0.7);
}
.amp-knob-l { transform: rotate(-32deg); }
.amp-knob-r { transform: rotate(48deg); }
.amp-knob-label {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) rotate(var(--unrot, 0deg));
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.18em;
  color: rgba(255,210,160,0.7);
  white-space: nowrap;
}
.amp-knob-l .amp-knob-label { --unrot: 32deg; }
.amp-knob-r .amp-knob-label { --unrot: -48deg; }

/* Bottom switch row */
.amp-switches {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 6px 0;
}
.amp-led {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a3a 0%, #c43c0a 70%, #4a1408 100%);
  box-shadow:
    0 0 12px rgba(255,110,40,0.9),
    0 0 24px rgba(255,110,40,0.45),
    inset 0 1px 1px rgba(255,225,180,0.6);
  animation: ledPulse 2.8s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}
.amp-toggle {
  position: relative;
  width: 16px;
  height: 34px;
  border-radius: 3px;
  background:
    linear-gradient(180deg,
      #d8d2c2 0%,
      #a8a294 25%,
      #4a4640 65%,
      #14110d 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,240,210,0.55),
    inset 0 -2px 3px rgba(0,0,0,0.7),
    0 3px 5px rgba(0,0,0,0.7);
}
.amp-toggle::before {
  content: '';
  position: absolute;
  bottom: -6px; left: -4px; right: -4px;
  height: 6px;
  background: linear-gradient(180deg, #2a2620, #0a0806);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.amp-speed {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.18em;
  color: rgba(255,210,160,0.65);
  text-align: right;
  line-height: 1.5;
}
.amp-speed span { display: block; }
.amp-speed .on { color: rgba(255,170,90,0.95); text-shadow: 0 0 6px rgba(255,130,50,0.6); }

/* subtle film grain across the page */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: .55;
  z-index: 9998;
}

/* very light edge softening — keeps focus on the platter without going gloomy */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 95% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.22) 100%);
  z-index: 9997;
}

/* ─── App layout ───────────────────────────────────────────── */

.app {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 1px solid var(--rule);
  z-index: 9999;
  background: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.25) 100%);
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7);
}
.chrome-bot {
  border-bottom: 0;
  border-top: 1px solid var(--rule);
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.20) 100%);
}
.chrome-l, .chrome-c, .chrome-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chrome-c { flex: 1; justify-content: center; }
.chrome-mark { color: var(--amber); font-size: 9px; transform: translateY(-1px); }
.chrome-name { color: #ffffff; letter-spacing: 0.22em; font-weight: 500; }
.chrome-sep { color: rgba(255,255,255,.85); }
.chrome-sub, .chrome-meta { color: #ffffff; }
.chrome-meta { white-space: nowrap; }

/* ─── Now Playing readout in top chrome ────────────────────── */

.nowplaying {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 6px 18px;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2));
  border-radius: 2px;
  min-width: 360px;
  position: relative;
  font-family: var(--mono);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease;
}
.app-playing .nowplaying,
.app-hidden  .nowplaying { opacity: 1; transform: translateY(0); }

.np-led { grid-row: 1 / 2; grid-column: 1 / 2; display: flex; align-items: center; gap: 6px; }
.np-led-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .4; } }
.np-led-label { font-size: 8.5px; color: var(--amber); letter-spacing: .2em; }

.np-readout { grid-row: 1 / 2; grid-column: 2 / 3; display: flex; align-items: baseline; gap: 8px; color: var(--paper); }
.np-no { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.np-title { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1; letter-spacing: 0; }
.np-rt { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }

.np-bar { grid-row: 2 / 3; grid-column: 1 / 3; height: 2px; background: var(--rule); position: relative; overflow: hidden; }
.np-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--amber);
  animation: progress 240s linear forwards;
}
@keyframes progress { to { width: 100%; } }

.np-foot { grid-row: 3 / 4; grid-column: 1 / 3; display: flex; justify-content: space-between; font-size: 8.5px; color: var(--muted-2); letter-spacing: 0.16em; }

/* ─── Main stage ───────────────────────────────────────────── */

.main {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.stage {
  position: relative;
  width: var(--disc-d);
  height: var(--disc-d);
  transition: transform .9s cubic-bezier(.7,.05,.2,1), opacity .6s;
  transform-origin: center;
}

/* TRANSITION: shrink-to-corner (default) */
.app-trans-shrink .app-playing .stage,
.app-trans-shrink .app-hidden  .stage,
.app-playing.app-trans-shrink .stage,
.app-hidden.app-trans-shrink  .stage {
  transform: translate(35vw, -28vh) scale(0.26);
}

/* Flip variant: rotate the disc 180° in 3D, case study fades in behind */
.app-trans-flip .main { perspective: 2200px; }
.app-trans-flip.app-playing .stage,
.app-trans-flip.app-hidden  .stage {
  transform: translate(36vw, -26vh) scale(0.28) rotateY(180deg);
}

/* Push-back variant: scales smaller in place, fades, case study fronts it */
.app-trans-push.app-playing .stage,
.app-trans-push.app-hidden  .stage {
  transform: scale(0.42) translateY(-8vh);
  opacity: 0.38;
  filter: blur(0.5px);
}

/* ─── The Disc ─────────────────────────────────────────────── */

/* Felt slipmat under the record — barely-there halo so the disc grounds on the wood */
.platter-mat {
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.25) 70%,
    transparent 92%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
  box-shadow: none;
}
.platter-mat::before,
.platter-mat::after { display: none; }

/* Tonearm assembly — temporarily hidden; awaiting photo cutout */
.tonearm-assembly { display: none; }

/* Tonearm photo — composited overhead so the base lands just outside the platter rim */
.tonearm-photo {
  position: absolute;
  width: 70%;
  left: calc(51% + 150px);
  top: 22%;
  pointer-events: none;
  z-index: 7;
  /* layered shadow tuned to the warm cabinet lighting:
     long ambient cast + tighter contact shadow with a warm undertone */
  filter:
    drop-shadow(0 18px 26px rgba(0,0,0,0.62))
    drop-shadow(0 6px 10px rgba(24,12,2,0.55))
    drop-shadow(0 2px 2px rgba(0,0,0,0.45));
  transition: transform .8s cubic-bezier(.55,.05,.25,1), opacity .35s ease;
  transform-origin: 73% 70%; /* pivot center of the base — scale stays anchored here */
}
/* idle: arm rests on the record at the playing position.
   when a track is "playing" (case study open): arm lifts and swings away.
   scale(1.08) is applied around the pivot so position is preserved. */
.app-home .tonearm-photo { transform: rotate(-38deg) translateY(0) scale(1.08); }
.app-playing .tonearm-photo,
.app-hidden  .tonearm-photo { transform: rotate(-4deg) translateY(-22px) scale(1.08); }
.app-about   .tonearm-photo { opacity: 0; }
.tonearm-rest {
  position: absolute;
  top: 22%;
  right: -13%;
  width: 7%;
  height: 2.2%;
  background: linear-gradient(180deg, #4a4a4d 0%, #1b1b1d 100%);
  border-radius: 3px;
  box-shadow:
    0 3px 8px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.25);
}
.tonearm-rest::after {
  /* the small Y-cradle on top of the rest */
  content: '';
  position: absolute;
  inset: -40% 70% auto auto;
  width: 28%; height: 140%;
  background: linear-gradient(180deg, #2a2a2d, #0e0e10);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}

.tonearm-base {
  position: absolute;
  top: -2%;
  right: -11%;
  width: 8.5%;
  aspect-ratio: 1/1;
  background:
    radial-gradient(circle at 35% 28%,
      #b8b8bc 0%,
      #6a6a6e 35%,
      #2a2a2d 75%,
      #101012 100%);
  border-radius: 50%;
  box-shadow:
    0 8px 20px rgba(0,0,0,.7),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.55);
  z-index: 7;
}
.tonearm-base::after {
  content: '';
  position: absolute;
  inset: 24%;
  background:
    radial-gradient(circle at 35% 30%,
      #e6e6ea 0%, #888 45%, #2a2a2c 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.6),
    inset 0 -1px 2px rgba(0,0,0,.55);
}

.tonearm {
  position: absolute;
  top: 1.5%;
  right: -6.7%;
  width: 56%;
  height: 4px;
  transform-origin: 100% 50%;
  transform: rotate(20deg);
  transition: transform 1.6s cubic-bezier(.55,.05,.25,1);
  z-index: 8;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.55));
}
.tonearm-assembly[data-armed="0"] .tonearm {
  transform: rotate(-8deg);
}
/* main shaft */
.tonearm::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 7%; right: 10%;
  background:
    linear-gradient(180deg,
      #f0eee6 0%,
      #c8c5bd 35%,
      #6e6c66 75%,
      #2c2a26 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.tonearm-counter {
  position: absolute;
  right: -2%;
  top: 50%;
  width: 14%;
  height: 22px;
  transform: translateY(-50%);
  background:
    radial-gradient(ellipse at 30% 30%, #5e5e62 0%, #1c1c1e 70%, #050507 100%);
  border-radius: 4px;
  box-shadow:
    0 3px 8px rgba(0,0,0,.6),
    inset 0 1px 2px rgba(255,255,255,.3),
    inset 0 -1px 2px rgba(0,0,0,.6);
}
.tonearm-bend {
  /* the S-bend joint */
  position: absolute;
  right: 14%;
  top: -3px;
  width: 9%;
  height: 10px;
  background: linear-gradient(180deg, #d8d6cd 0%, #807e76 100%);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.tonearm-headshell {
  position: absolute;
  left: -2%;
  top: 50%;
  width: 16%;
  height: 18px;
  transform: translateY(-50%) rotate(-22deg);
  transform-origin: 100% 50%;
  background:
    linear-gradient(180deg, #e8e6dd 0%, #b0aea4 50%, #5a584f 100%);
  border-radius: 3px 3px 5px 5px;
  box-shadow:
    0 3px 6px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -1px 1px rgba(0,0,0,.35);
}
.tonearm-cart {
  /* classic red/maroon cartridge body under the headshell */
  position: absolute;
  left: 8%; right: 8%;
  bottom: -8px;
  height: 9px;
  background: linear-gradient(180deg, #b81f2e 0%, #6b0e1a 100%);
  border-radius: 1px 1px 2px 2px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.tonearm-stylus {
  position: absolute;
  bottom: -13px;
  left: 50%;
  width: 2px;
  height: 6px;
  background: linear-gradient(180deg, #d6d6d6, #1a1a1a);
  transform: translateX(-50%);
}

/* ─── The Disc ─────────────────────────────────────────────── */

.disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: spin var(--spin-dur, 81s) linear infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
.disc-paused { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }

.disc-body {
  position: absolute; inset: 0; border-radius: 50%;
  overflow: hidden;
  background: url('assets/vinyl.png') center center / 100% 100% no-repeat;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 30px 80px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
/* hide the procedural surface layers — the photo does the work now */
.disc-body::before,
.disc-iridescent,
.disc-grooves,
.disc-grooves::after,
.disc-highlight,
.disc-rainbow-arc,
.disc-vignette { display: none; }

/* Base black vinyl */
.disc-body::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #1a1a1a 0%,
      #0e0e0e 35%,
      #060606 70%,
      #020202 100%);
}

/* Vinyl sheen — a soft warm reflection on the playing surface */
.disc-iridescent {
  position: absolute; inset: 0; border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .25;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 240, 220, 0.0) 60deg,
    rgba(255, 240, 220, 0.35) 90deg,
    rgba(255, 240, 220, 0.05) 120deg,
    transparent 180deg,
    transparent 240deg,
    rgba(255, 240, 220, 0.25) 270deg,
    rgba(255, 240, 220, 0.0) 300deg,
    transparent 360deg
  );
}
.app-irid-oil .disc-iridescent {
  opacity: .35;
  background: conic-gradient(
    from 0deg,
    oklch(0.55 0.18 280 / 0.0),
    oklch(0.7 0.2 200 / 0.5),
    oklch(0.55 0.18 320 / 0.0),
    oklch(0.65 0.2 160 / 0.4),
    oklch(0.55 0.18 280 / 0.0)
  );
}
.app-irid-mono .disc-iridescent {
  opacity: .18;
  background: radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 50%);
}

/* Grooves — the dominant texture of a record. Tight concentric rings,
   alternating subtle highlight + shadow to read as real spiral grooves. */
.disc-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0.04) 0.5px,
      rgba(0,0,0,0.55) 1px,
      rgba(0,0,0,0.55) 1.8px,
      rgba(255,255,255,0.025) 2.2px,
      rgba(255,255,255,0) 2.8px);
  mix-blend-mode: normal;
  opacity: 1;
}
/* A second wider banding to suggest track boundaries on the record */
.disc-grooves::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 16px,
      rgba(255,255,255,0.06) 16.5px,
      rgba(0,0,0,0) 17px);
  pointer-events: none;
}

/* Stationary highlight band — vinyl catches a soft overhead light */
.disc-highlight {
  position: absolute; inset: -10%; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,255,255,0) 70deg,
    rgba(255,255,255,.10) 90deg,
    rgba(255,255,255,.03) 110deg,
    transparent 180deg,
    transparent 260deg,
    rgba(255,255,255,.06) 280deg,
    rgba(255,255,255,0) 300deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Subtle warm sheen sliver — a vinyl-on-turntable look, not rainbow refraction */
.disc-rainbow-arc {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    from 300deg,
    transparent 0deg,
    transparent 20deg,
    rgba(255, 230, 190, 0.18) 40deg,
    rgba(255, 230, 190, 0.05) 60deg,
    transparent 80deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  opacity: .8;
  filter: blur(1.5px);
}

.disc-vignette {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 78%, rgba(0,0,0,.32) 100%),
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.07), transparent 30%);
  mix-blend-mode: normal;
}

/* ─── Track ring ───────────────────────────────────────────── */

/* Track ring sits inside .disc and inherits its rotation — the tracks are
   PRINTED on the disc, so they revolve with it like a real CD. */
.track-ring {
  position: absolute; inset: 0;
  pointer-events: none;
}

.track {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  background: transparent;
  border: 0;
  color: var(--paper);
  cursor: none;
  pointer-events: auto;
  padding: 0;
  width: 0; height: 0;
}

.track-inner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(236, 233, 223, 0.82);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.5);
  /* anchor on the track radius; with no extra rotation the inner inherits
     the button's `rotate(angle)` and reads tangent to the arc — exactly how
     a printed CD track listing sits. */
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center;
  padding: 6px 14px;
  border-radius: 100px;
  transition: color .25s, background .25s, text-shadow .25s, letter-spacing .25s;
}
.track-no {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  color: var(--muted-2);
  letter-spacing: 0.14em;
  padding-top: 2px;
}

.track:hover .track-inner,
.track.track-active .track-inner {
  color: var(--paper);
  background: rgba(10,10,12,.55);
  letter-spacing: 0.04em;
  text-shadow: 0 0 22px var(--amber), 0 1px 8px rgba(0,0,0,.8);
}
.track:hover .track-no,
.track.track-active .track-no {
  color: var(--amber);
}

/* the tick mark on the rim aligned with each track */
.track-tick {
  position: absolute;
  width: 1px; height: 10px;
  background: rgba(255,255,255,.35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(calc(var(--disc-d) * 0.43 - var(--track-radius)));
  opacity: .7;
  transition: opacity .25s, background .25s, height .25s;
}
.track:hover .track-tick,
.track.track-active .track-tick { background: var(--amber); opacity: 1; height: 14px; }

.track-hidden .track-inner {
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  color: var(--muted-2);
  opacity: .35;
}
.track-hidden:hover .track-inner {
  opacity: 1;
  color: var(--amber);
  background: transparent;
  text-shadow: 0 0 18px var(--amber);
}

/* ─── Center label ─────────────────────────────────────────── */

/* Center label — a paper sticker on the vinyl */
.label {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--disc-d) * 0.34);
  height: calc(var(--disc-d) * 0.34);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #f0e9d6 0%, #e2d6b8 50%, #c9b98e 100%);
  color: #1a1a1a;
  border: 0;
  cursor: none;
  padding: 0;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.15),
    inset 0 -10px 24px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.7),
    0 2px 10px rgba(0,0,0,.4);
  overflow: hidden;
  transition: transform .6s cubic-bezier(.7,.05,.2,1), box-shadow .4s;
  z-index: 3;
}
.label:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -8px 20px rgba(0,0,0,.15),
    0 0 0 1px var(--amber-d),
    0 0 60px oklch(0.62 0.13 65 / 0.48);
}

.label-top,
.label-bot {
  position: absolute;
  left: 0; right: 0;
  padding-left: 18%;
  padding-right: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.label-top {
  top: 14%;
  bottom: 56%;
  padding-bottom: 4%;
  justify-content: flex-end;
}
.label-bot {
  top: 56%;
  bottom: 14%;
  padding-top: 4%;
  justify-content: flex-start;
}

.label-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--disc-d) * 0.04);
  line-height: 1;
  color: #1a1a1a;
  margin-bottom: 4px;
  letter-spacing: -0.04em;
}
.label-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--disc-d) * 0.038);
  line-height: 1;
  color: #14130f;
  letter-spacing: -0.01em;
}
.label-title {
  font-family: var(--mono);
  font-size: calc(var(--disc-d) * 0.0105);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3a3a36;
  line-height: 1.4;
  max-width: 100%;
}
.label-meta {
  font-family: var(--mono);
  font-size: calc(var(--disc-d) * 0.0085);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a64;
  margin-top: 5px;
}

/* center hole — a void the content respects */
.label-hole {
  position: absolute;
  width: 3.2%; height: 3.2%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #2a2a2c, #0a0a0c 70%);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.8),
    inset 0 -1px 2px rgba(255,255,255,.12),
    0 0 0 1px rgba(0,0,0,.6),
    0 0 0 2px rgba(255,255,255,.08);
  z-index: 2;
}

/* circular text around label */
.label-ring-text {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.label-ring-glyphs {
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  fill: #6a6a60;
  opacity: 0.55;
}

/* When label is "opened" — push the disc gently back, raise label */
.app-about .stage { transform: scale(0.62) translateX(-22vw); }

/* ─── Readout (hover floater) ──────────────────────────────── */

.readout {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translate(-50%, 20px);
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.readout-on { opacity: 1; transform: translate(-50%, 0); }
.readout-no { color: var(--amber); font-size: 11px; }
.readout-title { color: var(--paper); font-family: var(--serif); font-style: italic; font-size: 18px; text-transform: none; letter-spacing: 0.01em; }
.readout-meta { color: var(--muted); }

/* ─── Case Study (liner notes) ─────────────────────────────── */

.case {
  position: fixed;
  inset: 56px 0 0 0;
  display: grid;
  place-items: start center;
  padding: 18px 6vw 24px;
  z-index: 4;
  /* capture clicks outside .case-inner so the backdrop closes the panel */
  pointer-events: auto;
  cursor: none;
  animation: caseIn .55s cubic-bezier(.2,.7,.2,1) .15s both;
}
@keyframes caseIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.case-close {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(10,10,12,.7);
  border: 1px solid var(--rule);
  color: var(--paper);
  font-family: var(--mono);
  cursor: none;
  transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.case-close-glyph { font-size: 14px; line-height: 1; }
.case-close:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: rotate(90deg);
}
.about-x {
  background: rgba(255,255,255,.04);
  border-color: rgba(40,30,15,.35);
  color: #1a1a1a;
  position: absolute;
  top: 14px;
  right: 14px;
}
.about-x:hover {
  border-color: var(--amber-d);
  color: var(--amber-d);
  background: rgba(255,255,255,.0);
}

/* nav cluster — prev / next / close at top right of the case study */
.case-nav {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.case-eject {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  background: var(--amber);
  border: 1px solid var(--amber);
  color: #14110b;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.case-eject:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: #14110b;
  transform: translateY(-1px);
}
.case-eject:active { transform: translateY(0); }
.case-eject-glyph {
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}
.case-eject-label { line-height: 1; }
.case-navbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: rgba(10,10,12,.7);
  border: 1px solid var(--rule);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: none;
  transition: border-color .25s, color .25s, background .25s;
}
.case-navbtn-glyph { font-size: 13px; line-height: 1; }
.case-navbtn-label { line-height: 1; }
.case-navbtn:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(0,0,0,.6);
}

.case-inner {
  position: relative;
  pointer-events: auto;
  width: min(1240px, 94vw);
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding: 44px 56px 40px;
  border: 1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(20,20,22,.94), rgba(10,10,12,.96));
  backdrop-filter: blur(8px);
  color: var(--paper);
  /* paper texture */
  background-image:
    linear-gradient(180deg, rgba(20,20,22,.94), rgba(10,10,12,.96)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
}

.case-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
  align-items: end;
}
.case-tracknum {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.case-title {
  font-family: 'Libre Baskerville', 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}
.case-brand {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.case-head-r {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.case-meta-row { display: flex; gap: 14px; justify-content: space-between; min-width: 200px; }
.case-meta-row > span:first-child { color: var(--muted-2); }
.case-meta-row > span:last-child { color: var(--paper); }
.case-meta-agency > span:last-child {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--amber);
}

.case-section { margin: 26px 0; }
.case-section-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-d);
  margin-bottom: 10px;
}
.case-prose {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper);
  text-wrap: pretty;
  max-width: 60ch;
  margin: 0;
}
.case-prose p { margin: 0; }
.case-prose p + p { margin-top: 0.85em; }
.case-prose-lead {
  font-size: 19px;
  line-height: 1.55;
  font-style: normal;
}
.case-prose-result {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--paper-d);
  font-style: normal;
  text-transform: none;
}

.case-work {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.case-piece {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-piece-frame {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  overflow: hidden;
}
.case-piece-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.025) 0 2px,
    transparent 2px 12px);
}
.case-piece-icon {
  position: relative;
  font-size: 28px;
  color: var(--muted);
  font-family: var(--mono);
}
.case-piece-film .case-piece-icon { color: var(--amber); }
.case-piece figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.case-piece-label { color: var(--paper); text-transform: none; font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0; }
.case-piece-meta { color: var(--muted-2); white-space: nowrap; }

.case-credits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 32px;
}
.case-credit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.case-credit-role { color: var(--muted-2); flex-shrink: 0; }
.case-credit-dots {
  flex: 1;
  border-bottom: 1px dotted var(--muted-2);
  transform: translateY(-3px);
}
.case-credit-name { color: var(--paper); text-transform: none; font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0; }

.case-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-foot-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.case-foot-nav .case-navbtn { background: rgba(10,10,12,.6); }
.case-back {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--paper);
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: none;
  transition: border-color .25s, color .25s, background .25s;
}
.case-back:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255,255,255,.02);
}

/* ─── About card ───────────────────────────────────────────── */

.about {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 50;
  animation: caseIn .5s cubic-bezier(.2,.7,.2,1) both;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%);
}
.about-inner {
  pointer-events: auto;
  width: min(640px, 88vw);
  max-height: 84vh;
  overflow-y: auto;
  padding: 36px 48px 32px 64px;
  background:
    /* faint paper grain */
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 92% 88%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(180deg, #ede5d2 0%, #e2d9c2 100%);
  color: #1a1a1a;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  position: relative;
  box-shadow:
    0 40px 100px rgba(0,0,0,.7),
    0 4px 0 rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 60px rgba(120,90,40,.12);
}
/* sleeve seam at top + bottom — like the printed border on real LP backs */
/* Removed at user request — keep the about card seamless. */
.about-inner::before,
.about-inner::after { content: none; display: none; }

/* Checkered race-flag stripe down the left edge of the about card. */
.about-inner {
  background-image:
    /* black + white checker on the left edge */
    linear-gradient(
      90deg,
      #1a1a1a 0,
      #1a1a1a 22px,
      transparent 22px
    ),
    conic-gradient(
      from 90deg at 0 0,
      #1a1a1a 0 25%,
      #f4f1e6 25% 50%,
      #1a1a1a 50% 75%,
      #f4f1e6 75% 100%
    ),
    /* faint paper grain */
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 92% 88%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(180deg, #ede5d2 0%, #e2d9c2 100%);
  background-repeat: no-repeat;
  background-size:
    22px 100%,
    22px 22px,
    auto, auto, auto;
  background-position:
    0 0,
    0 0,
    0 0, 100% 100%, 0 0;
}
.about-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6a6a64;
}
.about-photo {
  position: relative;
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 6px;
  background: #d8cfb8;
  box-shadow:
    0 8px 22px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(40,30,15,.35),
    0 0 0 4px rgba(255,255,255,.6),
    0 0 0 5px rgba(40,30,15,.3);
}
.about-photo img {
  position: absolute;
  /* Source headshot is 1600x2656. Eyes sit at roughly y≈1036 in source.
     Render the image taller than the box so the face fills the circle,
     then offset it so the eye-line lands on the top third (~33% ≈ 47px). */
  width: auto;
  height: 280px;
  left: 50%;
  top: -62px;
  transform: translateX(-50%);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.about-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
.about-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3a3a36;
  margin-top: 2px;
  white-space: nowrap;
}
.about-bio {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.65;
  width: 100%;
  max-width: 52ch;
  margin: 8px 0 4px;
  color: #1a1a1a;
  text-align: left;
}
.about-bio p { margin: 0 0 0.9em; }
.about-bio p:last-child { margin-bottom: 0; }
.about-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.about-link {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.about-link:hover { color: var(--amber-d); border-color: var(--amber-d); }
.about-close {
  background: transparent;
  color: #1a1a1a;
  border-color: #1a1a1a;
  margin-top: 6px;
}
.about-close:hover { color: var(--amber-d); border-color: var(--amber-d); background: transparent; }

/* ─── Custom cursor ────────────────────────────────────────── */

.cursor {
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: normal;
}
.cursor-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--paper);
  left: -3px; top: -3px;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
  transition: width .2s, height .2s, left .2s, top .2s, background .2s;
}
.cursor-label {
  position: absolute;
  left: 14px; top: -6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--paper);
  letter-spacing: 0.16em;
  background: rgba(10,10,12,.75);
  border: 1px solid var(--rule);
  padding: 4px 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
}
.cursor-on .cursor-dot {
  width: 28px; height: 28px;
  left: -14px; top: -14px;
  background: transparent;
  border: 1px solid var(--amber);
  box-shadow: 0 0 18px oklch(0.78 0.14 70 / 0.6);
}
.cursor-on .cursor-label {
  opacity: 1; transform: translateX(0);
  color: var(--amber);
  border-color: var(--amber);
  left: 24px;
}

/* ─── Hide spinner during playback so case study reads cleanly ─ */
.app-playing .stage, .app-hidden .stage {
  pointer-events: none;
}
.app-playing .stage .readout, .app-hidden .stage .readout { display: none; }

/* The disc still spins on top in shrink mode — give it a little frame */
.app-trans-shrink.app-playing .stage::after,
.app-trans-shrink.app-hidden  .stage::after {
  content: '';
  position: absolute;
  inset: -8% -8% -8% -8%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--rule);
  animation: pulseFrame 3s ease-in-out infinite;
}
@keyframes pulseFrame { 50% { box-shadow: 0 0 0 1px var(--amber-d); } }

/* ─── Small-screen safeguard ───────────────────────────────── */
@media (max-width: 720px) {
  :root { --disc-d: min(82vw, 82vh); }
  .case-inner { padding: 24px 22px; }
  .case-credits { grid-template-columns: 1fr; }
  .nowplaying { min-width: auto; padding: 4px 10px; }
  .nowplaying .np-title { font-size: 14px; }
  .chrome { padding: 12px 14px; font-size: 9.5px; }
  .chrome-sub, .chrome-meta { display: none; }
  .chrome-c { display: none; }
}


/* ─── Poster gallery (case study carousel) ─────────────────── */

.case-section-gallery .gallery-intro {
  max-width: 64ch;
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.55;
}
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 70vh;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid; place-items: center;
}
.gallery-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
  user-select: none; -webkit-user-drag: none;
}
.gallery-img.is-active { opacity: 1; }

/* Single-image case: no carousel chrome, image at natural shape */
.gallery-single { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gallery-single-frame {
  width: 100%;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
  max-height: 78vh;
}
.gallery-single-frame img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  user-select: none; -webkit-user-drag: none;
}
.gallery-single-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 2px 0;
}
.gallery-arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 64px;
  background: rgba(10,8,6,.55);
  backdrop-filter: blur(4px);
  border: 1px solid var(--rule);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 18px;
  cursor: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  z-index: 2;
}
.gallery-arrow-l { left: 12px; }
.gallery-arrow-r { right: 12px; }
.gallery-arrow:hover {
  background: rgba(10,8,6,.85);
  border-color: var(--amber);
  color: var(--amber);
}
.gallery-arrow-l:hover { transform: translateY(-50%) translateX(-2px); }
.gallery-arrow-r:hover { transform: translateY(-50%) translateX(2px); }
.gallery-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.gallery-counter {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex; gap: 4px;
}
.gallery-counter-cur { color: var(--paper); }
.gallery-dots { display: flex; gap: 8px; }
.gallery-dot {
  width: 30px; height: 2px;
  background: rgba(236,233,223,.18);
  border: 0; padding: 0;
  cursor: none;
  transition: background .2s;
}
.gallery-dot:hover { background: rgba(236,233,223,.4); }
.gallery-dot.is-active { background: var(--amber); }


/* ─── Films row (side-by-side gifs in case study) ──────────── */
.case-films {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.case-film {
  margin: 0;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.case-film img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .case-films { grid-template-columns: 1fr; }
}


/* ─── Chrome CTA pill (RESUME link in top-right) ───────────── */
.chrome-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.35);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
.chrome-cta-glyph { font-size: 11px; line-height: 1; }
button.chrome-cta { appearance: none; -webkit-appearance: none; outline: none; }
.chrome-cta:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
  text-shadow: none;
}


/* ─── Track titles curved along the disc ring ──────────────── */
.track-curve {
  height: auto;
  overflow: visible;
  display: block;
  transform: translateY(-2px);
}
.track-curve text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  fill: rgba(236, 233, 223, 0.82);
  letter-spacing: 0.4px;
  paint-order: stroke;
  stroke: rgba(0,0,0,.5);
  stroke-width: 2px;
  stroke-linejoin: round;
  transition: fill .25s, letter-spacing .25s, stroke .25s;
}
.track:hover .track-curve text,
.track.track-active .track-curve text {
  fill: var(--paper);
  letter-spacing: 1.2px;
  stroke: rgba(0,0,0,.85);
}


/* ─── Awards row ───────────────────────────────────────────── */
.case-section-awards { margin-top: 18px; }
.case-awards {
  list-style: none;
  margin: 0;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
  border: 1px solid var(--rule);
  background: rgba(255, 200, 130, .04);
}
.case-award-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.case-award-mark {
  color: var(--amber);
  font-size: 10px;
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(255, 170, 90, .55);
}
.case-award-text { color: var(--paper); }
@media (max-width: 720px) {
  .case-awards { grid-template-columns: 1fr; }
}


/* Vimeo iframe slot — keeps 16:9 instead of the gif 1:1 */
.case-film-video {
  aspect-ratio: 16 / 9;
}
.case-film-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.case-clips { margin-top: 14px; }


/* Expand button on film tiles */
.case-film-video { position: relative; }
.case-film-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(10,8,6,.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: var(--mono);
  cursor: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  opacity: 0;
}
.case-film-video:hover .case-film-expand { opacity: 1; }
.case-film-expand:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
  transform: scale(1.05);
}
.case-film-expand-glyph { font-size: 16px; line-height: 1; }

/* Film lightbox modal */
.film-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
  cursor: none;
  animation: caseIn .3s ease both;
}
.film-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  max-height: 92vh;
  background: #000;
  box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
}
.film-lightbox-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.film-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 4;
}


/* Extra breathing room above the films grid + its intro paragraph */
.case-section-films { padding-top: 12px; }
.case-section-films .gallery-intro { margin-top: 14px; }
.case-section-films .case-films { margin-top: 22px; }
.case-section-films .case-clips { margin-top: 18px; }


/* Scrim behind the case study (over the scene + minimized record) */
.app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background .45s ease, backdrop-filter .45s ease;
  z-index: 3;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}
.app-playing::before,
.app-hidden::before {
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* Breathing room between the bio paragraphs and the link row */
.about-bio { margin-bottom: 28px; }
.about-links { margin-top: 6px; }


/* Full-width stills stack inside the Films section */
.case-stills {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 26px;
}
.case-still {
  margin: 0;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.case-still img {
  width: 100%;
  height: auto;
  display: block;
}
.case-still figcaption {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-top: 1px solid var(--rule);
  background: rgba(0,0,0,.3);
}


/* Hero film — full-width 16:9 at the top of the case study */
.case-section-hero { margin-top: 4px; margin-bottom: 28px; }
.case-hero-film {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
.case-hero-film iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.case-hero-film .case-film-expand { opacity: 0; }
.case-hero-film:hover .case-film-expand { opacity: 1; }

/* Single-item films grid renders full-width instead of half */
.case-films:has(> :only-child) {
  grid-template-columns: 1fr;
}


/* Gallery stage click-to-expand */
.gallery-stage { cursor: pointer; }
.gallery-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(10,8,6,.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: var(--mono);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s, opacity .2s;
  opacity: 0;
}
.gallery-stage:hover .gallery-expand { opacity: 1; }
.gallery-expand:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
  transform: scale(1.05);
}
.gallery-expand-glyph { font-size: 16px; line-height: 1; }

/* Poster lightbox modal */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(8px);
  cursor: pointer;
  animation: caseIn .3s ease both;
}
.gallery-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: grid;
  place-items: center;
  cursor: default;
}
.gallery-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  box-shadow: 0 40px 100px rgba(0,0,0,.75);
}
.gallery-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 4;
}
.gallery-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 80px;
}
.gallery-lightbox-arrow.gallery-arrow-l { left: 0; }
.gallery-lightbox-arrow.gallery-arrow-r { right: 0; }
.gallery-lightbox-arrow:hover.gallery-arrow-l { transform: translateY(-50%) translateX(-3px); }
.gallery-lightbox-arrow:hover.gallery-arrow-r { transform: translateY(-50%) translateX(3px); }
.gallery-lightbox-counter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.7);
}
.gallery-lightbox-counter .gallery-counter-cur { color: #fff; }


/* Case stills: make clickable + show expand affordance */
.case-still { position: relative; cursor: pointer; transition: transform .25s ease, box-shadow .25s; }
.case-still:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.case-still-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(10,8,6,.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: var(--mono);
  font-size: 16px;
  opacity: 0;
  transition: opacity .2s, background .2s, border-color .2s, color .2s;
  pointer-events: none;
}
.case-still:hover .case-still-expand { opacity: 1; }

/* Image lightbox shares the film lightbox skeleton */
.film-lightbox-img-wrap { aspect-ratio: auto; max-width: 96vw; max-height: 92vh; background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.film-lightbox-img {
  max-width: 100%;
  max-height: calc(92vh - 60px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  box-shadow: 0 40px 100px rgba(0,0,0,.75);
}
.film-lightbox-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}


/* Image lightbox close button — anchored inside the wrap so it stays on-screen */
.film-lightbox-img-wrap { position: relative; padding-top: 44px; }
.film-lightbox-img-wrap .film-lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  cursor: pointer;
}


/* JS-driven rotation: kill the CSS animation, show a grab cursor on the disc */
.disc-jsdriven { animation: none !important; touch-action: none; }
.disc-jsdriven { cursor: grab; }
.disc-jsdriven.is-grabbing { cursor: grabbing; }


/* "The Idea" section centered */
/* "The Idea" section — two-column left-aligned layout (test) */
.case-section-idea { text-align: left; }
.case-section-idea .case-section-tag { text-align: left; }
.case-section-idea .case-prose,
.case-section-idea .case-prose-lead {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.case-section-idea .case-prose-lead p { margin: 0; }
.case-section-idea .case-prose-lead p + p { margin-top: 0; }

/* Single-paragraph idea sections stay centered */
.case-section-idea:not(:has(.case-prose-lead p + p)) { text-align: center; }
.case-section-idea:not(:has(.case-prose-lead p + p)) .case-section-tag { text-align: center; }
.case-section-idea:not(:has(.case-prose-lead p + p)) .case-prose,
.case-section-idea:not(:has(.case-prose-lead p + p)) .case-prose-lead {
  display: block;
  text-align: center;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 820px) {
  .case-section-idea .case-prose,
  .case-section-idea .case-prose-lead {
    grid-template-columns: 1fr;
    gap: 0.85em;
  }
  .case-section-idea .case-prose-lead p + p { margin-top: 0.85em; }
}


/* When clips count is 3, render as a 3-up row instead of 2-up */
.case-clips:has(.case-film:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .case-clips:has(.case-film:nth-child(3)) { grid-template-columns: 1fr; }
}


/* Landing page section: hero gif full width, supporting row 2-up beneath */
.case-section-landing { padding-top: 12px; }
.case-section-landing .gallery-intro { margin-top: 14px; }
.case-landing-hero {
  margin: 22px 0 0;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s;
}
.case-landing-hero:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.case-landing-hero img { width: 100%; height: auto; display: block; }
.case-landing-hero figcaption {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-top: 1px solid var(--rule);
  background: rgba(0,0,0,.3);
}
@media (max-width: 720px) {
  .case-landing-row-pair { grid-template-columns: 1fr; }
}
.case-landing-row { margin-top: 18px; }
.case-landing-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.case-landing-row .case-still {
  aspect-ratio: 16 / 10;
}
.case-landing-row .case-still img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.case-landing-row .case-still figcaption {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-top: 1px solid var(--rule);
  background: rgba(0,0,0,.3);
}

/* When a mobile mockup is in the supporting row, switch to a 2-col layout:
   desktop stills stack on the left, the mobile mockup spans the right column
   at its natural portrait aspect. */
.case-landing-row:has(.case-still-mobile) {
  grid-template-columns: 1.45fr 1fr;
  align-items: stretch;
  gap: 16px;
}
.case-landing-row:has(.case-still-mobile) > :not(.case-still-mobile) {
  grid-column: 1;
}
.case-landing-row .case-still-mobile {
  grid-column: 2;
  grid-row: 1 / -1;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(20,16,8,.55), rgba(0,0,0,.85));
}
.case-landing-row .case-still-mobile img {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
  object-position: center top;
  display: block;
  margin: 0;
}


/* Lightboxes must sit above the chrome bars (which are z-index 9999) */
.film-lightbox { z-index: 10000; }
.gallery-lightbox { z-index: 10001; }


/* Social videos row */
.case-section-social { padding-top: 12px; }
.case-section-social .gallery-intro { margin-top: 14px; }
.case-social-row { margin-top: 22px; }
.case-social-row .case-film-video { aspect-ratio: 9 / 16; }
@media (max-width: 720px) {
  .case-social-row { grid-template-columns: 1fr; }
}


/* Social videos: 16:9 horizontal, not 9:16 */
.case-social-row .case-film-video { aspect-ratio: 16 / 9; }


/* Films grid: 3-up when there are 3+ items (Party City) */
.case-section-films > .case-films:has(.case-film-video:nth-child(3)),
.case-section-project > .case-films:has(.case-film-video:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .case-section-films > .case-films:has(.case-film-video:nth-child(3)),
  .case-section-project > .case-films:has(.case-film-video:nth-child(3)) { grid-template-columns: 1fr; }
}

/* Social stills (e.g. Party City IG mockup) — fills width, centered */
.case-social-stills {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.case-social-stills .case-still { background: transparent; border: 0; text-align: center; }
.case-social-stills .case-still img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56vh;
  margin: 0 auto;
  display: block;
}
/* When aspect crop is requested, the image lives inside .case-still-crop which
   sets the aspect-ratio; figcaption stays below at natural height. */
.case-social-stills .case-still-crop {
  width: 100%;
  overflow: hidden;
  background: #0a0608;
}
.case-social-stills .case-still-crop img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}


/* Inline link inside idea / case prose */
.case-link {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .2s;
}
.case-link:hover {
  color: var(--amber);
}


/* Audience-reaction tweet grid in the Social section */
.case-reactions { margin-top: 28px; }
.case-reactions-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.case-reactions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 900px) {
  .case-reactions-grid { grid-template-columns: repeat(4, 1fr); }
}
.case-reaction {
  margin: 0;
  background: #f4f0e6;
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s, border-color .25s;
  display: flex;
  align-items: stretch;
}
.case-reaction:hover {
  transform: translateY(-2px);
  border-color: var(--amber);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
.case-reaction img {
  width: 100%;
  height: auto;
  display: block;
}

/* Press writeup block under social reactions */
.case-press {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}
@media (min-width: 720px) {
  .case-press {
    grid-template-columns: 1fr 1.4fr;
    gap: 32px;
  }
}
.case-press-image {
  position: relative;
  margin: 0;
  background: #f4f0e6;
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
.case-press-image:hover {
  transform: translateY(-2px);
  border-color: var(--amber);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
.case-press-image img {
  width: 100%;
  height: auto;
  display: block;
}
.case-press-image .case-still-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 14px;
  color: #111;
  background: rgba(255,255,255,.85);
  padding: 2px 6px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .2s;
}
.case-press-image:hover .case-still-expand { opacity: 1; }
.case-press-copy {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--paper);
}
.case-press-copy p {
  margin: 0 0 0.85em;
}
.case-press-copy p:last-child {
  margin-bottom: 0;
}

/* ─── Project sub-section (campaigns under a single track) ── */
.case-section-project {
  position: relative;
  padding-top: 8px;
}
.case-section-project + .case-section-project { margin-top: 10px; }
.case-section-project > .case-section-tag {
  /* tighter than top-level sections so they read as sub-blocks */
  margin-bottom: 14px;
}
.case-section-project > .case-films { margin-top: 22px; }
.case-project-stills {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: start;
}
.case-project-stills .case-still {
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
}
.case-project-stills .case-still img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center;
}
.case-project-stills .case-project-still-natural img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #0a0608;
}
.case-project-stills .case-still figcaption {
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--rule);
  background: #0a0608;
}
@media (max-width: 720px) {
  .case-project-stills { grid-template-columns: repeat(2, 1fr); }
}

/* Compact 2-up project stills — flex row capped by image height so 9:16
   portraits stay fully visible without scrolling */
.case-project-stills-compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-left: auto;
  margin-right: auto;
}
.case-project-stills-compact .case-still {
  flex: 0 1 auto;
}
.case-project-stills-compact .case-still img {
  width: auto;
  height: auto;
  max-height: min(68vh, 640px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .case-project-stills-compact { gap: 12px; }
  .case-project-stills-compact .case-still img { max-height: 60vh; }
}

/* Moodboard layout: masonry via CSS columns, items keep natural aspect ratio */
.case-moodboard {
  margin-top: 22px;
  column-count: 3;
  column-gap: 14px;
}
.case-moodboard-item {
  break-inside: avoid;
  margin: 0 0 14px;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
}
.case-moodboard-item img {
  width: 100%;
  height: auto;
  display: block;
}
.case-moodboard-item figcaption {
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--rule);
  background: #0a0608;
}
@media (max-width: 900px) {
  .case-moodboard { column-count: 2; }
}
@media (max-width: 520px) {
  .case-moodboard { column-count: 1; }
}

/* Split layout: film + still side-by-side (e.g. Trolli) */
.case-project-split {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 18px;
  margin-top: 22px;
  align-items: stretch;
}
.case-project-split .case-films {
  margin-top: 0;
  grid-template-columns: 1fr;
}
.case-project-split .case-project-stills {
  margin-top: 0;
  grid-template-columns: 1fr;
}
.case-project-split .case-project-stills .case-still img {
  /* taller paid-social card stays at its 9:16 shape, but fills its column */
}
@media (max-width: 720px) {
  .case-project-split { grid-template-columns: 1fr; }
}

/* Film-strip carousel layout (e.g. Holiday Cakes — 3 videos) */
.film-strip { margin-top: 22px; }
.film-strip-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(640px, 78%);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: 4px;
  /* hide horizontal scrollbar across browsers, controls do the navigating */
  scrollbar-width: thin;
}
.film-strip-cell {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.film-strip-cell .case-film-video {
  width: 100%;
  margin: 0;
}
.film-strip-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}
.film-strip-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  background: #0a0608;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 14px;
  cursor: none;
  transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.film-strip-arrow:hover:not(:disabled) {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
}
.film-strip-arrow:disabled { opacity: .35; }
.film-strip-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  display: inline-flex;
  gap: 4px;
}
.film-strip-count-cur { color: var(--paper); }
.film-strip-dots {
  display: inline-flex;
  gap: 8px;
}
.film-strip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(236,233,223,.4);
  cursor: none;
  padding: 0;
  transition: background .2s, border-color .2s;
}
.film-strip-dot.is-active { background: var(--amber); border-color: var(--amber); }
@media (max-width: 720px) {
  .film-strip-scroller { grid-auto-columns: 88%; }
}

/* Social posts strip — film-strip carousel that bleeds off the case-inner edges */
.social-posts-strip { margin-top: 22px; }
.case-section-social-posts {
  /* let the strip extend to the very edge of case-inner */
  --case-pad: 56px;
}
.social-posts-strip-scroller {
  /* bleed left/right past the case-inner's horizontal padding */
  margin-left: calc(var(--case-pad, 56px) * -1);
  margin-right: calc(var(--case-pad, 56px) * -1);
  padding-left: var(--case-pad, 56px);
  padding-right: calc(var(--case-pad, 56px) * 0.4);
  /* 3 full posts visible + ~0.4 bleeding on the right edge */
  grid-auto-columns: calc((100% - 2 * 22px) / 3);
  gap: 22px;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--case-pad, 56px);
}
.social-posts-strip-cell {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.social-posts-strip .film-strip-controls {
  margin-top: 14px;
}
.social-post-card {
  position: relative;
  margin: 0;
  cursor: none;
  transition: transform .25s ease;
}
.social-post-card:hover { transform: translateY(-3px); }
.social-post-card img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
}
.social-post-card .case-still-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: rgba(20,17,11,.55);
  color: var(--paper);
  border-radius: 50%;
  font-size: 13px;
  opacity: 0;
  transition: opacity .2s;
}
.social-post-card:hover .case-still-expand { opacity: 1; }
@media (max-width: 980px) {
  .case-section-social-posts { --case-pad: 36px; }
  .social-posts-strip-scroller {
    grid-auto-columns: calc((100% - 2 * 16px) / 2.2);
    gap: 16px;
  }
}
@media (max-width: 720px) {
  .case-section-social-posts { --case-pad: 22px; }
  .social-posts-strip-scroller {
    grid-auto-columns: calc((100% - 12px) / 1.4);
    gap: 14px;
  }
}

/* Stills-strip carousel — larger image viewer */
.stills-strip-scroller { grid-auto-columns: min(360px, 32%); }
.stills-strip-cell .case-still {
  margin: 0;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.stills-strip-cell .case-still img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 78vh;
  object-fit: contain;
  background: #0a0608;
}
.stills-strip-cell .case-still figcaption {
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--rule);
  background: #0a0608;
}
@media (max-width: 900px) {
  .stills-strip-scroller { grid-auto-columns: min(280px, 46%); }
}
@media (max-width: 720px) {
  .stills-strip-scroller { grid-auto-columns: 78%; }
}
.stills-strip-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.02) 0 12px,
      rgba(255,255,255,0.04) 12px 24px);
  display: block;
}

/* IG-carousel preview — two stills side by side as they'd appear in feed */
.ig-carousel { margin-top: 22px; }
.ig-carousel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}
.ig-carousel-slide {
  position: relative;
  background: #0a0608;
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: zoom-in;
}
.ig-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
.ig-carousel-slide-natural img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #0a0608;
}
.ig-carousel-slide figcaption {
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--rule);
  background: #0a0608;
}
.ig-carousel-slide-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(0,0,0,.55);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ig-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.ig-carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(236,233,223,.35);
}
.ig-carousel-dot.is-active { background: var(--amber); }
@media (max-width: 600px) {
  .ig-carousel-grid { grid-template-columns: 1fr; }
}

/* ─── Resume modal (mirrors case-study chrome) ─────────────── */
.resume {
  position: fixed;
  inset: 56px 0 0 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px clamp(12px, 2vw, 32px) 24px;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 100%);
  pointer-events: auto;
  animation: caseFade .25s ease-out both;
}
@keyframes caseFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.resume-inner {
  position: relative;
  width: min(1400px, 100%);
  height: calc(100vh - 96px);
  max-height: 1400px;
  background: #0d0a07;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.resume-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #15110a 0%, #0d0a07 100%);
  flex: 0 0 auto;
}
.resume-bar-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.resume-bar-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.resume-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 3px 8px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  line-height: 1;
}
.resume-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.3);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: background .2s, border-color .2s, color .2s;
}
.resume-action:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
}
.resume-action-glyph { font-size: 11px; line-height: 1; }
.resume-close {
  position: static;
}
.resume-stage {
  flex: 1 1 auto;
  background: #1a1815;
  min-height: 0;
}
.resume-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.resume-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1300px, 100%);
  object-fit: contain;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  border-radius: 2px;
  user-select: none;
}
.resume-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #2a2724;
}
@media (max-width: 720px) {
  .resume { padding: 12px; inset: 48px 0 0 0; }
  .resume-inner { height: calc(100vh - 60px); }
  .resume-bar { padding: 10px 12px; flex-wrap: wrap; }
  .resume-name { font-size: 15px; }
  .resume-scroll { padding: 12px; }
}