/* ==========================================================================
   SOT design system — documentation chrome.
   Shared by index.html and logo.html. Every value here resolves to a token
   from tokens/sot-tokens.css.
   The chrome deliberately mirrors the brand book's own pages: white ground,
   black type, hairline rules — the colour lives in the specimens.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--sot-surface);
  color: var(--sot-text);
  font-family: var(--sot-font-primary-stack);
  font-size: var(--sot-size-md);
  font-weight: var(--sot-weight-regular);
  line-height: var(--sot-leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* The brand has exactly one corner radius: none. Enforce it globally. */
button, input, select, img, svg, table, td, th, .tile, .card { border-radius: var(--sot-radius-none); }

h1, h2, h3, h4 { margin: 0; font-weight: var(--sot-weight-heavy); line-height: var(--sot-leading-tight); letter-spacing: var(--sot-track-tight); }
p { margin: 0; }
a { color: var(--sot-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: var(--sot-border-rule) solid var(--sot-accent);
  outline-offset: 2px;
}
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  border-right: var(--sot-border-hairline) solid var(--sot-rule);
  padding: var(--sot-space-6) var(--sot-space-5) var(--sot-space-8);
  display: flex; flex-direction: column; gap: var(--sot-space-6);
}
.rail__logo { display: block; width: 100%; max-width: 168px; color: var(--sot-text); }
.rail__logo .sot-logo { color: var(--sot-text); }
.rail__meta { font-size: var(--sot-size-3xs); line-height: 1.55; color: var(--sot-text-muted); }
.rail__meta b { color: var(--sot-text); font-weight: var(--sot-weight-bold); }

.nav { display: flex; flex-direction: column; }
.nav a {
  display: flex; justify-content: space-between; gap: var(--sot-space-2);
  padding: var(--sot-space-2) 0;
  border-top: var(--sot-border-hairline) solid rgba(0,0,0,.14);
  color: var(--sot-text);
  font-size: var(--sot-size-sm); font-weight: var(--sot-weight-bold);
}
.nav a:last-child { border-bottom: var(--sot-border-hairline) solid rgba(0,0,0,.14); }
.nav a:hover { color: var(--sot-accent); text-decoration: none; }
.nav a[aria-current="true"] { color: var(--sot-accent); }
.nav a span { color: var(--sot-text-muted); font-weight: var(--sot-weight-regular); font-variant-numeric: tabular-nums; }
.nav a[aria-current="true"] span { color: var(--sot-accent); }

/* pair switcher */
.pairpick { display: flex; flex-direction: column; gap: var(--sot-space-2); }
.pairpick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sot-space-1); }
.pairswatch {
  aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; position: relative;
  display: grid; place-items: center;
  font-family: inherit; font-weight: var(--sot-weight-heavy); font-size: var(--sot-size-3xs);
  letter-spacing: var(--sot-track-wide);
}
.pairswatch::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 0 var(--sot-text);
  transition: box-shadow var(--sot-motion-duration-fast) var(--sot-motion-easing-standard);
}
.pairswatch[aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px var(--sot-text); }

/* ---------------------------------------------------------------- main */
main { min-width: 0; }
section { padding: var(--sot-space-24) var(--sot-space-12) var(--sot-space-16); border-bottom: var(--sot-border-hairline) solid var(--sot-rule); scroll-margin-top: 0; }
section:last-of-type { border-bottom: 0; }

/* The brand book's page grammar: label column left, specimen right. */
.spread { display: grid; grid-template-columns: minmax(0, 268px) minmax(0, 1fr); gap: var(--sot-space-12); align-items: start; }
.spread--stack { display: block; }
.spread__aside { position: sticky; top: var(--sot-space-6); }
.spread__aside > * + * { margin-top: var(--sot-space-4); }

.kicker {
  font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-wider); text-transform: uppercase;
  color: var(--sot-text-muted);
}
h2.title { font-size: var(--sot-size-4xl); }
.subtitle { font-size: var(--sot-size-xl); font-weight: var(--sot-weight-extrabold); letter-spacing: 0; line-height: var(--sot-leading-snug); }
.note { font-size: var(--sot-size-sm); line-height: 1.55; color: var(--sot-text-muted); max-width: 46ch; }
.note b { color: var(--sot-text); }
.note--caution { color: var(--sot-caution); }

