/* =====================================================================
   Out.Vote — hand-built static site
   Brand system: Out.Vote brand kit (tokens v1.0)
   Typeface: Gabriel Sans (self-hosted, licensed — do not redistribute)
   A civic-engagement initiative of A Great Idea.
   ===================================================================== */

/* ---- Gabriel Sans (licensed brand typeface, self-hosted) ---- */
@font-face { font-family:'Gabriel Sans'; src:url('../fonts/GabrielSans-Light.otf')   format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Gabriel Sans'; src:url('../fonts/GabrielSans-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gabriel Sans'; src:url('../fonts/GabrielSans-Medium.otf')  format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gabriel Sans'; src:url('../fonts/GabrielSans-Bold.otf')    format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gabriel Sans'; src:url('../fonts/GabrielSans-Black.otf')   format('opentype'); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --magenta:#93268F; --magenta-600:#7A1F77; --violet:#7A0896;
  --pink:#EE2A7B; --yellow:#ECD500; --green:#00952C; --blue:#295FF2; --red:#F40045;
  --ink:#1D1D1D; --muted:#6B6B78; --border:#E4E1E8; --paper:#FAF9FB; --white:#fff;
  --font:'Gabriel Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --spectrum:linear-gradient(90deg,#F40045 0 16.66%,#F2AC29 0 33.32%,#ECD500 0 49.98%,#00952C 0 66.64%,#295FF2 0 83.3%,#7A0896 0 100%);
  --shadow-md:0 4px 16px rgba(147,38,143,.10);
  --shadow-lg:0 12px 32px rgba(147,38,143,.16);
  --wrap:1120px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font); font-weight:400; font-size:17px; line-height:1.6;
  color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:var(--magenta); }
h1,h2,h3 { font-weight:900; line-height:1.05; margin:0 0 .5em; letter-spacing:-.01em; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* spectrum rule */
.spectrum-bar { height:6px; border:0; margin:0;
  background:linear-gradient(90deg,#F40045,#F2AC29,#ECD500,#00952C,#295FF2,#7A0896,#F40045);
  background-size:200% 100%;
  animation:spectrum-slide 16s linear infinite; }
@keyframes spectrum-slide { from { background-position:0 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .spectrum-bar { animation:none; } }

/* Scroll reveal (progressive enhancement) */
.reveal { transition:opacity .6s ease, transform .6s ease; }
.reveal-on .reveal { opacity:0; transform:translateY(20px); }
.reveal-on .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal-on .reveal { opacity:1; transform:none; } }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:16px;
  padding:14px 26px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn--primary { background:var(--magenta); color:#fff; box-shadow:var(--shadow-md); }
.btn--primary:hover { background:var(--magenta-600); box-shadow:var(--shadow-lg); }
.btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.btn--ghost:hover { background:rgba(255,255,255,.14); }
.btn--ink { background:var(--ink); color:#fff; }
.btn--ink:hover { background:#000; }

/* ---- Header ---- */
.site-header {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:70px; }
.site-header .logo img { height:34px; width:auto; }
.site-header .btn { padding:10px 20px; font-size:15px; }

/* ---- Hero — sunset crowd (big, bold, aspirational) ---- */
.hero { position:relative; color:#fff; text-align:center; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background:#2a0b3a; }
.hero__bg img { width:100%; height:100%; object-fit:cover; object-position:center 40%; opacity:.9; }
.hero__scrim { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,6,30,.35) 0%, rgba(122,8,150,.55) 60%, rgba(147,38,143,.82) 100%); }
.hero__inner { position:relative; max-width:860px; margin:0 auto; padding:96px 24px 104px; }
.hero__mark { height:54px; width:auto; margin:0 auto 26px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.3)); }
.hero h1 { font-size:clamp(44px,7vw,84px); text-shadow:0 2px 20px rgba(0,0,0,.28); }
.hero__sub { font-size:clamp(18px,2.4vw,23px); font-weight:500; max-width:620px; margin:0 auto 34px; text-shadow:0 1px 10px rgba(0,0,0,.3); }
.hero__cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero__tag { margin-top:30px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; opacity:.9; }
.hero__mark, .hero h1, .hero__sub, .hero__cta { animation:hero-in .85s cubic-bezier(.16,1,.3,1) both; }
.hero h1 { animation-delay:.06s; } .hero__sub { animation-delay:.15s; } .hero__cta { animation-delay:.23s; }
@keyframes hero-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hero__mark, .hero h1, .hero__sub, .hero__cta { animation:none; } }

/* ---- Section base ---- */
.section { padding:88px 0; }
.section--paper { background:var(--paper); }
.eyebrow { font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:13px; color:var(--magenta); margin:0 0 14px; }
.section h2 { font-size:clamp(30px,4.4vw,46px); max-width:16ch; }
.lede { font-size:20px; color:var(--muted); max-width:60ch; margin:0 0 8px; }

/* ---- Demands grid ---- */
.demands { margin:40px 0 36px; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.demand {
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 26px 26px 30px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-md);
}
.demand::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; }
.demand:nth-child(1)::before { background:var(--pink); }
.demand:nth-child(2)::before { background:var(--yellow); }
.demand:nth-child(3)::before { background:var(--green); }
.demand:nth-child(4)::before { background:var(--blue); }
.demand h3 { font-size:21px; font-weight:700; margin:0 0 6px; }
.demand p { margin:0; color:var(--muted); font-size:16px; }

