/* The blog, on the same footing as the landing page.
 *
 * It imports nothing from landing.css deliberately: that file is tuned for one
 * long marketing page with full-bleed figures, and a post wants a narrower
 * measure and quieter furniture. What the two share is the palette and the
 * faces, restated here so a change to one page cannot silently restyle the
 * other.
 */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg: #08090b; --bg2: #0e1014; --ink: #e9ecf1; --muted: #8b93a1;
  --faint: #5b626e; --edge: #1c2027; --accent: #ff7a45;
  --ok: #4ade80; --warn: #fbbf24; --bad: #f2857c;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #ffffff; --bg2: #f6f7f9; --ink: #14171c; --muted: #5b626e;
    --faint: #8b93a1; --edge: #e3e6ea; --bad: #b3261e; --ok: #1c7c4a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.7 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 42rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

header.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.5rem; }
.mark {
  font: 400 1.6rem/1 'Bebas Neue', ui-sans-serif, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  text-decoration: none;
}
.mark span { color: var(--ink); }
.top nav { display: flex; gap: 1.25rem; font-size: 0.9rem; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

h1 {
  font: 400 clamp(2.1rem, 5.5vw, 3rem)/1.05 'Bebas Neue', ui-sans-serif, sans-serif;
  letter-spacing: 0.02em; margin: 0; text-wrap: balance;
}
.dateline {
  margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.standfirst { margin: 1.5rem 0 2rem; font-size: 1.15rem; color: var(--muted); }

h2 {
  font: 400 1.5rem/1.15 'Bebas Neue', ui-sans-serif, sans-serif;
  letter-spacing: 0.05em; margin: 3rem 0 0.75rem; text-wrap: balance;
}
h3 { font-size: 1.05rem; font-weight: 600; margin: 2rem 0 0.5rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--accent); text-underline-offset: 2px; }
strong { font-weight: 600; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin-bottom: 0.5rem; }
code {
  font: 400 0.85em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg2); border: 1px solid var(--edge);
  border-radius: 4px; padding: 0.1em 0.35em;
}
blockquote {
  margin: 1.5rem 0; padding: 0.1rem 0 0.1rem 1.15rem;
  border-left: 3px solid var(--accent); color: var(--muted);
}

/* Figures: a screenshot is the argument here, so it gets a frame and a caption
 * that says what to look at rather than what it is. */
figure { margin: 2rem 0; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--edge); border-radius: 8px;
  background: var(--bg2);
}
figcaption { margin-top: 0.7rem; font-size: 0.85rem; color: var(--muted); }
figcaption b { color: var(--ink); font-weight: 600; }
figcaption em { font-style: italic; }
/* Provenance. Every screenshot here is generated data, and the caption has to
 * say so on its own line rather than trailing off the end of a sentence. */
figcaption .src { display: block; margin-top: 0.3rem; color: var(--faint); font-size: 0.8rem; }

/* A screenshot narrower than the column is shown at its own size. Stretching a
 * 384px capture across 620px makes the product look blurry, which is the
 * opposite of what a screenshot is for. */
figure.narrow img { width: auto; max-width: 100%; margin-inline: auto; }

/* Dense product screenshots break out past the text measure where there is room.
 * A 42rem column is right for prose and far too narrow for a full application
 * window: squeezed to 620px, the labels stop being legible and the figure
 * stops being evidence. The measure of the prose is unchanged. */
@media (min-width: 64rem) {
  figure.wide { width: 56rem; margin-inline: calc((39rem - 56rem) / 2); }
  /* The image breaks out; its caption does not. A 56rem line of 0.85rem text is
   * an unreadable measure, and the caption is prose. */
  figure.wide figcaption { max-width: 39rem; margin-inline: auto; }
}

.pull {
  margin: 2rem 0; padding: 1.1rem 1.25rem;
  border: 1px solid var(--edge); background: var(--bg2); border-radius: 8px;
}
.pull p:last-child { margin-bottom: 0; }
.pull h3 { margin-top: 0; }

/* The state chips, matching what the product renders. */
.chip {
  display: inline-block; font: 400 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 3px; padding: 0.2em 0.4em;
  vertical-align: middle;
}
.chip-pass { color: var(--ok); }
.chip-fail { color: var(--bad); }
.chip-unv { color: var(--warn); }

.index { list-style: none; padding: 0; margin: 2rem 0 0; }
.index li { border-top: 1px solid var(--edge); padding: 1.5rem 0; margin: 0; }
.index a { color: var(--ink); text-decoration: none; }
.index a:hover h2 { color: var(--accent); }
.index h2 { margin: 0 0 0.4rem; }
.index p { color: var(--muted); margin: 0.4rem 0 0; font-size: 0.95rem; }
.index .dateline { margin: 0; }

footer {
  margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--edge);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  color: var(--muted); font-size: 0.85rem;
}
footer nav { margin-left: auto; display: flex; gap: 1rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }