@charset "utf-8";
/* ===========================================================================
   PROLINE ARCHITECTURAL IRONMONGERS
   Industrial product monograph behind studio glass.
   A dark vitrine where the hardware is the only rich object on the page and
   everything else is whispered around it. One warm accent, taken from brass.
   Zero radius. Hairlines only. No shadows for elevation, no gradients as decor.
   =========================================================================== */

/* ---------- 1. Faces. Self-hosted, SIL OFL 1.1. See fonts/OFL.txt ---------- */

@font-face{font-family:Archivo;src:url(fonts/archivo.2384eb359c.woff2) format("woff2");
  font-weight:300 700;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/mono.c4252427ab.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

/* ---------- 2. Tokens ------------------------------------------------------ */

:root{
  color-scheme:dark;

  /* The vitrine. Warm violet-cast carbon, never pure black. */
  --carbon:#131117;
  --steel:#1C1922;
  --case:#24202B;

  /* Paper, for the document register: schedules, specifications, forms. */
  --paper:#F1EFEA;
  --sheet:#F8F7F4;

  --lit:#F4F2EE;          /* text on carbon        14.5:1 */
  --lit-2:#A9A3B0;        /* secondary on carbon    6.6:1 */
  --lit-3:#8E8896;        /* annotation on carbon   4.8:1 */
  --hair:#2E2936;
  --hair-2:#4A4356;

  --ink:#1A171E;          /* text on paper         14.7:1 */
  --ink-2:#4A4453;        /* secondary on paper     7.6:1 */
  --ink-3:#655D70;        /* annotation on paper    5.2:1 */
  --rule:#CFC9D2;
  --rule-2:#7B7385;

  /* Brass. The only chromatic note, and it is the colour of the product. */
  --brass:#D8A54A;        /* on carbon   9.3:1 */
  --brass-ink:#7E5B0F;    /* on paper    5.4:1 */
  --error:#E4735C;
  --error-ink:#9A3A24;

  --f-sss:#A8ADB2; --f-pss:#C9CDD1; --f-pb:#C8A34A;  --f-sb:#B2975A;
  --f-ab:#8B6F3E;  --f-pc:#D4D8DC;  --f-sc:#AFB4B8;  --f-pn:#CFC9BE;
  --f-sn:#ADA79C;  --f-brz:#6E5A47; --f-dbz:#3E332A; --f-mb:#1C1C1C;
  --f-saa:#B7B8B5;

  --measure:64ch;
  --gut:clamp(1.25rem,4vw,3rem);
  --page:88rem;
  --band:clamp(4rem,8vw,8rem);

  --bg:var(--carbon); --fg:var(--lit); --fg2:var(--lit-2); --fg3:var(--lit-3);
  --line:var(--hair); --line-2:var(--hair-2); --raise:var(--steel);
  --accent:var(--brass); --err:var(--error);
}

/* Three grounds, and a page is meant to move between them. The dark is the
   vitrine, the case wall is one step forward from it, and the paper is the
   document register: schedules, specifications, terms, forms. A site that never
   leaves the first of the three is a tunnel, however well the tunnel is set. */
.paper{
  --bg:var(--paper); --fg:var(--ink); --fg2:var(--ink-2); --fg3:var(--ink-3);
  --line:var(--rule); --line-2:var(--rule-2); --raise:var(--sheet);
  --accent:var(--brass-ink); --err:var(--error-ink);
  background:var(--bg); color:var(--fg);
}
.raised{--bg:var(--case); --raise:var(--carbon); background:var(--bg); color:var(--fg)}

/* ---------- 3. Base -------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--carbon)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--carbon);color:var(--lit);
  font-family:Archivo,sans-serif;font-variation-settings:"wdth" 100;
  font-size:1.0625rem;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip}

h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p,ul,ol,dl,figure,table{margin:0}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.16em;text-decoration-color:var(--accent)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0}
::selection{background:var(--brass);color:var(--carbon)}
hr{border:0;border-top:1px solid var(--line);margin:0}
button{font:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.5rem;z-index:99;background:var(--steel);color:var(--lit);
  padding:.7rem 1.1rem;border:1px solid var(--hair-2)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Type. One family, worked hard across its width axis. ------- */

/* The serial plate: condensed caps, wide tracked. Labels every element on
   screen the way a wiring diagram labels a circuit. This is the signature. */
.serial,.sect>h2,.sect>h3 .t,.sect>b,.rail b,.foot h2,nav.main a,.act,.strip,.brand b,.brand i,
form.enq .step,.field>label,.field>legend,.tbc b,.said footer b,.record figcaption b,
figure.plate figcaption,.makers,table.sched thead th,table.sched caption b,.set>header b,
.bar a,.navtoggle{
  font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:.09em}

.serial{font-weight:600;font-size:.75rem;line-height:1.35;color:var(--fg3)}
@media (max-width:30rem){.serial{font-size:.6875rem;letter-spacing:.07em}}
.mono{font-family:"Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  letter-spacing:.03em}

/* Display. Weight 400 at enormous size. The whisper at scale is the loud gesture. */
.d1{font-size:clamp(2.25rem,.85rem + 6.4vw,8.5rem);font-weight:400;
  font-variation-settings:"wdth" 106;line-height:.9;letter-spacing:-.034em;
  text-transform:uppercase;text-wrap:balance}
/* The longest word in the display line sets the floor. Never let it clip: overflow-x
   is clipped on body, so a too-wide headline would be silently cut rather than scroll. */
@media (max-width:26rem){.d1{font-variation-settings:"wdth" 92;letter-spacing:-.028em}}
.d2{font-size:clamp(1.875rem,1rem + 3.9vw,4.75rem);font-weight:400;
  font-variation-settings:"wdth" 106;line-height:.95;letter-spacing:-.03em;
  text-transform:uppercase}
.h2{font-size:clamp(1.625rem,1.15rem + 2vw,2.5rem);font-weight:400;line-height:1.1;
  letter-spacing:-.02em}
.h3{font-size:1.5rem;font-weight:600;line-height:1.3;letter-spacing:-.008em}
.h4{font-size:1rem;font-weight:600;line-height:1.35}

.stand{font-size:clamp(1.125rem,1rem + .55vw,1.4375rem);line-height:1.42;
  color:var(--fg2);max-width:46ch;font-weight:300;letter-spacing:-.006em}
.small{font-size:.875rem;line-height:1.5}
.note{font-size:.8125rem;line-height:1.6;color:var(--fg3);
  font-variation-settings:"wdth" 92;max-width:62ch}
.quote{font-size:clamp(1.375rem,1.05rem + 1.3vw,2.125rem);font-weight:300;line-height:1.22;
  letter-spacing:-.02em}

.prose{max-width:var(--measure)}
.prose p+p,.prose p+ul,.prose ul+p,.prose p+figure{margin-top:1.15em}
.prose li+li{margin-top:.4em}
.prose ul{padding-left:1.1em}
.prose strong{font-weight:600;color:var(--fg)}

ol.hang{list-style:none;padding:0;counter-reset:h}
ol.hang>li{counter-increment:h;position:relative;padding-left:4.25rem;
  padding-block:1.4rem;border-top:1px solid var(--line)}
ol.hang>li:last-child{border-bottom:1px solid var(--line)}
ol.hang>li::before{content:counter(h,decimal-leading-zero);position:absolute;left:0;top:1.4rem;
  font-family:"Plex Mono",monospace;font-size:.875rem;letter-spacing:.04em;color:var(--accent)}
ol.hang b{display:block;font-weight:600;margin-bottom:.15em}

/* ---------- 5. Frame ------------------------------------------------------- */

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--band)}
.band+.band{border-top:1px solid var(--line)}

