/* ============================================================================
   Anthony Locks · Artist & Booking Website
   Design system carried over from the print EPK (see website/CLAUDE.md).
   Flat, editorial, disciplined: sharp corners, hairline rules, no shadows,
   no gradients. Three type roles: Oswald (display) / Lora (serif) / JetBrains
   Mono (labels).
   ========================================================================= */

/* ---------------------------------------------------------------- tokens - */
:root {
  --ink:        #17140F;
  --paper:      #FFFFFF;
  --amber:      #B5651D;  /* brand accent: rules, graphics, display-size text */
  --amber-deep: #8F4E14;  /* same accent, darkened for small text on paper    */
  --yellow:     #F2B705;
  --muted:      #3a3630;
  --muted-2:    #241F18;
  --muted-3:    #55504A;
  --on-yellow:  #3E3A34;  /* label copy inside the yellow fact box            */
  --hairline:   #d8d3c6;
  --hairline-2: #e6e2d6;
  --wash:       #faf8f4;
  --on-ink:     #F5F1E8;
  --on-ink-dim: rgba(245, 241, 232, 0.62);
  --rule-ink:   rgba(245, 241, 232, 0.22);

  --display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --serif:   'Lora', Georgia, 'Times New Roman', serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --maxw: 1240px;
  --gutter: clamp(1.375rem, 5vw, 4rem);
  /* Gap of the Watch and Listen media grids; the ledes above them end on its main column. */
  --media-gap: clamp(1.75rem, 3.5vw, 3rem);
  --header-h: 68px;
  --section-y: clamp(3.5rem, 7vw, 6rem);
}

/* ------------------------------------------------------------------ base - */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; border-radius: 1px; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- layout - */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ------------------------------------------------------------ type roles - */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.eyebrow .dim { color: var(--ink); opacity: 0.55; }

/* Section header: mono label left, hairline running to the right edge. */
.section-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.section-head__rule { flex: 1 1 auto; height: 1px; background: var(--ink); }
.section-head__aside {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
  white-space: nowrap;
}

/* Sub-section header, one level under .section-head: amber index, display
   title, hairline running to the right edge. Carries the numbered-index
   pattern already used by the live programs. */
.sub-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.sub-head__index {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber-deep);
  font-variant-numeric: tabular-nums;
}
.sub-head__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}
.sub-head__rule {
  /* Basis 0 so the rule yields the row to the title and only fills what is
     left over. A 2rem basis made long titles wrap on narrow screens. */
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: var(--hairline);
}

/* Section intro above the first block, and the closing utility row that
   carries the channel link and the standing privacy line. */
.section-lede { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-foot {
  display: flex;
  flex-wrap: wrap;
  /* Baseline, not center: Listen's left item is a two-line stack of links and
     centering dropped the privacy line into the gap between them. On a baseline
     the note sits on the first link's, flush under the rule, and Watch's
     one-line row renders exactly as it did. */
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

/* Two links where Watch has one. Stacked rather than side by side: at --maxw
   the pair runs about 840px wide, which would squeeze the privacy line beside
   it into four lines. Already the narrow-screen shape, so no media query. */
.section-foot__links {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}
/* These labels are longer than Watch's single one and wrap on a phone. As a
   flex item the trailing rule would then hang beside the whole two-line block,
   detached from the text, so here it rides the end of the last line instead. */
.section-foot__links .link-arrow { display: block; }
.section-foot__links .link-arrow::after {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.55rem;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
  /* Even line lengths: Chrome's "pretty" only rescues single-word last lines. */
  text-wrap: balance;
}
/* Section intros that carry the width of the whole band rather than a text column. */
.lede--full { max-width: none; }

.mono-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--muted-3);
}

/* --------------------------------------------------------------- buttons - */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--amber); border-color: var(--amber); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
.btn--on-ink { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn--on-ink:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn__meta { font-weight: 400; opacity: 0.62; letter-spacing: 0.08em; }

.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.link:hover { color: var(--amber-deep); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--amber-deep);
}
.link-arrow::after {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  transition: width 0.18s ease;
}
.link-arrow:hover::after { width: 2.2rem; }

