:root {
  --color-bg: #ffffff;
  --color-bg-alt: #F8FAFC;
  --color-text: #0F172A;
  --color-muted: #475569;
  --color-subtle: #94A3B8;
  --color-accent: #1D4ED8;
  --color-accent-hover: #1E3A8A;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-card: #ffffff;
  --color-priority-bg: #0F172A;
  --color-priority-text: #ffffff;
  --color-code-bg: #F1F5F9;

  /* 内容区宽度：基础 800px（中文 ~50 字/行），大屏渐进增强 */
  --max-width: 800px;
  --max-width-wide: 1080px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --radius-sm: 2px;
  --radius-md: 4px;
}

/* 大屏让长文内容更舒展（family-stories / topic-page / prose 都受益）*/
@media (min-width: 1280px) {
  :root { --max-width: 880px; }
}
@media (min-width: 1600px) {
  :root { --max-width: 920px; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

main a,
main code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

main pre,
main pre code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
h1 { font-size: 2.4rem; margin-top: 0; margin-bottom: 1rem; }
h2 { font-size: 1.3rem; margin-top: 2.5rem; margin-bottom: 0.8rem; letter-spacing: -0.015em; }
h3 { font-size: 1.05rem; margin-top: 2rem; letter-spacing: -0.01em; }

code {
  background: var(--color-code-bg);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--color-text);
}

/* Top bar */
.top-bar {
  background: var(--color-priority-bg);
  color: var(--color-priority-text);
  padding: 0.45rem 2rem;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}
.top-bar a { color: var(--color-priority-text); opacity: 0.75; }
.top-bar a:hover { opacity: 1; text-decoration: none; }

/* Site header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 2rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.site-header nav a {
  margin-left: 1.5rem;
  color: var(--color-text);
  font-size: 0.9rem;
}
.site-header nav a:hover { color: var(--color-accent); text-decoration: none; }

/* Site footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-top: 4rem;
}

/* Hero */
.hero {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hero-title {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 1.2rem;
  line-height: 1.15;
  margin-top: 0;
}
.hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 60ch;
  margin: 0 0 2rem 0;
  line-height: 1.6;
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-subtle);
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  text-transform: uppercase;
}
.hero-meta span { margin-right: 0.8rem; }
.hero-cta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.92rem;
  transition: all 0.12s;
  font-family: var(--font-sans);
}
.btn:hover { border-color: var(--color-text); text-decoration: none; }
.btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.btn-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

/* Section */
.section {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 2.5rem 2rem;
}
.section-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  margin-top: 0;
}

/* Pillar grid */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.8rem;
}
.pillar-card {
  display: block;
  padding: 1.4rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color 0.12s, background 0.12s;
}
.pillar-card:hover { text-decoration: none; border-color: var(--color-text); }
.pillar-card-priority {
  background: var(--color-priority-bg);
  color: var(--color-priority-text);
  border-color: var(--color-priority-bg);
}
.pillar-card-priority:hover { border-color: var(--color-accent); }
.pillar-card-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-subtle);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}
.pillar-card-priority .pillar-card-num { color: rgba(255,255,255,0.55); }
.pillar-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pillar-card-desc {
  font-size: 0.88rem;
  opacity: 0.85;
  margin: 0 0 0.8rem 0;
  line-height: 1.5;
}
.pillar-card-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pillar-card-priority .pillar-card-status {
  background: rgba(255,255,255,0.15);
  color: var(--color-priority-text);
}
.pillar-card:not(.pillar-card-priority) .pillar-card-status {
  background: var(--color-code-bg);
  color: var(--color-muted);
}

/* Crosscut grid */
.crosscut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.crosscut-card {
  display: block;
  padding: 1rem 1.2rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.crosscut-card:hover {
  border-color: var(--color-text);
  text-decoration: none;
  background: var(--color-bg);
}
.crosscut-card strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
}
.crosscut-card span { font-size: 0.82rem; color: var(--color-muted); }

/* Topic / entity page */
.topic-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 2rem;
}
.topic-page > section { margin-bottom: 1.5rem; }
.topic-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.topic-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.topic-subtitle {
  color: var(--color-muted);
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  line-height: 1.55;
}
.topic-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-top: 0.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-priority {
  background: var(--color-priority-bg);
  color: var(--color-priority-text);
}
.status-placeholder {
  background: var(--color-code-bg);
  color: var(--color-muted);
}
.topic-page ul, .method-page ul, .prose ul { padding-left: 1.4rem; }
.topic-page li, .method-page li, .prose li { margin-bottom: 0.4rem; }

/* Anchor card */
.anchor-card {
  border-left: 3px solid var(--color-accent);
  padding: 0.8rem 0 0.8rem 1.2rem;
  margin-bottom: 1rem;
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.anchor-card strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 600;
}
.anchor-card strong a { color: var(--color-text); }
.anchor-card strong a:hover { color: var(--color-accent); text-decoration: none; }
.anchor-card .anchor-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.anchor-card p {
  margin: 0.4rem 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
}

/* Variant cards (clause writing variants with risk levels) */
.variant-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.variant-card.risk-low { border-left-color: #10B981; }
.variant-card.risk-med { border-left-color: #F59E0B; }
.variant-card.risk-high { border-left-color: #DC2626; }
.variant-card .variant-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.variant-card .variant-text {
  font-family: var(--font-mono);
  font-size: 0.83rem;
  background: var(--color-code-bg);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  margin: 0.4rem 0;
  white-space: pre-wrap;
  color: var(--color-text);
  line-height: 1.5;
}
.variant-card .variant-note {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0.3rem 0 0;
}

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 1rem 0;
}
.data-table th, .data-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.data-table th {
  background: var(--color-bg-alt);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-border-strong);
  font-family: var(--font-mono);
}
.data-table tr:hover { background: var(--color-bg-alt); }
.data-table .col-key {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: nowrap;
  font-weight: 600;
}

.placeholder-notice {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
  border-top: 1px dashed var(--color-border);
  padding-top: 1rem;
  margin-top: 2rem;
  letter-spacing: 0.02em;
}
.last-updated {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-subtle);
  letter-spacing: 0.05em;
}

