/* ============================================
   Content pages — docs, blog, tools, legal, 404.
   Loads after css/site.css, before the page's own sheet.
   ============================================ */

/* The Infrastructure Noir variable names that page sheets and tool scripts
   still use, mapped onto Address Plan tokens. New code uses the tokens. */
:root {
  --bg: var(--paper);
  --bg-primary: var(--paper);
  --bg-surface: var(--sheet);
  --bg-secondary: var(--sheet);
  --bg-card: var(--sheet);
  --bg-elevated: var(--sheet-2);
  --border: var(--rule);
  --border-hover: var(--rule-strong);
  --text: var(--ink);
  --text-primary: var(--ink);
  --text-dim: var(--ink-2);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-tertiary: var(--ink-3);
  --accent: var(--action);
  --accent-bright: var(--action-hover);
  --accent-dim: var(--action-tint);
  --accent-glow: color-mix(in srgb, var(--action) 25%, transparent);
  --red: var(--danger);
  --red-dim: color-mix(in srgb, var(--danger) 10%, transparent);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
}

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

/* Inner page title (blog index) */
.page-header { padding-block: clamp(40px, 6vw, 72px) 8px; }
.page-header h1 {
  font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
}
.page-header .page-sub {
  max-width: 34em;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
}
.section { padding-bottom: clamp(72px, 9vw, 120px); }

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--ink-3);
  font-size: 0.9375rem;
  text-decoration: none;
}
.back-link:hover { color: var(--action); text-decoration: underline; }

/* Legacy button names */
.btn-ghost { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); }
.btn-block { display: flex; width: 100%; }

/* ---- Code ---- */
pre {
  margin: 0 0 20px;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid var(--code-rule);
  border-radius: 8px;
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 0.8438rem;
  line-height: 1.7;
  tab-size: 2;
}
pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}
pre .key, pre .f, pre .flag { color: #8cb4ff; }
pre .str, pre .s, pre .string { color: #b9e3a8; }
pre .num, pre .v, pre .var { color: #f4c56a; }
pre .bool, pre .k, pre .keyword { color: #d0b6ff; }
pre .null, pre .c, pre .comment, pre .o, pre .op, pre .dim { color: var(--code-dim); }
pre .cmd, pre .highlight { color: #5fe3c3; }
pre .g { color: #7fd99b; }
pre .r { color: #ff8a80; }
pre .y { color: #f4c56a; }
:not(pre) > code {
  padding: 0.05em 0.35em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.base-url {
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* Product prompt at the foot of tool pages */
.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 48px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sheet);
}
.cta-banner p { max-width: 32em; color: var(--ink-2); font-size: 1rem; }

/* Scroll-reveal is homepage-only; never hide content elsewhere */
.reveal { opacity: 1; transform: none; }