@font-face{font-family:Fraunces;src:url(/fonts/fraunces.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/publicsans.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--cream:#fbf4e4;--sand:#ede4cf;--butter:#f9e3aa;--green:#1f4a38;--leaf:#2f6b50;--orange:#c4481f;--yellow:#f4b63f;--ink:#26221c;--muted:#5f574a;
  --serif:Fraunces,Georgia,"Times New Roman",serif;--sans:"Public Sans",Helvetica,Arial,sans-serif;--col:44rem}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--green);text-underline-offset:.18em}
a:hover{color:var(--orange)}
img,svg{max-width:100%;display:block}
.sr{position:absolute;left:-999rem}.sr:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:9}
.kicker{font:700 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0}
.fine{font-size:.875rem;color:var(--muted);margin:.75rem 0 0}

/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1.5rem;padding:.7rem clamp(1rem,4vw,2.5rem);background:var(--cream);border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--green);font:900 1.2rem/1 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.brand i{font-style:normal;color:var(--orange)}
.top nav{display:flex;gap:1.4rem;margin-left:auto;font-weight:600;font-size:.95rem}
.top nav a{text-decoration:none;color:var(--ink)}.top nav a:hover{color:var(--orange)}
.pill,.btn,.signup button{display:inline-block;font:700 1rem/1 var(--sans);text-decoration:none;border:0;border-radius:99px;padding:.85rem 1.3rem;cursor:pointer;background:var(--orange);color:#fff;white-space:nowrap}
.pill:hover,.btn:hover,.signup button:hover{background:var(--green);color:#fff}
.btn{background:var(--green);font-size:.95rem;padding:.75rem 1.15rem;margin-top:.4rem}.btn:hover{background:var(--orange)}
@media(max-width:46rem){.top nav{display:none}.top .pill{margin-left:auto}}

/* hero */
.hero{position:relative;background:var(--butter);text-align:center;padding:clamp(2.5rem,7vw,5rem) 1rem 0;overflow:hidden}
.hero .wrap{position:relative;z-index:1;max-width:46rem;margin:0 auto}
.lockup{font:900 clamp(3.2rem,11vw,6.75rem)/.9 var(--serif);letter-spacing:-.035em;color:var(--green);margin:.9rem 0 0}
.lockup i{display:block;font-style:normal;color:var(--orange)}
.lede{font-size:clamp(1.1rem,2.6vw,1.4rem);line-height:1.4;max-width:30rem;margin:1.4rem auto 1.6rem}
.scene{width:calc(100% + 2rem);max-width:none;margin:clamp(1rem,3vw,2rem) -1rem 0;height:auto;aspect-ratio:1200/420}
.signup{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:32rem;margin:0 auto}
.signup input[type=email]{flex:1 1 15rem;min-width:0;font:400 1.05rem/1 var(--sans);padding:.9rem 1.1rem;border:2px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink)}
.signup input:focus-visible,.signup button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.signup .hp{position:absolute;left:-999rem}
.signup .fine{flex-basis:100%;text-align:center}

/* issue */
.issue{max-width:var(--col);margin:0 auto;padding:0 1rem 1rem}
.home .issue{margin-top:-1px;padding-top:clamp(2rem,5vw,3.5rem)}
.home .hero + .issue{max-width:none;background:var(--cream)}
.home .hero + .issue > *{max-width:var(--col);margin-left:auto;margin-right:auto}
.issue-head{padding:clamp(2rem,5vw,3.5rem) 0 1rem}
.home .issue-head{padding-top:0}
.issue-head h1{font:900 clamp(2.4rem,7vw,4rem)/.95 var(--serif);letter-spacing:-.03em;color:var(--green);margin:.6rem 0 1rem;text-wrap:balance}
.intro{font-size:1.2rem;line-height:1.5;margin:0}
.by{color:var(--muted);margin:.6rem 0 0}
.jumps{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.jumps a{font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink);background:var(--sand);padding:.5rem .9rem;border-radius:99px}
.jumps a:hover{background:var(--yellow)}
.band{font:900 clamp(1.9rem,5.5vw,2.7rem)/1 var(--serif);text-transform:uppercase;letter-spacing:-.01em;color:var(--cream);margin:3rem 0 1.25rem;padding:1.1rem 1.25rem;border-radius:14px}
.band.green{background:var(--green)}.band.orange{background:var(--orange)}.band.ink{background:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem}
.card{background:#fff;border:2px solid var(--ink);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card.lead{grid-column:1/-1}
.card.lead .art img{aspect-ratio:1200/420}
.card .body{padding:1.25rem 1.25rem 1.4rem}
.card h3{font:900 1.55rem/1.05 var(--serif);letter-spacing:-.015em;margin:.45rem 0 .5rem;text-wrap:balance}
.card.lead h3{font-size:clamp(1.9rem,5vw,2.5rem)}
.card h3 a{color:var(--ink);text-decoration:none}.card h3 a:hover{color:var(--orange)}
.card p{margin:.6rem 0}
.card .meta{font-weight:600;font-size:.95rem;margin:.15rem 0;color:var(--green)}
.art{margin:0;border-bottom:2px solid var(--ink);background:var(--sand)}
.art img{width:100%;aspect-ratio:3/2;object-fit:cover}
.art.sky{background:var(--butter)}.art.sky svg{width:100%;height:auto;aspect-ratio:1200/420}
.art figcaption{font-size:.75rem;color:var(--muted);padding:.3rem .75rem;background:#fff}
.sponsor{margin:3rem 0 0;padding:1.5rem;border-radius:18px;background:var(--butter);border:2px solid var(--ink)}
.sponsor.open{border-style:dashed;background:transparent}
.sponsor h3{font:900 1.7rem/1.05 var(--serif);margin:.4rem 0 .4rem}
.sponsor p{margin:.4rem 0 .8rem}
.quick{list-style:none;margin:0;padding:0}
.quick li{padding:1.1rem 0;border-bottom:2px solid var(--sand)}
.quick b{display:block;font:700 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.3rem}
.quick a,.weather a{font-weight:700;white-space:nowrap}
.weather{margin-top:1.25rem;padding:1rem 1.25rem;border-radius:14px;background:var(--sand)}

/* subscribe again, lists, prose */
.again{background:var(--green);color:var(--cream);text-align:center;padding:clamp(2.5rem,7vw,4.5rem) 1rem;margin-top:4rem}
.again h2{font:900 clamp(2rem,6vw,3.2rem)/1 var(--serif);letter-spacing:-.02em;margin:0 0 .6rem}
.again p{margin:0 auto 1.4rem;max-width:30rem}
.again .fine{color:#cfe0d0}
.again .signup input[type=email]{border-color:var(--cream)}
.again .signup button:hover{background:var(--yellow);color:var(--ink)}
.past{max-width:var(--col);margin:0 auto;padding:1rem 1rem 3rem}
.past h2,.prose h1{font:900 clamp(2.2rem,6vw,3.4rem)/1 var(--serif);letter-spacing:-.025em;color:var(--green)}
.list{list-style:none;padding:0;margin:0}
.list a{display:block;padding:1.1rem 0;border-bottom:2px solid var(--sand);text-decoration:none;color:var(--ink)}
.list span{display:block;font:700 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.list b{display:block;font:900 1.6rem/1.1 var(--serif);margin:.3rem 0}.list a:hover b{color:var(--orange)}
.list em{font-style:normal;color:var(--muted)}
.prose{max-width:var(--col);margin:0 auto;padding:clamp(2rem,6vw,4rem) 1rem 1rem}
.prose h2{font:900 1.6rem/1.1 var(--serif);margin:2.2rem 0 .4rem}
.prose li{margin:.4rem 0}

/* footer */
.foot{background:var(--ink);color:var(--cream);padding:2.5rem clamp(1rem,4vw,2.5rem);display:grid;gap:1.25rem}
.again + .foot{margin-top:0}.foot{margin-top:4rem}
.foot .brand{color:var(--cream);font-size:1.4rem;margin:0}.foot .brand i{color:var(--yellow)}
.foot p{margin:.4rem 0 0}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-weight:600}
.foot a{color:var(--cream)}.foot a:hover{color:var(--yellow)}
.foot .fine{color:#b9b0a0;max-width:44rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:30rem){.brand{font-size:1rem;gap:.4rem}.brand img{width:32px;height:32px}.top{gap:.6rem}.top .pill{padding:.65rem .9rem;font-size:.9rem}}
.hero + .again{margin-top:0}.again + .foot{margin-top:0}
.foot{margin-top:0}.prose:last-child,.past:last-child{padding-bottom:4rem}

/* home hero with Nathan's animated loop */
.hero.has-loop{background:#fbe6b0;padding:0;display:grid;grid-template-columns:minmax(0,34rem) minmax(0,30rem);gap:clamp(1.5rem,4vw,4rem);align-items:center;justify-content:center;text-align:left;padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,4vw,2.5rem)}
.hero.has-loop .loop{display:block;width:100%;aspect-ratio:1/1;border-radius:28px;border:2px solid var(--ink)}
.hero.has-loop .wrap{margin:0;max-width:none}
.pitch{font:900 clamp(2.2rem,4.6vw,3.6rem)/.98 var(--serif);letter-spacing:-.03em;color:var(--green);margin:.7rem 0 0;text-wrap:balance}
.hero.has-loop .lede{margin:1.1rem 0 1.5rem;max-width:26rem}
.hero.has-loop .signup{justify-content:flex-start;margin:0}
.hero.has-loop .signup .fine{text-align:left}
@media(max-width:52rem){
  .hero.has-loop{grid-template-columns:1fr;padding:0;gap:0;text-align:center}
  .hero.has-loop .loop{border-radius:0;border:0}
  .hero.has-loop .wrap{background:var(--green);color:var(--cream);padding:1.75rem 1rem 2.25rem;margin-top:-1px}
  .hero.has-loop .kicker{color:var(--yellow)}.hero.has-loop .pitch{color:var(--cream)}
  .hero.has-loop .lede{margin-left:auto;margin-right:auto}
  .hero.has-loop .signup{justify-content:center;margin:0 auto}
  .hero.has-loop .signup input[type=email]{border-color:var(--cream)}
  .hero.has-loop .signup .fine{text-align:center;color:#cfe0d0}
}