:root{--blue:#1646a8;--navy:#0c2559;--red:#e11d2a;--sky:#dcebff;--paper:#fbfcff;--ink:#14213d;
--slab:'Google Sans','SF Pro Text','Manrope',sans-serif;--hand:'Google Sans','SF Pro Text','Manrope',sans-serif;--body:'Google Sans','SF Pro Text','Manrope',sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font:17px/1.6 var(--body);color:var(--ink);background:var(--paper)}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.2rem;background:rgba(251,252,255,.94);backdrop-filter:blur(6px);border-bottom:2px solid var(--blue)}
.brand{font:800 1.2rem var(--slab);color:var(--blue);text-decoration:none}
nav{display:flex;gap:1.4rem}
nav a{text-decoration:none;font-weight:500;padding:.2rem 0}
nav a{transition:color .18s ease,background .18s ease}
nav a:hover{color:var(--red)}
nav .cta-link{background:var(--blue);color:#fff;padding:.3rem .9rem;border-radius:999px}
nav .cta-link:hover{color:#fff;background:var(--red)}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:var(--blue);margin:5px 0}

.hero{display:grid;grid-template-columns:1.1fr .9fr 1.2fr;grid-template-areas:"flag frame who" "band band band";gap:1rem 2rem;align-items:center;overflow:hidden}
.flag{grid-area:flag;position:relative;background:var(--red);color:#111;padding:2.5rem 3rem 3.5rem 1.5rem;clip-path:polygon(0 0,100% 0,0 100%);align-self:stretch;min-height:420px}
.flag h1{font:800 clamp(1.8rem,3.6vw,3.2rem)/1.05 var(--slab);text-transform:uppercase}
.flag h1 span{display:block;margin-top:.5rem;font-size:1.1em}
.flag .hand{position:absolute;bottom:1rem;left:1.2rem;font:800 1.35rem/1.2 var(--hand);color:#fff;max-width:17ch}
.frame{grid-area:frame;position:relative;padding:14px;margin:2rem 0}
.frame::before,.frame::after{content:"";position:absolute;width:36px;height:36px;border:5px solid var(--navy)}
.frame::before{top:0;left:0;border-right:0;border-bottom:0}
.frame::after{bottom:0;right:0;border-left:0;border-top:0}
.frame img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%}
.who{grid-area:who;padding:1rem 1.5rem 1rem 0}
.kicker{font:800 1.15rem var(--slab)}
.name{font:800 clamp(3rem,7vw,5.6rem)/.95 var(--slab);color:var(--blue);margin:.3rem 0 1.3rem;padding-bottom:.6rem;background:linear-gradient(var(--blue),var(--blue)) 0 100%/90% 6px no-repeat}
.btn{display:inline-block;border:0;cursor:pointer;font:700 1rem var(--body);background:var(--red);color:#fff;padding:.8rem 1.6rem;border-radius:8px;text-decoration:none;transition:transform .18s ease,background .18s ease,opacity .18s ease}
.btn:hover{background:var(--navy);transform:translateY(-2px)}
.btn:disabled{cursor:not-allowed;opacity:.48;transform:none}
.band{grid-area:band;background:var(--blue);color:#fff;font:700 clamp(1.5rem,3vw,2.4rem)/1.2 var(--hand);text-align:center;padding:1.4rem 1.5rem;clip-path:polygon(0 12%,3% 0,100% 8%,98% 100%,2% 92%)}

.sec{padding:4.5rem max(1.2rem,calc((100% - 960px)/2))}
.alt{background:var(--sky)}
h2{font:clamp(1.8rem,4vw,2.6rem)/1.15 var(--slab);color:var(--blue);margin-bottom:1.6rem}
.lead{max-width:60ch;margin-bottom:1.6rem}
.note{font-size:.88rem;opacity:.75;margin:1rem 0}
code{background:#fff;padding:0 .3rem;border-radius:4px}
.prog{list-style:none;padding:0;border:3px solid var(--blue);border-radius:10px;background:var(--sky)}
.prog li{padding:1.2rem 1.5rem;display:grid;gap:.2rem}
.prog li+li{border-top:2px solid var(--blue)}
.prog b{font:800 1.2rem var(--hand);color:var(--navy)}
.about{display:grid;gap:1rem;max-width:62ch;font-size:1.1rem}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.chip{font:600 .95rem var(--body);border:2px solid var(--blue);background:#fff;color:var(--blue);padding:.35rem 1rem;border-radius:999px;cursor:pointer;transition:color .18s ease,background .18s ease,transform .18s ease}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--blue);color:#fff}
.events,.ideas{list-style:none;padding:0;display:grid;gap:.8rem}
.events li{display:grid;grid-template-columns:78px 1fr;gap:1rem;align-items:center;background:#fff;border-left:6px solid var(--blue);padding:.8rem 1rem;border-radius:0 8px 8px 0}
.events li[data-t=sport]{border-color:var(--red)}
.date{font:800 1.5rem/1 var(--slab);color:var(--blue);text-align:center}
.date small{display:block;font:500 .8rem var(--body);color:var(--ink)}
.events h3{font-size:1.05rem}
.events p{font-size:.92rem;opacity:.8}
.events li.empty,.ideas li.empty{display:block;padding:1rem;border:2px dashed var(--blue);border-radius:8px;text-align:center;background:transparent}

form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:#fff;border:3px solid var(--blue);border-radius:10px;padding:1.4rem}
label{display:grid;gap:.3rem;font-weight:500;font-size:.95rem}
.wide,.err,form .btn{grid-column:1/-1}
input,select,textarea{font:inherit;padding:.6rem .7rem;border:2px solid #9db8e6;border-radius:6px;background:#fff;width:100%}
.consent{grid-template-columns:1.2rem 1fr;align-items:start;gap:.65rem}
.consent input{width:1.15rem;height:1.15rem;margin-top:.25rem;accent-color:var(--blue)}
.consent a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
.consent a:hover{color:var(--red)}
.err{color:var(--red);font-weight:500;min-height:1.2em}
form .btn{justify-self:start}
.ideas{margin-top:1.6rem}
.ideas li{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;background:#fff;padding:1rem 1.2rem;border-radius:8px}
.ideas .meta{font-size:.82rem;opacity:.7}
.vote{grid-row:1/3;grid-column:2;align-self:center;border:2px solid var(--blue);background:#fff;color:var(--blue);border-radius:8px;padding:.4rem .8rem;font:700 1rem var(--body);cursor:pointer;min-width:64px;transition:color .18s ease,background .18s ease,transform .18s ease}
.vote:hover{transform:translateY(-2px)}
.vote.on{background:var(--blue);color:#fff}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
footer{background:var(--navy);color:#fff;text-align:center;padding:1.6rem 1rem;font-size:.9rem}

@media(max-width:860px){
 .burger{display:block}
 nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--paper);border-bottom:2px solid var(--blue);display:none}
 nav.open{display:flex}
 nav a{padding:.9rem 1.2rem}
 nav .cta-link{margin:.5rem 1.2rem 1rem;text-align:center}
 .hero{grid-template-columns:1fr 1fr;grid-template-areas:"flag flag" "frame who" "band band";gap:0 1rem}
 .flag{min-height:0;clip-path:none;padding:1.5rem 1.2rem 4.5rem}
 .flag .hand{max-width:none;transform:rotate(-3deg)}
 .frame{margin:1.2rem 0 1.2rem 1rem}
 .who{padding:1rem 1rem 1rem 0}
}
@media(max-width:560px){
 body{font-size:16px}
 .hero{grid-template-columns:1fr;grid-template-areas:"flag" "frame" "who" "band"}
 .frame{margin:1.5rem 1.4rem 0}
 .who{padding:1.2rem 1.4rem 2rem}
 .sec{padding:3rem 1.1rem}
 form{grid-template-columns:1fr;padding:1rem}
 .events li{grid-template-columns:60px 1fr}
 .ideas li{grid-template-columns:1fr}
 .vote{grid-row:auto;grid-column:1;justify-self:start}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}