@font-face{font-family:Cabin;src:url(fonts/cabin.woff2) format('woff2-variations');font-weight:400 700;font-display:swap;font-style:normal}

:root{
  --paper:#f7f6ef;
  --ink:#1f2a1c;
  --quiet:#525b4c;
  --rule:#dcd9c9;
  --leaf:#3f6b3a;
  --hot:#a8471f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Cabin,system-ui,sans-serif;font-size:17px;line-height:1.62;
}
.skip{position:absolute;left:-9999px;padding:10px 14px}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 14px}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}

.mockup{
  max-width:none;margin:0;padding:9px 20px;background:var(--ink);color:#f0f0e6;
  font-size:13.5px;line-height:1.45;text-align:center;
}
.mockup b{font-weight:700}

/* split hero */
.hero{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:32px 54px;align-items:center;
  padding:44px 30px 40px;border-bottom:2px solid var(--ink);
}
.hero .mark{margin:0 0 16px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);font-weight:700}
.hero .mark a{color:inherit;text-decoration:none;display:inline-block;padding-block:7px}
.lede .mark a{display:inline-block;padding-block:7px}
h1{font-size:clamp(29px,4.4vw,46px);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin:0 0 16px;max-width:18ch}
.hero p{margin:0 0 18px;max-width:52ch;color:var(--quiet)}
.act{
  display:inline-block;background:var(--hot);color:#fff;font-weight:700;font-size:20px;
  padding:13px 22px;text-decoration:none;letter-spacing:.01em;
}
.act:hover{background:#8b3916}
.card{
  border:2px solid var(--ink);padding:20px 22px;background:#eef0e5;
}
.card h2{margin:0 0 12px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.card dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:9px 18px;align-items:baseline}
.card dt{color:var(--quiet);font-size:15.5px}
.card dd{margin:0;font-weight:700;font-size:18px;white-space:nowrap}
.card .frost{color:var(--hot)}

/* the chart */
.year{padding:34px 30px 10px}
.year h2{margin:0 0 6px;font-size:23px;font-weight:700;letter-spacing:-.015em}
.year > p{margin:0 0 20px;max-width:62ch;color:var(--quiet)}
.chartwrap{overflow-x:auto;padding-bottom:6px}
.chartwrap svg{display:block;min-width:880px;width:100%;height:auto}
.key{display:flex;flex-wrap:wrap;gap:8px 26px;margin:16px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--quiet)}
.key li{display:flex;align-items:center;gap:9px}
.key i{width:24px;height:13px;display:inline-block}
.key .a{background:#3f6b3a} .key .b{background:#9dbb92}
.key .c{border-top:3px dashed var(--hot);height:0;width:26px}

.nerve{
  margin:26px 30px 0;padding:24px 26px;background:var(--ink);color:#eef0e5;
  border-left:7px solid var(--hot);
}
.nerve h2{margin:0 0 8px;font-size:21px;color:#fff;font-weight:700}
.nerve p{margin:0 0 10px;max-width:66ch}
.nerve p:last-child{margin:0}

.written{padding:34px 30px 10px}
.written h2{font-size:23px;font-weight:700;margin:0 0 12px;letter-spacing:-.015em}
.written ul{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink);max-width:70rem}
.written li{
  display:grid;grid-template-columns:minmax(10rem,15rem) 1fr;gap:4px 28px;
  padding:13px 0;border-bottom:1px solid var(--rule);
}
.written li b{font-weight:700}
.written li span{color:var(--quiet)}

.close{padding:32px 30px 10px;max-width:62rem}
.close h2{font-size:23px;font-weight:700;margin:0 0 10px}
.close p{margin:0 0 12px;max-width:60ch}
.close a{color:var(--ink)}
.close a.act{color:#fff}
.close .act{margin-top:8px}

footer{padding:26px 30px 44px;border-top:1px solid var(--rule);margin-top:28px}
footer nav{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px}
footer nav a{color:var(--ink);padding-block:6px}
footer p{font-size:13.5px;color:var(--quiet);max-width:74ch;margin:0}

/* interior */
.lede{padding:36px 30px 6px;max-width:62rem}
.lede h1{margin-bottom:14px}
.lede p{margin:0 0 12px;max-width:60ch;color:var(--quiet)}
.bench{padding:6px 30px 26px;max-width:72rem}
.bench .tbl{margin:18px 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.bench .tbl li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 26px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.bench .tbl h3{margin:0;font-size:18px;font-weight:700}
.bench .tbl .p{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.bench .tbl p{grid-column:1/-1;margin:3px 0 0;color:var(--quiet);font-size:15.5px;max-width:64ch}
.bench h2{font-size:22px;margin:30px 0 0;font-weight:700}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  .hero,.year,.written,.close,footer,.lede,.bench{padding-left:18px;padding-right:18px}
  .nerve{margin-left:18px;margin-right:18px;padding:20px}
  .written li{grid-template-columns:1fr}
  .bench .tbl li{grid-template-columns:1fr}
}