/* ============================================
   ONE TAKE PRESS — DESIGN TOKENS
   ============================================ */
:root{
  /* -- color: base -- */
  --ink:        #15130F;   /* near-black warm ink — hero/nav/footer bg */
  --ink-2:      #201C16;   /* ink card / raised surface on ink */
  --paper:      #E7E2D4;   /* raw paper — main body bg */
  --paper-dim:  #DAD4C0;   /* card surface on paper */
  --paper-soft: #C9C3AE;   /* secondary text on ink */
  --ink-soft:   #55503F;   /* secondary text on paper */

  /* -- color: accent -- */
  --bruise:       #7A1630; /* primary accent — CTA / links / active */
  --bruise-hover: #971B3B;
  --bruise-press: #5E1024;
  --tape:         #B98A2E; /* secondary accent — labels, badges, stamps */
  --moss:         #4B5D45; /* approved / success */
  --moss-hover:   #5C7255;

  /* -- lines -- */
  --line-on-paper: #B7AE99;
  --line-on-ink:   #3A362E;

  /* -- type -- */
  --f-display: 'Anton', 'Arial Narrow', sans-serif;
  --f-body:    'Space Mono', 'Courier New', monospace;

  /* -- scale -- */
  --radius: 2px;           /* almost no rounding — cut, not softened */
  --gap: 24px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ============================================
   TEXTURE — xerox grain overlay (signature detail)
   ============================================ */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   TYPE SYSTEM
   ============================================ */
.h-display{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.92;
}
h1.h-display{font-size:clamp(40px,9vw,120px); overflow-wrap:break-word; word-break:break-word;}
h2.h-display{font-size:clamp(32px,5vw,56px);}
h3.h-display{font-size:clamp(20px,3vw,28px);}

.eyebrow{
  font-family:var(--f-body);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.eyebrow::before{content:"— ";}

/* ============================================
   NAV
   ============================================ */
header{
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--bruise);
  position:sticky; top:0; z-index:100;
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  max-width:1180px; margin:0 auto;
}
.logo{
  font-family:var(--f-display);
  font-size:20px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  display:flex; align-items:baseline; gap:6px;
}
.logo .press{color:var(--bruise); font-size:20px;}
.nav-links{display:flex; gap:32px; list-style:none;}
.nav-links a{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; color:var(--paper-soft);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover{color:var(--paper); border-color:var(--bruise);}
.nav-cta{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
}
.nav-burger{display:none; background:none; border:none; color:var(--paper); font-size:24px; cursor:pointer;}

/* ============================================
   BUTTONS — full state system
   ============================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-body); font-weight:700;
  font-size:13px; letter-spacing:0.10em; text-transform:uppercase;
  padding:14px 26px;
  border:2px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  text-decoration:none;
  transition:background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:3px solid var(--tape); outline-offset:2px;}

/* primary — bruise fill (Support, Submit) */
.btn-primary{background:var(--bruise); color:var(--paper);}
.btn-primary:hover{background:var(--bruise-hover);}
.btn-primary:active{background:var(--bruise-press);}
.btn-primary:disabled{background:#8a8577; color:#c9c3ae; cursor:not-allowed;}

/* secondary — outline on paper */
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-secondary:hover{background:var(--ink); color:var(--paper);}
.btn-secondary:active{background:var(--ink); opacity:0.85;}

/* ghost — for nav / low emphasis on dark */
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--line-on-ink);}
.btn-ghost:hover{border-color:var(--tape); color:var(--tape);}

/* success — approved state, used sparingly */
.btn-moss{background:var(--moss); color:var(--paper);}
.btn-moss:hover{background:var(--moss-hover);}

/* danger — reject state (admin) */
.btn-danger{background:transparent; color:var(--bruise); border-color:var(--bruise);}
.btn-danger:hover{background:var(--bruise); color:var(--paper);}

/* ============================================
   HERO
   ============================================ */
.hero{
  background:var(--ink); color:var(--paper);
  padding:96px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-80px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(122,22,48,0.35), transparent 70%);
}
.hero .wrap{position:relative; z-index:1;}
.hero-eyebrow{color:var(--tape); margin-bottom:18px; display:block;}
.hero h1{margin-bottom:22px;}
.hero h1 .accent{color:var(--bruise);}
.hero p.lede{
  font-size:18px; max-width:560px; color:var(--paper-soft);
  margin-bottom:36px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* impact strip — verifiable-only numbers (artist count, Support clicks), no invented $ totals */
.impact-strip{background:var(--ink-2); border-bottom:2px solid var(--line-on-ink); padding:12px 0;}
.impact-strip-inner{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-size:12px; letter-spacing:0.03em; color:var(--paper-soft); text-align:center;}
.impact-strip-inner strong{color:var(--tape); font-family:var(--f-display); font-weight:400; font-size:13px;}
.impact-strip .impact-sep{color:var(--line-on-ink);}

/* genre ticker — signature detail: scrolling flyer-style genre tape */
.genre-tape{
  background:var(--bruise); color:var(--paper);
  overflow:hidden; white-space:nowrap;
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
}
.genre-tape-inner{
  display:inline-block; padding:10px 0;
  animation:ticker 32s linear infinite;
  font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
}
.genre-tape-inner span{margin:0 22px;}
.genre-tape-inner span::after{content:"//"; margin-left:22px; color:var(--tape);}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================
   SECTION SCAFFOLDING
   ============================================ */
section{padding:80px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:44px; flex-wrap:wrap;
}
.section-head .eyebrow{color:var(--bruise); display:block; margin-bottom:10px;}

/* ============================================
   SEARCH BAR — discovery by "sounds like" reference
   ============================================ */
.search-bar{
  position:relative;
  margin-bottom:12px;
}
.search-icon{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-size:18px; color:var(--ink-soft); pointer-events:none;
}
.search-bar input{
  width:100%; font-family:var(--f-body); font-size:15px;
  background:var(--paper-dim); border:2px solid var(--ink);
  padding:16px 18px 16px 46px; color:var(--ink); border-radius:var(--radius);
  transition:border-color .12s ease, background .12s ease;
}
.search-bar input:focus{outline:none; background:#fff; border-color:var(--bruise);}
.search-bar input::placeholder{color:var(--ink-soft);}
.search-hint{font-size:12px; color:var(--ink-soft); margin-bottom:28px;}

.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.chip{
  font-family:var(--f-body); font-size:12px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:9px 16px;
  background:transparent; border:2px solid var(--line-on-paper);
  border-radius:20px; cursor:pointer; color:var(--ink-soft);
  transition:all .12s ease;
}
.chip:hover{border-color:var(--ink); color:var(--ink);}
.chip.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.chip.active::before{content:"✓ ";}

/* ============================================
   ARTIST CARD GRID
   ============================================ */
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap);
}
.empty-state{
  border:2px dashed var(--line-on-paper); padding:44px; text-align:center;
  color:var(--ink-soft); font-size:14px;
}
.card{
  background:var(--paper-dim);
  border:2px solid var(--ink);
  position:relative;
  scroll-margin-top:90px;
  /* torn-edge signature cut on bottom */
  clip-path:polygon(0 0,100% 0,100% 97%,97% 100%,92% 97%,86% 100%,80% 97%,74% 100%,68% 97%,62% 100%,56% 97%,50% 100%,44% 97%,38% 100%,32% 97%,26% 100%,20% 97%,14% 100%,8% 97%,2% 100%,0 97%);
  padding-bottom:14px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card.pulse{animation:pulse-highlight 1.6s ease 1;}
@keyframes pulse-highlight{
  0%{box-shadow:0 0 0 0 rgba(122,22,48,0.5);}
  100%{box-shadow:0 0 0 14px rgba(122,22,48,0);}
}
.card:hover{transform:translateY(-4px) rotate(-0.3deg); box-shadow:6px 8px 0 rgba(21,19,15,0.15);}

/* ============================================
   RANDOM PICK WIDGET
   ============================================ */
.roulette{
  background:var(--ink); color:var(--paper);
  border:2px solid var(--bruise);
  padding:22px 24px;
  margin-bottom:36px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
}
.roulette-info{flex:1; min-width:240px;}
.roulette-label{
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--tape); margin-bottom:8px;
}
.roulette-track{font-family:var(--f-display); font-size:22px; text-transform:uppercase; margin-bottom:4px;}
.roulette-artist{font-size:13px; color:var(--paper-soft); margin-bottom:6px;}
.roulette-tags{font-size:11px; color:var(--tape);}
.roulette-actions{display:flex; gap:10px; flex-shrink:0;}

