/* Darwin Stapel Music — CSS only. Edit blue here to change the entire palette. */
:root { --blue:#0800ff; --white:#fff; --line:rgba(255,255,255,.43); --pad:clamp(22px,4vw,66px); --radius:14px; --font:Arial,Helvetica,sans-serif; }
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:88px}
body {margin:0; background:var(--blue); color:var(--white); font-family:var(--font); -webkit-font-smoothing:antialiased}
a {color:inherit; text-decoration:none}
a:hover {opacity:.68}
a:focus-visible, label:focus-visible, summary:focus-visible {outline:2px solid currentColor; outline-offset:5px}
img {display:block; max-width:100%}
.section-wrap {padding-left:var(--pad);padding-right:var(--pad)}
.site-header {height:112px; padding:0 var(--pad); display:flex;justify-content:space-between;align-items:center;position:relative;z-index:30}
.wordmark {font-size:clamp(20px,2vw,30px);letter-spacing:-.055em;font-weight:600;white-space:nowrap}
.desktop-nav {display:flex;gap:clamp(20px,3vw,52px);font-size:15px}
.desktop-nav a:hover {text-decoration:underline;text-underline-offset:5px}
.menu-button {display:none;position:relative;width:44px;height:32px;cursor:pointer;z-index:40}
.menu-button span {position:absolute;width:100%;height:2px;background:white;left:0;top:10px;transition:transform .25s,top .25s}
.menu-button span+span {top:23px}
.mobile-nav {display:none}
.intro {position:relative;min-height:min(62vh,690px);display:flex;flex-direction:column;justify-content:center;padding-bottom:70px}
.eyebrow {font-size:14px;margin:0 0 18px;letter-spacing:.01em}
.intro h1 {font-weight:500;line-height:.76;font-size:clamp(82px,15.8vw,260px);letter-spacing:-.095em;margin:0;text-transform:lowercase}

.intro-aside {position:absolute;right:var(--pad);bottom:64px;font-size:clamp(14px,1.35vw,19px);line-height:1.25;text-align:right;margin:0}
.recordings {padding-top:22px;padding-bottom:clamp(120px,15vw,230px)}
.section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:17px 0 28px}
.section-heading h2 {font-weight:500;letter-spacing:-.06em;font-size:clamp(32px,4.5vw,68px);margin:0}
.section-heading>span {font-size:13px;text-align:right}
.filter-system {position:relative}
.filter-input {position:absolute;opacity:0;width:1px;height:1px}
.filters {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:2px 0 35px;font-size:clamp(13px,1.4vw,19px)}
.filters label {cursor:pointer;opacity:.58;transition:opacity .2s}
.filters label:hover {opacity:1}
.filter-divider {opacity:.65}
#filter-all:checked~.filters label[for="filter-all"],#filter-radio:checked~.filters label[for="filter-radio"],#filter-live:checked~.filters label[for="filter-live"],#filter-vinyl:checked~.filters label[for="filter-vinyl"] {opacity:1;text-decoration:underline;text-underline-offset:6px}
.recordings-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(55px,6vw,110px) clamp(15px,2.2vw,34px)}
.recording-card {min-width:0}
.recording-card img {width:100%;aspect-ratio:1.44;object-fit:cover;object-position:center;border-radius:var(--radius);background:rgba(255,255,255,.2);transition:opacity .3s}
.recording-card img:hover {opacity:.83}
.recording-placeholder {width:100%;aspect-ratio:1.44;border-radius:var(--radius);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,3vw,35px);background:rgba(255,255,255,.12)}
.recording-placeholder span {font-size:clamp(25px,3vw,46px);line-height:1.04;letter-spacing:-.06em}
.recording-placeholder small {font-size:12px;opacity:.75}

