.blog-page {
  /* Aliased to the shared palette in tokens.css. This page used to carry a
     fifth parallel set of brand colours, including --blog-blue #0878ef, which
     measures 4.25:1 on white — under the 4.5:1 AA threshold for small text.
     --blue-ink is the token that already solved that (5.2:1). */
  --blog-ink: var(--ink);
  --blog-muted: var(--muted);
  --blog-line: var(--line);
  --blog-blue: var(--blue-ink);
  --blog-pale: oklch(0.965 0.022 252);
  background: var(--paper);
  color: var(--blog-ink);
  overflow-x: hidden;
}

.blog-page .site-header {
  position: relative;
  border-bottom: 1px solid var(--blog-line);
  background: #fff;
  color: var(--blog-ink);
}

.blog-page .wordmark-name { color: var(--blog-ink); }
.blog-page .wordmark-credentials { color: var(--blog-muted); }
.blog-page .primary-nav a { color: var(--blog-muted); }
.blog-page .primary-nav a:hover,
.blog-page .primary-nav a.active { color: var(--blog-ink); }
.blog-page .menu-toggle { color: var(--blog-ink); }

.article-hero {
  padding: var(--band-tight) 0;
  background: #fff;
}

.article-hero-grid {
  display: grid;
  /* An even split, not 0.72/1.28. The narrow text column could not hold the
     display title on one line, so "Actually Is." broke to "Actually" / "Is."
     and the hero ran to three lines. The photo loses width and gains nothing
     worse than a tighter crop. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}

.article-hero-grid > * { min-width: 0; }

.article-intro { padding-bottom: 4px; }

.article-category,
.section-kicker {
  margin: 0 0 var(--sp-4);
  color: var(--blog-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.article-title {
  max-width: 12ch;
  margin: 0;
  color: var(--blog-ink);
  font-family: var(--font-display);
  /* --fs-display-lg, not -xl. At the -xl ceiling this title measured wider than
     its column and wrapped mid-phrase. */
  font-size: var(--fs-display-lg);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
  text-transform: uppercase;
}

.article-title em {
  color: var(--blog-blue);
  font-style: normal;
}

.article-dek {
  max-width: 48ch;
  margin: var(--sp-5) 0;
  color: var(--blog-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: #8290a0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.article-byline i {
  color: var(--blog-blue);
  font-style: normal;
}

.hero-food-frame,
.section-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--blog-ink);
}

.hero-food-frame {
  min-height: 380px;
  box-shadow: 0 14px 34px rgb(20 34 51 / 12%);
}

.hero-food-frame::after,
.section-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgb(9 25 41 / 15%), transparent 48%, rgb(4 14 28 / 55%));
  content: "";
  pointer-events: none;
}

.hero-food-frame img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center;
}

.hero-food-frame figcaption {
  position: absolute;
  z-index: 1;
  right: 28px;
  bottom: 26px;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: var(--lh-snug);
  text-align: right;
  text-transform: uppercase;
}

.hero-food-frame figcaption strong {
  display: block;
  color: #8bbcff;
  font-weight: 700;
}

.article-shell {
  /* band-tight on top: the hero already contributes its own bottom padding, and
     two full bands stacked left 160px of dead space before the first content. */
  padding: var(--band-tight) 0 var(--band);
}

.article-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  justify-content: center;
  gap: clamp(40px, 6vw, 92px);
}

.article-toc {
  position: sticky;
  top: 28px;
  align-self: start;
  padding-top: 14px;
  border-top: 2px solid var(--blog-ink);
}

.article-toc p {
  margin: 0 0 var(--sp-4);
  color: #8290a0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.article-toc a {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 6px;
  padding: var(--sp-3) 0;
  color: var(--blog-muted);
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  transition: color 160ms ease, padding-left 160ms ease;
}

.article-toc a span {
  color: var(--blog-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
}

.article-toc a:hover {
  padding-left: 5px;
  color: var(--blog-ink);
}

.article-content { min-width: 0; }

.big-idea {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  margin-bottom: 48px;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid #dbeaf9;
  background: var(--blog-pale);
}

.idea-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #7cb7f8;
  border-radius: 50%;
  color: var(--blog-blue);
  font-size: 25px;
}

