/* ============================================================================
   Planetaire Mono — static homepage + specimen (experimental).

   DESIGN SYSTEM — the canonical spec is design-system.md. Summary:

   COLOR — two text colors, nothing else:
     • black  (--ink)   all main text, headings, samples, bold
     • gray   (--gray)  labels, captions, secondary text
     Plus one structural hairline (--rule) and one surface tint (--surface).
     Links are black + underline (no link color). Code/terminal panels are the
     ONE exception: they carry a syntax palette (--syn-*) that follows the page
     theme (light ↔ dark), because showing the font on colored code IS content.

   TYPE — four sizes for all prose/chrome:
     --fs-display  hero wordmark
     --fs-h2       major section heading — larger, underline rule, Title Case
     --fs-body     body · h3 sub-header (BOLD CAPS) · tables
     --fs-small    labels, captions
     Specimen demos (waterfall, weight ladder, glyph showcases) set their own
     sizes in named classes — that is the content being demonstrated, not chrome.

   HEADINGS — two levels, mirroring the PDF specimen:
     • h2 major section  → --fs-h2, bold, Title Case, underline rule  (= section())
     • h3 sub-header     → --fs-body, BOLD CAPS                       (= about-heading())

   WEIGHT — three: 400 body · 500 wordmark · 700 bold & headings.
     (The weight-ladder demo uses all ten faces; that is content.)

   This file is DOWNSTREAM of the README and the specimen. See
   ../docs/website.runbook.md before editing content here.
   ========================================================================= */

/* Font faces are declared in fonts/web/planetaire-mono-text.css and loaded through the
   pinned CDN link in index.html. The same files are copied to site/fonts/ for the
   Pages-local /fonts/... path. The whole page is set in Planetaire Mono Text — live type. */

:root {
  /* two text colors */
  --ink: #000;
  --gray: #6e7781;
  /* structural */
  --rule: #d7dbdf;
  --surface: #f6f8fa;
  --bg: #fff;
  --hover-bg: #e8eaed; /* mode-appropriate gray behind hovered links/buttons */
  --radius: 1px; /* corner radius, used everywhere */

  /* type scale */
  --ui-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-display: 3.25rem;
  --fs-h2: 1.625rem;
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --chrome-caps-size: 0.82rem;
  --chrome-caps-letter-spacing: 0.04em;

  /* compact, readable form controls */
  --chrome-border-width: 1px;
  --focus-ring-width: 1px;
  --control-font-size: 0.9rem;
  --control-line-height: 1.35;
  --control-height: 2.1rem;
  --button-height: var(--control-height);
  --compact-button-height: 1.75rem;
  --control-min-height: var(--control-height);
  --control-padding-block: 0.24rem;
  --control-padding-inline: 0.45rem;
  --button-padding-inline: 0.65rem;
  --compact-button-padding-inline: 0.52rem;
  --tab-padding-block-start: 0.55rem;
  --tab-padding-block-end: 0.45rem;
  --tab-padding-inline: 0.32rem;
  --tab-indicator-width: 3px;
  --control-select-padding-right: 1.72rem;
  --control-select-icon-offset: 0.56rem;
  --control-select-icon-width: 0.68rem;
  --control-select-icon-height: 0.45rem;
  --hero-stack-gap: 3rem;

  /* Reading line-heights — exactly two (matches the PDF specimen):
     --lh standard prose/text samples (~1.5), --lh-tight terminal/code. */
  --lh: 1.5;
  --lh-tight: 1.4;

  /* inter-paragraph gap ≈ one line, so paragraphs read with a blank line
     between them, like the specimen */
  --space-para: 1.6rem;

  /* weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --ui-transition:
    color 360ms ease, background-color 360ms ease, border-color 360ms ease, opacity 360ms ease;
  --page-transition-duration: 100ms;
  --nav-transition-duration: 45ms;

  --max: 720px;
  --nav-max: 1180px;

  /* code/terminal demo palettes (the one exception to two-color) ---------- */
  /* pal-light (content.typ) */
  --l-red: #a8342a;
  --l-green: #1a7f37;
  --l-yellow: #7d5e00;
  --l-blue: #0550ae;
  --l-magenta: #8250df;
  --l-cyan: #0e6b7a;
  --l-comment: #6e7781;
  --l-muted: #57606a;
  /* pal-dark (content.typ) */
  --d-bg: #000;
  --d-fg: #fff;
  --d-red: #eb8f83;
  --d-green: #6dc481;
  --d-yellow: #caa94e;
  --d-blue: #96aced;
  --d-magenta: #dc8dd6;
  --d-cyan: #55bdcd;
  --d-comment: #6e7681;
  --d-brightblack: #bababa;

  /* theme-following syntax palette (defaults = light); flipped in dark mode so
     the code/terminal panels match whatever theme the page is in */
  --syn-comment: var(--l-comment);
  --syn-kw: var(--l-magenta);
  --syn-type: var(--l-cyan);
  --syn-string: var(--l-green);
  --syn-num: var(--l-cyan);
  --syn-yellow: var(--l-yellow);
  --syn-blue: var(--l-blue);
  --syn-green: var(--l-green);
  --syn-dim: var(--l-muted);
}