.card-media{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-bottom:2px solid var(--ink);
  background:var(--ink);
}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15);
  mix-blend-mode:luminosity;
}
.card-media.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, #2A241E 0, #2A241E 2px, #15130F 2px, #15130F 14px);
}
.card-media.placeholder span{
  font-family:var(--f-display); font-size:13px; color:var(--paper-soft);
  opacity:0.5; letter-spacing:0.1em; text-transform:uppercase;
}
.card-media::after{
  /* duotone bruise overlay — halftone feel */
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(122,22,48,0.55), rgba(21,19,15,0.25));
  mix-blend-mode:multiply;
}
.badge-stamp{
  position:absolute; top:10px; right:10px; z-index:2;
  border:2px solid var(--tape); color:var(--tape);
  background:rgba(21,19,15,0.55);
  font-family:var(--f-display); font-size:11px; letter-spacing:0.08em;
  padding:4px 8px; transform:rotate(6deg);
  text-transform:uppercase;
}
.card-genre{
  position:absolute; bottom:10px; left:10px; z-index:2;
  background:var(--ink); color:var(--paper);
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 8px;
}
/* authenticity stamp — anti-AI positioning made visible on every card */
.badge-human{
  position:absolute; top:10px; left:10px; z-index:2;
  border:1px solid var(--tape); color:var(--tape);
  background:rgba(21,19,15,0.55);
  font-family:var(--f-body); font-weight:700; font-size:9px; letter-spacing:0.08em;
  padding:3px 7px; text-transform:uppercase;
}
.card-genre-new{color:var(--tape); margin-left:4px;}
/* lightweight reaction counter — social proof without an account or vote system */
.react-btn{
  background:none; border:none; color:var(--paper-soft); font-size:11px;
  cursor:pointer; padding:4px 6px; display:flex; align-items:center; gap:4px;
  flex-shrink:0; transition:color .12s ease;
}
.react-btn:hover{color:var(--tape);}
.react-btn.reacted{color:var(--bruise);}
.card-body{padding:18px 18px 6px;}
.card-title{font-family:var(--f-display); font-size:20px; text-transform:uppercase; margin-bottom:4px;}
.card-title a{text-decoration:none; color:inherit;}
.card-title a:hover{color:var(--bruise);}
.card-artist{font-size:13px; color:var(--ink-soft); margin-bottom:4px;}
.card-tags{font-size:11px; color:var(--tape); margin-bottom:14px; letter-spacing:0.01em;}
.card-player{
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper);
  padding:10px 12px; margin-bottom:14px;
  font-size:11px; letter-spacing:0.05em;
}
.play-icon{
  width:26px; height:26px; border-radius:50%;
  background:var(--bruise); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; cursor:pointer;
}
.waveform{flex:1; height:16px; display:flex; align-items:flex-end; gap:2px;}
.waveform i{width:2px; background:var(--paper-soft); display:block;}
.card-actions{display:flex; gap:8px;}
.card-actions .btn{flex:1; padding:10px 14px; font-size:11px;}

/* featured card variant */
.card.featured{border-color:var(--bruise); border-width:3px;}
.card.featured .badge-stamp{border-color:var(--bruise); color:var(--paper); background:var(--bruise);}

/* ============================================
   HOW IT WORKS
   ============================================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);}
.step{border-left:3px solid var(--bruise); padding-left:18px;}
.step .num{font-family:var(--f-display); font-size:34px; color:var(--tape); display:block; margin-bottom:8px;}
.step h3{margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft);}

/* ============================================
   MANIFEST / DARK BAND
   ============================================ */
.manifest{background:var(--ink); color:var(--paper-soft);}
.manifest .wrap{max-width:820px;}
.manifest p{font-size:20px; line-height:1.7; margin-bottom:18px;}
.manifest p strong{color:var(--paper); font-weight:700;}
.manifest .sig{font-family:var(--f-display); color:var(--bruise); font-size:15px; letter-spacing:0.1em; margin-top:28px;}

/* ============================================
   LEGAL / TEXT PAGES (Privacy, Terms, Rules)
   ============================================ */
.legal .wrap{max-width:760px;}
.legal h2.h-display{margin-bottom:28px;}
.legal h3{font-family:var(--f-display); font-size:18px; text-transform:uppercase; margin:32px 0 12px; color:var(--bruise);}
.legal p, .legal li{font-size:14px; line-height:1.7; color:var(--ink-soft); margin-bottom:14px;}
.legal ul{padding-left:20px; margin-bottom:14px;}
.legal .updated{font-size:12px; color:var(--ink-soft); margin-bottom:32px;}

