:root{
  --paper:#E9EEF1;      /* drafting-film grey */
  --sheet:#FFFFFF;
  --ink:#14212D;        /* drawing ink */
  --steel:#5A6B79;
  --rule:#C3CDD4;
  --hazard:#F2B705;     /* towing / safety yellow */
  --link:#1858A0;
  --sec:#1858A0; --ex:#2E7D4F; --guide:#8A4FB0; --annex:#8A6A12; --calc:#B5462E;
  --head:"Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --body:"Noto Sans", "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--body)}
a{color:var(--link);text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--hazard);outline-offset:2px}
img{max-width:100%;height:auto;vertical-align:middle}

/* top bar */
.topbar{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;justify-content:space-between;
  padding:10px 24px;background:var(--ink);color:#DCE3E8;font-size:13px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 17px/1.2 var(--head);letter-spacing:.2px}
.brand-mark{width:22px;height:22px;border-radius:50%;border:3px solid var(--hazard);position:relative}
.brand-mark::after{content:"";position:absolute;left:50%;top:100%;width:3px;height:8px;background:var(--hazard);transform:translateX(-50%)}
.authors{opacity:.75}

/* content sheet */
.sheet{max-width:1040px;margin:28px auto 60px;background:var(--sheet);padding:28px 40px 32px;
  border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule)}
.crumbs{font-size:13px;color:var(--steel);margin-bottom:18px}
.crumbs span{margin:0 6px;color:var(--rule)}
.doc-head{display:flex;gap:10px;align-items:center;font:600 14px var(--head)}
.kind{padding:2px 9px;border-radius:3px;color:#fff;background:var(--sec)}
.kind-examples{background:var(--ex)} .kind-guides{background:var(--guide)}
.kind-annexes{background:var(--annex)} .kind-calculators{background:var(--calc)}
.code{color:var(--steel)}
h1{font:700 30px/1.15 var(--head);margin:8px 0 22px;padding-bottom:14px;border-bottom:3px solid var(--ink)}
.content{overflow-wrap:break-word}
.content p{margin:.35em 0}
.content h2,.content h3{font-family:var(--head);margin:1.2em 0 .4em}
.content h2{font-size:22px} .content h3{font-size:18px}
.content table{border-collapse:collapse;margin:10px 0;max-width:100%}
.content td,.content th{border:1px solid var(--rule);padding:5px 8px;vertical-align:top}
.content table.plain td{border:0;padding:2px 6px}
.content .scroll{overflow-x:auto}
.content b>i,.content i>b{color:inherit}
.content .step{background:#F4F7F9;border-left:4px solid var(--hazard);padding:8px 12px;margin:12px 0}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;padding-top:18px;border-top:1px solid var(--rule)}
.pager a{display:block;text-decoration:none;color:var(--ink);padding:10px 14px;border:1px solid var(--rule);border-radius:4px;font:600 15px/1.3 var(--head)}
.pager a:hover{border-color:var(--ink)}
.pager small{display:block;font:400 12px var(--body);color:var(--steel)}
.pager .next{text-align:right}

/* calculation windows */
.calc-body .topbar{display:none}
.sheet.calc{max-width:760px;margin:16px auto;padding:20px 26px}
.calc h1{font-size:24px}
.calc input[type=text]{font:inherit;padding:3px 6px;border:1px solid var(--steel);border-radius:3px;width:7.5em}
.calc input[type=button]{font:600 15px var(--head);background:var(--ink);color:#fff;border:0;border-radius:3px;padding:6px 16px;cursor:pointer}
.calc input[type=button]:hover{background:var(--link)}
.calc table td{border:0;padding:4px 8px}
.calc-note{font-size:13px;color:var(--steel);margin-top:16px}

@media (max-width:700px){
  .sheet{margin:0;padding:18px 16px;border:0}
  h1{font-size:24px}
  .topbar{padding:10px 16px}
  .content{overflow-x:auto}
  .pager{grid-template-columns:1fr}
}
@media print{.topbar,.pager,.crumbs{display:none}.sheet{border:0;margin:0;max-width:none}}