@charset "utf-8";

/* =============================================================================
   Last Ditch Effort — EPK
   Dark-only brand site. Tokens → base → layout → components → motion.
   ========================================================================== */

@layer reset, base, layout, components, motion, utilities;

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* This site is a deliberately dark-only brand surface. Declaring the scheme
     lets the browser theme scrollbars, form controls and embedded iframes. */
  color-scheme: dark;

  /* Tier 1 — literal */
  --c-ink-950: oklch(10.5% 0.005 280);
  --c-ink-900: oklch(13.5% 0.006 280);
  --c-ink-850: oklch(16.5% 0.007 280);
  --c-ink-800: oklch(19.5% 0.008 280);
  --c-ink-700: oklch(26%   0.009 280);
  --c-ink-600: oklch(34%   0.010 280);
  /* 60%, not 56% — at 56% the small dim labels land at 4.1–4.4:1 against the
     dark surfaces, just under the 4.5:1 AA floor for body-size text. */
  --c-ink-400: oklch(61%   0.010 280);
  --c-ink-300: oklch(73%   0.008 280);
  --c-ink-050: oklch(96%   0.004 280);

  --c-accent:      oklch(64% 0.215 12);
  --c-accent-lift: oklch(70% 0.200 14);
  --c-accent-text: oklch(74% 0.170 14);

  --font-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* Tier 2 — semantic */
  --bg: var(--c-ink-900);
  --bg-deep: var(--c-ink-950);
  --bg-raised: var(--c-ink-850);
  --bg-raised-2: var(--c-ink-800);
  --text: var(--c-ink-050);
  --text-muted: var(--c-ink-300);
  --text-dim: var(--c-ink-400);
  --line: var(--c-ink-700);
  --line-soft: color-mix(in oklab, var(--c-ink-700) 55%, transparent);
  --accent: var(--c-accent);
  --accent-ink: var(--c-ink-950);

  --radius: 4px;
  --radius-lg: 8px;
  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 5rem;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --speed: 220ms;

  accent-color: var(--accent);
  scrollbar-color: var(--c-ink-600) var(--bg-deep);
}

/* ----------------------------------------------------------------- reset -- */
@layer reset {
  html { box-sizing: border-box; }
  html :where(*, *::before, *::after) { box-sizing: inherit; }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset) { margin: 0; }
  :where(ul, ol) { margin: 0; padding: 0; }
  :where(ul[class], ol[class]) { list-style: none; }
  :where(fieldset) { padding: 0; border: 0; }
  :where(img, picture, svg, iframe, video) { display: block; max-inline-size: 100%; }
  :where(img) { block-size: auto; }
  /* A <picture> is inline by default, so a child img sized at 100% height has
     nothing to resolve against. Make the wrapper fill its box. */
  :where(picture) { inline-size: 100%; block-size: 100%; }
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  :where(a) { color: inherit; }
}

/* ------------------------------------------------------------------ base -- */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header-h) + 1.5rem);
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font-weight: 400; }

  a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--accent); color: var(--accent-ink); }

  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--gutter);
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus { inset-block-start: 1rem; }

  .grain {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (forced-colors: active) { .grain { display: none; } }
}

/* ---------------------------------------------------------------- layout -- */
@layer layout {
  .shell {
    inline-size: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--section-pad);
    position: relative;
  }
  .section + .section { border-block-start: 1px solid var(--line-soft); }

  .section--listen,
  .section--shows { background: var(--bg-deep); }

  .section__head { max-inline-size: 46rem; margin-block-end: clamp(2.5rem, 5vw, 3.75rem); }
  .section__lead {
    margin-block-start: 1rem;
    color: var(--text-muted);
    font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
    text-wrap: pretty;
  }
  .section__after { margin-block-start: 2rem; }

  .eyebrow {
    margin-block-end: 0.9rem;
    color: var(--c-accent-text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }
  .eyebrow::after {
    content: "";
    block-size: 1px;
    flex: 1;
    max-inline-size: 4rem;
    background: currentColor;
    opacity: 0.5;
  }

  .h2 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
    line-height: 0.96;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
  }

  .prose > p + p { margin-block-start: 1.1rem; }
  .prose { color: var(--text-muted); text-wrap: pretty; }
  .h2 + .prose { margin-block-start: 1.5rem; }
}

