:root {
  --ground: #0a0a0a;
  --panel: #121313;
  --panel-2: #1a1c1b;
  --ink: #ecebe6;
  --ink-soft: #a9a7a0;
  --ink-dim: #7a7873;
  --slot: clamp(150px, 24vh, 280px);
  --accent: #2dd4bf;
  --on-accent: #04201c;

  --margin: clamp(16px, 2vw, 28px);
  --pad: clamp(24px, 4.2vw, 72px);
  --radius: clamp(18px, 2vw, 28px);

  --t-title: clamp(4rem, 1.5rem + 10vw, 11.5rem);
  --t-big: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  --t-lead: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-small: 0.8125rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-size: var(--t-body); line-height: 1.5; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--margin); top: -100px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 10px 16px; }
.skip:focus { top: 70px; }

/* ---------- layers ---------- */
#grooves, #stage { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#grooves { z-index: 1; }
main { position: relative; z-index: 2; }
#stage { z-index: 30; }
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

/* ---------- cursor: the figure itself ---------- */
html.custom-cursor, html.custom-cursor * { cursor: none !important; }
#cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: none; }
html.custom-cursor #cursor { display: block; }
.cursor-fig {
  position: absolute; left: -6px; top: -4px; width: 34px; height: 34px;
  background: var(--ink);
  -webkit-mask: url(muneco.svg) 0 0 / contain no-repeat; mask: url(muneco.svg) 0 0 / contain no-repeat;
  transform-origin: 20% 10%;
  transition: width .3s var(--ease-out), height .3s var(--ease-out), background-color .2s;
}
#cursor.hot .cursor-fig { width: 52px; height: 52px; background: var(--accent); }
.cursor-label {
  position: absolute; left: 40px; top: 6px; white-space: nowrap;
  background: var(--ink); color: var(--ground); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 99px; opacity: 0; transform: scale(.6); transform-origin: 0 50%;
  transition: opacity .2s, transform .3s var(--ease-out);
}
#cursor.labelled .cursor-label { opacity: 1; transform: none; }

/* ---------- bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px var(--margin);
  background: rgba(10, 10, 10, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(236, 235, 230, 0.08);
}
.bar-btn { font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.bar-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.menu-word, .bar-book { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease-out); }
.bar-btn:hover .menu-word, .bar-book:hover { background-size: 100% 1px; }
.bar-book { padding: 0 16px; border-radius: 99px; background-color: var(--accent); color: var(--on-accent); font-weight: 700; min-height: 36px; background-image: none; transition: background-color .25s; }
.bar-book:hover { background-color: var(--ink); }
/* two bars that cross into an X while the menu is open */
.menu-icon { position: relative; width: 22px; height: 12px; }
.menu-icon i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease-out), top .45s var(--ease-out); }
.menu-icon i:first-child { top: 1px; }
.menu-icon i:last-child { top: 9px; }
.bar-menu[aria-expanded="true"] .menu-icon i:first-child { top: 5px; transform: rotate(45deg); }
.bar-menu[aria-expanded="true"] .menu-icon i:last-child { top: 5px; transform: rotate(-45deg); }
.bar-logo { position: relative; display: grid; place-items: center; min-height: 44px; }
.logo-word { font-size: clamp(20px, 1.6vw, 26px); font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: .01em; transition: opacity .35s, transform .5s var(--ease-out); }
.logo-fig {
  position: absolute; width: 40px; height: 40px; background: var(--ink);
  -webkit-mask: url(muneco.svg) center / contain no-repeat; mask: url(muneco.svg) center / contain no-repeat;
  opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .35s, transform .5s var(--ease-out);
}
.scrolled .logo-word { opacity: 0; transform: scale(.7); }
.scrolled .logo-fig { opacity: 1; transform: none; }

