/* ─────────────────────────────────────────────────────────────────────────────
   Kacie Flynn-Saunders — the blog's design system.

   The design language is taken from scsengineers.com's 2026 rebrand sheet
   (scs-rebrand-styles.css / scs-rebrand-fonts.css): one saturated red that
   carries every heading, button and band; navy for links; a pale aqua for
   dividers and the active state; warm greys for surfaces and heading bars;
   Poppins over Inter, with Bebas Neue for figures. Square corners throughout.

   Only the language is borrowed. No SCS name, logo, imagery or copy is used,
   and the fonts load from Google Fonts rather than from SCS's server.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  --red: #d70321;          /* h1, h3, buttons, bands */
  --red-deep: #9a1122;     /* hover */
  --navy: #002858;         /* links */
  --aqua: #d6f0f5;         /* dividers, active nav, the timeline band */
  --stone-50: #f5f2f2;     /* footer, quiet surfaces */
  --stone-300: #ccc2bd;    /* hairlines */
  --stone-500: #99918c;    /* section kickers */
  --stone-700: #6f635f;    /* heading bars, meta text */
  --ink: #000;
  --paper: #fff;

  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-figure: 'Bebas Neue', 'Poppins', sans-serif;

  --wrap: 1000px;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.65 var(--font-body);
}
img { max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: 2px; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-weight: 700; color: var(--red); font-size: 30px; }
h2 { font-weight: 400; color: var(--ink); font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
h3 { font-weight: 700; color: var(--red); font-size: 18px; }
h4 { font-weight: 700; font-size: 15px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--paper); padding: 6px 10px; z-index: 10; }

/* ── Header: red wordmark left, piped nav right, a red tab top-right ───────── */
.masthead { border-bottom: 1px solid var(--stone-300); }
.masthead .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 30px; padding-bottom: 14px; position: relative; }
.wordmark {
  font: 700 26px/1 var(--font-head); color: var(--red); text-decoration: none;
  text-transform: uppercase; letter-spacing: .01em;
}
.wordmark small { display: block; font: 400 11px/1.4 var(--font-body); color: var(--stone-700); text-transform: none; letter-spacing: 0; margin-top: 6px; }
.wordmark:hover { color: var(--red-deep); }
.nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.nav li + li::before { content: '|'; color: var(--stone-500); padding: 0 10px; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { color: var(--red); }
.nav .nav-login { color: var(--stone-700); }   /* quieter: it is for Kacie, not her readers */
.toptab {
  position: absolute; right: var(--gutter); top: 0; background: var(--red); color: var(--paper);
  font-size: 11px; font-weight: 700; padding: 5px 12px; text-decoration: none;
}
.toptab:hover { background: var(--red-deep); color: var(--paper); }

/* ── The red band, and the three white cards that sit in it ────────────────── */
.band { background: var(--red); position: relative; overflow: hidden; }
.band::before {
  /* SCS's banner is a photograph washed in red; with no photography of our own,
     the texture is a fine diagonal rule in the same red. */
  content: ''; position: absolute; inset: 0; opacity: .12;
  background: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 14px);
}
.band .wrap { position: relative; }
/* With a photograph: greyscale it and multiply it into the red, so the band
   reads as one colour with an image inside it — SCS's banner treatment. */
.band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .6; }
.band.has-photo::before { z-index: 1; opacity: .08; }
.band.has-photo .wrap { z-index: 2; }
.band.has-photo .hero h1, .band.has-photo .hero p { text-shadow: 0 1px 12px rgba(80, 0, 10, .35); }
.hero { padding-block: 54px 50px; color: var(--paper); }
.hero .kicker { font: 400 12px/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; opacity: .85; margin: 0 0 14px; }
.hero h1 { color: var(--paper); font-size: clamp(28px, 5vw, 42px); max-width: 17em; margin: 0 0 14px; }
.hero p { max-width: 38em; margin: 0; font-size: 16px; opacity: .95; }
.banner { height: 120px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--aqua); gap: 0; }
.card-photo { display: block; margin: -16px -18px 14px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stone-50); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.card-photo:hover img { transform: scale(1.03); }
.card { background: var(--paper); padding: 16px 18px 18px; border-left: 3px solid var(--aqua); border-right: 3px solid var(--aqua); }
.card .label { font: 700 12px/1 var(--font-head); color: var(--red); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.card .label::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 13px 0 0 var(--red); }
.card h4 { margin: 0 0 6px; font-size: 14px; }
.card h4 a { color: var(--ink); text-decoration: none; }
.card h4 a:hover { color: var(--red); }
.card p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--stone-700); }
.more { font: 700 12px/1 var(--font-head); color: var(--ink); text-decoration: none; }
.more::after { content: ' »'; }
.more:hover { color: var(--red); }
.band-cards { padding-bottom: 18px; }

/* ── Sections ──────────────────────────────────────────────────────────────── */
.section { padding-block: 56px; }
.section-kicker { font: 700 22px/1.2 var(--font-head); color: var(--stone-500); text-transform: uppercase; margin: 0 0 16px; }
.section-title { font: 700 22px/1.2 var(--font-head); color: var(--red); text-transform: uppercase; margin: 0 0 20px; }
.section-title span { font-size: 14px; text-transform: none; margin-left: 4px; }
.lede { max-width: 50em; }
.lede p { margin: 0 0 1em; }

.button {
  display: inline-block; background: var(--red); color: var(--paper); border: 1px solid var(--red);
  font: 700 12px/1 var(--font-head); padding: 10px 14px; text-decoration: none; border-radius: 0;
}
.button::after { content: ' »'; }
.button:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--paper); }
.button.small { font-size: 10.5px; padding: 6px 8px; text-transform: uppercase; }
.button.small::after { content: ''; }
.button.ghost { background: transparent; color: var(--red); }
.button.ghost:hover { background: var(--red); color: var(--paper); }

/* ── The aqua timeline band: taupe tiles, Bebas figures ─────────────────────── */
.timeline { background: var(--aqua); padding-block: 26px; }
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.tile { background: var(--stone-700); color: var(--paper); padding: 16px 14px 18px; scroll-snap-align: start; min-height: 150px; transition: background .15s; }
.tile:hover { background: var(--stone-500); }
.tile .year { font: 400 40px/1 var(--font-figure); letter-spacing: .02em; display: block; margin-bottom: 8px; }
.tile strong { font: 700 13px/1.25 var(--font-head); display: block; margin-bottom: 6px; }
.tile span { font-size: 12px; line-height: 1.4; opacity: .9; display: block; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.stat b { font: 400 44px/1 var(--font-figure); color: var(--red); display: block; letter-spacing: .02em; }
.stat span { font-size: 13px; color: var(--stone-700); }

/* ── Three-column layout: side nav · content · popular box ─────────────────── */
.layout { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 26px; padding-block: 40px 60px; }
.layout.two { grid-template-columns: 170px minmax(0, 1fr); }
.sidenav h2 { font: 700 14px/1.2 var(--font-head); color: var(--stone-700); text-transform: none; margin: 0 0 10px; }
.sidenav ul { list-style: none; margin: 0 0 22px; padding: 0; }
.sidenav li { border-bottom: 1px solid var(--stone-300); }
.sidenav a { display: block; padding: 8px 4px; color: var(--ink); text-decoration: none; font-size: 13px; }
.sidenav a:hover, .sidenav a[aria-current] { background: var(--aqua); font-weight: 700; color: var(--ink); }
.sidenav .button { display: block; margin-bottom: 6px; font-size: 11px; padding: 7px 8px; }

.popular { border: 3px solid var(--stone-700); border-top: 0; align-self: start; }
.popular h2 { background: var(--stone-700); color: var(--paper); font: 700 11px/1 var(--font-head); padding: 7px 8px; margin: 0; text-transform: uppercase; }
.popular ul { list-style: none; margin: 0; padding: 4px 8px; }
.popular li { padding: 8px 0; border-bottom: 1px solid var(--stone-300); }
.popular li:last-child { border-bottom: 0; }
.popular a { font: 700 12px/1.3 var(--font-head); color: var(--navy); text-decoration: none; }
.popular a:hover { color: var(--red); }
.popular p { font-size: 11.5px; line-height: 1.4; margin: 4px 0 0; color: var(--stone-700); }

.page-title { font-size: 26px; margin-bottom: 18px; }

/* ── Post lists ────────────────────────────────────────────────────────────── */
.postloop { list-style: none; margin: 0; padding: 0; }
.postloop li { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--aqua); }
.postloop li:last-child { border-bottom: 0; }
.postloop li.with-thumb { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-50); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.date { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); display: block; margin-bottom: 6px; }
.postloop h3 { font-size: 16px; margin: 0 0 6px; }
.postloop h3 a { color: var(--ink); text-decoration: none; }
.postloop h3 a:hover { color: var(--red); }
.postloop p { margin: 0 0 8px; font-size: 14px; }
.tag { display: inline-block; font: 700 10.5px/1 var(--font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-700); background: var(--stone-50); padding: 4px 6px; margin-right: 4px; text-decoration: none; }
a.tag:hover { background: var(--aqua); color: var(--ink); }
.draft { display: inline-block; font: 700 10.5px/1 var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--red); border: 1px solid var(--red); padding: 3px 6px; margin-left: 6px; vertical-align: 2px; }

