/* =============================================================
   journal.css — shared stylesheet for /journal/* pages
   Single source of truth for journal hub + article styling.
   Loaded on every journal page; per-page <style> blocks should
   be light and not redeclare these rules.
   ============================================================= */

/* ─── Base brand palette ───────────────────────────────────────
   Journal pages have no inline palette of their own, so define the
   fixed brand palette here (green accents). This is the NORMAL
   light/dark look. When the visitor opts into an adaptive theme,
   adaptive-theme.js injects a higher-priority <style> that remaps
   these tokens to hero-sampled colours. global-nav.js handles the
   dark-mode neutral flips. */
:root {
  --charcoal: #1C1C1A;
  --warm-white: #FAFAF7;
  --cream: #F5F0E8;
  --dark-sage: #505E58;
  --brand-green: #8DD9BF;
  --brand-green-dark: #4DAF92;
  --stone-light: #D4CEC6;
  --near-black: #141412;
}

/* ─── Eyebrow (shared by hub + article) ─── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-green-dark);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 0.5px;
  background: var(--brand-green);
  flex-shrink: 0;
}

/* =============================================================
   JOURNAL HUB
   ============================================================= */

/* ─── Hub hero (full-viewport image with CSS zoom + GSAP parallax) ─── */
.page-header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--charcoal);
  margin-top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-bg-wrap {
  position: absolute;
  left: 0;
  right: 0;
  /* Top is pulled up enough that, after the GSAP parallax (yPercent: 12)
     finishes, the wrap still covers the visible top of the header.
     Math: max translate ≈ 13.9% of header height, so top must be ≤ -14%. */
  top: -16%;
  height: 130%;
  overflow: hidden;
  will-change: transform;
  z-index: 0;
}
.hero-bg-wrap picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero-bg-wrap img,
.hero-bg-wrap > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  animation: heroZoom 40s linear infinite alternate;
}
@keyframes heroZoom {
  from { transform: translateZ(0) scale(1); }
  to   { transform: translateZ(0) scale(1.12); }
}
.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
    rgba(20, 20, 18, 0.4) 0%,
    rgba(20, 20, 18, 0.22) 28%,
    rgba(20, 20, 18, 0.06) 52%,
    transparent 70%);
  pointer-events: none;
}
.hero-gradient-bottom {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(20, 20, 18, 0.42) 0%,
    rgba(20, 20, 18, 0.14) 25%,
    transparent 55%);
  pointer-events: none;
}
.page-header-content {
  position: relative;
  z-index: 2;
  padding: 0 60px 80px;
  max-width: 720px;
}
.page-header .eyebrow {
  color: var(--brand-green);
  animation: heroEyebrowSlide 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both;
}
.page-header .eyebrow::before { background: var(--brand-green); }
.page-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.05;
  color: #fff;
  margin-top: 20px;
  animation: heroTitleFadeUp 1.0s cubic-bezier(0.23, 1, 0.32, 1) 0.45s both;
}
.page-header h1 em { font-style: italic; color: var(--stone-light); }
.page-header p {
  margin-top: 24px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  max-width: 520px;
  animation: heroTitleFadeUp 1.0s cubic-bezier(0.23, 1, 0.32, 1) 0.7s both;
}
@keyframes heroEyebrowSlide {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroTitleFadeUp {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-wrap img,
  .hero-bg-wrap > img { animation: none; }
  .page-header .eyebrow,
  .page-header h1,
  .page-header p {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─── Featured article block ─── */
.featured { padding: 0 60px 0; }
.featured-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-green); margin-bottom: 20px;
}
.featured-eyebrow::before {
  content: ''; display: block; width: 32px; height: 0.5px;
  background: var(--brand-green); flex-shrink: 0;
}
/* Featured card: full-bleed image with overlay text (project-card style) */
.featured-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 21/9;
  background: var(--charcoal);
  cursor: pointer;
}
.featured-card-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.featured-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.featured-card:hover .featured-card-image img { transform: scale(1.04); }
/* Side gradient so the white text reads against a partially-dark left edge.
   In RTL (Arabic), the gradient flips so the dark side is on the right. */
