/* DOVID — final site, shared stylesheet (versions A and B).
   Base: impeccable variant. Hero + floating nav: high-end-visual-design (retyped in Archivo).
   GUAP stacking scene: gpt-taste (fitted to impeccable). About: gpt-taste (square corners). */

:root {
  --ink: #000;
  --paper: #fff;
  --dim: #a3a3a3;      /* 8.4:1 on black */
  --faint: #7d7d7d;    /* 4.9:1 on black, small meta only */
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .42);
  --card: #060606;
  --gutter: clamp(16px, 4.5vw, 56px);
  --space: clamp(96px, 16vw, 200px);
  --nav-top: 12px;
  --nav-h: 58px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-island: cubic-bezier(.32, .72, 0, 1);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
.num { font-variant-numeric: tabular-nums; }

::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 2px; }
html { scrollbar-color: #3a3a3a var(--ink); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #333; border: 3px solid var(--ink); border-radius: 10px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; background: var(--paper); color: var(--ink);
  font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }
.noscript { padding: 24px var(--gutter); color: var(--dim); }

/* ---------- film grain (impeccable) ---------- */
body::after {
  content: '';
  position: fixed; inset: -50%;
  z-index: 90; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(-1%, 4%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ---------- the pupil cursor (impeccable) ---------- */
.has-pupil, .has-pupil * { cursor: none !important; }
.pupil {
  position: fixed; left: 0; top: 0; z-index: 110;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0);
  transition: opacity .25s;
  will-change: transform;
}
.pupil svg { width: 100%; height: 100%; fill: var(--paper); transition: transform .45s var(--ease); overflow: visible; }
.pupil.is-on { opacity: 1; }
.pupil.is-hot svg { transform: scale(1.9) rotate(45deg); }
.pupil.is-blink svg { transform: scaleY(.1); transition-duration: .08s; }
.pupil.is-hot.is-blink svg { transform: scale(1.9, .18) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .pupil svg { transition: none; } }

/* ---------- floating island nav (high-end-visual-design, retyped) ---------- */
.nav {
  position: fixed; top: var(--nav-top); left: 50%; z-index: 60;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 12px 32px -12px rgba(0, 0, 0, .8);
}
.nav__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; }
.nav__mark img { width: 30px; height: 30px; transition: transform .8s var(--ease); }
.nav__mark:hover img { transform: rotate(-12deg) scale(1.08); }
.nav__links { display: none; gap: 2px; }
.nav__links a, .nav__about {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600; font-stretch: 112%;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--dim);
  transition: color .4s var(--ease-island), background-color .4s var(--ease-island);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--paper); background: rgba(255, 255, 255, .08); }
.nav__about { background: var(--paper); color: var(--ink); font-weight: 700; }
.nav__about:hover { background: #e2e2e2; }
.nav__about[aria-current] { box-shadow: inset 0 0 0 2px var(--ink); }
.burger {
  position: relative; width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, .08); cursor: pointer;
}
.burger span {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin-left: -8px; background: var(--paper);
  transition: transform .6s var(--ease-island);
}
.burger span:nth-child(1) { transform: translateY(-3.5px); }
.burger span:nth-child(2) { transform: translateY(3.5px); }
.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .burger { display: none; }
}
.overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--gutter) 48px;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease-island), visibility 0s linear .6s;
}
.menu-open .overlay { opacity: 1; visibility: visible; transition: opacity .6s var(--ease-island), visibility 0s; }
.menu-open, .menu-open body { overflow: hidden; }
.overlay ul { display: grid; gap: 2px; }
.overlay li { overflow: hidden; }
.overlay a {
  display: flex; align-items: baseline; gap: 16px; min-height: 48px; padding: 4px 0;
  font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 10.5vw, 3.5rem); line-height: 1.05; letter-spacing: -.02em; text-decoration: none;
  transform: translateY(110%); opacity: 0;
  transition: transform .8s var(--ease-island), opacity .8s var(--ease-island);
}
.overlay a small { font-size: .75rem; font-weight: 500; font-stretch: 112%; letter-spacing: .12em; color: var(--faint); }
.menu-open .overlay a { transform: none; opacity: 1; }
.menu-open .overlay li:nth-child(2) a { transition-delay: .05s; }
.menu-open .overlay li:nth-child(3) a { transition-delay: .1s; }
.menu-open .overlay li:nth-child(4) a { transition-delay: .15s; }
.menu-open .overlay li:nth-child(5) a { transition-delay: .2s; }
.menu-open .overlay li:nth-child(6) a { transition-delay: .25s; }
@media (min-width: 900px) { .overlay { display: none; } }

