/* =============================================================
   Obney.ai Design System — Catalog UI
   Layout + catalog-specific components, layered on the canonical
   tokens in colors_and_type.css. No build step; pure static CSS.
   Deployable under any base path (e.g. obney.ai/design).
   ============================================================= */

:root {
  --sidebar-w: 276px;
  --content-max: 1120px;
  --topbar-h: 60px;
  --catalog-radius: var(--radius-lg);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -------------------------------------------------------------
   App shell: fixed dark sidebar + scrolling content
   ------------------------------------------------------------- */
.app { min-height: 100dvh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--midnight-900);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--midnight-700);
  z-index: 40;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar__brand img { height: 22px; width: auto; display: block; }
.sidebar__brand .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ocean);
  border: 1px solid rgba(104, 228, 233, 0.4);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  line-height: 1;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--midnight-600) transparent;
}
.nav-group { margin-bottom: 18px; }
.nav-group__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--midnight-400);
  padding: 0 12px;
  margin: 0 0 8px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.nav-link:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.nav-link.is-active {
  color: var(--color-ocean);
  background: rgba(104, 228, 233, 0.1);
  border-left-color: var(--color-ocean);
}
.nav-link .marker {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--midnight-400);
}
.nav-link.is-active .marker { color: var(--color-ocean); }

.sidebar__foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar__foot a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.sidebar__foot a:hover { color: var(--color-ocean); text-decoration: none; }
.sidebar__foot a .arrow { color: var(--midnight-400); }
.sidebar__version {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--midnight-500);
  margin-top: 4px;
}

/* -------------------------------------------------------------
   Mobile top bar (hidden on desktop)
   ------------------------------------------------------------- */
.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--color-cream) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar img { height: 20px; width: auto; }
.topbar__menu {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--midnight-800);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
}

/* -------------------------------------------------------------
   Main content
   ------------------------------------------------------------- */
.main {
  margin-left: var(--sidebar-w);
  min-width: 0;
}
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

/* -------------------------------------------------------------
   Hero
   ------------------------------------------------------------- */
.hero { padding: clamp(56px, 9vw, 104px) 0 56px; }
.hero .eyebrow,
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-link);
  margin: 0;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 88px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--midnight-800);
  margin: 16px 0 0;
}
.hero h1 .accent { color: var(--ocean-700); }
.hero .lede {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: var(--lh-base);
  color: var(--fg-2);
  max-width: 64ch;
  margin: 20px 0 0;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--border-strong);
}
.statbar .stat {
  padding: 20px 24px 4px 0;
  border-right: 1px solid var(--border);
}
.statbar .stat:last-child { border-right: none; padding-right: 0; }
.stat .num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--midnight-800);
  font-variant-numeric: tabular-nums;
}
.stat .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 10px;
}

/* -------------------------------------------------------------
   Sections
   ------------------------------------------------------------- */
.section {
  padding: 56px 0;
  scroll-margin-top: 28px;
  border-top: 1px solid var(--border);
}
.section__head { max-width: 70ch; margin-bottom: 32px; }
.section__head h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--midnight-800);
  margin: 12px 0 0;
}
.section__head p {
  font-size: 17px;
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 14px 0 0;
}

.subhead {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.subhead:first-of-type { margin-top: 0; }

/* -------------------------------------------------------------
   Panels & generic grid
   ------------------------------------------------------------- */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--catalog-radius);
  padding: 24px;
}
.panel--flush { padding: 0; overflow: hidden; }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* -------------------------------------------------------------
   Copy-on-click affordance (tokens, swatches)
   ------------------------------------------------------------- */
[data-copy] { cursor: copy; }
.copyable {
  position: relative;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.copyable::after {
  content: "copied";
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  background: var(--midnight-800);
  color: var(--color-white);
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.copyable.just-copied::after { opacity: 1; }

/* -------------------------------------------------------------
   Color: scales + swatches
   ------------------------------------------------------------- */
.pairing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pair-tile {
  border-radius: var(--catalog-radius);
  padding: 28px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pair-tile .glyph { font-family: var(--font-display); font-size: 56px; line-height: 1; }
.pair-tile .meta { display: flex; flex-direction: column; gap: 4px; }
.pair-tile .meta .nm { font-weight: var(--fw-semibold); font-size: 15px; }
.pair-tile .meta .hx { font-family: var(--font-mono); font-size: 12px; opacity: 0.72; }

.scale {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-radius: var(--catalog-radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.scale .step {
  height: 88px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  cursor: copy;
}
.scale .step .num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
}
.scale__legend {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 6px;
}
.scale__legend .hx {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  text-align: center;
  letter-spacing: -0.02em;
}

.swatch {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  cursor: copy;
}
.swatch .chip { height: 96px; }
.swatch .body { padding: 12px 14px; }
.swatch .body .nm { font-weight: var(--fw-semibold); font-size: 14px; }
.swatch .body .hx { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); margin-top: 3px; }
.swatch .body .role { font-size: 12.5px; color: var(--fg-2); margin-top: 6px; line-height: 1.4; }

/* token rows (semantic) */
.token-table {
  display: flex;
  flex-direction: column;
}
.token-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid var(--border);
  cursor: copy;
}
.token-row:first-child { border-top: none; }
.token-row .dot {
  width: 22px; height: 22px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(20, 44, 55, 0.12);
}
.token-row .name { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); }
.token-row .desc { font-size: 13px; color: var(--fg-2); }
.token-row .val { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); justify-self: end; }

