/* Valley of Berg — music.valleyberg.com */

:root {
  --bg: #111009;
  --band: #16150d;     /* one step up from --bg: the signup band */
  --ink: #efe9dd;
  --warm: #c9a86b;     /* the design's gold: kickers, accents, statuses */
  --warm-hi: #e0c98f;  /* the same gold lifted, for hover */
  --muted: #b3ab99;
  --dim: #8f887a;
  --faint: #6d675a;
  --copy: #c4bcab;
  --line: rgba(239, 233, 221, 0.12);
  --line-strong: rgba(239, 233, 221, 0.35);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Archivo', Arial, sans-serif;
  --pad-x: 48px;
  --content: 1280px;   /* page never spreads wider than this */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--warm-hi); }
::selection { background: var(--warm); color: var(--bg); }

img { max-width: 100%; }

section { scroll-margin-top: 84px; }   /* sticky nav height */

/* Nothing spreads past --content, so the page stays composed on a wide
   monitor instead of drifting to the far left and right edges. The
   signup band is the exception: its background runs full width and the
   padding does the centring — see .signup. */
.release,
.mixes-section,
.superman-inner,
.catalogue,
.poetry,
.about,
.footer,
.nav-inner {
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
}

/* Language toggle: .pl hidden in EN mode, .en hidden in PL mode */
html[data-lang="en"] .pl { display: none !important; }
html[data-lang="pl"] .en { display: none !important; }

/* Release state: pre-save copy before release day, out-now copy after.
   Driven by RELEASE.at in js/main.js — see the note there. */
html[data-release="pre"] .out-only { display: none !important; }
html[data-release="out"] .pre-only { display: none !important; }

/* Per-release switch. The pair above is the EP's — one state for the
   whole page. This one is scoped to a single card carrying its own
   data-rel-at, so several singles can sit on different sides of their
   release dates at the same time. js/main.js sets data-rel. */
[data-rel="pre"] .rel-out { display: none !important; }
[data-rel="out"] .rel-pre { display: none !important; }

/* Grid items must be allowed to shrink below their content's min width */
.release-head,
.superman-text,
.about-text,
.signup-text, .signup-box { min-width: 0; }

/* Visible only to screen readers — the form's label */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared ---------- */

.kicker {
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--dim);
  margin-bottom: 24px;
}

.tagline {
  margin-top: 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--dim);
}

.body-copy {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--copy);
  margin: 0;
}

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

.btn {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 13px 26px;
}
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--warm); color: var(--bg); }
.btn-outline { border: 1px solid var(--line-strong); }
.btn-outline:hover { border-color: var(--warm); color: var(--warm); }

.serif-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

h1, h2, h3 { margin: 0; font-weight: 500; }

/* ---------- Release block (first section under the nav) ---------- */

.release {
  display: grid;
  grid-template-columns: 420px minmax(0, 560px);
  grid-template-areas:
    "art head"
    "art action";
  justify-content: center;   /* keeps the pair as a composed block */
  align-content: center;
  column-gap: 56px;
  row-gap: 28px;
  padding: 60px var(--pad-x) 60px;
  border-bottom: 1px solid var(--line);
}

.release-art { grid-area: art; align-self: center; }
.release-art img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  /* The cover is the one object on the page that should feel like it is
     sitting above the surface rather than printed on it. */
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.release-head { grid-area: head; align-self: end; }
.release-action { grid-area: action; align-self: start; }

/* Flag line: date on the left, live countdown chip beside it */
.release-flag {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.release-flag .kicker { margin-bottom: 0; color: var(--warm); }

.countdown {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--dim);
  border: 1px solid rgba(239, 233, 221, 0.22);
  padding: 4px 9px;
  white-space: nowrap;
}

.release-title {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.04;
  text-wrap: pretty;
}
.release-title em { font-weight: 600; color: var(--warm); }

.release-sub {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--copy);
  margin: 20px 0 0;
}

.release-cta {
  padding: 16px 34px;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.release-alt { padding: 16px 26px; font-size: 13px; letter-spacing: 0.1em; }

.release-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint);
}

/* ---------- The six mixes ---------- */

.mixes-section {
  padding: 52px var(--pad-x) 56px;
  border-bottom: 1px solid var(--line);
}

.mixes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.mixes-head .kicker { margin-bottom: 0; }

.mixes-line {
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--muted);
}

/* Two columns via multicol, not grid: the numbers then run 01-02-03
   down the first column and 04-05-06 down the second, the way a
   tracklist reads. Grid would deal them left-to-right. */
.mixes {
  columns: 2;
  column-gap: clamp(32px, 5vw, 72px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mix;
  border-top: 1px solid var(--line);
}

.mixes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;     /* no row split across the column break */
}

.mixes li::before {
  counter-increment: mix;
  content: counter(mix, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 13px;
  color: var(--faint);
}

.mix-name { font-family: var(--serif); font-size: 19px; }
.mix-len { font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }

.mix-tag {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--bg);
  background: var(--warm);
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* ---------- Nav ---------- */

.nav {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(17, 16, 9, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
}

/* Bar spans the window; its contents carry the page padding so the
   brand lines up with the section content below it, not 48px left of it */
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.brand { flex: none; }
.nav-links { margin-left: auto; }
.lang-toggle, .nav-cta { flex: none; }

.nav-short { display: none; }   /* phone-length label, see the 960px block */

.brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lang-toggle {
  display: flex;
  gap: 6px;
  cursor: pointer;
  color: var(--faint);
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
}
#lang-en, #lang-pl { color: var(--faint); }
html[data-lang="en"] #lang-en { color: var(--ink); }
html[data-lang="pl"] #lang-pl { color: var(--ink); }

.nav-cta {
  background: var(--ink);
  color: var(--bg);
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
/* Explicit, or the global a:hover would put warm text on a warm ground */
.nav-cta:hover { background: var(--warm); color: var(--bg); }

/* ---------- Superman Project ---------- */

/* Full-width band, so the section is not boxed in by --content: the
   inner blocks below carry the page width instead. */
.superman { border-bottom: 1px solid var(--line); }

.superman-band {
  position: relative;
  height: clamp(280px, 34vw, 420px);
  overflow: hidden;
}
.superman-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.superman-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17, 16, 9, 0.55) 0%,
    rgba(17, 16, 9, 0.18) 40%,
    var(--bg) 100%);
}

/* left/right 0 plus auto side margins centre the quote on the same
   column as the text below it, over a full-width image. The line break
   is authored in the markup, so no measure is set here. */
.superman-quote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(28px, 4vw, 48px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
}

.superman-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: clamp(36px, 4.5vw, 64px) var(--pad-x) clamp(48px, 6vw, 80px);
}

.superman-text .kicker { color: var(--warm); }

.superman h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
}

.superman .body-copy { margin-top: 20px; max-width: 52ch; }

/* The one third-party embed on the page */
.embed { margin-top: 30px; max-width: 520px; }
.embed-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--faint);
  margin-bottom: 12px;
}
.embed iframe { display: block; border: 0; border-radius: 12px; }

.release-map {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.stage {
  display: grid;
  grid-template-columns: auto 76px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0 15px 12px;
  border-bottom: 1px solid var(--line);
}
.stage.current { box-shadow: inset 2px 0 0 var(--warm); }

.stage-num { font-family: var(--serif); font-size: 16px; color: var(--faint); }
.stage.current .stage-num { color: var(--ink); }

.stage-kind { font-size: 10px; letter-spacing: 0.16em; color: var(--dim); }
.stage-name { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.stage-detail {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-left: 8px;
}

.stage-status {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--faint);
  text-align: right;
}
.stage-status.done { color: var(--warm); }

/* ---------- Out now ---------- */

.catalogue {
  padding: clamp(44px, 5vw, 72px) var(--pad-x) clamp(48px, 6vw, 84px);
  border-bottom: 1px solid var(--line);
}
.catalogue > .kicker { margin-bottom: 26px; }

/* The two release cards and the next-single panel share one row and the
   full page width. auto-FIT, so adding a fourth release rebalances the
   row instead of leaving a gap. */
/* Cells stretch (no align-items): that is what makes the next-single
   box as tall as the cards, so its bottom-aligned content lines up
   with their titles. */
.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

.release-card { display: block; }
/* Whole card dims as one object; color:inherit cancels the global link
   hover, which would otherwise tint the title gold as well. */
.release-card:hover { opacity: 0.88; color: inherit; }

.release-card img {
  display: block;
  width: 100%;
  height: auto;      /* must stay: a width/height attribute on the <img>
                        otherwise beats aspect-ratio and stretches the art */
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
}

.release-card h3,
.next-card h3 {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.25;
  margin-top: 14px;
  text-wrap: pretty;
}
.card-variant { color: var(--dim); }

.card-meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-top: 7px;
}

.card-status {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--warm);
  margin-top: 9px;
}