/* THE MIDDLE RUNG.
   This site had 63 <h2> elements and not one of them rendered larger than 13px, because
   every section heading was a .sect drawing label: condensed caps, wdth 70, smaller than
   the 17px body it was organising, under a 105px display face. There was no size between
   the headline and the annotation, so the annotation voice was conscripted to do headline
   work 46 times. That, and not the standards numbers, is what made the site read as
   relentlessly technical. The fix is a third register on the width axis, not less
   typographic ambition: .sect stays a drawing label and gets legible, and .sect.major
   becomes the heading a long section actually needs. */
.sect{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:baseline;
  justify-content:space-between;border-top:1px solid var(--line-2);
  padding-top:1.15rem;margin-bottom:clamp(2.75rem,4.5vw,5rem)}
.sect>h2,.sect>h3 .t,.sect>b{font-weight:600;font-size:.9375rem;line-height:1.25;color:var(--fg);
  font-variation-settings:"wdth" 82;letter-spacing:.06em}
h3.sect{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:baseline;justify-content:space-between}
.sect>span{font-size:.8125rem;line-height:1.3;color:var(--fg3);
  font-variation-settings:"wdth" 92}

/* For the six or so headings on a long page that govern 400px or more of content.
   "Part B, the hardware sets" owns 974px on /schedules/ and was set at 13px. */
.sect.major{align-items:end;margin-bottom:clamp(2rem,3.5vw,3.25rem)}
.sect.major>h2{font-size:clamp(1.5rem,1rem + 1.6vw,2.125rem);font-weight:400;line-height:1.1;
  font-variation-settings:"wdth" 88;letter-spacing:-.014em;text-transform:none}
.sect.major>span{padding-bottom:.35rem}

.cols{display:grid;gap:var(--gut) clamp(2rem,5vw,5rem)}
.cols>*,.flow>*,.doors>*{min-width:0}
@media (min-width:62rem){
  .cols{grid-template-columns:minmax(0,1fr) 20rem}
  .cols.wide{grid-template-columns:minmax(0,1fr) 25rem}
  .cols.flip{grid-template-columns:20rem minmax(0,1fr)}
  /* When a rail's only content was a review note, the build strips the rail entirely
     and this collapses the grid. Without it the clean build leaves a blank quarter
     screen beside a squeezed column. Note :has() cannot nest inside :has(), so the
     emptiness test has to happen at build time, not here. */
  .cols:has(>:only-child){grid-template-columns:minmax(0,1fr)}
}
.rail{font-size:.8125rem;line-height:1.62;color:var(--fg3);
  font-variation-settings:"wdth" 92}
.rail>*+*{margin-top:2.25rem}
.rail b{display:block;color:var(--fg2);font-weight:600;font-size:.6875rem;margin-bottom:.4rem}

/* ---------- 6. Header, nav, footer ---------------------------------------- */

.strip{border-bottom:1px solid var(--hair);background:var(--carbon);
  font-size:.6875rem;font-weight:500}
.strip .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.75rem;align-items:center;
  padding-block:.7rem;color:var(--lit-3)}
.strip a{color:var(--lit);text-decoration-color:var(--hair-2)}
.strip .sep{color:var(--hair-2)}
@media (max-width:47.99rem){.strip .sep{display:none}}

