/*
 * covert-cloud.css — Covert Cloud design tokens, base styles, core components.
 * Single source of design tokens. Link it; use var(--*). Token names are stable.
 *
 * RAMPS (--color-accent-100…900, --color-neutral-100…900)
 * Built in OKLCH (perceptual lightness L, chroma C, hue H), then converted to sRGB.
 *
 * Accent: hue is fixed at the hue of Signal (H ≈ 0.549 rad / 31°); both given
 * anchors already share it. Anchors are exact: 500 = #EC3013 (L .611),
 * 700 = #AE1800 (L .481). 600 is the L midpoint of the anchors. 400→100 step
 * lightness up (.695 .78 .87 .94) and chroma down (.185 .125 .075 .03) so tints
 * stay red, not pink. 800/900 step down (L .40 .32, C .150 .115).
 *
 * Neutral: warm grey, hue held near Ink, chroma ≈ .004. Anchors are exact:
 * 100 = Surface #EAE9E9, 900 = Ink #201E1D. 200→800 step L down
 * (.875 .80 .71 .615 .52 .43 .335), roughly even in perceived lightness.
 *
 * CONTRAST on Paper #F3F2F2 (WCAG 2.x), checked when generated:
 *   accent-600 4.92   accent-700 6.41   accent-800 8.88   accent-900 11.94
 *   neutral-600 4.97  neutral-700 7.30  neutral-800 10.77 neutral-900 14.86
 *   accent-500 (Signal) 3.76 — fails 4.5:1; never use for text or links.
 *   Paper on Signal 3.76, Ink on Signal 3.95 — both fail 4.5:1.
 * RULE: text on or in Signal uses Signal 700 or darker unless it is large text
 *   (24px+, or 18.66px+ bold, needs 3:1). Signal itself is for non-text: bars,
 *   rules, the mark. Paper on accent-700/800/900: 6.41 / 8.88 / 11.94.
 * Text roles: use accent-700+ and neutral-600+ for text on Paper/Surface.
 *
 * RULES: zero border radius everywhere. One accent only. Flush-left.
 */

/* Archivo, OFL 1.1 (see fonts/OFL.txt). Latin subset. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/brand/fonts/archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/brand/fonts/archivo-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/brand/fonts/archivo-800.woff2") format("woff2");
}

:root {
  /* Colour: named */
  --color-accent: #EC3013;   /* Signal */
  --color-text: #201E1D;     /* Ink */
  --color-surface: #EAE9E9;  /* panels */
  --color-bg: #F3F2F2;       /* Paper */
  --color-divider: #201E1D;  /* ink rules */

  /* Colour: Signal ramp (500 and 700 are fixed brand values) */
  --color-accent-100: #FFE4DF;
  --color-accent-200: #FFC3B6;
  --color-accent-300: #FD9885;
  --color-accent-400: #FA674F;
  --color-accent-500: #EC3013;
  --color-accent-600: #CC2409;
  --color-accent-700: #AE1800;
  --color-accent-800: #861404;
  --color-accent-900: #601005;

  /* Colour: neutral ramp (100 = Surface, 900 = Ink) */
  --color-neutral-100: #EAE9E9;
  --color-neutral-200: #D8D5D3;
  --color-neutral-300: #BFBDBB;
  --color-neutral-400: #A3A19F;
  --color-neutral-500: #868482;
  --color-neutral-600: #6A6866;
  --color-neutral-700: #514F4D;
  --color-neutral-800: #383634;
  --color-neutral-900: #201E1D;

  /* Spacing: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape and depth */
  --radius: 0;
  --shadow-md: 4px 4px 0 var(--color-neutral-300);

  /* Type */
  --font-sans: "Archivo", Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Zero radius, no exceptions */
*, *::before, *::after {
  border-radius: var(--radius);
  box-sizing: border-box;
}

