/* ==========================================================================
   Wild Animal — design system
   ========================================================================== */

/* Self-hosted Oswald (variable, weights 200–700, latin subset).
   Single woff2 file covers 400 / 500 / 700 used across the site. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../assets/fonts/oswald-variable-latin.woff2') format('woff2-variations'),
       url('../assets/fonts/oswald-variable-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --color-bg: #fcfcfc;
  --color-bg-alt: #cfd9ca;
  --color-text: #3f3f3f;
  --color-text-strong: #2a2a2a;
  --color-accent: #a88d2e;
  --color-accent-hover: #8d7824;
  --color-rule: rgba(42, 42, 42, 0.12);

  /* Type */
  --font-sans: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --fs-xs:   0.875rem;  /* 14 */
  --fs-sm:   1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 — body */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  4rem;      /* 64 */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;

  --tracking-body:  0.01em;
  --tracking-head:  0.02em;
  --tracking-caps:  0.08em;

  /* Space */
  --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;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container: 1100px;
  --container-narrow: 760px;
  --header-height: 88px;
}

@media (max-width: 768px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.75rem;
    --header-height: 72px;
  }
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  color: var(--color-text-strong);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-head);
}

h1 { font-size: var(--fs-4xl); font-weight: 700; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover, a:focus-visible { color: var(--color-accent-hover); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-7) 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  padding: var(--space-9) 0;
  background: var(--color-bg);
}
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding: var(--space-7) 0; }

@media (max-width: 768px) {
  .section { padding: var(--space-7) 0; }
  .section--tight { padding: var(--space-6) 0; }
}

.center-text { text-align: center; }

/* --------------------------------------------------------------------------
   Site header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-height);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.site-logo {
  display: block;
  flex: 0 0 auto;
}
.site-logo img {
  height: 56px;
  width: auto;
}
@media (max-width: 768px) {
  .site-logo img { height: 44px; }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-strong);
  transition: transform 180ms ease, opacity 180ms ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; left: 0; }
.nav-toggle__bars::after  { position: absolute; top:  7px; left: 0; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

.site-nav__list {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  color: var(--color-text-strong);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom-color: var(--color-accent);
}
.site-nav__link[aria-current='page'] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-rule);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding: var(--space-3) var(--space-5) var(--space-5);
  }
  .site-nav__link {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .site-nav__link:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Hero — cinematic stage (scroll-driven; static fallback below 1024px or
   when @supports(animation-timeline) fails)

   Pattern: photo fills the viewport on landing; on scroll, the text content
   rises into view from below, overlays the photo centered, then the entire
   hero exits up to reveal the news section beneath. Pure CSS — no JS.

   Layout: <section class="hero"> wraps a sticky <.hero__viewport>
   pinned just below the sticky header (top: var(--header-height)) so
   the photo's top edge sits on the first visible line of the photo
   throughout the scroll — never cropped from the top, never shifted
   when sticky engages. Inside, the photo is an absolutely-positioned
   <.hero__stage> and the text is a sibling <.hero__overlay>.
   Animation runs against a view-timeline named on the .hero section
   using the `contain` range, which is the period the 150vh hero
   fully covers the viewport (i.e. the sticky duration). Linear
   keyframes drive the text continuously: it rises from below,
   crosses the center, and exits above without pause. The photo's
   top is anchored throughout via a counter-translate that exactly
   mirrors the sticky's post-end drift (slope 1); disappearance is
   bottom-up, with the news section (z-index 1) rising over the
   photo from below.
   -------------------------------------------------------------------------- */
.hero {
  padding: 0;
  position: relative;
  background: var(--color-text-strong);
}

.hero__viewport {
  position: relative;
}

/* --- Static fallback layout (mobile + browsers without scroll-timeline) -- */
.hero__stage {
  position: relative;
  height: 60vh;
  overflow: hidden;
}
.hero__stage .hero__photo,
.hero__stage .hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__stage .hero__photo img {
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  background: var(--color-bg);
  padding: var(--space-8) var(--space-5);
}

.hero__overlay-inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
}

