@page { size: A4; margin: 0; }
:root{
  --paper:#FBFAF7; --ink:#17191A; --soft:#3D4244; --muted:#767B7C;
  --hair:rgba(23,25,26,.16); --hair-soft:rgba(23,25,26,.08); --oxide:#A9452B; --steel:#6E7A7D;
  --sans:"Archivo","PingFang SC",sans-serif; --mono:"IBM Plex Mono",monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#8a8a86; }
body{ font-family:var(--sans); color:var(--ink); font-size:9.5pt; line-height:1.5; }
img{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; font-weight:500; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.page{
  position:relative; width:210mm; height:297mm; padding:16mm 18mm 14mm;
  background:var(--paper); overflow:hidden; page-break-after:always; break-after:page;
}
.page:last-of-type{ page-break-after:auto; }
.rh{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:7pt;
     letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
     border-bottom:1px solid var(--hair); padding-bottom:2.5mm; }
.rh b{ font-weight:500; color:var(--ink); }
.pgno{ position:absolute; right:18mm; bottom:10mm; font-family:var(--mono); font-size:8pt; color:var(--muted); }
.kicker{ font-family:var(--mono); font-size:7pt; letter-spacing:.14em; text-transform:uppercase;
         color:var(--oxide); margin-top:10mm; }
h2{ font-size:23pt; line-height:1.08; letter-spacing:-.02em; margin-top:3mm; }
.lede{ font-size:10.5pt; line-height:1.55; color:var(--soft); margin-top:4mm; max-width:150mm; }
h3{ font-size:11pt; letter-spacing:-.01em; margin-bottom:1.5mm; }
.small{ font-family:var(--mono); font-size:7pt; letter-spacing:.06em; color:var(--muted); }

/* cover */
.cover{ display:flex; flex-direction:column; justify-content:space-between; padding:20mm 18mm 16mm; }
.cover .lock{ font-size:12pt; letter-spacing:.26em; text-transform:uppercase; }
.cover .lock span+span{ color:var(--oxide); margin-left:2mm; }
.cover h1{ font-size:52pt; line-height:1.02; letter-spacing:-.035em; margin:0; }
.cover h1 em{ font-style:normal; color:var(--oxide); }
.cover .sub{ font-size:11pt; color:var(--soft); max-width:120mm; margin-top:6mm; }
.cover .idx{ display:flex; gap:0; border-top:1px solid var(--ink); margin-top:12mm; }
.cover .idx div{ flex:1; padding:3mm 3mm 0 0; border-right:1px solid var(--hair-soft); }
.cover .idx div:last-child{ border-right:0; }
.cover .idx b{ display:block; font-family:var(--mono); font-size:8pt; color:var(--oxide); }
.cover .idx span{ font-size:8pt; color:var(--soft); }
.cover .facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:6mm; margin-top:9mm;
               border-top:1px solid var(--hair); padding-top:3mm; }
.cover .facts b{ display:block; font-size:13pt; letter-spacing:-.01em; }
.cover .facts span{ font-family:var(--mono); font-size:6.8pt; letter-spacing:.06em; color:var(--muted); }
.cover .foot{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:7pt;
              letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
              border-top:1px solid var(--hair); padding-top:3mm; }

/* contents */
.toc li{ display:flex; justify-content:space-between; align-items:baseline;
         padding:2.6mm 0; border-bottom:1px solid var(--hair-soft); font-size:10pt; }
.toc li span:last-child{ font-family:var(--mono); font-size:8pt; color:var(--muted); }
.toc li b{ font-family:var(--mono); font-size:7.5pt; font-weight:400; color:var(--oxide); margin-right:3mm; }

/* two column blocks */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:8mm; margin-top:7mm; }
.cols h3{ padding-bottom:1.5mm; border-bottom:1px solid var(--ink); }
.cols p{ font-size:9pt; color:var(--soft); margin-top:2mm; }
.list li{ position:relative; padding-left:4mm; font-size:9pt; color:var(--soft); margin-top:1.6mm; }
.list li::before{ content:"—"; position:absolute; left:0; color:var(--oxide); }