/* --------------------------------------------------------- touring stamp - */
.stamp { color: var(--amber); transform: rotate(15deg); }
.stamp svg { width: 100%; height: auto; overflow: visible; }

/* ---------------------------------------------------------------- header - */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  position: relative;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark span { color: var(--amber-deep); }

.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.site-nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-nav a:hover { color: var(--ink); }
/* The booking CTA is an <a> inside the nav, so this rule would otherwise outrank
   `.site-nav .nav-cta` and paint ink text onto the ink button. The scrollspy no
   longer marks it, and this keeps that from being the only thing standing
   between the button and an invisible label. */
.site-nav a[aria-current="true"]:not(.nav-cta) { color: var(--ink); border-bottom-color: var(--amber); }

.header-cta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-ink);
  background: var(--ink);
  padding: 0.7rem 1.15rem;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}
.header-cta:hover { background: var(--amber); }
/* Second copy of the booking CTA, authored inside the nav. The header copy is
   hidden under 900px, so without this the one action the site exists for is
   unreachable on a phone. Suppressed above that width, where the header carries it. */
.nav-cta { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}
.nav-toggle__bars { display: inline-block; width: 14px; height: 9px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-3.75px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero - */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) 0; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.hero__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero__name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.4rem, 11.5vw, 8.5rem);
  line-height: 0.84;
  letter-spacing: 0.005em;
  margin: 0;
}
.hero__name span { display: block; }
.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.hero__media { position: relative; }
/* The press portrait is 853x1067 (native 4:5) and shown uncropped, so the figure
   carries its real ratio. Driven from width, not height, so it can never grow
   wider than its grid column, and it stays well below native resolution. */
.hero__figure {
  position: relative;
  margin: 0 0 0 auto;
  aspect-ratio: 853 / 1067;
  width: min(100%, 440px);
  height: auto;
  background: var(--hairline-2);
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__stamp {
  position: absolute;
  top: -2.1rem;
  right: -2.3rem;
  width: clamp(88px, 11vw, 122px);
  z-index: 2;
  /* Opaque disc, as in the print EPK: the stamp reads as applied on top of the
     photo rather than washing out against it. */
  background: var(--on-ink);
  border-radius: 50%;
}
.hero__strip {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-block: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.hero__strip p {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
}
/* Release line, right end of the strip: the one route from the first screen to
   the newest music. */
.hero__release {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--amber-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__release i { font-style: normal; color: var(--ink); }
.hero__release::after { content: "\2192"; font-size: 0.9rem; transition: transform 0.18s ease; }
.hero__release:hover::after { transform: translateX(3px); }

/* --------------------------------------------------- fact strip (yellow) - */
.facts { background: var(--yellow); padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.fact__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 0.95;
  color: var(--ink);
  white-space: nowrap;
}
.fact__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--on-yellow);
  margin-top: 0.6rem;
}

/* --------------------------------------------------------- live programs - */
/* The section stacks: the format selection spans the full content width, the
   selected program sits underneath it in two columns. */
.programs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem);
}

/* Selector: three equal cards, each carrying its own top rule. They stretch to
   the same height so the row stays calm when titles run to different lengths. */
.program-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.program-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 2px solid var(--hairline);
  padding: 1.1rem 1.15rem 1.4rem;
  cursor: pointer;
  color: var(--muted-3);
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.program-tab:hover {
  color: var(--ink);
  background: var(--wash);
  border-top-color: var(--muted-3);
}
.program-tab__index {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber-deep);
  font-variant-numeric: tabular-nums;
}
.program-tab__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Pushed to the bottom edge, so the spec lines align across the three cards. */
.program-tab__meta {
  margin-top: auto;
  padding-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.program-tab[aria-selected="true"] {
  color: var(--ink);
  border-top-color: var(--amber);
  background: var(--wash);
}
.program-tab[aria-selected="true"] .program-tab__title { font-weight: 700; }
.program-tab[aria-selected="true"] .program-tab__meta { color: var(--muted); }

.program-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}
.program-panel__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.program-panel__desc {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 1.1rem;
}
/* In tab mode the selector card carries the title, so the panel opens on the
   description, set one step larger as a lead-in. */
