/* AI Radar, on Tenure. Replaces horizon.css.
   The tokens mirror tenure/tokens.css (Tenure v2.5.0); change them there first.
   The radar is set on ink by decision (tenure/DESIGN.md, Properties). The paper
   set stays beside it on :root, so a change of ground is the data-ground
   attribute on the html element and nothing else. */

:root {
  --paper: #F2F3F5; --card: #FBFBFC; --ink: #1B2130; --graphite: #555E6E;
  --hairline: #D9DCE1; --accent: #7D2A38; --accent-ink: #FFFFFF;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", Menlo, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem;
  --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-4xl: 3.4rem;
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;
  --motion-fast: 120ms; --motion-base: 200ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --measure: 68ch; --page-max: 1120px; --radius: 3px;
}
:root[data-ground="ink"] {
  --paper: #161B26; --card: #1E2431; --ink: #E9EAE7; --graphite: #9BA3AF;
  --hairline: #2E3542; --accent: #D68A96; --accent-ink: #2A1218;
}

/* ---- ground ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.65; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--motion-fast) var(--motion-ease); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -4rem; z-index: 2; background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-4); border-radius: var(--radius); }
.skip:focus { top: var(--s-4); }

/* ---- masthead ---- */
.mast { border-bottom: 1px solid var(--hairline); }
.mast-in { max-width: var(--page-max); margin: 0 auto; padding: var(--s-4) var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-6); align-items: baseline; }
.mast-word { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.mast-word a { text-decoration: none; }
.mast-line { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--graphite); }
.mast-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin-top: var(--s-2); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mast-nav a { text-decoration: none; padding: var(--s-1) 0; border-bottom: 1px solid transparent; }
.mast-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.mast-nav .mast-sub { color: var(--accent); }
@media (max-width: 479px) {
  /* One line of nav on a phone: the wordmark already goes home. */
  .mast-nav { gap: 0 var(--s-3); letter-spacing: 0.04em; }
  .mast-nav .mast-latest { display: none; }
}
@media (min-width: 760px) {
  .mast-in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mast-nav { margin-top: 0; }
}

/* ---- the page and its prose ----
   Prose rules sit under :where() so they weigh one element, and every
   component class below outranks them without a fight. */
.main-content { max-width: var(--page-max); margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-16); }
.main-content > :where(p, ul, ol, blockquote, pre, h1, h2, h3, h4, hr, details, table) { max-width: var(--measure); }
:where(.main-content) h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--s-6); text-wrap: balance; }
:where(.main-content) h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.15; margin: var(--s-12) 0 var(--s-4); text-wrap: balance; }
:where(.main-content) h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; margin: var(--s-8) 0 var(--s-3); text-wrap: balance; }
:where(.main-content) h4 { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin: var(--s-6) 0 var(--s-2); }
:where(.main-content) p { margin: 0 0 var(--s-4); }
:where(.main-content) ul, :where(.main-content) ol { margin: 0 0 var(--s-4); padding-left: 1.2em; }
:where(.main-content) li { margin-bottom: var(--s-2); }
:where(.main-content) blockquote { margin: var(--s-6) 0; padding-left: var(--s-4); border-left: 2px solid var(--accent); border-radius: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.45; }
:where(.main-content) blockquote p { margin: 0; }
:where(.main-content) hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-8) 0; }
:where(.main-content) code { font-family: var(--font-mono); font-size: 0.86em; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0 0.3em; }
:where(.main-content) pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--s-4); overflow-x: auto; }
:where(.main-content) pre code { background: transparent; border: 0; padding: 0; font-size: inherit; }
:where(.main-content) table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; margin: 0 0 var(--s-6); }
:where(.main-content) th, :where(.main-content) td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--hairline); }
:where(.main-content) th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); border-bottom-color: var(--ink); }
:where(.main-content) details { margin: var(--s-4) 0; }
:where(.main-content) summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
:where(.main-content) strong { font-weight: 600; }

