:root{
  --paper:#eef2f5; --card:#fbfcfd; --ink:#17222d; --muted:#54626f;
  --line:#c3cfd9; --blue:#1f4e79; --deep:#10293f; --oxide:#c14a17;
  --wash:#e2e9ef; --display:Haettenschweiler, 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif; --serif:Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif; --mono:'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 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.68;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 44px,44px 100%;background-position:0 0;background-blend-mode:normal;
  background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background:var(--paper);opacity:.55;z-index:-1}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--oxide);outline-offset:2px}
.mono{font-family:var(--mono)}

/* masthead: ruled drawing strip */
.mast{border-bottom:3px double var(--ink);background:var(--card)}
.mast-top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding:7px 0}
.mast-top b{color:var(--oxide);font-weight:600}
.mast-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:14px 0 12px}
.brand{font-family:var(--display);font-size:clamp(30px,4.6vw,46px);line-height:.92;letter-spacing:.01em;
  text-transform:uppercase;color:var(--deep)}
.brand:hover{text-decoration:none}
.brand small{display:block;font-family:var(--serif);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--muted);font-style:italic;margin-top:6px}
.site-nav{display:flex;gap:4px 18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase}
.site-nav a{color:var(--ink);padding:6px 2px;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--oxide);border-bottom-color:var(--oxide);text-decoration:none}

/* page head + title block (cajetín) */
.head{padding-top:38px;padding-bottom:8px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:34px;align-items:start}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--oxide);margin:0}
h1{font-family:var(--display);font-size:clamp(38px,6.4vw,74px);line-height:.95;text-transform:uppercase;
  letter-spacing:.005em;margin:12px 0 14px;color:var(--deep)}
.lede{font-size:19px;max-width:56ch;margin:0;color:var(--ink)}
.cajetin{border:2px solid var(--ink);background:var(--card);font-family:var(--mono);font-size:12.5px;
  box-shadow:8px 8px 0 var(--wash)}
.cajetin h2{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:var(--deep);
  color:var(--paper);padding:7px 12px;font-family:var(--mono)}
.cajetin dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.cajetin dt{padding:7px 12px;border-top:1px solid var(--line);color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;font-size:10.5px;white-space:nowrap}
.cajetin dd{margin:0;padding:7px 12px 7px 4px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.cajetin dd b{color:var(--oxide)}

/* sheet: prose column + rail */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:44px;padding-top:26px;padding-bottom:10px}
.sheet>*{min-width:0}
.head>*{min-width:0}
.rail{position:sticky;top:18px;align-self:start;font-family:var(--mono);font-size:12px}
.rail h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;
  border-bottom:1px solid var(--ink);padding-bottom:6px}
.rail ol{list-style:none;margin:0 0 18px;padding:0;counter-reset:pl}
.rail li{counter-increment:pl;border-bottom:1px dotted var(--line)}
.rail li a{display:flex;gap:8px;padding:7px 0;color:var(--ink)}
.rail li a::before{content:counter(pl,decimal-leading-zero);color:var(--oxide)}
.rail li a:hover{color:var(--oxide);text-decoration:none}
.rail .note{color:var(--muted);line-height:1.6}

/* sections */
.sec{margin:0 0 34px;max-width:72ch}
.sec-h{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:10px;margin-bottom:12px}
.sec-h .num{font-family:var(--mono);font-size:13px;color:var(--oxide);letter-spacing:.1em}
h2{font-family:var(--display);font-size:clamp(24px,3vw,34px);line-height:1.02;text-transform:uppercase;
  letter-spacing:.01em;margin:0;color:var(--deep)}
h3{font-family:var(--serif);font-size:19px;margin:20px 0 8px}
.sec p{margin:0 0 13px}
p.drop::first-letter{font-family:var(--display);font-size:64px;line-height:.8;float:left;
  padding:6px 10px 0 0;color:var(--oxide)}
.pull{margin:26px 0;padding:18px 26px;border-left:5px solid var(--oxide);background:var(--card);
  box-shadow:8px 8px 0 var(--wash);font-family:var(--serif);font-size:22px;line-height:1.4;font-style:italic}