.programs__grid[data-mode="tabs"] .program-panel__desc {
  font-size: 1.125rem;
  margin-top: 0;
}
/* Request first, then the footage that shows the program ("see what you get"). */
.program-panel__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin-top: 1.5rem;
}

/* Data plate: mono key/value rows, the FORMAT / LENGTH / SETUP block from print. */
.data-plate { border-top: 1px solid var(--ink); margin: 0; }
.data-plate div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline-2);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.data-plate dt { letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-3); }
.data-plate dd { margin: 0; color: var(--ink); text-align: right; }

/* Same plate laid out as a row under the program description: label above
   value, three columns, one rule top and bottom. */
.data-plate--row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--hairline-2);
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.data-plate--row div {
  display: block;
  border-bottom: 0;
  padding: 0.75rem 0 0.9rem;
}
.data-plate--row dd { text-align: left; margin-top: 0.35rem; }

.program-panel__figure { margin: 0; }
.program-panel__figure img {
  width: 100%;
  height: clamp(240px, 22vw, 320px);
  object-fit: cover;
  object-position: 50% 40%;
}

/* Wide screens keep the photo beside each program, so the section's own lead
   image is narrow-screen only (see the 900px query). */
.programs__figure { display: none; margin: 0; }

/* ----------------------------------------------------- booking essentials - */
/* One statement for the differentiator, a data plate for the proof beside it. */
.essentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
/* The plate spans exactly the statement's height: its opening ink rule sits on
   the statement's first line, its last hairline on the last, and the rows share
   the height between them, so the two columns read as one block. */
/* Tighter row padding and a larger floor on the statement keep the plate's
   minimum height under the statement's at every two-column width. */
.essentials__plate { display: flex; flex-direction: column; }
.essentials__plate div { flex: 1 1 auto; align-items: center; padding-block: 0.45rem; }
/* The values are short phrases; wrapped and right-aligned they read as ragged
   blocks, so on this plate they keep to one line wherever the column allows. */
.essentials__plate dd { white-space: nowrap; }
.essentials__statement {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 24ch;
}

/* ----------------------------------------------------------------- watch - */
/* Three stacked blocks (original show, cover show, recordings). Each repeats
   the same main + two-aside grid, so a booker sees one format per block. */
.watch__group + .watch__group { margin-top: clamp(3rem, 6vw, 4.75rem); }
.watch__group-lede { margin-bottom: 1.75rem; max-width: 62ch; }

.watch__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--media-gap);
  align-items: start;
}
/* On the two-column layout every lede ends on the main media column (about 64ch),
   so the intro and the video or player below share one right edge. */
@media (min-width: 901px) {
  .lede,
  .watch__group-lede { max-width: calc((100% - var(--media-gap)) * 2 / 3); }
}

/* Video facade: nothing is requested from YouTube until the user presses play. */
.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 0.25s ease, transform 0.4s ease;
}
.video-facade:hover img { opacity: 1; transform: scale(1.015); }
.video-facade__play,
.audio-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.video-facade__play span,
.audio-facade__play span {
  width: clamp(60px, 7vw, 84px);
  height: clamp(60px, 7vw, 84px);
  border: 1.5px solid var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 20, 15, 0.4);
}
.video-facade__play span::after,
.audio-facade__play span::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 15px solid var(--yellow);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.video-facade__caption,
.audio-facade__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.25rem;
  background: rgba(23, 20, 15, 0.72);
  text-align: left;
  pointer-events: none;
}
.video-facade__caption strong,
.audio-facade__caption strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-ink);
}
.video-facade__caption em,
.audio-facade__caption em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; }

