/* Stylesheet for the CONCEPT home page (/concept/). Hand maintained, paired with
   assets/concept.js and generated into place by scripts/build-home.mjs.

   This is a concept surface, not a Trailhead surface. It carries the Trailhead
   tokens verbatim so the brand is continuous, and extends them with the material
   language a control surface needs: a shell darker than the key faces, a light
   source above the deck, and bevels instead of drop shadows. Nothing here is
   loaded by the live pages. */

:root {
  --bg: #101317;
  --bg-raised: #161b21;
  --panel: #1a2028;
  --key-face: #232a33;
  --line: #2a323d;
  --gold: #c8962e;
  --gold-bright: #e8b54a;
  --paper: #ede7da;
  --slate: #97a1ac;
  --slate-dim: #6b7580;
  --led-live: #3fd47e;
  --led-review: #e8b54a;
  --hover: #2ee6c9;
  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* concept only: the hardware */
  --shell: #0a0d10;        /* deck body, darker than any key */
  --shell-lip: #333c47;    /* the machined top edge catching light */
  --screen: #05080a;       /* readout glass */
  --a: var(--gold);        /* per key accent, set inline from plugin data */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* a display rule on a class outranks the browser's [hidden], so pin it */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: var(--hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--paper); line-height: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- top bar */

.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(16, 19, 23, 0.92);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(8px);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); }
.brand:hover { color: var(--paper); text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.brand-name small { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.06em; color: var(--slate-dim); }
.topnav { display: flex; gap: 22px; font-size: 0.9rem; }
.topnav a { color: var(--slate); }
.topnav a:hover, .topnav a:focus-visible { color: var(--hover); text-decoration: none; }
.navtoggle { display: none; }

/* ------------------------------------------------------------- the console */

.console { position: relative; padding: 56px 0 72px; overflow: hidden; }
.topo {
  position: absolute; inset: -8% -4%; width: 108%; height: 116%;
  pointer-events: none; z-index: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.console > .wrap { position: relative; z-index: 1; }

/* The hero is a masthead over a machine. The device below needs the full
   column, so the words sit above it in two columns rather than beside it. */
/* THE DEVICE LEADS. Tony's call 2026-09-05: the deck is the thing worth seeing
   first, so it is the first element in the section and the words sit under it.
   The claim was the masthead; it is now the caption. */
.console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: start;
  margin-top: 40px;
}

.lede-title {
  font-size: clamp(2.5rem, 5.1vw, 3.9rem);
  letter-spacing: 0.005em;
  max-width: 13ch;
  /* silkscreen on a panel: lit from above, cut into the surface */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65), 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.lede p { max-width: 54ch; }
.lede p + p { margin-top: 16px; }
.lede .practice { color: var(--slate-dim); font-size: 0.95rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 4px; font-weight: 600; font-size: 0.94rem;
  border: 1px solid transparent; transition: background 140ms, color 140ms, border-color 140ms;
}
.btn:hover { text-decoration: none; }
.btn-gold { background: var(--gold); color: #14181d; }
.btn-gold:hover { background: var(--gold-bright); color: #14181d; }
.btn-ghost { border-color: var(--line); color: var(--paper); }
.btn-ghost:hover { color: var(--hover); border-color: var(--hover); }

/* ---------------------------------------------------------------- the deck */

/* Two devices, and the page picks the one that fits rather than shrinking one
   until it stops being readable. Widths are set by the STRIP, not the keys: a
   shipped layout carries 12 to 16px type in a 200 wide panel, so a panel below
   about 125px stops being legible and that is what fixes each device's size.
   Six panels want 940. Four want 640, which also lands the + at its true
   proportions, since on the real hardware one dial panel is one key wide. */
.rig { display: grid; gap: 14px; margin: 0 auto; }
/* the deck is the first thing in the section now, so it carries the top air
   the headline used to */
.console > .wrap > .rig { margin-top: 4px; }
.rig[data-device="xl"] { max-width: 940px; }
.rig[data-device="plus"] { max-width: 640px; }
.rig-scroll { display: grid; gap: 14px; }

.rig[data-device="plus"] .deck-grid { grid-template-columns: repeat(4, 1fr); }
.rig[data-device="plus"] .strip { grid-template-columns: repeat(4, 1fr); }
.rig[data-device="plus"] .dials { grid-template-columns: repeat(4, 1fr); }
/* the + is a smaller device shown larger, so its keys carry more type */
.rig[data-device="plus"] .key-label { font-size: 0.78rem; padding: 16px 5px 7px; }
.rig[data-device="plus"] .key-text { font-size: 0.95rem; }
.rig[data-device="plus"] .key-sub { font-size: 0.64rem; }

.deck {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.055), transparent 60%),
    linear-gradient(180deg, #12161b 0%, var(--shell) 70%);
  border: 1px solid #20262e;
  border-top-color: var(--shell-lip);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 9px;
  list-style: none;
}

.key {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 13%;
  background: linear-gradient(180deg, #2b333d 0%, #1c2229 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 2px 3px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 7px 5px;
  overflow: hidden;
  text-align: center;
  transition: transform 90ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 140ms, opacity 200ms;
}
.key[aria-disabled="true"] { cursor: default; }
.key:hover:not([aria-disabled="true"]),
.key:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--a),
    0 10px 26px -10px var(--a);
}
.key:active:not([aria-disabled="true"]),
.key.is-down {
  transform: translateY(2px) scale(0.972);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--a), 0 0 22px -6px var(--a);
}