.head{position:sticky;top:0;z-index:40;background:var(--carbon);
  border-bottom:1px solid var(--hair)}
.head .wrap{display:flex;align-items:center;gap:1.75rem;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--lit);flex:none}
.brand svg{width:40px;height:40px;flex:none;color:var(--brass)}
.brand .wm{display:flex;align-items:center;gap:.85rem}
.brand .reveal{width:1px;align-self:stretch;background:var(--hair-2);margin-block:.1rem}
.brand b{font-weight:600;font-variation-settings:"wdth" 74;letter-spacing:.17em;
  font-size:1.0625rem;line-height:1}
.brand i{font-style:normal;font-size:.5625rem;letter-spacing:.15em;color:var(--lit-3);
  line-height:1;margin-top:.4rem;font-weight:500;display:block}

nav.main{margin-left:auto}
nav.main ul{display:flex;flex-wrap:wrap;gap:0 1.35rem;list-style:none;margin:0;padding:0}
nav.main a{font-size:.6875rem;font-weight:600;color:var(--lit-2);
  font-variation-settings:"wdth" 74;text-decoration:none;padding-block:.4rem;display:block;
  border-bottom:2px solid transparent}
nav.main a:hover{color:var(--lit)}
nav.main a[aria-current]{color:var(--lit);border-bottom-color:var(--brass)}
.navtoggle{display:none}
@media (max-width:63.99rem){
  nav.main{position:relative}
  .navtoggle{display:block;background:none;border:1px solid var(--hair-2);color:var(--lit);
    font-size:.6875rem;font-weight:600;padding:.6rem 1rem;cursor:pointer;
    min-height:44px;min-width:44px}
  nav.main ul{display:none;position:absolute;right:0;top:calc(100% + 1rem);
    background:var(--steel);border:1px solid var(--hair-2);min-width:15rem;
    flex-direction:column;gap:0;padding:.25rem 0;z-index:50}
  nav.main[data-open] ul{display:flex}
  nav.main li+li{border-top:1px solid var(--hair)}
  nav.main a{padding:.9rem 1.15rem;border-bottom:0}
  nav.main a[aria-current]{box-shadow:inset 2px 0 0 var(--brass)}
}

.foot{border-top:1px solid var(--hair);background:var(--carbon);color:var(--lit);
  --fg:var(--lit);--fg2:var(--lit-2);--fg3:var(--lit-3);--line:var(--hair);--accent:var(--brass)}
.foot .grid{display:grid;gap:2.5rem;padding-block:4rem}
@media (min-width:48rem){.foot .grid{grid-template-columns:repeat(3,1fr)}}
.foot h2{font-weight:600;font-size:.6875rem;color:var(--lit-3);margin-bottom:1.1rem}
.foot ul{list-style:none;padding:0;margin:0;font-size:.9375rem}
.foot li+li{margin-top:.55rem}
.foot a{text-decoration-color:var(--hair-2)}
.foot .legal{border-top:1px solid var(--hair);padding-block:1.75rem;font-size:.75rem;
  color:var(--lit-3);font-variation-settings:"wdth" 88;line-height:1.7}

.bar{display:none}
@media (max-width:47.99rem){
  .bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;inset:auto 0 0 0;z-index:60;
    background:var(--steel);border-top:1px solid var(--hair-2);height:58px}
  .bar a{display:flex;align-items:center;justify-content:center;text-decoration:none;
    color:var(--lit);font-weight:600;font-size:.6875rem;font-variation-settings:"wdth" 74}
  .bar a+a{border-left:1px solid var(--hair-2);color:var(--brass)}
  body{padding-bottom:58px}
}

/* ---------- 7. Actions. Outlined, never a filled blob. -------------------- */

.act{display:inline-flex;align-items:center;gap:.85rem;min-height:52px;padding:.85rem 1.6rem;
  background:transparent;color:var(--fg);text-decoration:none;font-weight:600;font-size:.6875rem;
  font-variation-settings:"wdth" 74;border:1px solid var(--fg);border-radius:0;
  transition:background .18s linear,color .18s linear,border-color .18s linear}
.act::after{content:"";width:1.5rem;height:1px;background:currentColor;flex:none}
.act:hover{background:var(--fg);color:var(--bg)}
.act.key{border-color:var(--accent);color:var(--accent)}
.act.key:hover{background:var(--accent);color:var(--bg)}
@media (prefers-reduced-motion:reduce){.act{transition:none}}
.acts{display:flex;flex-wrap:wrap;gap:1rem}

.doors{display:grid;gap:0;border-top:1px solid var(--line-2)}
@media (min-width:48rem){.doors{grid-template-columns:1fr 1fr}}
.door{padding:2rem 0 2.25rem;border-bottom:1px solid var(--line-2)}
@media (min-width:48rem){
  .door+.door{padding-left:clamp(1.5rem,4vw,3.5rem);border-left:1px solid var(--line)}
  .door:first-child{padding-right:clamp(1.5rem,4vw,3.5rem)}}
@media (max-width:47.99rem){.door+.door{border-top:1px solid var(--line)}}
.door h3{margin-bottom:.55rem}
.door p{font-size:.9375rem;color:var(--fg2);margin-bottom:1.6rem;max-width:40ch}

/* ---------- 8. THE VITRINE ------------------------------------------------- */

.vitrine{position:relative;background:var(--carbon);overflow:clip;
  border-bottom:1px solid var(--hair)}
.vitrine>.wrap{position:relative;z-index:2}
/* One raking light across the case wall. A light source, not a decorative glow. */
.vitrine::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(115% 75% at 74% 40%,rgba(216,165,74,.11),transparent 60%)}
.hero{display:grid;gap:2.5rem;align-items:center;
  padding-block:clamp(3rem,7vw,6.5rem) clamp(3rem,6vw,5.5rem)}
@media (min-width:62rem){.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem)}}
.hero .piece{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:min(48vh,420px)}
.hero .piece img{width:100%;object-fit:contain;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.55)) contrast(1.06) saturate(1.05)}
.hero .piece figcaption{position:absolute;right:0;bottom:-1.25rem;font-family:"Plex Mono",monospace;
  font-size:.6875rem;letter-spacing:.05em;color:var(--lit-3);text-align:right;line-height:1.5}

/* ---------- 8b. The masthead ----------------------------------------------
   Every page below the home page opens here. The home page has the vitrine and an
   object in it; a sub-page has a subject and a set of things that govern it, so it
   opens the way a drawing sheet does: the title at the largest size on the page,
   then a ruled title block of the facts that apply. Same discipline as the hero,
   one subject and one claim at dramatic scale, deliberately not the same
   composition. Fired eighteen times, the hero would stop being a hero and become
   a background treatment. */
.mast{position:relative;overflow:clip;border-bottom:1px solid var(--hair)}
.mast::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 85% at 86% 6%,rgba(216,165,74,.10),transparent 64%)}
.mast>.wrap{position:relative;z-index:1}
.mast .top{display:grid;gap:1.75rem clamp(2rem,5vw,4.5rem);align-items:end;
  padding-block:clamp(2.5rem,5vw,4.25rem) clamp(2rem,3.5vw,3rem)}
@media (min-width:62rem){.mast .top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.mast h1{font-weight:400;font-variation-settings:"wdth" 104;line-height:.92;
  letter-spacing:-.032em;text-transform:uppercase;text-wrap:balance;
  /* The preferred term has to be steep enough that the per-title cap in mast() is what
     actually binds, or the size ladder is inert. At 5.2vw the top three buckets all
     resolved to 83px on a 1280px screen, so "Downloads" and "Everything that happens to a
     door" rendered identically and a short title never got to be enormous. 8.8vw reaches
     the 8rem cap at about 1450px and every lower cap well before that, so all five rungs
     are distinct on a laptop. The floor still governs mobile: 8.8vw is 34px at 390px, so
     the 2.25rem minimum wins there and nothing overflows. */
  font-size:clamp(2.25rem,8.8vw,var(--mast,5.5rem))}
@media (max-width:26rem){.mast h1{font-variation-settings:"wdth" 92;letter-spacing:-.026em}}
.mast .lede{color:var(--fg2);font-weight:300;max-width:40ch;
  font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);line-height:1.48;letter-spacing:-.005em}
.mast .lede+.acts{margin-top:1.75rem}
/* The title block. Real facts about the page, set as a drawing sheet sets them.
   Grid, not flex-wrap: wrapping ragged it into 3+2 and 2+1+2 at common widths, which put
   "Exit device against who is behind the door" alongside a maintenance date on the fire
   page. A title block aligns or it is not a title block.
   The label was 9px at opacity .72, which composites to 3.09:1 against the case wall. It
   failed AA on 27 pages, and it falsified this site's own published accessibility figure.
   Dropping the opacity alone takes it to 4.64:1 with no change of colour. */
.mast .datum{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.5rem 3.5rem;border-top:1px solid var(--line-2);padding-block:1.5rem 1.75rem;
  font-family:"Plex Mono",monospace;font-size:.75rem;line-height:1.5;
  letter-spacing:.04em;color:var(--fg3)}
.mast .datum>span{display:block}
.mast .datum b{display:block;font-weight:400;font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg3);margin-bottom:.4rem}
.mast .datum i{font-style:normal;color:var(--accent)}
.mast .datum a{color:var(--fg2);text-decoration-color:var(--line-2)}

/* ---------- 8c. The pull --------------------------------------------------
   One line per page at display scale. The masthead names the subject, this names
   the position we take on it, the close names what to do about it. Three sizes,
   three jobs, in that order down the page: that is the whole narrative of a
   sub-page, and without the middle one the scroll is flat between them. */
/* The line and its footnote sit side by side and bottom aligned, so the argument
   fills the measure instead of leaving half the page dead beside it. */
.turn{display:grid;gap:1.4rem clamp(2rem,6vw,5rem);align-items:end;
  border-top:2px solid var(--accent);padding-top:clamp(1.4rem,2.6vw,2.1rem)}
@media (min-width:56rem){.turn{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.pull{margin:0;max-width:20ch;font-size:clamp(1.6875rem,1rem + 2.5vw,3.375rem);font-weight:400;
  line-height:1.04;letter-spacing:-.028em;font-variation-settings:"wdth" 100;text-wrap:balance}
.pull i{font-style:normal;color:var(--accent)}
.pull-note{margin:0;max-width:46ch;color:var(--fg2);font-size:1rem;line-height:1.62;
  padding-bottom:.35rem}

/* ---------- 8d. The showpiece ---------------------------------------------
   One object, very large, once a page at most. These cut-outs are the only rich
   objects the site owns. At grid-cell size they read as a catalogue thumbnail; at
   half the viewport, lit off one side, they are the reason somebody rings. */
.showpiece{position:relative;overflow:clip;border-block:1px solid var(--line)}
.showpiece>.wrap{display:grid;gap:2.25rem clamp(2rem,6vw,5.5rem);align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem)}
@media (min-width:56rem){
  .showpiece>.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .showpiece.flip>.wrap>figure{order:2}}
.showpiece figure{margin:0}
.showpiece figure img{width:100%;max-height:min(58vh,30rem);object-fit:contain;
  filter:drop-shadow(0 28px 64px rgba(0,0,0,.55)) contrast(1.06) saturate(1.04)}
.showpiece.paper figure img{filter:drop-shadow(0 20px 44px rgba(26,23,30,.20)) contrast(1.04)}
/* "Cupboard knobs, polished copper, unlacquered" is a product name, not a dimension. */
.showpiece figcaption{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:.75rem;
  font-size:.8125rem;font-variation-settings:"wdth" 78;text-transform:uppercase;
  letter-spacing:.09em;color:var(--fg3)}
.showpiece .say{font-size:clamp(1.5rem,1rem + 2.1vw,2.625rem);font-weight:400;line-height:1.06;
  letter-spacing:-.026em;max-width:19ch;text-wrap:balance}
.showpiece .say i{font-style:normal;color:var(--accent)}
.showpiece p{margin-top:1.15rem;color:var(--fg2);max-width:44ch;font-size:1.0625rem;line-height:1.55}
.showpiece .acts{margin-top:1.9rem}

/* The plate wall: the product is the card. Edge to edge, zero padding, zero radius. */
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line)}
.wall>figure{margin:0;background:var(--bg);padding:0;display:flex;flex-direction:column}
.wall .cell{aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;
  padding:1.75rem;overflow:hidden}
.wall .cell img{width:100%;height:100%;object-fit:contain;filter:contrast(1.05) saturate(1.03);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.wall>figure:hover .cell img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .wall .cell img{transition:none}.wall>figure:hover .cell img{transform:none}}
.wall figcaption{border-top:1px solid var(--line);padding:.9rem 1.1rem 1.1rem;margin-top:auto}
.wall figcaption b{display:block;font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--fg)}
.wall figcaption span{display:block;margin-top:.35rem;font-family:"Plex Mono",monospace;
  font-size:.6875rem;letter-spacing:.05em;color:var(--accent)}

/* One photograph the full width of the case. Used once, on the piece that deserves it. */
.bleedshot{position:relative;border-block:1px solid var(--line);background:var(--carbon)}
.bleedshot img{width:100%;height:clamp(18rem,44vw,34rem);object-fit:cover;object-position:center 46%;
  filter:contrast(1.04) saturate(1.06)}
.bleedshot figcaption{display:flex;flex-wrap:wrap;gap:.35rem 2rem;justify-content:space-between;
  align-items:baseline;border-top:1px solid var(--line);padding:.9rem var(--gut);
  font-size:.6875rem;color:var(--fg3);font-variation-settings:"wdth" 70;
  text-transform:uppercase;letter-spacing:.09em;font-weight:500}
.bleedshot figcaption b{color:var(--fg);font-weight:600}
/* Not monospace: all five instances are navigation labels ("More work", "The finish
   guide"), not measurements. Mono is reserved for code, data and dimensions. */
.bleedshot figcaption .k{font-variation-settings:"wdth" 76;letter-spacing:.09em;
  color:var(--accent)}

/* A pair or trio of photographs, evenly ruled. */
.shots{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:44rem){.shots{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.shots>figure{margin:0;background:var(--bg);display:flex;flex-direction:column}
.shots>figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.03)}
.shots figcaption{border-top:1px solid var(--line);padding:.85rem 1.1rem 1rem;margin-top:auto;
  font-size:.8125rem;line-height:1.45;color:var(--fg3)}
.shots figcaption b{display:block;color:var(--fg);font-weight:600;font-size:.8125rem;
  font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.35rem}

/* A portrait, at human scale. */
.portrait{margin:0;max-width:17rem}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%;
  border:1px solid var(--line);filter:grayscale(1) contrast(1.06) brightness(.94)}
.portrait figcaption{margin-top:.85rem;font-size:.8125rem;line-height:1.5;color:var(--fg3)}
.portrait figcaption b{display:block;color:var(--accent);font-weight:600;font-size:.6875rem;
  font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.3rem}

/* A single specimen, large, against the case wall. */
.specimen{display:grid;gap:2rem;align-items:center}
@media (min-width:52rem){
  .specimen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem)}
  .specimen.flip>figure{order:2}}
.specimen>figure{margin:0;background:var(--raise);border:1px solid var(--line);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,4vw,3rem)}
.specimen>figure img{width:100%;height:100%;object-fit:contain;filter:contrast(1.05)}

/* Drawn marks. One grid, one stroke weight, the hardware itself rather than a
   pictogram. Sized in the row, never floated as decoration. */
svg.mk{width:2.75rem;height:2.75rem;flex:none;fill:none;stroke:var(--accent);
  stroke-width:2.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6}
.rows a:hover svg.mk,.rows>div:hover svg.mk{stroke:var(--fg)}
@media (max-width:47.99rem){svg.mk{width:2.25rem;height:2.25rem}}

/* The close. Every page lands here. Brass rule above it so it reads as an ending,
   not another section. */
.close{border-top:2px solid var(--accent);padding-block:calc(var(--band) * 1.4)}
.close .close-line{max-width:22ch;text-transform:none;letter-spacing:-.028em;
  font-variation-settings:"wdth" 100}
@media (min-width:62rem){.close .close-line{max-width:26ch}}

/* ---------- 9. Ruled indexes ---------------------------------------------- */

.rows{border-top:1px solid var(--line-2)}
.rows>*{border-bottom:1px solid var(--line);display:grid;gap:.3rem 2rem;
  padding-block:1.5rem;align-items:baseline}
@media (min-width:48rem){.rows>*{grid-template-columns:17rem minmax(0,1fr)}
  .rows.n>*{grid-template-columns:5rem 17rem minmax(0,1fr)}
  .rows.marked>*{grid-template-columns:2.75rem 15rem minmax(0,1fr);gap:.3rem 1.75rem}}
@media (max-width:47.99rem){.rows.marked>*{grid-template-columns:2.25rem minmax(0,1fr);
  gap:.3rem 1rem}.rows.marked .t,.rows.marked .d{grid-column:2}}
.rows a{text-decoration:none;color:var(--fg);transition:translate .2s ease}
/* translate, not padding: padding would run layout on every frame of the hover, and
   these rows carry a drawn mark and wrapping copy. */
.rows a:hover{translate:.6rem 0}
@media (prefers-reduced-motion:reduce){.rows a{transition:none}.rows a:hover{translate:none}}
.rows .t{font-weight:600;font-size:1.0625rem}
.rows a:hover .t{color:var(--accent)}
.rows .d{color:var(--fg2);font-size:.9375rem;max-width:58ch}
.rows .k{font-family:"Plex Mono",monospace;font-size:.75rem;color:var(--accent);letter-spacing:.05em}

.az{columns:2;column-gap:clamp(1.5rem,4vw,3rem);list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line-2)}
@media (min-width:56rem){.az{columns:3}}
.az li{break-inside:avoid;border-bottom:1px solid var(--line);padding-block:1.05rem;
  font-size:.9375rem;line-height:1.4}

.makers{display:flex;flex-wrap:wrap;gap:.6rem 2rem;list-style:none;margin:0;padding:1.25rem 0 0;
  border-top:1px solid var(--line);font-size:.875rem;font-weight:600;
  font-variation-settings:"wdth" 78}
.makers li{color:var(--fg2)}

/* ---------- 10. Drawings --------------------------------------------------- */

figure.plate{margin:0;background:var(--raise);border:1px solid var(--line);min-width:0;max-width:100%}
figure.plate .plate-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.plate svg{display:block;width:100%;height:auto;padding:clamp(1rem,3vw,2.25rem)}
@media (max-width:47.99rem){figure.plate svg{min-width:520px}}
figure.plate figcaption{border-top:1px solid var(--line);padding:.85rem 1.1rem;
  font-size:.6875rem;line-height:1.4;color:var(--fg3);font-weight:500;
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;justify-content:space-between}
figure.plate figcaption b{color:var(--fg2);font-weight:600}
figure.plate figcaption .sc{font-family:"Plex Mono",monospace;letter-spacing:.05em;
  text-transform:none;color:var(--accent)}

svg .obj{fill:none;stroke:var(--fg);stroke-width:.9;vector-effect:non-scaling-stroke;
  stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6}
svg .obj.fill{fill:var(--fg);stroke:none}
svg .hid{fill:none;stroke:var(--fg);stroke-width:.6;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
svg .ctr{fill:none;stroke:var(--line-2);stroke-width:.5;stroke-dasharray:8 2 1 2;
  vector-effect:non-scaling-stroke}
svg .dim,svg .ext,svg .ldr{fill:none;stroke:var(--line-2);stroke-width:.5;
  vector-effect:non-scaling-stroke}
svg .hatch{stroke:var(--line-2);stroke-width:.5;vector-effect:non-scaling-stroke;fill:none}
svg .txt{font-family:"Plex Mono",monospace;font-size:var(--txt,11px);fill:var(--fg3);letter-spacing:.02em}
svg .txt.b{fill:var(--accent)}
svg .barb{fill:var(--line-2);stroke:none}
svg .sil{fill:var(--fg);stroke:none}
/* The object is complete on load. Only the annotation arrives.
   The timeline is NAMED on the figure. An SVG group has no CSS box, so
   `animation-timeline: view()` on one resolves to a timeline that never activates and
   the animation sits finished at its end state. The figure is a real block box; the
   drawing's parts reference its timeline by name. */
figure.plate{view-timeline-name:--plate;view-timeline-axis:block}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    svg .anno{opacity:0;animation-name:ink;animation-duration:auto;
      animation-timing-function:linear;animation-fill-mode:both;
      animation-timeline:--plate;animation-range:entry 25% cover 45%}
    @keyframes ink{to{opacity:1}}
  }
}

/* The object is complete on load. Only the annotation arrives.
   An SVG group has no CSS box, so `animation-timeline: view()` on one resolves to no
   timeline at all and the animation sits finished at its end state. The timeline is
   therefore named on the figure, which is a real block box, and the drawing's parts
   reference it by name. */

/* ---------- 11. Finish plates. Flat fills only. -------------------------- */

/* Rules on the cells, not gaps over a coloured backing. With a backing, a short last
   row leaves the backing showing as a phantom block the width of the missing cells. */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.plates>div{background:var(--bg);padding:1.5rem;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.plates .chip{aspect-ratio:16/9;border:1px solid rgba(255,255,255,.10);margin-bottom:.85rem}
.paper .plates .chip{border-color:rgba(0,0,0,.14)}
.plates b{display:block;font-size:.8125rem;font-weight:600;line-height:1.3}
.plates .k{font-family:"Plex Mono",monospace;font-size:.6875rem;color:var(--accent);
  letter-spacing:.05em;margin-top:.25rem;display:block}

/* ---------- 12. Classification strip -------------------------------------- */

.clsf{border-top:1px solid var(--line-2)}
.clsf .digits{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.clsf .digits>div{background:var(--bg);min-width:4.5rem;flex:1 1 4.5rem;text-align:center;
  padding:1.75rem .25rem}
.clsf .digits .v{font-family:"Plex Mono",monospace;font-size:clamp(2.25rem,1.4rem + 2.4vw,3.5rem);
  line-height:1;color:var(--accent)}
.clsf .digits .p{font-family:"Plex Mono",monospace;font-size:.75rem;color:var(--fg3);
  letter-spacing:.05em;margin-top:.7rem;display:block}
.clsf dl{margin:1.5rem 0 0;display:grid;gap:.15rem .9rem;font-size:.875rem;line-height:1.55}
@media (min-width:40rem){.clsf dl{grid-template-columns:2.5rem minmax(0,1fr)}}
.clsf dt{font-family:"Plex Mono",monospace;font-size:.75rem;color:var(--fg3);letter-spacing:.05em}
.clsf dd{margin:0;color:var(--fg2)}
.clsf dd b{color:var(--accent);font-family:"Plex Mono",monospace;font-weight:400}
@media (max-width:39.99rem){.clsf dd{margin-bottom:.6rem}}

/* ---------- 13. The schedule ---------------------------------------------- */

.tablewrap{overflow-x:auto;border:1px solid var(--line-2);background:var(--raise);
  -webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
table.sched{border-collapse:collapse;width:100%;min-width:46rem;
  font-variation-settings:"wdth" 92;font-variant-numeric:tabular-nums lining-nums}
table.sched caption{text-align:left;padding:1.15rem 1.1rem .9rem;
  border-bottom:1px solid var(--line-2);font-size:.8125rem;color:var(--fg3)}
table.sched caption b{display:block;color:var(--fg);font-size:.75rem;font-weight:600;
  margin-bottom:.45rem}
table.sched th,table.sched td{text-align:left;vertical-align:top;padding:1rem 1.15rem;
  font-size:.875rem;line-height:1.5}
table.sched thead th{font-size:.6875rem;font-weight:600;color:var(--fg3);
  border-bottom:2px solid var(--line-2);padding-block:.85rem;white-space:nowrap}
table.sched tbody tr+tr td{border-top:1px solid var(--line)}
table.sched td.ref,table.sched td .code{font-family:"Plex Mono",monospace;font-size:.75rem;
  letter-spacing:.04em;white-space:nowrap;color:var(--accent)}
table.sched td.num{text-align:right}
table.sched tbody tr:hover td{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.fd{font-family:"Plex Mono",monospace;font-size:.75rem;letter-spacing:.04em;
  border-bottom:1px solid var(--accent);padding-bottom:1px;white-space:nowrap}

.set{border:1px solid var(--line-2);background:var(--raise);min-width:0;max-width:100%}
.set>header{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;justify-content:space-between;
  align-items:baseline;padding:1rem 1.1rem;border-bottom:2px solid var(--line-2)}
.set>header b{font-size:.75rem;font-weight:600}
.set>header span{font-size:.8125rem;color:var(--fg3)}
.set ol{list-style:none;margin:0;padding:0;counter-reset:it}
.set li{counter-increment:it;display:grid;gap:.25rem 1rem;padding:1.05rem 1.4rem;
  grid-template-columns:3.4rem 1fr;font-size:.875rem;line-height:1.5;
  font-variation-settings:"wdth" 92}
@media (min-width:48rem){.set li{grid-template-columns:3.4rem 2.5rem 1fr 4.5rem 9rem}}
.set li+li{border-top:1px solid var(--line)}
.set li>.n,.set li>.q{font-family:"Plex Mono",monospace;font-size:.75rem;color:var(--fg3);
  letter-spacing:.04em}
.set li>.n{color:var(--accent)}
.set li>.n::before{content:"1." counter(it)}
.set li>.fin{font-family:"Plex Mono",monospace;font-size:.75rem;letter-spacing:.04em;color:var(--fg2)}
.set li>.std{color:var(--fg3)}
@media (max-width:47.99rem){.set li>.fin,.set li>.std{grid-column:2}.set li>.q{grid-column:1;grid-row:2}}

/* ---------- 14. Record photographs. Evidence, not seduction. ------------- */

.record{margin:0}
.record .mount{border:1px solid var(--line);background:var(--raise);padding:10px}
.record .shot{position:relative;aspect-ratio:3/2;overflow:hidden}
.record .shot img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.9)}
.record .shot::after{content:"";position:absolute;inset:0;background:#131117;
  mix-blend-mode:multiply;opacity:.3;pointer-events:none}
.record .shot::before{content:"";position:absolute;inset:0;z-index:1;background:#D8A54A;
  mix-blend-mode:overlay;opacity:.13;pointer-events:none}
.record figcaption{font-size:.8125rem;line-height:1.5;color:var(--fg3);margin-top:.9rem}
.record figcaption b{display:block;color:var(--accent);font-weight:600;font-size:.6875rem;
  margin-bottom:.45rem}
.record figcaption span{display:block;border-top:1px solid var(--line);padding-top:.35rem;
  margin-top:.35rem}
.truecolour .shot img{filter:contrast(1.04) brightness(1.02)}
.truecolour .shot::after,.truecolour .shot::before{display:none}
.recs{display:grid;gap:2.5rem clamp(1.5rem,4vw,3rem);margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

.cut{margin:0}
.cut img{margin-inline:auto}
.cut figcaption{font-size:.6875rem;color:var(--fg3);margin-top:.75rem;
  border-top:1px solid var(--line);padding-top:.6rem;
  font-variation-settings:"wdth" 78;text-transform:uppercase;letter-spacing:.08em}
.cut figcaption b{display:block;color:var(--fg2);font-weight:600}

/* ---------- 15. Quotes ----------------------------------------------------- */

.said{border-top:1px solid var(--line-2);padding-top:1.5rem;margin:0}
.said p{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--fg)}
.said footer{margin-top:1.1rem;font-size:.75rem;color:var(--fg3);line-height:1.5}
.said footer b{display:block;color:var(--accent);font-weight:600;font-size:.6875rem;
  margin-bottom:.2rem}
.saids{display:grid;gap:2.5rem clamp(2rem,5vw,4rem)}
@media (min-width:52rem){.saids{grid-template-columns:1fr 1fr}}

/* ---------- 16. Forms ------------------------------------------------------ */

form.enq{background:var(--raise);border:1px solid var(--line-2)}
form.enq>section{padding:clamp(1.25rem,3vw,2.25rem);border-bottom:1px solid var(--line)}
form.enq>section:last-of-type{border-bottom:0}
form.enq h3{margin-bottom:.35rem}
form.enq .step{font-size:.6875rem;color:var(--accent);font-weight:600;margin-bottom:1.6rem}
.field{display:grid;gap:.35rem .75rem;padding-block:1.4rem;border-top:1px solid var(--line)}
@media (min-width:40rem){.field{grid-template-columns:12rem minmax(0,1fr);align-items:baseline}}
.field>label,.field>legend{font-size:.8125rem;font-weight:600;color:var(--fg2);padding:0;
  font-variation-settings:"wdth" 85;letter-spacing:.05em}
.field .req{color:var(--accent);font-weight:400}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=url],.field input[type=date],.field select,.field textarea{
  font:inherit;font-size:1rem;width:100%;background:transparent;color:var(--fg);
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:.65rem 0;min-height:48px}
.field textarea{min-height:6rem;resize:vertical;line-height:1.55}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 12px center,right 7px center;background-size:5px 5px;
  background-repeat:no-repeat;padding-right:1.75rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);
  outline-offset:3px;border-bottom-color:transparent}
.field .opts{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;padding-block:.4rem}
.field .opts label{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;
  min-height:44px;cursor:pointer}
.field .opts input{accent-color:var(--brass);width:1.05rem;height:1.05rem;flex:none}
.field .help{font-size:.8125rem;color:var(--fg3);line-height:1.5;margin-top:.35rem}
.field.err input,.field.err select,.field.err textarea{border-bottom-color:var(--err)}
fieldset{border:0;margin:0;padding:0}
.drop{border:1px dashed var(--line-2);padding:1.4rem;text-align:center;
  font-size:.9375rem;color:var(--fg2);display:block;cursor:pointer}
form.enq .submit{padding:clamp(1.25rem,3vw,2.25rem);display:flex;flex-wrap:wrap;gap:1.25rem;
  align-items:center;justify-content:space-between}

/* ---------- 17. Callout, caveat, definition ------------------------------- */

.caveat{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding-block:1.3rem;font-size:.9375rem;line-height:1.55;color:var(--fg2);max-width:66ch}
.caveat b{color:var(--accent);font-weight:600}

.tbc{border-left:2px solid var(--err);background:color-mix(in srgb,var(--err) 9%,transparent);
  padding:.95rem 1.15rem;font-size:.8125rem;line-height:1.55;color:var(--fg2);
  max-width:66ch;margin-block:1.25rem}
.tbc b{color:var(--err);font-weight:600;display:block;font-size:.625rem;
  letter-spacing:.09em;text-transform:uppercase;font-variation-settings:"wdth" 70;
  margin-bottom:.4rem}

dl.defs{display:grid;gap:0;margin:0;border-top:1px solid var(--line-2)}
dl.defs>div{display:grid;gap:.4rem 2rem;padding-block:1.9rem;border-bottom:1px solid var(--line)}
@media (min-width:44rem){dl.defs>div{grid-template-columns:14rem minmax(0,1fr)}}
dl.defs dt{font-weight:600;font-size:.9375rem;color:var(--fg)}
dl.defs dd{margin:0;color:var(--fg2);font-size:.9375rem;max-width:62ch}

/* ---------- 18. Utilities -------------------------------------------------- */

/* The primary interior rhythm, 34 uses. It was frozen at 28px from 390px to 1440px while
   the display face tripled from 38px to 105px, so every band was a dense slab floating in
   a lot of stranded air: 115px between sections, 28px inside them. The mobile value is
   unchanged; only the desktop end opens. */
.flow>*+*{margin-top:clamp(1.75rem,3.2vw,3.5rem)}
.flow-s>*+*{margin-top:.85rem}
.flow-l>*+*{margin-top:clamp(3rem,5vw,5rem)}
.mt0{margin-top:0}
.lead{max-width:44ch}
.bleed{margin-inline:calc(var(--gut) * -1)}
@media print{
  .head,.strip,.bar,nav.main,.act,.vitrine::before{display:none!important}
  body,section{background:#fff!important;color:#000!important}
  .tablewrap{overflow:visible;border-color:#000}
}