/* rules */
.rules{ display:grid; grid-template-columns:1fr 1fr; gap:6mm 8mm; margin-top:8mm; }
.rule{ border-top:1px solid var(--hair); padding-top:2.5mm; }
.rule b{ font-family:var(--mono); font-size:7.5pt; color:var(--oxide); }
.rule h3{ font-size:10pt; margin-top:1mm; }
.rule p{ font-size:8.6pt; color:var(--soft); margin-top:1mm; }

/* tables */
table{ width:100%; border-collapse:collapse; margin-top:6mm; }
th{ font-family:var(--mono); font-size:6.8pt; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); text-align:left; padding:0 3mm 2mm 0; border-bottom:1px solid var(--ink); }
td{ font-size:8.8pt; padding:2.4mm 3mm 2.4mm 0; border-bottom:1px solid var(--hair-soft); vertical-align:top; }
td.mono{ font-family:var(--mono); font-size:8pt; }
td.name{ font-weight:500; }

/* series page */
.series-hero{ display:grid; grid-template-columns:1.3fr .7fr; gap:8mm; margin-top:8mm; align-items:start; }
.fig{ border:1px solid var(--hair); background:#fff; padding:4mm 4mm 2.5mm; }
.fig svg{ width:100%; height:auto; display:block; }
.fig figcaption{ margin-top:2.5mm; padding-top:2mm; border-top:1px solid var(--hair-soft);
                 display:flex; justify-content:space-between; font-family:var(--mono); font-size:6.6pt;
                 letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.specs div{ display:flex; justify-content:space-between; gap:4mm; padding:1.9mm 0;
            border-bottom:1px solid var(--hair-soft); font-size:8.4pt; }
.specs dt{ font-family:var(--mono); font-size:7pt; letter-spacing:.1em; text-transform:uppercase;
           color:var(--muted); }
.specs dd{ margin:0; text-align:right; }
.pull{ font-size:10pt; line-height:1.45; color:var(--ink); border-left:2px solid var(--oxide);
       padding-left:4mm; margin-top:7mm; }
.band{ width:100%; height:62mm; object-fit:cover; filter:grayscale(1); margin-top:7mm; }
.note{ border:1px dashed rgba(169,69,43,.45); padding:3mm 4mm; margin-top:6mm; font-size:8pt; color:var(--soft); }
.rule .chk{ font-size:7.6pt; color:var(--muted); margin-top:1.2mm; padding-left:3.5mm; position:relative; }
.rule .chk::before{ content:"4"; position:absolute; left:0; color:var(--oxide); }
.where{ margin-top:7mm; border-top:1px solid var(--ink); padding-top:2.5mm; }
.where b{ font-family:var(--mono); font-size:6.8pt; letter-spacing:.1em; text-transform:uppercase; color:var(--oxide); }
.where p{ font-size:9pt; color:var(--soft); margin-top:1.5mm; }
.sheet-foot{ position:absolute; left:18mm; right:18mm; bottom:16mm;
             display:grid; grid-template-columns:repeat(3,1fr); gap:7mm;
             border-top:1px solid var(--hair); padding-top:3mm; }
.sheet-foot b{ display:block; font-family:var(--mono); font-size:6.4pt; letter-spacing:.1em;
               text-transform:uppercase; color:var(--oxide); margin-bottom:1.2mm; }
.sheet-foot span{ font-size:7.6pt; line-height:1.45; color:var(--muted); }
.note b{ font-family:var(--mono); font-size:6.8pt; letter-spacing:.1em; text-transform:uppercase;
         color:var(--oxide); display:block; margin-bottom:1.5mm; }
.rails2{ display:grid; grid-template-columns:1fr 1fr; gap:6mm; margin-top:6mm; }
.rails2 .code{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:8pt;
               margin-bottom:2mm; }

/* back cover */
.back{ background:#141617; color:#EFEDE8; display:flex; flex-direction:column; justify-content:space-between; }
.back .lock{ font-size:11pt; letter-spacing:.26em; text-transform:uppercase; }
.back .lock span+span{ color:#E0795C; margin-left:2mm; }
.back h2{ font-size:26pt; color:#EFEDE8; }
.back p{ color:rgba(239,237,232,.72); font-size:9pt; max-width:110mm; }
.back a{ color:#EFEDE8; text-decoration:none; border-bottom:1px solid #E0795C; }
.back .cols p{ color:rgba(239,237,232,.72); }
.back .cols h3{ color:#EFEDE8; border-bottom-color:rgba(239,237,232,.3); }