/* Method / About / Contribute */
.method-page, .prose {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 2rem;
}
.method-page blockquote, .prose blockquote, .topic-page blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.8rem 1rem;
  margin-left: 0;
  color: var(--color-muted);
  font-style: normal;
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ===== Topic hero (large striking) ===== */
.topic-hero {
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  color: #fff;
  padding: 4.5rem 2rem 5rem;
  position: relative;
  overflow: hidden;
}
.topic-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(29,78,216,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.topic-hero-inner { max-width: var(--max-width-wide); margin: 0 auto; position: relative; }
.topic-hero-eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; color: #94A3B8;
  letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 1rem 0;
}
.topic-hero-title {
  font-size: 4rem; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 1.5rem 0; line-height: 1.05; color: #fff;
}
.topic-hero-lede {
  font-size: 1.4rem; line-height: 1.55; color: #CBD5E1;
  max-width: 38ch; margin: 0 0 2rem 0; font-weight: 400;
}
.topic-hero-lede strong { color: #fff; font-weight: 600; }
.topic-hero-meta {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.75rem; color: #94A3B8;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.topic-hero-meta span { padding-left: 1rem; position: relative; }
.topic-hero-meta span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px; background: #475569;
}
.topic-hero-meta span:first-child { padding-left: 0; }
.topic-hero-meta span:first-child::before { display: none; }

/* ===== Section containers & headings ===== */
.container-narrow { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.container-wide { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 2rem; }
.panel { padding: 4rem 0; }
.panel-alt { background: var(--color-bg-alt); padding: 4rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-eyebrow {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-accent);
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.6rem 0; font-weight: 600;
}
.section-title-big {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -0.025em;
  margin: 0 0 0.8rem 0; line-height: 1.2;
}
.section-lede {
  font-size: 1.05rem; color: var(--color-muted);
  max-width: 60ch; line-height: 1.6; margin: 0 0 2rem 0;
}

/* ===== Explainer (60-second intro with diagram) ===== */
.explainer-grid {
  display: grid; grid-template-columns: minmax(300px, 1.1fr) 1fr;
  gap: 2.5rem; align-items: start; margin-top: 1rem;
}
.explainer-diagram {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1rem;
}
.explainer-diagram svg { width: 100%; height: auto; display: block; }
.explainer-text p { margin: 0 0 1rem 0; font-size: 1rem; line-height: 1.7; }

/* ===== Callouts ===== */
.callout {
  border-radius: var(--radius-md); padding: 0.9rem 1.1rem;
  margin: 1rem 0; border-left: 3px solid var(--color-border-strong);
  background: var(--color-bg-alt);
}
.callout p { margin: 0; font-size: 0.93rem; line-height: 1.6; }
.callout p + p { margin-top: 0.4rem; }
.callout-label {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--color-muted); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
}
.callout-key { border-left-color: var(--color-accent); background: #EFF6FF; }
.callout-key .callout-label { color: var(--color-accent); }
.callout-warning { border-left-color: #DC2626; background: #FEF2F2; }
.callout-warning .callout-label { color: #DC2626; }
.callout-info { border-left-color: var(--color-muted); background: var(--color-bg-alt); }

/* ===== Comparison table ===== */
.comparison-table-wrap {
  overflow-x: auto; margin-top: 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.comparison-table { margin: 0; min-width: 760px; }
.comparison-table .col-highlight {
  background: rgba(29,78,216,0.04); font-weight: 600;
  border-left: 2px solid var(--color-accent);
}
.comparison-table thead .col-highlight {
  background: var(--color-accent); color: #fff;
  border-left: 2px solid var(--color-accent);
}

/* ===== Risk map (large 6 cards) ===== */
.risk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.risk-card {
  display: block; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 6px;
  padding: 1.5rem 1.4rem 1.2rem; color: var(--color-text);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.risk-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-border-strong);
}
.risk-card:hover {
  text-decoration: none; border-color: var(--color-text);
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.07);
}
.risk-card-1::before { background: #DC2626; }
.risk-card-2::before { background: #EA580C; }
.risk-card-3::before { background: #D97706; }
.risk-card-4::before { background: #7C3AED; }
.risk-card-5::before { background: #0891B2; }
.risk-card-6::before { background: #475569; }
.risk-card-num {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-subtle);
  letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.3rem;
}
.risk-card-title {
  font-size: 1.18rem; font-weight: 700; margin: 0;
  letter-spacing: -0.015em; line-height: 1.3;
}
.risk-card-scenario {
  font-size: 0.92rem; color: var(--color-muted);
  line-height: 1.55; margin: 0.8rem 0 0.9rem 0;
}
.risk-card-list {
  list-style: none; padding: 0; margin: 0 0 1rem 0;
  font-size: 0.85rem; border-top: 1px solid var(--color-border); padding-top: 0.8rem;
}
.risk-card-list li {
  margin-bottom: 0.4rem; padding-left: 1rem;
  position: relative; color: var(--color-muted); line-height: 1.5;
}
.risk-card-list li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--color-subtle); font-family: var(--font-mono);
}
.risk-card-list li strong { color: var(--color-text); font-weight: 600; }
.risk-card-cta {
  display: inline-block; font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--color-accent);
  font-weight: 600; letter-spacing: 0.05em;
}
.risk-card:hover .risk-card-cta { text-decoration: underline; }

/* ===== Timeline (setup process) ===== */
.timeline-wrap {
  overflow-x: auto; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg);
  padding: 1rem 0.5rem; margin-top: 1rem;
}
.timeline-wrap svg { display: block; min-width: 1100px; height: auto; }

/* ===== Trust deed anatomy ===== */
.deed-anatomy-wrap {
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 2.5rem; align-items: start; margin-top: 1rem;
}
.deed-svg svg { width: 100%; height: auto; display: block; }
.legend h3 {
  font-size: 0.95rem; font-weight: 600; margin: 1.2rem 0 0.5rem;
  display: flex; align-items: center;
}
.legend h3:first-child { margin-top: 0; }
.legend p {
  font-size: 0.9rem; color: var(--color-muted);
  margin: 0 0 0.5rem 0; line-height: 1.55;
}
.legend p strong { color: var(--color-text); font-weight: 600; }
.risk-key {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 0.5rem; vertical-align: middle;
}
.risk-key-low { background: #10B981; }
.risk-key-med { background: #F59E0B; }
.risk-key-high { background: #DC2626; }

/* ===== Case evidence list ===== */
.case-list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  border-top: 1px solid var(--color-border);
}
.case-list li {
  display: flex; flex-direction: column;
  padding: 0.9rem 0; border-bottom: 1px solid var(--color-border);
  margin: 0;
}
.case-list li a {
  font-weight: 500; font-size: 0.95rem;
  margin-bottom: 0.25rem; color: var(--color-text);
}
.case-list li a strong { font-weight: 700; color: var(--color-text); }
.case-list li a:hover, .case-list li a:hover strong { color: var(--color-accent); text-decoration: none; }
.case-meta {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--color-muted); letter-spacing: 0.02em;
}

/* ===== Architecture page (layered structure) ===== */
.architecture-svg-wrap {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1rem;
  margin-top: 1rem;
  overflow-x: auto;
}
.architecture-svg-wrap svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }

.layer-list { display: grid; gap: 1rem; margin-top: 1rem; }
.layer-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.2rem;
  padding: 1.3rem 1.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  align-items: start;
}
.layer-num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-bg);
  background: var(--color-priority-bg);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 0.5rem 0;
  letter-spacing: 0.05em;
}
.layer-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.01em;
}
.layer-role { font-size: 0.92rem; color: var(--color-muted); margin: 0 0 0.6rem 0; line-height: 1.6; }
.layer-risk {
  font-size: 0.88rem; color: var(--color-text); margin: 0;
  padding: 0.6rem 0.8rem;
  background: #FEF2F2;
  border-left: 2px solid #DC2626;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.55;
}
.layer-risk strong { color: #DC2626; font-weight: 600; }

.pitfall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.pitfall-card {
  padding: 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-top: 3px solid #DC2626;
}
.pitfall-card .pitfall-tag {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--color-muted); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 0.5rem; display: block;
}
.pitfall-card h4 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem 0; }
.pitfall-card p { font-size: 0.88rem; color: var(--color-muted); margin: 0; line-height: 1.55; }

/* ===== Reading list ===== */
.reading-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.reading-list li { border-bottom: 1px solid var(--color-border); padding: 0.65rem 0; }
.reading-list li:last-child { border-bottom: 0; }
.reading-list a { font-size: 0.97rem; font-weight: 500; }

@media (max-width: 768px) {
  .topic-hero { padding: 3rem 1.5rem 4rem; }
  .topic-hero-title { font-size: 2.6rem; }
  .topic-hero-lede { font-size: 1.15rem; }
  .explainer-grid { grid-template-columns: 1fr; }
  .deed-anatomy-wrap { grid-template-columns: 1fr; }
  .section-title-big { font-size: 1.6rem; }
  .panel, .panel-alt { padding: 2.5rem 0; }
  .container-wide, .container-narrow { padding: 0 1rem; }
}

@media (max-width: 600px) {
  .hero-title { font-size: 2rem; }
  .site-header { padding: 0.7rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .site-header nav a { margin-left: 0; margin-right: 1rem; }
  .top-bar { padding: 0.4rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
  .section, .topic-page, .method-page, .prose { padding: 1.5rem 1rem; }
  .hero { padding: 2rem 1rem; }
}


/* ===== v0.5 decision-oriented components ===== */
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem 0;
}
.hero-v05 {
  padding-top: 5rem;
  padding-bottom: 4rem;
}
.section-tight { padding-top: 1.5rem; }
.section-alt {
  max-width: none;
  background: var(--color-bg-alt);
}
.section-alt > .section-title,
.section-alt > .feature-grid,
.section-alt > .crosscut-grid {
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto;
}
.section-more {
  margin-top: 1rem;
  font-weight: 500;
}
.situation-grid,
.feature-grid,
.why-grid,
.scenario-list,
.due-grid,
.redflag-grid,
.contributor-grid,
.principle-grid {
  display: grid;
  gap: 0.9rem;
}
.situation-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.situation-card {
  display: block;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  background: var(--color-card);
}
.situation-card:hover {
  text-decoration: none;
  border-color: var(--color-text);
}
.situation-card span,
.feature-kicker,
.scenario-num,
.question-group-label,
.due-num,
.contributor-role,
.evidence-label,
.decision-strip-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.situation-card span {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--color-accent);
  font-weight: 700;
}
.situation-card strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.situation-card p,
.feature-card p,
.why-grid p,
.scenario-card p,
.due-card li,
.question-card p,
.contributor-card p,
.contributor-card dd {
  color: var(--color-muted);
  line-height: 1.6;
}
.feature-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.feature-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 1.5rem;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
}
.feature-card:hover {
  text-decoration: none;
  border-color: var(--color-text);
}
.feature-card h3 {
  margin-top: 0.7rem;
  font-size: 1.25rem;
}
.feature-card-dark {
  background: var(--color-priority-bg);
  color: var(--color-priority-text);
  border-color: var(--color-priority-bg);
}
.feature-card-dark p,
.feature-card-dark .feature-kicker {
  color: rgba(255,255,255,0.72);
}
.feature-cta {
  margin-top: auto;
  font-weight: 600;
  color: var(--color-accent);
}
.feature-card-dark .feature-cta {
  color: white;
}
.why-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.why-grid h3 {
  margin-top: 0;
}
.page-wide {
  max-width: 980px;
}
.evidence-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  padding: 1rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 1.5rem 0 2rem;
}
.evidence-card div {
  padding: 0.2rem 0;
}
.evidence-card strong {
  display: block;
  font-size: 0.9rem;
  margin-top: 0.25rem;
  color: var(--color-text);
}
.scenario-list {
  margin-top: 1rem;
}
.scenario-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  background: var(--color-bg);
  scroll-margin-top: 90px;
}
.scenario-card h2 {
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
}
.scenario-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.2rem;
  padding-top: 0.8rem;
  margin-top: 0.8rem;
  border-top: 1px solid var(--color-border);
}
.scenario-columns h3 {
  margin-top: 0;
  font-size: 0.95rem;
}
.scenario-columns ul {
  margin-bottom: 0;
}
.question-group {
  margin-top: 2.5rem;
}
.question-group > h2 {
  margin-top: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
}
.question-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.2rem 1.2rem 4rem;
  margin-bottom: 0.9rem;
  background: var(--color-card);
}
.question-num {
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--color-priority-bg);
  color: var(--color-priority-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.question-card h3 {
  margin-top: 0;
  font-size: 1.05rem;
}
.question-links {
  font-size: 0.88rem;
  margin-bottom: 0;
}
.due-grid {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.due-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.3rem;
  background: var(--color-card);
}
.due-card h2 {
  margin-top: 0.4rem;
  font-size: 1.15rem;
}
.due-card ul {
  padding-left: 1.1rem;
}
.redflag-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.redflag-card {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #7F1D1D;
  border-radius: var(--radius-md);
  padding: 1rem;
  font-weight: 600;
}
.contributor-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.contributor-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  background: var(--color-card);
}
.contributor-card h2 {
  margin-top: 0.4rem;
}
.contributor-card dl {
  margin: 1rem 0 0;
}
.contributor-card dt {
  font-weight: 700;
  margin-top: 0.8rem;
}
.contributor-card dd {
  margin-left: 0;
  margin-top: 0.2rem;
}
.contributor-card-empty {
  background: var(--color-bg-alt);
}
.principle-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: 1rem 0 1.5rem;
}
.principle-grid div {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
}
.decision-strip {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0.8rem 0;
}
.decision-strip .container-wide {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}
.decision-strip a {
  font-weight: 600;
}
.comparison-table-wrap {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .scenario-columns { grid-template-columns: 1fr; }
  .question-card { padding-left: 1.2rem; padding-top: 3.8rem; }
  .question-num { top: 1rem; }
  .due-grid { grid-template-columns: 1fr; }
}


/* ===== Disabled link (placeholder marking, retained from v0.6 engineering) ===== */
.disabled-link, a.disabled-link {
  color: var(--color-muted);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
  text-decoration: line-through;
}


/* ===== v1.0-ready mobile fixes ===== */
/* Conservative additions to fix narrow-viewport readability issues
   surfaced by static audit at 375 / 414 / 768px. CSS-only, no design
   change, no new dependencies. Override-only — does not touch existing
   rules. */

/* Long URLs, case citations and English statute names inside cards
   can overflow narrow viewports. Allow word breaking inside the
   typical containers for these strings. */
.anchor-card strong,
.anchor-card .anchor-meta,
.anchor-card a,
.case-list li a,
.case-meta,
.reading-list a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Generic safety net: any standalone .data-table that is not wrapped
   in .comparison-table-wrap can still scroll horizontally on narrow
   viewports without forcing a page-level horizontal scroll. */
.data-table {
  display: table;
}

@media (max-width: 768px) {
  /* Trust deed legend column stacks under the SVG; ensure SVG itself
     never forces page-level horizontal scroll. */
  .deed-svg { overflow-x: auto; }

  /* Architecture layered cards: keep the 60px num column but tighten
     gap so the title doesn't wrap awkwardly on iPad portrait. */
  .layer-card {
    grid-template-columns: 48px 1fr;
    gap: 0.9rem;
    padding: 1.1rem 1.1rem;
  }
}

@media (max-width: 600px) {
  /* Site header nav: with 8 items at ~370px width, ensure nav items
     wrap cleanly and that the gap between rows is visible. The
     existing rule already sets margin-left:0; margin-right:1rem and
     the parent has flex-wrap:wrap — we only add row spacing. */
  .site-header nav {
    gap: 0.4rem 0.2rem;
    width: 100%;
  }
  .site-header nav a {
    font-size: 0.88rem;
    margin-right: 0.9rem;
    line-height: 1.8;
  }

  /* Top bar: tighten font on small screens to keep both items on
     one row when possible (still wraps if not). */
  .top-bar { font-size: 0.68rem; }

  /* Risk grid: minmax(330px, 1fr) overflows or hugs the edge on
     375px viewports once 1rem container padding is subtracted.
     Force single column under 600px. */
  .risk-grid { grid-template-columns: 1fr; }

  /* Pitfall / contributor / feature / pillar / situation /
     redflag / why / principle grids are already auto-fill and
     collapse to single column at 375px because their min is below
     the available width — no override needed. */

  /* Topic hero title: 2.6rem at <768 is still large. Reduce on
     phones for better balance. */
  .topic-hero-title { font-size: 2rem; }
  .topic-hero-lede { font-size: 1.05rem; }
  .topic-hero { padding: 2.5rem 1rem 3rem; }

  /* Section title big: was 1.6rem at <768; nudge down for phones. */
  .section-title-big { font-size: 1.4rem; }

  /* Hero CTA buttons: tighten padding and ensure full-row wrap. */
  .hero-cta { gap: 0.5rem; }
  .btn { padding: 0.55rem 1rem; font-size: 0.88rem; }

  /* Evidence card: at narrow widths force single column for
     readability of the label/value pairs. minmax(180px,1fr) usually
     resolves to 1 column already, but lock it in. */
  .evidence-card { grid-template-columns: 1fr; gap: 0.5rem; }

  /* Variant clause text blocks: the pre-wrap monospace text can run
     long; allow word break for very long English clause text. */
  .variant-card .variant-text { word-break: break-word; }

  /* Comparison table wrapper: hint horizontal scroll affordance
     with a subtle inner shadow on narrow viewports. */
  .comparison-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  /* Decision strip: stack vertically on phones for tappable links. */
  .decision-strip .container-wide {
    gap: 0.5rem 1rem;
  }

  /* Question card numbered badge: already adjusted at <768. Keep
     padding sane on very narrow phones so card content doesn't
     touch the edge. */
  .question-card { padding: 3.6rem 1rem 1rem 1rem; }
  .question-num { left: 1rem; top: 0.9rem; }
}

@media (max-width: 380px) {
  /* iPhone SE / small Android. Final readability pass. */
  .hero-title { font-size: 1.7rem; }
  .topic-hero-title { font-size: 1.7rem; }
  .topic-hero-lede { font-size: 1rem; }
  .section-title-big { font-size: 1.3rem; }
  /* Brand + nav row already stacks at <600. Nothing else to do. */
}

/* ------------------------------------------------------------------
   Task 06 · scenario/index user-entry primary cards + disabled cards
   + group sections + reading path strips
   ------------------------------------------------------------------ */

.scenario-primary-entries { margin-top: 2rem; margin-bottom: 2.5rem; }
.scenario-primary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.scenario-primary-card {
  display: block;
  padding: 1.25rem 1.4rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 0.6rem;
  background: #EFF6FF;
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scenario-primary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.15);
  text-decoration: none;
  color: var(--color-text);
}
.scenario-primary-card .scenario-card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.scenario-primary-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-text);
}
.scenario-primary-card p {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.scenario-primary-card .scenario-card-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.scenario-group { margin-top: 2.5rem; }
.scenario-group > h2 {
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}

.scenario-card-disabled {
  opacity: 0.7;
  background: var(--color-bg-alt);
  border-style: dashed;
}
.scenario-card-disabled h2 { color: var(--color-muted); }
.scenario-card-disabled .scenario-card-meta {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scenario-paths { margin-top: 2.5rem; }
.path-strip {
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  padding: 0.85rem 1.1rem;
  margin: 0.85rem 0;
  border-radius: 0 0.4rem 0.4rem 0;
}
.path-strip h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--color-accent);
}
.path-strip p { margin: 0; font-size: 0.9rem; line-height: 1.7; }

@media (max-width: 760px) {
  .scenario-primary-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Task 07 · homepage Phase 1 main line + FAQ entries
   ------------------------------------------------------------------ */

.phase-card {
  display: block;
  padding: 2rem 2.2rem;
  border: 2px solid var(--color-accent);
  border-radius: 0.7rem;
  background: linear-gradient(135deg, #1D4ED8 0%, #1E3A8A 100%);
  color: #fff;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.phase-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.25);
  text-decoration: none;
  color: #fff;
}
.phase-card-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.6rem;
}
.phase-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.7rem;
  color: #fff;
}
.phase-card-desc {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  max-width: 60ch;
}
.phase-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}
.phase-card-links span::before { content: "· "; color: rgba(255,255,255,0.5); }
.phase-card-links span:first-child::before { content: ""; }

.phase-card-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 0.4rem;
  font-size: 0.92rem;
}

.faq-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.7rem;
}
.faq-entry {
  display: block;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.faq-entry:hover {
  border-color: var(--color-accent);
  background: #EFF6FF;
  color: var(--color-accent);
  text-decoration: none;
}

@media (max-width: 760px) {
  .phase-card { padding: 1.4rem 1.4rem; }
  .phase-card h3 { font-size: 1.35rem; }
  .phase-card-desc { font-size: 0.95rem; }
}

/* ------------------------------------------------------------------
   Task 08 · sitewide breadcrumb
   ------------------------------------------------------------------ */
.breadcrumb {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-size: 0.82rem;
  color: var(--color-muted);
}
.breadcrumb-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0.65rem 2rem;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: none; }
.breadcrumb > .breadcrumb-inner > span:last-child { color: var(--color-text); }
@media (max-width: 600px) {
  .breadcrumb-inner { padding: 0.55rem 1.2rem; font-size: 0.78rem; }
}