.h3 { font-size: var(--sot-size-2xl); }
.h4 { font-size: var(--sot-size-lg); font-weight: var(--sot-weight-extrabold); letter-spacing: 0; }
.block + .block { margin-top: var(--sot-space-16); }
.block__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sot-space-3); padding-bottom: var(--sot-space-2); margin-bottom: var(--sot-space-5); border-bottom: var(--sot-border-rule) solid var(--sot-rule); }
.block__head .note { margin-left: auto; max-width: 40ch; }

/* provenance chip */
.prov {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-wide); text-transform: uppercase;
  padding: 3px 7px; border: var(--sot-border-hairline) solid currentColor; white-space: nowrap;
}
.prov--guideline { color: var(--sot-color-blue); }
.prov--measured  { color: #0a7d00; }
.prov--observed  { color: var(--sot-text); }
.prov--derived   { color: var(--sot-text-muted); }

/* ---------------------------------------------------------------- colour */
.keygrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sot-border-rule); }
.tile {
  position: relative; border: 0; padding: var(--sot-space-4); cursor: pointer; text-align: left;
  min-height: 216px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sot-space-2);
  font-family: inherit; color: inherit;
}
.tile--wide { grid-column: span 2; }
.tile--bordered { box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.tile__name { font-size: var(--sot-size-md); font-weight: var(--sot-weight-heavy); letter-spacing: 0; }
.tile__specs { font-size: var(--sot-size-3xs); line-height: 1.7; font-variant-numeric: tabular-nums; opacity: .92; }
.tile__specs span { display: block; }
.tile__copied { position: absolute; top: var(--sot-space-3); right: var(--sot-space-3); font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); opacity: 0; transition: opacity var(--sot-motion-duration-fast); }
.tile.is-copied .tile__copied { opacity: 1; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sot-border-rule); }
.trio .tile { min-height: 320px; }

.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sot-space-4); }
.pairdemo { padding: var(--sot-space-6) var(--sot-space-5) var(--sot-space-5); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sot-space-5); min-width: 0; overflow: hidden; container-type: inline-size; }
.pairdemo__type { font-family: var(--sot-font-display-en-stack); font-size: min(var(--sot-size-4xl), 22cqw); line-height: .84; letter-spacing: var(--sot-track-tight); text-transform: uppercase; }
.pairdemo__meta { font-size: var(--sot-size-3xs); line-height: 1.6; font-weight: var(--sot-weight-bold); letter-spacing: var(--sot-track-wide); text-transform: uppercase; }

/* ---------------------------------------------------------------- type */
.fontcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sot-space-4); }
.card { border: var(--sot-border-rule) solid var(--sot-rule); padding: var(--sot-space-5); display: flex; flex-direction: column; gap: var(--sot-space-4); min-width: 0; container-type: inline-size; }
.card__spec { font-size: min(var(--sot-size-5xl), 24cqw); line-height: .8; letter-spacing: var(--sot-track-tight); overflow: hidden; }
.card__dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px var(--sot-space-3); font-size: var(--sot-size-2xs); line-height: 1.5; margin: 0; }
.card__dl dt { color: var(--sot-text-muted); }
.card__dl dd { margin: 0; font-weight: var(--sot-weight-bold); overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; }
.status svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.status--yes { color: #0a7d00; }
.status--no { color: var(--sot-caution); }

.roles { display: flex; flex-direction: column; }
.role { padding: var(--sot-space-6) 0; border-top: var(--sot-border-hairline) solid rgba(0,0,0,.18); display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: var(--sot-space-8); align-items: end; }
.role:last-child { border-bottom: var(--sot-border-hairline) solid rgba(0,0,0,.18); }
.role__spec { min-width: 0; overflow-x: clip; overflow-y: visible; }
.role__meta { font-size: var(--sot-size-2xs); line-height: 1.6; }
.role__meta .n { font-weight: var(--sot-weight-heavy); font-size: var(--sot-size-sm); display: block; margin-bottom: 6px; }
.role__meta code { display: block; color: var(--sot-text-muted); }

.scale { width: 100%; border-collapse: collapse; }
.scale th, .scale td { text-align: left; padding: var(--sot-space-2) var(--sot-space-3) var(--sot-space-2) 0; border-bottom: var(--sot-border-hairline) solid rgba(0,0,0,.14); font-size: var(--sot-size-2xs); vertical-align: baseline; }
.scale th { font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; border-bottom-color: var(--sot-rule); border-bottom-width: var(--sot-border-rule); }
.scale td.demo { font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-tight); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 55%; }
.scale td.mono { color: var(--sot-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tracks { display: flex; flex-direction: column; gap: var(--sot-space-3); }
.trackrow { display: grid; grid-template-columns: 96px 1fr; gap: var(--sot-space-4); align-items: center; font-size: var(--sot-size-2xs); }
.trackrow b { font-weight: var(--sot-weight-heavy); }
.trackrow .sample { font-weight: var(--sot-weight-heavy); font-size: var(--sot-size-lg); white-space: nowrap; overflow: hidden; }

/* ----------------------------------------------------------- logo primitive
   An <img> is an isolated document, so currentColor cannot reach into it. The
   lockups are single-colour, so we paint them as CSS masks instead: the element
   takes the logo silhouette in whatever colour it inherits. Aspect ratios are
   the measured values from tokens/sot.tokens.json. */
.sot-logo {
  display: block; width: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: var(--logo-src); mask-image: var(--logo-src);
}
.sot-logo--primary    { --logo-src: url("assets/sot-logo-primary.svg");    aspect-ratio: 1.3607; }
.sot-logo--horizontal { --logo-src: url("assets/sot-logo-horizontal.svg"); aspect-ratio: 6.2211; }
.sot-logo--th         { --logo-src: url("assets/sot-logo-primary-th.svg"); aspect-ratio: 1.3644; }
.sot-logo--small      { --logo-src: url("assets/sot-mark-small-use.svg");  aspect-ratio: 3.0224; }
.sot-logo--mark       { --logo-src: url("assets/sot-mark.svg");            aspect-ratio: 3.0223; }

/* ---------------------------------------------------------------- logo */
.logogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sot-space-4); }
.logobox { border: var(--sot-border-rule) solid var(--sot-rule); display: flex; flex-direction: column; }
.logobox__stage { flex: 1; min-height: 220px; display: grid; place-items: center; padding: var(--sot-space-8); background: var(--sot-pair-bg, var(--sot-surface)); color: var(--sot-pair-fg, var(--sot-text)); }
.logobox__stage .sot-logo { max-width: 320px; }
.logobox__foot { border-top: var(--sot-border-hairline) solid var(--sot-rule); padding: var(--sot-space-3) var(--sot-space-4); display: flex; flex-wrap: wrap; gap: var(--sot-space-2) var(--sot-space-4); align-items: baseline; font-size: var(--sot-size-2xs); }
.logobox__foot b { font-weight: var(--sot-weight-heavy); font-size: var(--sot-size-sm); }
.logobox__foot .mono { color: var(--sot-text-muted); }

/* clearspace visualiser */
.clear { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: var(--sot-space-8); align-items: start; }
.clearstage { border: var(--sot-border-hairline) solid rgba(0,0,0,.2); padding: var(--sot-space-12); display: grid; place-items: center; }
.clearwrap { position: relative; display: inline-block; }
.clearwrap .sot-logo { width: 320px; position: relative; z-index: 1; }
.clearwrap::before {
  content: ""; position: absolute; z-index: 0;
  inset: calc(-1 * var(--cs)) ;
  background: var(--sot-color-cyan);
}
.clearwrap::after {
  content: ""; position: absolute; z-index: 0; inset: 0;
  box-shadow: 0 0 0 var(--cs) rgba(0,0,0,.12);
}
.controls { display: flex; flex-direction: column; gap: var(--sot-space-4); }
.control { display: flex; flex-direction: column; gap: 6px; font-size: var(--sot-size-2xs); }
.control > label { font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; }
.control select, .control input[type="text"] {
  font-family: inherit; font-size: var(--sot-size-sm); font-weight: var(--sot-weight-bold);
  padding: var(--sot-space-2) var(--sot-space-3);
  border: var(--sot-border-rule) solid var(--sot-rule); background: var(--sot-surface); color: var(--sot-text);
  appearance: none; width: 100%;
}
.control input[type="range"] { width: 100%; accent-color: var(--sot-accent); }
.segmented { display: flex; flex-wrap: wrap; gap: var(--sot-border-hairline); }
.segmented button {
  font-family: inherit; font-size: var(--sot-size-2xs); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-wide); text-transform: uppercase;
  padding: var(--sot-space-2) var(--sot-space-3); cursor: pointer;
  border: var(--sot-border-hairline) solid var(--sot-rule);
  background: var(--sot-surface); color: var(--sot-text);
}
.segmented button[aria-pressed="true"] { background: var(--sot-text); color: var(--sot-text-invert); }

