/* ENTREFER — one stylesheet, hand written, no build step.
   The design decisions and the measured contrast ratios are in DESIGN.md.
   The module of the whole page is 19.05 px: the key pitch. */

@import url("fonts.css");

/* ---------------------------------------------------------------- tokens */
:root {
  --paper:      #F4F2ED;
  --sheet:      #FBFAF7;
  --ink:        #14161A;
  --ink-2:      #5C6169;
  --rule:       #D8D4CB;
  --gap:        #B6111C;
  --gap-soft:   #F2DAD9;
  --steel:      #2A2E33;
  --steel-2:    #3A4046;
  --mute-dark:  #9BA1A8;
  --alu:        #A8ABAD;
  --flux:       #1E6E8C;

  /* the key pitch, and everything derived from it */
  --u:    19.05px;
  --u2:   38.1px;
  --u3:   57.15px;
  --u4:   76.2px;
  --u6:   114.3px;
  --u8:   152.4px;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          Consolas, monospace;
  --serif:"Newsreader", Iowan Old Style, Charter, Georgia, serif;

  --shell: 1320px;
  --measure: 68ch;

  --t-fast: 130ms;
  --t: 240ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is `[hidden] { display: none }`, which any rule with
   a class in it out-specifies. The sequence players set `poster.hidden = true`
   once frames are decoded, and `.tour__media .seq img { display: block }` won
   — so the poster stayed on top of the canvas and the hero never showed the
   explosion at all. It was invisible to canvas sampling, because the canvas
   underneath was correct the whole time. */
[hidden] { display: none !important; }

html {
  /* No smooth scroll. It animates every programmatic jump and starves
     anything that is scroll-driven. _kit/scroll-sequences.md */
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16.5px/1.62 var(--sans);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cross-document view transitions: four lines, no JavaScript, and the white
   flash between the seventeen pages is gone. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 180ms;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ------------------------------------------------------------ typography */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.05rem); letter-spacing: -0.026em; }
h2 { font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.3rem); }
h3 { font-size: clamp(1.08rem, .96rem + .5vw, 1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); }
a:hover { text-decoration-color: var(--gap); }

strong { font-weight: 600; }
em { font-style: italic; }

.lead { font-size: clamp(1.06rem, .98rem + .5vw, 1.32rem); color: var(--ink-2);
        max-width: 58ch; line-height: 1.5; }

.prose { font-family: var(--serif); font-size: 1.19rem; line-height: 1.66;
         font-variation-settings: "opsz" 16; }
.prose p { max-width: 62ch; margin-bottom: 1.05em; }
.prose h2 { font-family: var(--sans); margin-top: var(--u3); }

/* Every measurement on this site is set in mono. That is how the reader
   tells a number that was measured from a number that was chosen. */
.n, .num { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums;
           font-feature-settings: "zero" 1; letter-spacing: -0.01em; }
.unit { font-family: var(--mono); font-size: .78em; color: var(--ink-2);
        margin-left: .28em; letter-spacing: 0; }
.kbd { font-family: var(--mono); font-size: .82em; font-weight: 500;
       border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px;
       padding: .12em .42em; background: var(--sheet); white-space: nowrap; }

.eyebrow { font-family: var(--mono); font-size: .72rem; font-weight: 500;
           letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
           margin: 0 0 var(--u); display: flex; align-items: baseline; gap: .7em; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.red { color: var(--gap); }
.muted { color: var(--ink-2); }

/* ---------------------------------------------------------------- layout */
.shell { width: min(100% - var(--u2), var(--shell)); margin-inline: auto; }
.tight { width: min(100% - var(--u2), 880px); margin-inline: auto; }

section { padding-block: clamp(var(--u3), 5vw, var(--u6)); }
section + section { border-top: 1px solid var(--rule); }

.dark { background: var(--steel); color: var(--paper); }
.dark h1, .dark h2, .dark h3 { color: var(--paper); }
.dark .lead, .dark .muted, .dark .eyebrow, .dark .unit { color: var(--mute-dark); }
.dark .eyebrow::after { background: color-mix(in srgb, var(--mute-dark) 32%, transparent); }
.dark + .dark { border-top-color: color-mix(in srgb, var(--mute-dark) 22%, transparent); }
.dark a:hover { text-decoration-color: var(--paper); }

.cols { display: grid; gap: var(--u2) var(--u3); }
@media (min-width: 900px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-2\:5 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cols-7\:5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.cols > * { min-width: 0; }   /* grid children collapse tables without this */

/* --------------------------------------------------------------- masthead */
.mast { position: sticky; top: 0; z-index: 40; background: var(--paper);
        border-bottom: 1px solid var(--rule); }
.mast__in { display: flex; align-items: center; gap: var(--u2);
            height: 62px; }
.mast a { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: .62em; font-weight: 600;
         letter-spacing: .17em; font-size: .84rem; flex: none; }
.brand svg { display: block; }
.mast nav { display: flex; gap: var(--u); margin-left: auto; flex-wrap: wrap; }
.mast nav a { font-size: .875rem; color: var(--ink-2); padding: .3em 0;
              border-bottom: 2px solid transparent; }
.mast nav a:hover { color: var(--ink); }
.mast nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gap); }
.mast .slash { font-family: var(--mono); font-size: .74rem; color: var(--ink-2);
               border: 1px solid var(--rule); border-radius: 5px; padding: .2em .5em;
               background: var(--sheet); cursor: pointer; }
