:root{
  --paper:#f5f1e8;
  --paper-deep:#ebe4d7;
  --ink:#17231e;
  --muted:#5f685f;
  --line:rgba(23,35,30,.16);
  --jade:#285947;
  --white:#fffdf8;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 84% 8%,rgba(40,89,71,.13),transparent 28rem),
    var(--paper);
  font:16px/1.68 var(--sans);
}
a{color:inherit}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1180px;
  margin:auto;
  padding:28px 32px;
}
.brand,.public-footer-wordmark{
  font:600 25px/1 var(--serif);
  letter-spacing:-.02em;
  text-decoration:none;
}
.reading-link{
  font-size:12px;
  font-weight:750;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}
.reading-link span{margin-left:5px;color:var(--jade)}
main{max-width:1180px;margin:auto;padding:30px 32px 112px}
.hub-intro{
  min-height:520px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr);
  align-content:center;
  align-items:end;
  gap:76px;
  padding:80px 0 94px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.eyebrow{
  margin:0 0 18px;
  color:var(--jade);
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.hub-intro .eyebrow{grid-column:1/-1;align-self:end;margin-bottom:-46px}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.035em}
h1{
  max-width:12ch;
  margin:0;
  font-size:clamp(60px,8.3vw,108px);
  line-height:.9;
  text-wrap:balance;
}
.hub-dek{
  max-width:33ch;
  margin:0;
  padding:0 0 8px 24px;
  border-left:1px solid var(--line);
  color:#445048;
  font:19px/1.55 var(--serif);
}
.guide-list{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:70px;
  padding-top:86px;
}
.list-heading h2{margin:0;font-size:36px;line-height:1}
.guide-grid{display:grid;gap:0}
.guide-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px;
  gap:30px;
  padding:34px 0 38px;
  border-top:1px solid var(--line);
}
.guide-card:first-child{border-top:0;padding-top:0}
.guide-card::after{
  content:"→";
  align-self:center;
  justify-self:end;
  color:var(--jade);
  font:34px/1 var(--serif);
  transition:transform .18s ease;
}
.guide-card:hover::after{transform:translateX(5px)}
.guide-card--with-image{grid-template-columns:minmax(180px,270px) minmax(0,1fr) 58px}
.guide-card-image{margin:0}
.guide-card-image img{display:block;width:100%;height:auto}
.guide-updated{
  margin:0 0 10px;
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.guide-card h2{margin:0;font-size:clamp(34px,4.2vw,56px);line-height:1.02}
.guide-card h2 a{text-decoration:none}
.guide-card-copy>p:not(.guide-updated){
  max-width:57ch;
  margin:17px 0 0;
  color:var(--muted);
}
.guide-read{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:18px;
  color:var(--jade);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.guide-read span{margin-left:7px}
a:focus-visible{outline:2px solid var(--jade);outline-offset:5px}
@media (max-width:760px){
  .site-header{padding:22px 20px}
  main{padding:14px 20px 74px}
  .hub-intro{
    min-height:490px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:27px;
    padding:64px 0 58px;
  }
  .hub-intro .eyebrow{margin:0}
  h1{font-size:clamp(53px,15.4vw,72px)}
  .hub-dek{padding:18px 0 0;border-top:1px solid var(--line);border-left:0;font-size:18px}
  .guide-list{display:block;padding-top:58px}
  .list-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:36px}
  .list-heading .eyebrow{margin:0}
  .list-heading h2{font-size:31px}
  .guide-card,.guide-card--with-image{grid-template-columns:minmax(0,1fr) 30px;gap:16px;padding:27px 0 31px}
  .guide-card-image{grid-column:1/-1}
  .guide-card::after{font-size:27px}
  .guide-card h2{font-size:35px}
  .guide-card-copy>p:not(.guide-updated){font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .guide-card::after{transition:none}
}