.featured-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(20, 20, 18, 0.82) 0%,
    rgba(20, 20, 18, 0.55) 30%,
    rgba(20, 20, 18, 0.15) 55%,
    transparent 75%);
  pointer-events: none;
  z-index: 1;
}
html[dir="rtl"] .featured-card::after {
  background: linear-gradient(to left,
    rgba(20, 20, 18, 0.82) 0%,
    rgba(20, 20, 18, 0.55) 30%,
    rgba(20, 20, 18, 0.15) 55%,
    transparent 75%);
}
.featured-card-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;          /* vertically centred */
  align-items: flex-start;          /* anchored to the start (left in LTR, right in RTL) */
  color: #fff;
  max-width: 56%;
}
html[dir="rtl"] .featured-card-body {
  /* In RTL, anchor to the right side. align-items:flex-start already does this
     because flex respects writing direction, but we also need the box itself
     positioned right-anchored: */
  left: auto;
  right: 0;
  text-align: right;
}
.featured-label {
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-green); margin-bottom: 10px;
}
.featured-read-time {
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.78); margin-bottom: 22px;
}
.featured-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(32px, 3.6vw, 56px); line-height: 1.1;
  color: #fff; margin-bottom: 20px;
}
.featured-title em { font-style: italic; color: rgba(255, 255, 255, 0.88); }
.featured-excerpt {
  font-family: 'Jost', sans-serif; font-size: 16px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin-bottom: 26px;
}
.featured-link {
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-green);
  display: inline-flex; align-items: center; gap: 10px;
}
.featured-link svg {
  width: 14px; height: 14px;
  stroke: var(--brand-green); stroke-width: 1.5; fill: none;
  transition: transform 0.3s ease;
}
.featured-card:hover .featured-link svg { transform: translateX(4px); }

/* ─── Articles grid ─── */
.articles { padding: 80px 60px; }
.articles-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 48px;
}
.articles-header-left { display: flex; align-items: center; gap: 16px; }
.articles-section-label {
  font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-green-dark);
  display: flex; align-items: center; gap: 16px;
}
.articles-section-label::before {
  content: ''; display: block; width: 32px; height: 0.5px;
  background: var(--brand-green); flex-shrink: 0;
}
.articles-count {
  font-family: 'Jost', sans-serif; font-size: 11px;
  letter-spacing: 0.1em; color: var(--stone-light);
}
.articles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.article-card { display: block; background: var(--cream); }
.article-card-image {
  aspect-ratio: 2.39/1; /* anamorphic */
  overflow: hidden;
  background: var(--stone-light);
}
.article-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.article-card:hover .article-card-image img { transform: scale(1.04); }
.article-card-body { padding: 24px 24px 28px; }
.article-card-meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.article-tag {
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-green-dark);
}
.article-read-time {
  font-family: 'Jost', sans-serif; font-size: 10px;
  letter-spacing: 0.1em; color: var(--dark-sage);
}
.article-read-time::before {
  content: '·'; margin-right: 12px; color: var(--dark-sage);
}
.article-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 24px; line-height: 1.2;
  color: var(--charcoal); margin-bottom: 12px;
}
.article-excerpt {
  font-family: 'Jost', sans-serif; font-size: 15px; line-height: 1.75;
  color: var(--dark-sage); margin-bottom: 16px;
}
.article-link {
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: 0.08em; color: var(--brand-green-dark);
}

