/* Citizen School redesign - paste into Additional CSS. Everything is scoped to .cs-page */
.cs-page{
  --bg:#f5f7f8;--ink:#14233a;--muted:#4d5b70;--line:#cfd8e0;
  --teal:#0e6a6a;--sun:#f2b705;--panel:#14233a;--panel-ink:#f5f7f8;
  --head:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  background:var(--bg);color:var(--ink);font:400 1.0625rem/1.7 var(--body);
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  .cs-page{--bg:#0f1826;--ink:#eaf0f5;--muted:#a9b6c6;--line:#2a3a52;--teal:#5fc4c0;--panel:#e9eef3;--panel-ink:#14233a}
}
.cs-page *,.cs-page *::before,.cs-page *::after{box-sizing:inherit}
.cs-page a{color:var(--teal);text-underline-offset:3px}
.cs-page a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.cs-page .wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.cs-page .hero{padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,4.5rem)}
.cs-page .hero .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:3rem;align-items:center}
.cs-page h1{font:800 clamp(2.4rem,6vw,4.4rem)/1.02 var(--head);letter-spacing:-.03em;margin:0 0 1.5rem;max-width:14em;color:var(--ink)}
.cs-page h2{font:700 clamp(1.7rem,3.5vw,2.4rem)/1.1 var(--head);letter-spacing:-.02em;margin:0 0 1.25rem;color:inherit}
.cs-page h3{color:inherit}
.cs-page .lede{font-size:1.2rem;color:var(--muted);max-width:34rem;margin:0 0 2rem}
.cs-page .btns{display:flex;gap:.75rem;flex-wrap:wrap}
.cs-page a.btn{font:700 1rem var(--head);padding:.85rem 1.4rem;border-radius:999px;text-decoration:none;display:inline-block}
.cs-page a.btn.primary{background:var(--sun);color:#14233a}
.cs-page a.btn.ghost{border:2px solid var(--ink);color:var(--ink)}
.cs-page a.btn:hover{filter:brightness(.95)}
.cs-page .gather{width:100%;height:auto;max-width:26rem;justify-self:center}
.cs-page .gather circle{mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.cs-page .gather circle{mix-blend-mode:screen}}
.cs-page section{padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--line)}
.cs-page .two{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem}
.cs-page .two p{margin:0 0 1rem;max-width:40rem}
.cs-page .do{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1.5rem}
.cs-page .do h3{font:700 1.2rem var(--head);margin:0 0 .4rem}
.cs-page .do p{margin:0;color:var(--muted);font-size:1rem}
.cs-page .do div{border-top:4px solid var(--teal);padding-top:1rem}
.cs-page .do div:nth-child(2){border-color:var(--sun)}
.cs-page .do div:nth-child(3){border-color:var(--ink)}
.cs-page .intro{max-width:40rem;margin:0;color:var(--muted)}
.cs-page .pubs{list-style:none;margin:2rem 0 0;padding:0}
.cs-page .pubs li{display:grid;grid-template-columns:7rem 1fr;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--line);margin:0}
.cs-page .pubs li:first-child{border-top:0;padding-top:0}
.cs-page .pubs .tag{font:600 .9rem var(--head);color:var(--muted)}
.cs-page .pubs h3{font:700 1.3rem/1.2 var(--head);margin:0 0 .35rem}
.cs-page .pubs h3 a{color:var(--ink);text-decoration:none}
.cs-page .pubs h3 a:hover{color:var(--teal);text-decoration:underline}
.cs-page .pubs p{margin:0;color:var(--muted);max-width:42rem;font-size:1rem}
.cs-page section.contact{background:var(--panel);color:var(--panel-ink);border:0}
.cs-page .contact h2{margin-bottom:.75rem}
.cs-page .contact p{margin:0 0 1.5rem;max-width:34rem}
.cs-page .contact a.mail{font:700 clamp(1.1rem,3vw,1.6rem) var(--head);color:var(--panel-ink);text-decoration-color:var(--sun);text-decoration-thickness:3px;word-break:break-all}
@media (max-width:760px){
  .cs-page .hero .wrap,.cs-page .two,.cs-page .do{grid-template-columns:1fr}
  .cs-page .gather{max-width:16rem;justify-self:start}
  .cs-page .pubs li{grid-template-columns:1fr;gap:.25rem}
}
@media (prefers-reduced-motion:no-preference){
  .cs-page .gather circle{animation:cs-settle 1.4s ease-out both;transform-box:fill-box;transform-origin:center}
  .cs-page .gather circle:nth-child(2){animation-delay:.15s}
  .cs-page .gather circle:nth-child(3){animation-delay:.3s}
  .cs-page .gather circle:nth-child(4){animation-delay:.45s}
  @keyframes cs-settle{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
}