/* Kovach & Vela. The page is the turntable's plinth: one powder-coated pink, black vinyl, a cream paper label.
   Display: Chivo for letters with Onest's figures (Chivo's 1 has a slab foot at display size). Body and UI: Onest.
   No monospace anywhere, proportional figures only. */
@font-face { font-family: 'KV Display'; src: url(assets/fonts/chivo-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'KV Display'; src: url(assets/fonts/onest-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'Onest'; src: url(assets/fonts/onest-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --pink: #FF4F8B;      /* the plinth, and the one accent on black */
  --pink-lo: #E8437C;
  --ink: #120F10;       /* vinyl */
  --coal: #1C181A;
  --sleeve: #262124;
  --cream: #F3ECE1;     /* the label paper */
  --ash: #B9AEB2;       /* body text on black */
  --groove: rgba(255,255,255,.16);
  --line: rgba(18,15,16,.22);
  --disp: 'KV Display', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(20px, 4.2vw, 64px);
  --hdr: 96px; --hdr-s: 66px; --logo-h: 54px; --logo-hs: 38px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (max-width: 1023px) { :root { --hdr: 72px; --hdr-s: 60px; --logo-h: 40px; --logo-hs: 34px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--pink); scroll-padding-top: calc(var(--hdr) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--pink); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main:focus { outline: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible, .people :focus-visible, .foot :focus-visible, .hdr.is-solid :focus-visible, .menu :focus-visible { outline-color: var(--pink); }
.wrap { max-width: 1760px; margin: 0 auto; padding: 0 var(--gut); }
.nw { white-space: nowrap; }
.ln { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ln:hover { text-decoration-color: var(--pink); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: 17px; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background-color .2s, color .2s, box-shadow .2s; }
.btn-ink { background: var(--ink); color: var(--cream); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px -12px rgba(30,0,12,.55); }
.btn-ink:hover { transform: translateY(-1px); background: #000; }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: rgba(18,15,16,.07); }
.btn-pink { background: var(--pink); color: var(--ink); }
.btn-pink:hover { background: #ff6c9e; }
.btn-cream-line { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(243,236,225,.7); }
.btn-cream-line:hover { background: rgba(243,236,225,.08); }

/* ---------------------------------------------------------------- header
   Plain and obvious: the logo large on the left, four links, the phone number and the booking button. It sits on the
   pink at the top of every page and turns into a slim vinyl-black bar once you scroll. Phones: logo, Menu, Call. */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--hdr); display: flex; align-items: center; gap: 32px; padding: 0 var(--gut); color: var(--ink); transition: height .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.hdr.is-solid { height: var(--hdr-s); background: var(--ink); color: var(--cream); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 12px 30px -18px rgba(0,0,0,.6); }
.hdr-brand { display: flex; flex-direction: column; gap: 4px; margin-right: auto; }
.hdr-home { position: relative; display: block; line-height: 0; }
.hdr-logo { display: block; height: var(--logo-h); width: auto; transition: height .35s var(--ease), opacity .3s var(--ease); }
.hdr-logo.lg-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.hdr.is-solid .hdr-logo { height: var(--logo-hs); }
.hdr.is-solid .lg-dark { opacity: 1; }
.hdr.is-solid .lg-pink { opacity: 0; }
.concept { font-size: 12px; font-weight: 600; line-height: 1; color: rgba(18,15,16,.72); text-decoration: none; white-space: nowrap; transition: color .35s; }
.hdr.is-solid .concept { color: var(--ash); }
.concept:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav { display: flex; gap: 30px; }
.nav a { position: relative; font-size: 17px; font-weight: 600; text-decoration: none; padding: 10px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.hdr.is-solid .nav a[aria-current]::after { background: var(--pink); }
.hdr-act { display: flex; align-items: center; gap: 24px; margin-left: 8px; }
.hdr-tel { font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hdr-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.hdr-cta { min-height: 50px; padding: 0 22px; font-size: 16px; background: var(--ink); color: var(--cream); }
.hdr-cta:hover { background: #000; }
.hdr.is-solid .hdr-cta { background: var(--pink); color: var(--ink); }
.hdr.is-solid .hdr-cta:hover { background: #ff6c9e; }
.hdr-cta[aria-current] { display: none; }
.menu-btn, .hdr-call { display: none; }
@media (max-width: 1199px) { .hdr { gap: 22px; } .nav { gap: 22px; } .hdr-tel { display: none; } }
@media (max-width: 1023px) {
  .nav, .hdr-act { display: none; }
  .hdr { gap: 8px; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 16px; font-weight: 600; }
  .hdr-call { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 16px; font-weight: 600; text-decoration: none; }
  .hdr-call svg { width: 16px; height: 16px; }
  .hdr.is-solid .hdr-call { background: var(--pink); color: var(--ink); }
  .menu-open .hdr { background: var(--ink); color: var(--cream); }
  .menu-open .hdr .lg-dark { opacity: 1; } .menu-open .hdr .lg-pink { opacity: 0; } .menu-open .concept { color: var(--ash); }
}
@media (max-width: 379px) { .menu-btn { padding: 0 14px; } .hdr-call { padding: 0 13px; } .hdr-call span { display: none; } }
.menu { position: fixed; inset: 0; z-index: 29; background: var(--ink); color: var(--cream); overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--hdr) + 12px) var(--gut) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.js .menu:not([hidden]) { animation: menuIn .28s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translate3d(0, -10px, 0); } }
.menu-nav { display: flex; flex-direction: column; border-top: 1px solid rgba(243,236,225,.14); }
.menu-nav a { display: flex; align-items: center; min-height: 68px; border-bottom: 1px solid rgba(243,236,225,.14); font-family: var(--disp); font-weight: 850; font-size: clamp(32px, 9vw, 44px); letter-spacing: -.045em; text-decoration: none; }
.menu-nav a[aria-current] { color: var(--pink); }
.menu-act { margin-top: 26px; display: grid; gap: 12px; }
.menu-act .btn { width: 100%; }
.menu-addr { margin-top: 20px; color: var(--ash); font-size: 15px; }
html.menu-open { overflow: clip; }
@media (min-width: 1024px) { .menu { display: none !important; } }

/* ---------------------------------------------------------------- the deck
   The turntable stays in place behind the page while the hero, the needle drop and the five tracks scroll past it
   as ordinary content. Nothing holds the page still: every scroll moves the copy, and the deck answers to whichever
   card is in front of it. */
.deck { position: relative; }
.deck-media { position: absolute; inset: 0; pointer-events: none; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--pink); }
.stage canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.gl-live .stage canvas.gl { opacity: 1; }
.stage-shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 90% at 30% 40%, transparent 55%, rgba(80,0,30,.10) 100%); }
.hero { position: relative; z-index: 3; min-height: 100svh; display: flex; align-items: center; }
.hero-in { width: 100%; padding: calc(var(--hdr) + 12px) var(--gut) 48px; }
.hero-h { font-family: var(--disp); font-weight: 850; font-size: clamp(50px, 6.4vw, 112px); line-height: .9; letter-spacing: -.052em; max-width: 7.6em; text-wrap: balance; }
.hero-for { margin-top: 24px; font-family: var(--disp); font-weight: 700; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.16; letter-spacing: -.025em; max-width: 21em; }
.hero-lede { margin-top: 14px; max-width: 30em; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.5; color: rgba(18,15,16,.86); }
.hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-where { margin-top: 20px; max-width: 30em; font-size: 15px; font-weight: 500; color: rgba(18,15,16,.74); }
@media (min-width: 1024px) { .hero-in { max-width: 860px; } .hero-lede { max-width: 27em; } }

/* the cards that scroll past the deck: the drop, side A's heading and its five tracks, and the run-out */
.beats { position: relative; z-index: 3; padding: 4svh var(--gut) 22svh; }
.beat, .beat-head { position: relative; width: min(500px, 36vw); padding: 26px 30px 24px; background: var(--cream); border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 30px 60px -30px rgba(40,0,15,.55), 0 10px 22px -12px rgba(40,0,15,.35); }
.beat + .beat, .beat-head + .beat { margin-top: 0; }
.beat { margin-bottom: 52svh; }
.beat-head { margin-bottom: 12px; }
.beat.cut { transition: box-shadow .4s var(--ease); }
.beat.cut.is-on { box-shadow: 0 0 0 2px var(--ink), 0 30px 60px -30px rgba(40,0,15,.55), 0 10px 22px -12px rgba(40,0,15,.35); }
.beat-end { margin-bottom: 0; }
.drop-h { font-family: var(--disp); font-weight: 850; font-size: clamp(36px, 3.4vw, 56px); line-height: .92; letter-spacing: -.05em; text-wrap: balance; }
.drop-p { margin-top: 14px; font-size: 18px; max-width: 24em; }
.sidea-h { font-family: var(--disp); font-weight: 850; font-size: clamp(30px, 2.6vw, 42px); line-height: .95; letter-spacing: -.045em; }
.sidea-lede { margin-top: 10px; font-size: 16px; line-height: 1.5; }
.sidea-lede .ln { display: inline-block; margin-top: 4px; }
.cut-h { display: flex; align-items: baseline; gap: 14px; font-family: var(--disp); font-weight: 850; font-size: clamp(36px, 3.6vw, 60px); line-height: .92; letter-spacing: -.05em; }
.cut-n { font-size: .42em; letter-spacing: 0; color: rgba(18,15,16,.55); transform: translateY(-.55em); }
.cut p:not(.cut-meta) { margin-top: 16px; font-size: 17.5px; line-height: 1.5; max-width: 26em; }
.cut-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; font-size: 15.5px; font-weight: 600; }
.cut-meta span:last-child { font-weight: 500; color: rgba(18,15,16,.76); }
.end-h { font-family: var(--disp); font-weight: 850; font-size: clamp(36px, 3.4vw, 56px); line-height: .94; letter-spacing: -.048em; }
.end-p { margin: 16px 0 24px; font-size: 18px; max-width: 24em; }

@media (max-width: 899px) {
  .hero { align-items: flex-start; min-height: 100svh; }
  .hero-in { padding-top: calc(var(--hdr) + 14px); }
  .hero-h { font-size: clamp(44px, 12.2vw, 76px); max-width: 6.4em; }
  .hero-for { margin-top: 14px; font-size: 19px; }
  .hero-lede { font-size: 15.5px; margin-top: 8px; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .hero-cta .btn { min-height: 50px; padding: 0 19px; font-size: 16px; }
  .hero-where { margin-top: 12px; font-size: 13.5px; }
  /* on a phone the deck sits in the top half and each card scrolls up through the bottom half */
  .beats { padding: 30svh 10px 16svh; }
  .beat, .beat-head { width: auto; padding: 18px 18px 16px; border-radius: 12px; }
  .beat { margin-bottom: 62svh; }
  .drop-h { font-size: 32px; } .drop-p { font-size: 15.5px; margin-top: 10px; }
  .sidea-h { font-size: 24px; } .sidea-lede { font-size: 14.5px; }
  .cut-h { font-size: 34px; }
  .cut p:not(.cut-meta) { margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
  .cut-meta { font-size: 13.5px; margin-top: 10px; }
  .end-h { font-size: 34px; } .end-p { font-size: 16px; }
}

/* without WebGL: the record is drawn in CSS and the cards are an ordinary list */
.no-webgl .deck-media { display: none; }
.no-webgl .hero { overflow: hidden; }
.no-webgl .hero::after { content: ''; position: absolute; right: -14vw; top: 58%; width: min(60vw, 780px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, #111 0 1.2%, var(--cream) 1.3% 33%, #0b0a0b 33.4% 35%, transparent 35% 97%, #0b0a0b 97% 100%), repeating-radial-gradient(circle, #141213 0 3px, #1d1a1c 3px 4px); }
@media (max-width: 899px) { .no-webgl .hero::after { display: none; } }
.no-webgl .beats { padding-top: 0; padding-bottom: 80px; }
.no-webgl .beat { margin-bottom: 24px; width: min(640px, 100%); }
.no-webgl .beat-drop { display: none; }

/* ---------------------------------------------------------------- people (home) */
.people { position: relative; z-index: 4; background: var(--ink); color: var(--cream); padding: clamp(64px, 7.4vw, 112px) 0; }
.people-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: baseline; }
.people-h { font-family: var(--disp); font-weight: 850; font-size: clamp(42px, 5.6vw, 92px); line-height: .92; letter-spacing: -.05em; max-width: 11em; text-wrap: balance; }
.people-lede { color: var(--ash); font-size: 19px; max-width: 30em; }
.people-lede .ln { color: var(--cream); display: inline-block; margin-top: 8px; }
.credits { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px); }
.credit-name { margin-top: 26px; font-family: var(--disp); font-weight: 800; font-size: clamp(28px, 2.4vw, 38px); letter-spacing: -.04em; line-height: 1; }
.credit-role { margin-top: 10px; color: var(--pink); font-weight: 600; font-size: 16px; line-height: 1.4; }
.credit-say { margin-top: 14px; color: var(--ash); font-size: 17px; line-height: 1.55; }
@media (max-width: 899px) { .people-top { grid-template-columns: 1fr; } .credits { grid-template-columns: 1fr; gap: 56px; } .people-lede { font-size: 17px; } }

/* sleeves: each person's record, sliding a little way out when it comes into view */
.sleeve { position: relative; display: block; aspect-ratio: 1; width: 76%; text-decoration: none; }
.sleeve .disc { position: absolute; top: 2.5%; left: 2.5%; width: 95%; height: 95%; border-radius: 50%; transition: transform 1.3s var(--ease) .15s;
  background:
    radial-gradient(circle, #0a090a 0 2.4%, transparent 2.5%),
    radial-gradient(circle, var(--cream) 0 16.5%, transparent 16.6%),
    radial-gradient(circle, transparent 0 32%, rgba(255,255,255,.05) 32.2% 32.6%, transparent 32.8% 47%, rgba(255,255,255,.05) 47.2% 47.6%, transparent 47.8% 62%, rgba(255,255,255,.05) 62.2% 62.6%, transparent 62.8% 77%, rgba(255,255,255,.05) 77.2% 77.6%, transparent 77.8%),
    conic-gradient(from 200deg, #0d0c0d, #3a3638 10%, #0d0c0d 20%, #0d0c0d 50%, #343032 60%, #0d0c0d 70%, #0d0c0d),
    #0d0c0d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset; }
.sleeve.is-out .disc { transform: translateX(30%); }
.cover { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr auto; padding: 8% 8% 7%; border-radius: 3px; overflow: hidden; box-shadow: 0 24px 40px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset; transition: transform .4s var(--ease); }
a.sleeve:hover .cover { transform: translateY(-4px); }
.cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10), transparent 38%, transparent 70%, rgba(0,0,0,.10)); }
.cv-a, .cv-b { font-family: var(--disp); font-weight: 900; font-size: clamp(40px, 4.5vw, 84px); line-height: .84; letter-spacing: -.06em; }
.cv-b { margin-left: -.04em; }
.cv-c { align-self: end; font-family: var(--disp); font-weight: 700; font-size: clamp(15px, 1.3vw, 20px); letter-spacing: -.02em; }
.cv-logo { display: block; width: 46%; height: auto; margin-top: 8px; }
.c-pink .cover { background: var(--pink); color: var(--ink); }
.c-cream .cover { background: var(--cream); color: var(--ink); }
.c-cream .cv-b { color: #D93A72; }
.c-coal .cover { background: var(--sleeve); color: var(--pink); }
.c-coal .cv-c { color: var(--cream); }
@media (max-width: 899px) { .sleeve { width: 72%; } .sleeve.is-out .disc { transform: translateX(24%); } .cv-a, .cv-b { font-size: 14vw; } }

/* ---------------------------------------------------------------- how a contract read works */
.howto { position: relative; z-index: 4; background: var(--cream); padding: clamp(64px, 7.4vw, 112px) 0; }
.howto-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: baseline; }
.howto-h { font-family: var(--disp); font-weight: 850; font-size: clamp(40px, 4.8vw, 80px); line-height: .92; letter-spacing: -.05em; max-width: 9em; }
.steps { margin-top: clamp(32px, 4vw, 56px); counter-reset: s; border-top: 1.5px solid var(--ink); }
.step { display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.step-n { grid-row: 1; align-self: baseline; font-family: var(--disp); font-weight: 850; font-size: 34px; line-height: 1; letter-spacing: -.04em; color: #D93A72; }
.step h3 { align-self: baseline;  font-family: var(--disp); font-weight: 800; font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -.03em; line-height: 1.1; }
.step p { grid-column: 2; margin-top: 6px; font-size: 17px; color: rgba(18,15,16,.84); max-width: 34em; }
.memo { position: relative; }
.memo-paper { position: relative; background: #FBF8F2; padding: clamp(26px, 3vw, 44px); box-shadow: 0 1px 0 rgba(18,15,16,.06), 0 30px 60px -30px rgba(60,20,30,.45), 0 8px 18px -10px rgba(60,20,30,.25); transform: rotate(-1.6deg); }
.memo-paper::before { content: ''; position: absolute; left: 50%; top: -14px; width: 92px; height: 28px; transform: translateX(-50%) rotate(2deg); background: rgba(255,79,139,.55); }
.memo-h { font-family: var(--disp); font-weight: 850; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -.04em; line-height: 1.18; }
.memo-sub { margin-top: 12px; font-size: 14.5px; color: rgba(18,15,16,.66); }
.memo-list { margin-top: 22px; display: grid; gap: 16px; counter-reset: m; }
.memo-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; counter-increment: m; }
.memo-list li::before { content: counter(m); position: absolute; left: 0; top: 0; font-family: var(--disp); font-weight: 850; color: #D93A72; }
.memo-list b { font-weight: 650; }
.memo-sign { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.memo figcaption { margin-top: 18px; font-size: 14px; color: rgba(18,15,16,.66); }
@media (max-width: 899px) { .howto-in { grid-template-columns: 1fr; } .step { grid-template-columns: 44px 1fr; } .step-n { font-size: 28px; } .step p { font-size: 16px; } }

/* ---------------------------------------------------------------- band + footer */
.band { position: relative; z-index: 4; background: var(--pink); padding: clamp(64px, 7.4vw, 112px) 0; }
.band-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: baseline; }
.band-h { font-family: var(--disp); font-weight: 850; font-size: clamp(46px, 6.6vw, 112px); line-height: .9; letter-spacing: -.055em; text-wrap: balance; }
.band-side p { font-size: 19px; max-width: 30em; }
.band-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 899px) { .band-in { grid-template-columns: 1fr; } .band-side p { font-size: 17px; } }
.foot { position: relative; z-index: 4; background: var(--ink); color: var(--ash); padding: 64px 0 72px; font-size: 16px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 64px; align-items: baseline; }
.foot-a { display: grid; gap: 8px; align-content: start; }
.foot-name { margin-bottom: 10px; line-height: 0; }
.foot-logo { display: block; width: 280px; max-width: 100%; height: auto; }
@media (max-width: 899px) { .foot-logo { width: 220px; } }
.foot a { color: var(--cream); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; align-content: start; }
.foot-nav a { font-weight: 600; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.foot-nav a:hover, .foot-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 5px; }
.foot-fine { grid-column: 1 / -1; margin-top: 12px; padding-top: 22px; border-top: 1px solid rgba(243,236,225,.1); font-size: 14px; max-width: 62em; }
@media (max-width: 899px) { .foot-in { grid-template-columns: 1fr; } }

/* reveals */
.js .rv { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.rm .rv { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) { .sleeve .disc, .cut, .btn, .cover, .hdr, .hdr-logo { transition: none; } }

/* ================================================================ inner pages */
.ph { position: relative; background: var(--pink); padding: calc(var(--hdr) + clamp(32px, 4.4vw, 72px)) 0 clamp(44px, 4.4vw, 72px); }
.ph-people .ph-h { font-size: clamp(48px, 5.8vw, 104px); max-width: 12em; }
.ph-h { font-family: var(--disp); font-weight: 850; font-size: clamp(50px, 7vw, 124px); line-height: .9; letter-spacing: -.052em; max-width: 10em; text-wrap: balance; }
.ph-lead { margin-top: 22px; max-width: 32em; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; }
.ph-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 64px; align-items: baseline; }
.ph-in .ph-lead { margin-top: 0; }
@media (max-width: 899px) { .ph-in { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- /handle/: side B, then a clause from each */
/* side B: the head is an ordinary first screen. The record turns over once, by itself, as the page opens; the scroll
   only ever moves the page. */
.flip { position: relative; background: var(--pink); padding: calc(var(--hdr) + clamp(24px, 3vw, 48px)) 0 clamp(48px, 5vw, 80px); }
.flip-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "copy stage" "card stage"; gap: 28px clamp(32px, 4vw, 72px); align-items: start; }
.flip-copy { grid-area: copy; }
.flip-copy .ph-lead { max-width: 26em; }
.flip-stage { grid-area: stage; position: relative; align-self: stretch; min-height: min(72svh, 640px); border-radius: 4px; overflow: hidden; }
.flip-stage canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.gl-live .flip-stage canvas.gl { opacity: 1; }
.no-webgl .flip-stage { display: none; }
.no-webgl .flip-in { grid-template-columns: minmax(0, 720px); grid-template-areas: "copy" "card"; }
.sideb { grid-area: card; position: relative; max-width: 520px; padding: 24px 28px 20px; background: var(--cream); border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(40,0,15,.55), 0 10px 22px -12px rgba(40,0,15,.35); }
.sideb-h { font-family: var(--disp); font-weight: 850; font-size: clamp(26px, 2.2vw, 36px); line-height: .95; letter-spacing: -.045em; }
.bl { margin-top: 14px; border-top: 1.5px solid var(--ink); }
.bl li { display: grid; grid-template-columns: 26px 1fr; padding: 9px 0 10px; border-bottom: 1px solid var(--line); }
.bl-n { font-family: var(--disp); font-weight: 850; font-size: 15px; color: #D93A72; padding-top: 2px; }
.bl p { font-size: 15.5px; line-height: 1.45; }
.bl b { font-weight: 650; }
@media (max-width: 899px) {
  .flip-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "card"; gap: 18px; }
  .flip-copy .ph-h { font-size: clamp(46px, 13vw, 70px); }
  .flip-copy .ph-lead { font-size: 16px; margin-top: 12px; }
  .flip-stage { min-height: 0; aspect-ratio: 1 / .8; margin: 0 calc(-1 * var(--gut)); border-radius: 0; }
  .sideb { padding: 16px 18px 12px; border-radius: 12px; }
  .bl li { padding: 6px 0 7px; } .bl p { font-size: 14px; }
}

.areas { position: relative; background: var(--ink); color: var(--cream); padding: clamp(72px, 9vw, 130px) 0 clamp(40px, 5vw, 80px); }
.areas-intro { max-width: 40em; font-size: 19px; color: var(--ash); }
.areas-index { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.areas-index a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(243,236,225,.24); font-weight: 600; font-size: 15.5px; text-decoration: none; }
.areas-index a span { color: var(--pink); }
.areas-index a:hover { background: rgba(243,236,225,.08); }
.area { padding: clamp(64px, 8vw, 120px) 0 0; scroll-margin-top: var(--hdr); }
.area-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px clamp(32px, 4.5vw, 80px); align-items: start; }
.area-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px; align-items: first baseline; padding-top: 26px; border-top: 1px solid rgba(243,236,225,.14); }
.area-n { grid-row: 1; font-family: var(--disp); font-weight: 850; font-size: clamp(56px, 6vw, 104px); line-height: .8; letter-spacing: -.05em; color: var(--pink); }
.area-head h2 { font-family: var(--disp); font-weight: 850; font-size: clamp(40px, 4.6vw, 78px); line-height: .92; letter-spacing: -.05em; }
.area-head p { grid-column: 2; margin-top: 14px; max-width: 42em; font-size: 18px; color: var(--ash); }
.clause { position: relative; background: var(--cream); color: var(--ink); padding: clamp(26px, 3vw, 46px) clamp(26px, 3vw, 48px) clamp(22px, 2.4vw, 32px); border-radius: 2px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(18,15,16,.05) 31px 32px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.8); }
.clause::before { content: ''; position: absolute; left: clamp(14px, 1.6vw, 24px); top: 0; bottom: 0; width: 1px; background: rgba(217,58,114,.35); }
.clause blockquote { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.75; letter-spacing: -.003em; }
.clause mark { position: relative; background: linear-gradient(transparent 12%, rgba(255,79,139,.42) 12%, rgba(255,79,139,.42) 92%, transparent 92%); color: inherit; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.clause mark::after { content: attr(data-n); position: relative; top: -.62em; margin-left: 3px; font-size: .62em; font-weight: 700; color: #C0306A; }
.clause figcaption { margin-top: 18px; font-size: 13.5px; color: rgba(18,15,16,.6); }
.note h3 { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--pink); }
.note h3 + p { margin-top: 8px; }
.note p { font-size: 17.5px; line-height: 1.6; color: var(--cream); }
.note p + h3 { margin-top: 26px; }
.note-who { margin-top: 24px !important; padding-top: 16px; border-top: 1px solid rgba(243,236,225,.14); font-weight: 600; font-size: 16px !important; color: var(--ash) !important; }
@media (max-width: 899px) { .area-in { grid-template-columns: 1fr; } .area-head { grid-template-columns: 1fr; } .area-n { grid-row: auto; } .area-head p, .note p { font-size: 16.5px; } }

/* the decks set into a page column melt into the pink at their edges instead of sitting in a box */
.flip-stage canvas.gl, .bk-stage canvas { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }

/* ---------------------------------------------------------------- /fees/: the record-shop price board, then the picker */
.ph-fees { padding-bottom: clamp(56px, 5vw, 80px); }
.board { margin-top: clamp(40px, 5vw, 70px); padding: 14px; border-radius: 6px; background: linear-gradient(160deg, #d6d7da, #9fa1a6 40%, #c8c9cc 60%, #8e9095); box-shadow: 0 40px 80px -40px rgba(60,0,20,.6), 0 2px 0 rgba(255,255,255,.4) inset; }
.board-felt { padding: clamp(20px, 3vw, 44px) clamp(20px, 3.4vw, 54px); border-radius: 2px; background: repeating-linear-gradient(to bottom, #1c191a 0 7px, #0b0a0a 7px 9px); box-shadow: inset 0 2px 10px rgba(0,0,0,.8); color: #F6F2EA; }
.bd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 12px 0 13px; border-bottom: 1px dashed rgba(246,242,234,.12); }
.bd-row:last-child { border-bottom: 0; }
.lt { font-family: var(--body); font-weight: 650; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 1px rgba(255,255,255,.2); }
.lt .w { white-space: nowrap; }
.lt i { display: inline-block; font-style: normal; transform: translate3d(0, var(--dy, 0), 0) rotate(var(--rt, 0deg)); }
.bd-item small, .bd-price small { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: #B8B0AE; font-weight: 400; letter-spacing: 0; text-transform: none; }
.bd-price { text-align: right; }
.bd-price .lt { color: var(--pink); }
@media (max-width: 599px) { .bd-row { grid-template-columns: 1fr; } .bd-price { text-align: left; } .bd-price small { display: inline; margin-left: 8px; } }

.pick { background: var(--cream); padding: clamp(64px, 7.4vw, 112px) 0; }
.pick-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px clamp(40px, 6vw, 100px); align-items: baseline; }
.pick-h { font-family: var(--disp); font-weight: 850; font-size: clamp(40px, 4.6vw, 78px); line-height: .92; letter-spacing: -.05em; }
.pick-lead { margin-top: 14px; font-size: 18px; color: rgba(18,15,16,.8); }
.pick-opts { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.pick-opts button { min-height: 48px; padding: 0 18px; border-radius: 999px; background: #fff8ef; box-shadow: inset 0 0 0 1.5px rgba(18,15,16,.28); font-weight: 600; font-size: 16px; text-align: left; transition: background-color .2s, box-shadow .2s, color .2s; }
.pick-opts button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pick-opts button[aria-checked='true'] { background: var(--ink); color: var(--cream); box-shadow: none; }
.ticket { position: sticky; top: calc(var(--hdr) + 24px); background: var(--ink); color: var(--cream); padding: clamp(26px, 3vw, 40px); border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(40,0,15,.5); }
.ticket::before, .ticket::after { content: ''; position: absolute; left: -10px; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); transform: translateY(-50%); }
.ticket::after { left: auto; right: -10px; }
.tk-label { font-size: 14px; font-weight: 600; color: var(--ash); }
.tk-fee { margin-top: 6px; font-family: var(--disp); font-weight: 850; font-size: clamp(38px, 3.6vw, 60px); line-height: .95; letter-spacing: -.045em; color: var(--pink); }
.tk-who { margin-top: 14px; font-weight: 600; }
.tk-next { margin-top: 10px; color: var(--ash); font-size: 17px; padding-bottom: 24px; border-bottom: 1px dashed rgba(243,236,225,.2); margin-bottom: 24px; }
.ticket.swap .tk-fee, .ticket.swap .tk-who, .ticket.swap .tk-next { animation: tkSwap .45s var(--ease); }
@keyframes tkSwap { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
@media (max-width: 899px) { .pick-in { grid-template-columns: 1fr; } .ticket { position: relative; top: 0; } .pick-opts button { font-size: 15px; } }
.fine { background: var(--pink); padding: clamp(64px, 7vw, 104px) 0; }
.fine-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(40px, 6vw, 100px); align-items: baseline; }
.fine-h { font-family: var(--disp); font-weight: 850; font-size: clamp(30px, 2.8vw, 46px); line-height: .95; letter-spacing: -.045em; }
.fine-col p { margin-top: 16px; font-size: 17.5px; line-height: 1.6; }
@media (max-width: 899px) { .fine-in { grid-template-columns: 1fr; } }
.fine + .band { background: var(--cream); }

/* ---------------------------------------------------------------- /people/: gatefold sleeves */
.gfs { background: var(--ink); color: var(--cream); padding: clamp(32px, 4vw, 64px) 0 clamp(56px, 6vw, 96px); }
.gf { --S: min(520px, 29vw); padding: clamp(48px, 6vw, 90px) 0; scroll-margin-top: var(--hdr); }
/* below 1700 the name sits above the spread, so the sleeve can be big enough to hold its words */
.gf + .gf { border-top: 1px solid rgba(243,236,225,.1); }
.gf-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 4vw, 72px); align-items: start; }
.gf-name { font-family: var(--disp); font-weight: 850; font-size: clamp(42px, 4.6vw, 80px); line-height: .9; letter-spacing: -.05em; }
.gf-role { margin-top: 14px; color: var(--pink); font-weight: 600; font-size: 17px; max-width: 22em; }
.gf-line { margin-top: 10px; color: var(--ash); font-size: 16px; }
.gf-line a { color: var(--cream); }
.gf-btn { margin-top: 26px; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(243,236,225,.5); font-weight: 600; font-size: 16px; }
.gf-btn:hover { background: rgba(243,236,225,.08); }
.gf-sleeve { position: relative; width: calc(var(--S) * 2); height: var(--S); perspective: 2200px; }
.gf-inside { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.gf-panel { position: relative; padding: clamp(20px, 2.2vw, 34px); overflow: hidden; }
.gf-r { background: #F6F0E6; color: var(--ink); box-shadow: inset 12px 0 18px -14px rgba(0,0,0,.4); }
.gf-r h3 { font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.gf-r h3 + .gf-list { margin-top: 6px; }
.gf-list + h3, .gf-small + h3 { margin-top: 14px; }
.gf-list li { position: relative; padding-left: 14px; font-size: clamp(12.5px, .92vw, 14.5px); line-height: 1.4; }
.gf-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #D93A72; }
.gf-small { margin-top: 6px; font-size: 12.5px; color: rgba(18,15,16,.66); }
.gf-reads { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: clamp(12.5px, .92vw, 14px); font-weight: 600; }
.gf-cover { position: absolute; top: 0; left: var(--S); width: var(--S); height: var(--S); transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1.25s cubic-bezier(.3, .7, .2, 1); }
.gf-front, .gf-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px; }
.gf-front { display: grid; grid-template-rows: auto auto 1fr auto; padding: 8% 8% 7%; box-shadow: 0 30px 50px -28px rgba(0,0,0,.8); }
.gf-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 38%, transparent 70%, rgba(0,0,0,.12)); }
.gf-back { visibility: hidden; transition: visibility 0s linear .62s; transform: rotateY(180deg); display: flex; align-items: center; padding: clamp(24px, 2.6vw, 40px); background: var(--sleeve); color: var(--cream); }
.gf-say { font-family: var(--disp); font-weight: 700; font-size: clamp(15px, 1.22vw, 20px); line-height: 1.38; letter-spacing: -.015em; }
.gf .cv-a, .gf .cv-b { font-family: var(--disp); font-weight: 900; font-size: calc(var(--S) * .2); line-height: .84; letter-spacing: -.06em; }
.gf .cv-b { margin-left: -.04em; }
.gf .cv-c { align-self: end; font-family: var(--disp); font-weight: 700; font-size: calc(var(--S) * .042); letter-spacing: -.02em; }
.gf .cv-logo { width: 40%; margin-top: 10px; }
.gf.c-pink .gf-front { background: var(--pink); color: var(--ink); }
.gf.c-cream .gf-front { background: var(--cream); color: var(--ink); }
.gf.c-cream .cv-b { color: #D93A72; }
.gf.c-coal .gf-front { background: #2E282B; color: var(--pink); }
.gf.c-coal .gf-front .cv-c { color: var(--cream); }
.gf.c-pink .gf-back { background: #E8437C; color: var(--ink); }
.gf.c-cream .gf-back { background: #E9E0D2; color: var(--ink); }
.gf.is-open .gf-cover { transform: rotateY(-180deg); }
.gf.is-open .gf-back { visibility: visible; transition-delay: .3s; }
.gf-l { background: none; }
.rm .gf-cover { transition: none; }
@media (max-width: 1099px) {
  .gf { --S: min(560px, calc(100vw - 2 * var(--gut))); }
  .gf-in { grid-template-columns: 1fr; }
  .gf-btn { display: none; }
  .gf-sleeve { width: var(--S); height: auto; perspective: none; display: grid; }
  .gf-cover { position: relative; left: 0; width: var(--S); height: auto; transform: none !important; transform-style: flat; order: -1; }
  .gf-front { position: relative; aspect-ratio: 1; }
  .gf-back { position: relative; transform: none; inset: auto; visibility: visible; }
  .gf-inside { position: relative; display: block; }
  .gf-l { display: none; }
}
@media (min-width: 1100px) and (max-width: 1699px) { .gfs .gf { --S: min(560px, calc((100vw - 2 * var(--gut)) / 2 - 8px)); } .gfs .gf-in { grid-template-columns: minmax(0, 1fr); gap: 26px; } .gfs .gf-meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 40px; align-items: baseline; } .gfs .gf-name { grid-column: 1; grid-row: 1 / span 2; white-space: nowrap; } .gfs .gf-role { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 30em; } .gfs .gf-line { grid-column: 2; grid-row: 2; margin-top: 4px; } .gfs .gf-btn { grid-column: 3; grid-row: 1; margin-top: 0; align-self: baseline; } }
.who { background: var(--cream); padding: clamp(64px, 7.4vw, 112px) 0; }
.who-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 6vw, 100px); align-items: baseline; }
.who-h { font-family: var(--disp); font-weight: 850; font-size: clamp(40px, 4.6vw, 78px); line-height: .92; letter-spacing: -.05em; }
.who-t { width: 100%; border-collapse: collapse; font-size: 17.5px; }
.who-t th { text-align: left; font-size: 14px; font-weight: 600; color: rgba(18,15,16,.66); padding: 0 0 10px; border-bottom: 1.5px solid var(--ink); }
.who-t td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.who-t td:last-child { font-weight: 650; padding-left: 20px; white-space: nowrap; }
@media (max-width: 899px) { .who-in { grid-template-columns: 1fr; } .who-t { font-size: 16px; } }

/* ---------------------------------------------------------------- /book/ */
.bk { background: var(--pink); padding: calc(var(--hdr) + clamp(48px, 6vw, 96px)) 0 clamp(70px, 8vw, 120px); }
.bk-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px clamp(40px, 5vw, 90px); align-items: start; }
.bk-copy .ph-h { font-size: clamp(48px, 5.6vw, 100px); }
.bk-form { margin-top: clamp(30px, 3.4vw, 48px); display: grid; gap: 22px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fld { border: 0; margin: 0; padding: 0; min-width: 0; }
.fld label, .fld legend { display: block; padding: 0; margin-bottom: 8px; font-weight: 650; font-size: 16px; }
.fld input[type=text], .fld input[type=email], .fld input[type=tel], .fld textarea { width: 100%; min-height: 54px; padding: 13px 16px; border: 0; border-radius: 10px; background: #FFF6F0; box-shadow: inset 0 0 0 1.5px rgba(18,15,16,.5); font: 400 17px/1.4 var(--body); color: var(--ink); -webkit-appearance: none; appearance: none; transition: box-shadow .2s; }
.fld textarea { resize: vertical; min-height: 90px; }
.fld input:focus, .fld textarea:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--ink); }
.fld #f-text { margin-top: 10px; }
.hint { margin-top: 6px; font-size: 14.5px; color: rgba(18,15,16,.78); }
.err { margin-top: 6px; font-size: 14.5px; font-weight: 650; color: #6B0024; }
.err:empty { display: none; }
.fld .bad { box-shadow: inset 0 0 0 2.5px #6B0024 !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; font-weight: 500; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 999px; background: #FFF6F0; box-shadow: inset 0 0 0 1.5px rgba(18,15,16,.4); font-size: 15.5px; font-weight: 550; cursor: pointer; transition: background-color .2s, color .2s; }
.chips input:checked + span { background: var(--ink); color: var(--cream); box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.chips.bad span { box-shadow: inset 0 0 0 2px #6B0024; }
.drop-zone { position: relative; display: flex; align-items: center; min-height: 64px; padding: 0 18px; border-radius: 10px; border: 1.5px dashed rgba(18,15,16,.6); background: rgba(255,246,240,.55); }
.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-t { font-weight: 600; font-size: 15.5px; }
.drop-zone:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.bk-legal { font-size: 15px; font-weight: 600; }
.btn-send { justify-self: start; min-width: 200px; }
.bk-demo { font-size: 14px; color: rgba(18,15,16,.72); }
.bk-done { margin-top: 40px; padding: clamp(24px, 3vw, 40px); background: var(--cream); border-radius: 4px; display: grid; gap: 14px; }
.bk-done:focus { outline: none; }
.bk-done-h { font-family: var(--disp); font-weight: 850; font-size: clamp(34px, 3.4vw, 54px); line-height: .95; letter-spacing: -.045em; }
.bk-again { justify-self: start; font-size: 16px; min-height: 44px; }
.bk-deck { position: sticky; top: calc(var(--hdr) + 20px); }
.bk-stage { position: relative; aspect-ratio: 1 / 1.05; width: 100%; border-radius: 4px; overflow: hidden; }
.bk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.gl-live .bk-stage canvas { opacity: 1; }
.no-webgl .bk-deck { display: none; }
.no-webgl .bk-in { grid-template-columns: minmax(0, 860px); }
@media (max-width: 899px) { .bk-in { grid-template-columns: 1fr; } .fld-row { grid-template-columns: 1fr; } .bk-deck { position: relative; top: 0; order: -1; margin: -10px calc(-1 * var(--gut)) 0; } .bk-stage { aspect-ratio: 1 / .62; border-radius: 0; } }
.find { background: var(--cream); padding: clamp(64px, 7.4vw, 112px) 0; }
.find-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 100px); align-items: start; }
.find-h { font-family: var(--disp); font-weight: 850; font-size: clamp(40px, 4.6vw, 78px); line-height: .92; letter-spacing: -.05em; }
.find-copy > p { margin-top: 18px; font-size: 18px; max-width: 28em; }
.find-dl { margin-top: 26px; border-top: 1.5px solid var(--ink); }
.find-dl div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.find-dl dt { font-weight: 650; }
.map svg { width: 100%; height: auto; display: block; background: #EAE1D3; border-radius: 3px; }
.map figcaption { margin-top: 10px; font-size: 14px; color: rgba(18,15,16,.66); }
.mp-st path { fill: none; stroke: var(--ink); stroke-width: 2; }
.mp-park path { fill: none; stroke: rgba(18,15,16,.45); stroke-width: 10; stroke-dasharray: 2 22; }
.mp-bldg path { fill: rgba(18,15,16,.06); stroke: rgba(18,15,16,.45); stroke-width: 1.4; }
.mp-ours { fill: var(--pink); stroke: var(--ink); stroke-width: 2; }
.mp-walk { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.map.in .mp-walk, .rm .mp-walk, .no-io .mp-walk { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .4s; }
.mp-door { fill: var(--ink); stroke: var(--pink); stroke-width: 4; }
.mp-lab { font: 650 17px var(--body); fill: var(--ink); paint-order: stroke; stroke: #EAE1D3; stroke-width: 6px; stroke-linejoin: round; }
.mp-big { font-family: var(--disp); font-weight: 850; font-size: 30px; letter-spacing: -.02em; }
.mp-sm { font-size: 14px; font-weight: 600; }
.mp-ink { stroke: var(--pink); }
.mp-n path { fill: var(--ink); } .mp-n text { font: 700 16px var(--body); fill: var(--ink); }
@media (max-width: 899px) { .find-in { grid-template-columns: 1fr; } .mp-lab { font-size: 24px; } .mp-sm { font-size: 20px; } .mp-big { font-size: 38px; } }
.faq { background: var(--ink); color: var(--cream); padding: clamp(64px, 7.4vw, 112px) 0; }
.faq-in { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 32px clamp(40px, 6vw, 100px); align-items: baseline; }
.faq-h { font-family: var(--disp); font-weight: 850; font-size: clamp(40px, 4.6vw, 78px); line-height: .92; letter-spacing: -.05em; }
.faq-list { border-top: 1px solid rgba(243,236,225,.18); }
.qa { border-bottom: 1px solid rgba(243,236,225,.18); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 14px 0; font-weight: 650; font-size: clamp(17px, 1.3vw, 20px); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--pink); border-bottom: 2.5px solid var(--pink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.qa p { padding: 0 0 20px; max-width: 40em; color: var(--ash); font-size: 17px; }
@media (max-width: 899px) { .faq-in { grid-template-columns: 1fr; } }