.watch__aside,
.listen__aside { display: grid; gap: 1.75rem; align-content: start; }

/* The two secondary videos sit in the narrow column, so the play button and the
   caption plate scale down rather than crowding the poster. */
.video-slot--compact .video-facade__play span {
  width: clamp(44px, 4.5vw, 56px);
  height: clamp(44px, 4.5vw, 56px);
}
.video-slot--compact .video-facade__play span::after {
  margin-left: 3px;
  border-left-width: 11px;
  border-top-width: 7px;
  border-bottom-width: 7px;
}
.video-slot--compact .video-facade__caption { padding: 0.7rem 0.85rem; }
.video-slot--compact .video-facade__caption strong {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}
.video-slot--compact .video-facade__caption em { font-size: 0.625rem; }
.video-slot--compact .video-caption { font-size: 0.875rem; margin-top: 0.75rem; }
.video-caption {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 1rem;
}
.video-slot .mono-note { margin-top: 0.75rem; }

/* Placeholder tile, used wherever material has not been supplied yet. */
.pending {
  border: 1px dashed var(--hairline);
  background: #fbfaf7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem;
  min-height: 90px;
}
.pending__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.pending__body {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--muted-3);
  line-height: 1.5;
}
.pending--media { aspect-ratio: 4 / 5; min-height: 0; justify-content: flex-end; }
.pending--wide { aspect-ratio: 3 / 2; min-height: 0; justify-content: flex-end; }

/* ---------------------------------------------------------------- listen - */
.listen__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--media-gap);
  align-items: start;
}
.listen__player iframe { width: 100%; height: 352px; border: 0; }

/* Audio facade: drawn from local type alone, so nothing is requested from
   Spotify until the visitor presses play. Carries the height of the embed that
   replaces it, so the click costs no layout shift. */
.audio-facade {
  position: relative;
  width: 100%;
  height: 352px;
  background: var(--ink);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.audio-facade:hover .audio-facade__play span { background: rgba(242, 183, 5, 0.16); }

/* ------------------------------------------------------------- biography - */
.bio__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.bio__figure { margin: 0; }
.bio__figure img { width: 100%; }
.bio__figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-top: 0.75rem;
}
.bio__text {
  columns: 2;
  column-gap: clamp(1.75rem, 3vw, 3rem);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--muted-2);
  /* Ragged right like every other text block: justified, the narrow columns
     opened visible rivers at 1440px. Hyphenation only breaks long words. */
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  text-wrap: pretty;
}
.bio__text p + p { margin-top: 1.1rem; }
.dropcap {
  float: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 0.78;
  padding: 0.06em 0.1em 0 0;
  color: var(--amber);
}

/* ------------------------------------------------------------ trust bar - */
/* The references, directly under the facts: names set in the display face on
   ink, the partial-list qualifier in the serif italic. */
.trust {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.trust__rows { margin: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.trust__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
}
.trust__row dd { margin: 0; }
.trust__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
}
.trust__list { display: flex; flex-wrap: wrap; gap: 0.35rem 0; }
.trust__list li {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.7vw, 1.4375rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}
/* Trailing, not leading: when a list wraps, a leading dot opens the next line
   with a stray separator; trailing it closes the line it belongs to. */
.trust__list li:not(:last-child)::after {
  content: "\00B7";
  padding-inline: 0.6em;
  color: var(--amber);
}
.trust__list .trust__more {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-ink-dim);
}

/* --------------------------------------------------------------- gallery - */
/* Photo band: every image at its own natural ratio, exactly like the photo
   band in the print EPK. Nothing is cropped or stretched. With seven photos the
   band wraps, so each item grows in proportion to its ratio: every row fills
   the full width and its photos share one height. The basis is a share of the
   band width, not a pixel height, so the rows group the same way at every
   width above the phone layout: live, live, press (order in content.md § 7). */
