/* =================================================================
   TOKENS
   ================================================================= */
:root {
  --ink:      #0b0e14;   /* base background under the hero */
  --paper:    #f2efe9;   /* primary text on dark */
  --brass:    #b08d57;   /* single accent — links, active states */
  --smoke:    #9a9488;   /* secondary / muted text */
  --hairline: rgba(242, 239, 233, 0.16);

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-utility: "Inter", "Helvetica Neue", Arial, sans-serif;

  --nav-height: 4.5rem;
}

@font-face {
  /* Optional local hosting: drop woff2 files in assets/fonts and
     point these at them if you'd rather not depend on Google Fonts.
     Left out by default — the @import below covers it. */
}

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&display=swap");

/* =================================================================
   RESET / BASE
   ================================================================= */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-utility);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; margin: 0; padding: 0; }

h1, h2 { margin: 0; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =================================================================
   BACKGROUND MEDIA (video/image, fixed behind everything)
   ================================================================= */
.bg-media {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--ink);
}

.bg-media__video,
.bg-media__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.bg-media__overlay {
  position: absolute;
  inset: 0;
  /* darkens the footage so header/hero text stays legible;
     tune the alpha values to taste */
  background: linear-gradient(
    180deg,
    rgba(11, 14, 20, 0.55) 0%,
    rgba(11, 14, 20, 0.35) 45%,
    rgba(11, 14, 20, 0.85) 100%
  );
}

/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

/* =================================================================
   AUDIO TOGGLE — a small "vinyl record" that spins while playing
   ================================================================= */
.audio-toggle {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(11, 14, 20, 0.4);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.audio-toggle:hover,
.audio-toggle:focus-visible {
  border-color: var(--brass);
}

.audio-toggle__disc {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--ink) 0 2px, var(--brass) 2px 3px, var(--ink) 3px 100%);
  animation: spin 3.5s linear infinite;
  animation-play-state: paused;
}

.audio-toggle[aria-pressed="true"] .audio-toggle__disc {
  animation-play-state: running;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =================================================================
   HOME — the statement paragraph
   Full-height, centered, the paragraph itself doubles as the nav:
   each work-type word is a link out to its own page.
   ================================================================= */
.home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.75rem;
}

.statement {
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.statement a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.statement a:hover,
.statement a:focus-visible {
  color: var(--brass);
  text-decoration-color: var(--brass);
}

/* =================================================================
   INTERIOR WORK PAGES (pages/*.html)
   No background video here — a plain, quiet reading page.
   ================================================================= */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  max-width: 34rem;
  margin: 0;
  padding: calc(var(--nav-height) + 3rem) 1.75rem 6rem 1.75rem;
}

/* On bigger screens, give the column more room — mainly so long
   project-list titles and embeds aren't wrapping/shrunk for no
   reason. .page__body p keeps its own 34rem cap below, so prose
   stays a comfortable reading width regardless. */
@media (min-width: 900px) {
  .page {
    max-width: 56rem;
  }
}

.page__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 1rem;
}

.page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 2.5rem;
}

.project-list {
  display: flex;
  flex-direction: column;
}

.project-list li {
  line-height: 2;
}

.project-list a {
  font-size: 1rem;
  transition: color 0.15s ease;
}

.project-list a:hover,
.project-list a:focus-visible {
  color: var(--brass);
}

.project__year {
  color: var(--smoke);
  font-family: var(--font-utility);
  font-size: 0.85rem;
}

.project__role {
  color: var(--smoke);
  font-family: var(--font-utility);
  font-size: 0.85rem;
}

/* Modifier for lists like live-shows' credits, where entries aren't
   links and the leading year (including ranges like "2019-2026")
   needs a fixed column width so the names after it line up, without
   the range ever wrapping onto a second line. */
