/* ABOUTME: Styles for the Build Chatham Rec one-page advocacy site. */
/* ABOUTME: Pine & Marigold palette, Archivo + Public Sans, court-markings motif. */

:root{
  --pine:#1E4A3A;
  --pine-dark:#163A2D;
  --ink:#16211C;
  --paper:#F4F6F1;
  --paper-2:#EAEEE6;
  --paper-ink:#F4F6F1;
  --muted:#5C6B61;
  --muted-on-pine:#C4D3C8;
  --marigold:#FFB02E;
  --marigold-dark:#E8991A;
  --cobalt:#2F6BE0;
  --coral:#F0533F;
  --line:#D7DDD2;
  --maxw:1080px;
  --radius:12px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:"Archivo","Public Sans",sans-serif;font-weight:900;line-height:1.02;letter-spacing:-0.02em;margin:0;}
h2{font-size:clamp(28px,4.4vw,44px);}
h3{font-size:clamp(20px,2.4vw,24px);letter-spacing:-0.01em;}
p{margin:0 0 1em;}
a{color:var(--pine);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--marigold-dark);}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:84px 0;}
.section--pine{background:var(--pine);color:var(--paper-ink);}
.section--pine h2,.section--pine h3{color:var(--paper-ink);}
.section--pine a{color:var(--marigold);}
.section--tint{background:var(--paper-2);}
.lede{font-size:clamp(19px,2.4vw,22px);}
.measure{max-width:none;}

/* buttons + inputs */
.btn{
  display:inline-block;border:0;border-radius:10px;cursor:pointer;
  font-family:"Public Sans",sans-serif;font-weight:700;font-size:17px;
  padding:15px 26px;background:var(--marigold);color:var(--ink);
  text-decoration:none;transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.05);color:var(--ink);}
.field{
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff;width:100%;
}
.field::placeholder{color:#8A958C;}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;}

/* signup form (inline, two-step) */
.signup{max-width:480px;}
.signup__row{display:flex;flex-wrap:wrap;gap:10px;}
.signup__row .field{flex:1 1 200px;}
.signup__micro{font-size:13px;color:var(--muted);margin:10px 0 0;}
.section--pine .signup__micro{color:var(--muted-on-pine);}
.signup__step2{margin-top:18px;display:none;}
.signup.is-step2 .signup__step2{display:block;}
.signup.is-step2 .signup__row--email{display:none;}
.signup__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.signup__grid .full{grid-column:1 / -1;}
.signup__check{display:flex;gap:10px;align-items:flex-start;font-size:15px;}
.signup__thanks{display:none;font-weight:600;}
.signup.is-done .signup__thanks{display:block;}
.signup.is-done .signup__row,.signup.is-done .signup__step2{display:none;}
.signup__confirm{font-weight:700;font-size:17px;margin:0 0 16px;}
.signup__confirm::before{content:"\2713\00a0";color:var(--marigold);font-weight:900;}
.signup__more{border-top:1px solid var(--line);padding-top:18px;margin-top:4px;}
.hero .signup__more{border-top-color:rgba(244,246,241,.28);}
.signup__more-head{font-weight:700;font-size:15px;margin:0 0 12px;opacity:.85;}
.field-label{display:block;font-size:14px;font-weight:600;margin:0 0 8px;}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px;}
.opt{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:400;margin:0;cursor:pointer;}
.opt input{margin:0;}

label{display:block;font-size:14px;font-weight:600;margin:0 0 5px;}
.section--pine label{color:var(--paper-ink);}

/* ---------- header + hero ---------- */
.hero{position:relative;background-color:var(--pine);background-image:linear-gradient(100deg, rgba(20,38,30,.94) 0%, rgba(20,38,30,.78) 45%, rgba(22,33,28,.42) 100%), url("images/hero-court.jpg");background-size:cover;background-position:center;color:var(--paper-ink);overflow:hidden;}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 0;}
.wordmark{font-family:"Archivo",sans-serif;font-weight:900;font-size:19px;letter-spacing:.02em;color:var(--paper-ink);text-transform:uppercase;text-decoration:none;}
.wordmark em{font-style:normal;color:var(--marigold);}
.nav__link{color:var(--paper-ink);font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid rgba(244,246,241,.4);padding:9px 16px;border-radius:9px;}
.nav__link:hover{color:var(--ink);background:var(--marigold);border-color:var(--marigold);}
.hero__inner{position:relative;max-width:640px;padding:48px 0 92px;}
.hero h1{font-family:"Archivo",sans-serif;font-weight:900;line-height:0.98;letter-spacing:-0.02em;font-size:clamp(38px,6.4vw,66px);margin:0 0 20px;}
.hero__sub{font-size:clamp(18px,2.4vw,22px);max-width:44ch;color:var(--paper-ink);opacity:.94;margin:0 0 30px;}

