:root{
  --cream:#f1f2eb; --ghost:#f4f3f8; --slate:#293532; --slate-60:rgba(41,53,50,.6);
  --gray:#d3d7d6; --yellow:#f7ef96; --blue:#2f4fc4; --white:#fff;
  --font-display:"Instrument Serif","Georgia",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:5px; --max:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--slate);font-family:var(--font-body);font-weight:300;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* nav */
.nav{position:sticky;top:12px;z-index:20;margin:12px auto 0;max-width:var(--max);padding:0 20px;display:flex;gap:10px}
.nav__bar{flex:1;display:flex;align-items:center;justify-content:space-between;background:var(--cream);border-radius:var(--radius);padding:0 22px;height:52px}
.nav__logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:20px;letter-spacing:-.01em}
.nav__logo svg{width:30px;height:30px;stroke:var(--slate);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nav__links{display:flex;gap:34px;font-size:13px;font-weight:400}
.nav__links a{transition:opacity .2s}.nav__links a:hover{opacity:.6}
.btn-yellow{display:flex;align-items:center;justify-content:center;background:var(--yellow);color:var(--slate);border-radius:var(--radius);padding:0 36px;height:52px;font-size:13px;font-weight:400;transition:background .2s,color .2s}
.btn-yellow:hover{background:var(--slate);color:var(--white)}

/* hero */
.hero{text-align:center;padding:84px 0 20px}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,6.2vw,66px);line-height:1.1;letter-spacing:-.01em;margin:0 auto 26px;max-width:20ch}
.hero p{max-width:470px;margin:0 auto 34px;font-size:16px;line-height:1.55}
.btn-outline{display:inline-flex;align-items:center;gap:22px;border:1px solid var(--slate);border-radius:var(--radius);padding:12px 18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;transition:background .2s,color .2s}
.btn-outline svg{width:26px;height:14px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.btn-outline:hover{background:var(--slate);color:var(--white)}
.squiggle{margin:30px 0 40px;width:100%;overflow:hidden}
.squiggle svg{width:100%;height:auto}

/* sections */
.section{padding:28px 0 64px}
.section--tint{background:var(--ghost)}
.section--cream{background:var(--cream)}
.label{border-top:1px solid var(--slate);padding-top:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;margin-bottom:40px}
.section--tint .label,.section--cream .label{border-top:0;padding-top:48px}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.6vw,42px);line-height:1.2;letter-spacing:-.01em;margin:0 0 18px}
h3{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.2;margin:0 0 6px}
.lede{font-size:17px;line-height:1.5;max-width:520px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.card{border:1px solid var(--slate);border-radius:var(--radius);padding:28px 28px 26px;background:transparent}
.card .meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-60);margin:4px 0 16px}
.card .meta span+span::before{content:"·";margin:0 10px}
.card p{margin:0;font-size:15px}
.center{text-align:center;margin-top:44px}

/* dispatch grid */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.post{border:1px solid var(--slate);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:background .2s}
.post:hover{background:var(--cream)}
.post__art{aspect-ratio:16/8;background:var(--cream);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--slate)}
.post__art svg{width:210px;height:165px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.post__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-60)}
.post h3{font-size:26px;line-height:1.18}
.post p{margin:0;flex:1}
.post .more{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;display:inline-flex;gap:12px;align-items:center;margin-top:8px}
.post .more svg{width:22px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3}

/* about */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.about__art{display:flex;justify-content:center}
.about__art img{width:min(100%,420px)}
.about p{font-size:16px;line-height:1.55}
.about .btn-outline{margin-top:10px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 40px}
.pillar h3{font-size:24px}
.pillar p{margin:0;font-size:15px}

/* subscribe */
.subscribe{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.subscribe iframe{width:100%;max-width:480px;height:320px;border:1px solid var(--slate);border-radius:var(--radius);background:var(--white)}
.subscribe .note{font-size:12px;color:var(--slate-60);margin-top:8px}

/* footer */
footer{border-top:1px solid var(--slate);padding:32px 0 44px;font-size:12px}
footer .wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer .right{text-align:right}
footer a:hover{opacity:.6}

@media (max-width:820px){
  .nav__links{display:none}
  .two,.cards,.posts,.about,.subscribe,.pillars{grid-template-columns:1fr}
  .about__art{order:-1}
  footer .wrap{grid-template-columns:1fr}
  footer .right{text-align:left}
  .hero{padding-top:56px}
}