/* Soundtracker — site styles
   Register: cinematic / dark. One accent: the red of a recording light. */

:root {
  --ink: #0b0c0b;
  --ink-2: #131513;
  --ink-3: #1c1f1c;
  --bone: #ece8df;
  --bone-dim: #a9a59c;
  --bone-faint: #6d6a63;
  --rule: rgba(236, 232, 223, 0.14);
  --rec: #ff3b1f;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --nav-h: 72px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: #fff; }
::selection { background: var(--rec); color: #fff; }
:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--bone); color: var(--ink); padding: 8px 12px; }

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

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

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0;
}
.display em { font-style: italic; color: var(--bone-dim); }

.h1 { font-size: clamp(52px, 9.5vw, 148px); }
.h2 { font-size: clamp(40px, 6vw, 88px); }
.h3 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 0 0 4px rgba(255, 59, 31, 0.16);
}

.lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; color: var(--bone); max-width: 36em; }
.muted { color: var(--bone-dim); }
.small { font-size: 14px; }

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

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid, .nav--solid {
  background: rgba(11, 12, 11, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--rule);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.32em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav__links a { font-size: 14px; text-decoration: none; color: var(--bone-dim); transition: color .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--bone); }

.nav__toggle { display: none; }

@media (max-width: 820px) {
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; color: var(--bone); font: 600 13px var(--sans);
    letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 0; cursor: pointer;
  }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 24px;
    display: none;
  }
  .nav.is-open { background: var(--ink); }
  .nav.is-open .nav__links { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a { display: block; padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--rule); }
  .nav__links .btn { margin-top: 18px; display: inline-flex; border-bottom: 1px solid var(--bone); }
}

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

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 14px/1 var(--sans);
  letter-spacing: 0.02em;
  padding: 13px 20px;
  border: 1px solid var(--bone);
  border-radius: 2px;
  text-decoration: none;
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--bone); color: var(--ink); }
.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--rec { background: var(--rec); border-color: var(--rec); color: #fff; }
.btn--rec:hover { background: #ff5a3f; border-color: #ff5a3f; color: #fff; }
.nav .btn { padding: 10px 16px; font-size: 13px; }
.nav__links .btn--solid, .nav__links .btn--solid[aria-current="page"] { color: var(--ink); }
.nav__links .btn--solid:hover { color: var(--ink); }

.link-arrow { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color .2s; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { border-color: var(--bone); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transform: scale(1.04);
  animation: settle 2.4s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,12,11,.55) 0%, rgba(11,12,11,0) 22%),
    linear-gradient(0deg, rgba(11,12,11,1) 0%, rgba(11,12,11,.72) 30%, rgba(11,12,11,0) 70%);
}
@keyframes settle { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__img { animation: none; transform: none; } }

.hero__body { padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(48px, 8vh, 96px); width: 100%; }
.hero__title { max-width: 11ch; }
.hero__foot {
  margin-top: clamp(28px, 4vh, 48px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
}
.hero__credit { font-size: 14px; color: var(--bone-dim); margin: 0; }
.hero__credit strong { color: var(--bone); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* page hero (interior pages) */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 62svh; display: flex; align-items: flex-end;
}
.page-hero .hero__img { animation: none; transform: none; }
.page-hero .hero__body { padding-bottom: clamp(40px, 6vh, 72px); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(11,12,11,1) 0%, rgba(11,12,11,.6) 40%, rgba(11,12,11,.25) 100%);
}
.page-head { padding-top: calc(var(--nav-h) + clamp(56px, 10vh, 120px)); padding-bottom: clamp(32px, 5vh, 56px); }

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

.listen {
  display: inline-flex; align-items: center; gap: 14px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--bone); font: 500 14px var(--sans); text-align: left;
}
.listen__dot {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--bone);
  display: grid; place-items: center;
  transition: background-color .2s, border-color .2s;
}
.listen__dot::before {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid var(--bone); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.listen[aria-pressed="true"] .listen__dot { border-color: var(--rec); background: var(--rec); }
.listen[aria-pressed="true"] .listen__dot::before {
  margin: 0; width: 10px; height: 12px; border: 0;
  border-left: 3px solid #fff; border-right: 3px solid #fff;
}
.listen:hover .listen__dot { border-color: #fff; }
.listen__label { display: block; }
.listen__meta { display: block; font-size: 12px; color: var(--bone-dim); letter-spacing: .04em; }

.meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-left: 4px; }
.meter i { width: 3px; height: 30%; background: var(--rec); opacity: 0; transition: opacity .3s; }
.listen[aria-pressed="true"] .meter i { opacity: 1; animation: lvl 1.1s ease-in-out infinite alternate; }
.meter i:nth-child(2) { animation-delay: -.3s !important; }
.meter i:nth-child(3) { animation-delay: -.7s !important; }
.meter i:nth-child(4) { animation-delay: -.5s !important; }
@keyframes lvl { from { height: 20%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .listen[aria-pressed="true"] .meter i { animation: none; height: 60%; } }

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

.section { padding: clamp(96px, 16vh, 200px) 0; }
.section--tight { padding: clamp(64px, 10vh, 120px) 0; }
.section--raised { background: var(--ink-2); }
.section--bone { background: var(--bone); color: var(--ink); }
.section--bone .muted, .section--bone .eyebrow { color: #5d5a53; }
.section--bone a:hover { color: #000; }
.rule-top { border-top: 1px solid var(--rule); }

/* statement: large text, lots of air */
.statement { max-width: 18ch; }
.statement-quote { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 68px); line-height: 1.08; margin: 0; max-width: 20ch; }
.cite { display: block; margin-top: 28px; font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.cite span { font-weight: 400; letter-spacing: .04em; text-transform: none; }

/* asymmetric split */
.split {
  display: grid; gap: clamp(40px, 6vw, 96px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--center { align-items: center; }
@media (max-width: 860px) { .split, .split--flip { grid-template-columns: 1fr; } }

.prose p { margin: 0 0 1.2em; max-width: 38em; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { font: 700 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); margin: 2.4em 0 .8em; }

/* full-bleed still */
.still { position: relative; margin: 0; }
.still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.still--tall img { aspect-ratio: 4 / 5; }
.still figcaption { margin-top: 12px; font-size: 13px; color: var(--bone-faint); }
.bleed { width: 100%; }
.bleed img { width: 100%; height: clamp(320px, 72vh, 820px); object-fit: cover; }

/* film strip: horizontal scroll of stills */
.strip {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) 16px; margin: 0;
  scrollbar-width: thin; scrollbar-color: var(--bone-faint) transparent;
}
.strip li { list-style: none; flex: 0 0 auto; scroll-snap-align: start; }
.strip img { height: clamp(220px, 40vh, 420px); width: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.strip img.portrait { aspect-ratio: 2 / 3; }
.strip figcaption { font-size: 13px; color: var(--bone-faint); margin-top: 10px; }

/* video */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video iframe, .video button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video button { padding: 0; cursor: pointer; background: #000; color: var(--bone); }
.video button img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .3s; }
.video button:hover img { opacity: .9; }
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px;
  font: 600 14px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.video__play::before {
  content: ""; width: 64px; height: 64px; border-radius: 50%;
  background: var(--rec) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23fff'/%3E%3C/svg%3E") center / 28px no-repeat;
}

/* definition list: specs, credits */
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.specs dt, .specs dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.specs dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); padding-right: 32px; padding-top: 17px; }
.section--bone .specs, .section--bone .specs dt, .section--bone .specs dd { border-color: rgba(11,12,11,.14); }
@media (max-width: 560px) {
  .specs { grid-template-columns: 1fr; }
  .specs dt { border-bottom: 0; padding-bottom: 0; }
}

.credits { columns: 2 280px; column-gap: clamp(32px, 5vw, 80px); margin: 0; }
.credits div { break-inside: avoid; padding: 0 0 22px; }
.credits dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 4px; }
.credits dd { margin: 0; }

/* laurels / festival rows */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows li {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px 24px;
  padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.rows .rows__name { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.rows .rows__name a { text-decoration: none; }
.rows .rows__name a:hover { text-decoration: underline; }
.rows .rows__where { color: var(--bone-dim); }
.rows .rows__when { color: var(--bone-dim); font-variant-numeric: tabular-nums; text-align: right; }
.rows .tag { display: inline-block; margin-left: 10px; vertical-align: middle; font: 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rec); }
@media (max-width: 700px) {
  .rows li { grid-template-columns: 1fr; }
  .rows .rows__when { text-align: left; }
}

/* press outlet list */
.outlets { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: clamp(32px, 5vw, 80px); }
.outlets li { break-inside: avoid; border-top: 1px solid var(--rule); padding: 14px 0 16px; }
.outlets a { text-decoration: none; font-weight: 600; }
.outlets a:hover { text-decoration: underline; }
.outlets span { display: block; font-size: 13px; color: var(--bone-dim); }

/* quote wall: stacked, not cards */
.quotes { list-style: none; margin: 0; padding: 0; }
.quotes li { padding: clamp(32px, 5vh, 56px) 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 16px 48px; align-items: end; }
.quotes blockquote { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; }
.quotes .cite { margin: 0; }
@media (max-width: 760px) { .quotes li { grid-template-columns: 1fr; } }

/* people */
.person { padding: clamp(64px, 10vh, 120px) 0; border-top: 1px solid var(--rule); }
.person:first-of-type { border-top: 0; }
.person__role { font: 700 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rec); margin: 0 0 14px; }
.person__links { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; }

/* store */
.buy { display: grid; gap: 22px; max-width: 520px; }
.field label, .field .label { display: block; font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 8px; }
.field select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font: 500 16px var(--sans); color: var(--bone);
  background: var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ece8df' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") right 16px center / 12px no-repeat;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 14px 44px 14px 16px;
}
.field select:focus { border-color: var(--bone); outline: none; }
.price-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.price-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.price-list b { font-variant-numeric: tabular-nums; font-weight: 600; }
.features { margin: 0; padding: 0; list-style: none; }
.features li { padding: 10px 0 10px 22px; position: relative; border-bottom: 1px solid var(--rule); }
.features li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 1px; background: var(--rec); }
.dvd { width: 100%; max-width: 560px; box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: rotate(-1.5deg); }

/* cta band */
.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }

/* footer */
.footer { border-top: 1px solid var(--rule); padding: 56px 0 40px; font-size: 14px; color: var(--bone-dim); }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--bone); }
.footer .wordmark { color: var(--bone); display: inline-block; margin-bottom: 10px; }
.footer__fine { margin-top: 40px; font-size: 12px; color: var(--bone-faint); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* utilities */
.mt-0 { margin-top: 0; } .mt-s { margin-top: 20px; } .mt-m { margin-top: 40px; } .mt-l { margin-top: 72px; }
.mb-m { margin-bottom: 40px; } .mb-l { margin-bottom: 72px; }
.stack > * + * { margin-top: 20px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }