/* VELVET RECORDS — light gallery grey, ink panels, one scarlet. Grotesk + italic serif. */
:root {
  --bg: #f5f4f1; --g: #e7e5e1; --g2: #efeeea; --k: #0f0e0e; --k2: #1b1a1a; --ink: #121111; --mute: #75716c;
  --red: #e3120b; --red2: #b50c06; --white: #fff;
  --R: 40px; --pad: clamp(16px, 2.2vw, 32px);
  --sans: 'Hanken Grotesk', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; --mono: 'DM Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.65, 0, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
.wrap { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--red); letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.kk { margin: 0 0 18px; color: var(--mute); }
.h1 { font-weight: 500; font-size: clamp(42px, 5.6vw, 92px); line-height: .98; letter-spacing: -.045em; margin: 0 0 22px; }
.h1 em { font-size: 1.08em; letter-spacing: -.02em; }
.h2 { font-weight: 500; font-size: clamp(34px, 4vw, 64px); line-height: 1; letter-spacing: -.04em; margin: 0; }
.h2 em { font-size: 1.08em; }
.h3 { font-weight: 600; font-size: 26px; letter-spacing: -.02em; margin: 1.6em 0 .4em; }
.lede { font-size: clamp(16px, 1.25vw, 19px); max-width: 46ch; color: #3c3a38; margin: 0 0 28px; }

.wrap { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad); }
main { display: block; }

/* ---------- buttons ---------- */
.b { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 26px; border-radius: 99px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .35s var(--ease), background .3s, color .3s; position: relative; }
.b:hover { transform: translateY(-2px); }
.b--red { background: var(--red); color: #fff; }
.b--red:hover { background: var(--red2); }
.b--ink { background: var(--ink); color: #fff; }
.b--line { border: 1.5px solid var(--ink); }
.b--line:hover { background: var(--ink); color: #fff; }
.b--white { background: #fff; color: var(--ink); }
.b--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.b__pl { width: 40px; height: 40px; border-radius: 50%; background: var(--red); margin-right: -18px; position: relative; flex: none; }
.b__pl::after { content: ''; position: absolute; left: 15px; top: 12px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.b--red .b__pl { background: #fff; }
.b--red .b__pl::after { border-left-color: var(--red); }
.b--sm .b__pl { width: 30px; height: 30px; margin-right: -12px; }
.b--sm .b__pl::after { left: 11px; top: 8px; border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }
.lk { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pill { display: inline-block; align-self: flex-start; border: 1.5px solid var(--ink); border-radius: 99px; padding: 5px 12px; font-size: 11px; }
.pill--k { border-color: #fff; color: #fff; }
.tag { display: inline-block; background: var(--red); color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 10px; }

/* ---------- nav ---------- */
.nv { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 88px; position: relative; z-index: 30; }
.lg { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.lg em { font-size: 21px; margin-left: -4px; }
.lg__d { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, #fff 0 2px, var(--k) 3px 8px, var(--red) 9px); animation: spin 2.4s linear infinite; position: relative; }
.lg__d::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 30deg, rgba(255,255,255,.45) 45deg, transparent 60deg 210deg, rgba(255,255,255,.35) 225deg, transparent 240deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.nv__c { display: flex; gap: 34px; }
.nv__a { font-size: 14px; font-weight: 500; position: relative; padding: 6px 12px; border-radius: 99px; transition: background .3s, color .3s; }
.nv__a:hover { background: var(--g); }
.nv__a[aria-current] { background: var(--k); color: #fff; }
.nv__r { display: flex; align-items: center; gap: 18px; }
.nv__m { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.nv__m i { display: block; width: 18px; height: 2px; background: currentColor; margin: -2px 0; }
.nv__m i + i { width: 12px; margin-left: -28px; transform: translateY(6px); }

/* ---------- loader ---------- */
.pre { position: fixed; inset: 0; z-index: 100; background: var(--red); display: grid; place-items: center; transition: clip-path 1s var(--ease); clip-path: circle(150% at 50% 50%); color: #fff; }
body.ready .pre { clip-path: circle(0% at 50% 50%); }
.pre__in { display: grid; justify-items: center; gap: 22px; }
.pre__lab { width: 180px; height: 180px; border-radius: 50%; background: var(--k); display: grid; place-items: center; position: relative; transform: rotate(calc(var(--pl, 0) * 900deg)); box-shadow: 0 0 0 26px rgba(0,0,0,.12), 0 0 0 54px rgba(0,0,0,.08); }
.pre__lab span { font: italic 48px var(--serif); color: var(--red); }
.pre__lab::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--red); top: 50%; left: 50%; margin: -5px; }
.pre__n { font-size: 14px; } .pre__n b { font: 500 56px var(--sans); letter-spacing: -.04em; text-transform: none; }
.pre__t { opacity: .8; }

/* ---------- page transition: a red disc grows from where you clicked ---------- */
.td { position: fixed; inset: 0; z-index: 90; background: var(--red); color: #fff; display: grid; place-content: center; text-align: center; pointer-events: none; clip-path: circle(0 at var(--tx, 50%) var(--ty, 50%)); transition: clip-path .85s var(--ease); }
.td__t { font: italic clamp(60px, 10vw, 170px)/1 var(--serif); color: #fff; letter-spacing: -.02em; opacity: 0; transform: translateY(30px); transition: .6s .25s var(--ease); }
.td__s { margin-top: 18px; opacity: .8; }
body.leaving .td { clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%)); }
body.leaving .td__t { opacity: 1; transform: none; }
body.arriving .td { clip-path: circle(150% at 50% 50%); transition: none; }
body.arriving .td__t { opacity: 1; transform: none; transition: none; }
body.arriving.arrived .td { clip-path: circle(0 at 50% 50%); transition: clip-path .9s var(--ease); }
body.arriving.arrived .td__t { opacity: 0; transition: .4s; }

/* ---------- menu ---------- */
.mn { position: fixed; inset: 0; z-index: 80; padding: 12px; pointer-events: none; }
.mn__in { height: 100%; background: var(--red); color: #fff; border-radius: var(--R); display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; padding: 30px 40px; clip-path: inset(0 0 100% 0 round var(--R)); transition: clip-path .8s var(--ease); overflow: auto; }
.mn.open { pointer-events: auto; }
.mn.open .mn__in { clip-path: inset(0 0 0 0 round var(--R)); }
.mn__l { display: flex; flex-direction: column; }
.mn__h { display: flex; justify-content: space-between; color: rgba(255,255,255,.75); margin-bottom: 18px; }
.mn__x { color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 99px; padding: 8px 14px; }
.mn ol { list-style: none; margin: 0; padding: 0; flex: 1; }
.mn__a { display: grid; grid-template-columns: 44px auto 1fr; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.mn__a b { font-weight: 500; font-size: clamp(26px, 3.1vw, 46px); letter-spacing: -.04em; line-height: 1.12; transition: transform .4s var(--ease), color .3s; }
.mn__a em { font-size: 22px; opacity: 0; transform: translateX(-10px); transition: .4s var(--ease); }
.mn__a span { color: rgba(255,255,255,.6); }
.mn__a em { color: #fff; }
.mn__a:hover b { transform: translateX(10px); color: #fff; }
.mn__a:hover em { opacity: 1; transform: none; }
.mn__f { display: flex; flex-wrap: wrap; gap: 22px; color: rgba(255,255,255,.75); padding-top: 18px; }
.mn__f a:hover { color: #fff; }
.mn__r { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.mn__r .mo { flex: 1; min-height: 0; }
.mn__cap { margin: 0; font-size: 28px; } .mn__cap em { color: #fff; }

/* ---------- the signature: tiles that melt from squares to circles ---------- */
.mo { display: grid; grid-template-columns: var(--gc, repeat(var(--cols), 1fr)); grid-template-rows: repeat(var(--rows), 1fr); gap: var(--gap, 8px); position: relative; }
.mo { transform-style: preserve-3d; transform: rotateX(var(--mx, 0deg)) rotateY(var(--my, 0deg)); transition: transform .8s var(--ease); }
.mo i { display: block; position: relative; min-width: 0; min-height: 0; border-radius: calc(var(--rad, 22) * 1%); background-color: var(--red); background-repeat: no-repeat;
  transform: rotateY(var(--ry, 0deg)) translateZ(var(--z, 0px)) scale(var(--s, 1)); will-change: border-radius, transform;
  box-shadow: 0 14px 22px -16px rgba(150, 10, 0, .4); }
/* each tile: a soft, matte cushion — a fine bright rim on top, a little depth at the bottom */
.mo i::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -10px 18px -10px rgba(60, 0, 0, .28), inset 0 10px 18px -12px rgba(255,255,255,.18); }
.mo:not(.mo--live) i { transition: border-radius .7s var(--ease), transform .7s var(--ease); }
.mo--live { transition: none; }
.hero__r, .ph__r, .lyp__l, .cta__r, .st, .feat__i, .jl__i, .gal figure, .story figure, .arl__i, .prs__i, .mn__r { perspective: 1500px; }
.mo--hero { height: min(78vh, 760px); --gap: 7px; --gc: 1fr 1fr 1fr .72fr .44fr .26fr; }
.mo--hero i { transform: perspective(900px) rotateY(calc((1 - var(--e, 1)) * 100deg)) translateZ(var(--z, 0px)) scale(calc(var(--s, 1) * (.55 + .45 * var(--e, 1)))); opacity: var(--e, 1); }
.mo--menu { --gap: 6px; }
.mo--card { aspect-ratio: 3 / 2; --gap: 5px; }
.mo--wide { aspect-ratio: 16 / 10; --gap: 6px; }
.mo--tall { aspect-ratio: 3 / 4; --gap: 6px; }
.mo--ph { height: min(62vh, 600px); --gap: 8px; }
.mo--art { aspect-ratio: 3 / 4; --gap: 6px; }
.mo--art-h { aspect-ratio: 16 / 7; --gap: 8px; }
.mo--cta { aspect-ratio: 1; --gap: 7px; }
a:hover > .mo:not(.mo--live) i, .mo.melt i { --rad: 50; --s: .94; --z: 18px; }
a:hover > .mo:not(.mo--live) i:nth-child(2n), .mo.melt i:nth-child(2n) { transition-delay: .05s; }

/* ---------- whole photos (cards, page heads) ---------- */
.pic { position: relative; overflow: hidden; border-radius: 30px; background: var(--g); box-shadow: 0 26px 40px -30px rgba(120, 20, 0, .45); }
.pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
a:hover .pic img, .pic:hover img { transform: scale(1.05); }
.pic.mo--ph { border-radius: var(--R); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 54px); padding: 12px 0 30px; align-items: start; }
.hero__h { font-size: clamp(44px, 5.3vw, 88px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cd { border-radius: 30px; padding: 20px 22px 22px; position: relative; min-height: 230px; display: flex; flex-direction: column; transition: transform .5s var(--ease); }
.cd:hover { transform: translateY(-6px); }
.cd h3 { margin: auto 0 8px; font-size: 25px; line-height: 1.05; font-weight: 400; }
.cd h3 em { color: inherit; }
.cd p { margin: 0; font-size: 14px; line-height: 1.45; }
.cd--g { background: var(--g); }
.cd--k { background: var(--red); color: #fff; box-shadow: 0 30px 50px -28px rgba(200, 10, 0, .7); }
.cd--k p { color: rgba(255,255,255,.88); }
.cd__ar { position: absolute; right: 20px; top: 16px; font-size: 22px; transition: transform .4s var(--ease); }
.cd:hover .cd__ar { transform: rotate(45deg); }
.hero__r { position: relative; }
.hero__dock { position: absolute; width: clamp(240px, 23vw, 380px); aspect-ratio: 1; left: -13%; bottom: -12%; z-index: 2; }
.np { position: absolute; right: 18px; top: 36px; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border-radius: 22px; background: rgba(255,255,255,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 40px -20px rgba(120, 10, 0, .5); transform: translateZ(60px); }
.np div { display: grid; } .np b { font-weight: 600; font-size: 15px; } .np .mono { font-size: 10px; color: var(--mute); }
.np__eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.np__eq i { width: 4px; background: var(--red); border-radius: 2px; animation: eqb 1s ease-in-out infinite alternate; }
.np__eq i:nth-child(2) { animation-delay: -.3s; } .np__eq i:nth-child(3) { animation-delay: -.6s; } .np__eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eqb { from { height: 20%; } to { height: 100%; } }
.np__pl { width: 42px; height: 42px; border-radius: 50%; background: var(--red); position: relative; }
.np__pl::after { content: ''; position: absolute; left: 16px; top: 13px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.hero__badge { position: absolute; left: 30px; top: -18px; z-index: 4; width: 112px; height: 112px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; text-align: center; transform: rotate(-10deg) translateZ(80px); box-shadow: 0 20px 30px -14px rgba(160, 10, 0, .7), inset 0 3px 2px rgba(255,255,255,.5), inset 0 -8px 14px rgba(80,0,0,.35); font: italic 24px/1 var(--serif); }
.hero__badge small { display: block; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.hero__dock .dock { width: 100%; height: 100%; }
.hero__cap { display: flex; justify-content: space-between; gap: 10px; color: var(--mute); margin: 14px 0 0; padding-left: 40%; }

/* ---------- marquee ---------- */
.mq { overflow: hidden; background: var(--red); color: #fff; border-radius: 99px; margin: 26px 0; }
.mq__t { display: flex; width: max-content; animation: mq 34s linear infinite; }
.mq span { font: italic 30px/62px var(--serif); padding: 0 26px; white-space: nowrap; }
.mq i { width: 22px; height: 22px; border-radius: 50%; align-self: center; background: radial-gradient(circle, #fff 0 2px, var(--k) 3px 6px, #fff 7px); flex: none; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.sx { padding: clamp(50px, 7vw, 110px) 0 0; }
.sh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 30px; margin-bottom: 34px; }
.sh .kk { width: 100%; margin: 0 0 -8px; }
.sh .h2 { max-width: 15ch; }
.sh__dk { flex: 1; align-self: stretch; display: flex; justify-content: flex-end; min-width: 120px; }
.sh__dk .dock { width: clamp(150px, 15vw, 230px); aspect-ratio: 1; margin: -40px 20px -30px 0; }
.lyp__l { position: relative; }
.mo--sq { aspect-ratio: 1; --gap: 7px; }
.lyp__dk { position: absolute; width: 62%; aspect-ratio: 1; right: -12%; bottom: -10%; }
.lyp__dk .dock, .cta__dk .dock { width: 100%; height: 100%; }
.cta__r { position: relative; }
.cta__dk { position: absolute; width: 70%; aspect-ratio: 1; left: -30%; bottom: -16%; }
/* the next three club records, fanned out like sleeves on a table; the record peeks out of each */
.fan { position: relative; height: 440px; }
.sl { position: absolute; left: 44%; top: 50%; width: 230px; aspect-ratio: 1; transform: translate(-50%, -50%) translate(calc((var(--i) - 1) * 56px), calc((var(--i) - 1) * 84px)) rotate(calc((var(--i) - 1) * -3deg)); transition: transform .8s var(--ease); }
.cta:hover .sl { transform: translate(-50%, -50%) translate(calc((var(--i) - 1) * 70px), calc((var(--i) - 1) * 96px)) rotate(calc((var(--i) - 1) * -5deg)); }
.sl__d { position: absolute; inset: 5%; border-radius: 50%; background: url(../img/vinyl/disc-s.webp) center / cover; transform: translateX(36%) rotate(calc(var(--i) * 70deg)); filter: drop-shadow(0 8px 12px rgba(80,0,0,.35)) brightness(1.25); transition: transform .8s var(--ease); }
.cta:hover .sl__d { transform: translateX(48%) rotate(calc(var(--i) * 70deg + 120deg)); }
.sl__f { position: absolute; inset: 0; background: #fbf9f5; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; color: var(--ink); box-shadow: 0 24px 40px -18px rgba(90, 0, 0, .55), inset 0 2px 0 #fff; }
.sl__f .mono { font-size: 10px; color: var(--mute); }
.sl__f b { font-weight: 400; font-size: 32px; line-height: 1; }
.sl__f b + .mono { margin-top: auto; }
.sl__st { position: absolute; right: -14px; top: -14px; width: 74px; height: 74px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; text-align: center; font: 500 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 10px; transform: rotate(12deg); }

/* ---------- now spinning: one light panel — tracklist, the record, the album ---------- */
.ns { display: grid; grid-template-columns: 1fr minmax(0, .95fr) .9fr; gap: clamp(20px, 3vw, 50px); align-items: center; margin-top: 40px; background: #fff; border-radius: var(--R); padding: clamp(24px, 3.4vw, 50px); box-shadow: 0 40px 70px -56px rgba(120, 20, 0, .4); }
.ns__tabs { display: flex; gap: 22px; color: var(--mute); margin-bottom: 24px; }
.ns__tabs .on { color: var(--ink); }
.ns__who { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ns__av { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #f6f1e9 0 22%, #9d0a06 23% 30%, #c8100a 31% 100%); }
.ns__who div { display: grid; } .ns__who b { font-size: 19px; font-weight: 600; } .ns__who span.mono { color: var(--mute); font-size: 11px; }
.ns__c { position: relative; aspect-ratio: 1; }
.ns__plat { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, #f3f1ed 0 55%, #ebe8e3 70%, #f6f4f1 71%); }
.ns__c .dock { position: absolute; inset: 0; }
.ns__k { color: var(--mute); margin: 0 0 12px; }
.ns__h { margin: 0 0 14px; font-weight: 600; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
.ns__h em { font-size: 52px; font-weight: 400; }
.ns__txt { margin: 0 0 18px; font-size: 15px; color: #4f4c49; }
.ns__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 0 0 22px; }
.ns__dl div { padding: 10px 0; border-top: 1px solid #ebe8e3; }
.ns__dl dt { color: var(--mute); font-size: 10px; } .ns__dl dd { margin: 2px 0 0; font-weight: 500; }
.ns__btns { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ---------- tracklist ---------- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 30px 26px 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; font-size: 15px; transition: background .3s; cursor: pointer; }
.tl li b { font-weight: 500; }
.tl li .mono { opacity: .6; font-size: 11px; }
.tl li:hover { background: rgba(127, 127, 127, .14); }
.tl li.on { background: var(--red); color: #fff; }
.ns .tl li.on { background: var(--red); color: #fff; }
.tl__pl { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity: .6; }
.tl li.on:not(.sound) .tl__pl { border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; width: 0; height: 0; background: none; }
.tl li.on.sound .tl__pl { border: 0; width: 12px; height: 12px; opacity: 1; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px); }
.al .tl li { border-bottom: 1px solid #d5d3cf; border-radius: 0; }
.al .tl li.on { border-radius: 12px; }

/* ---------- record sleeves: square, record slides out, tiles go round ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 18px; overflow-x: auto; padding: 4px 0 34px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.rail--2 { grid-auto-columns: minmax(260px, 340px); }
.cv { display: block; scroll-snap-align: start; }
.cv__sq { position: relative; aspect-ratio: 1; }
.cv__sq img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; transition: border-radius .7s var(--ease), transform .7s var(--ease); }
.cv__disc { position: absolute; inset: 4%; border-radius: 50%; background: url(../img/vinyl/disc-s.webp) center / cover; transition: transform .8s var(--ease); filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
.cv:hover .cv__disc { transform: translateX(34%) rotate(140deg); }
.cv:hover .cv__sq img { border-radius: 50%; transform: scale(.9) translateX(-6%); }
.cv__cat { position: absolute; z-index: 2; left: 12px; top: 12px; background: #fff; border-radius: 99px; padding: 4px 9px; font-size: 10px; }
.cv__t { display: grid; padding: 14px 4px 0; }
.cv__t b { font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.cv__t span { color: #4f4c49; font-size: 15px; } .cv__t .mono { color: var(--mute); font-size: 11px; margin-top: 4px; }
.grid8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 20px; }
.cv.hide { display: none; }
.flt { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.flt button { border: 1.5px solid var(--ink); border-radius: 99px; padding: 9px 16px; }
.flt button.on { background: var(--k); color: #fff; }

/* ---------- lyrics panel ---------- */
.lyp { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 70px); background: var(--g); border-radius: var(--R); padding: clamp(24px, 4vw, 60px); align-items: center; }
.lyp__ring { aspect-ratio: 1; border-radius: 50%; background: url(../img/vinyl/disc.webp) center / cover; position: relative; animation: spin 9s linear infinite; box-shadow: 0 30px 60px -20px rgba(80, 0, 0, .45); }
.lyp__disc { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; border: 6px solid var(--k); }
.lyp__disc img { width: 100%; height: 100%; object-fit: cover; animation: spin 9s linear infinite reverse; }
.lyp__disc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--g); }
.lyp__m { color: var(--mute); margin: 12px 0 24px; }
.lyp__f { margin-top: 26px; }
.ly p { margin: 0; padding: 5px 0; font-size: clamp(16px, 1.4vw, 21px); color: #8f8b86; transition: color .45s, font-size .45s, transform .45s var(--ease); transform-origin: left; }
.ly p.on { color: var(--ink); font-size: clamp(20px, 1.9vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.ly p.past { color: #5e5a56; }

/* ---------- steps / features ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.st { display: block; }
.st .mono { display: block; color: var(--mute); margin: 16px 0 6px; }
.st h3, .feat__i h3 { margin: 0; font-weight: 500; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat__i h3 { margin-top: 16px; }
.feat__i p { margin: 8px 0 0; color: #4f4c49; font-size: 15px; }

/* ---------- artists circles ---------- */
.ar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ar__i { display: grid; gap: 4px; }
.ar__ph { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 26px; transition: border-radius .7s var(--ease); margin-bottom: 10px; }
.ar__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ar__i:hover .ar__ph { border-radius: 999px; }
.ar__i:hover img { transform: scale(1.06); }
.ar__i b { font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.ar__i span { color: var(--mute); }

/* ---------- club call-out ---------- */
.cta { position: relative; border-radius: var(--R); overflow: hidden; background: var(--red); color: #fff; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; padding: clamp(28px, 5vw, 70px); align-items: center; }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .35; filter: grayscale(1); }
.cta__t { position: relative; }
.cta .kk { color: rgba(255,255,255,.8); }
.cta .h2 { margin-bottom: 30px; max-width: 16ch; }
.cta .h2 em { color: #fff; }
.cta .pic { position: relative; }

/* ---------- page hero ---------- */
.ph { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 60px); align-items: center; padding: 20px 0 10px; }
.ph__l { padding-bottom: 10px; }
.ph__r { position: relative; }
.ph__dk { position: absolute; width: clamp(180px, 17vw, 290px); aspect-ratio: 1; left: -9%; bottom: -9%; }
.ph__dk .dock { width: 100%; height: 100%; }

/* ---------- spec block with a record ---------- */
.spec { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 70px); align-items: center; background: #fff; color: var(--ink); border-radius: var(--R); padding: clamp(24px, 4vw, 64px); }
.spec__d { aspect-ratio: 1; }
.spec__d .dock { width: 100%; height: 100%; }
.spec .kk { color: var(--mute); }
.dl { margin: 0; display: grid; }
.dl div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(127,127,127,.3); }
.dl dt { color: var(--mute); padding-top: 4px; }
.dl dd { margin: 0; font-size: 18px; }

/* ---------- album ---------- */
.al { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(24px, 4vw, 70px); padding: 20px 0; position: relative; }
.al__cv { position: relative; border-radius: var(--R); overflow: hidden; aspect-ratio: 4 / 5; align-self: start; position: sticky; top: 20px; }
.al__cv img { width: 100%; height: 100%; object-fit: cover; }
.al__cat { position: absolute; left: 18px; top: 18px; background: #fff; padding: 5px 10px; border-radius: 99px; }
.al__dock { position: absolute; left: -2.5vw; top: 58%; width: 24vw; max-width: 380px; aspect-ratio: 1; z-index: 3; pointer-events: none; }
.al__dock .dock { width: 100%; height: 100%; }
.al__t { padding-top: 20px; }
.al__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 34px; }
.al__left { color: var(--mute); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 99px; height: 54px; }
.qty button { width: 46px; height: 100%; font-size: 20px; }
.qty span { min-width: 20px; text-align: center; font-weight: 600; }
.gal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: center; }
.gal figure { margin: 0; }
.gal figcaption { color: var(--mute); margin-top: 12px; }
.gal__q { background: var(--red); color: #fff; border-radius: var(--R); padding: 36px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; }
.gal__q p { margin: 0; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; }
.gal__q em { color: #fff; }

/* ---------- player: the listening room ---------- */
.pr { background: var(--g); border-radius: var(--R); padding: clamp(18px, 3vw, 44px); margin-top: 10px; }
.pr__g { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.pr__deck { background: var(--g2); border-radius: 34px; padding: clamp(14px, 2.6vw, 40px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.pr__top { display: flex; justify-content: space-between; color: var(--mute); margin-bottom: 20px; }
.pr__ic { display: flex; gap: 16px; } .pr__ic [data-p-state] { color: var(--red); }
.pr__h { font-weight: 400; margin: 0; font-size: clamp(46px, 5.6vw, 92px); line-height: .95; }
.pr__meta { display: flex; flex-wrap: wrap; gap: 24px; color: var(--mute); margin: 16px 0 26px; }
.pr__meta b { color: var(--ink); font-weight: 500; }
.pr__ly { min-height: 380px; position: relative; }
.pr__inst { display: none; font-size: 26px; margin: 0; }
.pr.inst .ly { display: none; } .pr.inst .pr__inst { display: block; }
.pr__bar { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: clamp(12px, 2vw, 30px); margin-top: 30px; padding-top: 24px; border-top: 1px solid #c9c7c2; }
.pr__tr { display: flex; align-items: center; gap: 14px; }
.pr__tr button svg { width: 34px; height: 34px; fill: var(--ink); }
.pr__play { width: 66px; height: 66px; border-radius: 50%; border: 3px solid var(--red); display: grid; place-items: center; transition: background .3s, transform .3s; }
.pr__play svg { width: 30px !important; height: 30px !important; fill: var(--red) !important; }
.pr__play:hover { background: var(--red); } .pr__play:hover svg { fill: #fff !important; }
.pr__play .i-pause, .pr.playing .pr__play .i-play { display: none; } .pr.playing .pr__play .i-pause { display: block; }
.pr__time { white-space: nowrap; } .pr__time b { font-weight: 500; }
.pr__wave { display: flex; align-items: center; gap: 3px; height: 56px; cursor: pointer; }
.pr__wave i { flex: 1; background: var(--ink); border-radius: 2px; height: calc(var(--h, .5) * 100%); transform-origin: center; transition: background .2s; }
.pr__wave i.on { background: var(--red); }
.pr__heart svg { width: 30px; height: 30px; fill: none; stroke: var(--red); stroke-width: 2.6; transition: fill .3s, transform .3s var(--ease); }
.pr__heart.on svg { fill: var(--red); transform: scale(1.15); }
.pr__vol { display: flex; align-items: center; gap: 8px; }
.pr__vol svg { width: 28px; height: 28px; fill: var(--ink); color: var(--ink); }
.pr__vol input { width: 90px; accent-color: var(--red); }
.tip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tip__i { background: var(--g); border-radius: 30px; padding: 26px; }
.tip__i .mono { color: var(--red); } .tip__i h3 { margin: 10px 0 8px; font-weight: 600; font-size: 21px; letter-spacing: -.02em; } .tip__i p { margin: 0; color: #4f4c49; font-size: 15px; }

/* ---------- Velvet One: the red turntable ---------- */
.tt { --pl: #f4f2ed; --pl2: #dcd8d0; width: 100%; aspect-ratio: 1.2; position: relative; }
.tt__plinth { position: absolute; inset: 0; border-radius: 9%/11%; background: linear-gradient(160deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 24%), linear-gradient(160deg, var(--pl) 0%, var(--pl) 70%, var(--pl2) 100%); box-shadow: 0 3px 0 rgba(255,255,255,.8) inset, 0 -12px 26px rgba(0,0,0,.08) inset, 0 50px 70px -36px rgba(120, 20, 0, .45), 0 14px 24px -12px rgba(0,0,0,.18); transition: background .6s; }
.tt__platter { position: absolute; left: 6.5%; top: 7.5%; width: 69%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.06), rgba(0,0,0,.12)); box-shadow: inset 0 4px 10px rgba(0,0,0,.12); }
.tt__strobe { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#d7d8da 0 2deg, #3a3a3a 2deg 4deg); -webkit-mask: radial-gradient(circle, transparent 0 47.5%, #000 48% 49.5%, transparent 50%); mask: radial-gradient(circle, transparent 0 47.5%, #000 48% 49.5%, transparent 50%); }
.tt__mat { position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle, #2b2a2a, #161515 70%); }
.tt__mat::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3%; height: 3%; margin: -1.5%; border-radius: 50%; background: linear-gradient(135deg, #fff, #888); }
.tt .tt__dock { position: absolute; inset: -9%; }
.tt__strobe, .tt__mat { display: none; }
.tt__arm { position: absolute; right: 2%; top: 3%; width: 26%; height: auto; z-index: 25; transform-origin: 70% 13.5%; transform: rotate(-12deg); transition: transform 1.3s var(--ease); filter: drop-shadow(-6px 10px 6px rgba(0,0,0,.35)); pointer-events: none; }
.tt.playing .tt__arm { transform: rotate(34deg); }
.tt__knob { position: absolute; left: 6.5%; bottom: 6%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #bfc1c3 45%, #6f7175); box-shadow: 0 4px 8px rgba(0,0,0,.35); }
.tt__start { position: absolute; right: 6%; bottom: 6%; width: 17%; aspect-ratio: 1.5; border-radius: 10px; background: linear-gradient(180deg, #f2f2f0, #cfd0d0); color: #3c3c3c; font-size: clamp(8px, .7vw, 11px); box-shadow: 0 3px 0 #9a9b9c, 0 8px 14px rgba(0,0,0,.3); transition: transform .15s, box-shadow .15s; z-index: 25; }
.tt__start:active { transform: translateY(3px); box-shadow: 0 0 0 #9a9b9c, 0 4px 8px rgba(0,0,0,.3); }
.tt__spd { position: absolute; right: 25%; bottom: 7%; display: flex; gap: 6px; }
.tt__spd span { background: rgba(0,0,0,.08); color: #6d6a66; border-radius: 6px; padding: 3px 7px; font-size: 10px; }
.tt__spd .on { background: var(--red); color: #fff; }
.tt__led { position: absolute; left: 17%; bottom: 9.5%; width: 8px; height: 8px; border-radius: 50%; background: #d8d4cc; transition: .3s; }
.tt.playing .tt__led { background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 20px #ff8a80; }
body[data-colour] .tt, .v1 .tt { --pl: var(--plc, var(--red)); --pl2: var(--plc2, #c20d07); }

.v1 { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 70px); align-items: center; padding: 20px 0 10px; }
.v1__deck { background: var(--g); border-radius: var(--R); padding: clamp(18px, 3.6vw, 56px); }
.sw { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.sw button { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid #c7c5c0; border-radius: 99px; padding: 6px 16px 6px 6px; transition: border-color .3s; }
.sw button i { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.sw button.on { border-color: var(--ink); background: #fff; }
.sw__n { margin: 0 0 30px; color: #4f4c49; max-width: 46ch; } .sw__n em { font-size: 26px; }

/* ---------- artists list ---------- */
.arl { display: grid; gap: 18px; }
.arl__i { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 60px); background: var(--g); border-radius: var(--R); padding: 18px; align-items: center; }
.arl__i:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); background: var(--red); color: #fff; }
.arl__i:nth-child(even) em { color: #fff; } .arl__i:nth-child(even) .arl__t p.mono { color: rgba(255,255,255,.8); }
.arl__i:nth-child(even) .b--red { background: #fff; color: var(--red); } .arl__i:nth-child(even) .b--red .b__pl { background: var(--red); } .arl__i:nth-child(even) .b--red .b__pl::after { border-left-color: #fff; }
.arl__i:nth-child(even) .mo { order: 2; }
.arl__t { padding: 10px 20px; }
.arl__t h2 { font-size: clamp(44px, 5vw, 84px); margin: 6px 0 10px; line-height: 1; }
.arl__t p { margin: 0 0 10px; font-size: 19px; max-width: 34ch; }
.arl__t p.mono { color: var(--mute); font-size: 12px; }
.arl__b { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.arl__i:nth-child(even) .b--line { border-color: #fff; }
.story { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.story figure { margin: 0; }
.story--r { grid-template-columns: .9fr 1.1fr; }
.story__t p { font-size: 18px; max-width: 52ch; color: #3c3a38; }
.story__t .h2 { margin-bottom: 20px; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nums div { background: var(--red); color: #fff; border-radius: 30px; padding: 26px; display: grid; gap: 10px; }
.nums b { font-weight: 500; font-size: clamp(44px, 5vw, 76px); letter-spacing: -.05em; line-height: 1; }

/* ---------- pressing ---------- */
.prs { display: grid; gap: 18px; }
.prs__i { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 50px); align-items: center; padding: 18px; border-radius: var(--R); background: var(--g); }
.prs__i:nth-child(odd) { background: #fff; }
.prs__n b { font-weight: 500; font-size: 84px; letter-spacing: -.06em; color: var(--red); line-height: 1; }
.prs__t h2 { font-size: clamp(40px, 4vw, 64px); margin: 8px 0 12px; line-height: 1; }
.prs__t p { margin: 0; font-size: 17px; max-width: 42ch; }
.prs__t p.mono { color: var(--mute); font-size: 12px; }

/* ---------- club ---------- */
.pls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pl { background: var(--g); border-radius: var(--R); padding: 30px; display: flex; flex-direction: column; }
.pl--hot { background: var(--red); color: #fff; }
.pl .mono { color: var(--mute); margin: 0; } .pl--hot .mono { color: rgba(255,255,255,.8); }
.pl h3 { font: italic 54px/1 var(--serif); margin: 14px 0; }
.pl__p b { font-weight: 500; font-size: 64px; letter-spacing: -.05em; } .pl__p { margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; }
.pl ul { list-style: none; margin: 0 0 30px; padding: 0; flex: 1; }
.pl li { padding: 10px 0; border-bottom: 1px solid rgba(127,127,127,.3); font-size: 15px; }
.pl .b { align-self: flex-start; }
.pl--hot .b--red { background: #fff; color: var(--red); }
.frm { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 70px); background: var(--g); border-radius: var(--R); padding: clamp(24px, 4vw, 60px); }
.fm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.fm label { display: grid; gap: 8px; } .fm label .mono { color: var(--mute); }
.fm__w { grid-column: 1 / -1; }
.fm input, .fm select, .fm textarea { border: 1.5px solid #c4c2bd; background: #fff; border-radius: 16px; padding: 14px 16px; outline: none; transition: border-color .3s; width: 100%; }
.fm input:focus, .fm select:focus, .fm textarea:focus { border-color: var(--red); }
.fm .b { justify-self: start; }
.ok { display: none; grid-column: 1 / -1; font-size: 24px; margin: 0; }
.sent .ok, form.sent + .ok { display: block; } form.sent > :not(.ok) { opacity: .4; pointer-events: none; }
[data-plan-out] { color: var(--red) !important; margin-top: 20px; }

/* ---------- nights ---------- */
.dt { display: grid; }
.dt__r { display: grid; grid-template-columns: 110px 1.1fr 1.2fr 1.4fr auto; gap: 20px; align-items: center; padding: 22px 14px; border-bottom: 1px solid #cfcdc8; transition: background .3s, padding .4s var(--ease), border-radius .3s; border-radius: 0; }
.dt__r b { font-weight: 500; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -.04em; }
.dt__r em { font-size: 22px; }
.dt__r:hover { background: var(--red); color: #fff; padding-left: 30px; border-radius: 24px; }
.dt__r--x { opacity: .45; } .dt__r--x .tag { background: var(--mute); }
.dt__r:hover em { color: #fff; } .dt__r:hover .tag { background: #fff; color: var(--red); }
.gal--3 { align-items: start; }

/* ---------- journal ---------- */
.jl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jl__i .mono { color: var(--mute); margin: 16px 0 6px; } .jl__i h3 { font-size: 34px; margin: 0 0 8px; font-weight: 400; line-height: 1.05; }
.jl__i h3 em { color: var(--ink); } .jl__i:hover h3 em { color: var(--red); }
.jl__i > p:last-child { margin: 0; color: #4f4c49; font-size: 15px; }
.art__h { max-width: 980px; padding: 30px 0 30px; }
.art__ph { margin-bottom: 50px; }
.art__b { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: clamp(24px, 5vw, 90px); }
.art__side { color: var(--mute); position: sticky; top: 30px; align-self: start; }
.art__side p { margin: 0 0 6px; }
.art__dock { width: 200px; aspect-ratio: 1; margin-top: 30px; } .art__dock .dock { width: 100%; height: 100%; }
.art__txt > p { font-size: 20px; line-height: 1.6; color: #2f2d2b; margin: 0 0 1.1em; }
.art__txt > p:first-child::first-letter { font: italic 5.4em/.8 var(--serif); color: var(--red); float: left; margin: 6px 12px 0 0; }
.art__sig { font-size: 26px !important; }
.art__n { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 80px; }

/* ---------- 404 ---------- */
.nf { min-height: 70vh; display: grid; justify-items: center; align-content: center; text-align: center; padding: 40px 0; }
.nf__d { width: min(320px, 70vw); aspect-ratio: 1; margin-bottom: 20px; } .nf__d .dock { width: 100%; height: 100%; }
.nf .lede { margin-left: auto; margin-right: auto; }

/* ---------- footer: white, a puffy red word ---------- */
.ft { background: #fff; color: var(--ink); border-radius: var(--R) var(--R) 0 0; margin-top: clamp(60px, 8vw, 120px); padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) 0; overflow: hidden; position: relative; box-shadow: 0 -20px 60px -40px rgba(120, 20, 0, .25); }
.ft__g { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 30px; }
.ft h4 { color: var(--mute); margin: 0 0 16px; font-weight: 400; }
.ft ul { list-style: none; margin: 0; padding: 0; } .ft li { padding: 4px 0; font-weight: 500; } .ft li a:hover { color: var(--red); }
.ft__n p { color: #4f4c49; margin: 0 0 18px; max-width: 34ch; font-size: 15px; }
.ft__n form { display: flex; gap: 8px; max-width: 380px; }
.ft__n input { flex: 1; min-width: 0; background: var(--bg); border: 1.5px solid #e1dfda; border-radius: 99px; padding: 0 18px; color: var(--ink); outline: none; }
.ft__n input:focus { border-color: var(--red); }
.ft__n .ok { font-size: 22px; margin-top: 14px; }
.ft__n.sent form { opacity: .4; pointer-events: none; }
.ft__dk { position: relative; }
.ft__dock { width: 100%; aspect-ratio: 1; max-width: 260px; margin: -20px 0 -40px auto; }
.ft__word { display: flex; justify-content: center; font-weight: 700; font-size: clamp(90px, 24vw, 390px); line-height: .9; letter-spacing: -.06em; margin: 20px 0 0; padding-bottom: 24px; color: var(--red); }
.ft__word span { display: block; text-shadow: 0 1px 0 #d6110a, 0 2px 0 #cc1009, 0 3px 0 #c20f08, 0 4px 0 #b80e08, 0 5px 0 #ae0d07, 0 6px 0 #a40c06, 0 7px 0 #9a0b06, 0 8px 0 #900a05, 0 22px 26px rgba(150, 10, 0, .35), 0 40px 60px rgba(150, 10, 0, .2);
  transform: translateY(calc((1 - var(--in, 1)) * 40%)) scale(calc(.85 + var(--in, 1) * .15)); opacity: var(--in, 1); transition: transform 1s cubic-bezier(.3, 1.6, .5, 1), opacity .5s; transition-delay: calc(var(--i) * 70ms); }
.ft__word:not(.in) span { --in: 0; }
.ft__eq { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-top: 0; }
.ft__eq i { flex: 1; background: var(--red); border-radius: 3px 3px 0 0; height: calc(var(--h, .2) * 100%); }
.ft__b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 20px 0 26px; color: var(--mute); border-top: 1px solid #ece9e4; }
.ft__b a:hover { color: var(--red); }

/* ---------- docks + the flying record ---------- */
.dock { position: relative; }
.vn-stage { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.vp { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: 50% 50%; }
.vp__fur { position: absolute; inset: 0; width: 100%; height: 100%; }
.vp__fur--top { opacity: 0; }
.vp__arm { position: absolute; left: 69.3%; top: 1.6%; width: 29.6%; height: auto; z-index: 3; transform-origin: 70% 13.46%; }
.vp__sh { position: absolute; left: 6%; right: 6%; bottom: -1%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 10, 0, .38), rgba(140, 10, 0, 0)); }
.vp__rec { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -53%); perspective: 1400px; }
.vp__rec::before { content: ''; position: absolute; inset: 2%; border-radius: 50%; box-shadow: 0 16px 22px rgba(90, 0, 0, .4); }
.vn { position: absolute; inset: 0; transform-style: preserve-3d; }
.vn > * { position: absolute; inset: 0; border-radius: 50%; }
.vn__edge { background: radial-gradient(circle, #6d0603 0 33%, #9a0a05 60%, #5e0503); }
.vn__face { background: url(../img/vinyl/disc.webp) center / cover; transform: translateZ(0) rotate(var(--rot, 0deg)); }
.vn__sheen { transform: translateZ(.6px); background: conic-gradient(from var(--sa, 0deg), rgba(255,255,255,0) 0deg, rgba(255,255,255,.6) 14deg, rgba(255,255,255,.08) 34deg, rgba(255,255,255,0) 70deg, rgba(0,0,0,.16) 110deg, rgba(255,255,255,0) 150deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.5) 194deg, rgba(255,255,255,.06) 214deg, rgba(255,255,255,0) 250deg, rgba(0,0,0,.18) 290deg, rgba(255,255,255,0) 330deg); -webkit-mask: radial-gradient(circle, transparent 0 33.6%, #000 34.2% 98.6%, transparent 99.4%); mask: radial-gradient(circle, transparent 0 33.6%, #000 34.2% 98.6%, transparent 99.4%); opacity: .75; }
.vn__glow { transform: translateZ(.8px); background: radial-gradient(ellipse at 32% var(--gy, 25%), rgba(255, 255, 255, .22), transparent 45%); -webkit-mask: radial-gradient(circle, #000 0 98.6%, transparent 99.4%); mask: radial-gradient(circle, #000 0 98.6%, transparent 99.4%); }

/* ---------- letter-by-letter titles, reveals ---------- */
.fx-w { display: inline-block; white-space: nowrap; }
.fx-l { display: inline-block; transform: translateY(70%) rotate(6deg); opacity: 0; transition: transform .9s var(--ease), opacity .6s; }
body.ready [data-split].in .fx-l { transform: none; opacity: 1; }
.rv { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nv__c { gap: 6px; }
  .ar { grid-template-columns: repeat(3, 1fr); }
  .grid8 { grid-template-columns: repeat(3, 1fr); }
  .ft__g { grid-template-columns: 1fr 1fr 1fr; } .ft__n { grid-column: 1 / -1; } .ft__dk { display: none; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --R: 28px; }
  .nv { height: 70px; } .nv__c { display: none; } .nv__r .b { display: none; }
  .hero, .ph, .lyp, .spec, .al, .pr__g, .v1, .story, .story--r, .frm, .cta { grid-template-columns: 1fr; }
  .hero__r { order: -1; }
  .ph__dk { width: 36vw; left: auto; right: -2vw; bottom: -12%; }
  .mo--hero { height: 58vh; --gap: 6px; }
  .hero__dock { width: 40vw; left: auto; right: -3vw; bottom: -3%; }
  .hero__cap { padding-left: 0; padding-right: 40vw; } .hero__cap span { display: none; }
  .hero { gap: 26px; }
  .ns { grid-template-columns: 1fr; gap: 10px; } .ns__c { width: 80%; margin: 0 auto; order: -1; }
  .al__cv { position: relative; top: 0; }
  .al__dock { left: auto; right: -2vw; top: 62vw; width: 46vw; }
  .gal, .gal--3, .tip, .feat, .pls, .jl, .art__n { grid-template-columns: 1fr; }
  .arl__i, .arl__i:nth-child(even) { grid-template-columns: 1fr; } .arl__i:nth-child(even) .mo { order: 0; }
  .prs__i { grid-template-columns: 1fr; } .prs__n b { font-size: 60px; }
  .nums { grid-template-columns: 1fr 1fr; }
  .dt__r { grid-template-columns: 80px 1fr auto; } .dt__r > span:nth-child(3), .dt__r > span:nth-child(4) { display: none; }
  .art__b { grid-template-columns: 1fr; } .art__side { position: static; display: flex; gap: 16px; } .art__dock { display: none; }
  .mn__in { grid-template-columns: 1fr; padding: 22px; } .mn__r { display: none; }
  .pr__bar { grid-template-columns: auto 1fr auto; } .pr__wave { grid-column: 1 / -1; order: 5; } .pr__vol { display: none; }
  .pr__ly { min-height: 0; }
  .spec__d { width: 70%; margin: 0 auto; }
  .fan { height: 320px; } .sl { width: 190px; }
  .lyp__l { width: 86%; } .sh__dk .dock { width: 120px; margin: -20px 0 -10px; } .cta__dk { left: auto; right: -8%; width: 52%; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero__cards { grid-template-columns: 1fr; } .cd { min-height: 180px; }
  .grid8 { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .ar { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .fm { grid-template-columns: 1fr; }
  .dl div { grid-template-columns: 1fr; gap: 4px; }
  .ft__g { grid-template-columns: 1fr 1fr; }
  .mq span { font-size: 24px; line-height: 50px; }
  .pr__time { display: none; } .pr__bar { grid-template-columns: 1fr auto; }
  .sh .b { display: none; }
  .ft__b { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

/* ---------- effects ---------- */
/* photos open like an iris when they scroll in */
.pic, .cv__sq img, .ar__ph { clip-path: circle(0% at 50% 50%); transition: clip-path 1.3s var(--ease), border-radius .7s var(--ease), transform .7s var(--ease); }
.pic.lit, .cv__sq img.lit, .ar__ph.lit { clip-path: circle(80% at 50% 50%); }
.cv__sq img { transition-delay: .1s; }

/* sleeves and cards lean towards the pointer, a glare slides over them */
[data-tilt] { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s var(--ease); transform-style: preserve-3d; }
[data-tilt].tilting { transition: transform .08s linear; }
[data-tilt]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 45%); opacity: 0; transition: opacity .4s; }
[data-tilt].tilting::after { opacity: 1; }
.cv__sq[data-tilt]::after { border-radius: 22px; }

/* the marquee leans and speeds up with the scroll */
.mq__t { transform: skewX(var(--sk, 0deg)); }

/* a fine print grain over everything: one paper for every block */

/* the footer word: every letter is a soft toy — poke it and it bounces */
.ft__word span:hover { animation: boing .9s cubic-bezier(.3, 1.8, .4, 1); }
@keyframes boing { 0% { transform: scale(1, 1); } 25% { transform: scale(1.12, .86) translateY(4%); } 50% { transform: scale(.92, 1.1) translateY(-8%); } 75% { transform: scale(1.04, .97); } 100% { transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { .pic, .cv__sq img, .ar__ph { clip-path: none; } }

/* ---------- hero: the portrait cut into grooves — concentric rings that turn on their own ---------- */
.rg { position: relative; width: min(100%, 78vh, 760px); aspect-ratio: 1; margin-left: auto; }
.rg__txt { position: absolute; inset: -1%; width: 102%; height: 102%; animation: spin 40s linear infinite; overflow: visible; }
.rg__txt text { font: 500 2.6px var(--mono); letter-spacing: .32px; text-transform: uppercase; fill: var(--ink); }
.rg__in { position: absolute; inset: 6%; }
.rg__s { position: absolute; inset: 0; }
.rg__in::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 40px 70px -30px rgba(140, 10, 0, .45); }
.rg__r { position: absolute; inset: 0; border-radius: 50%; background: url(../img/hero-m.jpg) 28% 18% / 130% auto no-repeat, var(--red);
  -webkit-mask: radial-gradient(closest-side, transparent calc(var(--a) + .55%), #000 calc(var(--a) + .85%), #000 calc(var(--b) - .55%), transparent calc(var(--b) - .25%));
          mask: radial-gradient(closest-side, transparent calc(var(--a) + .55%), #000 calc(var(--a) + .85%), #000 calc(var(--b) - .55%), transparent calc(var(--b) - .25%));
  transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); will-change: transform; }
.rg__s:first-child .rg__r { -webkit-mask: radial-gradient(closest-side, #000 calc(var(--b) - .55%), transparent calc(var(--b) - .25%)); mask: radial-gradient(closest-side, #000 calc(var(--b) - .55%), transparent calc(var(--b) - .25%)); }
.rg__r::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), rgba(255,255,255,0) 40%); }
.mn__pic { flex: 1; min-height: 0; border-radius: 28px; clip-path: none !important; }
.mn__pic img { transition: opacity .35s; }
.hero__dock { left: -4% !important; bottom: -6% !important; }
@media (max-width: 900px) { .rg { width: 100%; } }

/* ---------- home: manifesto that fills in as you scroll ---------- */
.mf { max-width: 1180px; margin: 0 auto; text-align: center; }
.mf__t { font-weight: 500; font-size: clamp(30px, 4.2vw, 66px); line-height: 1.08; letter-spacing: -.035em; margin: 0; }
.mf__t .w { color: #d6d2cc; transition: color .4s; }
.mf__t .w.on { color: var(--ink); }
.mf__t em .w.on { color: var(--red); }
/* counters */
.cnt { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); }
.cnt div { padding: 26px 20px 0 0; display: grid; gap: 8px; }
.cnt div + div { padding-left: 24px; border-left: 1px solid #d9d5ce; }
.cnt b { font-weight: 500; font-size: clamp(54px, 6.4vw, 110px); letter-spacing: -.06em; line-height: .9; color: var(--red); font-variant-numeric: tabular-nums; }
.cnt .mono { color: var(--mute); }
/* Velvet One teaser */
.v1t { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 5vw, 80px); align-items: center; background: #fff; border-radius: var(--R); padding: clamp(24px, 4vw, 60px); box-shadow: 0 40px 70px -56px rgba(120, 20, 0, .4); }
.v1t .h2 { margin-bottom: 20px; }
.tt--teaser .tt__start, .tt--teaser .tt__spd { display: none; }
/* press quotes */
.pq { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pq__t { display: flex; gap: 24px; width: max-content; animation: mq 60s linear infinite; padding: 10px 0 30px; }
.pq:hover .pq__t { animation-play-state: paused; }
.pq__i { margin: 0; width: 380px; background: #fff; border-radius: 26px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; box-shadow: 0 24px 40px -34px rgba(120, 20, 0, .4); }
.pq__i blockquote { margin: 0; font-size: 28px; line-height: 1.1; }
.pq__i blockquote em { color: var(--ink); }
.pq__i figcaption { color: var(--red); }
@media (max-width: 900px) { .cnt { grid-template-columns: 1fr 1fr; row-gap: 26px; } .cnt div:nth-child(3) { border-left: 0; padding-left: 0; } .v1t { grid-template-columns: 1fr; } .pq__i { width: 290px; } .pq__i blockquote { font-size: 23px; } }

/* ---------- home: the cover, cut into tiles on a curved wall ---------- */
.oc { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.oc .mo--hero { height: min(74vh, 700px); }
.oc .lede { margin-top: 20px; }
@media (max-width: 900px) { .oc { grid-template-columns: 1fr; } .oc .mo--hero { height: 60vh; } }

/* ---------- footer: scarlet, white type ---------- */
.ft { background: var(--red); color: #fff; box-shadow: 0 -30px 60px -40px rgba(160, 10, 0, .5); }
.ft__g { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.ft h4, .ft__b { color: rgba(255,255,255,.75); }
.ft__n p { color: rgba(255,255,255,.9); }
.ft li a:hover, .ft__b a:hover { color: #fff; text-decoration: underline; }
.ft__n input { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.ft__n input::placeholder { color: rgba(255,255,255,.7); }
.ft__n input:focus { border-color: #fff; }
.ft__n .b--red { background: #fff; color: var(--red); }
.ft__n .ok em { color: #fff; }
.ft__word { color: #fff; }
.ft__word span { text-shadow: 0 1px 0 #f1ece6, 0 2px 0 #e6dfd8, 0 3px 0 #dcd3cb, 0 4px 0 #d2c8bf, 0 5px 0 #c8bdb3, 0 6px 0 #bdb1a6, 0 22px 26px rgba(110, 0, 0, .45), 0 40px 60px rgba(110, 0, 0, .3); }
.ft__eq i { background: rgba(255,255,255,.9); }
.ft__b { border-top-color: rgba(255,255,255,.25); }
/* press quotes: three colours in turn */
.pq__i:nth-child(3n+1) { background: var(--red); color: #fff; } .pq__i:nth-child(3n+1) blockquote em, .pq__i:nth-child(3n+1) figcaption { color: #fff; }
.pq__i:nth-child(3n+2) { background: #f7d6d0; } .pq__i:nth-child(3n+2) figcaption { color: var(--red2); }


.v1t { background: #f7d6d0; }
.v1t .tt { --pl: #fbf6f2; --pl2: #eadcd5; }
.pq__hd { display: flex; align-items: center; justify-content: space-between; }
.pq__dk { width: 180px; aspect-ratio: 1; } .pq__dk .dock { width: 100%; height: 100%; }
/* the giant word sits under the links, never over them */
.ft__g, .ft__b { position: relative; z-index: 2; }
.ft__word { position: relative; z-index: 1; margin-top: 40px; }
/* endless animations pause when they are off screen; the logo only spins when you point at it */
.paused, .paused * { animation-play-state: paused !important; }
.lg__d { animation-play-state: paused; } .lg:hover .lg__d { animation-play-state: running; }