/* 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 dateline sits under the article, not in the hero. Same quiet type as
   the old hero eyebrow. The brass dot stays off. */
body.post .eyebrow {
  margin: 20px 0 0;
  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);
}

/* Portrait figures run smaller than the reading measure. A founder photo at
   full column width dominates the section it belongs to. */
body.post .fig.portrait img { max-width: min(360px, 100%); }

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(--text);
  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(--text); }
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(--text); }

/* ---------- Carried over from the marketing template ---------- */
/* The old hero was two columns with this callout in a sidebar. With the grid
   collapsed it stacks under the lede, keeping its rule as a divider. */

body.post .hero-aside {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text);
}

body.post .hero-aside p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
body.post .hero-aside p:last-child { margin-bottom: 0; }
body.post .hero-aside strong {
  /* seo-pages.css sizes this at up to 44px, bigger than the blog h1, because it
     used to be a display figure in a sidebar. As an inline callout label it
     wants body scale. */
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* The marketing template runs this photo band full-bleed, outside any .wrap.
   In a reading column it has to sit on the measure like every other block, so
   nothing crosses the text edge. */

body.post .media-band {
  width: min(100% - 48px, var(--measure));
  margin: 34px auto;
  /* The source is a 1344 square. seo-pages.css floors it at 360px and covers,
     which cropped it to a letterbox and cut the Michelin shelf off the top.
     A square box shows the whole frame. The gradient scrim went with it: it
     existed to keep overlaid text legible on a full-bleed band, and there is
     no text over it here. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: url("/assets/californios-team.jpg") center / cover no-repeat;
}

/* Stat blocks were laid out for the 1360px marketing page: four across with a
   44px figure. In a 645px reading column that is 149px per cell, so they go two
   across and the figure comes down to fit. */

body.post .metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
}

body.post .metric {
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.45;
}

body.post .metric strong {
  display: block;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 6px;
  color: var(--text);
}

@media (max-width: 560px) {
  body.post .metric-grid { grid-template-columns: 1fr; }
}

/* Proof tables keep their structure from seo-pages.css. Only the colour and
   scale need to follow the blog, since .paper variants no longer apply. */

body.post .proof-table { font-size: 15px; margin: 18px 0 0; }

body.post .proof-table th,
body.post .proof-table td {
  border-bottom-color: var(--line);
  color: var(--text);
}

body.post .proof-table th { font-size: 12px; letter-spacing: 0.08em; }

/* Hiring guides use proof tables as checklist rows. Keep long labels inside
   the same reading measure as the hero and body instead of letting the base
   table's nowrap rule widen the page at narrow viewports. */
body.post.hiring-guide .proof-table {
  width: 100%;
  table-layout: fixed;
}

body.post.hiring-guide .proof-table th {
  width: 30%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.post.hiring-guide .proof-table td { overflow-wrap: anywhere; }

/* Buttons. The marketing template fills them solid white on hover, which reads
   as a flare against the dark ground. Weight the outline instead: the inset
   shadow doubles the border without changing border-width, so nothing shifts. */

body.post .button:hover,
body.post .button.alt:hover {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

/* ---------- 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. */