/* ==========================================================================
   Hot Soap Studios: components.css
   Buttons, links, chips/tags, media frames, cards (media, person, release),
   video/embed facades, modal + lightbox, marquee, section heads, stats,
   forms (inputs, select, checkbox, radio, choice tiles, stepper, progress),
   tabs, section tabs, accordion, rate cards, scrollers, countdown, map facade.
   Class reference and copy-paste markup: assets/DESIGN-SYSTEM.md
   No @keyframes anywhere: continuous motion is driven by JS (GSAP ticker / rAF).
   ========================================================================== */

/* ---- Icons (inline SVG helper) ------------------------------------------ */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--rule-strong);
  --btn-fill: var(--mint);
  --btn-fill-fg: var(--ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 48px; padding: 0 1.45rem;
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 600; line-height: 1; letter-spacing: -.005em;
  white-space: nowrap; text-decoration: none;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out), background-color .45s;
  -webkit-tap-highlight-color: transparent;
}
/* fill sweep from below on hover */
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--btn-fill);
  transform: translateY(102%) scaleX(.9); transform-origin: 50% 100%;
  transition: transform .6s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); border-color: var(--btn-fill); }
.btn:active { transform: translateY(1px); }
.btn > * { pointer-events: none; }
.btn__label { position: relative; display: inline-block; }
.btn__icon {
  display: grid; place-items: center; flex: none;
  width: 1.9rem; height: 1.9rem; margin-right: -.85rem; border-radius: 50%;
  background: rgba(243, 235, 224, .1);
  transition: transform .5s var(--ease-out), background-color .4s;
}
.btn__icon .icon { width: .95rem; height: .95rem; }
/* on hover every arrow ends up facing right (Kais, 31 Oct): the usual diagonal arrow turns a quarter clockwise; the three
   others say which way they start */
.btn:hover .btn__icon { transform: rotate(45deg); }
.btn:hover .btn__icon--down-right { transform: rotate(-45deg); }
.btn:hover .btn__icon--down { transform: rotate(-90deg); }
.btn:hover .btn__icon--right { transform: translateX(2px); }
.btn--primary { --btn-bg: var(--mint); --btn-fg: var(--ink); --btn-bd: var(--mint); --btn-fill: var(--cream); --btn-fill-fg: var(--ink); }
.btn--primary .btn__icon { background: rgba(15, 13, 12, .12); }
.btn--ghost { --btn-bg: rgba(15, 13, 12, .18); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-bd: var(--ink); --btn-fill: var(--cream); --btn-fill-fg: var(--ink); }
.btn--hot { --btn-bg: var(--hot); --btn-fg: var(--ink); --btn-bd: var(--hot); --btn-fill: var(--cream); --btn-fill-fg: var(--ink); }
.theme-cream .btn--ghost, .theme-mint .btn--ghost { --btn-bg: transparent; --btn-fill: var(--ink); --btn-fill-fg: var(--cream); }
.btn--lg { min-height: 58px; padding: 0 1.9rem; font-size: 1rem; }
.btn--sm { min-height: 44px; padding: 0 1.1rem; font-size: .875rem; }
.btn--block { width: 100%; }
.btn--icon { width: 48px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Arrow text link: underline draws in, arrow nudges */
.link-arrow {
  display: inline-flex; align-items: center; gap: .6em; padding-block: .4rem;
  font-weight: 500; color: var(--fg);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size .55s var(--ease-out), color .3s;
}
.link-arrow .icon { transition: transform .45s var(--ease-out); }
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1px; color: var(--accent); }
.link-arrow:hover .icon, .link-arrow:focus-visible .icon { transform: translateX(4px); }
.link-arrow--mono { font-family: var(--font-mono); font-size: var(--fs-mono-lg); letter-spacing: .12em; text-transform: uppercase; }

/* ==========================================================================
   Chips, tags, tape labels
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 30px; padding: .32rem .8rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap; line-height: 1.2;
  transition: background-color .3s, color .3s, border-color .3s;
}
.chip--mint { border-color: rgba(124, 204, 191, .45); color: var(--mint-hi); }
.theme-cream .chip--mint, .theme-mint .chip--mint { color: var(--fg); border-color: var(--rule-strong); }
.chip--hot { border-color: rgba(255, 106, 43, .5); color: var(--hot-soft); }
.chip--hot::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--hot); }
.chip--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* Interactive filter chips: <button class="chip chip--filter" aria-pressed="false"> */
.chip--filter { min-height: 44px; padding-inline: 1.05rem; cursor: pointer; }
.chip--filter:hover { border-color: var(--fg); }
.chip--filter[aria-pressed="true"], .chip--filter[aria-selected="true"] { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.chip__count { opacity: .6; font-size: .9em; }

/* Small genre tag */
.tag {
  display: inline-flex; align-items: center; padding: .16rem .5rem;
  border: 1px solid var(--rule); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted); white-space: nowrap;
}
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Console scribble-strip: a strip of white tape with marker text */
.tape {
  display: inline-block; padding: .38rem .65rem .34rem;
  background: var(--cream); color: var(--ink);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 18px -8px rgba(0, 0, 0, .6);
  transform: rotate(var(--tilt, -1.2deg));
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .05), transparent 12%, transparent 88%, rgba(0, 0, 0, .05));
}
.tape:nth-child(2n) { --tilt: .9deg; }
.tape:nth-child(3n) { --tilt: -.4deg; }
.tape-list { display: flex; flex-wrap: wrap; gap: .55rem .5rem; }

/* ==========================================================================
   Media frames
   ========================================================================== */
.media {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-sm); background: var(--ink-3);
  aspect-ratio: var(--ratio, 3 / 2);
}
.media > img, .media > video, .media > picture, .media > picture > img, .media__img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-pos, 50% 50%);
}
.media--1x1 { --ratio: 1 / 1; }
.media--4x5 { --ratio: 4 / 5; }
.media--3x4 { --ratio: 3 / 4; }
.media--16x9 { --ratio: 16 / 9; }
.media--21x9 { --ratio: 21 / 9; }
.media--auto { aspect-ratio: auto; }
.media--vignette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(8, 6, 5, .55) 100%);
}
.media__caption {
  position: absolute; left: .9rem; bottom: .8rem; z-index: 2;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
a.media img, button.media img, .media--zoom img { transition: transform 1.2s var(--ease-out), filter .6s; }
a.media:hover img, button.media:hover img, .media--zoom:hover img { transform: scale(1.04); }
button.media { display: block; width: 100%; padding: 0; }

/* ==========================================================================
   Section head + stats
   ========================================================================== */
.section-head { display: grid; gap: 1.5rem 2rem; margin-bottom: clamp(2.75rem, 6vw, 5.5rem); }
.section-head__title { max-width: 16ch; }
.section-head__aside { color: var(--fg-muted); max-width: 44ch; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .section-head--split .section-head__aside { justify-self: end; }
}

.stat { display: grid; gap: .55rem; }
.stat__value {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 340;
  font-size: clamp(2.6rem, 5vw, 5rem); line-height: .9; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat__unit { font-size: .45em; letter-spacing: -.01em; margin-left: .08em; color: var(--accent); font-style: italic; }
.stat__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-muted); }
/* tiny VU bar under a stat: fill set by --level (0..1), animated by JS */
.meter { position: relative; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.meter__fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--level, 1));
  background: var(--accent);
}
/* the hot "peak" tip rides the end of the bar (not scaled with it) */
.meter__fill::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: var(--hot); transform: scaleX(calc(1 / max(var(--level, 1), .02))); transform-origin: 100% 50%; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card { position: relative; display: flex; flex-direction: column; gap: 1rem; color: inherit; }
.card__body { display: grid; gap: .45rem; }
.card__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-h5); font-weight: 420; line-height: 1.15; letter-spacing: -.01em; }
.card__meta { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-muted); }
/* stretched link: make the whole card clickable while keeping one focus stop */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-sm); }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 2px solid var(--focus, var(--mint)); outline-offset: 4px; }
.card--surface { padding: clamp(1.25rem, 2.4vw, 2rem); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }

/* ---- Person card: mint duotone portrait that warms to full colour on hover ---
   Duotone = grayscale photo multiplied onto mint (highlights) and lightened by --duo-lo
   (shadows). Hover fades both blends to identity (white bg, black lighten layer) and
   the filter to none, so the real photo appears smoothly with a tungsten bloom.
   Per photo: style="--duo-b:1.25" lifts a dark source, "--duo-b:.9" calms a bright one. */
.person { position: relative; display: grid; gap: 1rem; align-content: start; }
.portrait {
  --duo-hi: var(--mint);
  --duo-lo: #142321;
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--r-sm);
  background-color: var(--duo-hi);
  transition: background-color .8s var(--ease-out);
}
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-pos, 50% 30%);
  filter: grayscale(1) contrast(1.25) brightness(var(--duo-b, 1));
  mix-blend-mode: multiply;
  transition: transform 1.4s var(--ease-out), filter .8s var(--ease-out);
}
/* lift the shadows to charcoal: duotone low tone */
.portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: var(--duo-lo); mix-blend-mode: lighten;
  transition: background-color .8s var(--ease-out);
}
/* warm tungsten bloom, faded in on hover */
.portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(90% 70% at 30% 15%, rgba(255, 179, 122, .55), rgba(255, 106, 43, .18) 55%, transparent 80%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .8s var(--ease-out);
}
/* every layer takes the frame's corners itself: while a reveal or the scroll moves a portrait, iOS Safari can drop
   the frame's rounded clip for a moment, and the square photo corners showed (white on light photos; The Team's
   contact sheet on an iPhone, Kais, 25 Oct 2026) */
.portrait img, .portrait::before, .portrait::after { border-radius: inherit; }
.person:hover .portrait, .person:focus-within .portrait, .portrait.is-warm { background-color: #fff; }        /* multiply by white = identity */
.person:hover .portrait::after, .person:focus-within .portrait::after, .portrait.is-warm::after { background-color: #000; } /* lighten with black = identity */
.person:hover .portrait::before, .person:focus-within .portrait::before, .portrait.is-warm::before { opacity: .8; }
.person:hover .portrait img, .person:focus-within .portrait img, .portrait.is-warm img { transform: scale(1.04); filter: grayscale(0) contrast(1.02) brightness(1); }
.person__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-h5); font-weight: 420; line-height: 1.1; letter-spacing: -.01em; }
.person__role { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent); }
.person__credit { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.5; }

