:root {
  --paper: #ede9dc;
  --ink: #2a2620;
  --muted: #6f6a60;
  --rule: #c8c1b2;
  --link: #1648b5;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 5; transform: translateY(-150%); background: var(--ink); color: var(--paper); padding: 7px 10px; font: 12px var(--mono); }
.skip-link:focus { transform: none; }

.site-header { min-height: 58px; max-width: 1180px; margin: 0 auto; padding: 0 24px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.site-name { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 18px/1 var(--serif); letter-spacing: -.02em; }
.site-name img { display: block; width: 25px; height: 25px; }
.site-header nav { display: flex; gap: 24px; font: 11px/1 var(--mono); }

.document { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.introduction { min-height: 600px; padding: 88px 0 82px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: clamp(56px, 8vw, 116px); align-items: center; }
.intro-copy { padding-left: 82px; }
.document-meta, .section-label, .note, .site-footer { font-family: var(--mono); }
.document-meta { margin: 0 0 35px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
h1 { margin: 0; max-width: 820px; font-size: clamp(54px,5.7vw,82px); font-weight: 400; line-height: .97; letter-spacing: -.045em; }
.abstract { max-width: 760px; margin: 40px 0 0; font-size: 22px; line-height: 1.45; }
.plain-links { display: flex; gap: 22px; margin: 34px 0 0; font-size: 15px; }
.brand-figure { align-self: end; margin: 0 0 4px; padding-top: 18px; border-top: 1px solid var(--ink); }
.brand-figure > img { display: block; width: min(100%, 180px); height: auto; margin: 0 0 28px auto; }
.brand-figure figcaption { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; }
.brand-figure figcaption > span { font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.brand-figure small { color: var(--muted); font: 9px/1.55 var(--mono); }
.brand-figure i { font-family: var(--serif); }

.document-section { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 30px; padding: 88px 0 96px; border-bottom: 1px solid var(--rule); }
.section-label { padding-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.section-label span { display: block; margin-bottom: 8px; color: var(--ink); }
.section-label p { margin: 0; }
.section-content { max-width: 840px; }
h2 { margin: 0 0 30px; max-width: 760px; font-size: clamp(38px,4.3vw,59px); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; }
.section-content > p { max-width: 740px; margin: 0 0 26px; }
.section-content > p + p { margin-top: 22px; }
.section-content code, table code { font-family: var(--mono); font-size: .82em; }

.table-wrap { margin: 42px 0 26px; overflow-x: auto; border-top: 1px solid var(--ink); }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
th, td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
th { color: var(--muted); font: 10px var(--mono); }
td:first-child { width: 25%; }
td:nth-child(2) { width: 15%; }
td:last-child { width: 16%; }
.note { margin-top: 28px !important; color: var(--muted); font-size: 11px; line-height: 1.55; }

.diagram { margin: 46px 0 42px; padding: 34px 0; overflow-x: auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: #3b3730; background: transparent; font: 12px/1.45 var(--mono); }
.prose-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 38px; }
.prose-columns p { margin: 0; font-size: 14px; line-height: 1.5; }
.prose-columns strong { display: block; margin-bottom: 8px; font-weight: 400; font-style: italic; }

.record-list { margin: 46px 0 0; border-top: 1px solid var(--ink); }
.record-list div { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 19px 0; border-bottom: 1px solid var(--rule); }
.record-list dt { font-size: 15px; }
.record-list dd { margin: 0; color: var(--muted); font-size: 14px; }

.output { margin: 42px 0 0; padding: 26px 28px; overflow-x: auto; border: 1px solid var(--rule); background: rgba(255,255,255,.16); color: #36322c; font: 12px/1.75 var(--mono); }
.status-lines { margin: 44px 0 0; border-top: 1px solid var(--ink); }
.status-lines p { display: grid; grid-template-columns: 110px 1fr; gap: 24px; margin: 0; padding: 19px 0; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 14px; }
.status-lines span { color: var(--ink); font-style: italic; }
.run-section { border-bottom: 0; }

.site-footer { max-width: 1180px; min-height: 86px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; color: var(--muted); font-size: 10px; }
.site-footer p { margin: 0; }
.site-footer p:nth-child(2) { text-align: center; }
.site-footer a { justify-self: end; }

@media (max-width: 820px) {
  body { font-size: 16px; }
  .site-header { padding: 0 18px; }
  .site-header nav { gap: 15px; }
  .site-header nav a:nth-child(2), .site-header nav a:nth-child(3) { display: none; }
  .document { padding: 0 18px; }
  .introduction { min-height: 0; padding: 76px 0 68px; grid-template-columns: 1fr; gap: 68px; }
  .intro-copy { padding-left: 0; }
  h1 { font-size: clamp(50px,14vw,72px); }
  .abstract { margin-top: 32px; font-size: 19px; }
  .brand-figure { width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: end; }
  .brand-figure > img { width: 112px; margin: 0; }
  .brand-figure figcaption { align-self: end; }
  .document-section { display: block; padding: 70px 0 78px; }
  .section-label { margin-bottom: 34px; }
  h2 { font-size: 40px; }
  .prose-columns { grid-template-columns: 1fr; }
  .record-list div { grid-template-columns: 1fr; gap: 5px; }
  .status-lines p { grid-template-columns: 1fr; gap: 5px; }
  .site-footer { padding: 24px 18px; grid-template-columns: 1fr auto; }
  .site-footer p:nth-child(2) { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

@media (max-width: 520px) {
  .site-name { gap: 8px; }
  .site-name img { width: 22px; height: 22px; }
  .plain-links { flex-direction: column; gap: 8px; }
  .brand-figure { grid-template-columns: 84px minmax(0, 1fr); gap: 20px; }
  .brand-figure > img { width: 84px; }
  .brand-figure figcaption { grid-template-columns: 1fr; gap: 8px; }
  .diagram { font-size: 10px; }
  .output { padding: 20px 16px; font-size: 10px; }
  th, td { min-width: 130px; }
  .site-footer { display: block; }
  .site-footer > * + * { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}