/* Boothroyd. One stylesheet.
   The register is an engineering document, not a brochure.
   Five type sizes: 12 mono label, 16 body, 20 lede, 28 section, 46 page.
   Nothing on the site is larger than 46. See docs/DESIGN-REVIEW-2026-08-24.md.
*/
:root{
  --graphite:#12151A; --signal:#3FA34D; --signal-text:#1E6B3A;
  --paper:#FAFAF6; --steel:#5C6470; --hair:#E3E3DD;
  /* One named tint, replacing the two invented greys that were live.
     Paper at 64 percent on a graphite ground. Nothing else is off palette. */
  --paper-dim:rgba(250,250,246,.64);
  --wrap:1180px; --pad:40px; --rail:160px; --gut:32px; --col:720px;
  --t-label:12px; --t-body:16px; --t-lede:20px; --t-head:28px; --t-page:46px;
}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--graphite);
  font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;
  font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---- labels, refs, anything numbered ---- */
.mono,.lab,.figcap,.hd a,.n{font-family:'IBM Plex Mono',monospace;
  font-variant-numeric:tabular-nums;letter-spacing:.075em}
.lab,.eyebrow{font-size:var(--t-label);text-transform:uppercase;color:var(--steel);display:block}
.lab b{color:var(--graphite);font-weight:400}
/* The intake partials label their sections with .eyebrow. Same job as .lab,
   so it gets the same type. */
.eyebrow{font-family:'IBM Plex Mono',monospace;letter-spacing:.075em;margin-bottom:14px}

/* ---- the page ---- */
.doc{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.rail{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gut);align-items:start}
.rail>.col{max-width:var(--col)}
.band{padding:64px 0;border-top:1px solid var(--hair)}
.band.first{border-top:0}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:8px 0;font-size:var(--t-label)}

/* ---- the document header. Two rows, not sticky. A document does not follow you. ---- */
.hd{border-bottom:1px solid var(--graphite)}
.hd-top{display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 18px;gap:24px}
.hd-top .mk{height:30px;width:auto;display:block;color:var(--graphite)}
.hd-mail{font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);
  letter-spacing:.05em;text-decoration:none;color:var(--graphite)}
.hd-mail:hover{color:var(--signal-text)}
.hd-nav{display:flex;justify-content:space-between;gap:24px;
  border-top:1px solid var(--hair);padding:9px 0 10px;flex-wrap:wrap}
.hd-nav ul{display:flex;gap:18px;list-style:none;flex-wrap:wrap}
.hd a{font-size:var(--t-label);text-transform:uppercase;text-decoration:none;
  color:var(--steel);white-space:nowrap}
.hd a:hover{color:var(--graphite)}
.hd a[aria-current]{color:var(--graphite)}
.hd a .n{color:var(--signal-text);margin-right:5px}
.navtoggle{display:none;background:none;border:1px solid var(--hair);padding:7px 11px;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);cursor:pointer;color:var(--graphite)}

/* ---- the section rail. Distribution has eight pages under it. Putting them
   in the discipline index would turn a five item nav into a thirteen item one,
   so the section carries its own rail and only on its own pages. ---- */
.sect{border-top:1px solid var(--hair);padding:9px 0 10px}
.sect ul{display:flex;gap:18px;list-style:none;flex-wrap:wrap}

/* ---- masthead. The dead right hand column now carries the figure. ---- */
.mast{display:grid;grid-template-columns:var(--rail) minmax(0,520px) minmax(0,1fr);
  gap:var(--gut);padding:60px 0 56px;align-items:start}
h1{font-size:var(--t-page);line-height:1.1;font-weight:600;letter-spacing:-.014em}
.lede{font-size:var(--t-lede);color:var(--steel);margin-top:20px;max-width:46ch}
.mast .lab{margin-bottom:20px}
.morse{margin-top:2px}
.rule-band{padding:22px 0;border-top:1px solid var(--hair)}
.note{font-size:var(--t-body);color:var(--steel);margin-top:18px;max-width:64ch}
.cta{display:inline-block;margin-top:26px;font-size:var(--t-body);font-weight:500;text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:3px}
.cta:hover{color:var(--signal-text)}
.mb{width:100%;height:auto;display:block}
.morse .lab{margin-top:8px}

/* ---- figures. Line drawings, generated, never illustration. ---- */
.fig{width:100%;height:auto;display:block}
.figcap{font-size:var(--t-label);color:var(--steel);line-height:1.55;
  margin-top:14px;padding-top:9px;border-top:1px solid var(--hair)}
.figcap .n{color:var(--graphite);margin-right:8px}