/* ---- Action band (newsletter) ---- */
.act { background:var(--ink); color:#fff; }
.act__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.act h2 { color:#fff; }
.act .lede { color:rgba(255,255,255,.78); }
.signup { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; max-width:460px; }
.signup input[type=email] {
  flex:1; min-width:220px; font-family:var(--font); font-size:16px; padding:14px 16px;
  border-radius:999px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff;
}
.signup input[type=email]::placeholder { color:rgba(255,255,255,.6); }
.signup input[type=email]:focus { outline:none; border-color:var(--pink); }
.signup .btn--primary { background:var(--pink); }
.signup .btn--primary:hover { background:#d21e69; }
.act__note { font-size:14px; color:rgba(255,255,255,.55); margin-top:12px; }
.act__card { text-align:center; }
.act__card img { border-radius:16px; box-shadow:var(--shadow-lg); margin:0 auto; max-width:320px; }

/* sister initiatives */
.family { margin-top:14px; }
.family__row { display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.family a { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  border:1px solid var(--border); text-decoration:none; color:var(--ink); font-weight:600; font-size:15px; background:#fff; }
.family a:hover { border-color:var(--magenta); color:var(--magenta); }

/* ---- Footer ---- */
.site-footer { background:#140b1c; color:rgba(255,255,255,.72); padding:56px 0 40px; }
.site-footer .wrap { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:start; }
.site-footer .fmark img { height:30px; width:auto; margin-bottom:16px; }
.site-footer .attrib { display:flex; align-items:center; gap:10px; font-size:14px; }
.site-footer .attrib img { height:22px; width:auto; }
.social { display:flex; gap:12px; }
.social a { width:40px; height:40px; display:grid; place-items:center; border-radius:999px;
  background:rgba(255,255,255,.08); color:#fff; transition:background .15s ease; }
.social a:hover { background:var(--magenta); }
.social svg { width:18px; height:18px; fill:currentColor; }
.copyright { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12); margin-top:12px; padding-top:22px;
  font-size:13px; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.copyright a { color:rgba(255,255,255,.7); }

/* ---- FAQ ---- */
.faq__list { margin-top:34px; display:grid; gap:14px; max-width:840px; }
.faq__item { background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 26px; box-shadow:var(--shadow-md); }
.faq__q { font-size:20px; font-weight:900; margin:0 0 8px; color:var(--ink); }
.faq__a { margin:0; color:#3a3a42; font-size:16.5px; line-height:1.6; }
.faq__a a { color:var(--magenta); font-weight:600; }

/* ---- Legal / prose page ---- */
.legal-hero { background:var(--magenta); color:#fff; padding:64px 0 40px; }
.legal-hero h1 { font-size:clamp(34px,5vw,52px); margin:0 0 8px; }
.legal-hero p { margin:0; font-weight:500; color:rgba(255,255,255,.85); }
.legal { padding:56px 0 80px; }
.legal .prose { max-width:760px; }
.legal .prose h2 { font-size:26px; margin:44px 0 10px; padding-top:20px; border-top:1px solid var(--border); }
.legal .prose h2:first-of-type { border-top:0; padding-top:0; margin-top:8px; }
.legal .prose h3 { font-size:19px; font-weight:700; margin:26px 0 6px; }
.legal .prose p, .legal .prose li { color:#33333a; font-size:16.5px; }
.legal .prose ul { padding-left:22px; }
.legal .prose li { margin:6px 0; }
.legal .prose a { color:var(--magenta); }
.legal .toc { background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin:0 0 8px; }
.legal .toc strong { display:block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); margin-bottom:10px; }
.legal .toc a { display:inline-block; margin:2px 16px 2px 0; font-weight:600; text-decoration:none; }
.legal .muted { color:var(--muted); font-size:14px; }
.footer-legal a { color:rgba(255,255,255,.7); margin-left:16px; }

/* ---- Responsive ---- */
@media (max-width:820px){
  .section{padding:64px 0;}
  .demands{grid-template-columns:1fr;}
  .act__grid{grid-template-columns:1fr; gap:34px;}
  .act__card{order:-1;}
  .site-footer .wrap{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .btn:hover{transform:none;} }