/* ==========================================================================
   Love In All Its Forms: Jenn Quader
   Design language taken from the album art: deep blue door, high-contrast
   Didone serif, sea-glass teal, a flash of crimson.
   ========================================================================== */

:root {
  /* Blues, pulled from the album cover door */
  --blue-abyss: #041f3a;
  --blue-deep: #063d6e;
  --blue: #0b6bb0;
  --blue-bright: #1a8fd4;
  --blue-pale: #e7f2fa;

  /* Accents */
  --teal: #6fd6c0;
  --teal-deep: #2fa892;
  --crimson: #c4122f;
  --gold: #c9a24a;

  /* Neutrals */
  --ink: #101820;
  --ink-soft: #3d4a57;
  --ink-faint: #6b7885;
  --rule: #dfe6ec;
  --paper: #ffffff;
  --paper-warm: #f7f9fb;

  /* Type */
  --display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --measure: 68ch;
  --shell: 1180px;
  --shell-narrow: 820px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  --radius: 4px;
  --shadow-soft: 0 2px 8px rgba(4, 31, 58, 0.06), 0 12px 32px rgba(4, 31, 58, 0.08);
  --shadow-lift: 0 4px 14px rgba(4, 31, 58, 0.10), 0 20px 50px rgba(4, 31, 58, 0.16);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--blue-bright); }

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; color: #fff; }

.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 -- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - 2.5rem, var(--shell-narrow)); }

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

.section--paper { background: var(--paper-warm); }
.section--ink { background: var(--ink); color: #fff; }
.section--blue {
  background: linear-gradient(165deg, var(--blue-deep) 0%, var(--blue-abyss) 100%);
  color: #fff;
}
.section--ink h2, .section--blue h2,
.section--ink h3, .section--blue h3 { color: #fff; }
.section--ink p, .section--blue p { color: rgba(255, 255, 255, 0.86); }

/* Section eyebrow: the small caps label above headings */
.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
/* The rule after every eyebrow label used to be a 2.5rem hairline, which
   read as a stray em dash. These are the round iron studs off the blue door
   on the album cover instead: three of them, in the accent colour, drawn with
   a repeating radial gradient so it stays one pseudo-element. */
.eyebrow::after {
  content: "";
  flex: 0 0 2.6rem;
  height: 7px;
  background-image: radial-gradient(circle at center, currentColor 2.4px, transparent 2.7px);
  background-size: 0.87rem 7px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.75;
}
.section--ink .eyebrow,
.section--blue .eyebrow { color: var(--teal); }

.lede {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.section--ink .lede,
.section--blue .lede { color: rgba(255, 255, 255, 0.9); }

/* --------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.nav__brand {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.1;
  flex-shrink: 0;
}
.nav__brand span {
  display: block;
  font-family: var(--body);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--teal-deep);
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 820px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-soft);
    padding: 0.5rem 1.25rem 1rem;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav__links li:last-child a { border-bottom: none; }
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
}
.btn--primary:hover { background: #a70e27; border-color: #a70e27; color: #fff; }

.btn--light {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn--light:hover { background: var(--teal); border-color: var(--teal); color: var(--ink); }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  background: linear-gradient(150deg, #0a5e9c 0%, var(--blue-deep) 45%, var(--blue-abyss) 100%);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* soft light bloom, echoes the sunlight on the album cover */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 78% 22%, rgba(111, 214, 192, 0.22), transparent 70%),
    radial-gradient(closest-side at 12% 85%, rgba(26, 143, 212, 0.30), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__title {
  margin: 0 0 0.35em;
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.hero__title .love {
  display: block;
  font-size: 1.32em;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.hero__title .rest {
  display: block;
  font-size: 0.44em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 0.15em;
}

.hero__byline {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.4rem;
  font-weight: 400;
}

.hero__blurb {
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
}

.hero__art {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(2, 15, 30, 0.55);
  transform: rotate(-1.2deg);
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 380px; margin-inline: auto; transform: none; }
}

/* ------------------------------------------------------------- listen --- */

.listen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0.9rem;
  margin-top: 2.25rem;
  list-style: none;
  padding: 0;
}

.listen-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4.1rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.listen-grid a:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--teal);
  transform: translateY(-2px);
  color: #fff;
}
.listen-grid svg { width: 22px; height: 22px; flex: none; }

/* ------------------------------------------------------------ features -- */

/* Two-up image + text block, alternating */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature + .feature { margin-top: var(--section-y); }
.feature--flip .feature__media { order: 2; }

/* Top-aligned variant, for when the text column is much taller than the
   image and vertical centring would strand the photo in a sea of white. */
.feature--top { align-items: start; }
.feature--top .feature__media { position: sticky; top: 6rem; }
@media (max-width: 800px) {
  .feature--top .feature__media { position: static; }
}

/* Two-column prose, for long copy that would otherwise run in one thin
   column beside a photo. */
.prose-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.prose-cols > * > h3:first-child { margin-top: 0; }

.feature__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.feature figcaption {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.7rem;
  line-height: 1.5;
}
.section--ink figcaption,
.section--blue figcaption { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 800px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
}

/* Small stat / fact list */
.facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.facts li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}
.facts dt, .facts .facts__key {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.22rem;
}
.section--ink .facts li,
.section--blue .facts li { border-bottom-color: rgba(255, 255, 255, 0.16); }
.section--ink .facts__key,
.section--blue .facts__key { color: var(--teal); }