.project__year--fixed {
  display: inline-block;
  width: 5.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Same idea for the name column on that same list, so the role after
   it lines up too. Sized to fit "Francesca Belmonte" (the longest
   name currently in the list) without wrapping. */
.project__artist {
  display: inline-block;
  width: 11rem;
  white-space: nowrap;
}

/* Individual project pages use prose instead of the list above */
.page__body p {
  font-size: 1rem;
  color: var(--paper);
  margin-bottom: 1.25rem;
  max-width: 34rem;
}

.page__body p:last-child { margin-bottom: 0; }

.page__body p a {
  color: var(--brass);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.page__body p a:hover,
.page__body p a:focus-visible {
  color: var(--paper);
  text-decoration-color: var(--brass);
}

/* Section label above each embed on a page with more than one
   (e.g. a multi-episode project) */
.page__body h2 {
  font-family: var(--font-utility);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 2.5rem 0 0;
}

.page__body h2:first-child { margin-top: 0; }

/* =================================================================
   EMBED — YouTube / Vimeo (16:9 video) or SoundCloud / Archive.org
   (fixed-height audio) players, dropped into .page__body
   ================================================================= */
.embed {
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin: 1.5rem 0;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(242, 239, 233, 0.04);
}

.embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.embed--video { aspect-ratio: 16 / 9; }

.embed--video iframe {
  position: absolute;
  inset: 0;
  height: 100%;
}

.embed--audio iframe { height: 166px; }

.embed--spotify iframe { height: 352px; }

.embed--soundcloud iframe { height: 300px; }

.embed--apple-podcasts iframe { height: 175px; }

/* =================================================================
   AUDIO PLAYER — waveform + spectrogram (wavesurfer.js)
   ================================================================= */
.audio-player {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 48rem;
  margin: 1.5rem 0;
}

.audio-player__toggle {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(11, 14, 20, 0.4);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-family: var(--font-utility);
}

.audio-player__toggle:hover,
.audio-player__toggle:focus-visible {
  border-color: var(--brass);
  color: var(--brass);
}

.audio-player__visuals {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.audio-player__waveform,
.audio-player__spectrogram {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(242, 239, 233, 0.04);
}

/* =================================================================
   SPECTASTIQ EMBED — wraps the <spectastiq-viewer> web component
   ================================================================= */
.spectastiq-embed {
  margin: 1.5rem 0;
  border-radius: 4px;
  overflow: hidden;
}

/* spectastiq's own fullscreen toggle grows the player's height via
   JS, but .page's 34rem column cap and its surrounding chrome
   (header, title, prose, footer, padding) are untouched by that —
   without this, fullscreen only expands vertically and the player
   sits below the fold. While fullscreen is active: widen the column,
   strip its padding, stretch .page__body across it, and hide
   everything except the embed itself so the player sits flush at
   the top of the screen with nothing to scroll past.

   `html.spectastiq-pseudo-fullscreen` gets the same treatment — on
   iPhone (Safari or Chrome), the real Fullscreen API only exists on
   iPad, so js/vendor/spectastiq/spectastiq.js falls back to toggling
   this class by hand instead of relying on :fullscreen. */
:fullscreen .page,
:-webkit-full-screen .page,
html.spectastiq-pseudo-fullscreen .page {
  max-width: none;
  width: 100%;
  min-height: 0;
  padding: 0;
}

:fullscreen .page__body,
:-webkit-full-screen .page__body,
html.spectastiq-pseudo-fullscreen .page__body {
  align-self: stretch;
  width: 100%;
}

:fullscreen .site-header,
:-webkit-full-screen .site-header,
html.spectastiq-pseudo-fullscreen .site-header,
:fullscreen .site-footer,
:-webkit-full-screen .site-footer,
html.spectastiq-pseudo-fullscreen .site-footer,
:fullscreen .page__eyebrow,
:-webkit-full-screen .page__eyebrow,
html.spectastiq-pseudo-fullscreen .page__eyebrow,
:fullscreen .page__title,
:-webkit-full-screen .page__title,
html.spectastiq-pseudo-fullscreen .page__title,
:fullscreen .page__body > p,
:-webkit-full-screen .page__body > p,
html.spectastiq-pseudo-fullscreen .page__body > p,
:fullscreen .back-link,
:-webkit-full-screen .back-link,
html.spectastiq-pseudo-fullscreen .back-link {
  display: none;
}

:fullscreen .spectastiq-embed,
:-webkit-full-screen .spectastiq-embed,
html.spectastiq-pseudo-fullscreen .spectastiq-embed {
  margin: 0;
}

/* Pseudo-fullscreen can't hide Safari's own address/tab bar (only the
   real Fullscreen API or an installed Home Screen web app can), so
   anchor to the top and let the player's own JS-driven height (see
   the patch above) fill whatever viewport space is actually left. */
html.spectastiq-pseudo-fullscreen {
  overflow: hidden;
}

html.spectastiq-pseudo-fullscreen body {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* =================================================================
   MEDIA LINK — out to YouTube / Vimeo / SoundCloud etc.
   ================================================================= */
.media-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-utility);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.media-link:hover,
.media-link:focus-visible {
  border-color: var(--brass);
  color: var(--brass);
}

.media-link__arrow {
  color: var(--smoke);
  transition: color 0.15s ease;
}

.media-link:hover .media-link__arrow,
.media-link:focus-visible .media-link__arrow {
  color: var(--brass);
}

.back-link {
  display: inline-block;
  margin-top: 3rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--smoke);
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--brass);
}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--ink);
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  font-size: 0.75rem;
  color: var(--smoke);
  letter-spacing: 0.04em;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 640px) {
  .page { padding: calc(var(--nav-height) + 2rem) 1.25rem 4rem; }
}