/* Gandalf Protocol — page composition only. Palette, type, spacing, and components
   come from ../gandalf-system/gandalf-design-system.css. */

html { scroll-padding-top: 6rem; }
body { overflow-x: hidden; }

.scroll-progress {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--space-1);
  background: transparent;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-action-primary);
  transform: scaleX(0);
  transform-origin: left;
}

.protocol-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: var(--nav-bg);
  border-bottom: var(--border-thin) solid var(--nav-border);
  backdrop-filter: blur(18px);
}

.protocol-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: min(100% - 2rem, 84rem);
  min-height: 4.5rem;
  margin-inline: auto;
}

.protocol-brand { text-decoration: none; }
.protocol-brand > span:last-child { display: grid; line-height: var(--leading-tight); }
.protocol-brand strong { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.protocol-brand small { color: var(--color-text-muted); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.draft-badge { flex: none; color: var(--color-warning); border-color: var(--color-warning); }

.header-links { display: flex; flex: 1; justify-content: center; gap: var(--space-8); }
.header-links a,
.protocol-footer nav a { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
.header-links a:hover,
.protocol-footer nav a:hover { color: var(--color-action-primary); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-github { min-height: var(--control-target); }

.protocol-shell {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  width: min(100% - 2rem, 84rem);
  margin-inline: auto;
}

.section-nav {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  max-height: calc(100vh - 7rem);
  padding-block: var(--space-10);
  overflow-y: auto;
}

.section-nav p { margin: 0 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.section-nav a { display: block; padding: var(--space-3) 0 var(--space-3) var(--space-5); color: var(--color-text-muted); border-left: var(--border-emphasis) solid var(--color-border-default); font-size: var(--text-sm); text-decoration: none; transition: color var(--motion-fast), border-color var(--motion-fast); }
.section-nav a:hover { color: var(--color-text-primary); }
.section-nav a[aria-current="true"] { color: var(--color-action-primary); border-left-color: var(--color-action-primary); }

main { min-width: 0; }

.protocol-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  min-height: calc(100vh - 4.5rem);
  padding-block: clamp(5rem, 10vw, 8rem);
}

.protocol-hero__copy { position: relative; z-index: 2; }
.protocol-hero h1 { max-width: 12ch; margin-bottom: var(--space-8); font-size: clamp(3.25rem, 6.2vw, 5.75rem); letter-spacing: -0.055em; line-height: 0.92; }
.hero-lead { max-width: 58ch; color: var(--color-text-secondary); font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-10); }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-10) 0 0; padding: 0; color: var(--color-text-muted); font-size: var(--text-sm); list-style: none; }
.hero-facts li { display: flex; gap: var(--space-3); align-items: center; }
.hero-facts li span { color: var(--color-action-primary); font-size: var(--text-xs); }

.policy-orbit { position: relative; min-height: 37rem; }
.orbit-rings { position: absolute; inset: 9% 0; border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-circle); }
.orbit-rings::before,
.orbit-rings::after { position: absolute; border: var(--border-thin) solid var(--color-border-subtle); border-radius: inherit; content: ""; }
.orbit-rings::before { inset: 10%; }
.orbit-rings::after { inset: 24%; border-color: var(--color-selection); }

.orbit-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 10rem;
  aspect-ratio: 1;
  padding: var(--space-6);
  background: var(--color-surface-elevated);
  border: var(--border-thin) solid var(--color-action-primary);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-elevation-2);
  text-align: center;
  transform: translate(-50%, -50%);
}
.orbit-core strong { color: var(--color-action-primary); font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: 1; }
.orbit-core small { color: var(--color-text-muted); font-size: var(--text-xs); }
.mini-label { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; }

