* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  --ink: #f6f3ed;
  --body: #d7d2c9;
  --meta: #beb7ac;
  --muted: #8e877d;
  --panel: rgba(10, 11, 8, 0.76);
  --line: rgba(255, 140, 95, 0.3);
  --orange: #ff4124;
  --focus: #ff7a55;
  --xyz: #faafa5;
  --llc: #e97862;
  --org: #f45d43;
  /* Reserved privacy link color, canon 2026-08-26. Nothing else uses it. */
  --rk-privacy: #c7b6f5;
  /* Document shell. Prose pages cap their article at a reading measure, so a
     wider box would only add gutter. A demo is a two column tool rather than a
     document: its right column carries monospace blocks that must not need a
     horizontal scrollbar, so it gets the wide shell. */
  --shell: min(1180px, calc(100% - 48px));
  --shell-wide: min(1320px, calc(100% - 48px));
}

html {
  background: #0a0b08;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #15170f;
  color: var(--body);
  font-family: "Instrument Sans", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--orange);
  text-decoration: none;
}

a:hover {
  color: var(--focus);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.site-backdrop,
.site-grid,
.edge-glow {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.site-backdrop {
  background-image:
    linear-gradient(180deg, rgba(8, 9, 7, 0.72), rgba(8, 9, 7, 0.94)),
    url("/assets/bg.png");
  background-position: center;
  background-size: cover;
}

.site-grid {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 124, 72, 0.18) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255, 124, 72, 0.14) 0 1px, transparent 1px 42px);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.86) 18%, rgba(0, 0, 0, 0.34) 46%, transparent 72%);
}

/* Canon edge glow, the ramp. rk_branding/canon/site-canon.md, ratified
   2026-08-26. One inverted radial masked to the bottom band, replacing three
   additive sources that read as three hot spots at wide viewports. The alpha
   is 0.24, not 0.4: that is what keeps the grid legible through the wider
   band, and raising it back defeats the layer order. */