.gallery__band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.gallery__item {
  margin: 0;
  flex: var(--ratio, 1.5) 1 calc(var(--ratio, 1.5) * 33%);
  min-width: 0;
}

.gallery__btn {
  display: block;
  padding: 0;
  border: 0;
  background: var(--hairline-2);
  cursor: zoom-in;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--ratio, 1.5);
}
.gallery__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.gallery__btn:hover img { transform: scale(1.03); }

/* Label over credit, always. Side by side, a narrow tile wrapped the credit
   while its neighbours did not, and one row read in two shapes. */
.gallery__caption,
.bio__figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-top: 0.6rem;
}

/* Lightbox */
.lightbox {
  border: 0;
  padding: 0;
  max-width: min(1100px, 94vw);
  max-height: 94vh;
  background: var(--ink);
  color: var(--on-ink);
}
.lightbox::backdrop { background: rgba(23, 20, 15, 0.92); }
.lightbox__img {
  width: 100%;
  max-height: calc(94vh - 76px);
  object-fit: contain;
  background: var(--ink);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--rule-ink);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lightbox__caption { color: var(--on-ink); }
.lightbox__credit { color: var(--on-ink-dim); }
.lightbox__nav { display: flex; gap: 0.4rem; }
.lightbox__btn {
  background: transparent;
  border: 1px solid var(--rule-ink);
  color: var(--on-ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  width: 34px; height: 34px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.lightbox__btn:hover { background: var(--amber); border-color: var(--amber); }

/* ------------------------------------------------------------- press kit - */
/* Grid and lede are shared with booking (see there), so the two splits cannot
   drift apart. */
.downloads { border-top: 1px solid var(--ink); }
.download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.2s ease;
}
.download:hover { padding-left: 0.5rem; }
.download > span:first-child { display: block; min-width: 0; }
.download__title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.download__meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-top: 0.3rem;
}
.download__status {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--hairline);
}
.download__status--ready { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.download__status--request { color: var(--amber-deep); border-color: var(--hairline); }

/* A download row that holds two variants of the same document. A native
   disclosure with a +/- marker, so it needs no JavaScript. The summary carries no yellow chip on purpose: yellow means "this file
   is ready" everywhere else on the page, and the summary is a choice, not a file.
   The variant titles are mono rather than Oswald so the list still reads as five
   documents at a glance instead of seven. */
.download--group { border-bottom: 1px solid var(--hairline); }
.download--group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 0;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  transition: padding-left 0.2s ease;
}
.download--group > summary:hover { padding-left: 0.5rem; }
.download--group > summary > span:first-child { display: block; min-width: 0; }
.download--group > summary::-webkit-details-marker { display: none; }
/* The +/- marker lives inside the chip rather than beside it, so this row keeps a
   chip in the same column as every other row instead of leaving a hole there, and
   the one element carries both the count and the control. */
.download__toggle::after { content: " +"; }
.download--group[open] .download__toggle::after { content: " \2212"; }

/* Indented and hung on the lighter hairline, so the two variants read as sitting
   under the row rather than as two more entries in the list. */
.download__variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.9rem 0 0.9rem 1.5rem;
  border-top: 1px solid var(--hairline-2);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.2s ease;
}
.download__variant:hover { padding-left: 2rem; }
.download__variant > span:first-child { display: block; min-width: 0; }
.download__variant-title {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- booking - */
.booking { background: var(--ink); color: var(--on-ink); }
.booking .section-head__label { color: var(--on-ink); }
.booking .section-head__rule { background: var(--rule-ink); }
.booking .section-head__aside { color: var(--on-ink-dim); }
.booking__grid,
.press__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.booking__lede,
.press__lede {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--on-ink);
  max-width: 40ch;
  text-wrap: pretty;
  text-wrap: balance;
}
.press__lede { color: var(--muted); margin: 0; }
.contact-plate { margin: 0; border-top: 1px solid var(--rule-ink); }
.contact-plate div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-ink);
}
.contact-plate dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.contact-plate dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink);
  text-align: right;
}
/* Addresses stay as typed: an uppercased email reads as shouting and copies wrong.
   Never broken mid-address: on a phone the row wraps and the value drops under its label. */