/* minimum size */
.minsize { display: flex; flex-wrap: wrap; gap: var(--sot-space-8); align-items: flex-end; }
.minsize figure { margin: 0; display: flex; flex-direction: column; gap: var(--sot-space-2); }
.minsize .sot-logo { }
.minsize figcaption { font-size: var(--sot-size-3xs); line-height: 1.5; }
.minsize figcaption b { display: block; font-weight: var(--sot-weight-heavy); font-size: var(--sot-size-2xs); }

/* do-not */
.donts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sot-space-4); }
.dont { display: flex; flex-direction: column; gap: var(--sot-space-2); }
.dont__stage { border: var(--sot-border-hairline) solid rgba(0,0,0,.2); aspect-ratio: 4/3; display: grid; place-items: center; padding: var(--sot-space-4); overflow: hidden; position: relative; }
.dont__stage .sot-logo { max-width: 190px; }
.dont__stage::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to bottom right, transparent calc(50% - 1px), var(--sot-caution) calc(50% - 1px), var(--sot-caution) calc(50% + 1px), transparent calc(50% + 1px)); }
.dont p { font-size: var(--sot-size-3xs); line-height: 1.5; }
.dont p b { display: block; font-weight: var(--sot-weight-heavy); color: var(--sot-caution); font-size: var(--sot-size-2xs); letter-spacing: var(--sot-track-wide); text-transform: uppercase; }
.is-stretched { transform: scaleX(1.5); transform-origin: center; }
.is-rotated { transform: rotate(-12deg); }
.is-recolored { color: #7a4bd6 !important; }

/* ---------------------------------------------------------------- key visual */
.kvlab { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--sot-space-8); align-items: start; }
.kvstage { display: flex; flex-wrap: wrap; gap: var(--sot-space-6); align-items: flex-start; }

.kv {
  --kv-pad-i: 4.5%;
  --kv-pad-b: 3%;
  position: relative; overflow: hidden;
  width: 460px; max-width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--sot-pair-bg); color: var(--sot-pair-fg);
  padding: var(--kv-pad-b) var(--kv-pad-i);
  display: flex; flex-direction: column;
  font-family: var(--sot-font-primary-stack);
  container-type: inline-size;
}
.kv__slot { position: relative; }
.kv__slot[data-slot="key-visual"] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.kv__row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.kv__row > * { white-space: nowrap; }
.kv__eyebrow { font-size: 3.4cqw; font-weight: var(--sot-weight-heavy); letter-spacing: .04em; text-transform: uppercase; }
.kv__date { font-size: 3.4cqw; font-weight: var(--sot-weight-heavy); text-transform: uppercase; }
.kv__line {
  font-family: var(--sot-font-display-en-stack);
  font-weight: var(--sot-weight-display-semibold);
  text-transform: uppercase;
  line-height: var(--sot-leading-display);
  letter-spacing: var(--sot-track-tight);
  white-space: nowrap; display: block; transform-origin: left top;
}
/* Thai stacks a vowel and a tone mark above the consonant, so it needs its own
   display leading — the Latin value clips the marks. See tokens/leading.display-th. */
.kv--th .kv__line { font-family: var(--sot-font-display-th-stack); text-transform: none; line-height: var(--sot-leading-display-th); }
.kv__conj { font-size: 3.6cqw; font-weight: var(--sot-weight-heavy); letter-spacing: .08em; text-align: center; padding: .3em 0; }
.kv__logo { display: flex; align-items: flex-end; gap: 4%; }
.kv__logo img { width: 46%; height: auto; display: block; }
.kv__logoword { font-size: 3.1cqw; font-weight: var(--sot-weight-heavy); line-height: 1.14; letter-spacing: .02em; text-transform: uppercase; flex: 1; }
.kv__logoword .r { display: flex; justify-content: space-between; }
.kv__year { display: flex; justify-content: space-between; font-size: 5.6cqw; font-weight: var(--sot-weight-heavy); line-height: 1; margin-top: .35em; }
.kv__gap { height: 2.2cqw; flex: 0 0 auto; }

.kvcap { font-size: var(--sot-size-2xs); line-height: 1.55; max-width: 42ch; margin-top: var(--sot-space-3); color: var(--sot-text-muted); }