/* ─── Filter bar + section divider + empty state ─── */
.section-divider { height: 0.5px; background: var(--stone-light); margin: 0 60px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filter-pill {
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal); border: 0.5px solid var(--stone-light);
  padding: 9px 16px; background: transparent; cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.filter-pill:hover { border-color: var(--brand-green); color: var(--brand-green-dark); }
.filter-pill.active {
  background: var(--charcoal); color: var(--warm-white); border-color: var(--charcoal);
}
.no-articles {
  display: none; grid-column: 1 / -1;
  padding: 60px 0; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300;
  color: var(--stone-light); font-style: italic;
}

/* =============================================================
   ARTICLE PAGES
   ============================================================= */

/* ─── Article header: full-viewport hero with image, overlay text, slow zoom + parallax ─── */
.article-header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  max-width: none;
  overflow: hidden;
  background: var(--charcoal);
  margin-top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.article-header-content {
  position: relative;
  z-index: 2;
  padding: 0 60px 80px;
  max-width: 880px;
}
.article-header .eyebrow {
  color: var(--brand-green);
  margin-bottom: 20px;
  animation: heroEyebrowSlide 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both;
}
.article-header .eyebrow::before { background: var(--brand-green); }
.article-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.08;
  color: #fff;
  margin: 0 0 24px;
  animation: heroTitleFadeUp 1.0s cubic-bezier(0.23, 1, 0.32, 1) 0.45s both;
}
.article-header h1 em { font-style: italic; color: rgba(255, 255, 255, 0.88); }
.article-header .article-meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  animation: heroTitleFadeUp 1.0s cubic-bezier(0.23, 1, 0.32, 1) 0.7s both;
}
.article-header .article-meta .author { font-weight: 400; }
.article-meta {
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: 0.1em; color: var(--stone-light); text-transform: uppercase;
}
/* Legacy: hide any separate article-hero that hasn't been merged yet */
.article-hero {
  width: 100%; aspect-ratio: 16/7; overflow: hidden; background: var(--cream);
  display: none;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .article-header .eyebrow,
  .article-header h1,
  .article-header .article-meta {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─── Article body typography ─── */
.article-body {
  padding: 60px 60px;
  display: grid; grid-template-columns: 1fr 600px 1fr;
}
.article-content { grid-column: 2; }
.article-content p {
  font-family: 'Jost', sans-serif; font-weight: 300;
  font-size: 20px; line-height: 1.85;
  color: var(--dark-sage); margin-bottom: 28px;
}

/* ─── Editorial lead-in: lede paragraph + serif drop cap ───
   Latin scripts only — a floated initial severs connected scripts
   (Arabic), so ar/hi/zh keep the plain opening. */
html[lang="en"] .article-content > p:first-of-type,
html[lang="fr"] .article-content > p:first-of-type {
  font-size: 22px; line-height: 1.8;
  color: var(--charcoal);
}
html[lang="en"] .article-content > p:first-of-type::first-letter,
html[lang="fr"] .article-content > p:first-of-type::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  /* mirrors .article-header h1 so the cap echoes the hero title */
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 0.72;
  float: left;
  padding: 8px 14px 0 0;
  color: var(--charcoal);
}
@media (max-width: 768px) {
  html[lang="en"] .article-content > p:first-of-type,
  html[lang="fr"] .article-content > p:first-of-type {
    font-size: 18px;
  }
  /* The hero h1's 36px floor reads like a typo as a drop cap on a narrow
     column — keep the desktop's two-line span instead. */
  html[lang="en"] .article-content > p:first-of-type::first-letter,
  html[lang="fr"] .article-content > p:first-of-type::first-letter {
    font-size: 56px;
    padding: 6px 12px 0 0;
  }
}
.article-content h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 32px; color: var(--charcoal); margin: 48px 0 20px;
}
.article-content h3 {
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal); margin: 36px 0 16px;
}
/* Non-link emphasis must NOT look bold — match the surrounding body text. */
.article-content strong, .article-content b { font-weight: inherit; color: inherit; }
.article-content ul {
  list-style: none; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.article-content ul li {
  font-family: 'Jost', sans-serif; font-weight: 300;
  font-size: 20px; line-height: 1.7; color: var(--dark-sage);
  padding-left: 20px; position: relative;
}
.article-content ul li::before {
  content: '—'; position: absolute; left: 0; color: var(--brand-green);
}
/* In-body text links: same colour as surrounding text, only slightly bolder.
   This is the ONLY bold in body copy — nothing else (incl. <strong>) is bold. */
.article-content a {
  color: inherit;
  font-weight: 500;
  border-bottom: none;
  transition: opacity 0.2s;
}
.article-content a:hover { opacity: 0.7; }

.pull-quote {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 26px; line-height: 1.4; color: var(--charcoal);
  border-left: 0.5px solid var(--brand-green);
  padding-left: 24px; margin: 48px 0;
}

/* ─── Filed under (subject tags) ─── */
.article-tags {
  grid-column: 2;                /* sit in the content column (under the text), not the 1fr margin */
  margin: 28px 0 0; padding: 0;
  font-family: 'Jost', sans-serif;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.article-tags .ft-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(28, 28, 28, 0.65); margin-right: 4px;
}
.article-tags a {
  font-size: 14px; color: var(--charcoal); text-decoration: none;
  border: 0.5px solid rgba(28, 28, 28, 0.22); border-radius: 999px;
  padding: 3px 13px; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.article-tags a:hover { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
html[data-theme="dark"] .article-tags .ft-label { color: rgba(255, 255, 255, 0.6); }
html[data-theme="dark"] .article-tags a { color: #FAFAF7; border-color: rgba(255, 255, 255, 0.25); }
html[data-theme="dark"] .article-tags a:hover { background: #FAFAF7; color: #141412; }

/* ─── Article CTA ─── */
.article-cta {
  background: var(--cream); padding: 60px; margin: 60px 0 0; text-align: center;
}
.article-cta h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 36px; color: var(--charcoal); margin-bottom: 16px;
}
.article-cta h2 em { font-style: italic; }
.article-cta p {
  font-family: 'Jost', sans-serif; font-size: 16px;
  color: var(--dark-sage); margin-bottom: 28px; line-height: 1.7;
}
.cta-link {
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 15px; letter-spacing: 0.08em;
  color: var(--brand-green-dark);
  display: inline-flex; align-items: center; gap: 8px;
}
.cta-link svg {
  width: 14px; height: 14px;
  stroke: var(--brand-green-dark); stroke-width: 1.5; fill: none;
}

/* ─── Related reading (cards + pills) ─── */
.related-section { padding: 80px 60px 0; }
.related-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-green-dark); margin-bottom: 32px;
}
.related-eyebrow::before {
  content: ''; display: block; width: 32px; height: 0.5px;
  background: var(--brand-green); flex-shrink: 0;
}
.related-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.rel-card { display: block; background: var(--cream); overflow: hidden; }
.rel-card-img {
  aspect-ratio: 2.39/1; /* anamorphic — match article cards */
  overflow: hidden; background: var(--stone-light);
}
.rel-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(.25,.46,.45,.94);
}
.rel-card:hover .rel-card-img img { transform: scale(1.04); }
.rel-card-body { padding: 24px; }
.rel-card-tag {
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-green-dark); margin-bottom: 10px;
}
.rel-card-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 22px; line-height: 1.2; color: var(--charcoal); margin-bottom: 10px;
}
.rel-card-excerpt {
  font-family: 'Jost', sans-serif; font-size: 14px; line-height: 1.7;
  color: var(--dark-sage); margin-bottom: 14px;
}
.rel-card-link {
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: 0.08em; color: var(--brand-green-dark);
}
.related-pages-strip {
  padding: 40px 60px 60px;
  border-top: 0.5px solid var(--stone-light); margin-top: 40px;
}
.related-pages-label {
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-green-dark);
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.related-pages-label::before {
  content: ''; display: block; width: 24px; height: 0.5px;
  background: var(--brand-green); flex-shrink: 0;
}
.related-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.related-pill {
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none;
  border: 0.5px solid var(--stone-light); padding: 10px 18px;
  transition: border-color .25s, color .25s;
}
.related-pill:hover { border-color: var(--brand-green); color: var(--brand-green-dark); }

