:root{
  --paper: #E7E2D3;
  --paper-dim: #DDD7C4;
  --ink: #23201B;
  --evergreen: #33473A;
  --grain: #B8863B;
  --river: #51707A;
  --rule: rgba(35,32,27,0.18);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.55;
}
a{color:var(--river); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{outline:2px solid var(--evergreen); outline-offset:2px;}
img{max-width:100%; display:block;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

.topline{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink);
  opacity:.7;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
}
.topline .wrap{display:flex; justify-content:space-between;}

header.masthead{padding:34px 0 0;}
.masthead-row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px;}
.nameplate{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-optical-sizing:auto;
  font-size:clamp(36px, 6vw, 68px);
  letter-spacing:-0.01em;
  margin:0;
  line-height:.95;
}
.nameplate a{color:inherit;}
.nameplate a:hover{text-decoration:none;}
.tagline{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--evergreen);
  margin:6px 0 0;
}
.issue-meta{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12px;
  text-align:right;
  color:var(--ink);
  opacity:.75;
  line-height:1.6;
}

.river-rule{width:100%; height:14px; display:block; margin:18px 0 0;}
.river-rule path{stroke:var(--grain); stroke-width:2; fill:none;}

nav.sections{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:var(--evergreen);
  color:var(--paper);
}
nav.sections ul{
  max-width:1180px; margin:0 auto; padding:0 24px;
  list-style:none; display:flex; gap:28px; flex-wrap:wrap;
}
nav.sections a{
  color:var(--paper); display:inline-block; padding:12px 0;
  border-bottom:2px solid transparent;
}
nav.sections a:hover, nav.sections a.active{border-bottom-color:var(--grain); text-decoration:none;}

main{padding:36px 0 60px;}

.lead{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--rule);
  margin-bottom:32px;
}
.kicker{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grain);
}
.kicker a{color:inherit;}
.lead h1, .card h3, .article-title{
  font-family:'Fraunces', serif;
  font-weight:600;
}
.lead h1{
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.08;
  margin:8px 0 12px;
}
.lead h1 a{color:inherit;}
.dek{font-size:19px; color:#3a352c; margin:0 0 14px;}
.byline{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12px; color:var(--river); text-transform:uppercase; letter-spacing:.04em;
}
.hero-art{
  width:100%; aspect-ratio:16/10; border-radius:2px; overflow:hidden;
  background:var(--paper-dim);
}
.hero-art img{width:100%; height:100%; object-fit:cover;}

.content-row{display:grid; grid-template-columns:2fr 1fr; gap:40px;}

.section-head{display:flex; align-items:baseline; gap:14px; margin:8px 0 20px;}
.section-head h2{font-family:'Fraunces', serif; font-weight:600; font-size:22px; margin:0; white-space:nowrap;}
.section-head h2 a{color:inherit;}
.section-head .line{flex:1; height:1px; background:var(--rule);}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:44px;}
.card h3{font-size:20px; line-height:1.15; margin:8px 0 8px;}
.card h3 a{color:inherit;}
.card p{font-size:15px; color:#3a352c; margin:0 0 10px;}
.thumb{width:100%; aspect-ratio:4/3; background:var(--paper-dim); margin-bottom:2px; border-top:2px solid var(--river); overflow:hidden;}
.thumb img{width:100%; height:100%; object-fit:cover;}

aside.rail{font-family:'IBM Plex Sans', sans-serif; font-size:13px;}
.rail-box{background:var(--paper-dim); border-left:3px solid var(--grain); padding:16px 18px; margin-bottom:20px;}
.rail-box h3{font-family:'Fraunces', serif; font-size:16px; margin:0 0 10px; font-weight:600;}
.rail-box ul{margin:0; padding:0; list-style:none;}
.rail-box li{padding:8px 0; border-top:1px solid var(--rule);}
.rail-box li:first-child{border-top:none; padding-top:0;}
.rail-box .when{color:var(--river); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.03em;}

.forum-box{background:var(--evergreen); color:var(--paper); border-left:3px solid var(--grain);}
.forum-box h3{color:var(--paper);}
.forum-box p{margin:0 0 12px; font-family:'Source Serif 4', serif; font-size:14px; line-height:1.5;}
.forum-box a{color:var(--paper); font-weight:600; text-decoration:underline;}

/* Single article */
.article-header{max-width:760px; margin:0 auto 28px;}
.article-title{font-size:clamp(30px, 4vw, 48px); line-height:1.08; margin:10px 0 14px;}
.article-dek{font-size:19px; color:#3a352c; margin:0 0 14px;}
.article-feature{max-width:960px; margin:0 auto 32px;}
.article-feature img{border-radius:2px;}
.article-body{max-width:760px; margin:0 auto; font-size:19px; line-height:1.7;}
.article-body p{margin:0 0 22px;}
.article-body h2, .article-body h3{font-family:'Fraunces', serif; font-weight:600; margin:36px 0 14px;}
.article-body a{text-decoration:underline;}
.article-body img{margin:28px 0; border-radius:2px;}
.article-body blockquote{border-left:3px solid var(--grain); margin:28px 0; padding:2px 0 2px 20px; font-style:italic; color:#3a352c;}

/* Koenig editor width options for images/cards inside article bodies */
.article-body .kg-width-wide{
  max-width:960px;
  margin-left:calc(50% - 480px);
  margin-right:calc(50% - 480px);
  width:auto;
}
.article-body .kg-width-full{
  max-width:100vw;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
@media (max-width:820px){
  .article-body .kg-width-wide{max-width:100%; margin-left:0; margin-right:0;}
}

footer{background:var(--ink); color:var(--paper); padding:36px 0; font-family:'IBM Plex Sans', sans-serif; font-size:13px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
footer .fname{font-family:'Fraunces', serif; font-size:18px; font-weight:600; margin-bottom:6px;}
footer a{color:var(--paper); opacity:.85;}
footer .cols{display:flex; gap:56px; flex-wrap:wrap;}
footer h4{font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.6; margin:0 0 10px;}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:6px;}

.empty-notice{
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--paper-dim);
  border-left:3px solid var(--river);
  padding:14px 18px;
  font-size:14px;
  margin-bottom:32px;
}

@media (max-width:820px){
  .lead, .content-row{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .issue-meta{text-align:left;}
  nav.sections ul{gap:16px; padding:0 24px; overflow-x:auto;}
}