/* ── The article ───────────────────────────────────────────────────────────── */
.article-head { border-bottom: 3px solid var(--aqua); padding-bottom: 16px; margin-bottom: 24px; }
.article-head h1 { font-size: clamp(24px, 4vw, 32px); margin: 6px 0 10px; }
.article-head .standfirst { font-size: 17px; color: var(--stone-700); margin: 0 0 12px; }
.byline { font-size: 13px; color: var(--stone-700); }
.byline strong { color: var(--red); font-family: var(--font-head); }
.article-photo { margin: 0 0 26px; }
.article-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.article-photo figcaption { font-size: 11.5px; color: var(--stone-700); margin-top: 6px; }
.article-photo figcaption a, .copyright a { color: inherit; }
.prose { font-size: 16px; line-height: 1.75; max-width: 40em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose h2 { margin: 1.8em 0 .6em; font-size: 16px; }
.prose h3 { margin: 1.5em 0 .5em; }
.prose li { margin-bottom: .35em; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 5px solid var(--red);
  font: 700 19px/1.45 var(--font-head); color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 3px solid var(--aqua); margin: 2em 0; }
.draft-note { background: var(--stone-50); border-left: 5px solid var(--red); padding: 12px 16px; font-size: 13px; margin: 0 0 24px; }
.author-box { display: grid; grid-template-columns: 64px 1fr; gap: 16px; background: var(--stone-50); padding: 18px; margin-top: 36px; }
.monogram { width: 64px; height: 64px; background: var(--red); color: var(--paper); display: grid; place-items: center; font: 400 28px/1 var(--font-figure); letter-spacing: .04em; }
.author-box h4 { margin: 0 0 4px; color: var(--red); }
.author-box p { margin: 0 0 8px; font-size: 13.5px; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: 13px; }
.pager a { max-width: 48%; text-decoration: none; }
.pager small { display: block; color: var(--stone-700); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }

/* ── About ─────────────────────────────────────────────────────────────────── */
.roles { list-style: none; margin: 0; padding: 0; }
.roles li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--aqua); }
.roles .when { font-size: 12.5px; color: var(--stone-700); text-transform: uppercase; }
.roles h4 { margin: 0 0 2px; color: var(--red); }
.roles .org { font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.roles p { margin: 0; font-size: 14px; }
.headingbar { background: var(--stone-700); color: var(--paper); font: 700 12px/1 var(--font-head); text-transform: uppercase; padding: 8px 10px; margin: 32px 0 0; }
.boxlist { border: 3px solid var(--stone-700); border-top: 0; list-style: none; margin: 0 0 8px; padding: 6px 12px; }
.boxlist li { padding: 8px 0; border-bottom: 1px solid var(--stone-300); font-size: 14px; }
.boxlist li:last-child { border-bottom: 0; }

/* ── Footer: warm grey, three boxes, then the copyright line ──────────────── */
.footer { background: var(--stone-50); margin-top: 0; border-top: 5px solid var(--red); }
.footer .boxes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; padding: 36px 0 24px; }
.footer h4 { font-size: 13px; color: var(--red); text-transform: uppercase; margin: 0 0 10px; }
.footer p, .footer li { font-size: 13px; margin: 0 0 6px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { color: var(--ink); }
.footer a:hover { color: var(--red); }
.copyright { border-top: 1px solid var(--stone-300); padding: 14px 0 22px; font-size: 12px; color: var(--stone-700); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── The big hero: a full-colour photograph under a red gradient ────────────── */
.hero-big { min-height: clamp(447px, 70.5vh, 705px); display: flex; flex-direction: column; justify-content: center; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-big { background: var(--ink); }
/* The photograph as it is — no red wash. The only shade is a neutral one
   behind the words, so white text stays legible over a bright sky. */
.hero-big.has-photo::before {
  z-index: 1; opacity: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 80%);
}
.hero-big.has-photo .hero h1, .hero-big.has-photo .hero p { text-shadow: 0 1px 14px rgba(0,0,0,.45); }

/* The articles sit on a solid red bar of their own, under the photograph. */
.cards-bar { background: var(--red); padding-block: 24px 26px; }
.cards-bar .band-cards { padding-bottom: 0; }
.hero-big .hero { padding-block: 40px 44px; }
.hero-big .hero h1 { font-size: clamp(34px, 6vw, 60px); max-width: 13em; }
.hero-big .hero p { font-size: 18px; max-width: 34em; }

/* ── Article hero and author ───────────────────────────────────────────────── */
.article-hero { margin: 0; background: var(--ink); border-bottom: 5px solid var(--red); }
.article-hero img { display: block; width: 100%; height: clamp(240px, 52vh, 560px); object-fit: cover; }
.article-hero figcaption { font-size: 11.5px; color: var(--stone-700); background: var(--paper); padding-block: 6px; }
.article-hero figcaption a { color: inherit; }
.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; }
.avatar.monogram { place-items: center; font-family: var(--font-figure); letter-spacing: .04em; }
.byline { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.byline strong { display: block; color: var(--red); font: 700 14px/1.3 var(--font-head); }
.byline span { display: block; font-size: 12.5px; color: var(--stone-700); }
.tags { margin: 0; }
.author-box { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; background: var(--stone-50); border-top: 5px solid var(--red); padding: 22px; margin-top: 40px; }
.author-kicker { font: 700 11px/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--stone-700); margin: 0 0 6px; }
.author-box h4 { margin: 0 0 2px; color: var(--red); font-size: 18px; }
.author-role { font-size: 12.5px !important; color: var(--stone-700); margin: 0 0 8px !important; }
.author-box p { margin: 0 0 12px; font-size: 14.5px; }

/* ── Knowledge base: sidebar · document · on-this-page, like documentation ── */
.kb-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; padding-block: 36px 64px; }
.kb-layout.with-toc { grid-template-columns: 210px minmax(0, 1fr) 170px; }
.kb-side { font-size: 13.5px; }
.kb-side-mobile { display: none; }
.kb-side-desktop { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.kb-side ul { list-style: none; margin: 0 0 14px; padding: 0; }
.kb-side li a, .kb-home { display: block; padding: 7px 10px; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; line-height: 1.35; }
.kb-side li a:hover, .kb-home:hover { background: var(--stone-50); color: var(--ink); }
.kb-side a[aria-current] { border-left-color: var(--red); background: var(--aqua); font-weight: 700; }
.kb-home { font: 700 13px/1.3 var(--font-head); margin-bottom: 10px; }
.kb-group { font: 700 11px/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--stone-700); margin: 14px 0 6px; padding-left: 10px; }
.kb-side .draft, .kb-table .draft { font-size: 9px; padding: 2px 4px; margin-left: 4px; }
.kb-main h1 { margin-top: 4px; }
.kb-intro { max-width: 46em; color: var(--stone-700); }
.kb-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin: 18px 0 8px; }
.kb-tools input, .kb-tools select { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--stone-300); border-radius: 0; background: var(--paper); min-height: 44px; }
.kb-tools input:focus, .kb-tools select:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.kb-count { font-size: 12.5px; color: var(--stone-700); margin: 0 0 8px; }
.kb-table-wrap { border-top: 3px solid var(--red); }
.kb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kb-table th { background: var(--stone-700); text-align: left; padding: 0; }
.kb-table th button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px; color: var(--paper); font: 700 11.5px/1 var(--font-head); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.kb-table th button:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }
.kb-table th[aria-sort="ascending"] button::after { content: ' ▲'; }
.kb-table th[aria-sort="descending"] button::after { content: ' ▼'; }
.kb-table td { padding: 12px; border-bottom: 1px solid var(--aqua); vertical-align: top; }
.kb-table tbody tr:hover { background: var(--stone-50); }
.kb-table td:first-child a { font: 700 14.5px/1.35 var(--font-head); color: var(--ink); text-decoration: none; }
.kb-table td:first-child a:hover { color: var(--red); }
.kb-sum { display: block; font-size: 12.5px; color: var(--stone-700); margin-top: 3px; }
.kb-table td:nth-child(4), .kb-table td:nth-child(5) { white-space: nowrap; }
.kb-table td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }
.kb-table .tag { margin-bottom: 3px; }
.kb-none { color: var(--stone-300); }
.kb-crumbs { font-size: 12.5px; color: var(--stone-700); margin: 0 0 4px; }
.kb-fields { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 18px; }
.kb-fields th { text-align: left; font: 700 12px/1.4 var(--font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-700); padding: 8px 12px 8px 0; width: 110px; vertical-align: top; border-bottom: 1px solid var(--aqua); }
.kb-fields td { padding: 8px 0; border-bottom: 1px solid var(--aqua); }
.kb-docmeta { background: var(--stone-50); border-left: 5px solid var(--red); }
.kb-docmeta th { padding-left: 14px; }
.kb-prose h2 { scroll-margin-top: 16px; }
.kb-meta { font-size: 13px; color: var(--stone-700); margin-top: -.4em !important; }
.kb-toc { font-size: 13px; }
.kb-toc ul { list-style: none; margin: 0; padding: 0; position: sticky; top: 16px; border-left: 2px solid var(--aqua); }
.kb-toc a { display: block; padding: 5px 10px; color: var(--stone-700); text-decoration: none; line-height: 1.35; }
.kb-toc a:hover { color: var(--red); }