/* Shares the row with the cards but is not a link. Bottom-aligned, so
   its title sits on roughly the same line as the card titles beside it
   instead of floating at the top of an empty box. */
.next-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  padding: 24px;
}
.next-card .kicker {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--warm);
  margin-bottom: 14px;
}
.next-card img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.next-card h3 { font-size: 26px; margin-top: 0; }
.next-note {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 14px 0 0;
}

/* In the works — the quiet list, two columns */

.works { margin-top: clamp(40px, 5vw, 64px); }
.works .kicker { margin-bottom: 8px; }

/* 460px, not 340: at 340 a wide window fits three columns and the
   longer titles ("Kiedy jesteś tak daleko" beside COUNTRY BLUES ROCK)
   wrap to two lines, leaving the list ragged. Two roomy columns of
   four rows each stay on one line in both languages. */
.track-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  column-gap: clamp(32px, 5vw, 72px);
}

.track-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  /* Fainter than every other rule on the page: these are the tracks
     with no release behind them yet. */
  border-bottom: 1px solid rgba(239, 233, 221, 0.08);
}

.track-name { font-family: var(--serif); font-size: 19px; color: var(--copy); flex: 1; }
.track-genre { font-size: 10px; letter-spacing: 0.12em; color: var(--faint); text-align: right; }
.track-time { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

.cat-note {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint);
  margin: 22px 0 0;
  max-width: 60ch;
}

/* ---------- Poetry ---------- */

.poetry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding: clamp(44px, 5vw, 72px) var(--pad-x);
  border-bottom: 1px solid var(--line);
}

.poetry h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  text-wrap: pretty;
}
.poetry h2 em { font-weight: 600; color: var(--warm); }
.poetry .body-copy { max-width: 48ch; }

.link-rule {
  display: inline-block;
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--warm);
  border-bottom: 1px solid rgba(201, 168, 107, 0.4);
  padding-bottom: 5px;
}
.link-rule:hover { color: var(--warm-hi); border-bottom-color: var(--warm-hi); }

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(44px, 5vw, 72px) var(--pad-x) clamp(48px, 6vw, 84px);
  border-bottom: 1px solid var(--line);
}

/* Full colour, as designed — no filter. 4:5 out of the square original;
   the portrait carries no lettering, so cropping the sides is safe. */
.portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
}

.about .kicker { color: var(--warm); }

.about h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
}

.about .body-copy { margin-top: 22px; max-width: 52ch; }
.about .body-copy + .body-copy { margin-top: 18px; }
.about .tagline { margin-top: 26px; font-size: 21px; }

/* ---------- Email signup ---------- */

/* The band colour runs the full width of the window while the content
   still lines up with every other section. The side padding is the
   leftover gutter PLUS --pad-x — the gutter alone would put this text
   48px left of every other section — and max() holds it at --pad-x once
   the window is narrower than --content, where the gutter goes negative. */
.signup {
  background: var(--band);
  border-bottom: 1px solid var(--line);
  padding:
    clamp(40px, 5vw, 64px)
    max(var(--pad-x), calc((100% - var(--content)) / 2 + var(--pad-x)));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.signup-text h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
}
.signup-text p {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 44ch;
}

.signup-box form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}

#signup-email {
  flex: 1 1 220px;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 2px;
  outline: none;
}
#signup-email::placeholder { color: var(--faint); }
#signup-email:focus { border-bottom-color: var(--warm); }
/* Keyboard users still get a ring; the border alone is a mouse-user cue */
#signup-email:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 4px; }

.signup-box button {
  background: var(--ink);
  color: var(--bg);
  border: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 14px 26px;
  cursor: pointer;
}
.signup-box button:hover { background: var(--warm); }
.signup-box button[disabled] { cursor: default; opacity: 0.65; }

.signup-consent {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
  margin: 12px 0 0;
}

/* data-state on .signup-box is the state machine; every label for every
   state is already in the markup, so nothing here needs a translation. */
.state-sending, .signup-msg { display: none; }

[data-state="sending"] .state-idle { display: none; }
[data-state="sending"] .state-sending { display: inline; }

[data-state="done"] form,
[data-state="done"] .signup-consent,
[data-state="error"] .signup-consent { display: none; }

[data-state="done"] .signup-done,
[data-state="error"] .signup-fail { display: block; }

.signup-done {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--warm);
  margin: 10px 0;
}
.signup-fail {
  font-size: 13px;
  line-height: 1.6;
  color: var(--warm);
  margin: 12px 0 0;
}
.signup-fail a { border-bottom: 1px solid var(--line-strong); }

