/* ═══════════════════════════════════════════════════════════════
   Sub-pages — one argument each, on the same paper as the home page

   Only what the home page does not already define lives here. Nav,
   footer, world layer and card art all come from the shared sheets.
   ═══════════════════════════════════════════════════════════════ */
.doc {
  position: relative;
  z-index: 1;
}

.doc-head {
  padding: clamp(104px, 11vw, 168px) 0 clamp(30px, 3.4vw, 52px);
}

.doc-back {
  display: inline-block;
  margin-bottom: clamp(26px, 3vw, 44px);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
  transition: color 140ms ease;
}

.doc-back:hover { color: var(--ink-heading); }

.doc-kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 18px;
}

.doc-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 70px);
  font-weight: 450;
  line-height: 1.04;
  letter-spacing: -0.021em;
  color: var(--ink-heading);
  margin-bottom: 22px;
}

.doc-lead {
  font-size: clamp(15.5px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 58ch;
}

.doc-lead code,
.doc-step-b code,
.doc-facts code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(45, 35, 22, 0.06);
}

/* The banner: the same generated cut-paper art the cards use, so a
   sub-page is visibly the same world as the page it came from. */
.doc-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(150px, 19vw, 280px);
  border-radius: clamp(20px, 2vw, 28px);
  background: var(--tint);
  box-shadow:
    0 1px 2px rgba(45, 35, 22, 0.05),
    0 18px 44px -20px rgba(45, 35, 22, 0.3);
}

.doc-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.2vw, 56px);
  padding-top: clamp(52px, 5.6vw, 88px);
  padding-bottom: clamp(16px, 2vw, 30px);
}

.doc-step-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.doc-step-t {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 450;
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--ink-heading);
  margin-bottom: 10px;
}

.doc-step-b {
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.62;
  color: var(--ink-body);
  max-width: 48ch;
}

/* Three checkable facts, hairline-ruled — the same register the home
   page's proof row uses. */
.doc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 38px);
  list-style: none;
  margin: clamp(46px, 5vw, 76px) 0 0;
  padding: clamp(32px, 3.4vw, 50px) 0 0;
  border-top: 1px solid var(--border-medium);
}

.doc-facts h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--ink-heading);
  margin-bottom: 7px;
}

.doc-facts p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.doc-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(50px, 5.4vw, 84px);
  padding: clamp(24px, 2.6vw, 38px) clamp(24px, 2.8vw, 40px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: var(--bg-card-warm);
  box-shadow: 0 0 0 1px var(--border-card);
}

.doc-more p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 54ch;
  margin: 0;
}

.doc-more-link {
  flex: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-heading);
  border-bottom: 1px solid rgba(45, 35, 22, 0.3);
  padding-bottom: 2px;
}

.doc-more-link:hover { border-bottom-color: var(--ink-heading); }

.doc-cta {
  text-align: center;
  padding-top: clamp(64px, 7vw, 110px);
  padding-bottom: clamp(50px, 5.4vw, 80px);
}

.doc-cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 450;
  letter-spacing: -0.02em;
  color: var(--ink-heading);
  margin-bottom: 12px;
}

.doc-cta p {
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 50ch;
  margin: 0 auto clamp(26px, 2.8vw, 38px);
}

.doc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  background: #17150F;
  color: #FAF7F2;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(23, 21, 15, 0.7);
  transition: transform 150ms ease;
}

.doc-cta-btn:hover { transform: translateY(-2px); }
.doc-cta-btn .arr { transition: transform 150ms ease; }
.doc-cta-btn:hover .arr { transform: translateX(3px); }

@media (max-width: 860px) {
  .doc-steps { grid-template-columns: 1fr; }
  .doc-facts { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-cta-btn, .doc-cta-btn .arr, .doc-back { transition: none; }
  .doc-cta-btn:hover, .doc-cta-btn:hover .arr { transform: none; }
}

/* The page you are already on is named in the footer, not linked to it. */
.footer-col .is-here {
  font-size: 14.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.34);
}

/* ═══════════════════════════════════════════════════════════════
   Page body components

   Each block type looks different on purpose: a reader should be able
   to tell a diagram from a rule from a measurement at a glance, before
   reading a word of it.
   ═══════════════════════════════════════════════════════════════ */
.doc-body { padding-top: clamp(50px, 5.4vw, 84px); }

.d-h2wrap { margin: clamp(56px, 6vw, 96px) 0 clamp(20px, 2.2vw, 32px); }
.doc-body > .d-h2wrap:first-child { margin-top: 0; }

.d-h2k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.d-h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.019em;
  color: var(--ink-heading);
  max-width: 20ch;
}

.d-prose p {
  font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.68;
  color: var(--ink-body);
  max-width: 62ch;
}
.d-prose p + p { margin-top: 1em; }

/* A diagram is the document's own ASCII, set in mono on paper. It
   scrolls inside itself rather than widening the page. */
.d-diagram {
  margin: clamp(24px, 2.6vw, 40px) 0;
  border-radius: clamp(14px, 1.4vw, 20px);
  background: var(--bg-card-warm);
  box-shadow: 0 0 0 1px var(--border-card);
  overflow: hidden;
}

.d-diagram pre,
.d-code pre {
  margin: 0;
  padding: clamp(18px, 2vw, 30px);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.92vw, 13px);
  line-height: 1.62;
  color: var(--ink-body);
  tab-size: 2;
}

.d-diagram figcaption,
.d-code figcaption,
.d-table figcaption {
  padding: 13px clamp(18px, 2vw, 30px);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  background: rgba(45, 35, 22, 0.02);
}

.d-code {
  position: relative;
  margin: clamp(24px, 2.6vw, 40px) 0;
  border-radius: clamp(14px, 1.4vw, 20px);
  background: #17150F;
  overflow: hidden;
}
.d-code pre { color: rgba(255, 255, 255, 0.82); }
.d-code figcaption {
  border-top-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
}

.d-table { margin: clamp(24px, 2.6vw, 40px) 0; }
.d-table-scroll {
  overflow-x: auto;
  border-radius: clamp(14px, 1.4vw, 20px);
  box-shadow: 0 0 0 1px var(--border-card);
  background: var(--bg-card-warm);
}
.d-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.d-table th {
  text-align: left;
  padding: 14px clamp(14px, 1.4vw, 22px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-medium);
  white-space: nowrap;
}
.d-table td {
  padding: 14px clamp(14px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-body);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.d-table tbody tr:last-child td { border-bottom: 0; }
.d-table figcaption { border-top: 0; background: none; padding-left: 2px; }

/* The three risk tiers, each wearing its own colour. */
.d-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(24px, 2.6vw, 40px) 0;
}
.d-tier {
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: clamp(14px, 1.4vw, 20px);
  background: var(--tone-bg);
  box-shadow: 0 0 0 1px var(--tone-line);
}
.d-tier-green  { --tone-bg: rgba(110,140,114,.10); --tone-line: rgba(110,140,114,.28); --tone: #3F5C3A; }
.d-tier-amber  { --tone-bg: rgba(201,150,43,.11);  --tone-line: rgba(201,150,43,.30);  --tone: #8A6118; }
.d-tier-red    { --tone-bg: rgba(186,76,56,.10);   --tone-line: rgba(186,76,56,.28);   --tone: #9A3B28; }
.d-tier header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.d-tier-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); flex: none; }
.d-tier h3 { font-size: 15px; font-weight: 700; color: var(--tone); letter-spacing: -0.004em; }
.d-tier p { font-size: 14px; line-height: 1.55; color: var(--ink-body); margin-bottom: 14px; }
.d-tier-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.d-tier-chips code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-body);
}

/* Where a screenshot or a clip belongs. Deliberately drawn as an empty
   slot rather than left blank, so nobody ships the page thinking it is
   finished. */
.d-shot { margin: clamp(26px, 3vw, 46px) 0; }
.d-shot-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: var(--ratio, 16 / 9);
  /* An empty slot should read as a slot, not as a page that lost its
     images. Capped, or a 16:11 box on a wide container is 740px of
     hatching and the reader thinks something failed to load. */
  max-height: 440px;
  padding: 24px;
  text-align: center;
  border-radius: clamp(16px, 1.6vw, 24px);
  background:
    repeating-linear-gradient(135deg,
      rgba(45,35,22,.030) 0 10px, rgba(45,35,22,0) 10px 20px),
    var(--bg-canvas-subtle);
  box-shadow: 0 0 0 1.5px var(--border-medium) inset;
}
.d-shot-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.d-shot-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-light);
  max-width: 42ch;
}

.d-callout {
  margin: clamp(22px, 2.4vw, 36px) 0;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: clamp(14px, 1.4vw, 20px);
  border-left: 3px solid var(--tone);
  background: var(--tone-bg);
}
.d-callout-note { --tone: var(--accent-gold); --tone-bg: rgba(184,134,58,.07); }
.d-callout-good { --tone: #5C8460; --tone-bg: rgba(110,140,114,.09); }
.d-callout-warn { --tone: #B2543C; --tone-bg: rgba(186,76,56,.07); }
.d-callout h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.004em;
  color: var(--ink-heading);
  margin-bottom: 7px;
}
.d-callout p { font-size: 14.5px; line-height: 1.6; color: var(--ink-body); max-width: 60ch; }

.d-quote {
  margin: clamp(30px, 3.4vw, 54px) 0;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 2px solid var(--accent-gold);
}
.d-quote blockquote {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.1vw, 28px);
  font-weight: 450;
  font-style: italic;
  line-height: 1.34;
  letter-spacing: -0.013em;
  color: var(--ink-heading);
  max-width: 34ch;
}
.d-quote figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-light);
}

.d-deflist { margin: clamp(22px, 2.4vw, 36px) 0; }
.d-def {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(14px, 2vw, 34px);
  padding: 15px 0;
  border-top: 1px solid var(--border-subtle);
}
.d-def:last-child { border-bottom: 1px solid var(--border-subtle); }
.d-def dt { font-size: 15px; font-weight: 600; color: var(--ink-heading); }
.d-def dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }

.d-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.d-split > div > * { margin-top: 0; margin-bottom: 0; }

.doc-body code,
.doc-facts code {
  font-family: var(--font-mono);
  font-size: 0.89em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(45, 35, 22, 0.06);
}
.d-code code, .d-tier-chips code { padding: 0; background: none; }
.d-code code { font-size: 1em; }

/* Where to go next, rather than a dead end at the bottom. */
.doc-next { margin-top: clamp(64px, 7vw, 108px); }
.doc-next h2 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-medium);
}
.doc-next ul { list-style: none; margin: 0; padding: 0; }
.doc-next li { border-bottom: 1px solid var(--border-subtle); }
.doc-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 450;
  letter-spacing: -0.014em;
  color: var(--ink-heading);
  transition: padding-left 160ms ease;
}
.doc-next a .arr { color: var(--ink-light); transition: transform 160ms ease, color 160ms ease; }
.doc-next a:hover { padding-left: 10px; }
.doc-next a:hover .arr { transform: translateX(4px); color: var(--accent-gold); }

@media (max-width: 860px) {
  .d-tiers, .d-split { grid-template-columns: 1fr; }
  .d-def { grid-template-columns: 1fr; gap: 5px; }
  .d-h2 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-next a, .doc-next a .arr { transition: none; }
  .doc-next a:hover { padding-left: 2px; }
  .doc-next a:hover .arr { transform: none; }
}