/*
 * Blog drift normalization
 * Shared adapter for the 2026-09-21/22 article batch. Article-specific
 * diagrams keep their own classes; site chrome, tokens, type, width and
 * responsive behaviour inherit the approved blog template.
 */
body.blog-drift {
  --muted: var(--ink-soft);
  --wash: var(--paper-warm);
  --white: #fff;
  --blue: var(--navy-light);
  --cyan: var(--gold);
  --orange: var(--gold);
  --amber: var(--gold-light);
  --lime: var(--gold-light);
  --max: 1140px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.9;
}

body.blog-drift main {
  overflow: clip;
  background: var(--paper);
}

/* .snav has a one-pixel bottom border; reserve its rendered height. */
body.blog-drift .snav-spacer {
  height: 59px;
}

body.blog-drift .hero {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--gold);
}

body.blog-drift .hero h1,
body.blog-drift h1,
body.blog-drift h2,
body.blog-drift h3,
body.blog-drift h4 {
  font-family: "Noto Serif JP", serif;
}

body.blog-drift h1,
body.blog-drift .hero h1 {
  color: var(--paper);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.3;
}

body.blog-drift h2,
body.blog-drift .content h2,
body.blog-drift .article h2 {
  color: var(--navy-deep);
  font-size: clamp(1.75rem, 3.4vw, 2.45rem);
  line-height: 1.4;
}

body.blog-drift h3,
body.blog-drift .content h3,
body.blog-drift .article h3 {
  color: var(--navy);
}

body.blog-drift .eyebrow,
body.blog-drift .section-no,
body.blog-drift .section-num,
body.blog-drift .label,
body.blog-drift .figure-title {
  font-family: "Outfit", sans-serif;
  color: var(--navy);
}

/* Gold is a decorative/accent text colour only on dark surfaces. */
body.blog-drift .hero .eyebrow,
body.blog-drift .hero .section-no,
body.blog-drift .hero .section-num,
body.blog-drift .hero .label,
body.blog-drift .cta .eyebrow,
body.blog-drift .cta .section-no,
body.blog-drift .cta-section .eyebrow,
body.blog-drift .cta-section .section-no {
  color: var(--gold-light);
}

body.blog-drift .wrap,
body.blog-drift .container {
  width: min(1140px, calc(100% - 64px));
  max-width: 1140px;
  margin-inline: auto;
}

body.blog-drift .article-grid,
body.blog-drift .article-layout,
body.blog-drift .article-shell {
  width: min(1140px, calc(100% - 64px));
  max-width: 1140px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 780px) 250px;
  gap: 64px;
}

body.blog-drift .content,
body.blog-drift .article {
  min-width: 0;
}

body.blog-drift .toc {
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

body.blog-drift .toc a,
body.blog-drift a {
  color: var(--navy);
}

body.blog-drift .toc a:hover,
body.blog-drift a:hover {
  color: var(--navy-deep);
  text-decoration-thickness: 2px;
}

body.blog-drift .conclusion,
body.blog-drift .callout,
body.blog-drift .view,
body.blog-drift .fact,
body.blog-drift .unverified,
body.blog-drift .evidence,
body.blog-drift .diagram,
body.blog-drift .figure,
body.blog-drift .figure-block,
body.blog-drift .overview,
body.blog-drift .glossary,
body.blog-drift .fit-row,
body.blog-drift .faq-item,
body.blog-drift .related-card {
  background: #fff;
  border-color: var(--line);
}

body.blog-drift .conclusion,
body.blog-drift .view,
body.blog-drift .callout.view {
  border-left-color: var(--gold);
}

body.blog-drift .fact,
body.blog-drift .callout.fact {
  border-left-color: var(--navy-light);
}

body.blog-drift .unverified,
body.blog-drift .callout.unverified {
  border-left-color: var(--gold-light);
}

body.blog-drift .flow-box,
body.blog-drift .box,
body.blog-drift .state,
body.blog-drift .kpi,
body.blog-drift .gate,
body.blog-drift .package > div,
body.blog-drift .four article {
  border-color: var(--gold);
}

body.blog-drift .flow-box.ai,
body.blog-drift .flow-box.wms,
body.blog-drift .box.ok,
body.blog-drift .package .center,
body.blog-drift .cta,
body.blog-drift .cta-section {
  background: var(--navy);
  color: var(--paper);
}

body.blog-drift .flow-box.human,
body.blog-drift .box.candidate,
body.blog-drift .box.wait,
body.blog-drift .ui-demo,
body.blog-drift .stage-visual,
body.blog-drift .figure-canvas {
  background: var(--paper-warm);
  border-color: var(--gold);
}

body.blog-drift .button,
body.blog-drift .cta a,
body.blog-drift .cta-btn {
  background: var(--gold);
  color: var(--navy-deep);
  border: 0;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

body.blog-drift .button:hover,
body.blog-drift .cta a:hover,
body.blog-drift .cta-btn:hover {
  background: var(--gold-light);
  color: var(--navy-deep);
}

body.blog-drift .table-wrap,
body.blog-drift .table-scroll {
  overflow-x: auto;
  max-width: 100%;
  border-color: var(--line);
  background: #fff;
}

body.blog-drift th {
  background: var(--paper-warm);
  color: var(--navy-deep);
}

body.blog-drift th,
body.blog-drift td {
  border-color: var(--line);
}

body.blog-drift .drift-footer {
  background: var(--navy-deep);
  color: rgba(247, 245, 239, .76);
  padding: 52px 32px 28px;
  text-align: center;
}

body.blog-drift .drift-footer-inner {
  width: min(1140px, 100%);
  margin-inline: auto;
}

body.blog-drift .drift-footer .brand {
  color: var(--paper);
  font-family: "Noto Serif JP", serif;
  font-size: 1.25rem;
  font-weight: 700;
}

body.blog-drift .drift-footer .copy {
  margin-top: 8px;
  font-size: .82rem;
}

body.blog-drift .drift-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(247, 245, 239, .18);
}

body.blog-drift .drift-footer-links a {
  color: var(--paper);
  font-size: .82rem;
  text-decoration: none;
}

body.blog-drift .drift-footer-links a:hover {
  color: var(--gold-light);
}

@media (max-width: 800px) {
  body.blog-drift .wrap,
  body.blog-drift .container,
  body.blog-drift .article-grid,
  body.blog-drift .article-layout,
  body.blog-drift .article-shell {
    width: min(100% - 32px, 1140px);
  }

  body.blog-drift .article-grid,
  body.blog-drift .article-layout,
  body.blog-drift .article-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 44px;
  }

  body.blog-drift .toc {
    display: none;
  }

  body.blog-drift h1,
  body.blog-drift .hero h1 {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  body.blog-drift .hero {
    padding-top: 68px;
  }
}