/* modular diagram */
.modular { width: 300px; border: var(--sot-border-rule) solid var(--sot-rule); display: flex; flex-direction: column; aspect-ratio: 2/3; }
.modular__slot { padding: var(--sot-space-3); border-bottom: var(--sot-border-hairline) solid var(--sot-rule); font-size: var(--sot-size-3xs); line-height: 1.45; }
.modular__slot:last-child { border-bottom: 0; }
.modular__slot b { display: block; font-weight: var(--sot-weight-heavy); font-size: var(--sot-size-2xs); }
.modular__slot--kv { flex: 1; background: repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 6px, transparent 6px 12px); display: flex; flex-direction: column; justify-content: center; }
.modular__slot em { font-style: normal; color: var(--sot-accent); font-weight: var(--sot-weight-bold); }

/* halftone */
.halftone { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--sot-pair-bg); }
.halftone__img { position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 42% 32%, var(--sot-pair-fg) 0 38%, transparent 72%),
  radial-gradient(85% 70% at 72% 86%, var(--sot-pair-fg) 0 30%, transparent 70%),
  radial-gradient(40% 40% at 20% 78%, var(--sot-pair-fg) 0 34%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at center, #000 34%, transparent 42%);
  mask-image: radial-gradient(circle at center, #000 34%, transparent 42%);
  -webkit-mask-size: var(--sot-effect-halftone-cell) var(--sot-effect-halftone-cell);
  mask-size: var(--sot-effect-halftone-cell) var(--sot-effect-halftone-cell);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  opacity: var(--sot-effect-duotone-mix);
}
.kvcap b { display: block; color: var(--sot-text); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; margin-bottom: 3px; }

/* ---------------------------------------------------------------- components */
.sot-btn {
  font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sot-space-2);
  font-size: var(--sot-size-2xs); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-wide); text-transform: uppercase;
  padding: var(--sot-space-3) var(--sot-space-5);
  border: var(--sot-border-rule) solid var(--sot-text); background: var(--sot-text); color: var(--sot-text-invert);
  transition: background var(--sot-motion-duration-fast) var(--sot-motion-easing-standard), color var(--sot-motion-duration-fast);
}
.sot-btn:hover { background: var(--sot-accent); border-color: var(--sot-accent); }
.sot-btn--secondary { background: transparent; color: var(--sot-text); }
.sot-btn--secondary:hover { background: var(--sot-text); color: var(--sot-text-invert); border-color: var(--sot-text); }
.sot-btn:disabled { opacity: .32; cursor: not-allowed; }
.sot-tag { display: inline-flex; align-items: center; font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; padding: 4px var(--sot-space-2); background: var(--sot-pair-bg, var(--sot-text)); color: var(--sot-pair-fg, var(--sot-text-invert)); }
.demorow { display: flex; flex-wrap: wrap; gap: var(--sot-space-3); align-items: center; }
.nomcard { border: var(--sot-border-rule) solid var(--sot-rule); display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.nomcard__top { aspect-ratio: 1; background: var(--sot-pair-bg); color: var(--sot-pair-fg); display: grid; place-items: center; padding: var(--sot-space-4); overflow: hidden; font-family: var(--sot-font-display-en-stack); font-size: min(var(--sot-size-4xl), 15cqw); line-height: .85; text-transform: uppercase; text-align: center; letter-spacing: var(--sot-track-tight); }
.nomcard__body { padding: var(--sot-space-4); display: flex; flex-direction: column; gap: var(--sot-space-2); }
.nomcard__body b { font-size: var(--sot-size-lg); font-weight: var(--sot-weight-heavy); }
.nomcard__body span { font-size: var(--sot-size-2xs); color: var(--sot-text-muted); }

/* ---------------------------------------------------------------- token table */
.filters { display: flex; flex-wrap: wrap; gap: var(--sot-space-4); align-items: flex-end; margin-bottom: var(--sot-space-5); }
.filters .control { min-width: 176px; }
.tcount { font-size: var(--sot-size-2xs); color: var(--sot-text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.ttable { width: 100%; border-collapse: collapse; font-size: var(--sot-size-2xs); }
.ttable th { text-align: left; padding: var(--sot-space-2) var(--sot-space-3) var(--sot-space-2) 0; border-bottom: var(--sot-border-rule) solid var(--sot-rule); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; position: sticky; top: 0; background: var(--sot-surface); z-index: 2; }
.ttable td { padding: var(--sot-space-2) var(--sot-space-3) var(--sot-space-2) 0; border-bottom: var(--sot-border-hairline) solid rgba(0,0,0,.12); vertical-align: top; }
.ttable tbody tr:hover { background: rgba(0,0,255,.045); }
.ttable .cvar { font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; }
.ttable .cvar button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--sot-text); text-align: left; }
.ttable .cvar button:hover { color: var(--sot-accent); }
.ttable .cval { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--sot-text-muted); word-break: break-word; }
.ttable .cdesc { max-width: 40ch; line-height: 1.45; }
.chip { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.src { white-space: nowrap; color: var(--sot-text-muted); }

/* ---------------------------------------------------------------- misc */
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sot-space-4) var(--sot-space-8); }
.legend__item { display: flex; gap: var(--sot-space-3); align-items: baseline; font-size: var(--sot-size-2xs); line-height: 1.5; }
.toast { position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%); visibility: hidden; pointer-events: none; background: var(--sot-text); color: var(--sot-text-invert); padding: var(--sot-space-3) var(--sot-space-5); font-size: var(--sot-size-2xs); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; z-index: 50; transition: transform var(--sot-motion-duration-base) var(--sot-motion-easing-standard); }
.toast.is-on { transform: translate(-50%, calc(-1 * var(--sot-space-6))); visibility: visible; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sot-space-4); top: var(--sot-space-4); z-index: 60; background: var(--sot-text); color: var(--sot-text-invert); padding: var(--sot-space-3); }