/* ---- Release card: the cover, and what happens on hover ---- */
/* Markup: .release > .release__deck > (.release__vinyl[style=--label:url()] + .release__sleeve > (img + .release__notes)) + .release__info
   Two hover variants, one switch: <html data-release-hover="lift|vinyl">, set by main.js from ?hover=lift|vinyl
   and kept for the visit (sessionStorage). "lift" is the default, and what renders without JS.
   - lift: the cover lifts a few px with a deeper shadow, and the liner notes (.release__notes: the release's
     first two studio credits and a "View credits" cue, aria-hidden like the whole deck: the dialog the card
     opens lists every credit) slide up over its lower part. Hover only where the device can hover (none on
     touch screens); keyboard focus shows the same. Reduced motion: nothing moves, the panel just appears.
     The record (.release__vinyl) is display: none, so its label image is never fetched or painted.
   - vinyl (round 1, the version Kais saw, kept so both can be compared): the sleeve slides aside and a record
     with the cover as its label slides out and spins (GSAP in the page script; .is-flip, work.css, sends
     right-edge records the other way). */
.release { position: relative; display: grid; gap: 1rem; width: var(--release-w, clamp(220px, 24vw, 340px)); flex: none; text-align: left; color: inherit; }
.release__deck { position: relative; aspect-ratio: 1 / 1; }
.release__vinyl {
  position: absolute; inset: 3.5%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 31%, rgba(255, 255, 255, .05) 31.5%, transparent 32.5%),
    repeating-radial-gradient(circle at 50% 50%, #0d0c0c 0 1.2px, #1a1817 1.2px 2.1px, #0f0e0e 2.1px 3px),
    #111;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform: translateX(0);
  transition: transform .9s var(--ease-out);
  will-change: transform;
}
.release__disc { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.release__disc::before { /* centre label = the artwork */
  content: ""; position: absolute; inset: 33%; border-radius: 50%;
  background: var(--label, var(--mint)) center / cover;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
}
.release__disc::after { /* spindle hole */
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.2%; height: 3.2%;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink);
}
.release__sheen { /* static light reflection over the spinning grooves */
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 210deg, transparent 0 8%, rgba(255, 255, 255, .11) 14%, transparent 22% 58%, rgba(255, 255, 255, .07) 64%, transparent 72%);
}
.release__sleeve {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  border-radius: 3px; overflow: hidden; background: var(--ink-3);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .9s var(--ease-out);
}
.release__sleeve img { width: 100%; height: 100%; object-fit: cover; }
.release__sleeve::after { /* subtle cardboard sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 40%, rgba(0, 0, 0, .18));
}
.release:hover, .release:focus-visible, .release.is-active { z-index: 3; }

/* vinyl (?hover=vinyl): the sleeve slides aside, the record slides out (and spins, page script) */
[data-release-hover="vinyl"] .release__notes { display: none; }
[data-release-hover="vinyl"] .release:hover .release__sleeve, [data-release-hover="vinyl"] .release:focus-visible .release__sleeve, [data-release-hover="vinyl"] .release.is-active .release__sleeve { transform: translateX(-10%) rotate(-1.5deg); }
[data-release-hover="vinyl"] .release:hover .release__vinyl, [data-release-hover="vinyl"] .release:focus-visible .release__vinyl, [data-release-hover="vinyl"] .release.is-active .release__vinyl { transform: translateX(40%); }

/* lift (the default): the cover lifts, the liner notes slide up over its lower part */
:root:not([data-release-hover="vinyl"]) .release { --release-lift: translateY(-6px) scale(1.015); --release-notes-off: translateY(101%); }
:root:not([data-release-hover="vinyl"]) .release__vinyl { display: none; }
:root:not([data-release-hover="vinyl"]) .release__sleeve { container: release-cover / inline-size; transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
  border-radius: 0; }   /* square, like a record sleeve: a rounded clip let a pale 1px rim of a light cover show round the notes */
:root:not([data-release-hover="vinyl"]) .release:focus-visible { outline-offset: 10px; }   /* the focus ring clears the lifted cover */
.release__notes {
  position: absolute; z-index: 2; left: -1px; right: -1px; bottom: -1px;   /* 1px under the cover's clipped edges: no seam of artwork */
  display: flex; flex-direction: column; gap: .4em;
  padding: .85em calc(.95em + 1px) calc(.8em + 1px);
  font-family: var(--font-ui); font-size: clamp(.72rem, 5.2cqi, .92rem); line-height: 1.3; color: var(--cream);
  background: rgba(15, 13, 12, .92);           /* without backdrop-filter: near-solid ink */
  border-top: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: var(--release-notes-off, translateY(101%));
  transition: transform .6s var(--ease-out), opacity .3s var(--ease-soft), visibility 0s linear .6s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* frosted ink; .8 keeps the cream and the muted role text readable over a white cover */
  .release__notes { background: rgba(15, 13, 12, .8); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.release__credit { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-wrap: pretty; }
.release__role { color: rgba(243, 235, 224, .7); }
.release__cue {
  display: flex; align-items: center; gap: .5em; margin-top: .3em;
  font-family: var(--font-mono); font-size: clamp(.6rem, 4cqi, .7rem); line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--mint);
}
.release__cue .icon { width: 1.15em; height: 1.15em; }
@container release-cover (max-width: 190px) { .release__credit + .release__credit { display: none; } }   /* small covers: one credit */
html:not(.js) .release__cue { display: none; }   /* without JS the card opens the release's first listening platform (work-render.js), not the credits */
@media (hover: hover) {
  :root:not([data-release-hover="vinyl"]) .release:hover .release__sleeve { transform: var(--release-lift); box-shadow: 0 38px 72px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); }
  :root:not([data-release-hover="vinyl"]) .release:hover .release__notes { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
:root:not([data-release-hover="vinyl"]) .release:focus-visible .release__sleeve,
:root:not([data-release-hover="vinyl"]) .release.is-active .release__sleeve { transform: var(--release-lift); box-shadow: 0 38px 72px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); }
:root:not([data-release-hover="vinyl"]) .release:focus-visible .release__notes,
:root:not([data-release-hover="vinyl"]) .release.is-active .release__notes { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-release-hover="vinyl"]) .release { --release-lift: none; --release-notes-off: none; }
}

