/* 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%}
img{height:auto}
: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}
/* A band label is an h2 since queue 09, so that a page with six bands can be
   navigated by heading. It has to go on looking like a label: .lab is a class
   selector and already beats the h2 rule on size, tracking, colour and case,
   but h2 sets a weight and a leading that .lab does not, so those two are put
   back here. Nothing a reader sees moves. */
h2.lab{font-weight:400;line-height:inherit}
/* 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}
/* The mark is a flex item and was being squeezed by the Index button and the
   24 character address beside it: 9.6px wide at 360 and nothing at all at 320.
   It does not shrink. The padding takes the box a thumb hits to 46px without
   changing the mark, which stays 30px. */
.hd-top>a:first-child{flex:none;display:block;padding:8px 0}
.hd-top .mk{height:30px;width:auto;display:block;color:var(--graphite);flex:none}
.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}
/* The index opens with :target, not with a script, so it works on a phone with
   JavaScript off. 04a, 24 October 2026. Both are links, boxed like the button
   they replace, and both are hidden at widths where the index is always open. */
.navtoggle,.navclose{display:none;border:1px solid var(--hair);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);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}
/* The two column variant. A class and not an inline style, so the narrow
   breakpoint below can still collapse it to one column. */
.mast-2{grid-template-columns:var(--rail) minmax(0,720px)}
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 had its own block in the masthead until 04a, when it
   moved into the figures strip on each model page. The strip carries the
   recommendation wording with it, so nothing was lost but the block. */

/* ---- 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)}

/* ---- destinations: the numbered list, but every row is a link. Used by the
   404 page, which before queue 06 was a stack of .cta links with inline
   styles on them. Same rhythm as .num, same hairline, 60px of row so a thumb
   has a target without a media query. ---- */
.dest{border-top:1px solid var(--graphite)}
.dest a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;
  padding:17px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.dest a:hover{background:rgba(18,21,26,.024)}
.dest .n{font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);
  color:var(--signal-text);font-variant-numeric:tabular-nums;padding-top:3px}
.dest .nm{display:block;font-weight:500}
.dest .tg{display:block;color:var(--steel);margin-top:2px}
.dest a:hover .nm{color:var(--signal-text)}

/* ---- 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}

/* ================================================================= 04a
   boothroyddistribution.com, 24 October 2026. The product-led components,
   written at 360 px first and widened with min-width queries. Everything
   above this line predates them and is still written the other way round,
   with a max-width:960px override; the two do not share a selector.

   The standard these are built to: the hero photograph, the headline and
   both buttons fit above the fold on a 360 x 740 phone, every target a
   thumb has to hit is at least 44 px, and nothing is laid out as a table.
   ================================================================= */

/* ---- hero. Photograph first in the source, so it is first on a phone.
   At desk width it moves to the third column and the rail comes back. ---- */
/* Two class names, so this still beats the max-width:960px block further down,
   which sets .band padding for every other band on the page. */
.band.hero{padding:26px 0 0}
.herogrid{display:grid;gap:20px}
.heroshot{margin:0}
/* Capped by height rather than by width, and never cropped. A square or a
   portrait photograph at the full column width is 312 or 468 px tall on a
   360 px phone, which on its own puts the buttons below the fold. Letting the
   width follow the height keeps the whole frame and keeps the fold. */
.heroimg{max-height:220px;width:auto;height:auto;display:block;
  border:1px solid var(--hair)}
.herolab{margin:0}
.herotext h1{margin-top:4px}
.herotext .lede{margin-top:14px}

/* Two buttons, side by side, 48px high. A thumb, not a cursor. */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 20px;text-decoration:none;font-weight:500;
  border:1px solid var(--graphite);color:var(--graphite);flex:1 1 auto}
.btn.primary{background:var(--graphite);color:var(--paper);border-color:var(--graphite)}
.btn:hover{border-color:var(--signal)}
.btn.primary:hover{background:var(--signal-text);border-color:var(--signal-text)}

/* ---- the figures strip under a hero. Two by two on a phone, one row on a
   desk. Mono, because these are readings and not claims. ---- */
.strip{border-top:1px solid var(--graphite);border-bottom:1px solid var(--hair);
  padding:18px 0}
.strip ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;
  list-style:none}