.hero__wordmark {
  margin: 0 auto var(--space-4);
  max-width: 560px;
}
.hero__tagline {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: var(--tracking-head);
  color: var(--color-text-strong);
  margin: 0 0 var(--space-6);
  text-transform: uppercase;
}
.hero__intro {
  max-width: var(--container-narrow);
  margin: 0 auto;
  font-size: var(--fs-lg);
}
.hero__intro p + p { margin-top: var(--space-5); }

.hero .quote {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}

.quote {
  max-width: var(--container-narrow);
  margin: var(--space-8) auto 0;
  padding: var(--space-5) var(--space-5) 0;
  border-top: 1px solid var(--color-rule);
  font-style: italic;
  font-size: var(--fs-lg);
  text-align: center;
}
.quote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-strong);
}

@media (max-width: 767px) {
  .hero__stage { height: 50vh; }
  .hero__overlay { padding: var(--space-7) var(--space-5); }
  .hero__tagline { font-size: var(--fs-lg); }
  .hero__intro { font-size: var(--fs-md); }
}

/* --- Cinematic stage: desktop + scroll-timeline support only ------------ */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1024px) {
    .hero {
      min-height: 150vh;
      view-timeline-name: --hero-stage;
      view-timeline-axis: block;
    }

    .hero__viewport {
      position: sticky;
      /* Pin the photo just below the header, not behind it, so the
         photo's top edge is the first visible line of the photo
         throughout the scroll — never cropped from the top. */
      top: var(--header-height);
      height: 100vh;
      overflow: hidden;
    }

    .hero__stage {
      position: absolute;
      inset: 0;
      height: 100%;
      /* Anchor the photo's top to the line just below the header.
         During sticky this is automatic; past sticky-end the
         counter-translate exactly mirrors the sticky's upward drift
         (slope 1) so the photo never moves. The animation range
         starts at sticky-end via `contain calc(100% - header-height)`
         (sticky ends `header-height` pixels before contain-end when
         sticky's top offset equals header-height) — viewport-agnostic.
         The news section (next sibling, z-index 1) rises over the
         photo from the bottom, so disappearance is bottom-up: top
         edge glued, bottom edge eaten by the news. */
      animation-name: hero-photo-anchor;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --hero-stage;
      animation-range: contain calc(100% - var(--header-height)) exit 100%;
    }

    /* News section (and anything after the hero) needs to paint over
       the sticky photo, since position:sticky + transform creates a
       stacking context that would otherwise hide it. */
    .hero + .section {
      position: relative;
      z-index: 1;
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-7);
      background: transparent;
      pointer-events: none;
      animation-name: hero-text-rise;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --hero-stage;
      /* End extends past the contain range by the news section's top padding,
         so the text finishes its exit at the same scroll moment the news
         emerges at the viewport bottom. */
      animation-range: contain 0% contain calc(100% + var(--space-9));
    }

    .hero__overlay-inner {
      position: relative;
      max-width: 720px;
      padding: var(--space-7) var(--space-6);
      color: var(--color-bg);
    }

    /* Local scrim — radial vignette behind the text only, not full-screen. */
    .hero__overlay-inner::before {
      content: '';
      position: absolute;
      inset: -25% -15%;
      background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.42) 45%,
        rgba(0, 0, 0, 0) 80%
      );
      z-index: -1;
      pointer-events: none;
    }

    /* Light-on-photo overrides for overlay content */
    .hero__overlay .hero__wordmark img { filter: invert(1) brightness(1.15); }
    .hero__overlay .hero__tagline,
    .hero__overlay .hero__intro p,
    .hero__overlay .quote,
    .hero__overlay .quote cite {
      color: var(--color-bg);
    }
    .hero__overlay .quote {
      border-top-color: rgba(252, 252, 252, 0.35);
    }
  }
}

@keyframes hero-text-rise {
    0% { transform: translateY(100%);  opacity: 0; }
   50% { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes hero-photo-anchor {
    0% { transform: translateY(0); }
  100% { transform: translateY(calc(100vh + var(--header-height))); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__overlay,
  .hero__stage {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   News card
   -------------------------------------------------------------------------- */
.news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}
.news__date {
  display: block;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.news__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-5);
}
.news__cover {
  display: block;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.news__cover:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.22);
}

@media (max-width: 768px) {
  .news {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .news__media { order: -1; }
}

/* --------------------------------------------------------------------------
   Page main (stub + interior)
   -------------------------------------------------------------------------- */
.page {
  padding: var(--space-9) 0;
}
.page__title {
  text-align: center;
  margin-bottom: var(--space-5);
}
.page__lede {
  max-width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-lg);
}

@media (max-width: 768px) {
  .page { padding: var(--space-7) 0; }
}

/* --------------------------------------------------------------------------
   Musings — index listings and essay sub-pages
   -------------------------------------------------------------------------- */
.essay-listing {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--color-rule);
}
.essay-listing:last-child { border-bottom: 0; }

.essay-listing__date,
.essay__dateline {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text);
  opacity: 0.75;
}

.essay-listing__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
}
.essay-listing__title a { color: var(--color-text-strong); }
.essay-listing__title a:hover,
.essay-listing__title a:focus-visible { color: var(--color-accent); }

.essay-listing__subtitle {
  font-size: var(--fs-lg);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.essay-listing__quote,
.essay__quote {
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-style: italic;
  color: var(--color-text-strong);
}

.essay-listing__cta {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.essay { padding: var(--space-6) 0 var(--space-8); }
.essay__header { margin-bottom: var(--space-6); }
.essay__title { margin-bottom: var(--space-3); }
.essay__subtitle {
  font-size: var(--fs-xl);
  font-style: italic;
  margin-bottom: var(--space-5);
}

.essay-back {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin: var(--space-5) 0;
}

/* --------------------------------------------------------------------------
   parallax-layout — differential-speed two-column parallax
   Markup contract: <parallax-layout> with interleaved children (text blocks
   and <picture>s as direct siblings, in mobile reading order). On desktop
   the web component sorts children into two virtual columns and translates
   the photo column faster than the text column on scroll. Below 1024px the
   component no-ops and the static interleaved single-column flow takes over. */
.parallax-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.parallax-layout > picture { display: block; }
.parallax-layout > picture img {
  width: 100%;
  height: auto;
}
.parallax-text > :first-child { margin-top: 0; }
.parallax-text > :last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .parallax-layout--active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
  }

  .parallax-layout__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Both columns share row 1. Without this, sparse auto-placement
       drops the second column (whose explicit grid-column points back
       to col 1) into row 2, doubling the layout height and breaking
       the parallax math. */
    grid-row: 1;
  }

  .parallax-layout__col--text {
    gap: var(--space-6);
    grid-column: 2;
    padding-top: var(--space-6);
  }
  .parallax-layout__col--text > :first-child { margin-top: 0; }

  /* Photo column is a fixed-height clipping window matching the text
     column. The inner flex stack of pictures translates inside it. */
  .parallax-layout__col--photos {
    grid-column: 1;
    overflow: hidden;
    position: relative;
  }
  .parallax-layout__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    will-change: transform;
  }
  .parallax-layout__inner > picture { display: block; }
}

/* About page — uses parallax-layout */
.about {
  padding: var(--space-7) 0 var(--space-9);
}
.about__title { text-align: left; }