/* Base */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 var(--space-4);
  font-weight: 800;
  line-height: 1;
}
h1 { font-size: 48px; letter-spacing: -0.035em; }
h2 { font-size: 32px; letter-spacing: -0.03em; }
h3 { font-size: 20px; letter-spacing: -0.02em; }

p { margin: 0 0 var(--space-4); }
strong { font-weight: 600; }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }

:focus-visible {
  outline: 2px solid var(--color-accent-700);
  outline-offset: 2px;
}

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
code {
  background: var(--color-surface);
  padding: 1px var(--space-1);
}
pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-left: 2px solid var(--color-divider);
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; font-size: 1em; }

hr {
  height: 0;
  margin: var(--space-6) 0;
  border: 0;
  border-top: 2px solid var(--color-divider);
}

/* Nav */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 2px solid var(--color-divider);
}
.nav a:not(.btn) { color: var(--color-text); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--color-accent-700); }
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Buttons: labels flush left */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Primary: Signal 700 fill, Paper label, 4.5:1+ in every state.
   default 6.41, hover (800) 8.88, active (900) 11.94, focus 6.41 + 2px ring. */
.btn-primary {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: var(--color-bg);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-800);
  border-color: var(--color-accent-800);
  color: var(--color-bg);
}
.btn-primary:active:not(:disabled) {
  background: var(--color-accent-900);
  border-color: var(--color-accent-900);
  color: var(--color-bg);
}
.btn-primary:focus-visible {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: var(--color-bg);
  outline: 2px solid var(--color-accent-700);
  outline-offset: 2px;
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-divider);
  color: var(--color-text);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Bar: black-bar hide/reveal. Text matches the fill until hover or focus.
   Add tabindex="0" for keyboard reveal. A revealed Signal bar moves to
   accent-700 so the text carries 6.41:1 (Signal stays for the hidden bar). */
.bar {
  display: inline-block;
  padding: 0 0.3em;
  background: var(--color-text);
  color: var(--color-text);
  white-space: nowrap;
  cursor: default;
}
.bar:hover, .bar:focus-visible, .bar.is-revealed { color: var(--color-bg); }
.bar-signal { background: var(--color-accent); color: var(--color-accent); }
.bar-signal:hover, .bar-signal:focus-visible, .bar-signal.is-revealed {
  background: var(--color-accent-700);
  color: var(--color-bg);
}

/* Form input */
.label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 13px;
  font-weight: 600;
}
.input {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 2px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  line-height: 1.25;
  text-align: left;
}
.input::placeholder { color: var(--color-neutral-600); opacity: 1; }
.input:hover { background: var(--color-surface); }
.input:focus { background: var(--color-bg); outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.input:disabled { opacity: 0.4; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-accent-700); }

/* Media and text helpers (ported from the original sheet, on our tokens) */
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { margin-top: var(--space-1); font-size: 12px; color: var(--color-neutral-700); }
.text-muted { color: var(--color-neutral-700); }
.grayscale { filter: grayscale(1) contrast(1.08); }
::selection { background: var(--color-accent-200); color: var(--color-text); }
.hr { height: 0; margin: var(--space-6) 0; border: 0; border-top: 2px solid var(--color-divider); }
.nav a[aria-current="page"] { color: var(--color-accent-700); }

/* Card */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
}
.card-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); }
.card-title { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.card-body { flex: 1; margin: 0; font-size: 14px; }
.card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--color-neutral-700); }
.elev-md { box-shadow: var(--shadow-md); }

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 2px solid var(--color-accent-700); color: var(--color-accent-700); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  padding: var(--space-2);
  border-bottom: 2px solid var(--color-divider);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); text-align: left; }
.table tbody tr:hover { background: var(--color-surface); }

/* Dialog: actions flush left */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
}
.dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(440px, 100%);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.dialog-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.dialog-body { font-size: 14px; }
.dialog-actions { display: flex; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-2); }

/* ==========================================================================
   Page components (design/pages). No inline styles in pages; add here.
   ========================================================================== */

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-2); color: var(--color-bg); }

