:root {
--paper: #fff;
--paper-2: #f2f3f2;
--ink: #222;
--muted: #515b54;
--soft: #6f7771;
--rule: #d3d7d4;
--rule-solid: #aeb5b0;
--accent: #3f6f4a;
--accent-tint: #eef5ef;
--link: #285b9b;
--max-w: 840px;
--font-body: Arial, Helvetica, sans-serif;
--font-serif: Georgia, 'Times New Roman', serif;
--font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
}
a:focus-visible,
summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.skip-link {
position: absolute;
left: 1rem;
top: -4rem;
z-index: 2;
padding: 0.55rem 0.75rem;
color: #fff;
background: var(--accent);
}
.skip-link:focus { top: 0.75rem; }
/* ---- header / hero ---- */
.hero {
max-width: var(--max-w);
margin: 0 auto;
padding: 4.5rem 1.5rem 2.5rem;
}
.hero .eyebrow {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--muted);
margin-bottom: 0.75rem;
}
.hero h1 {
font-family: var(--font-serif);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 0.75rem;
}
.hero a,
.status-note a { color: var(--link); }
.status-note {
max-width: var(--max-w);
margin: 0 auto 1rem;
padding: 0 1.5rem;
}
.status-note p {
border-left: 4px solid var(--accent);
background: var(--accent-tint);
padding: 0.9rem 1rem;
font-size: 0.92rem;
}
.vocabulary {
max-width: var(--max-w);
margin: 0 auto 1rem;
padding: 0 1.5rem;
}
.vocabulary h2 {
margin-bottom: 0.5rem;
color: var(--muted);
font: 0.68rem/1.4 var(--font-mono);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.vocabulary dl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid var(--rule);
background: var(--paper-2);
}
.vocabulary dl > div {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid var(--rule);
}
.vocabulary dl > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.vocabulary dl > div:nth-last-child(-n + 2) { border-bottom: 0; }
.vocabulary dt {
margin-bottom: 0.18rem;
color: var(--ink);
font: 600 0.76rem/1.4 var(--font-mono);
}
.vocabulary dd {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.45;
}
.hero .subtitle {
font-size: 1.1rem;
color: var(--muted);
max-width: 560px;
line-height: 1.65;
}
/* ---- table of contents ---- */
.toc {
max-width: var(--max-w);
margin: 0 auto;
padding: 1rem 1.5rem 3rem;
}
.toc h2 {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--muted);
margin-bottom: 0.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--rule);
}
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0 0.85rem;
padding: 0.85rem 0;
text-decoration: none;
color: var(--ink);
border-bottom: 1px solid var(--rule);
transition: color 0.15s;
}
.toc a:hover { color: var(--accent); }
.toc a::before {
content: counter(toc, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--soft);
grid-row: span 2;
}
.toc .toc-title {
font-weight: 600;
font-size: 0.95rem;
line-height: 1.4;
}
.toc .toc-desc {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.5;
}
/* ---- chapters ---- */
.chapter {
max-width: var(--max-w);
margin: 0 auto;
padding: 3rem 1.5rem;
}
.chapter + .chapter {
border-top: 1px solid var(--rule);
}
.chapter-num {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 0.5rem;
}
.chapter h2 {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
line-height: 1.15;
}
.chapter h3 {
font-size: 1rem;
font-weight: 600;
margin: 1.75rem 0 0.5rem;
}
.chapter p {
margin-bottom: 0.85rem;
}
.chapter a {
color: var(--link);
text-decoration: none;
}
.chapter a:hover { text-decoration: underline; }
.chapter ul, .chapter ol {
margin: 0.5rem 0 1rem 1.5rem;
}
.chapter li { margin-bottom: 0.35rem; }
/* ---- diagrams ---- */
.diagram {
margin: 2rem 0;
padding: 1.25rem 1rem;
background: #f7f8f7;
border: 1px solid var(--rule);
overflow: hidden;
}
.diagram.rendered { padding: 1.25rem 1rem 0.5rem; }
.diagram .diagram-body svg {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.diagram figcaption,
.diagram .caption {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--soft);
margin-top: 0.75rem;
line-height: 1.5;
}
.pikchr-source {
margin-top: 0.75rem;
border-top: 1px solid var(--rule);
padding-top: 0.55rem;
color: var(--muted);
}
.pikchr-source summary {
width: max-content;
cursor: pointer;
color: var(--link);
font: 0.75rem/1.4 var(--font-mono);
}
.pikchr-source pre {
margin-top: 0.65rem;
padding: 0.8rem;
overflow-x: auto;
background: #fff;
border: 1px solid var(--rule);
white-space: pre;
}
.pikchr-source pre code {
padding: 0;
border: 0;
background: transparent;
font-size: 0.72rem;
}
.pikchr-error {
font-family: var(--font-mono);
font-size: 0.75rem;
color: #b3261e;
white-space: pre-wrap;
padding: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
body { font-size: 11pt; }
.hero, .status-note, .toc, .chapter, .footer { max-width: none; }
.pikchr-source { display: none; }
.chapter { break-before: page; }
.chapter:first-of-type { break-before: auto; }
.diagram { break-inside: avoid; }
a { color: inherit !important; text-decoration: underline; }
}
/* ---- code blocks ---- */
.code {
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.6;
background: var(--ink);
color: #f5f5f5;
border-radius: 6px;
padding: 0.9rem 1.1rem;
margin: 1rem 0;
overflow-x: auto;
white-space: pre;
}
.code .tok-key { color: #89dceb; }
.code .tok-val { color: #a6e3a1; }
.code .tok-com { color: #9a9a9a; font-style: italic; }
.code .tok-hl { color: #f08a59; }
/* ---- grammar productions ---- */
.grammar-panel {
margin: 1rem 0 1.25rem;
border: 1px solid var(--rule-solid);
background: var(--paper);
}
.grammar-row {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
align-items: center;
gap: 1rem;
padding: 0.8rem 1rem;
background: var(--paper-2);
}
.grammar-row + .grammar-row { border-top: 1px solid var(--rule); }
.grammar-wire { background: var(--accent-tint); }
.grammar-label {
color: var(--muted);
font: 0.7rem/1.4 var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.grammar-row code {
padding: 0;
border: 0;
background: transparent;
font-size: 0.88rem;
white-space: nowrap;
}
.grammar-literal { color: var(--link); }
.grammar-separator { color: var(--accent); }
.grammar-note {
margin: 0 !important;
padding: 0.65rem 1rem;
border-top: 1px solid var(--rule);
color: var(--muted);
font-size: 0.78rem;
line-height: 1.5;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ---- normative quotations ---- */
.rfc-quote {
margin: 1rem 0 1.25rem;
padding: 0.9rem 1rem;
border-left: 4px solid var(--accent);
background: var(--accent-tint);
}
.rfc-quote p {
margin: 0;
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.65;
}
.rfc-quote footer {
margin-top: 0.55rem;
color: var(--muted);
font: 0.72rem/1.5 var(--font-mono);
}
.rfc-quote cite { font-style: normal; }
/* ---- statically rendered mathematics ---- */
.math {
white-space: nowrap;
}
.math-block {
margin: 1rem 0;
padding: 0.9rem 1.1rem;
overflow-x: auto;
border: 1px solid var(--rule-solid);
border-radius: 4px;
background: var(--paper-2);
text-align: center;
}
.math-block .katex-display {
margin: 0;
}
.math-block p {
margin: 0.35rem 0 0;
color: var(--muted);
font-size: 0.78rem;
}
.artifact-table .math {
white-space: nowrap;
}
/* ---- specification tables ---- */
.artifact-table-wrap {
margin: 1rem 0 1.25rem;
border: 1px solid var(--rule-solid);
overflow-x: auto;
}
.artifact-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 0.84rem;
line-height: 1.45;
}
.artifact-table caption {
padding: 0.6rem 0.75rem;
color: var(--muted);
background: var(--paper-2);
border-bottom: 1px solid var(--rule-solid);
font: 0.76rem/1.4 var(--font-mono);
text-align: left;
}
.artifact-table th,
.artifact-table td {
padding: 0.65rem 0.75rem;
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
text-align: left;
vertical-align: top;
}
.artifact-table tr > :last-child { border-right: 0; }
.artifact-table tbody tr:last-child > * { border-bottom: 0; }
.artifact-table thead th {
color: var(--ink);
background: var(--accent-tint);
font-weight: 600;
}
.artifact-table tbody th { font-weight: 400; }
.artifact-table tbody tr:nth-child(even) { background: #fafbfa; }
.artifact-table code {
padding: 0;
border: 0;
background: transparent;
white-space: normal;
}
.artifact-table .artifact-code { width: 10%; }
.artifact-table .artifact-type { width: 24%; }
.artifact-table .artifact-allowed { width: 43%; }
.artifact-table .artifact-required { width: 23%; }
/* ---- inline code ---- */
code {
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--paper-2);
border: 1px solid var(--rule);
padding: 0.1em 0.35em;
border-radius: 3px;
}
/* ---- callouts ---- */
.callout {
border-left: 3px solid var(--accent);
background: var(--accent-tint);
padding: 0.85rem 1.1rem;
margin: 1.25rem 0;
font-size: 0.9rem;
line-height: 1.6;
}
.callout strong {
color: var(--accent);
font-weight: 600;
}
/* ---- footer ---- */
.footer {
max-width: var(--max-w);
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
border-top: 1px solid var(--rule);
font-size: 0.85rem;
color: var(--muted);
}
.footer a { color: var(--link); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
/* ---- responsive ---- */
@media (max-width: 640px) {
body { font-size: 15px; }
.vocabulary dl { grid-template-columns: 1fr; }
.vocabulary dl > div:nth-child(odd) { border-right: 0; }
.vocabulary dl > div:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
.diagram { padding: 0.75rem 0.4rem; }
.diagram figcaption { padding: 0 0.35rem; font-size: 0.75rem; }
.artifact-table { font-size: 0.74rem; }
.artifact-table th, .artifact-table td { padding: 0.5rem 0.4rem; }
.grammar-row { grid-template-columns: 1fr; gap: 0.25rem; }
.grammar-row code { font-size: 0.8rem; }
}