.big-idea .section-kicker { margin-bottom: 6px; }
.big-idea h2 {
  margin: 0 0 var(--sp-2);
  color: var(--blog-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
  text-transform: uppercase;
}

.big-idea p:last-child {
  max-width: var(--measure-body);
  margin: 0;
  color: var(--blog-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.article-section {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 192px;
  gap: 18px 18px;
  align-items: start;
  padding: var(--band-tight) 0;
  border-top: 1px solid var(--blog-line);
}

.article-section.without-photo {
  grid-template-columns: 44px minmax(0, 1fr);
}

.section-index {
  padding-top: 4px;
  color: var(--blog-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.section-copy .section-kicker {
  margin-bottom: 6px;
  color: #9aa7b5;
  font-size: var(--fs-label);
}

.article-section h2 {
  margin: 0 0 12px;
  color: var(--blog-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
  text-transform: uppercase;
}

.section-copy > p:not(.section-kicker) {
  margin: 0;
  color: var(--blog-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure-body);
}

.section-photo {
  min-height: 142px;
  margin-top: 2px;
}

.section-photo img {
  width: 100%;
  height: 142px;
  object-fit: cover;
}

.section-photo figcaption {
  position: absolute;
  z-index: 1;
  right: 11px;
  bottom: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: var(--lh-snug);
  text-align: right;
  text-transform: uppercase;
}

.section-photo figcaption strong {
  display: block;
  color: #c3dcff;
  font-weight: 700;
}

.blue-bullets {
  display: grid;
  gap: 6px;
  margin: var(--sp-4) 0 0;
  padding: 0;
  color: var(--blog-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  list-style: none;
}

.blue-bullets li {
  position: relative;
  padding-left: 14px;
}

.blue-bullets li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blog-blue);
  content: "";
}

.blue-bullets strong { color: var(--blog-ink); }

.food-system {
  margin: var(--sp-4) 0;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid #dbe6f2;
  background: #fff;
}

.food-system-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--blog-line);
}

.food-system-heading .section-kicker { margin: 0; }
.food-system-heading > p:last-child {
  max-width: 380px;
  margin: 0;
  color: var(--blog-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  text-align: right;
}

.food-system-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding-top: 22px;
}

.system-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.system-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-h3);
  line-height: 1;
}

.icon-energy { color: #f36669; }
.icon-blocks { color: #3f82e9; }
.icon-micro { color: #53b87a; }
.icon-context { color: #b675e7; }

.system-item strong {
  display: block;
  color: var(--blog-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  line-height: var(--lh-snug);
}

.system-item small {
  display: block;
  margin-top: 3px;
  color: var(--blog-muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-snug);
}

.quote-callout {
  margin: var(--sp-6) 0;
  padding: var(--sp-6) var(--sp-7);
  border-left: 3px solid var(--blog-blue);
  background: var(--blog-pale);
}

.quote-callout p {
  max-width: var(--measure-tight);
  margin: 0 0 var(--sp-4);
  color: var(--blog-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-style: normal;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
}

.quote-callout cite {
  color: var(--blog-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.takeaway-list {
  display: grid;
  gap: 8px;
  margin: 17px 0 0;
  padding: 0;
  color: var(--blog-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  list-style: none;
}

.takeaway-list li {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 6px;
}

.takeaway-list span {
  color: var(--blog-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}

.references {
  padding: var(--band-tight) 0;
  border-top: 1px solid var(--blog-line);
}

.references .section-kicker { margin-bottom: 12px; color: #9aa7b5; }
.references ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 19px;
  color: #8795a4;
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
}

.author-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: var(--band-tight) 0;
  border-top: 1px solid var(--blog-line);
  border-bottom: 1px solid var(--blog-line);
}

.author-card > img {
  width: 102px;
  height: 102px;
  flex: 0 0 102px;
  border-radius: 2px;
  object-fit: cover;
  /* Reception portrait is vertical with the face high in frame; keep it. */
  object-position: 50% 18%;
}

.author-copy .section-kicker { margin-bottom: 5px; color: #9aa7b5; }
.author-copy h2 {
  margin: 0 0 var(--sp-2);
  color: var(--blog-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.author-copy > p:not(.section-kicker) {
  max-width: var(--measure-body);
  margin: 0;
  color: var(--blog-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.author-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  color: var(--blog-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
}

.author-links a { transition: color 160ms ease; }
.author-links a:hover { color: var(--blog-ink); }

.related-articles {
  padding: var(--band) 0;
  background: #fff;
}

.related-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 24px;
}

.related-heading .section-kicker { margin-bottom: 8px; }
.related-heading h2 {
  margin: 0;
  color: var(--blog-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
  text-transform: uppercase;
}

.related-heading > a {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--blog-blue);
  color: var(--blog-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.related-card img {
  width: 100%;
  height: 154px;
  margin-bottom: 15px;
  object-fit: cover;
  transition: transform 260ms ease;
}

.related-card:hover img { transform: scale(1.025); }
.related-card .section-kicker { margin-bottom: 6px; color: #9aa7b5; }
.related-card h3 {
  max-width: none;
  margin: 0 0 var(--sp-2);
  color: var(--blog-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.related-card > span {
  color: #8b98a7;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
}

.blog-cta {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  color: #fff;
  background: var(--navy-deep);
}

.blog-cta-media,
.blog-cta-scrim {
  position: absolute;
  inset: 0;
}

.blog-cta-media {
  background: url("/assets/generated-cta.webp") center 47% / cover no-repeat;
}

.blog-cta-scrim {
  background: linear-gradient(90deg, rgb(5 17 29 / 88%), rgb(5 17 29 / 52%) 58%, rgb(5 17 29 / 65%));
}

.blog-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.blog-cta-content .eyebrow { margin-bottom: 14px; color: #b9c9d9; }
.blog-cta-content h2 {
  max-width: 760px;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
  text-transform: uppercase;
}

.blog-cta-content h2 span { color: #79b6ff; }
.blog-cta-content > p:not(.eyebrow) {
  margin: 0 0 var(--sp-5);
  color: #c0cbd6;
  font-size: var(--fs-lead);
}

.blog-footer {
  padding: var(--band-tight) 0 var(--sp-5);
  background: var(--navy-deep);
  color: #fff;
}

.blog-footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 30px;
}

  .blog-footer .wordmark-name { color: #fff; font-size: var(--fs-h4); }
  .blog-footer .wordmark-credentials { color: #aebdca; font-size: var(--fs-micro); }

.blog-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.blog-footer nav a {
  color: #aebdca;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
}

.blog-footer nav a:hover { color: #fff; }
.footer-tagline {
  margin: 0;
  color: #aebdca;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: var(--lh-snug);
  text-align: right;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: 34px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 15%);
  color: #75899b;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .article-hero-grid { gap: 42px; }
  .article-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 34px;
  }
  .article-section { grid-template-columns: 38px minmax(0, 1fr) 165px; }
  .section-photo, .section-photo img { min-height: 124px; height: 124px; }
  .food-system { padding-inline: 20px; }
  .system-item { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@media (max-width: 760px) {
  .blog-page .nav-bar { gap: 10px; }
  .blog-page .wordmark { flex: 1 1 auto; min-width: 0; }
  /* The wordmark subline used to be clipped to a 150px box at 6px, which both
     truncated the text and fell far below the legibility floor. It is hidden on
     phones instead, matching the shell pattern, so the name stands alone. */
  .blog-page .wordmark-credentials { display: none; }
  /* A 108px box holding 7px type wrapped this CTA to three lines. Let it size
     to its label at the shared label size, and hide it at 480 like the shell. */
  .blog-page .nav-action {
    flex: 0 0 auto;
    min-height: 40px;
    width: auto;
    min-width: 0;
    max-width: none;
    padding-inline: var(--sp-3);
  }

  .blog-page .primary-nav {
    background: var(--navy-deep);
    color: #fff;
  }
  .blog-page .primary-nav a { color: #c2ceda; }
  .blog-page .primary-nav a.active,
  .blog-page .primary-nav a:hover { color: #fff; }

  .article-hero { padding: var(--band-tight) 0; }
  .article-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .article-hero-grid > * { width: 100%; }
  .article-intro,
  .article-title,
  .article-dek { max-width: 100%; }
  .article-title { font-size: clamp(44px, 13vw, 72px); }
  .article-dek { overflow-wrap: break-word; }
  .hero-food-frame,
  .hero-food-frame img { min-height: 300px; }
  .article-shell { padding-top: 30px; }
  .article-layout { display: block; }
  .article-toc {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin-bottom: 38px;
    padding-top: 13px;
  }
  .article-toc p { grid-column: 1 / -1; }
  .article-toc a { padding-block: 6px; }
  .article-section,
  .article-section.without-photo {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 13px;
  }
  .section-photo {
    grid-column: 2;
    width: min(100%, 280px);
    margin-top: 6px;
  }
  .food-system-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .food-system-heading > p:last-child { max-width: none; text-align: left; }
  .food-system-grid { grid-template-columns: repeat(2, 1fr); }
  .system-item { flex-direction: row; align-items: center; }
  .related-grid { grid-template-columns: 1fr; gap: 34px; }
  .related-card img { height: 200px; }
  .blog-footer-grid { grid-template-columns: 1fr; gap: 25px; }
  .blog-footer nav { justify-content: flex-start; }
  .footer-tagline { text-align: left; }
}

@media (max-width: 480px) {
  .article-title { font-size: clamp(40px, 12vw, 56px); }
  .article-byline { display: grid; gap: 5px; }
  .big-idea { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4); }
  .article-section { padding-block: 28px 31px; }
  .article-section h2 { font-size: var(--fs-h3); }
  .food-system { padding: var(--sp-5) var(--sp-4); }
  .food-system-grid { gap: 18px 10px; }
  .system-item { align-items: flex-start; flex-direction: column; }
  .quote-callout { padding: var(--sp-5); }
  .author-card { align-items: flex-start; flex-direction: column; }
  .author-card > img { width: 86px; height: 86px; flex-basis: 86px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

.article-index-hero { padding-block: clamp(64px, 8vw, 112px); }
.article-index-hero .article-title { max-width: 13ch; }
.article-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--blog-line);
  border: 1px solid var(--blog-line);
}
.article-index-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.3vw, 34px);
  background: #fff;
}
.article-index-card .section-kicker { margin-bottom: 12px; color: var(--blog-blue); }
.article-index-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.article-index-card h2 a:hover,
.article-index-link:hover { color: var(--blog-blue); }
.article-index-card > p:not(.section-kicker) {
  margin: 0 0 18px;
  color: var(--blog-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.article-index-link {
  margin-top: auto;
  color: var(--blog-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.article-index-link:focus-visible { outline: 2px solid var(--blog-blue); outline-offset: 4px; }
@media (max-width: 800px) {
  .article-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .article-index-grid { grid-template-columns: 1fr; }
}