/* ============================================================================
   Madley -- datarail.org/Madley

   The palette is taken from the PAPERHEARTS cover: black, one hard red, and
   an off-white that reads as paper rather than screen. Titles are set in a
   typewriter face because the record's own titling is typed, and because
   every track Madley releases carries a hand-typed "<3" -- the site borrows
   that mark rather than inventing a new one.

   No web fonts and no external scripts. The page has to survive being moved
   to its own domain one day, so it depends on nothing it does not ship, and
   every path in it is relative for the same reason.
   ========================================================================= */

:root {
  --black: #0a0708;
  --black-soft: #120d0f;
  --raised: #1a1315;
  --raised-hi: #241a1d;

  --paper: #f7f1ee;
  --paper-dim: #c7bab6;
  --paper-faint: #8d7f7c;

  /* --red is for large text, rules and fills only: at small sizes it does not
     clear 4.5:1 on black. --red-bright does, and carries the small text. */
  --red: #e2182f;
  --red-bright: #ff6274;
  --red-deep: #7d0a17;

  --rule: #2c1f22;
  --rule-hi: #432f34;

  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-type: ui-monospace, SFMono-Regular, "Courier New", Courier, monospace;

  --shell: 1080px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --radius: 4px;
  --fast: 160ms ease-out;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  background-image:
    radial-gradient(ellipse at 50% -10%, #2a0a10 0%, transparent 60%),
    radial-gradient(ellipse at 90% 100%, #1a0508 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-type);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
  border-radius: var(--radius);
}

img { max-width: 100%; height: auto; display: block; }

/* --- shell ---------------------------------------------------------------- */

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 7, 8, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  min-height: 4rem;
  padding-block: 0.6rem;
}

.wordmark {
  font-family: var(--font-type);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .heart { color: var(--red); margin-left: 0.4ch; letter-spacing: 0; }
.wordmark:hover { color: var(--paper); }
.wordmark:hover .heart { color: var(--red-bright); }

.masthead nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.masthead nav a {
  font-family: var(--font-type);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color var(--fast), border-color var(--fast);
}
.masthead nav a:hover { color: var(--paper); border-bottom-color: var(--red); }

/* On a phone the nav wraps onto a second line, and a sticky bar two lines deep
   holds 15% of the screen for the whole visit. It scrolls away instead; the
   page is short enough that the wordmark is never far. */
@media (max-width: 40rem) {
  .masthead { position: static; }
  .masthead .shell { min-height: 0; gap: 0.5rem 1rem; }
  .masthead nav { margin-left: 0; width: 100%; gap: 0.1rem 1.1rem; }
  section[id] { scroll-margin-top: 1rem; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--rule);
}

/* The sleeve repeats its own title down the cover in columns. This is that,
   in type, behind the name -- decorative, so it is hidden from screen
   readers, and it sits far enough back not to fight the text in front. */
.hero-stack {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  font-family: var(--font-type);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--red-deep);
  opacity: 0.3;
  user-select: none;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 60%, transparent);
}
.hero-stack span { display: block; white-space: nowrap; overflow: hidden; }
.hero-stack span:nth-child(even) { color: var(--raised-hi); }

.hero .shell { position: relative; }

.eyebrow {
  font-family: var(--font-type);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(3.2rem, 14vw, 8rem);
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.hero h1 .heart {
  display: inline-block;
  color: var(--red);
  font-size: 0.32em;
  vertical-align: 0.95em;
  margin-left: 0.3ch;
  letter-spacing: 0;
}

.lede {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.55;
  color: var(--paper);
}

/* --- buttons and platform row --------------------------------------------- */

.platforms {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-type);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule-hi);
  background: var(--raised);
  color: var(--paper);
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.button:hover {
  color: var(--paper);
  background: var(--raised-hi);
  border-color: var(--red);
  transform: translateY(-1px);
}
.button--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.button--primary:hover { background: var(--red-bright); border-color: var(--red-bright); color: var(--black); }

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

section[id] { scroll-margin-top: 5rem; }

.band { padding-block: clamp(3rem, 7vw, 5.5rem); border-bottom: 1px solid var(--rule); }
.band--soft { background: rgba(18, 13, 15, 0.6); }

.band-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}
.band-head h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  letter-spacing: 0.02em;
}
.band-head h2 .heart { color: var(--red); margin-left: 0.5ch; }
.band-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rule-hi), transparent);
}

.band-note {
  max-width: 62ch;
  color: var(--paper-dim);
  margin-bottom: 2rem;
}

.subhead {
  font-family: var(--font-type);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin: 2.5rem 0 1rem;
}
.subhead:first-of-type { margin-top: 0; }

/* --- players -------------------------------------------------------------- */

/* Nothing loads from Spotify until someone asks for it: each player is a
   button until it is pressed, and only then is the iframe created. That
   keeps the page fast, and keeps Spotify's cookies off it for anyone who
   only came to read. */
.player {
  position: relative;
  border: 1px solid var(--rule-hi);
  border-radius: var(--radius);
  background: var(--raised);
  overflow: hidden;
}

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