/* ---------- Footer ---------- */

.footer {
  padding: 44px var(--pad-x) 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.brand-small {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
}

.social-links {
  display: flex;
  gap: 26px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  flex-wrap: wrap;
}

.copyright { font-size: 11px; color: var(--faint); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  :root { --pad-x: 24px; }

  /* Adding the nav CTA costs the bar about 90px, so the long SUPERMAN
     PROJECT label and the wide gaps go a breakpoint earlier than they
     used to — the Polish labels are the long ones to fit. */
  .nav-inner { gap: 18px; }
  .nav-links { gap: 18px; font-size: 12px; }
  .nav-long { display: none; }
  .nav-short { display: inline; }

  /* Release block: centred stack, sized so the cover, the headline and
     the button all clear the fold on a phone *below the nav bar*. The
     cover tracks viewport HEIGHT as well as width, so short screens
     shrink the art instead of pushing the button out of sight. */
  .release {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "art" "head" "action";
    justify-items: center;
    text-align: center;
    row-gap: 16px;
    padding: 18px var(--pad-x) 40px;
  }

  .release-art { width: min(46vw, 27vh); }
  .release-flag { justify-content: center; margin-bottom: 10px; }
  .release-sub {
    margin-top: 12px;
    max-width: 32em;
    font-size: 15px;
    line-height: 1.55;
  }

  .release-action { width: 100%; max-width: 420px; }
  .release .cta-row { flex-direction: column; }
  .release-cta, .release-alt { display: block; text-align: center; }

  .mixes-section { padding-top: 40px; padding-bottom: 44px; }

  .superman-inner { padding-top: 32px; }
}

/* The nav CTA is the first thing to go. In Polish the brand, the four
   links, the language switch and a button need 724px of single row —
   four more than the two-row layout below starts at — and on a phone
   the release CTA sits right under the bar anyway, so this one is only
   costing the links their space. */
@media (max-width: 768px) {
  .nav-cta { display: none; }
}

@media (max-width: 720px) {
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .brand { font-size: 20px; }
  section { scroll-margin-top: 100px; }   /* the bar is two rows here */

  /* Two deliberate rows: brand + language on top, all four links on
     their own full-width row below. Everything stays visible and
     nothing scrolls sideways — the links get the whole width instead of
     the ~100px left over beside the brand, which is what used to push
     them onto three and four lines. Fixed height, both languages. */
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand lang"
      "links links";
    align-items: center;
    row-gap: 9px;
    column-gap: 12px;
  }
  .brand { grid-area: brand; }
  .lang-toggle { grid-area: lang; justify-self: end; }
  .nav-links {
    grid-area: links;
    margin-left: 0;
    justify-content: flex-start;
    gap: 6px 16px;   /* One row at 375px+. At 320px the Polish labels are
                        261px on their own, so they wrap to two — fine,
                        everything stays visible either way. */
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .catalogue { padding-top: 48px; padding-bottom: 52px; }
  .poetry { padding-top: 56px; padding-bottom: 56px; }

  .release-title { font-size: clamp(26px, 7.4vw, 34px); }

  .mixes { columns: 1; }
  .mix-name { font-size: 17px; }

  .next-card { padding: 20px; }
  .next-card h3 { font-size: 23px; }

  /* Two lines per row: the title, then genre and length beneath it —
     a Polish title and a long genre label don't share 327px. */
  .track-list li { flex-wrap: wrap; row-gap: 2px; }
  .track-name { flex: 1 0 100%; font-size: 18px; }
  .track-genre { flex: 1; text-align: left; }

  .stage {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 12px;
  }
  .stage-num { grid-row: 1 / span 2; }
  .stage-kind { grid-column: 2; font-size: 9px; }
  .stage-name { grid-column: 2; }
  .stage-status { grid-column: 3; grid-row: 1; }

  .signup-box button { width: 100%; }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 44px;
  }
}

/* Short screens — small phones and any phone in landscape. Shrink the
   release block rather than let the button fall below the fold. */
@media (max-width: 960px) and (max-height: 560px) {
  .release { padding-top: 12px; row-gap: 10px; }
  .release-art { width: min(40vw, 26vh); }
  .release-title { font-size: 24px; }
  .release-sub { margin-top: 10px; font-size: 14px; }
}

/* Someone who asked their system not to animate should not get the
   smooth-scroll ride either. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}