/* Readability pass on the original — not a new visual treatment.
   Leave the logo, scanlines, dot matrix, vignette, animation, colours of the
   cassette, display fonts, type sizes, and overall composition untouched. */

/* A small increase in stroke weight, with the original colour hierarchy. */
h1.font-sans { font-weight: 350; }
h1.font-sans > span { font-weight: 325; }

/* Give the tagline a little more light without losing its faded pixel finish. */
[data-purpose="logo-lockup"] > p,
[data-purpose="site-footer"] > div > .text-graphite { color: #b8bbc8; }

/* Lift actual reading text beneath the unchanged foreground screen texture. */
[data-purpose="primary-header"] > div:last-child {
  font-size: 12px;
  letter-spacing: .14em;
}
[data-purpose="primary-header"] > div:last-child > span { color: #d0d2dd; }
h1.font-sans { text-rendering: optimizeLegibility; }
[data-purpose="framing-card"] > div:first-child {
  color: #d0d2dd;
  font-size: 12px;
  letter-spacing: .12em;
}
[data-purpose="primary-header"] + div p.text-graphite { color: #e0e2ec; }

/* Keep Silkscreen and VT323, now at a genuinely readable size. */
[data-purpose="interactive-cassette-deck"] .font-pixel {
  font-size: 12px;
  letter-spacing: .12em;
}
[data-purpose="interactive-cassette-deck"] .font-terminal {
  font-size: 20px;
  line-height: 1.4;
  color: #c9ccd8;
}
nav[aria-label="Official Rewind channels"] a {
  font-size: 13px;
  letter-spacing: .06em;
  color: #f0f0f5;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
nav[aria-label="Official Rewind channels"] a:hover { color: #ff9d3b; }
nav[aria-label="Official Rewind channels"] > div:first-child { margin-bottom: 8px; }
nav[aria-label="Official Rewind channels"] > div:last-child { margin-top: 0; }
footer a[href^="mailto:"] { font-size: 14px; letter-spacing: .14em; color: #f0f0f5; }
footer a[href^="mailto:"]:hover { color: #ff9d3b; }
#dispatch-log input { min-width: 0; }
#dispatch-log input::placeholder { color: #b8bbc7; }
#dispatch-log .font-sans { font-size: 16px; }
#dispatch-log > div:first-child > div > .font-pixel { font-size: 11px; }

/* Let the same layout grow only when the larger labels need room. */
body > div.relative:has(> header) { min-height: 100svh; height: auto; max-height: none; }
#play-btn { flex-shrink: 0; white-space: nowrap; margin-left: 12px; }

@media (max-width: 639px) {
  [data-purpose="primary-header"] > div:last-child { gap: 12px; }
  [data-purpose="primary-header"] > div:last-child > span { flex: 1; }
  [data-purpose="primary-header"] > div:last-child > div { flex-shrink: 0; }
  [data-purpose="framing-card"] > div:first-child {
    font-size: 11px;
    letter-spacing: .08em;
  }
  [data-purpose="primary-header"] + div p.text-graphite { font-size: 16px; }
  [data-purpose="interactive-cassette-deck"] .font-pixel {
    font-size: 11px;
    letter-spacing: .08em;
  }
  [data-purpose="interactive-cassette-deck"] .font-pixel:has(> .font-mono) { gap: 12px; }
  [data-purpose="interactive-cassette-deck"] .font-pixel > .font-mono { flex-shrink: 0; }
  nav[aria-label="Official Rewind channels"] a { min-height: 36px; }
}