:root {
  --ink: #151310;
  --paper: #f4efe5;
  --paper-2: #e9e1d3;
  --cream: #fffaf0;
  --coral: #eb5b3e;
  --coral-dark: #c63f2b;
  --mint: #83d7b7;
  --acid: #d7ee69;
  --violet: #7f6ad9;
  --line: rgba(21, 19, 16, .18);
  --mono: "DM Mono", monospace;
  --display: "Unbounded", sans-serif;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}
body::selection { background: var(--acid); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  height: 78px; padding: 0 clamp(22px, 5vw, 76px); display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; font: 700 20px var(--display); letter-spacing: -.06em; }
.brand > span:last-child span { color: var(--coral); }
.brand-mark { width: 31px; height: 31px; display: flex; align-items: center; gap: 2px; justify-content: center; border: 2px solid var(--ink); border-radius: 50%; }
.brand-mark i { width: 2px; height: 8px; background: var(--ink); border-radius: 3px; }
.brand-mark i:nth-child(2) { height: 16px; }
.brand-mark i:nth-child(3) { height: 12px; }
.site-header nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); font-size: 13px; font-weight: 700; }
.site-header nav a:not(.nav-pill):hover { color: var(--coral); }
.nav-pill { border: 1px solid var(--ink); border-radius: 30px; padding: 9px 15px; }
.nav-pill:hover { background: var(--ink); color: var(--paper); }
.nav-toggle { display:none; width:44px; height:44px; padding:10px; border:0; background:transparent; cursor:pointer; }
.nav-toggle span { display:block; width:24px; height:2px; margin:5px auto; background:var(--ink); transition:transform .18s ease, opacity .18s ease; }