@media (max-width: 560px) {
  .facts li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------- full-bleed splits -- */

/* The signature layout from the original design: a photo running to the edge
   of the screen on one side, a saturated blue panel of text on the other. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(78vh, 640px);
}
.split--flip .split__media { order: 2; }

.split__media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: var(--blue-abyss);
}
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.split__media--top img { object-position: center 22%; }

.split__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: clamp(2.25rem, 5vw, 4.5rem);
  background: linear-gradient(155deg, #0a5e9c 0%, var(--blue-deep) 60%, var(--blue-abyss) 100%);
  color: #fff;
}
.split__panel--ink { background: var(--ink); }
.split__panel--paper {
  background: var(--paper-warm);
  color: var(--ink);
}
.split__panel h2, .split__panel h3 { color: inherit; }
.split__panel p { color: rgba(255, 255, 255, 0.88); max-width: 46ch; }
.split__panel--paper p { color: var(--ink-soft); }
.split__panel--paper .eyebrow { color: var(--teal-deep); }

/* Small-caps side label, as used on the original site */
.split__label {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.45rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.split__panel--paper .split__label {
  color: var(--blue);
  border-bottom-color: var(--rule);
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split--flip .split__media { order: 0; }
  .split__media { min-height: 58vw; max-height: 420px; }
}

/* ------------------------------------------------------------- gallery -- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}
.gallery li { margin: 0; }
.gallery figure { margin: 0; height: 100%; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.gallery figcaption {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.45rem;
  line-height: 1.45;
}
.section--ink .gallery figcaption,
.section--blue .gallery figcaption { color: rgba(255, 255, 255, 0.62); }

/* A wider first cell, so the grid doesn't read as a uniform contact sheet.
   Its aspect ratio is set so it lands at the SAME height as a single 4:3
   cell beside it -- two columns plus the gap, over a single cell's height.
   With 16/9 it stood ~90px taller than its rowmates and left dead space
   under them, which read as a broken grid rather than a designed one. */
.gallery { align-items: start; }
.gallery li.gallery--wide { grid-column: span 2; }
.gallery li.gallery--wide img { aspect-ratio: 2.73; }
@media (max-width: 560px) {
  .gallery li.gallery--wide { grid-column: span 1; }
  .gallery li.gallery--wide img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------- video embed -- */

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lift);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 0.85rem;
}
.section--ink .embed-note,
.section--blue .embed-note { color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}

/* Musician photographs. The four sources are different shapes -- two
   portrait, one landscape, one red-carpet full length -- so they are all
   cropped square and cover-fitted, otherwise the row goes ragged. */
.card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin: -0.5rem 0 1.1rem;
  background: var(--rule);
}