/* Page container and sections */
.page { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }
.band { padding: var(--space-7) 0; border-bottom: 2px solid var(--color-divider); }
.band.band-flush { padding: 0; }
.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 2px solid var(--color-divider);
}
.band-head h2 { margin: 0; margin-right: auto; }

/* Grid: cells separated by 2px ink rules (the gap shows the rule colour).
   Use an even number of cells in .grid-2. */
.grid-2, .swatches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--color-divider);
}
.cell { padding: var(--space-6) 0; background: var(--color-bg); }
.cell > :last-child { margin-bottom: 0; }
.cell-ink { background: var(--color-text); color: var(--color-bg); padding-left: var(--space-4); padding-right: var(--space-4); }
.cell-center { display: flex; flex-direction: column; justify-content: center; }
.cell-end { display: flex; flex-direction: column; justify-content: flex-end; }

/* Text roles */
.kicker {
  margin: 0 0 var(--space-4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.display {
  margin: 0;
  font-size: clamp(40px, 11vw, 72px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.display .bar { padding: 0 0.12em; line-height: 1.08; }
.lead { max-width: 44ch; margin: 0 0 var(--space-5); font-size: 18px; text-wrap: pretty; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
.mono { font-family: var(--font-mono); }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Rows: ruled list. Links fill the row. */
.rows { margin: 0 0 var(--space-4); padding: 0; list-style: none; border-top: 2px solid var(--color-divider); }
.rows li { padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-weight: 600; }
.rows a {
  display: flex;
  gap: var(--space-2);
  margin: -10px 0;
  padding: 10px 0;
  color: var(--color-text);
  text-decoration: none;
}
.rows a::after { content: "\2192"; }
.rows a:hover { color: var(--color-accent-700); }
.rows a[aria-current="page"] { color: var(--color-accent-700); }

/* Dark panel */
.panel-ink { padding: var(--space-6) var(--space-4); background: var(--color-text); color: var(--color-bg); }
.cell-ink .kicker, .panel-ink .kicker { color: var(--color-accent-400); }
.panel-ink a { color: var(--color-bg); }
.panel-ink a:hover { color: var(--color-accent-300); }
.panel-ink .btn-secondary { border-color: var(--color-bg); color: var(--color-bg); }
.panel-ink .btn-secondary:hover:not(:disabled) { background: var(--color-bg); color: var(--color-text); }
.panel-ink .text-muted { color: var(--color-neutral-300); }
.panel-ink :focus-visible { outline-color: var(--color-accent-300); }

/* Site header and footer (shared by every page) */
.mark-32 { width: auto; height: 32px; }
.site-footer { padding: var(--space-6) 0 var(--space-7); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { margin: var(--space-2) 0 0; max-width: 36ch; font-size: 14px; color: var(--color-neutral-700); }
.footer-title { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.footer-list { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.footer-list a { display: inline-block; padding: var(--space-1) 0; color: var(--color-text); }
.footer-list a:hover { color: var(--color-accent-700); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 12px;
  color: var(--color-neutral-700);
}

/* Docs */
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 2px solid var(--color-divider); }
.docs-main { min-width: 0; padding: var(--space-6) 0; }
.docs-nav { order: 2; padding: var(--space-6) 0; border-top: 2px solid var(--color-divider); }
.docs-nav-title { margin: var(--space-5) 0 var(--space-2); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.docs-nav-title:first-child { margin-top: 0; }
.docs-nav-list { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.docs-nav-list a {
  display: block;
  padding: 6px var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}
.docs-nav-list a:hover { color: var(--color-accent-700); }
.docs-nav-list a[aria-current="page"] { font-weight: 600; color: var(--color-accent-700); box-shadow: inset 2px 0 0 var(--color-accent); }
.crumbs { display: flex; flex-wrap: wrap; margin: 0 0 var(--space-5); padding: 0; list-style: none; font-size: 13px; }
.crumbs li + li::before { content: "/"; margin: 0 var(--space-2); color: var(--color-neutral-600); }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-5); font-size: 13px; color: var(--color-neutral-700); }
.toc { margin: 0 0 var(--space-6); padding: var(--space-4); background: var(--color-surface); border-left: 2px solid var(--color-divider); }
.toc ol { margin: 0; padding-left: var(--space-5); font-size: 14px; }

/* Prose: article body */
.prose { max-width: 72ch; }
.prose h2 { margin: var(--space-7) 0 var(--space-4); font-size: 28px; }
.prose h3 { margin: var(--space-6) 0 var(--space-3); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-1); }
.prose code { overflow-wrap: anywhere; }
.table-wrap { margin: 0 0 var(--space-4); overflow-x: auto; }
.table td:first-child, .table th:first-child { padding-left: 0; }
.table td { vertical-align: top; }

/* Code block with label */
.code { margin: 0 0 var(--space-4); }
.code figcaption {
  margin: 0;
  padding: var(--space-1) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 12px;
}
.code pre { margin: 0; border-left: 0; }

/* Callout */
.callout { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--color-surface); border-left: 2px solid var(--color-divider); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 var(--space-1); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.callout-alert { border-left-color: var(--color-accent); }
.callout-alert .callout-title { color: var(--color-accent-700); }

/* Previous / next */
.pager { max-width: 72ch; display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: var(--space-7); background: var(--color-divider); border-top: 2px solid var(--color-divider); }
.pager a { display: block; padding: var(--space-4) 0; background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.pager a:hover .pager-title { color: var(--color-accent-700); }
.pager > :only-child { grid-column: 1 / -1; }
.pager-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.pager-title { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

/* Brand page: mark stages, sizes, lockups */
.stage { display: grid; place-items: center; min-height: 160px; padding: var(--space-5); background: var(--color-bg); }
.stage img { height: auto; }
.stage-lg { min-height: 320px; }
.stage-lg img { width: min(320px, 100%); }
.stage-ink { background: var(--color-text); }
.stage-surface { background: var(--color-surface); }
.stage-stack { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--color-divider); }
.stage-stack .stage img { width: 120px; }
.size-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5); margin-top: var(--space-5); }
.size-row figure { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.size-row figcaption { margin: 0; }
.lockup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.lockup-text { font-size: clamp(24px, 7vw, 34px); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.lockup-ink { padding: var(--space-4); background: var(--color-text); color: var(--color-bg); }
.lockup-ink .lockup-text { font-size: 22px; letter-spacing: -0.02em; }
.lockup-ink img { height: 40px; }
.placements { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.tab-sample { display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-3); background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-bottom: 0; font-size: 12px; }
.icon-tile { display: grid; place-items: center; width: 60px; height: 60px; background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-divider); }
.icon-tile-ink { background: var(--color-text); box-shadow: none; }
.wordmark { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 var(--space-5); font-size: clamp(32px, 9.5vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
.wordmark-sm { gap: 6px; margin: 0; font-size: 28px; letter-spacing: -0.03em; }

/* Brand page: files, swatches, ramps, type */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: var(--space-5); }
.file-link { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.file-link:hover { color: var(--color-accent-700); }
.file-link strong { font-size: 14px; }
.file-use { font-size: 12px; color: var(--color-neutral-700); }
.swatches { grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--color-divider); }
.swatch { background: var(--color-bg); }
.swatch-chip { min-height: 140px; }
.swatch-signal { background: var(--color-accent); }
.swatch-ink { background: var(--color-text); }
.swatch-surface { background: var(--color-surface); }
.swatch-paper { background: var(--color-bg); }
.swatch figcaption { display: flex; flex-direction: column; margin: 0; padding: var(--space-3) var(--space-3) var(--space-3) 0; font-size: 13px; color: var(--color-text); }
.swatch:nth-child(even) figcaption { padding-left: var(--space-3); }
.swatch figcaption strong { font-size: 18px; font-weight: 800; }
.ramp { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); }
.ramp-label { grid-column: 1 / -1; padding: var(--space-3) 0; font-size: 13px; font-weight: 600; }
.ramp-step { display: flex; align-items: flex-end; min-height: 44px; padding: 4px; font-size: 11px; font-weight: 600; }
.ramp-accent > :nth-child(7), .ramp-accent > :nth-child(8), .ramp-accent > :nth-child(9), .ramp-accent > :nth-child(10) { color: var(--color-bg); }
.on-signal { padding: 0 var(--space-1); background: var(--color-accent-700); color: var(--color-bg); }
.ramp-accent > :nth-child(2) { background: var(--color-accent-100); }
.ramp-accent > :nth-child(3) { background: var(--color-accent-200); }
.ramp-accent > :nth-child(4) { background: var(--color-accent-300); }
.ramp-accent > :nth-child(5) { background: var(--color-accent-400); }
.ramp-accent > :nth-child(6) { background: var(--color-accent-500); }
.ramp-accent > :nth-child(7) { background: var(--color-accent-600); }
.ramp-accent > :nth-child(8) { background: var(--color-accent-700); }
.ramp-accent > :nth-child(9) { background: var(--color-accent-800); }
.ramp-accent > :nth-child(10) { background: var(--color-accent-900); }
.ramp-neutral > :nth-child(2) { background: var(--color-neutral-100); }
.ramp-neutral > :nth-child(3) { background: var(--color-neutral-200); }
.ramp-neutral > :nth-child(4) { background: var(--color-neutral-300); }
.ramp-neutral > :nth-child(5) { background: var(--color-neutral-400); }
.ramp-neutral > :nth-child(6) { background: var(--color-neutral-500); }
.ramp-neutral > :nth-child(7) { background: var(--color-neutral-600); }
.ramp-neutral > :nth-child(8) { background: var(--color-neutral-700); }
.ramp-neutral > :nth-child(9) { background: var(--color-neutral-800); }
.ramp-neutral > :nth-child(10) { background: var(--color-neutral-900); }
.ramp > :nth-child(n+7) { color: var(--color-bg); }
.specimen { margin: 0 0 var(--space-4); font-size: 96px; font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; }
.spec-list { display: grid; grid-template-columns: 90px 1fr; gap: 10px var(--space-3); margin: 0; padding-top: var(--space-4); border-top: 2px solid var(--color-divider); font-size: 14px; }
.spec-list dt { color: var(--color-neutral-700); }
.spec-list dd { margin: 0; }

@media (max-width: 599px) {
  .nav-brand { flex-basis: 100%; }
}

@media (min-width: 600px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager a + a { padding-left: var(--space-5); }
  .swatches { grid-template-columns: repeat(4, 1fr); }
  .swatch:nth-child(odd) figcaption { padding-left: 0; }
  .swatch + .swatch figcaption { padding-left: var(--space-3); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .stage-stack .stage { min-height: 120px; }
}

@media (min-width: 768px) {
  .page { padding: 0 var(--space-6); }
  .band { padding: var(--space-8) 0; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .cell { padding: var(--space-7); }
  .grid-2 > .cell:nth-child(odd) { padding-left: 0; }
  .grid-2 > .cell-ink:nth-child(odd) { padding-left: var(--space-7); }
  .panel-ink { padding: var(--space-7); }
  .ramp { grid-template-columns: 110px repeat(9, minmax(0, 1fr)); }
  .ramp-label { grid-column: auto; padding: var(--space-3) 0; }
  .ramp-step { min-height: 44px; padding: 6px 8px; }
}

@media (min-width: 900px) {
  .docs-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .docs-nav { order: 0; padding: var(--space-7) var(--space-5) var(--space-7) 0; border-top: 0; border-right: 2px solid var(--color-divider); }
  .docs-main { padding: var(--space-7) 0 var(--space-7) var(--space-7); }
}