.contact-plate dd { margin-left: auto; }
.contact-plate dd a {
  color: inherit;
  text-transform: none;
  text-decoration-color: var(--yellow);
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.booking__socials { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.booking__socials a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-ink);
  border: 1px solid var(--rule-ink);
  padding: 0.55rem 0.9rem;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.booking__socials a:hover { border-color: var(--yellow); color: var(--yellow); }

/* ---------------------------------------------------------------- footer - */
.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 1px solid var(--rule-ink);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.site-footer .stamp { width: 92px; color: var(--yellow); }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
/* Pages first, socials second: two deliberate rows instead of one that wraps. */
.site-footer nav ul + ul { margin-top: 0.7rem; }
.site-footer a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-ink-dim);
  transition: color 0.18s ease;
}
.site-footer a:hover { color: var(--yellow); }
.site-footer__legal {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--on-ink-dim);
  line-height: 1.9;
  text-align: right;
}

/* ------------------------------------------------------------ action bar - */
/* Phone width only. site.js drops [hidden] and slides the bar in once the hero
   has left the screen, and out again over booking and the footer. */
.action-bar { display: none; }

/* ----------------------------------------------------------- legal pages - */
.legal { padding-block: clamp(3rem, 7vw, 6rem); }
.legal__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
}
.legal__body { max-width: 68ch; margin-top: clamp(2rem, 4vw, 3rem); }
.legal__body h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-2);
  margin-top: 1rem;
}
.legal__body dl { margin: 1rem 0 0; }
.legal__body dl div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline-2);
}
.legal__body dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.legal__body dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink);
  text-align: right;
}

