/* 7VENCORE public site. Warm black and white, one family, square corners. */
@font-face { font-family: "Montserrat"; src: url("/assets/Montserrat.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0c0b0a;
  --surface: #171513;
  --surface-2: #23201c;
  --surface-3: #2e2a25;
  --ink: #e7e4de;
  --muted: #a6a29b;
  --accent: #e7e4de;
  --accent-ink: #0c0b0a;

  --font: "Montserrat", system-ui, sans-serif;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-statement: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --step-head: clamp(2.25rem, 1rem + 4vw, 5rem);
  --step-display: min(calc((100vw - 2 * var(--margin)) / 5.8), 30svh);

  /* beyond 110rem the content stops growing and the margins take the rest */
  --margin: max(clamp(1rem, 2.2vw, 2rem), (100vw - 110rem) / 2);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(5rem, 3rem + 9vw, 12rem);
  --bar: 4rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-reveal: 800ms;
  --mono: grayscale(1) sepia(0.12) contrast(1.05);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--bar); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.55; font-weight: 450; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; background: var(--surface); filter: var(--mono); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-weight: 850; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
p { text-wrap: pretty; max-width: 62ch; }
p + p { margin-top: 0.9em; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nums { font-variant-numeric: tabular-nums; }
.head { font-size: var(--step-head); }
.statement { font-size: var(--step-statement); font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; }
.skip { position: absolute; left: var(--margin); top: 0.5rem; z-index: 50; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--step-small); text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button--ghost { background: var(--surface-2); color: var(--ink); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #fffaf1; }
  .button--ghost:hover { background: var(--surface-3); }
  .link:hover { text-decoration-color: currentColor; }
  .link-plain:hover { text-decoration-color: var(--muted); }
}

/* ---------- bar + menu ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar); display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); padding-inline: var(--margin); background: var(--bg); }
.bar__mark { font-weight: 900; letter-spacing: -0.02em; text-decoration: none; font-size: 1.125rem; margin-right: auto; }
.bar__nav { display: none; gap: clamp(1rem, 2vw, 2.25rem); }
.bar__link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.35em; text-decoration-thickness: 0.08em; font-size: var(--step-small); font-weight: 600; transition: text-decoration-color var(--t-hover) ease; }
.bar__lang { font-size: var(--step-small); font-weight: 700; text-decoration: none; padding: 0.5rem 0.25rem; }
.bar__cta { display: none; min-height: 2.5rem; }
.bar__menu { font-size: var(--step-small); font-weight: 700; padding: 0.6rem 0; }
@media (hover: hover) and (pointer: fine) { .bar__link:hover, .bar__lang:hover { text-decoration-color: currentColor; text-decoration: underline; text-underline-offset: 0.35em; } }
@media (min-width: 60em) {
  .bar__nav, .bar__cta { display: flex; }
  .bar__menu { display: none; }
}
.menu { position: fixed; inset: var(--bar) 0 0; z-index: 29; background: var(--bg); padding: 2rem var(--margin); display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__nav .bar__link { font-size: var(--step-statement); font-weight: 800; padding-block: 0.35rem; }
.menu__cta { width: 100%; min-height: 3.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) .menu__nav > * { animation: rise 500ms var(--ease-out) both; }
  .menu:not([hidden]) .menu__nav > :nth-child(2) { animation-delay: 50ms; }
  .menu:not([hidden]) .menu__nav > :nth-child(3) { animation-delay: 100ms; }
  .menu:not([hidden]) .menu__nav > :nth-child(4) { animation-delay: 150ms; }
  .menu:not([hidden]) .menu__nav > :nth-child(5) { animation-delay: 200ms; }
  .menu:not([hidden]) .menu__nav > :nth-child(6) { animation-delay: 250ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- hero: the name splits, the two stay ---------- */
.hero { position: relative; height: 175svh; }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--margin) max(5svh, 1.5rem); }
.hero__cut { --head: min(34svh, 40vw); position: absolute; top: calc(var(--bar) + 2svh); height: calc(var(--head) * 1.6); width: auto; max-width: none; background: none; filter: none; transform-origin: 50% 100%; }
.hero__cut--g { left: calc(var(--head) * -0.765); }
.hero__cut--v { right: 0; }
.hero__word { position: relative; z-index: 2; font-size: var(--step-display); font-weight: 900; letter-spacing: -0.02em; line-height: 0.8; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; }
.hero__half { display: block; will-change: transform; }
.hero__half--r { align-self: flex-end; }
.hero__mark { position: relative; z-index: 2; }
.hero__b2b, .hero__foot { will-change: transform, opacity; }
.hero__b2b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: var(--step-head); font-weight: 900; letter-spacing: -0.03em; line-height: 1; opacity: 0; }
.hero__foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.5rem, 3svh, 2.5rem); }
.hero__line { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); font-weight: 600; max-width: 34ch; }
@media (max-width: 49.99em) {
  .hero__word { font-size: calc((100vw - 2 * var(--margin)) / 2.95); }
}
@media (max-width: 35.99em) { .hero__cut { top: calc(var(--bar) + 6svh); } }   /* phones: the two sit closer to the name */
@media (min-width: 36em) and (max-width: 49.99em) { .hero__cut { --head: min(32svh, 34vw); } }
@media (min-width: 50em) {
  .hero__cut { --head: min(34svh, 22vw); top: calc(var(--bar) + 3svh); }
  .hero__word { flex-direction: row; justify-content: space-between; }
  .hero__half--r { align-self: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero { height: auto; } .hero__b2b { display: none; } }

/* ---------- story: the July line and the text hold, pictures pass ---------- */
.story { padding: var(--section) var(--margin) 0; }
.story__run { display: grid; gap: 3rem var(--gutter); }
.story__title { font-size: var(--step-statement); font-weight: 850; letter-spacing: -0.02em; line-height: 1.12; max-width: 20ch; }
.story__text { margin-top: 1.75rem; }
.story__pics { display: flex; flex-direction: column; gap: 3rem; }
.story__pic { overflow: hidden; }
.story__pic img, .story__pic video { width: 100%; height: 100%; object-fit: cover; }
.story__pic--a { width: 72%; aspect-ratio: 4 / 5; }
.story__pic--b { width: 88%; aspect-ratio: 16 / 10; align-self: flex-end; }
.story__pic--c { width: 60%; aspect-ratio: 1; }
.story__formats { margin-top: var(--section); background: var(--surface); padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 2rem var(--gutter); }
.story__formats-title { font-size: var(--step-statement); }
.story__formats dl { display: grid; gap: 2rem var(--gutter); }
.story__formats dt { font-weight: 900; font-size: var(--step-head); letter-spacing: -0.03em; line-height: 0.9; }
.story__formats dd { margin-top: 0.75rem; max-width: 34ch; }
@media (min-width: 60em) {
  .story__run { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .story__pin { grid-column: 1 / span 5; }
  .story__pics { grid-column: 7 / -1; gap: 10svh; }
}
@media (min-width: 48em) {
  .story__formats { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .story__formats-title { grid-column: 1 / -1; }
  .story__formats dl { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60em) { .story__pin { position: sticky; top: calc(var(--bar) + 10svh); } }
@media (min-width: 48em) and (max-width: 59.99em) { .story__pics { flex-direction: row; align-items: flex-start; } .story__pic { flex: 1; width: auto; } }

/* ---------- artists: the crossfader mixes their two clips ---------- */
.artists { padding: var(--section) var(--margin) 0; }
.artists__title { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mixer__screen { position: relative; aspect-ratio: 16 / 9; max-height: min(52svh, 34rem); width: 100%; overflow: hidden; background: var(--surface); }
.mixer__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mixer__v--v { opacity: 0.5; }
.mixer__deck { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); background: var(--surface); padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2.5rem); }
.mixer__ch { font-weight: 900; letter-spacing: -0.02em; font-size: var(--step-body); transition: opacity var(--t-hover) ease; }
.mixer__fader { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: grab; touch-action: pan-y; }
.mixer__fader:active { cursor: grabbing; }
.mixer__fader::-webkit-slider-runnable-track { height: 0.25rem; background: var(--surface-3); }
.mixer__fader::-moz-range-track { height: 0.25rem; background: var(--surface-3); }
.mixer__fader::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 2.25rem; margin-top: -1rem; background: var(--ink); transition: transform var(--t-press) var(--ease-out); }
.mixer__fader::-moz-range-thumb { width: 1.25rem; height: 2.25rem; border: 0; border-radius: 0; background: var(--ink); }
.mixer__fader:active::-webkit-slider-thumb { transform: scaleY(0.92); }
.mixer__fader:focus-visible { outline-offset: 6px; }
.artists__pair { display: grid; gap: 4rem var(--gutter); margin-top: clamp(4rem, 8vw, 7rem); }
.artist__pic { display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.artist__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft), filter 400ms ease; }
.artist__name { font-size: var(--step-statement); margin-top: 1.25rem; }
.artist__name a { text-decoration: none; }
.artist__role { color: var(--muted); font-size: var(--step-small); margin-top: 0.35rem; font-weight: 600; }
.artist__bio { margin-top: 1rem; max-width: 46ch; }
.artist__more { display: inline-block; margin-top: 1rem; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .artist:hover .artist__pic img { transform: scale(1.035); }
  .artist__name a:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.06em; }
}
@media (min-width: 48em) {
  .artists__pair { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .artist--g { grid-column: 1 / span 5; }
  .artist--v { grid-column: 8 / span 5; margin-top: 18vh; }
}
/* wide screens: the set-up itself, GIXSEPPE's deck, the mixer, VIONO's deck */
@media (min-width: 75em) {
  .artists { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .artists__title { grid-column: 1 / -1; }
  .artists__pair { display: contents; }
  .artist--g { grid-column: 1 / span 3; grid-row: 2; }
  .artist--v { grid-column: 10 / span 3; grid-row: 2; margin-top: 0; }
  .mixer { grid-column: 4 / span 6; grid-row: 2; }
  .mixer__screen { aspect-ratio: 5 / 3; max-height: none; }   /* as tall as the two portraits beside it */
  .artist__bio { font-size: 1rem; }
}

/* ---------- dates: sticky photograph, active list ---------- */
.dates { display: grid; gap: 2.5rem var(--gutter); padding: var(--section) var(--margin) 0; }
.dates__photo { overflow: hidden; aspect-ratio: 4 / 3; }
.dates__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dates__body .head { margin-bottom: 2rem; }
.dates__rows { display: grid; gap: 0.25rem; }
.date { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 0.25rem 1.25rem; align-items: baseline; padding: 1.1rem 1rem; background: var(--surface); transition: background-color var(--t-hover) ease; }
.date__when { font-weight: 800; }
.date__time { color: var(--muted); font-weight: 600; }
.date__what { display: grid; }
.date__event { font-weight: 750; }
.date__where { color: var(--muted); font-size: var(--step-small); }
.date__type { font-weight: 900; }
.date__ticket { grid-column: 2 / -1; font-weight: 700; font-size: var(--step-small); justify-self: start; }
.date:hover, .date:focus-within { background: var(--surface-2); }
.dates__empty { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; justify-items: start; }
.dates__archive { margin-top: 2rem; }
.dates__archive summary { cursor: pointer; font-weight: 700; padding: 0.75rem 0; }
.dates__rows--past .date { background: transparent; }
@media (min-width: 48em) {
  .dates { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .dates__photo { grid-column: 1 / span 5; position: sticky; top: calc(var(--bar) + 4svh); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--bar) - 8svh); }
  .dates__body { grid-column: 7 / span 6; }
  .date { grid-template-columns: 8.5em 1fr 3.5em 5em; padding-inline: 1.25rem; }
  .date__ticket { grid-column: auto; justify-self: end; }
}

/* ---------- portfolio ---------- */
.portfolio { padding: var(--section) var(--margin) 0; }
.portfolio .head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.portfolio__top { display: grid; gap: 3.5rem var(--gutter); }
.frame__stack { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); cursor: pointer; }
.frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms ease; }
.frame__img.is-on { opacity: 1; }
.frame__cap { margin-top: 1rem; font-size: var(--step-small); font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; min-height: 2.9em; }
.frame__credit { color: var(--muted); font-weight: 500; }
.clip__cap .frame__credit, .strip__cap .frame__credit { display: block; }
.gigs__title, .clips__title, .sets__title { font-size: var(--step-statement); margin-bottom: 1.25rem; }
.gigs__rows { display: grid; }
.gig { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding: 0.9rem 0; }
.gig + .gig { margin-top: 0.15rem; }
.gig__venue { font-weight: 750; }
.gig__event { grid-column: 1; color: var(--muted); font-size: var(--step-small); }
.gig__meta { grid-column: 2; grid-row: 1; font-size: var(--step-small); font-weight: 600; text-align: right; }
.clips { margin-top: clamp(5rem, 9vw, 8rem); }
.clips__row { display: grid; gap: 2.5rem var(--gutter); }
.clip__play { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: var(--surface); }
.clip__v { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft), filter 300ms ease; filter: var(--mono) brightness(0.8); }
.clip__play[aria-pressed="true"] .clip__v { filter: var(--mono); transform: scale(1.03); }
.clip__cap { margin-top: 0.75rem; font-size: var(--step-small); font-weight: 600; }
.sets { margin-top: clamp(5rem, 9vw, 8rem); display: grid; gap: 1.5rem; }
.sets__consent { background: var(--surface); padding: clamp(1.25rem, 2.5vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.sets__consent p { font-size: var(--step-small); max-width: 52ch; }
.sets.is-loaded .sets__consent { display: none; }
.set { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
.set__link { font-weight: 750; font-size: var(--step-statement); letter-spacing: -0.02em; }
.set__note { color: var(--muted); font-size: var(--step-small); }
.set__embed { flex-basis: 100%; }
.set__embed iframe { display: block; width: 100%; height: 300px; border: 0; }
@media (min-width: 48em) {
  .clips__row { grid-template-columns: 1fr 1fr; }
  .clip:nth-child(even) { margin-top: 12vh; }
  .portfolio__top { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .frame { grid-column: 1 / span 5; }
  .gigs { grid-column: 7 / span 6; }
}
@media (hover: hover) and (pointer: fine) { .clip__play:hover .clip__v { filter: var(--mono); } }

/* ---------- booking: card on a photograph ---------- */
.booking { position: relative; margin-top: var(--section); padding: 0 var(--margin); }
.booking__bg { height: 70svh; margin-inline: calc(var(--margin) * -1); overflow: hidden; }
.booking__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; filter: var(--mono) brightness(0.6); }
.booking__card { position: relative; z-index: 1; margin-top: -5rem; background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); }
.booking__title { font-size: var(--step-head); }
.booking__intro { margin-top: 1rem; }
.form { display: grid; gap: 1rem; margin-top: 1.75rem; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: honeypot, never seen */
.field-row { display: grid; gap: 0.4rem; font-size: var(--step-small); font-weight: 600; }
.field { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; background: var(--surface-2); border: 0; border-radius: 0; font-size: 1rem; font-weight: 500; color: var(--ink); transition: background-color var(--t-hover) ease; color-scheme: dark; }
.field:hover { background: var(--surface-3); }
.field:focus-visible { outline-offset: 0; }
textarea.field { resize: vertical; min-height: 7rem; }
.form__two { display: grid; gap: 1rem; }
.form__type { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form__type legend { font-size: var(--step-small); font-weight: 600; margin-bottom: 0.5rem; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: var(--surface-2); font-weight: 700; font-size: var(--step-small); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.chip input:checked + span { background: var(--ink); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.chip:hover input:not(:checked) + span { background: var(--surface-3); }
.form__consent { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: var(--step-small); }
.form__consent input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--ink); }
.form__send { width: 100%; min-height: 3.5rem; margin-top: 0.5rem; }
.form__send[disabled] { opacity: 0.6; cursor: progress; }
.form__status { font-weight: 600; min-height: 1.5em; }
.form__status.is-error { color: #f0b9a6; }
@media (min-width: 40em) { .form__two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) {
  .booking { padding: 0; min-height: 100svh; display: grid; }
  .booking__bg { grid-area: 1 / 1; position: sticky; top: 0; height: 100svh; margin: 0; }
  .booking__card { grid-area: 1 / 1; align-self: start; justify-self: end; width: min(32rem, 44vw); margin: calc(var(--bar) + 2rem) var(--margin) 60px 0; }
}

/* ---------- footer ---------- */
.foot { display: grid; gap: 0.5rem; margin-top: var(--section); padding: 0 var(--margin) 1.5rem; font-size: var(--step-small); }
.foot__about, .foot__end { color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 600; }
.foot a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--t-hover) ease; }
.foot a:hover { text-decoration-color: currentColor; }
.foot__end a { color: var(--ink); }
@media (min-width: 50em) {
  .foot { grid-template-columns: 1fr auto 1fr; align-items: baseline; padding-bottom: 30px; }
  .foot__end { text-align: right; }
}

/* ---------- artist pages ---------- */
.solo { display: grid; gap: 2rem var(--gutter); padding: calc(var(--bar) + 2rem) var(--margin) 0; }
.solo__name { font-size: calc((100vw - 2 * var(--margin)) / 6.1); font-weight: 900; line-height: 0.85; letter-spacing: -0.03em; overflow-wrap: anywhere; position: relative; z-index: 1; }
.solo__role { font-size: var(--step-statement); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-top: 1.5rem; max-width: 20ch; }
.solo__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.solo__pic { overflow: hidden; }
.solo__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.solo__credit { color: var(--muted); font-size: var(--step-small); margin-top: 0.75rem; }
.bio { display: grid; gap: 2rem var(--gutter); padding: var(--section) var(--margin) 0; }
.bio__facts { display: grid; gap: 1.25rem; background: var(--surface); padding: clamp(1.25rem, 2.5vw, 2rem); align-self: start; }
.bio__facts dt { color: var(--muted); font-size: var(--step-small); font-weight: 600; }
.bio__facts dd { font-weight: 700; margin-top: 0.2rem; }
.bio__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.strip { padding: var(--section) var(--margin) 0; }
.strip .head, .solo-gigs .head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.strip__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gutter); }
.strip__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strip__cap { margin-top: 0.75rem; font-size: var(--step-small); font-weight: 600; }
.solo-gigs { padding: var(--section) var(--margin) 0; }
.solo-gigs__grid { display: grid; gap: 3rem; }
.solo-gigs__clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.handoff { display: grid; gap: 2rem; padding: var(--section) var(--margin) 0; justify-items: start; }
.handoff__link { display: grid; grid-template-columns: minmax(7rem, 22vw) 1fr; gap: var(--gutter); align-items: end; text-decoration: none; width: 100%; }
.handoff__pic { overflow: hidden; aspect-ratio: 4 / 5; }
.handoff__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
.handoff__kicker { display: block; font-size: var(--step-statement); font-weight: 700; color: var(--muted); letter-spacing: -0.02em; }
.handoff__name { display: block; font-size: var(--step-head); font-weight: 900; letter-spacing: -0.03em; line-height: 0.9; }
.handoff__back { font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .handoff__link:hover .handoff__pic img { transform: scale(1.04); }
  .strip__item:hover img { filter: var(--mono) brightness(1.08); }
}
@media (min-width: 50em) {
  .solo { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; min-height: 92svh; }
  .solo__text { grid-column: 1 / span 7; padding-bottom: 2rem; }
  .solo__name { font-size: calc((100vw - 2 * var(--margin)) * 0.56 / 6.1); }
  .solo__pic { grid-column: 8 / span 5; }
  .bio { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bio .head { grid-column: 1 / -1; }
  .bio__text { grid-column: 1 / span 7; }
  .bio__facts { grid-column: 9 / span 4; }
  .solo-gigs__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
  .solo-gigs__grid .gigs__rows { grid-column: 1 / span 6; }
  .solo-gigs__clip { grid-column: 8 / -1; position: sticky; top: calc(var(--bar) + 8svh); }
  .strip__row { grid-template-columns: repeat(3, 1fr); }
  .strip__item:nth-child(3n+2) { margin-top: 10vh; }
  /* the close: the other half's name at the size of this page's own name */
  .handoff__link { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .handoff__pic { grid-column: 1 / span 4; }
  .handoff__text { grid-column: 5 / -1; }
  .handoff__name { font-size: calc((100vw - 2 * var(--margin)) * 0.56 / 6.1); line-height: 0.85; margin-top: 0.15em; }   /* room for the glyphs above the tight line */
}

/* ---------- legal ---------- */
.legal { padding: calc(var(--bar) + 3rem) var(--margin) 0; max-width: 52rem; }
.legal .head { margin-bottom: 2.5rem; }
.legal h2 { font-size: var(--step-body); font-weight: 800; letter-spacing: 0; margin: 2rem 0 0.5rem; }
.legal .button { margin-top: 1.5rem; }

/* ---------- entrances: content is visible without script ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .dates__photo[data-reveal] img, .js .mixer[data-reveal] .mixer__screen, .js .frame[data-reveal] .frame__stack { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-expo); transition-delay: var(--d, 0ms); }
  .js .dates__photo[data-reveal] { opacity: 1; transform: none; }
  .js .dates__photo[data-reveal].is-in img, .js .mixer[data-reveal].is-in .mixer__screen, .js .frame[data-reveal].is-in .frame__stack { clip-path: inset(0); }
  .js .dates__rows[data-reveal] { opacity: 1; transform: none; }
  .js .dates__rows[data-reveal] > *, .js .gigs__rows > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + var(--d, 0ms)); }
  .js .dates__rows[data-reveal].is-in > *, .js .gigs.is-in .gigs__rows > *, .js .gigs__rows.is-in > * { opacity: 1; transform: none; }
  .js .solo__name { animation: word-in 1100ms var(--ease-expo) both; }
  .js .solo__role, .js .solo__actions { animation: rise 800ms var(--ease-out) both 250ms; }
  .js .solo__pic img { animation: settle 1600ms var(--ease-soft) both; }
  .js .hero__cut { animation: settle 1400ms var(--ease-soft) both; }
  .js .hero__word { animation: word-in 1100ms var(--ease-expo) both 150ms; }
  .js .hero__in { animation: rise 800ms var(--ease-out) both 450ms; }
  .js .hero__in + .hero__in { animation-delay: 540ms; }
}
@keyframes word-in { from { opacity: 0; transform: translateY(0.18em); } }
@keyframes settle { from { opacity: 0; transform: scale(1.06); } }