.recording-info {text-align:center;padding-top:16px}
.recording-category {margin:0 0 7px;font-size:12px;opacity:.72}
.recording-info h3 {font-size:clamp(17px,1.6vw,23px);font-weight:400;letter-spacing:-.035em;margin:0}
.recording-subtitle {margin:6px 0 0;font-size:13px;opacity:.8}
#filter-radio:checked~.recordings-grid .recording-card:not([data-kind~="radio"]),#filter-live:checked~.recordings-grid .recording-card:not([data-kind~="live"]),#filter-vinyl:checked~.recordings-grid .recording-card:not([data-kind~="vinyl"]) {display:none}
.shows {padding-bottom:clamp(110px,13vw,190px)}
.minor-heading {font-size:17px;font-weight:400;margin:15px 0 18px}
.show-row {display:grid;grid-template-columns:1fr .85fr 1.6fr 1.2fr;gap:18px;border-top:1px solid var(--line);padding:12px 0;font-size:clamp(14px,1.35vw,20px);line-height:1.32}
.show-row span:last-child {opacity:.68}
.past-shows {margin-top:60px}
.past-shows summary {cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:16px 0 24px;font-size:clamp(22px,2.8vw,39px)}
.past-shows summary::-webkit-details-marker {display:none}
.past-shows summary span {font-size:15px}
.about {padding-bottom:clamp(110px,13vw,200px)}
.about-grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,120px)}
.about-lead {font-size:clamp(25px,3.6vw,54px);letter-spacing:-.055em;line-height:1.13;margin:0}
.about-body {max-width:650px;font-size:clamp(17px,1.7vw,24px);line-height:1.42;letter-spacing:-.015em}
.about-body p {margin:0 0 24px}
.inline-link {font-size:16px;text-decoration:underline;text-underline-offset:5px}
.contact {padding-bottom:clamp(120px,16vw,220px)}
.contact-email {display:block;font-size:clamp(29px,6vw,90px);line-height:1.1;letter-spacing:-.065em;overflow-wrap:anywhere;margin:30px 0 12px}
.contact-note {font-size:14px;opacity:.75}
.site-footer {display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:19px;padding-bottom:34px;font-size:12px;line-height:2}
.site-footer div {display:flex;gap:17px;flex-wrap:wrap}
.site-footer a {text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px) {.recordings-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.intro {min-height:52vh}.show-row {grid-template-columns:.9fr .7fr 1.4fr 1.2fr}}
@media(max-width:700px) {
  .site-header {height:94px}.desktop-nav {display:none}.menu-button {display:block}
  .mobile-nav {position:fixed;inset:0;background:var(--blue);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility .2s}
  .mobile-nav-inner {display:flex;flex-direction:column;gap:clamp(20px,5vh,50px);align-items:center}
  .mobile-nav-inner a {font-size:clamp(50px,11vw,80px);line-height:1.05;letter-spacing:-.06em}
  .mobile-nav-close {position:absolute;bottom:45px;font-size:16px;cursor:pointer}
  .mobile-nav:target {visibility:visible;opacity:1;pointer-events:auto}
  .intro {min-height:52vh;padding-bottom:100px}
  .intro h1 {font-size:clamp(76px,18vw,150px)}
  .intro-aside {bottom:34px}
  .recordings-grid {grid-template-columns:1fr;gap:55px}
  .recording-card img {aspect-ratio:1.48}
  .filters {gap:10px 12px;margin-bottom:30px}
  .section-heading>span {max-width:38%}
  .show-row {grid-template-columns:115px 1fr;gap:5px 16px;padding:13px 0}
  .show-row span:nth-child(2) {text-align:right}
  .show-row span:nth-child(3) {grid-column:1 / -1}
  .show-row span:last-child:not(:empty) {grid-column:1 / -1;font-size:13px}
  .about-grid {grid-template-columns:1fr}
  .site-footer {display:block}.site-footer div+div {margin-top:15px}
}
@media(max-width:380px) {.intro h1 {font-size:17.5vw}.filters {font-size:12px}.filter-divider {display:none}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*,*:before,*:after {transition:none!important}}

/* EPK download links and expandable biography */
.press-links {display:flex;gap:15px 28px;flex-wrap:wrap;margin-top:29px;font-size:15px}
.press-links a,.bio-details summary {text-decoration:underline;text-underline-offset:5px}
.bio-details {margin:30px 0}
.bio-details summary {font-size:16px;cursor:pointer;list-style:none;margin-bottom:22px}
.bio-details summary::-webkit-details-marker {display:none}
.bio-details p {font-size:clamp(16px,1.45vw,20px)}