.card h3 { margin-bottom: 0.1em; }
.card__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 0.9rem;
}
.card p { font-size: 0.95rem; color: var(--ink-soft); }

.section--ink .card,
.section--blue .card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.section--ink .card p,
.section--blue .card p { color: rgba(255, 255, 255, 0.82); }
.section--ink .card__role,
.section--blue .card__role { color: var(--teal); }

/* --------------------------------------------------------------- quotes -- */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.5rem;
}

.quote { margin: 0; }
.quote blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  line-height: 1.28;
  font-style: italic;
  color: #fff;
}
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote figcaption {
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.quote figcaption span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 0.2rem;
}

/* -------------------------------------------------------------- tracks -- */

.tracklist {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: track;
}

.track {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.track:last-child { border-bottom: 1px solid var(--rule); }

.track__num {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blue-bright);
  line-height: 1;
  padding-top: 0.28rem;
  font-variant-numeric: tabular-nums;
}

.track__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}
.track__title {
  margin: 0;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2.05rem);
  color: var(--blue);
}
.track__time {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.track__bonus {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.track__credits {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: none;
}
.track__credits strong {
  font-weight: 600;
  color: var(--ink);
}
.track__credits span { display: block; }

.track__story {
  font-size: clamp(1.02rem, 0.99rem + 0.2vw, 1.12rem);
  line-height: 1.72;
  color: var(--ink);
  border-left: 3px solid var(--teal);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  max-width: 62ch;
}

@media (max-width: 560px) {
  .track { grid-template-columns: 1fr; gap: 0.3rem; }
  .track__num { font-size: 1.2rem; padding-top: 0; }
}

/* Per-track listen links */
.track__listen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-left: clamp(1rem, 2vw, 1.5rem);
}
.track__listen a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.track__listen a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.track__listen svg { width: 14px; height: 14px; flex: none; }

/* Compact tracklist used on the homepage preview; each row is a link */
.tracklist--compact { margin-top: 2rem; }
.tracklist--compact li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.tracklist--compact a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0.6rem;
  margin-inline: -0.6rem;
  font-size: 1rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}
.tracklist--compact a:hover { background: rgba(255, 255, 255, 0.08); }
.tracklist--compact a:hover .t { color: var(--teal); }
.tracklist--compact .n {
  font-variant-numeric: tabular-nums;
  color: var(--teal);
  font-weight: 600;
  font-size: 0.85rem;
  min-width: 1.5rem;
}
.tracklist--compact .t { flex: 1; color: #fff; }
.tracklist--compact .d {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.tracklist--compact .play {
  width: 15px; height: 15px;
  flex: none;
  opacity: 0;
  color: var(--teal);
  transition: opacity 0.15s ease;
}
.tracklist--compact a:hover .play,
.tracklist--compact a:focus-visible .play { opacity: 1; }
@media (hover: none) {
  .tracklist--compact .play { opacity: 0.7; }
}

/* ------------------------------------------------------------- liner ---- */

.liner {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-soft);
}
.liner h3 { margin-bottom: 0.6rem; }
.liner__attrib {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The four-part motto from the liner notes */
.motto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.75rem);
  font-style: italic;
  color: var(--teal);
  text-align: center;
}

/* ------------------------------------------------------------- contact -- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-card h3 { font-size: 1.3rem; margin-bottom: 0; }
.contact-card p { font-size: 0.95rem; flex: 1; }
.contact-card .btn { margin-top: 0.6rem; align-self: flex-start; }

/* -------------------------------------------------------------- footer -- */

.footer {
  background: var(--blue-abyss);
  color: rgba(255, 255, 255, 0.62);
  padding-block: 3.25rem 2.25rem;
  font-size: 0.875rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.footer a:hover { color: var(--teal); text-decoration: underline; }
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
  line-height: 1.7;
}
.footer__legal p { max-width: none; margin-bottom: 0.4rem; }

/* --------------------------------------------------------------- misc --- */