.orbit-factor {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 11rem;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevation-1);
}
.orbit-factor strong,
.orbit-factor small { display: block; }
.orbit-factor strong { font-family: var(--font-serif); font-weight: var(--weight-medium); }
.orbit-factor small { color: var(--color-text-muted); font-size: var(--text-xs); }
.orbit-factor--owner { top: 5%; left: 10%; }
.orbit-factor--partner { top: 30%; right: -4%; }
.orbit-factor--custodian { bottom: 5%; left: 8%; }
.factor-icon { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; color: var(--color-action-primary-ink); background: var(--color-action-primary); border-radius: var(--radius-circle); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.illustration-note { position: absolute; inset: auto 0 -2rem; margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }

.proof-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: var(--color-surface-inset); border-block: var(--border-thin) solid var(--color-border-default); }
.proof-band div { padding: var(--space-9); border-right: var(--border-thin) solid var(--color-border-default); }
.proof-band div:last-child { border-right: 0; }
.proof-band strong,
.proof-band span { display: block; }
.proof-band strong { margin-bottom: var(--space-2); font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.proof-band span { color: var(--color-text-muted); font-size: var(--text-xs); }

.protocol-section { padding-block: clamp(5rem, 10vw, 9rem); border-top: var(--border-thin) solid var(--color-border-default); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); gap: clamp(2rem, 8vw, 8rem); align-items: end; margin-bottom: var(--space-12); }
.section-heading h2 { max-width: 18ch; margin: 0; letter-spacing: -0.035em; }
.section-heading > p { max-width: 58ch; margin: 0; color: var(--color-text-secondary); }

/* RFC-style article composition */
.doc-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--space-10);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.doc-meta > div {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-7);
  border-right: var(--border-thin) solid var(--color-border-default);
  border-bottom: var(--border-thin) solid var(--color-border-default);
}
.doc-meta > div:nth-child(3n) { border-right: 0; }
.doc-meta > div:nth-last-child(-n + 3) { border-bottom: 0; }
.doc-meta dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}
.doc-meta dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.doc-meta code { font-size: var(--text-xs); }

.prose-block {
  max-width: 72ch;
  margin: 0 0 var(--space-10);
}
.prose-block h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
.prose-block p {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-copy);
}
.prose-block p:last-child { margin-bottom: 0; }
.prose-block strong { color: var(--color-text-primary); }
.prose-block code {
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
.requirements-block {
  padding: var(--space-8);
  background: var(--color-surface-inset);
  border: var(--border-thin) solid var(--color-border-default);
  border-left: var(--border-emphasis) solid var(--color-action-primary);
  border-radius: var(--radius-card);
}

.article-toc {
  margin-top: var(--space-10);
  padding: var(--space-9);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-card);
}
.article-toc h3 {
  margin: 0 0 var(--space-6);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
.article-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-10);
  margin: 0;
  padding: 0 0 0 1.25rem;
  color: var(--color-text-secondary);
}
.article-toc a {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.article-toc a:hover { color: var(--color-action-primary); }

.procedure-steps {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
}
.procedure-steps > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-card);
}
.procedure-steps > li > span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-action-primary-ink);
  background: var(--color-action-primary);
  border-radius: var(--radius-circle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.procedure-steps h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
.procedure-steps p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
}
.procedure-steps code { font-size: 0.92em; overflow-wrap: anywhere; }
.procedure-steps strong { color: var(--color-text-primary); }
.recovery-procedure { margin-bottom: var(--space-12); }
.recovery-steps { margin-top: var(--space-4); }

