/* ==========================================================================
   Miguel Moreno — "Cinematic noir"
   Single stylesheet. Mobile first. Breakpoints: 640px / 1024px.
   ========================================================================== */

:root {
  /* Colour */
  --bg:            #0b1319;
  --surface:       #101c23;
  --border:        #16232b;
  --border-strong: #1c2d36;
  --text:          #dfe7ea;
  --text-2:        #b9c9ce;
  --muted:         #6f8890;
  --accent:        #2a7b8c;
  --accent-light:  #7fc4d0;
  --outline:       #5a7b84;
  --credits-name:  #9fb3b9;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans:  "Nunito Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Metrics */
  --wrap: 1160px;
  --gutter: 20px;
  --header-h: 68px;
  --player-h: 68px;
  --radius: 4px;
  --pill: 999px;

  /* Vertical rhythm between sections. One value, set per breakpoint just
     below, so the gap between any two sections is always twice this. */
  --section-pad: 44px;
}

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

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

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the fixed header */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  /* room for the fixed player bar */
  padding-bottom: var(--player-h);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------- type --- */

.h1, .h2, .h3 { font-family: var(--serif); line-height: 1.1; }

.h1 {
  font-size: clamp(2.6rem, 9vw, 4.5rem);   /* → 72px */
  font-weight: 400;
  letter-spacing: -0.01em;
}

.h2 {
  font-size: clamp(2rem, 6vw, 3rem);       /* → 48px */
  font-weight: 500;
}

.h3 {
  font-size: clamp(1.35rem, 3.5vw, 1.6rem);
  font-weight: 500;
}

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0 0 14px;
}

.lead {
  font-size: 1.0625rem;
  color: var(--text-2);
}

.body-copy { color: var(--text-2); max-width: 68ch; }
.body-copy strong { color: var(--text); font-weight: 600; }

@media (min-width: 640px) {
  :root { --section-pad: 56px; }
  body { font-size: 17px; }
  .lead { font-size: 1.125rem; }
}

@media (min-width: 1024px) {
  :root { --section-pad: 72px; }
  body { font-size: 18px; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn--solid { background: var(--accent); color: #f2f8f9; }
.btn--solid:hover { background: #34909f; }

.btn--ghost { border-color: var(--outline); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent-light); color: var(--accent-light); }

.btn--small { padding: 10px 20px; font-size: 0.6875rem; }

.btn .icon { flex: 0 0 auto; }

/* -------------------------------------------------------------- header -- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}

.site-header.is-stuck {
  background: rgba(11, 19, 25, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border-strong);
}

.site-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  white-space: nowrap;
}
.logo:hover { color: var(--accent-light); }

.nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color .2s ease;
}
.nav__link:hover,
.nav__link[aria-current="true"] { color: var(--accent-light); }

/* burger */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-right: -8px;
  color: var(--text);
}

.nav-toggle__bars { display: block; width: 22px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: rgba(11, 19, 25, .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-strong);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
  }
  .nav__link {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
  }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav { display: block !important; }
}

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

.hero {
  position: relative;
  /* Full screen, but capped: past ~760px the extra height is dead space
     under the content rather than a taller image. */
  min-height: min(100svh, 760px);
  min-height: min(100vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
}

/* left wash + bottom fade into the page background */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,19,25,.92) 0%, rgba(11,19,25,.72) 38%, rgba(11,19,25,.15) 100%),
    linear-gradient(180deg, rgba(11,19,25,.55) 0%, rgba(11,19,25,0) 30%, rgba(11,19,25,.35) 62%, #0b1319 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--header-h) + 80px) var(--gutter) 40px;
}

.hero__content { max-width: 40ch; }

.hero__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 3.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--text-2);
  margin: 22px 0 34px;
  max-width: 34ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 640px) {
  .hero__inner { padding-bottom: 56px; }
}

/* ------------------------------------------------------------ sections -- */

.section {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--border);
}

.section--flush { border-top: 0; }

