
:root{
  --bg:#0a0c12;--ink:#f4f6fb;--muted:#9aa6b8;
  --line:rgba(244,246,251,.12);--mag:#f72585;--mag2:#ff7ab8;--volt:#4cc9f0;
  --font:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --display:Syne,ui-sans-serif,system-ui,sans-serif;
  --page:min(640px,calc(100% - 2rem));
  --wide:min(960px,calc(100% - 2rem));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);line-height:1.65;text-align:center;
  padding-bottom:7rem;
  background:
    radial-gradient(800px 480px at 50% -8%,rgba(247,37,133,.2),transparent 55%),
    radial-gradient(600px 400px at 50% 35%,rgba(76,201,240,.08),transparent 50%),
    var(--bg);
}
a{color:var(--mag2);text-underline-offset:3px}
a:hover{color:#ffd0e6}
img{max-width:100%;height:auto;display:block}

.top{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);
  background:rgba(10,12,18,.94);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem 1.1rem;padding:.85rem 0;width:var(--wide);margin:0 auto}
.brand{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand b{color:var(--mag)}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem .7rem}
.nav a{color:var(--muted);text-decoration:none;font-size:.9rem;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a.nav-hide-sm{display:inline}
.btn,.cta{display:inline-flex;align-items:center;justify-content:center;
  padding:.72rem 1.2rem;border-radius:.65rem;font-weight:750;text-decoration:none;border:0;
  background:linear-gradient(135deg,var(--mag),#c01668);color:#fff}
.btn:hover,.cta:hover{filter:brightness(1.06);color:#fff}

/* HOME — Boothgrid (centered) */
.stage{display:flex;flex-direction:column;align-items:center;gap:1.35rem;
  width:var(--wide);margin:0 auto;padding:clamp(1.4rem,4vw,2.6rem) 0 1.2rem;text-align:center}
.stage-copy{width:min(36rem,100%)}
.stage-copy h1{font-family:var(--display);font-size:clamp(2.5rem,5.5vw,3.6rem);line-height:1.02;
  letter-spacing:-.03em;margin:0 0 .65rem}
.stage-copy .lead{color:var(--muted);font-size:1.06rem;margin:0 auto 1.15rem;max-width:34rem}
.age{margin-top:.8rem;color:var(--muted);font-size:.88rem}

.boothgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;
  width:min(520px,100%);margin:0 auto;
}
.booth{
  position:relative;aspect-ratio:3/4;border-radius:.9rem;overflow:hidden;
  border:1px solid rgba(247,37,133,.35);background:#12161f;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.booth img{width:100%;height:100%;object-fit:cover}
.booth .live{position:absolute;left:.45rem;top:.45rem;font-size:.68rem;font-weight:700;
  letter-spacing:.04em;background:var(--mag);color:#fff;padding:.18rem .4rem;border-radius:.3rem}
.booth .tag{position:absolute;left:.45rem;bottom:.45rem;font-size:.72rem;
  background:rgba(0,0,0,.55);color:#fff;padding:.18rem .4rem;border-radius:.3rem}

.lanes{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem .9rem;
  width:var(--page);margin:0 auto;padding:1rem 0 1.3rem;border-bottom:1px solid var(--line)}
.lanes a{color:var(--muted);text-decoration:none;font-size:.92rem;padding:.2rem 0;border-bottom:2px solid transparent}
.lanes a:hover,.lanes a.on{color:var(--ink);border-bottom-color:var(--mag)}

.pulses{width:var(--page);margin:1.4rem auto 0}
.pulse{padding:1.15rem 0;border-bottom:1px solid var(--line);text-align:center}
.pulse .dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--volt);
  box-shadow:0 0 0 .25rem rgba(76,201,240,.2);margin-right:.45rem;vertical-align:middle}
.pulse h2{font-family:var(--display);font-size:1.28rem;margin:.35rem 0}
.pulse p{margin:0 auto;color:var(--muted);max-width:36rem}

.home-prose{width:var(--page);margin:1.25rem auto 1.4rem;text-align:center}
.home-prose h2{font-family:var(--display);font-size:1.45rem;margin:1.4rem 0 .5rem}
.home-prose p,.home-prose li{color:var(--muted)}
.home-prose ul{list-style:none;padding:0}
.home-prose li{margin:.4rem 0}
.home-prose details{border:1px solid var(--line);border-radius:.5rem;padding:.65rem .85rem;margin:.5rem 0;background:rgba(255,255,255,.02);text-align:left}
.home-prose summary{cursor:pointer;color:var(--ink);font-weight:650}

.cta-band{width:var(--page);margin:1rem auto 1.6rem;padding:1.35rem;border:1px solid var(--line);
  border-radius:1rem;background:linear-gradient(120deg,rgba(247,37,133,.14),rgba(76,201,240,.08))}
.cta-band h2{font-family:var(--display);margin:0 0 .4rem;font-size:1.4rem}
.cta-band p{color:var(--muted);margin:0 auto 1rem;max-width:32rem}

/* INNER */
.banner{position:relative;height:clamp(150px,20vw,230px);overflow:hidden;border-bottom:1px solid var(--line)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(10,12,18,.92))}

.layout{display:flex;flex-direction:column;align-items:center;width:var(--wide);margin:0 auto;padding:1.2rem 0 2rem;gap:1rem}
.rail{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .75rem;width:100%;max-width:40rem;
  padding:0 0 .85rem;border-bottom:1px solid var(--line)}
.rail p{width:100%;margin:0 0 .25rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rail a{color:var(--muted);text-decoration:none;font-size:.88rem;padding:.2rem .1rem;border-bottom:2px solid transparent}
.rail a.on,.rail a:hover{color:var(--ink);border-bottom-color:var(--mag)}

.prose{width:var(--page);margin:0 auto;text-align:center}
.prose h1{font-family:var(--display);font-size:clamp(1.9rem,3.5vw,2.5rem);margin:.1rem 0 .4rem}
.prose .lead{color:var(--muted);font-size:1.05rem;margin:0 auto .9rem;max-width:36rem}
.prose .crumb{font-size:.85rem;color:var(--muted);margin:0 0 .35rem}
.prose .crumb a{color:var(--muted);text-decoration:none}
.prose .cta-line{margin:.2rem 0 1rem}
.prose h2{font-family:var(--display);font-size:1.35rem;margin:1.45rem 0 .45rem}
.prose h3{font-size:1.05rem;margin:1rem 0 .3rem}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{list-style:none;padding:0;text-align:center}
.prose li{margin:.4rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem;text-align:left}
.prose th,.prose td{border:1px solid var(--line);padding:.5rem .6rem;vertical-align:top}
.prose th{background:rgba(247,37,133,.12);color:var(--ink)}
.prose blockquote{margin:1rem auto;padding:.85rem 1rem;border-left:3px solid var(--mag);max-width:36rem;
  background:rgba(255,255,255,.03);color:var(--ink);font-family:var(--display);text-align:left}
.prose details{border:1px solid var(--line);border-radius:.5rem;padding:.65rem .85rem;margin:.5rem auto;background:rgba(255,255,255,.02);text-align:left;max-width:36rem}
.prose summary{cursor:pointer;color:var(--ink);font-weight:650}
.more{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;list-style:none;padding:0;margin:.5rem 0 0}
.more a{text-decoration:none}

.site{border-top:1px solid var(--line);padding:1.1rem 0 1.4rem;color:var(--muted);font-size:.88rem}
.site .row{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;justify-content:center;width:var(--wide);margin:0 auto}
.site a{color:var(--muted)}

.ic-fab{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:50;
  padding:.8rem 1.35rem;border-radius:.65rem;min-width:min(280px,calc(100% - 2rem));
  background:linear-gradient(135deg,var(--mag),#c01668);color:#fff;font-weight:800;text-decoration:none;
  box-shadow:0 10px 28px rgba(247,37,133,.4)}
.ic-fab:hover{color:#fff;filter:brightness(1.05)}

@media(max-width:960px){.nav a.nav-hide-sm{display:none}}
@media(max-width:520px){
  .nav a:not(.btn){display:none}
  .boothgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;width:min(340px,100%)}
  .lanes{padding-bottom:4.5rem}
}