@media (min-width: 1024px) {
  .about {
    padding: var(--space-8) 0 var(--space-9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layout__inner {
    transform: none !important;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   Album pages — singles articles
   -------------------------------------------------------------------------- */
.single { margin-top: var(--space-8); }
.single:first-of-type { margin-top: var(--space-7); }

/* Magazine variant: alternating photo / text columns at desktop widths.
   Markup contract per single:
     <article class="single single--magazine">
       <div class="single__media">…cover or placeholder…</div>
       <div class="single__text">…h3 + bandcamp link + prose…</div>
     </article>
   Default stack puts media above text (mobile-first); at >=1024px the grid
   activates and odd-indexed singles flip media to the right column. */
.single--magazine {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-9);
}
.single--magazine:first-of-type { margin-top: var(--space-7); }

.single__media {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.single__text > :first-child { margin-top: 0; }

.single-placeholder {
  aspect-ratio: 1 / 1;
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-snug);
}
.single-placeholder__caption { display: block; }

@media (min-width: 1024px) {
  .single--magazine {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--space-8);
    margin-top: var(--space-10);
  }
  .single--magazine:first-of-type { margin-top: var(--space-8); }
  .single--magazine:nth-of-type(odd) .single__media { order: 2; }
  .single__media { max-width: none; }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact__photo {
  margin: var(--space-7) auto 0;
  max-width: 520px;
  text-align: center;
}
.contact__photo img {
  width: 100%;
  height: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.contact__credit {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.75;
}

.contact-form {
  margin-top: var(--space-8);
}
.contact-form h2 {
  font-size: var(--fs-2xl);
  text-align: center;
  margin-bottom: var(--space-4);
}
.contact-form__hint {
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.75;
  margin-bottom: var(--space-6);
}

.form {
  display: grid;
  gap: var(--space-5);
  max-width: 600px;
  margin: 0 auto;
}
.form__group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.form__legend {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-strong);
  margin-bottom: var(--space-3);
  padding: 0;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form__field {
  display: flex;
  flex-direction: column;
}
.form__field label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-strong);
  margin-bottom: var(--space-2);
}
.form__required {
  color: var(--color-accent);
}
.form input[type='text'],
.form input[type='email'],
.form textarea {
  font: inherit;
  color: var(--color-text-strong);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form input[type='text']:focus,
.form input[type='email']:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(168, 141, 46, 0.18);
}
.form textarea {
  resize: vertical;
  min-height: 8rem;
}

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: var(--space-3) var(--space-6);
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
  justify-self: center;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

@media (max-width: 540px) {
  .form__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-text-strong);
  color: var(--color-bg);
  padding: var(--space-8) 0 var(--space-6);
  margin-top: var(--space-9);
}
.site-footer a { color: var(--color-bg); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-accent); }

.social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
}
.social-row a {
  display: block;
  width: 44px;
  height: 44px;
  transition: transform 160ms ease, opacity 160ms ease;
  opacity: 0.85;
}
.social-row a:hover, .social-row a:focus-visible {
  transform: translateY(-2px);
  opacity: 1;
}
.social-row img { width: 100%; height: 100%; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.site-footer__legal {
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Lyrics
   -------------------------------------------------------------------------- */
.lyric-back {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-6);
}

.lyric-album-header {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-rule);
}
.lyric-album-header__year {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin: 0;
}

.lyric-album-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-9);
  display: grid;
  gap: var(--space-4);
}
.lyric-album-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-rule);
  color: var(--color-text-strong);
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}
.lyric-album-link:hover,
.lyric-album-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}
.lyric-album-link__title {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: var(--tracking-head);
}
.lyric-album-link__year {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
}
.lyric-album-link__cta {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.lyric-other__heading {
  font-size: var(--fs-2xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-rule);
}

.lyric {
  margin-bottom: var(--space-7);
}
.lyric__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
}
.lyric__source {
  font-size: var(--fs-sm);
  font-style: italic;
  margin: 0 0 var(--space-1);
  opacity: 0.8;
}
.lyric__credit {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  opacity: 0.7;
  margin-bottom: var(--space-4);
}
.lyric__body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  white-space: pre-wrap;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Music page — discography + video grid
   -------------------------------------------------------------------------- */
.section__title {
  text-align: center;
  margin-bottom: var(--space-7);
}

.discography {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

.album {
  display: grid;
  gap: var(--space-3);
}
.album__year {
  margin: 0;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  font-weight: 600;
}
.album__title {
  font-size: var(--fs-2xl);
  margin: 0;
}
.album__title a { color: var(--color-text-strong); }
.album__title a:hover,
.album__title a:focus-visible {
  color: var(--color-accent);
  text-decoration: none;
}
.album__format {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  opacity: 0.75;
}
.album__embed iframe {
  display: block;
  width: 100%;
}
.album__fallback {
  margin: 0;
  font-size: var(--fs-sm);
  opacity: 0.75;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .video-grid { grid-template-columns: 1fr; }
}

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