.page-head {
  background: linear-gradient(150deg, var(--blue-deep) 0%, var(--blue-abyss) 100%);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.page-head h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  margin-bottom: 0.3em;
}
.page-head p { color: rgba(255, 255, 255, 0.85); }

.prose h3 { margin-top: 2.25rem; }
.prose h3:first-child { margin-top: 0; }

.divider {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin-block: var(--section-y);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .nav, .footer, .btn-row, .listen-grid { display: none; }
  body { color: #000; font-size: 11pt; }
  .section--ink, .section--blue, .hero, .page-head {
    background: #fff !important;
    color: #000 !important;
  }
  .section--ink *, .section--blue *, .hero *, .page-head * { color: #000 !important; }
}

/* ------------------------------------------------------------------
   The Musical Michels Christmas Special, on video.
   Same 16:9 treatment as the other embeds, but it sits on the ink
   section so it gets a little breathing room above it.
   ------------------------------------------------------------------ */
.videowrap {
  position: relative;
  margin: 2.75rem 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.videowrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------------------------------------------
   Studio gallery. Some of these are upright photographs and they must
   stay upright: a 4:3 crop on a portrait frame cuts the heads off.
   ------------------------------------------------------------------ */
.gallery li.gallery--tall { grid-row: span 2; }
.gallery li.gallery--tall img { aspect-ratio: 3 / 4; }
@media (max-width: 560px) {
  .gallery li.gallery--tall { grid-row: span 1; }
}

/* ------------------------------------------------------------------
   Press release. Set like a release, not like a web page: a dateline,
   a headline that is not the page's own heading, and an end mark.
   ------------------------------------------------------------------ */
.release__dateline {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.6rem;
}
.release__head {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.18;
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.release__sub {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft, inherit);
  margin: 0 0 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,.12));
}
.release__sub-head {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 2.2rem 0 0.6rem;
}
.release__quote {
  margin: 1.8rem 0;
  padding: 0 0 0 1.3rem;
  border-left: 3px solid var(--accent, #c0392b);
}
.release__quote p {
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 0.5rem;
}
.release__quote footer {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.release__end {
  margin-top: 2.4rem;
  letter-spacing: 0.35em;
  color: var(--ink-faint);
}

/* ---- the studio gallery ------------------------------------------------
   Nine of these frames are phone photographs from the sessions and most of
   them are portrait. Mixing row-spans with column-spans left holes in the
   middle of the grid, so this section runs on one rule instead: every cell
   is the same height. A portrait cell is 3:4; a landscape cell spans two
   columns at 3:2, which lands at the same height as a portrait beside it.
   `dense` lets a later small item back-fill a hole rather than leaving one. */
.gallery--uniform { grid-auto-flow: dense; }
.gallery--uniform img { aspect-ratio: 3 / 4; }
.gallery--uniform li.gallery--wide { grid-column: span 2; }
.gallery--uniform li.gallery--wide img { aspect-ratio: 3 / 2; }
@media (max-width: 560px) {
  .gallery--uniform li.gallery--wide { grid-column: span 1; }
  .gallery--uniform li.gallery--wide img { aspect-ratio: 4 / 3; }
}

/* ---- the YOU ARE BEAUTIFUL panel --------------------------------------
   Every other split panel crops its photograph to fill the cell, which is
   right for a portrait or a close-up. This one is a wide landscape and the
   whole point of it is the billboard standing alone in the winter woods, so
   cropping to the cell cut the trees off either side and lost the picture.
   `contain` shows the full frame; the dark ground behind it reads as a mat
   rather than a mistake, and it already matches the treeline. */
#dreamer { min-height: 0; }
#dreamer .split__media {
  background: var(--blue-abyss);
  min-height: 0;
  display: flex;
  align-items: center;
}
#dreamer .split__media img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---- linked names inside the influence quotes -------------------------
   These paragraphs are Jenn and Doc speaking, inside quotation marks, and
   there are twenty names in them. Default link styling turned the whole
   thing blue and it stopped reading as somebody talking. So the names keep
   the site blue with a soft underline rather than a hard one, and darken on
   hover. Discoverable at a glance, without turning the quote into a list. */
.influences a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: rgba(11, 107, 176, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.influences a:hover,
.influences a:focus-visible {
  color: var(--blue-deep);
  text-decoration-color: currentColor;
}
/* Two things the shared split rules get wrong for this one photograph.
   The stacked breakpoint caps .split__media at 420px tall, which clipped the
   billboard again the moment it was showing whole. And between 860 and
   1080px the panel text is much taller than a half-width landscape photo,
   which left a deep dark band above and below it. So this section stacks
   earlier and gives the photograph the full width, where it has more
   presence anyway, and the height cap comes off. */
@media (max-width: 1080px) {
  #dreamer { grid-template-columns: 1fr; }
  #dreamer .split__media { order: 0; min-height: 0; max-height: none; }
}

/* ---- the archival Michels grid ---------------------------------------
   These are photographs of photographs: 1990s prints and a newspaper
   clipping, scanned at about 700px. They are the warmest thing on the site
   and they should not be asked to behave like the studio frames. Uniform
   3:2 cells so nothing crops badly, and a pale mat with a hairline so each
   one reads as a print laid down rather than a low-resolution image. */
.gallery--archive {
  grid-auto-flow: dense;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1000px;
}
.gallery--archive img {
  aspect-ratio: 3 / 2;
  background: #ece4d7;
  padding: 6px;
  border-radius: 2px;
}
.section--ink .gallery--archive img { box-shadow: 0 1px 0 rgba(255,255,255,0.10); }

/* ---- a portrait figure set into a prose column ----------------------- */
.inset-figure { margin: 1.75rem 0 0; max-width: 320px; }
.inset-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.inset-figure figcaption {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.45rem;
  line-height: 1.45;
}

/* ---- the motto, now with a photograph beside it -----------------------
   It was a thin blue band with four italic lines in the middle of it, which
   is the sort of thing that makes a site feel tidy and empty at once. The
   words are Jenn's sign-off, so they now sit next to the picture of her
   spinning against the same blue door that is on the album cover. */
.motto-split .split__media { min-height: 0; }
.motto-split .split__media img { object-position: center 30%; }
.motto-split .split__panel {
  background: linear-gradient(160deg, #0a5e9c 0%, var(--blue-deep) 55%, var(--blue-abyss) 100%);
  align-items: center;
}
.motto-split .motto { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.35rem); }
@media (max-width: 860px) {
  .motto-split .split__media { min-height: 60vw; max-height: 480px; }
}

/* A cell that shows the whole image instead of filling itself. The album
   cover is a square in a portrait grid, so cropping it to fit cut the top
   and bottom off the artwork. */
.gallery--contain img {
  object-fit: contain;
  background: var(--blue-abyss);
}
@media (min-width: 700px) {
  .gallery--archive { grid-template-columns: repeat(2, 1fr); }
}

/* ---- the Christmas Special poster ------------------------------------
   This used to be a bare YouTube iframe. Where an embed is blocked (a
   preview pane, a strict content policy, a slow connection) the wrapper's
   black background was all you got. So it is a real frame from the 2001
   broadcast with a play button over it, and it is an ordinary link to
   YouTube until the script upgrades it to play in place. Nothing loads
   from YouTube until somebody actually asks for it. */
.video-facade {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,31,58,0) 45%, rgba(4,31,58,0.72) 100%);
}
.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 8vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 6px 24px rgba(4, 31, 58, 0.45);
  z-index: 1;
  transition: transform 0.18s ease, background 0.18s ease;
}
.video-facade__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.62em 0 0.62em 1.05em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(15px, 2.2vw, 23px);
}
.video-facade__label {
  position: absolute;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(0.85rem, 2.5vw, 1.4rem);
  z-index: 1;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
  transform: translate(-50%, -50%) scale(1.07);
  background: #d81b3a;
}
@media (prefers-reduced-motion: reduce) {
  .video-facade__play { transition: none; }
}