/* ------------------------------------------------------------ components -- */
@layer components {

  /* ---- buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-block-size: 3rem;
    padding: 0.75rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                color var(--speed) var(--ease),
                translate var(--speed) var(--ease);
  }
  .btn__icon { inline-size: 1.1em; block-size: 1.1em; flex: none; }

  .btn--primary { background: var(--accent); color: var(--accent-ink); }
  .btn--primary:hover:not(:disabled) { background: var(--c-accent-lift); translate: 0 -2px; }

  .btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
  .btn--ghost:hover:not(:disabled) { border-color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); translate: 0 -2px; }

  .btn--sm { min-block-size: 2.5rem; padding: 0.45rem 1.1rem; font-size: 0.8rem; }
  .btn--block { inline-size: 100%; }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-block-size: 1.5rem;
    padding-block: 0.35rem;
    color: var(--c-accent-text);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85rem;
    text-decoration: none;
  }
  .link-arrow svg { inline-size: 1.2em; block-size: 1.2em; transition: translate var(--speed) var(--ease); }
  .link-arrow:hover { color: var(--text); }
  .link-arrow:hover svg { translate: 0.3rem 0; }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }
  .icon-btn svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .icon-btn:hover { border-color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); }

  /* ---- social ---- */
  .social { display: flex; align-items: center; gap: 0.35rem; }
  .social a {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease);
  }
  .social svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .social a:hover { color: var(--accent); background: color-mix(in oklab, var(--text) 8%, transparent); }
  .social--sm a { inline-size: 2.25rem; block-size: 2.25rem; }
  .social--sm svg { inline-size: 1.1rem; block-size: 1.1rem; }

  /* Larger, bordered version for the hero — needs to read clearly over a
     photo of varying brightness, so it borrows the icon-btn treatment
     (border + solid backdrop) rather than the plain-icon style used
     elsewhere. */
  .social--hero { gap: 0.6rem; margin-block-start: 1.85rem; }
  .social--hero a {
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid var(--c-ink-600);
    background: color-mix(in oklab, var(--bg-deep) 55%, transparent);
    color: var(--text);
    transition: border-color var(--speed) var(--ease),
                background-color var(--speed) var(--ease),
                color var(--speed) var(--ease),
                translate var(--speed) var(--ease);
  }
  .social--hero svg { inline-size: 1.4rem; block-size: 1.4rem; }
  .social--hero a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in oklab, var(--bg-deep) 75%, transparent);
    translate: 0 -2px;
  }

  /* ---- chips ---- */
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chips > li {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }

  .chips--choice { gap: 0.5rem; }
  .chips--choice label { cursor: pointer; }
  .chips--choice input {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .chips--choice span {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all var(--speed) var(--ease);
  }
  .chips--choice label:has(:checked) span {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .chips--choice label:has(:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ---- header ---- */
  #scroll-sentinel { position: absolute; inset-block-start: 0; block-size: 1px; inline-size: 1px; }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 80;
    background: transparent;
    border-block-end: 1px solid transparent;
    transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }
  .site-header.is-stuck {
    background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
    border-block-end-color: var(--line-soft);
    backdrop-filter: blur(14px) saturate(1.3);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .site-header.is-stuck { background: var(--bg-deep); }
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-block-size: var(--header-h);
  }
  .site-header__logo { flex: none; line-height: 0; }
  /* Size the wordmark by height so it always sits comfortably in the bar. */
  .site-header__logo img { block-size: 3rem; inline-size: auto; }
  @media (width < 480px) { .site-header__logo img { block-size: 2.5rem; } }

  .site-nav { margin-inline: auto; }
  .site-nav__list { display: flex; gap: 0.35rem; }
  .site-nav__list a {
    display: block;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease);
  }
  .site-nav__list a:hover { color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); }
  .site-nav__list a.is-current { color: var(--accent); }

  .site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
  .nav-toggle { display: none; }

  @media (width < 1080px) {
    .site-nav, .site-header__actions .social { display: none; }
    .nav-toggle { display: inline-grid; }
    .site-header__actions { margin-inline-start: auto; }
  }
  @media (width < 480px) {
    .site-header__cta { display: none; }
  }

  /* ---- mobile drawer ---- */
  .nav-drawer {
    margin: 0 0 0 auto;
    inline-size: min(24rem, 100%);
    max-inline-size: 100%;
    block-size: 100dvh;
    max-block-size: 100dvh;
    padding: 1.5rem var(--gutter) 2.5rem;
    border: 0;
    border-inline-start: 1px solid var(--line);
    background: var(--bg-deep);
    color: var(--text);
    display: none;
    flex-direction: column;
  }
  .nav-drawer[open] { display: flex; }
  .nav-drawer::backdrop { background: oklch(0% 0 0 / 0.7); backdrop-filter: blur(3px); }

  .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .nav-drawer__logo { inline-size: 130px; block-size: auto; }
  .nav-drawer__list { margin-block-start: 2.5rem; display: flex; flex-direction: column; }
  .nav-drawer__list a {
    display: block;
    padding: 0.85rem 0;
    border-block-end: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .nav-drawer__list a:hover { color: var(--accent); }
  .nav-drawer__social { margin-block-start: auto; padding-block-start: 2rem; }

  /* ---- hero ---- */
  .hero {
    position: relative;
    isolation: isolate;
    min-block-size: min(100dvh, 54rem);
    display: grid;
    align-items: end;
    padding-block: calc(var(--header-h) + 3rem) clamp(4rem, 9vh, 7rem);
    margin-block-start: calc(var(--header-h) * -1);
    overflow: hidden;
  }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to bottom, oklch(10% 0.005 280 / 0.72) 0%, oklch(10% 0.005 280 / 0.4) 38%, oklch(13.5% 0.006 280 / 0.88) 92%, var(--bg) 100%),
      linear-gradient(to right, oklch(10% 0.005 280 / 0.72), transparent 68%);
  }

  .hero__eyebrow {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-block-end: 1.5rem;
  }
  .hero__logo { margin: 0 0 1.5rem; line-height: 0; }
  .hero__logo img {
    inline-size: min(82vw, 560px);
    block-size: auto;
    filter: drop-shadow(0 6px 30px oklch(0% 0 0 / 0.6));
  }
  .hero__tagline {
    max-inline-size: 34ch;
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.55rem);
    color: var(--text-muted);
    line-height: 1.45;
    text-wrap: pretty;
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-block-start: 2.25rem; }

  .hero__scroll {
    position: absolute;
    inset-block-end: 1.75rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 1.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--c-ink-600);
    border-radius: 100px;
    display: grid;
    justify-items: center;
    padding-block-start: 0.4rem;
  }
  .hero__scroll span { inline-size: 2px; block-size: 0.5rem; background: var(--text-muted); border-radius: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .hero__scroll span { animation: scroll-cue 1.8s var(--ease) infinite; }
  }
  @keyframes scroll-cue {
    0%   { translate: 0 0; opacity: 1; }
    70%  { translate: 0 0.85rem; opacity: 0; }
    71%  { translate: 0 0; opacity: 0; }
    100% { translate: 0 0; opacity: 1; }
  }
  @media (width < 640px) { .hero__scroll { display: none; } }

  /* ---- bio ---- */
  .bio__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (width >= 900px) {
    .bio__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
    .bio__photo { position: sticky; inset-block-start: calc(var(--header-h) + 3rem); }
  }

  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1px;
    margin-block-start: 2.5rem;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
  }
  .facts__item { background: var(--bg); padding: 1rem 1.1rem; }
  .facts dt {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .facts dd {
    margin: 0.3rem 0 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    text-transform: uppercase;
    line-height: 1.1;
  }
  .section--listen .facts__item { background: var(--bg-deep); }

  .influences__label {
    margin-block: 2.25rem 0.85rem;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .bio__photo { margin: 0; }
  .bio__photo img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--line-soft);
  }

  /* ---- spotify player ---- */
  .player {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-raised);
    min-block-size: 480px;
  }
  .player iframe { inline-size: 100%; block-size: 480px; border: 0; display: block; }

  /* ---- releases ---- */
  .releases {
    display: grid;
    /* auto-fit (not auto-fill) so a short discography spreads across the row
       instead of leaving dead columns on the right. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
  .release { display: flex; flex-direction: column; }
  .release__link {
    display: block;
    text-decoration: none;
    transition: translate var(--speed) var(--ease);
  }
  .release__link:hover { translate: 0 -4px; }

  .release__cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--bg-raised);
  }
  .release__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* Designed stand-in until real artwork is dropped in. */
  .release__cover--placeholder {
    container-type: inline-size;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.6rem;
    padding: 1.35rem;
    background:
      repeating-linear-gradient(
        -45deg,
        color-mix(in oklab, var(--accent) 16%, transparent) 0 6px,
        transparent 6px 18px
      ),
      linear-gradient(150deg, var(--bg-raised-2), var(--bg-deep));
  }
  .release__cover--placeholder .ph__title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3.2cqi, 1.6rem);
    line-height: 1;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--text);
  }
  .release__cover--placeholder .ph__note {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
  }
  .release__cover--placeholder .ph__rule { inline-size: 2.5rem; block-size: 3px; background: var(--accent); }

  .release__body { padding-block-start: 0.9rem; }
  .release__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .release__meta {
    margin-block-start: 0.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .release__meta .dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; }
  .release__link:hover .release__title { color: var(--c-accent-text); }

  /* ---- video ---- */
  .video {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-raised);
  }
  .video iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

  .video__facade {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  .video__facade img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .video__facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(10% 0.005 280 / 0.7), oklch(10% 0.005 280 / 0.15));
  }
  .video__play {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 4.75rem;
    block-size: 4.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    transition: scale var(--speed) var(--ease);
  }
  .video__play svg { inline-size: 1.75rem; block-size: 1.75rem; margin-inline-start: 0.2rem; }
  .video__facade:hover .video__play { scale: 1.08; }

  .video__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background:
      repeating-linear-gradient(-45deg,
        color-mix(in oklab, var(--accent) 10%, transparent) 0 8px,
        transparent 8px 24px),
      var(--bg-raised);
  }
  .video__placeholder .ph__note {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid currentColor;
    border-radius: 100px;
    padding: 0.3rem 0.8rem;
  }
  .video__placeholder p { color: var(--text-muted); max-inline-size: 34ch; text-wrap: pretty; }
  .video__placeholder code {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.85em;
    background: var(--bg-deep);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    color: var(--text);
  }

  /* ---- shows ---- */
  .shows { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
  @media (width >= 960px) { .shows { grid-template-columns: 1fr 1fr; } }

  .shows__group > .h3 { padding-block-end: 1rem; border-block-end: 2px solid var(--line); margin-block-end: 1.5rem; }
  .show-list { display: flex; flex-direction: column; gap: 0.75rem; }

  .show {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    padding: 1.1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--bg-raised);
    transition: border-color var(--speed) var(--ease);
  }
  .section--shows .show { background: var(--bg); }
  .show:hover { border-color: var(--line); }

  .show__date {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    min-inline-size: 3.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: var(--radius);
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
  }
  .section--shows .show__date { background: var(--bg-deep); }
  .show__month {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .show__day { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
  .show__year { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--text-dim); }

  .show__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .show__venue { margin-block-start: 0.25rem; color: var(--text-muted); font-size: 0.95rem; }
  .show__extra {
    margin-block-start: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .show__actions { margin-block-start: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .show__actions .btn { min-block-size: 2.4rem; padding: 0.35rem 1rem; font-size: 0.75rem; }

  .show--past { opacity: 0.82; }

  .shows__more {
    inline-size: 100%;
    margin-block-start: 0.85rem;
    min-block-size: 2.75rem;
    font-size: 0.78rem;
  }
  .show--past .show__month { color: var(--text-dim); }

  .state {
    padding: 1.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--text-dim);
    text-align: center;
    font-size: 0.95rem;
  }
  .state--error { border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--text-muted); }

  /* ---- gallery ---- */
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.15rem);
  }
  .gallery__item {
    position: relative;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--bg-raised);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
  }
  .gallery__item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 400ms var(--ease), opacity var(--speed) var(--ease);
  }
  .gallery__item:hover img { scale: 1.04; opacity: 0.9; }

  /* ---- lightbox ---- */
  .lightbox {
    inline-size: 100vw;
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    padding: clamp(1rem, 4vw, 3rem);
    border: 0;
    background: oklch(8% 0.004 280 / 0.97);
    color: var(--text);
    place-items: center;
    display: none;
  }
  .lightbox[open] { display: grid; }
  .lightbox::backdrop { background: oklch(0% 0 0 / 0.9); }
  .lightbox__figure { margin: 0; display: grid; gap: 1rem; justify-items: center; max-block-size: 100%; }
  .lightbox__figure img {
    max-inline-size: min(100%, 1400px);
    max-block-size: calc(100dvh - 9rem);
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    border-radius: var(--radius);
  }
  .lightbox__figure figcaption { color: var(--text-muted); font-size: 0.9rem; text-align: center; }
  .lightbox__close { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 2; background: var(--bg-deep); }
  .lightbox__nav {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 2;
    background: var(--bg-deep);
  }
  .lightbox__nav--prev { inset-inline-start: 1rem; }
  .lightbox__nav--prev svg { rotate: 180deg; }
  .lightbox__nav--next { inset-inline-end: 1rem; }
  .lightbox__nav[hidden] { display: none; }
  @media (width < 640px) {
    .lightbox__nav { inset-block-start: auto; inset-block-end: 1rem; translate: 0 0; }
  }

  /* ---- contact ---- */
  .contact__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  @media (width >= 900px) {
    .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .contact__details { position: sticky; inset-block-start: calc(var(--header-h) + 3rem); }
  }

  .contact__details { display: grid; gap: 1rem; }
  .contact__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon label" "icon value";
    gap: 0.1rem 1rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--bg-raised);
    text-decoration: none;
    transition: border-color var(--speed) var(--ease);
  }
  a.contact__card:hover { border-color: var(--accent); }
  .contact__icon { grid-area: icon; inline-size: 1.5rem; block-size: 1.5rem; color: var(--accent); }
  .contact__label {
    grid-area: label;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .contact__value { grid-area: value; font-weight: 500; overflow-wrap: anywhere; }
  .contact__socials { padding-block-start: 0.5rem; }
  .contact__socials .contact__label { display: block; margin-block-end: 0.6rem; }
  .contact__socials .social { margin-inline-start: -0.6rem; }

  /* ---- form ---- */
  .form {
    display: grid;
    gap: 1.35rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
  }
  .form__legend {
    padding: 0;
    margin-block-end: 0.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .field { display: grid; gap: 0.45rem; }
  .field > label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .req { color: var(--accent); }
  .opt { color: var(--text-dim); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }

  .field :is(input, textarea) {
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
  }
  .field textarea { resize: vertical; line-height: 1.6; }
  .field :is(input, textarea)::placeholder { color: var(--text-dim); }
  .field :is(input, textarea):hover:not(:focus) { border-color: var(--c-ink-600); }
  .field :is(input, textarea):focus-visible { border-color: var(--accent); outline-offset: 1px; }

  .hint { font-size: 0.85rem; color: var(--text-dim); }

  .error { display: none; font-size: 0.85rem; color: var(--c-accent-text); font-weight: 500; }
  .field :is(input, textarea):user-invalid { border-color: var(--accent); }
  .field :is(input, textarea):user-invalid ~ .error { display: block; }
  /* Fallback for browsers without :user-invalid — JS adds .is-invalid */
  .field :is(input, textarea).is-invalid { border-color: var(--accent); }
  .field :is(input, textarea).is-invalid ~ .error { display: block; }

  .hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .form__status { font-size: 0.95rem; min-block-size: 1.5rem; }
  .form__status:empty { display: none; }
  .form__status.is-ok { color: oklch(78% 0.15 150); }
  .form__status.is-error { color: var(--c-accent-text); }

  .form__fallback { font-size: 0.85rem; color: var(--text-dim); }
  .form__fallback a { color: var(--c-accent-text); }

  /* ---- footer ---- */
  .site-footer {
    background: var(--bg-deep);
    border-block-start: 1px solid var(--line-soft);
    padding-block-start: clamp(3rem, 6vw, 4.5rem);
  }
  .site-footer__inner {
    display: grid;
    gap: 2.5rem;
    padding-block-end: clamp(2.5rem, 5vw, 3.5rem);
  }
  @media (width >= 800px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  }
  .site-footer__brand img { inline-size: 170px; block-size: auto; margin-block-end: 1.1rem; }
  .site-footer__blurb { color: var(--text-dim); font-size: 0.95rem; max-inline-size: 30ch; }

  .site-footer__nav ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; }
  @media (width >= 800px) { .site-footer__nav ul { grid-template-columns: 1fr; } }
  .site-footer__nav a {
    display: inline-flex;
    align-items: center;
    /* short labels like "Bio" would otherwise fall under the 24px target floor */
    min-inline-size: 1.5rem;
    min-block-size: 1.5rem;
    padding-block: 0.3rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
  }
  .site-footer__nav a:hover { color: var(--accent); }

  .site-footer__connect { display: grid; gap: 1rem; align-content: start; }
  .site-footer__connect .social { margin-inline-start: -0.6rem; }
  .site-footer__mail {
    display: inline-block;
    min-block-size: 1.5rem;
    padding-block: 0.3rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
  }
  .site-footer__mail:hover { color: var(--accent); }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.5rem;
    border-block-start: 1px solid var(--line-soft);
    font-size: 0.85rem;
    color: var(--text-dim);
  }
  .to-top {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding-block: 0.35rem;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
  }
  .to-top:hover { color: var(--accent); }
}

/* ---------------------------------------------------------------- motion -- */
@layer motion {
  /* Decorative scroll reveal. Progressive enhancement: with no support the
     content is simply already visible, so no fallback is needed. */
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes reveal-in {
        from { opacity: 0; translate: 0 2rem; }
      }
      .reveal {
        animation: reveal-in 1s linear backwards;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
    }
  }
}

/* ------------------------------------------------------------- utilities -- */
@layer utilities {
  [hidden] { display: none !important; }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (pointer: coarse) {
    .site-nav__list a,
    .site-footer__nav a { padding-block: 0.6rem; }
  }
}