/* The skin of the document pages: black ground, red accent, numbered lines, plates for figures. */
:root{color-scheme:dark;
  --ground:#000;--ink:#f3f5f8;--ink-2:#a7b0bb;--ink-3:#69737f;--rule:#2a1a1a;--rule-2:#1c2430;
  --red:#ff2d2d;--red-ink:#ff6a5e;--plate:#050b14;
  --font:"IBM Plex Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cond:"IBM Plex Sans Condensed","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.skin{margin:0;background:var(--ground);color:var(--ink);font:16.5px/1.55 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body.skin a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}
body.skin a:hover{border-bottom-color:var(--red)}
body.skin a:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}

/* the head: the name, the sections of the site */
header.top{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(16px,2.6vh,28px) 16px 18px;border-bottom:1px solid var(--rule)}
header.top h1{margin:0;font:700 clamp(26px,3.2vw,46px)/1 "Syne",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
header.top h1 a{color:#fff;border:0}
header.top .z{position:relative;display:inline-block;color:var(--red)}
header.top .z::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:max(.085em,2px);background:var(--red);transform:translateY(-50%)}
nav.site-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;font:500 12px/1.3 var(--cond);letter-spacing:.16em;text-transform:uppercase}
nav.site-nav a{color:var(--ink-2);border:0;padding-bottom:3px;border-bottom:1px solid transparent}
nav.site-nav a:hover,nav.site-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--red)}

/* the page: numbered lines on the left, the document on the right */
.doc-grid{flex:1 0 auto;display:grid;grid-template-columns:clamp(220px,22vw,340px) minmax(0,760px);justify-content:center;gap:0 clamp(28px,5vw,80px);padding:44px clamp(18px,4vw,40px) 60px}
.lines{position:sticky;top:26px;align-self:start}
.lines ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.lines li{margin:0;padding:0}
.lines a{position:relative;display:grid;grid-template-columns:2.2em 1fr;gap:0 8px;align-items:baseline;color:inherit;border:0;
  padding:clamp(11px,1.7vh,16px) 14px;border-bottom:1px solid var(--rule);border-left:2px solid transparent;
  transition:transform .28s cubic-bezier(.2,.85,.3,1),border-color .28s,background-color .28s,box-shadow .28s}
.lines li:first-child a{border-top:1px solid var(--rule)}
.lines a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.2,.85,.3,1)}
.lines a:hover,.lines a:focus-visible,.lines a.on{outline:0;border-left-color:var(--red);transform:translateX(6px);
  background:radial-gradient(220px 110px at var(--gx,50%) var(--gy,50%),rgba(255,45,45,.30),rgba(255,45,45,.06) 72%);box-shadow:0 0 34px rgba(255,45,45,.16)}
.lines a:hover::after,.lines a:focus-visible::after,.lines a.on::after{transform:scaleX(1)}
.lines a:hover .t,.lines a:focus-visible .t,.lines a.on .t{color:#fff;text-shadow:0 0 18px rgba(255,45,45,.75)}
.lines .n{font:600 clamp(14px,1.05vw,17px)/1 var(--cond);color:var(--red);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.lines .t{font:600 clamp(17px,1.45vw,23px)/1.2 var(--cond);color:#fff;letter-spacing:.02em;text-wrap:balance}
.lines .s{grid-column:2;font-size:clamp(12.5px,.9vw,14px);line-height:1.4;color:var(--ink-2);text-wrap:pretty;margin-top:3px}

.doc{min-width:0}
.doc h1.title{margin:0 0 6px;font:600 clamp(40px,5.2vw,64px)/1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.doc .byline{margin:0 0 30px;font:500 12.5px/1.4 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.doc .lede{margin:0 0 26px;font:500 clamp(19px,1.6vw,23px)/1.45 var(--cond);color:#fff;text-wrap:pretty}
.doc p{margin:0 0 14px;font-size:17px;color:var(--ink);text-align:justify;hyphens:auto}
.doc h2{margin:56px 0 12px;font:600 24px/1.1 var(--cond);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.doc h2 .num{color:var(--red);font:inherit;letter-spacing:.06em;min-width:2.4em}
.doc .stamp{margin-top:44px;font:400 13px/1.5 var(--mono);color:var(--ink-3)}

/* a figure stands in a plate */
.pl{display:inline-block;padding:0 .38em;margin:0 .04em;border:1px solid #fff;border-radius:3px;background:var(--plate);
  font:600 .92em/1.5 var(--cond);color:#fff;white-space:nowrap;box-shadow:0 0 10px rgba(255,255,255,.18);font-variant-numeric:tabular-nums}
.pl.red{border-color:var(--red);color:var(--red-ink);box-shadow:0 0 10px rgba(255,45,45,.35)}

/* the maps, as tabs */
.maps{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 30px}
.maps a{font:500 12.5px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--rule-2);border-radius:3px;color:var(--ink);background:var(--plate)}
.maps a:hover{border-color:var(--red);color:#fff;box-shadow:0 0 14px rgba(255,45,45,.3)}

/* the register: fact, source */
table.reg{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14.5px}
table.reg th,table.reg td{padding:9px 10px 9px 0;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
table.reg th{font:500 11.5px/1.4 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
table.reg td:first-child{color:var(--ink);padding-right:22px}
table.reg td:last-child{font:400 12.5px/1.5 var(--mono);color:var(--ink-2);width:34%}
table.reg td a{color:var(--ink-2)}
table.reg td a:hover{color:#fff}

footer.foot{display:flex;justify-content:center;gap:8px 22px;flex-wrap:wrap;padding:18px 16px 22px;border-top:1px solid var(--rule)}
footer.foot p{margin:0;font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
footer.foot a{color:var(--ink-3);border:0}
footer.foot a:hover{color:var(--red-ink)}

@media (max-width:900px){
  .doc-grid{grid-template-columns:minmax(0,1fr);gap:26px;padding:26px 18px 50px}
  .lines{position:static}
  table.reg td:last-child{width:40%}
}
@media (prefers-reduced-motion:reduce){.lines a,.lines a::after{transition:none}}