/* Arch Management — design preview
   Palette from palette.png. Page transitions use cross-document View Transitions
   (Chrome / Edge / Safari 18.2+). In Framer these map to Page Effects. */

:root {
  --shadow: #252323;
  --slate: #70798c;
  --parchment: #f5f1ed;
  --bone: #dad2bc;
  --khaki: #a99985;

  --display: "Archivo", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--parchment); color: var(--shadow);
  font: 400 17px/1.6 var(--sans); font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: .9; letter-spacing: -0.02em; }

.wrap { padding: 0 var(--gutter); }
.label { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; }
.muted { color: var(--slate); }

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 600ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 800ms var(--ease) both vt-in; }
@keyframes vt-out { to { transform: translateY(-6%) scale(.97); opacity: .3; } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.header { view-transition-name: header; }
::view-transition-group(eric) { animation-duration: 800ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter);
  mix-blend-mode: difference; color: #fff;
}
.logo { font: 900 22px/1 var(--display); font-variation-settings: "wdth" 125; letter-spacing: .04em; }
.nav { display: flex; gap: 34px; align-items: center; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav .pill { border: 1px solid currentColor; padding: 11px 18px 10px; border-radius: 999px; }
.nav .pill::after { display: none; }
.menu-btn { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; border-radius: 999px;
  padding: 18px 28px 17px; background: var(--shadow); color: var(--parchment);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--khaki); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.btn:hover::before { transform: none; }
.btn--light { background: var(--parchment); color: var(--shadow); }
.btn--light::before { background: var(--bone); }
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero (home) ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 120px; padding-bottom: 32px; }
.hero__lockup { --mfs: clamp(80px, 24.5vw, 440px); }
.hero__mark {
  font: 900 var(--mfs)/.78 var(--display); font-variation-settings: "wdth" 125;
  letter-spacing: -0.03em; display: flex; justify-content: space-between; margin: 0 -0.02em;
}
.hero__mark span { display: inline-block; overflow: hidden; padding-top: .06em; }
.hero__mark span i { display: inline-block; font-style: normal; transform: translateY(105%); animation: rise 1.2s var(--ease) forwards; }
.hero__mark span:nth-child(2) i { animation-delay: .08s; }
.hero__mark span:nth-child(3) i { animation-delay: .16s; }
.hero__mark span:nth-child(4) i { animation-delay: .24s; }
@keyframes rise { to { transform: none; } }
.hero__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: end; border-top: 1px solid var(--shadow); padding-top: 22px; margin-top: 28px; opacity: 0; animation: fade 1s .7s var(--ease) forwards; }
.hero__row p { margin: 0; max-width: 30ch; }
.hero__row .big { font: 400 italic clamp(26px, 2.6vw, 38px)/1.1 var(--serif); }
.hero__row > :last-child { justify-self: end; text-align: right; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 12vw, 180px) 0; }
.section--dark { background: var(--shadow); color: var(--parchment); }
.section--bone { background: var(--bone); }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vw, 64px); }
.section-title h2 { font-size: clamp(48px, 9vw, 150px); font-variation-settings: "wdth" 112; }

/* Roster list with cursor-follow image */
.roster { border-top: 1px solid currentColor; }
.roster__row {
  display: grid; grid-template-columns: 70px 1fr auto auto; gap: 24px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid currentColor; position: relative;
}
.roster__row .n { color: var(--slate); }
.roster__row h3 { font-size: clamp(40px, 7vw, 110px); font-variation-settings: "wdth" 112; transition: transform .6s var(--ease), color .4s; }
.roster__row:hover h3 { transform: translateX(18px); }
.roster__row .meta { color: var(--slate); text-align: right; }
.roster__row .go { width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: background .4s, color .4s, transform .6s var(--ease); }
.roster__row:hover .go { background: var(--shadow); color: var(--parchment); transform: rotate(-45deg); }
.roster__row--soon h3 { color: var(--khaki); }
.roster__row--soon:hover h3 { transform: none; }
.cursor-img {
  position: fixed; left: 0; top: 0; width: 260px; aspect-ratio: 3 / 4; object-fit: cover; pointer-events: none; z-index: 40;
  opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-4deg); transition: opacity .35s, transform .5s var(--ease);
}
.cursor-img.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }

/* Genre marquee */
.marquee { overflow: hidden; background: var(--shadow); color: var(--parchment); padding: 26px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { font: 400 italic clamp(28px, 3.4vw, 48px)/1 var(--serif); padding: 0 34px; display: flex; gap: 68px; align-items: center; white-space: nowrap; }
.marquee span::after { content: "✦"; font: 400 16px/1 var(--sans); color: var(--khaki); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Spotlight */
.spotlight { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.spotlight__img { overflow: hidden; border-radius: 4px; }
.spotlight__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; transition: transform 1.4s var(--ease); }
.spotlight:hover .spotlight__img img { transform: scale(1.04); }
.spotlight h2 { font-size: clamp(48px, 7vw, 120px); font-variation-settings: "wdth" 112; margin: 18px 0 28px; }
.spotlight p { max-width: 48ch; color: var(--bone); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 36px; }
.tags span { border: 1px solid currentColor; border-radius: 999px; padding: 8px 14px 7px; font-size: 13px; }

/* Founder */
.founder { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 110px); align-items: end; }
.founder blockquote { margin: 0; font: 400 clamp(34px, 4.6vw, 72px)/1.05 var(--serif); }
.founder blockquote em { color: var(--slate); }
.founder__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.founder__who { margin-top: 20px; display: flex; justify-content: space-between; gap: 16px; }

/* CTA */
.cta { text-align: center; }
.cta h2 { font-size: clamp(64px, 14vw, 240px); font-variation-settings: "wdth" 118; margin-bottom: 40px; }
.cta h2 .serif { font-weight: 400; }

/* Footer */
.footer { background: var(--shadow); color: var(--parchment); padding: 64px 0 28px; }
.footer__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer__links { display: flex; gap: 56px; }
.footer__links div { display: grid; gap: 10px; }
.footer__links .label { color: var(--khaki); margin-bottom: 8px; }
.footer__mark { font: 900 clamp(80px, 24.5vw, 440px)/.78 var(--display); font-variation-settings: "wdth" 125; letter-spacing: -0.03em; color: #2f2c2c; display: flex; justify-content: space-between; margin: 60px -0.02em 0; }
.footer__base { display: flex; justify-content: space-between; margin-top: 24px; color: var(--khaki); font-size: 13px; }

/* ---------- Artist page ---------- */
.artist-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.artist-hero__img { position: relative; overflow: hidden; background: #eee; }
.artist-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.artist-hero__text { padding: 140px var(--gutter) 48px; display: flex; flex-direction: column; justify-content: space-between; }
.artist-hero h1 { font-size: clamp(64px, 10vw, 180px); font-variation-settings: "wdth" 112; }
.artist-hero h1 span { display: block; overflow: hidden; }
.artist-hero h1 span i { display: block; font-style: normal; transform: translateY(105%); animation: rise 1.1s .2s var(--ease) forwards; }
.artist-hero h1 span + span i { animation-delay: .3s; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--shadow); }
.stats div { padding: 22px 16px 6px 0; }
.stats div + div { padding-left: 16px; border-left: 1px solid var(--shadow); }
.stats strong { display: block; font: 800 clamp(40px, 5vw, 72px)/1 var(--display); font-variation-settings: "wdth" 112; margin-bottom: 8px; }
.bio { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 110px); }
.bio p { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45; }
.bio p:first-of-type::first-line { font-weight: 700; }

/* ---------- Artists page ---------- */
.page-head { padding: 160px 0 48px; }
.page-head h1 { font-size: clamp(80px, 17vw, 300px); font-variation-settings: "wdth" 118; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.card { display: block; }
.card__img { overflow: hidden; border-radius: 4px; background: var(--bone); aspect-ratio: 3 / 4; }
.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1.2s var(--ease), filter .6s; filter: grayscale(.2); }
.card:hover .card__img img { transform: scale(1.05); filter: none; }
.card__body { display: flex; justify-content: space-between; padding-top: 16px; gap: 12px; }
.card__body h3 { font-size: 30px; font-variation-settings: "wdth" 112; }
.card--soon .card__img { display: grid; place-items: center; color: var(--khaki); border: 1px dashed var(--khaki); background: transparent; }

/* ---------- About ---------- */
.about-hero { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 110px); align-items: end; padding-top: 160px; }
.about-hero h1 { font-size: clamp(56px, 8vw, 140px); font-variation-settings: "wdth" 112; }
.about-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.placeholder { border: 1px dashed var(--khaki); color: var(--slate); padding: 28px; border-radius: 4px; font-size: 15px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); padding-top: 160px; }
.contact h1 { font-size: clamp(64px, 10vw, 170px); font-variation-settings: "wdth" 118; }
.form { display: grid; gap: 28px; }
.form label { display: grid; gap: 10px; }
.form input, .form select, .form textarea {
  font: 400 20px/1.4 var(--sans); color: var(--shadow); background: transparent;
  border: 0; border-bottom: 1px solid var(--shadow); padding: 8px 0 12px; outline: none; border-radius: 0;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--slate); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.form button { justify-self: start; border: 0; cursor: pointer; font: inherit; }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .hero__mark span i, .artist-hero h1 span i { animation: none; transform: none; }
  .hero__row { animation: none; opacity: 1; }
  .marquee__track { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .nav { gap: 16px; font-size: 10px; }
  .nav .pill { padding: 9px 12px 8px; }
  .hero__row { grid-template-columns: 1fr; }
  .hero__row > :last-child { justify-self: start; text-align: left; }
  .roster__row { grid-template-columns: 40px 1fr auto; }
  .roster__row .meta { display: none; }
  .spotlight, .founder, .artist-hero, .bio, .about-hero, .contact { grid-template-columns: 1fr; }
  .artist-hero__img { min-height: 70svh; }
  .artist-hero__text { padding-top: 40px; gap: 40px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .cursor-img { display: none; }
  .form .row { grid-template-columns: 1fr; }
  .footer__links { gap: 32px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .stats strong { font-size: 34px; }
}

/* .section sets vertical padding; keep side gutters when combined with .wrap */
.section.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
/* Clip only top/bottom so letters can rise in without cutting their sides */
.hero__mark span { overflow: visible; clip-path: inset(0 -0.3em 0 -0.3em); }
.bio p.label { font-size: 11px; line-height: 1; }

/* Custom logo */
.logo-svg { height: 17px; width: 91px; display: block; } /* 3811 x 712 */
.arch-a { height: .712em; width: .86em; display: inline-block; vertical-align: baseline; margin-bottom: -.012em; } /* 860 x 712 */

/* Mobile hero: ARCH on one line edge to edge; the tagline becomes the statement */
@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: 120px; padding-bottom: 40px; }
  .hero__lockup { --mfs: calc((100vw - 2 * var(--gutter)) / 3.6); }
  .hero__mark { margin: 0; }
  .hero__sub { margin-left: 0; margin-right: 0; }
  .hero__row { gap: 14px; margin-top: 22px; }
  .hero__row .big { order: -1; font-size: clamp(34px, 10vw, 48px); line-height: 1.02; margin-bottom: 6px; }
}
.logo-mark { height: 26px; width: 31.4px; display: block; } /* 860 x 712 */

