/* ===== Layer 1: TOKENS ===== OD 墨蓝暖纸,唯一真源 */
:root {
  /* --- Parchment canvas (kami signature) --- */
  --paper:        #F5F4ED;   /* page canvas - never pure white */
  --paper-2:      #EFEEE5;   /* secondary tint / chips / media blocks */
  --paper-3:      #EAE8DD;   /* deepest tint, used sparingly */

  /* --- Warm ink ladder --- */
  --ink:          #1F1D18;   /* headlines, primary text */
  --ink-2:        #46433A;   /* decks, secondary body */
  --ink-3:        #6B665B;   /* meta, bylines, timestamps */
  --ink-4:        #9A958A;   /* index numerals, disabled */

  /* --- Hairlines --- */
  --rule:         #D4D1C5;   /* the workhorse 1px separator */
  --rule-strong:  #1F1D18;   /* 2px section / nameplate rule */

  /* --- Single accent (ink-blue default) --- */
  --brand:        #1B365D;   /* OD 官方墨蓝 */
  --brand-hover:  #152A47;   /* 墨蓝深一档 */

  /* --- Type families --- */
  --serif: "Source Serif Pro", "Noto Serif SC", Georgia, "Songti SC", serif;
  --sans:  "Inter", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono:  "IBM Plex Mono", "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- Rhythm --- */
  --max:    1180px;
  --gutter: 24px;
  --rail:   320px;
}

html[data-accent="red"] { --brand:#B72633; --brand-hover:#8E1D28; }  /* 保留机制,非默认 */

/* Legacy 8-step spacing收编映射,Task 3 据此全局替换:
   s1 4px  -> micro inset; OD doc-kami tag x-pad 3px/10px, use 4px nearest
   s2 8px  -> tight stack; OD doc-kami mt-2
   s3 12px -> compact meta gap; OD doc-kami pb-3 / gap-3
   s4 16px -> article card pad; OD article-magazine p-4
   s5 24px -> gutter; OD homepage --gutter / article-magazine px-6
   s6 32px -> medium editorial stack; OD article-magazine mb-8 / w-8
   s7 48px -> section break; OD article-magazine mb-10/mt-12/pb-12 nearest, doc-kami mt-12
   s8 64px -> large page rhythm; OD doc-kami py-14/mt-14 nearest, article-magazine pt-20 midpoint
   right rail -> OD homepage --rail 320px */

/* ===== Layer 2: BASE + ATOMICS ===== OD homepage-editorial master ===== */
/* ============================ base ============================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: 0; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* monospace meta utility (kickers, indices, timestamps, datelines) */
.meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ======================== site header ======================== */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 48px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0;
  white-space: nowrap;
}
.brand .mark {
  width: 18px; height: 18px;
  background: var(--brand);   /* logo mark follows the single accent */
  display: inline-block;
  flex: none;
}
.brand .brand-sub { color: var(--ink-3); font-weight: 400; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--ink-3);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ======================= masthead nameplate ================== */
.home-masthead {
  text-align: center;
  padding: 24px 0 16px;
  border-bottom: 2px solid var(--rule-strong);
}
.home-masthead-label {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.home-masthead-label span { position: relative; }
.home-masthead-label span + span::before {
  content: "·";
  position: absolute;
  left: -9px;
  color: var(--ink-4);
}
#home-title {
  font-size: clamp(30px, 4.1vw, 48px);
  line-height: 1.1;
  font-weight: 600;
  text-wrap: balance;
}
.home-title-brand { color: var(--ink); }
.home-title-position { color: var(--ink); }
.home-hero-copy {
  margin: 10px auto 0;
  max-width: 640px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.masthead-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ============================ buttons ======================== */
.button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.button:hover { background: var(--ink-2); border-color: var(--ink-2); }
.button.secondary {
  background: transparent;
  color: var(--ink);
}
.button.secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
}

.text-link {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
  transition: color .15s ease;
  align-self: end;
}
.text-link:hover { color: var(--brand-hover); }

/* ============================ layout ========================= */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: 48px;
  padding: 24px 0 0;
}
.home-main-river { min-width: 0; }

