/* ═══════════════════════════════════════════════════════════
   Design tokens — change colors & fonts here
   The desktop layout is drawn on a 1920×1080 canvas (same as
   Figma) and scaled to fit the screen, so px values below
   match the Figma file 1:1.
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg: #e9e7e7;
  --ink: #0e0e0e;
  --ink-2: #2d2d2d;
  --dim: #9c9a9a;
  --muted: #9b9b9b;
  --label: #5c5c5c;
  --card: #d9d9d9;
  --grey-2: #9d9d9d;
  --white: #fff;

  --pixel: "Jersey 10", monospace;   /* from Figma */
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Inter", system-ui, sans-serif;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, .9, .24, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--bg); overflow-x: hidden; }
body { color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
svg { fill: currentColor; }

/* ─── Stage ───────────────────────────────────────────────── */
/* Desktop-first: the 1920×1080 canvas always fills the window width.
   Short windows scroll; tall windows centre it vertically. */
.viewport { position: relative; width: 100%; overflow: hidden; }
.stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0; transform: scale(var(--s, 1));
}
.view { position: absolute; left: 0; right: 0; top: var(--pad, 0px); height: 1080px; visibility: hidden; opacity: 0; transition: opacity .45s var(--ease), visibility 0s .45s; }
.view.is-active { visibility: visible; opacity: 1; transition: opacity .45s var(--ease); }
.view .enter { transition: transform .8s var(--ease) var(--d, 0s), opacity .6s var(--ease) var(--d, 0s), filter .6s var(--ease) 0s; }

/* Hover pop: the section under the cursor lifts and grows a little. Nothing else changes. */
.view.is-settled .enter { transition: transform .45s var(--spring) 0s, opacity .6s var(--ease) 0s; }
.view.is-settled [data-zone].is-zone-on { transform: translateY(-4px) scale(1.018); }
.view.is-settled .bio.is-zone-on { transform: translateY(-2px) scale(1.008); transform-origin: 0 50%; }
.view.is-settled .player.is-zone-on { transform-origin: 0 0; }
/* X and LinkedIn: each pops on its own, a bit more playful than the big blocks */
.view.is-settled .social.is-zone-on { transform: translateY(-6px) scale(1.12) rotate(-6deg); box-shadow: 0 14px 22px -8px #0007; }
.view.is-settled .social.is-zone-on:active { transform: translateY(-2px) scale(1.02) rotate(-2deg); }
.view:not(.is-active) .enter { transform: translateY(22px); opacity: 0; }

/* ─── Header ──────────────────────────────────────────────── */
.avatar {
  position: absolute; left: 90px; top: 40px; width: 150px; height: 150px;
  border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05);
  transition: transform .5s var(--spring);
}
.avatar:hover { transform: rotate(-6deg) scale(1.04); }
.id { position: absolute; left: 275px; top: 69.5px; }
.id__name { font: 400 28px/30px var(--pixel); }
.id__title { font: 400 60px/64px var(--pixel); }
.social {
  position: absolute; top: 80px; width: 70.5px; height: 70.5px; border-radius: 13.5px;
  display: grid; place-items: center;
  box-shadow: 0 1px 0 #ffffff50 inset, 0 6px 14px -6px #0006;
  transition: transform .45s var(--spring), box-shadow .3s;
}
.social:hover { transform: translateY(-5px) rotate(-5deg); box-shadow: 0 14px 22px -8px #0007; }
.social:active { transform: scale(.94); }
.social svg { width: 44px; fill: #fff; }
.social--x { left: 1650px; background: #000; }
.social--in { left: 1758px; background: #0a66c2; }
.rule { position: absolute; left: 91px; top: 228px; width: 1737px; border: 0; border-top: 1px solid var(--ink); transform-origin: left; transition: transform 1s var(--ease) .1s; }
.view:not(.is-active) .rule { transform: scaleX(0); }

/* ─── Bio ─────────────────────────────────────────────────── */
.bio {
  position: absolute; left: 92px; top: 340px; width: 1142px;   /* Figma: x92 y340, 37px text, 44px lines */
  font: 600 37px/44px var(--sans); letter-spacing: -.014em; color: var(--dim);
}
.bio b { color: var(--ink); font-weight: 600; }

/* ─── Player ──────────────────────────────────────────────── */
.player {
  /* Figma: 286×286 at x91 y607, radius 36.9. Built at 390 and scaled 0.7333 so every inner part keeps Figma's proportions */
  position: absolute; left: 91px; top: 607px; width: 390px; height: 390px;
  scale: .7333; transform-origin: 0 0;
  border-radius: 50.3px; background: var(--card);
  box-shadow: inset 0 1.5px 0 #ffffffa0, inset 0 -2px 6px #0000000d, 0 1px 2px #0000000f;
}
.player__title { position: absolute; left: 39px; top: 29px; font: 600 24px/29px var(--sans); color: #000; }
.player__sub { position: absolute; left: 39px; top: 58px; font: 600 17px/21px var(--sans); color: var(--muted); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.pbtn { position: absolute; top: 102px; width: 38px; height: 38px; display: grid; place-items: center; color: #888; transition: color .2s, transform .35s var(--spring); }
.pbtn:hover { color: #333; transform: scale(1.18); }
.pbtn:active { transform: scale(.86); }
.pbtn svg { width: 21px; }
.pbtn--prev { left: 29px; } .pbtn--play { left: 143px; } .pbtn--next { left: 259px; }
.pbtn .i-stop { display: none; }
.player.is-playing .pbtn--play .i-play { display: none; }
.player.is-playing .pbtn--play .i-stop { display: block; }

.platter {
  position: absolute; left: 39px; top: 159px; width: 196px; height: 196px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #8a8a8a 0 1px, #909090 1px 3px);
  box-shadow: inset 0 2px 0 #ffffff40, 0 10px 18px -10px #0006;
  display: grid; place-items: center;
}
.platter::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, #fff0, #ffffff26 8%, #fff0 20%, #fff0 50%, #ffffff1f 58%, #fff0 70%);
}
.label {
  position: relative; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3d7bd6, #0a2a5c 55%, #00132b) center/cover;
  box-shadow: 0 0 0 2px #0000001a;
}
.label::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: #d9d9d9; }
.pivot { position: absolute; left: 231px; top: 220px; width: 32px; height: 74px; background: #8b8b8b; box-shadow: inset 0 1px 0 #ffffff40; }
.tonearm { position: absolute; left: 160px; top: 254px; width: 100px; height: 6px; transform-origin: 90% 50%; rotate: 62deg; transition: rotate 1.1s var(--ease); z-index: 2; }
.tonearm i { position: absolute; inset: 0; background: #2e2e2e; border-radius: 3px; }
.tonearm b { position: absolute; right: 1px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #2e2e2e; }
.player.is-playing .tonearm { rotate: 34deg; }
.vol { position: absolute; left: 335px; top: 97px; width: 8px; height: 228px; border-radius: 4px; background: #b4aeae; cursor: ns-resize; touch-action: none; }
.vol::before { content: ""; position: absolute; inset: -6px -14px; }
.vol__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; border-radius: 4px; background: #676767; }
.vol__knob { position: absolute; left: 50%; bottom: 72%; width: 22px; height: 22px; margin: 0 0 -11px -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px #0003; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--spring); pointer-events: none; }
.vol:hover .vol__knob, .vol.is-drag .vol__knob { opacity: 1; transform: none; }
.speaker { position: absolute; left: 318px; top: 326px; width: 44px; height: 44px; padding: 4px; color: #9d9d9d; border-radius: 50%; transition: color .2s, transform .35s var(--spring); }
.speaker:hover { color: #555; transform: scale(1.12); }
.speaker svg { width: 100%; }
.speaker__x { display: none; }
.player.is-muted .speaker__waves { display: none; }
.player.is-muted .speaker__x { display: inline; }
.player.is-muted .speaker { color: #555; }
.spotify-host { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ─── Tags ────────────────────────────────────────────────── */
.toggles {
  position: absolute; left: 565px; top: 610px; width: 550px; height: 258.3px;   /* Figma: x565 y610, rows every 63px */
  display: grid; align-content: start; row-gap: 26.5px; padding-top: 7px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
}
.tagrow { height: 36.5px; margin-left: var(--offset, 0px); }
.tagrow__track { display: flex; gap: 22px; width: max-content; animation: drift 40s linear infinite; }
.tagrow.is-rev .tagrow__track { animation-direction: reverse; }
.toggles:hover .tagrow__track, .toggles:focus-within .tagrow__track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(var(--loop, -50%)); } }
.tag {
  position: relative; height: 36.5px; padding: 0 1px 0 18px; border-radius: 18.25px;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  background: linear-gradient(90deg, #eceaea 0%, #d6d5d5 100%);
  box-shadow: inset 0 1px 2px #0000000f;
  font: 500 16px/1 var(--sans); color: #6a6868;
  transition: background .3s, color .3s, transform .4s var(--spring);
}
.tag__icon {
  width: 34.5px; height: 34.5px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  background: var(--grey-2); color: #fff;
  box-shadow: 0 2px 4px #00000026, inset 0 1px 0 #ffffff40;
  transition: background .3s, transform .5s var(--spring);
}
.tag__icon img { width: 20px; height: 20px; object-fit: contain; }
.tag:hover, .tag.is-hot { background: var(--ink-2); color: #fff; transform: translateY(-2px); }
.tag:hover .tag__icon, .tag.is-hot .tag__icon { background: #fff; color: var(--ink-2); transform: rotate(-12deg) scale(1.06); }
.tag:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
.tag-tip {
  position: absolute; z-index: 30; width: 300px; padding: 14px 18px 15px; border-radius: 18px;
  background: var(--ink-2); color: #fff; pointer-events: none;
  display: grid; gap: 6px;
  box-shadow: 0 14px 30px -12px #00000080;
  transform: translate(-50%, calc(-100% - 6px)) scale(.94); transform-origin: 50% 100%;
  opacity: 0; transition: opacity .2s, transform .35s var(--spring);
}
.tag-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }
.tag-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: inherit; border-radius: 3px; rotate: 45deg; }
.tag-tip b { font: 600 17px/1.2 var(--sans); }
.tag-tip span { font: 400 15px/21px var(--sans); color: #ffffffcc; }

/* ─── Story ───────────────────────────────────────────────── */
.story {
  position: absolute; left: 1278px; top: 270px; width: 550px; height: 622px;
  border-radius: 48px; overflow: hidden; background: #111;
  box-shadow: 0 11px 9px #00000040;
  isolation: isolate;
}
.story__slides, .story__slide { position: absolute; inset: 0; }
.story__slide { visibility: hidden; }
.story__slide.is-active, .story__slide.is-out { visibility: visible; }
.story__slide.is-out { z-index: 1; }
.story__slide.is-in { z-index: 2; animation: st-in 1.3s cubic-bezier(.37,0,.2,1) both; }
.story__slide.is-out { animation: st-out 1.3s cubic-bezier(.45,0,.55,1) both; }
.story__slide.is-in.is-back { animation-name: st-in-back; }
.story__slide.is-out.is-back { animation-name: st-out-back; }
/* Smooth card switch: the new photo drifts in a short way while it fades up and comes into focus;
   its leading edge is feathered so there is never a hard line; the old photo drifts on, softens
   and fades underneath. Long, gentle curves, no fast snaps. */
.story__slide.is-in {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 300px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 300px), transparent 100%);
  -webkit-mask-size: 100% calc(100% + 300px); mask-size: 100% calc(100% + 300px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.story__slide.is-in.is-back {
  -webkit-mask-image: linear-gradient(0deg, #000 0, #000 calc(100% - 300px), transparent 100%);
          mask-image: linear-gradient(0deg, #000 0, #000 calc(100% - 300px), transparent 100%);
}
@keyframes st-in {
  0%   { transform: translateY(-28%) scale(1.04); opacity: 0; filter: blur(12px); -webkit-mask-position: 0 -300px; mask-position: 0 -300px; }
  45%  { opacity: 1; filter: blur(5px); }
  100% { transform: none; opacity: 1; filter: blur(0); -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes st-in-back {
  0%   { transform: translateY(28%) scale(1.04); opacity: 0; filter: blur(12px); -webkit-mask-position: 0 0; mask-position: 0 0; }
  45%  { opacity: 1; filter: blur(5px); }
  100% { transform: none; opacity: 1; filter: blur(0); -webkit-mask-position: 0 -300px; mask-position: 0 -300px; }
}
.story__slide.is-in.is-back { -webkit-mask-position: 0 -300px; mask-position: 0 -300px; }
@keyframes st-out      { 0% { transform: none; filter: blur(0); opacity: 1; } 100% { transform: translateY(14%) scale(.97); filter: blur(10px); opacity: 0; } }
@keyframes st-out-back { 0% { transform: none; filter: blur(0); opacity: 1; } 100% { transform: translateY(-14%) scale(.97); filter: blur(10px); opacity: 0; } }
.story__slide.is-out { transform-origin: 50% 100%; }
.story__slide.is-out.is-back { transform-origin: 50% 0; }

/* glass frame: the lens itself stays exactly as designed; only its blur pulses once per switch */
.story__lens--full { display: none; }
.story.is-switching .story__lens:not(.story__lens--full) { animation: lens-blur-pulse 1.3s cubic-bezier(.37,0,.3,1) both; }
@keyframes lens-blur-pulse {
  0%, 100% { filter: blur(0) brightness(1); }
  45%      { filter: blur(3.5px) brightness(1.35); }
}
.story__slide.is-in, .story__slide.is-out { will-change: transform, opacity, filter; }
.story__slide img { width: 100%; height: 100%; object-fit: cover; }
.story__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 34.4%, #0000000a 51.4%, #00000023 64%, #0000004f 81.4%, #00000093 90.9%, #000 100%); }
.story__text {
  position: absolute; left: 65px; top: 466px; width: 415px; z-index: 4;
  color: #fff; font: 500 21.922px/normal var(--sans); letter-spacing: 0;   /* Figma: Inter Medium 21.92, auto line height */
  transform: translateY(10px); opacity: 0; transition: transform 1s var(--ease) .45s, opacity .9s ease .45s;
}
.story__slide.is-active .story__text, .story__slide.is-out .story__text { transform: none; opacity: 1; }
.story__text u { text-decoration-skip-ink: none; text-underline-position: from-font; text-decoration-thickness: from-font; }

/* Glass lens (Figma "Rectangle 33"): built as inline SVG in index.html */
.story__lens { position: absolute; left: 25.4px; top: 26.3px; width: 498.73px; height: 568.89px; z-index: 3; pointer-events: none; overflow: visible; }

.story__tap { position: absolute; top: 0; bottom: 0; z-index: 5; }
.story__tap--prev { left: 0; width: 35%; cursor: w-resize; } .story__tap--next { right: 0; width: 65%; cursor: e-resize; }

/* ─── Nav pill ────────────────────────────────────────────── */
.nav {
  position: absolute; left: 688px; top: calc(var(--pad, 0px) + 933px); width: 544px; height: 77px; z-index: 20;
  display: grid; grid-template-columns: 181px 181px 182px;
  background: var(--white); border-radius: 38.7px;
  font: 400 27px/1 var(--mono); letter-spacing: -.01em;
  box-shadow: 0 1px 2px #0000000a, 0 10px 30px -12px #00000017;
}
.nav a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: color .35s; }
.nav a svg { width: 19px; margin-top: -4px; }
.nav a.is-active { color: #fff; }
.nav a:not(.is-active):hover { color: #777; }
.nav__bg { position: absolute; left: 0; top: 0; width: 181px; height: 77px; background: var(--ink-2); border-radius: 38.7px; transition: transform .6s var(--spring); }

/* ─── Work ────────────────────────────────────────────────── */
.feature {
  position: absolute; left: 471px; top: 203px; width: 1059px; height: 613px;
  border-radius: 45px; overflow: hidden; color: #fff; isolation: isolate;
  box-shadow: 0 10px 6.5px #00000040;
}
/* Idle: the preview plays clean at full speed. Hover/focus: it slows to 0.25x,
   softens, and the project info + Fullscreen button fade in. */
.feature { cursor: default; outline: none; }
.feature__media { position: absolute; inset: -6px; background: #222 center/cover; transition: opacity .45s, filter .6s var(--ease), transform .8s var(--ease); }
.feature__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature__video:not([src]) { display: none; }
.feature.is-open .feature__media { filter: blur(2px) brightness(.82); transform: scale(1.02); }
.feature__shade { position: absolute; inset: 0; background: linear-gradient(180deg, #00000066 0%, #0000001a 42%, #00000080 78%, #000000bf 100%); opacity: 0; transition: opacity .5s var(--ease); }
.feature.is-open .feature__shade { opacity: 1; }
.feature__body, .feature__count, .glass { opacity: 0; transform: translateY(14px); pointer-events: none; }
.feature.is-open .feature__body, .feature.is-open .feature__count, .feature.is-open .glass { opacity: 1; transform: none; pointer-events: auto; }
.feature__count, .glass { transition: opacity .4s var(--ease), transform .55s var(--ease), background .3s; }
.feature.is-open .glass { transition-delay: .08s; }
.feature:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 6px; }
.feature__body { position: absolute; left: 53px; top: 46px; right: 53px; transition: opacity .4s var(--ease), transform .55s var(--ease); }
.feature__title { font: 400 85px/91px var(--pixel); margin-bottom: 11px; }
.feature__desc { font: 400 25px/30px var(--sans); max-width: 953px; color: #ffffffee; }
.feature.is-swap .feature__body { opacity: 0 !important; transform: translateY(16px) !important; }
.feature.is-swap .feature__media { opacity: 0; }
.feature__count { position: absolute; left: 53px; bottom: 52px; font: 400 18px var(--mono); color: #ffffff99; letter-spacing: .06em; }
.glass {
  position: absolute; left: 779px; top: 499px; width: 227px; height: 69px; border-radius: 34.5px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font: 500 24px var(--sans); color: #fff;
  background: rgba(45,45,45,.2);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 -7.3px 9.8px #ffffff40;
  transition: transform .45s var(--spring), background .3s;
}
.feature.is-open .glass:hover { transform: scale(1.05); background: rgba(45,45,45,.35); }
.feature.is-open .glass:active { transform: scale(.96); }
.glass svg { width: 22px; }

/* side stack (left edge): scroll or hover to browse, click to play */
.rolodex { position: absolute; left: 0; top: var(--rolo-top, 0px); width: 330px; height: 1080px; z-index: 5; }
.rcard {
  position: absolute; left: 0; top: 0; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 7px;
  background: linear-gradient(165deg, #d9d9d9 4%, #737373 126%);
  --glide: cubic-bezier(.22,1,.36,1);
  transition: box-shadow .5s, border-radius .5s var(--glide);  /* position/size are driven per-frame by app.js */
  will-change: transform;
}
.rcard.is-focus { border-radius: 14px; box-shadow: -11.7px 3.5px 26px -1px #00000040; }
.rcard__img { position: absolute; inset: 0; background: center/cover; filter: grayscale(1) contrast(.9) brightness(1.08); opacity: .55; transition: opacity .45s, filter .45s, transform .6s var(--ease); }
.rcard.is-focus .rcard__img { opacity: 1; filter: none; }
.rcard:hover .rcard__img { transform: scale(1.04); opacity: .85; }
.rcard__img { transition: opacity .45s, filter .45s, transform .9s cubic-bezier(.22,1,.36,1); }
.rcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 45%, #0000008c); opacity: 0; transition: opacity .35s; pointer-events: none; }
.rcard.is-focus:hover::after, .rcard.is-focus:focus-visible::after { opacity: 1; }
.rcard__title { position: absolute; left: 22px; right: 16px; bottom: 14px; z-index: 1; text-align: left; font: 400 26px/1 var(--pixel); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard.is-focus:hover .rcard__title, .rcard.is-focus:focus-visible .rcard__title { opacity: 1; transform: none; }
.rcard__now { position: absolute; right: 12px; top: 12px; z-index: 1; padding: 5px 10px; border-radius: 99px; font: 500 13px/1 var(--sans); color: #fff; background: #2d2d2dcc; opacity: 0; transition: opacity .3s; }
.rcard.is-now.is-focus .rcard__now { opacity: 1; }
.rcard:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }

/* work / exp switch */
.mode { position: absolute; left: 1690px; top: 470px; width: 140px; height: 150px; }
.mode__label { position: absolute; right: 52px; font: 400 19.4px var(--sans); color: var(--label); transition: color .3s; }
.mode__label[data-mode="work"] { top: 4px; }
.mode__label[data-mode="exp"] { top: 122px; }
.mode__label.is-active, .mode__label:hover { color: var(--ink); }
.mode__rail { position: absolute; left: 120px; top: 16px; width: 2px; height: 119px; background: var(--ink); cursor: pointer; }
.mode__rail::before { content: ""; position: absolute; inset: -10px -16px; }
.mode__knob { position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ink); transition: top .6s var(--spring); }
.mode.is-exp .mode__knob { top: 100%; }

/* ─── Intro ───────────────────────────────────────────────── */
.intro { position: absolute; inset: 0; z-index: 50; background: #efefef; transition: background-color .8s var(--ease); }
.intro__avatar { position: absolute; left: 535px; top: calc(var(--ipad, 0px) + 387px); width: 305px; height: 305px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: left 1s cubic-bezier(.7,0,.2,1), top 1s cubic-bezier(.7,0,.2,1), width 1s cubic-bezier(.7,0,.2,1), height 1s cubic-bezier(.7,0,.2,1); }
.intro__hi { position: absolute; left: 911px; top: calc(var(--ipad, 0px) + 447.4px); font: 400 57.6px/62px var(--pixel); }
.intro__name { position: absolute; left: 911px; top: calc(var(--ipad, 0px) + 508.8px); font: 400 122.8px/132px var(--pixel); white-space: nowrap; }
.intro__hi, .intro__name { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.intro__name { animation-delay: .25s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.wave { display: inline-block; transform-origin: 70% 80%; animation: wave 1.3s ease-in-out .5s 2; }
@keyframes wave { 0%, 100% { rotate: 0deg } 20% { rotate: 18deg } 40% { rotate: -8deg } 60% { rotate: 14deg } 80% { rotate: -4deg } }
.intro.is-leaving { background-color: #efefef00; }
.intro.is-leaving .intro__hi, .intro.is-leaving .intro__name { animation: out .35s var(--ease) forwards; }
@keyframes out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
.intro.is-leaving .intro__avatar { left: 90px; top: calc(var(--ipad, 0px) + 40px); width: 150px; height: 150px; }

/* ─── Modal ───────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; background: #000000eb; display: grid; place-items: center; animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.modal[hidden] { display: none; }
.modal__frame { width: min(92vw, calc(88vh * 16 / 9)); aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #111; display: grid; place-items: center; color: #999; font-family: var(--mono); }
.modal__frame iframe { width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: 22px; right: 26px; color: #fff; font-size: 26px; width: 48px; height: 48px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─── Player interactions ─────────────────────────────── */
.player { transition: transform .5s var(--spring), box-shadow .4s; outline: none; }
.player:hover { transform: translateY(-3px); box-shadow: inset 0 1.5px 0 #ffffffa0, inset 0 -2px 6px #0000000d, 0 16px 28px -16px #0000004d; }
.player:focus-visible, .pbtn:focus-visible, .vol:focus-visible, .speaker:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
.platter { cursor: grab; touch-action: none; transition: transform .45s var(--spring); }
.platter:hover { transform: scale(1.015); }
.player.is-scratch .platter { cursor: grabbing; transform: scale(.99); }
.label { background-size: cover; background-position: center; will-change: transform; }
.label::before { content: ""; position: absolute; left: 50%; top: 10%; width: 3px; height: 16%; margin-left: -1.5px; border-radius: 2px; background: #ffffff8c; }
.player.is-swap .label { animation: swap .5s var(--spring); }
@keyframes swap { 0% { scale: 1 } 40% { scale: .82 } 100% { scale: 1 } }
.player__sub.is-in-r { animation: in-r .45s var(--ease); }
.player__sub.is-in-l { animation: in-l .45s var(--ease); }
@keyframes in-r { from { opacity: 0; transform: translateX(14px); } }
@keyframes in-l { from { opacity: 0; transform: translateX(-14px); } }
.player.is-playing .pbtn--play { color: #333; }
.vol { transition: width .2s var(--ease), margin .2s var(--ease); }
.vol:hover, .vol.is-drag { width: 10px; margin-left: -1px; }


/* ═══════════════════════════════════════════════════════════
   Finish pass — same layout, refined surfaces
   ═══════════════════════════════════════════════════════════ */

/* page: faint paper grain so the flat grey feels tactile */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* header */
.avatar { box-shadow: 0 0 0 5px #f1efef, 0 0 0 6px #0000000d, 0 14px 26px -14px #00000073; }
.social { box-shadow: inset 0 1px 0 #ffffff38, inset 0 -2px 0 #00000026, 0 10px 18px -10px #00000066; }
.rule { border-top-color: #1d1c1cbf; }

/* nav pill */
.nav { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #0000000d, 0 18px 34px -18px #00000047, 0 2px 4px #0000000a; }
.nav__bg { background: linear-gradient(180deg, #3a3a3a, #232323); box-shadow: inset 0 1px 0 #ffffff26, 0 6px 14px -6px #00000080; }

/* music player */
.player {
  background: linear-gradient(165deg, #e7e5e5 0%, #d9d7d7 55%, #d1cfcf 100%);
  box-shadow: inset 0 1.5px 0 #ffffffcc, inset 0 -2px 0 #0000000d, 0 0 0 1px #0000000a, 0 24px 40px -24px #00000059;
}
.player__title { color: #1d1c1c; letter-spacing: -.01em; }
.player__sub { color: #8f8c8c; }
.pbtn { border-radius: 50%; color: #7a7777; }
.pbtn:hover { color: #2d2d2d; background: #00000009; }
.pbtn svg path, .pbtn svg rect { stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.platter {
  background:
    radial-gradient(circle, #0000 0 40%, #00000014 40.5% 41.5%, #0000 42%),
    repeating-radial-gradient(circle, #8c8c8c 0 .7px, #969696 .7px 2px);
  box-shadow: inset 0 0 0 4px #a7a7a7, inset 0 0 0 5px #7c7c7c40, inset 0 2px 1px #ffffff4d, 0 14px 22px -10px #00000070;
}
.platter::before { background: conic-gradient(from 20deg, #fff0, #ffffff40 7%, #fff0 18%, #fff0 50%, #ffffff33 57%, #fff0 68%); }
.label { box-shadow: 0 0 0 3px #6f6f6f, 0 0 0 4px #ffffff2e, inset 0 0 12px #0000004d; }
.label::after { inset: 45%; background: radial-gradient(circle at 40% 35%, #f2f2f2, #bdbdbd); box-shadow: 0 1px 2px #0006; }
.pivot {
  border-radius: 10px;
  background: linear-gradient(160deg, #a2a2a2, #7b7b7b);
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 -2px 0 #0000001f, 0 6px 12px -6px #00000080;
}
.pivot::after {
  content: ""; position: absolute; left: 50%; top: 22px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e9e9e9, #8d8d8d 60%, #5e5e5e);
  box-shadow: 0 2px 4px #00000059;
}
.tonearm i { background: linear-gradient(180deg, #4a4a4a, #1f1f1f); height: 5px; top: .5px; box-shadow: 0 2px 3px #00000040; }
.tonearm b { background: radial-gradient(circle at 35% 30%, #5a5a5a, #1c1c1c); box-shadow: 0 2px 4px #00000059; }
.vol { background: #c9c5c5; box-shadow: inset 0 1px 2px #00000026, 0 1px 0 #ffffff99; }
.vol__fill { background: linear-gradient(180deg, #7c7a7a, #555); }
.speaker { color: #8f8c8c; }

/* tags */
.tag {
  background: linear-gradient(180deg, #f1efef 0%, #e2e0e0 100%);
  box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #0000000d, 0 1px 2px #00000014, 0 6px 12px -8px #00000026;
  color: #5e5b5b; font-size: 15.5px; letter-spacing: -.005em;
}
.tag__icon {
  background: linear-gradient(160deg, #a9a7a7, #878585);
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 -1px 0 #0000001f, 0 2px 5px #0000002e;
}
.tag__icon svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tag:hover, .tag.is-hot { background: linear-gradient(180deg, #3a3a3a, #232323); box-shadow: inset 0 1px 0 #ffffff26, 0 10px 18px -10px #00000080; }
.tag:hover .tag__icon, .tag.is-hot .tag__icon { background: linear-gradient(160deg, #fff, #e6e4e4); }
.tag:hover .tag__icon svg, .tag.is-hot .tag__icon svg { stroke: #2d2d2d; }
.tag-tip { background: linear-gradient(180deg, #333, #242424); box-shadow: inset 0 1px 0 #ffffff1f, 0 18px 34px -14px #00000099; }

/* story + work cards: a hairline of light on the edge */
.story, .feature { outline: 1px solid #ffffff14; outline-offset: -1px; }

/* ═══════════════════════════════════════════════════════════
   LOOKS — full visual design on the fixed Figma layout.
   Set on <html data-look="signal | night | tomato">.
   Every colour below comes from these tokens.
   ═══════════════════════════════════════════════════════════ */
:root, :root[data-look="signal"] {
  --bg: #e4e6eb; --bg-glow: #f5f6f9; --bg-glow-2: #d9dde6;
  --ink: #101218; --ink-soft: #8b909c; --line: #10121826;
  --accent: #2f45ff; --accent-2: #5b6cff; --accent-ink: #ffffff; --accent-glow: #2f45ff59;
  --hot: #ff4d3d;
  --surface: #f6f7fa; --surface-2: #e3e6ec; --surface-hi: #ffffff; --surface-ink: #1a1d25; --surface-dim: #8c919d;
  --pill: #fbfbfd; --pill-2: #e9ebf0; --pill-ink: #3a3e49;
  --knob: #c9cdd6; --knob-2: #aeb3bf;
  --vinyl: #22242a; --vinyl-groove: #2c2f36; --vinyl-rim: #3a3d45; --metal: #d6d9df; --metal-2: #8f949e;
  --nav: #ffffff; --nav-ink: #3a3e49;
  --shadow: 16 18 24;   /* rgb of shadows */
  --grain: .045;
  color-scheme: light;
}
:root[data-look="night"] {
  --bg: #0d0e10; --bg-glow: #1d1f24; --bg-glow-2: #15120c;
  --ink: #f1eee8; --ink-soft: #7c7a76; --line: #f1eee826;
  --accent: #ffb547; --accent-2: #ffd08a; --accent-ink: #1b1204; --accent-glow: #ffb54759;
  --hot: #ff6a3d;
  --surface: #1d1e22; --surface-2: #141518; --surface-hi: #ffffff1f; --surface-ink: #f1eee8; --surface-dim: #7c7a76;
  --pill: #202226; --pill-2: #17181b; --pill-ink: #d8d4cc;
  --knob: #34363c; --knob-2: #26282c;
  --vinyl: #0b0b0c; --vinyl-groove: #18181a; --vinyl-rim: #2a2a2d; --metal: #c9c6bf; --metal-2: #6d6a64;
  --nav: #1a1b1f; --nav-ink: #cfcbc3;
  --shadow: 0 0 0;
  --grain: .07;
  color-scheme: dark;
}
:root[data-look="tomato"] {
  --bg: #dde3db; --bg-glow: #eef2ec; --bg-glow-2: #cfd8cd;
  --ink: #142019; --ink-soft: #7e897f; --line: #14201926;
  --accent: #ff5a36; --accent-2: #ff8a6b; --accent-ink: #ffffff; --accent-glow: #ff5a3659;
  --hot: #ff5a36;
  --surface: #f3f6f1; --surface-2: #dbe2d8; --surface-hi: #ffffff; --surface-ink: #142019; --surface-dim: #7e897f;
  --pill: #fafcf9; --pill-2: #e6ece3; --pill-ink: #2c3a30;
  --knob: #c3cdbf; --knob-2: #a8b4a3;
  --vinyl: #1d211e; --vinyl-groove: #282d29; --vinyl-rim: #353b36; --metal: #d4dad1; --metal-2: #8a9486;
  --nav: #fafcf9; --nav-ink: #2c3a30;
  --shadow: 20 32 25;
  --grain: .05;
  color-scheme: light;
}

html, body { background: var(--bg); color: var(--ink); transition: background-color .5s var(--ease), color .5s var(--ease); }
body::before {             /* soft light pooling, like a lit studio wall */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 55% at 18% 8%, var(--bg-glow) 0%, transparent 70%),
    radial-gradient(50% 50% at 92% 95%, var(--bg-glow-2) 0%, transparent 70%);
}
.viewport { z-index: 1; }
body::after { opacity: var(--grain); }
:root[data-look="night"] body::after { mix-blend-mode: screen; filter: invert(1); }

/* intro */
.intro { background: var(--bg); }
.intro__hi, .intro__name { color: var(--ink); }
.intro__name span { color: var(--accent); }

/* header */
.id__name { color: var(--ink-soft); }
.id__title { color: var(--ink); }
.avatar { box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--line), 0 18px 30px -16px rgb(var(--shadow) / .55); }
.rule { border-top-color: var(--line); }
.social { background: var(--ink) !important; color: var(--bg); box-shadow: inset 0 1px 0 #ffffff26, 0 12px 22px -12px rgb(var(--shadow) / .6); }
.social svg { fill: var(--bg); }
.view.is-settled .social.is-zone-on { background: var(--accent) !important; box-shadow: 0 16px 26px -10px var(--accent-glow); }
.view.is-settled .social.is-zone-on svg { fill: var(--accent-ink); }

/* bio: accent on the key phrases */
.bio { color: var(--ink-soft); }
.bio b { color: var(--ink); background: linear-gradient(transparent 62%, var(--accent-glow) 62%, var(--accent-glow) 88%, transparent 88%); background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .6s var(--ease); }
.view.is-settled .bio.is-zone-on b { background-size: 100% 100%; }

/* music player */
.player {
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: inset 0 1.5px 0 var(--surface-hi), inset 0 -2px 0 rgb(var(--shadow) / .06), 0 0 0 1px var(--line), 0 30px 50px -28px rgb(var(--shadow) / .6);
}
.player__title { color: var(--surface-ink); }
.player__sub { color: var(--surface-dim); }
.pbtn { color: var(--surface-dim); }
.pbtn:hover { color: var(--surface-ink); background: var(--line); }
.pbtn--play { background: var(--accent); color: var(--accent-ink) !important; box-shadow: 0 8px 16px -6px var(--accent-glow), inset 0 1px 0 #ffffff40; }
.pbtn--play:hover { background: var(--accent-2); }
.platter {
  background:
    radial-gradient(circle, #0000 0 40%, #ffffff0a 40.5% 41.5%, #0000 42%),
    repeating-radial-gradient(circle, var(--vinyl) 0 .8px, var(--vinyl-groove) .8px 2.2px);
  box-shadow: inset 0 0 0 4px var(--vinyl-rim), inset 0 2px 1px #ffffff1f, 0 16px 26px -12px rgb(var(--shadow) / .7);
}
.platter::before { background: conic-gradient(from 20deg, #fff0, #ffffff2e 7%, #fff0 18%, #fff0 50%, #ffffff24 57%, #fff0 68%); }
.label:not([style*="url"]) { background: radial-gradient(circle at 38% 32%, var(--accent-2), var(--accent) 55%, color-mix(in srgb, var(--accent) 55%, #000)); }
.label { box-shadow: 0 0 0 3px var(--vinyl-rim), 0 0 0 4px #ffffff14, inset 0 0 14px #00000040; }
.label::before { background: #ffffffa6; }
.pivot { background: linear-gradient(160deg, var(--metal), var(--metal-2)); box-shadow: inset 0 1px 0 #ffffff66, 0 8px 14px -6px rgb(var(--shadow) / .6); }
.pivot::after { background: radial-gradient(circle at 35% 30%, #fff, var(--metal) 45%, var(--metal-2)); }
.tonearm i { background: linear-gradient(180deg, var(--metal), var(--metal-2)); }
.tonearm b { background: radial-gradient(circle at 35% 30%, var(--metal), var(--metal-2)); }
.vol { background: var(--surface-2); box-shadow: inset 0 1px 2px rgb(var(--shadow) / .25), 0 1px 0 var(--surface-hi); }
.vol__fill { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.vol__knob { background: var(--surface); box-shadow: 0 2px 6px rgb(var(--shadow) / .35), 0 0 0 3px var(--accent); }
.speaker, .player.is-muted .speaker { color: var(--surface-dim); }
.speaker:hover { color: var(--accent); }
.player.is-playing .platter { box-shadow: inset 0 0 0 4px var(--vinyl-rim), inset 0 2px 1px #ffffff1f, 0 16px 26px -12px rgb(var(--shadow) / .7), 0 0 0 6px var(--accent-glow); transition: box-shadow .6s var(--ease); }

/* tags */
.tag {
  background: linear-gradient(180deg, var(--pill) 0%, var(--pill-2) 100%);
  box-shadow: inset 0 1px 0 var(--surface-hi), 0 0 0 1px var(--line), 0 8px 14px -10px rgb(var(--shadow) / .45);
  color: var(--pill-ink);
}
.tag__icon { background: linear-gradient(160deg, var(--knob), var(--knob-2)); box-shadow: inset 0 1px 0 #ffffff4d, 0 2px 5px rgb(var(--shadow) / .25); }
.tag__icon svg { stroke: var(--pill-ink); }
.tag:hover, .tag.is-hot { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 22px -10px var(--accent-glow); }
.tag:hover .tag__icon, .tag.is-hot .tag__icon { background: var(--accent-ink); }
.tag:hover .tag__icon svg, .tag.is-hot .tag__icon svg { stroke: var(--accent); }
.tag-tip { background: var(--ink); color: var(--bg); box-shadow: 0 18px 34px -14px rgb(var(--shadow) / .6); }
.tag-tip b { color: var(--accent); }
.tag-tip span { color: color-mix(in srgb, var(--bg) 80%, transparent); }
.toggles-label {
  position: absolute; left: 565px; top: 578px; font: 500 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px;
}
.toggles-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }

/* story + work cards */
.story { box-shadow: 0 0 0 1px var(--line), 0 11px 9px rgb(var(--shadow) / .25), 0 40px 60px -30px rgb(var(--shadow) / .5); }
.story__text u { text-decoration-color: var(--accent); }

/* nav */
.nav { background: var(--nav); color: var(--nav-ink); box-shadow: inset 0 1px 0 var(--surface-hi), 0 0 0 1px var(--line), 0 22px 40px -20px rgb(var(--shadow) / .5); }
.nav__bg { background: var(--ink); box-shadow: 0 8px 16px -8px rgb(var(--shadow) / .6); }
.nav a.is-active { color: var(--bg); }
.nav a:not(.is-active):hover { color: var(--accent); }
.nav a[data-nav="resume"] svg { color: var(--accent); }

/* work page */
.mode__label { color: var(--ink-soft); }
.mode__label.is-active, .mode__label:hover { color: var(--ink); }
.mode__rail { background: var(--line); }
.mode__knob { background: var(--accent); box-shadow: 0 0 0 6px var(--accent-glow); }
.rcard { background: linear-gradient(165deg, var(--pill), var(--knob-2)); }
.rcard__now { background: var(--accent); color: var(--accent-ink); }
.feature { box-shadow: 0 0 0 1px var(--line), 0 10px 6.5px rgb(var(--shadow) / .25), 0 40px 70px -30px rgb(var(--shadow) / .55); }
.glass:hover { background: var(--accent) !important; color: var(--accent-ink); }

/* look switcher (preview helper) */
.looks { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; gap: 4px; padding: 4px; border-radius: 99px;
  background: var(--nav); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -12px rgb(var(--shadow) / .5); font: 500 13px/1 var(--mono); }
.looks button { padding: 9px 14px; border-radius: 99px; color: var(--nav-ink); display: flex; align-items: center; gap: 8px; }
.looks button i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px #8888, inset 0 0 0 2px #ffb547; }
.looks button.is-on { background: var(--ink); color: var(--bg); }
.looks button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Light companions for Night (same amber identity) ───── */
:root { --nav-active: var(--ink); --nav-active-ink: var(--bg); }
.nav__bg { background: var(--nav-active); }
.nav a.is-active { color: var(--nav-active-ink); }

/* Day · Stone — warm pale stone, graphite ink, amber */
:root[data-look="stone"] {
  --bg: #e7e4de; --bg-glow: #f5f3ef; --bg-glow-2: #dcd5c9;
  --ink: #17150f; --ink-soft: #8a857b; --line: #17150f24;
  --accent: #f0a02a; --accent-2: #ffc15e; --accent-ink: #1b1204; --accent-glow: #f0a02a59;
  --surface: #f7f5f1; --surface-2: #e3dfd7; --surface-hi: #ffffff; --surface-ink: #17150f; --surface-dim: #8a857b;
  --pill: #fbfaf7; --pill-2: #ebe7e0; --pill-ink: #3a362e;
  --knob: #d6d0c5; --knob-2: #bbb4a7;
  --vinyl: #121213; --vinyl-groove: #1e1e20; --vinyl-rim: #2c2c2f; --metal: #dcd8d0; --metal-2: #8e897f;
  --nav: #fbfaf7; --nav-ink: #3a362e;
  --shadow: 45 34 14; --grain: .05; color-scheme: light;
}
/* Day · Studio — bright wall, but the objects stay dark like Night (graphite player, pills, nav) */
:root[data-look="studio"] {
  --bg: #f1f0ec; --bg-glow: #ffffff; --bg-glow-2: #e4e1da;
  --ink: #121212; --ink-soft: #8d8a84; --line: #12121224;
  --accent: #ffb547; --accent-2: #ffd08a; --accent-ink: #1b1204; --accent-glow: #ffb5476b;
  --surface: #202125; --surface-2: #151619; --surface-hi: #ffffff1f; --surface-ink: #f1eee8; --surface-dim: #85827c;
  --pill: #222327; --pill-2: #18191c; --pill-ink: #e6e2da;
  --knob: #36383e; --knob-2: #27292d;
  --vinyl: #0b0b0c; --vinyl-groove: #18181a; --vinyl-rim: #2a2a2d; --metal: #cfccc5; --metal-2: #6d6a64;
  --nav: #1b1c20; --nav-ink: #cfcbc3; --nav-active: var(--accent); --nav-active-ink: var(--accent-ink);
  --shadow: 20 18 14; --grain: .045; color-scheme: light;
}
/* Day · Fog — cool pale grey, amber stays the only colour */
:root[data-look="fog"] {
  --bg: #e5e6e8; --bg-glow: #f6f7f8; --bg-glow-2: #d8dade;
  --ink: #121316; --ink-soft: #8a8d93; --line: #12131624;
  --accent: #f2a33a; --accent-2: #ffc877; --accent-ink: #1b1204; --accent-glow: #f2a33a59;
  --surface: #f7f8f9; --surface-2: #e0e2e6; --surface-hi: #ffffff; --surface-ink: #121316; --surface-dim: #8a8d93;
  --pill: #fbfbfc; --pill-2: #e8eaed; --pill-ink: #34373d;
  --knob: #cfd2d8; --knob-2: #b3b7bf;
  --vinyl: #111214; --vinyl-groove: #1c1d20; --vinyl-rim: #2b2c30; --metal: #d8dadf; --metal-2: #8b8f97;
  --nav: #fbfbfc; --nav-ink: #34373d;
  --shadow: 18 20 26; --grain: .045; color-scheme: light;
}
:root[data-look="studio"] .tag-tip { background: #1b1c20; color: #f1eee8; }
:root[data-look="studio"] .tag-tip span { color: #f1eee8cc; }

/* ─── Light / dark toggle ─────────────────────────────────── */
.mode-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 300; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--nav-ink); background: var(--nav);
  box-shadow: inset 0 1px 0 var(--surface-hi), 0 0 0 1px var(--line), 0 14px 30px -14px rgb(var(--shadow) / .6);
  transition: transform .45s var(--spring), color .3s, background .5s var(--ease);
}
.mode-toggle:hover { transform: rotate(-18deg) scale(1.08); color: var(--accent); }
.mode-toggle:active { transform: scale(.92); }
.mode-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-toggle svg { position: absolute; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s, transform .5s var(--spring); }
:root[data-mode="dark"] .mode-toggle .i-moon, :root:not([data-mode="dark"]) .mode-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }


/* ═══ Work ↔ Exp — two stacked panes; scrolling down slides Work up and Exp in from below ═══ */
.pane { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(.7,0,.2,1), opacity .9s var(--ease), filter .9s var(--ease); }
.pane--exp { transform: translateY(100%); opacity: 0; filter: blur(8px); pointer-events: none; }
.work.is-exp .pane--work { transform: translateY(-100%); opacity: 0; filter: blur(8px); pointer-events: none; }
.work.is-exp .pane--exp { transform: none; opacity: 1; filter: none; pointer-events: auto; }

.exp__head, .exp__tools-head { position: absolute; left: 140px; margin: 0; font: 400 60px/1 var(--pixel); color: var(--ink); letter-spacing: .01em; }
.exp__head { top: 107px; }
.exp__tools-head { top: 735px; }
.rule.exp__rule { left: 140px; width: 1541px; transition: transform 1.1s var(--ease) .45s; }
.exp__rule--a { top: 198px; }
.exp__rule--b { top: 659px; }
.work:not(.is-exp) .exp__rule { transform: scaleX(0); transition-delay: 0s; }

.exp__row { position: absolute; left: 140px; width: 1541px; }
.exp__row::before { content: ""; position: absolute; left: -26px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-glow); transform: scale(0); transition: transform .45s var(--spring); }
.exp__in { transition: transform .45s var(--spring); transform-origin: 0 50%; }
.exp__row:hover .exp__in { transform: translateX(8px) scale(1.012); }
.exp__row:hover::before { transform: scale(1); }
.exp__title { margin: 0; font: 400 28px/34px var(--sans); color: var(--ink); }
.exp__title b { font-weight: 600; }
.exp__period { margin-left: 16px; font: 400 16px var(--mono); color: var(--ink-soft); letter-spacing: .04em; }
.exp__desc { margin: 10px 0 0; font: 400 17px/22px var(--sans); color: var(--ink-soft); transition: color .3s; }
.exp__row:hover .exp__desc { color: var(--ink); }

.tools { position: absolute; left: 471px; top: 721px; display: flex; gap: 42px; margin: 0; padding: 0; list-style: none; }
.tool {
  position: relative; width: 92px; height: 92px; border-radius: 16px; display: grid; place-items: center; cursor: default; outline: none;
  background: linear-gradient(165deg, var(--pill), var(--knob-2)); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--surface-hi), 0 0 0 1px var(--line), 0 16px 26px -16px rgb(var(--shadow) / .6);
  transition: transform .45s var(--spring), background .3s, color .3s, box-shadow .3s;
}
.tool__mono { font: 400 36px/1 var(--pixel); }
.tool img { width: 58%; height: 58%; object-fit: contain; }
.tool__name { position: absolute; left: 50%; top: calc(100% + 14px); transform: translate(-50%, 6px); white-space: nowrap; font: 500 15px/1 var(--sans); color: var(--ink); opacity: 0; transition: opacity .3s, transform .45s var(--spring); pointer-events: none; }
.tool:hover, .tool:focus-visible { transform: translateY(-6px) scale(1.08) rotate(-4deg); background: var(--accent); color: var(--accent-ink); box-shadow: 0 16px 26px -10px var(--accent-glow); }
.tool:hover .tool__name, .tool:focus-visible .tool__name { opacity: 1; transform: translate(-50%, 0); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* arrival: blocks rise in one after another once Exp slides up */
@keyframes exp-rise { from { opacity: 0; transform: translateY(34px); filter: blur(6px); } }
@keyframes tool-pop { from { opacity: 0; transform: translateY(24px) scale(.86); } }
.work.is-exp .pane--exp .anim { animation: exp-rise .85s var(--ease) var(--d, 0s) backwards; }
.work.is-exp .tool { animation: tool-pop .7s var(--spring) var(--t, 0s) backwards; }
@media (prefers-reduced-motion: reduce) {
  .pane { transition: opacity .3s; transform: none !important; filter: none !important; }
  .work.is-exp .pane--exp .anim, .work.is-exp .tool { animation: none; }
}

/* rolodex: a clicked card lifts as it glides to the front */
.rcard.is-picked .rcard__img { animation: rcard-pick .9s cubic-bezier(.22,1,.36,1); }
@keyframes rcard-pick { 0% { transform: scale(1); } 35% { transform: scale(1.09); filter: brightness(1.15); } 100% { transform: scale(1); } }

/* rolodex rests compact, pulled left and slightly out of focus. Hovering opens it card by card
   (follow-through): the centre card leads, each neighbour follows ~55ms later; closing runs outside-in.
   Each card scales about the same point (the column's left-centre), so together they read as one stack. */
#rolodex .rcard {
  transform-origin: 0 540px;
  scale: .7; translate: -26px 0; filter: blur(1.6px) saturate(.8);
  transition: scale .75s cubic-bezier(.22,1,.36,1), translate .75s cubic-bezier(.22,1,.36,1),
              filter .6s cubic-bezier(.4,0,.2,1), box-shadow .5s, border-radius .5s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--cd, 0ms) + 60ms), calc(var(--cd, 0ms) + 60ms), calc(var(--cd, 0ms) + 60ms), 0s, 0s;
}
#rolodex:hover .rcard, #rolodex:has(:focus-visible) .rcard {
  scale: 1; translate: 0 0; filter: blur(0) saturate(1);
  transition-delay: var(--od, 0ms), var(--od, 0ms), var(--od, 0ms), 0s, 0s;
}
@media (hover: none) { #rolodex .rcard { scale: 1; translate: 0 0; filter: none; } }
#rolodex { pointer-events: none; }            /* only the cards themselves open the stack, not the empty column */
#rolodex .rcard { pointer-events: auto; }

/* stack cards — solid, no see-through. Same surface language as the rest of the site:
   hairline ring, soft theme shadow, rounded like the player and tool tiles. Cards behind the front one
   sit in muted greyscale (solid, just darker/lighter per mode) and warm up on hover. */
.rcard { border-radius: 12px; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line), 0 12px 22px -14px rgb(var(--shadow) / .55); }
.rcard.is-focus { border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 22px 40px -16px rgb(var(--shadow) / .7); }
.rcard__img, .rcard:hover .rcard__img { opacity: 1; }
.rcard__img { filter: grayscale(1) brightness(.93) contrast(.94); }
:root[data-mode="dark"] .rcard__img { filter: grayscale(1) brightness(.6) contrast(1.05); }
.rcard:not(.is-focus):hover .rcard__img { filter: grayscale(.35) brightness(.98); }
:root[data-mode="dark"] .rcard:not(.is-focus):hover .rcard__img { filter: grayscale(.35) brightness(.82); }
.rcard.is-focus .rcard__img { filter: none; }
.rcard::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 var(--surface-hi); }

/* depth of field: cards soften the further they sit behind the front card (blur set per card by app.js),
   so the stack reads as layered depth without any overlay — the front card is always sharp */
.rcard__img { filter: grayscale(1) brightness(.93) contrast(.94) blur(var(--dof, 0px)); }
:root[data-mode="dark"] .rcard__img { filter: grayscale(1) brightness(.6) contrast(1.05) blur(var(--dof, 0px)); }
.rcard:not(.is-focus):hover .rcard__img { filter: grayscale(.35) brightness(.98) blur(var(--dof, 0px)); }
:root[data-mode="dark"] .rcard:not(.is-focus):hover .rcard__img { filter: grayscale(.35) brightness(.82) blur(var(--dof, 0px)); }
.rcard__img { transition: opacity .45s, filter .35s ease-out, transform .9s cubic-bezier(.22,1,.36,1); }
.rcard__img { inset: -6px; }                  /* bleed so blurred edges never show the card background */
.rcard.is-focus .rcard__img, :root[data-mode="dark"] .rcard.is-focus .rcard__img { filter: none; }

/* ambient backdrop on Work: a heavily blurred wash of the current project's frame glows softly behind
   the feature card and cross-fades when the project changes — fills the empty space without adding UI */
.work-amb { position: absolute; left: 180px; top: -40px; width: 1640px; height: 1160px; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(52% 50% at 50% 48%, #000 0%, #000a 50%, transparent 100%);
          mask-image: radial-gradient(52% 50% at 50% 48%, #000 0%, #000a 50%, transparent 100%); }
.work-amb i { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0;
  filter: blur(70px) saturate(1.7) brightness(1.1); transform: scale(1.1); transition: opacity 1.1s cubic-bezier(.4,0,.2,1); }
.work-amb i.is-on { opacity: .5; }
:root[data-mode="dark"] .work-amb i.is-on { opacity: .5; }
#rolodex, .feature, #mode { z-index: 5; }
:root:not([data-mode="dark"]) .work-amb i { filter: blur(70px) saturate(1.9) brightness(1.55); }  /* light: a colour tint, never a grey smudge */

.work-amb { display: none; }
.viewport { position: relative; z-index: 1; }

/* ═══ Home v2 (Figma 195:465): bold bio · playlist wheel · experience tiles · smaller story ═══ */
.bio { left: 94px; top: 340px; width: 1160px; font: 600 32px/39px var(--sans); letter-spacing: -.01em; color: var(--ink); text-transform: capitalize; }
.bio b { color: inherit; font-weight: inherit; }
.player, .toggles, .toggles-label, .tag-tip { display: none; }
.story { top: 287px; scale: .94; transform-origin: 100% 0; }

/* section heads: label + hairline that fades out */
.plhead, .xphead { position: absolute; top: 590px; height: 28px; display: flex; align-items: center; gap: 12px; font: 400 20px/1 var(--sans); color: var(--ink); }
.plhead { left: 94px; width: 402px; }
.xphead { left: 583px; width: 653px; gap: 18px; }
.plhead__line, .xphead i { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 45%, transparent), color-mix(in srgb, var(--ink) 10%, transparent)); }
.plhead__link { color: inherit; text-decoration: none; transition: color .25s; }
.plhead__link[href]:hover { color: var(--accent); }
.plhead__play { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink); transition: transform .35s var(--spring), color .2s; }
.plhead__play:hover { transform: scale(1.18); color: var(--accent); }
.plhead__play svg { width: 17px; height: 17px; fill: currentColor; }
.plhead__play .i-stop, .plhead.is-playing .plhead__play .i-play { display: none; }
.plhead.is-playing .plhead__play .i-stop { display: block; }

/* playlist wheel */
.plist { position: absolute; left: 94px; top: 674px; width: 387px; height: 186px; border-radius: 22px; overflow: hidden; outline: none; cursor: ns-resize; touch-action: none;
  background: linear-gradient(180deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface) 85%, #fff) 50%, var(--surface-2) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
:root[data-mode="dark"] .plist { background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); }
.plist::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 94px; margin-top: -47px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, #fff 45%, transparent) 50%, transparent); opacity: .7; }
:root[data-mode="dark"] .plist::after { background: linear-gradient(180deg, transparent, #ffffff0d 50%, transparent); }
.plist:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.plist__wheel { position: absolute; left: 0; right: 0; top: 46px; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.plrow { height: 94px; display: flex; align-items: center; gap: 18px; padding: 0 64px 0 27px; cursor: pointer;
  opacity: calc(1 - var(--d, 2) * .42); transform: scale(calc(1 - var(--d, 2) * .06)); transform-origin: 0 50%; filter: blur(calc(var(--d, 2) * .6px));
  transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1), filter .5s; }
.plrow__art { flex: none; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fb8ff, #3b3f8f 55%, #151a3a) center/cover;
  box-shadow: 0 6px 14px -6px #0008, inset 0 0 0 1px #ffffff2e; }
.plist.is-playing .plrow.is-cur .plrow__art { animation: plspin 6s linear infinite; }
@keyframes plspin { to { rotate: 360deg; } }
.plrow__txt { display: grid; gap: 4px; min-width: 0; }
.plrow__txt b { font: 500 30px/1.05 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plrow__txt small { font: 400 20px/1.1 var(--sans); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist__arr { position: absolute; right: 22px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-soft); z-index: 2; transition: color .2s, transform .35s var(--spring); }
.plist__arr svg { width: 14px; height: 14px; fill: currentColor; }
.plist__arr--up { top: 44px; } .plist__arr--dn { bottom: 44px; }
.plist__arr:hover { color: var(--accent); transform: scale(1.25); }

/* experience tiles */
.xp { position: absolute; left: 583px; top: 646px; width: 640px; height: 228px; }
.xpt { position: absolute; top: 0; width: 188px; height: 228px; border-radius: 42px; overflow: hidden; text-align: left; isolation: isolate;
  background: center/cover no-repeat; box-shadow: 0 0 0 1px var(--line), 0 16px 28px -16px rgb(var(--shadow) / .6);
  transition: transform .45s var(--spring), box-shadow .35s; }
.xpt:nth-child(1) { left: 0; } .xpt:nth-child(2) { left: 234px; } .xpt:nth-child(3) { left: 441px; }
.xpt--small { top: 29px; width: 153px; height: 173px; border-radius: 50px; background: var(--surface-2); }
.xpt:hover, .xpt:focus-visible { transform: translateY(-6px) scale(1.04) rotate(-1.5deg); box-shadow: 0 0 0 1px var(--line), 0 24px 36px -16px rgb(var(--shadow) / .7); outline: none; }
.xpt:active { transform: scale(.97); }
.xpt__t { position: absolute; left: 26px; top: 26px; max-width: 120px; z-index: 2; font: 400 31px/1.08 var(--pixel); color: #fff; }
.xpt--usuals .xpt__t { max-width: none; }
.xpt--small .xpt__t { left: 22px; top: 26px; font: 600 19px/1.15 var(--sans); color: var(--ink); }
.xpt--usuals .xpt__t { color: #111; }
.xpt__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.xpt__art i { position: absolute; display: none; }
.xpt.has-img .xpt__art { display: none; }
/* Little Unusual — warm brown with a soft orange mascot */
.xpt--unusual:not(.has-img) { background: radial-gradient(120% 90% at 20% 0%, #3a1c0a 0%, #6b3614 45%, #b8692e 100%); }
.xpt--unusual .xpt__art i:nth-child(1) { display: block; left: 58px; top: 112px; width: 140px; height: 150px; border-radius: 70px 70px 20px 20px;
  background: radial-gradient(90% 70% at 40% 20%, #e09a55, #b8622a 60%, #7a3b14); box-shadow: inset 0 2px 0 #ffffff30; }
.xpt--unusual .xpt__art i:nth-child(2) { display: block; left: 84px; top: 150px; width: 44px; height: 44px; border: 7px solid #f2b877; border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; rotate: -45deg; opacity: .85; }
.xpt--unusual .xpt__art i:nth-child(3) { display: block; left: 70px; top: 190px; width: 90px; height: 40px; border: 7px solid #f2b877; border-top: 0; border-radius: 0 0 40px 40px; opacity: .8; }
/* Usuals.AI — gold to black with a white block logo */
.xpt--usuals:not(.has-img) { background: radial-gradient(130% 100% at 50% 0%, #fff6d8 0%, #d8b43d 32%, #6d5412 68%, #0b0904 100%); }
.xpt--usuals .xpt__art i { display: block; width: 48px; height: 48px; border-radius: 12px; background: #fff; box-shadow: 0 0 18px #ffffff66; }
.xpt--usuals .xpt__art i:nth-child(1) { left: 58px; top: 102px; } .xpt--usuals .xpt__art i:nth-child(2) { left: 150px; top: 102px; }
.xpt--usuals .xpt__art i:nth-child(3) { left: 58px; top: 162px; width: 60px; } .xpt--usuals .xpt__art i:nth-child(4) { left: 128px; top: 162px; width: 70px; border-radius: 12px 12px 12px 22px; }

/* ═══ Home v2 — exact pass (measured 1:1 from Figma 195:465) ═══ */
.id__name { color: var(--ink); }
.plhead { left: 97px; top: 592px; width: 397px; gap: 0; font-size: 21px; }
.plhead__link { margin-right: 13px; }
.plhead__play { width: 19px; height: 19px; margin-right: 11px; }
.plhead__play svg { width: 19px; height: 19px; }
.xphead { left: 578px; top: 592px; width: 646px; gap: 0; font-size: 21px; }
.xphead span { margin-right: 36px; }
.plhead__line, .xphead i { background: linear-gradient(90deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 100%); opacity: .85; }
.xphead i { background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 70%, color-mix(in srgb, var(--ink) 0%, transparent) 100%); }

/* playlist: square card, grey band behind the current song, ghost rows above/below */
.plist { left: 96px; top: 673px; width: 383px; height: 185px; border-radius: 4px;
  background: linear-gradient(180deg, #efeeee 0%, #e2e1e1 28%, #c9c8c8 50%, #dcdbdb 72%, #ecebeb 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); }
:root[data-mode="dark"] .plist { background: linear-gradient(180deg, #1c1d21 0%, #232428 28%, #2e3035 50%, #25262a 72%, #1b1c20 100%); }
.plist::after { display: none; }
.plist__wheel { top: 49px; }                                   /* current row centred at 93px */
.plrow { height: 88px; gap: 29px; padding: 0 50px 0 28px; filter: none; transform: none;
  opacity: 1; }
.plist__wheel { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.plrow__art { width: 68px; height: 68px; box-shadow: 0 0 0 3px #fff, 0 10px 18px -6px #0007; transition: transform .5s, opacity .5s; }
.plrow__txt { gap: 2px; transition: opacity .5s, filter .5s; }
.plrow__txt b { font: 500 31px/1.12 var(--sans); color: #111; letter-spacing: -.01em; }
.plrow__txt small { font: 600 22px/1.15 var(--sans); color: #9b9b9b; }
.plrow:not(.is-cur) .plrow__art { transform: scale(.82); opacity: .55; filter: grayscale(1) brightness(1.6); }
.plrow:not(.is-cur) .plrow__txt { opacity: .6; filter: blur(.4px); }
.plrow:not(.is-cur) .plrow__txt b, .plrow:not(.is-cur) .plrow__txt small { color: #fff; }
:root[data-mode="dark"] .plrow__txt b { color: var(--ink); }
:root[data-mode="dark"] .plrow:not(.is-cur) .plrow__txt b, :root[data-mode="dark"] .plrow:not(.is-cur) .plrow__txt small { color: #6d6e73; }
:root[data-mode="dark"] .plrow__art { box-shadow: 0 0 0 3px #2e3035, 0 10px 18px -6px #000; }
.plist__arr { right: 26px; width: 18px; height: 14px; color: #9a9a9a; }
.plist__arr svg { width: 18px; height: 14px; }
.plist__arr--up { top: 35px; } .plist__arr--dn { top: 131px; bottom: auto; }

/* experience tiles */
.xp { left: 578px; top: 646px; width: 621px; height: 225px; }
.xpt { width: 185px; height: 225px; border-radius: 44px; box-shadow: none; }
.xpt:nth-child(1) { left: 0; } .xpt:nth-child(2) { left: 231px; } .xpt:nth-child(3) { left: 436px; }
.xpt--small { top: 29px; width: 151px; height: 171px; border-radius: 42px; background: #d9d9d9; }
:root[data-mode="dark"] .xpt--small { background: var(--surface); }
.xpt__t { left: 29px; top: 30px; max-width: 120px; font: 400 31px/30px var(--pixel); }
.xpt--small .xpt__t { left: 34px; top: 31px; font: 600 21px/22px var(--sans); color: #111; }
:root[data-mode="dark"] .xpt--small .xpt__t { color: var(--ink); }
.xpt--usuals .xpt__t { top: 36px; max-width: none; font: 600 24px/1 var(--sans); color: #111; }
.xpt:hover, .xpt:focus-visible { box-shadow: 0 22px 34px -16px rgb(var(--shadow) / .55); }
/* Little Unusual art: dark-brown → rust, a tall rounded mascot with halftone dots, eye arc and hook mouth */
.xpt--unusual:not(.has-img) { background: linear-gradient(170deg, #2b1308 0%, #5a2c12 40%, #9a5424 80%, #b5692f 100%); }
.xpt--unusual .xpt__art i:nth-child(1) { left: 57px; top: 95px; width: 150px; height: 160px; border-radius: 64px 64px 0 0;
  background: radial-gradient(circle at 1.6px 1.6px, #0003 1px, transparent 1.4px) 0 0/5px 5px, radial-gradient(90% 80% at 55% 20%, #d58f4c, #a85c26 55%, #6b3413); box-shadow: none; }
.xpt--unusual .xpt__art i:nth-child(2) { left: 114px; top: 130px; width: 48px; height: 48px; border: 9px solid #d9894a; border-bottom-color: transparent; border-left-color: #d9894a; border-right-color: #d9894a; border-radius: 50%; rotate: 0deg; clip-path: inset(0 0 50% 0); opacity: .9; }
.xpt--unusual .xpt__art i:nth-child(3) { left: 79px; top: 168px; width: 60px; height: 40px; border: 9px solid #e0a15f; border-top: 0; border-right: 0; border-radius: 0 0 0 22px; opacity: .9; }
/* Usuals.AI art: cream → gold → black glow with blurred white blocks */
.xpt--usuals:not(.has-img) { background: radial-gradient(120% 95% at 22% 8%, #f4ecc4 0%, #d4b54a 30%, #8a6d18 58%, #1b1405 88%, #000 100%); }
.xpt--usuals .xpt__art i { width: 48px; height: 48px; border-radius: 13px; background: #fff; box-shadow: 0 0 10px 1px #ffffffaa; filter: blur(.6px); }
.xpt--usuals .xpt__art i:nth-child(1) { left: 57px; top: 95px; } .xpt--usuals .xpt__art i:nth-child(2) { left: 152px; top: 95px; }
.xpt--usuals .xpt__art i:nth-child(3) { left: 57px; top: 157px; width: 70px; height: 68px; border-radius: 13px 13px 0 13px; }
.xpt--usuals .xpt__art i:nth-child(4) { left: 118px; top: 185px; width: 80px; height: 40px; border-radius: 13px 0 0 0; }

/* story: 533×581 at x1296 y290; lens inset 23 / 23 / 30 */
.story { left: 1296px; top: 290px; width: 533px; height: 581px; border-radius: 45px; scale: 1; }
.story__lens { left: 23px; top: 23px; width: 487px; height: 528px; }
.story__text { left: 63px; top: 438px; width: 400px; font: 400 22px/26px var(--sans); }

/* ═══ Home v2 — real logos, refined player, hover-expand experience cards ═══ */
/* heading: play icon removed; line follows the label */
.plhead__link { margin-right: 22px; }

/* player: back to the Figma-exact look (v49); only the play/pause button on the cover is added */
.plist__play { position: absolute; left: 28px; top: 59px; width: 68px; height: 68px; border-radius: 50%; z-index: 3; display: grid; place-items: center;
  color: #fff; background: #00000052; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: transform .35s var(--spring), background .25s, color .25s; }
.plist__play svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 1px 2px #0006); }
.plist__play .i-stop, .plist.is-playing .plist__play .i-play { display: none; }
.plist.is-playing .plist__play .i-stop { display: block; }
.plist.is-playing .plist__play { background: #00000030; }
.plist__play:hover { transform: scale(1.08); background: var(--accent); color: var(--accent-ink); }
.plist__play:hover svg { filter: none; }
.plist__play:active { transform: scale(.94); }
/* tile artwork = the real logos from the Figma file */
.xpt__art { display: none; }
.xpt__img { position: absolute; z-index: 1; pointer-events: none; }
.xpt--unusual .xpt__img { width: 300px; left: -33px; top: 18px; }
.xpt--usuals .xpt__img { width: 648px; max-width: none; left: 57px; top: 77px; filter: blur(.8px) drop-shadow(0 0 8px #ffffffaa); }

/* expanded card */
.xpx { position: absolute; z-index: 40; border-radius: 64px; overflow: hidden; background: #151515; color: #fff;
  box-shadow: 0 40px 80px -30px #000a;
  transition: left .62s cubic-bezier(.22,1,.36,1), top .62s cubic-bezier(.22,1,.36,1), width .62s cubic-bezier(.22,1,.36,1), height .62s cubic-bezier(.22,1,.36,1), border-radius .62s cubic-bezier(.22,1,.36,1); }
.xpx.is-gone { visibility: hidden; }
.xpx__tile { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  z-index: 3; opacity: 1; transition: opacity .3s ease .12s; pointer-events: none; }
.xpx.is-open .xpx__tile { opacity: 0; transition-delay: .08s; }
.xpx__body { position: absolute; left: 118px; top: 100px; right: 118px; z-index: 2; }
.xpx__t { margin: 0; font: 400 88px/0.9 var(--pixel); letter-spacing: .01em; }
.xpx__y { margin: 10px 0 0; font: 400 34px/1 var(--pixel); }
.xpx__d { margin: 62px 0 0; max-width: 900px; font: 600 26px/32px var(--sans); text-transform: capitalize; }
.xpx__t, .xpx__y, .xpx__d { opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .25s; }
.xpx.is-open .xpx__t { opacity: 1; transform: none; transition: opacity .45s .26s, transform .6s cubic-bezier(.22,1,.36,1) .26s; }
.xpx.is-open .xpx__y { opacity: 1; transform: none; transition: opacity .45s .33s, transform .6s cubic-bezier(.22,1,.36,1) .33s; }
.xpx.is-open .xpx__d { opacity: 1; transform: none; transition: opacity .45s .4s, transform .6s cubic-bezier(.22,1,.36,1) .4s; }
.xpx__art { position: absolute; z-index: 1; right: 0; bottom: 0; width: 330px; opacity: 0; transform: translate(40px, 40px) scale(.85); transform-origin: 100% 100%;
  transition: opacity .3s, transform .3s; -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 55%, #0000 100%); mask-image: radial-gradient(120% 120% at 30% 30%, #000 55%, #0000 100%); }
.xpx.is-open .xpx__art { opacity: 1; transform: translate(34px, 70px); transition: opacity .5s .3s, transform .75s cubic-bezier(.22,1,.36,1) .25s; }
.xpx--usuals .xpx__art { width: 250px; filter: blur(1.2px) drop-shadow(0 0 16px #ffffff88); transform: translate(60px, 80px) scale(.85); }
.xpx--usuals.is-open .xpx__art { transform: translate(24px, 60px); }
.xpx__art[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .xpx, .xpx * { transition-duration: .01s !important; transition-delay: 0s !important; } }
.xpx--usuals .xpx__art { -webkit-mask-image: none; mask-image: none; filter: blur(1px) drop-shadow(0 0 12px #ffffff70); }
/* v52 — Experience tiles use Figma's exact render (logo, blur, gradient, glow baked in) */
.xpt.has-img { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.xpt.has-img .xpt__img, .xpt.has-img .xpt__t { display: none; }
/* v53 — one corner radius for all three Experience tiles */
.xpt, .xpt--small { border-radius: 44px; }
/* v54 — playlist: open wheel on the canvas (no card); rows dissolve into the background above/below */
.plist { left: 97px; top: 650px; width: 397px; height: 232px; border-radius: 0; background: none !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #0008 17%, #000 40%, #000 60%, #0008 83%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #0008 17%, #000 40%, #000 60%, #0008 83%, transparent 100%); }
.plist:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.plist__wheel { top: 72px; }                                   /* current row centred at 116px → same spot on the page */
.plrow { padding: 0 44px 0 0; gap: 26px; }
.plrow__art, :root[data-mode="dark"] .plrow__art { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 12px 22px -10px #0009; }
.plrow__txt b { color: var(--ink); }
.plrow__txt small { color: var(--ink-soft); font-weight: 500; }
.plrow:not(.is-cur) .plrow__art { transform: scale(.8); opacity: .5; filter: grayscale(1); }
.plrow:not(.is-cur) .plrow__txt { opacity: .45; filter: blur(.5px); }
.plrow:not(.is-cur) .plrow__txt b, .plrow:not(.is-cur) .plrow__txt small,
:root[data-mode="dark"] .plrow:not(.is-cur) .plrow__txt b, :root[data-mode="dark"] .plrow:not(.is-cur) .plrow__txt small { color: var(--ink-soft); }
.plist__play { left: 0; top: 82px; }
.plist__arr { right: 0; color: var(--ink-soft); opacity: .7; }
.plist__arr:hover { opacity: 1; }
.plist__arr--up { top: 87px; } .plist__arr--dn { top: 131px; }
.plist { left: 77px; width: 417px; }
.plrow { padding-left: 20px; }
.plist__play { left: 20px; }
/* v55 — playlist drum: rows tilt away on a cylinder; refined ▲/▼ buttons */
.plist { perspective: 620px; perspective-origin: 50% 116px; }
.plist__wheel { transform-style: preserve-3d; }
.plrow { transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform; transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .45s; }
.plrow:not(.is-cur) .plrow__art { transform: none; opacity: .6; }
.plrow:not(.is-cur) .plrow__txt { opacity: .55; filter: blur(.3px); }
.plist { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000a 16%, #000 36%, #000 64%, #000a 84%, transparent 100%);
                 mask-image: linear-gradient(180deg, transparent 0%, #000a 16%, #000 36%, #000 64%, #000a 84%, transparent 100%); }
.plist__arr { right: 0; width: 34px; height: 34px; border-radius: 50%; opacity: 1; color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--surface-hi, #fff8), 0 0 0 1px var(--line), 0 8px 18px -10px rgb(var(--shadow) / .55);
  transition: transform .4s var(--spring), color .25s, background .25s, box-shadow .25s; }
.plist__arr svg { width: 11px; height: 11px; }
.plist__arr--up { top: 75px; } .plist__arr--dn { top: 123px; }
.plist__arr:hover { color: var(--accent-ink, #111); background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 20px -10px var(--accent); }
.plist__arr--up:hover { transform: translateY(-2px) scale(1.08); } .plist__arr--dn:hover { transform: translateY(2px) scale(1.08); }
.plist__arr:active { transform: scale(.9); transition-duration: .12s; }
.plist__arr:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.plist__arr.is-nudge { animation: plnudge .35s var(--spring); }
@keyframes plnudge { 50% { transform: scale(.86); } }
/* play/pause floats over the cover: glassy centre so the artwork shows through */
.plist__play { background: #0000002e; -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); color: #fff; box-shadow: inset 0 0 0 1px #ffffff40; }
.plist__play .i-play, .plist__play .i-stop { opacity: .95; }

/* v55 — Side Projects tile: same family as the other two (rich gradient, top glow, soft blurred glyphs, inner glow) */
.xpt--side, :root[data-mode="dark"] .xpt--side { background:
    radial-gradient(90% 70% at 14% 4%, #d9d4ff 0%, #9d8cff00 60%),
    linear-gradient(165deg, #7b6cf0 0%, #4b37c4 38%, #24166e 72%, #0d0927 100%);
  box-shadow: inset 0 0 22px #ffffff38, inset 0 1px 0 #ffffff55; }
.xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { left: 22px; top: 22px; max-width: 110px; font: 400 27px/26px var(--pixel); color: #fff; text-shadow: 0 0 10px #ffffff55; }
.xpt--side::before, .xpt--side::after { content: ""; position: absolute; background: #fff; z-index: 1; pointer-events: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.xpt--side::before { width: 92px; height: 92px; right: 10px; bottom: 12px; filter: blur(1.2px) drop-shadow(0 0 10px #fff); opacity: .95; }
.xpt--side::after { width: 34px; height: 34px; right: 88px; bottom: 70px; filter: blur(.8px); opacity: .7; }
.xpx--side .xpx__tile { background: inherit; }
.xpt--side, :root[data-mode="dark"] .xpt--side { background:
    radial-gradient(85% 65% at 12% 2%, #f3efe6 0%, #bfb6a500 62%),
    radial-gradient(70% 60% at 100% 100%, #ff9a3c55 0%, #ff9a3c00 70%),
    linear-gradient(170deg, #6d6a66 0%, #34322f 40%, #151413 75%, #050505 100%); }
.xpt--side::before { width: 118px; height: 118px; right: -22px; bottom: -20px; filter: blur(2.4px) drop-shadow(0 0 12px #ffffffcc); opacity: .92; }
.xpt--side::after { width: 30px; height: 30px; right: 86px; bottom: 58px; filter: blur(1.4px) drop-shadow(0 0 6px #fff); opacity: .75; }
.plist__arr { right: 6px; }
/* v56 — hover card: 30% smaller, title + logo glide from the tile, layer blur in motion, background softly blurred */
.xpx { border-radius: 45px; }
.xpx.is-open { animation: xpblurA .62s cubic-bezier(.22,1,.36,1); }
.xpx.is-closing { animation: xpblurB .55s cubic-bezier(.22,1,.36,1); }
@keyframes xpblurA { 0% { filter: blur(0); } 35% { filter: blur(5px); } 100% { filter: blur(0); } }
@keyframes xpblurB { 0% { filter: blur(0); } 45% { filter: blur(5px); } 100% { filter: blur(0); } }
.xpx__tile { z-index: 1; transition: opacity .35s ease; }
.xpx.is-open .xpx__tile { opacity: 0; transition: opacity .4s ease .05s; }
.xpx__tile .xpt__t, .xpx__tile .xpt__img { display: none; }
.xpx__body { left: 83px; top: 70px; right: 83px; z-index: 3; }
.xpx__t { font-size: 62px; transform-origin: 0 0; }
.xpx__y { margin-top: 8px; font-size: 24px; }
.xpx__d { margin-top: 40px; max-width: 610px; font: 600 18px/23px var(--sans); }
/* title: visible from the first frame, glides + grows from the tile's title */
.xpx .xpx__t, .xpx.is-open .xpx__t { opacity: 1; }
.xpx__t { transform: var(--t0, none); transition: transform .62s cubic-bezier(.22,1,.36,1), color .4s; }
.xpx.is-open .xpx__t { transform: none; transition: transform .62s cubic-bezier(.22,1,.36,1), color .4s; }
.xpx--usuals:not(.is-open) .xpx__t { color: #111; }
/* logo: same idea, from its spot on the tile to bottom-right */
.xpx__art, .xpx--usuals .xpx__art { z-index: 2; opacity: 1; transform-origin: 0 0; transform: var(--a0, none); -webkit-mask-image: none; mask-image: none;
  transition: transform .62s cubic-bezier(.22,1,.36,1), filter .62s; }
.xpx.is-open .xpx__art, .xpx--usuals.is-open .xpx__art { opacity: 1; transform: none; transition: transform .62s cubic-bezier(.22,1,.36,1), filter .62s; }
.xpx.is-gone .xpx__art, .xpx.is-gone .xpx__t { transition: none; }
/* everything behind the card softens */
.xpveil { position: absolute; inset: -40px; z-index: 39; pointer-events: none; opacity: 0;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); background: color-mix(in srgb, var(--bg) 22%, transparent);
  transition: opacity .5s cubic-bezier(.22,1,.36,1); }
body.xp-open .xpveil { opacity: 1; }
.xpx.no-tr, .xpx.no-tr * { transition: none !important; animation: none !important; }
/* v56 — play/pause sits on the current cover and travels with it */
.plist__play { display: none; }
.plrow__art { position: relative; display: grid; place-items: center; background-size: cover; background-position: center; }
.plrow__pp { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: #0000002e; -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); box-shadow: inset 0 0 0 1px #ffffff40;
  opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .45s var(--spring), background .25s; }
.plrow.is-cur .plrow__pp { opacity: 1; transform: none; transition-delay: .18s; cursor: pointer; }
.plrow.is-cur .plrow__art:hover .plrow__pp { background: var(--accent); color: var(--accent-ink, #111); }
.plrow.is-cur .plrow__art:active .plrow__pp { transform: scale(.92); }
.plrow__pp svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 1px 2px #0006); }
.plrow__pp .i-stop, .plist.is-playing .plrow.is-cur .plrow__pp .i-play { display: none; }
.plist.is-playing .plrow.is-cur .plrow__pp .i-stop { display: block; }
.plist.is-playing .plrow.is-cur .plrow__art { animation: none; }
/* v56 — Side Projects follows the exact gradient recipe of the Usuals tile (top-left light → mid tone → black bottom-right), in silver */
.xpt--side, :root[data-mode="dark"] .xpt--side { background: radial-gradient(120% 95% at 22% 8%, #f6f6f4 0%, #c4c3bf 30%, #75736e 58%, #171716 88%, #000 100%); box-shadow: inset 0 0 22px #ffffff30; }
.xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { color: #111; text-shadow: none; }
.xpx--side:not(.is-open) .xpx__t { color: #111; }
/* v57 — progressive layer blur on the songs above and below */
.plblur { position: absolute; left: 0; right: 44px; z-index: 2; pointer-events: none; }
.plblur--top { top: 0; height: 80px; }
.plblur--bot { bottom: 0; height: 80px; }
.plblur--1 { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.plblur--2 { -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
.plblur--3 { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.plblur--top.plblur--1 { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 100%); }
.plblur--top.plblur--2 { -webkit-mask-image: linear-gradient(0deg, transparent 25%, #000 60%, #000 100%); mask-image: linear-gradient(0deg, transparent 25%, #000 60%, #000 100%); }
.plblur--top.plblur--3 { -webkit-mask-image: linear-gradient(0deg, transparent 50%, #000 90%); mask-image: linear-gradient(0deg, transparent 50%, #000 90%); }
.plblur--bot.plblur--1 { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); }
.plblur--bot.plblur--2 { -webkit-mask-image: linear-gradient(180deg, transparent 25%, #000 60%, #000 100%); mask-image: linear-gradient(180deg, transparent 25%, #000 60%, #000 100%); }
.plblur--bot.plblur--3 { -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 90%); mask-image: linear-gradient(180deg, transparent 50%, #000 90%); }
.plrow:not(.is-cur) .plrow__txt { filter: none; }
/* v58 — section strokes match the header rule exactly: flat 1px, same colour, no gradient */
.plhead__line, .xphead i { height: 0; background: none; opacity: 1; border-top: 1px solid var(--line); }
/* v60 — story taps follow the vertical motion: top = previous (↑), bottom = next (↓) */
.story__tap { left: 0 !important; right: 0 !important; width: auto !important; }
.story__tap--prev { top: 0; bottom: auto; height: 35%; cursor: n-resize; }
.story__tap--next { top: auto; bottom: 0; height: 65%; cursor: s-resize; }
/* v61 — Side Projects mark: an image (so it can glide into the card), sized like the other tiles' marks */
.xpt--side::before { display: none; }
.xpt--side .xpt__img { width: 80px; left: 79px; top: 97px; filter: blur(1.6px) drop-shadow(0 0 10px #ffffffcc); }
.xpt--side::after { width: 22px; height: 22px; right: 78px; bottom: 62px; }
.xpx--side .xpx__art { filter: blur(2.5px) drop-shadow(0 0 22px #ffffffcc); }
/* hover/expand stability: no tile lift under the card, source tile hidden while its card is out */
#xp .xpt:hover, #xp .xpt:focus-visible { transform: none; }
#xp.has-open .xpt { transition: opacity .25s; }
#xp .xpt.is-src { opacity: 0; }
/* v61 — minimal playback bar + mute */
.plprog { position: absolute; left: 114px; right: 58px; top: 150px; height: 14px; z-index: 3; cursor: pointer; touch-action: none; transition: opacity .3s; }
.plprog::before, .plprog__fill { content: ""; position: absolute; left: 0; top: 6px; height: 2px; border-radius: 2px; }
.plprog::before { right: 0; background: var(--line); }
.plprog__fill { width: calc(var(--p, 0) * 100%); background: var(--ink); opacity: .75; }
.plprog__fill::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform .3s var(--spring); }
.plprog:hover .plprog__fill::after, .plprog.is-drag .plprog__fill::after { transform: scale(1); }
.plprog:hover .plprog__fill, .plist.is-playing .plprog__fill { opacity: 1; }
.plprog.is-switch { opacity: 0; }
.plist.is-muted .plprog__fill { opacity: .35; }
.plmute { flex: none; width: 28px; height: 28px; margin: 0 9px 0 14px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--surface-hi, #fff8), 0 0 0 1px var(--line), 0 8px 18px -10px rgb(var(--shadow) / .55);
  transition: transform .4s var(--spring), color .25s, background .25s, box-shadow .25s; }
.plmute:hover { color: var(--accent-ink, #111); background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 20px -10px var(--accent); transform: scale(1.08); }
.plmute:active { transform: scale(.9); }
.plmute:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.plmute svg { width: 15px; height: 15px; overflow: visible; }
.plmute__spk { fill: currentColor; }
.plmute__wav, .plmute__x { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transition: opacity .25s, transform .35s var(--spring); transform-origin: 13px 10px; }
.plmute__x { opacity: 0; transform: scale(.4); }
.plmute.is-muted .plmute__wav { opacity: 0; transform: scale(.6); }
.plmute.is-muted .plmute__x { opacity: 1; transform: none; }
.plprog { top: 154px; }
/* v62 — Details pane (Figma "Work – Exp and tool stack"): project title, 2–4 lines, frames, tools */
.exp__head { left: 144px; top: 107px; font-size: 60px; }
.dt__desc { position: absolute; left: 140px; top: 244px; width: 1450px; margin: 0; font: 400 33px/42px var(--sans); color: var(--ink); letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dt__shots { position: absolute; left: 140px; top: 427px; display: flex; gap: 24px; }
.dt__shots[hidden] { display: none; }
.dt__shot { width: 336px; height: 189px; margin: 0; border-radius: 16px; overflow: hidden; background: var(--surface-2) center/cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--line), 0 16px 28px -18px rgb(var(--shadow) / .6);
  transition: transform .45s var(--spring), box-shadow .35s, filter .35s; }
.dt__shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt__shots:hover .dt__shot { filter: saturate(.7) brightness(.96); }
.dt__shots .dt__shot:hover { filter: none; transform: translateY(-6px) scale(1.03); box-shadow: inset 0 0 0 1px var(--line), 0 24px 36px -18px rgb(var(--shadow) / .7); }
.exp__tools-head { left: 144px; top: 745px; font-size: 44px; }
.exp__tools-head[hidden], .exp__rule[hidden] { display: none; }
.tools { left: 472px; top: 718px; gap: 42px; }
/* tool tiles: Figma's soft grey gradient, logo in white with a little glow (same finish as the Experience tiles) */
.tool { border-radius: 16px; background: linear-gradient(120deg, #d6d5d3 0%, #a9a8a5 55%, #8c8b88 100%); color: #fff;
  box-shadow: inset 0 1px 0 #ffffff80, inset 0 0 14px #ffffff33, 0 0 0 1px var(--line), 0 16px 26px -16px rgb(var(--shadow) / .6); }
:root[data-mode="dark"] .tool { background: linear-gradient(120deg, #4a4b50 0%, #2c2d31 55%, #1c1d20 100%); box-shadow: inset 0 1px 0 #ffffff1f, inset 0 0 14px #ffffff12, 0 0 0 1px var(--line), 0 16px 26px -16px #000; }
.tool__logo { width: 46%; height: 46%; background: currentColor; -webkit-mask: var(--logo) center/contain no-repeat; mask: var(--logo) center/contain no-repeat;
  filter: drop-shadow(0 0 6px #ffffffaa); }
.tool__mono { color: #fff; text-shadow: 0 0 10px #ffffff88; }
.tool:hover, .tool:focus-visible { transform: translateY(-6px) scale(1.08); }
/* project switch: details cross-fade with the feature card */
.pane--exp .exp__head, .dt__desc, .dt__shots, .tools { transition: opacity .28s, filter .28s; }
.pane--exp.is-swap .exp__head, .pane--exp.is-swap .dt__desc, .pane--exp.is-swap .dt__shots, .pane--exp.is-swap .tools { opacity: 0; filter: blur(6px); }
/* v63 — removed: mute button (end of "Go to playlist" line) and the playback bar under the song */
.plmute, .plprog { display: none !important; }
/* v64 — Work preview: sound toggle + hairline progress (visible at rest) */
.fmute { position: absolute; z-index: 4; left: 954px; top: 516px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(45,45,45,.2); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 -5px 8px #ffffff40, 0 0 0 1px #ffffff1f;
  transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), background .3s, color .3s, transform .35s var(--spring), opacity .3s; }
.feature.is-open .fmute { left: 694px; top: 499px; width: 69px; height: 69px; }
.fmute:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.fmute:active { transform: scale(.92); }
.fmute:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fmute svg { width: 20px; height: 20px; overflow: visible; filter: drop-shadow(0 1px 2px #0006); }
.feature.is-open .fmute svg { width: 24px; height: 24px; }
.fmute__spk { fill: currentColor; }
.fmute__wav, .fmute__x { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transform-origin: 14px 10px; transition: opacity .25s, transform .35s var(--spring); }
.fmute__x { opacity: 0; transform: scale(.4); }
.feature.is-muted .fmute__wav { opacity: 0; transform: scale(.6); }
.feature.is-muted .fmute__x { opacity: 1; transform: none; }
.fprog { position: absolute; z-index: 4; left: 53px; right: 53px; bottom: 18px; height: 16px; cursor: pointer; touch-action: none; }
.fprog::before, .fprog__fill { content: ""; position: absolute; left: 0; bottom: 7px; height: 2px; border-radius: 2px; }
.fprog::before { right: 0; background: #ffffff38; }
.fprog__fill { width: calc(var(--p, 0) * 100%); background: #fff; box-shadow: 0 0 6px #ffffff80; }
.fprog__fill::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .3s var(--spring); }
.fprog:hover .fprog__fill::after, .fprog.is-drag .fprog__fill::after { transform: scale(1); }
.fprog:hover::before, .fprog.is-drag::before { background: #ffffff55; }
.feature:not(.has-video) .fmute, .feature:not(.has-video) .fprog { opacity: 0; pointer-events: none; }
.feature.is-swap .fprog { opacity: 0; }
/* v65 — one fixed control row at the bottom: time · progress · sound. Nothing jumps on hover.
   Fullscreen appears above the row, right-aligned with the sound button; the 01 / 06 counter moves to the top-right. */
.ftime { position: absolute; z-index: 4; left: 53px; bottom: 34px; margin: 0; font: 400 15px/1 var(--mono); color: #ffffffd9; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #0008; min-width: 104px; }
.fprog { left: 175px; right: 109px; bottom: 33px; }
.fmute, .feature.is-open .fmute { left: auto; right: 53px; top: auto; bottom: 22px; width: 40px; height: 40px; }
.fmute svg, .feature.is-open .fmute svg { width: 18px; height: 18px; }
.glass { top: 452px; }
.feature__count { left: auto; right: 53px; top: 52px; bottom: auto; }
.feature:not(.has-video) .ftime { opacity: 0; }
.feature.is-swap .ftime { opacity: 0; }
.ftime { transition: opacity .3s; }
/* v67/68 — About ↔ Work by scroll: exactly the Work ↔ details motion.
   The page container slides (1.1s, same curve/blur/fade as .pane); its blocks rise in with the same
   exp-rise keyframes and stagger as the details pane. Nothing else transitions meanwhile. */
html.vnav .view { transition: transform 1.1s cubic-bezier(.7,0,.2,1), opacity .9s var(--ease), filter .9s var(--ease), visibility 0s 1.1s; }
html.vnav .view.is-active { transform: none; opacity: 1; filter: none; transition: transform 1.1s cubic-bezier(.7,0,.2,1), opacity .9s var(--ease), filter .9s var(--ease); }
html.vnav .view[data-view="about"]:not(.is-active) { transform: translateY(-100%); opacity: 0; filter: blur(8px); }
html.vnav .view[data-view="work"]:not(.is-active) { transform: translateY(100%); opacity: 0; filter: blur(8px); }
html.vnav .view .enter, html.vnav .view .rule { transition: none !important; transform: none; opacity: 1; filter: none; }
html.vnav .view.is-active.is-arriving .enter { animation: exp-rise .85s var(--ease) calc(var(--d, 0s) + .26s) backwards; }
html.vnav-prep .view, html.vnav-prep .view * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { html.vnav .view { transform: none !important; filter: none !important; } html.vnav .view.is-arriving .enter { animation: none; } }
/* v71 — clear roles: the card = watch (click anywhere, cursor says "Watch film"); bottom row = time · progress · sound only */
#fsBtn.glass, .feature.is-open #fsBtn.glass { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
#fsBtn.glass:focus-visible { width: auto; height: auto; clip: auto; margin: 0; opacity: 1; left: 53px; top: 52px; padding: 10px 18px; font-size: 18px; }
.feature { cursor: pointer; }
.feature .fmute, .feature .fprog { cursor: pointer; }
.fmute, .feature.is-open .fmute { right: 53px; }
.fprog { right: 117px; }
/* bottom row sits on its own soft band so it reads as a separate control zone */
.feature::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, #0000, #0000004d); }
.fcursor { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 20px; margin: 16px 0 0 16px; border-radius: 999px; font: 500 20px/1 var(--sans); color: #fff;
  background: rgba(45,45,45,.25); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 -5px 8px #ffffff40, 0 0 0 1px #ffffff1f;
  opacity: 0; scale: .8; transition: opacity .2s, scale .3s var(--spring); }
.fcursor svg { width: 16px; height: 16px; fill: currentColor; }
.feature.cur-on .fcursor { opacity: 1; scale: 1; }
@media (hover: none) { .fcursor { display: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   v72 — SYSTEM PASS: three type roles + one grid
   Primary   (Jersey 10, pixel)   → names & titles
   Secondary (Inter)              → the brief / body text people read
   Tertiary  (JetBrains Mono)     → small, low-attention labels, counts, meta
   Grid: page margins 94 / 1826 (1920 − 94). Everything on About starts or ends on those lines.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --f1: "Jersey 10", monospace;  --f2: Inter, system-ui, sans-serif;  --f3: "JetBrains Mono", ui-monospace, monospace;
  /* primary scale */   --p-xl: 85px; --p-l: 60px; --p-m: 42px; --p-s: 30px;
  /* secondary scale */ --s-l: 32px; --s-m: 24px; --s-s: 20px;
  /* tertiary scale */  --t-m: 16px; --t-s: 13px;
  --t-track: .06em;
}
/* ── Primary: names & titles */
.id__name { font: 400 var(--p-s)/1 var(--f1); }
.id__title, .exp__head { font: 400 var(--p-l)/1.05 var(--f1); }
.feature__title { font: 400 var(--p-xl)/1.05 var(--f1); }
.exp__tools-head { font: 400 var(--p-m)/1 var(--f1); }
.xpt__t, .xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t, .xpt--usuals .xpt__t { font: 400 var(--p-s)/1 var(--f1); letter-spacing: .01em; }
.xpt--usuals .xpt__t { left: 29px; top: 30px; }
.xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { left: 22px; top: 24px; max-width: 110px; }
.xpx__t { font-family: var(--f1); }
.rcard__title { font-family: var(--f1); }
/* ── Secondary: the brief */
.bio { font-family: var(--f2); font-size: var(--s-l); line-height: 40px; }
.dt__desc { font: 400 var(--s-l)/40px var(--f2); }
.feature__desc { font: 400 var(--s-m)/30px var(--f2); }
.xpx__d { font: 500 var(--s-s)/28px var(--f2); text-transform: none; }
.story__text { font: 400 var(--s-s)/26px var(--f2); }
.plrow__txt b { font: 600 26px/1.15 var(--f2); letter-spacing: -.01em; }
/* ── Tertiary: labels, meta, counts */
.plhead, .xphead { font: 500 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; color: var(--ink-soft); }
.plhead__link { margin-right: 18px; }
.xphead span { margin-right: 18px; }
.plrow__txt small { font: 400 var(--t-m)/1.3 var(--f3); letter-spacing: .02em; color: var(--ink-soft); }
.mode__label { font: 400 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; }
.feature__count, .ftime { font: 400 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); }
.xpx__y { font: 400 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; opacity: .7; margin-top: 12px; }
.tool__name { font: 400 var(--t-m)/1 var(--f3); letter-spacing: .02em; }
.fcursor { font: 500 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; }
.rcard__now { font: 500 var(--t-s)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; }
.plist__play, .plrow__pp { font-family: var(--f3); }

/* ── Grid: About */
.avatar { left: 94px; }
.rule { left: 94px; width: 1732px; }
.social--in { left: 1755px; } .social--x { left: 1647px; }
.story { left: 1293px; }
.plhead { left: 94px; width: 400px; }
.plist { left: 74px; width: 420px; }
.plist__arr, .plist__arr { right: 0; }
.xphead { left: 578px; width: 621px; }
/* ── Rhythm: the bio's first line starts on the same line as the story card (y 290) */
.bio { top: 283px; }
/* ── Grid: Details pane shares the page margin (94) and stops before the work/details switch */
.exp__head, .exp__tools-head { left: 94px; }
.dt__desc, .dt__shots { left: 94px; }
.dt__desc { width: 1450px; }
.rule.exp__rule { left: 94px; width: 1546px; }
.tools { left: 426px; }

/* ════════════════════════════════════════════════════════════════════════════
   v73 — LAYOUT SYSTEM
   Canvas 1920×1080 · 12-col grid · margins 96 · gutter 24 · column 122  (col n starts at 96 + (n−1)·146)
   Spacing scale (8pt): 8 · 16 · 24 · 32 · 48 · 64 · 96
   Vertical: header 64–208 · rule 240 · content zone 288–880 · nav 936
   Radii: big surfaces 48 · tiles 40 · tool tiles 20 · controls round
   ════════════════════════════════════════════════════════════════════════════ */
:root { --p-s: 28px; --s-l: 36px; }

/* ── About · header (cols 1–12) */
.avatar { left: 96px; top: 64px; width: 144px; height: 144px; }
.id { left: 272px; top: 84px; }
.id__name { margin: 0 0 8px; }
.social { top: 104px; width: 64px; height: 64px; border-radius: 16px; }
.social svg { width: 38px; }
.social--x { left: 1672px; } .social--in { left: 1760px; }
.rule { left: 96px; width: 1728px; top: 240px; }

/* ── About · content zone 288–880: left block cols 1–8 (96–1240), story cols 9–12 (1264–1824) */
.bio { left: 96px; top: 288px; width: 1144px; font-size: var(--s-l); line-height: 48px; }
.story { left: 1264px; top: 288px; width: 560px; height: 592px; border-radius: 48px; }
.story__lens { left: 24px; top: 24px; width: 512px; height: 544px; }
.story__text { left: 64px; right: 64px; top: auto; bottom: 80px; width: auto; }

/* lower row: labels at 624, content 672–880 (bottom = story bottom). Playlist cols 1–4, Experience cols 5–8 */
.plhead, .xphead { top: 618px; }
.plhead { left: 96px; width: 560px; }
.xphead { left: 680px; width: 560px; }
.plist { left: 76px; width: 580px; top: 660px; }           /* current song centred on y 776 = tile centre */
.xp { left: 680px; top: 672px; width: 560px; height: 208px; }
.xpt, .xpt--small { width: 171px; height: 208px; border-radius: 40px; top: 0; }
.xpt--small { width: 140px; height: 158px; top: 25px; }
.xpt:nth-child(1) { left: 0; } .xpt:nth-child(2) { left: 210px; } .xpt:nth-child(3) { left: 389px; }
.xpt__t, .xpt--usuals .xpt__t { left: 27px; top: 28px; }
.xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { left: 20px; top: 22px; max-width: 104px; }
.xpt--usuals .xpt__img { width: 599px; left: 53px; top: 71px; }
.xpt--side .xpt__img { width: 74px; left: 73px; top: 90px; }
.xpt--side::after { width: 20px; height: 20px; right: 72px; bottom: 57px; }

/* expanded experience card: cols 3–8, bottom on the content line */
.xpx { border-radius: 48px; }
.xpx__body { left: 64px; top: 64px; right: 64px; }
.xpx__t { font-size: var(--p-l); }
.xpx__d { margin-top: 32px; max-width: 640px; }

/* ── Work (same zone): stack cols 1–2, film cols 3–10 (388–1532, 16:9-ish), switch cols 11–12 */
.rolodex { left: 96px; }
.feature { left: 388px; top: 218px; width: 1144px; height: 662px; border-radius: 48px; }
.feature__body { left: 48px; right: 48px; top: 48px; }
.feature__count { right: 48px; top: 60px; }
.ftime { left: 48px; bottom: 36px; }
.fprog { left: 176px; right: 112px; bottom: 35px; }
.fmute, .feature.is-open .fmute { right: 48px; bottom: 24px; }
.mode { left: 1684px; top: 474px; }

/* ── Details (cols 1–10, 96–1532; switch stays in cols 11–12) */
.exp__head { left: 96px; top: 96px; }
.rule.exp__rule { left: 96px; width: 1436px; }
.exp__rule--a { top: 192px; }
.dt__desc { left: 96px; top: 224px; width: 1436px; font-size: var(--s-l); line-height: 48px; -webkit-line-clamp: 3; }
.dt__shots { left: 96px; top: 400px; gap: 24px; }
.dt__shot { width: 414px; height: 233px; border-radius: 24px; }
.exp__rule--b { top: 681px; }
.exp__tools-head { left: 96px; top: 745px; }
.tools { left: 388px; top: 713px; gap: 32px; }
.tool { width: 96px; height: 96px; border-radius: 20px; }
.bio { font-size: 40px; line-height: 52px; letter-spacing: -.01em; }
/* regions: main 96–1240 · 48 gap · aside 1288–1824 (two gutters between major regions) */
.story { left: 1288px; width: 536px; }
.story__lens { width: 488px; }
.plhead, .xphead { top: 610px; }
/* Work & Details: centred in the space between the top margin (64) and the nav (936) → equal air above and below */
.feature { top: 169px; }
.rolodex { --rolo-top: -40px; }             /* stack centred on the film (y 500) */
.mode { top: 425px; }                        /* switch centred on the film */
.exp__head { top: 128px; }
.exp__rule--a { top: 224px; }
.dt__desc { top: 256px; }
.dt__shots { top: 448px; }
.exp__rule--b { top: 729px; }
.tools { top: 761px; }
.exp__tools-head { top: 788px; }
.xpveil { inset: -400px -800px; }   /* reach past the stage edges so there is no visible blur boundary on wide screens */

/* ════════════════════════════════════════════════════════════════════════════
   v74 — MORE AIR
   Margins 160 (was 96) · 12 cols of 104 · gutter 32  (col n at 160 + (n−1)·136) · content 160–1760
   Top margin 80 · header 80–192 · rule 240 · content 304–848 · nav 948–1010 (≈100 of air above it)
   Everything scaled ~15% down so the page breathes; the main column and the story are separated by 200.
   ════════════════════════════════════════════════════════════════════════════ */
:root { --p-xl: 72px; --p-l: 52px; --p-m: 36px; --p-s: 24px; --s-l: 30px; --s-m: 22px; --s-s: 18px; --t-m: 14px; --t-s: 12px; }

/* header */
.avatar { left: 160px; top: 80px; width: 112px; height: 112px; }
.id { left: 304px; top: 92px; }
.id__name { margin-bottom: 6px; }
.social { top: 108px; width: 56px; height: 56px; border-radius: 14px; }
.social svg { width: 32px; }
.social--x { left: 1632px; } .social--in { left: 1704px; }
.rule { left: 160px; width: 1600px; top: 240px; }

/* main column: cols 1–7 (160–1080) · aside: story 1280–1760 */
.bio { left: 160px; top: 302px; width: 920px; font: 500 var(--s-l)/42px var(--f2); letter-spacing: -.005em; }
.story { left: 1280px; top: 304px; width: 480px; height: 544px; border-radius: 44px; }
.story__lens { left: 20px; top: 20px; width: 440px; height: 504px; }
.story__text { left: 48px; right: 48px; bottom: 64px; }

/* lower row: labels 624 · content 672–848 · playlist cols 1–3 · experience cols 4–7 */
.plhead, .xphead { top: 612px; }
.plhead { left: 160px; width: 376px; }
.xphead { left: 568px; width: 512px; }
.plist { left: 140px; width: 396px; top: 644px; }        /* current song centred on the tiles (y 760) */
.plrow__txt b { font-size: 24px; }
.xp { left: 568px; top: 672px; width: 512px; height: 176px; }
.xpt, .xpt--small { width: 145px; height: 176px; border-radius: 36px; top: 0; }
.xpt--small { width: 119px; height: 134px; top: 21px; }
.xpt:nth-child(1) { left: 0; } .xpt:nth-child(2) { left: 196px; } .xpt:nth-child(3) { left: 367px; }
.xpt__t, .xpt--usuals .xpt__t { left: 23px; top: 24px; }
.xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { left: 17px; top: 19px; max-width: 88px; }
.xpt--usuals .xpt__img { width: 508px; left: 45px; top: 60px; }
.xpt--side .xpt__img { width: 63px; left: 62px; top: 76px; }
.xpt--side::after { width: 17px; height: 17px; right: 61px; bottom: 48px; }
.xpx { border-radius: 44px; }
.xpx__body { left: 56px; top: 56px; right: 56px; }
.xpx__d { max-width: 560px; margin-top: 28px; }

/* nav: 80% so it sits lighter under the content */
.nav { transform: scale(.8); transform-origin: 50% 100%; }

/* Work: film cols 3–10 (432–1488, 16:9) centred between the top margin and the nav */
.feature { left: 432px; top: 217px; width: 1056px; height: 594px; border-radius: 44px; }
.feature__body { left: 40px; right: 40px; top: 40px; }
.feature__count { right: 40px; top: 50px; }
.ftime { left: 40px; bottom: 30px; }
.fprog { left: 152px; right: 96px; bottom: 29px; }
.fmute, .feature.is-open .fmute { right: 40px; bottom: 20px; width: 36px; height: 36px; }
.rolodex { left: 128px; --rolo-top: -26px; }
.mode { left: 1620px; top: 439px; }

/* Details: cols 1–10 (160–1488) */
.exp__head { left: 160px; top: 152px; }
.rule.exp__rule { left: 160px; width: 1328px; }
.exp__rule--a { top: 232px; }
.dt__desc { left: 160px; top: 264px; width: 1328px; font: 400 var(--s-l)/42px var(--f2); }
.dt__shots { left: 160px; top: 432px; gap: 32px; }
.dt__shot { width: 376px; height: 212px; border-radius: 20px; }
.exp__rule--b { top: 692px; }
.exp__tools-head { left: 160px; top: 746px; }
.tools { left: 432px; top: 724px; gap: 24px; }
.tool { width: 80px; height: 80px; border-radius: 18px; }
.bio, .dt__desc, .feature__desc, .xpx__d, .story__text { text-wrap: pretty; }
/* v75 — the stack opens to 80% (was 100%) inside cols 1–2, so it keeps ~70px of air from the film instead of touching it */
.rolodex { left: 144px; }
#rolodex .rcard { scale: .6; translate: -16px 0; }
#rolodex:hover .rcard, #rolodex:has(:focus-visible) .rcard { scale: .8; translate: 0 0; }
@media (hover: none) { #rolodex .rcard { scale: .8; translate: 0 0; } }
/* v76 — nav sits near the bottom of the window (32px canvas ≈ 24px on a laptop), like a dock, on every screen ratio */
.nav { top: calc(var(--pad, 0px) * 2 + 1080px - 32px - 77px); }
/* v77 — balanced About layout
   Horizontal: main block cols 1–8 (160–1216) · 64 gap · story 1280–1760. Lower row split in two equal halves:
               playlist cols 1–4 (160–672) · 32 gutter · Experience cols 5–8 (704–1216).
   Vertical:   rule 240 → 72 → bio (312–552) → 72 → labels (624) → 32 → tiles (672–848). Story top = bio top, bottom = tiles bottom. */
:root { --s-l: 36px; }
.bio { top: 306px; width: 1056px; font-size: var(--s-l); line-height: 48px; }
.dt__desc { line-height: 48px; }
.story { top: 312px; height: 536px; }
.story__lens { height: 496px; }
.plhead { width: 512px; }
.xphead { left: 704px; width: 512px; }
.xp { left: 704px; }
/* playlist: 16px of inner room on the right so the round ▲/▼ buttons (and their shadow/hover) never clip; they still end on the column edge */
.plist { width: 548px; }
.plist__arr { right: 16px; }
/* v78 — Experience gets the weight again: playlist cols 1–3 (160–536) · Experience cols 4–8 (568–1216) with the
   original-size tiles (185×225 / 151×171). Bio 32/44 (4 lines). Rhythm: rule 240 →72→ bio →~80→ labels →32→ tiles (bottom 848). */
:root { --s-l: 32px; --p-s: 28px; }
.bio { top: 306px; font-size: var(--s-l); line-height: 44px; }
.dt__desc { line-height: 44px; }
.plhead, .xphead { top: 569px; }
.plhead { width: 376px; }
.xphead { left: 568px; width: 648px; }
.plist { left: 140px; width: 412px; top: 623px; }          /* current song centred on the tiles (y 735) */
.xp { left: 568px; top: 623px; width: 648px; height: 225px; }
.xpt, .xpt--small { width: 185px; height: 225px; border-radius: 44px; top: 0; }
.xpt--small { width: 151px; height: 171px; top: 27px; }
.xpt:nth-child(1) { left: 0; } .xpt:nth-child(2) { left: 248px; } .xpt:nth-child(3) { left: 463px; }
.xpt__t, .xpt--usuals .xpt__t { left: 29px; top: 30px; }
.xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { left: 22px; top: 24px; max-width: 110px; }
.xpt--usuals .xpt__img { width: 648px; left: 57px; top: 77px; }
.xpt--side .xpt__img { width: 80px; left: 79px; top: 97px; }
.xpt--side::after { width: 22px; height: 22px; right: 78px; bottom: 62px; }
/* v79 — content block centred between the divider (240) and the nav (≈986): equal air above and below (≈105 each) */
.bio { top: 339px; }
.story { top: 345px; }
.plhead, .xphead { top: 602px; }
.plist { top: 656px; }
.xp { top: 656px; }
/* v80 — lighter header: it takes ~40% less height so the page's weight sits in the content
   top 56 · avatar 80 · name 22 / title 36 · socials 48 · divider 176 · then content (278–885) centred to the nav */
.avatar { top: 56px; width: 80px; height: 80px; }
.id { left: 272px; top: 61px; }
.id__name { font-size: 22px; margin-bottom: 4px; }
.id__title { font-size: 36px; line-height: 1.1; }
.social { top: 72px; width: 48px; height: 48px; border-radius: 12px; }
.social svg { width: 26px; }
.social--x { left: 1648px; } .social--in { left: 1712px; }
.rule { top: 176px; }
/* content: bio 36/48 over its column, row below, story spans the full block height */
.bio { top: 272px; font-size: 36px; line-height: 48px; }
.plhead, .xphead { top: 598px; }
.plist { top: 660px; }
.xp { top: 660px; }
.story { top: 278px; height: 607px; }
.story__lens { height: 567px; }
/* v80 — compact header, more air for the content
   Header 56–144 (avatar 88) · rule 176 · 124 · content 300–861 · 124 · nav ≈986.
   Inside the content: bio → (≈120) → labels → 32 → tiles, so the three big gaps read as one rhythm. */
.avatar { top: 56px; width: 88px; height: 88px; }
.id { left: 272px; top: 58px; }
.id__name { font-size: 22px; margin-bottom: 4px; }
.id__title { font-size: 48px; }
.social { top: 76px; width: 48px; height: 48px; border-radius: 12px; }
.social svg { width: 26px; }
.social--x { left: 1648px; } .social--in { left: 1712px; }
.rule { top: 176px; }
.bio { top: 294px; }
.story { top: 300px; height: 561px; }
.story__lens { height: 521px; }
.plhead, .xphead { top: 590px; }
.plist { top: 632px; }
.xp { top: 636px; }
.bio { font-size: var(--s-l); line-height: 44px; }
/* v82 — Work & Details share About's vertical rhythm
   Details: title sits where About's header sits, its divider on the same line as About's (176), then 124 of air → text → frames → divider → tools.
   (fixes both Details dividers being pulled to 176 by the header rule change) */
.exp__head { top: 92px; }
.rule.exp__rule.exp__rule--a { top: 176px; }
.dt__desc { top: 296px; }
.dt__shots { top: 480px; }
.rule.exp__rule.exp__rule--b { top: 740px; }
.tools { top: 772px; }
.exp__tools-head { top: 794px; }
/* Work: film centred between the top margin (56) and the nav (986); stack + switch on the same centre line */
.feature { top: 224px; }
.mode { top: 446px; }
.rolodex { --rolo-top: -19px; }

/* ════════════════════════════════════════════════════════════════════════════
   v83 — PRINCIPLES PASS (About)
   · Hierarchy / Von Restorff: one focal point per level — title (pixel 48) > bio (28) > labels (14).
   · Gestalt proximity: bio + Playlist/Experience form ONE group (64 inside), with the big air only
     outside the group (above and below it). Story card spans exactly that group (common region).
   · Similarity: the three Experience tiles share one size, one title size and one title position.
   · Fitts / readability: sentence case, 40px line height, playlist neighbours legible.
   ════════════════════════════════════════════════════════════════════════════ */
.bio { text-transform: none; font: 500 28px/40px var(--f2); letter-spacing: -.005em; color: var(--ink-soft); width: 1056px; }
.bio b { color: var(--ink); font-weight: 600; }

/* tiles: one size, one title spec */
.xpt, .xpt--small { width: 185px; height: 225px; top: 0; border-radius: 44px; }
.xpt:nth-child(1) { left: 0; } .xpt:nth-child(2) { left: 232px; } .xpt:nth-child(3) { left: 463px; }
.xpt__t, .xpt--usuals .xpt__t, .xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { left: 29px; top: 30px; max-width: 130px; font-size: 28px; line-height: 1; }
.xpt--side .xpt__img { width: 96px; left: 97px; top: 131px; }
.xpt--side::after { width: 24px; height: 24px; right: 100px; bottom: 82px; }

/* playlist neighbours: readable, lighter blur */
.plblur--1 { -webkit-backdrop-filter: blur(.5px); backdrop-filter: blur(.5px); }
.plblur--2 { -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px); }
.plblur--3 { -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
.plrow:not(.is-cur) .plrow__txt { opacity: .6; }

/* nav in Night: the active pill is a quiet tint, not the brightest object on screen */
:root[data-mode="dark"] .nav__bg { background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
:root[data-mode="dark"] .nav a.is-active { color: var(--ink); }
/* one group, centred between the divider (176) and the nav (986): 156 above · group 497 · 156 below */
.bio { top: 329px; }
.plhead, .xphead { top: 547px; }
.xp { top: 601px; }
.plist { top: 597px; }
.story { top: 335px; height: 491px; }
.story__lens { height: 451px; }
.story__text { bottom: 56px; }
/* v84 — less dead air: the bio carries a bit more size (36/48, still well under the 48px pixel title), so the one group
   fills the content zone with ≈112 above and below instead of 156. Inside the group: 64 bio → labels, 32 labels → tiles. */
.bio { top: 282px; font-size: 36px; line-height: 48px; }
.plhead, .xphead { top: 580px; }
.xp { top: 634px; }
.plist { top: 630px; }
.story { top: 288px; height: 571px; }
.story__lens { height: 531px; }
/* v84 — Side Projects back to the smaller card (151×171, centred on the row), same title style as the others */
.xpt--small { width: 151px; height: 171px; top: 27px; }
.xpt:nth-child(2) { left: 248px; }
.xpt--side .xpt__t, :root[data-mode="dark"] .xpt--side .xpt__t { left: 22px; top: 24px; max-width: 110px; }
.xpt--side .xpt__img { width: 80px; left: 79px; top: 97px; }
.xpt--side::after { width: 22px; height: 22px; right: 78px; bottom: 62px; }
/* v85 — lighter, easier bio: 28/42 at regular weight on a ~60-character measure (cols 1–7, 920px); key phrases stay 600 */
.bio { font: 400 28px/42px var(--f2); letter-spacing: 0; width: 920px; }
.bio b { font-weight: 600; }
.bio { line-height: 44px; top: 282px; }
.plhead, .xphead { top: 530px; }
.xp { top: 584px; }
.plist { top: 580px; }
.story { top: 288px; height: 521px; }
.story__lens { height: 481px; }
/* v86 — expand-card backdrop: blur the page content itself instead of a full-screen backdrop-filter layer.
   The backdrop layer left a faint, semi-transparent edge/band where its blur region ended; element blur has no edge. */
.xpveil { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; inset: -400px -800px; background: color-mix(in srgb, var(--bg) 18%, transparent); }
body.xp-open .view.is-active > *:not(.xpx):not(.xpveil), body.xp-open .nav { filter: blur(6px); transition: filter .45s cubic-bezier(.22,1,.36,1); }
/* v87 — story glass frame rebuilt. The old SVG lens faked a progressive blur with 18 stacked bands, which showed as
   translucent columns and steps (worse while its blur pulsed during a switch). Now: one crisp stroke plus one soft glow,
   both faded top→bottom with a single smooth gradient mask — a true, band-free progression. Nothing blurs during a switch. */
.story__frame { position: absolute; inset: 20px; z-index: 3; pointer-events: none; border-radius: 26px;
  border: 3px solid #ffffffe6;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 34%, #0009 56%, #0003 76%, transparent 94%);
          mask-image: linear-gradient(0deg, #000 0%, #000 34%, #0009 56%, #0003 76%, transparent 94%);
  transition: opacity .9s cubic-bezier(.37,0,.3,1); }
.story__frame::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 4px solid #fff; filter: blur(6px); opacity: .55; }
.story.is-switching .story__frame { opacity: .55; }
/* softer, longer feather on the incoming photo so its leading edge never reads as a line */
.story__slide.is-in { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 420px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 420px), transparent 100%); -webkit-mask-size: 100% calc(100% + 420px); mask-size: 100% calc(100% + 420px); }
.story__slide.is-in.is-back { -webkit-mask-image: linear-gradient(0deg, #000 0, #000 calc(100% - 420px), transparent 100%); mask-image: linear-gradient(0deg, #000 0, #000 calc(100% - 420px), transparent 100%); }
@keyframes st-in {
  0%   { transform: translateY(-22%) scale(1.03); opacity: 0; filter: blur(10px); -webkit-mask-position: 0 -420px; mask-position: 0 -420px; }
  50%  { opacity: 1; filter: blur(3px); }
  100% { transform: none; opacity: 1; filter: blur(0); -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes st-in-back {
  0%   { transform: translateY(22%) scale(1.03); opacity: 0; filter: blur(10px); -webkit-mask-position: 0 0; mask-position: 0 0; }
  50%  { opacity: 1; filter: blur(3px); }
  100% { transform: none; opacity: 1; filter: blur(0); -webkit-mask-position: 0 -420px; mask-position: 0 -420px; }
}
.story__slide.is-in.is-back { -webkit-mask-position: 0 -420px; mask-position: 0 -420px; }
/* v88 — original inner frame (Figma lens with its progressive layer blur) restored exactly.
   Only the switch behaviour changes: no blur/brightness pulse on the lens (that flare made the blur layers look stepped);
   the lens stays perfectly still and just breathes a little in opacity while the photo changes. */
.story__frame { display: none; }
.story__lens--full { display: none; }
.story.is-switching .story__lens:not(.story__lens--full) { animation: lens-breathe 1.3s cubic-bezier(.37,0,.3,1) both; }
@keyframes lens-breathe { 0%, 100% { opacity: 1; } 45% { opacity: .75; } }
/* v89 — new bio runs 5 lines (220): row moves down one line so the group stays together (64 bio → labels) */
.plhead, .xphead { top: 574px; }
.xp { top: 628px; }
.plist { top: 624px; }
.story { height: 565px; }
.story__lens { height: 525px; }
.bio { width: 1056px; }   /* v90: full main column so the longer bio stays at 5 lines */
.bio { width: 920px; }   /* v91: back to the ~60-character reading measure */
/* v91 — 4-line bio: row back up one line (bio → labels 64) */
.plhead, .xphead { top: 530px; }
.xp { top: 584px; }
.plist { top: 580px; }
.story { height: 521px; }
.story__lens { height: 481px; }
/* v92 — bio as a two-tone statement (the first thing people read):
   soft-grey sentence, the ideas that matter lift out in full ink; a quiet accent marker sits under "what should be made". */
.bio { font: 400 30px/44px var(--f2); letter-spacing: -.01em; color: color-mix(in srgb, var(--ink) 48%, transparent); }
.bio b { color: var(--ink); font-weight: 500; }
.bio b:last-of-type { background: linear-gradient(transparent 66%, var(--accent-glow) 66%, var(--accent-glow) 92%, transparent 92%) no-repeat; background-size: 100% 100%; }
/* v93: one highlight rule for every key phrase — full ink at rest, marker sweeps in on all of them together on hover */
.bio b, .bio b:last-of-type { background: linear-gradient(transparent 66%, var(--accent-glow) 66%, var(--accent-glow) 92%, transparent 92%) no-repeat; background-size: 0% 100%; transition: background-size .6s var(--ease); }
.view.is-settled .bio.is-zone-on b { background-size: 100% 100%; }
/* v94: Experience card copy — lead line in full ink, body in soft ink (same two-tone rule as the bio) */
.xpx__d { margin-top: 24px; }
.xpx__lead { display: block; color: inherit; font-weight: 600; margin-bottom: 10px; }
.xpx__copy { display: block; opacity: .72; }
/* v95: scannable Experience card — lead (f2 600, full) → tags (f3 mono label) → two outcome lines (f2, soft) */
.xpx__d { margin-top: 28px; max-width: 580px; }
.xpx__lead { margin-bottom: 0; }
.xpx__tags { display: block; margin-top: 16px; font: 400 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; opacity: .6; white-space: pre; }
.xpx__pts { display: block; margin-top: 24px; }
.xpx__pt { display: block; position: relative; padding-left: 24px; opacity: .72; }
.xpx__pt + .xpx__pt { margin-top: 6px; }
.xpx__pt::before { content: "→"; position: absolute; left: 0; }
/* v101: client list for Side Projects — client (mono label) | what I did (brief), one row each */
.xpx__clients { display: grid; grid-template-columns: 148px 1fr; column-gap: 24px; row-gap: 10px; margin-top: 24px; align-items: baseline; }
.xpx__cn { font: 400 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; opacity: .9; }
.xpx__cd { opacity: .72; }
.xpx__quote { display: block; margin-top: 24px; font-style: italic; opacity: .9; }
.xpx__quote small { display: block; margin-top: 6px; font: 400 var(--t-m)/1 var(--f3); letter-spacing: var(--t-track); text-transform: uppercase; font-style: normal; opacity: .6; }
/* v102: Side Projects credits — 2×2 blocks: client name (f2 600, full) over what I made (soft), no table */
.xpx__clients { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 24px; margin-top: 28px; }
.xpx__cl { display: block; }
.xpx__cn { display: block; font: 600 var(--s-s)/28px var(--f2); letter-spacing: 0; text-transform: none; opacity: 1; }
.xpx__cd { display: block; margin-top: 2px; opacity: .64; }
/* v103: Side Projects — "Selected clients" label → names in one line (f2 600) + soft "and more" → three outcome lines */
.xpx__clients { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 12px; grid-template-columns: none; }
.xpx__cn { display: inline; font: 600 var(--s-s)/28px var(--f2); }
.xpx__more { opacity: .5; }