/* ---------- buttons (impeccable type) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .875rem; font-weight: 700; font-stretch: 118%;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s, transform .5s var(--ease-island);
}
.btn:hover { border-color: var(--paper); background: rgba(255, 255, 255, .08); }
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid:hover { background: #d9d9d9; border-color: #d9d9d9; }
.btn--big { min-height: 60px; padding: 0 34px; font-size: .95rem; }
.btn:active { transform: scale(.98); }
/* island shape from high-end-visual-design: label + icon in its own circle */
.btn--island { gap: 14px; padding: 0 6px 0 24px; }
.btn--island .ico {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  transition: transform .6s var(--ease-island), background-color .6s var(--ease-island);
}
.btn--island.btn--solid .ico { background: var(--ink); color: var(--paper); }
.btn--island .ico svg { width: 16px; height: 16px; fill: currentColor; }
.btn--island:hover .ico { transform: translate(3px, -1px) scale(1.06); }
.i { width: 20px; height: 20px; flex: none; }
.i--out { width: 14px; height: 14px; opacity: .7; }

/* ---------- hero (high-end-visual-design layout) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 96px var(--gutter) 72px;
  text-align: center;
}
.hero::before {
  content: ''; position: absolute; inset: -20% -20% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .06), transparent 70%);
}
.hero__inner { width: 100%; max-width: 1100px; display: grid; justify-items: center; }
.hero__media { position: relative; width: min(78vw, 52svh, 520px); aspect-ratio: 1; mix-blend-mode: screen; } /* black loop melts into the page */
.hero__poster, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__title { width: min(88vw, 760px); margin-top: clamp(-16px, -2vw, 0px); }
.hero__wordmark { width: 100%; height: auto; }
.hero__tagline {
  margin: clamp(16px, 2.6vw, 26px) 0 clamp(26px, 4vw, 36px);
  font-size: clamp(.8125rem, 2.8vw, 1rem); font-weight: 500; font-stretch: 125%;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px;
  display: none; justify-content: space-between;
  font-size: .75rem; font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
@media (min-width: 768px) { .hero__foot { display: flex; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__media { animation: rise-in 1.6s var(--ease) both; }
  .hero__title { animation: blur-in 1.3s var(--ease) .15s both; }
  .hero__tagline, .hero__cta { animation: rise-in 1.1s var(--ease) .3s both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes blur-in { from { opacity: 0; filter: blur(10px); transform: translateY(16px); } }

/* ---------- wake: grayscale until looked at (impeccable) ---------- */
.wake { position: relative; display: block; overflow: hidden; background: #0b0b0b; }
.wake img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.86);
  transition: filter .7s var(--ease), transform 1.2s var(--ease);
}
a:hover .wake img, a:focus-visible .wake img, a.wake:hover img, a.wake:focus-visible img {
  filter: none;
  transform: scale(1.035);
}
@media (prefers-reduced-motion: reduce) { .wake img { transition: filter .2s; } a:hover .wake img, a.wake:hover img { transform: none; } }

/* ---------- section heads ---------- */
.head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  padding-bottom: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.head__title, .feature__title, .beats__title, .about-title {
  font-family: var(--display);
  font-weight: 800; font-stretch: 125%;
  text-transform: uppercase;
  line-height: .92; letter-spacing: -.02em;
  text-wrap: balance;
}
.head__title { font-size: clamp(2.5rem, 9vw, 6rem); }
.head__note { color: var(--dim); font-size: .9375rem; max-width: 38ch; }

section { padding: var(--space) var(--gutter) 0; }

/* ---------- GUAP: backdrop wall + stacking cards ---------- */
.guap { position: relative; padding: 0; overflow: clip; }
.guap__inner { position: relative; z-index: 1; padding: var(--space) var(--gutter) 0; pointer-events: none; }
.guap__inner .stack, .guap__inner .sound a, .guap__inner .idx { pointer-events: auto; }

/* the TikTok wall: a sticky, viewport-tall backdrop that drifts behind the cards */
.wall {
  position: sticky; top: 0; z-index: 0;
  height: 100svh; margin-bottom: -100svh;
  overflow: hidden; overflow: clip;
}
.wall::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(#000 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .35) 78%, #000 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(0, 0, 0, .55), transparent 80%);
}
.wall__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  height: 100%; padding: 0 8px;
}
@media (min-width: 640px) { .wall__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wall__cols { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding: 0 12px; } }
.wall__col { min-width: 0; overflow: hidden; overflow: clip; }
.wall__col:nth-child(n+4) { display: none; }
@media (min-width: 640px) { .wall__col:nth-child(n+4) { display: block; } .wall__col:nth-child(n+6) { display: none; } }
@media (min-width: 1100px) { .wall__col:nth-child(n+6) { display: block; } }
.wall { --wg: 8px; }
@media (min-width: 1100px) { .wall { --wg: 12px; } }
.wall__track { display: grid; gap: var(--wg); will-change: transform; }
.wall__group { display: grid; gap: inherit; }
.wall__col:nth-child(odd) .wall__track { margin-top: -140px; }
@media (prefers-reduced-motion: no-preference) {
  .wall__track { animation: drift var(--dur, 90s) linear infinite; }
  .wall__col:nth-child(even) .wall__track { animation-direction: reverse; }
  .wall:hover .wall__track, .wall:focus-within .wall__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .wall__group[aria-hidden="true"], .wall__tile.is-fill { display: none; }
  .wall__col:nth-child(odd) .wall__track { margin-top: 0; }
}
@keyframes drift { to { transform: translateY(calc(-50% - var(--wg) / 2)); } }
.wall__tile a {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #0b0b0b;
  text-decoration: none; opacity: .42;
  transition: opacity .6s var(--ease);
}
.wall__tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.8); transition: filter .6s var(--ease); }
.wall__tile a:hover, .wall__tile a:focus-visible { opacity: 1; }
.wall__tile a:hover img, .wall__tile a:focus-visible img { filter: none; }
.wall__tile a:focus-visible { outline-offset: -3px; }
.wall__tag {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: grid; gap: 1px;
  font-size: .6875rem; line-height: 1.25; font-stretch: 112%; letter-spacing: .02em; color: var(--dim);
  overflow-wrap: anywhere;
}
.wall__tag b { color: var(--paper); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.stack { position: relative; display: grid; gap: 24px; max-width: 1120px; margin: 0 auto; }
.stack-card {
  position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 14px);
  background: var(--card); border: 1px solid var(--line);
  padding: clamp(20px, 4vw, 48px);
  min-height: min(76svh, 680px);
  display: grid; gap: 28px; align-content: space-between;
  transform-origin: 50% 0;
  overflow: hidden;
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, .9);
}
.stack-card:nth-child(2) { top: calc(var(--nav-top) + var(--nav-h) + 26px); }
.stack-card:nth-child(3) { top: calc(var(--nav-top) + var(--nav-h) + 38px); }
.stack-card:nth-child(4) { top: calc(var(--nav-top) + var(--nav-h) + 50px); }
@media (prefers-reduced-motion: reduce) { .stack-card { position: relative; top: auto !important; } }