.mast .slash:hover { border-color: var(--gap); color: var(--ink); }
@media (max-width: 860px) {
  .mast__in { height: auto; flex-wrap: wrap; padding-block: .7em; }
  .mast nav { width: 100%; margin-left: 0; gap: var(--u); font-size: .82rem;
              flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2em;
              scrollbar-width: none; }
  .mast nav::-webkit-scrollbar { display: none; }
  .mast nav a { white-space: nowrap; }
  .mast .slash { display: none; }
}

/* ---------------------------------------------------------------- surface */
.card { background: var(--sheet); border: 1px solid var(--rule);
        padding: var(--u2); }
.dark .card { background: var(--steel-2); border-color: color-mix(in srgb, var(--mute-dark) 22%, transparent); }
.card h3 { margin-bottom: .35em; }

.rule { height: 1px; background: var(--rule); border: 0; margin: var(--u2) 0; }

/* --------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; gap: .55em; font: inherit;
       font-size: .92rem; font-weight: 500; padding: .62em 1.15em;
       border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
       cursor: pointer; text-decoration: none; border-radius: 2px;
       transition: background var(--t-fast) var(--ease); }
.btn:hover { background: var(--gap); border-color: var(--gap); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--gap); color: var(--gap); }
.dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dark .btn:hover { background: var(--gap); border-color: var(--gap); color: var(--paper); }
.dark .btn--ghost { background: transparent; color: var(--paper);
                    border-color: color-mix(in srgb, var(--mute-dark) 44%, transparent); }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gap); outline-offset: 3px; border-radius: 2px;
}
.dark :where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline-color: #FF6E6E;
}

input[type="range"] { accent-color: var(--gap); width: 100%; height: 26px; }
input[type="text"], input[type="email"], textarea, select {
  font: inherit; padding: .55em .7em; border: 1px solid var(--rule);
  background: var(--sheet); color: var(--ink); border-radius: 2px; width: 100%;
}
label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: .3em; }

/* ----------------------------------------------------------------- tables */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch;
      border: 1px solid var(--rule); background: var(--sheet); }
.dark .tw { border-color: color-mix(in srgb, var(--mute-dark) 22%, transparent);
            background: var(--steel-2); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 380px; }
th, td { text-align: left; padding: .62em .9em; border-bottom: 1px solid var(--rule);
         vertical-align: baseline; }
.dark th, .dark td { border-bottom-color: color-mix(in srgb, var(--mute-dark) 20%, transparent); }
th { font-weight: 600; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
     color: var(--ink-2); white-space: nowrap; }
.dark th { color: var(--mute-dark); }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ----------------------------------------------------------------- images */
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; background: var(--steel-2); }
figcaption { font-size: .8rem; color: var(--ink-2); margin-top: .6em;
             font-family: var(--mono); line-height: 1.45; }
.dark figcaption { color: var(--mute-dark); }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--rule); padding-block: var(--u3) var(--u2);
        font-size: .875rem; }
.foot__grid { display: grid; gap: var(--u2); grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
           text-transform: uppercase; color: var(--ink-2); margin-bottom: .8em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .38em; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.disclosure { margin-top: var(--u2); padding-top: var(--u);
              border-top: 1px solid var(--rule); color: var(--ink-2);
              font-size: .8rem; max-width: 78ch; }

/* --------------------------------------------------------------- reveals */
.rise { opacity: 0; transform: translateY(10px);
        transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--u); top: var(--u); z-index: 90; padding: .6em 1em;
              background: var(--ink); color: var(--paper); }

/* ================================================== the instrument ===== */
.hero { padding-top: var(--u3); }
.hero__head { max-width: 44ch; margin-bottom: var(--u3); }
.hero h1 { margin-bottom: .42em; }
.hero__honest { margin-top: var(--u2); padding: var(--u) var(--u2);
  border-left: 2px solid var(--gap); background: var(--sheet);
  font-size: .93rem; color: var(--ink-2); max-width: 84ch; }
.hero__honest strong { color: var(--ink); }

.inst { border: 1px solid var(--rule); background: var(--sheet); }
.inst__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .inst__grid { grid-template-columns: minmax(0, 1fr) 230px 240px; }
}
.inst__scope { padding: var(--u); border-bottom: 1px solid var(--rule); min-width: 0; }
.inst__side  { padding: var(--u); border-bottom: 1px solid var(--rule); }
.inst__sect  { padding: var(--u); background: var(--steel); color: var(--paper); }
@media (min-width: 1000px) {
  .inst__scope { border-right: 1px solid var(--rule); border-bottom: 0; }
  .inst__side  { border-right: 1px solid var(--rule); border-bottom: 0; }
}
.inst__scopehead { display: flex; align-items: baseline; gap: var(--u);
  margin-bottom: .55em; }
.inst__scopehead .eyebrow { flex: 1; }
.inst__key { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.inst__key b { color: var(--ink); font-weight: 500; }
.inst canvas[data-scope] { display: block; width: 100%; height: 260px;
  border: 1px solid var(--rule); }
.inst__hint { margin: .7em 0 0; font-size: .86rem; color: var(--ink-2); }
.inst__hint strong { color: var(--gap); }

.inst__read { display: grid; grid-template-columns: 1fr 1fr; gap: .1em .8em;
  border-bottom: 1px solid var(--rule); padding-bottom: .8em; margin-bottom: .9em; }
.inst__read > div { display: flex; align-items: baseline; gap: .3em;
  padding: .18em 0; flex-wrap: wrap; }
.inst__read .l { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); width: 100%; font-family: var(--mono); }
.inst__read b { font-size: 1.18rem; font-weight: 500;
  font-variant-numeric: tabular-nums; }
.is-actuated .inst__read > div:first-child b { color: var(--gap); }

.padkey { display: block; width: 100%; padding: 0; margin: 0 0 .9em;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: none; }
.padkey__cap { --d: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .15em; height: 74px;
  border: 1px solid var(--rule); border-bottom-width: calc(5px - var(--d) * 4px);
  border-radius: 5px; background: var(--paper);
  font-family: var(--mono); font-size: .82rem; color: var(--ink-2);
  transform: translateY(calc(var(--d) * 3px));
  transition: background 90ms linear; }
.padkey:hover .padkey__cap { border-color: var(--ink-2); }
.padkey.is-down .padkey__cap { background: var(--gap-soft); border-color: var(--gap);
  color: var(--gap); }
.padkey__hold { font-size: .7rem; opacity: .7; }

.inst__ctl label { font-family: var(--mono); font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; display: flex; align-items: baseline; gap: .35em; }
.inst__ctl label b { font-size: .92rem; color: var(--ink); text-transform: none;
  letter-spacing: 0; margin-left: auto; }
.inst__row { display: flex; flex-direction: column; gap: .5em; margin-top: .7em;
  padding-top: .7em; border-top: 1px solid var(--rule); }
.switchy { display: flex !important; align-items: center; gap: .5em;
  cursor: pointer; text-transform: none !important; letter-spacing: .04em !important;
  font-size: .82rem !important; color: var(--ink) !important; }
.switchy input { accent-color: var(--gap); width: 15px; height: 15px; }
.inst__delta { display: flex; align-items: center; gap: .5em; }
.inst__delta input { flex: 1; }
.inst__delta b { font-family: var(--mono); font-size: .82rem; }

.inst__sect .seq { position: relative; aspect-ratio: 840 / 1050; background: var(--steel); }
.inst__sect canvas, .inst__sect .seq img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; }
.seq__cap { margin: .7em 0 0; font-family: var(--mono); font-size: .72rem;
  line-height: 1.45; color: var(--mute-dark); }

/* ------------------------------------------------------------ field card */
.fieldcard { border: 1px solid var(--rule); background: var(--sheet); padding: var(--u); }
/* The canvases paint --sheet as their own ground, so the card stays a light
   sheet even inside a dark section - and therefore keeps dark text. Letting it
   inherit .dark's --paper put light text on a light card and made every
   readout on courbe.html invisible. */