.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.person-card { position: relative; min-height: 20rem; padding: var(--space-10); overflow: hidden; background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.person-card::after { position: absolute; inset: auto -10% -40% auto; width: 12rem; aspect-ratio: 1; background: var(--color-canvas-glow); border-radius: var(--radius-circle); content: ""; opacity: var(--reserved-opacity); }
.person-card > * { position: relative; z-index: 1; }
.person-card h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.person-card p:not(.eyebrow) { color: var(--color-text-secondary); }
.person-mark { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; margin-bottom: var(--space-8); color: var(--color-action-primary); border: var(--border-thin) solid var(--color-action-primary); border-radius: var(--radius-circle); font-family: var(--font-serif); font-size: var(--text-xl); }
.person-card .status { margin-top: var(--space-6); white-space: normal; }
.separation-callout { max-width: 65rem; margin: var(--space-10) auto 0; }

.protocol-animation { overflow: hidden; background: var(--color-surface); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-elevation-1); }
.animation-stage { position: relative; min-height: 30rem; overflow: hidden; background: radial-gradient(circle at 50% 45%, var(--color-canvas-glow), transparent 28rem), var(--color-canvas); }
.stage-node { position: absolute; z-index: 2; display: grid; justify-items: center; gap: var(--space-2); min-width: 10rem; padding: var(--space-5); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-notice); box-shadow: var(--shadow-elevation-1); text-align: center; opacity: 0.18; transform: translateY(var(--space-4)) scale(0.96); transition: opacity var(--motion-slow), transform var(--motion-slow), border-color var(--motion-slow); }
.stage-node strong { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.stage-node small { color: var(--color-text-muted); font-size: var(--text-xs); }
.node-glyph { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: var(--space-2); color: var(--color-action-primary); border: var(--border-thin) solid currentColor; border-radius: var(--radius-circle); font-family: var(--font-mono); font-size: var(--text-xs); }
.stage-source { top: 2.5rem; left: 3%; }
.stage-cek { top: 2.5rem; left: 31%; }
.stage-cipher { top: 2.5rem; left: 57%; }
.stage-backup { top: 2.5rem; right: 3%; }
.stage-combine { bottom: 2.5rem; left: 58%; }
.stage-vault { right: 3%; bottom: 2.5rem; }

.stage-shares { position: absolute; z-index: 2; top: 12rem; left: 23%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); width: 54%; opacity: 0.18; transition: opacity var(--motion-slow), transform var(--motion-slow); transform: translateY(var(--space-4)); }
.share { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-5); color: var(--color-text-muted); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-notice); text-align: center; }
.share > span { display: grid; place-items: center; width: 1.8rem; aspect-ratio: 1; color: var(--color-action-primary-ink); background: var(--color-action-primary); border-radius: var(--radius-circle); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.share small { font-size: var(--text-xs); }
.stage-factors { position: absolute; z-index: 2; top: 20rem; left: 23%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); width: 54%; opacity: 0.18; transition: opacity var(--motion-slow), transform var(--motion-slow); transform: translateY(var(--space-4)); }
.stage-factors span { padding: var(--space-3); color: var(--color-text-muted); border-top: var(--border-thin) solid var(--color-action-primary); font-size: var(--text-xs); text-align: center; }
.stage-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-line { fill: none; stroke: var(--color-action-primary); stroke-dasharray: 8 8; stroke-linecap: round; stroke-width: 2; opacity: 0.1; transition: opacity var(--motion-slow); }

.protocol-animation[data-step="0"] .stage-source,
.protocol-animation[data-step="1"] .stage-source,
.protocol-animation[data-step="1"] .stage-cek,
.protocol-animation[data-step="1"] .stage-cipher,
.protocol-animation[data-step="2"] .stage-cipher,
.protocol-animation[data-step="3"] .stage-cipher,
.protocol-animation[data-step="3"] .stage-backup,
.protocol-animation[data-step="4"] .stage-backup,
.protocol-animation[data-step="4"] .stage-combine,
.protocol-animation[data-step="5"] .stage-combine,
.protocol-animation[data-step="5"] .stage-vault { opacity: 1; border-color: var(--color-action-primary); transform: translateY(0) scale(1); }
.protocol-animation[data-step="2"] .stage-shares,
.protocol-animation[data-step="3"] .stage-shares,
.protocol-animation[data-step="3"] .stage-factors,
.protocol-animation[data-step="4"] .stage-shares,
.protocol-animation[data-step="4"] .stage-factors { opacity: 1; transform: translateY(0); }
.protocol-animation[data-step="1"] .flow-line--1,
.protocol-animation[data-step="1"] .flow-line--2,
.protocol-animation[data-step="2"] .flow-line--3,
.protocol-animation[data-step="3"] .flow-line--3,
.protocol-animation[data-step="4"] .flow-line--4,
.protocol-animation[data-step="5"] .flow-line--5 { opacity: 0.8; }

.animation-console { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 8rem; padding: var(--space-8); background: var(--color-surface-inset); border-top: var(--border-thin) solid var(--color-border-default); }
.animation-console > div:first-child { max-width: 55rem; }
.step-count { color: var(--color-action-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; }
.animation-narration { margin: var(--space-3) 0 0; color: var(--color-text-primary); }
.animation-help { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.animation-controls { display: flex; flex-wrap: wrap; flex: none; gap: var(--space-2); }
.static-journey { display: none; }

.ascii-figure { margin: var(--space-12) 0 0; overflow: hidden; background: var(--color-code-bg); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-card); }
.ascii-figure figcaption { display: flex; gap: var(--space-5); padding: var(--space-5) var(--space-7); color: var(--color-text-secondary); background: var(--color-surface-inset); border-bottom: var(--border-thin) solid var(--color-border-default); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ascii-figure figcaption span { color: var(--color-action-primary); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-tag); text-transform: uppercase; }
.ascii-figure pre { margin: 0; padding: var(--space-8); overflow-x: auto; color: var(--color-code-ink); font-size: clamp(0.68rem, 1.2vw, 0.82rem); line-height: 1.65; }
.ascii-figure code { font: inherit; white-space: pre; }

.policy-carousel { min-width: 0; }
.policy-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.policy-track:focus-visible { outline: var(--border-emphasis) solid var(--color-focus-ring); outline-offset: var(--space-2); }
.policy-card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-4); min-width: 0; min-height: 28rem; padding: var(--space-9); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.policy-card--featured { background: var(--color-surface-inset); border-color: var(--color-action-primary); box-shadow: var(--shadow-elevation-1); }
.policy-card h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.policy-card__summary { color: var(--color-text-primary); font-size: var(--text-lg); line-height: var(--leading-heading); }
.policy-card > p:not(.eyebrow) { color: var(--color-text-secondary); }
.policy-metric { display: grid; place-items: center; width: 8.5rem; aspect-ratio: 1; margin-top: var(--space-5); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-action-primary); border-radius: var(--radius-circle); text-align: center; }
.policy-metric strong { color: var(--color-action-primary); font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: var(--weight-medium); }
.policy-metric span { max-width: 8rem; color: var(--color-text-muted); font-size: var(--text-xs); }
.policy-carousel-help { display: none; }

.capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-10); align-items: start; }
.capture-card { min-width: 0; margin: 0; }
.capture-card--wide { grid-column: span 2; }
.capture-frame { position: relative; width: min(100%, var(--popup-width)); margin-inline: auto; padding: var(--space-5); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-elevation-2); }
.capture-frame picture,
.capture-frame img { display: block; width: 100%; height: auto; }
.capture-frame img { border-radius: var(--radius-control); }
.capture-card figcaption { display: grid; justify-items: center; gap: var(--space-2); margin-top: var(--space-7); text-align: center; }
.capture-card figcaption strong { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.capture-card figcaption small { color: var(--color-text-muted); }
.capture-callout { position: absolute; z-index: 3; max-width: 13rem; padding: var(--space-3) var(--space-4); color: var(--color-action-primary-ink); background: var(--color-action-primary); border-radius: var(--radius-control); box-shadow: var(--shadow-elevation-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-copy); }
.capture-callout::after { position: absolute; width: var(--space-8); height: var(--border-emphasis); background: var(--color-action-primary); content: ""; }
.capture-callout--threshold { top: 58%; right: -12%; }
.capture-callout--threshold::after { top: 50%; right: 100%; }
.capture-callout--labels { top: 27%; left: -15%; }
.capture-callout--labels::after { top: 50%; left: 100%; }
.capture-callout--fingerprint { right: -20%; bottom: 16%; }
.capture-callout--fingerprint::after { top: 50%; right: 100%; }
.capture-callout--manifest { top: 25%; left: -18%; }
.capture-callout--manifest::after { top: 50%; left: 100%; }
.capture-callout--rewrap { right: -20%; bottom: 18%; }
.capture-callout--rewrap::after { top: 50%; right: 100%; }
.capture-callout--network { top: 36%; right: -18%; }
.capture-callout--network::after { top: 50%; right: 100%; }
.capture-callout--atomic { bottom: 10%; left: -12%; }
.capture-callout--atomic::after { top: 50%; left: 100%; }
.capture-provenance { max-width: 70ch; margin: var(--space-12) auto 0; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

.scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.scope-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; padding: var(--space-9); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.scope-card > .alert { grid-column: 1 / -1; }
.scope-card h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.scope-card p { color: var(--color-text-secondary); }
.scope-mark { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; color: var(--color-action-primary); border: var(--border-thin) solid currentColor; border-radius: var(--radius-circle); font-family: var(--font-serif); font-size: var(--text-xl); }
.inclusion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-8); }
.include-card,
.exclude-card { padding: var(--space-10); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.include-card { border-top: var(--border-emphasis) solid var(--color-success); }
.exclude-card { border-top: var(--border-emphasis) solid var(--color-danger); }
.include-card h3,
.exclude-card h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.check-list,
.cross-list { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; color: var(--color-text-secondary); list-style: none; }
.check-list li,
.cross-list li { position: relative; padding-left: var(--space-8); }
.check-list li::before,
.cross-list li::before { position: absolute; top: 0; left: 0; font-weight: var(--weight-bold); }
.check-list li::before { color: var(--color-success); content: "✓"; }
.cross-list li::before { color: var(--color-danger); content: "×"; }

.envelope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.envelope-card { position: relative; padding: var(--space-10); overflow: hidden; background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.envelope-card::after { position: absolute; inset: auto -5rem -8rem auto; width: 16rem; aspect-ratio: 1; border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-circle); content: ""; }
.envelope-card--sealed { border-color: var(--color-action-primary); }
.envelope-card h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.envelope-card ul { display: grid; gap: var(--space-3); padding-left: 1.2rem; color: var(--color-text-secondary); }
.code-example { margin-top: var(--space-10); overflow: hidden; background: var(--color-code-bg); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-card); }
.code-example__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-7); background: var(--color-surface-inset); border-bottom: var(--border-thin) solid var(--color-border-default); }
.code-example__header > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.code-example pre { margin: 0; padding: var(--space-8); overflow-x: auto; color: var(--color-code-ink); font-size: var(--text-sm); line-height: 1.65; }
.code-example code { font: inherit; }
.example-disclaimer { margin: 0; padding: var(--space-5) var(--space-7); color: var(--color-text-muted); background: var(--color-surface-inset); border-top: var(--border-thin) solid var(--color-border-default); font-size: var(--text-xs); }
.normative-details { margin-top: var(--space-8); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.normative-details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--control-target); padding: var(--space-6) var(--space-8); list-style: none; }
.normative-details summary::-webkit-details-marker { display: none; }
.normative-details summary span:first-child { display: grid; }
.normative-details summary small { margin-top: var(--space-1); color: var(--color-text-muted); }
.normative-details summary > span:last-child { color: var(--color-action-primary); font-size: var(--text-xl); transition: transform var(--motion-fast); }
.normative-details[open] summary > span:last-child { transform: rotate(45deg); }
.normative-details > div { padding: var(--space-8); color: var(--color-text-secondary); border-top: var(--border-thin) solid var(--color-border-default); }
.normative-details > div p:last-child { margin-bottom: 0; }
.table-wrap { margin-top: var(--space-8); overflow-x: auto; border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.protocol-table { width: 100%; min-width: 42rem; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); }
.protocol-table caption { padding: var(--space-5) var(--space-6); color: var(--color-text-primary); background: var(--color-surface-inset); border-bottom: var(--border-thin) solid var(--color-border-default); font-family: var(--font-serif); font-size: var(--text-lg); text-align: left; }
.protocol-table th,
.protocol-table td { padding: var(--space-5) var(--space-6); border-bottom: var(--border-thin) solid var(--color-border-default); text-align: left; vertical-align: top; }
.protocol-table thead th { color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-tag); text-transform: uppercase; }
.protocol-table tbody tr:last-child > * { border-bottom: 0; }
.protocol-table tbody th { white-space: nowrap; }
.schema-note { margin: var(--space-8) 0 0; padding: var(--space-6); color: var(--color-text-secondary); background: var(--color-surface-inset); border-left: var(--border-emphasis) solid var(--color-information); }
.schema-note code { overflow-wrap: anywhere; }

