/* Draping grey.
   Color analysis is done against neutral grey, because grey is the only ground
   that lets color read true. So the chrome here is grey and petrol, and every
   saturated color on the site is palette DATA, never decoration. */

:root {
  --bg: #edeef0;
  --surface: #fbfbfc;
  --surface-2: #e3e4e8;
  --ink: #191a1d;
  --ink-2: #3e4046;
  --muted: #65676f;
  --faint: #8a8c94;
  --rule: #d2d3d8;
  --rule-strong: #b8bac1;
  --accent: #1b5c69;
  --radius: 3px;
  --measure: 68ch;
}

/* Default "system" theme stamps nothing on the root, so this media query is
   what most visitors actually get. Guarded so an explicit light choice wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #131417;
    --surface: #1b1c20;
    --surface-2: #25272c;
    --ink: #e9e9ec;
    --ink-2: #c6c7cd;
    --muted: #9a9ca5;
    --faint: #7a7c85;
    --rule: #2e3036;
    --rule-strong: #3e4149;
    --accent: #67b4c2;
  }
}

:root[data-theme='dark'] {
  --bg: #131417;
  --surface: #1b1c20;
  --surface-2: #25272c;
  --ink: #e9e9ec;
  --ink-2: #c6c7cd;
  --muted: #9a9ca5;
  --faint: #7a7c85;
  --rule: #2e3036;
  --rule-strong: #3e4149;
  --accent: #67b4c2;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 780px; margin: 0 auto; padding: 0 24px 96px; }

h1, h2, h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.06; }
h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); line-height: 1.18; margin: 52px 0 12px; }
h3 { font-size: 1.12rem; line-height: 1.3; margin: 32px 0 8px; }

p { margin: 0 0 17px; color: var(--ink-2); max-width: var(--measure); }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.alias { color: var(--muted); font-size: 1rem; margin: 10px 0 0; font-style: italic; }

.masthead { border-bottom: 1px solid var(--rule-strong); margin-bottom: 40px; padding: 22px 0; }
.masthead a.brand {
  font-family: Newsreader, Georgia, serif;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.masthead nav { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.masthead nav a { font-size: 13.5px; color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--accent); }

.crumbs { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--faint); margin: 0 0 18px; }
.crumbs a { color: var(--faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

footer.site { border-top: 1px solid var(--rule); margin-top: 64px; padding-top: 22px; }
footer.site p { color: var(--faint); font-size: 13px; }

/* ---- swatches: the whole competitive differentiator ----
   Real elements with copyable hex. Never a JPEG. Fixed chip height so the grid
   cannot reflow on paint — that is the CLS gate in the technical checklist. */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}
.swatch {
  border: 0; padding: 0; background: none; font: inherit;
  text-align: left; cursor: pointer; border-radius: var(--radius);
  display: block; width: 100%;
}
.swatch .chip {
  display: block;
  height: 72px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
}
.swatch .label { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.3; }
.swatch .hex {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.02em;
}
.swatch:hover .hex, .swatch:focus-visible .hex { color: var(--accent); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.attrs { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: 14px; max-width: var(--measure); }
.attrs th, .attrs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.attrs th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; width: 38%;
}
.attrs td { color: var(--ink-2); }

.analyser {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 30px;
  max-width: var(--measure);
}
.analyser h2 { margin: 0 0 8px; font-size: 1.25rem; }
.analyser p { margin: 0 0 6px; font-size: 14.5px; }
.analyser .privacy {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin: 12px 0 0;
}

.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px; margin: 26px 0; padding: 0; list-style: none;
}
.season-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px 18px; }
.season-card a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem; }
.season-card .mini { display: flex; gap: 3px; margin: 12px 0 0; height: 22px; }
.season-card .mini span { flex: 1; border-radius: 2px; }
.season-card .meta { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

.sisters { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* The quotable answer block on education pages. This paragraph is what AI
   Overviews and chatbots lift, so it is set apart visually as well as
   structurally — it must read as self-contained. */
.answer {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 20px;
  margin: 0 0 30px;
  max-width: var(--measure);
}
.answer p { font-size: 1.06rem; line-height: 1.55; color: var(--ink); margin: 0; }

/* ---- analyser ---- */
.analyser-drop {
  display: block;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin: 14px 0 0;
  background: var(--bg);
}
.analyser-drop:hover { border-color: var(--accent); }
.analyser-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.analyser-cta {
  display: block;
  font-weight: 600;
  color: var(--accent);
  font-size: 15px;
}
.analyser-hint {
  display: block;
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 4px;
}
.analyser-output:empty { display: none; }
.analyser-output { margin-top: 18px; }

.result-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 2px;
}
.result-name {
  font-family: Newsreader, Georgia, serif;
  font-size: 1.7rem; font-weight: 500; margin: 0 0 10px; color: var(--ink);
}
.result-note { font-size: 14.5px; margin: 0 0 14px; }
.result-actions { font-size: 14.5px; margin: 4px 0 0; }
.result-pending, .result-error { font-size: 14.5px; margin: 0; }
.result-error { color: var(--warn, #9c4227); }
.result-detail { margin-top: 16px; }
.result-detail summary {
  cursor: pointer; font-size: 13.5px; color: var(--muted);
  font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.03em;
}
.result-detail summary:hover { color: var(--accent); }
.result-caveat { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* axis meter — shows WHERE on the axis, so the reading is legible as a
   position rather than a verdict. Deliberate: see the consistency risk in the
   strategy doc. A tool that projects false certainty generates refunds. */
.meter {
  position: relative; display: inline-block;
  width: 84px; height: 4px; border-radius: 2px;
  background: var(--surface-2); margin-left: 10px; vertical-align: middle;
}
.meter span {
  position: absolute; top: -3px; width: 2px; height: 10px;
  background: var(--accent); border-radius: 1px; transform: translateX(-1px);
}

/* ---- comparison pages ---- */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 22px 0 26px; }
.vs-col h3 { margin: 0 0 4px; font-size: 1.05rem; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; }
.vs-col h3 a { text-decoration: none; }
.vs-col .swatches { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; margin: 8px 0 0; }
.vs-col .swatch .chip { height: 48px; }
.vs-col .swatch .label { font-size: 11px; }
.vs-col .swatch .hex { font-size: 10px; }
@media (max-width: 560px) { .vs-grid { grid-template-columns: 1fr; } }