:root {
  --article-width: 760px;
}

body.blog-page { background: var(--base); }

.blog-nav { position: sticky; }
.blog-nav .brand { flex: none; }
.blog-nav .nav-links { margin-left: auto; }

.blog-hero {
  padding: 160px 0 76px;
  background:
    radial-gradient(65% 100% at 82% 0%, rgba(111,155,255,.12), transparent 65%),
    var(--navy);
  border-bottom: 1px solid var(--hair);
}
.blog-hero .wrap { display: grid; grid-template-columns: 1.1fr .7fr; gap: 60px; align-items: end; }
.blog-hero h1 { font-size: clamp(44px, 7vw, 80px); margin-top: 20px; }
.blog-hero .lede { margin: 22px 0 0; }
.blog-hero-note { border-left: 1px solid var(--blue); padding-left: 24px; color: var(--muted); font-size: 15px; }

.category-nav {
  border-bottom: 1px solid var(--hair);
  background: rgba(7,9,14,.96);
  overflow-x: auto;
}
.category-nav .wrap { display: flex; gap: 26px; padding-block: 17px; min-width: max-content; }
.category-nav a { font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.category-nav a:hover, .category-nav a[aria-current="page"] { color: var(--teal); }

.blog-main { padding-block: clamp(64px, 9vw, 110px); }
.blog-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
.blog-section-head h2 { font-size: clamp(30px, 4vw, 48px); }
.blog-section-head p { color: var(--muted); max-width: 46ch; margin: 0; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { border: 1px solid var(--hair); background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.post-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; }
.post-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card-media img { transform: scale(1.025); }
.post-card-body { padding: 26px; display: flex; flex-direction: column; align-items: flex-start; }
.post-card.featured .post-card-body { padding: clamp(30px, 5vw, 58px); justify-content: center; }
.post-card h2, .post-card h3 { font-size: clamp(23px, 2.5vw, 38px); margin: 14px 0 12px; }
.post-card h3 { font-size: 23px; }
.post-card p { color: var(--muted); margin: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; color: var(--faint); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.category-tag { color: var(--teal); font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.read-link { color: var(--ink); border-bottom: 1px solid var(--blue); margin-top: 24px; font-size: 14px; padding-bottom: 2px; }

.empty-category { border-top: 1px solid var(--hair); padding: 44px 0; color: var(--muted); }

.blog-newsletter { margin-top: 80px; padding: 42px; border: 1px solid var(--hair); background: var(--navy); display: grid; grid-template-columns: 1fr minmax(320px, .75fr); gap: 50px; align-items: center; }
.blog-newsletter h2 { font-size: clamp(27px, 3.5vw, 42px); margin-top: 12px; }
.blog-newsletter p { color: var(--muted); margin: 12px 0 0; }

/* Article */
.article-header { padding: 152px 0 48px; background: var(--navy); }
.article-header .wrap { max-width: 1000px; }
.article-header h1 { font-size: clamp(43px, 7vw, 78px); margin: 22px 0; }
.article-dek { color: var(--muted); font-size: clamp(19px, 2.2vw, 25px); max-width: 62ch; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.byline img, .byline-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.byline-text { font-size: 14px; color: var(--muted); }
.byline-text strong { display: block; color: var(--ink); font-weight: 600; }
.article-hero { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.article-hero figure { margin: 0; }
.article-hero picture { display: block; }
.article-hero img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.article-hero figcaption, .article-body figcaption { color: var(--faint); font-size: 12px; margin-top: 10px; }

.article-layout { max-width: 1120px; margin: 0 auto; padding: 70px var(--pad) 100px; display: grid; grid-template-columns: 180px minmax(0, var(--article-width)); gap: 60px; justify-content: center; }
.article-share { position: sticky; top: 100px; align-self: start; display: grid; gap: 10px; }
.article-share .label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; margin-bottom: 4px; }
.share-button { width: 100%; min-height: 38px; border: 1px solid var(--hair); background: transparent; color: var(--muted); font: 12px var(--f-body); cursor: pointer; text-align: left; padding: 9px 11px; }
.share-button:hover { color: var(--ink); border-color: var(--blue); }

.article-body { color: #d6ddec; font-size: 18px; line-height: 1.78; }
.article-body > p:first-child { font-size: 22px; line-height: 1.62; color: var(--ink); }
.article-body h2 { font-size: clamp(28px, 4vw, 43px); margin: 68px 0 20px; }
.article-body h3 { font-size: 24px; margin: 42px 0 16px; }
.article-body p { margin: 0 0 24px; }
.article-body a { color: var(--teal); border-bottom: 1px solid rgba(47,224,198,.4); }
.article-body blockquote { margin: 42px 0; padding: 8px 0 8px 28px; border-left: 2px solid var(--blue); color: var(--ink); font: 500 clamp(23px, 3vw, 34px)/1.38 var(--f-display); }
.status-callout { margin: 46px 0; padding: 28px; border: 1px solid rgba(47,224,198,.34); background: rgba(47,224,198,.045); }
.status-callout .status-title { color: var(--teal); font-family: var(--f-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.status-callout p { margin: 12px 0 0; color: var(--muted); }
.article-tags { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 36px; margin-top: 58px; border-top: 1px solid var(--hair); }
.article-tags a { border: 1px solid var(--hair); color: var(--muted); padding: 7px 10px; font: 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }

.author-page-head { display: grid; grid-template-columns: 130px 1fr; gap: 32px; align-items: center; }
.author-page-head img, .author-large-placeholder { width: 130px; height: 130px; object-fit: cover; filter: grayscale(1); border: 1px solid var(--hair); }
.author-large-placeholder { display: grid; place-items: center; background: var(--navy); color: var(--ink); font: 600 38px var(--f-display); }

@media (max-width: 900px) {
  .blog-hero .wrap, .blog-newsletter { grid-template-columns: 1fr; }
  .post-card.featured { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-share { position: static; display: flex; flex-wrap: wrap; }
  .article-share .label { width: 100%; }
  .share-button { width: auto; }
}

@media (max-width: 700px) {
  .post-grid { grid-template-columns: 1fr; }
  .blog-section-head { display: block; }
  .blog-section-head p { margin-top: 12px; }
  .blog-newsletter { padding: 28px; }
  .article-header { padding-top: 126px; }
  .article-layout { padding-top: 48px; }
  .author-page-head { grid-template-columns: 82px 1fr; gap: 20px; }
  .author-page-head img, .author-large-placeholder { width: 82px; height: 82px; }
}