/* Editorial page layer: the marketing font and a comfortable reading column. */
html[data-page="article"] body {
  font-family: var(--font-marketing);
  font-weight: var(--fw-regular);
  overflow-x: clip;
}
html[data-page="article"] { --sky-h: calc(var(--s-19) * 4); }
.article-header {
  width: min(var(--container), calc(100% - var(--s-9) * 2));
  margin: 0 auto;
  padding: var(--s-13) 0 var(--s-12);
}
.article-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  list-style: none;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}
.article-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-6); }
.article-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--h-cta); }
.article-breadcrumbs a:hover { color: var(--accent-hover); }
.article-breadcrumbs li + li::before { content: '/'; color: var(--ink-3); }
.article-header > .blog-meta { margin-top: var(--s-9); }
.article-header h1 {
  max-width: var(--container-text);
  margin-top: var(--s-9);
  color: var(--ink);
  font-size: clamp(var(--t-display-md), 4.5vw, var(--t-display-lg));
  line-height: 1.1;
  letter-spacing: var(--t-hero-ls);
  font-weight: var(--fw-black);
}
.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-8);
  margin-top: var(--s-9);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--ink-2);
}
.article-byline a { color: var(--ink); font-weight: var(--fw-bold); }
.article-byline a:hover { color: var(--accent-hover); }
.article-media img { width: 100%; height: auto; border-radius: var(--r-4xl); }
.article-layout {
  display: grid;
  grid-template-columns: calc(var(--sidebar) - var(--s-11)) minmax(0, 1fr);
  gap: var(--s-15);
  align-items: start;
  padding: var(--s-13) 0 var(--s-16);
}
.article-toc {
  position: sticky;
  top: calc(var(--h-navbar) + var(--s-13));
  padding: var(--s-9);
  border-radius: var(--r-3xl);
  background: var(--bg-subtle);
}
.article-toc h2 { font-size: var(--t-body); line-height: var(--t-body-lh); font-weight: var(--fw-bold); }
.article-toc ol { display: grid; margin-top: var(--s-5); list-style: none; }
.article-toc a { display: block; padding: var(--s-6) 0; font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink-2); }
.article-toc a:hover { color: var(--accent-hover); }
.article-prose { min-width: 0; color: var(--ink-2); font-size: var(--t-prose-lg); line-height: 1.65; }
.article-prose > * + * { margin-top: var(--s-9); }
.article-prose > p:first-child { color: var(--ink); font-size: var(--t-lead); line-height: var(--t-lead-lh); }
.article-prose h2 {
  margin-top: var(--s-13);
  scroll-margin-top: calc(var(--h-navbar) + var(--s-13));
  color: var(--ink);
  font-size: var(--t-display-md);
  line-height: 1.1;
  letter-spacing: var(--t-hero-ls);
  font-weight: var(--fw-bold);
}
.article-prose strong { color: var(--ink); font-weight: var(--fw-bold); }
.article-prose a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: var(--s-2); }
.article-prose a:hover { color: var(--ink); }
.article-prose .article-callout {
  padding: var(--s-9);
  border-radius: var(--r-3xl);
  background: var(--accent-50);
  color: var(--ink);
  font-size: var(--t-title-lg);
  line-height: 1.4;
  font-weight: var(--fw-bold);
}
.article-signoff { margin-top: var(--s-12); color: var(--ink-2); font-size: var(--t-prose); line-height: 1.45; }
.article-signoff strong { display: block; margin-bottom: var(--s-2); color: var(--ink); font-size: var(--t-title); font-weight: var(--fw-bold); }
.article-back { display: inline-flex; align-items: center; gap: var(--s-4); min-height: var(--h-cta); margin-top: var(--s-9); color: var(--accent-hover); font-size: var(--t-prose); line-height: var(--t-prose-lh); font-weight: var(--fw-medium); }
.article-back:hover { color: var(--ink); }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-11); }
  .article-toc { position: static; }
  .article-toc ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-9); }
}
@media (max-width: 760px) {
  .article-header { padding-top: var(--s-9); }
  .article-header h1 { font-size: var(--t-display-md); line-height: 1.15; }
  .article-header > .blog-meta { margin-top: var(--s-7); }
  .article-byline { gap: var(--s-4) var(--s-7); }
  .article-byline > :last-child { flex-basis: 100%; }
  .article-media img { border-radius: var(--r-3xl); }
  .article-layout { padding-top: var(--s-11); padding-bottom: var(--s-13); }
  .article-prose { font-size: var(--t-prose); line-height: 1.65; }
  .article-prose h2 { font-size: var(--t-title-lg); line-height: var(--t-title-lg-lh); }
  .article-prose .article-callout { font-size: var(--t-title); }
}