.blog-page main { overflow: hidden; }

.blog-breadcrumb {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--stone-600);
  font-size: .74rem;
}
.blog-breadcrumb a { text-underline-offset: 4px; }
.blog-breadcrumb span[aria-hidden="true"] { color: var(--gold-600); }

.blog-hub-hero {
  width: min(1320px, calc(100% - 40px));
  min-height: 610px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  background: var(--ivory-100);
}
.blog-hub-copy { align-self: center; padding: clamp(76px, 9vw, 130px) clamp(30px, 6vw, 84px); }
.blog-hub-copy .kicker, .article-kicker { color: var(--gold-600); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.blog-hub-copy h1 { max-width: 720px; margin: 24px 0 30px; font-size: clamp(3.4rem, 6vw, 6.4rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.blog-hub-copy h1 em { color: var(--gold-600); font-weight: 500; }
.blog-hub-copy > p:not(.kicker) { max-width: 580px; color: var(--cacao-700); font-size: 1.05rem; }
.blog-hub-visual { position: relative; min-height: 610px; margin: 0; overflow: hidden; }
.blog-hub-visual img { width: 100%; height: 100%; object-fit: cover; }
.blog-hub-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(36, 23, 18, .58)); pointer-events: none; }
.blog-hub-visual figcaption { position: absolute; z-index: 1; right: 26px; bottom: 22px; color: var(--ivory-50); font-size: .72rem; }

.blog-intro { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(46px, 9vw, 120px); padding-block: clamp(100px, 12vw, 160px); }
.blog-intro > p { color: var(--gold-600); font-size: .74rem; font-weight: 600; }
.blog-intro h2 { max-width: 900px; margin: 0 0 28px; font-size: clamp(2.8rem, 5.4vw, 5.4rem); font-weight: 500; letter-spacing: -.05em; line-height: .94; }
.blog-intro div > p { max-width: 760px; color: var(--stone-600); line-height: 1.8; }

.article-feed { padding-block: clamp(96px, 11vw, 150px); background: var(--ivory-100); }
.featured-story { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 560px; background: var(--cacao-950); color: var(--ivory-50); }
.featured-story figure { min-height: 560px; margin: 0; overflow: hidden; }
.featured-story img { width: 100%; height: 100%; object-fit: cover; }
.story-copy { align-self: center; padding: clamp(44px, 7vw, 94px); }
.story-copy > span, .story-row-copy > span { color: #d3ad7e; font-size: .7rem; font-weight: 600; letter-spacing: .08em; }
.story-copy h2 { margin: 24px 0; font-size: clamp(2.5rem, 4.6vw, 4.8rem); font-weight: 500; letter-spacing: -.05em; line-height: .96; }
.story-copy p { color: rgba(255, 253, 249, .72); line-height: 1.75; }
.story-copy a { display: inline-flex; margin-top: 24px; min-height: 44px; align-items: center; color: var(--ivory-50); font-weight: 600; text-underline-offset: 7px; }
.story-row { margin-top: 28px; display: grid; grid-template-columns: 1.18fr .82fr; min-height: 430px; border: 1px solid var(--border-soft); background: var(--white-warm); }
.story-row-copy { align-self: center; padding: clamp(38px, 6vw, 76px); }
.story-row-copy h2 { margin: 22px 0; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.story-row-copy p { max-width: 640px; color: var(--stone-600); line-height: 1.75; }
.story-row-copy a { display: inline-flex; margin-top: 22px; min-height: 44px; align-items: center; color: var(--cacao-950); font-weight: 600; text-underline-offset: 7px; }
.story-row figure { margin: 0; overflow: hidden; }
.story-row img { width: 100%; height: 100%; object-fit: cover; }

.blog-principles { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(56px, 9vw, 120px); padding-block: clamp(104px, 12vw, 160px); }
.blog-principles h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 500; letter-spacing: -.05em; line-height: .96; }
.blog-principles ol { margin: 0; padding: 0; list-style: none; counter-reset: principles; }
.blog-principles li { counter-increment: principles; padding: 26px 0; border-top: 1px solid var(--border-soft); }
.blog-principles li:last-child { border-bottom: 1px solid var(--border-soft); }
.blog-principles li::before { content: "0" counter(principles); display: block; margin-bottom: 10px; color: var(--gold-600); font-size: .72rem; font-weight: 600; }
.blog-principles strong { display: block; margin-bottom: 8px; font-size: 1.32rem; font-weight: 500; }
.blog-principles p { margin: 0; color: var(--stone-600); line-height: 1.7; }

.article-hero { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: clamp(70px, 9vw, 126px) 0 58px; }
.article-hero h1 { max-width: 1050px; margin: 24px 0 30px; font-size: clamp(3.1rem, 6.2vw, 6.5rem); font-weight: 500; letter-spacing: -.06em; line-height: .92; text-wrap: balance; }
.article-deck { max-width: 760px; color: var(--cacao-700); font-size: clamp(1.06rem, 1.6vw, 1.3rem); line-height: 1.65; }
.article-meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 9px 22px; color: var(--stone-600); font-size: .76rem; }
.article-cover { width: min(1320px, calc(100% - 40px)); height: min(66vw, 680px); margin: 0 auto; overflow: hidden; background: var(--ivory-100); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

.article-shell { width: min(1140px, calc(100% - 40px)); margin: 0 auto; padding-block: clamp(90px, 11vw, 150px); display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(56px, 9vw, 120px); align-items: start; }
.article-toc { position: sticky; top: 120px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.article-toc strong { display: block; margin-bottom: 18px; color: var(--gold-600); font-size: .72rem; }
.article-toc a { display: block; padding: 8px 0; color: var(--stone-600); font-size: .78rem; text-decoration: none; }
.article-toc a:hover { color: var(--cacao-950); text-decoration: underline; text-underline-offset: 4px; }
.article-body { font-size: 1rem; line-height: 1.88; }
.article-body > p:first-child { color: var(--cacao-800); font-size: 1.18rem; }
.article-body h2 { margin: 82px 0 24px; font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; scroll-margin-top: 120px; }
.article-body h3 { margin: 42px 0 16px; font-size: 1.36rem; font-weight: 500; }
.article-body p, .article-body li { color: var(--stone-600); }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li { margin-bottom: 12px; }
.article-body a { font-weight: 600; text-underline-offset: 5px; }
.article-callout { margin: 42px 0; padding: 28px 32px; background: var(--ivory-100); border-left: 3px solid var(--gold-500); }
.article-callout strong { display: block; margin-bottom: 9px; color: var(--cacao-950); }
.article-callout p { margin: 0; }
.comparison-table { width: 100%; margin: 38px 0; border-collapse: collapse; font-size: .86rem; }
.comparison-table th, .comparison-table td { padding: 18px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.comparison-table th { color: var(--cacao-950); font-weight: 600; }
.comparison-table td { color: var(--stone-600); }
.medical-signoff { margin-top: 72px; padding: 30px; display: grid; grid-template-columns: 76px 1fr; gap: 22px; align-items: center; background: var(--cacao-950); color: var(--ivory-50); }
.medical-signoff img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; }
.medical-signoff span { display: block; margin-bottom: 6px; color: #d3ad7e; font-size: .68rem; font-weight: 600; }
.medical-signoff strong { display: block; font-weight: 500; }
.medical-signoff p { margin: 6px 0 0; color: rgba(255, 253, 249, .66); font-size: .76rem; line-height: 1.55; }

.article-sources { padding-block: clamp(82px, 10vw, 124px); background: var(--ivory-100); }
.article-sources .section-shell { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(50px, 9vw, 116px); }
.article-sources h2 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 4.5rem); font-weight: 500; letter-spacing: -.05em; }
.article-sources ul { margin: 0; padding: 0; list-style: none; }
.article-sources li { padding: 22px 0; border-top: 1px solid var(--border-soft); }
.article-sources li:last-child { border-bottom: 1px solid var(--border-soft); }
.article-sources a { font-weight: 600; text-underline-offset: 5px; }
.article-sources span { display: block; margin-top: 8px; color: var(--stone-600); font-size: .78rem; }

.related-reading { padding-block: clamp(90px, 11vw, 140px); }
.related-reading h2 { margin: 0 0 44px; font-size: clamp(2.5rem, 4.8vw, 4.7rem); font-weight: 500; letter-spacing: -.05em; }
.related-link { min-height: 170px; padding: 34px 0; display: grid; grid-template-columns: .36fr 1.25fr .2fr; gap: 30px; align-items: center; border-top: 1px solid var(--border-soft); text-decoration: none; }
.related-link:last-child { border-bottom: 1px solid var(--border-soft); }
.related-link span { color: var(--gold-600); font-size: .72rem; font-weight: 600; }
.related-link strong { font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; }
.related-link i { font-style: normal; font-size: 1.5rem; justify-self: end; }

@media (max-width: 880px) {
  .blog-hub-hero, .featured-story, .story-row { grid-template-columns: 1fr; }
  .blog-hub-visual { min-height: 520px; }
  .featured-story figure, .story-row figure { min-height: 440px; }
  .story-row figure { grid-row: 1; }
  .article-shell { grid-template-columns: 1fr; }
  .article-toc { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
  .article-toc strong { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .blog-breadcrumb { padding-block: 16px; }
  .blog-hub-hero { width: 100%; }
  .blog-hub-copy { padding: 70px 22px 60px; }
  .blog-hub-copy h1 { font-size: clamp(3.1rem, 15vw, 4.8rem); }
  .blog-hub-visual { min-height: 65dvh; }
  .blog-intro, .blog-principles, .article-sources .section-shell { grid-template-columns: 1fr; }
  .featured-story figure, .story-row figure { min-height: 330px; }
  .story-copy, .story-row-copy { padding: 42px 24px; }
  .article-hero { padding-top: 62px; }
  .article-hero h1 { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .article-cover { width: 100%; height: 70dvh; }
  .article-shell { padding-block: 72px 100px; gap: 54px; }
  .article-toc { grid-template-columns: 1fr; }
  .article-body h2 { margin-top: 64px; }
  .comparison-table { display: block; overflow-x: auto; }
  .medical-signoff { grid-template-columns: 58px 1fr; padding: 24px 20px; }
  .medical-signoff img { width: 58px; height: 58px; }
  .related-link { grid-template-columns: 1fr auto; gap: 10px; }
  .related-link span { grid-column: 1 / -1; }
}

@media print {
  .article-toc, .whatsapp-float { display: none !important; }
  .article-shell { display: block; width: 100%; }
  .article-body { max-width: none; }
}