/* ---------------------------------------------------------------- motion - */
.js .reveal { opacity: 0; transform: translateY(10px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive - */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
  .program-tab { padding: 1rem 0.9rem 1.2rem; }
  .program-tab__title { font-size: 1rem; }
  .site-nav a { letter-spacing: 0.1em; }
}

@media (max-width: 900px) {
  :root { --header-h: 60px; }

  .nav-toggle { display: inline-flex; }
  /* left/right: 0 pins the panel to the header's PADDING box, which already
     includes the wrap's gutter and spans the full viewport under 900px. Pulling
     out by a negative gutter instead over-extends by exactly one gutter, and the
     padding below then only returns the rows to the screen edge rather than to
     the grid, leaving them a gutter left of the wordmark right above them. */
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem var(--gutter) 1.5rem;
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  /* Scrim below the open drawer, so it reads as an overlay over the page rather
     than as a block pushed into it. Absolute, not fixed: it is anchored to the
     panel's own bottom edge, and a fixed box would resolve top: 100% against the
     viewport instead and collapse to nothing. */
  .site-nav[data-open="true"]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(23, 20, 15, 0.35);
  }
  body.nav-open { overflow: hidden; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--hairline-2);
    font-size: 0.8125rem;
  }
  /* The scrollspy's amber underline reads as a stray coloured rule inside the
     drawer, where every row already carries one. Weight marks the current
     section here instead. */
  .site-nav a[aria-current="true"]:not(.nav-cta) {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--hairline-2);
  }
  /* Only the header's own copy goes; the one inside the drawer is the point. */
  .site-header__inner > .header-cta { display: none; }
  /* Sits inside the nav, so `.site-nav a` outweighs `.header-cta` on every
     property they share. Colour, weight and the row border have to be restated
     here or the button renders as a muted menu link with a hairline under it. */
  .site-nav .nav-cta {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    padding: 0.95rem 1.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--on-ink);
    border-bottom: 0;
  }
  .site-nav .nav-cta:hover { background: var(--amber); }

  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { order: 2; }
  .hero__figure { width: min(100%, 360px); height: auto; margin-inline: auto; }
  /* The stacked figure fills its column, so the stamp's overhang has to stay
     inside the page gutter on narrow screens. */
  .hero__stamp { width: 84px; top: -1.5rem; right: -0.75rem; }
  .essentials { grid-template-columns: minmax(0, 1fr); }
  .essentials__statement { font-size: 1.5rem; }
  .essentials__plate div { padding-block: 0.7rem; }
  .trust__row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }

  /* Two columns now, so the rows need real air between them: without it the
     label of one fact sits directly on the number of the one below. */
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }

  /* One column, and the photo slot is gone: three stacked image bands plus a
     pending tile made the section a scroll marathon between the first program
     and the booking link under the third. The guitar shot below the section
     head carries the whole section instead. */
  .program-panel__inner { grid-template-columns: minmax(0, 1fr); }
  .program-panel__side { display: none; }
  .programs__figure {
    display: block;
    margin-bottom: clamp(2.25rem, 6vw, 3rem);
  }
  .programs__figure img {
    width: 100%;
    height: clamp(200px, 42vw, 300px);
    object-fit: cover;
    object-position: 50% 40%;
  }

  .watch__grid,
  .listen__grid,
  .bio__grid,
  .press__grid,
  .booking__grid { grid-template-columns: minmax(0, 1fr); }

  /* One column now, so the secondary videos are full width too and drop the
     compact treatment. */
  .video-slot--compact .video-facade__play span {
    width: clamp(60px, 7vw, 84px);
    height: clamp(60px, 7vw, 84px);
  }
  .video-slot--compact .video-facade__play span::after {
    margin-left: 4px;
    border-left-width: 15px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  }
  .video-slot--compact .video-facade__caption { padding: 1rem 1.25rem; }
  .video-slot--compact .video-facade__caption strong {
    font-size: 1.0625rem;
    letter-spacing: 0.07em;
  }
  .video-slot--compact .video-facade__caption em { font-size: 0.6875rem; }
  .video-slot--compact .video-caption { font-size: 0.9375rem; margin-top: 1rem; }

  .bio__figure { max-width: 320px; }
  .bio__text { columns: 1; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__legal { text-align: left; }

  .action-bar:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--ink);
    border-top: 1px solid var(--rule-ink);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .action-bar[data-visible="true"] { transform: none; }
  .nav-open .action-bar { transform: translateY(100%); }
  .action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--on-ink);
  }
  .action-bar a + a { border-left: 1px solid var(--rule-ink); }
  .action-bar .action-bar__book { background: var(--yellow); color: var(--ink); border-left: 0; }
  .action-bar :focus-visible { outline-color: var(--yellow); outline-offset: -3px; }
}

/* One column from here down, which is where the design system needs a second
   reading. Every hairline that sits BESIDE another one on a wide screen (the
   four essentials, a section rule next to its aside) stacks into a ladder of identical rules once the columns collapse.
   The rule for this width: one line opens a block, everything inside it is
   separated by space, the amber index and type weight instead. */
@media (max-width: 620px) {
  .gallery__band { display: grid; grid-template-columns: minmax(0, 1fr); }
  /* One column on phones only: between 620 and 900px the justified rows above
     still hold. Full width now, so the portrait ratios would run to two thirds of a phone
     screen each. The ratio still drives the box, max-height only caps the tall
     ones, so the band keeps its rhythm instead of becoming a scroll marathon. */
  .gallery__btn { width: 100%; height: auto; max-height: 58vh; }
  /* Only the two tall shots (stage, seated guitar) are actually capped by the
     max-height above; the other ratios stay under it. Biased upwards so the crop
     keeps the face and the raised arm, the same framing the inline value on
     program 03 uses. */
  .gallery__btn img { object-position: 50% 20%; }

  /* The index and the title hold the sub-head on their own at this width. The
     hairline had to wrap onto a row of its own to fit, where it read as a
     stray underline rather than as structure. */
  .sub-head { gap: 0.75rem; }
  .sub-head__title { flex: 1 1 0; min-width: 0; }
  .sub-head__rule { display: none; }

  /* Three columns do not fit, and two leave SETUP orphaned on a second row with
     a rule of its own. Fall back to the plate's own key/value form instead. */
  .data-plate--row { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .data-plate--row div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--hairline-2);
  }
  .data-plate--row dd { text-align: right; margin-top: 0; }

  /* Two lines rather than a break in the middle of the genre list, and the
     inline separator goes with it: it only makes sense mid-line. */
  .hero__eyebrow .dim { display: block; margin-top: 0.35rem; }
  .hero__eyebrow .eyebrow__sep { display: none; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  /* The lower hairline sat a few pixels above the hard edge of the yellow fact
     block, so the strip keeps only the rule that opens it. */
  .hero__strip {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 0;
    padding-block: 1.1rem 0;
    row-gap: 0.75rem;
  }
  /* The data plate's right-aligned values wrap into ragged blocks this narrow. */
  .essentials__plate div { flex-direction: column; gap: 0.3rem; }
  .essentials__plate dd { text-align: left; white-space: normal; }

  .contact-plate dd { font-size: 0.9375rem; }

  /* Wrapping put the status badge inline on two rows and underneath on the other
     two. One layout for all four instead: title, meta, badge, always stacked. */
  .download { display: block; padding: 1rem 0; }
  .download:hover { padding-left: 0; }
  .download__status { display: inline-block; margin-top: 0.75rem; }

  /* Same stacking for the grouped row. The variants lose their hairline here and
     separate by indent and space instead: stacked, that rule would sit a few
     pixels from the row's own and read as a stutter. */
  .download--group > summary,
  .download__variant { display: block; }
  .download--group > summary:hover { padding-left: 0; }
  .download__variant { border-top: 0; }
  .download__variant:hover { padding-left: 1.5rem; }


  .bio__figure { max-width: none; }
  .bio__text { hyphens: none; }
  .section-head__aside { display: none; }

  .lightbox__btn { width: 44px; height: 44px; }

  /* Wrapped freely, the page row left one link alone on a line. A three-column
     grid gives both lists the same columns instead. */
  .site-footer nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
  .site-header, .nav-toggle, .hero__actions, .action-bar, .lightbox { display: none; }
  .trust { background: #fff; color: #000; }
  body { color: #000; }
  .booking, .site-footer { background: #fff; color: #000; }
}

/* ------------------------------------- program panel details / no-JS state - */
.program-panel__index {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--amber-deep);
  margin-bottom: 0.7rem;
}
/* Tab mode only: there the selector card is the visible headline, so the
   panel's own h3 stays for assistive tech. Stacked and no-JS show it. */
.programs__grid[data-mode="tabs"] .program-panel__title { display: none; }

/* Without JS every program is shown, separated by a hairline. */
.programs__grid[data-mode="static"] { grid-template-columns: minmax(0, 1fr); }
.programs__grid[data-mode="static"] .program-panel + .program-panel {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--hairline);
}

/* Narrow screens: the selector row has nowhere to go at this width, so all
   three programs stand open one under the other. Space, the amber index and
   the display-weight title carry the break between them, no third full-width
   hairline inside the section. */
.programs__grid[data-mode="stacked"] { grid-template-columns: minmax(0, 1fr); }
.programs__grid[data-mode="stacked"] .program-tabs { display: none; }
.programs__grid[data-mode="stacked"] .program-panel + .program-panel {
  margin-top: clamp(2.75rem, 7vw, 3.5rem);
}

/* In tab mode only the selected panel is in the flow. */
.programs__grid[data-mode="tabs"] .program-panel[hidden] { display: none; }
.program-panel__side { min-width: 0; }

/* The legal pages carry a back link instead of the booking CTA, and it must
   survive the narrow-screen rule that hides the CTA. */
@media (max-width: 900px) {
  .header-cta.header-back { display: inline-block; font-size: 0.625rem; padding: 0.6rem 0.85rem; }
}