/* ------------------------------------------------------------------ fonts
   Archivo and Archivo Narrow by Omnibus-Type, SIL Open Font License 1.1.
   The licence text ships beside the files in fonts/OFL.txt.
   Self-hosted on purpose: this page makes no external request.
   nginx must serve .woff2 as font/woff2; recent mime.types already does. */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo Narrow";
  src:url("fonts/archivo-narrow-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ----------------------------------------------------------------- tokens
   A brushed-alloy component faceplate. Silver panel, engraved legends,
   recessed windows for anything that reports, raised blocks for anything you
   press, black anodized rails top and bottom. Exactly one hue, a dial blue, on
   three roles only: identity, section headings, repeated affordances. Bluetooth
   has blue in its name and a 1970s tuner lit its dial blue. Everything else is
   neutral, which leaves the screenshots the only other coloured objects. */
:root{
  --room:#D9D9D5;
  --panel:#E9E9E6;
  --panel-hi:#F7F7F5;
  --panel-lo:#C2C3BE;
  --well:#DFE0DC;
  --ink:#17191B;
  --ink-2:#4A4E53;
  --ink-3:#5F6469;
  --score:#BEC0BB;
  --anod:#17191B;
  --anod-hi:#3A3E42;
  --anod-lo:#000000;
  --anod-ink:#E9EAE7;
  --anod-ink-2:#9DA2A6;

  /* The control you press and the strip that warns you both take the finish
     opposite the panel, so each keeps its weight in either finish. */
  --btn:#17191B;    --btn-ink:#E9EAE7; --btn-ink-2:#9DA2A6;
  --btn-hi:#3A3E42; --btn-lo:#000000;
  --btn-brush:repeating-linear-gradient(0deg,rgba(255,255,255,.030) 0 1px,rgba(0,0,0,.20) 1px 3px);
  --band:#17191B;   --band-ink:#E9EAE7; --band-ink-2:#9DA2A6;
  --band-hi:#3A3E42;--band-lo:#000000;
  --band-brush:repeating-linear-gradient(0deg,rgba(255,255,255,.026) 0 1px,rgba(0,0,0,.22) 1px 3px);

  /* The one hue on the panel. Engraved into the alloy on the light finish, lit
     like a dial lamp on the anodized rails, which are dark in either finish. */
  --blue:#1B4FA8;
  --blue-lit:#7FB3FF;

  --sans:"Archivo","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --narrow:"Archivo Narrow","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:Consolas,"Cascadia Mono","SF Mono",ui-monospace,"Liberation Mono",monospace;

  --brush:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.022) 0 1px,
    rgba(255,255,255,.030) 1px 2px,
    rgba(0,0,0,0) 2px 4px
  );
  --engrave:0 1px 0 var(--panel-hi);

  --gutter:clamp(1.1rem,4vw,3.25rem);
  --rail:5rem;
}
/* The same component in its black-anodized finish, which is a real variant of
   this world rather than a generic dark mode. */
@media (prefers-color-scheme:dark){
  :root{
    --room:#0C0E10;
    --panel:#202327;
    --panel-hi:#2E3338;
    --panel-lo:#101214;
    --well:#191C1F;
    --ink:#E8E9E6;
    --ink-2:#B0B5B9;
    --ink-3:#8B9095;
    --score:#33383D;
    --anod:#0D0F11;
    --anod-hi:#2A2E32;
    --anod-lo:#000000;
    --anod-ink:#E9EAE7;
    --anod-ink-2:#9DA2A6;
    --btn:#DFE0DC;    --btn-ink:#17191B; --btn-ink-2:#4A4E53;
    --btn-hi:#F4F4F2; --btn-lo:#A5A7A2;
    --btn-brush:repeating-linear-gradient(0deg,rgba(0,0,0,.030) 0 1px,rgba(255,255,255,.34) 1px 3px);
    --band:#31363B;   --band-ink:#F0F1EE; --band-ink-2:#AEB4B9;
    --band-hi:#454B50;--band-lo:#14171A;
    --band-brush:repeating-linear-gradient(0deg,rgba(255,255,255,.024) 0 1px,rgba(0,0,0,.14) 1px 3px);
    --blue:#7FB3FF;
    --engrave:0 1px 0 rgba(255,255,255,.055);
  }
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--room);color:var(--ink);
  font:400 clamp(0.99rem,0.3vw + 0.93rem,1.07rem)/1.62 var(--sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--panel)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
:where(h1,h2,h3,p,ul,ol,dl,dd,figure,table){margin:0}

/* ---------------------------------------------------------------- chassis */
.chassis{
  max-width:1020px;margin:0 auto;
  background-color:var(--panel);
  border-radius:5px;overflow:clip;
  box-shadow:0 1px 0 var(--panel-hi) inset,0 18px 46px rgba(0,0,0,.16);
}
.band{padding-left:var(--gutter);padding-right:var(--gutter)}

/* a panel seam: one shadow line, one highlight line, the way two pressed
   sheets meet on a real faceplate */
.seam{height:2px;border:0;margin:0;background:linear-gradient(
  to bottom,var(--score) 0 1px,var(--panel-hi) 1px 2px)}

/* engraved legend: small, tracked, cut into the metal */
.leg{
  font:600 0.71rem/1.5 var(--narrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);text-shadow:var(--engrave);
}

/* ------------------------------------------------------------- top rail */
.rail-top{
  background-color:var(--anod);
  background-image:repeating-linear-gradient(0deg,
    rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.22) 1px 3px);
  color:var(--anod-ink);
  box-shadow:inset 0 -1px 0 var(--anod-lo),inset 0 1px 0 var(--anod-hi);
  padding-top:calc(0.7rem + env(safe-area-inset-top,0px));padding-bottom:0.7rem;
  display:flex;flex-wrap:wrap;gap:0.4rem 1.5rem;
  align-items:baseline;justify-content:space-between;
}
.mark{
  font:700 0.95rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  margin:0;color:var(--blue-lit);
}
.rail-top .leg{color:var(--anod-ink-2);text-shadow:0 -1px 0 rgba(0,0,0,.7)}

/* ------------------------------------------------------------------ head */
.head{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(19.5rem,1fr);
  gap:clamp(1.5rem,3vw,3.25rem);align-items:start;
  padding-top:clamp(2rem,4.5vw,3.5rem);padding-bottom:clamp(1.9rem,3.5vw,2.75rem);
}
h1{
  font-weight:700;font-size:clamp(1.95rem,4.3vw,3.3rem);line-height:1.04;
  letter-spacing:-0.022em;text-wrap:balance;margin:0 0 1.15rem;
  text-shadow:var(--engrave);
}
.head p{max-width:60ch}
.head p+p{margin-top:0.8rem}

/* ----------------------------------------------------- control cluster */
.cluster{min-width:0}
.spec{
  background:var(--well);border-radius:3px;padding:0.15rem 0.9rem;
  box-shadow:inset 1px 1px 0 var(--panel-lo),inset -1px -1px 0 var(--panel-hi),
             inset 0 2px 7px rgba(0,0,0,.09);
  margin-bottom:1.15rem;
}
.spec div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:0.5rem 0;
}
.spec div+div{border-top:1px solid var(--score)}
.spec dd{
  margin:0;font:400 0.84rem/1.5 var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;
}
.spec dd small{display:block;font-size:0.76rem;color:var(--ink-3)}

/* raised: you press it */
.btn{
  display:block;text-decoration:none;text-align:left;border-radius:3px;
  background-color:var(--btn);background-image:var(--btn-brush);
  color:var(--btn-ink);
  padding:0.95rem 1.15rem 0.9rem;
  box-shadow:inset 1px 1px 0 var(--btn-hi),inset -1px -1px 0 var(--btn-lo),
             0 2px 4px rgba(0,0,0,.26);
  transition:transform .11s cubic-bezier(.2,.8,.3,1),box-shadow .11s ease;
}
.btn b{
  display:block;font:700 1.24rem/1.2 var(--sans);letter-spacing:.055em;
  text-transform:uppercase;
}
.btn small{
  display:block;margin-top:0.34rem;
  font:400 0.73rem/1.4 var(--mono);color:var(--btn-ink-2);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:inset 1px 1px 0 var(--btn-hi),inset -1px -1px 0 var(--btn-lo),
             0 4px 9px rgba(0,0,0,.3);
}
.btn:active{
  transform:translateY(1px);
  box-shadow:inset 1px 1px 0 var(--btn-lo),inset -1px -1px 0 var(--btn-hi),
             0 1px 2px rgba(0,0,0,.24);
}
.alt{margin-top:0.9rem;font-size:0.86rem;color:var(--ink-2)}
.alt a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
.alt a:hover{text-decoration-thickness:2px}

/* --------------------------------------------------------------- notice */
.notice{
  background-color:var(--band);background-image:var(--band-brush);
  color:var(--band-ink);
  box-shadow:inset 0 1px 0 var(--band-hi),inset 0 -1px 0 var(--band-lo);
  padding-top:1.1rem;padding-bottom:1.15rem;
}
.notice .leg{color:var(--band-ink-2);text-shadow:0 -1px 0 rgba(0,0,0,.55)}
.notice p{max-width:84ch;margin-top:0.3rem;font-size:0.99rem;line-height:1.56}

/* ------------------------------------------------------------- sections */
.sec{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  padding:clamp(2rem,3.8vw,3rem) clamp(1.1rem,4vw,3.25rem);
}
.idx{
  font:400 0.98rem/1 var(--mono);color:var(--ink-3);
  text-shadow:var(--engrave);padding-top:0.45rem;
}
.idx::after{
  content:"";display:block;width:1.6rem;height:1px;margin-top:0.55rem;
  background:var(--score);box-shadow:0 1px 0 var(--panel-hi);
}
.body{min-width:0}
.body>p{max-width:72ch}
.body>p+p{margin-top:0.8rem}
h2{
  font-weight:700;font-size:clamp(1.34rem,1.9vw,1.78rem);line-height:1.14;
  letter-spacing:-0.014em;margin:0 0 0.7rem;text-wrap:balance;
  color:var(--blue);text-shadow:var(--engrave);
}

/* ------------------------------------------------------ readout window */
.readout{margin-top:1.5rem}
.cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 0.6rem;margin-bottom:0.5rem}
.cap>span{font-size:0.9rem;line-height:1.4;color:var(--ink-2)}
.cap .full{
  margin-left:auto;font:600 0.73rem/1.5 var(--narrow);letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);text-underline-offset:3px;
  text-decoration-thickness:1px;
  padding-block:0.36rem;margin-block:-0.36rem;  /* 24px target, same optical size */
}
.cap .full:hover{text-decoration-thickness:2px}
.well{
  background:var(--well);border-radius:4px;padding:clamp(0.8rem,2vw,1.5rem);
  box-shadow:inset 1px 1px 0 var(--panel-lo),inset -1px -1px 0 var(--panel-hi),
             inset 0 3px 10px rgba(0,0,0,.11);
}
.well img{
  width:100%;max-width:651px;height:auto;margin:0 auto;border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
/* one authored moment: the window lights as it comes into view, the way a dial
   lamp warms. The lit state is the default, so no script still shows it all. */
.js .well.in img{animation:lamp .52s cubic-bezier(.16,.84,.3,1) both}
@keyframes lamp{
  from{opacity:.4;filter:brightness(1.08) contrast(.92)}
  to{opacity:1;filter:none}
}
@media (prefers-reduced-motion:reduce){
  .js .well.in img{animation:none}
  .btn{transition:none}
}

/* --------------------------------------------- what is on the readout */
.names{
  margin-top:1.15rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(20.5rem,1fr));
  gap:0 2.5rem;
}
/* The engraved word first, then what it means: a term that wraps can never
   drag the explanation into a column two words wide. */
.names>div{
  padding:0.62rem 0 0.7rem;border-top:1px solid var(--score);
  box-shadow:0 -1px 0 var(--panel-hi) inset;
}
.names dt{
  font:400 0.83rem/1.55 var(--mono);color:var(--ink);
  margin-bottom:0.18rem;
}
.names dd{margin:0;font-size:0.9rem;line-height:1.52;color:var(--ink-2)}
.names dd b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------- lit readout */
.reading{
  margin-top:1.15rem;border-radius:3px;
  background:var(--anod);color:var(--anod-ink);
  box-shadow:inset 1px 1px 0 var(--anod-lo),inset -1px -1px 0 var(--anod-hi),
             inset 0 2px 8px rgba(0,0,0,.5);
  padding:0.62rem 0.9rem 0.6rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.15rem 0.8rem;
}
.reading .leg{color:var(--anod-ink-2);text-shadow:0 -1px 0 rgba(0,0,0,.8)}
.reading span:last-child{
  font:400 0.83rem/1.7 var(--mono);font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------- order scale */
.scale{margin-top:1.3rem;max-width:44rem;position:relative}
/* the engraved track the detents sit against */
.scale::before{
  content:"";position:absolute;left:0.62rem;top:0.75rem;bottom:0.75rem;width:2px;
  background:linear-gradient(to right,var(--score) 0 1px,var(--panel-hi) 1px 2px);
}
.stop{position:relative;z-index:1;width:1.35rem;height:1.35rem;border-radius:2px;
  background:var(--well);align-self:center;
  box-shadow:inset 1px 1px 0 var(--panel-lo),inset -1px -1px 0 var(--panel-hi)}
.stop.set{
  background:var(--btn);
  box-shadow:inset 1px 1px 0 var(--btn-hi),inset -1px -1px 0 var(--btn-lo),
             0 1px 3px rgba(0,0,0,.28);
}
.scale div{
  display:grid;grid-template-columns:1.35rem 2rem 6.5rem minmax(0,1fr);
  align-items:baseline;gap:0 0.7rem;padding:0.68rem 0;
  border-top:1px solid var(--score);
  box-shadow:0 -1px 0 var(--panel-hi) inset;
}
.scale div:last-child{
  border-bottom:1px solid var(--score);
  box-shadow:0 -1px 0 var(--panel-hi) inset,0 1px 0 var(--panel-hi);
}
.scale b{font:400 0.9rem/1.4 var(--mono);color:var(--ink-3)}
.scale strong{
  font:700 1.1rem/1.2 var(--sans);letter-spacing:.03em;
  text-shadow:var(--engrave);
}
.scale span{font-size:0.9rem;line-height:1.5;color:var(--ink-2)}

/* ----------------------------------------------------------- finishes */
.finishes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:1.15rem;margin-top:1.5rem;
}
.finishes figure{margin:0}
.finishes figcaption{margin-top:0.55rem}

/* --------------------------------------------------------------- table */
.tbl{overflow-x:auto;scrollbar-width:thin;margin-top:1.4rem}
table{border-collapse:collapse;width:100%;min-width:40rem;font-size:0.9rem}
/* Below this width the table stops being a grid and becomes stacked rows, so no
   value can hide behind a sideways scroll on a phone. */
@media (max-width:540px){
  .tbl{overflow-x:visible}
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tbody tr{display:block;padding:0.75rem 0;border-top:1px solid var(--score);
    box-shadow:0 -1px 0 var(--panel-hi) inset}
  tbody th,tbody td{display:block;border:0;padding:0.1rem 0;white-space:normal}
  tbody th{font-size:1rem;margin-bottom:0.25rem}
  tbody td::before{content:attr(data-l) ": ";color:var(--ink-3);
    font:600 0.7rem/1.5 var(--narrow);letter-spacing:.14em;text-transform:uppercase}
}
caption{
  text-align:left;padding-bottom:0.7rem;
  font:400 0.79rem/1.5 var(--mono);color:var(--ink-2);
  overflow-wrap:break-word;
}
th,td{
  text-align:left;vertical-align:top;padding:0.62rem 1.1rem 0.62rem 0;
  border-bottom:1px solid var(--score);
}
thead th{color:var(--ink)}
tbody th{font:600 0.93rem/1.5 var(--sans);color:var(--ink);white-space:nowrap}
td{color:var(--ink-2)}
td code,.k{
  font:400 0.87em/1.5 var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums;
}
tbody tr:hover td,tbody tr:hover th{background:var(--well)}

/* --------------------------------------------------------------- notes */
.notes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:0 2.5rem;margin-top:1.4rem;
}
.notes section{padding:0.95rem 0;border-top:1px solid var(--score);
  box-shadow:0 -1px 0 var(--panel-hi) inset}
.notes h3{margin:0 0 0.4rem;font:700 0.97rem/1.3 var(--sans);letter-spacing:.01em}
.notes p{font-size:0.9rem;line-height:1.55;color:var(--ink-2)}

/* ----------------------------------------------------------- bottom rail */
.rail-btm{
  background-color:var(--anod);
  background-image:repeating-linear-gradient(0deg,
    rgba(255,255,255,.026) 0 1px,rgba(0,0,0,.22) 1px 3px);
  color:var(--anod-ink-2);
  box-shadow:inset 0 1px 0 var(--anod-hi);
  padding-top:clamp(1.7rem,3vw,2.4rem);
  padding-bottom:calc(clamp(1.7rem,3vw,2.4rem) + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.4rem 2.5rem;align-items:start;
}
.rail-btm p{font-size:0.84rem;line-height:1.6;max-width:44ch}
.rail-btm strong{
  display:block;color:var(--blue-lit);margin-bottom:0.35rem;
  font:700 0.95rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;
}
.rail-btm a{color:var(--blue-lit);text-underline-offset:3px}
.fine{font:400 0.75rem/1.7 var(--mono);color:#888D92;max-width:52ch}

/* ------------------------------------------------------------ narrow */
@media (max-width:820px){
  .head{grid-template-columns:minmax(0,1fr)}
  .sec{grid-template-columns:minmax(0,1fr)}
  .idx{padding-top:0;margin-bottom:0.5rem;letter-spacing:.1em}
  .idx::after{display:none}
  .names{grid-template-columns:minmax(0,1fr)}
}