.section__head { margin-bottom: 36px; }
.section__head .h2 { margin-bottom: 0; }


/* Fade-in on scroll — the only motion in the design. Gated on html.js, so
   without scripting (or if a script throws before the observer is attached)
   the content is simply there. */
.reveal { opacity: 1; }

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------- credits band --- */

.credits {
  margin: 40px 0;
  padding: 26px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.credits__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

/* inside the band the gap does the spacing, and the label holds the left */
.credits > .credits__label { margin: 0; }

@media (min-width: 640px) {
  .credits { flex-direction: row; align-items: center; gap: 26px; }
  .credits > .credits__label { flex: 0 0 auto; }
}

/* --- infinite marquee ---------------------------------------------------
   The track holds the same group of names twice, so translating it by -50%
   lands exactly on the start of the copy: the loop has no seam.            */

.marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: mm-marquee 40s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
}

.credits__item {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--credits-name);
  white-space: nowrap;
}

.credits__sep {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--muted);
  padding: 0 14px;
}

@keyframes mm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* static, wrapped row — no motion, no mask, no duplicate */
  .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; }
  .marquee__group { flex-wrap: wrap; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* The band sits inside the hero between the quote and the buttons. It breaks
   out of the narrow text column so the edge mask has room to fade. Colours
   are unchanged — #9fb3b9 measures 7.4:1 against the darkest-composited part
   of the photo it sits on — except the hairlines, which need to be visible
   over a photograph rather than over flat --surface. */

.hero .credits {
  width: min(600px, calc(100vw - 2 * var(--gutter)));
  margin: 26px 0 32px;
  padding: 18px 0;
  border-color: rgba(223, 231, 234, .18);
}

@media (max-width: 639px) {
  .hero .credits { margin: 22px 0 26px; }
}

/* --------------------------------------------------------- track lists -- */

.tracklist {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.track {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background-color .2s ease;
}
.track:last-child { border-bottom: 0; }
.track:hover { background: #13222a; }
.track.is-playing { background: #13222a; }

.track__num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
  padding-right: 4px;
}
.track.is-playing .track__num { color: var(--accent-light); }

.track__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.track__play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text-2);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.track__play:hover { color: var(--accent-light); border-color: var(--accent-light); }
.track.is-playing .track__play { background: var(--accent); border-color: var(--accent); color: #f2f8f9; }

.track__play .icon-pause { display: none; }
.track.is-playing.is-paused .track__play .icon-play { display: block; }
.track.is-playing.is-paused .track__play .icon-pause { display: none; }
.track.is-playing:not(.is-paused) .track__play .icon-play { display: none; }
.track.is-playing:not(.is-paused) .track__play .icon-pause { display: block; }

.track__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  color: var(--text);
}
.track.is-playing .track__title { color: var(--accent-light); }

.track__time {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 639px) {
  /* let long titles wrap instead of being cut with an ellipsis */
  .track__title { white-space: normal; overflow: visible; line-height: 1.35; }
}

@media (min-width: 640px) {
  .track { padding: 14px 20px; grid-template-columns: 42px 1fr auto; }
  .track__title { font-size: 1rem; }
}

/* ------------------------------------------------------------ soundtrack */

.soundtrack__grid { display: grid; gap: 40px; }

@media (min-width: 1024px) {
  .soundtrack__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
}

.video-row {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .video-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ bio -- */

.bio__grid { display: grid; gap: 32px; }

@media (min-width: 1024px) {
  .bio__grid { grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; }
}

.bio__portrait {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.bio__portrait img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 1024px) {
  .bio__portrait { position: sticky; top: calc(var(--header-h) + 24px); }
  /* The portrait turns vertical here, so a 4:3 photo loses 44% of its width.
     Miguel sits in the left third of the frame: centring the crop cuts his
     head off entirely, and 30% is what brings him back with room to spare.
     Below this breakpoint the frame is 4:3, the photo fits exactly, and this
     has no effect. */
  .bio__portrait img { aspect-ratio: 3 / 4; object-position: 30% 50%; }
}

.collab {
  margin-top: 28px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- albums -- */

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) { .album-grid { gap: 24px; } }
@media (min-width: 1024px) { .album-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

.album-card { display: block; }

.album-card__art {
  display: block;
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.album-card__art img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.album-card__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,19,25,0) 45%, rgba(11,19,25,.55) 100%);
  pointer-events: none;
}

.album-card__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 12px;
  line-height: 1.25;
}

.album-card__meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

a.album-card:hover .album-card__title { color: var(--accent-light); }

/* release blocks on /listen/ */
.release { border-top: 1px solid var(--border); padding-top: 44px; margin-top: 44px; }
.release:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* Two columns, two rows:
     row 1   [ (empty) ] [ title + artist ]
     row 2   [  cover   ] [ tracklist     ]
   so the title sits over the tracklist box and shares its left edge, while
   the cover still starts level with the top of that box.
   On mobile the grid collapses to one column and DOM order takes over:
   title -> cover -> list. */

.release__head { margin-bottom: 0; }

.release__grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

/* nothing may add space above either column of row 2: the top of the cover
   and the top of the tracklist box have to line up exactly */
.release__grid > * { margin-top: 0; }

@media (min-width: 640px) {
  .release__grid {
    grid-template-columns: 240px 1fr;
    column-gap: 28px;
    row-gap: 18px;
  }
  .release__head  { grid-column: 2; grid-row: 1; }
  .release__aside { grid-column: 1; grid-row: 2; }
  .release__body  { grid-column: 2; grid-row: 2; }
}

@media (min-width: 1024px) {
  .release__grid { grid-template-columns: 320px 1fr; column-gap: 44px; }
}

.release__art {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.release__art img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.release__title { margin-bottom: 6px; }

.release__meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
}

.release__note { color: var(--text-2); margin: 16px 0 0; max-width: 60ch; font-size: .9375rem; }

/* -------------------------------------------------------------- projects */

.project-grid { display: grid; gap: 20px; }

@media (min-width: 640px) { .project-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease;
}
.project-card:hover { border-color: var(--accent); }

.project-card__art { display: block; position: relative; overflow: hidden; }
.project-card__art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.65) brightness(.85);
  transition: filter .35s ease;
}
.project-card:hover .project-card__art img { filter: saturate(.9) brightness(.95); }

.project-card__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,19,25,.1) 40%, rgba(11,19,25,.75) 100%);
}

.project-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.project-card__body .body-copy { flex: 1; }
.project-card__cta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------- slider -- */
/* A fade slideshow, the way the original site showed these frames: one photo
   at a time, cross-fading on a timer, with the arrows lying over the picture.
   The slides are stacked rather than laid out in a row, so the viewport never
   scrolls sideways and there is no horizontal scrollbar at any width. */

.slider { position: relative; }

.slider__viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Every slide fills the box; only the active one is opaque. The markup ships
   with the first already active, so a visitor without JS sees a frame rather
   than an empty rectangle. */
.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.slider__slide.is-active { opacity: 1; pointer-events: auto; }
.slider__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The nav lies over the picture and passes clicks through everywhere except
   the two buttons themselves. */
.slider__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.slider:hover .slider__nav,
.slider:focus-within .slider__nav { opacity: 1; }

/* Nothing hovers on a touch screen, so there the arrows simply stay out. */
@media (hover: none) {
  .slider__nav { opacity: 1; }
}

.slider__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(223, 231, 234, .35);
  border-radius: var(--pill);
  /* dark enough to read against a bright frame */
  background: rgba(11, 19, 25, .55);
  color: var(--text);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.slider__btn:hover {
  color: var(--accent-light);
  border-color: var(--accent-light);
  background: rgba(11, 19, 25, .8);
}

@media (prefers-reduced-motion: reduce) {
  /* the arrows still change the picture — it just changes at once */
  .slider__slide { transition: none; }
  .slider__nav { transition: none; }
}

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

.contact__grid { display: grid; gap: 36px; max-width: 640px; }