/* dark mode: flip the two text colors + structural tints. Demo panels keep
   their own palettes (they show the font on both backgrounds by design). */
html[data-theme="dark"] {
  --ink: #e6edf3;
  --gray: #8b949e;
  --rule: #30363d;
  --surface: #161b22;
  --bg: #0d1117;
  --hover-bg: #262c36;
  /* code/terminal syntax switches to the dark palette */
  --syn-comment: var(--d-comment);
  --syn-kw: var(--d-magenta);
  --syn-type: var(--d-cyan);
  --syn-string: var(--d-green);
  --syn-num: var(--d-cyan);
  --syn-yellow: var(--d-yellow);
  --syn-blue: var(--d-blue);
  --syn-green: var(--d-green);
  --syn-dim: var(--d-brightblack);
}
/* The planet/stars SVG is pure black line art on a transparent ground, so it
   vanishes on the dark page. Invert it (black → white) for dark mode. */
html[data-theme="dark"] .hero .planet {
  filter: invert(1);
}

* {
  box-sizing: border-box;
}
/* Anchor the rem scale to 16px so 1rem always equals the body size — otherwise
   rem-based chrome (h3 and the toggle) shrinks vs body if the browser root
   font-size isn't 16px. */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
} /* guard against side-scroll; also clips the planet's off-screen bleed box */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
}

::view-transition-old(root) {
  animation-name: page-fade-out;
}

::view-transition-new(root) {
  animation-name: page-fade-in;
}

@keyframes page-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Gentle, general transition so light/dark mode eases rather than snaps.
   Only themeable properties; placed once, globally. */
*,
*::before,
*::after {
  transition:
    var(--ui-transition),
    fill 360ms ease,
    filter 360ms ease;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}

body {
  font-family: "Planetaire Mono Text", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-body); /* same token as h3 etc., so they always match */
  line-height: var(--lh);
  font-weight: var(--fw-regular);
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  padding: 0 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--ink);
  background: transparent;
  border: var(--chrome-border-width) solid var(--gray);
  border-radius: calc(var(--radius) * 0.8);
  cursor: pointer;
  transition: var(--ui-transition);
}

input[type="checkbox"]::before {
  content: "";
  width: 0.5rem;
  height: 0.28rem;
  border-left: var(--chrome-border-width) solid currentColor;
  border-bottom: var(--chrome-border-width) solid currentColor;
  opacity: 0;
  transform: translateY(-0.08rem) rotate(-45deg) scale(0.75);
  transition: var(--ui-transition);
}

input[type="checkbox"]:checked {
  background: transparent;
}

input[type="checkbox"]:checked::before {
  opacity: 1;
  transform: translateY(-0.08rem) rotate(-45deg) scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 0 96px;
  transition: opacity var(--nav-transition-duration) ease-out;
}

html.is-page-leaving .wrap {
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .wrap {
    transition: none;
  }

  html.is-page-leaving .wrap {
    opacity: 1;
  }
}

/* ---- Type ---------------------------------------------------------------- */

/* Major section: larger, with an underline rule and generous space above
   (mirrors the specimen's section() heading). Title Case. */
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  /* gap below the underline ≈ the inter-paragraph gap, so the rule breathes */
  margin: 4.25rem 0 var(--space-para);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}
/* Sub-header: same size as body text, black, BOLD CAPS (mirrors about-heading()).
   Clear space above to read as a section break, snug to the text it introduces
   below — the traditional manuscript subheading. */
h3 {
  font-size: var(--fs-body); /* exactly body size — like the specimen's 10pt about-heading */
  font-weight: var(--fw-bold);
  text-transform: uppercase; /* no letter-spacing: the specimen heading has none */
  line-height: 1.4;
  margin: 2.3rem 0 0.7rem; /* ~one blank line above, snug below — specimen rhythm */
}
p {
  margin: 0 0 var(--space-para);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius);
  transition: var(--ui-transition);
}
/* Consistent hover everywhere: ink text + a mode-appropriate gray background. */
a:hover {
  color: var(--ink);
  background: var(--hover-bg);
}
a:focus-visible,
button:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink);
  outline-offset: 3px;
}

