/* Header-only layout from the October 15 approved handoff. */
.about-copy { max-width: 780px; padding-bottom: 40px; }
.about-copy li { padding-left: 4px; margin-bottom: 12px; }
.story-page { max-width: 1120px; padding-top: 38px; padding-bottom: 72px; }
.story-back { display: inline-block; margin-bottom: 32px; font-size: 15px; }
.story-heading { max-width: 850px; margin-bottom: 36px; }
.story-heading h1 { font: 400 48px/1.08 'DM Serif Display', Georgia, serif; margin: 12px 0 18px; }
.story-deck { font-size: 22px; line-height: 1.45; max-width: 720px; margin: 0 0 20px; }
.story-byline, .story-photo figcaption { font-size: 14px; line-height: 1.5; color: #49645c; }
.story-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: start; }
.story-photo { margin: 0; }
.story-photo img { display: block; width: 100%; height: auto; }
.story-photo figcaption { margin-top: 10px; }
.story-copy { font-size: 18px; line-height: 1.75; }
.story-copy p { margin: 0 0 22px; }
.story-copy .story-intro { font-size: 22px; line-height: 1.5; }
.story-copy h2 { font: 400 29px/1.2 'DM Serif Display', Georgia, serif; margin: 32px 0 16px; }
.story-source { border-top: 1px solid #b8c8bc; padding-top: 22px; margin-top: 30px; font-size: 15px; }
.story-next { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; border-top: 1px solid #b8c8bc; margin-top: 30px; padding-top: 25px; font-size: 16px; }
@media (max-width: 767px) {
  .story-heading h1 { font-size: 34px; }
  .story-deck { font-size: 20px; }
  .story-layout { grid-template-columns: 1fr; gap: 28px; }
  .story-photo { max-width: 460px; }
  .story-page { padding-top: 24px; }
}
.site-header { background: #f8f5ec; }
.site-header .container { width: 90%; max-width: 1480px; }
.header-inner { min-height: 86px; gap: 22px; }
.brand img { width: 108px; }
.brand { font-size: 12px; }
.site-nav { gap: 22px; font-size: 16px; }
.site-header .support-link { background: #285b46; min-height: 48px; padding: 10px 24px; }
.hero { height: 610px; background: #f8f5ec; }
.hero .container { width: 88%; max-width: 1480px; }
.hero-grid > div:first-child { width: 44%; max-width: 580px; padding-top: 26px; }
.hero h1.hero-art-heading { width: 100%; max-width: 100%; margin: 0 0 12px; }
.hero-art-heading img { width: 100%; height: auto; filter: drop-shadow(0 0 3px white) drop-shadow(0 0 10px #ffffffed); }
.hero-illustration { filter: none; object-fit: cover; object-position: center bottom; }
.hero p:not(.hero-tagline) { font-size: 20px; line-height: 1.35; max-width: none; width: max-content; margin: 0 0 20px; color: #073e35; background: transparent; padding: 6px 0; text-shadow: 0 0 3px white, 0 0 7px white, 0 0 14px white; }
.live-art { margin-left: 0; margin-right: auto; object-position: left center; }
.hero-links { gap: 10px; flex-wrap: wrap; }
.hero-links a, .hero-links button { min-height: 48px; padding: 12px 16px; font: 600 16px/1.2 'Outfit', sans-serif; border: 1px solid #073e35; border-radius: 4px; background: #f8f5ec; color: #073e35; cursor: pointer; }
.hero-links .hero-listen { background: #073e35; color: white; }
.hero-links a:hover, .hero-links button:hover { background: #dce9d5; color: #073e35; }
.hero-links :focus-visible { outline: 3px solid #073e35; outline-offset: 4px; }
.hero p.hero-tagline { position: absolute; right: 4%; top: 28px; z-index: 2; margin: 0; max-width: 230px; color: #073e35; font: italic 28px/1.15 'DM Serif Display', Georgia, serif; transform: rotate(-8deg); }
.hero + .player-band { margin-top: 0; }
.player-band { background: #073e35; padding: 16px 0; }
.player-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: center; }
.turntable { width: 240px; }
.record-player { width: 240px; height: 136px; object-fit: contain; }
.player-info { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 1.6fr); gap: 4px 24px; align-items: center; }
.player-eyebrow { grid-column: 1; color: #a1d68e; font-size: 12px; }
.player-info .show-name { grid-column: 1; font-size: 28px; margin: 0; }
.player-info .show-kicker { grid-column: 1; font-size: 11px; white-space: normal; }
.player-controls { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; gap: 12px; white-space: normal; }
.player-controls .round-button { background: #a1d68e; color: #073e35; width: 48px; height: 48px; flex-shrink: 0; }
.player-controls .volume { width: 110px; accent-color: #a1d68e; }
.player-controls .status { font: 500 14px/1.2 'Outfit', sans-serif; color: white; opacity: 1; padding: 12px 16px; border: 1px solid white; border-radius: 24px; text-decoration: none; }
@media (min-width: 1600px) { .hero { height: 700px; } }
@media (max-width: 1100px) {
  .brand span { display: none; }
  .site-nav { gap: 14px; }
  .hero { height: 590px; }
  .hero-grid > div:first-child { width: 48%; padding-top: 32px; }
  .hero p:not(.hero-tagline) { font-size: 17px; width: auto; }
  .hero p.hero-tagline { display: none; }
  .hero-illustration { object-position: 80% bottom; }
  .player-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
  .turntable, .record-player { width: 150px; }
  .player-info { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.6fr); }
}
/* Compact vinyl banner matched to the supplied player reference. */
.player-band { background: #103e35; padding: 14px 0; }
.player-band .container { width: 88%; max-width: 1480px; }
.player-grid { grid-template-columns: 80px minmax(0, 1fr); gap: 20px; }
.turntable, .record-player { width: 100px; }
.record-player { height: 100px; }
.player-grid .turntable { width: 72px; min-height: 0; align-self: center; }
.record-player.current-album-art { display: block; width: 72px; height: 72px; object-fit: contain; object-position: left center; border-radius: 4px; transform: none; }
.player-info { grid-template-columns: minmax(200px, .7fr) minmax(0, 2.3fr); gap: 5px 20px; }
.player-eyebrow { color: #a1c97b; font-size: 12px; }
.player-info .show-name { font: 600 30px/1.15 'Outfit', sans-serif; }
.player-info .show-kicker { font: 600 12px/1.4 'Outfit', sans-serif; }
.player-controls { flex-wrap: nowrap; border-left: 1px solid #ffffff30; padding-left: 24px; gap: 16px; }
.player-controls .round-button { width: 54px; height: 54px; background: #a1c97b; display: grid; place-items: center; padding: 0; }
.player-controls .volume { flex: 1 1 160px; min-width: 60px; max-width: 260px; height: 6px; accent-color: #a1c97b; }
.speaker-icon { width: 26px; height: 26px; filter: invert(1); }
.player-controls > span { font: 500 17px/1.2 'Outfit', sans-serif; white-space: nowrap; }
.player-controls .status { margin-left: auto; padding: 15px 24px; border: 1px solid #c5d7cb; border-radius: 32px; white-space: nowrap; }
@media (min-width: 1101px) {
  .player-band .container { width: auto; max-width: none; margin-left: max(6%, calc((100% - 1480px) / 2)); margin-right: max(32px, calc((100% - var(--container)) / 2)); }
}
@media (max-width: 1100px) {
  .player-info { grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr); gap: 5px 20px; }
  .player-controls { padding-left: 20px; gap: 12px; flex-wrap: wrap; }
  .player-controls .status { margin-left: 0; }
  .player-info .show-name { font-size: 25px; }
}
@media (max-width: 767px) {
  .player-band .container { width: calc(100% - 72px); margin-left: 16px; }
  .player-grid { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .turntable, .record-player { width: 68px; }
  .record-player { height: 68px; }
  .player-info { display: block; }
  .player-controls { border: 0; padding-left: 0; }
  .player-controls .volume { flex: 1 1 75px; }
  .player-controls .status { padding: 12px 16px; }
}
@media (max-width: 900px) {
  .site-nav { display: none; position: absolute; left: 16px; right: 16px; top: 80px; padding: 18px; background: #f8f5ec; flex-direction: column; align-items: stretch; }
  .site-nav.open { display: flex; }
  .nav-toggle { display: block; min-height: 44px; }
  .hero p.hero-tagline { display: none; }
}
@media (max-width: 767px) {
  .header-inner { min-height: 80px; }
  .brand img { width: 90px; }
  .hero { height: auto; padding-bottom: 290px; }
  .hero .container { width: calc(100% - 40px); }
  .hero-grid > div:first-child { width: 100%; max-width: 440px; margin: auto; padding-top: 18px; }
  .hero p:not(.hero-tagline) { font-size: 17px; padding: 0; background: #f8f5ec; }
  .hero-art { top: auto; height: 290px; bottom: 0; }
  .hero-illustration { width: 100%; height: 290px; object-position: 76% bottom; }
  .hero-links { flex-direction: column; padding-bottom: 22px; }
  .hero-links a, .hero-links button { width: 100%; }
  .player-grid { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
  .player-band .container { width: calc(100% - 72px); margin-left: 16px; }
  .turntable, .record-player { width: 80px; }
  .record-player { height: 96px; }
  .player-info { display: block; }
  .player-info .show-name { font-size: 24px; margin: 6px 0; }
  .player-controls { margin-top: 16px; }
  .player-controls .volume { width: 90px; }
  .player-controls .status { display: block; }
  .live-drawer { top: auto; bottom: 18px; }
  .live-panel { max-height: calc(100dvh - 100px); }
}