/* ============================================
   SUBMISSION FORM
   ============================================ */
.form-shell{
  background:var(--paper-dim);
  border:2px solid var(--ink);
  padding:44px;
}
.form-section{margin-bottom:40px; padding-bottom:36px; border-bottom:2px dashed var(--line-on-paper);}
.form-section:last-of-type{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.form-section-title{
  font-family:var(--f-display); font-size:18px; text-transform:uppercase;
  color:var(--bruise); margin-bottom:6px; letter-spacing:0.03em;
}
.form-section-sub{font-size:12px; color:var(--ink-soft); margin-bottom:22px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.field{margin-bottom:20px;}
.field:last-child{margin-bottom:0;}
.field label{
  display:block; font-size:12px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; margin-bottom:8px;
}
.field label .req{color:var(--bruise);}
.field label .opt{color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0;}
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field select, .field textarea{
  width:100%; font-family:var(--f-body); font-size:14px;
  background:var(--paper); border:2px solid var(--line-on-paper);
  padding:12px 14px; color:var(--ink); border-radius:var(--radius);
  transition:border-color .12s ease, background .12s ease;
}
.field input[type="file"]{
  width:100%; font-family:var(--f-body); font-size:13px;
  background:var(--paper); border:2px solid var(--line-on-paper);
  padding:10px 12px; color:var(--ink); border-radius:var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--bruise); background:#fff;
}
.field textarea{resize:vertical; min-height:80px;}
.field .hint{font-size:11px; color:var(--ink-soft); margin-top:6px;}
.field .counter{font-size:11px; color:var(--ink-soft); text-align:right; margin-top:4px;}

.genre-select-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.genre-radio{
  border:2px solid var(--line-on-paper); padding:10px 12px; font-size:12px;
  cursor:pointer; text-align:center; transition:all .12s ease; position:relative;
}
.genre-radio input{position:absolute; opacity:0; pointer-events:none;}
.genre-radio:has(input:checked){background:var(--ink); color:var(--paper); border-color:var(--ink);}
.genre-radio:hover{border-color:var(--ink);}

.checkline{display:flex; gap:12px; align-items:flex-start; margin-bottom:16px;}
.checkline:last-child{margin-bottom:0;}
.checkline input[type="checkbox"]{
  width:20px; height:20px; flex-shrink:0; margin-top:2px;
  accent-color:var(--bruise); cursor:pointer;
}
.checkline label{font-size:13px; line-height:1.5; cursor:pointer;}
.checkline label .req{color:var(--bruise); font-weight:700;}

.ai-disclosure{
  background:var(--paper); border:2px solid var(--tape);
  padding:16px; margin-top:14px;
}
.ai-disclosure-title{font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--tape); margin-bottom:10px;}
.radio-inline{display:flex; gap:20px; margin-bottom:12px;}
.radio-inline label{display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;}
.radio-inline input{accent-color:var(--bruise); cursor:pointer;}

.form-submit-row{
  display:flex; justify-content:space-between; align-items:center; margin-top:40px; flex-wrap:wrap; gap:16px;
}
.sla-note{font-size:12px; color:var(--ink-soft);}

.error-banner{
  background:var(--paper); border:2px solid var(--bruise); color:var(--bruise);
  padding:16px 20px; margin-bottom:32px; font-size:13px; font-weight:700;
}
.cf-turnstile{margin-top:14px;}

/* ============================================
   PRE-SUBMIT NOTE
   ============================================ */
