/* Blog reading layout. Loads after seo-pages.css, which supplies the shared
   nav, footer, and :root tokens.

   Shape: one narrow column, roughly 64 characters, centered. No bands, no
   split columns, no decoration. Type does the work.

   Everything is scoped to body.post so the marketing site, guides, and case
   studies are untouched. seo-pages.css is never edited. */

body.post {
  --measure: 645px;
  --ground: #0a0908;
  --text: #ffffff;
  --muted: #ffffff;
  --faint: #ffffff;
  --line: #26231f;

  background: var(--ground);
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
}

/* The film-grain overlay is tuned for the marketing pages and muddies long
   reading copy. */
body.post::before { display: none; }

/* Narrow the article without touching --wrap, which the nav and footer share. */
/* --measure is the CONTENT width; padding sits outside it so the reading
   measure lands where intended rather than 48px short. */
body.post main .wrap {
  width: min(100%, calc(var(--measure) + 48px));
  padding: 0 24px;
}

/* Collapse the two-column heading/body grid into one column. The heading and
   its copy already sit in source order, so this alone yields the article
   shape with no markup change. */
body.post .split {
  display: block;
  gap: 0;
}

/* ---------- Rhythm ---------- */
/* Sections become pure spacing. No bands, no rules, no 108px gutters. */

body.post .section {
  padding: 0;
  border-top: 0;
  background: none;
  color: inherit;
}

body.post .section.alt { background: none; }
body.post .section.alt::before { content: none; }
body.post main { padding-bottom: 76px; }

/* ---------- Masthead ---------- */

body.post .hero {
  display: block;
  min-height: 0;
  padding: 52px 0 4px;
  overflow: visible;
}

body.post .hero::after { content: none; }

body.post .crumbs {
  margin-bottom: 26px;
  font-size: 13px;
  color: var(--faint);
}

body.post .crumbs a { color: var(--muted); text-decoration: none; }
body.post .crumbs a:hover { color: var(--text); }

/* The eyebrow carries the publish date here, so it reads as a dateline
   rather than a brand label. The brass dot goes. */
body.post .eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

body.post .eyebrow::before { content: none; }

body.post h1 {
  margin: 0 0 18px;
  max-width: none;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

body.post .lede {
  margin: 0;
  max-width: none;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}

/* ---------- Body ---------- */

body.post h2 {
  position: relative;
  margin: 44px 0 11px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  scroll-margin-top: 96px;
}

body.post h3 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

/* Heading anchor, injected by blog.js and revealed on hover. Sits in the
   margin so it never shifts the text. */
body.post h2 .anchor {
  position: absolute;
  left: -0.8em;
  color: var(--faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.post h2:hover .anchor,
body.post h2 .anchor:focus { opacity: 1; }

body.post .copy,
body.post p {
  max-width: none;
  color: var(--text);
}

body.post p { margin: 0 0 22px; }
body.post .copy strong { font-weight: 600; color: var(--text); }

body.post li { font-size: 15px; line-height: 1.5; }
body.post li::marker { color: var(--faint); }

body.post a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  background-image: none;
  transition: text-decoration-color 0.2s ease;
}

body.post a:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
  background-size: 0 0;
}

/* ---------- FAQ ---------- */

body.post .faq { gap: 0; }

body.post .faq article {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

body.post .faq h3 { margin-top: 0; }
body.post .faq p { margin-bottom: 0; color: var(--muted); }

/* ---------- Figures ---------- */
/* Bare. No frame, no background. The title lives inside the graphic so the
   figure stays self-contained wherever it is quoted or screenshotted. */

body.post .fig { margin: 30px 0; padding: 0; }

body.post .fig svg,
body.post .fig img {
  display: block;
  /* Width follows the height cap rather than filling the column, so a tall
     figure (a full phone frame is 2:1 taller than the measure is wide) does
     not run past a screen and shove the reading flow down. Wide figures are
     unaffected: they hit max-width first. Natural size is never exceeded, so
     nothing gets upscaled. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(78vh, 780px);
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

/* The one caption that stays: the illustration-not-a-screenshot line, which
   the copyright call depends on. */
body.post .fig figcaption {
  margin-top: 10px;
  max-width: none;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--faint);
}

/* Keeps the phone frame, loses the staged card background. */

/* ---------- Post index ---------- */
/* A dated list, not a card grid. */

body.post .grid,
body.post .blog-grid {
  display: block;
  gap: 0;
}

body.post .tile {
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  transform: none;
}

body.post .tile:hover {
  border-color: var(--line);
  transform: none;
  background: none;
}

body.post .grid article:last-child { border-bottom: 1px solid var(--line); }

body.post .tile .mini {
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

body.post .tile .mini.live { color: var(--faint); }

body.post .tile h3 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

body.post .tile h3 a { text-decoration: none; }
body.post .tile h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
body.post .tile p { margin: 0; font-size: 14.5px; color: var(--muted); }
body.post .tile.queued { opacity: 1; }
body.post .tile.queued h3 { color: var(--muted); font-weight: 400; }

/* ---------- Footnote ---------- */

body.post .disclosure {
  margin-top: 52px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: none;
}

body.post .disclosure p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}

body.post .link-row {
  gap: 18px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

body.post .link-row a { font-size: 14px; color: var(--muted); text-decoration: none; }
body.post .link-row a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- Chrome ---------- */

/* The logo is a wordmark, so it stands alone. The old 34px square slot
   rendered the two-line neon as an illegible smear next to redundant text. */
body.post .brand { gap: 0; }

body.post .brand img {
  width: 60px;
  height: 45px;
  object-fit: contain;
}

body.post .site-nav {
  background: rgba(10, 9, 8, 0.92);
  border-bottom: 1px solid var(--line);
}

body.post footer {
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
}

body.post footer .wrap { width: min(100%, calc(var(--measure) + 48px)); padding: 0 24px; }
body.post footer a { text-decoration: none; }

/* ---------- Motion ---------- */
/* One quiet fade. Nothing drifts, nothing lifts. */

body.post [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.post [data-reveal].in { opacity: 1; transform: none; }
html:not(.js) body.post [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.post [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 640px) {
  body.post h1 { font-size: 30px; }
  body.post h2 { font-size: 20px; margin-top: 36px; }
  body.post .lede { font-size: 16px; }
  body.post main .wrap,
  body.post footer .wrap { padding: 0 20px; }
}

/* Device internals. These were lost when this sheet was rewritten for the
   narrow layout, which left the mockup rendering as raw text. */