:root{
  color-scheme: light;
  --basalt:#2A2C29;
  --stone:#E8E7E1;
  --stone-2:#D9D8D0;
  --paper:#F3F2EE;
  --leaf:#3D4934;
  --wood:#9A6E48;
  --ink:#232521;
  --mute:#6B6E66;
  --line:rgba(35,37,33,.16);
  --display:"Italiana", "Didot", "Bodoni 72", "Times New Roman", serif;
  --sans:"Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --max:860px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;border-radius:2px}
a{color:inherit}
:focus-visible{outline:1px solid var(--wood);outline-offset:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.display{font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:1.08;text-wrap:balance;margin:0}

/* header */
.b-head{padding:28px 0;border-bottom:1px solid var(--line)}
.b-head .wrap{display:flex;align-items:center;justify-content:space-between;max-width:1200px}
.b-head .brand{font-family:var(--display);font-size:22px;text-decoration:none}
.b-head nav a{margin-left:28px;font-size:14px;letter-spacing:.06em;text-decoration:none;color:var(--mute)}
.b-head nav a:hover{color:var(--ink)}

/* article list */
.b-main{padding-block:clamp(48px,7vw,88px)}
.b-eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);margin:0 0 10px}
.b-title{font-size:clamp(34px,5vw,56px);margin-bottom:18px}
.b-lede{font-size:clamp(17px,1.6vw,19px);color:var(--mute);max-width:42em;margin-bottom:0}
.b-list{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:36px}
.b-card{border-top:1px solid var(--line);padding-top:28px}
.b-card h2{font-size:clamp(24px,3vw,30px);margin:8px 0 10px}
.b-card a{text-decoration:none}
.b-card a:hover h2{color:var(--wood)}
.b-card p{color:var(--mute);margin:0 0 10px;max-width:56em}
.b-card .b-meta{font-size:13px;color:var(--mute);letter-spacing:.04em}

/* article page */
.b-article{padding-block:clamp(40px,6vw,72px)}
.b-article .b-meta{font-size:13px;color:var(--mute);letter-spacing:.04em;margin-bottom:14px}
.b-article h1{font-size:clamp(32px,5vw,52px);margin-bottom:22px}
.b-article .b-cover{margin:28px 0 40px;aspect-ratio:16/10;object-fit:cover;width:100%}
.b-article .b-body{max-width:68ch}
.b-article .b-body h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.8vw,32px);margin:2.2em 0 .6em}
.b-article .b-body h3{font-family:var(--sans);font-weight:500;font-size:19px;margin:1.8em 0 .5em}
.b-article .b-body p{margin:0 0 1.2em}
.b-article .b-body ul{margin:0 0 1.4em;padding-left:1.2em}
.b-article .b-body li{margin-bottom:.5em}
.b-article .b-body a{color:var(--wood);text-decoration-thickness:1px}

.b-cta{
  margin:48px 0 0;padding:clamp(28px,4vw,40px);background:var(--basalt);color:var(--stone);
}
.b-cta h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,28px);margin:0 0 10px}
.b-cta p{color:var(--mute);margin:0 0 20px;max-width:46em}
.b-cta .btn{
  display:inline-flex;align-items:center;gap:.7em;padding:.95em 1.6em;
  font:400 14px/1 var(--sans);letter-spacing:.08em;text-decoration:none;cursor:pointer;
  border:1px solid var(--stone);background:var(--stone);color:var(--ink);
}
.b-cta .btn:hover{background:transparent;color:var(--stone)}

.b-foot{padding:40px 0;border-top:1px solid var(--line);margin-top:60px;font-size:13px;color:var(--mute)}
.b-foot .wrap{max-width:1200px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.b-foot a{color:var(--mute);text-decoration:none}
.b-foot a:hover{color:var(--ink)}

@media (max-width:560px){
  .b-head nav a{margin-left:16px}
}