.strip li{font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);
  letter-spacing:.04em;text-transform:uppercase}
.strip p{font-size:var(--t-label);color:var(--steel);line-height:1.55;margin-top:16px;
  max-width:70ch}

/* One line of attribution under a table of figures or a pulled one. */
.credit{font-size:var(--t-label);color:var(--steel);line-height:1.55;margin-top:14px;
  max-width:70ch}

/* ---- tiles. One per row on a phone, two from 560, four on a desk. ---- */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.tile{text-decoration:none;display:block}
.tile img{width:100%;height:auto;display:block;
  border:1px solid var(--hair)}
.tiletext{display:block;padding-top:12px}
.tile .nm{display:block;font-size:var(--t-body);font-weight:600}
.tile .tg{display:block;font-size:var(--t-body);color:var(--steel);margin-top:2px}
.tile:hover .nm{color:var(--signal-text)}

/* ---- the two models. Stacked on a phone, side by side from 560. ---- */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border-top:1px solid var(--graphite)}
.card{display:block;padding:20px 0 22px;border-bottom:1px solid var(--hair);
  text-decoration:none;min-height:44px}
.card:hover{background:rgba(18,21,26,.024)}
.card .n{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);
  letter-spacing:.075em;color:var(--steel)}
.card .nm{display:block;font-size:var(--t-lede);font-weight:600;line-height:1.25;
  margin-top:6px}
.card .tg{display:block;font-size:var(--t-body);color:var(--signal-text);margin-top:3px}
.card .pr{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t-body);
  font-variant-numeric:tabular-nums;margin-top:12px}
.card .go{display:inline-block;margin-top:14px;font-size:var(--t-body);font-weight:500;
  border-bottom:2px solid var(--signal);padding-bottom:3px}
.card:hover .nm,.card:hover .go{color:var(--signal-text)}

@media(min-width:560px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 32px rather than var(--gut), which is 0 below 960 so that the rail can
     collapse. A two column grid still needs a gutter between the columns. */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  .btn{flex:0 0 auto}
}

@media(min-width:961px){
  .band.hero{padding:56px 0 0}
  .herogrid{grid-template-columns:var(--rail) minmax(0,520px) minmax(0,1fr);
    gap:var(--gut);align-items:start;
    grid-template-areas:"lab text shot"}
  .heroshot{grid-area:shot}
  .herolab{grid-area:lab}
  .herotext{grid-area:text}
  .heroimg{width:100%;max-height:none}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
  .strip ul{display:flex;flex-wrap:wrap;gap:10px 28px}
  .strip li+li{position:relative;padding-left:28px}
  .strip li+li:before{content:"";position:absolute;left:0;top:.45em;width:12px;
    height:1px;background:var(--hair)}
}

/* ---- 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{display:none;border-top:0;padding:0 0 14px}
  .hd-nav:target{display:block}
  .hd-nav ul{flex-direction:column;gap:0;width:100%}
  .hd-nav ul li{width:100%;padding:0}
  .navtoggle,.navclose{display:block;padding:12px 14px}
  .navclose{margin-top:10px;text-align:center}
  .hd-top{padding:16px 0 14px}
  /* Thumbs, not cursors. Every link and button a phone has to hit is taken to
     about 44px high, which is the platform guide. WCAG 2.2 asks for 24, and
     these were 19 to 38. The type does not change, only the box around it. */
  .hd-nav ul li a{display:block;padding:13px 0}
  .hd-mail{display:block;padding:12px 0}
  footer a{padding:10px 0;margin-bottom:0}
  .cta{padding-top:14px;margin-top:12px}
  .closer a.mail{padding-top:8px}
  .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}
}

/* ---- phones. The header address is 24 characters of mono and will not fit
   beside the mark and the Index button on a narrow phone; at 320px it pushed
   the page 6px wider than the viewport on every page. It comes out below
   480px, where the three items stop fitting on one row. The address is in the
   closer and in the footer of every page, so nothing is lost. ---- */
@media(max-width:480px){
  .hd-mail{display:none}
}

/* ---- 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,.dest .n{color:#000!important}
  .prose p,.lede,.num .d,.spec span{max-width:78ch}
  .steel,.spec span,.num .d,.dest .tg,.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,.dest a{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}
}