.form__row { margin-bottom: 18px; }

.form__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.form__input,
.form__textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color .2s ease;
}
.form__input:focus,
.form__textarea:focus { border-color: var(--accent-light); outline: none; }
.form__textarea { min-height: 160px; resize: vertical; }
.form__input::placeholder, .form__textarea::placeholder { color: #4d646c; }

/* Honeypots. Deliberately NOT display:none and NOT type=hidden — bots skip
   both. Pushed off-canvas instead, so a form filler still sees real inputs. */
.form__trap {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.form__status {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-ok { color: var(--accent-light); }
.form__status.is-error { color: #e08c8c; }

.contact__aside dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact__aside dd { margin: 0; color: var(--text-2); }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 48px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text-2);
  transition: color .2s ease, border-color .2s ease;
}
.social__link:hover { color: var(--accent-light); border-color: var(--accent-light); }

.site-footer__copy {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

@media (min-width: 640px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ------------------------------------------------------- global player -- */

.player {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  height: var(--player-h);
  background: rgba(11, 19, 25, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-strong);
}

.player__inner {
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.player__controls { display: flex; align-items: center; gap: 4px; }

.player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--pill);
  color: var(--text-2);
  transition: color .2s ease;
}
.player__btn:hover { color: var(--accent-light); }

.player__btn--play {
  width: 42px; height: 42px;
  background: var(--accent);
  color: #f2f8f9;
  margin: 0 4px;
}

/* Nothing is going to play: the bar says so in the artist slot, and the play
   button stops pretending it is a control. */
.player.is-unavailable .player__btn--play {
  opacity: .4;
  cursor: not-allowed;
}
.player.is-unavailable .player__artist {
  color: var(--accent-light);
}
.player__btn--play:hover { background: #34909f; color: #f2f8f9; }

.player__btn--play .icon-pause { display: none; }
.player.is-playing .player__btn--play .icon-play { display: none; }
.player.is-playing .player__btn--play .icon-pause { display: block; }

.player__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.player__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.player__title {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player__artist {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.player__artist::before { content: "— "; }

.player__scrub { display: flex; align-items: center; gap: 10px; }

.player__bar {
  flex: 1 1 auto;
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-width: 0;
}
.player__bar::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 3px;
  border-radius: var(--pill);
  background: var(--border-strong);
}
.player__fill {
  position: relative;
  height: 3px;
  width: 0;
  border-radius: var(--pill);
  background: var(--accent-light);
}

.player__time {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player__time--total { display: none; }

@media (min-width: 640px) {
  .player__time--total { display: inline; }
}

@media (max-width: 639px) {
  .player__meta { font-size: 0.6875rem; }
  .player__inner { gap: 10px; }
}

/* ------------------------------------------------- free download block -- */

.freeband {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px 24px;
  margin-bottom: 48px;
}
.freeband .h3 { margin-bottom: 10px; }

/* 432Hz block: the ZIP button rides on the title line, right-aligned. It
   wraps under the title when there is no room, which is what happens on a
   phone. */

.release__head--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
}
.release__head--split > div { min-width: 0; }

/* Per-track download, sitting between the title and the duration. It is an
   extra auto column, so the duration still ends at the same right edge as in
   every other album. */

.track__dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s ease;
}
.track__dl:hover { color: var(--accent-light); }
.track:hover .track__dl { color: var(--text-2); }
.track:hover .track__dl:hover { color: var(--accent-light); }

/* A row carrying a download needs a fourth column declared: an extra child
   would otherwise wrap onto a second row, since implicit tracks are rows.
   The duration stays in the last column, so it still ends at the same right
   edge as the durations in every other album. */
.track--dl { grid-template-columns: 34px 1fr auto auto; }

@media (min-width: 640px) {
  .track--dl { grid-template-columns: 42px 1fr auto auto; }
}

@media (max-width: 639px) {
  /* keep the arrow, drop the word — the rows are tight enough already */
  .track__dl span { display: none; }
}