/* ---- photographs. The manufacturer's own documentary product photography,
   used under the distribution agreement, captioned and credited like evidence.
   Never a unit's interior, never a packaging shot, never stock. ---- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.shot.one{grid-column:1 / -1}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--hair)}
.shot figcaption{font-size:var(--t-label);color:var(--steel);line-height:1.55;
  margin-top:14px;padding-top:9px;border-top:1px solid var(--hair);
  font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}

/* ---- the manufacturer's mark. BRAND.md, Co-Branding With Cellular Path: its
   own colours on a plain ground, its own clear space, never recoloured and
   never locked up with a Boothroyd mark. The clear space is 1.5 times the mark
   height on every side, which is the vendor's own rule, and the padding below
   is that figure for a 28px mark. ---- */
.vendor-mark{display:block;padding:42px 42px 42px 0}
.vendor-mark img{height:28px;width:auto;display:block}
.vendor p{max-width:62ch}
.vendor .note{margin-top:14px}

/* ---- the published price. One number, in mono, with what it is underneath.
   It is a recommendation and the small print says so every time. ---- */
.price{font-family:'IBM Plex Mono',monospace;font-size:var(--t-lede);
  font-variant-numeric:tabular-nums;line-height:1.3}
.price span{display:block;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;
  font-size:var(--t-label);line-height:1.55;color:var(--steel);margin-top:10px;
  letter-spacing:0;max-width:40ch}

/* ---- the intake partials, which sit inside a band's text column. Their own
   stylesheet, intake.css, dresses the fields. The headings and the prose take
   the site's type, so a form reads as part of the document. ---- */
.intake h2{margin-bottom:12px}
.intake-thanks h1{margin-bottom:20px}
.intake-thanks p{margin-bottom:16px;max-width:66ch}
.intake-thanks p:last-child{margin-bottom:0}

/* ---- the index. Replaces the card grid. No boxes, no empty cell. ---- */
.index{border-top:1px solid var(--graphite)}
.ix{display:grid;grid-template-columns:var(--rail) minmax(0,280px) minmax(0,1fr);
  gap:var(--gut);padding:22px 0 24px;border-bottom:1px solid var(--hair);
  text-decoration:none;align-items:start}
.ix:hover{background:rgba(18,21,26,.024)}
.ix .n{font-size:var(--t-label);color:var(--steel);display:block}
.ix .mki{height:26px;width:auto;display:block;margin-top:10px;color:var(--graphite)}
.ix .nm{font-size:var(--t-lede);font-weight:600;line-height:1.25}
.ix .tg{font-size:var(--t-body);color:var(--signal-text);margin-top:3px}
.ix .pr{font-size:var(--t-body);color:var(--steel)}
.ix:hover .nm{color:var(--signal-text)}

/* ---- headings and prose ---- */
h2{font-size:var(--t-head);font-weight:600;letter-spacing:-.01em;line-height:1.2}
h3{font-size:var(--t-body);font-weight:600}
.col>h2{margin-bottom:22px}
.prose p{margin-bottom:16px;max-width:66ch}
.prose p:last-child{margin-bottom:0}
.pull{font-size:var(--t-head);font-weight:500;line-height:1.28;letter-spacing:-.008em;
  max-width:30ch;margin:0}
.pull.hang{margin-bottom:30px}
.sig{margin-top:28px;font-weight:600}
.sig span{display:block;font-weight:400;color:var(--steel);font-size:var(--t-body)}

/* ---- specification tables. Values are words. Never invented numbers. ---- */
.spec{border-top:1px solid var(--graphite)}
.spec>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:24px;
  padding:13px 0;border-bottom:1px solid var(--hair)}
.spec b{font-weight:500}
.spec span{color:var(--steel)}
.spec.wide>div{grid-template-columns:var(--t-label) minmax(0,1fr)}

/* ---- numbered lists: capabilities, rules, sequences ---- */
.num{list-style:none;border-top:1px solid var(--graphite)}
.num li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;
  padding:15px 0;border-bottom:1px solid var(--hair);counter-increment:n}
.num li:before{content:"0" counter(n);font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-label);color:var(--signal-text);font-variant-numeric:tabular-nums;
  padding-top:3px}
.num{counter-reset:n}
.num .t{font-weight:500}
.num .d{color:var(--steel);margin-top:2px}
.num.plain li{grid-template-columns:34px minmax(0,1fr)}

/* ---- the closer. The one dark band per page. ---- */
.closer{background:var(--graphite);color:var(--paper);padding:64px 0 68px;margin-top:0}
.closer h2{max-width:24ch}
.closer p{color:var(--paper-dim);margin-top:14px;max-width:46ch}
.closer .lab{color:var(--signal)}
.closer a.mail{display:inline-block;margin-top:28px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-lede);text-decoration:none;color:var(--paper);
  border-bottom:2px solid var(--signal);padding-bottom:4px}