.feature__cover { width: 100%; max-width: min(100%, 48svh); aspect-ratio: 1; }
.feature__title { font-size: clamp(4.5rem, 22vw, 6rem); }
.feature__meta { display: grid; gap: 4px; }
.feature__artist { margin-top: 14px; font-size: clamp(1.25rem, 3.4vw, 1.625rem); font-weight: 600; font-stretch: 112%; }
.feature__role { color: var(--dim); font-stretch: 112%; letter-spacing: .04em; }
@media (min-width: 880px) {
  .stack-card--cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 5vw, 72px); }
  .feature__cover { max-width: 100%; }
  .feature__title { font-size: clamp(5rem, 9vw, 6rem); }
}
.feature__story {
  max-width: 22ch;
  font-size: clamp(1.625rem, 5vw, 3rem); line-height: 1.1;
  font-weight: 600; font-stretch: 108%; letter-spacing: -.015em;
  text-wrap: balance;
}
.views { display: grid; gap: 6px; }
.views__num { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(2.75rem, 11vw, 5.5rem); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.views__label { color: var(--dim); font-size: .8125rem; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin: 0; background: var(--line); border: 1px solid var(--line);
}
.facts div { background: var(--card); padding: 16px; min-width: 0; }
.facts dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 4px 0 0; font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 880px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.listen__title { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 7vw, 4rem); line-height: .92; letter-spacing: -.02em; }
.listen { display: grid; gap: 12px; }
.listen a {
  display: flex; align-items: center; gap: 16px;
  min-height: 80px; padding: 0 clamp(18px, 3vw, 32px);
  border: 1px solid var(--line-strong);
  text-decoration: none; font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.25rem, 4.4vw, 2.25rem); letter-spacing: -.01em;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.listen a .i { width: clamp(22px, 4vw, 32px); height: clamp(22px, 4vw, 32px); }