/* court-line divider */
.divider{display:flex;gap:6px;align-items:center;padding:0;margin:0;height:6px;}
.divider span{height:6px;border-radius:3px;}
.divider span:nth-child(1){width:70px;background:var(--marigold);}
.divider span:nth-child(2){width:34px;background:var(--cobalt);}
.divider span:nth-child(3){width:20px;background:var(--coral);}

/* ---------- vision ---------- */
.amenities{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;}
.amenities li{position:relative;padding-left:26px;}
.amenities li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:4px;border-radius:2px;background:var(--marigold);}
.pull{margin:38px 0 0;font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1.2;letter-spacing:-0.01em;border-left:5px solid var(--marigold);padding-left:20px;}

/* ---------- case + stats ---------- */
.pillar{margin:0 0 30px;}
.pillar h3{margin:0 0 8px;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:10px 0 44px;}
.stat__num{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(34px,4.6vw,52px);line-height:1;letter-spacing:-0.02em;color:var(--pine);}
.section--pine .stat__num{color:var(--marigold);}
.stat__label{font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.35;}
.section--pine .stat__label{color:var(--muted-on-pine);}

/* ---------- path (numbered sequence) ---------- */
.path{list-style:none;counter-reset:step;padding:0;margin:30px 0 34px;}
.path li{position:relative;padding:0 0 22px 64px;}
.path li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:-4px;width:44px;height:44px;border-radius:50%;
  background:var(--marigold);color:var(--ink);
  font-family:"Archivo",sans-serif;font-weight:900;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.path li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:rgba(255,176,46,.35);}
.path h3{margin:0 0 4px;font-size:20px;}
.path p{margin:0;color:var(--muted-on-pine);}

/* ---------- get involved (three levels) ---------- */
.levels{counter-reset:lvl;margin:28px 0 0;}
.level{padding:26px 0;border-top:1px solid var(--line);}
.level:first-child{border-top:0;}
.level__tag{font-family:"Archivo",sans-serif;font-weight:900;color:var(--marigold-dark);font-size:clamp(20px,2.6vw,25px);margin:0 0 10px;}
.level h3{margin:0 0 10px;}
.level .measure{margin-bottom:18px;}
#join .signup,#join .contact{margin-left:auto;margin-right:auto;}
#join .contact{max-width:560px;}

.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;}
.contact__grid .full{grid-column:1 / -1;}
textarea.field{min-height:110px;resize:vertical;}

/* ---------- who + footer ---------- */
.who .measure{font-size:19px;}
.who__row{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;}
.who__row .measure{flex:1 1 380px;}
.who__video{flex:0 0 360px;max-width:100%;display:block;text-decoration:none;}
.who__thumb{position:relative;display:block;border-radius:12px;overflow:hidden;line-height:0;}
.who__thumb img{width:100%;height:auto;display:block;}
.who__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(22,33,28,.72);transition:background .15s ease;}
.who__play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;}
.who__video:hover .who__play{background:var(--marigold);}
.who__video:hover .who__play::before{border-left-color:var(--ink);}
.who__cap{display:block;line-height:1.4;margin-top:10px;font-size:14px;font-weight:600;color:var(--pine);}
.foot{background:var(--pine-dark);color:var(--paper-ink);padding:64px 0 48px;}
.foot h2{margin:0 0 22px;max-width:18ch;}
.foot__meta{margin-top:40px;font-size:14px;color:var(--muted-on-pine);line-height:1.7;}
.foot__meta a{color:var(--marigold);}

/* sources */
.sources{font-size:13px;color:var(--muted);}
.sources h3{font-size:14px;color:var(--ink);margin:0 0 10px;}
.sources ul,.sources ol{margin:0;padding-left:18px;}
.sources li{margin:0 0 6px;scroll-margin-top:80px;}
.sources a{color:var(--marigold);word-break:break-word;}
.fn a{text-decoration:none;font-weight:700;padding:0 1px;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .section{padding:60px 0;}
  .stats{grid-template-columns:1fr 1fr;}
  .amenities{grid-template-columns:1fr;}
  .signup__grid,.contact__grid{grid-template-columns:1fr;}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr;}
  .nav__link{display:none;}
}