/* Dominion Sound Publishing, legacy page.
   Same system as the full site (Big Shoulders + EB Garamond, ink ground,
   signal red) reduced to what one page needs. The full-site stylesheet is
   src/site.css, kept alongside build.js for the archived generator. */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Big Shoulders";
  src: url("/assets/fonts/big-shoulders-v4-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("/assets/fonts/big-shoulders-v4-latin-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-v33-latin-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-v33-latin-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --ink-0: #0c0c0d;
  --ink-2: #1d1d20;
  --paper: #f5f4f0;
  --muted: #a3a09a;
  --faint: rgba(245, 244, 240, 0.14);
  --red: #ef3e33;
  --red-bright: #ff5449;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --serif: "EB Garamond", Georgia, serif;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--paper); text-decoration-color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-bright); }
::selection { background: var(--red); color: var(--ink-0); }
img { display: block; max-width: 100%; height: auto; }

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

/* ---------- masthead ---------- */
.masthead { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.75rem, 4vw, 2.5rem); }
.wordmark {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.35rem, 4.5vw, 1.9rem);
  line-height: 1; color: var(--paper);
}
.wordmark .tail { color: var(--muted); }

.kicker {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.86rem; color: var(--red);
  display: block; margin-bottom: 0.9rem;
}
h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 0.94;
  font-size: clamp(2.6rem, 9vw, 4.4rem); margin-bottom: 1.5rem;
}
h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: clamp(1.3rem, 3.5vw, 1.6rem);
  margin-bottom: 1.5rem;
}
p + p { margin-top: 1rem; }
.lede { font-size: 1.16em; }
.muted { color: var(--muted); }

hr.rule { border: 0; border-top: 1px solid var(--faint); margin: clamp(2.5rem, 7vw, 4rem) 0; }
section { margin-bottom: 0; }

/* ---------- records ---------- */
.record { display: grid; grid-template-columns: 108px 1fr; gap: 1.4rem; align-items: start; }
.record + .record { margin-top: 2rem; }
.record .art img { border: 1px solid var(--ink-2); }
.record h3 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 1.3rem; line-height: 1.1;
}
.record .meta-line {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.78rem; color: var(--muted);
  margin: 0.4rem 0 0.75rem;
}
.links a { margin-right: 1rem; white-space: nowrap; }
@media (max-width: 460px) {
  .record { grid-template-columns: 84px 1fr; gap: 1rem; }
}

/* ---------- press ---------- */
blockquote {
  border-left: 2px solid var(--red); padding-left: 1.1rem; font-style: italic;
  font-size: 1.08em;
}
blockquote + blockquote { margin-top: 1.6rem; }
blockquote cite {
  display: block; font-style: normal; margin-top: 0.5rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.78rem; color: var(--muted);
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--faint);
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding: 2rem 0 3rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; font-size: 0.8rem; color: var(--muted);
}
.site-footer span { display: block; }
.site-footer span + span { margin-top: 0.4rem; }