.colophon { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sot-space-8); }
.colophon dl { display: grid; grid-template-columns: 128px 1fr; gap: var(--sot-space-2) var(--sot-space-4); margin: 0; font-size: var(--sot-size-2xs); line-height: 1.55; }
.colophon dt { color: var(--sot-text-muted); }
.colophon dd { margin: 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .keygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keygrid > * { grid-column: span 1 !important; }
  .pairs, .fontcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role { grid-template-columns: minmax(0,1fr); gap: var(--sot-space-4); }
  .clear, .kvlab { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; border-right: 0; border-bottom: var(--sot-border-rule) solid var(--sot-rule); }
  .spread__aside { position: static; }
  .nav { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--sot-space-4); }
  section { padding: var(--sot-space-12) var(--sot-space-5) var(--sot-space-10); }
  .spread { grid-template-columns: minmax(0,1fr); gap: var(--sot-space-6); }
  h2.title { font-size: var(--sot-size-3xl); }
  .block__head .note { margin-left: 0; text-align: left; }
  .colophon { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px) {
  .keygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairs, .fontcards, .trio, .logogrid, .donts { grid-template-columns: minmax(0,1fr); }
  .nav { grid-template-columns: minmax(0,1fr); }
  .card__spec { font-size: var(--sot-size-5xl); }
}

@media print {
  .rail, .toast, .controls, .filters { display: none; }
  .shell { display: block; }
  section { break-inside: avoid; padding: 12mm; }
}
/* ==========================================================================
   logo.html — dedicated topic page
   ========================================================================== */

/* cross-page nav in the rail */
.pages { display: flex; flex-direction: column; }
.pages a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sot-space-2);
  padding: var(--sot-space-2) 0;
  border-top: var(--sot-border-rule) solid var(--sot-rule);
  color: var(--sot-text); font-size: var(--sot-size-md); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-tight);
}
.pages a:last-child { border-bottom: var(--sot-border-rule) solid var(--sot-rule); }
.pages a:hover { color: var(--sot-accent); text-decoration: none; }
.pages a[aria-current="page"] { background: var(--sot-text); color: var(--sot-text-invert); padding-inline: var(--sot-space-2); }
.pages a span { font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-regular); opacity: .7; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sot-space-12); align-items: end; }
.hero h1 { font-size: var(--sot-size-6xl); line-height: .82; }
.hero .note { font-size: var(--sot-size-lg); color: var(--sot-text); max-width: 34ch; }
.hero__side { display: flex; flex-direction: column; gap: var(--sot-space-4); align-items: flex-start; }
.hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sot-space-3) var(--sot-space-5); width: 100%; }
.hero__stat { border-top: var(--sot-border-rule) solid var(--sot-rule); padding-top: var(--sot-space-2); }
.hero__stat b { display: block; font-size: var(--sot-size-2xl); font-weight: var(--sot-weight-heavy); line-height: 1; font-variant-numeric: tabular-nums; }
.hero__stat span { font-size: var(--sot-size-3xs); color: var(--sot-text-muted); }

