/* SPDX-License-Identifier: CC-BY-4.0 */
:root {
  color-scheme: light;
  --paper: #f4f2ec;
  --surface: #fbfaf7;
  --ink: #182126;
  --muted: #5f686a;
  --rule: #c9cbc5;
  --accent: #075e67;
  --accent-dark: #003f47;
  --serif: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
a { color: var(--accent-dark); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--ink); color: white; padding: .6rem .9rem; }
.skip-link:focus { top: .8rem; }
.site-header { min-height: 5.25rem; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem max(4vw, 1.25rem); }
.wordmark { display: inline-flex; align-items: baseline; gap: .8rem; color: var(--ink); text-decoration: none; }
.wordmark-mark { font: 700 1.25rem/1 var(--serif); letter-spacing: .08em; }
.wordmark-text { color: var(--muted); font-size: .82rem; letter-spacing: .02em; }
nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
nav a { color: var(--ink); font-size: .8rem; text-decoration: none; }
nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .45rem; }
main { min-height: 70vh; }
.hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .8fr); gap: clamp(3rem, 8vw, 8rem); padding: clamp(4rem, 9vw, 9rem) max(4vw, 1.25rem) clamp(4rem, 8vw, 7rem); }
.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.018em; line-height: 1.16; }
.hero h1 { max-width: 12ch; margin: 1rem 0 1.5rem; font-size: clamp(3.5rem, 8vw, 7.5rem); }
.lead { max-width: 45rem; color: #354044; font: 1.28rem/1.55 var(--serif); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.35rem; margin-top: 2.25rem; }
.primary-link { display: inline-block; background: var(--accent-dark); color: white; padding: .7rem 1rem; text-decoration: none; }
.primary-link:hover { background: var(--accent); color: white; }
.review-note { max-width: 42rem; margin-top: 2.4rem; border-left: 2px solid var(--accent); padding-left: 1rem; color: var(--muted); font-size: .88rem; }
.edition-record { margin: 2.1rem 0 0; border-top: 2px solid var(--ink); }
.edition-record div { display: grid; grid-template-columns: 6.8rem 1fr; gap: 1rem; border-bottom: 1px solid var(--rule); padding: .72rem 0; }
.edition-record dt { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.edition-record dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.ruled-section { display: grid; grid-template-columns: 4rem minmax(12rem, .6fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 5rem); border-top: 1px solid var(--rule); padding: clamp(3rem, 6vw, 6rem) max(4vw, 1.25rem); }
.ruled-section h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3.2rem); }
.section-number { margin: .4rem 0; color: var(--muted); font: .75rem/1 var(--mono); }
.prose-large { max-width: 47rem; font: 1.15rem/1.7 var(--serif); }
.prose-large p:first-child { margin-top: 0; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.principles article { border-top: 1px solid var(--rule); padding: 1.25rem 0 1.5rem; }
.principles h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.principles p { margin: 0; color: var(--muted); }
.link-index { border-top: 1px solid var(--ink); }
.link-index a { display: grid; grid-template-columns: minmax(10rem, .8fr) 1.2fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.link-index a:hover span { color: var(--accent); }
.link-index span { font-family: var(--serif); font-size: 1.1rem; }
.link-index small { color: var(--muted); }
.document-layout { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 56rem); gap: clamp(2rem, 5vw, 6rem); align-items: start; max-width: 84rem; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) max(4vw, 1.25rem); }
.document-layout.no-toc, .artifact-index { display: block; }
.document { min-width: 0; }
.document > h1:first-child, .document-heading h1, .artifact-index h1 { max-width: 18ch; margin: 0 0 1.5rem; font-size: clamp(2.75rem, 6vw, 5rem); }
.document > p:nth-child(2), .document-heading p:last-child { color: var(--muted); font: 1.2rem/1.6 var(--serif); }
.document h2 { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 2rem; }
.document h3 { margin-top: 2.2rem; font-size: 1.45rem; }
.document h4, .document h5, .document h6 { margin-top: 1.8rem; }
.document p, .document li { max-width: 48rem; }
.document pre { max-width: 100%; overflow: auto; background: #e9e8e2; border-left: 3px solid var(--accent); padding: 1rem 1.15rem; font: .82rem/1.55 var(--mono); tab-size: 2; }
code { font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }
.document :not(pre) > code { background: #e6e5df; padding: .08rem .24rem; }
blockquote { margin: 2rem 0; border-left: 3px solid var(--accent); padding: .2rem 1.2rem; color: #384448; }
.document-toc { position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow: auto; border-top: 2px solid var(--ink); padding: .8rem .4rem .8rem 0; }
.document-toc h2 { margin: 0 0 .8rem; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.document-toc ol { margin: 0; padding: 0; list-style: none; }
.document-toc li { margin: .35rem 0; font-size: .78rem; line-height: 1.4; }
.document-toc .level-3 { padding-left: .8rem; }
.document-toc a { color: var(--muted); text-decoration: none; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 1.8rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th, td { border-bottom: 1px solid var(--rule); padding: .65rem .75rem; text-align: left; vertical-align: top; }
th { border-top: 2px solid var(--ink); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
td code { font-size: .72rem; }
.artifact-index { max-width: 84rem; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) max(4vw, 1.25rem); }
.artifact-index table td:last-child { min-width: 34rem; }
.document-index { margin: 2rem 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.document-index li { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; border-bottom: 1px solid var(--rule); padding: .7rem 0; }
.document-index small { color: var(--muted); }
.site-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; border-top: 1px solid var(--rule); padding: 2rem max(4vw, 1.25rem) 3rem; color: var(--muted); font-size: .78rem; }
.site-footer strong { color: var(--ink); font-family: var(--serif); font-size: 1rem; font-weight: 500; }
@media (max-width: 850px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .hero { grid-template-columns: 1fr; }
  .ruled-section { grid-template-columns: 2rem 1fr; }
  .ruled-section > :last-child { grid-column: 2; }
  .document-layout { grid-template-columns: 1fr; }
  .document-toc { position: static; max-height: 15rem; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .wordmark-text { display: none; }
  nav { gap: .65rem 1rem; }
  .hero h1 { font-size: 3.3rem; }
  .principles { grid-template-columns: 1fr; }
  .link-index a, .document-index li { grid-template-columns: 1fr; gap: .2rem; }
  .site-footer { grid-template-columns: 1fr; }
}
@media print {
  .site-header nav, .skip-link, .document-toc, .hero-actions { display: none; }
  body { background: white; }
  .site-header, .site-footer { padding-left: 0; padding-right: 0; }
  .document-layout { display: block; max-width: none; padding: 2rem 0; }
  a { color: inherit; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }