:root{
  --bg:#0c1512; --bg-2:#10201b; --surface:#16241f; --line:#26382f;
  --text:#ece7db; --muted:#8fa398; --gold:#e8b23a; --gold-deep:#c8901f;
  --display:'Archivo',system-ui,sans-serif; --body:'Newsreader',Georgia,serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--gold-deep)}

/* Masthead */
.top{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 0; flex-wrap:wrap}
.mark{font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:20px; color:var(--text)}
.mark span{color:var(--gold)}
nav.beats{display:flex; gap:22px; font-family:var(--display); font-weight:600; font-size:14px}
nav.beats a{color:var(--muted)}
nav.beats a:hover,nav.beats a[aria-current=page]{color:var(--gold)}

/* Headings */
h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(38px,7vw,74px); line-height:1.02; margin:0 0 22px; max-width:16ch;
}
h1.tight{font-size:clamp(32px,5vw,52px); max-width:20ch}
h2{font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(26px,4vw,38px); margin:0 0 8px}
h3{font-family:var(--display); font-weight:600; font-size:20px; margin:0 0 6px}
.lede{font-size:clamp(18px,2.3vw,23px); color:#d6d2c6; max-width:54ch; margin:0 0 34px}
.lede b{color:var(--text); font-weight:500}
.sub{color:var(--muted); max-width:52ch; margin:0 0 40px}
.eyebrow{font-family:var(--display); font-weight:600; font-size:14px; color:var(--gold); margin:0 0 14px}

/* Hero */
.hero{position:relative; overflow:hidden; padding:56px 0 88px}
.hero.compact{padding:40px 0 56px}
.hero-glow{
  position:absolute; left:50%; bottom:-46%; transform:translateX(-50%);
  width:140%; height:80%; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, rgba(232,178,58,.30), rgba(232,178,58,.06) 40%, transparent 66%);
  filter:blur(6px);
}
.hero-line{position:absolute; left:0; right:0; bottom:20%; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); z-index:0}
.hero .wrap{position:relative; z-index:1}

/* Form */
form.signup{display:flex; gap:10px; flex-wrap:wrap; max-width:520px; margin:0}
.signup input[type=email]{
  flex:1 1 240px; min-width:0; padding:15px 16px; font-family:var(--body); font-size:17px;
  color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:8px;
}
.signup input::placeholder{color:#6f8279}
.signup input:focus-visible{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.signup button{
  flex:0 0 auto; padding:15px 24px; font-family:var(--display); font-weight:700; font-size:16px;
  color:#1a1408; background:var(--gold); border:0; border-radius:8px; cursor:pointer;
  transition:background .15s ease;
}
.signup button:hover{background:#f3bf50}
.signup button:disabled{opacity:.65; cursor:default}
.signup button:focus-visible{outline:2px solid var(--text); outline-offset:2px}
.fine{font-size:14px; color:var(--muted); margin:14px 0 0}
.formnote{font-size:15px; margin:14px 0 0; min-height:1.2em}
.formnote.err{color:#e79a86}
.done{max-width:520px}
.done h2{font-size:22px; margin:0 0 6px}
.done p{color:var(--muted); margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Stats band */
.stats{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2)}
.stats .wrap{display:flex; flex-wrap:wrap; gap:34px 46px; padding:34px 28px; align-items:flex-end}
.stat{min-width:120px}
.stat .n{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--gold); font-size:clamp(28px,4vw,38px)}
.stat .l{font-size:14px; color:var(--muted); margin-top:8px; max-width:20ch}
.stat.big .n{font-size:clamp(40px,6vw,60px)}

/* Sections + rows */
section.band{padding:78px 0 30px}
section.band.last{padding-bottom:88px}
.item{padding:26px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:150px 1fr; gap:20px}
.item:first-of-type{border-top:0}
.item .k{font-family:var(--display); font-weight:600; font-size:15px; color:var(--gold)}
.item p{margin:0; color:#cfcabd; max-width:62ch}
.item p + p{margin-top:10px}

/* Source cards */
.sources{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin:34px 0 0}
.src{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px}
.src h3{margin:0 0 8px; font-size:18px}
.src p{margin:0 0 14px; color:#cfcabd; font-size:16px}
.src .go{font-family:var(--display); font-weight:600; font-size:14px}

/* Panel + button */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:44px}
.panel p{color:#cfcabd; max-width:58ch; margin:0 0 26px}
.btn{display:inline-block; font-family:var(--display); font-weight:700; font-size:16px; padding:14px 26px;
  color:var(--gold); border:1px solid var(--gold); border-radius:8px; transition:.15s ease}
.btn:hover{background:var(--gold); color:#1a1408}

/* Footer */
footer{border-top:1px solid var(--line); padding:34px 0 48px; color:var(--muted); font-size:14px; margin-top:20px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between}
.disclaimer{max-width:64ch; line-height:1.5}
.pubby{color:var(--muted)}
.pubby a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.pubby a:hover{color:var(--gold)}

@media (max-width:640px){
  .item{grid-template-columns:1fr; gap:6px}
  .item .k{order:-1}
  .panel{padding:30px 24px}
  .top{gap:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