/* ------------------------------------------------------------------
   Task 09 · sitewide footer 4-column secondary navigation
   ------------------------------------------------------------------ */
.site-footer-nav {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding: 2.5rem 2rem 1.5rem;
  text-align: left;
  margin-top: 3rem;
}
.footer-grid {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}
.footer-col h3 {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.7rem;
  font-weight: 600;
}
.footer-col a {
  display: block;
  color: var(--color-text);
  font-size: 0.88rem;
  margin: 0.3rem 0;
  text-decoration: none;
  line-height: 1.45;
}
.footer-col a:hover {
  color: var(--color-accent);
  text-decoration: none;
}
.footer-bottom {
  max-width: var(--max-width-wide);
  margin: 1.8rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}
.footer-bottom p { margin: 0.25rem 0; }
.footer-bottom a { color: var(--color-muted); }
.footer-bottom a:hover { color: var(--color-accent); }
.footer-build {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.6rem !important;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer-nav { padding: 2rem 1.4rem 1.2rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Homepage v1.1 · Knowledge Base positioning · 8 sections
   - hero supporting line
   - why-grid (Section 2)
   - entity-grid (Section 3 + 5, supports 5-col and 8-col)
   - contribute-grid (Section 6)
   - trust-boundary-list (Section 8)
   ------------------------------------------------------------------ */

.hero-supporting {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-top: -0.6rem;
  margin-bottom: 1.2rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

.hero-phase1-hint {
  font-size: 0.92rem;
  color: var(--color-muted);
  margin-top: -0.6rem;
  margin-bottom: 1.6rem;
  padding: 0.65rem 0.9rem;
  background: rgba(29, 78, 216, 0.06);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 0.4rem 0.4rem 0;
  max-width: 70ch;
  line-height: 1.55;
}
.hero-phase1-hint a {
  font-weight: 600;
  color: var(--color-accent);
}

.why-grid,
.contribute-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.why-card,
.contribute-card {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-bg-alt);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.why-card:hover,
.contribute-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.why-card-num,
.contribute-card-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.why-card h3,
.contribute-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--color-text);
}
.why-card p,
.contribute-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.entity-grid-eight {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.entity-card {
  display: block;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.entity-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--color-text);
}
.entity-card-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.entity-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-text);
}
.entity-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.trust-boundary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 70ch;
}
.trust-boundary-list li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  position: relative;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.7;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.trust-boundary-list li:last-child { border-bottom: none; }
.trust-boundary-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0.7rem;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
}
.trust-boundary-list li strong { color: var(--color-text); }

@media (max-width: 760px) {
  .why-grid,
  .contribute-grid { grid-template-columns: 1fr; }
  .entity-grid-eight { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .entity-grid-eight { grid-template-columns: 1fr; }
}

/* Task 21 · Citation Summary block */
.citation-summary {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  padding: 1rem 1.25rem;
  margin: 1.2rem 0 1.6rem;
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.92rem;
}
.citation-summary-header {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.citation-summary-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
.citation-summary-list dt {
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.citation-summary-list dd {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .citation-summary-list { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .citation-summary-list dt { margin-top: 0.4rem; }
}

/* Tool · jurisdiction-comparison v0.2 · cell subtitle (e.g., "South Dakota / Nevada") */
.cell-subtitle {
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0.85;
}

/* Principal letter section · about page */
.principal-letter {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
  padding: 1.6rem 2rem;
  margin: 1.8rem 0 2.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
}
.principal-letter h2 {
  margin-top: 0;
  color: var(--color-accent);
}
.principal-letter h3 {
  margin-top: 1.6rem;
  font-size: 1.05rem;
}
.principal-letter .signature {
  margin-top: 1.8rem;
  font-style: italic;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  text-align: right;
  border-top: 1px solid var(--color-border);
  padding-top: 0.8rem;
}

/* Hero byline */
.hero-byline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--color-border);
}
.hero-byline a {
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.hero-byline a:hover { color: var(--color-accent); }

/* ------------------------------------------------------------------
   Homepage v2.0 · Six-domain reframe (cross-border special panel +
   pillar-six color-stripe deck + case panel)
   ------------------------------------------------------------------ */

/* Cross-border special — orange gradient phase-card variant.
   Distinct from Phase 1 (blue) so the two flagship modules sit side
   by side without color collision. */
.phase-card-special {
  background: linear-gradient(135deg, #EA580C 0%, #B45309 100%);
  border-color: #EA580C;
}
.phase-card-special:hover {
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.25);
  border-color: #B45309;
}
.phase-card-disclaimer {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 0.7rem;
  font-style: italic;
  line-height: 1.55;
  max-width: 60ch;
}

/* Case panel module — section-level emphasis without the phase-card
   visual weight, since it lives further down the page. */
.case-panel-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.case-panel-lead {
  background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 100%);
  color: #fff;
  border: 1px solid #4C1D95;
}
.case-panel-lead .entity-card-num,
.case-panel-lead p { color: rgba(255, 255, 255, 0.88); }
.case-panel-lead h3 { color: #fff; }
.case-panel-lead:hover {
  border-color: #6D28D9;
  color: #fff;
  box-shadow: 0 6px 20px rgba(76, 29, 149, 0.25);
}
@media (max-width: 980px) {
  .case-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .case-panel-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Homepage v1.2 · Visual rebalance after Sprint
   - hero subtle radial gradient background (still feels professional)
   - entity-card-special / entity-card-story / entity-card-knowledge
     accent stripes & left borders
   - pillar-grid-six (六大主题柱) with distinct colored top stripes
   ------------------------------------------------------------------ */

/* Hero with restrained background gradient. Keep type & contrast
   identical to before — only adds depth on the panel. */
.hero-decorated {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(29, 78, 216, 0.07) 0%, transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(124, 58, 237, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #FAFBFE 0%, #FFFFFF 70%);
  border-bottom: 1px solid var(--color-border);
}

/* Entity card · top accent stripes for the 4 重点专题 cards */
.entity-card-stripe {
  position: relative;
  overflow: hidden;
  padding-top: 1.45rem;
}
.entity-card-stripe::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-border-strong);
}
.entity-card-stripe-1::before { background: #1D4ED8; }
.entity-card-stripe-2::before { background: #EA580C; }
.entity-card-stripe-3::before { background: #7C3AED; }
.entity-card-stripe-4::before { background: #0891B2; }
.entity-card-stripe-5::before { background: #DC2626; }
.entity-card-stripe-6::before { background: #475569; }

/* Story cards (合成案例) · left border accents instead of top */
.entity-card-story {
  border-left: 3px solid var(--color-border-strong);
  padding-left: 1.25rem;
}
.entity-card-story-1 { border-left-color: #DC2626; }
.entity-card-story-2 { border-left-color: #EA580C; }
.entity-card-story-3 { border-left-color: #7C3AED; }
.entity-card-story-4 { border-left-color: #0891B2; }

/* Knowledge entity cards · subtle category color on the num label */
.entity-card-knowledge .entity-card-num {
  color: var(--color-accent);
  font-weight: 600;
}
.entity-card-knowledge:hover .entity-card-num { color: var(--color-accent-hover); }

/* 六大主题柱 · compact quick-bar (replaces full 6-card grid).
   1 row of 6 chip-style links with color swatches; sits between Hero
   and Section 2 so 6 柱 is visible at first glance without repeating
   the deep entry cards in Section 2. */
.pillar-strip {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0.7rem 0;
}
.pillar-strip-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.4rem;
  font-size: 0.9rem;
}
.pillar-strip-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-right: 0.85rem;
  margin-right: 0.25rem;
  border-right: 1px solid var(--color-border-strong);
  font-weight: 600;
  white-space: nowrap;
}
.pillar-strip-item {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 0.35rem;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.pillar-strip-item::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 0.45rem;
  background: var(--color-border-strong);
  flex-shrink: 0;
}
.pillar-strip-item:hover {
  background: #fff;
  border-color: var(--color-border-strong);
  color: var(--color-accent);
  text-decoration: none;
}
.pillar-strip-item.is-priority {
  font-weight: 600;
  background: rgba(29, 78, 216, 0.08);
  color: var(--color-accent);
}
.pillar-strip-item.is-priority::after {
  content: "★";
  margin-left: 0.35rem;
  color: var(--color-accent);
  font-size: 0.78rem;
}
.pillar-strip-1::before { background: #1D4ED8; }
.pillar-strip-2::before { background: #DC2626; }
.pillar-strip-3::before { background: #EA580C; }
.pillar-strip-4::before { background: #7C3AED; }
.pillar-strip-5::before { background: #0891B2; }
.pillar-strip-6::before { background: #475569; }
.pillar-strip-tail {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--color-muted);
  font-style: italic;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .pillar-strip-inner { padding: 0 1.5rem; gap: 0.35rem 0.3rem; }
  .pillar-strip-tail { width: 100%; margin-left: 0; margin-top: 0.3rem; text-align: left; }
}
@media (max-width: 600px) {
  .pillar-strip { padding: 0.6rem 0; }
  .pillar-strip-inner { padding: 0 1rem; }
  .pillar-strip-label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 0.4rem 0;
    margin-bottom: 0.25rem;
  }
  .pillar-strip-item { padding: 0.28rem 0.5rem; font-size: 0.84rem; }
}

/* 六大主题柱 · pillar grid (distinct from old .pillar-grid which used
   different markup). 2 rows × 3 cols on desktop, stacks on mobile. */
.pillar-grid-six {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.pillar-six-card {
  position: relative;
  display: block;
  padding: 1.4rem 1.5rem 1.3rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pillar-six-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-border-strong);
}
.pillar-six-card:hover {
  border-color: var(--color-text);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--color-text);
}
.pillar-six-card-1::before { background: #1D4ED8; }
.pillar-six-card-2::before { background: #DC2626; }
.pillar-six-card-3::before { background: #EA580C; }
.pillar-six-card-4::before { background: #7C3AED; }
.pillar-six-card-5::before { background: #0891B2; }
.pillar-six-card-6::before { background: #475569; }

.pillar-six-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.4rem;
  margin-bottom: 0.55rem;
}
.pillar-six-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.pillar-six-card p {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.pillar-six-meta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pillar-six-card-1 .pillar-six-meta {
  background: rgba(29, 78, 216, 0.08);
  color: var(--color-accent);
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

/* Section title · add subtle accent dot on the left of the title text */
.section-title-accent::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-right: 0.55rem;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

@media (max-width: 760px) {
  .pillar-grid-six { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 980px) {
  .pillar-grid-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Readability Batch 1A · evidence-drawer + reader-intro */
.evidence-drawer {
  margin: 1.2rem 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background: var(--color-bg-soft, #f8fafc);
  padding: 0.5rem 1rem;
}
.evidence-drawer > summary {
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--color-muted, #64748b);
  padding: 0.4rem 0;
  font-weight: 500;
}
.evidence-drawer[open] > summary {
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.reader-intro .reader-intro-disclaimer {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 0.88rem;
  color: var(--color-muted, #64748b);
}

/* ====================================================================
   Batch 5 · Reader Journey Upgrade — new components
   added 2026-05-18 · purely additive · respects mobile breakpoints
   ==================================================================== */

/* --- status-ribbon (top of manual-review pages) ----------------------- */
.status-ribbon {
  display: block;
  margin: 0 0 1.2rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.92rem;
  line-height: 1.55;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #7c2d12;
}
.status-ribbon-pending {
  background: #fff7ed;
  border-color: #fdba74;
  color: #7c2d12;
}
.status-ribbon-pending::before {
  content: "⏳ ";
  font-weight: 600;
  margin-right: 0.2rem;
}
.status-ribbon strong { font-weight: 600; }

/* --- quick-read (3-minute summary) ----------------------------------- */
.quick-read {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid #2563eb;
  background: #eff6ff;
  border-radius: 0 6px 6px 0;
}
.quick-read .quick-read-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e40af;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.quick-read > p { margin: 0.4rem 0; }
.quick-read > ul,
.quick-read > ol { margin: 0.4rem 0 0.4rem 1.2rem; }
.quick-read > ul li,
.quick-read > ol li { margin: 0.2rem 0; }

/* --- reader-path-card (persona-based entry) -------------------------- */
.reader-paths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}
.reader-path-card {
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}
.reader-path-card:hover { border-color: #94a3b8; }
.reader-path-card .reader-path-persona {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b21a8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.reader-path-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-text, #0f172a);
}
.reader-path-card ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
.reader-path-card li { margin: 0.25rem 0; }

/* --- page-toc (mini table of contents) ------------------------------- */
.page-toc {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--color-bg-alt, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.9rem;
}
.page-toc .page-toc-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.page-toc ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 1;
}
.page-toc li { margin: 0.18rem 0; }
@media (min-width: 720px) {
  .page-toc ol { columns: 2; column-gap: 1.4rem; }
}

/* --- next-reading (recommended next pages) --------------------------- */
.next-reading {
  margin: 2rem 0 1rem;
  padding: 1rem 1.2rem;
  background: #f0fdf4;
  border-left: 3px solid #16a34a;
  border-radius: 0 6px 6px 0;
}
.next-reading .next-reading-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #166534;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.next-reading ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.94rem;
}
.next-reading li { margin: 0.28rem 0; }
.next-reading li .next-reading-reason {
  display: block;
  font-size: 0.84rem;
  color: var(--color-muted, #64748b);
  margin-top: 0.1rem;
}

/* --- decision-grid (low/mid/high write-style comparison) ------------- */
.decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0;
}
.decision-grid-cell {
  padding: 0.9rem 1rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
}
.decision-grid-cell.dg-low    { border-left: 3px solid #16a34a; }
.decision-grid-cell.dg-mid    { border-left: 3px solid #ca8a04; }
.decision-grid-cell.dg-high   { border-left: 3px solid #dc2626; }
.decision-grid-cell .dg-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.dg-low   .dg-label { color: #166534; }
.dg-mid   .dg-label { color: #854d0e; }
.dg-high  .dg-label { color: #991b1b; }

/* --- term-chip (inline glossary chip) -------------------------------- */
.term-chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  margin: 0 0.1rem;
  font-size: 0.85em;
  background: #ede9fe;
  color: #6b21a8;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid #ddd6fe;
}
.term-chip:hover { background: #ddd6fe; }

/* --- topic-hero full-bleed safety (when inside .topic-page narrow container) */
.topic-page > .topic-hero,
main.topic-page > .topic-hero {
  /* allow hero to break out of narrow container */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
@media (max-width: 480px) {
  .topic-page > .topic-hero,
  main.topic-page > .topic-hero {
    margin-left: -1rem;
    margin-right: -1rem;
    width: auto;
  }
}

/* --- responsive: tighten on mobile ---------------------------------- */
@media (max-width: 480px) {
  .status-ribbon { font-size: 0.86rem; padding: 0.5rem 0.8rem; }
  .quick-read { padding: 0.8rem 1rem; }
  .reader-paths-grid { gap: 0.7rem; }
  .reader-path-card { padding: 0.8rem 0.9rem; }
  .page-toc { font-size: 0.85rem; padding: 0.7rem 0.9rem; }
  .page-toc ol { columns: 1; }
  .next-reading { padding: 0.8rem 1rem; }
}

/* --- visual downgrade for status-ribbon after reader-intro ------------ */
.reader-intro + .status-ribbon-pending {
  margin-top: 0.6rem;
  background: #fef9c3;
  border-color: #facc15;
  color: #713f12;
  font-size: 0.88rem;
}
.reader-intro + .status-ribbon-pending::before {
  content: "ℹ️ ";
  font-weight: 600;
  margin-right: 0.15rem;
}


/* --- page-helps callout (Batch 5B index-page reader entry) ----------- */
.callout.page-helps {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  padding: 1rem 1.2rem;
  margin: 1.2rem auto;
  max-width: var(--max-width-wide);
  border-radius: 0 6px 6px 0;
}
.reader-paths-grid-wrapper {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 2.5rem 2rem;
}
.callout.page-helps .callout-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e40af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.callout.page-helps .callout-sub-label {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.94rem;
}
.callout.page-helps ol {
  margin: 0;
  padding-left: 1.3rem;
}
.callout.page-helps .map-entry-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.callout.page-helps ol li {
  margin: 0.35rem 0;
  line-height: 1.55;
}
.callout.page-helps .map-entry-list li {
  margin: 0.35rem 0;
  line-height: 1.55;
}
.callout.page-helps .page-helps-reason {
  font-size: 0.88rem;
  color: var(--color-muted, #64748b);
}
@media (max-width: 480px) {
  .callout.page-helps { padding: 0.8rem 1rem; }
}


/* ====================================================================
   Batch 5E · Topic Visual Theme & Mobile Navigation
   added 2026-05-19
   T1: mobile header non-sticky + tighter nav
   T2: per-topic accent variables
   T3: risk-card-status pill
   T4: topic-reader-meta visual downgrade (first-screen compression)
   ==================================================================== */

/* --- T1 · Mobile header / nav density --------------------------------- */
@media (max-width: 600px) {
  .site-header {
    position: static; /* not sticky on mobile */
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .brand { font-size: 0.86rem; }
  .site-header nav {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    font-size: 0.84rem;
    padding-bottom: 0.2rem;
  }
  .site-header nav a {
    margin-left: 0;
    margin-right: 1rem;
  }
  .site-header nav a:last-child { margin-right: 0; }
}
@media (max-width: 480px) {
  .site-header { padding: 0.4rem 0.8rem; }
  .brand { font-size: 0.82rem; }
  .site-header nav { font-size: 0.78rem; }
  .site-header nav a { margin-right: 0.8rem; }
}

/* --- T2 · Per-topic accent variables ---------------------------------- */
/* Each topic class sets --topic-accent (strong) and --topic-accent-soft (tinted bg) */

.topic-onshore {
  --topic-accent: #B45309;        /* 暖橙 · 公司 / 股权 / 控制权 */
  --topic-accent-soft: #FEF3C7;
}
.topic-crs {
  --topic-accent: #0E7490;        /* 监管青 · 透明度 / 信息交换 */
  --topic-accent-soft: #CFFAFE;
}
.topic-family-office {
  --topic-accent: #6B21A8;        /* 治理紫 · 服务商 / 长期运行系统 */
  --topic-accent-soft: #F3E8FF;
}
.topic-residency {
  --topic-accent: #BE185D;        /* 边境玫红 · 身份 / 居住 / 税务切换 */
  --topic-accent-soft: #FCE7F3;
}
.topic-will {
  --topic-accent: #475569;        /* 文档棕灰 · 继承 / 文档 / probate */
  --topic-accent-soft: #F1F5F9;
}

/* Apply accent to topic-{slug} pages */
.topic-page-pillar .section-eyebrow {
  color: var(--topic-accent, var(--color-muted));
}
.topic-page-pillar .topic-hero {
  border-bottom: 4px solid var(--topic-accent, transparent);
}
.topic-page-pillar .topic-hero-meta span::before {
  background: var(--topic-accent, var(--color-subtle));
}
.topic-page-pillar .panel-alt {
  background: var(--topic-accent-soft, var(--color-bg-alt));
}
.topic-page-pillar .risk-card {
  border-top: 3px solid var(--topic-accent, var(--color-border-strong));
}
.topic-page-pillar a.risk-card:hover {
  border-color: var(--topic-accent, var(--color-accent));
  background: var(--topic-accent-soft, var(--color-bg-alt));
}

/* --- T3 · risk-card-status pill (for non-clickable cards) ------------- */
.risk-card-status {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.76rem;
  background: var(--color-bg-alt, #F8FAFC);
  color: var(--color-muted, #475569);
  border-radius: 999px;
  border: 1px dashed var(--color-border, #E2E8F0);
  letter-spacing: 0.02em;
}
.risk-card-marked {
  opacity: 0.78;
}
.risk-card-marked:hover { opacity: 1; }

/* --- T4 · topic-reader-meta visual downgrade (first-screen compression) */
.topic-page-pillar .panel.topic-reader-meta {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  background: var(--color-bg-alt, #F8FAFC);
}
.topic-page-pillar .topic-reader-meta .callout.reader-intro {
  font-size: 0.94rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-bg, #fff);
}
.topic-page-pillar .topic-reader-meta .callout.reader-intro .callout-label {
  font-size: 0.78rem;
}
.topic-page-pillar .topic-reader-meta .evidence-drawer {
  margin-top: 0.6rem;
}
@media (max-width: 600px) {
  .topic-page-pillar .panel.topic-reader-meta {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }
}


/* ====================================================================
   Batch 5E-A · Real Rendered Mobile & Topic Entry Polish
   added 2026-05-19
   T4: risk-card-marked no hover-lift + dedup top marker
        + risk-card-fallback subdued styling
   ==================================================================== */

/* T4a · risk-card-marked: not clickable, no hover lift */
.risk-card-marked {
  cursor: default;
  background: var(--color-bg-alt, #F8FAFC);
  border-style: dashed;
  border-color: var(--color-border, #E2E8F0);
}
.risk-card-marked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border, #E2E8F0);
  cursor: default;
}
.risk-card-marked .risk-card-num {
  color: var(--color-subtle, #94A3B8);
}
.risk-card-marked .risk-card-title {
  color: var(--color-muted, #475569);
}

/* T4b · risk-card-fallback: clickable but visually subdued vs primary risk-card */
.risk-card-fallback {
  background: var(--color-bg-alt, #F8FAFC);
}
.risk-card-fallback .risk-card-cta {
  color: var(--color-muted, #475569);
  font-style: italic;
}

/* T4c · dedup top marker: when topic-page-pillar accent is applied, suppress
   .risk-card::before strip and use border-top only (single marker source). */
.topic-page-pillar .risk-card::before {
  display: none;
}


/* ====================================================================
   Batch 5E-B · Topic Entry Actionability & Real Visual Proof
   added 2026-05-19
   T6: .coming-soon-card (distinct from .risk-card)
       + .risk-card-fallback CTA clarity
       + mobile panel-alt tint compression
   ==================================================================== */

/* .coming-soon-card · NOT clickable, visually distinct from .risk-card */
.coming-soon-card {
  position: relative;
  padding: 1.2rem 1.3rem;
  background: var(--color-bg-alt, #F8FAFC);
  border: 1px dashed var(--color-border, #E2E8F0);
  border-radius: var(--radius-md, 4px);
  color: var(--color-muted, #475569);
  display: block;
  cursor: default;
}
.coming-soon-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border, #E2E8F0);
  cursor: default;
}
.coming-soon-card .risk-card-num {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  color: var(--color-subtle, #94A3B8);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.coming-soon-card .risk-card-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-muted, #475569);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.coming-soon-card .risk-card-scenario {
  font-size: 0.88rem;
  color: var(--color-muted, #475569);
  margin: 0 0 0.8rem;
  line-height: 1.55;
}
.coming-soon-card .coming-soon-status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.76rem;
  background: var(--color-bg, #fff);
  color: var(--color-subtle, #94A3B8);
  border-radius: 999px;
  border: 1px dashed var(--color-border, #E2E8F0);
  letter-spacing: 0.02em;
}

/* T6 · risk-card-fallback CTA — make the "fallback" intent clear (not bold) */
.risk-card-fallback .risk-card-cta {
  color: var(--color-muted, #475569);
  font-style: italic;
  font-size: 0.88rem;
}
.risk-card-fallback .risk-card-cta::after {
  content: " (相关入口)";
  font-size: 0.78rem;
  color: var(--color-subtle, #94A3B8);
}

/* T6 · mobile panel-alt tint compression — avoid stacking large tint blocks */
@media (max-width: 600px) {
  .topic-page-pillar .panel-alt {
    background: var(--color-bg, #fff);
    border-top: 1px solid var(--color-border, #E2E8F0);
    border-bottom: 1px solid var(--color-border, #E2E8F0);
  }
  .topic-page-pillar .panel-alt .section-eyebrow {
    color: var(--topic-accent, var(--color-muted));
  }
}


/* ====================================================================
   Batch 5F · Homepage & Global IA Polish
   added 2026-05-19
   T2: compact mobile nav (horizontal scroll, no stacking)
   T6: homepage IA cards (already inheriting entity-card-knowledge styling)
   ==================================================================== */

/* T2 · Mobile nav compression — keep nav single row, horizontal scroll if needed */
@media (max-width: 720px) {
  .site-header {
    padding: 0.55rem 0.9rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .site-header .brand {
    font-size: 0.98rem;
  }
  .site-header nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    padding-bottom: 0.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a {
    flex: 0 0 auto;
    margin-right: 0.85rem;
    margin-left: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    padding: 0.15rem 0;
  }
  .site-header nav a:last-child { margin-right: 0; }
}

/* Even tighter for narrowest viewport */
@media (max-width: 390px) {
  .site-header {
    padding: 0.5rem 0.75rem;
    gap: 0.3rem;
  }
  .site-header .brand {
    font-size: 0.92rem;
  }
  .site-header nav a {
    font-size: 0.78rem;
    margin-right: 0.7rem;
  }
}

/* T6 · Homepage IA "按身份找入口" card emphasis — make persona entries
   slightly more visible without changing existing reader-path-card structure */
.reader-paths-grid-wrapper[aria-label="按身份找入口"] .reader-path-card {
  position: relative;
}
.reader-paths-grid-wrapper[aria-label="按身份找入口"] .reader-path-card ul {
  margin: 0.4rem 0 0;
  padding-left: 1.05rem;
}
.reader-paths-grid-wrapper[aria-label="按身份找入口"] .reader-path-card ul li {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
}


/* ====================================================================
   Batch 5F-A · Homepage Mobile Nav & IA Consistency Patch
   added 2026-05-19
   T1: override base nav justify-content for mobile so 首页 / 从问题开始
       remain visible at x>=0 instead of being pushed off-screen.
   T2: hero mobile compression to reduce viewport-pushed content
   ==================================================================== */

/* T1 · Mobile nav must start from the left edge, not flex-end */
@media (max-width: 720px) {
  .site-header nav {
    justify-content: flex-start !important;
    max-width: 100%;
    min-width: 0;
  }
  .site-header nav a {
    flex: 0 0 auto;
  }
}

/* T2 · Hero mobile compression (tighten line-height & font-size · still readable) */
@media (max-width: 720px) {
  .hero-decorated {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
  .hero-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
  }
  .hero-title {
    font-size: 1.55rem;
    line-height: 1.28;
    margin: 0.3rem 0 0.7rem;
  }
  .hero-subtitle {
    font-size: 0.96rem;
    line-height: 1.55;
    margin-bottom: 0.65rem;
  }
  .hero-supporting {
    font-size: 0.86rem;
    line-height: 1.55;
    margin-bottom: 0.7rem;
    color: var(--color-muted, #475569);
  }
  .hero-phase1-hint {
    font-size: 0.84rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
  }
  .hero-cta {
    gap: 0.5rem 0.5rem;
    margin-top: 0.55rem;
  }
  .hero-cta .btn {
    font-size: 0.88rem;
    padding: 0.5rem 0.9rem;
  }
  /* downgraded byline kept compact and muted */
  .hero-boundary-note {
    font-size: 0.78rem;
    color: var(--color-subtle, #94A3B8);
    margin: 0.9rem 0 0;
  }
}


/* ====================================================================
   Batch 5G · Longform Reading Template
   added 2026-05-19
   - .page-toc (auto-generated table of contents)
   - .next-reading (deep-reading section)
   - 5G additions to .quick-read (path note)
   - table overflow protection for longform pages
   - mobile density tweaks for quick-read/toc/next-reading
   ==================================================================== */

/* Page-TOC: compact, sticky-ish on desktop, fold-friendly on mobile */
.page-toc {
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--color-bg-alt, #F8FAFC);
  border-left: 3px solid var(--color-border-strong, #94A3B8);
  border-radius: var(--radius-md, 4px);
}
.page-toc-label {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--color-muted, #475569);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.page-toc-list {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  line-height: 1.7;
}
.page-toc-list a {
  color: var(--color-text, #1E293B);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-border, #E2E8F0);
}
.page-toc-list a:hover {
  color: var(--color-accent, #0F766E);
  border-bottom-color: currentColor;
}

/* Next-reading: clear footer entry, not eyebrow */
.next-reading {
  margin: 2rem 0 1.5rem;
  padding: 1.2rem 1.3rem;
  border-top: 1px solid var(--color-border, #E2E8F0);
  background: var(--color-bg, #fff);
}
.next-reading-heading {
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
  color: var(--color-text, #1E293B);
}
.next-reading-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.94rem;
  line-height: 1.7;
}
.next-reading-list li {
  margin-bottom: 0.3rem;
}
.next-reading-list a {
  color: var(--color-text, #1E293B);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-accent, #0F766E);
}
.next-reading-list a:hover {
  color: var(--color-accent, #0F766E);
  border-bottom-style: solid;
}

/* Quick-read foot note (path note inside quick-read) */
.quick-read .quick-read-foot {
  font-size: 0.84rem;
  color: var(--color-muted, #475569);
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border, #E2E8F0);
}

/* Table overflow protection — longform pages with data tables */
.case-content table,
.risk-content table,
.clause-content table,
.guide-content table,
.jurisdiction-content table,
.matrix-content table,
.data-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Mobile: tighten longform reader-layer */
@media (max-width: 720px) {
  .page-toc {
    padding: 0.7rem 0.9rem;
    margin: 1rem 0;
  }
  .page-toc-list {
    font-size: 0.88rem;
    line-height: 1.65;
  }
  .next-reading {
    padding: 1rem 1.05rem;
    margin: 1.5rem 0 1.2rem;
  }
  .next-reading-heading { font-size: 1rem; }
  .next-reading-list { font-size: 0.9rem; }
  .quick-read .quick-read-foot { font-size: 0.8rem; }
}


/* ====================================================================
   Batch 5I · Visual System / Typography / Density / Mobile Polish
   added 2026-05-19 · cumulative styling on top of 5B-5H foundations
   ==================================================================== */

/* T1 · Define missing CSS vars (previously referenced without definition) */
:root {
  --color-bg-soft: #f8fafc;
  --color-warning: #d97706;
}

/* T2 · Mobile nav guardrail (reinforces 5F-A flex-start) */
@media (max-width: 720px) {
  .site-header nav {
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .site-header nav a {
    flex: 0 0 auto;
    min-height: 44px;  /* iOS tap target minimum */
    display: inline-flex;
    align-items: center;
  }
}

/* T3 · Typography rhythm — longform readability */
main.topic-page-pillar .container-narrow,
main.topic-page-pillar .container-wide {
  max-width: min(820px, 95vw);  /* readable line length for Chinese long-form */
}
@media (max-width: 720px) {
  main.topic-page-pillar .container-narrow {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* H2 / H3 spacing on longform pages */
main h2 {
  margin-top: 2.4rem;
  margin-bottom: 0.9rem;
  line-height: 1.4;
}
main h3 {
  margin-top: 1.6rem;
  margin-bottom: 0.7rem;
  line-height: 1.45;
}
/* Mobile: tighter heading spacing */
@media (max-width: 720px) {
  main h2 { margin-top: 1.8rem; margin-bottom: 0.6rem; font-size: 1.15rem; }
  main h3 { margin-top: 1.2rem; margin-bottom: 0.5rem; font-size: 1.02rem; }
}

/* T4 · Coming-soon-card hardened disabled state (no hover-lift, no pointer cursor) */
.coming-soon-card,
.coming-soon-card:hover,
.coming-soon-card:focus,
.coming-soon-card:active {
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
  border-style: dashed;
}
/* risk-card-marked similar disabled state */
.risk-card-marked,
.risk-card-marked:hover,
.risk-card-marked:focus,
.risk-card-marked:active {
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}

/* T5 · data-table mobile overflow wrapper (auto-applied via container) */
@media (max-width: 720px) {
  .comparison-table-wrap,
  .table-wrap,
  .container-wide .data-table,
  .container-narrow .data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* For loose table elements not in a wrapper, give the parent block scroll */
  main table.data-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* T6 · Status-ribbon noise reduction */
.status-ribbon.status-ribbon-pending {
  font-size: 0.82rem;
  padding: 0.5rem 0.9rem;
  background: var(--color-bg-soft, #f8fafc);
  border-left: 3px solid var(--color-warning, #d97706);
  color: var(--color-muted, #475569);
}
@media (max-width: 720px) {
  .status-ribbon.status-ribbon-pending {
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
  }
}

/* T7 · Quick-read & reader-intro mobile compression */
@media (max-width: 720px) {
  .quick-read {
    padding: 0.85rem 0.95rem;
    font-size: 0.92rem;
  }
  .quick-read p { margin-bottom: 0.55rem; }
  .callout.callout-info.reader-intro {
    padding: 0.85rem 0.95rem;
    font-size: 0.9rem;
  }
}

/* T8 · Page-toc mobile rule (avoid overcrowding first viewport) */
@media (max-width: 720px) {
  .page-toc {
    font-size: 0.86rem;
    padding: 0.6rem 0.8rem;
  }
  .page-toc-list { columns: 1; }
  .page-toc-list li { margin-bottom: 0.3rem; }
}

/* T9 · Fallback link cards (risk-card-fallback) clearer non-primary signal */
.risk-card-fallback {
  border-style: dashed;
  background: var(--color-bg-soft, #f8fafc);
}
.risk-card-fallback:hover {
  border-style: solid;
  background: var(--color-bg, #fff);
}

/* T10 · anchor-card visual consistency with entity-card */
.anchor-card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 4px);
  padding: 0.85rem 1rem;
}
.anchor-card .anchor-meta {
  font-size: 0.78rem;
  color: var(--color-subtle, #94a3b8);
  margin-bottom: 0.3rem;
}


/* ====================================================================
   Batch 5I-B · Visual Actionability & Typography Closure
   added 2026-05-19
   T1: New non-entry card variants (reader-path-note, anchor-info-card)
   T2: matrix-table mobile overflow safety
   ==================================================================== */

/* T1 · reader-path-note: bare reader-path-card variant used as static
   description (e.g., in decision-grid). Inherits container styling but
   DISABLES hover-lift and cursor:pointer. */
.reader-path-note {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 4px);
  padding: 1rem 1.2rem;
  background: var(--color-bg, #fff);
  cursor: default;
}
.reader-path-note:hover,
.reader-path-note:focus,
.reader-path-note:active {
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
  border-color: var(--color-border, #e2e8f0);
}
.reader-path-note h3 {
  font-size: 1.02rem;
  margin: 0.3rem 0 0.5rem;
}
.reader-path-note p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted, #475569);
  margin: 0;
}

/* T1 · anchor-info-card: bare anchor-card variant used as authority
   citation / reference (no inner link). Visually distinct (no hover-lift). */
.anchor-info-card {
  background: var(--color-bg-soft, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 4px);
  padding: 0.95rem 1.1rem;
  cursor: default;
}
.anchor-info-card:hover,
.anchor-info-card:focus,
.anchor-info-card:active {
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
  background: var(--color-bg-soft, #f8fafc);
}
.anchor-info-card .anchor-meta {
  font-size: 0.78rem;
  color: var(--color-subtle, #94a3b8);
  margin-bottom: 0.35rem;
}

/* T2 · matrix-table mobile overflow safety (fallback for tables not in wrapper) */
@media (max-width: 720px) {
  main table.matrix-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}

/* ======================================================================
   Batch 5I-C · Source Manifest & True Actionability Repair
   T1 · CSS hierarchy for reclassified non-entry cards
   T2 · CTA row for reader-path-card on .reader-paths-grid
   ====================================================================== */

/* T1 · .reader-path-note .reader-path-persona — note-variant persona label
   (5I-B added .reader-path-note container but inherited persona color
    only from .reader-path-card; restore explicit hierarchy) */
.reader-path-note .reader-path-persona {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted, #475569);
  background: var(--color-bg-soft, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

/* T1 · .anchor-info-card strong — title block (display:block so title and
   anchor-meta hierarchy do not collapse onto one line) */
.anchor-info-card strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--color-text, #0f172a);
  margin-bottom: 0.2rem;
}
.anchor-info-card strong a {
  color: var(--color-text, #0f172a);
}
.anchor-info-card strong a:hover {
  color: var(--color-accent, #1d4ed8);
  text-decoration: none;
}
.anchor-info-card .anchor-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--color-subtle, #94a3b8);
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.anchor-info-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted, #475569);
  margin: 0.3rem 0 0;
}

/* T2 · .reader-path-cta — explicit primary CTA row for entry cards on
   .reader-paths-grid (so users don't have to hunt links in body copy). */
.reader-path-cta {
  margin: 0.7rem 0 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--color-border, #e2e8f0);
  font-size: 0.93rem;
  line-height: 1.45;
}
.reader-path-cta-link {
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent, #1d4ed8);
  text-decoration: none;
}
.reader-path-cta-link:hover,
.reader-path-cta-link:focus {
  text-decoration: underline;
  color: var(--color-accent-dark, #1e3a8a);
}

/* ======================================================================
   Batch 5I-D · 5H-5I Reconciliation patch
   T1 · .reader-path-overview · overview anchor (self-page) variant
        Used when CTA target normalizes to the current page (e.g.,
        checklist/index.html → checklist/index.html). Visually muted
        so it's distinct from forward-journey CTA.
   ====================================================================== */
.reader-path-overview {
  margin: 0.7rem 0 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--color-border, #e2e8f0);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-muted, #475569);
}
.reader-path-overview-link {
  display: inline-block;
  font-weight: 500;
  color: var(--color-muted, #475569);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.reader-path-overview-link::before {
  content: "↳ ";
  color: var(--color-subtle, #94a3b8);
  margin-right: 0.15rem;
}
.reader-path-overview-link:hover,
.reader-path-overview-link:focus {
  color: var(--color-text, #0f172a);
  text-decoration: underline;
}

/* ======================================================================
   Batch 5I-E · Source Coverage & Table Proof Closure
   T1 · .reader-path-self-overview — span replacing body <a href> that
        self-loops to the current page (e.g. "清单库全部" mention inside
        checklist/index.html reader-path-card body). Visually muted /
        italicized; clearly NOT a forward navigation target.
   ====================================================================== */
.reader-path-self-overview {
  font-style: italic;
  color: var(--color-muted, #475569);
  background: transparent;
  text-decoration: none;
  cursor: default;
}
.reader-path-self-overview::after {
  content: " · 当前页";
  font-size: 0.85em;
  color: var(--color-subtle, #94a3b8);
  font-style: normal;
}

/* ======================================================================
   Batch 5I-G · Mobile Visual Repair & Above-the-Fold Actionability
   T1 · .first-screen-skip-link — sticky 44px-tap-target affordance for
         mobile discovery pages; anchors to #reader-entry (the existing
         reader-paths-grid-wrapper).
   T2 · Tap-target fixes for .reader-path-overview-link + .reader-path-cta-link
   T3 · Mobile nav wrap fix: force flex-wrap, add row-gap so all 8 nav
         items remain visible without nested overflow.
   T4 · Mobile chrome compression: tighter top-bar / header / breadcrumb
         padding to reduce above-fold consumption.
   ====================================================================== */

/* T1 · first-screen skip-link affordance (discovery pages only) */
.first-screen-skip-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  background: var(--color-accent-soft, #e0e7ff);
  color: var(--color-accent, #1d4ed8);
  font-weight: 600;
  font-size: 0.93rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  min-height: 44px;
  box-sizing: border-box;
  line-height: 20px;
}
.first-screen-skip-link:hover,
.first-screen-skip-link:focus {
  background: var(--color-accent, #1d4ed8);
  color: #fff;
  text-decoration: none;
}
@media (min-width: 760px) {
  .first-screen-skip-link {
    /* desktop: keep visible as explicit jump-to-entry affordance · 5I-G fix */
    padding: 9px 16px;
    min-height: 44px;
    font-size: 0.85rem;
  }
}

/* T2 · Tap-target fixes for reader-path overview + cta inline links.
   These are PRIMARY card actions, so they must meet 44px tap-target. */
.reader-path-overview-link,
.reader-path-cta-link {
  display: inline-block;
  min-height: 44px;
  padding: 11px 8px 11px 0;
  line-height: 22px;
  box-sizing: border-box;
}
/* Preserve visual hierarchy: overview link stays muted */
.reader-path-overview-link {
  color: var(--color-muted, #475569);
}
.reader-path-overview-link::before {
  /* keep existing ↳ prefix (already defined in 5I-D) */
}

/* T3 · Mobile nav clip fix: enforce wrap with explicit row-gap so 8 nav
   items at 360px viewport don't overflow nav_client_width. */
@media (max-width: 600px) {
  .site-header {
    padding: 0.55rem 1rem;
    gap: 0.3rem;
  }
  .site-header nav {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 0.4rem;
    column-gap: 0;
    width: 100%;
    overflow: visible;
  }
  .site-header nav a {
    flex: 0 0 auto;
    font-size: 0.85rem;
    margin: 0 0.85rem 0 0;
    line-height: 1.5;
    min-width: 0;
    padding: 4px 0;  /* mini tap-target padding */
  }
  /* T4 · Mobile chrome compression to reduce above-fold consumption */
  .top-bar {
    padding: 0.25rem 1rem;
    font-size: 0.66rem;
    line-height: 1.2;
  }
  .breadcrumb {
    padding: 0.35rem 1rem;
    font-size: 0.78rem;
  }
  .breadcrumb-inner {
    line-height: 1.3;
  }
  .reader-intro {
    margin: 0.6rem 0 0.8rem;
    padding: 0.7rem 0.85rem;
  }
  .reader-intro .callout-label {
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
  }
}

/* ======================================================================
   Batch 5I-H · Nav Tap Target & Remaining Visual Gate Repair
   T1 · Primary nav links must have BOTH width and height >= 44px
        (Apple HIG 44pt minimum touch target). 5I-G had height 44px but
        2-3 char labels (首页/关于/判例库/资料库) were 27-41px wide.
   ====================================================================== */
@media (max-width: 600px) {
  .site-header nav {
    /* row + column gap; keep flex-wrap from 5I-G */
    gap: 0.4rem 0.35rem;
  }
  .site-header nav a {
    /* 44x44 minimum touch target enforced explicitly */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    margin: 0;   /* gap on parent handles spacing */
    font-size: 0.85rem;
    line-height: 1.3;
    box-sizing: border-box;
    /* Short labels (首页 / 关于) still get 44px minimum width thanks
       to min-width above; longer labels grow naturally. */
  }
}

/* ======================================================================
   Batch 5I-I · Evidence Packaging & Longform/Table Affordance Tightening
   T2 · Mobile-compact .topic-page H1 + .topic-header + breadcrumb so
        lede is visible alongside H1 on table_problem pages (matrix/* +
        guide/advisor-role-boundaries + tools/jurisdiction-comparison)
        which previously had a massive multi-line H1 pushing lede below
        the fold on 360x640.
   ====================================================================== */
@media (max-width: 600px) {
  /* tighten breadcrumb padding further · saves ~30-50px on mobile */
  .breadcrumb-inner {
    padding: 0.3rem 1rem;
  }
  /* shrink topic-header chrome on mobile */
  .topic-page .topic-header {
    padding-bottom: 0.6rem;
    margin-bottom: 0.8rem;
  }
  /* compress mobile H1 for topic-page so multi-line title doesn't
     consume entire first viewport */
  .topic-page .topic-header h1 {
    font-size: 1.05rem;
    line-height: 1.32;
    margin: 0.2rem 0 0.3rem;
  }
  .topic-page .topic-header .topic-label {
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
  }
  /* tighten reader-intro callout further on mobile so quick-read is
     near above-the-fold */
  .reader-intro {
    margin: 0.4rem 0 0.6rem;
    padding: 0.55rem 0.8rem;
  }
  .reader-intro .callout-label {
    font-size: 0.68rem;
    margin-bottom: 0.25rem;
  }
}

/* ======================================================================
   Batch 5I-J · Patch Artifact Hygiene & Measurement Viewport Sanity
   T1 · Mobile long-URL wrap fix — matrix/difc-vs-adgm-foundation page has
        a 71-char URL inside <li> that forced layout viewport from 360 to
        468px on mobile (window.innerWidth=468; doc.scrollWidth=468). Add
        overflow-wrap so long unbreakable text wraps within available width
        and layout viewport stays at configured 360x640.
   ====================================================================== */
@media (max-width: 600px) {
  main p, main li, main td, main th, main blockquote, main figcaption {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  main a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}