/* A single blog article. Loads after blog.css, which already carries the cards the
   page ends on, so this sheet is only the two things an article adds: the byline
   strip under the title, and a column of running prose. Everything resolves to the
   design-system tokens in base.css. */

/* The tech hero is sized for a landing page (210/130). An article has one line of
   title, a lead and a byline above the cover, so it needs less room under it. */
.post-hero { padding: var(--hero-pt) 0 var(--hero-pb); min-height: var(--hero-min); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 680px) { .post-hero { padding: 120px 0 64px; min-height: 0; } }

/* same breadcrumb the case studies use, centred under the hero grid */
.post-crumb { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 24px; font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--muted); }
.post-crumb a:hover { color: var(--ink); text-decoration: underline; }
.post-crumb span { color: var(--card-border); }
.post-crumb b { font-weight: 500; color: var(--text-dim); }

/* date · length · author, in the descriptor role rather than as a paragraph.
   The separators are generated, not markup: a "·" in the HTML is read aloud, and
   hiding it from screen readers hides it from the markdown twin as well. */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin-top: 24px; font-size: var(--fs-descriptor); line-height: var(--lh-descriptor); color: var(--text-dim); }
.post-meta span + span::before { content: "·"; margin-right: 8px; color: var(--card-border); }

/* The cover rides up over the hero's lower edge, the same move .case-shot-hero
   makes, so the fold reads as one block instead of two stacked panels. */
.post-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  margin-top: -48px; position: relative; z-index: 2;
  border: 1px solid var(--card-border); border-radius: var(--r-lg);
  background: var(--grad-card); box-shadow: var(--shadow); }
@media (max-width: 940px) { .post-cover { margin-top: -32px; } }
/* Award badges and portrait artwork are square-ish. Cropping them to the 1.6 band
   cuts the badge in half, so those covers sit inside the frame instead of filling
   it — same footprint, whole image. */
.post-cover-fit { object-fit: contain; background: var(--bg-soft); padding: 24px; }

.post-sec { padding-top: 64px; }

/* ── the article column ─────────────────────────────────────────────────────
   68ch is the measure the LP's other long-form blocks land on at 18px. Centred
   in the 1180px wrap rather than given a sidebar: there is nothing to put in one,
   and a lone column of text is what these articles are. */
/* an unbroken URL or a long address in the prose is wider than a phone: without
   this the whole page gains a horizontal scrollbar for the sake of one link */
.post-body { max-width: 760px; margin: 0 auto; overflow-wrap: anywhere; }
.post-body > *:first-child { margin-top: 0; }
.post-body p { font-size: var(--fs-p); line-height: 1.75; color: var(--text); margin-bottom: 24px; }
.post-body h2 { font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-h3); margin: 48px 0 16px; }
.post-body h3 { font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-h4); margin: 32px 0 16px; }
.post-body strong, .post-body b { font-weight: 600; color: var(--ink); }

/* Links in prose have to be visible without the surrounding text turning into a
   ransom note: navy, underlined at a distance, amber underline on hover. */
.post-body a { color: var(--ink); font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--card-border);
  transition: text-decoration-color var(--dur) ease; }
.post-body a:hover { text-decoration-color: var(--amber); }

.post-body ul, .post-body ol { margin: 0 0 24px; padding-left: 24px; }
.post-body li { font-size: var(--fs-p); line-height: 1.75; color: var(--text); margin-bottom: 8px; }
.post-body ul { list-style: none; padding-left: 0; }
.post-body ul li { position: relative; padding-left: 24px; }
.post-body ul li::before { content: ""; position: absolute; left: 4px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* A pulled quote, not an indent: the amber rule carries it the way the case-study
   pull quotes do, so quoted review copy reads as quoted. */
.post-body blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--amber); }
.post-body blockquote p { font-size: var(--fs-h5); font-weight: 500; font-style: italic;
  line-height: 1.5; color: var(--ink); margin-bottom: 16px; }
.post-body blockquote p:last-child { margin-bottom: 0; }

/* Figures break the measure. A screenshot held to the 760px reading column reads as
   a thumbnail; widened to 920 it sits either side of the text and gives the column
   the same rhythm the case studies get from their full-width shots. */
.post-body figure { margin: var(--s-4) 0; width: 920px; max-width: calc(100vw - 48px);
  margin-left: 50%; transform: translateX(-50%); }
.post-body figure img { display: block; width: 100%; height: auto;
  border: 1px solid var(--card-border); border-radius: var(--r); background: var(--grad-card); }

.post-more-all { margin-top: 32px; }

@media (max-width: 680px) {
  .post-sec { padding-top: 48px; }
  .post-body h2 { margin: 32px 0 16px; }
  /* only the vertical rhythm changes here: `margin` would reset the margin-left
     that centres the widened figure, and it would hang off the left edge */
  .post-body figure { margin-top: 24px; margin-bottom: 24px; }
}

/* Touch targets: the breadcrumb links draw at label size, which a finger needs
   44px of height to hit. Padding and look stay as designed. */
@media (hover: none) and (pointer: coarse) {
  .post-crumb a, .post-crumb b { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── legal documents ────────────────────────────────────────────────────────
   The four policies are the article column with three differences: the source
   numbers its own clauses ("1.1.", "III."), so the list markers and the amber
   bullet would double up on it; the headings are short all-caps section labels
   rather than prose; and the privacy policy carries a real table. */
.legal-body ul.plain, .legal-body ol.plain { list-style: none; padding-left: 0; margin-bottom: 24px; }
.legal-body ul.plain > li, .legal-body ol.plain > li { padding-left: 0; margin-bottom: 8px; }
.legal-body ul.plain > li::before, .legal-body ol.plain > li::before { content: none; }
/* a nested list is a sub-clause — indent it so the hierarchy survives */
.legal-body li ul.plain, .legal-body li ol.plain { margin: 8px 0 8px 24px; }
/* the legal pages used to step their prose headings down one rung from the
   articles' — h4/h5 against h3/h4 — for the same role in the same 760px column.
   §05: equivalent roles get the same typography, whatever page they are on. Only
   the rhythm below is legal-specific, and only because the sections are numbered. */
.legal-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: var(--fs-p-small); }
.legal-body th, .legal-body td { border: 1px solid var(--card-border); padding: 16px 16px;
  text-align: left; vertical-align: top; line-height: 1.6; color: var(--text); }
.legal-body th { background: var(--bg-soft); font-weight: 600; color: var(--ink); }
/* a wide table scrolls inside its own box rather than pushing the page sideways */
.legal-body .table-wrap { overflow-x: auto; margin: 24px 0; }
.legal-body .table-wrap table { margin: 0; min-width: 520px; }

.post-hero > .wrap { width: 100%; }