.dark .fieldcard { background: var(--sheet); border-color: var(--rule);
  color: var(--ink); }
.dark .fieldcard h3, .dark .fieldcard b { color: var(--ink); }
.dark .fieldcard .l, .dark .fieldcard .unit, .dark .fieldcard .muted { color: var(--ink-2); }
.fieldcard canvas { display: block; width: 100%; height: 240px; touch-action: none;
  border: 1px solid var(--rule); cursor: ew-resize; }
.fieldcard__read { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .2em .9em; margin-top: .8em; }
.fieldcard__read > div { display: flex; align-items: baseline; gap: .3em; flex-wrap: wrap; }
.fieldcard__read .l { width: 100%; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.fieldcard__read b { font-size: 1.02rem; font-weight: 500; }
.fieldcard__hint { margin: .7em 0 0; font-size: .76rem; font-family: var(--mono); }

/* ---------------------------------------------------------- board cards */
.boards { display: grid; gap: var(--u2); margin-bottom: var(--u3); }
@media (min-width: 860px) { .boards { grid-template-columns: repeat(3, 1fr); } }
.boardcard { display: block; text-decoration: none; background: var(--sheet);
  border: 1px solid var(--rule); padding: var(--u2);
  transition: border-color var(--t-fast) var(--ease); }
.boardcard:hover { border-color: var(--gap); }
.boardcard h3 { margin-bottom: .3em; }
.boardcard__line { font-size: .9rem; color: var(--ink-2); min-height: 3.2em; }
.boardcard__spec { margin: var(--u) 0 0; display: grid; gap: 0; }
.boardcard__spec > div { display: flex; justify-content: space-between; gap: 1em;
  padding: .34em 0; border-top: 1px solid var(--rule); font-size: .84rem; }
.boardcard__spec dt { color: var(--ink-2); }
.boardcard__spec dd { margin: 0; font-family: var(--mono); font-size: .8rem; }
.boardcard__price { margin: var(--u) 0 0; font-size: 1.05rem; font-weight: 500;
  color: var(--gap); }

.closing { padding-bottom: var(--u4); }
.closing__fig img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------------------------------------------------------------- stats */
.stat { border-top: 2px solid var(--ink); padding-top: .55em; }
.dark .stat { border-top-color: var(--paper); }
.stat__v { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 500;
  font-family: var(--mono); font-variant-numeric: tabular-nums; margin: 0 0 .1em; }
.stat__l { font-size: .82rem; color: var(--ink-2); margin: 0; }
.dark .stat__l { color: var(--mute-dark); }

/* -------------------------------------------------------------- palette */
.palette { border: 0; padding: 0; background: transparent; max-width: 560px;
  width: min(92vw, 560px); margin-top: 12vh; }
.palette::backdrop { background: color-mix(in srgb, var(--steel) 62%, transparent); }
.palette__box { background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); }
.palette__head { display: flex; align-items: center; gap: .7em;
  padding: .7em var(--u); border-bottom: 1px solid var(--rule); }
.palette__head input { border: 0; background: none; padding: 0; font-size: 1rem; }
.palette__head input:focus { outline: none; }
.palette__list { max-height: 52vh; overflow-y: auto; padding: .4em 0; }
.palette__list a { display: flex; align-items: baseline; gap: 1em;
  padding: .5em var(--u); text-decoration: none; font-size: .93rem; }
.palette__slug { margin-left: auto; font-family: var(--mono); font-size: .74rem;
  color: var(--ink-2); }
.palette__list a.is-cur { background: var(--gap); color: var(--paper); }
.palette__list a.is-cur .palette__slug { color: var(--paper); opacity: .75; }

/* ================================================== page furniture ===== */
.phead { padding-block: var(--u3) var(--u2); }
.phead h1 { max-width: 20ch; }
.phead .lead { margin-top: .6em; }

.eq { font-size: clamp(.86rem, .78rem + .5vw, 1.02rem); background: var(--sheet);
  border: 1px solid var(--rule); border-left: 2px solid var(--gap);
  padding: .9em var(--u); overflow-x: auto; max-width: none; line-height: 1.9; }
.eq .frac { display: inline-block; }

.reasons { margin: 0; padding-left: 1.3em; max-width: var(--measure); }
.reasons li { margin-bottom: .7em; }