.crypto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.crypto-grid article { min-height: 15rem; padding: var(--space-8); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.crypto-grid article:hover { border-color: var(--color-action-primary); }
.crypto-grid h3 { margin-top: var(--space-8); font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.crypto-grid p { color: var(--color-text-secondary); }
.crypto-index { color: var(--color-action-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tag); }
.aad-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-10); margin-top: var(--space-10); padding: var(--space-10); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-action-primary); border-radius: var(--radius-card); }
.aad-card h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.aad-card p:not(.eyebrow) { color: var(--color-text-secondary); }
.aad-card dl { display: grid; gap: 0; margin: 0; }
.aad-card dl div { padding: var(--space-4) 0; border-bottom: var(--border-thin) solid var(--color-border-default); }
.aad-card dl div:last-child { border-bottom: 0; }
.aad-card dt { color: var(--color-action-primary); font-size: var(--text-sm); }
.aad-card dd { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.recovery-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: 0; padding: 0; list-style: none; counter-reset: recovery; }
.recovery-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); min-height: 13rem; padding: var(--space-7); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.recovery-steps li > span { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--color-action-primary-ink); background: var(--color-action-primary); border-radius: var(--radius-circle); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.recovery-steps h3 { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.recovery-steps p { color: var(--color-text-secondary); font-size: var(--text-sm); }
.diagram-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.diagram-grid .ascii-figure { min-width: 0; }
.duplicate-card { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-10); margin-top: var(--space-10); padding: var(--space-10); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.duplicate-card h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.duplicate-rules { display: grid; gap: var(--space-6); }
.duplicate-rules p { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-6); margin: 0; padding-bottom: var(--space-6); color: var(--color-text-secondary); border-bottom: var(--border-thin) solid var(--color-border-default); }
.duplicate-rules p:last-child { padding-bottom: 0; border-bottom: 0; }
.duplicate-rules strong { color: var(--color-text-primary); }

.threat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.threat-grid article { padding: var(--space-10); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.threat-protects { border-top: var(--border-emphasis) solid var(--color-success) !important; }
.threat-limits { border-top: var(--border-emphasis) solid var(--color-warning) !important; }
.threat-grid h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.threat-grid ul { display: grid; gap: var(--space-4); padding-left: 1.2rem; color: var(--color-text-secondary); }
.no-server { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; margin-top: var(--space-10); padding: var(--space-10); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-action-primary); border-radius: var(--radius-card); }
.no-server h3 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.no-server p:last-child { margin: 0; color: var(--color-text-secondary); }
.trust-diagram { margin-top: var(--space-10); }
.audit-note { max-width: 70ch; margin: var(--space-8) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.artifact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.artifact-card { display: grid; min-height: 11rem; padding: var(--space-7); color: var(--color-text-primary); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); text-decoration: none; }
.artifact-card:hover { border-color: var(--color-action-primary); box-shadow: var(--shadow-elevation-1); }
.artifact-card > span { color: var(--color-action-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; }
.artifact-card strong { align-self: end; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.artifact-card small { margin-top: var(--space-2); overflow-wrap: anywhere; color: var(--color-text-muted); }
.interop-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-6); align-items: center; margin-top: var(--space-10); padding: var(--space-8); background: var(--color-surface-inset); border: var(--border-thin) solid var(--color-border-default); border-radius: var(--radius-card); }
.interop-row > div { display: grid; justify-items: center; text-align: center; }
.interop-row strong { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.interop-row span { color: var(--color-text-muted); font-size: var(--text-xs); }
.interop-row > span { color: var(--color-action-primary); font-size: var(--text-xl); }
.final-links { display: flex; align-items: end; justify-content: space-between; gap: var(--space-10); margin-top: var(--space-13); padding-top: var(--space-12); border-top: var(--border-thin) solid var(--color-border-default); }
.final-links h2 { max-width: 16ch; }

.protocol-footer { display: grid; grid-template-columns: auto minmax(15rem, 1fr) auto; gap: var(--space-10); align-items: center; width: min(100% - 2rem, 84rem); margin-inline: auto; padding-block: var(--space-12); border-top: var(--border-thin) solid var(--color-border-default); }
.protocol-footer p { max-width: 50ch; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.protocol-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-6); }

@media (max-width: 79.99rem) {
  .protocol-shell { grid-template-columns: 1fr; }
  .section-nav { display: none; }
  .capture-callout--threshold,
  .capture-callout--fingerprint,
  .capture-callout--rewrap,
  .capture-callout--network { right: var(--space-2); }
  .capture-callout--labels,
  .capture-callout--manifest,
  .capture-callout--atomic { left: var(--space-2); }
}