/* =========================================================
   Arch-window hero: the brand shape frames the artist.
   Pinned for one screen of scroll; the arch opens to full bleed.
   ========================================================= */
.archhero { height: 190svh; position: relative; }
.archhero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: end center; --p: 0; }
.archhero__window {
  --w0: min(40vw, 600px); --h0: min(80svh, 860px);
  width: calc(var(--w0) + (100vw - var(--w0)) * var(--p));
  height: calc(var(--h0) + (100svh - var(--h0)) * var(--p));
  border-radius: calc(50vw * (1 - var(--p))) calc(50vw * (1 - var(--p))) 0 0;
  overflow: hidden; position: relative; background: var(--bone);
  clip-path: inset(100% 0 0 0); animation: archUp 1.5s .15s var(--ease) forwards;
}
.archhero__window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.25); animation: archZoom 2.2s .15s var(--ease) forwards; }
@keyframes archUp { to { clip-path: inset(0 0 0 0); } }
@keyframes archZoom { to { transform: scale(1); } }
.archhero__words {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; justify-content: space-between; align-items: baseline; pointer-events: none;
  font: 800 clamp(40px, 8.4vw, 150px)/.9 var(--display); font-variation-settings: "wdth" 118; letter-spacing: -0.02em;
  color: #fff; mix-blend-mode: difference; opacity: calc(1 - var(--p) * 1.6);
}
.archhero__words span { display: inline-block; opacity: 0; animation: wordIn 1.2s .6s var(--ease) forwards; }
.archhero__words .w1 { --from: -60px; } .archhero__words .w2 { --from: 60px; }
@keyframes wordIn { from { opacity: 0; transform: translateX(var(--from)); } to { opacity: 1; transform: none; } }
.archhero__tag { position: absolute; left: var(--gutter); bottom: 34px; margin: 0; font-size: clamp(22px, 2vw, 30px); opacity: calc(1 - var(--p) * 2); }
.archhero__who { position: absolute; right: var(--gutter); bottom: 40px; display: flex; gap: 12px; align-items: center; color: #fff; mix-blend-mode: difference; opacity: calc(1 - var(--p) * 2); }
.archhero__who .muted { color: inherit; opacity: .6; }

@media (max-width: 860px) {
  .archhero { height: 170svh; }
  .archhero__window { --w0: calc(100vw - 2 * var(--gutter)); --h0: 72svh; }
  .archhero__words { flex-direction: column; align-items: flex-start; top: 110px; transform: none; font-size: clamp(34px, 11.2vw, 80px); gap: 2px; }
  .archhero__words .w2 { align-self: flex-end; }
  .archhero__tag { bottom: auto; top: calc(110px + 2 * .9 * clamp(40px, 13.5vw, 90px) + 18px); display: none; }
  .archhero__who { left: var(--gutter); right: auto; bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .archhero { height: auto; }
  .archhero__stage { position: relative; }
  .archhero__window, .archhero__window img, .archhero__words span { animation: none; clip-path: none; transform: none; opacity: 1; }
}
.archhero__stage { background: var(--parchment); }

/* =========================================================
   Walk through the arch: scroll zooms into the A's opening,
   which grows to fill the screen and reveals the room behind.
   ========================================================= */
.zoom { height: 280svh; position: relative; }
.zoom__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--parchment); }
.zoom__stage .hero { position: relative; z-index: 1; min-height: 100svh; }
.zoom__stage .hero__lockup { transform-origin: var(--ox, 12%) var(--oy, 50%); transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1)); }
.zoom__stage .hero__row { transition: none; }
.zoom__reveal {
  position: absolute; inset: 0; z-index: 0; background: var(--slate); color: var(--parchment);
  display: grid; place-content: center; text-align: center; gap: 22px; padding: 0 var(--gutter);
  opacity: 0;
}
.zoom__reveal { opacity: var(--ro, 0); }
.zoom__line { margin: 0; font-size: clamp(44px, 8vw, 132px); line-height: 1; transform: scale(calc(1.25 - .25 * var(--rp, 0))); opacity: var(--rp, 0); }
.hero__row .big:has(.zoom__cue) { font-size: clamp(20px, 1.8vw, 26px); color: var(--slate); }
@media (max-width: 860px) { .hero__row .big:has(.zoom__cue) { font-size: clamp(34px, 10vw, 48px); color: inherit; } }
.zoom__cue::after { content: " ↓"; font-style: normal; display: inline-block; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(5px); } }
.zoom__tag { display: none; }
/* Mobile: same zoom; hero content centered in the pinned screen */
@media (max-width: 860px) {
  .zoom { height: 240svh; }
  .zoom__stage .hero { min-height: 100svh; justify-content: center; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom { height: auto; }
  .zoom__stage { position: relative; height: auto; }
  .zoom__reveal { position: relative; opacity: 1; padding: 120px var(--gutter); }
  .zoom__line { opacity: 1; transform: none; }
}

/* Portrait screens (tablets, tall browser windows): center the hero instead of pinning it to the bottom */
@media (orientation: portrait) {
  .zoom__stage .hero { min-height: 100svh; justify-content: center; padding-bottom: 60px; }
  .hero__lockup { --mfs: calc((100vw - 2 * var(--gutter)) / 3.6); }
  .hero__mark { margin: 0; }
  .hero__sub { margin-left: 0; margin-right: 0; }
}


/* MANAGEMENT under ARCH: same black expanded face, tight, sized to span ARCH's width
   (ink width of MANAGEMENT at wdth 125 / wght 900 with -0.01em tracking = 9.70em) */
.hero__lockup { container-type: inline-size; }
.hero__sub {
  display: flex; justify-content: space-between; margin: calc(var(--mfs) * .085) 0 0;
  font: 900 calc(100cqw / 9.75)/.78 var(--display); font-variation-settings: "wdth" 125; letter-spacing: -0.01em;
  padding-top: .06em;
}
.hero__sub span { display: inline-block; opacity: 0; transform: translateY(40%); animation: subIn .9s var(--ease) forwards; }
@keyframes subIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__sub span { animation: none; opacity: 1; transform: none; } }