/* --------------------------------------------------------- finishes --- */
.finishes { display: grid; gap: var(--u); }
.finish { display: flex; gap: var(--u); align-items: flex-start; }
.finish__chip { flex: none; width: 46px; height: 46px; border-radius: 2px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.finish b { display: block; margin-bottom: .12em; }
.finish p { font-size: .86rem; margin: 0; }

/* ------------------------------------------------------------- caps --- */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--u);
  margin: var(--u2) 0; }
.cap { border: 1px solid var(--rule); border-bottom-width: 4px; border-radius: 5px;
  background: var(--sheet); padding: var(--u) .8em; text-align: center; }
.cap__glyph { display: block; font-size: 1.2rem; color: var(--ink-2); }
.cap__n { display: block; font-size: 1.14rem; font-weight: 500; margin: .12em 0; }
.cap__l { display: block; font-size: .68rem; font-family: var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* -------------------------------------------------------- timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; gap: .4em var(--u2); padding: var(--u2) 0;
  border-top: 1px solid var(--rule); }
@media (min-width: 780px) { .timeline li { grid-template-columns: 140px 1fr; } }
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline__y { font-size: 1.6rem; font-weight: 500; color: var(--gap); margin: 0; }
.timeline h3 { margin-bottom: .3em; }

/* ------------------------------------------------------------ FAQ ----- */
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: .9em 0; font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; gap: 1em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--gap); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1em; color: var(--ink-2); }

.limitcard h3 { color: var(--gap); }

/* -------------------------------------------------------- certificate - */
.cert { border: 1px solid var(--ink); background: var(--sheet); }
.cert__head { display: flex; align-items: center; gap: var(--u2);
  padding: var(--u2); border-bottom: 2px solid var(--ink); flex-wrap: wrap; }
.cert__title { font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.cert__sub { margin: .12em 0 0; font-size: .82rem; }
.cert__serial { margin-left: auto; font-size: 1.05rem; font-weight: 500;
  border: 1px solid var(--rule); padding: .35em .7em; background: var(--paper); }
.cert__meta { display: grid; gap: 0; border-bottom: 1px solid var(--rule);
  grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .cert__meta { grid-template-columns: repeat(3, 1fr); } }
.cert__meta > div { padding: .8em var(--u2); border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); }
.cert__meta span { display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .2em; }
.cert__meta b { font-weight: 500; font-size: .92rem; }
.cert__body { padding: var(--u2); }
.cert__verdict { display: grid; gap: var(--u2); grid-template-columns: repeat(2, 1fr);
  margin: var(--u2) 0; }
@media (min-width: 780px) { .cert__verdict { grid-template-columns: repeat(4, 1fr); } }
.cert__table { border-left: 0; border-right: 0; }
.cert__table table { min-width: 460px; }
.cert__foot { padding: var(--u2); border-top: 1px solid var(--rule);
  font-size: .78rem; }
.mark--big { color: var(--ink); }

/* ------------------------------------------------------------ forms --- */
.field { margin-bottom: var(--u); }
.composed { display: block; white-space: pre-wrap; font-family: var(--mono);
  font-size: .84rem; margin-top: var(--u); padding: var(--u);
  background: var(--paper); border: 1px solid var(--gap); line-height: 1.6; }

/* ------------------------------------------------------- small screens */
@media (max-width: 700px) {
  .inst canvas[data-scope] { height: 210px; }
  .fieldcard canvas { height: 200px; }
  .caps { grid-template-columns: 1fr; }
  .cert__serial { margin-left: 0; }
}
.inst__read--wide { grid-column: 1 / -1; border-top: 1px solid var(--rule);
  padding-top: .5em !important; margin-top: .25em; }
.is-actuated .inst__read--wide b { color: var(--gap); }

/* ================================================== the hero tour ======= */
/*
 * Full bleed, pinned, and the copy scrolls over it in a left column.
 *
 * The render is a sticky 100svh block; the copy that follows is pulled back up
 * over it with a negative margin, so the section's height is the copy's height
 * and the render stays put for all of it. That is the pattern; the parts that
 * matter here are that the object is *large* — edge to edge, not a bordered box
 * in a centred column — and that it turns as you go, which is what the render
 * was re-shot for.
 */
/* The global `section` padding pushes a sticky first child down by its own
   value, which left a dark band above the render and moved the pin off the top
   of the viewport. A full-bleed section has no padding. */
.tour { position: relative; background: #0F1113; color: var(--paper);
  padding: 0; border-top: 0; }

.tour__media { position: sticky; top: 0; z-index: 0;
  height: 100svh; overflow: hidden; }