.pre-submit-note{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--paper); border:1px dashed var(--line-on-paper);
  padding:14px 16px; margin-top:24px;
}
.pre-submit-icon{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background:var(--tape); color:var(--ink);
  font-family:var(--f-display); font-size:12px; font-weight:bold;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.pre-submit-note p{font-size:12px; color:var(--ink-soft); line-height:1.5;}

/* ============================================
   SUBMISSION AGREEMENT MODAL
   ============================================ */
.modal-overlay{
  display:none;
  position:fixed; inset:0; z-index:500;
  background:rgba(21,19,15,0.72);
  align-items:center; justify-content:center;
  padding:24px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--paper); border:2px solid var(--ink);
  max-width:600px; width:100%; max-height:86vh;
  display:flex; flex-direction:column;
  box-shadow:8px 10px 0 rgba(21,19,15,0.25);
}
.modal-header{background:var(--ink); color:var(--paper); padding:24px 28px;}
.modal-body{padding:24px 28px; overflow-y:auto; flex:1;}
.modal-item{display:flex; gap:12px; margin-bottom:16px; align-items:flex-start;}
.modal-item:last-child{margin-bottom:0;}
.modal-check{
  width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:1px;
  background:var(--moss); color:var(--paper);
  font-size:11px; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
}
.modal-item p{font-size:13px; line-height:1.55; color:var(--ink);}
.modal-confirm-line{
  display:flex; gap:10px; align-items:flex-start;
  padding:18px 28px; border-top:1px dashed var(--line-on-paper);
}
.modal-confirm-line input{width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--bruise); cursor:pointer;}
.modal-confirm-line label{font-size:13px; font-weight:700; cursor:pointer;}
.modal-actions{
  display:flex; justify-content:flex-end; gap:12px;
  padding:18px 28px; border-top:2px solid var(--ink);
}
.modal-actions .btn:disabled{opacity:0.4; cursor:not-allowed;}

/* ============================================
   THANKS PAGE
   ============================================ */
.thanks{background:var(--ink); color:var(--paper); text-align:center;}
.thanks .wrap{max-width:600px;}
.thanks h2{margin:20px 0 18px;}
.thanks p{font-size:15px; color:var(--paper-soft); margin-bottom:12px; line-height:1.6;}

/* ============================================
   ADMIN QUEUE
   ============================================ */
.admin-item{
  background:var(--paper-dim); border:2px solid var(--ink);
  padding:24px; margin-bottom:20px;
}
.admin-item-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
.admin-item h3{font-family:var(--f-display); font-size:20px; text-transform:uppercase;}
.admin-item .meta{font-size:12px; color:var(--ink-soft); margin-bottom:4px;}
.admin-item dl{display:grid; grid-template-columns:140px 1fr; gap:6px 12px; font-size:13px; margin:14px 0;}
.admin-item dt{color:var(--ink-soft); font-weight:700;}
.admin-item dd{word-break:break-word;}
.admin-actions{display:flex; gap:10px; margin-top:16px;}
.admin-actions form{display:inline;}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .field-row{grid-template-columns:1fr;}
  .genre-select-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-burger{display:block;}
  .grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .genre-select-grid{grid-template-columns:1fr;}
  .form-shell{padding:24px;}
  .section-head{flex-direction:column; align-items:flex-start;}
  h1.h-display{font-size:13vw;}
  .hero{padding:64px 0 48px;}
  section{padding:56px 0;}
  .admin-item dl{grid-template-columns:110px 1fr;}
}

/* ============================================
   FOOTER / STICKY NOW-PLAYING BAR
   ============================================ */
.now-playing-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--ink); color:var(--paper);
  border-top:3px solid var(--bruise);
  padding:14px 24px;
  display:flex; align-items:center; gap:18px;
  transform:translateY(110%);
  transition:transform .28s ease;
}
.now-playing-bar.visible{transform:translateY(0);}
.np-indicator{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--bruise); display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer;
}
.np-dot{width:7px; height:7px; border-radius:50%; background:var(--tape); animation:np-pulse 1.2s ease infinite;}
@keyframes np-pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
.np-info{flex:1; min-width:0;}
.np-track{font-family:var(--f-display); font-size:15px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-artist{font-size:12px; color:var(--paper-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.np-close{
  background:none; border:none; color:var(--paper-soft); font-size:18px;
  cursor:pointer; padding:4px 8px; line-height:1;
}
.np-close:hover{color:var(--paper);}
@media (max-width:640px){
  .now-playing-bar{padding:10px 14px; gap:10px;}
  .np-track{font-size:13px;}
  .np-actions .btn{padding:8px 12px; font-size:10px;}
}

footer{background:var(--ink); color:var(--paper-soft); padding:56px 0 32px; border-top:3px solid var(--bruise);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.footer-grid h4{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper); margin-bottom:14px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:8px;}
.footer-grid a{text-decoration:none; font-size:13px; color:var(--paper-soft); transition:color .12s ease;}
.footer-grid a:hover{color:var(--tape);}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:24px;
  border-top:1px solid var(--line-on-ink); font-size:11px; color:var(--line-on-ink);
  flex-wrap:wrap; gap:12px;
}