.listen a .i--out { margin-left: auto; width: 20px; height: 20px; transition: transform .4s var(--ease); }
.listen a:hover { background: var(--paper); color: var(--ink); }
.listen a:hover .i--out { transform: translate(3px, -3px); }

/* Jungkook highlight: the card that lands last */
.stack-card--jk { align-content: center; }
.jk { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; }
@media (min-width: 760px) { .jk { grid-template-columns: auto minmax(0, 1fr); } }
.jk__poster {
  position: relative; display: block; justify-self: center;
  height: min(40svh, 560px); aspect-ratio: 9 / 16; max-width: 100%;
  overflow: hidden; background: #0b0b0b; text-decoration: none;
  border: 1px solid var(--line-strong);
}
.jk__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .7s var(--ease); filter: grayscale(1) contrast(1.06); }
.jk__poster:hover img, .jk__poster:focus-visible img { filter: none; transform: scale(1.03); }
.jk__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .75)); pointer-events: none; }
.jk__mark {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(0, 0, 0, .7);
  font-size: .6875rem; font-weight: 700; font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase;
}
.jk__mark svg { width: 14px; height: 14px; }
.jk__play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .5);
  transition: transform .6s var(--ease-island), background-color .6s var(--ease-island), color .6s var(--ease-island);
}
.jk__play svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.jk__poster:hover .jk__play, .jk__poster:focus-visible .jk__play { transform: scale(1.1); background: var(--paper); color: var(--ink); }
.jk__handle {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  padding: 6px 12px; background: var(--paper); color: var(--ink);
  font-size: .875rem; font-weight: 800; font-stretch: 118%; letter-spacing: .02em;
}
.jk__body { display: grid; gap: 20px; align-content: center; min-width: 0; }
.jk__caption { font-size: clamp(1.5rem, 4.4vw, 2.75rem); line-height: 1.08; font-weight: 600; font-stretch: 108%; letter-spacing: -.015em; max-width: 18ch; text-wrap: balance; }
.jk__stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; }
.jk__stats dd { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(2rem, 7vw, 3.75rem); line-height: .95; font-variant-numeric: tabular-nums; }
.jk__stats dt { margin-top: 6px; color: var(--dim); font-size: .75rem; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.jk__stats div { display: flex; flex-direction: column-reverse; }
.jk__meta { color: var(--faint); font-size: .8125rem; font-stretch: 112%; letter-spacing: .06em; }
.jk__body .btn { justify-self: start; }

.sound {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px;
  max-width: 1120px; margin: clamp(40px, 7vw, 72px) auto 0; padding-bottom: clamp(56px, 10vw, 120px);
  text-align: center;
}
.sound a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0, 0, 0, .7);
  font-weight: 700; font-stretch: 112%; text-decoration: none;
  transition: background-color .3s, color .3s;
}
.sound a:hover { background: var(--paper); color: var(--ink); }
.sound a .num { font-stretch: 125%; font-weight: 800; }
.sound small { color: var(--faint); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-stretch: 112%; }