/* shared pieces */
.kicker { margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.kicker a { color: var(--accent); text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.brief-h { margin: 0 0 var(--s-1); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.brief-act { border-left: 2px solid var(--accent); border-radius: 0; padding-left: var(--s-4); }
.lab { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.6; color: var(--graphite); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0 var(--s-2); }
.lab[data-v="now"] { color: var(--accent); border-color: var(--accent); }
.page-head { max-width: var(--measure); margin-bottom: var(--s-8); }
.page-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 var(--s-3); text-wrap: balance; }
/* The film on a version page. It is the page's one heavy asset, so it loads
   nothing until a reader asks: poster, preload none, no autoplay and no loop.
   There is no audio track and every word is on screen, so muted costs the
   reader nothing. The caption carries what the film cannot say about itself. */
.film { margin: 0 0 var(--s-8); }
.film-video { display: block; width: 100%; height: auto; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); }
.film-caption { max-width: var(--measure); margin-top: var(--s-4); font-size: var(--text-sm); line-height: 1.6; color: var(--graphite); }
.sub-facts + .method-note { margin-top: var(--s-6); }
.film-close-label { max-width: var(--measure); margin: var(--s-8) 0 var(--s-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--graphite); }
.film-close-label + .film-close { margin-top: 0; }
.film-close { max-width: var(--measure); margin: var(--s-8) 0 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.25; color: var(--ink); }
.page-back { margin-top: var(--s-12); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.take-empty { color: var(--graphite); }

/* ---- the edition page ---- */
.edition-head { display: grid; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--hairline); }
.edition-head .kicker { margin: 0; }
.edition-h { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.edition-h a { text-decoration: none; }
.edition-note { margin: var(--s-4) 0 0; max-width: var(--measure); font-size: var(--text-sm); color: var(--graphite); }

/* the colophon */
.colophon { display: grid; gap: var(--s-3); }
/* Facts about the edition, then how the page is set, beside Adjust. The two
   were one row until both outside reviews read the settings as results. */
.edition-lead { margin: 0; max-width: 34ch; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.3; text-wrap: pretty; }
@media (min-width: 760px) { .edition-lead { font-size: var(--text-xl); line-height: 1.25; } }
.readout-facts { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); font-variant-numeric: tabular-nums; }
.readout-view { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.readout-set { margin: 0; font-size: var(--text-sm); color: var(--graphite); }
.readout-set b { font-weight: 500; color: var(--accent); }
.reset { margin-left: var(--s-2); padding: 0; background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
/* The radar's motion floor (tenure/DESIGN.md, Properties): hover colour on
   links and chips, and nothing moves. The fold and the chevron change state
   without animating. */
.adjust { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-4); background: transparent; border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.adjust:hover, .adjust[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.chev { display: inline-block; }
[aria-expanded="true"] .chev { transform: rotate(90deg); }
@media (min-width: 760px) {
  .colophon { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); }
}

/* the fold */
.fold { display: grid; gap: var(--s-6); margin-top: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-3); background: var(--card); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.fg-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.fg-name { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.fg-kind { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.fg-help { margin: var(--s-2) 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--graphite); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: baseline; gap: var(--s-1); padding: var(--s-1) var(--s-3); background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer; font-family: var(--font-mono); font-size: 0.74rem; white-space: nowrap; transition: border-color var(--motion-fast) var(--motion-ease); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"]::before { content: "✓"; font-size: 0.7rem; }
.chip .n { font-size: 0.62rem; color: var(--graphite); }
.chip[aria-pressed="true"] .n { color: var(--paper); }
.chip.zero { border-style: dashed; color: var(--graphite); }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.seg button { padding: var(--s-1) var(--s-4); background: transparent; border: 0; border-left: 1px solid var(--ink); cursor: pointer; font-family: var(--font-mono); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.radios { display: grid; }
.radio { display: flex; align-items: baseline; gap: var(--s-3); width: 100%; padding: var(--s-2) 0; background: transparent; border: 0; border-bottom: 1px solid var(--hairline); cursor: pointer; text-align: left; font-size: 0.9rem; }
.radio::before { content: ""; flex: none; width: 10px; height: 10px; border: 1px solid var(--ink); border-radius: 0; }
.radio[aria-pressed="true"] { font-weight: 500; }
.radio[aria-pressed="true"]::before { background: var(--ink); }
.radio:disabled { color: var(--graphite); cursor: default; }
.radio:disabled::before { border-color: var(--hairline); }
.fold-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.fold-note { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--graphite); }
.fold-done { padding: var(--s-1) var(--s-4); background: transparent; border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
@media (min-width: 760px) {
  .fold { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); padding: var(--s-4) var(--s-6) var(--s-3); }
  .fg-wide, .fold-end { grid-column: 1 / -1; }
}

/* the shelves: one column on a phone, where the lead opens as a block, and
   as many columns as fit on a wide screen */
.shelves { display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.shelves-empty { color: var(--graphite); }
.shelf { min-width: 0; padding-top: var(--s-3); border-top: 3px solid var(--ink); }
.shelf-head { display: grid; gap: 2px; }
.shelf-name { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.shelf-name a { text-decoration: none; }
.shelf-count { margin: 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--graphite); }
.shelf-q { margin: var(--s-1) 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.35; color: var(--graphite); }
.shelf-empty { margin: var(--s-3) 0 0; font-size: var(--text-sm); color: var(--graphite); }
.shelf-all { margin: var(--s-3) 0 0; font-family: var(--font-mono); font-size: 0.7rem; }
.shelf-all a { color: var(--ink); text-decoration-color: var(--accent); }
.rows { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.row { display: grid; gap: 2px; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.shelves:not(.is-live) .row:nth-child(n+4) { display: none; }
.row-title { font-size: 0.98rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.row-title:hover { text-decoration: underline; }
.row-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--graphite); }
.row-labels { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.edition:not([data-labels~="soon"]) .lab[data-l="soon"],
.edition:not([data-labels~="ev"]) .lab[data-l="ev"] { display: none; }
.row-mark { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.row.is-marked { padding-left: var(--s-3); border-left: 2px solid var(--accent); border-radius: 0; }
.row-kicker { margin: 0 0 var(--s-1); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.row-lead { padding-bottom: var(--s-6); }
.row-lead .row-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; text-wrap: pretty; }
.row-brief { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.row-brief p { margin: 0; max-width: var(--measure); font-size: var(--text-base); line-height: 1.55; }
.row-brief .brief-h { font-size: 0.68rem; }
@media (min-width: 760px) {
  .shelves { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-8) var(--s-6); }
  .row-lead { padding-bottom: var(--s-3); }
  .row-lead .row-title { font-size: 1.35rem; line-height: 1.15; }
  .row-brief { gap: var(--s-2); margin-top: var(--s-2); }
  .row-brief p { font-size: var(--text-sm); line-height: 1.45; }
  .row-brief-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
}

/* ---- shelf colours ----
   Each shelf has one hue: on its rule, as a square before its name, and on the
   kicker above its lead (the owner, 2026-09-14, A3 on the choices page). The
   hue says which shelf; the accent still says what needs attention. Set for
   the ink ground only (tenure/DESIGN.md, Properties). On paper, or for a shelf
   id with no hue below, everything falls back to ink, graphite and the accent. */
:root[data-ground="ink"] {
  --shelf-reliability-assurance: #8FAEC9; --shelf-critical-infrastructure: #C4A970;
  --shelf-business-markets: #7FB89C; --shelf-practice: #D08A7E; --shelf-horizon-research: #B3A6D4;
}
[data-shelf="reliability-assurance"], [data-hue="reliability-assurance"] { --shelf-c: var(--shelf-reliability-assurance); }
[data-shelf="critical-infrastructure"], [data-hue="critical-infrastructure"] { --shelf-c: var(--shelf-critical-infrastructure); }
[data-shelf="business-markets"], [data-hue="business-markets"] { --shelf-c: var(--shelf-business-markets); }
[data-shelf="practice"], [data-hue="practice"] { --shelf-c: var(--shelf-practice); }
[data-shelf="horizon-research"], [data-hue="horizon-research"] { --shelf-c: var(--shelf-horizon-research); }
.shelf[data-shelf] { border-top-color: var(--shelf-c, var(--ink)); }
.shelf-sq::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.35em; vertical-align: 0.08em; background: var(--shelf-c, var(--graphite)); }
.shelf .row-kicker { color: var(--shelf-c, var(--accent)); }
.kicker .shelf-tag { color: var(--shelf-c, var(--accent)); }
/* The reader can turn the hues off in Adjust (the owner, 2026-09-14). An
   initial value leaves --shelf-c unset, so every rule above takes its fallback. */
:root[data-hues="off"] [data-shelf], :root[data-hues="off"] [data-hue] { --shelf-c: initial; }

/* ---- in this edition ----
   Every item the edition published, in published rank, when it published two
   or more (the owner, 2026-09-14, B2). Six show and the rest open in place. */
.in-edition { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--ink); max-width: 52rem; }
.in-edition-h { margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.in-list { list-style: none; margin: 0; padding: 0; }
.in-item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 2px var(--s-3); align-items: baseline; margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); }
.in-n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.in-title { font-size: 0.95rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.in-title:hover { text-decoration: underline; }
.in-shelf { grid-column: 2; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.in-more { margin: 0; }
.in-more summary { padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 760px) {
  .in-item { grid-template-columns: 1.6rem minmax(0, 1fr) auto; padding: var(--s-1) 0; }
  .in-shelf { grid-column: auto; white-space: nowrap; }
}

/* the lead when it is a commentary (the reader's page rules, rule 2): it
   belongs to no shelf, so it sits above the list and the shelves */
.lead-take { display: grid; gap: 2px; max-width: 52rem; margin-top: var(--s-6); padding: var(--s-3) 0 var(--s-6); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.lead-take .row-kicker { color: var(--accent); }
.lead-take-title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; text-wrap: pretty; }
.lead-take-title a { text-decoration: none; }
.lead-take-title a:hover { text-decoration: underline; }
.lead-take-text { margin: var(--s-3) 0 0; max-width: var(--measure); font-size: var(--text-base); line-height: 1.55; }

/* the blocks under the edition */
.home-block { margin-top: var(--s-16); padding-top: var(--s-4); border-top: 1px solid var(--ink); }
.home-block-h { margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; }
.takes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4) var(--s-8); }
.take { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.take-title { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.25; text-decoration: none; text-wrap: balance; }
.take-title:hover { text-decoration: underline; }
.take-meta { display: block; margin-top: var(--s-1); font-family: var(--font-mono); font-size: 0.7rem; color: var(--graphite); }
/* The commentary index and the reverse link from an item page, radar N-554.
   Both reuse .takes, so a piece is listed the same way wherever it appears. */
.more-link { margin: var(--s-4) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); }
.takes-index { gap: var(--s-6) var(--s-8); }
.take-on { display: block; max-width: var(--measure); margin-top: var(--s-2); font-size: var(--text-sm); color: var(--graphite); }
/* The story link stays graphite so the piece's own title is the one thing
   reading as the destination; eleven accent links would make the index
   busier than the three-item block it grew out of. */
.take-on a { color: var(--graphite); }
.take-on a:hover, .take-on a:focus-visible { color: var(--accent); }
.item-commentary { margin-top: var(--s-12); }
.item-commentary .takes { margin-top: var(--s-4); }
@media (min-width: 760px) { .takes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* An item usually carries one piece, and a lone card in a three-column grid
   wraps its title to a third of the width. The reverse link reads as a line
   at full measure instead. */
@media (min-width: 760px) { .item-commentary .takes { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); } }
.editions summary { display: flex; align-items: baseline; gap: var(--s-3); list-style: none; font-family: var(--font-text); text-transform: none; letter-spacing: 0; color: var(--ink); }
.editions summary::-webkit-details-marker { display: none; }
.editions summary::after { content: "›"; font-family: var(--font-mono); color: var(--graphite); }
.editions[open] summary::after { transform: rotate(90deg); }
.editions .home-block-h { margin: 0; }
.edition-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: 44rem; }
.edition-list li { margin: 0; }
.edition-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.74rem; font-variant-numeric: tabular-nums; text-decoration: none; }
.ed-pub { min-width: 7.5rem; text-align: right; }
.about p { max-width: var(--measure); }
.about-lede { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.45; }
.about-lede strong { font-weight: 600; }
.about-by { font-size: var(--text-sm); color: var(--graphite); }
.about-by strong { color: var(--ink); }
@media (max-width: 559px) {
  .edition-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-4); }
  .ed-pub { text-align: right; min-width: 0; }
}

/* ---- the item page ---- */
.item-page { max-width: 46rem; }
.item-title { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.item-attr { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.item-attr a { color: var(--accent); }
.item-labels { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-3) 0 0; }
.item-thin { margin: var(--s-6) 0 0; padding-left: var(--s-4); border-left: 2px solid var(--hairline); border-radius: 0; font-size: var(--text-sm); color: var(--graphite); }
.item-brief { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.item-brief p { margin: 0; }
/* The v2 enrichment's one sentence, radar N-584. A standfirst: the serif at a
   step above the body, so a reader meets the claim before the prose without it
   competing with the headline. The body that follows is unchanged. */
.item-line { max-width: var(--measure); margin: var(--s-6) 0 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.45; }
.item-also { max-width: var(--measure); margin: var(--s-3) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.item-body { margin-top: var(--s-8); }
.item-body > p:first-child { font-size: 1.08rem; line-height: 1.55; }
.item-body .source-line { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
/* Two kinds of block heading, kept from the radar's own reasoning: the model
   writes the first about this item, a claim, so it takes the serif; the
   profile declares the rest, which repeat across a theme, so they read as
   labels in mono. */
.item-body .item-block { margin: var(--s-12) 0 var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.item-body .item-block-written { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--ink); }
.item-body > p > strong:first-child { display: block; margin-bottom: var(--s-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.item-body details { margin-top: var(--s-8); padding-top: var(--s-3); border-top: 1px solid var(--hairline); font-size: var(--text-sm); }
.item-body details ul { margin-top: var(--s-2); }
.item-foot { margin-top: var(--s-12); padding-top: var(--s-4); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--text-xs); }
.item-foot p { margin: 0 0 var(--s-2); }
@media (min-width: 760px) { .item-title { font-size: var(--text-4xl); } }

/* ---- a shelf's archive: the ledger ---- */
.shelf-question { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; }
.shelf-scope { margin: 0; color: var(--graphite); }
.ledger-wrap { overflow-x: auto; }
.ledger { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.ledger caption { caption-side: top; text-align: left; padding-bottom: var(--s-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.ledger thead th { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--ink); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.ledger td { padding: var(--s-3); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.ledger-group th { padding: var(--s-8) var(--s-3) var(--s-2); border-bottom: 2px solid var(--ink); font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.ledger-n { margin-left: var(--s-3); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.l-item a { font-weight: 500; line-height: 1.35; text-decoration: none; }
.l-item a:hover { text-decoration: underline; }
.l-pub, .l-date, .l-lab { font-family: var(--font-mono); font-size: 0.74rem; white-space: nowrap; color: var(--graphite); }
@media (max-width: 599px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger tr { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
  .ledger td { display: inline; padding: 0 var(--s-2) 0 0; border: 0; }
  .ledger td.l-item { display: block; padding-bottom: var(--s-1); }
  .ledger td.l-pub::after { content: " ·"; }
  .ledger tr.ledger-group { padding: 0; border-bottom: 2px solid var(--ink); }
  .ledger-group th { display: block; padding: var(--s-6) 0 var(--s-2); border: 0; }
}

/* ---- commentary ---- */
.commentary { max-width: 46rem; }
.commentary-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.commentary-on { margin: 0 0 var(--s-8); padding-left: var(--s-4); border-left: 2px solid var(--accent); border-radius: 0; }
.commentary-on p { margin: 0; }
.commentary-item a { font-weight: 500; }
.commentary-edition { margin-top: var(--s-1); font-family: var(--font-mono); font-size: 0.72rem; color: var(--graphite); }
.commentary-on .related-h { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.commentary-on .related-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.related-meta .lab { margin-left: var(--s-2); }
.related { list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.related-item { display: grid; gap: 2px; margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); }
.related-item:last-child { border-bottom: 0; padding-bottom: 0; }
.related-title { font-weight: 500; line-height: 1.35; }
.related-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--graphite); }
.related-meta a { color: var(--graphite); }
.commentary-body p { font-size: 1.06rem; }
.commentary-sign { margin-top: var(--s-12); padding-top: var(--s-4); border-top: 1px solid var(--ink); font-size: var(--text-sm); }
.commentary-sign p { margin: 0 0 var(--s-2); max-width: var(--measure); }
.commentary-stance { color: var(--graphite); }
.commentary-links { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ---- pages written in Markdown: method, subscribe, playbook, editions ---- */
.radar-intro, .sub-hero { max-width: var(--measure); }
.radar-intro p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; }
.radar-intro strong { font-weight: 600; }
.byline { max-width: var(--measure); margin: var(--s-6) 0; padding-top: var(--s-3); border-top: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--graphite); }
.byline strong { color: var(--ink); }
.section-label { max-width: none; margin: var(--s-12) 0 var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.pipeline { max-width: var(--measure); }
.pipeline p { line-height: 2.2; }
.doc-links { list-style: none; max-width: var(--measure); margin: 0; padding: 0; }
.doc-links li { margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); }
.method-note, .sub-note { max-width: var(--measure); font-size: var(--text-sm); color: var(--graphite); }
.sub-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-6) var(--s-8); max-width: 60rem; }
.sub-option { padding-top: var(--s-3); border-top: 3px solid var(--ink); }
.sub-option-name { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.1; }
.sub-option-desc { margin: 0 0 var(--s-4); }
.sub-cta { display: inline-block; padding: var(--s-1) var(--s-4); border: 1px solid var(--ink); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.sub-cta:hover { background: var(--ink); color: var(--paper); }
.sub-facts { list-style: none; max-width: 60rem; margin: 0; padding: 0; }
.sub-facts li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-1) var(--s-6); margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.sub-facts .k { padding-top: 0.2rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
@media (max-width: 599px) { .sub-facts li { grid-template-columns: minmax(0, 1fr); } }
.playbook-list { list-style: none; max-width: var(--measure); margin: 0; padding: 0; }
.playbook-entry { margin: 0; }
.playbook-entry a { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.playbook-entry-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; }
.playbook-entry a:hover .playbook-entry-title { text-decoration: underline; text-decoration-color: var(--accent); }
.playbook-entry-date { font-family: var(--font-mono); font-size: 0.7rem; color: var(--graphite); }
.tag-line, .source-line { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--hairline); }
.site-foot-in { max-width: var(--page-max); margin: 0 auto; padding: var(--s-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-8); font-size: var(--text-sm); color: var(--graphite); }
.site-foot-owner { margin: 0; }
.site-foot-owner strong { color: var(--ink); font-weight: 600; }
.site-foot-links { display: flex; flex-wrap: wrap; gap: var(--s-4); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.site-foot-links a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}