/* ---------- menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ground);
  display: grid; align-content: center; padding: 84px var(--margin) 24px; overflow-y: auto;
}
.menu[hidden] { display: none; }
/* sized by the shorter side, so seven links always fit the screen */
.menu-links a { display: block; font-size: clamp(1.9rem, min(8vw + 1rem, 8.2svh), 6.5rem); padding-block: .04em; font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .92; transition: color .2s, transform .4s var(--ease-out); }
.menu-links a:hover { color: var(--accent); transform: translateX(16px); }
.lang-switch { display: flex; gap: 2px; }
.lang-switch button { min-width: 38px; min-height: 36px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 99px; border: 1.5px solid var(--ink); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
  transition: background-color .25s, color .25s, border-color .25s, scale .15s var(--ease-out);
}
.btn:hover { background: var(--ink); color: var(--ground); }
.btn:active { scale: .97; }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  filter: grayscale(1) brightness(.32) contrast(1.1);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.hero-bottom { position: absolute; left: var(--margin); right: var(--margin); bottom: calc(var(--margin) + 8px); max-width: 760px; }
.hero-type { font-size: clamp(2.25rem, 1rem + 4.4vw, 5rem); font-weight: 800; font-stretch: 62%; line-height: .95; text-transform: uppercase; display: flex; align-items: flex-end; min-height: 1em; }
.caret { display: inline-block; width: .08em; height: .82em; margin: 0 0 .08em .06em; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-lede { font-size: var(--t-lead); line-height: 1.25; margin-top: 12px; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-scroll { position: absolute; right: var(--margin); bottom: calc(var(--margin) + 8px); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 8px; min-height: 44px; align-items: center; }
.hero-scroll span { display: inline-block; animation: nudge 1.6s var(--ease-io) infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; padding: 28px 0 44px; }
.ticker-track { display: flex; width: max-content; will-change: transform; }
.ticker-track span { display: block; line-height: 0; }
.ticker-track span img { height: clamp(72px, 9vw, 140px); width: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.ticker-track i { font-style: normal; line-height: 1; }
.ticker-track i { color: var(--accent); font-size: clamp(1.5rem, 0.6rem + 3vw, 3.5rem); align-self: center; margin: 0 .5em; }

/* ---------- panels ---------- */
/* sections sit straight on the room: no cards, just order and space */
.panel {
  position: relative;
  padding: clamp(96px, 12vw, 200px) var(--margin) 0;
  max-width: 1600px; margin: 0 auto;
}
.panel-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: clamp(40px, 6vw, 96px); }
.slot { width: var(--slot); aspect-ratio: 1; }
/* the figure keeps the right-hand column while you read, so nothing sits under it */
@media (min-width: 761px) {
  .panel > :not(.panel-head):not(.clips-view) { margin-right: calc(var(--slot) + 24px); }
}
.label { font-size: var(--t-small); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.title { font-size: var(--t-title); font-weight: 800; font-stretch: 62%; line-height: .84; text-transform: uppercase; letter-spacing: -.01em; }
.sub { font-size: var(--t-lead); font-weight: 600; font-stretch: 85%; line-height: 1.15; margin-bottom: 18px; }
.note { font-size: var(--t-small); color: var(--ink-soft); margin-top: 14px; }

/* bio */
/* bio: the opening paragraph large, the other two as a pair of columns beneath */
.bio-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.bio-photos { display: grid; gap: 14px; }
.bio-extra { display: none; }
.bio-photo { overflow: hidden; border-radius: 14px; }
/* bigger screens: more photos run alongside the text as it scrolls */
@media (min-width: 761px) {
  .bio-extra { display: block; }
  .bio-photos { gap: clamp(20px, 3vw, 48px); }
}
.bio-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.bio-text { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(24px, 3vw, 48px); }
.bio-text p:first-child { grid-column: 1 / -1; font-size: var(--t-big); font-weight: 600; font-stretch: 85%; line-height: 1.1; letter-spacing: -.01em; max-width: 24ch; }
.bio-text p:not(:first-child) { font-size: var(--t-lead); line-height: 1.35; font-stretch: 92%; max-width: 34ch; padding-top: 22px; border-top: 1px solid #2a2b2a; }
.scrub .w { color: var(--ink-dim); transition: color .2s; }
.scrub .w.on { color: var(--ink); }
.support { margin-top: clamp(64px, 9vw, 140px); }

/* charts */
.tracks li { display: grid; grid-template-columns: 7rem 1fr auto auto; align-items: baseline; gap: 24px; padding: 18px 0; border-top: 1px solid #2a2b2a; }
.tracks li:last-child { border-bottom: 1px solid #2a2b2a; }
.tracks .side { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.tracks .track { font-size: clamp(2.5rem, 1rem + 5vw, 6rem); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .9; }
.tracks .who { color: var(--ink-soft); }
.tracks .tag { font-size: var(--t-small); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid var(--ink-soft); border-radius: 99px; padding: 4px 10px; }

/* supported by: pinned frame, names scroll beside it */
.booth { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); }
.booth-media { position: sticky; top: 96px; align-self: start; }
.booth-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #000; }
.booth-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.booth-frame video.on { opacity: 1; }
.sound { position: absolute; right: 12px; bottom: 12px; min-height: 36px; padding: 0 12px; border-radius: 99px; background: var(--ground); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sound[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.booth-list { padding: 18vh 0 22vh; }
.booth-list li { min-height: 34vh; display: flex; align-items: center; }
.booth-list li.clone { display: none; }
.booth-list button { text-align: left; display: grid; gap: 6px; }
.dj { font-size: clamp(2.75rem, 1rem + 5.5vw, 6.5rem); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .88; color: var(--ink-dim); transition: color .4s; }
.cut { font-size: var(--t-lead); color: var(--ink-dim); transition: color .4s; }
.booth-list li.on .dj { color: var(--ink); }
.booth-list li.on .cut { color: var(--accent); }
/* every screen: the video on top, the names in a swipeable strip underneath */
.booth { grid-template-columns: minmax(0, 1fr); gap: 0; }
.booth-media { position: static; }
.booth-frame { width: 100%; max-width: 980px; aspect-ratio: 2 / 1; max-height: 52svh; }
.booth-list { display: flex; gap: clamp(10px, 2vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 0 0; scrollbar-width: none; max-width: 980px; }
.booth-list::-webkit-scrollbar { display: none; }
.booth-list li, .booth-list li.clone { min-height: 0; flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; }
.booth-list button { padding: 10px 4px; }
/* big screens: every video on show in one strip across the screen, the names in a row beneath; picking a name slides that video to the middle */
.booth-view { position: relative; }
.booth-frame video.clone { display: none; }
@media (min-width: 761px) {
  #supports .booth { margin-right: 0; }
  .booth-view { width: calc(100% + var(--margin) * 2); margin-left: calc(var(--margin) * -1); --vh: min(60svh, 580px); }
  .booth-frame { display: flex; gap: clamp(12px, 1.6vw, 24px); width: 100%; height: var(--vh); aspect-ratio: auto; max-width: none; max-height: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-inline: 50%; scrollbar-width: none; border-radius: 0; background: none; }
  .booth-frame::-webkit-scrollbar { display: none; }
  .booth-frame video { position: static; flex: none; max-width: none; height: var(--vh); width: calc(var(--v-ar, 1.78) * min(60svh, 580px)); border-radius: 14px; background: #000; scroll-snap-align: center; cursor: pointer; opacity: .4; transition: opacity .5s; }
  .booth-frame video.on { opacity: 1; }
  .sound { left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; }
  .booth-list { position: relative; width: calc(100% + var(--margin) * 2); margin-left: calc(var(--margin) * -1); max-width: none; flex-wrap: nowrap; gap: clamp(40px, 6vw, 110px); padding: 28px 50% 0; }
  .booth-list li, .booth-list li.clone { scroll-snap-align: center; }
  .booth-frame video.clone { display: block; }
  .booth-list button { justify-items: center; text-align: center; }
  .dj { font-size: clamp(2.25rem, 4.4vw, 5.5rem); }
}

/* listen */
.listen li { border-top: 1px solid #2a2b2a; }
.listen li:last-child { border-bottom: 1px solid #2a2b2a; }
.listen a {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 12px;
  font-size: clamp(3rem, 1rem + 7vw, 8.5rem); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .95;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0 no-repeat;
  transition: background-size .45s var(--ease-out), color .3s;
}
.listen a:hover { background-size: 100% 100%; color: var(--on-accent); }

/* live */
#live .panel-head { margin-bottom: clamp(12px, 1.5vw, 20px); }
#live .note { margin-top: 10px; }
/* swipeable row: one clip centred at a time, the neighbours peek in from the sides */
.clips-view { position: relative; margin-inline: calc(var(--margin) * -1); width: auto; }
.clips { --clip-h: min(70svh, 560px); --clip-w: 78vw; display: flex; gap: 10px; height: var(--clip-h); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: calc(50% - var(--clip-w) / 2); -webkit-overflow-scrolling: touch; }
.clips::-webkit-scrollbar { display: none; }
.clip { position: relative; flex: 0 0 var(--clip-w); height: 100%; scroll-snap-align: center; scroll-snap-stop: always; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; opacity: .5; transition: opacity .4s; }
.clip.on { opacity: 1; }
.clips.dragging { scroll-snap-type: none; cursor: grabbing; }
.clips.dragging .clip { cursor: grabbing; }
.clips-nav { display: none; }
@media (min-width: 761px) {
  .clips { --clip-h: min(78svh, 740px); --clip-w: min(30vw, 440px); --gap: 16px; display: block; position: relative; overflow: hidden; padding: 0; scroll-snap-type: none; }
  .clip { position: absolute; top: 0; left: 50%; width: var(--clip-w); flex: none; scroll-snap-align: none; transform: translateX(calc(-50% + var(--o, 0) * (var(--clip-w) + var(--gap)))); transition: transform .65s var(--ease-out), opacity .4s; }
  .clip.jump { transition: opacity .4s; }
  .clips-nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; padding-inline: 0; }
  .clips-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); color: var(--ink); font-size: 18px; transition: background .25s, color .25s; }
  .clips-nav button:hover { background: var(--ink); color: var(--ground); }
}
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip figcaption { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ground); padding: 4px 10px; border-radius: 99px; }

/* dates */
.dates-empty { font-size: var(--t-big); font-weight: 600; font-stretch: 85%; line-height: 1.1; max-width: 22ch; }
.played { margin-top: clamp(56px, 8vw, 120px); }
/* the clubs run past in two huge rows, one solid and one outlined, going opposite ways */
#fechas > .played, #bio > .support { margin-right: 0; }
.venues-band { margin-inline: calc(var(--margin) * -1); margin-top: 20px; overflow: hidden; display: grid; gap: clamp(4px, 1vw, 14px); }
.venues { display: flex; width: max-content; font-size: clamp(3.75rem, 1rem + 11vw, 11rem); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .98; white-space: nowrap; will-change: transform; }
.venues li::after { content: "✦"; color: var(--accent); font-size: .4em; vertical-align: .6em; margin-inline: .45em; -webkit-text-stroke: 0; }
.venues-b { color: transparent; -webkit-text-stroke: 2px var(--ink); }
@media (max-width: 760px) { .venues-b { -webkit-text-stroke: 1.5px var(--ink); } }
/* still screens: just the names, wrapped */
@media (prefers-reduced-motion: reduce) {
  .venues { width: auto; flex-wrap: wrap; padding-inline: var(--margin); }
  .venues-b { display: none; }
}
.radio { margin-top: 28px; font-size: var(--t-lead); color: var(--ink-soft); }

/* gallery strip: drifts like the labels, pushed by the scroll, endless */
.gallery { overflow: hidden; padding: 24px 0; margin-top: clamp(48px, 8vw, 140px); }
.gallery-track { display: flex; gap: 12px; width: max-content; padding-right: 12px; will-change: transform; }
.gallery-track img { height: clamp(220px, 38svh, 420px); width: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 14px; filter: grayscale(1); transition: filter .5s; }
.gallery-track img:hover { filter: none; }

/* press */
.press { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); }
.press-list { font-size: var(--t-lead); font-weight: 600; font-stretch: 85%; line-height: 1.3; margin-bottom: 28px; }
.press-list li { padding: 10px 0; border-top: 1px solid #2a2b2a; }
.rider div { display: grid; grid-template-columns: 8rem 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid #2a2b2a; }
.rider dt { color: var(--ink-soft); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding-top: 3px; }
.rider dd { font-size: var(--t-lead); font-weight: 600; font-stretch: 85%; line-height: 1.2; }

/* services */
.svc-lede { font-size: var(--t-big); font-weight: 600; font-stretch: 85%; line-height: 1.08; max-width: 24ch; margin-bottom: clamp(40px, 5vw, 72px); }
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-card { border-top: 1px solid #2a2b2a; padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.svc-items { width: 100%; margin: 6px 0 4px; }
.svc-items li { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: 1; padding: 10px 0; border-top: 1px solid #2f312f; }
.svc-card .btn { margin-top: 24px; }
.pdf { display: inline-flex; gap: 10px; margin-top: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; min-height: 44px; align-items: center; border-bottom: 1.5px solid currentColor; }
.pdf:hover { color: var(--accent); }

/* booking */
.book { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); }
.book-lede { font-size: var(--t-big); font-weight: 600; font-stretch: 85%; line-height: 1.08; margin-bottom: 40px; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mail { font-size: var(--t-lead); font-weight: 700; border-bottom: 1.5px solid currentColor; overflow-wrap: anywhere; }
.mail:hover { color: var(--accent); }
.copy { min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--ink-soft); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.copy:hover { border-color: var(--ink); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.form label { display: grid; gap: 8px; font-size: var(--t-small); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.form .wide { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  font: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid #3a3c3a; border-radius: 0; padding: 10px 0; min-height: 44px;
  transition: border-color .2s;
}
.form select option { background: var(--panel); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form .hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; }
.form .btn:disabled { opacity: .6; cursor: progress; }
.form-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: var(--t-small); color: var(--ink-soft); }
.form-status[data-state="ok"] { color: var(--accent); }
.form-status[data-state="error"] { color: #ff8a80; }

/* footer */
.footer { margin-top: clamp(96px, 12vw, 200px); position: relative; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto; padding: 88px var(--margin) 20px; }
.footer-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.5); z-index: -1; }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-weight: 600; }
.footer-links { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.footer a:hover { color: var(--accent); }
.foot-slot { grid-row: 2; align-self: end; justify-self: start; margin-bottom: 8px; }
.wordmark { grid-row: 3; overflow: hidden; font-size: 14.6vw; font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .8; white-space: nowrap; padding-top: .12em; }
.wordmark .mask { padding-top: .1em; margin-top: -.1em; }
.legal { grid-row: 4; font-size: var(--t-small); color: var(--ink-soft); margin-top: 14px; }

/* masks used by the motion layer */
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.mask-in { display: inline-block; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .panel-head { grid-template-columns: 1fr; }
  .slot { order: -1; justify-self: end; width: 34vw; }
  .bio-grid, .booth, .press, .svc, .book { grid-template-columns: 1fr; }
  .bio-photo { width: 70%; }
  .bio-text p:nth-child(n) { text-indent: 0; padding-left: 0; }
  .bio-text { grid-template-columns: 1fr; }
  .menu-word { display: none; }
  .logo-word { font-size: 16px; }
  .bar-logo { margin-right: 6px; }
  .bar-right { gap: 6px; }
  .bar-book { padding: 0 12px; }
  .booth-media { position: static; }
  .booth-frame { width: 100%; aspect-ratio: 16 / 10; }
  .hero-scroll { display: none; }
  .booth-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 0 0; margin: 0 calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .booth-list li.clone { display: flex; }
  .booth-list::-webkit-scrollbar { display: none; }
  .booth-list li { min-height: 0; flex: 0 0 auto; scroll-snap-align: start; }
  .booth-list button { padding: 10px 4px; }
  .dj { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .cut { font-size: var(--t-small); }
  .tracks li { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .tracks .side { grid-column: 1 / -1; }
  .tracks .who { grid-column: 1; }
  .tracks .tag { grid-column: 2; grid-row: 2 / 4; align-self: center; }
  .form { grid-template-columns: 1fr; }
  .footer { height: 86svh; }
  .wordmark { font-size: 15vw; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .ticker-track, .caret, .hero-scroll span { animation: none; }
}

/* the 3D figure rides the cursor / bar logo while it has no slot */
.fig-docked .cursor-fig, .fig-docked .scrolled .logo-fig { opacity: 0; }

@media (max-width: 760px) { .booth-frame { touch-action: pan-y; } }