/* Hero row: cue on the left, founder on the right */
.zoom__stage .hero__row { grid-template-columns: 1fr auto; }
@media (max-width: 860px) { .zoom__stage .hero__row { grid-template-columns: 1fr; } }
@media (min-width: 861px) and (orientation: landscape) {
  .hero__sub { margin: calc(var(--mfs) * .07) calc(var(--mfs) * -0.02) 0; }
}
.hero__sub { color: var(--khaki); }

/* Social links */
.links { border-top: 1px solid var(--shadow); }
.linkrow { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 16px; border-bottom: 1px solid var(--shadow); font: 800 clamp(26px, 3vw, 44px)/1 var(--display); font-variation-settings: "wdth" 112; transition: padding .5s var(--ease), color .3s; }
.linkrow .go { font: 400 24px/1 var(--sans); transition: transform .5s var(--ease); }
.linkrow:hover { padding-left: 14px; color: var(--slate); }
.linkrow:hover .go { transform: rotate(45deg); }
.quicklinks { display: flex; gap: 22px; flex-wrap: wrap; margin: 26px 0 0; }
.quicklinks a, a.u { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.quicklinks a:hover, a.u:hover { color: var(--slate); }
.bio .links { font-size: initial; }
.footer__cta { font: 400 italic clamp(30px, 3.4vw, 48px)/1 var(--serif); display: inline-flex; gap: 14px; align-items: baseline; }
.footer__cta .arrow { font: 400 .6em/1 var(--sans); transition: transform .5s var(--ease); }
.footer__cta:hover .arrow { transform: translateX(6px); }
.footer__links div { align-content: start; }


/* Artist photo gallery */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }
.links div.linkrow:hover { padding-left: 0; color: inherit; }
/* EP track list: static, no hover or reveal motion */
.songs .linkrow, .songs .linkrow:hover { transition: none; padding-left: 0; color: inherit; cursor: default; }