.pull cite{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* plates (tables) */
.plate{margin:30px 0;border:2px solid var(--ink);background:var(--card);box-shadow:8px 8px 0 var(--wash)}
.plate caption{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--deep);color:var(--paper);padding:8px 14px}
.plate .cap-note{display:block;font-family:var(--serif);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--muted);background:var(--wash);padding:8px 14px;border-bottom:1px solid var(--line)}
.tablewrap{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;min-width:420px}
table.data th,table.data td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top;font-size:15.5px}
table.data thead th{background:var(--wash);font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--deep)}
table.data tbody th{font-weight:600;width:32%;font-family:var(--mono);font-size:12.5px;color:var(--blue)}
table.data tbody tr:last-child th,table.data tbody tr:last-child td{border-bottom:0}

/* figures */
.fig{margin:30px 0}
.fig-frame{border:2px solid var(--ink);background:var(--card);padding:14px;box-shadow:8px 8px 0 var(--wash)}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:8px 2px 0;line-height:1.6}
.fl-dim{stroke:var(--ink);stroke-width:1.4}
.fl-lead{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.fl-tick{stroke:var(--oxide);stroke-width:2.4}
.fl-arrow{fill:var(--ink)}
.fl-date{font-family:var(--mono);font-size:12px;fill:var(--oxide);letter-spacing:.06em}
.fl-what{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.fl-note{font-family:var(--mono);font-size:10.5px;fill:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.fl-box{fill:var(--wash);stroke:var(--ink);stroke-width:1.6}
.fl-box-hot{fill:#f4e3d8;stroke:var(--oxide)}
.fl-boxname{font-family:var(--display);font-size:19px;fill:var(--deep);letter-spacing:.02em}
.fl-boxsub{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.fl-room{fill:var(--card);stroke:var(--blue);stroke-width:1.6}
.fl-roomnum{font-family:var(--mono);font-size:12px;fill:var(--oxide)}
.fl-bar{fill:var(--blue)}
.fl-barlabel{font-family:var(--mono);font-size:12px;fill:var(--ink)}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;
  border:2px solid var(--ink);background:var(--card);padding:14px;box-shadow:8px 8px 0 var(--wash)}
.src{border:1px solid var(--line);border-top:4px solid var(--blue);padding:12px 14px;display:flex;
  flex-direction:column;gap:7px;background:var(--paper)}
.src.is-hot{border-top-color:var(--oxide)}
.src-k{font-family:var(--display);font-size:18px;text-transform:uppercase;color:var(--deep);letter-spacing:.02em}
.src-t{font-size:14px;line-height:1.55}
.src-d{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* faq, closing, method, footer */
.faq{margin:34px 0;max-width:72ch}
.faq > h2{border-top:2px solid var(--ink);padding-top:10px}
.qa{border-bottom:1px solid var(--line);padding:12px 0 14px;display:grid;grid-template-columns:52px 1fr;gap:12px}
.qa .qn{font-family:var(--mono);font-size:13px;color:var(--oxide);padding-top:4px}
.qa h3{margin:0 0 6px;font-size:18px}
.qa p{margin:0}
.closing{max-width:72ch;margin:30px 0 8px;font-size:17.5px;border-left:5px solid var(--blue);padding-left:20px}
.method{margin:40px 0 0;background:var(--deep);color:var(--paper);padding:26px 0}
.method .wrap{max-width:1120px}
.method h2{color:var(--paper);font-size:22px}
.method p{margin:10px 0 0;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#c9d6e2;max-width:88ch}
.site-footer{border-top:3px double var(--ink);background:var(--card);margin-top:0}
.site-footer .site-nav{padding:18px 0 6px}
.disclaimer{max-width:88ch;font-size:13.5px;color:var(--muted);margin:8px 0}
.copy{font-family:var(--mono);font-size:12px;color:var(--muted);padding-bottom:24px;margin:4px 0}

/* motion */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec,.plate,.fig,.faq,.closing{animation:rise linear both;animation-timeline:view();
      animation-range:entry 0% entry 22%}
    @keyframes rise{from{transform:translateY(18px)}to{transform:none}}
  }
}
.plate:hover,.fig-frame:hover,.cajetin{transition:box-shadow .18s ease,transform .18s ease}
.plate:hover,.fig-frame:hover{box-shadow:11px 11px 0 var(--wash);transform:translate(-2px,-2px)}

@media (max-width:900px){
  .head{grid-template-columns:minmax(0,1fr)}
  .sheet{grid-template-columns:minmax(0,1fr);gap:22px}
  .rail{position:static;order:2;border-top:1px solid var(--ink);padding-top:12px}
  body{font-size:16px}
  .qa{grid-template-columns:38px 1fr}
}