/* Keep the article readable while the figures explain the key relationships. */
.crypto-article .band { padding-block: clamp(40px, 6vw, 80px); }
.crypto-copy { max-width: 920px; }
.crypto-copy > p, .crypto-copy > h1, .crypto-copy > h2,
.crypto-copy > h3, .crypto-copy > blockquote { max-width: 722px; margin-inline: auto; }
.crypto-copy > p { font-size: 1.0625rem; line-height: 1.75; margin-block: 20px; }
.crypto-copy > h1 { font-size: var(--step-4); line-height: 1.06; margin-bottom: 24px; }
.crypto-copy > h2 { font-size: var(--step-3); line-height: 1.2; margin-bottom: 28px; text-wrap: balance; }
.crypto-copy > h3 { font-size: var(--step-2); margin-top: 48px; margin-bottom: 24px; }
.crypto-copy > h1, .crypto-copy > h2, .crypto-copy > h3 { width: 100%; max-width: 722px; }
.crypto-copy > .crypto-intro { max-width: 722px; color: var(--muted); font-size: 1.1875rem; line-height: 1.65; margin-bottom: 32px; }
.crypto-copy > blockquote { max-width: 722px; border: 0; padding: 0; margin-block: 32px 40px; }
.crypto-copy blockquote p { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
.crypto-copy blockquote cite { display: block; margin-top: 12px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; font-style: normal; }
.crypto-copy > .toc { max-width: 722px; margin-inline: auto; }
.crypto-copy code { overflow-wrap: anywhere; }
.crypto-diagram { margin-block: 36px 48px; padding: clamp(8px, 2vw, 20px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.crypto-diagram svg { width: 100%; max-width: 720px; margin-inline: auto; overflow: visible; }
.crypto-diagram svg.wide { min-width: 0; display: block; }
.crypto-diagram svg.tall { display: none; max-width: 360px; }
.crypto-diagram text { fill: var(--ink); font-size: 16px; }
.crypto-diagram .key-name { font-family: 'Source Code Pro', monospace; font-size: 15px; }
.crypto-diagram .function-name { font-weight: 650; }
.crypto-diagram .argument-rule { stroke: var(--line); stroke-width: 1; }
.crypto-diagram .argument-name { fill: var(--muted); font-size: 13px; }
.crypto-diagram .argument-value { font-family: 'Source Code Pro', monospace; font-size: 14px; }
.crypto-diagram .node-body { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.crypto-diagram .key .node-body { fill: var(--gold); stroke: var(--gold); }
.crypto-diagram .key text { fill: var(--gold-ink); }
.crypto-diagram .key-glyph { fill: none; stroke: var(--gold-ink); stroke-width: 1.5; stroke-linecap: round; }
.crypto-diagram .public .node-body { fill: none; stroke: var(--muted); stroke-dasharray: 4 4; }
.crypto-diagram .packet-back { fill: var(--box); stroke: var(--line); stroke-width: 1; }
.crypto-diagram .node-halo { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; }
.crypto-diagram .crypto-edge { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.crypto-diagram marker path { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.crypto-diagram .crypto-edge-label { font-size: 12px; fill: var(--muted); }
.crypto-diagram .crypto-signal { opacity: 0; fill: var(--ink); }
.crypto-diagram > figcaption { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.9375rem; }
@media (max-width: 700px) {
  /* A small screen starts the article directly below the header. */
  .crypto-article .band:first-of-type { padding-top: 24px; }
  .crypto-copy > .crypto-intro { margin-top: 0; }
  .crypto-canvas { margin-inline: -6px; }
  .crypto-diagram svg.wide { display: none; }
  .crypto-diagram svg.tall { display: block; }
  .crypto-diagram text { font-size: 17px; }
  .crypto-diagram .key-name { font-size: 17px; }
  .crypto-diagram .key-glyph { display: none; }
  .crypto-diagram .key text { transform: translateX(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .crypto-diagram .crypto-signal, .crypto-diagram .node-halo { display: none; }
}
@media print {
  .crypto-diagram { break-inside: avoid; }
}