/* ========================== lead story ====================== */
.home-lead-section { margin-bottom: 8px; }
.home-lead-card {
  border-left: 3px solid var(--brand);   /* article-magazine featured rule */
  padding: 2px 0 18px 20px;
  border-bottom: 1px solid var(--rule);
}
.lead-kicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.lead-kicker .label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
}
.lead-kicker .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 3px 8px;
}
.lead-title {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.1;
  font-weight: 500;                    /* never 700/800 */
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.lead-deck {
  margin: 14px 0 0;
  max-width: 640px;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lead-byline { margin-top: 10px; }
.home-lead-card .article-reader {
  max-width: 620px;
}
.home-lead-card .article-reader-body {
  font-size: 15px;
  line-height: 1.65;
}
.home-lead-card .home-lead-story > .article-byline {
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.home-lead-card .article-reader-preview {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin-top: 16px;
}
.home-lead-card .article-reader-preview p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.8;
  text-wrap: pretty;
}
.home-lead-card .article-reader-preview h2,
.home-lead-card .article-reader-preview h3 {
  margin: 18px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/* ========================= section heads ==================== */
.section { margin-top: 28px; }
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  border-top: 2px solid var(--rule-strong);
  padding-top: 10px;
  margin-bottom: 2px;
}
.section-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
  margin: 0 0 6px;
}
.section-head h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
}
.section-head > div > p:last-child {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-3);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ========================== story item ====================== */
/* the atom of the information river — no card, hairline separated */
.story-item {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  column-gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.story-item:last-child { border-bottom: 0; }
.story-index {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-4);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.story-body { min-width: 0; }
.story-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}
.story-topline .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
}
.story-topline .time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.story-title {
  font-size: 19px;
  line-height: 1.32;
  font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.story-item:hover .story-title { color: var(--brand); }
.story-deck {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.story-byline {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ===================== grids (sections) ===================== */
/* publication / tool / guide / company / article grids:
   two columns of hairline-separated story items, no boxes. */
.publication-grid,
.tool-grid,
.guide-grid,
.company-grid,
.article-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.article-stage.is-detail {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}
/* compact variant inside grids: drop the index column */
.publication-grid .story-item,
.tool-grid .story-item,
.guide-grid .story-item,
.company-grid .story-item,
.article-stage .story-item {
  grid-template-columns: minmax(0, 1fr);
}

/* lead deep-read (article-stage) can run a single featured + list,
   but as a 2-col grid it already reads dense. */

/* ========================== right rail ====================== */
.home-right-rail {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: 24px;
}
.rail-head {
  border-top: 2px solid var(--rule-strong);
  padding-top: 12px;
  margin-bottom: 4px;
}
.rail-head h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.pick-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.pick-item:last-child { border-bottom: 0; }
.pick-item .label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
  margin-bottom: 5px;
}
.pick-item .pick-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  transition: color .15s ease;
}
.pick-item:hover .pick-title { color: var(--brand); }
.pick-item .pick-deck {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pick-item .article-reader,
.home-pick .article-reader {
  margin-top: 10px;
}
.pick-item .article-reader-body,
.home-pick .article-reader-body {
  font-size: 14px;
  line-height: 1.7;
  max-width: none;
}
.pick-item .article-reader-body h2,
.pick-item .article-reader-body h3,
.home-pick .article-reader-body h2,
.home-pick .article-reader-body h3 {
  font-size: 17px;
  line-height: 1.4;
  margin-top: 20px;
}
.pick-item .article-reader-actions,
.home-pick .article-reader-actions {
  margin-top: 2px !important;
}

/* rail brand note (from DESIGN.md §8 brand facts) */
.rail-note {
  margin-top: 26px;
  padding: 18px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.rail-note .note-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.rail-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* ============================ footer ======================== */
.home-footer {
  margin-top: 56px;
  border-top: 2px solid var(--rule-strong);
}
.home-footer .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 40px;
  flex-wrap: wrap;
}
.footer-line {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.footer-colophon {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.8;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer-links a,
.footer-links button {
  color: inherit;
}
.footer-links a:hover,
.footer-links button:hover {
  color: var(--brand);
}

/* ======================== runtime hooks ======================
   app.js replaces the fallback markup with these class names. Keep the
   same editorial language after hydration without touching app.js. */
.tag,
.publication-time,
.radar-source,
.radar-time,
.article-lane,
.publication-meta,
.tool-meta,
.article-byline,
.article-footer,
.company-top,
.tool-card-top {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.tag {
  color: var(--brand);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.publication-time,
.radar-source,
.radar-time,
.article-lane,
.publication-meta,
.tool-meta,
.article-byline,
.article-footer {
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.home-lead-card .home-lead-story {
  min-width: 0;
}
.home-lead-card .brief-featured-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.home-lead-card .home-lead-story > h2 {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
.home-lead-card .home-lead-story > p {
  margin: 12px 0 0;
  max-width: 680px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.62;
  text-wrap: pretty;
}
.home-lead-card .home-lead-story .publication-why {
  padding-left: 14px;
  border-left: 2px solid var(--brand);
  font-family: var(--serif);
}

.home-radar-list {
  counter-reset: home-river;
}
.home-radar-item {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 5px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.home-radar-item::before {
  counter-increment: home-river;
  content: counter(home-river, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 3;
  padding-top: 2px;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.home-radar-item .radar-meta {
  grid-column: 2 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.home-radar-item > div:not(.radar-meta) {
  grid-column: 2;
  min-width: 0;
}
.home-radar-item > .tag {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}
.home-radar-item h3 {
  font-size: 19px;
  line-height: 1.32;
  font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.home-radar-item p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.home-radar-item.is-merged-full p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.home-radar-item:hover h3 {
  color: var(--brand);
}

.publication-card,
.article-card,
.tool-card,
.guide-card,
.company-card {
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.publication-top,
.article-card-top,
.tool-card-top,
.company-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}
.tool-card-top,
.company-top {
  align-items: center;
}
.tool-logo,
.company-logo {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.publication-card h3,
.article-card > h2,
.tool-card h3,
.guide-card h3,
.company-card h3 {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.32;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.publication-card:hover h3,
.article-card:hover > h2,
.tool-card:hover h3,
.guide-card:hover h3,
.company-card:hover h3,
.home-pick:hover > h2 {
  color: var(--brand);
}
.publication-card > p,
.article-card > p,
.tool-card > p,
.guide-card > p,
.company-card > p,
.geo-answer {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.article-preview {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.article-preview p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.article-card.is-news .article-preview p {
  -webkit-line-clamp: 3;
}
.article-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  width: fit-content;
}
.publication-why,
.geo-answer {
  padding-left: 12px;
  border-left: 2px solid var(--brand);
}
.publication-meta,
.tool-meta,
.article-footer,
.metric-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 9px;
}
.article-reader {
  margin-top: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.article-card.is-home .article-reader,
.home-article-stage .story-item .article-reader,
.home-lead-card .article-reader,
.home-pick .article-reader {
  display: block;
  width: 100%;
  max-width: 720px;
}
.article-reader summary {
  color: var(--brand);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.article-reader summary:hover {
  color: var(--brand-hover);
}
.article-reader summary::marker {
  content: "";
}
.article-reader summary::-webkit-details-marker {
  display: none;
}
.article-reader summary::after {
  color: var(--ink-3);
  content: "+";
  font-family: var(--mono);
  font-size: 12px;
}
.article-reader[open] summary::after {
  content: "-";
}
.article-reader-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.article-reader-body p,
.article-reader-body ul,
.article-reader-body ol,
.article-reader-body blockquote {
  margin: 0;
  color: var(--ink-2);
}
.article-reader-body p {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.8;
}
.article-reader-body h2 {
  margin: 30px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
.article-reader-body h3 {
  margin: 24px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}
.article-reader-actions {
  margin-top: 4px !important;
}
.article-body {
  margin-top: 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.8;
}
.article-body h2,
.article-body h3 {
  margin: 24px 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.28;
}
.article-body h2 {
  font-size: 22px;
}
.article-body h3 {
  font-size: 19px;
}
.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote {
  margin: 0 0 14px;
}
.article-body ul,
.article-body ol {
  padding-left: 1.25em;
}
.article-body li + li {
  margin-top: 6px;
}
.article-body blockquote {
  border-left: 2px solid var(--brand);
  color: var(--ink-2);
  padding-left: 14px;
}
.article-body code {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 4px;
}
.metric {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.metric span {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.metric strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}
.sponsor-disclosure {
  padding-left: 12px;
  border-left: 2px solid var(--rule);
}
.empty-state {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: var(--serif);
}

.home-pick {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.home-pick:last-child {
  border-bottom: 0;
}
.home-pick > h2 {
  margin-top: 5px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  transition: color .15s ease;
}
.home-pick p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ============================ dialog ======================== */
.dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
.dialog::backdrop {
  background: rgba(31, 29, 24, .32);
}
.dialog-inner {
  padding: 24px;
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.dialog-head h2 {
  font-size: 24px;
  line-height: 1.2;
}
.dialog-head p {
  margin: 6px 0 0;
  color: var(--ink-3);
}
.dialog-close {
  align-self: start;
  padding: 0;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.honeypot {
  position: absolute;
  left: -9999px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.field {
  display: grid;
  gap: 6px;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font: inherit;
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 1px solid var(--brand);
  border-color: var(--brand);
}
.form-message {
  min-height: 20px;
  margin-top: 12px;
  color: var(--ink-3);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* seed-data note (preview only; app.js hydrates the real rows) */
.seed-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 6px 0 0;
}

/* ========================= responsive ======================= */
@media (max-width: 1023px) {
  .home-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-right-rail {
    position: static;
    margin-top: 44px;
  }
  /* rail becomes a horizontal 3-up block at the foot of the river */
  .home-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }
  .pick-item { border-bottom: 0; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .site-nav { display: none; }
  .home-masthead { padding-top: 28px; }
  #home-title { font-size: clamp(26px, 7vw, 34px); }
  /* designed symmetric two-line nameplate on narrow screens */
  .home-title-brand { display: block; }
  .home-title-position { display: block; }
  .home-layout { padding-top: 24px; }
  .publication-grid,
  .tool-grid,
  .guide-grid,
  .company-grid,
  .article-stage { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .home-picks { grid-template-columns: minmax(0, 1fr); }
  .pick-item { border-bottom: 1px solid var(--rule); }
  .article-reader-body p {
    font-size: 15px;
    line-height: 1.78;
  }
  .home-lead-card .article-reader-preview p {
    font-size: 15px;
    line-height: 1.78;
  }
  .article-reader-body h2 {
    font-size: clamp(18px, 5vw, 21px);
  }
  .home-lead-card .article-reader-preview h2,
  .home-lead-card .article-reader-preview h3 {
    font-size: clamp(18px, 5vw, 21px);
  }
  .footer-colophon { text-align: left; }
}

@media (max-width: 430px) {
  .lead-deck { font-size: 16px; }
  .lead-title,
  .home-lead-card .home-lead-story > h2 {
    font-size: clamp(28px, 9vw, 36px);
  }
  .home-lead-card { padding-left: 16px; }
  .button { flex: 1 1 auto; text-align: center; }
}


/* ===== Layer 3: LEGACY PAGE COMPONENTS ===== folded to OD tokens ===== */
.skip-link {
position: absolute;
  top: -80px;
  left: 16px;
  z-index: 20;
  padding: 8px 12px;
  color: var(--paper);
  background: var(--ink);
}

.skip-link:focus {
top: 12px;
}

.filter {
letter-spacing: 0;
}

.single-line-title,
.brief-featured h3,
.editor-card strong,
.hero-fallback-content strong {
overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: balance;
  white-space: nowrap;
}

.header-inner {
display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gutter);
  width: min(var(--max), calc(100% - 48px));
  min-height: 58px;
  margin: 0 auto;
}

.brand-mark {
display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--paper);
  background: var(--risk);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.nav {
display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--gutter);
  min-width: 0;
  overflow-x: auto;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.nav a,
.header-actions a {
display: inline-flex;
  align-items: center;
  min-height: 58px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav a:hover,
.nav a[aria-current="page"],
.header-actions a:hover,
.header-actions a[aria-current="page"] {
color: var(--brand);
  border-bottom-color: var(--brand);
}

.header-actions {
display: flex;
  align-items: center;
  gap: 8px;
}

.page,
.home-page,
.tools-sample-page,
.about-page,
.detail-page,
.radar-detail-page {
width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.kicker {
color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

.kicker,
.fallback-swatch,
.filter {
display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 3px 6px;
  color: var(--brand);
  background: transparent;
}

.tag.verified,
.tag.founder,
.tag.media,
.tag.current,
.fallback-swatch-cyan {
color: var(--brand);
  background: transparent;
}

.kicker.radar-hot,
.fallback-swatch-red,
.fallback-swatch-amber {
color: var(--risk);
}

.site-footer {
margin-top: 48px;
  border-top: 1px solid var(--rule-strong);
  background: var(--paper-2);
}

.footer-inner {
display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gutter);
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: var(--gutter) 0 32px;
}

.footer-inner p {
margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 13px;
}

.home-hero,
.masthead,
.subpage-header,
.page-head,
.about-hero,
.tool-category-hero,
.community-hero {
border-bottom: 1px solid var(--rule-strong);
  padding: 48px 0 32px;
}

.home-hero,
.masthead,
.tool-category-hero,
.community-hero {
display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
}

.home-hero-main,
.tool-hero-copy {
min-width: 0;
}

.home-hero h1,
.about-hero h1 {
font-size: 40px;
  line-height: 1.2;
}

.masthead-copy,
.about-anchor,
.community-hero-copy,
.tool-hero-summary,
.page-head > p,
.subpage-header p,
.magazine-head p:last-child {
max-width: 760px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.signal-ledger,
.page-signal-ledger,
.community-ledger,
.tool-hero-meta,
.ops-grid,
.tool-sample-metrics {
display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.signal-ledger {
margin: var(--gutter) 0;
}

.signal-ledger-item,
.community-ledger-item,
.tool-hero-stat,
.ops-stat,
.metric-row {
min-width: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.signal-ledger-item span,
.community-ledger-item span,
.tool-hero-stat span,
.ops-stat span,
.metric-row span,
.article-meta,
.ops-date {
color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.signal-ledger-item strong,
.community-ledger-item strong {
display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
}

.brief-featured,
.radar-item,
.community-rule,
.statement-grid > div,
.editor-card {
min-width: 0;
  border-top: 1px solid var(--rule);
  padding: 16px 0;
  background: transparent;
}

.brief-featured {
border-top: 2px solid var(--rule-strong);
}

.brief-featured h3,
.lead-story h2 {
font-size: 30px;
  line-height: 1.25;
}

.radar-item p,
.community-rule p,
.statement-grid p,
.aside-box p {
color: var(--ink-2);
  font-size: 14px;
}

.edition-panel,
.tool-hero-panel,
.tool-sample-side {
border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
}

.home-title-block {
min-width: 0;
}

.home-title-block h1 {
display: flex;
  flex-wrap: wrap;
  column-gap: 0;
  overflow: visible;
  margin-bottom: 4px;
  font-size: 30px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.radar-list,
.brief-stage {
display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.home-page .home-article-stage {
counter-reset: river-item;
}

.home-main-river .article-card > .article-deck,
.home-main-river .article-card > p:not(.article-byline):not(.article-deck) {
grid-column: 3;
}

.radar-item > * {
min-width: 0;
}

.home-radar-item.is-hot,
.radar-item.is-hot,
.radar-page .radar-item.is-hot,
.news-radar-list .radar-item.is-hot {
border-left: 2px solid var(--risk);
  padding-left: 12px;
}

.lead-grid,
.brief-layout,
.content-grid {
display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
}

.brief-rail {
display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.radar-item-top,
.ops-panel-head,
.article-detail-footer,
.tool-category-footer {
display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tag-row,
.tool-type-index,
.tool-legend,
.tool-sample-top-copy,
.reader-toolbar,
.radar-status-strip,
.filter-bar {
display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reader-toolbar span,
.radar-status-strip span {
min-width: 0;
  color: var(--ink-3);
  font-size: 12px;
}

.page-head h1,
.subpage-header h1,
.tool-hero-copy h1,
.community-hero h1 {
font-size: 30px;
  line-height: 1.25;
}

.subpage-header {
display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--gutter);
}

.radar-page .radar-list,
.news-radar-list,
.news-article-stage,
.home-article-stage,
.statement-grid,
.editor-grid,
.tool-sample-grid {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border-top: 0;
}

.radar-page .radar-list,
.news-radar-list,
.news-article-stage {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.articles-page .page-head {
padding-bottom: var(--gutter);
}

.articles-head {
display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--gutter);
  align-items: end;
}

.articles-head-copy {
min-width: 0;
}

.articles-head-copy h1 {
margin-bottom: 8px;
}

.articles-head-copy > p:last-child {
margin-bottom: 0;
}

.articles-head-rail {
border-top: 2px solid var(--rule-strong);
  padding-top: 12px;
}

.articles-head-rail .reader-toolbar {
flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.articles-head-rail .reader-toolbar span {
padding-left: 0;
}

.articles-page .article-card > .article-deck {
grid-column: 2;
}

.articles-page .article-card > .article-deck {
grid-row: 3;
}

.articles-page .article-card .article-deck {
margin-bottom: 8px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2) !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.articles-page .article-card .article-deck {
color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 700;
}

.articles-page .article-card .article-labels {
display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.news-page .page-head {
border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--gutter);
}

.news-page .page-head h1 {
margin-bottom: 8px;
}

.news-reading-order {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--gutter);
}

.news-reading-order .signal-ledger-item {
border-bottom: 0;
  padding: 12px 0;
}

.news-reading-order p {
margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.news-layout {
display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.news-main-river,
.news-right-rail {
min-width: 0;
}

.news-right-rail {
border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
}

.news-rail-sticky {
position: sticky;
  top: 82px;
}

.news-page .brief-stage,
.news-page .news-radar-list,
.news-page .news-article-stage {
display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  padding-top: 0;
}

.news-page .brief-layout {
grid-template-columns: 1fr;
  gap: 0;
}

.news-page .brief-rail {
border-top: 0;
}

.news-page .brief-featured,
.news-page .radar-item {
border-top: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.news-page .brief-featured {
padding-top: 16px;
}

.news-page .brief-featured h3 {
font-size: 22px;
  line-height: 1.3;
}

.news-page .radar-item h3 {
font-size: 17px;
  line-height: 1.4;
}

.news-page .brief-featured h3,
.news-page .radar-item h3 {
overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.news-page .brief-featured.is-full > p,
.news-page .publication-card.is-full > p,
.news-page .radar-item.is-full p {
display: block;
  overflow: visible;
  margin-bottom: 8px;
  -webkit-line-clamp: unset;
  color: var(--ink-2) !important;
  font-size: 14px !important;
  line-height: 1.65;
}

.news-page .article-deck {
display: -webkit-box;
  overflow: hidden;
  margin-bottom: 8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--ink-2) !important;
  font-size: 14px !important;
  line-height: 1.6;
}

.news-page .radar-item {
display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.news-page .radar-item.is-hot,
.news-page .news-radar-list .radar-item.is-hot {
border-left: 0;
  padding-left: 0;
}

.news-page .radar-item .tag.verified {
color: var(--brand);
}

.news-page .radar-item-top {
display: grid;
  gap: 4px;
  align-items: start;
}

.news-page .radar-item-top {
justify-content: stretch;
}

.news-page .radar-copy {
min-width: 0;
}

.news-page .score {
min-width: 36px;
  height: 26px;
  border-color: var(--rule);
}

.news-right-rail .news-article-stage {
max-width: none;
}

.radar-page {
background: var(--paper);
}

.radar-page-head {
align-items: end;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--gutter);
}

.radar-page-head h1 {
margin-bottom: 8px;
  font-size: 30px;
  line-height: 1.25;
}

.radar-page .radar-status-strip {
border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.radar-page .radar-status-strip span {
color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.radar-layout {
display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.radar-stream-section,
.radar-right-rail {
min-width: 0;
}

.radar-page .radar-stream-section {
border-bottom: 0;
  padding: var(--gutter) 0;
}

.radar-page .radar-list {
display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.radar-page .radar-item {
display: grid;
  grid-template-columns: minmax(0, 156px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  background: transparent;
}

.radar-page .radar-item:hover h3 {
color: var(--brand);
}

.radar-page .radar-item.is-hot {
border-left: 0;
  padding-left: 0;
}

.radar-page .radar-item-top {
display: grid;
  gap: 8px;
  align-items: start;
  justify-content: stretch;
}

.radar-page .radar-copy {
min-width: 0;
}

.radar-page .radar-copy h3 {
margin-bottom: 4px;
  font-size: 17px;
  line-height: 1.4;
}

.radar-page .radar-copy p {
display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.radar-page .score {
min-width: 48px;
  height: 28px;
  border-color: var(--rule);
  color: var(--ink);
  background: var(--paper);
}

.radar-right-rail {
border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
  padding-top: var(--gutter);
}

.radar-rail-sticky {
position: sticky;
  top: 82px;
}

.radar-rail-block {
border-top: 2px solid var(--rule-strong);
  padding: 12px 0 var(--gutter);
}

.radar-rail-block + .radar-rail-block {
border-top: 1px solid var(--rule);
}

.radar-rail-block h2 {
font-size: 22px;
  line-height: 1.3;
}

.radar-rail-block p {
margin-bottom: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
}

.filter-bar {
border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}

.filter {
min-height: 32px;
  color: var(--ink-2);
  background: var(--paper);
  border-color: var(--rule);
  font-size: 12px;
}

.filter.active,
.filter:hover {
color: var(--brand);
  background: var(--paper-2);
  border-color: var(--brand);
}

.score {
display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--rule-strong);
  color: var(--paper);
  background: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
}

.score {
min-width: 38px;
  height: 30px;
  padding: 0 8px;
  color: var(--brand);
  background: var(--paper);
  border-color: var(--rule);
  font-size: 12px;
}

.home-main-river .home-article-stage {
display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  border-top: 1px solid var(--rule);
  padding-top: 0;
}

.tool-sample-metrics,
.ops-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-row strong,
.tool-hero-stat strong,
.ops-stat strong {
display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-stat strong {
font-family: var(--mono);
  font-size: 30px;
  line-height: 1;
}

.tools-axis-brief,
.community-intake,
.about-statement,
.about-layout {
display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}

.tools-axis-brief > div,
.community-form-panel,
.about-main-river,
.about-right-rail,
.about-rail-sticky,
.editor-roster,
.statement-lead,
.tool-hero-panel-block,
.tool-taxonomy-section,
.tool-workflow-section,
.tool-list-section {
min-width: 0;
}

.tools-axis-brief > div,
.community-form-panel,
.ops-panel,
.live-editor {
border-top: 2px solid var(--rule-strong);
  padding-top: 12px;
}

.tools-layout {
display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.tools-main-river,
.tools-right-rail,
.tools-rail-sticky,
.tools-index-section,
.tools-submit-note,
.tools-river-section {
min-width: 0;
}

.tools-page .tools-axis-brief {
grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.tools-page .tools-axis-brief > div {
border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}

.tools-river-section {
border-bottom: 0;
}

.tools-right-rail {
border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
}

.tools-rail-sticky {
position: sticky;
  top: 82px;
}

.tools-index-section,
.tools-submit-note {
border-top: 2px solid var(--rule-strong);
  padding-top: 12px;
}

.tools-submit-note {
margin-top: 32px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}

.tools-page .tool-type-index {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}

.community-page-head {
display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gutter);
  align-items: end;
  border-bottom: 1px solid var(--rule-strong);
}

.community-head-copy,
.community-main-river,
.community-right-rail,
.community-form-panel,
.community-principle,
.community-principle > div,
.community-intake-note {
min-width: 0;
}

.community-page-head h1 {
margin-bottom: 8px;
}

.community-page-head p:last-child {
margin-bottom: 0;
}

.community-head-actions {
display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.community-layout {
display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.community-principles {
display: grid;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

.community-principle {
display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding: 16px 0;
}

.community-principle:first-child {
border-top-color: var(--rule-strong);
}

.community-principle-meta {
display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.community-principle-meta span:last-child {
color: var(--brand);
  font-family: var(--sans);
  font-weight: 700;
}

.community-principle h2 {
margin-bottom: 4px;
  font-size: 22px;
  line-height: 1.3;
  white-space: nowrap;
}

.community-page .community-intake {
display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 32px;
  border-bottom: 1px solid var(--rule);
  padding: 32px 0;
}

.community-intake-note h2 {
margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.3;
  white-space: nowrap;
}

.community-intake-note > p:last-child {
margin-bottom: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
}

.community-rules {
display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.community-page .community-rule {
border-top: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.community-page .community-rule:last-child {
border-bottom: 0;
}

.community-page .community-rule p {
margin-bottom: 0;
}

.community-right-rail {
border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
  padding-top: var(--gutter);
}

.community-form-panel {
position: sticky;
  top: 82px;
  border-top: 2px solid var(--rule-strong);
  padding-top: 12px;
}

.community-form-panel h2 {
margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.3;
}

.community-form-panel form {
margin-top: 16px;
}

.community-form-grid {
grid-template-columns: 1fr;
  gap: 12px;
}

.community-form-grid textarea {
min-height: 156px;
}

.about-layout {
align-items: start;
  border-bottom: 0;
  padding: 32px 0 0;
}

.about-main-river,
.about-right-rail {
min-width: 0;
}

.about-main-river {
display: grid;
  gap: 32px;
}

.about-right-rail {
border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
}

.about-rail-sticky {
position: sticky;
  top: 82px;
}

.about-statement {
display: block;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 var(--gutter);
}

.statement-lead {
border-top: 2px solid var(--rule-strong);
  padding-top: 12px;
}

.statement-lead h2 {
font-size: 22px;
}

.process-line {
color: var(--ink) !important;
  font-weight: 700;
}

.statement-grid {
grid-template-columns: 1fr;
  gap: 0;
  margin-top: 16px;
}

.statement-grid > div {
display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: var(--gutter);
  align-items: baseline;
}

.statement-grid h2 {
margin-bottom: 0;
  font-size: 18px;
}

.statement-grid p {
margin-bottom: 0;
  font-size: 15px;
}

.ops-panel {
margin: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}

.ops-panel-head {
align-items: flex-start;
}

.ops-grid {
grid-template-columns: 1fr;
  margin-top: 12px;
}

.ops-stat {
display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
}

.ops-stat strong {
margin-top: 0;
  font-size: 20px;
}

.live-editor {
margin: var(--gutter) 0 0;
  border-bottom: 1px solid var(--rule);
  border-left: 0;
  padding-bottom: 16px;
  padding-left: 0;
}

.live-editor p {
margin-bottom: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.editor-roster {
border-bottom: 1px solid var(--rule);
  padding-bottom: var(--gutter);
}

.editor-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gutter);
  border-top: 1px solid var(--rule);
}

.editor-card {
display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 0;
  padding: 12px 0;
}

.editor-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.editor-board {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}

.editor-title {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

.editor-style {
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editor-recent {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.editor-recent li {
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-recent li::before {
  content: "·";
  margin-right: 4px;
  color: var(--brand);
}

.editor-current {
  color: var(--brand);
  font-size: 12px;
  line-height: 1.4;
}

.editor-card span {
color: var(--brand);
  font-family: var(--mono);
  font-size: 12px;
}

.detail-page,
.radar-detail-page {
width: min(980px, calc(100% - 48px));
}

.detail-page {
background: var(--paper);
  color: var(--ink);
}

.detail-page .kicker {
font-family: var(--mono);
  color: var(--brand);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}

.detail-page .article-meta {
font-family: var(--mono);
  color: var(--ink-3);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}

.article-detail {
display: grid;
  gap: var(--gutter);
  padding: 48px 0 var(--gutter);
}

.article-detail h1 {
font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.16;
  color: var(--ink);
  letter-spacing: 0;
  text-wrap: balance;
}

.article-meta {
display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-hero {
margin: 0;
}

.article-hero img,
.hero-fallback-card {
display: block;
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-hero figcaption {
margin-top: 8px;
  color: var(--ink-3);
  font-size: 12px;
}

.hero-fallback-card {
position: relative;
  display: grid;
  min-height: 260px;
  place-items: end start;
  padding: 32px;
  color: var(--ink);
}

.hero-fallback-lines {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--rule);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.hero-fallback-content {
position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 680px;
}

.hero-fallback-content strong {
display: block;
  font-size: 28px;
}

.article-body {
max-width: 720px;
  font-family: var(--serif);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.7;
}

.article-body p {
margin: 0 0 18px;
}

.article-body .article-lede {
color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.prose h2 {
margin: 32px 0 12px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  font-size: 22px;
}

.article-body h2 {
margin: 40px 0 14px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--ink);
}

.article-body blockquote {
margin: var(--gutter) 0;
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px 16px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

.detail-page .article-detail-footer {
max-width: 720px;
  border-top: 2px solid var(--rule-strong);
  padding-top: 16px;
}

.editor-signature-card,
.tool-category-footer-note {
max-width: 620px;
  border-left: 2px solid var(--rule-strong);
  padding-left: 16px;
}

.detail-page .editor-signature-card {
border-left: 0;
  padding: var(--gutter);
  background: var(--paper-2);
}

.detail-page .editor-signature-card span {
font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.detail-page .editor-signature-card strong {
display: block;
  margin: 8px 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.detail-page .editor-signature-card p {
margin: 0;
  color: var(--ink-2);
}

.ornament {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 48px 0;
  color: var(--ink-3);
}

.ornament::before,
.ornament::after {
content: "";
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--rule);
}

.ornament span {
font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.4em;
}

.grain::before {
content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(31, 29, 24, 0.05), transparent 45%),
    radial-gradient(circle at 88% 72%, rgba(31, 29, 24, 0.04), transparent 50%);
}

.grain > * {
position: relative; z-index: 1;
}

.ornament-band {
display: block;
  width: 100%;
  height: 40px;
  margin: 0 0 16px;
  color: var(--brand);
}

.detail-page .hero-fallback-lines {
stroke: var(--rule);
}

.detail-page .hero-fallback-card {
background: var(--paper-2);
  border-color: var(--rule);
}

.detail-page .hero-fallback-content strong {
font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}

.articles-page {
background: var(--paper);
  color: var(--ink);
}

.articles-page .article-card .article-deck {
font-family: var(--serif);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

.articles-page .magazine-head h1 {
font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}

.articles-page .article-card .ornament-band {
height: 22px;
  margin: 0 0 8px;
  opacity: 0.7;
}

.editor-signature-card.compact {
border-color: var(--risk);
}

.tool-hero-panel-map {
display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-map-node {
border: 1px solid var(--rule);
  padding: 4px 6px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
}

.tool-map-node.active {
color: var(--brand);
  border-color: var(--brand);
  background: var(--paper-2);
}

.tool-sample-card.is-featured {
grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--gutter);
  border-top: 2px solid var(--rule-strong);
}

.table-wrap {
overflow-x: auto;
  border-top: 1px solid var(--rule);
}

.data-table {
width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
border-bottom: 1px solid var(--rule);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.data-table th {
color: var(--ink-3);
  background: var(--paper-2);
  font-size: 11px;
}

.newsletter-band,
.inline-form,
.prose {
max-width: 760px;
}

.inline-form {
display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.inline-form input {
width: 100%;
  min-height: 40px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
}

.inline-form input:focus {
outline: 0;
  border-color: var(--brand);
}

.page-stack {
margin-top: var(--gutter);
}

.mobile-menu {
display: none;
}

@media (max-width: 1023px) {
  .home-hero,
  .masthead,
  .tool-category-hero,
  .community-hero,
  .community-page-head,
  .community-layout,
  .tools-layout,
  .tools-axis-brief,
  .about-layout,
  .community-intake,
  .lead-grid,
  .brief-layout,
  .content-grid,
  .news-layout,
  .radar-layout {
grid-template-columns: 1fr;
    gap: var(--gutter);
  }

  .edition-panel,
  .tool-hero-panel,
  .tool-sample-side,
  .tools-right-rail,
  .about-right-rail,
  .community-right-rail,
  .news-right-rail,
  .radar-right-rail {
border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 16px;
  }

  .news-rail-sticky,
  .tools-rail-sticky,
  .about-rail-sticky,
  .community-form-panel,
  .radar-rail-sticky {
position: static;
  }

  .radar-page .radar-list,
  .news-radar-list,
  .news-article-stage,
  .home-article-stage,
  .tool-sample-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-page .news-radar-list,
  .news-page .news-article-stage,
  .radar-page .radar-list {
grid-template-columns: 1fr;
  }

  .editor-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .header-inner,
  .page,
  .home-page,
  .tools-sample-page,
  .about-page,
  .detail-page,
  .radar-detail-page,
  .footer-inner {
width: min(100% - 32px, var(--max));
  }

  .header-inner {
grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 0;
  }

  .nav {
justify-content: flex-start;
    gap: 16px;
    width: 100%;
  }

  .nav a,
  .header-actions a {
min-height: 34px;
  }

  .header-actions {
display: none;
  }

  .home-hero,
  .masthead,
  .subpage-header,
  .page-head,
  .about-hero,
  .tool-category-hero,
  .community-hero,
  .community-page-head,
  .tools-axis-brief,
  .community-intake,
  .about-statement {
padding: var(--gutter) 0;
  }

  .about-layout {
padding-top: var(--gutter);
  }

  .home-hero h1,
  .about-hero h1,
  .page-head h1,
  .subpage-header h1,
  .tool-hero-copy h1,
  .community-hero h1,
  .article-detail h1 {
font-size: 24px;
    line-height: 1.2;
  }

  .home-title-block h1 {
overflow: visible;
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }

  .article-body h2,
  .prose h2,
  .statement-lead h2 {
font-size: 19px;
  }

  .brief-featured h3 {
font-size: 17px;
  }

  .article-detail h1,
  .radar-detail h1 {
font-size: 20px;
  }

  .masthead-copy,
  .about-anchor,
  .community-hero-copy,
  .tool-hero-summary,
  .page-head > p,
  .subpage-header p,
  .magazine-head p:last-child,
  .article-body {
font-size: 14px;
  }

  .radar-item,
  .radar-page .radar-item {
grid-template-columns: 1fr;
    gap: 8px;
  }

  .home-main-river .article-card > .article-deck,
  .home-main-river .article-card > p:not(.article-byline):not(.article-deck) {
grid-column: 2;
    grid-row: auto;
  }

  .tools-page .tools-axis-brief {
grid-template-columns: 1fr;
    gap: 16px;
  }

  .community-head-actions {
justify-content: flex-start;
  }

  .community-principle {
grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
  }

  .community-principle-meta {
flex-direction: row;
    gap: 8px;
  }

  .community-page .community-intake {
grid-template-columns: 1fr;
    gap: 16px;
  }

  .community-right-rail {
padding-left: 0;
  }

  .community-form-panel h2,
  .community-principle h2,
  .community-intake-note h2 {
white-space: normal;
  }

  .statement-grid > div,
  .editor-card {
grid-template-columns: 1fr;
    gap: 4px;
  }

  .tools-page .tool-type-index {
grid-template-columns: 1fr;
  }

  .news-reading-order {
grid-template-columns: 1fr;
  }

  .news-reading-order .signal-ledger-item,
  .news-reading-order .signal-ledger-item + .signal-ledger-item {
padding: 12px 0;
  }

  .radar-item h3,
  .radar-item p,
  .reader-toolbar span,
  .radar-status-strip span {
overflow-wrap: anywhere;
    word-break: break-word;
  }

  .radar-item h3 {
overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .news-page .radar-item {
grid-template-columns: 1fr;
  }

  .news-page .brief-featured h3,
  .news-page .radar-item h3 {
white-space: nowrap;
  }

  .articles-head {
grid-template-columns: 1fr;
  }

  .articles-head-rail {
padding-top: 16px;
  }

  .articles-page .article-card > .article-deck {
grid-column: 1;
    grid-row: auto;
  }

  .radar-page .radar-list,
  .news-radar-list,
  .news-article-stage,
  .home-article-stage,
  .about-statement,
  .statement-grid,
  .editor-grid,
  .tool-sample-grid,
  .tool-sample-card.is-featured,
  .tool-sample-metrics,
  .ops-grid {
grid-template-columns: 1fr;
  }

  .article-detail-header,
  .article-hero,
  .article-body,
  .article-detail-footer {
width: 100%;
    min-width: 0;
  }

  .footer-inner {
grid-template-columns: 1fr;
  }

  .subpage-header,
  .article-detail-footer,
  .tool-category-footer {
align-items: start;
    flex-direction: column;
  }
}