@media (max-width: 1000px) {
  .kb-layout.with-toc { grid-template-columns: 190px minmax(0, 1fr); }
  .kb-toc { display: none; }
}
@media (max-width: 760px) {
  .kb-layout, .kb-layout.with-toc { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
  .kb-side-desktop { display: none; }
  .kb-side-mobile { display: block; border: 1px solid var(--stone-300); }
  .kb-side-mobile summary { padding: 12px 14px; font: 700 14px/1.2 var(--font-head); cursor: pointer; min-height: 44px; }
  .kb-side-mobile[open] summary { border-bottom: 1px solid var(--stone-300); }
  .kb-side li a, .kb-home { padding: 11px 14px; }
  .kb-tools { grid-template-columns: 1fr 1fr; }
  .kb-tools input { grid-column: 1 / -1; }
  /* The table becomes one card per document: a phone gets every field
     without scrolling sideways. */
  .kb-table thead { display: none; }
  .kb-table, .kb-table tbody, .kb-table tr, .kb-table td { display: block; width: 100%; }
  .kb-table tr { border-bottom: 1px solid var(--aqua); padding: 12px 0; }
  .kb-table tr[hidden] { display: none; }
  .kb-table td { border: 0; padding: 3px 0; }
  .kb-table td:not(:first-child) { display: flex; gap: 10px; font-size: 13px; text-align: left !important; }
  .kb-table td:not(:first-child)::before { content: attr(data-label); flex: none; width: 64px; font: 700 11px/1.7 var(--font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-700); }
  .kb-fields th { width: 88px; }
}

/* ── In-article photograph, sources, related reading ───────────────────────── */
.inline-photo { margin: 1.8em 0; }
.inline-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.inline-photo figcaption { font-size: 12px; color: var(--stone-700); margin-top: 6px; line-height: 1.45; }
.inline-photo figcaption a { color: inherit; }
.prose h2#sources-and-further-reading { border-top: 3px solid var(--aqua); padding-top: 1.2em; }
.prose h2#sources-and-further-reading + ul { font-size: 14.5px; }
.related { margin-top: 36px; }
.related h2 { font: 700 13px/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--stone-700); margin: 0 0 12px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related .thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 8px; background: var(--stone-50); }
.related .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-title { display: block; font: 700 14px/1.35 var(--font-head); color: var(--ink); text-decoration: none; margin-bottom: 4px; }
.related-title:hover { color: var(--red); }
.related .date { font-size: 11.5px; color: var(--stone-700); }
@media (max-width: 720px) { .related ul { grid-template-columns: minmax(0, 1fr); } }

