/*
 * Foon site styles.
 */

:root {
  /* locked by a one-line script in the layout; the fallback only
     applies before that runs, or with JS off */
  --bgh: 100vh;
  /* how far the background faces travel; the home-page LFO drives this */
  --lfo-depth: 0.03;
  --color-bg: #0d0d0d;
  --color-fg: #f4f4f4;
  --color-muted: rgba(244, 244, 244, 0.55);
  --color-accent: #ed3424;
  --color-accent-faded: rgba(237, 52, 36, 0.35);
  --color-surface: #000;

  --font-display: "Jura", "Courier New", monospace;
  --font-body: "Jura", "Courier New", monospace;
  --font-weight-body: 500;
  --font-weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --nav-width: 8rem;
  --footer-height: 4rem;
}

* {
  box-sizing: border-box;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}

html {
  background: var(--color-bg);
}
html, body {
  margin: 0;
  padding: 0;
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---------- Layout shell ---------- */
.site {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

.site__top {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--space-1) var(--space-1);
}

.site__bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
}
.site__bg::before,
.site__bg::after {
  content: "";
  flex: 1;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.site__bg::before { background-image: url("../images/bg-left.jpg"); }
.site__bg::after  { background-image: url("../images/bg-right.jpg"); }

/* ---------- Inner-page background: dimmed, with living faces ---------- */
/* Home (.is-home) keeps the original bright, static backgrounds. */
.site:not(.is-home) .site__bg::before,
.site:not(.is-home) .site__bg::after {
  /* On inner pages these become a soft "plate": the faces are smeared
     away, so the sharp face that moves is the only one you see. */
  filter: brightness(0.45) blur(22px);
  transform: scale(1.06);            /* hides the blur's soft edges */
}

/* Home gets the same plate treatment, just bright: without it, a face
   flying off on the LFO would leave its original still in the photo. */
.is-home .site__bg::before,
.is-home .site__bg::after {
  filter: blur(22px);
  transform: scale(1.06);
}
.is-home .site__bg-base { opacity: 1; }
.is-home .site__bg-base--l,
.is-home .site__bg-base--r { filter: none; }
.is-home .site__bg-fx--l1,
.is-home .site__bg-fx--l2,
.is-home .site__bg-fx--l3 { filter: contrast(1.05); }
.is-home .site__bg-fx--r1,
.is-home .site__bg-fx--r2 { filter: contrast(1.15); }

/* The sharp photo, with a hole punched where each face is. The plate
   behind shows through those holes, so nothing static remains there. */
.site__bg-base {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 1;                        /* above the blurred plate pseudos */
}
.site:not(.is-home) .site__bg-base { opacity: 1; }
.site__bg-base--l {
  left: 0;
  background-image: url("../images/bg-left.jpg");
  filter: brightness(0.45);
  -webkit-mask-image:
    radial-gradient(ellipse 17% 18% at 64% 37%, transparent 35%, #000 78%),
    radial-gradient(ellipse 13% 12% at 91% 34%, transparent 35%, #000 78%),
    radial-gradient(ellipse 13% 12% at 93% 43%, transparent 35%, #000 78%);
  mask-image:
    radial-gradient(ellipse 17% 18% at 64% 37%, transparent 35%, #000 78%),
    radial-gradient(ellipse 13% 12% at 91% 34%, transparent 35%, #000 78%),
    radial-gradient(ellipse 13% 12% at 93% 43%, transparent 35%, #000 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.site__bg-base--r {
  right: 0;
  background-image: url("../images/bg-right.jpg");
  filter: brightness(0.45);
  -webkit-mask-image:
    radial-gradient(ellipse 16% 18% at 56% 36%, transparent 35%, #000 78%),
    radial-gradient(ellipse 16% 17% at 81% 39%, transparent 35%, #000 78%);
  mask-image:
    radial-gradient(ellipse 16% 18% at 56% 36%, transparent 35%, #000 78%),
    radial-gradient(ellipse 16% 17% at 81% 39%, transparent 35%, #000 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* A breathing light over each photo's lit doorway — amber on the left,
   blue on the right — with the occasional dip, like a lamp flickering.
   Painted between the still photo and the moving faces. */
.site__bg-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  opacity: 0;                        /* off on the home page */
  z-index: 1;
  mix-blend-mode: screen;
  will-change: opacity;
}
.site__bg-glow--l {
  left: 0;
  background: radial-gradient(ellipse 26% 38% at 59% 44%,
              rgba(255, 168, 66, 0.55), rgba(255, 168, 66, 0) 72%);
}
.site__bg-glow--r {
  right: 0;
  background: radial-gradient(ellipse 24% 36% at 61% 42%,
              rgba(64, 128, 255, 0.5), rgba(64, 128, 255, 0) 72%);
}
.site:not(.is-home) .site__bg-glow--l { animation: glow-l 11s ease-in-out infinite; }
.site:not(.is-home) .site__bg-glow--r { animation: glow-r 8.6s ease-in-out -3.2s infinite; }

@keyframes glow-l {
  0%   { opacity: 0.25; }
  35%  { opacity: 0.75; }
  41%  { opacity: 0.45; }            /* flicker dip */
  43%  { opacity: 0.8; }
  62%  { opacity: 0.9; }
  65%  { opacity: 0.5; }             /* flicker dip */
  67%  { opacity: 0.85; }
  100% { opacity: 0.25; }
}
@keyframes glow-r {
  0%   { opacity: 0.3; }
  30%  { opacity: 0.8; }
  47%  { opacity: 0.55; }            /* flicker dip */
  49%  { opacity: 0.95; }
  76%  { opacity: 0.6; }
  79%  { opacity: 0.9; }
  100% { opacity: 0.3; }
}

/* One layer per face: a copy of the photo masked down to a single head,
   sitting on top of the still image. Each face wanders its own slow loop —
   the transform pivots around that face (transform-origin), so the drift
   carries a little sway and breath instead of a straight slide. */
.site__bg-fx {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0;                        /* off on the home page */
  /* ::before/::after carry a filter, which makes them stacking contexts;
     ::after would otherwise paint over these layers and hide the right
     half's effect entirely. */
  z-index: 2;
  will-change: transform, opacity;
}
.site:not(.is-home) .site__bg-fx { opacity: 1; }

/* Left photo: centre figure + the pair at the right edge */
.site__bg-fx--l1,
.site__bg-fx--l2,
.site__bg-fx--l3 {
  left: 0;
  background-image: url("../images/bg-left.jpg");
  filter: brightness(0.5) contrast(1.05);
}
.site__bg-fx--l1 {
  -webkit-mask-image: radial-gradient(ellipse 17% 18% at 64% 37%, #000 35%, transparent 72%);
          mask-image: radial-gradient(ellipse 17% 18% at 64% 37%, #000 35%, transparent 72%);
  transform-origin: 64% 37%;
}
.site__bg-fx--l2 {
  -webkit-mask-image: radial-gradient(ellipse 13% 12% at 91% 34%, #000 35%, transparent 72%);
          mask-image: radial-gradient(ellipse 13% 12% at 91% 34%, #000 35%, transparent 72%);
  transform-origin: 91% 34%;
}
/* The lower head of the same pair moves in counterphase, so the two
   heads pull apart and drift back together. */
.site__bg-fx--l3 {
  -webkit-mask-image: radial-gradient(ellipse 13% 12% at 93% 43%, #000 35%, transparent 72%);
          mask-image: radial-gradient(ellipse 13% 12% at 93% 43%, #000 35%, transparent 72%);
  transform-origin: 93% 43%;
}

/* Right photo sits darker to begin with, so it is lifted a little */
.site__bg-fx--r1,
.site__bg-fx--r2 {
  right: 0;
  background-image: url("../images/bg-right.jpg");
  filter: brightness(0.75) contrast(1.15);
}
.site__bg-fx--r1 {
  -webkit-mask-image: radial-gradient(ellipse 16% 18% at 56% 36%, #000 35%, transparent 72%);
          mask-image: radial-gradient(ellipse 16% 18% at 56% 36%, #000 35%, transparent 72%);
  transform-origin: 56% 36%;
}
.site__bg-fx--r2 {
  -webkit-mask-image: radial-gradient(ellipse 16% 17% at 81% 39%, #000 35%, transparent 72%);
          mask-image: radial-gradient(ellipse 16% 17% at 81% 39%, #000 35%, transparent 72%);
  transform-origin: 81% 39%;
}

/* The faces run everywhere — on home they drift as ghost double-exposures
   over the bright originals (no plate or holes there). The keyframes drive
   opacity, which is what overrides the base opacity: 0 on home; under
   reduced motion the animations stop and that base value hides them again. */
.site__bg-fx--l1 { animation: face-a 11.3s ease-in-out -2.8s infinite; }
.site__bg-fx--l2 { animation: face-b 13.1s ease-in-out -5.2s infinite; }
.site__bg-fx--l3 { animation: face-e  9.7s ease-in-out -1.9s infinite; }
.site__bg-fx--r1 { animation: face-c 12.7s ease-in-out -7.4s infinite; }
.site__bg-fx--r2 { animation: face-d 14.9s ease-in-out -4.1s infinite; }

/* Each face wanders a closed loop (first and last frames match), with a
   touch of rotation and scale around its own centre. Opacity stays in the
   0.55-1 band so faces drift rather than blink. */
@keyframes face-a {
  0%   { transform: translate(0, 0) rotate(0deg);    opacity: 0.65; }
  28%  { transform: translate(calc(var(--lfo-depth) * 25.0vw), calc(var(--lfo-depth) * -8.8vh)) rotate(calc(var(--lfo-depth) * 15.0deg)); opacity: 1; }
  52%  { transform: translate(calc(var(--lfo-depth) * 40.0vw), calc(var(--lfo-depth) * 30.8vh)) rotate(calc(var(--lfo-depth) * 30.0deg)); opacity: 0.8; }
  76%  { transform: translate(calc(var(--lfo-depth) * -20.0vw), calc(var(--lfo-depth) * 22.0vh)) rotate(calc(var(--lfo-depth) * -12.0deg)); opacity: 0.95; }
  100% { transform: translate(0, 0) rotate(0deg);    opacity: 0.65; }
}
@keyframes face-b {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  30%  { transform: translate(calc(var(--lfo-depth) * -15.0vw), calc(var(--lfo-depth) * 4.4vh)) rotate(calc(var(--lfo-depth) * -15.0deg));    opacity: 0.7; }
  55%  { transform: translate(calc(var(--lfo-depth) * -40.0vw), calc(var(--lfo-depth) * -44.0vh)) rotate(calc(var(--lfo-depth) * -30.0deg)); opacity: 0.9; }
  78%  { transform: translate(calc(var(--lfo-depth) * 10.0vw), calc(var(--lfo-depth) * -13.2vh)) rotate(calc(var(--lfo-depth) * 9.0deg)); opacity: 0.6; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes face-e {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  26%  { transform: translate(calc(var(--lfo-depth) * 15.0vw), calc(var(--lfo-depth) * -4.4vh)) rotate(calc(var(--lfo-depth) * 12.0deg)); opacity: 0.95; }
  50%  { transform: translate(calc(var(--lfo-depth) * 45.0vw), calc(var(--lfo-depth) * 44.0vh)) rotate(calc(var(--lfo-depth) * 27.0deg));    opacity: 1; }
  74%  { transform: translate(calc(var(--lfo-depth) * 0.0vw), calc(var(--lfo-depth) * 17.6vh)) rotate(calc(var(--lfo-depth) * -6.0deg)); opacity: 0.75; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
}
@keyframes face-c {
  0%   { transform: translate(0, 0) rotate(0deg);    opacity: 0.7; }
  24%  { transform: translate(calc(var(--lfo-depth) * -25.0vw), calc(var(--lfo-depth) * -13.2vh)) rotate(calc(var(--lfo-depth) * -12.0deg)); opacity: 1; }
  50%  { transform: translate(calc(var(--lfo-depth) * -45.0vw), calc(var(--lfo-depth) * 30.8vh)) rotate(calc(var(--lfo-depth) * -27.0deg)); opacity: 0.85; }
  76%  { transform: translate(calc(var(--lfo-depth) * 5.0vw), calc(var(--lfo-depth) * 8.8vh)) rotate(calc(var(--lfo-depth) * 15.0deg)); opacity: 0.95; }
  100% { transform: translate(0, 0) rotate(0deg);    opacity: 0.7; }
}
@keyframes face-d {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  26%  { transform: translate(calc(var(--lfo-depth) * -5.0vw), calc(var(--lfo-depth) * -8.8vh)) rotate(calc(var(--lfo-depth) * 9.0deg));    opacity: 0.7; }
  54%  { transform: translate(calc(var(--lfo-depth) * 25.0vw), calc(var(--lfo-depth) * -44.0vh)) rotate(calc(var(--lfo-depth) * 24.0deg)); opacity: 0.9; }
  80%  { transform: translate(calc(var(--lfo-depth) * -15.0vw), calc(var(--lfo-depth) * -4.4vh)) rotate(calc(var(--lfo-depth) * -9.0deg)); opacity: 0.65; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site__bg-fx,
  .site__bg-glow { animation: none !important; }
  .site:not(.is-home) .site__bg-fx  { opacity: 0.85; }
  .site:not(.is-home) .site__bg-glow { opacity: 0.4; }
  /* home falls back to the plain photo: no holes, no blur, no layers */
  .is-home .site__bg::before,
  .is-home .site__bg::after { filter: none; transform: none; }
  .is-home .site__bg-base { opacity: 0; }
}

/* ---------- Header ---------- */
.site__header {
  position: relative;
  display: grid;
  grid-template-columns: var(--nav-width) 1fr var(--nav-width);
  grid-template-areas: "nav brand title";
  align-items: start;
  gap: var(--space-6);
}

.nav         { grid-area: nav; }
.page-title  { grid-area: title; }

.brand {
  position: absolute;
  top: 0;
  right: calc(50% + 94px);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-accent);
  letter-spacing: 0.05em;
  line-height: 1;
}

.page-title {
  color: var(--color-accent);
  font-size: 1rem;
}

/* ---------- Nav ---------- */
.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.15;
}
.nav__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
}
.nav__num {
  color: var(--color-accent);
  width: 1ch;
}
.nav__link {
  color: var(--color-accent);
}
.nav__link.is-active,
.nav__list li:has(.nav__link.is-active) .nav__num,
.nav__list li:hover .nav__num,
.nav__list li:hover .nav__link {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Main area ---------- */
.site__main {
  padding: var(--space-7) 0;
}

/* ---------- Footer ---------- */
.site__footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-3);
  background: var(--color-bg);
  border-top: 1px solid var(--color-accent);
  min-height: 6rem;
}
.footer__email {
  grid-column: 1;
  grid-row: 1;
  color: var(--color-accent);
  font-size: 0.95rem;
}
.footer__socials {
  grid-column: 2;
  grid-row: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}
.footer__socials a {
  color: var(--color-accent);
  font-size: 0.95rem;
}
.footer__copy {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  margin: 0;
  color: var(--color-accent);
  font-size: 0.85rem;
}
.footer__copy a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ---------- Reusable buttons ---------- */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

/* ---------- Home page ---------- */
.home {
  min-height: 72vh;
  display: flex;
  align-items: flex-end;      /* panel sits low, clear of the figures */
  justify-content: center;
  padding-bottom: var(--space-5);
}

/* On desktop the home page fits the first screen exactly — header,
   panel, and the whole footer visible with no scroll. (Small screens
   keep scrolling: the two photos stack there by design.) */
@media (min-width: 721px) {
  .is-home {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .is-home .site__top {
    flex: 1;
    min-height: 0;
  }
  .is-home .site__main {
    padding: var(--space-4) 0 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .is-home .home {
    flex: 1;
    min-height: 0;
    padding-bottom: var(--space-4);
  }
  .is-home .site__footer { flex-shrink: 0; }
}

/* The LFO's output breathes a glow around the screen edges. */
.lfo-glow {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 110px 4px var(--color-accent);
  opacity: 0;
  will-change: opacity;
}

/* LFO panel: the output modulates how fast the background faces move. */
.lfo {
  width: min(22rem, 92vw);
  padding: var(--space-4);
  border: 1px solid var(--color-accent);
  background: rgba(13, 13, 13, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-accent);
  font-family: var(--font-display);
}
.lfo__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.lfo__title {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2em;
}
.lfo__readout,
.lfo__rate {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.lfo__rate { color: var(--color-accent-faded); }
.lfo__body {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.lfo__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Vertical depth fader: a rotated native range — reliable everywhere,
   unlike native vertical sliders (iOS WebKit in particular). */
.lfo__depth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.lfo__depth-slot {
  position: relative;
  width: 1.25rem;
  flex: 1;
}
.lfo__depth-slot input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.5rem;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  accent-color: var(--color-accent);
}
.lfo__depth-label {
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-accent-faded);
}

.lfo__scope {
  display: block;
  width: 100%;
  height: 5.5rem;
  border: 1px solid var(--color-accent-faded);
}
.lfo__scope-mid {
  stroke: var(--color-accent-faded);
  stroke-width: 1;
}
.lfo__scope-trace {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}
.lfo__scope-dot {
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
}
.lfo__waves {
  display: flex;
  gap: var(--space-2);
}
.lfo__wave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
  background: transparent;
  border: 1px solid var(--color-accent-faded);
  color: rgba(237, 52, 36, 0.8);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.lfo__wave svg {
  width: 1.9rem;
  height: 0.95rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lfo__wave:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.lfo__wave.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(237, 52, 36, 0.12);
}
.lfo__freq {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}
.lfo__freq input {
  flex: 1;
  accent-color: var(--color-accent);
}

/* ---------- Scroll reveal ---------- */
/* Only applied once reveal.js has run, so no-JS keeps everything visible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition:
    opacity 0.9s ease,
    filter 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Blurring text is repaint-heavy, so phones get the plain fade-and-rise. */
@media (max-width: 720px) {
  .js-reveal .reveal { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---------- About page ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.about__image { grid-column: 1; grid-row: 1; }
/* Sized only when a promo image has been set in _data/about.yml */
.about__image--set {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
}
.about__text  { grid-column: 2; grid-row: 1; }
.about__bios  { grid-column: 1; grid-row: 2; justify-self: end; }

.about__text,
.about__bios {
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 32em;
}

/* ---------- Shows page ---------- */
.shows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.shows__section:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  padding-left: var(--space-3);
}
.shows__section:nth-child(2) {
  grid-column: 2;
  grid-row: 2;
  padding-right: var(--space-7);
}
.shows__heading {
  color: var(--color-accent);
  font-size: 1rem;
  margin: 0;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: var(--space-2);
  font-weight: var(--font-weight-bold);
}
.shows__heading--past {
  color: var(--color-accent-faded);
  border-color: var(--color-accent-faded);
  padding-left: var(--space-3);
}
.show {
  display: grid;
  grid-template-columns: 6rem 1fr 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-accent);
}
.show--past { color: var(--color-accent-faded); border-color: var(--color-accent-faded); }
.show--past .show__date { padding-left: var(--space-3); }
.show__date {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-weight: 700;
  line-height: 1;
}
.show__day   { font-size: 1rem; }
.show__month { font-size: 1rem; }
.show__venue { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.05em; }
.show__place { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.05em; }

.show__action {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid transparent;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.show__action:hover { background: transparent; border-color: var(--color-accent); text-decoration: none; }
.show:not(.show--past) .show__action { margin-right: var(--space-7); }
.show--past .show__action,
.show__action--disabled {
  border-color: transparent;
  color: var(--color-accent-faded);
}
.show--past .show__action:hover { background: transparent; border-color: var(--color-accent-faded); }

/* ---------- Releases page ---------- */
.releases {
  display: grid;
  gap: var(--space-7);
}
.release {
  position: relative;
  height: 20rem;
}
.release__cover {
  position: absolute;
  top: 0;
  left: calc(50% + 0.75rem);
  width: 20rem;
  height: 20rem;
  background: rgba(220, 220, 220, 0.95);
  background-size: cover;
  background-position: center;
}
.release__row {
  position: absolute;
  top: 0;
  right: calc(50% + 0.75rem);
  height: 20rem;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-end;
}
.release__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 8rem;
}
.release__actions .btn {
  width: 100%;
  text-align: center;
  padding: var(--space-4) var(--space-5);
}
.release__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: right;
  color: var(--color-accent);
}
.release__year  { font-size: 1.1rem; }
.release__title { font-size: 1.1rem; margin: 0; font-weight: var(--font-weight-bold); }

/* ---------- Video page ---------- */
.videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-5);
}
.video-embed {
  aspect-ratio: 16 / 9;
  width: 85%;
  justify-self: center;
}
.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed:nth-child(1) { grid-column: 1; grid-row: 1; }
.video-embed:nth-child(2) { grid-column: 2; grid-row: 2; }
.video-embed:nth-child(3) { grid-column: 1; grid-row: 3; }
.video-embed:nth-child(4) { grid-column: 2; grid-row: 4; }
.video-embed:nth-child(5) { grid-column: 1; grid-row: 5; }
.video-embed:nth-child(6) { grid-column: 2; grid-row: 6; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  :root { --lfo-depth: 0.07; }

  .site__top {
    padding: var(--space-1);
    min-height: calc(var(--bgh) * 2);
  }

  .site__footer { padding: var(--space-1); }

  .site__bg {
    position: absolute;
    display: block;
    height: calc(var(--bgh) * 2);
  }
  .site__bg::before,
  .site__bg::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--bgh);
  }
  .site__bg::before { top: 0; }
  .site__bg::after  { top: var(--bgh); }

  /* Photos stack vertically here, so the face layers follow suit
     instead of sitting as left/right halves. */
  .site__bg-base,
  .site__bg-glow,
  .site__bg-fx {
    left: 0;
    right: auto;
    width: 100%;
    height: var(--bgh);
    bottom: auto;
  }
  .site__bg-fx--l1,
  .site__bg-fx--l2,
  .site__bg-fx--l3 { top: 0; }
  .site__bg-fx--r1,
  .site__bg-fx--r2 { top: var(--bgh); }
  .site__bg-base--l { top: 0; }
  .site__bg-base--r { top: var(--bgh); }
  .site__bg-glow--l { top: 0; }
  .site__bg-glow--r { top: var(--bgh); }

  /* The LFO docks as a compact bar at the bottom of the screen, like a
     synth transport — the photos stack vertically here and the second
     one is a full screen down, so a fixed bar keeps the controls in
     reach while either photo is in view. */
  .lfo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--space-3);
    width: calc(100vw - 2 * var(--space-3));
    z-index: 5;
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .lfo__scope { height: 3.5rem; }
  .lfo__depth-slot input { width: 7rem; }
  .lfo__wave { padding: var(--space-1) 0; }
  .lfo__wave svg { width: 1.6rem; height: 0.8rem; }
  .lfo-glow { box-shadow: inset 0 0 55px 2px var(--color-accent); }

  .brand { right: 1rem; }

  .site__header {
    grid-template-areas:
      "nav brand"
      "title title";
    gap: var(--space-4);
  }
  .page-title { display: none; }

  .about { grid-template-columns: 1fr; }
  .about__image,
  .about__text,
  .about__bios {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: none;
  }

  .videos { grid-template-columns: 1fr; }
  .video-embed:nth-child(n) { grid-column: 1; grid-row: auto; }

  .shows { grid-template-columns: 1fr; gap: var(--space-8); }
  .shows__section:nth-child(1),
  .shows__section:nth-child(2) {
    padding-left: 0;
    padding-right: 0;
  }
  .shows__section:nth-child(n) { grid-column: 1; grid-row: auto; }

  .release {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }
  .release__cover {
    position: static;
    left: auto;
    width: 100%;
    max-width: 20rem;
  }
  .release__row {
    position: static;
    right: auto;
    width: 100%;
    max-width: 20rem;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .show {
    grid-template-columns: 4rem 1fr auto;
    grid-template-areas:
      "date venue button"
      "date place button";
    column-gap: var(--space-4);
    row-gap: 0;
  }
  .show__date { grid-area: date; }
  .show__venue { grid-area: venue; }
  .show__place { grid-area: place; }
  .show__action { grid-area: button; }
}

/* On small screens the faces sit near the side edges, so their desktop
   paths hug the sides and leave the screen. These overrides pull every
   excursion toward the centre of the viewport: each face still launches
   from its hole, but flies inward. */
@media (max-width: 720px) {
@keyframes face-a {
  0%   { transform: translate(0, 0) rotate(0deg);    opacity: 0.65; }
  28%  { transform: translate(calc(var(--lfo-depth) * 11.0vw), calc(var(--lfo-depth) * -8.8vh)) rotate(calc(var(--lfo-depth) * 15.0deg)); opacity: 1; }
  52%  { transform: translate(calc(var(--lfo-depth) * 26.0vw), calc(var(--lfo-depth) * 30.8vh)) rotate(calc(var(--lfo-depth) * 30.0deg)); opacity: 0.8; }
  76%  { transform: translate(calc(var(--lfo-depth) * -34.0vw), calc(var(--lfo-depth) * 22.0vh)) rotate(calc(var(--lfo-depth) * -12.0deg)); opacity: 0.95; }
  100% { transform: translate(0, 0) rotate(0deg);    opacity: 0.65; }
}
@keyframes face-b {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  30%  { transform: translate(calc(var(--lfo-depth) * -56.0vw), calc(var(--lfo-depth) * 4.4vh)) rotate(calc(var(--lfo-depth) * -15.0deg));    opacity: 0.7; }
  55%  { transform: translate(calc(var(--lfo-depth) * -81.0vw), calc(var(--lfo-depth) * -44.0vh)) rotate(calc(var(--lfo-depth) * -30.0deg)); opacity: 0.9; }
  78%  { transform: translate(calc(var(--lfo-depth) * -31.0vw), calc(var(--lfo-depth) * -13.2vh)) rotate(calc(var(--lfo-depth) * 9.0deg)); opacity: 0.6; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes face-e {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  26%  { transform: translate(calc(var(--lfo-depth) * -28.0vw), calc(var(--lfo-depth) * -4.4vh)) rotate(calc(var(--lfo-depth) * 12.0deg)); opacity: 0.95; }
  50%  { transform: translate(calc(var(--lfo-depth) * 2.0vw), calc(var(--lfo-depth) * 44.0vh)) rotate(calc(var(--lfo-depth) * 27.0deg));    opacity: 1; }
  74%  { transform: translate(calc(var(--lfo-depth) * -43.0vw), calc(var(--lfo-depth) * 17.6vh)) rotate(calc(var(--lfo-depth) * -6.0deg)); opacity: 0.75; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
}
@keyframes face-c {
  0%   { transform: translate(0, 0) rotate(0deg);    opacity: 0.7; }
  24%  { transform: translate(calc(var(--lfo-depth) * -31.0vw), calc(var(--lfo-depth) * -13.2vh)) rotate(calc(var(--lfo-depth) * -12.0deg)); opacity: 1; }
  50%  { transform: translate(calc(var(--lfo-depth) * -51.0vw), calc(var(--lfo-depth) * 30.8vh)) rotate(calc(var(--lfo-depth) * -27.0deg)); opacity: 0.85; }
  76%  { transform: translate(calc(var(--lfo-depth) * -1.0vw), calc(var(--lfo-depth) * 8.8vh)) rotate(calc(var(--lfo-depth) * 15.0deg)); opacity: 0.95; }
  100% { transform: translate(0, 0) rotate(0deg);    opacity: 0.7; }
}
@keyframes face-d {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  26%  { transform: translate(calc(var(--lfo-depth) * -36.0vw), calc(var(--lfo-depth) * -8.8vh)) rotate(calc(var(--lfo-depth) * 9.0deg));    opacity: 0.7; }
  54%  { transform: translate(calc(var(--lfo-depth) * -6.0vw), calc(var(--lfo-depth) * -44.0vh)) rotate(calc(var(--lfo-depth) * 24.0deg)); opacity: 0.9; }
  80%  { transform: translate(calc(var(--lfo-depth) * -46.0vw), calc(var(--lfo-depth) * -4.4vh)) rotate(calc(var(--lfo-depth) * -9.0deg)); opacity: 0.65; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
}