/* russunger.com — site styles. Light mode only (v1). Plain CSS, token-driven. */

:root {
  /* Palette — Frost system (2026-07): committed cool ground, navy ink, one civic
     Signal blue, coral kept as editorial heat. Names preserved, values remapped.
     Ratios computed WCAG 2.1. See docs/design-frost-and-inverted-frame.md.
     NOTE: this is commit 1 (color only). Type + inverted frame land in commit 2. */
  --bg: #DFE8F5;              /* Frost — was #EAEFF4 (chroma committed) */
  --card: #F4F8FC;           /* Ice — was #FFFFFF (no pure white) */
  --ink: #10294E;            /* Register 80 — was #23262B (13.6:1 on Ice, AAA) */
  --slate: #51617B;          /* Docket Slate — was #5F6B78 (5.1:1 on Frost) */

  /* action — the one bright thing; --deep aliases here so existing refs resolve */
  --action: #2A5BC4;         /* Signal 50 — 5.0 Frost / 5.8 Ice */
  --action-dk: #1E56A0;      /* Order 60 — hover */
  --deep: var(--action);     /* alias: every existing var(--deep) → Signal */
  --order: #17457F;          /* Order 70 — heading accents, rules (7.8 Frost, AAA) */

  /* planes — navy fields (used by the inverted frame + panels in commit 2) */
  --field: #0C1F3D;          /* Register 90 */
  --field-text: #F4F8FC;
  --field-muted: #8FA0BC;
  --field-action: #5A8FEA;   /* Signal 40 — links on navy (5.1:1) */
  --field-focus: #5A8FEA;    /* focus ring on dark surfaces */

  /* tints & hairlines */
  --tint: #EAF0FA;           /* callout wash on Ice */
  --border: #C6D3E8;         /* was #D6DEE6 — re-derived from Frost */
  --border-strong: #C9DBF4;  /* Glacier 20 — also chip fill */

  /* heat — coral kept, retuned for the cool ground; text-grade stays AA/AAA */
  --coral: #A84228;          /* was #CE6B4F (4.9 on Frost) — decorative/large only */
  --coral-tint: #F4E4DC;     /* was #F4E0D9 */
  --coral-text: #8A3A22;     /* unchanged — 6.3 Frost / 7.3 Ice */

  /* states — one step darker for the tinted ground */
  --ok: #1B6A43;
  --warn: #8A570A;
  --error: #B23527;

  /* Type — Frost type-pass: Archivo display + Newsreader reading + Spline mono labels */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --reading: 900px;   /* centered reading column */
  --container: 1080px;
  --build-cols: 2;    /* Builds grid columns — change to 3 in one line */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Skip link — visible on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--deep);
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Visible, high-contrast focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Header (minimal: mark + wordmark) ---- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.site-header .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand img { height: 34px; width: auto; display: block; }
.brand .wordmark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.site-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
}
.site-nav a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover { color: var(--deep); }
.site-nav a.active { color: var(--deep); font-weight: 500; }

/* Hamburger toggle — hidden on desktop and when JS is unavailable (set via html.js) */
.nav-toggle {
  display: none;
  margin-left: auto;
  position: relative;
  width: 40px; height: 40px;
  padding: 0; background: none; border: 0; cursor: pointer;
}
.nav-bars, .nav-bars::before, .nav-bars::after {
  position: absolute; left: 50%; width: 22px; height: 2px;
  margin-left: -11px; background: var(--ink); border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease, background 0.2s ease;
}
.nav-bars { top: 50%; margin-top: -1px; }
.nav-bars::before, .nav-bars::after { content: ""; }
.nav-bars::before { top: -7px; }
.nav-bars::after { top: 7px; }
/* Open state morphs the bars into an X (button carries aria-expanded) */
.nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 768px) {
  html.js .site-header .inner { flex-wrap: wrap; align-items: center; }
  html.js .nav-toggle { display: block; }
  /* Collapsed by default; opens as a full-width column beneath the header */
  html.js .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0.6rem 0 0;
  }
  html.js .site-nav.open { display: flex; }
  html.js .site-nav a {
    padding: 0.8rem 0.2rem;
    border-top: 1px solid var(--border);
    font-size: 1rem;
  }
}

/* ---- Reading column ---- */
.reading {
  max-width: var(--reading);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

h1 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1.5rem;
}
h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.65rem;
  letter-spacing: -0.015em;
  margin: 3rem 0 1.1rem;
}

/* Long-form reading in Newsreader */
.prose p {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.7;
  margin: 0 0 1.3rem;
}
.prose p:first-of-type { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.4rem;
  color: var(--ink);
}
.prose h3 + p { margin-top: 0; }
/* Presenting & Training: topics laid out two-up, no cards */
.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem 2.6rem; margin: 1.7rem 0 0; }
.topic-grid .topic h3 { margin: 0 0 0.4rem; }
.topic-grid .topic p { font-size: 1.1rem; line-height: 1.6; margin: 0; }
@media (max-width: 640px) { .topic-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.45rem; }
.prose ol li { margin: 0.55rem 0; }
.prose li {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0.35rem 0;
}
.prose li::marker { color: var(--slate); }
/* Reflow safety: long unbroken tokens (URLs, etc.) wrap instead of overflowing at 320px / 400% zoom (WCAG 1.4.10) */
.prose p, .prose li, .build-lede, .builds-lead p, .featured-dek, .card-dek { overflow-wrap: break-word; }

/* Portrait floats beside the opening paragraphs; stacks on mobile */
.portrait {
  float: right;
  width: 40%;
  max-width: 270px;
  margin: 0.25rem 0 0.9rem 1.6rem;
}
.portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(35, 38, 43, 0.14);
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

/* ---- Book grid (cover stubs) ---- */
.books { margin-top: 1rem; }
.book-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.book { margin: 0; }
.book .cover {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 1px 4px rgba(35, 38, 43, 0.08);
}
.book .cover img {
  width: 100%;
  height: auto;
  display: block;
}
.book .title {
  margin: 0.55rem 0 0.2rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ink);
}
.book .meta {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--slate);
}
.book .badge {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--coral-tint);
  color: var(--coral-text);
}

/* ---- Ask the books (styled placeholder, inert in v1) ---- */
.ask { margin-top: 1rem; }
.ask-note {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 1rem;
}
.ask-form {
  display: flex;
  gap: 0.5rem;
  max-width: 540px;
}
.ask-form input {
  flex: 1;
  min-height: 44px;
  padding: 0 0.9rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.ask-form input::placeholder { color: var(--slate); }
.ask-form button {
  min-height: 44px;
  padding: 0 1.1rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--coral-text);
  background: var(--coral-tint);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}
.ask-form button:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
.ask-form input:disabled,
.ask-form button:disabled { opacity: 0.85; cursor: default; }
.ask-status {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--slate);
}
.ask-status.loading { color: var(--deep); }
.ask-status.error { color: var(--coral-text); }

/* Pre-prepared prompt pills under the Ask box */
.ask-pills-lead {
  margin: 1.1rem 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--slate);
}
.ask-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ask-pill {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--deep);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ask-pill:hover { background: var(--coral-tint); color: var(--coral-text); border-color: var(--coral-tint); }
.ask-pill:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.ask-pills-more {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--slate);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ask-pills-more:hover { color: var(--coral-text); }
.ask-pills-more:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }

/* Ask the books — rendered answer + book sources */
.ask-results { margin-top: 1.5rem; }
.ask-results:empty { margin-top: 0; }
.ask-answer h2 {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
}
.ask-answer h3 {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.4rem 0 0.4rem;
}
.ask-answer p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.65; margin: 0 0 1rem; overflow-wrap: break-word; }
.ask-answer ul, .ask-answer ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.ask-answer li { font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; margin: 0.3rem 0; }
.ask-answer li::marker { color: var(--slate); }
.ask-sources { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.ask-sources-label {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.5rem;
}
.ask-sources ul { list-style: none; margin: 0; padding: 0; }
.ask-sources li { font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: var(--slate); padding: 0.2rem 0; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.site-footer .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem;
  font-size: 0.85rem;
  color: var(--slate);
}
/* Subtle colophon link to the design system — quiet by default, in the slate band */
.site-footer a { color: var(--slate); text-decoration: none; }
.site-footer a:hover { color: var(--deep); text-decoration: underline; }
.site-footer .dot { opacity: 0.5; padding: 0 0.15rem; }

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .site-header .inner { flex-wrap: wrap; }
  /* nav collapse handled by the hamburger block above (html.js, max-width 768) */
  .reading { padding: 2rem 1.15rem 3rem; }
  .prose p { font-size: 1.1rem; }
  .portrait { float: none; width: 100%; max-width: 300px; margin: 0 auto 1.5rem; }
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ask-form { flex-direction: column; }
  .ask-form button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

/* ============================================================================
   Home page — hero + title + supporting copy + gift takeaways
   ============================================================================ */
.home { max-width: var(--container); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.home-hero { margin: 0 0 2rem; }
.home-hero-media {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(28, 61, 90, 0.10), transparent 60%),
    linear-gradient(180deg, var(--card), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero-media .placeholder {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--border-strong);
}
/* Tiny "show the seam" credit under the hero (prompt + date once images land) */
.home-hero-credit { font-family: var(--sans); font-size: 0.78rem; color: var(--slate); margin: 0.55rem 0 0; }

.home-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 1.8rem;
  max-width: 24ch;
}

.home-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
}
.home-copy p {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.7;
  margin: 0;
}
.home-takeaways h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1rem;
}
.home-takeaways ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.home-takeaways li { margin: 0 0 0.8rem; }
.home-takeaways li a {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid var(--border);
  padding-left: 0.85rem;
}
.home-takeaways li a:hover { border-left-color: var(--coral); color: var(--deep); }
.home-takeaways-note { font-family: var(--sans); font-size: 0.85rem; color: var(--slate); margin: 0; }

@media (max-width: 720px) {
  .home-body { grid-template-columns: 1fr; gap: 1.8rem; }
  .home-title { max-width: none; }
}

/* ============================================================================
   Builds index + build pages
   ============================================================================ */
.builds {
  max-width: var(--reading);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.builds-intro {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 2.5rem;
  color: var(--ink);
}
.builds-lead { margin: 0 0 2.75rem; }
.builds-lead p {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 1.2rem;
  color: var(--ink);
}
.builds-lead p:last-child { margin-bottom: 0; }
.builds-lead a { color: var(--deep); text-decoration: underline; text-underline-offset: 2px; }

/* "Also in the platform" closing band */
.also-platform {
  max-width: 820px;
  margin-top: 3.75rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.also-platform h2 { margin-top: 0; }
.also-platform .intro {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.platform-more { list-style: disc; margin: 0; padding-left: 1.3rem; }
.platform-more li {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  padding: 0.3rem 0;
}
.platform-more li::marker { color: var(--slate); }
.platform-more .label { font-family: var(--sans); font-weight: 600; }
.also-platform .outro {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--slate);
  margin: 1.4rem 0 0;
}

/* "How I work" — page-level philosophy (Builds) */
.how-i-work {
  max-width: 820px;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.how-i-work h2 { margin-top: 0; }
.how-i-work p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Per-build "Under the hood" spec block */
.under-hood {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.under-hood h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
}
.spec-list li:first-child { border-top: 0; padding-top: 0; }
.spec-list .label { font-weight: 500; }
.uh-note {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--slate);
  margin: 1rem 0 0;
}
.under-hood p {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.stack-list { list-style: disc; margin: 0; padding-left: 1.3rem; }
.stack-list li {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  padding: 0.25rem 0;
}
.stack-list li::marker { color: var(--slate); }

/* ---- Writing (Directus-backed editorial, static-rendered) ---- */
.writing-intro {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 2.5rem;
  color: var(--ink);
}
.writing-card .card-dek {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--slate);
  margin: 0.45rem 0 0;
}
.writing-card .card-date {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--slate);
  margin: 0.5rem 0 0;
}

/* Featured (newest) article — full row, image + text side by side */
.writing-featured { margin: 0 0 3.25rem; }
.writing-featured .card-link {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 2.25rem;
  align-items: center;
}
.writing-featured .card-shot { aspect-ratio: 16 / 10; }
.featured-body { align-self: center; }
.featured-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.65rem;
  color: var(--ink);
}
.featured-dek {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--slate);
  margin: 0 0 0.9rem;
}
.featured-date {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--slate);
  margin: 0;
}
.featured-more {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--deep);
  margin: 1rem 0 0;
}
.card-link:hover .featured-more { text-decoration: underline; }