.release__info { display: grid; gap: .3rem; padding-right: 1rem; }
.release__artist { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.3rem; font-weight: 430; line-height: 1.1; letter-spacing: -.01em; }
.release__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-weight: 320; color: var(--fg-muted); font-size: 1.05rem; line-height: 1.2; }
.release__meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.release__meta .label-hs { color: var(--mint); }

/* ==========================================================================
   Video / embed facades: thumbnail + play button, iframe injected on click
   ========================================================================== */
/* <a class="facade" href="https://www.youtube.com/watch?v=ID" data-video="youtube:ID" data-video-title="…" data-cursor="PLAY">
   (a <button> works too; the link gives no-JS visitors a working fallback) */
.facade {
  position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%;
  aspect-ratio: var(--ratio, 16 / 9); padding: 0;
  border-radius: var(--r-sm); background: var(--ink-3); color: var(--cream); text-align: left;
}
.facade > img, .facade__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease-out), filter .6s;
  filter: saturate(.92) brightness(.86);
}
.facade::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 8, .25), transparent 30%, transparent 55%, rgba(10, 9, 8, .78));
}
.facade:hover > img, .facade:focus-visible > img { transform: scale(1.04); filter: saturate(1.05) brightness(1); }
.facade__play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: clamp(64px, 7vw, 100px); aspect-ratio: 1; margin: calc(clamp(64px, 7vw, 100px) / -2) 0 0 calc(clamp(64px, 7vw, 100px) / -2);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(15, 13, 12, .35); color: var(--cream);
  border: 1px solid rgba(243, 235, 224, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .6s var(--ease-out), background-color .35s, color .35s, border-color .35s;
}
.facade__play .icon { width: 30%; height: 30%; margin-left: 6%; }
.facade:hover .facade__play, .facade:focus-visible .facade__play { transform: scale(1.1); background: var(--mint); color: var(--ink); border-color: var(--mint); }
.facade__label {
  position: absolute; left: clamp(.9rem, 2vw, 1.4rem); right: clamp(.9rem, 2vw, 1.4rem); bottom: clamp(.8rem, 1.8vw, 1.2rem); z-index: 2;
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
}
.facade__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.15; font-weight: 420; max-width: 30ch; }
.facade__meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 235, 224, .8); white-space: nowrap; }
.facade__tc { position: absolute; top: clamp(.8rem, 1.8vw, 1.1rem); left: clamp(.9rem, 2vw, 1.4rem); z-index: 2; }
.facade.is-playing { background: #000; }
.facade.is-playing iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.facade.is-playing::after { display: none; }

/* Map facade: CSS-drawn night map, real Google map loads on click */
.map-facade {
  position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%;
  aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--r-sm); padding: 0;
  background:
    radial-gradient(circle at 58% 46%, rgba(124, 204, 191, .18), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(243, 235, 224, .05) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(243, 235, 224, .05) 46px 47px),
    linear-gradient(160deg, #1b1817, #121010 60%, #0d1514);
  color: var(--cream); text-align: left; border: 1px solid var(--line);
}
.map-facade__coast { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-facade__pin { position: absolute; left: 58%; top: 46%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(124, 204, 191, .18), 0 0 30px rgba(124, 204, 191, .8); }
.map-facade__pin-ring { position: absolute; left: 58%; top: 46%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 1px solid rgba(124, 204, 191, .5); }
.map-facade__label { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.map-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.9) contrast(.95); }


/* ==========================================================================
   Modal / lightbox (built by main.js: HS.openModal / openVideo / openGallery / openEmbed / openProject)
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2.5rem);
  visibility: hidden; overflow: hidden;
}
.modal.is-open { visibility: visible; }
.modal__backdrop {
  position: absolute; inset: 0; background: rgba(9, 8, 7, .86);
  -webkit-backdrop-filter: blur(12px) saturate(.9); backdrop-filter: blur(12px) saturate(.9);
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: relative; z-index: 1;
  width: min(100%, var(--modal-w, 1120px)); max-height: 100%;
  overflow: auto; overscroll-behavior: contain;
  background: var(--ink-2); color: var(--cream);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .45s var(--ease-out), transform .7s var(--ease-out);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close {
  position: absolute; top: .7rem; right: .7rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .6rem 0 1rem;
  border-radius: var(--r-pill); background: rgba(15, 13, 12, .6); color: var(--cream);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .3s, color .3s, border-color .3s;
}
.modal__close-x { position: relative; width: 26px; height: 26px; }
.modal__close-x::before, .modal__close-x::after { content: ""; position: absolute; left: 6px; right: 6px; top: 12.5px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.modal__close-x::after { transform: rotate(-45deg); }
.modal__close:hover, .modal__close:focus-visible { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.modal__body { position: relative; }

/* video + embed */
.modal--video .modal__panel, .modal--embed .modal__panel {
  --modal-w: 1280px;
  width: min(100%, 1280px, calc((100svh - 7rem) * 16 / 9));
  aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: var(--r-sm);
}
.modal--embed .modal__panel { width: min(100%, 1440px, calc((100svh - 7rem) * 16 / 9)); }
.modal--video .modal__close, .modal--embed .modal__close { position: fixed; top: max(.75rem, env(safe-area-inset-top)); right: .75rem; }
.modal--video .modal__body, .modal--embed .modal__body { position: absolute; inset: 0; }   /* panel sizes by aspect-ratio */
.modal__frame { position: absolute; inset: 0; }
.modal__frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; }
.modal__loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .9rem; color: var(--muted); }
/* a note under the player (Vimeo: domain-restricted embeds). The panel becomes a transparent
   column; the frame keeps the 16:9 box, the note sits below it. */
.modal--video.modal--noted .modal__panel {
  width: min(100%, 1280px, calc((100svh - 12rem) * 16 / 9));
  aspect-ratio: auto; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.modal--video.modal--noted .modal__body { position: relative; inset: auto; display: grid; gap: .9rem; }
.modal--noted .modal__frame { position: relative; inset: auto; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-2); }
.modal--noted .modal__frame iframe { position: absolute; inset: 0; }
.video-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1.5rem; margin: 0; color: var(--fg-muted, var(--muted)); font-size: var(--fs-small); line-height: 1.5; }
.video-note__text { max-width: 64ch; }
.video-note__link { flex: none; }
@media (pointer: coarse) { .video-note__link { min-height: 44px; } }
.facade.is-playing + .video-note { margin-top: .75rem; }

/* gallery / lightbox */
.modal--gallery { padding: 0; }
.modal--gallery .modal__panel {
  --modal-w: 100%;
  width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  overflow: hidden;
}
.modal--gallery .modal__body { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.gallery__stage { position: relative; display: grid; place-items: center; padding: clamp(3.5rem, 7vh, 5rem) clamp(.75rem, 6vw, 6rem) 1rem; min-height: 0; }
.gallery__img {
  max-width: 100%; max-height: calc(100svh - 11rem); width: auto; height: auto;
  border-radius: var(--r-sm); box-shadow: var(--shadow-2); object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.gallery__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--gutter) max(1.1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: rgba(15, 13, 12, .5);
}
.gallery__caption { color: var(--muted); font-size: var(--fs-small); max-width: 60ch; }
/* .gallery__count ("Image 2 of 9") is .sr-only: the lightbox shows no visible counter (22 Oct 2026) */
.gallery__nav { display: flex; gap: .5rem; }
.gallery__btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--cream); transition: background-color .3s, color .3s, border-color .3s;
}
.gallery__btn:hover, .gallery__btn:focus-visible { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.gallery__btn .icon { width: 18px; height: 18px; }

/* project detail */
.modal--project .modal__panel { --modal-w: 1180px; }
.project-detail { display: grid; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .project-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.project-detail__cover { position: relative; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 1 / 1; background: var(--ink-3); }
.project-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.project-detail__aside { display: grid; gap: 1rem; }
@media (min-width: 900px) { .project-detail__aside { position: sticky; top: 0; } }
.project-detail__main { display: grid; gap: 1.4rem; padding-top: .5rem; }
.project-detail__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: .95; letter-spacing: -.03em; font-weight: 380; }
.project-detail__title em { display: block; font-weight: 300; color: var(--mint-hi); }
.project-detail__credits { display: grid; gap: .1rem; border-top: 1px solid var(--line); }
.project-detail__credits li { padding: .55rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--cream); line-height: 1.5; }
.project-detail__about { color: var(--muted); }
.project-detail__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* "Listen" (main.js, releaseLinks): a ghost pill per platform with its brand mark and name, then the artist's
   own pages (Instagram, Linktree, YouTube channel) as smaller mono links. Every one opens in a new tab. */
.project-detail__listen { display: grid; gap: .8rem; }
.project-detail__label { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.project-detail__platforms { display: flex; flex-wrap: wrap; gap: .5rem; }
.listen-link {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1rem 0 .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgba(15, 13, 12, .35); color: var(--cream);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.listen-link .brand-icon { width: 1.125rem; height: 1.125rem; }
.listen-link > .icon:not(.brand-icon) { width: .7rem; height: .7rem; opacity: .5; transition: opacity .3s, transform .45s var(--ease-out); }
.listen-link:hover, .listen-link:focus-visible { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.listen-link:hover > .icon:not(.brand-icon), .listen-link:focus-visible > .icon:not(.brand-icon) { opacity: 1; transform: rotate(45deg); }
.project-detail__artist { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.1rem; }
.project-detail__artist-links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.artist-link {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; color: var(--muted);
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: color .3s;
}
.artist-link .brand-icon { width: .95rem; height: .95rem; }
.artist-link > .icon:not(.brand-icon) { width: .6rem; height: .6rem; }
.artist-link:hover, .artist-link:focus-visible { color: var(--cream); }
.artist-link:hover .artist-link__name { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
@media (pointer: coarse) { .artist-link { min-height: 44px; } }

/* ==========================================================================
   Marquee (JS duplicates the track and moves it on the ticker)
   ========================================================================== */
/* <div class="marquee" data-marquee data-marquee-speed="60"><div class="marquee__track">…items…</div></div> */
.marquee {
  --marquee-gap: clamp(1.5rem, 3vw, 3rem);
  position: relative; display: flex; overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex; flex: none; align-items: center; gap: var(--marquee-gap); padding-right: var(--marquee-gap);
  white-space: nowrap; will-change: transform;
}
.marquee__item { flex: none; }
.marquee__sep { flex: none; color: var(--accent); font-family: var(--font-mono); font-size: .8em; }
html.reduced-motion .marquee, .marquee.is-static { -webkit-mask-image: none; mask-image: none; }
html.reduced-motion .marquee__track, .marquee.is-static .marquee__track { flex-wrap: wrap; white-space: normal; row-gap: .4rem; flex: 1 1 auto; }

/* ==========================================================================
   Forms
   ========================================================================== */
/* minmax(0, 1fr) columns and min-width: 0 down to the control: an auto column grows with its content, so one
   control's own minimum width (iOS Safari's date inputs) would push the field past the form's right edge */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 1.5rem; }
@media (min-width: 700px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span-2 { grid-column: 1 / -1; } }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; align-content: start; min-width: 0; }
.field__label { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-muted); }
.field__label .req { color: var(--hot); margin-left: .2em; }
.field__hint { font-size: var(--fs-xs); color: var(--fg-muted); }
.field__error { display: none; font-size: var(--fs-xs); color: var(--error, #FF9A6B); }
.theme-cream, .theme-mint { --error: #A3360A; }
.field.is-invalid .field__error { display: block; }
.input, .select, .textarea {
  width: 100%; max-width: 100%; min-width: 0; min-height: 52px; padding: .85rem 1rem;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  font-size: 1rem; line-height: 1.4;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
/* iOS Safari only lets a date input shrink, and aligns its value with the other fields, without the native look.
   The picker stays the native one. The height keeps an empty field (no value text, no placeholder) open, and level
   with a text input beside it. */
.input[type="date"] { height: 52px; -webkit-appearance: none; appearance: none; }
.input[type="date"]::-webkit-date-and-time-value { margin: 0; min-height: 1.4em; text-align: left; }
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); opacity: .75; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--error, #FF9A6B); }
.textarea { min-height: 150px; resize: vertical; }
.select {
  appearance: none; padding-right: 2.8rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A39A90' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center;
}
.theme-cream .select, .theme-mint .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230F0D0C' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
.select option { background: var(--ink-2); color: var(--cream); }

/* Checkbox + radio: <label class="check"><input type="checkbox"><span class="check__box"></span><span>Text</span></label> */
.check, .radio { position: relative; display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; }
.check input, .radio input, .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check__box, .radio__dot {
  position: relative; flex: none; width: 22px; height: 22px;
  border: 1px solid var(--rule-strong); background: var(--surface);
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.check__box { border-radius: 5px; }
.radio__dot { border-radius: 50%; }
.check__box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease-out); }
.radio__dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .3s var(--ease-out); }
.check input:checked + .check__box, .radio input:checked + .radio__dot { background: var(--mint); border-color: var(--mint); }
.check input:checked + .check__box::after, .radio input:checked + .radio__dot::after { transform: rotate(45deg) scale(1); }
.radio input:checked + .radio__dot::after { transform: scale(1); }
.check input:focus-visible + .check__box, .radio input:focus-visible + .radio__dot { box-shadow: var(--focus-ring); }

/* Choice tiles (radio/checkbox cards): <label class="choice"><input type="radio" name="x"><span class="choice__body">…</span></label> */
.choice { position: relative; display: block; cursor: pointer; }
.choice__body {
  display: grid; gap: .35rem; height: 100%; padding: 1.1rem 1.2rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .3s, background-color .3s, transform .4s var(--ease-out);
}
.choice:hover .choice__body { border-color: var(--fg-muted); }
.choice input:checked + .choice__body { border-color: var(--accent); background: color-mix(in srgb, var(--mint) 12%, var(--surface)); }
.choice input:focus-visible + .choice__body { box-shadow: var(--focus-ring); }
.choice__title { font-weight: 600; }
.choice__meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.choices { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Stepper: <div class="stepper" data-stepper><button type="button" data-step="-1">…</button><input class="stepper__input" type="number" min max value><button type="button" data-step="1">…</button></div> */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.stepper button { width: 48px; min-height: 48px; display: grid; place-items: center; font-size: 1.2rem; color: var(--fg); transition: background-color .25s, color .25s; }
.stepper button:hover, .stepper button:focus-visible { background: var(--mint); color: var(--ink); }
.stepper__input {
  width: 4.2ch; min-width: 56px; border: 0; background: transparent; text-align: center;
  font-family: var(--font-mono); font-size: 1rem; color: var(--fg); -moz-appearance: textfield; appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Multi-step progress: <ol class="progress" style="--progress:.33"><li class="progress__step is-done">…</li>…</ol> */
/* The rail runs from the first dot's centre to the last one's, so --progress = (n-1)/(steps-1)
   lands exactly on dot n. --steps is counted with :has() for 2-8 steps (set it inline beyond). */
.progress { --steps: 3; --progress-gap: .5rem; --progress-dot: 31px; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--progress-gap); padding: 0; margin: 0; list-style: none; }
.progress:has(> :nth-child(2):last-child) { --steps: 2; }
.progress:has(> :nth-child(4):last-child) { --steps: 4; }
.progress:has(> :nth-child(5):last-child) { --steps: 5; }
.progress:has(> :nth-child(6):last-child) { --steps: 6; }
.progress:has(> :nth-child(7):last-child) { --steps: 7; }
.progress:has(> :nth-child(8):last-child) { --steps: 8; }
.progress::before, .progress::after {
  content: ""; position: absolute; top: calc(var(--progress-dot) / 2 - .5px); height: 1px; background: var(--rule-strong);
  left: calc(var(--progress-dot) / 2);
  right: calc((100% - (var(--steps) - 1) * var(--progress-gap)) / var(--steps) - var(--progress-dot) / 2);
}
.progress::after { background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); transition: transform .7s var(--ease-out); }
.progress__step { position: relative; z-index: 1; display: grid; gap: .55rem; justify-items: start; color: var(--fg-muted); }
.progress__num {
  display: grid; place-items: center; width: var(--progress-dot, 31px); height: var(--progress-dot, 31px); border-radius: 50%;
  background: var(--bg); border: 1px solid var(--rule-strong);
  font-family: var(--font-mono); font-size: .68rem; transition: background-color .4s, border-color .4s, color .4s;
}
.progress__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.progress__step.is-current { color: var(--fg); }
.progress__step.is-current .progress__num { border-color: var(--accent); color: var(--fg); }
.progress__step.is-done .progress__num { background: var(--accent); border-color: var(--accent); color: var(--bg); }
@media (max-width: 600px) { .progress__label { display: none; } .progress__step.is-current .progress__label { display: block; } }

.form-note { display: flex; gap: .6rem; align-items: start; font-size: var(--fs-xs); color: var(--fg-muted); }
.form-note::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .45em; border-radius: 50%; background: var(--hot); }
/* Turnstile's box (empty unless it needs the visitor) and what a failed send says (form-send.js) */
.form-check { width: 100%; }
.form-check:empty { display: none; }
.form-alert { width: 100%; padding: .85rem 1rem; border-left: 3px solid var(--hot); border-radius: var(--r-sm); background: rgba(255, 106, 43, .1); font-size: var(--fs-small); }
.form-alert a { color: inherit; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
/* a form that can't send yet (form-send.js): its message in place of its fields */
form.is-offline { display: block; }
form.is-offline > :not([data-form-alert]) { display: none; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.form-success { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }

/* ==========================================================================
   Tabs  ([data-tabs] is wired by main.js: click, arrow keys, Home/End)
   ========================================================================== */
.tabs__list { display: flex; gap: .25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative; flex: none; min-height: 48px; padding: .75rem 1rem;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--fg-muted); transition: color .3s;
}
.tabs__tab::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .5s var(--ease-out); }
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { color: var(--fg); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__count { margin-left: .4em; opacity: .55; }
.tabs__panel { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.tabs__panel:focus-visible { outline-offset: 6px; }

/* ==========================================================================
   Section tabs: the pages of a multi-page menu section (Services, Projects, Contact)
   as plain links, identical on every page of the section, the current one aria-current="page".
   Markup (docs/site-structure.md), the FIRST child of the page hero (<section … data-hero>):
   <nav class="section-tabs" aria-label="Services pages"><div class="container">
     <ul class="section-tabs__list" role="list"><li><a class="section-tabs__link" href="…">…</a></li>…</ul>
   </div></nav>
   The row sits just under the fixed header, over the hero's own background, and the hero keeps its
   own spacing below it: inside such a hero --header-h is the header plus the row (--header-bar-h is
   the header alone). One line at every width: where it does not fit it scrolls sideways (chrome.js
   brings the current tab into view).
   ========================================================================== */
:root { --header-bar-h: var(--header-h); --section-tabs-h: 3rem; }
[data-hero]:has(> .section-tabs) { --header-h: calc(var(--header-bar-h) + var(--section-tabs-h)); }
/* Each tab has --tab-pad of side padding, room for its focus ring inside the row (which clips anything
   outside it); the gap gives it back, and the row's negative margin (its padding where it runs to the
   screen edges) keeps the labels on the page's text edge. */
.section-tabs { --tab-pad: .35rem; position: absolute; z-index: 2; top: var(--header-bar-h); left: 0; right: 0; }
.section-tabs__list {
  display: flex; gap: calc(clamp(1rem, 1.8vw, 2.25rem) - 2 * var(--tab-pad)); height: var(--section-tabs-h);   /* the eight Services tabs fit from 1024px */
  margin-inline: calc(var(--tab-pad) * -1);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  /* the underline stays on the page's text edge, inside the row's negative margin */
  background: linear-gradient(var(--rule), var(--rule)) no-repeat var(--tab-pad) 100% / calc(100% - 2 * var(--tab-pad)) 1px;
}
.section-tabs__list::-webkit-scrollbar { display: none; }
.section-tabs__list > li { flex: none; display: flex; }
.section-tabs__link {
  position: relative; display: inline-flex; align-items: center; padding-inline: var(--tab-pad);
  font-size: .875rem; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  color: var(--fg-muted); transition: color .3s;
}
.section-tabs__link::after {
  content: ""; position: absolute; left: var(--tab-pad); right: var(--tab-pad); bottom: 0; height: 2px; background: var(--mint);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out);
}
.section-tabs__link:hover, .section-tabs__link[aria-current="page"] { color: var(--fg); }
.section-tabs__link[aria-current="page"]::after { transform: scaleX(1); }
.section-tabs__link:focus-visible { outline-offset: -2px; }
/* below 1024px (where the Services row stops fitting) the row runs to the screen edges, so a tab
   half out of view shows that it scrolls */
@media (max-width: 1023px) {
  .section-tabs .container { padding-inline: 0; }
  .section-tabs__list { margin-inline: 0; padding-inline: calc(var(--gutter) - var(--tab-pad)); scroll-padding-inline: calc(var(--gutter) - var(--tab-pad)); background-position: 0 100%; background-size: 100% 1px; }
}

/* ==========================================================================
   Accordion  ([data-accordion] wired by main.js; open by default without JS)
   ========================================================================== */
.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px; padding: 1.1rem 0; text-align: left;
  font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-h5); font-weight: 420;
}
.accordion__icon { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--rule-strong); border-radius: 50%; transition: background-color .3s, border-color .3s, transform .5s var(--ease-out); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease-out); }
.accordion__icon::after { transform: rotate(90deg); }
.accordion__item.is-open .accordion__icon { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.accordion__item.is-open .accordion__icon::after { transform: rotate(0deg); }
.accordion__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease-out); }
.js .accordion__item:not(.is-open) .accordion__panel { grid-template-rows: 0fr; }
.accordion__content { overflow: hidden; min-height: 0; }
.accordion__inner { padding-bottom: 1.5rem; color: var(--fg-muted); }

