/* ============================================================
   Dave Geschwind — "Clean Beautiful Coal" power-exec roast.
   Coal black · sunset · ember orange · high-voltage yellow. No green.
   ============================================================ */
:root{
  --coal0:#0d0a12; --coal1:#161020; --coal2:#241a2c; --smoke:#cdbfd0; --soot:#9a8ca2;
  --ember:#ff7a18; --ember2:#ffae42; --hv:#ffd400; --sunset:#d6452c; --magenta:#b0476e; --gold:#d4af37;
  --ink:#f2e9ef; --muted:#bca8c4; --card:rgba(180,150,200,.07); --brd:rgba(200,170,215,.16); --maxw:1040px;
  --haz: repeating-linear-gradient(45deg, var(--hv) 0 20px, #15121a 20px 40px);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:'Oswald',system-ui,sans-serif; color:var(--ink); min-height:100dvh; overflow-x:hidden;
  background:
    radial-gradient(1100px 720px at 12% -10%, rgba(176,71,110,.20), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(255,122,24,.14), transparent 55%),
    linear-gradient(180deg, var(--coal0), var(--coal1) 60%, #0a0710);
  background-attachment:fixed; -webkit-font-smoothing:antialiased}
canvas#bg,canvas#fx{position:fixed; inset:0; width:100vw; height:100dvh; z-index:0; pointer-events:none}
canvas#fx{z-index:60}
.wires-top{position:fixed; top:0; left:0; width:100vw; height:54px; z-index:35; pointer-events:none; opacity:.85}
main{position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:0 18px 90px}

.topbar{position:relative; z-index:20; max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:26px 18px 0; gap:10px}
.brand{font-weight:700; letter-spacing:.18em; font-size:.74rem; color:var(--hv); text-transform:uppercase}
.controls{display:flex; gap:8px}
.chip{font-family:'Oswald',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.04em; color:var(--ink);
  background:var(--card); border:1px solid var(--brd); border-radius:7px; padding:8px 13px; cursor:pointer; backdrop-filter:blur(6px); transition:.2s}
.chip:hover{border-color:var(--ember); box-shadow:0 0 14px rgba(255,122,24,.35)}
.chip[aria-pressed="true"]{border-color:var(--ember2); color:var(--ember2)}

/* ---------- HERO ---------- */
.hero{text-align:center; padding:22px 0 6px}
.eyebrow{display:inline-block; font-weight:700; letter-spacing:.3em; font-size:.84rem; color:var(--coal0);
  background:linear-gradient(90deg,var(--ember2),var(--hv)); padding:7px 18px; border-radius:4px; text-transform:uppercase;
  box-shadow:0 0 26px rgba(255,174,66,.45)}
.title{font-family:'Anton',sans-serif; line-height:.84; margin:18px 0 0; letter-spacing:.01em; text-transform:uppercase; font-size:clamp(3.2rem,15vw,8.5rem)}
.title .l1{display:block; color:var(--smoke); text-shadow:0 4px 0 #0a0710, 0 0 44px rgba(176,71,110,.5)}
.title .l2{display:block; color:var(--ember); -webkit-text-stroke:2px #0a0710; text-shadow:0 0 44px rgba(255,122,24,.5)}

/* THE PHOTO — predominant */
.hero-photo{margin:24px auto 0; max-width:900px; padding:9px; border-radius:14px;
  background:linear-gradient(160deg,#2a1d34,#161020); border:1px solid rgba(255,255,255,.07);
  box-shadow:0 30px 70px rgba(0,0,0,.65), 0 0 0 4px rgba(255,122,24,.35)}
.hero-photo img{display:block; width:100%; height:auto; border-radius:9px}
.who{font-family:'Share Tech Mono',monospace; font-size:clamp(.9rem,2.6vw,1.1rem); color:var(--muted); margin:16px 0 0; letter-spacing:.04em}
.who b{color:var(--gold); font-weight:700}
.subtitle{font-size:clamp(1rem,3.4vw,1.35rem); color:var(--muted); margin:.5em auto 0; max-width:740px; line-height:1.5}
.subtitle i{color:var(--ember2); font-style:italic}

/* ---------- counter (control-room gauges) ---------- */
.counter-wrap{margin:38px auto 0; max-width:760px; text-align:center}
.counter-label{font-family:'Share Tech Mono',monospace; letter-spacing:.2em; font-size:.82rem; color:var(--hv); margin-bottom:14px; text-shadow:0 0 12px rgba(255,212,0,.4)}
.counter{display:flex; gap:clamp(8px,2vw,18px); justify-content:center}
.unit{flex:1 1 0; max-width:178px; text-align:center}
.num{font-family:'Anton',sans-serif; font-variant-numeric:tabular-nums; font-size:clamp(2.2rem,9.5vw,5.2rem); line-height:1;
  color:var(--ember2); padding:14px 6px; border-radius:10px; background:linear-gradient(180deg,#0a0710,#1a1226); border:2px solid #3a2740;
  box-shadow:inset 0 0 24px rgba(255,122,24,.16), inset 0 2px 8px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.5);
  text-shadow:0 0 8px rgba(255,174,66,.8), 0 0 22px rgba(255,122,24,.5)}
.lab{margin-top:9px; font-family:'Share Tech Mono',monospace; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.num.tick{animation:flip .45s ease}
@keyframes flip{0%{transform:translateY(-5px) scaleY(1.08); color:#fff}100%{transform:none}}
.cta-row{margin:26px 0 0}
.btn-fire{font-family:'Anton',sans-serif; font-size:1.1rem; color:var(--coal0); letter-spacing:.03em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--ember2),var(--ember)); border:0; border-bottom:4px solid #a04200; border-radius:10px;
  padding:15px 30px; cursor:pointer; box-shadow:0 0 30px rgba(255,122,24,.5); transition:.12s}
.btn-fire:hover{transform:translateY(-2px)} .btn-fire:active{transform:translateY(2px); border-bottom-width:1px}

/* ---------- POWER PLANT scene ---------- */
.scene-wrap{position:relative; margin:44px 0 0; border-radius:14px; overflow:hidden; border:1px solid var(--brd); box-shadow:0 16px 40px rgba(0,0,0,.5)}
.scene-label{position:absolute; top:0; left:0; right:0; z-index:4; font-family:'Share Tech Mono',monospace; font-size:.7rem; letter-spacing:.08em; color:var(--hv); background:rgba(10,7,16,.6); padding:7px 14px; border-bottom:1px solid var(--brd)}
.scene-bg{display:block; width:100%; height:auto}
.smoke{position:absolute; z-index:2; width:48px; height:48px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(214,205,214,.6), rgba(180,170,185,0) 70%); filter:blur(3px);
  animation:plume 3.6s ease-out infinite}
@keyframes plume{0%{transform:translateY(0) scale(.5); opacity:0}18%{opacity:.7}100%{transform:translateY(-130px) scale(2.3); opacity:0}}
.s1{left:15%; top:30%} .s2{left:42%; top:23%; animation-delay:1.2s} .s3{left:48%; top:30%; animation-delay:2.3s}
.track{position:absolute; left:0; right:0; bottom:0; height:64px; z-index:3; background:linear-gradient(180deg, transparent, rgba(8,6,12,.85) 40%)}
.rail{position:absolute; left:0; right:0; bottom:16px; height:4px; background:repeating-linear-gradient(90deg,#3a2c14 0 18px,#1a130a 18px 24px); box-shadow:0 2px 0 #0a0710}
.car{position:absolute; bottom:8px; left:-14%; z-index:3; filter:drop-shadow(0 4px 5px rgba(0,0,0,.6)); will-change:left;
  animation-name:roll; animation-timing-function:linear; animation-iteration-count:infinite}
@keyframes roll{from{left:-14%}to{left:114%}}

/* ---------- stats (the roast) ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:13px; margin:48px auto; max-width:960px}
.stat{background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:18px 14px; text-align:center; position:relative; overflow:hidden; backdrop-filter:blur(7px); transition:.2s}
.stat::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--haz); opacity:.7}
.stat:hover{transform:translateY(-3px); border-color:var(--ember)}
.stat .emoji{font-size:1.7rem}
.stat .big{font-family:'Anton',sans-serif; font-size:1.7rem; color:var(--ember2); margin:.1em 0; font-variant-numeric:tabular-nums; text-shadow:0 0 16px rgba(255,174,66,.3)}
.stat .cap{font-size:.8rem; color:var(--muted); line-height:1.3; text-transform:uppercase; letter-spacing:.03em}

/* ---------- guestbook ---------- */
.sect-title{font-family:'Anton',sans-serif; text-align:center; color:var(--smoke); font-size:clamp(1.7rem,6vw,2.6rem); margin:0; text-transform:uppercase}
.wishes{max-width:760px; margin:58px auto 0}
.wishes-sub{text-align:center; color:var(--muted); margin:.4em 0 1.3em}
.wishes-sub span{color:var(--ember2)}
.wish-form{background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:18px; backdrop-filter:blur(8px)}
.wish-name,.wish-msg{width:100%; font-family:'Oswald',sans-serif; color:var(--ink); background:rgba(0,0,0,.35); border:1px solid var(--brd); border-radius:8px; padding:11px 13px; font-size:1rem; margin-bottom:10px; resize:vertical}
.wish-name:focus,.wish-msg:focus{outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,122,24,.2)}
.wish-msg{min-height:80px}
.wish-actions{display:flex; align-items:center; justify-content:space-between}
.wish-counter{font-family:'Share Tech Mono',monospace; font-size:.74rem; color:var(--muted)}
.btn-post{font-family:'Anton',sans-serif; font-size:.92rem; color:var(--coal0); background:linear-gradient(180deg,var(--ember2),var(--ember)); border:0; border-radius:8px; padding:11px 22px; cursor:pointer; text-transform:uppercase}
.btn-post:hover{filter:brightness(1.05)} .btn-post:disabled{opacity:.5}
.wish-status{font-family:'Share Tech Mono',monospace; font-size:.8rem; margin-top:8px; min-height:1.1em; color:var(--ember2)}
.wish-status.err{color:var(--sunset)}
.wish-wall{margin-top:22px; columns:2; column-gap:14px}
@media (max-width:560px){.wish-wall{columns:1}}
.wish-card{break-inside:avoid; margin:0 0 14px; padding:14px 16px; border-radius:12px; animation:rise .5s ease both;
  background:var(--card); border:1px solid var(--brd); border-left:4px solid var(--ember)}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.wish-card .msg{font-size:1rem; line-height:1.45}
.wish-card .who{margin-top:8px; font-size:.82rem; color:var(--ember2); font-weight:700; font-family:'Oswald',sans-serif; letter-spacing:0}
.wish-card .when{color:var(--muted); font-weight:400; font-family:'Share Tech Mono',monospace}
.foot{text-align:center; color:var(--muted); margin-top:54px; font-size:.85rem; letter-spacing:.04em}

/* ---------- finale ---------- */
.retired-overlay{position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:radial-gradient(closest-side,rgba(20,14,30,.55),rgba(8,6,12,.96))}
.retired-overlay[hidden]{display:none}
.retired-card{text-align:center; padding:28px}
.stamp{font-family:'Anton',sans-serif; font-size:clamp(2.6rem,13vw,7.5rem); color:var(--ember); text-transform:uppercase;
  border:.13em solid var(--ember); border-radius:14px; padding:.06em .2em; transform:rotate(-7deg); display:inline-block;
  text-shadow:0 0 30px rgba(255,122,24,.5); box-shadow:0 0 44px rgba(255,122,24,.35); letter-spacing:.02em}
.retired-sub{font-size:1.25rem; color:var(--smoke); margin:1em 0 1.1em}

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