/* ---------- credits (impeccable) ---------- */
.grid {
  display: grid; gap: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile a, .tile__static { display: flex; flex-direction: column; text-decoration: none; min-height: 44px; height: 100%; }
.tile__art { aspect-ratio: 1; margin-bottom: 12px; }
.tile__title { font-weight: 700; font-stretch: 108%; line-height: 1.2; overflow-wrap: anywhere; }
.tile__artist { margin-top: 2px; color: var(--dim); font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.tile__role { margin-top: 6px; color: var(--faint); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-stretch: 112%; }
.tile a:hover .tile__title { text-decoration: underline; }
@media (hover: hover) {
  .grid:has(a:hover) .tile a:not(:hover) .tile__art { opacity: .45; }
  .tile__art { transition: opacity .5s var(--ease); }
}
.code { display: none; }

/* ---------- brand work (impeccable) ---------- */
.work__list {
  display: grid; gap: clamp(28px, 4vw, 44px) clamp(16px, 2.4vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .job--lead { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .work__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.job a { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.job__thumb { aspect-ratio: 16 / 9; margin-bottom: 14px; order: 0; }
.job__brand { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-stretch: 112%; order: 2; margin-top: 4px; }
.job__title { font-size: 1.125rem; font-weight: 700; font-stretch: 108%; line-height: 1.25; order: 1; }
.job--lead .job__title { font-size: clamp(1.375rem, 3vw, 2rem); font-stretch: 118%; }
.job__views { order: 3; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--faint); font-size: .875rem; }
.job__views .num { color: var(--paper); font-weight: 600; }
.job a:hover .job__title { text-decoration: underline; }
@media (min-width: 1000px) {
  .job--lead a {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto; column-gap: clamp(20px, 3vw, 40px);
  }
  .job--lead .job__thumb { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .job--lead .job__title { grid-column: 2; grid-row: 2; }
  .job--lead .job__brand { grid-column: 2; grid-row: 3; }
  .job--lead .job__views { grid-column: 2; grid-row: 4; }
  .job--lead .code { grid-column: 2; grid-row: 1; align-self: end; }
}

/* ---------- beats (impeccable) ---------- */
.beats { text-align: center; display: flex; flex-direction: column; align-items: center; }
.beats__star {
  width: clamp(56px, 10vw, 96px); height: auto; aspect-ratio: 1; fill: var(--paper);
  margin-bottom: clamp(24px, 4vw, 40px);
}
@media (prefers-reduced-motion: no-preference) { .beats__star { animation: glance 8s var(--ease) infinite; } }
@keyframes glance {
  0%, 38% { transform: translateX(0) scaleY(1); }
  44%, 60% { transform: translateX(-14px) scaleY(1); }
  66% { transform: translateX(-14px) scaleY(.08); }
  70%, 82% { transform: translateX(10px) scaleY(1); }
  90%, 100% { transform: translateX(0) scaleY(1); }
}
.beats__title { font-size: clamp(2.5rem, 10.5vw, 6rem); max-width: 12ch; }
.beats__copy { margin: clamp(20px, 3vw, 28px) auto clamp(28px, 4vw, 40px); max-width: 44ch; color: var(--dim); font-size: 1.125rem; }
.beats__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 559px) { .btn--big { padding: 0 22px; letter-spacing: .03em; font-size: .875rem; } }

/* ---------- contact (impeccable) ---------- */
#contact-title { margin-bottom: clamp(20px, 3vw, 32px); }
.contact__mail {
  display: inline-block; max-width: 100%; min-height: 44px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 7.4vw, 5rem); font-weight: 700; font-stretch: 118%;
  line-height: 1.05; letter-spacing: -.02em;
  text-decoration: none; overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 6px;
  transition: background-size .6s var(--ease);
}
.contact__mail:hover, .contact__mail:focus-visible { background-size: 100% 2px; }
.contact__links { display: flex; flex-wrap: wrap; gap: 0 clamp(8px, 3vw, 36px); margin-top: clamp(28px, 4vw, 44px); }
.contact__links a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding-right: 8px;
  font-weight: 600; font-stretch: 112%; text-decoration: none; color: var(--dim);
  transition: color .2s;
}
.contact__links a:hover { color: var(--paper); }

/* ---------- footer (impeccable) ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: var(--space);
  padding: 28px var(--gutter) 36px;
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-stretch: 112%;
}
.foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--dim); text-decoration: none; }
.foot p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.foot a:hover { color: var(--paper); }

/* ---------- reveals (content visible unless JS opts in) ---------- */
.reveals .reveal, .reveals .job {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveals .tile {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease) calc(var(--i, 0) * 60ms), transform .7s var(--ease) calc(var(--i, 0) * 60ms);
}
.reveals .reveal-clip {
  clip-path: inset(0 0 100% 0); transform: translateY(.18em);
  transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveals .in { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); }

/* ---------- About (gpt-taste layout, restyled; no rounded corners anywhere) ---------- */
body[data-page="about"] *, body[data-page="about"] *::before, body[data-page="about"] *::after,
body[data-page="about"]::before, body[data-page="about"]::after { border-radius: 0 !important; }
[data-page="about"] ::-webkit-scrollbar-thumb { border-radius: 0; }
.about-hero { padding: calc(var(--nav-top) + var(--nav-h) + clamp(48px, 10vw, 120px)) var(--gutter) clamp(48px, 8vw, 96px); }
.back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none;
  color: var(--dim); font-size: .8125rem; font-weight: 600; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase;
}
.back .i { width: 16px; height: 16px; transform: rotate(-135deg); }
.back:hover { color: var(--paper); }
.about-kicker {
  margin-top: 32px;
  font-size: clamp(.8125rem, 2.8vw, 1rem); font-weight: 500; font-stretch: 125%;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.about-title { margin-top: 16px; font-size: clamp(3.5rem, 17vw, 9rem); line-height: .88; }
.about-base { margin-top: 18px; color: var(--faint); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; font-stretch: 118%; }
.about-body { padding-top: 0; }
.about-grid { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: 1fr; }
.about-photo { overflow: hidden; background: #0b0b0b; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; aspect-ratio: 9 / 14; filter: grayscale(1) contrast(1.06); }
.about-copy { display: grid; gap: 36px; align-content: start; }
.about-lede {
  font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.32; font-weight: 500; letter-spacing: -.01em; max-width: 34ch;
}
.about-links { display: flex; flex-wrap: wrap; gap: 10px; }
.about-photo--sub { max-width: 78%; justify-self: end; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .about-photo--main { grid-row: span 2; position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 24px); }
  .about-photo--main img { max-height: calc(100svh - var(--nav-top) - var(--nav-h) - 48px); aspect-ratio: auto; }
  .about-photo--sub { max-width: 58%; }
}
.about-next { padding-top: clamp(64px, 10vw, 128px); }
.about-next .beats__row { justify-content: flex-start; }
@media (min-width: 760px) { .jk__poster { height: min(56svh, 560px); } }