strong,
b {
  font-weight: var(--fw-bold);
}
em,
i {
  font-style: italic;
}

.gray,
.muted {
  color: var(--gray);
}

/* one small-gray-caps label style for every section sublabel */
.label {
  color: var(--gray);
  font-size: var(--chrome-caps-size);
  letter-spacing: var(--chrome-caps-letter-spacing);
  text-transform: uppercase;
  margin: 1.4rem 0 0.5rem;
}

/* ---- Top nav ------------------------------------------------------------- */

.site-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: flex-end;
  gap: 1.7rem;
  width: min(var(--nav-max), calc(100vw - 40px));
  margin: 0 0 2rem 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--rule);
  font-family: var(--ui-font);
}
.site-nav-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 1.7rem;
  grid-column: 2;
  justify-self: center;
}
.site-nav-tab,
.site-nav-external,
.tab-opt {
  display: inline-block;
  font-family: var(--ui-font);
  font-size: var(--chrome-caps-size);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--chrome-caps-letter-spacing);
  text-decoration: none;
  color: var(--gray);
  border-radius: 0;
  transition: var(--ui-transition);
}
.site-nav-tab,
.site-nav-external {
  padding: var(--tab-padding-block-start) var(--tab-padding-inline) var(--tab-padding-block-end);
  border-bottom: var(--tab-indicator-width) solid transparent;
  margin-bottom: -1px;
}
.tab-opt {
  padding: var(--tab-padding-block-start) var(--tab-padding-inline) var(--tab-padding-block-end);
  border-bottom: var(--tab-indicator-width) solid transparent;
  margin-bottom: -1px;
}
.site-nav-external {
  grid-column: 3;
  justify-self: end;
}
.site-nav-tab:hover,
.site-nav-external:hover,
.tab-opt:hover {
  color: var(--ink);
  background: var(--hover-bg);
}
.site-nav-tab[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---- Hero ---------------------------------------------------------------- */

/* Title cluster — a self-contained brand block echoing the PDF specimen
   cover: large wordmark and black bold lineage, both bigger than body, with
   generous vertical rhythm. Its sizes are bespoke to this cluster (like the
   cover), not part of the four-size chrome scale. */
.hero {
  text-align: center;
  margin: 0 0 6.5rem;
}
/* The planet frame bleeds wider than the 720px column on large screens (up to
   ~940px, ~30% wider, centered). On narrow screens the image keeps a minimum
   width so the planet stays legible, and the frame crops the star-filled sides
   rather than scaling the whole thing down. */
.hero .planet-frame {
  overflow: hidden;
  width: min(940px, calc(100vw - 48px));
  margin: 0 0 3.8rem 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.hero .planet {
  display: block;
  flex: 0 0 auto;
  width: max(620px, 100%); /* fill the frame, but never below 620px (then crop) */
  height: auto;
}
/* Scales down on very narrow screens so the wordmark never overflows. */
.hero .title {
  font-size: clamp(2rem, 11vw, var(--fs-display));
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: 1.05;
}
.hero .lineage {
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin: var(--hero-stack-gap) 0;
}
.hero-intro {
  max-width: 40ch;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.55;
  text-align: center;
}
.hero-intro p {
  margin: 0;
}
.hero-intro p + p {
  margin-top: 1.3rem;
}

.about-intro {
  margin: 0 0 2.4rem;
}

.about-intro + h2 {
  margin-top: 0;
}

/* ---- Buttons ------------------------------------------------------------- */

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--hero-stack-gap) 0 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  font-family: var(--ui-font);
  font-size: var(--chrome-caps-size);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--chrome-caps-letter-spacing);
  text-decoration: none;
  line-height: var(--control-line-height);
  padding: 0 var(--button-padding-inline);
  border: var(--chrome-border-width) solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--bg);
  transition: var(--ui-transition);
}
.btn:hover {
  background: var(--hover-bg);
  color: var(--ink);
}

@media (max-width: 620px) {
  :root {
    --hero-stack-gap: 2.2rem;
  }

  .hero .planet-frame {
    margin-bottom: 2.2rem;
  }
}

/* ---- Main tabs ----------------------------------------------------------- */