/* Spotlight: rotates through the roster */
.spot__imgs { position: relative; aspect-ratio: 4 / 5; }
.spot__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 6s linear; }
.spot__imgs img.on { opacity: 1; transform: scale(1); }
.spot__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.spot__nav { display: flex; align-items: center; gap: 14px; }
.spot__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(245,241,237,.4); background: none; color: var(--parchment); cursor: pointer; font: 400 16px/1 var(--sans); transition: background .3s, color .3s, border-color .3s; }
.spot__btn:hover { background: var(--parchment); color: var(--shadow); border-color: var(--parchment); }
.spot__count { color: var(--khaki); } .spot__count b { color: var(--parchment); font-weight: 600; }
.spot__slides { display: grid; }
.spot__slide { grid-area: 1 / 1; opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; }
.spot__slide.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.spot__slide h2 { font-size: clamp(48px, 7vw, 120px); font-variation-settings: "wdth" 112; margin: 18px 0 28px; }
.spot__slide p { max-width: 48ch; color: var(--bone); }
.spot__bar { height: 2px; background: rgba(245,241,237,.15); margin-top: 36px; overflow: hidden; }
.spot__bar i { display: block; height: 100%; background: var(--khaki); transform-origin: left; transform: scaleX(0); }
@keyframes spotBar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .spot__imgs img, .spot__slide { transition: none; } .spot__bar { display: none; } }