.tour__media .seq { position: absolute; inset: 0; touch-action: pan-y; }
.tour__media canvas, .tour__media .seq img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; }
.tour__media .seq { cursor: grab; }
.tour__media .seq.is-dragging { cursor: grabbing; }

/* A wedge over the left third only. Measured against the frames at six points
   across the scroll, not judged from frame zero — see DESIGN.md section 13. */
.tour__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(9,10,12,.94) 0%, rgba(9,10,12,.90) 24%, rgba(9,10,12,.70) 40%,
    rgba(9,10,12,.30) 55%, rgba(9,10,12,.06) 68%, rgba(9,10,12,0) 78%); }

/* Bottom right, opposite the copy. Two copy blocks are on screen at once at
   some scroll positions, and with the readout on the same side as the text the
   next block's kicker landed on top of it. */
.tour__hudwrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  pointer-events: none; }
.tour__hud { display: flex; align-items: center; justify-content: flex-end;
  gap: .7em; width: min(100% - var(--u2), var(--shell)); margin-inline: auto;
  padding-bottom: var(--u2);
  font-family: var(--mono); font-size: .74rem; color: #AEB4BB;
  text-shadow: 0 1px 10px rgba(9,10,12,.85); }
.tour__hud .n { color: var(--paper); font-size: .92rem; font-weight: 500; }
.tour__bar { --p: 0; position: relative; display: block; width: 108px; height: 2px;
  background: rgba(255,255,255,.22); flex: none; }
.tour__bar::after { content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p) * 100%); background: var(--gap); }
.tour__label { letter-spacing: .12em; text-transform: uppercase;
  font-size: .68rem; color: #FF6E6E; min-width: 8.5em; }
.tour__grab { letter-spacing: .1em; text-transform: uppercase;
  font-size: .66rem; opacity: .72; padding-left: .8em;
  border-left: 1px solid rgba(255,255,255,.24); }

.tour__copy { position: relative; z-index: 2; margin-top: -100svh;
  pointer-events: none; padding-bottom: var(--u6); }
.tour__copy a, .tour__copy .btn { pointer-events: auto; }
.tour__col { width: min(100%, 46ch); }
.tour__block { min-height: calc(var(--span) * 6.4svh);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--u2); }
.tour__block--lead { justify-content: center; }
.tour__block h1 { color: var(--paper);
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); }
.tour__block h2 { color: var(--paper);
  font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.7rem); }
