@font-face { font-family: 'Archivo'; src: url('/fonts/archivo.woff2') format('woff2'); font-weight: 400 800; font-stretch: 62% 100%; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
:root { --concrete: #E7E5E0; --sheet: #F8F7F4; --line: #BDB9B0; --graphite: #141517; --steel: #5E6369; --safety: #FFC20E;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
* { box-sizing: border-box; }
html { background: var(--concrete); background-image: radial-gradient(rgba(20,21,23,.08) 1px, transparent 1px); background-size: 24px 24px; }
body { margin: 0; padding: 24px 16px 48px; font: 400 16px/1.6 var(--sans); color: var(--graphite); }
.sheet { max-width: 760px; margin: 0 auto; background: var(--sheet); border: 2px solid var(--graphite); }
header { background: var(--graphite); color: var(--sheet); padding: 16px 24px 20px; }
.brand { display: flex; gap: 10px; align-items: center; font: 800 14px var(--sans); font-stretch: 72%; text-transform: uppercase; letter-spacing: .06em; color: var(--sheet); text-decoration: none; }
.logo { width: 20px; height: 20px; display: block; flex: none; }
.tri { width: 18px; height: 18px; background: var(--safety); clip-path: polygon(0 100%, 50% 0, 100% 100%); display: inline-block; flex: none; }
h1 { margin: 16px 0 0; font-size: 40px; line-height: 1.1; font-weight: 800; font-stretch: 68%; }
.meta { margin: 8px 0 0; font: 400 13px var(--mono); color: #C9CDD2; }
main { padding: 8px 24px 24px; }
h2 { margin: 32px 0 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 20px; font-weight: 800; font-stretch: 80%; }
ul { padding-left: 22px; } li { margin: 4px 0; }
a { color: var(--graphite); text-decoration-thickness: 2px; text-decoration-color: var(--safety); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }
footer { padding: 16px 24px; border-top: 2px solid var(--graphite); font: 400 13px var(--mono); color: var(--steel); display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 480px) { header, main, footer { padding-left: 16px; padding-right: 16px; } h1 { font-size: 28px; } }

.crumb { max-width: 760px; margin: 0 auto 8px; }
.home-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--steel); text-decoration: none; border-bottom: 1px solid transparent; }
.home-link span { font-size: 15px; line-height: 1; }
.home-link:hover { color: var(--graphite); border-bottom-color: var(--safety); }
.ph { background: #FFF1C2; border: 1px dashed #B88A00; padding: 0 4px; font: 500 13px var(--mono); }
table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
th, td { text-align: left; vertical-align: top; padding: 6px 8px; border: 1px solid var(--line); }
th { background: var(--concrete); font-weight: 700; }
.note { background: var(--concrete); border-left: 4px solid var(--safety); padding: 10px 14px; margin: 16px 0; }
dl.entity { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; }
dl.entity dt { font: 500 12px/1.9 var(--mono); color: var(--steel); text-transform: uppercase; }
dl.entity dd { margin: 0; }
@media (max-width: 480px) { dl.entity { grid-template-columns: 1fr; } table { font-size: 13px; } th, td { padding: 4px 6px; } }