/* ─── Shared "Back to top" ─── */
.page-top-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; padding: 40px 0 0;
  text-decoration: none; color: var(--charcoal);
  opacity: 0.3; transition: opacity 0.3s;
  font-family: 'Jost', sans-serif; font-size: 8px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.page-top-btn:hover { opacity: 0.9; }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .article-body { grid-template-columns: 60px 1fr 60px; }
  .related-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .articles-grid { grid-template-columns: 1fr 1fr; }
  .featured-card { aspect-ratio: 16/10; }
  .featured-card-body { padding: 40px 40px; }
}
@media (max-width: 768px) {
  .page-header { height: 100svh; min-height: 520px; }
  .page-header-content { padding: 0 24px 48px; }
  .featured { padding: 0 24px 0; }
  .featured-card { aspect-ratio: 4/5; }
  .featured-card-body { padding: 32px 24px; }
  .featured-excerpt { display: none; } /* tighten on mobile */
  .articles { padding: 60px 24px; }
  .articles-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .articles-grid { grid-template-columns: 1fr; gap: 15px; }
  .section-divider { margin: 0 24px; }
  .article-header { height: 100svh; min-height: 520px; padding: 0; }
  .article-header-content { padding: 0 24px 48px; }
  .article-body { padding: 40px 0; grid-template-columns: 24px 1fr 24px; }
  .article-cta { padding: 40px 24px; }
  .related-section { padding: 60px 24px 0; }
  .related-cards { grid-template-columns: 1fr; gap: 15px; }
  .related-pages-strip { padding: 32px 24px 48px; }
}

/* ─── Mobile overflow guards ───────────────────────────────────────────────
   .article-content is a CSS grid item (min-width defaults to auto), so a wide
   table or a long unbreakable token forces it past its track and slides the
   whole page sideways on mobile. min-width:0 lets it shrink; wide tables then
   scroll inside their own wrapper instead of widening the page. */
.article-content { min-width: 0; overflow-wrap: break-word; }
.article-content img { max-width: 100%; height: auto; }
.article-content .craft-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}