.tour__block p { color: #CDD2D8; max-width: 42ch; }
.tour__block .lead { color: #DBE0E5; }
.tour__block .eyebrow { color: #9BA1A8; }
.tour__block .eyebrow::after { background: rgba(255,255,255,.2); }
.tour__block.is-on .eyebrow { color: #FF6E6E; }
.tour__block.is-on .eyebrow::after { background: rgba(255,110,110,.5); }
.tour__block .btn--ghost { color: var(--paper); border-color: rgba(255,255,255,.34); }
.tour__block .btn--ghost:hover { color: var(--paper); border-color: #FF6E6E; }

@media (max-width: 899px) {
  /* Overlaying a 42ch column on a 390 px render leaves neither of them room.
     The render takes the top of the screen and sticks there, and the copy runs
     underneath it on its own dark ground. */
  /* The copy scrolls *under* the pinned render here, not over it: at 390 px a
     46ch column on top of the image leaves neither readable. So the media wins
     the stacking order and carries an opaque ground. */
  /* 42svh, not 52: at 390 px the masthead is 120 px tall, and a taller render
     pushed the headline off the first screen entirely — the reader got a
     picture and a column of empty dark. */
  .tour__media { height: 42svh; top: var(--mast-h, 62px); z-index: 6;
    background: #0F1113; border-bottom: 1px solid rgba(255,255,255,.14); }
  .tour__scrim { background: linear-gradient(180deg,
      rgba(9,10,12,.55) 0%, rgba(9,10,12,.10) 34%, rgba(9,10,12,0) 60%); }
  /* The readout sits on the render here rather than beside it, so it needs a
     ground it can rely on — the frame under it changes for the whole scroll. */
  .tour__hudwrap { background: linear-gradient(180deg,
      rgba(9,10,12,0) 0%, rgba(9,10,12,.55) 45%, rgba(9,10,12,.88) 100%);
    padding-top: var(--u2); }
  .tour__hud { padding-bottom: .7em; justify-content: flex-start; }
  .tour__grab { display: none; }
  .tour__copy { margin-top: 0; z-index: 1; padding-top: var(--u); }
  .tour__col { width: 100%; }
  .tour__block { min-height: calc(var(--span) * 3.6svh); padding-block: var(--u2); }
  /* Start the lead block at the top rather than centring it in its own height:
     centred, it put 155 px of empty dark between the render and the headline
     and pushed the proposition off the first screen. */
  .tour__block--lead { justify-content: flex-start; padding-top: var(--u); }
  .tour__block h1 { font-size: clamp(1.9rem, 1.1rem + 4.4vw, 2.6rem); }
  .tour__block h2 { font-size: clamp(1.5rem, 1rem + 3vw, 2.1rem); }
}

@media (prefers-reduced-motion: reduce) {
  /* No forced travel and nothing pinned: the render sits once at the top and
     the six blocks read as an ordinary article beneath it. */
  .tour__media { position: static; height: 58svh; top: auto; }
  .tour__scrim { display: none; }
  .tour__hud { position: static; padding-block: var(--u); }
  .tour__copy { margin-top: 0; }
  .tour__col { width: 100%; }
  .tour__block, .tour__block--lead { min-height: 0; }
  .tour__grab { display: none; }
}

/* --------------------------------------------------- the stack, as stills */
/* The strip is three tall frames; without this the layer list sits at the top
   and leaves a column of nothing beside the last two. */
@media (min-width: 900px) {
  .explode-copy { position: sticky; top: calc(62px + var(--u)); align-self: start; }
}
.explode-strip { display: grid; gap: var(--u); }
.explode-strip figure img { display: block; width: 100%; height: auto;
  background: var(--steel); border: 1px solid var(--rule); }
.explode-strip figcaption { font-family: var(--mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  margin-top: .4em; }
.explode-list { list-style: none; margin: var(--u2) 0; padding: 0;
  counter-reset: layer; }
.explode-list li { counter-increment: layer; display: grid;
  grid-template-columns: 2.4em 1fr; gap: .2em 0;
  padding: .55em 0; border-top: 1px solid var(--rule); }
.explode-list li::before { content: counter(layer, decimal-leading-zero);
  font-family: var(--mono); font-size: .78rem; color: var(--gap);
  grid-row: span 2; padding-top: .18em; }
.explode-list b { font-weight: 500; }
.explode-list span { font-size: .86rem; color: var(--ink-2); }

.hero { padding-top: var(--u3); }
.hero__h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); max-width: 18ch; }
.fieldcard canvas:focus-visible { outline: 2px solid var(--gap); outline-offset: 2px; }
th .u { text-transform: none; font-family: var(--mono); font-weight: 400;
  letter-spacing: 0; opacity: .78; margin-left: .45em; }

/* ============================================== the keyboard component == */
/* Drawn from the same table as the 87 keycaps in the render. One component
   serves the actuation map, the calibration heat map, the legend chart and the
   layout comparison — they differ only in what they put in `values`. */
.kb { position: relative; width: 100%; background: var(--sheet);
  border: 1px solid var(--rule); padding: 0; }
.dark .kb { background: var(--steel-2);
  border-color: color-mix(in srgb, var(--mute-dark) 26%, transparent); }
.kb__k { position: absolute; margin: 0; padding: 0; border: 0; font: inherit;
  display: grid; place-items: center; overflow: hidden; }
.kb__k::before { content: ""; position: absolute; inset: 5.5%;
  background: var(--paper); border: 1px solid var(--rule);
  border-bottom-width: 2px; border-radius: 3px; }
.dark .kb__k::before { background: var(--steel);
  border-color: color-mix(in srgb, var(--mute-dark) 30%, transparent); }
.kb__l { position: relative; font-family: var(--mono);
  font-size: clamp(4px, .62vw, 9px); line-height: 1; color: var(--ink-2);
  text-align: center; padding: 0 1px; }
.dark .kb__l { color: var(--mute-dark); }
.kb__b { position: relative; font-family: var(--mono); font-size: 8px;
  color: var(--gap); }

/* toned keys: --tone 0..1 drives the fill */
.kb__k[style*="--tone"]::before {
  background: color-mix(in srgb, var(--gap) calc(var(--tone) * 78%), var(--paper));
  border-color: color-mix(in srgb, var(--gap) calc(var(--tone) * 60%), var(--rule)); }
.dark .kb__k[style*="--tone"]::before {
  background: color-mix(in srgb, var(--gap) calc(var(--tone) * 82%), var(--steel)); }
.kb__k[style*="--tone"] .kb__l { color: var(--ink); }

.kb--flat .kb__k::before { border-bottom-width: 1px; }
.kb--drop .kb__k::before { opacity: .28; }
.kb--drop .kb__k.keep::before { opacity: 1; }
.kb--drop .kb__k .kb__l { opacity: .4; }
.kb--drop .kb__k.keep .kb__l { opacity: 1; }

button.kb__k { cursor: pointer; }
button.kb__k:hover::before { border-color: var(--gap); }
button.kb__k:focus-visible { outline: 2px solid var(--gap); outline-offset: 1px;
  z-index: 3; border-radius: 4px; }
button.kb__k.is-sel::before { border-color: var(--gap); border-width: 2px; }

/* ------------------------------------------------ the BANC actuation map */
.kb--map { touch-action: none; user-select: none; }
.kb__hint { font-size: .84rem; margin-top: var(--u); }
.mapctl { border: 1px solid var(--rule); background: var(--sheet);
  padding: var(--u2); align-self: start; }
.mapctl__sel { display: flex; align-items: baseline; gap: .6em;
  padding-bottom: .7em; margin-bottom: .9em; border-bottom: 1px solid var(--rule); }
.mapctl__sel .l { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); }
.mapctl__sel b { margin-left: auto; font-family: var(--mono); font-size: .95rem; }
.mapctl label { font-family: var(--mono); font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; display: flex; align-items: baseline; gap: .35em; }
.mapctl label b { margin-left: auto; font-size: .95rem; color: var(--ink);
  text-transform: none; letter-spacing: 0; }
.mapctl__read { display: grid; grid-template-columns: 1fr 1fr; gap: .2em .9em;
  margin-top: var(--u); padding-top: var(--u); border-top: 1px solid var(--rule); }
.mapctl__read > div { display: flex; align-items: baseline; gap: .3em; flex-wrap: wrap; }
.mapctl__read .l { width: 100%; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.mapctl__read b { font-size: 1rem; font-weight: 500; }
.mapctl__presets { display: flex; flex-wrap: wrap; gap: .5em; margin-top: var(--u2); }
.mapctl__presets .btn { font-size: .8rem; padding: .5em .8em; }

/* ---------------------------------------- the layout on the other pages */
.cert__map { padding: var(--u2) var(--u2) var(--u); }
.cert__scale { display: flex; align-items: center; gap: .6em; margin: var(--u) 0 0;
  font-size: .82rem; color: var(--ink-2); }
.cert__ramp { display: block; width: 84px; height: 8px; flex: none;
  background: linear-gradient(90deg, var(--paper), var(--gap));
  border: 1px solid var(--rule); }
.kb__k.is-worst::before { border-color: var(--ink); border-width: 2px; }
.kb--caps .kb__k.is-mark::before { background: var(--gap-soft);
  border-color: var(--gap); }
.kb--caps .kb__k.is-mark .kb__l { display: none; }
.kb--caps .kb__b { font-size: clamp(4px, .58vw, 8px); font-weight: 500; }
.dropfig figcaption { margin-bottom: var(--u); }
.dropfig p { margin-top: var(--u); font-size: .88rem; }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-top: 1px solid var(--rule); }
.dark .linklist li { border-top-color: color-mix(in srgb, var(--mute-dark) 24%, transparent); }
.linklist li:last-child { border-bottom: 1px solid var(--rule); }
.dark .linklist li:last-child { border-bottom-color: color-mix(in srgb, var(--mute-dark) 24%, transparent); }
.linklist a { display: block; padding: .8em 0; text-decoration: none;
  transition: padding-left var(--t-fast) var(--ease); }
.linklist a:hover { padding-left: .5em; color: var(--gap); }
.dark .linklist a:hover { color: #FF6E6E; }

/* The layout keeps a usable key size and scrolls sideways rather than
   shrinking: at 390 px a full tenkeyless is 19 px keys with 4 px legends, and
   the interactive map's tap targets fall below the 24 px minimum. */
.kbwrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; }
.kb__scrollhint { display: none; }
@media (max-width: 760px) {
  .kbwrap { margin-inline: calc(var(--u) * -1); padding-inline: var(--u);
            padding-bottom: .5em; }
  .kbwrap .kb { min-width: 620px; }
  /* Say it rather than hope the cut-off edge implies it. */
  .kb__scrollhint { display: block; margin: .5em 0 0; font-family: var(--mono);
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-2); }
  .dark .kb__scrollhint { color: var(--mute-dark); }
}