/* =========================================================
   After the doorway: the room swipes sideways through the roster
   ========================================================= */
.zoom { height: 640svh; }
.zoom__reveal { display: block; padding: 0; overflow: hidden; text-align: left; }
.zoom__track { display: flex; height: 100%; width: max-content; transform: translateX(var(--hx, 0px)); will-change: transform; }
.zpanel { flex: 0 0 100vw; height: 100%; position: relative; display: grid; color: var(--parchment); text-decoration: none; }
.zpanel--intro { place-content: center; text-align: center; gap: 22px; padding: 0 var(--gutter); }
.zpanel__hint { color: var(--bone); opacity: calc(var(--rp, 0)); }
.zpanel__hint span { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.zpanel--artist { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px); padding: 90px var(--gutter) 60px; }
.zpanel--alt { background: var(--shadow); }
.zpanel__img { height: min(72svh, 720px); aspect-ratio: 3 / 4; justify-self: end; border-radius: 999px 999px 6px 6px; overflow: hidden; }
.zpanel__img img { width: 100%; height: 100%; object-fit: cover; transform: translateX(calc(var(--par, 0) * -60px)) scale(1.12); transition: transform .2s linear; }
.zpanel__text { display: flex; flex-direction: column; gap: 22px; }
.zpanel__text .label { color: var(--bone); }
.zpanel__name { font: 800 clamp(64px, 9vw, 170px)/.88 var(--display); font-variation-settings: "wdth" 118; letter-spacing: -0.02em; }
.zpanel__go { align-self: flex-start; border: 1px solid rgba(245,241,237,.5); border-radius: 999px; padding: 14px 20px 12px; transition: background .3s, color .3s; }
.zpanel--artist:hover .zpanel__go { background: var(--parchment); color: var(--shadow); }
.zpanel--end { place-content: center; justify-items: start; padding: 0 12vw; gap: 18px; background: var(--khaki); color: var(--shadow); }
.zpanel--end .label { color: var(--shadow) !important; }
.zpanel--end .zpanel__name .serif { font-weight: 400; font-style: italic; }
@media (max-width: 860px) {
  .zoom { height: 560svh; }
  .zpanel--artist { grid-template-columns: 1fr; align-content: center; justify-items: center; text-align: center; padding: 90px var(--gutter) 40px; gap: 22px; }
  .zpanel__img { justify-self: center; height: 50svh; }
  .zpanel__text { align-items: center; gap: 14px; }
  .zpanel__go { align-self: center; }
  .zpanel__name { font-size: clamp(48px, 14vw, 90px); }
  .zpanel--end { padding: 0 var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .zoom { height: auto; }
  .zoom__track { flex-direction: column; width: 100%; transform: none; }
  .zpanel { flex-basis: auto; min-height: 90svh; }
}
/* Two moments only: the room, then Meet the roster */
.zoom { height: 420svh; }
@media (max-width: 860px) { .zoom { height: 380svh; } }
.zpanel__down { font: 300 clamp(40px, 5vw, 72px)/1 var(--sans); margin-top: 10px; animation: downNudge 1.6s ease-in-out infinite; }
@keyframes downNudge { 50% { transform: translateY(10px); } }

/* Native snapping for the doorway sequence (toggled by JS while inside it) */
html.snap-zoom { scroll-snap-type: y mandatory; }
.zoom { position: relative; }
.snap-point { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
.snap-after { scroll-snap-align: start; scroll-snap-stop: always; }