/* one block per lockup */
.lockup { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sot-space-8); align-items: start; }
.lockup + .lockup { margin-top: var(--sot-space-12); }
.lockup__stage {
  min-height: 300px; display: grid; place-items: center; padding: var(--sot-space-12);
  background: var(--sot-pair-bg, var(--sot-surface)); color: var(--sot-pair-fg, var(--sot-text));
}
.lockup__stage .sot-logo { max-width: 420px; }
.lockup__meta { display: flex; flex-direction: column; gap: var(--sot-space-3); }
.lockup__meta h3 { font-size: var(--sot-size-2xl); }
.lockup__meta .note { max-width: none; }
.lockup__specs { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sot-space-3); font-size: var(--sot-size-2xs); margin: 0; }
.lockup__specs dt { color: var(--sot-text-muted); }
.lockup__specs dd { margin: 0; font-weight: var(--sot-weight-bold); font-variant-numeric: tabular-nums; }
.lockup__specs dd code { font-weight: var(--sot-weight-regular); }

.dlrow { display: flex; flex-wrap: wrap; gap: var(--sot-space-1); }
.dlrow__label { flex: 0 0 100%; font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; color: var(--sot-text-muted); margin-bottom: 2px; }
.chipbtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-wide); text-transform: uppercase;
  padding: 5px var(--sot-space-2);
  border: var(--sot-border-hairline) solid var(--sot-rule);
  color: var(--sot-text); background: var(--sot-surface);
}
.chipbtn:hover { background: var(--sot-text); color: var(--sot-text-invert); text-decoration: none; }
.chipbtn i { width: 9px; height: 9px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }

/* logo on every key colour (p15) */
.grounds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sot-border-rule); }
.ground { aspect-ratio: 4/3; display: flex; flex-direction: column; justify-content: center; gap: var(--sot-space-3); padding: var(--sot-space-5); }
/* the white ground needs an edge to exist against a white page */
.ground[style*="#ffffff"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.ground .sot-logo { width: 100%; }
.ground__name { font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; }

/* download table */
.dl { width: 100%; border-collapse: collapse; font-size: var(--sot-size-2xs); }
.dl th { text-align: left; padding: var(--sot-space-2) var(--sot-space-3) var(--sot-space-2) 0; border-bottom: var(--sot-border-rule) solid var(--sot-rule); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; position: sticky; top: 0; background: var(--sot-surface); z-index: 2; }
.dl td { padding: var(--sot-space-2) var(--sot-space-3) var(--sot-space-2) 0; border-bottom: var(--sot-border-hairline) solid rgba(0,0,0,.12); vertical-align: middle; }
.dl tbody tr:hover { background: rgba(0,0,255,.045); }
.dl .num { font-variant-numeric: tabular-nums; color: var(--sot-text-muted); white-space: nowrap; }
.dl .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.dl tr.is-group td { background: var(--sot-text); color: var(--sot-text-invert); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; font-size: var(--sot-size-3xs); }

@media (max-width: 1180px) {
  .hero, .lockup { grid-template-columns: minmax(0, 1fr); }
  .grounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero h1 { font-size: var(--sot-size-5xl); }
  .pages { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--sot-space-4); }
}
@media (max-width: 620px) {
  .grounds { grid-template-columns: minmax(0, 1fr); }
  .hero__stats { grid-template-columns: minmax(0,1fr); }
}

/* misuse: rebuilt-from-parts demo needs the mark and a re-typeset descriptor side by side */
.dont__stage.is-rebuilt { flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }

/* ==========================================================================
   logo-variant-selector.html — pick a ground, get the ink
   ========================================================================== */

.lvs { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sot-space-8); align-items: start; }

/* live preview */
.lvs__stage {
  min-height: 420px; display: grid; place-items: center;
  padding: var(--sot-space-16) var(--sot-space-12);
  transition: background-color var(--sot-motion-duration-base) var(--sot-motion-easing-standard),
              color var(--sot-motion-duration-base) var(--sot-motion-easing-standard);
}
.lvs__stage .sot-logo { max-width: 460px; }
.lvs__stage--checker {
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25% 75%, rgba(0,0,0,.06) 75%),
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25% 75%, rgba(0,0,0,.06) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}