.closer a.mail:hover{color:var(--signal)}

/* ---- footer ---- */
footer{padding:44px 0 52px;font-size:var(--t-body);color:var(--steel)}
footer .cols{display:grid;grid-template-columns:var(--rail) repeat(4,minmax(0,1fr));gap:var(--gut)}
footer a{text-decoration:none;display:block;margin-bottom:6px}
footer a:hover{color:var(--signal-text)}
footer .lab{margin-bottom:12px}
.disc{border-top:1px solid var(--hair);margin-top:36px;padding-top:18px;font-size:var(--t-label);
  font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;line-height:1.6}

/* ---- narrow ---- */
@media(max-width:960px){
  :root{--pad:24px;--rail:0px;--gut:0px;--t-page:34px;--t-head:24px}
  .rail,.mast,footer .cols{grid-template-columns:minmax(0,1fr);gap:26px}
  .mast{padding:40px 0 36px}
  .band{padding:44px 0}
  .ix{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .ix .mki{display:none}
  .ix .n{margin-bottom:4px}
  .spec>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .hd-nav{border-top:0;padding:0 0 14px}
  .hd-nav ul{display:none;flex-direction:column;gap:0;width:100%}
  .hd-nav ul.open{display:flex}
  .hd-nav ul li{width:100%;padding:7px 0}
  .navtoggle{display:block}
  .hd-top{padding:16px 0 14px}
  .morse{max-width:240px}
  footer .cols{gap:22px}
  /* The section rail stays visible at narrow widths. It is five short items
     and it is the only way between the pages of the section. */
  .sect ul{gap:8px 16px}
  .shots{grid-template-columns:minmax(0,1fr)}
  .vendor-mark{padding:36px 36px 36px 0}
}

/* ---- print. BRAND.md requires every artefact to survive an office laser in one
   colour. This is that requirement, implemented. One ink: tone comes from grey,
   never from hue. Nothing bleeds. ---- */
@media print{
  @page{margin:16mm 20mm}
  html,body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
  .hd-nav,.navtoggle,.skip,.rule-band{display:none}
  .hd{border-bottom:1.2pt solid #000}
  .hd-top{padding:0 0 10pt}
  .doc{max-width:none;padding:0}
  .rail,.mast,footer .cols{display:block}
  .mast{padding:0 0 14pt}
  h1{font-size:20pt}
  h2,.pull{font-size:13pt}
  .lede{font-size:11pt;color:#333;max-width:none}
  .band{padding:14pt 0;border-top:.5pt solid #999}
  /* dark grounds invert. A solid graphite panel on an office laser is a waste of toner. */
  .closer{background:#fff!important;color:#000!important;padding:14pt 0;
    border-top:1.2pt solid #000;border-bottom:1.2pt solid #000}
  .closer p,.closer .lab{color:#333!important}
  .closer a.mail{color:#000!important;border-bottom:1pt solid #000;font-size:12pt}
  /* one ink. Tone comes from grey, never from hue. */
  *{color:#000!important}
  .num li:before,.figcap .n,.ix .n{color:#000!important}
  .prose p,.lede,.num .d,.spec span{max-width:78ch}
  .steel,.spec span,.num .d,.ix .pr,footer,.figcap{color:#444!important}
  .ix .tg{color:#000!important}
  /* Never repaint fill="none". Forcing it turns a line drawing into a black wedge. */
  svg [fill]:not([fill="none"]){fill:#000!important}
  svg [stroke]:not([stroke="none"]){stroke:#000!important}
  a{text-decoration:none}
  .cta,.closer a.mail{border-bottom-color:#000!important}
  .index,.spec,.num{border-top:1pt solid #000}
  .ix,.spec>div,.num li{border-bottom:.5pt solid #999;break-inside:avoid}
  .ix{padding:7pt 0}
  .ix .mki{display:none}
  figure,.figbox{break-inside:avoid;max-width:110mm}
  footer .lab{margin-bottom:4pt}
  .disc{border-top:.5pt solid #999;margin-top:14pt}
  /* Photographs print, because a sales sheet printed off the page is a real
     use. One per row, capped, caption kept with the image. */
  .shots{display:block}
  .shot{break-inside:avoid;max-width:110mm;margin-bottom:10pt}
  .shot figcaption{color:#444!important;border-top:.5pt solid #999}
  /* The vendor's mark is the one thing on the site that keeps its colour on
     paper. A one ink rendering of somebody else's trade mark is an alteration
     of it, which the co-branding rules forbid. */
  .vendor-mark img{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .vendor-mark{padding:0 0 10pt}
  /* Forms do not print. A printed form with no way to submit it is a trap. */
  .intake-form,.sect{display:none}
}