@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600&display=swap");

.blog-page{width:min(960px,calc(100% - 48px));margin:0 auto;padding:72px 0 112px}
.blog-head{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;padding:54px 40px;border:1px solid var(--hairline)}
.blog-head .eyebrow{margin:7px 0 0}
.blog-head h1{max-width:15ch;margin-bottom:20px;font-size:clamp(2.3rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.055em}
.blog-head p:last-child{max-width:58ch;margin:0;color:var(--body);line-height:1.72}
.blog-list{margin:0;padding:0;list-style:none}
.blog-list>li{border:1px solid var(--hairline);border-top:0}
.blog-card{display:grid;grid-template-columns:minmax(0,1fr) 260px;color:var(--ink);text-decoration:none}
.blog-card-copy{padding:38px 40px}
.blog-kicker{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 28px;padding:0;color:var(--mute);font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.06em;list-style:none}
.blog-card h2{max-width:20ch;margin-bottom:16px;font-size:clamp(1.55rem,3.4vw,2.25rem);line-height:1.2}
.blog-card-copy>p{max-width:60ch;margin-bottom:30px;color:var(--body);line-height:1.7}
.blog-card-action{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.blog-card-action span{transition:transform .2s ease}
.blog-card:hover .blog-card-action span{transform:translateX(4px)}
.blog-card-mark{display:grid;place-items:end start;min-height:290px;padding:28px;border-left:1px solid var(--hairline);background:#201d1d;color:#fdfcfc;overflow:hidden;position:relative}
.blog-card-mark::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.08) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.08) 31px 32px)}
.blog-card-mark span{position:relative;font-size:12px;line-height:1.8;letter-spacing:.08em;text-transform:uppercase}

.article-shell{width:min(960px,calc(100% - 48px));margin:0 auto;padding:72px 0 112px}
.article-header{padding:64px 0 52px;border-bottom:1px solid var(--hairline)}
.article-back{display:inline-block;margin-bottom:38px;color:var(--mute);font-size:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.article-back:hover{color:var(--ink)}
.article-header h1{max-width:17ch;margin-bottom:22px;font-size:clamp(2.5rem,7.2vw,5.25rem);line-height:.99;letter-spacing:-.06em}
.article-deck{max-width:64ch;margin-bottom:28px;color:var(--body);font:400 clamp(1.15rem,2.4vw,1.45rem)/1.55 "Newsreader",Georgia,serif}
.article-byline{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.05em;list-style:none}
.article-layout{display:grid;grid-template-columns:170px minmax(0,680px);gap:48px;justify-content:center;padding-top:64px}
.article-aside{align-self:start;position:sticky;top:88px}
.article-aside p{margin:0 0 14px;color:var(--mute);font-size:11px;line-height:1.5;text-transform:uppercase;letter-spacing:.07em}
.article-aside ul{margin:0;padding:0;list-style:none}
.article-aside li{padding:8px 0;border-top:1px solid var(--hairline);color:var(--body);font-size:12px;line-height:1.45}
.article-body{min-width:0;color:#292525;font:400 19px/1.72 "Newsreader",Georgia,serif}
.article-body>p{margin:0 0 1.45em}
.article-body h2{max-width:none;margin:3.2em 0 .85em;color:var(--ink);font:700 clamp(1.55rem,3.4vw,2.1rem)/1.2 var(--mono);letter-spacing:-.04em}
.article-body h3{margin:2.2em 0 .7em;color:var(--ink);font:700 1.02rem/1.45 var(--mono);letter-spacing:-.02em}
.article-body strong{font-weight:600}
.article-body a{color:inherit;text-decoration-color:#8b8585;text-underline-offset:4px}
.article-body a:hover{text-decoration-color:var(--ink)}
.article-lead{font-size:1.12em;line-height:1.68}
.article-callout{margin:2.2em 0;padding:26px 28px;border:1px solid var(--hairline);background:var(--soft);font-size:1.04em}
.article-callout p:last-child{margin-bottom:0}
.article-table-wrap{margin:2.2em 0;overflow-x:auto;border:1px solid var(--hairline)}
.article-body table{width:100%;min-width:620px;border-collapse:collapse;font:400 14px/1.55 var(--mono)}
.article-body th,.article-body td{padding:15px 16px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.article-body th:last-child,.article-body td:last-child{border-right:0}
.article-body tr:last-child td{border-bottom:0}
.article-body th{background:#201d1d;color:#fdfcfc;font-size:12px;font-weight:600}
.article-cta{margin-top:64px;padding:34px;border:1px solid var(--ink);background:#201d1d;color:#fdfcfc}
.article-cta p{margin:0 0 18px;color:#d4d0d0}
.article-cta a{display:inline-flex;min-height:42px;align-items:center;padding:7px 16px;border:1px solid rgba(255,255,255,.4);border-radius:4px;color:#fff;font:600 13px/1.4 var(--mono);text-decoration:none}
.article-cta a:hover{background:#fdfcfc;color:#201d1d}
.article-footer-nav{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:24px;border-top:1px solid var(--hairline);font-size:12px}
.article-footer-nav a{text-decoration:none}
.article-footer-nav a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:800px){
  .blog-head{grid-template-columns:1fr;gap:18px;padding:44px 28px}
  .blog-card{grid-template-columns:1fr}
  .blog-card-mark{min-height:170px;border-left:0;border-top:1px solid var(--hairline)}
  .article-layout{grid-template-columns:1fr;padding-top:48px}
  .article-aside{display:none}
}
@media (max-width:640px){
  .blog-page,.article-shell{width:calc(100% - 32px);padding:40px 0 72px}
  .blog-card-copy{padding:30px 20px}
  .blog-head{padding:38px 20px}
  .blog-head h1{font-size:2.55rem}
  .article-header{padding:42px 0 36px}
  .article-header h1{font-size:2.65rem}
  .article-body{font-size:18px}
  .article-callout,.article-cta{padding:22px 20px}
}