@font-face{font-family:'Atkinson Hyperlegible Next';src:url("/assets/ah-200.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url("/assets/ah-300.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url("/assets/ah-500.otf") format("opentype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url("/assets/ah-500i.otf") format("opentype");font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url("/assets/ah-700.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url("/assets/ah-700i.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url("/assets/ah-800.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}

:root{
  --teal:#2D7D7A;
  --slate:#525E6B;
  --ink:#2C2825;
  --hairline:#525E6B33;
  --side-pad:32px;
  --mark-size:36px;
  --hero-size:clamp(28px,4.6vw,44px);
  --sub-size:clamp(16px,2.35vw,20px);
  --challenge-cols:1fr 1fr;
  --support-cols:repeat(5,1fr);
  --art-size:clamp(28px,4.2vw,40px);
}
@media (max-width:719px){
  :root{
    --side-pad:22px;
    --mark-size:26px;
    --hero-size:clamp(26px,7.2vw,34px);
    --sub-size:17px;
    --challenge-cols:1fr;
    --support-cols:repeat(2,1fr);
    --art-size:clamp(25px,6.6vw,32px);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#FFFFFF;color:var(--ink);
  font-family:'Atkinson Hyperlegible Next',Helvetica,Arial,sans-serif;
  overflow-wrap:break-word;
}
a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--ink)}
img{max-width:100%}

.page{min-height:100vh;background:#FFFFFF;display:flex;flex-direction:column}
.wrap{max-width:960px;margin:0 auto;padding:0 var(--side-pad) 40px;width:100%}

/* ---------- home ---------- */
.hero{padding:40px 0 32px;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:10px}
.mark{font-size:var(--mark-size);font-weight:700;letter-spacing:0.01em;line-height:1.1;text-decoration:none}
.mark .a{color:var(--teal)}
.mark .b{color:var(--slate)}
.mark sup{font-size:0.38em;font-weight:500;color:var(--slate);vertical-align:super}
h1{margin:0;font-size:var(--hero-size);line-height:1.15;font-weight:800;color:var(--ink);text-wrap:balance}
.sub{margin:8px 0 0;font-size:var(--sub-size);line-height:1.5;color:var(--slate);text-wrap:pretty}

section{padding:32px 0}
.ruled{border-bottom:1px solid var(--hairline)}
.eyebrow{margin:0 0 20px;font-size:18px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate)}

.challenges{display:grid;grid-template-columns:var(--challenge-cols);gap:24px 48px}
.challenge{display:flex;flex-direction:column;gap:8px}
.challenge h3{margin:0;font-size:20px;font-weight:700;color:var(--slate)}
.challenge p{margin:0;font-size:16px;line-height:1.5;max-width:75ch}
.cite{color:var(--slate);font-weight:500;text-decoration:none}
.cite:hover{color:var(--teal)}

.support{display:grid;grid-template-columns:var(--support-cols);gap:12px}
.card{
  border:1px solid var(--hairline);border-radius:8px;padding:16px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;text-decoration:none;
  transition:border-color .15s ease,background-color .15s ease;
}
.card:hover,.card:focus-visible{border-color:var(--teal);background:#2D7D7A0A}
.card span{font-size:15px;line-height:1.3;font-weight:700;color:var(--ink);text-wrap:pretty}
.card svg{flex:none}

.about{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.about img{width:140px;height:140px;flex:none;border-radius:50%;object-fit:cover}
.about .bio{flex:1;min-width:280px}
.about p{margin:0 0 16px;font-size:18px;line-height:1.5;max-width:75ch}

.cta-lead{margin:0 0 16px;font-size:24px;line-height:1.4;font-weight:500;max-width:32em;text-wrap:pretty}
.cta{
  display:inline-block;background:var(--teal);color:#FFFFFF;text-decoration:none;
  font-size:18px;font-weight:700;padding:14px 28px;border-radius:8px;
  max-width:100%;transition:background-color .15s ease;
}
.cta:hover,.cta:focus-visible{background:var(--ink);color:#FFFFFF}
.meta{margin:20px 0 0;font-size:16px;color:var(--slate)}
.fine{margin:12px 0 0;font-size:13px;color:var(--slate)}

/* ---------- article pages ---------- */
.topbar{border-bottom:1px solid var(--hairline)}
.topbar-in{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:18px;flex-wrap:wrap}
.mark-sm{font-size:24px}
.back{font-size:15px;font-weight:500}

.article{padding-top:36px;flex:1}
.kicker{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate)}
.article h1{font-size:var(--art-size);margin:0 0 24px;max-width:22ch}
.article h2{margin:36px 0 12px;font-size:22px;font-weight:700;color:var(--slate);max-width:40ch}
.article p{margin:0 0 18px;font-size:18px;line-height:1.62;max-width:68ch}

.sources{border-top:1px solid var(--hairline);margin-top:44px;padding-top:8px}
.sources h2{margin:20px 0 14px;font-size:16px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate)}
.sources ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.sources li{font-size:15px;line-height:1.5;max-width:75ch;color:var(--ink)}
.sources .n{color:var(--slate);font-weight:700}
.also{font-size:15px;color:var(--slate);margin-top:28px}

.pager{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--hairline);margin-top:8px;padding-top:24px;font-size:15px;font-weight:500}
.pager span{max-width:46%}
@media (max-width:719px){.pager span{max-width:100%}}

/* ---------- article index ---------- */
.list{display:flex;flex-direction:column;gap:0;margin-top:8px}
.list a.item{
  display:block;text-decoration:none;padding:22px 0;border-bottom:1px solid var(--hairline);
}
.list a.item:first-child{border-top:1px solid var(--hairline)}
.list .num{font-size:14px;font-weight:700;letter-spacing:0.08em;color:var(--teal)}
.list .t{display:block;margin:6px 0 6px;font-size:23px;font-weight:800;color:var(--ink);line-height:1.25;text-wrap:pretty}
.list .d{display:block;font-size:16px;line-height:1.5;color:var(--slate);max-width:72ch}
.list a.item:hover .t{color:var(--teal)}

footer{border-top:1px solid var(--hairline);background:#525E6B0A;margin-top:48px}
footer .wrap{padding-top:32px;padding-bottom:40px}
.foot-cta{margin:0 0 16px;font-size:22px;line-height:1.4;font-weight:500;max-width:32em;text-wrap:pretty}
footer ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5;color:var(--ink)}
footer li{max-width:75ch}
footer .n{color:var(--slate);font-weight:500}

.navlinks{display:flex;gap:22px;align-items:baseline}
.foot-home{margin-top:14px;font-weight:500}

.prompt{margin:-8px 0 16px;font-size:16px;color:var(--slate)}