/* verdict */
.verdict { border: var(--sot-border-rule) solid var(--sot-rule); border-top: 0; padding: var(--sot-space-5); display: flex; flex-direction: column; gap: var(--sot-space-3); }
.verdict__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sot-space-3); }
.verdict__head { font-size: var(--sot-size-xl); font-weight: var(--sot-weight-heavy); letter-spacing: 0; line-height: 1.15; }
.verdict__ratio { margin-left: auto; font-size: var(--sot-size-2xl); font-weight: var(--sot-weight-heavy); font-variant-numeric: tabular-nums; line-height: 1; }
.verdict__ratio small { display: block; font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-regular); letter-spacing: var(--sot-track-wide); text-transform: uppercase; color: var(--sot-text-muted); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-wide); text-transform: uppercase;
  padding: 4px 8px; white-space: nowrap;
  border: var(--sot-border-hairline) solid currentColor;
}
.badge--yes  { color: #0a7d00; }
.badge--warn { color: var(--sot-text); }
.badge--no   { color: var(--sot-caution); }
.badge--doc  { color: var(--sot-accent); }
.badge--solid { background: var(--sot-text); color: var(--sot-text-invert); border-color: var(--sot-text); }

/* controls */
.lvs__panel { display: flex; flex-direction: column; gap: var(--sot-space-6); }
.hexrow { display: flex; gap: var(--sot-space-2); align-items: stretch; }
.hexrow input[type="text"] {
  flex: 1; min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--sot-size-lg); font-weight: var(--sot-weight-bold);
  text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sot-space-3);
  border: var(--sot-border-rule) solid var(--sot-rule);
  background: var(--sot-surface); color: var(--sot-text);
}
.hexrow input[aria-invalid="true"] { border-color: var(--sot-caution); color: var(--sot-caution); }
.hexrow__chip { width: 52px; flex: 0 0 52px; border: var(--sot-border-rule) solid var(--sot-rule); }

.slider { display: flex; flex-direction: column; gap: 4px; }
.slider__top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--sot-size-2xs); }
.slider__top b { font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; }
.slider__top span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.slider input[type="range"] { width: 100%; margin: 0; height: 22px; accent-color: var(--sot-accent); }
.slider__ticks { display: flex; justify-content: space-between; font-size: var(--sot-size-3xs); color: var(--sot-text-muted); font-variant-numeric: tabular-nums; }

.keypicks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sot-space-1); }
.keypick { aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; position: relative; }
.keypick::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.keypick[aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px var(--sot-text); }
.keypick span { position: absolute; inset: auto 0 3px; font-size: 9px; font-weight: var(--sot-weight-heavy); letter-spacing: .04em; text-transform: uppercase; }

/* ink ranking */
.inks { width: 100%; border-collapse: collapse; font-size: var(--sot-size-2xs); }
.inks th { text-align: left; padding: var(--sot-space-2) var(--sot-space-3) var(--sot-space-2) 0; border-bottom: var(--sot-border-rule) solid var(--sot-rule); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; }
.inks td { padding: var(--sot-space-2) var(--sot-space-3) var(--sot-space-2) 0; border-bottom: var(--sot-border-hairline) solid rgba(0,0,0,.12); vertical-align: middle; }
.inks tr[aria-selected="true"] td { background: rgba(0,0,255,.07); }
.inks .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inks .swatch { width: 34px; height: 20px; display: inline-block; vertical-align: -5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.inks .pick { font: inherit; font-weight: var(--sot-weight-heavy); background: none; border: 0; padding: 0; cursor: pointer; color: var(--sot-accent); text-transform: uppercase; letter-spacing: var(--sot-track-wide); font-size: var(--sot-size-3xs); }
.inks .pick:hover { text-decoration: underline; }
/* dim the reasoning, never the swatch — a washed-out chip misreads the colour */
.inks tr.is-off td:not(:first-child) { opacity: .55; }

@media (max-width: 1180px) { .lvs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px)  { .keypicks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* variant selector — hue track, active file, download tooltip */
.slider__track { height: 6px; margin-top: -4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.filebar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sot-space-2) var(--sot-space-4);
  border: var(--sot-border-rule) solid var(--sot-rule); border-top: 0;
  padding: var(--sot-space-3) var(--sot-space-5);
}
.filebar__label { font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy); letter-spacing: var(--sot-track-wide); text-transform: uppercase; color: var(--sot-text-muted); }
.filebar__name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--sot-size-sm); font-weight: var(--sot-weight-bold);
  color: var(--sot-accent); margin-left: auto;
}
.filebar__name::after { content: " ↓"; }
.dltip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--sot-text); color: var(--sot-text-invert);
  padding: 5px var(--sot-space-2);
  font-size: var(--sot-size-3xs); font-weight: var(--sot-weight-heavy);
  letter-spacing: var(--sot-track-wide); text-transform: uppercase; white-space: nowrap;
  transition: opacity var(--sot-motion-duration-fast) var(--sot-motion-easing-standard);
}
.dltip.is-on { opacity: 1; }