/* ==========================================================================
   Horizontal scroller (snap row; used for mobile card rows and chip bars)
   ========================================================================== */
.scroller {
  display: flex; gap: var(--scroller-gap, 1rem); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { flex: none; scroll-snap-align: start; }

/* ==========================================================================
   Countdown  (<div class="countdown" data-countdown="2026-10-31T23:59:59+02:00">)
   ========================================================================== */
.countdown { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: clamp(.75rem, 2.5vw, 2.4rem); }
.countdown__unit { display: grid; gap: .35rem; }
.countdown__num {
  font-family: var(--font-mono); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 6rem);
  letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums;
}
.countdown__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-muted); }
.countdown.is-ended .countdown__num { opacity: .4; }
html:not(.js) .countdown .countdown__unit { display: none; }
/* Forms need JS (validation, steps, sending, the success state). Without it they are
   hidden and a <noscript> .noscript-note offers the studio's email and phone instead. */
html:not(.js) [data-bk], html:not(.js) [data-msg], html:not(.js) [data-rs-form],
html:not(.js) .ct-sheet, html:not(.js) .rs-progress { display: none; }
.noscript-note {
  display: grid; gap: .6rem; padding: clamp(1.25rem, 3vw, 2rem); max-width: 60ch;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); color: var(--fg);
}
.noscript-note .mono { color: var(--accent); }
.countdown__deadline { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-muted); }

/* ==========================================================================
   Cursor-following image preview (services index etc.)
   ========================================================================== */
.cursor-preview {
  position: fixed; left: 0; top: 0; z-index: var(--z-preview);
  width: clamp(240px, 22vw, 360px); aspect-ratio: 4 / 3;
  border-radius: var(--r-sm); overflow: hidden; pointer-events: none;
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden;
  will-change: transform;
}
.cursor-preview.is-visible { visibility: visible; }
.cursor-preview.is-light { box-shadow: 0 30px 70px -24px rgba(15, 13, 12, .45), 0 0 0 1px rgba(15, 13, 12, .08); }
.cursor-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.cursor-preview img.is-current { opacity: 1; }

/* Pill status (live/now) */
.status { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: var(--r-pill); background: rgba(255, 106, 43, .1); color: var(--hot-soft); border: 1px solid rgba(255, 106, 43, .35); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 10px var(--hot); }