/* Subsequent articles — 3 across, stepping down on smaller screens.
   These are set on .writing-grid itself because its own --build-cols shadows
   the :root mobile override (max-width:760 -> 1) that collapses a plain .build-grid;
   without these the writing grid would stay 3-up all the way down to phones. */
.writing-grid { --build-cols: 3; }
@media (max-width: 760px) { .writing-grid { --build-cols: 2; } }
@media (max-width: 600px) { .writing-grid { --build-cols: 1; } }

/* Full hero image, shown uncropped (e.g. multi-screen app composites) */
.shot-full { margin: 0 0 2.25rem; }
.shot-full img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
}

@media (max-width: 760px) {
  .writing-featured .card-link { grid-template-columns: 1fr; gap: 1.1rem; }
}
.byline {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--slate);
  margin: 0 0 1.75rem;
}
.prose figure { margin: 1.9rem 0; }
.prose figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.prose figcaption {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 0.5rem;
}
.prose a {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--coral-text); }
/* Narrow figure (e.g. a phone notification) — don't upscale to full column; center it */
.prose figure.fig-narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.prose figure.fig-narrow figcaption { text-align: center; }
.prose .closing-note { font-style: italic; color: var(--slate); }
/* Contact form */
.contact-form { max-width: 540px; margin: 1.6rem 0 0; }
.contact-form .field { margin: 0 0 1.1rem; }
.contact-form label {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}
.contact-form textarea { resize: vertical; line-height: 1.5; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--deep);
  box-shadow: 0 0 0 3px rgba(28, 61, 90, 0.12);
}
.contact-form button {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: #fff;
  background: var(--deep);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
}
.contact-form button:hover { background: var(--action-dk); }
.contact-form button[disabled] { opacity: 0.55; cursor: default; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-status { font-family: var(--sans); font-size: 0.95rem; margin: 1rem 0 0; }
.cf-status.error { color: var(--coral-text); }
.cf-status.ok { color: var(--deep); }

/* Process-flow callout (e.g. "The Rhythm") */
.prose .rhythm {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--deep);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.15rem;
}
/* Pull-quotes / epigraphs */
.prose blockquote {
  margin: 1.7rem 0;
  padding: 0.1rem 0 0.1rem 1.4rem;
  border-left: 3px solid var(--coral);
}
.prose blockquote p {
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--deep);
  margin: 0;
}
.prose blockquote .cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--slate);
  margin-top: 0.45rem;
}
/* Per-principle takeaway callout */
.prose .implication {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1.15rem;
  font-size: 1.12rem;
  line-height: 1.6;
}
.prose .implication strong { font-family: var(--sans); color: var(--deep); }

/* Knowledge layer band */
.knowledge-band {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.6rem 1.8rem;
  margin-bottom: 2.75rem;
}
.knowledge-band h2 { margin: 0 0 1rem; }
.stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}
.stat-chips li {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--deep);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}
.knowledge-note { margin: 0; font-size: 0.98rem; color: var(--slate); }
.knowledge-note a { color: var(--deep); text-decoration: underline; text-underline-offset: 2px; }

/* Card grid — column count driven by --build-cols */
.build-grid {
  display: grid;
  grid-template-columns: repeat(var(--build-cols), 1fr);
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.build-card { margin: 0; }
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-shot {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(28, 61, 90, 0.06), transparent 60%),
    var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-shot span {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--border-strong);
}
.card-link:hover .card-shot {
  border-color: var(--border-strong);
  box-shadow: 0 2px 12px rgba(35, 38, 43, 0.08);
}
.card-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 0.45rem;
  color: var(--ink);
}

/* Pills */
.pill {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
}
.pill-visit { background: var(--coral-tint); color: var(--coral-text); }
/* Glacier-20 chip fill on the Frost/Ice ground; Register-80 ink clears AAA */
.pill-internal { background: var(--border-strong); color: var(--ink); }
/* One-line build descriptions; reserve 2 lines so every card aligns */
.card-dek {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--slate);
  margin: 0.3rem 0 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

/* Coming-soon tile */
.build-card.soon .card-shot { opacity: 0.55; }
.build-card.soon .card-title { color: var(--slate); }

/* ---- Single build page ---- */
.back { margin: 0 0 1.5rem; font-family: var(--sans); font-size: 0.9rem; }
.back a { color: var(--deep); text-decoration: none; }
.back a:hover { text-decoration: underline; }
.build-lede {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.visit-row { margin: 0 0 1.75rem; }
.visit-row a.pill-visit { text-decoration: none; }
.shot-large {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(28, 61, 90, 0.06), transparent 60%),
    var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 2.25rem;
}
.shot-large span {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--border-strong);
}
.card-shot, .shot-large, .shot { overflow: hidden; }
.card-shot img, .shot-large img, .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Per-section screenshot placeholder (standard: one under each build-page heading) */
.shot {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(28, 61, 90, 0.06), transparent 60%),
    var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.4rem;
}
.shot span {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--border-strong);
}

/* One-line stat/meta caption under the lede + visit pill */
.build-meta {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--slate);
  margin: -0.5rem 0 1.75rem;
}

@media (max-width: 760px) {
  :root { --build-cols: 1; }
}

/* ============================================================================
   FROST — commit 2: inverted navy frame + type-pass + authored signature.
   Appended block: overrides the light-frame rules above via the cascade so the
   change is one reviewable, revertible section. See
   docs/design-frost-and-inverted-frame.md.
   ============================================================================ */

/* -- Display weights: Archivo has a lighter 500 than Hanken; punch the headings up -- */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
.home-title { font-weight: 800; }
.featured-title, .card-title, .prose h3 { font-weight: 600; }

/* -- Inverted masthead: navy plane, slim. ru.png is white-filled, pops on navy. -- */
.site-header { background: var(--field); border-bottom: 1px solid var(--field); }
.site-header .inner { padding: 0.7rem 1.5rem; }
.brand { color: var(--field-text); }
.brand img { height: 30px; }
.brand .wordmark { font-weight: 700; color: var(--field-text); }
.site-nav a { font-weight: 500; font-size: 0.9rem; color: var(--field-muted); }
.site-nav a:hover { color: var(--field-text); }
.site-nav a.active { color: var(--field-action); font-weight: 700; }
.nav-bars, .nav-bars::before, .nav-bars::after { background: var(--field-text); }
.site-header a:focus-visible, .nav-toggle:focus-visible { outline-color: var(--field-focus); }
@media (max-width: 768px) {
  html.js .site-nav a { border-top-color: rgba(244, 248, 252, 0.14); }
}

/* -- Navy footer: matches the masthead, binds the page like a document -- */
.site-footer { background: var(--field); border-top: 0; margin-top: 3rem; }
.site-footer .inner {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--field-muted);
}
.site-footer a { color: var(--field-muted); }
.site-footer a:hover { color: var(--field-action); }

/* -- Mono metadata: credits, dates, bylines, labels, chips read as instrument data -- */
.byline, .build-meta, .featured-date, .card-date, .writing-card .card-date,
.book .meta, .uh-note, .card-shot span, .shot span, .shot-large span,
.ask-sources-label {
  font-family: var(--mono);
  letter-spacing: 0.06em;
}
.home-hero-credit {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
}
.pill, .pill-visit, .pill-internal, .stat-chips li, .ask-pill { font-family: var(--mono); }

/* -- Authored signature: an Order-blue rule under the home title -- */
.home-title { padding-bottom: 0.5rem; }
.home-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--order);
  margin-top: 0.6rem;
}

/* -- Interior-plane budget: frame carries identity, so the takeaways panel relaxes
      to an Ice card with a keyline + one corner registration tick (section opener) -- */
.home-takeaways {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
}
.home-takeaways::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-top: 1.5px solid var(--order);
  border-right: 1.5px solid var(--order);
}
.home-takeaways h2 { font-family: var(--mono); color: var(--coral-text); letter-spacing: 0.16em; }
.home-takeaways li a:hover { border-left-color: var(--coral); color: var(--action); }