.edge-glow {
  background-image:
    radial-gradient(66% 60% at 50% 36%, transparent 89%, rgba(255, 104, 54, 0.24) 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 22%, rgba(0, 0, 0, 0.62) 36%, rgba(0, 0, 0, 0.22) 50%, transparent 66%);
  mask-image: linear-gradient(0deg, #000 0%, #000 22%, rgba(0, 0, 0, 0.62) 36%, rgba(0, 0, 0, 0.22) 50%, transparent 66%);
}

.page-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

.site-header {
  display: flex;
  width: 100%;
  padding: 18px 30px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header nav {
  display: flex;
  gap: 26px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.site-header nav a {
  color: var(--ink);
}

/* 16px, not 10px: the wordmark is a monospace domain string, so a tight gap
   made the chip read as part of it. llc clears its 42px image mark at 8px;
   text needs more. */
.brand-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

/* Mirrors the app's app-bar BETA chip (_Rand0mBetaChip, per xyz #275/#286):
   borderless neutral scrim + white text, never a brand tint that can wash
   out against the orange glow. The fill is a LIGHT scrim, not the black one
   llc uses: black at 32% over the #15170f canon backdrop is a near-invisible
   change, so the chip rendered as bare white text with no pill at all.
   Remove at v1. */
.beta-chip {
  display: inline-flex;
  padding: 3px 7px;
  align-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  flex-shrink: 0;
  font: 800 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
}

.site-mark {
  display: block;
  width: auto;
  height: 42px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.accent {
  color: var(--xyz);
}

.eyebrow,
.meta,
.status,
.source-meta,
.source-link {
  font-family: "IBM Plex Mono", monospace;
}

.eyebrow {
  margin: 0;
  color: var(--meta);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1,
h2,
h3,
.card-top strong {
  color: var(--ink);
  font-family: "Patrick Hand", cursive;
  font-weight: 400;
}

.landing-main {
  display: grid;
  width: min(940px, calc(100% - 48px));
  margin: auto;
  padding: 72px 0 96px;
  gap: 38px;
}

.hero {
  display: grid;
  max-width: 760px;
  margin: 0 auto;
  gap: 14px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 1.08;
}

.hero > p:last-child {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.08rem;
}

.standard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.standard-card {
  display: flex;
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--body);
  flex-direction: column;
  gap: 14px;
}

.standard-card:hover {
  border-color: var(--focus);
  background: rgba(14, 15, 11, 0.9);
}

.card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.card-top strong {
  font-size: 2.2rem;
  line-height: 1;
}

.status {
  padding: 4px 8px;
  border: 1px solid rgba(250, 175, 165, 0.4);
  border-radius: 999px;
  color: var(--xyz);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.meta {
  color: var(--meta);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.card-link {
  margin-top: auto;
  color: var(--orange);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
}

.method-layout {
  display: grid;
  min-width: 0;
  width: var(--shell);
  margin: 0 auto 80px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(10, 11, 8, 0.84);
  grid-template-columns: 270px minmax(0, 1fr);
}

.method-sidebar {
  padding: 30px 24px;
  border-right: 1px solid rgba(255, 140, 95, 0.22);
}

.method-sidebar nav {
  display: flex;
  margin: 24px 0;
  flex-direction: column;
  gap: 9px;
}

.method-sidebar nav a {
  padding-left: 11px;
  border-left: 2px solid transparent;
  color: var(--meta);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  line-height: 1.45;
}

.method-sidebar nav a:hover {
  border-left-color: var(--focus);
  color: var(--ink);
}

.toc-level-3 {
  margin-left: 12px;
}

.source-link {
  font-size: 0.72rem;
}

.method-article {
  width: min(100%, 860px);
  min-width: 0;
  padding: 40px 56px 64px;
}

.privacy-layout .method-sidebar > p:last-child {
  margin-top: 24px;
}

.privacy-layout .method-article > h1:first-child {
  margin-top: 0;
}

.source-meta {
  display: flex;
  margin-bottom: 22px;
  align-items: center;
  gap: 12px;
  color: var(--meta);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.source-meta code {
  color: var(--xyz);
}

.markdown-body h1 {
  margin: 0 0 10px;
  font-size: 3rem;
  line-height: 1.08;
}

.markdown-body h2 {
  margin: 2.6rem 0 0.8rem;
  font-size: 2rem;
  line-height: 1.15;
}

.markdown-body h3 {
  margin: 2rem 0 0.7rem;
  font-size: 1.55rem;
}

.markdown-body p,
.markdown-body li {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

/* HIERARCHY, not deletion. The thirteen steps are the spine of K13, and the
   shorter lists further down (the humor rules, the self check) are canonical
   too. They only read as competing standards because every list rendered at
   the same weight. Giving the steps large numerals and their own vertical
   rhythm makes the later lists read as subordinate without removing a word.
   Hooked off the heading id so no content or markup changes; the K13 page
   test pins this selector so a renamed heading fails a build instead of
   silently dropping the treatment. */
.markdown-body #the-thirteen-steps + ol {
  counter-reset: k13-step;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.markdown-body #the-thirteen-steps + ol > li {
  position: relative;
  margin: 0 0 1.6rem;
  padding-left: 3.4rem;
  counter-increment: k13-step;
}

.markdown-body #the-thirteen-steps + ol > li:last-child {
  margin-bottom: 0;
}

/* K13 steps 9 to 12 are the four learning levels; each carries its level's
   icon, vendored from rk_branding. Sits opposite the step numeral, on the
   step's first line. */
.markdown-body #the-thirteen-steps + ol > li > .k13-level-icon {
  float: right;
  margin: 0 0 6px 14px;
  font-size: 22px;
  line-height: 1;
  opacity: 0.85;
  /* Degrade to a visible box rather than nothing if a platform lacks the
     glyph. The level's name is in the step text either way. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.markdown-body #the-thirteen-steps + ol > li::before {
  position: absolute;
  top: -0.12em;
  left: 0;
  color: var(--xyz);
  content: counter(k13-step);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.markdown-body li + li {
  margin-top: 0.72rem;
}

.markdown-body code,
.markdown-body pre {
  font-family: "IBM Plex Mono", monospace;
}

.markdown-body :not(pre) > code {
  color: var(--xyz);
}

.markdown-body pre {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0a0b08;
  color: var(--ink);
  font-size: 0.82rem;
}

.markdown-body blockquote {
  margin: 1.4rem 0;
  padding-left: 18px;
  border-left: 2px solid var(--focus);
}

.disclosure-note {
  margin-top: 36px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(10, 11, 8, 0.74);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
}

.disclosure-note p {
  margin: 0;
}

/* Site canon (rk_branding/canon/site-canon.md): the footer carries NO top
   separator at all, not even a transparent one. It is set off by its padding
   and the edge glow. No dark grounding plate, no footer-local grid, and no
   footer-local bottom glow. The one fixed .site-grid is the only grid and
   .edge-glow already covers this band. Contrast is carried by the link
   colors, not by a dark layer under them. `overflow: hidden` went with the
   pseudo-elements it used to clip; without it a focus ring can no longer be
   cropped at the footer edge. */
.family-footer {
  position: relative;
  width: var(--shell);
  margin: 0 auto;
  padding: 24px 0 28px;
}

.family-footer-line {
  display: block;
  margin: 0;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  line-height: 44px;
  text-align: center;
  white-space: nowrap;
}

.family-footer-mobile {
  display: none;
}

.family-footer .family-link {
  display: inline-block;
  min-height: 44px;
  vertical-align: top;
}

.family-footer .family-link-xyz {
  color: var(--xyz);
}

.family-footer .family-link-llc {
  color: var(--llc);
}

.family-footer .family-link-org {
  color: var(--org);
}

.family-footer .family-link-app {
  color: var(--orange);
}

@media (max-width: 760px) {
  .site-grid {
    background-image:
      repeating-linear-gradient(90deg, rgba(255, 124, 72, 0.16) 0 1px, transparent 1px 46px),
      repeating-linear-gradient(0deg, rgba(255, 124, 72, 0.12) 0 1px, transparent 1px 40px);
  }

  .site-header nav {
    gap: 12px;
    font-size: 0.68rem;
  }

  .brand {
    font-size: 0;
  }

  .landing-main {
    width: min(100% - 40px, 940px);
    padding: 48px 0 64px;
  }

  .hero {
    text-align: left;
  }

  .standard-grid {
    grid-template-columns: 1fr;
  }

  .standard-card {
    min-height: 220px;
    padding: 20px;
  }

  .method-layout {
    width: min(100% - 40px, 1180px);
    border: 0;
    background: transparent;
    grid-template-columns: 1fr;
  }

  .method-sidebar {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .method-sidebar nav {
    display: none;
  }

  .method-article {
    padding: 28px 0 48px;
  }

  .markdown-body h1 {
    font-size: 2.35rem;
  }

  .family-footer {
    width: min(100% - 40px, 1180px);
  }

  .family-footer-desktop {
    display: none;
  }

  .family-footer-mobile {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    font-size: 0.68rem;
    line-height: 1;
    text-align: left;
  }

  .family-footer-mobile > span {
    display: block;
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
  }

  .family-footer-mobile .family-link {
    line-height: 44px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 14px 16px;
  }

  .site-mark {
    height: 34px;
  }
}

/* Markdown tables. K13 1.1.0 publishes its ladder as one. */
.md-table{width:100%;margin:16px 0 0;border-collapse:collapse;font-size:.86rem}
.md-table th,.md-table td{padding:8px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.md-table th{color:var(--ink);font-family:"IBM Plex Mono", monospace;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.md-table td{color:var(--body)}

/* Authored docs pages (overview, get started) share the methodology shell so
   a reader cannot tell which pages are rendered from a standard and which are
   written, apart from the content itself. */
.docs-layout,
.demo-layout {
  display: grid;
  min-width: 0;
  width: var(--shell);
  margin: 0 auto 80px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(10, 11, 8, 0.84);
  grid-template-columns: 270px minmax(0, 1fr);
}

.docs-article,
.demo-article {
  min-width: 0;
  padding: 40px 56px 64px;
}

.docs-article {
  width: min(100%, 860px);
}

.docs-lede {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--meta);
}

.docs-section {
  margin: 0 0 34px;
}

.docs-section h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  color: var(--ink);
}

.docs-section p {
  max-width: 66ch;
  line-height: 1.7;
  color: var(--body);
}

.docs-code {
  margin: 14px 0 0;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.34);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--body);
}

.docs-links,
.level-list {
  margin: 10px 0 0;
  padding-left: 20px;
  line-height: 1.9;
  color: var(--body);
}

.level-list {
  list-style: none;
  padding-left: 0;
}

@media (max-width: 900px) {
  .docs-layout,
  .demo-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-article,
  .demo-article {
    padding: 26px 22px 40px;
  }
}

/* K13 learning level demo. Real interactivity: a radiogroup with roving
   focus, and a result panel that swaps as the selection changes. */
.demo-layout {
  width: var(--shell-wide);
}

/* Earth docs carry three and four column tables, so they take the wide shell
   and a wider article than the prose measure allows. Body copy inside them
   still caps at the reading measure through .docs-section p. */
body.earth .docs-layout {
  width: var(--shell-wide);
}

body.earth .docs-article {
  width: min(100%, 1010px);
}

body.earth .md-table code {
  color: var(--xyz);
}

.table-scroll {
  margin: 16px 0 0;
  overflow-x: auto;
}

.table-scroll .md-table {
  margin: 0;
  min-width: 520px;
}

.demo-article h1 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink);
}

.demo-intro {
  margin: 0 0 24px;
  max-width: 62ch;
  color: var(--body);
  line-height: 1.65;
}

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

.level-cards {
  display: grid;
  gap: 9px;
}

/* The cards are real buttons in a radiogroup. Roving tabindex is set in the
   page script, so exactly one card is in the tab order at a time. */
.level-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.level-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.level-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.level-card[aria-checked="true"] {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

/* Reserved levels are selectable and demoable, and are marked as what they
   are: a different reader, not a different reading level. */
.level-card.is-reserved {
  border-style: dashed;
  opacity: 0.72;
}

.level-card.is-reserved[aria-checked="true"] {
  opacity: 0.8;
}

.level-glyph {
  grid-row: span 2;
  font-size: 22px;
  line-height: 1.1;
  /* Degrade to a visible box rather than to nothing. The level NAME beside
     it is what identifies the level either way. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.level-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.level-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.92rem;
  color: var(--ink);
}

.level-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  color: var(--muted);
}

.level-chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.level-note,
.level-reserved-note {
  grid-column: 2;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--body);
}

.level-reserved-note {
  color: var(--muted);
}

.demo-result {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.demo-answer {
  margin: 0;
  max-width: 64ch;
  line-height: 1.7;
  color: var(--ink);
}

.demo-block {
  margin: 16px 0 0;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.34);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  line-height: 1.65;
  color: var(--body);
  white-space: pre;
}

/* AIEDS demo. Same two column shape as the K13 demo, with the level cards
   replaced by the six values the standard names and does not publish. */
.calc-fields {
  display: grid;
  gap: 12px;
  align-content: start;
}

.calc-field {
  display: grid;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
}

.calc-field:focus-within {
  border-color: var(--focus);
}

.calc-name {
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.calc-unit {
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  text-align: right;
  white-space: nowrap;
}

.calc-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(255, 140, 95, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  grid-column: 1 / -1;
}

.calc-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.calc-note {
  color: var(--meta);
  font-size: 0.72rem;
  grid-column: 1 / -1;
}

.calc-reset {
  justify-self: start;
  margin-top: 2px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 140, 95, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--body);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.calc-reset:hover {
  border-color: var(--focus);
  color: var(--ink);
}

.calc-eyebrow {
  margin-top: 18px;
}

.calc-waiting {
  margin: 10px 0 0;
  color: var(--meta);
  line-height: 1.65;
}

.calc-summary {
  display: grid;
  margin: 16px 0 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
}

.calc-summary dt {
  color: var(--meta);
}

.calc-summary dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.calc-confidence {
  margin: 18px 0 0;
  max-width: 64ch;
  color: var(--body);
  font-size: 0.9rem;
  line-height: 1.65;
}

.calc-footnote {
  margin: 26px 0 0;
  max-width: 76ch;
  color: var(--meta);
  font-size: 0.86rem;
  line-height: 1.7;
}

/* Per-section nav, shown once a section has more than one page. */
.section-nav {
  display: grid;
  gap: 4px;
  margin-bottom: 22px;
}

.section-nav-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  color: var(--body);
}

.section-nav-link.is-current {
  color: var(--ink);
}

@media (max-width: 900px) {
  .demo-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .demo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Privacy and analytics is a legal disclosure, not navigation, so it takes the
   reserved colour rather than the family line's. Canon 2026-08-26. */
.family-footer-privacy {
  margin: 6px 0 0;
  /* Matches .family-footer-line's own alignment, not an independent choice:
     centred here because the desktop family line is centred. The mobile
     override below must stay AFTER this rule in source order: it lives in
     the same max-width: 760px breakpoint as .family-footer-mobile further
     up the file, and an unconditional rule this far down would otherwise
     win the cascade over an earlier media block at equal specificity. */
  text-align: center;
}

@media (max-width: 760px) {
  /* Matches .family-footer-mobile's own alignment, not centring: the mobile
     family line is left aligned, so the privacy row sits under it at the
     same left edge instead of staying centred against a stack that no
     longer is. */
  .family-footer-privacy {
    text-align: left;
  }
}

.family-footer .privacy-link {
  color: var(--rk-privacy);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}