/**
 * The Muse Field Guide — shared design system.
 * One visual language with the niclydon.io exhibits (Nexus, ARIA, Gadgets):
 * graphite surfaces, flat color only, one chamfered corner, Inter for
 * UI/headings, JetBrains Mono for labels and data. Cerulean is this
 * exhibit's primary accent (system, mechanism, data); amber is reserved
 * for story markers, rulings, and the operator's voice. Evidence panels
 * (Receipts, Inheritance notes, number readouts) use the dark-nova-glass
 * treatment: translucent charcoal-navy, hairline border, cyan-teal label.
 */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Tokens ── */
:root {
  --base: #1C1C1E;
  --panel: #242428;
  --raised: #2A2A2F;
  --hairline: #38383E;
  --text: #F4F4F1;
  --muted: #A9A9A4;
  --faint: #6E6E68;

  --amber: #C9933A;
  --cerulean: #4A7FA5;
  --cerulean-light: #8ABAD3;
  --cerulean-deep: #2B6CB0;

  --glass-bg: rgba(13, 20, 32, 0.72);
  --glass-border: rgba(160, 200, 235, 0.16);
  --glass-label: #5FD3E0;
  --glass-ink: #E9EFF6;
  --glass-muted: #9DB1C5;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --maxw: 1160px;
  --rail-w: 216px;
  --topbar-h: 52px;
}

/* ── Base ── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--base);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

::selection { background: var(--cerulean-deep); color: var(--text); }

a { color: var(--cerulean-light); text-decoration: none; }
a:hover { color: var(--text); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cerulean-light);
  outline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--cerulean-light);
}

/* ── Geometry ── */
.chamfer {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* ── Top bar (shared family component) ── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: rgba(28, 28, 30, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  z-index: 50;
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 20px;
}
.wordmark {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.wordmark:hover { color: var(--text); }
.diamond {
  width: 8px;
  height: 8px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: none;
}
.topbar-exhibit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--hairline);
  padding-left: 20px;
  white-space: nowrap;
}
.topbar-exhibit:hover { color: var(--amber); }
.topbar nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.topbar nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.topbar nav a:hover { color: var(--text); }
.topbar nav a.current { color: var(--amber); }
.vdiv { width: 1px; height: 18px; background: var(--hairline); flex: none; }

/* ── Frame: left rail + content ── */
.frame {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 44px) 24px 0;
  display: flex;
  gap: 52px;
  align-items: flex-start;
}
.frame-single {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 44px) 24px 0;
}

.rail {
  flex: 0 0 var(--rail-w);
  position: sticky;
  top: calc(var(--topbar-h) + 28px);
}
.rail-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}
.rail ol { list-style: none; }
.rail li { border-top: 1px solid var(--hairline); }
.rail li:last-child { border-bottom: 1px solid var(--hairline); }
.rail a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 4px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}
.rail a:hover { color: var(--text); }
.rail .r-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber);
  flex: none;
}
.rail a[aria-current="page"] { color: var(--text); }
.rail a[aria-current="page"] .r-label { border-bottom: 2px solid var(--cerulean); }
.rail-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--faint);
  margin-top: 16px;
}

.content { flex: 1 1 auto; min-width: 0; }

/* ── Prose ── */
.prose { max-width: 720px; }
.prose p { margin: 1.05em 0; line-height: 1.75; font-size: 1.03rem; }
.prose h1 {
  font-size: 2.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 14px 0 22px;
}
.prose h2 {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 2.4em 0 0.7em;
  padding-top: 1.3em;
  border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { border-top: none; padding-top: 0; }
.prose ul, .prose ol { margin: 1em 0 1em 1.3em; line-height: 1.75; }
.prose li { margin: 0.45em 0; }
.prose ul li::marker { color: var(--cerulean); }
.prose ol li::marker { color: var(--cerulean-light); font-family: var(--font-mono); }
.prose strong { color: var(--text); font-weight: 600; }

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-label .idx { color: var(--amber); }

/* ── Evidence panels (dark-nova-glass) ── */
.evidence {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 20px 22px 8px;
  margin: 30px 0;
}
.evidence-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glass-label);
  margin: 0 0 8px;
}
.evidence-title {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--glass-ink);
  margin: 0 0 4px;
}
.evidence p {
  color: var(--glass-ink);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 12px;
}
.evidence .src-note { color: var(--glass-muted); }

/* ── Hero (home) ── */
.hero {
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 54px 48px 42px;
}
.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 14px 0 20px;
}
.hero-thesis {
  font-size: 1.22rem;
  line-height: 1.65;
  max-width: 720px;
}
.hero p { max-width: 720px; line-height: 1.7; margin: 1em 0; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.btn {
  display: inline-block;
  background: var(--amber);
  color: #1C1C1E;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
}
.btn:hover { color: #1C1C1E; background: #D8A44A; }
.btn-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 12px 22px;
}
.btn-ghost:hover { border-color: var(--cerulean); color: var(--text); }

/* Glass evidence strip (home hero readout) */
.evidence-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  margin-top: 38px;
}
.stat {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 18px 16px 14px;
}
.stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--glass-ink);
}
.stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glass-muted);
  margin-top: 7px;
  line-height: 1.55;
}

/* ── Door cards (home) ── */
.doors { margin-top: 72px; }
.door-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.door {
  display: block;
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 24px 24px 20px;
  color: var(--text);
}
.door:hover { border-color: var(--cerulean); color: var(--text); }
.door-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--amber);
}
.door h2 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 10px 0 8px;
}
.door p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.door-go {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cerulean-light);
  margin-top: 16px;
}

.closing { margin-top: 72px; max-width: 720px; }
.closing h2 {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.7em;
}
.closing p { line-height: 1.75; margin: 1em 0; }

/* ── Practice cards ── */
.practice {
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 30px 32px 24px;
  margin: 26px 0;
}
.practice-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cerulean-light);
}
.practice h2 {
  border-top: none;
  padding-top: 0;
  margin: 8px 0 10px;
  font-size: 1.42rem;
}
.practice .evidence { margin: 22px 0 6px; }
.card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 18px;
}

/* ── Resource cards (steal-this) ── */
.h2-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cerulean-light);
  border: 1px solid var(--cerulean-deep);
  padding: 3px 8px;
  margin-left: 12px;
  vertical-align: middle;
}
.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}
.repo-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 20px 22px;
  color: var(--text);
}
a.repo-card:hover { border-color: var(--cerulean); color: var(--text); }
.card-tag-mono {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cerulean-light);
  margin-bottom: 10px;
}
.repo-name {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
}
.repo-desc { display: block; color: var(--muted); font-size: 0.94rem; line-height: 1.6; }
.repo-desc a { color: var(--cerulean-light); }
.repo-desc a:hover { color: var(--text); }

/* ── Pager ── */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--hairline);
  margin-top: 56px;
  padding-top: 22px;
  max-width: 720px;
}
.pager a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pager a:hover { color: var(--text); }
.pager .p-idx { color: var(--amber); }
.pager-next { margin-left: auto; text-align: right; }

/* ── Footer (shared family component) ── */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 96px;
}
.footer-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 24px 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-nav a:hover { color: var(--text); }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px 42px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.facts-stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.facts-stamp .facts-date { color: var(--cerulean-light); }
.facts-stamp .facts-note { color: var(--faint); }
.footer-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}

/* ── Reveal on scroll (progressive enhancement; content is visible
      by default, JS sets the hidden start state — no-JS renders complete) ── */
html.js .rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .rv.in { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .frame { flex-direction: column; gap: 0; }
  .rail {
    position: static;
    flex: none;
    width: 100%;
    margin-bottom: 36px;
  }
  .rail ol {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--hairline);
  }
  .rail li { border-top: none; flex: none; }
  .rail li:last-child { border-bottom: none; }
  .rail a { padding: 10px 12px 10px 4px; white-space: nowrap; }
  .rail-note { display: none; }
}
@media (max-width: 900px) {
  .evidence-strip { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 40px 28px 32px; }
  .hero h1 { font-size: 2.3rem; }
}
@media (max-width: 640px) {
  .topbar-exhibit { display: none; }
  .topbar nav a.cross { display: none; }
  .frame, .frame-single { padding-left: 18px; padding-right: 18px; }
  .evidence-strip { grid-template-columns: repeat(2, 1fr); }
  .practice { padding: 24px 20px 18px; }
  .prose h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
}

/* ── Print (checklists and pages read on paper) ── */
@media print {
  body { background: #fff; color: #000; }
  .topbar, .rail, .pager, .footer-nav, .hero-actions { display: none; }
  .frame, .frame-single { padding-top: 0; }
  .prose p, .prose li, .closing p { color: #000; }
  .prose h1, .prose h2, .closing h2, .door h2, .practice h2 { color: #000; }
  .hero, .door, .practice, .repo-card { background: #fff; border-color: #999; }
  .evidence { background: #fff; border-color: #999; }
  .evidence p, .evidence-title { color: #000; }
  .evidence-label, .section-label, .section-label .idx, .stat-label,
  .door p, .repo-desc, .facts-stamp, .footer-line { color: #333; }
  .stat-value, .repo-name { color: #000; }
  a { color: #000; }
}


/* ── Resources collection (round 3): sectioned home, entry lists ── */
.portal-head {
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 40px 44px 34px;
}
.portal-head h1 {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 12px 0 14px;
}
.portal-purpose { font-size: 1.12rem; line-height: 1.65; max-width: 760px; }
.provenance {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cerulean-light);
  margin-top: 18px;
}
.search-wrap { margin-top: 26px; max-width: 640px; }
.search-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
#site-search {
  width: 100%;
  background: var(--base);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 13px 16px;
}
#site-search:focus { outline: 2px solid var(--cerulean); outline-offset: 1px; border-color: var(--cerulean); }
.search-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cerulean-light);
  margin-top: 10px;
  min-height: 1em;
}
[hidden] { display: none !important; }

.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 30px;
  padding: 14px 2px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.section-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-nav a:hover { color: var(--text); }

.home-section { margin-top: 60px; }
.home-section.search-empty { display: none; }
.section-intro { color: var(--muted); max-width: 720px; line-height: 1.7; margin-top: 14px; }
.section-note { color: var(--muted); max-width: 720px; line-height: 1.7; margin-top: 18px; }

.res-list { list-style: none; margin-top: 20px; border-top: 1px solid var(--hairline); }
.res-entry { padding: 15px 2px 13px; border-bottom: 1px solid var(--hairline); }
.res-head { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.res-head:hover { color: var(--cerulean-light); }
.res-desc { color: var(--muted); font-size: 0.94rem; line-height: 1.55; margin-top: 3px; max-width: 760px; }

.steps { margin: 22px 0 0 1.2em; max-width: 760px; }
.steps li { margin: 16px 0; line-height: 1.65; color: var(--muted); }
.steps li::marker { font-family: var(--font-mono); color: var(--amber); }
.step-title { font-weight: 700; color: var(--text); }

/* ── Item pages ── */
.back-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.back-link a { color: var(--muted); }
.back-link a:hover { color: var(--text); }
.crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.crumb a { color: var(--cerulean-light); }
.crumb a:hover { color: var(--text); }
.item-page .lede { font-size: 1.14rem; line-height: 1.65; color: var(--text); }
.template-block {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--cerulean-light);
  padding: 20px 22px;
  margin: 18px 0 8px;
  overflow-x: auto;
  white-space: pre;
}
.checklist { list-style: none; margin: 1em 0 1em 0.1em; }
.checklist li { margin: 0.55em 0; }
.checklist label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.6; }
.checklist input[type="checkbox"] {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 4px;
  accent-color: var(--cerulean);
}
.deep-dive-link { font-weight: 600; margin-top: 26px; }
.related { margin-top: 60px; max-width: 1160px; }
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.rel-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 18px 20px 14px;
  color: var(--text);
}
.rel-card:hover { border-color: var(--cerulean); color: var(--text); }
.rel-card h3 { font-size: 1.02rem; font-weight: 700; margin: 2px 0 6px; letter-spacing: -0.015em; }
.rel-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* ── Deep-dive eyebrow ── */
.dd-bar { max-width: var(--maxw); margin: 0 auto; padding: calc(var(--topbar-h) + 18px) 24px 0; }
.dd-bar + .frame, .dd-bar + .frame-single { padding-top: 10px; }
.dd-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.dd-eyebrow a { color: var(--muted); }
.dd-eyebrow a:hover { color: var(--text); }
.dd-sep { color: var(--faint); margin: 0 10px; }

@media (max-width: 640px) {
  .portal-head { padding: 30px 22px 26px; }
  .portal-head h1 { font-size: 2rem; }
}
@media print {
  .search-wrap, .section-nav, .back-link { display: none; }
  .res-head { color: #000; }
  .res-desc, .section-intro, .section-note, .steps li { color: #333; }
  .checklist input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
  .template-block { background: #fff; color: #000; border-color: #999; }
}

/* ── Agent prompt note (home) ── */
.agent-map-note {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-top: 14px;
  max-width: 760px;
}
.agent-map-note a { font-family: var(--font-mono); font-size: 0.92em; }
.agent-map-note code { font-family: var(--font-mono); font-size: 0.92em; }

/* ── Mobile pass (Phase 2d): phone widths, ~390px first.
      Presentation only: no desktop identity change, no JS needed. ── */
img, svg, video { max-width: 100%; }

@media (max-width: 760px) {
  html, body { overflow-x: clip; }

  /* Top bar condenses: tighter chrome, nav scrolls sideways */
  .topbar-inner { padding: 0 14px; gap: 12px; }
  .topbar nav {
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 10px 0; }

  /* Frame: single column, phone gutters */
  .frame, .frame-single {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: calc(var(--topbar-h) + 28px);
  }
  .dd-bar { padding-left: 16px; padding-right: 16px; }

  /* Home head and section navigation */
  .portal-head { padding: 26px 18px 24px; }
  .portal-head h1 { font-size: 1.85rem; }
  .portal-purpose { font-size: 1rem; }
  .section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px 20px;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a { flex: none; padding: 10px 0; }
  .home-section { margin-top: 44px; }

  /* Entry lists: full width, comfortable tap targets (~44px rows) */
  .res-entry { padding: 18px 2px 16px; }
  .res-head { display: block; padding: 6px 0 2px; }
  .res-desc { max-width: none; }
  .steps { margin-left: 1em; max-width: none; }
  .steps li { margin: 14px 0; }
  #site-search { font-size: 16px; min-height: 48px; }

  /* Item and deep-dive prose */
  .prose { max-width: none; }
  .prose a, .res-desc, .portal-purpose, .repo-name { overflow-wrap: break-word; }
  .prose h1 { font-size: 1.9rem; }
  .prose p { font-size: 1rem; }
  .prose ul, .prose ol { margin-left: 1.1em; }
  .evidence { padding: 16px 16px 6px; margin: 24px 0; }
  .practice { padding: 22px 18px 16px; }
  .hero { padding: 30px 20px 26px; }
  .hero h1 { font-size: 2rem; }

  /* Templates and checklists reflow instead of scrolling sideways */
  .template-block {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: visible;
    padding: 16px;
    font-size: 0.8rem;
  }
  .checklist label { min-height: 44px; padding: 4px 0; }

  /* Every multi-column grid collapses to one column */
  .rel-grid, .door-grid, .repo-grid { grid-template-columns: 1fr; }
  .evidence-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 1.45rem; }
  .related { max-width: none; }

  /* Pager and footer stack */
  .pager { flex-direction: column; gap: 10px; max-width: none; }
  .pager-next { margin-left: 0; text-align: left; }
  .footer-nav { padding-left: 16px; padding-right: 16px; gap: 14px; }
  .footer-inner {
    padding-left: 16px;
    padding-right: 16px;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .wordmark { font-size: 0.9rem; }
  .topbar nav a { font-size: 10px; letter-spacing: 0.1em; }
  .portal-head h1 { font-size: 1.7rem; }
  .prose h1 { font-size: 1.75rem; }
  .checklist input[type="checkbox"] { width: 20px; height: 20px; }
}

/* nova-nim */
.nim {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font-ui);
}
.nim[hidden] { display: none; }

.nim-btn {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid #C9933A;
  padding: 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.nim-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
@media (prefers-reduced-motion: no-preference) {
  .nim-btn { animation: nim-bob 3.6s ease-in-out infinite; }
  @keyframes nim-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
}

.nim-panel {
  position: relative;
  width: 300px;
  background: #242428;
  border: 1px solid #38383E;
  color: #F4F4F1;
  padding: 16px 18px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.nim-panel[hidden] { display: none; }
.nim-greet {
  margin: 0 40px 6px 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.nim-dismiss {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: #A9A9A4;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.nim-dismiss:hover, .nim-dismiss:focus-visible { color: #F4F4F1; }
.nim-routes a {
  display: block;
  padding: 7px 0;
  color: #F4F4F1;
  text-decoration: none;
  font-size: 0.95rem;
  border-top: 1px solid #38383E;
}
.nim-routes a:hover, .nim-routes a:focus-visible { color: #C9933A; }
.nim-routes a.nim-agent {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #C9933A;
}
.nim-routes a.nim-agent:hover, .nim-routes a.nim-agent:focus-visible { color: #F4F4F1; }

@media (max-width: 760px) {
  .nim { right: 12px; bottom: 12px; }
  .nim-btn { width: 68px; height: 68px; }
  .nim-panel {
    width: min(300px, calc(100vw - 24px));
    max-height: 56vh;
    overflow: auto;
  }
  .nim-greet { margin-right: 48px; }
  .nim-dismiss { width: 44px; height: 44px; }
}

@media print {
  .nim { display: none; }
}