.blog-main {
  min-height: 100dvh;
  padding-top: 104px;
}

.blog-hero {
  display: grid;
  min-height: min(680px, calc(100dvh - 104px));
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
  padding-block: 70px 76px;
}

.blog-hero-copy { max-width: 760px; }
.blog-hero h1 {
  max-width: 11ch;
  margin-bottom: 24px;
  font-size: clamp(3.7rem, 7.3vw, 7rem);
  font-weight: 650;
  letter-spacing: -.067em;
  line-height: .93;
}

.blog-hero-copy > p:not(.page-kicker) {
  max-width: 50ch;
  margin-bottom: 0;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.55vw, 1.24rem);
}

.blog-hero-visual,
.article-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  isolation: isolate;
}

.blog-hero-visual { min-height: 440px; }
.blog-hero-visual::before,
.article-hero-visual::before {
  position: absolute;
  z-index: -1;
  width: min(92%, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(169, 221, 204, .25);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 221, 204, .07), transparent 68%);
  content: "";
}

.blog-hero-visual img { width: min(100%, 440px); height: auto; }

.blog-feed { padding-block: 90px 112px; }
.blog-feed-heading {
  max-width: 700px;
  margin-bottom: 46px;
}

.blog-feed-heading h2 {
  margin-bottom: 14px;
  font-size: clamp(2.8rem, 5.6vw, 5.4rem);
  letter-spacing: -.058em;
  line-height: .96;
}

.blog-feed-heading p { max-width: 52ch; margin-bottom: 0; color: var(--paper-soft); }
.blog-list { display: grid; gap: 18px; }

.blog-card {
  display: grid;
  min-height: 280px;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: rgba(10, 18, 31, .38);
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(169, 221, 204, .42);
  background: rgba(10, 18, 31, .58);
}

.blog-card:active { transform: translateY(-1px); }
.blog-card:nth-child(even) { grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr); }
.blog-card:nth-child(even) .blog-card-copy { order: 2; }
.blog-card:nth-child(even) .blog-card-visual { order: 1; }
.blog-card-copy { max-width: 680px; }
.blog-card-meta { margin-bottom: 15px; color: var(--mint); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.blog-card h3 { margin-bottom: 15px; font-size: clamp(2rem, 3.7vw, 3.7rem); letter-spacing: -.05em; line-height: .98; }
.blog-card-copy > p:not(.blog-card-meta) { max-width: 53ch; margin-bottom: 24px; color: var(--paper-soft); }
.blog-card-link { color: var(--mint); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.blog-card-visual { display: grid; min-height: 210px; place-items: center; }
.blog-card-visual img { width: min(100%, 270px); }

.article-hero {
  display: grid;
  min-height: min(760px, calc(100dvh - 104px));
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(44px, 7vw, 94px);
  align-items: center;
  padding-block: 62px 70px;
}

.article-hero-copy { max-width: 830px; }
.article-hero h1 {
  max-width: 14ch;
  margin-bottom: 24px;
  font-size: clamp(3.25rem, 6vw, 6.3rem);
  font-weight: 650;
  letter-spacing: -.064em;
  line-height: .94;
}

.article-deck { max-width: 54ch; margin-bottom: 26px; color: var(--paper-soft); font-size: clamp(1.08rem, 1.6vw, 1.28rem); }
.article-meta { margin: 0; color: var(--paper-faint); font-size: .86rem; }
.article-hero-visual { min-height: 410px; }
.article-hero-visual img { width: min(100%, 410px); }

.article-layout {
  display: grid;
  grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 118px);
  align-items: start;
  padding-block: 82px 112px;
}

.article-aside {
  position: sticky;
  top: 110px;
  padding-top: 6px;
}

.article-aside strong { display: block; margin-bottom: 15px; font-size: .82rem; font-weight: 600; }
.article-aside a { display: block; min-height: 40px; color: var(--paper-faint); font-size: .84rem; transition: color 160ms ease; }
.article-aside a:hover { color: var(--mint); }
.article-content { max-width: 760px; }
.article-content > p:first-child { color: var(--paper); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.62; }
.article-content h2 { margin: 62px 0 18px; font-size: clamp(2.25rem, 4.3vw, 4rem); letter-spacing: -.052em; line-height: 1; }
.article-content h3 { margin: 38px 0 12px; font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: -.035em; }
.article-content p,
.article-content li { color: var(--paper-soft); font-size: 1.05rem; line-height: 1.78; }
.article-content p { margin-bottom: 24px; }
.article-content ul,
.article-content ol { padding-left: 1.35rem; margin: 20px 0 30px; }
.article-content li { padding-left: .3rem; margin-bottom: 11px; }
.article-content strong { color: var(--paper); }
.article-content a { color: var(--mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.article-summary,
.article-note {
  padding: 25px 27px;
  margin: 36px 0;
  border-left: 2px solid var(--mint);
  background: rgba(169, 221, 204, .06);
}

.article-summary strong,
.article-note strong { display: block; margin-bottom: 8px; }
.article-summary p,
.article-note p { margin: 0; }
.article-quote { padding: 32px 0 32px 30px; margin: 46px 0; border-left: 1px solid rgba(169, 221, 204, .42); }
.article-quote p { margin: 0; color: var(--paper); font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 2.7rem); letter-spacing: -.035em; line-height: 1.15; }

.source-list {
  padding: 26px 0 0;
  margin-top: 64px;
  border-top: 1px solid var(--hair);
}

.source-list h2 { margin-top: 0; font-size: 1.45rem; }
.source-list ol { margin-bottom: 0; }
.source-list li { font-size: .9rem; }
.article-next { padding-block: 76px; }
.article-next-inner { display: flex; align-items: end; justify-content: space-between; gap: 44px; }
.article-next h2 { max-width: 15ch; margin-bottom: 0; font-size: clamp(2.6rem, 5vw, 5rem); letter-spacing: -.055em; line-height: .98; }

@media (max-width: 900px) {
  .blog-hero,
  .article-hero { grid-template-columns: minmax(0, 1fr) 300px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
  .article-aside strong { width: 100%; margin-bottom: 4px; }
  .article-aside a { min-height: 36px; }
}

@media (max-width: 680px) {
  .blog-main { padding-top: 82px; }
  .blog-hero,
  .article-hero { min-height: auto; grid-template-columns: 1fr; padding-block: 52px 44px; }
  .blog-hero h1 { font-size: clamp(3.25rem, 16vw, 4.7rem); }
  .blog-hero-visual { min-height: 300px; }
  .blog-hero-visual img { width: min(90%, 330px); }
  .blog-feed { padding-block: 60px 76px; }
  .blog-card,
  .blog-card:nth-child(even) { min-height: 0; grid-template-columns: 1fr; padding: 26px 22px; border-radius: 16px; }
  .blog-card:nth-child(even) .blog-card-copy,
  .blog-card:nth-child(even) .blog-card-visual { order: initial; }
  .blog-card-visual { min-height: 180px; }
  .blog-card-visual img { width: min(72%, 230px); }
  .article-hero h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .article-hero-visual { min-height: 300px; }
  .article-hero-visual img { width: min(88%, 320px); }
  .article-layout { gap: 34px; padding-block: 54px 72px; }
  .article-aside { gap: 6px 16px; }
  .article-content h2 { margin-top: 50px; }
  .article-summary,
  .article-note { padding: 21px 20px; }
  .article-quote { padding-left: 22px; }
  .article-next { padding-block: 58px; }
  .article-next-inner { display: block; }
  .article-next .button { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card { transition: none; }
  .blog-card:hover,
  .blog-card:active { transform: none; }
}