/* -------------------------------------------------------------
   Typography specimens
   ------------------------------------------------------------- */
.type-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.type-row:first-child { border-top: none; }
.type-row .spec {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg-3);
}
.type-row .spec strong { color: var(--fg-1); font-weight: 600; display: block; font-size: 12.5px; }
.type-row .sample { color: var(--midnight-800); min-width: 0; overflow-wrap: break-word; }

.font-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.font-card .big { line-height: 1; color: var(--midnight-800); }
.font-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.font-card .role { font-size: 14px; color: var(--fg-2); }
.font-card .name { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }

/* -------------------------------------------------------------
   Spacing / radii / shadows / motion
   ------------------------------------------------------------- */
.space-row {
  display: grid;
  grid-template-columns: 84px 1fr 64px;
  align-items: center;
  gap: 16px;
  padding: 7px 0;
}
.space-row .tok { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.space-row .bar { height: 14px; background: var(--ocean-400); border-radius: 3px; }
.space-row .px { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); text-align: right; }

.radius-sample, .shadow-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.radius-sample .box {
  width: 100%;
  height: 76px;
  background: var(--ocean-100);
  border: 1.5px solid var(--ocean-400);
}
.shadow-sample .box {
  width: 100%;
  height: 76px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
}
.radius-sample .cap, .shadow-sample .cap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.radius-sample .cap strong, .shadow-sample .cap strong { color: var(--fg-1); display: block; font-size: 12px; font-weight: 600; }

.motion-grid {
  display: grid;
  grid-template-columns: 120px 1fr 130px;
  gap: 12px 18px;
  align-items: center;
}
.motion-grid .tok { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); }
.motion-grid .track { height: 8px; background: var(--midnight-100); border-radius: var(--radius-pill); overflow: hidden; }
.motion-grid .track .fill { height: 100%; background: var(--midnight-800); border-radius: var(--radius-pill); }
.motion-grid .use { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); text-align: right; }

/* -------------------------------------------------------------
   Components showcase
   ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill); padding: 12px 22px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
  font-size: 15px; line-height: 1; white-space: nowrap;
}
.btn-primary { background: var(--midnight-800); color: #fff; }
.btn-primary:hover { background: var(--midnight-700); }
.btn-accent { background: var(--color-ocean); color: var(--midnight-800); }
.btn-accent:hover { background: var(--ocean-500); }
.btn-secondary { background: #fff; color: var(--midnight-800); border-color: var(--midnight-800); }
.btn-secondary:hover { background: var(--midnight-800); color: #fff; }
.btn-ghost { background: transparent; color: var(--midnight-800); }
.btn-ghost:hover { background: var(--midnight-100); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn--focus { box-shadow: var(--shadow-focus); }

.label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill); line-height: 1;
}
.label .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

.spec-card {
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); background: #fff;
}
.spec-card--dark { background: var(--midnight-800); color: #fff; border: none; }
.spec-card--accent { background: var(--ocean-100); border-color: var(--ocean-200); }
.spec-card .kicker {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; opacity: 0.7;
}
.spec-card h4 { font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.spec-card p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.85; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-2); font-weight: 500;
}
.input {
  font-family: var(--font-sans); font-size: 15px; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  background: #fff; color: var(--midnight-800); outline: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.input::placeholder { color: var(--midnight-300); }
.input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.input--focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.input--error { border-color: var(--status-error); box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.18); }
.field .helper { font-size: 12.5px; color: var(--fg-3); }
.field .helper--error { color: #A1322D; }

.row-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.caption {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3);
  margin-top: 16px; line-height: 1.5;
}

/* -------------------------------------------------------------
   Iconography
   ------------------------------------------------------------- */
.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px 12px; }
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.icon-cell svg { width: 24px; height: 24px; color: var(--midnight-800); stroke-width: 1.75; }
.icon-cell span { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-3); letter-spacing: 0.02em; }

/* -------------------------------------------------------------
   Logos
   ------------------------------------------------------------- */
.logo-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  min-height: 132px; padding: 24px; background: #fff;
}
.logo-tile.on-cream { background: var(--color-cream); }
.logo-tile.on-dark { background: var(--midnight-800); border-color: var(--midnight-700); }
.logo-tile img { max-height: 40px; max-width: 80%; width: auto; }
.logo-tile .cap {
  position: absolute;
}
.logo-wrap { position: relative; }
.logo-wrap .cap {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
  letter-spacing: 0.02em; margin-top: 8px; text-align: center;
}
.accent-logo-row { display: flex; gap: 16px; flex-wrap: wrap; }
.accent-logo-row .a {
  width: 64px; height: 64px; border-radius: var(--radius-md);
  background: var(--midnight-800); display: flex; align-items: center; justify-content: center;
}
.accent-logo-row .a img { height: 30px; width: auto; }

/* -------------------------------------------------------------
   Values & do/don't
   ------------------------------------------------------------- */
.values { background: var(--midnight-800); color: #fff; border-radius: var(--catalog-radius); padding: clamp(28px, 4vw, 44px); }
.values .eyebrow { color: var(--color-ocean); }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.value { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.value .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--color-ocean); }
.value h4 { font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -0.01em; margin: 10px 0 8px; line-height: 1.25; }
.value p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }

.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dodont .col { border-radius: var(--catalog-radius); padding: 22px; border: 1px solid var(--border); background: #fff; }
.dodont .col h4 {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; margin: 0 0 14px;
}
.dodont .do h4 { color: var(--status-success); }
.dodont .dont h4 { color: var(--status-error); }
.dodont ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dodont li { font-size: 14px; line-height: 1.45; color: var(--fg-2); padding-left: 22px; position: relative; }
.dodont li::before { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 13px; }
.dodont .do li::before { content: "+"; color: var(--status-success); }
.dodont .dont li::before { content: "−"; color: var(--status-error); }

/* voice rules */
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.voice { background: var(--bg-muted); border-radius: var(--radius-md); padding: 18px; }
.voice .n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--fg-3); }
.voice h4 { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.25; margin: 8px 0; }
.voice p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.voice em { color: var(--fg-1); font-style: italic; }

/* -------------------------------------------------------------
   Code blocks (build-with-it)
   ------------------------------------------------------------- */
.code {
  background: var(--midnight-900);
  color: #DDE7EB;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}
.code .c { color: var(--midnight-400); }
.code .k { color: var(--color-ocean); }
.code .s { color: var(--green-400); }

.target { display: flex; flex-direction: column; gap: 14px; }
.target .head { display: flex; align-items: center; gap: 10px; }
.target .num {
  font-family: var(--font-mono); font-size: 12px; color: var(--midnight-800);
  background: var(--ocean-200); border-radius: var(--radius-pill); padding: 3px 9px; line-height: 1;
}
.target h4 { font-size: 17px; font-weight: var(--fw-bold); margin: 0; }
.target p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* resource links */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.res {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; background: #fff; text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.res:hover { border-color: var(--border-strong); text-decoration: none; }
.res .t { display: flex; align-items: center; justify-content: space-between; font-weight: var(--fw-semibold); font-size: 14px; color: var(--fg-1); }
.res .t .arrow { color: var(--fg-link); }
.res .d { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

/* composition / kit teaser */
.kit-teaser {
  border-radius: var(--catalog-radius); overflow: hidden; border: 1px solid var(--border);
  background: #fff; display: grid; grid-template-columns: 1.1fr 1fr;
}
.kit-teaser__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.kit-teaser__body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 44px); line-height: 1.0; letter-spacing: var(--tracking-tight); margin: 0; color: var(--midnight-800); }
.kit-teaser__body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 44ch; }
.kit-teaser__art {
  background: var(--midnight-800);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  position: relative; overflow: hidden;
}
.kit-teaser__art .miniwordmark {
  font-family: var(--font-display); color: var(--color-cream); font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; text-align: center;
}
.kit-teaser__art .miniwordmark .a { color: var(--color-ocean); }

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */
.foot {
  background: var(--midnight-950);
  color: rgba(255, 255, 255, 0.7);
  margin-top: 24px;
}
.foot__inner { max-width: var(--content-max); margin: 0 auto; padding: 44px clamp(24px, 5vw, 64px) 36px; }
.foot__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.foot img { height: 22px; width: auto; }
.foot__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.foot__col { display: flex; flex-direction: column; gap: 9px; }
.foot__col .h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; }
.foot__col a, .foot__col span { color: rgba(255, 255, 255, 0.82); font-size: 13px; text-decoration: none; }
.foot__col a:hover { color: var(--color-ocean); text-decoration: none; }
.foot__rule {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 32px; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; opacity: 0.55;
}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .icon-grid { grid-template-columns: repeat(6, 1fr); }
  .kit-teaser { grid-template-columns: 1fr; }
  .kit-teaser__art { min-height: 200px; }
}

@media (max-width: 860px) {
  :root { --topbar-h: 56px; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-emphasized);
    width: min(86vw, 320px);
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(8, 20, 26, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard);
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .topbar { display: flex; }
  .main { margin-left: 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .pairing { grid-template-columns: 1fr; }
  .values__grid, .voice-grid { grid-template-columns: 1fr; }
  .dodont { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .statbar .stat:nth-child(2) { border-right: none; }
  .type-row { grid-template-columns: 1fr; gap: 10px; }
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
  .motion-grid { grid-template-columns: 90px 1fr; }
  .motion-grid .use { display: none; }
  .scale__legend .hx { font-size: 8px; }
}

@media (min-width: 861px) {
  .nav-scrim { display: none; }
}