.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.7rem;
  margin: -2rem 0 4.25rem;
  border-bottom: 1px solid var(--rule);
}
.tab-opt {
  border: 0;
  border-bottom: var(--tab-indicator-width) solid transparent;
  background: transparent;
  cursor: pointer;
}
.tab-opt[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.tab-content {
  transition:
    opacity var(--page-transition-duration) ease,
    transform var(--page-transition-duration) ease;
}
.tab-content.is-transitioning {
  opacity: 0;
  transform: translateY(0.16rem);
}
.tab-panel[hidden] {
  display: none;
}
.tab-panel > h2:first-child {
  margin-top: 0;
}

/* ---- Lists & tables ------------------------------------------------------ */

ul {
  padding-left: 1.4rem;
}
li {
  margin: 0.3rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0;
  font-size: var(--fs-body);
}
th,
td {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
th {
  font-weight: var(--fw-bold);
  background: var(--surface);
}
.download-file {
  display: block;
  white-space: nowrap;
}
.download-file + .download-file {
  margin-top: 0.2rem;
}
@media (max-width: 620px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th,
  td {
    min-width: 8rem;
  }
}

/* spec sheet: two-column label/value grid */
.specgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin: 1.2rem 0;
}
.specgroup + .specgroup {
  margin-top: 1.2rem;
}
.specgroup h4 {
  color: var(--gray);
  font-size: var(--chrome-caps-size);
  letter-spacing: var(--chrome-caps-letter-spacing);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin: 0 0 0.65rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}
.specrow {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.12rem 0;
}
.specrow .k {
  color: var(--gray);
}
.specrow .v {
  color: var(--ink);
  text-align: right;
}
@media (max-width: 620px) {
  .specgrid {
    grid-template-columns: 1fr;
  }
}

/* ---- Code, inline & block ------------------------------------------------ */

code {
  font-family: inherit;
}
:not(pre) > code {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.05em 0.35em;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
pre {
  margin: 1.1rem 0;
  padding: 1rem 0.8rem;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
}
pre.code {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink);
}

/* Thin, subtle scrollbars on scrollable code/QA blocks. A translucent gray
   thumb on a transparent track reads correctly on both light surfaces and the
   always-dark code panels — no bright OS scrollbar in dark mode. */
pre,
.cellrow,
table {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(128, 128, 128, 0.45) transparent;
}
pre::-webkit-scrollbar,
.cellrow::-webkit-scrollbar,
table::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}
pre::-webkit-scrollbar-track,
.cellrow::-webkit-scrollbar-track,
table::-webkit-scrollbar-track {
  background: transparent;
}
pre::-webkit-scrollbar-thumb,
.cellrow::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.45);
  border-radius: 7px;
}
pre:hover::-webkit-scrollbar-thumb,
.cellrow:hover::-webkit-scrollbar-thumb,
table:hover::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.7);
}

/* Code/terminal panel — follows the page theme. Background and text track the
   theme; the syntax colors switch via the --syn-* vars (light ↔ dark). */
.panel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 1rem 1.2rem;
  transition: var(--ui-transition);
}
.panel .cm {
  color: var(--syn-comment);
}
.panel .kw {
  color: var(--syn-kw);
  font-weight: var(--fw-bold);
}
.panel .ty {
  color: var(--syn-type);
}
.panel .st {
  color: var(--syn-string);
}
.panel .nu {
  color: var(--syn-num);
}
.panel .y {
  color: var(--syn-yellow);
}
.panel .b {
  color: var(--syn-blue);
  font-weight: var(--fw-bold);
}
.panel .g {
  color: var(--syn-green);
  font-weight: var(--fw-bold);
}
.panel .gray {
  color: var(--syn-dim);
}

/* ---- Specimen demos (sizes here ARE the content) ------------------------- */

.text-sample-lede {
  font-size: 1.25rem;
}

.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}
.fs-italic {
  font-style: italic;
}

/* size waterfall — explicit px per row is the whole point */
.waterfall .row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  margin: 0.15rem 0;
}
.waterfall .sz {
  color: var(--gray);
  font-size: 0.7rem;
  text-align: right;
}
.waterfall .name {
  line-height: 1.05;
  white-space: nowrap;
}
.wf-8 {
  font-size: 8px;
}
.wf-9 {
  font-size: 9px;
}
.wf-10 {
  font-size: 10px;
}
.wf-11 {
  font-size: 11px;
}
.wf-12 {
  font-size: 12px;
}
.wf-14 {
  font-size: 14px;
}
.wf-16 {
  font-size: 16px;
}
.wf-20 {
  font-size: 20px;
}
.wf-24 {
  font-size: 24px;
}
.wf-30 {
  font-size: 30px;
}
.wf-36 {
  font-size: 36px;
}
.wf-44 {
  font-size: 44px;
}
.label-gap-sm {
  margin-top: 1.2rem;
}
.label-gap-lg {
  margin-top: 1.5rem;
}
.display-legibility {
  font-size: 38px;
}