.player-cue {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: none;
  border: 0;
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast);
}
.player-cue:hover { background: var(--raised-hi); }

.player-cue .disc {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  transition: background var(--fast), color var(--fast);
}
.player-cue .disc svg { width: 1rem; height: 1rem; fill: currentColor; }
.player-cue:hover .disc { background: var(--red-bright); color: var(--black); }

.player-cue .cue-text { min-width: 0; }
.player-cue .cue-title {
  display: block;
  font-family: var(--font-type);
  font-weight: 700;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.player-cue .cue-sub {
  display: block;
  font-size: 0.74rem;
  color: var(--paper-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-type);
}

.player--hero { max-width: 34rem; margin-top: 2.25rem; }

.track-cues {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* --- discography ---------------------------------------------------------- */

.releases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  /* Cards keep their own height. Without this, opening one track listing
     stretches every card in the row and strands their play buttons at the
     bottom of a column of empty space. */
  align-items: start;
}

.release {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--black-soft);
  overflow: hidden;
  transition: border-color var(--fast), transform var(--fast);
}
.release:hover { border-color: var(--rule-hi); transform: translateY(-2px); }

/* The sleeve. With no artwork file it draws itself -- red and black bands
   with the record's own "<3" struck over them -- so a missing cover looks
   deliberate rather than broken. Drop a square JPEG in assets/img/covers/,
   set --cover on the element and add the class has-art, and the real sleeve
   covers it. CONTENT-TODO.md lists the filenames each card expects. */
.sleeve {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--black);
  background-image: var(--cover, none);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--rule);
}
.sleeve:not(.has-art)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--red-deep) 0 1.4rem,
    var(--black) 1.4rem 2.6rem
  );
  opacity: 0.5;
}
.sleeve:not(.has-art)::after {
  content: "<3";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-type);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--red-bright);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.release-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.release h3 { font-size: 1rem; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.release h3 a { color: var(--paper); text-decoration: none; }
.release h3 a:hover { color: var(--red-bright); text-decoration: underline; }

.release-meta {
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
}
.release-meta .tag { color: var(--red-bright); }

.release .player { margin-top: auto; }

details.tracklist { border-top: 1px solid var(--rule); padding-top: 0.65rem; }
details.tracklist summary {
  cursor: pointer;
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
details.tracklist summary:hover { color: var(--paper); }
details.tracklist[open] summary { color: var(--red-bright); margin-bottom: 0.6rem; }

.tracklist ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: track;
  font-size: 0.85rem;
}
.tracklist li {
  counter-increment: track;
  display: flex;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(44, 31, 34, 0.55);
  overflow-wrap: anywhere;
}
.tracklist li:last-child { border-bottom: 0; }
.tracklist li::before {
  content: counter(track, decimal-leading-zero);
  font-family: var(--font-type);
  color: var(--red-deep);
  flex: none;
}
.tracklist .dur { margin-left: auto; font-family: var(--font-type); color: var(--paper-faint); flex: none; }

/* --- prose ---------------------------------------------------------------- */

.prose { max-width: 62ch; }
.prose h3 {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: var(--red-bright);
  margin: 2rem 0 0.75rem;
}
.prose blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--red);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--paper);
}
.prose blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-type);
  font-size: 0.74rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.two-up {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  font-size: 0.92rem;
}
.facts dt {
  font-family: var(--font-type);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  padding-top: 0.25rem;
}
.facts dd { margin: 0; }

/* --- gallery -------------------------------------------------------------- */

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--rule); }
.gallery figcaption {
  margin-top: 0.5rem;
  font-family: var(--font-type);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

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

.colophon { padding-block: 3rem; font-size: 0.85rem; color: var(--paper-faint); }
.colophon .shell { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; }
.colophon a { color: var(--paper-dim); }
.colophon a:hover { color: var(--red-bright); }
.colophon .rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--red-deep), transparent);
  margin-bottom: 2rem;
}
.colophon .spacer { margin-left: auto; }

/* --- press kit ------------------------------------------------------------ */

.kit-bio {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: var(--black-soft);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.kit-bio h3 { margin-top: 0; }
.kit-bio .count {
  font-family: var(--font-type);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 0.75rem;
}

table.kit { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.kit th,
table.kit td {
  text-align: left;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.kit th {
  font-family: var(--font-type);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-weight: 400;
}
table.kit td.year { font-family: var(--font-type); color: var(--paper-faint); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* The press kit exists to be printed or saved as a PDF, so it has to come off
   the dark shell and onto white without anyone editing it first. */
@media print {
  :root { --paper: #111; --paper-dim: #333; --paper-faint: #555; --rule: #ccc; --rule-hi: #bbb; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .masthead, .colophon, .no-print, .player { display: none !important; }
  .band { border-bottom: 0; padding-block: 0 1.25rem; break-inside: avoid; }
  .kit-bio { background: none; border-color: #ccc; border-left-color: #c00; }
  a { color: #111; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; word-break: break-all; }
}