/* ── Small screens ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .layout, .layout.two { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; }
  .sidenav { order: 2; }
  .popular { order: 3; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .masthead .wrap { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 40px; padding-bottom: 4px; }
  /* Touch targets: every nav link, side-nav row and chip at least ~44px tall. */
  .nav { font-size: 15px; }
  .nav a { display: inline-block; padding: 12px 0; }
  .sidenav a { padding: 12px 6px; font-size: 15px; }
  .tag { padding: 7px 8px; margin-bottom: 4px; }
  .button.small { padding: 10px 12px; font-size: 11.5px; }
  .banner { height: 64px; }
  .postloop li.with-thumb { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  /* On the home page every article leads with its picture, full width. */
  .home-list li.with-thumb { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-list .thumb { aspect-ratio: 16 / 9; }
  .card-photo { aspect-ratio: 16 / 9; }
  .postloop h3 { font-size: 16.5px; }
  .postloop p { font-size: 14.5px; }
  .article-photo { margin-inline: calc(-1 * var(--gutter)); }
  .article-photo figcaption { padding-inline: var(--gutter); }
  .prose { font-size: 17px; }
  .stat b { font-size: 38px; }
  .tile { min-height: 0; }
  .author-box { grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 16px; }
  .author-box .avatar { width: 64px !important; height: 64px !important; font-size: 26px !important; }
  .hero-big { min-height: clamp(413px, 75.7vh, 619px); }
  .hero-big.has-photo::before { background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%); }
  .cards-bar { padding-block: 18px 20px; }
  .hero-big .hero { padding-block: 32px 28px; }
  .hero-big .hero p { font-size: 16px; }
  .article-hero img { height: 34vh; min-height: 200px; }
  .wordmark { font-size: 21px; }
  .nav { font-size: 13.5px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { border-left: 0; border-right: 0; border-bottom: 3px solid var(--aqua); }
  .footer .boxes { grid-template-columns: minmax(0, 1fr); }
  .roles li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hero { padding-block: 40px 36px; }
}


/* ── THE KF MARK, IN FRONT OF THE NAME ────────────────────────────────────
   A square, so it aligns to the wordmark as a block rather than floating
   against the cap line of one word.

   The height is set from the wordmark itself, not chosen: the name and its
   strap are two lines, and 44px is what those two lines measure together at
   this type scale. `align-items: stretch` would be the other way to say it,
   but it makes the square depend on whatever the strap wraps to at a given
   width; a fixed square that matches the unwrapped block keeps the mark the
   same size on every page. */
.wordmark { display: flex; align-items: center; gap: 13px; }
.wordmark-mark { flex: none; display: block; width: 44px; height: 44px; }
.wordmark > span { display: block; }
@media (max-width: 560px) {
  .wordmark-mark { width: 36px; height: 36px; }
  .wordmark { gap: 10px; }
}