@media (max-width: 63.99rem) {
  .header-links { display: none; }
  .protocol-hero { grid-template-columns: 1fr; min-height: auto; }
  .protocol-hero__copy { padding-top: var(--space-8); }
  .policy-orbit { width: min(100%, 38rem); margin-inline: auto; }
  .doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-meta > div:nth-child(3n) { border-right: var(--border-thin) solid var(--color-border-default); }
  .doc-meta > div:nth-child(2n) { border-right: 0; }
  .doc-meta > div:nth-last-child(-n + 3) { border-bottom: var(--border-thin) solid var(--color-border-default); }
  .doc-meta > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .article-toc ol { grid-template-columns: 1fr; }
  .people-grid,
  .crypto-grid,
  .recovery-steps,
  .artifact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-grid .person-card:last-child { grid-column: span 2; }
  .stage-node { min-width: 8rem; padding: var(--space-4); }
  .stage-source { left: 2%; }
  .stage-cek { left: 27%; }
  .stage-cipher { left: 52%; }
  .stage-backup { right: 2%; }
  .stage-combine { left: 52%; }
  .animation-console { align-items: flex-start; flex-direction: column; }
  .animation-controls { width: 100%; }
  .policy-track { display: flex; gap: var(--space-6); padding: var(--space-2) var(--space-2) var(--space-6); overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: var(--space-2); scroll-snap-type: inline mandatory; }
  .policy-card { flex: 0 0 min(86%, 22rem); scroll-snap-align: start; }
  .policy-carousel-help { display: block; margin: var(--space-3) var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-xs); }
  .capture-grid { gap-inline: var(--space-8); }
  .diagram-grid { grid-template-columns: 1fr; }
  .duplicate-card { grid-template-columns: 1fr; }
  .protocol-footer { grid-template-columns: auto 1fr; }
  .protocol-footer nav { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 47.99rem) {
  html { scroll-padding-top: 5rem; }
  .protocol-header__inner { width: min(100% - 1rem, 84rem); min-height: 4rem; gap: var(--space-4); }
  .header-actions { margin-left: auto; }
  .header-github,
  .theme-label { display: none; }
  .theme-toggle { min-width: var(--control-target); padding-inline: var(--space-3); }
  .protocol-shell { width: min(100% - 1rem, 84rem); }
  .protocol-hero { padding-block: var(--space-12) var(--space-13); }
  .protocol-hero h1 { font-size: clamp(3.25rem, 17vw, 5rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .hero-facts { display: grid; gap: var(--space-4); }
  .policy-orbit { min-height: 31rem; }
  .orbit-core { width: 8.5rem; }
  .orbit-factor { min-width: 9.5rem; padding: var(--space-4); }
  .orbit-factor--owner { left: 0; }
  .orbit-factor--partner { right: 0; }
  .orbit-factor--custodian { left: 0; }
  .proof-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-band { margin-inline: 0; }
  .proof-band div:nth-child(2) { border-right: 0; }
  .proof-band div:nth-child(-n + 2) { border-bottom: var(--border-thin) solid var(--color-border-default); }
  .doc-meta { grid-template-columns: 1fr; }
  .doc-meta > div { border-right: 0; }
  .doc-meta > div:nth-last-child(-n + 2) { border-bottom: var(--border-thin) solid var(--color-border-default); }
  .doc-meta > div:last-child { border-bottom: 0; }
  .procedure-steps > li { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); }
  .protocol-section { padding-block: var(--space-13); }
  .section-heading { grid-template-columns: 1fr; gap: var(--space-6); }
  .people-grid,
  .crypto-grid,
  .recovery-steps,
  .artifact-grid,
  .scope-grid,
  .inclusion-grid,
  .envelope-grid,
  .threat-grid { grid-template-columns: 1fr; }
  .people-grid .person-card:last-child { grid-column: auto; }
  .animation-stage { display: none; }
  .animation-console { min-height: 0; padding: var(--space-6); }
  .animation-controls { display: grid; grid-template-columns: auto 1fr auto; }
  .animation-controls [data-animation-replay] { grid-column: 1 / -1; }
  .ascii-figure pre { padding: var(--space-6); }
  .policy-card { min-height: 27rem; padding: var(--space-8); }
  .policy-metric { width: 8rem; }
  .capture-grid { grid-template-columns: 1fr; }
  .capture-card--wide { grid-column: auto; }
  .capture-callout { position: relative; inset: auto !important; display: block; max-width: none; margin-top: var(--space-3); }
  .capture-callout::after { display: none; }
  .code-example__header { align-items: flex-start; flex-direction: column; }
  .aad-card { grid-template-columns: 1fr; padding: var(--space-7); }
  .duplicate-rules p { grid-template-columns: 1fr; gap: var(--space-2); }
  .no-server { grid-template-columns: 1fr; }
  .interop-row { grid-template-columns: 1fr; }
  .interop-row > span { transform: rotate(90deg); }
  .final-links { align-items: stretch; flex-direction: column; }
  .protocol-footer { grid-template-columns: 1fr; width: min(100% - 1rem, 84rem); }
  .protocol-footer nav { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .static-journey { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-8); border-top: var(--border-thin) solid var(--color-border-default); }
  .static-journey li { color: var(--color-text-secondary); }
  .static-journey strong { color: var(--color-text-primary); }
  .animation-stage { display: none; }
  .animation-console { display: none; }
}

@media print {
  .protocol-header,
  .section-nav,
  .scroll-progress,
  .animation-console,
  .capture-callout,
  .hero-actions,
  .final-links .hero-actions { display: none !important; }
  .protocol-shell { display: block; width: 100%; }
  .protocol-hero { display: block; min-height: auto; padding: 1cm 0; }
  .policy-orbit { display: none; }
  .proof-band { margin: 0; }
  .protocol-section { padding: 0.8cm 0; break-before: page; }
  .section-heading { display: block; }
  .animation-stage { display: none; }
  .static-journey { display: grid; }
  .capture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capture-card--wide { grid-column: auto; }
  .capture-frame { box-shadow: none; }
  .policy-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .policy-card { min-height: 0; }
  .policy-carousel-help { display: none; }
  .ascii-figure,
  .capture-card,
  .scope-card,
  .envelope-card,
  .crypto-grid article,
  .artifact-card,
  .procedure-steps > li,
  .doc-meta,
  .article-toc,
  .spec-hero,
  .rfc-document > * { break-inside: avoid; }
  .protocol-footer { width: 100%; }
}

/* —— G.A.N.D.A.L.F. acronym expansion —— */
.acronym-expand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
}
.acronym-expand li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-sm);
}
.acronym-expand strong {
  color: var(--color-action-primary);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.acronym-expand--hero { margin-top: calc(-1 * var(--space-4)); }

/* —— Spec page (RFC HTML edition) —— */
.spec-page .protocol-hero { min-height: auto; }
.spec-shell { padding-bottom: var(--space-13); }
.spec-main { min-width: 0; padding-block: clamp(3rem, 6vw, 5rem); }
.spec-hero {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: var(--border-thin) solid var(--color-border-default);
}
.spec-hero h1 {
  max-width: 18ch;
  margin: 0 0 var(--space-4);
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.spec-version {
  margin: 0 0 var(--space-6);
  color: var(--color-action-primary);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
.spec-lead {
  max-width: 62ch;
  margin: 0 0 var(--space-10);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-copy);
}
.spec-hero .doc-meta { margin-bottom: var(--space-10); }
.spec-hero .hero-actions { margin-top: 0; }

.rfc-document {
  max-width: 72ch;
}
.rfc-document > h2 {
  margin: var(--space-13) 0 var(--space-6);
  padding-top: var(--space-8);
  border-top: var(--border-thin) solid var(--color-border-default);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  letter-spacing: -0.03em;
  scroll-margin-top: 6rem;
}
.rfc-document > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.rfc-document > h3 {
  margin: var(--space-10) 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  scroll-margin-top: 6rem;
}
.rfc-document > p {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: 1.7;
}
.rfc-document > p:last-child { margin-bottom: 0; }
.rfc-keyword {
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
}
.rfc-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.rfc-list--steps {
  gap: var(--space-4);
  padding-left: 1.5rem;
}
.rfc-list li::marker { color: var(--color-action-primary); font-weight: var(--weight-bold); }

.rfc-defs {
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-8);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.rfc-defs > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-thin) solid var(--color-border-default);
}
.rfc-defs > div:last-child { border-bottom: 0; }
.rfc-defs dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}
.rfc-defs dd {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.rfc-pre {
  margin: 0 0 var(--space-8);
  padding: var(--space-6) var(--space-7);
  overflow-x: auto;
  color: var(--color-code-ink);
  background: var(--color-code-bg);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.rfc-pre code { font: inherit; white-space: pre; }

.rfc-table { min-width: 36rem; }
.rfc-document .table-wrap { margin: 0 0 var(--space-8); }

.rfc-toc-inline {
  margin: 0 0 var(--space-8);
  padding: var(--space-7);
  background: var(--color-surface-inset);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-card);
}
.rfc-toc-inline ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.rfc-toc-inline .toc-sub { padding-left: var(--space-6); color: var(--color-text-muted); }

.rfc-refs {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.rfc-refs li {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-notice);
}
.rfc-refs cite { color: var(--color-action-primary); font-style: normal; font-weight: var(--weight-semibold); }

.section-nav a.toc-sub {
  padding-left: var(--space-8);
  font-size: var(--text-xs);
}

.spec-raw { margin-top: var(--space-13); max-width: 72ch; }
.rfc-raw-pre {
  margin: 0;
  max-height: 40rem;
  padding: var(--space-6);
  overflow: auto;
  color: var(--color-code-ink);
  background: var(--color-code-bg);
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  line-height: 1.5;
}
.rfc-raw-pre code { font: inherit; white-space: pre; }

@media (max-width: 47.99rem) {
  .rfc-defs > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .rfc-document > h2 { scroll-margin-top: 5rem; }
  .rfc-document > h3 { scroll-margin-top: 5rem; }
}