/* weight ladder — one sample size, ten weights */
.ladder .row {
  margin: 0.6rem 0 0.9rem;
}
.ladder .sample,
.ladder .digits {
  font-size: var(--fs-body);
  line-height: var(--lh);
}

/* legibility disambiguation */
.disambig {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  align-items: center;
  margin: 0.4rem 0;
}
.disambig .glyphs {
  font-size: var(--fs-glyph);
  letter-spacing: 0.1em;
}
.disambig .desc {
  color: var(--gray);
  font-size: var(--fs-small);
}

/* dotted-zero, two columns */
.cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1rem 0;
}
.cols2 .h {
  font-weight: var(--fw-bold);
  color: var(--gray);
  font-size: var(--fs-small);
}
.bigzero {
  font-size: var(--fs-glyph-lg);
}
.medzero {
  font-size: var(--fs-glyph);
}
.zero-demo {
  margin: 0.4rem 0;
}
.zero-context {
  font-size: 1rem;
}
.ss01 {
  font-feature-settings: "ss01" 1;
}
@media (max-width: 620px) {
  .cols2 {
    grid-template-columns: 1fr;
  }
}

/* large glyph rows (character set, brackets, operators) */
.glyphrow {
  font-size: var(--fs-glyph);
  letter-spacing: 0.18em;
  line-height: 1.7;
  word-break: break-word;
}
.glyphrow.sm {
  font-size: var(--fs-glyph-sm);
}

/* two showcase glyph sizes, used only by the demos above */
:root {
  --fs-glyph: 1.5rem;
  --fs-glyph-sm: 1.15rem;
  --fs-glyph-lg: 2.25rem;
}

/* monospace-grid QA proof: advance-width cells with red edge rules */
.cellrow {
  white-space: nowrap;
  overflow-x: auto;
  margin: 0.3rem 0;
  padding-bottom: 2px;
}
/* Each glyph sits in its own advance-width box with red edge rules, separated
   by a small gap (like the specimen's h(5pt) join) so the rules never double up. */
.cell {
  display: inline-block;
  font-size: var(--fs-glyph);
  border-left: 1px solid #d83933;
  border-right: 1px solid #d83933;
  padding: 1px 0;
  margin-right: 6px;
}

/* ---- Misc ---------------------------------------------------------------- */

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--gray);
  font-family: var(--ui-font);
  font-size: var(--fs-small);
  text-align: center;
}
footer a,
footer a {
  color: inherit;
  background: transparent;
  text-decoration: none;
  transition: var(--ui-transition);
}
footer a:hover {
  color: var(--ink);
  background: transparent;
  text-decoration: none;
}

/* ---- Theme switch (centered, below the CTAs) ----------------------------- */
/* A prominent Light/Dark control — seeing the font on both backgrounds is a
   primary way to evaluate it, so it lives in the hero, not tucked in a corner. */

/* Light/Dark control: two equal-width segments. The CURRENT theme is the
   emphasized (filled) segment; the other is muted, so the fill alone shows the
   toggle position. */
.theme-switch {
  display: inline-flex;
  justify-content: center;
  margin: var(--hero-stack-gap) 0 0;
  font-family: var(--ui-font);
}
.theme-switch .ts-group {
  display: inline-flex;
  min-height: var(--button-height);
  border: var(--chrome-border-width) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.theme-switch .ts-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-font);
  font-weight: var(--fw-bold);
  font-size: var(--chrome-caps-size);
  line-height: var(--control-line-height);
  text-transform: uppercase;
  letter-spacing: var(--chrome-caps-letter-spacing);
  min-width: 0;
  text-align: center;
  padding: 0 var(--button-padding-inline);
  cursor: pointer;
  background: var(--bg);
  color: var(--gray);
  border: none;
  transition: var(--ui-transition);
}
.theme-switch .ts-opt + .ts-opt {
  border-left: var(--chrome-border-width) solid var(--ink);
}
.theme-switch .ts-opt[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}
.theme-switch .ts-opt:focus-visible {
  outline-color: var(--bg);
  outline-offset: -4px;
}
.theme-switch .ts-opt:not([aria-pressed="true"]):focus-visible {
  outline-color: var(--ink);
}
/* Inactive side hovers to the current mode's dim hover color (symmetric — both
   sides match the page theme, like every other hover). */
.theme-switch .ts-opt:hover:not([aria-pressed="true"]) {
  background: var(--hover-bg);
  color: var(--ink);
}