/* -- Redline pull-quote: coral marginal rule (the editor's pen), readable ink -- */
.prose blockquote { border-left-color: var(--coral); }
.prose blockquote p { color: var(--ink); }

/* ============================================================================
   FROST — review pass (feedback): footer band, card treatment everywhere,
   Visit chip stroke, figure exhibits, dates
   ============================================================================ */

/* -- Footer: centered reverse logo above the colophon, plus a ~20px intermediate
      shade band signifying the change from the pale ground to the navy footer -- */
.site-footer { border-top: 20px solid var(--field-muted); margin-top: 2.5rem; }
.site-footer .inner { text-align: center; padding: 2.2rem 1.5rem; }
.site-footer .inner::before {
  content: "";
  display: block;
  width: 38px;
  height: 26px;
  margin: 0 auto 0.85rem;
  background: url(/ru.png) center / contain no-repeat;
}

/* -- Visit chip = external action: speaks Signal, with a stroke so it reads on the
      Ice card. Internal stays a neutral Glacier status chip. -- */
.pill-visit { background: var(--tint); color: var(--action); border: 1px solid var(--action); }

/* -- Card treatment as the content-type separator: every card (Builds + Writing,
      grid + featured) lifts off the ground into an Ice panel with a hairline + hover -- */
.build-card, .writing-featured {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.build-card .card-link { padding-bottom: 1.1rem; }
.build-card .card-shot, .writing-featured .card-shot { border: 0; border-radius: 0; }
.build-card .card-title { margin-top: 0.9rem; padding: 0 1rem; }
.build-card .card-date, .build-card .card-dek { padding: 0 1rem; }
.build-card .card-link > .pill { margin-left: 1rem; }
.build-card:hover {
  border-color: var(--action);
  box-shadow: 0 6px 20px rgba(16, 41, 78, 0.10);
  transform: translateY(-2px);
}
/* Featured (RAG4 build + newest article): image flush left, body padded, no inner gap */
.writing-featured .card-link { gap: 0; align-items: stretch; }
.writing-featured .featured-body { padding: 1.5rem 1.6rem; }
/* Safari fix: aspect-ratio on the stretched image cell derives the cell WIDTH
   from the tall row height, so the image overflowed its column and slid under
   the text. Let the image fill the grid cell instead; keep the aspect-ratio only
   for the stacked mobile layout (<=760px), where there is no text beside it. */
.writing-featured .card-shot { aspect-ratio: auto; min-width: 0; }
@media (max-width: 760px) { .writing-featured .card-shot { aspect-ratio: 16 / 10; } }
.writing-featured:hover { border-color: var(--action); box-shadow: 0 6px 20px rgba(16, 41, 78, 0.10); }

/* -- Publish date rides up under the title, off the Read line -- */
.featured-date { margin: 0.35rem 0 0.75rem; }
.writing-card .card-date { margin: 0.35rem 0 0.4rem; }

/* -- Figures are exhibits: screenshots + captions get the same card frame so they
      read as a distinct content type on the page -- */
.prose figure { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem; }
.prose figure img { border: 0; }
.prose figcaption { padding: 0 0.3rem; }

/* -- The About portrait is a photo, not an exhibit: opt it out of the card frame -- */
.prose figure.portrait { background: none; border: 0; padding: 0; }

/* -- Real-metadata index eyebrow: a mono tag above the page title carrying true
      metadata (Writing = computed reading time; Build = public/internal status) -- */
.eyebrow-index {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.6rem;
}
.eyebrow-index b { color: var(--action); font-weight: 500; }

/* -- Fine hairline on the image itself: defines light-background screenshots that
      otherwise blend into the Ice; invisible on dark ones. Portrait excluded. -- */
.prose figure:not(.portrait) img { border: 1px solid var(--border); }
.build-card .card-shot { border-bottom: 1px solid var(--border); }
.writing-featured .card-shot { border-right: 1px solid var(--border); }
@media (max-width: 760px) {
  .writing-featured .card-shot { border-right: 0; border-bottom: 1px solid var(--border); }
}