/* a key carrying art is the art, edge to edge, with its title burned into the
   bottom of the face over a scrim. That is what the hardware renders. */
.key-has-art { padding: 0; }
/* A harvested face is the COMPLETE key: its own rounded background, accent
   border, glyph and baked label. So the shell gives it the whole cell and gets
   out of the way, including its own gradient, which would otherwise show
   through the art's corner radius as a lighter ring. */
.key-is-face { padding: 0; background: #0b0b0d; }
.key-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.key-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.key-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 4px 5px;
  background: linear-gradient(180deg, rgba(6, 9, 12, 0) 0%, rgba(6, 9, 12, 0.82) 46%, rgba(6, 9, 12, 0.94) 100%);
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 0.95vw, 0.8rem);
  font-weight: 600;
  line-height: 1.02;
  color: var(--paper);
  letter-spacing: 0.015em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* typographic keys: category and command faces carry no art, so the accent
   becomes the face itself, the way the shipped category keys are colour coded */
.key-tone {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 34%, transparent), color-mix(in srgb, var(--a) 9%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--a) 55%, transparent);
}
.key-text { position: relative; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; line-height: 1.06; color: var(--paper); }
.key-sub { position: relative; font-family: var(--font-mono); font-size: 0.56rem; color: rgba(237, 231, 218, 0.72); letter-spacing: 0.02em; }
.key-nav .key-text { color: var(--slate); font-size: 0.74rem; }
.key-blank { background: linear-gradient(180deg, #1a1f25, #14181d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 -2px 3px rgba(0, 0, 0, 0.4); }

.led {
  position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--led-live);
  box-shadow: 0 0 6px var(--led-live);
}
.led-review { background: var(--led-review); box-shadow: 0 0 6px var(--led-review); }

/* boot: the deck powers on in a raster sweep, one key at a time */
.booting .key { opacity: 0; }
.booting .key { animation: keyboot 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 26ms); }
@keyframes keyboot {
  0% { opacity: 0; transform: translateY(3px) scale(0.94); filter: brightness(2.4); }
  55% { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* -------------------------------------------------------- the SD+ unit */

.plus {
  background: linear-gradient(180deg, #12161b, var(--shell));
  border: 1px solid #20262e;
  border-top-color: var(--shell-lip);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: #171d24;
  border-radius: 5px;
  border: 1px solid #171d24;
  overflow: hidden;
  position: relative;
}
/* readout glass: fine scanlines, the way a lit LCD reads up close */
.strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
}

/* One panel = one shipped layout file. The media box takes its width from this
   grid; the face inside is authored at the layout's own 200 by 100 and scaled
   as a single unit, so every rect, font size and offset in the file is used
   verbatim and only --s ever changes. */
.panel { min-width: 0; background: var(--screen); position: relative; }
.panel-media { position: relative; overflow: hidden; height: calc(100px * var(--s, 0.7)); }
.panel-face {
  position: absolute; left: 0; top: 0;
  width: 200px; height: 100px;
  transform: scale(var(--s, 0.7));
  transform-origin: 0 0;
  font-family: var(--font-sans);
}
.panel .it { position: absolute; }
.panel .it-pixmap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.panel .it-text {
  display: flex; align-items: center;
  color: #e9edf2; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel .it-bar { border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.panel .it-bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width 160ms ease-out; }

/* a dial whose layout has nothing to drive still has to answer the turn */
.panel.turned .panel-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--a, var(--gold));
  animation: detent 380ms ease-out;
}
@keyframes detent { from { opacity: 1; } to { opacity: 0; } }

/* two lines, because at a sixth of the strip one line turns the plugin name
   and the dial name into a pair of ellipses */
.panel-label {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px;
  padding: 7px 8px 6px; min-width: 0;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.02em;
  background: #12171d;
}
.panel-label b {
  grid-column: 1 / -1;
  color: var(--a, var(--gold)); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-label span { color: var(--slate-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-val { color: var(--paper); font-style: normal; white-space: nowrap; text-align: right; }

.dials { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 14px 0 4px; justify-items: center; }
.dial {
  width: 46px; height: 46px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 26%, #39424e, #1b2027 72%),
    var(--key-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 4px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.5);
  position: relative;
  touch-action: none;
  transition: box-shadow 140ms;
}
.dial::after {
  content: ""; position: absolute; left: 50%; top: 5px;
  width: 2px; height: 12px; margin-left: -1px; border-radius: 1px;
  background: var(--a);
  transform-origin: 50% 18px;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 0 5px var(--a);
}
.dial:hover, .dial:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px var(--a), 0 0 18px -4px var(--a); }
/* the nameplate: what this device is, and why the page is allowed to say so */
.plate {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 6px 28px; align-items: start;
  padding-top: 2px;
}
.plate-name {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: var(--paper); line-height: 1.15; white-space: nowrap;
}
.plate-model { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 400; color: var(--slate-dim); letter-spacing: 0.06em; }
.plate-note { font-size: 0.76rem; color: var(--slate-dim); max-width: 68ch; line-height: 1.5; }

/* --------------------------------------------------------- the readout */

/* the console's status strip: full width under both columns, so a key press
   reports somewhere the eye can find without hunting beside the deck */
.readout {
  margin-top: 34px;
  background: linear-gradient(180deg, var(--bg-raised), #12161b);
  border: 1px solid var(--line);
  border-left: 3px solid var(--a);
  border-radius: 8px;
  padding: 18px 22px;
  min-height: 108px;
  transition: border-color 220ms;
}
.readout-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.readout h2 { font-size: 1.5rem; color: var(--paper); }
.readout-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--slate-dim); }
.readout p { font-size: 0.9rem; margin-top: 8px; }
.readout-links { display: flex; gap: 18px; margin-top: 12px; font-size: 0.86rem; }
.status { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.status-live { color: var(--led-live); background: rgba(63, 212, 126, 0.12); }
.status-review { color: var(--led-review); background: rgba(232, 181, 74, 0.12); }

kbd {
  font-family: var(--font-mono); font-size: 0.74rem;
  padding: 2px 7px; border-radius: 4px;
  background: #171c22; border: 1px solid var(--line); border-bottom-width: 2px;
  color: var(--paper);
}
.plus-sign { color: var(--slate-dim); padding: 0 3px; font-size: 0.72rem; }
.tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--slate-dim); border: 1px dashed var(--line); border-radius: 4px; padding: 1px 6px; }

/* --------------------------------------------------------- section chrome */

section + section { border-top: 1px solid var(--line); }
.band { padding: 76px 0; }
.band-head { max-width: 62ch; margin-bottom: 34px; }
.band-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.band-head p { margin-top: 12px; }

/* ------------------------------------------------------------ find a command */

.finder { position: relative; }
.finder-bar { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--bg-raised); border-radius: 8px; padding: 4px 14px; transition: border-color 160ms; }
.finder-bar:focus-within { border-color: var(--hover); }
.finder-bar svg { flex: none; color: var(--slate-dim); }
#q { flex: 1; background: none; border: 0; outline: 0; color: var(--paper); font-size: 1rem; padding: 13px 0; font-family: var(--font-body); }
#q::placeholder { color: var(--slate-dim); }
.finder-hint { font-family: var(--font-mono); font-size: 0.7rem; color: var(--slate-dim); flex: none; }
.finder-count { margin-top: 12px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate-dim); }
.hits { list-style: none; margin-top: 14px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 16px; background: var(--bg); border-left: 3px solid var(--a); }
.hit:hover { background: var(--bg-raised); }
.hit-name { color: var(--paper); font-size: 0.95rem; }
.hit-name mark { background: rgba(46, 230, 201, 0.18); color: var(--hover); border-radius: 2px; }
.hit-where { font-size: 0.78rem; color: var(--slate-dim); }
.hit-where a { color: var(--slate); }
.hit-keys { white-space: nowrap; }
.finder-empty { padding: 26px 16px; text-align: center; color: var(--slate-dim); border: 1px dashed var(--line); border-radius: 8px; margin-top: 14px; }

/* ------------------------------------------------------------------ the line */

.line-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.tally { font-family: var(--font-mono); font-size: 0.8rem; color: var(--slate-dim); }
.tally b { color: var(--paper); font-weight: 500; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
  font-size: 0.82rem; color: var(--slate); transition: color 140ms, border-color 140ms, background 140ms;
}
.chip:hover { color: var(--hover); border-color: var(--hover); }
.chip[aria-pressed="true"] { color: #14181d; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.roster { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 12px; }
.card {
  position: relative; height: 100%;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; align-items: center;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-raised);
  color: var(--slate);
  transition: border-color 160ms, transform 160ms;
}
.card:hover { border-color: var(--a); text-decoration: none; color: var(--slate); transform: translateY(-2px); }
.card:hover .card-name { color: var(--hover); }
.card img { width: 44px; border-radius: 9px; }
.card .led { top: 10px; right: 10px; }
.card-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--paper); line-height: 1.1; padding-right: 12px; }
.card-domain { font-size: 0.8rem; line-height: 1.35; }
.card-counts { font-family: var(--font-mono); font-size: 0.68rem; color: var(--slate-dim); }

/* ---------------------------------------------------------- custom work */

.custom { background: var(--bg-raised); }
.custom-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.steps { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold); padding-top: 3px; }
.step h3 { font-size: 1.15rem; color: var(--paper); }
.step p { font-size: 0.9rem; margin-top: 5px; }

/* ---------------------------------------------------------------- footer */

footer { border-top: 1px solid var(--line); padding: 30px 0; font-size: 0.84rem; color: var(--slate-dim); }
footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* the full logo is a stacked lockup, 1038 by 1243, and doctrine keeps it out of
   small sizes because the wordmark stops reading. Height drives it, not width. */
footer img { height: 84px; width: auto; opacity: 0.8; }

/* ------------------------------------------------- carried from the old home page */

/* facets: #build runs three, #beyond runs four in two columns */
.facets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facets-2 { grid-template-columns: repeat(2, 1fr); }
.facet { background: var(--bg-raised); padding: 34px 30px 38px; }
.facet-tag {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block;
}
.facet h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--paper);
  margin-bottom: 12px;
}
.facet p { font-size: 0.95rem; }

/* the manifest table, kept below the roster: the roster is a filter, this is a
   scan-it-all-at-once view, and they answer different questions */
.manifest { margin-top: 52px; }
.manifest-head { margin-bottom: 22px; }
.manifest-head h3 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.manifest-head p { margin-top: 8px; max-width: 62ch; }
/* The scroller needs a floor or the table does not scroll, it COMPRESSES: below
   about 700px the Notes column collapses to a few characters wide, every note
   wraps to fifteen lines, and 36 rows become a 300px-tall ribbon of white space
   with the text off screen. 720px is the width where all four columns still
   read. Same treatment the rig gets, and the page body still never scrolls. */
.manifest-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.manifest-table { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.82rem; }
/* px, not rem, on purpose: the narrow-screen rule below raises the root font
   size to lift every rem in the stylesheet, and this is the one LAYOUT value
   in rem. In rem it would widen the table's scroll along with the text. */
.manifest-table td.note { min-width: 352px; }
.manifest-table th {
  text-align: left; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate-dim);
  padding: 0 14px 12px; border-bottom: 1px solid var(--line);
}
.manifest-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.manifest-table td.name { color: var(--paper); white-space: nowrap; }
.manifest-table td.note { font-family: var(--font-body); font-size: 0.88rem; color: var(--slate); }
.manifest-table td.name a { color: var(--paper); border-bottom: 1px solid rgba(200, 150, 46, 0.45); }
.manifest-table td.name a:hover { color: var(--hover); border-bottom-color: var(--hover); text-decoration: none; }
.manifest-table td.name a::after { content: " \2197"; font-size: 0.8em; color: var(--gold); }
/* .status is a pill in the roster above. In the table it is a lit dot, which is
   what a dense mono row can carry without turning into a field of lozenges. */
.manifest-table .status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: none; padding: 0; border-radius: 0;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.manifest-table .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
.store-cta { margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.manifest-foot { margin-top: 0; max-width: 46ch; font-size: 0.85rem; color: var(--slate-dim); }

/* who we are */
.story { position: relative; overflow: hidden; }
.ghost-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(4rem, 14vw, 11rem); line-height: 0.9; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(200, 150, 46, 0.10);
  user-select: none; white-space: nowrap;
}
.story .wrap { position: relative; }
.story p { font-size: 1.05rem; max-width: 68ch; }
.story blockquote {
  margin: 28px 0 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
  color: var(--paper); font-size: 1.12rem; line-height: 1.7;
}
.story blockquote footer {
  margin-top: 14px; padding: 0; border: 0; font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
}

/* the contact block, which is the one piece of this page a visitor may have
   come for. It spans the section under both columns rather than sitting in
   one of them: the prose column runs shorter than the three steps, and hanging
   the card off the taller column left a screen height of dead space beside it. */
.custom strong { color: var(--paper); font-weight: 600; }
.contact-card {
  margin-top: 44px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 26px 30px 30px;
}
.contact-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.contact-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  text-transform: uppercase; color: var(--paper); margin-bottom: 14px;
}
.contact-line {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.88rem;
  min-width: 0;
}
.contact-line span { overflow-wrap: anywhere; }
.contact-line svg { flex: none; stroke: var(--gold); fill: none; stroke-width: 2; width: 17px; height: 17px; }
.contact-line span { color: var(--slate); }
a.contact-line:hover span { color: var(--hover); }
a.contact-line:hover { text-decoration: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 820px) {
  .facets, .facets-2 { grid-template-columns: minmax(0, 1fr); }
  .contact-lines { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* THE NARROW-SCREEN TYPE SCALE.
   Measured on the shipped page at 390px: body copy landed at 15.2 to 16px, the
   manifest notes at 14.1px, the mono labels at 12.2 to 13.1px and the table
   head at 10.9px. That is a page you pinch to read, which is what Tony
   reported. 56 of the 61 font sizes in this file are in rem and exactly one
   layout value was (fixed above), so the root font size is a single lever that
   lifts all type and moves no layout. 17.5px is a 9.4% lift, which carries the
   table head to 11.9px and body copy to 17.5px.
   The few sizes that were still too small after the lift are named below,
   rather than lifting the root further and blowing up the headlines. */
@media (max-width: 900px) {
  html { font-size: 17.5px; }
  .band-head p, .lede p { font-size: 1.02rem; }
  .lede .practice, .facet p { font-size: 1rem; }
  .manifest-table { font-size: 0.9rem; }
  .manifest-table th { font-size: 0.76rem; letter-spacing: 0.1em; }
  .manifest-table td.name { font-size: 0.9rem; }
  .manifest-table td.note { font-size: 0.95rem; }
  .contact-line { font-size: 0.95rem; }
  .step p { font-size: 0.96rem; }
  .finder-count, .tally { font-size: 0.86rem; }
  .plate-note { font-size: 0.85rem; }
  footer .wrap { font-size: 0.88rem; }
}

@media (max-width: 980px) {
  .console-grid, .custom-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lede-title { max-width: none; }
  .plate { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plate-name { flex-direction: row; align-items: baseline; gap: 10px; }
}

/* The + XL never appears below a 1000px viewport, so only the + ever meets a
   screen too narrow for it. 540px is the floor for the TOUCH STRIP, the width
   where four panels still hold their smallest type above 10px.

   That floor used to be applied to the whole device, which scrolled the keypad
   with it. That was tolerable while the deck sat mid page; since 2026-09-05 the
   deck is the FIRST thing on the site, and opening on a clipped grid with a
   scrollbar under it is a bad first frame. The keypad has no such floor: four
   keys across a 390px phone still gives an 85px key, bigger than the 72px the
   hardware has. So the keypad fits the screen and only the strip scrolls. */
@media (max-width: 700px) {
  .plus {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .plus > * { min-width: 540px; }
  .deck { padding: 12px; }
  .deck-grid { gap: 7px; }
}
@media (max-width: 720px) {
  .topnav {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 24px 16px;
    background: var(--bg-raised); border-bottom: 1px solid var(--line);
  }
  .topnav:target, .topnav.open { display: flex; }
  .topnav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .navtoggle { display: inline-flex; align-items: center; gap: 7px; color: var(--slate); font-size: 0.9rem; }
  .band { padding: 56px 0; }
  .hit { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dials { gap: 8px; }
  .dial { width: 38px; height: 38px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .deck { padding: 10px; border-radius: 10px; }
  .deck-grid { gap: 6px; }
  .key-label { font-size: 0.58rem; padding: 10px 2px 4px; }
  .key-text { font-size: 0.68rem; }
  .key-sub { font-size: 0.5rem; }
  .roster { grid-template-columns: minmax(0, 1fr); }
}

/* "press /" is an instruction a touch device cannot follow, so it only exists
   where there is a keyboard to press it on */
@media (hover: none), (pointer: coarse) {
  .finder-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .booting .key { opacity: 1; }
  .topo { transition: none; }
}