.hero { min-height: 690px; display: grid; grid-template-columns: 1.07fr .93fr; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-copy { padding: clamp(70px, 10vw, 138px) 6vw 90px; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { margin: 0 0 25px; font: 500 11px var(--mono); letter-spacing: .13em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 29px; height: 2px; background: var(--coral); display: inline-block; }
h1, h2 { font-family: var(--display); letter-spacing: -.065em; line-height: 1.04; margin: 0; }
.hero h1 { font-size: clamp(45px, 5.3vw, 78px); max-width: 880px; }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.hero-lede { font-size: clamp(17px, 1.5vw, 21px); max-width: 590px; margin: 30px 0 36px; color: rgba(21,19,16,.72); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid var(--ink); min-height: 52px; padding: 0 22px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.button-primary { background: var(--ink); color: var(--cream); box-shadow: 6px 6px 0 var(--coral); }
.button-primary:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--coral); }
.button-primary:disabled { opacity: .7; cursor: wait; }
.button-secondary { background: transparent; }
.button-secondary:hover { background: var(--cream); }
.button span { color: var(--acid); }

.hero-art { position: relative; min-height: 650px; background: var(--mint); border-left: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(21,19,16,.055) 55px 56px); z-index: -1; }
.hero-art > p { position: absolute; left: 8%; bottom: 7%; font: 500 11px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.vinyl { position: absolute; width: clamp(255px, 31vw, 430px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #1b1917 0 3px, #27241f 4px 6px); top: 17%; left: 19%; box-shadow: 18px 25px 0 rgba(21,19,16,.12); display: grid; place-items: center; animation: spin 20s linear infinite; }
.vinyl::before { content: ""; width: 31%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); border: 12px solid #df4b33; }
.vinyl::after { content: ""; position: absolute; width: 5%; aspect-ratio: 1; background: var(--paper); border-radius: 50%; }
.vinyl-label { position: absolute; z-index: 2; font: 700 11px/1 var(--display); color: var(--paper); text-align: center; transform: rotate(-12deg); }
.orbit { position: absolute; border: 2px solid var(--ink); border-radius: 50%; opacity: .75; }
.orbit-one { width: 116%; aspect-ratio: 1; left: -5%; top: -10%; }
.orbit-two { width: 77%; aspect-ratio: 1; right: -28%; bottom: -23%; border-color: var(--coral); border-width: 10px; }
.wave { position: absolute; width: 80px; height: 250px; opacity: .8; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--ink) 9px 12px); clip-path: polygon(0 45%, 10% 30%, 20% 62%, 30% 14%, 40% 75%, 50% 25%, 60% 68%, 70% 8%, 80% 84%, 90% 35%, 100% 55%, 100% 100%, 0 100%); }
.wave-a { right: 4%; top: 4%; transform: rotate(90deg); }
.wave-b { left: 4%; bottom: 6%; transform: rotate(-90deg) scale(.7); }
.spark { position: absolute; color: var(--acid); font-size: 47px; text-shadow: 2px 2px 0 var(--ink); }
.spark-a { top: 10%; left: 9%; }.spark-b { right: 8%; bottom: 12%; font-size: 29px; }
@keyframes spin { to { transform: rotate(360deg); } }

.studio { padding: 100px clamp(22px, 5vw, 76px) 110px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 52px; }
.section-heading h2, .about h2 { font-size: clamp(39px, 4vw, 59px); }
.section-heading > p { max-width: 500px; margin: 0 0 5px; color: rgba(21,19,16,.66); }
.generator { border-top: 1px solid var(--ink); }
fieldset { margin: 0; padding: 35px 0 45px; border: 0; min-width: 0; }
legend { padding: 0 20px 0 0; font-size: 17px; font-weight: 800; }
legend b { font: 500 11px var(--mono); color: var(--coral); margin-right: 10px; }
.genre-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.genre-card { min-height: 138px; padding: 20px; border: 1px solid var(--line); background: rgba(255,250,240,.52); display: flex; flex-direction: column; cursor: pointer; position: relative; transition: .16s ease; }
.genre-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.genre-card input { position: absolute; opacity: 0; }
.genre-card strong { font-size: 17px; margin: auto 0 5px; }
.genre-card small { font-size: 11px; line-height: 1.45; color: rgba(21,19,16,.62); }
.genre-check { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: transparent; }
.genre-card.is-selected { background: var(--mint); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.genre-card.is-selected .genre-check { background: var(--ink); color: var(--acid); border-color: var(--ink); }
.control-columns { display: grid; grid-template-columns: 1fr 1.3fr; border-top: 1px solid var(--ink); gap: 6vw; }
.control-columns fieldset + fieldset { border-left: 1px solid var(--line); padding-left: 6vw; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.field-grid label { display: flex; flex-direction: column; gap: 8px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.field-grid select, .field-grid input { width: 100%; height: 49px; padding: 0 13px; border: 1px solid var(--line); border-radius: 0; background: var(--cream); color: var(--ink); outline: 0; text-transform: none; letter-spacing: 0; }
.field-grid select:focus, .field-grid input:focus { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(235,91,62,.16); }
.optional { color: rgba(21,19,16,.45); font-size: 9px; }
.generate-row { border-top: 1px solid var(--ink); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.generate-row p { margin: 0; font-size: 13px; color: rgba(21,19,16,.6); }
.generate-row p span { display: block; color: var(--ink); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.generate-button { min-width: 240px; border-radius: 0; }

.about { background: var(--ink); color: var(--paper); padding: 100px clamp(22px, 8vw, 130px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: end; }
.about p:last-child { font-size: clamp(17px, 1.55vw, 22px); color: rgba(244,239,229,.68); margin: 0; max-width: 620px; }
.site-footer { background: var(--ink); color: var(--paper); border-top: 1px solid rgba(244,239,229,.16); padding: 42px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: center; }
.site-footer > div:first-child { display: flex; flex-direction: column; }.site-footer strong { font: 700 16px var(--display); }.site-footer span, .site-footer small { color: rgba(244,239,229,.48); font-size: 11px; }
.footer-links { display: flex; gap: 24px; font: 500 10px var(--mono); text-transform: uppercase; }.footer-links a:hover { color: var(--mint); }
.site-footer small { grid-column: 1 / -1; }

/* DJ PeanutButter EPK */
.artist-brand { letter-spacing: -.05em; }
.artist-brand > span:last-child span { color: var(--coral); }
.site-header nav .nav-pill span { color: var(--coral); }
.epk-hero { min-height: calc(100vh - 78px); position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); color: var(--cream); }
.epk-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; filter: saturate(.86) contrast(1.08); }
.epk-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,13,12,.9) 0%, rgba(15,13,12,.62) 43%, rgba(15,13,12,.06) 76%), linear-gradient(0deg, rgba(15,13,12,.7), transparent 50%); }
.epk-hero-copy { position: relative; z-index: 2; padding: 9vh clamp(22px, 7vw, 110px); width: 100%; }
.eyebrow.light { color: rgba(255,250,240,.75); }
.epk-hero h1 { font-size: clamp(64px, 10vw, 150px); line-height: .84; max-width: 1100px; text-transform: uppercase; text-shadow: 0 2px 20px rgba(0,0,0,.22); }
.epk-hero h1 em { color: var(--acid); }
.epk-hero-copy > p:not(.eyebrow) { margin: 30px 0 25px; font: 500 clamp(18px,2vw,27px) var(--mono); }
.epk-hero-actions { display: flex; align-items: center; gap: 32px; }
.button-acid { background: var(--acid); color: var(--ink); border-color: var(--acid); box-shadow: 6px 6px 0 var(--coral); }
.button-acid:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--coral); }
.button-ghost-light { color:var(--cream); border-color:rgba(255,250,240,.75); background:rgba(15,13,12,.2); backdrop-filter:blur(4px); }.button-ghost-light:hover { background:var(--cream); color:var(--ink); }.button-ghost-light span { color:var(--acid); }
.text-link { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid rgba(255,250,240,.55); padding-bottom: 5px; }
.epk-stamp { position: absolute; z-index: 2; right: 5vw; top: 7vh; width: 130px; height: 130px; border-radius: 50%; border: 2px solid var(--acid); display: grid; place-content: center; text-align: center; transform: rotate(8deg); backdrop-filter: blur(4px); }
.epk-stamp span { font: 700 28px var(--display); color: var(--acid); }.epk-stamp small { font: 500 8px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.epk-ticker { overflow: hidden; background: var(--coral); color: var(--ink); border-block: 1px solid var(--ink); height: 54px; display: flex; align-items: center; white-space: nowrap; }
.epk-ticker div { font: 700 16px var(--display); text-transform: uppercase; word-spacing: 22px; animation: ticker 22s linear infinite; }.epk-ticker i { color: var(--acid); font-style: normal; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-35%); } }
.epk-intro { padding: 120px clamp(22px, 7vw, 110px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; align-items: start; }
.epk-intro h2, .epk-music h2, .epk-video h2, .epk-photos h2, .epk-chartgem h2, .epk-contact h2 { font-size: clamp(43px, 5vw, 72px); }
.epk-bio > p { font-size: clamp(18px, 1.7vw, 24px); margin: 0 0 22px; }.epk-bio > p + p { color: rgba(21,19,16,.65); }
.epk-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.epk-facts div { background: var(--cream); padding: 18px; display: flex; flex-direction: column; }.epk-facts small { font: 500 8px var(--mono); text-transform: uppercase; color: var(--coral-dark); letter-spacing: .1em; }.epk-facts strong { font-size: 12px; margin-top: 7px; }
.epk-music { padding: 110px clamp(22px, 7vw, 110px); background: var(--ink); color: var(--cream); }
.epk-heading > p { color: rgba(255,250,240,.58); }.epk-release-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px,6vw,90px); align-items: center; }
.epk-cover-card { position: relative; max-width: 560px; }.epk-cover-card img { width: 100%; display: block; box-shadow: 18px 18px 0 var(--coral); }
.epk-cover-card > div { position: absolute; left: -1px; right: -18px; bottom: -1px; background: var(--acid); color: var(--ink); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.epk-cover-card small { grid-column: 1/-1; font: 500 8px var(--mono); text-transform: uppercase; }.epk-cover-card strong { font: 700 20px var(--display); }.epk-cover-card span { font-size: 11px; }
.epk-player iframe { display:block; }.platform-links { display:flex; gap:20px; margin-top:18px; flex-wrap:wrap; }.platform-links a { font:500 10px var(--mono); text-transform:uppercase; border-bottom:1px solid rgba(255,250,240,.35); padding-bottom:5px; }.platform-links a:hover { color:var(--acid); }
.featured-songs { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; align-items:stretch; }
.featured-song { border:1px solid rgba(255,250,240,.2); background:#201e1a; display:flex; flex-direction:column; min-width:0; }
.featured-song-primary { justify-content:center; background:linear-gradient(145deg,#24211d,#161412); }
.featured-song-primary .song-details { padding:clamp(28px,4vw,54px); }
.featured-song-primary .song-details h3 { font-size:clamp(38px,5vw,70px); }
.featured-song-secondary > img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.song-details { padding:26px; display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.song-details small { font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--coral); }
.song-details h3 { margin:12px 0 8px; font:700 clamp(27px,3vw,43px) var(--display); letter-spacing:-.06em; }.song-details h3 span { font-size:.45em; color:rgba(255,250,240,.55); letter-spacing:-.03em; }
.song-details p { margin:0 0 24px; color:rgba(255,250,240,.58); font-size:13px; }.song-details .button { margin-top:auto; }
.song-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:auto; }.song-links a,.catalog-links a { font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid rgba(255,250,240,.35); padding-bottom:4px; }.song-links a:hover,.catalog-links a:hover { color:var(--acid); }
.inline-player { display:block; width:100%; border:0; margin:0 0 15px; background:#111; }.amazon-player { min-height:352px; }.apple-player { min-height:175px; margin-top:auto; border-radius:10px; overflow:hidden; }.player-external { font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid rgba(255,250,240,.35); padding-bottom:4px; }.player-external:hover { color:var(--acid); }
.catalog-links { display:flex; align-items:center; justify-content:flex-end; gap:24px; margin-top:24px; }.catalog-links span { color:rgba(255,250,240,.45); font:500 9px var(--mono); text-transform:uppercase; }
.epk-video { padding: 110px clamp(22px, 7vw, 110px); display: grid; grid-template-columns: .65fr 1.35fr; gap: 7vw; align-items: center; background: var(--mint); }
.epk-video-copy > p:last-child { color: rgba(21,19,16,.65); max-width: 390px; }.video-frame { aspect-ratio:16/9; background:var(--ink); box-shadow:14px 14px 0 var(--coral); }.video-frame iframe { width:100%; height:100%; display:block; }
.epk-photos { padding: 110px clamp(22px, 7vw, 110px); }.epk-heading-dark > p { color: rgba(21,19,16,.58); }
.photo-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:12px; align-items:stretch; }.photo-grid a { position:relative; min-height:470px; overflow:hidden; background:var(--ink); }.photo-grid img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease; }.photo-grid a:hover img { transform:scale(1.025); filter:saturate(1.16); }.photo-grid span { position:absolute; left:12px; bottom:12px; background:var(--cream); padding:8px 11px; font:500 9px var(--mono); text-transform:uppercase; }.photo-grid a:nth-child(2) img { object-position:center 44%; }
.epk-chartgem { position:relative; min-height:650px; padding:100px clamp(22px, 9vw, 145px); display:flex; align-items:center; justify-content:flex-end; background:var(--acid); overflow:hidden; }.epk-chartgem > div:last-child { position:relative; z-index:2; width:min(600px,55%); }.epk-chartgem h2 em { color:var(--coral); }.epk-chartgem p:not(.eyebrow) { font-size:19px; color:rgba(21,19,16,.68); margin:22px 0 35px; }
.chartgem-orbit { position:absolute; width:520px; aspect-ratio:1; left:4vw; top:50%; transform:translateY(-50%); border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center; }.chartgem-orbit::before,.chartgem-orbit::after { content:""; position:absolute; border:2px solid var(--coral); border-radius:50%; }.chartgem-orbit::before { width:72%; height:72%; }.chartgem-orbit::after { width:38%; height:38%; background:var(--ink); }.chartgem-orbit i { position:absolute; width:21px; height:21px; background:var(--coral); border-radius:50%; }.chartgem-orbit i:nth-child(1){left:-10px}.chartgem-orbit i:nth-child(2){right:14%;top:6%}.chartgem-orbit i:nth-child(3){bottom:10%;left:20%;background:var(--violet)}
.epk-contact { padding:120px clamp(22px,7vw,110px); background:var(--coral); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(45px,8vw,120px); align-items:start; }.epk-contact h2 em { color:var(--acid); }.contact-copy > p:not(.eyebrow) { max-width:560px; margin:25px 0 36px; font-size:18px; }.contact-links { display:flex; flex-wrap:wrap; gap:10px; }.contact-links a { border:1px solid var(--ink); padding:11px 15px; font:600 9px var(--mono); text-transform:uppercase; }.contact-links a:hover { background:var(--ink); color:var(--cream); }
.contact-form { background:var(--cream); color:var(--ink); padding:clamp(24px,4vw,48px); box-shadow:12px 12px 0 var(--ink); display:flex; flex-direction:column; gap:19px; position:relative; }.contact-field-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.contact-form label { display:flex; flex-direction:column; gap:7px; font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.08em; }.contact-form label > span { color:rgba(21,19,16,.45); font-size:8px; }.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid var(--line); border-radius:0; background:#fffdf8; color:var(--ink); padding:12px 13px; outline:0; text-transform:none; letter-spacing:0; resize:vertical; }.contact-form input,.contact-form select { height:48px; }.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--coral); box-shadow:0 0 0 2px rgba(235,91,62,.17); }.contact-submit { align-self:flex-end; background:var(--ink); color:var(--cream); min-width:190px; }.contact-submit span { color:var(--acid); }.contact-submit:hover { background:var(--coral); color:var(--ink); }.contact-honeypot { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }.form-flash { padding:13px 15px; border:1px solid var(--ink); font-size:13px; font-weight:700; }.form-flash.is-success { background:var(--mint); }.form-flash.is-error { background:#ffd2ca; }

.result-hero { padding: 55px clamp(22px, 5vw, 76px) 48px; background: var(--mint); border-bottom: 1px solid var(--ink); }
.back-link { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.result-title { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin: 60px 0 45px; }
.result-title h1 { font-size: clamp(38px, 5vw, 70px); max-width: 900px; }
.result-title > div > p:last-child { margin: 16px 0 0; color: rgba(21,19,16,.65); }
.result-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(21,19,16,.4); }
.result-meta div { padding: 22px 20px 0 0; display: flex; flex-direction: column; }
.result-meta small { font: 500 9px var(--mono); text-transform: uppercase; color: rgba(21,19,16,.55); letter-spacing: .1em; }
.result-meta strong { font-size: 15px; margin-top: 4px; overflow-wrap: anywhere; }
.chart-section { padding: 90px clamp(22px, 5vw, 76px) 110px; }
.section-heading.compact { margin-bottom: 40px; }.section-heading.compact h2 { font-size: clamp(35px, 3.8vw, 53px); }
.chart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.measure { min-height: 205px; background: var(--cream); padding: 20px; position: relative; display: flex; flex-direction: column; }
.measure:nth-child(8n+5), .measure:nth-child(8n+6), .measure:nth-child(8n+7), .measure:nth-child(8n+8) { background: var(--paper-2); }
.measure-top { display: flex; justify-content: space-between; color: rgba(21,19,16,.48); font: 500 10px var(--mono); }
.measure > strong { font: 700 clamp(29px, 3.1vw, 45px) var(--display); letter-spacing: -.06em; margin: auto 0; }
.section-tag { position: absolute; left: -1px; top: -25px; background: var(--ink); color: var(--acid); padding: 4px 10px; font: 500 8px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.note-ribbon { display: flex; width: 100%; height: 30px; gap: 2px; }
.note-ribbon i { flex-grow: var(--duration); flex-basis: 0; background: var(--mint); display: grid; place-items: center; font: normal 8px var(--mono); min-width: 0; overflow: hidden; }
.result-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 35px; }.result-actions form { margin: 0; }
.error-page { min-height: 65vh; padding: 100px clamp(22px, 10vw, 160px); }.error-page h1 { max-width: 900px; font-size: clamp(38px, 5vw, 67px); margin-bottom: 40px; }

@media (max-width: 1050px) {
  .genre-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 1fr; }.hero-art { min-height: 570px; border-left: 0; border-top: 1px solid var(--line); }.hero-copy { padding-top: 80px; }
  .vinyl { width: 360px; left: calc(50% - 180px); }
  .chart-grid { grid-template-columns: repeat(2, 1fr); }
  .epk-intro { grid-template-columns:1fr; }.epk-video { grid-template-columns:1fr; }.photo-grid { grid-template-columns:1.25fr 1fr; }.photo-grid a:last-child { grid-column:1/-1; min-height:350px; }.chartgem-orbit { left:-170px; }.epk-chartgem > div:last-child { width:62%; }
  .epk-contact { grid-template-columns:1fr; }.contact-copy { max-width:760px; }
}
@media (max-width: 760px) {
  .site-header { height:68px; position:sticky; top:0; background:var(--paper); z-index:30; }.nav-toggle { display:block; margin-left:auto; }.site-header nav { display:none; position:absolute; left:0; right:0; top:68px; padding:8px 22px 22px; background:var(--paper); border-bottom:1px solid var(--ink); box-shadow:0 14px 20px rgba(21,19,16,.12); flex-direction:column; align-items:stretch; gap:0; }.site-header.nav-open nav { display:flex; }.site-header nav a { display:block; padding:16px 2px; border-bottom:1px solid var(--line); font-size:14px; }.site-header nav .nav-pill { margin-top:10px; padding:13px 15px; text-align:center; border-radius:0; border-bottom:1px solid var(--ink); }.site-header.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.site-header.nav-open .nav-toggle span:nth-child(2) { opacity:0; }.site-header.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .hero { min-height: 0; }.hero-copy { padding: 65px 22px 72px; }.hero-art { min-height: 440px; }.vinyl { width: 270px; left: calc(50% - 135px); top: 15%; }
  .studio { padding-top: 72px; }.section-heading { display: block; }.section-heading > p { margin-top: 20px; }
  .genre-grid { grid-template-columns: 1fr 1fr; }.genre-card { min-height: 120px; padding: 15px; }
  .control-columns { grid-template-columns: 1fr; gap: 0; }.control-columns fieldset + fieldset { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .field-grid { grid-template-columns: 1fr; }.generate-row { align-items: stretch; flex-direction: column; }.generate-button { width: 100%; }
  .about { grid-template-columns: 1fr; }.site-footer { grid-template-columns: 1fr; }.footer-links { flex-wrap: wrap; }
  .result-title { align-items: flex-start; flex-direction: column; margin-top: 40px; }.result-meta { grid-template-columns: 1fr 1fr; }.chart-grid { grid-template-columns: 1fr; }.measure { min-height: 175px; }.section-tag { top: 0; right: 0; left: auto; }
  .result-actions { align-items: stretch; flex-direction: column; }.result-actions .button, .result-actions form, .result-actions form button { width: 100%; }
  .epk-hero { min-height:760px; }.epk-hero > img { object-position:58% center; }.epk-hero-shade { background:linear-gradient(0deg,rgba(15,13,12,.92),rgba(15,13,12,.18) 72%); }.epk-hero-copy { padding:70px 22px; }.epk-hero h1 { font-size:clamp(49px,15vw,78px); }.epk-stamp { width:90px;height:90px;right:20px;top:25px; }.epk-stamp span {font-size:20px}.epk-hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .epk-intro,.epk-music,.epk-video,.epk-photos,.epk-chartgem,.epk-contact { padding:80px 22px; }.epk-facts { grid-template-columns:1fr; }.epk-release-grid { grid-template-columns:1fr; }.epk-cover-card { margin-bottom:25px; }.photo-grid { grid-template-columns:1fr; }.photo-grid a,.photo-grid a:last-child { grid-column:auto; min-height:420px; }.epk-chartgem { justify-content:flex-start; padding-top:360px; }.chartgem-orbit { width:360px; top:180px; left:calc(50% - 180px); transform:none; }.epk-chartgem > div:last-child { width:100%; }.epk-video-copy { margin-bottom:10px; }
  .featured-songs { grid-template-columns:1fr; }.featured-song-secondary { display:grid; grid-template-columns:.8fr 1.2fr; }.featured-song-secondary > img { height:100%; }.catalog-links { justify-content:flex-start; flex-wrap:wrap; }
  .contact-field-row { grid-template-columns:1fr; }.contact-form { box-shadow:7px 7px 0 var(--ink); }.contact-submit { width:100%; }.epk-hero-actions .button { width:100%; max-width:330px; }
}
@media (max-width: 430px) {
  .genre-grid { grid-template-columns: 1fr; }.genre-card { min-height: 100px; }
  .result-meta { grid-template-columns: 1fr; }.result-meta div { border-bottom: 1px solid rgba(21,19,16,.16); padding-bottom: 12px; }
  .featured-song-secondary { display:flex; }.song-details { padding:21px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.vinyl { animation: none; }.button, .genre-card { transition: none; } }