/* KindredQuill — Merovex Press house style.
   CUBE CSS: Composition (layout primitives, tuned via data-* attributes, never
   inline styles) · Utility (single-job, token-driven) · Block (components).
   Colour: four 11-stop OKLCH scales; every role maps to a stop that clears
   WCAG AAA against the background it sits on. Open Props tokens live in props.css. */

@layer base, composition, block, utility;

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

:root {
  /* ── slate (charcoal / ink) ── */
  --slate-50: oklch(97.2% 0.0087 244.3);  --slate-100: oklch(93.9% 0.0131 244.3);
  --slate-200: oklch(87.8% 0.0204 244.3); --slate-300: oklch(80.3% 0.0262 244.3);
  --slate-400: oklch(71.5% 0.0305 244.3); --slate-500: oklch(63.7% 0.0291 244.3);
  --slate-600: oklch(55.8% 0.0279 244.3); --slate-700: oklch(47.5% 0.0262 244.3);
  --slate-800: oklch(39.3% 0.0233 244.3); --slate-900: oklch(31.8% 0.0192 244.3);
  --slate-950: oklch(23.8% 0.0151 244.3);
  /* ── terra (terracotta accent) ── */
  --terra-50: oklch(97.2% 0.0391 36.7);  --terra-100: oklch(93.9% 0.0587 36.7);
  --terra-200: oklch(87.8% 0.0913 36.7); --terra-300: oklch(80.3% 0.1173 36.7);
  --terra-400: oklch(71.5% 0.1369 36.7); --terra-500: oklch(63.7% 0.1304 36.7);
  --terra-600: oklch(55.8% 0.1252 36.7); --terra-700: oklch(47.5% 0.1173 36.7);
  --terra-800: oklch(39.3% 0.1043 36.7); --terra-900: oklch(31.8% 0.0861 36.7);
  --terra-950: oklch(23.8% 0.0678 36.7);
  /* ── euc (eucalyptus — community) ── */
  --euc-50: oklch(97.2% 0.0139 166.4);  --euc-100: oklch(93.9% 0.0208 166.4);
  --euc-200: oklch(87.8% 0.0324 166.4); --euc-300: oklch(80.3% 0.0416 166.4);
  --euc-400: oklch(71.5% 0.0485 166.4); --euc-500: oklch(63.7% 0.0462 166.4);
  --euc-600: oklch(55.8% 0.0444 166.4); --euc-700: oklch(47.5% 0.0416 166.4);
  --euc-800: oklch(39.3% 0.0370 166.4); --euc-900: oklch(31.8% 0.0305 166.4);
  --euc-950: oklch(23.8% 0.0240 166.4);
  /* ── sand (warm parchment neutrals) ── */
  --sand-50: oklch(97.2% 0.0086 84.6);  --sand-100: oklch(93.9% 0.0129 84.6);
  --sand-200: oklch(87.8% 0.0200 84.6); --sand-300: oklch(80.3% 0.0257 84.6);
  --sand-400: oklch(71.5% 0.0300 84.6); --sand-500: oklch(63.7% 0.0286 84.6);
  --sand-600: oklch(55.8% 0.0274 84.6); --sand-700: oklch(47.5% 0.0257 84.6);
  --sand-800: oklch(39.3% 0.0229 84.6); --sand-900: oklch(31.8% 0.0189 84.6);
  --sand-950: oklch(23.8% 0.0149 84.6);

  /* ── roles (AAA-mapped) ── */
  --canvas: var(--sand-50);  --surface: var(--sand-100);  --surface-2: var(--sand-200);
  --ink: var(--slate-950);   --ink-2: var(--slate-900);
  --muted: var(--slate-800); --faint: var(--slate-800);
  --on-dark: var(--sand-100); --on-dark-muted: var(--sand-300);
  --acc: var(--terra-600);   --acc-d: var(--terra-800); --acc-hover: var(--terra-900);
  --acc-on-dark: var(--terra-300); --acc-l: var(--terra-50);
  --euc: var(--euc-600);     --euc-ink: var(--euc-800); --euc-l: var(--euc-50);
  --line: color-mix(in oklch, var(--ink) 16%, transparent);
  --line-soft: color-mix(in oklch, var(--ink) 9%, transparent);

  /* ── fonts, measures, fluid type scale ── */
  --h: "Bitter", Georgia, "Times New Roman", serif;
  --b: "Inter", system-ui, -apple-system, sans-serif;
  --edge: clamp(20px, 5vw, 72px);
  --wrap: 1200px;
  --space-split: clamp(1.75rem, 4vw, 4rem);
  --size-step-1: 1.1875rem;                                  /* lede ~19px */
  --size-step-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);     /* 28→40 */
  --size-step-3: clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem);  /* 30→46 */
  --size-step-4: clamp(2rem, 1.5rem + 2.4vw, 3.125rem);      /* 32→50 */
  --size-step-5: clamp(2.75rem, 1.6rem + 5vw, 5.25rem);      /* 44→84 */
}

@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--canvas); color: var(--ink);
    font-family: var(--b); font-weight: 500; font-size: 16px; line-height: 1.6;
    text-wrap: pretty; -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: var(--h); font-weight: 700; letter-spacing: -0.018em; margin: 0; }
  p { margin: 0; }
  a { color: var(--acc-d); text-decoration: none; }
  a:hover { color: var(--acc-hover); }
  strong, b { font-weight: 600; color: var(--ink); }
  .band strong, .band b, .nv strong, .nv b, .ft strong, .ft b { color: var(--on-dark); }
  :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  ::selection { background: var(--acc-l); }
}

/* ═══════════════ Composition — layout primitives ══════════════════════ */
@layer composition {
  .wrapper { box-sizing: content-box; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--edge); }

  .region { padding-block: var(--region-top, 4.5rem) var(--region-bottom, 6rem); }
  .region[data-space="hero"]  { --region-top: 6rem;   --region-bottom: 5.5rem; }
  .region[data-space="tight"] { --region-top: 3.5rem; }
  .region[data-space="flush"] { --region-top: 5.5rem; --region-bottom: 5.5rem; }

  .flow > * + * { margin-block-start: var(--flow-space, 1.5rem); }
  .flow > [data-flow="2xs"] { --flow-space: 0.5rem; }
  .flow > [data-flow="xs"]  { --flow-space: 0.75rem; }
  .flow > [data-flow="s"]   { --flow-space: 1rem; }
  .flow > [data-flow="m"]   { --flow-space: 1.75rem; }
  .flow > [data-flow="l"]   { --flow-space: 2rem; }
  .flow > [data-flow="xl"]  { --flow-space: 2.75rem; }
  .flow > [data-flow="2xl"] { --flow-space: 4rem; }

  .cluster { display: flex; flex-wrap: wrap; align-items: var(--cluster-align, center); gap: var(--cluster-space, 0.75rem); }

  .grid { display: grid; gap: var(--grid-space, 1.5rem); grid-template-columns: repeat(var(--grid-cols, auto-fit), minmax(min(var(--grid-min, 16rem), 100%), 1fr)); }
  .grid[data-layout="thirds"] { grid-template-columns: repeat(3, 1fr); }

  .split { display: grid; align-items: var(--split-align, center); gap: var(--split-space, var(--space-split)); grid-template-columns: var(--split-cols, 1fr 1fr); }
  .split[data-cols="4-8"] { --split-cols: minmax(0, 4fr) minmax(0, 8fr); --split-align: start; }
  .split[data-cols="5-7"] { --split-cols: minmax(0, 5fr) minmax(0, 7fr); }
  .split[data-cols="6-6"] { --split-cols: minmax(0, 6fr) minmax(0, 6fr); }
  .split[data-cols="content-auto"] { --split-cols: minmax(0, 1fr) auto; --split-space: 3rem; }

  .frame { aspect-ratio: var(--frame-ratio, 16 / 9); overflow: hidden; }
  .frame[data-ratio="16-10"] { --frame-ratio: 16 / 10; }
  .frame[data-ratio="4-3"]   { --frame-ratio: 4 / 3; }

  @media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .grid[data-layout="thirds"] { grid-template-columns: 1fr; }
  }
}

/* ═══════════════ Utility — single job, token-driven ═══════════════════ */
@layer utility {
  /* Line length (measure), named by intent. The stylesheet owns the ch value;
     markup names the role. Headings wrap tight; body copy stays readable. */
  .measure { max-inline-size: var(--measure, 52ch); }
  .measure[data-measure="headline"] { --measure: 16ch; }  /* big stacked headings */
  .measure[data-measure="title"]    { --measure: 22ch; }  /* wider section headings */
  .measure[data-measure="lede"]     { --measure: 58ch; }  /* intro paragraphs */
  .measure[data-measure="prose"]    { --measure: 50ch; }  /* section body copy */
  .measure[data-measure="text"]     { --measure: 66ch; }  /* long-form article width */

  .text-step-1 { font-size: var(--size-step-1); line-height: 1.62; }
  .text-step-2 { font-size: var(--size-step-2); line-height: 1.12; }
  .text-step-3 { font-size: var(--size-step-3); line-height: 1.1; }
  .text-step-4 { font-size: var(--size-step-4); line-height: 1.1; }
  .text-step-5 { font-size: var(--size-step-5); line-height: 1.04; }

  .text-muted { color: var(--muted); }
  .text-on-dark-muted { color: var(--on-dark-muted); }
  .ghost-flush { margin-inline-start: -10px; }
  .scroll-x { overflow-x: auto; }
  .form-cta { min-inline-size: 18rem; }
}

/* ═══════════════ Block — components ═══════════════════════════════════ */
@layer block {
  .kqb {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: 500 15px/1 var(--b); letter-spacing: 0.005em;
    min-height: 44px; padding: 0 22px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  .kqb-p { background: var(--acc-d); color: var(--sand-50); }
  .kqb-p:hover { background: var(--acc-hover); color: var(--sand-50); }
  .kqb-p:active { background: var(--terra-950); }
  .kqb-s { background: transparent; color: var(--ink); border-color: var(--line); }
  .kqb-s:hover { background: var(--surface); border-color: color-mix(in oklch, var(--ink) 28%, transparent); }
  .kqb-g { background: transparent; color: var(--acc-d); padding-inline: 10px; }
  .kqb-g:hover { background: var(--acc-l); color: var(--acc-d); }
  .kqb-d { background: var(--on-dark); color: var(--ink); }
  .kqb-d:hover { background: var(--sand-50); }
  .kqb-sm { min-height: 38px; padding: 0 18px; font-size: 14px; }

  .band { background: var(--ink); color: var(--on-dark); border-block: 1px solid var(--ink); }
  .band-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 5.5vw, 60px) var(--edge); display: grid; grid-template-columns: 96px 1fr; column-gap: 20px; row-gap: 14px; align-items: start; }
  .band-n { grid-column: 1; grid-row: 1; font: 600 13px/1 var(--b); letter-spacing: 0.2em; color: var(--acc-on-dark); padding-top: 0.95rem; }
  .band-t { grid-column: 2; grid-row: 1; margin: 0; font: 700 clamp(28px, 3.6vw, 44px)/1.05 var(--h); letter-spacing: -0.018em; color: var(--on-dark); max-width: 20ch; }
  .band-d { grid-column: 2; grid-row: 2; margin: 0; font: 500 16px/1.6 var(--b); color: var(--on-dark-muted); max-width: 50ch; }
  @media (max-width: 640px) {
    .band-in { grid-template-columns: 1fr; row-gap: 10px; }
    .band-n { grid-row: auto; padding-top: 0; }
    .band-t, .band-d { grid-column: 1; }
  }

  .eyebrow { display: block; font: 600 12px/1 var(--b); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-d); }
  .lede { font-size: var(--size-step-1); line-height: 1.62; color: var(--muted); }
  .hint { font-size: 13.5px; color: var(--faint); }
  .copy { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
  .copy-dark { font-size: 16px; line-height: 1.6; color: var(--on-dark-muted); }

  .card-kq { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 28px; }
  .card-kq h3 { font-size: 24px; line-height: 1.2; }
  .card-kq p { font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
  .card-link { display: block; color: inherit; transition: border-color 120ms ease; }
  .card-link:hover { border-color: color-mix(in oklch, var(--ink) 26%, transparent); color: inherit; }

  .tick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .tick li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; align-items: start; }
  .tick li::before { content: "\2192"; color: var(--acc-d); font-size: 14px; line-height: 1.5; }

  .shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); margin: 0; }
  .slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; width: 100%; height: 100%; color: var(--faint); font-size: 14px; background: var(--surface); }
  .slot svg { width: 30px; height: 30px; opacity: 0.7; }

  .pill { display: inline-flex; align-items: center; gap: 9px; font: 600 12px/1 var(--b); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc-d); background: var(--acc-l); border-radius: 999px; padding: 9px 16px; }
  .pill-euc { color: var(--euc-ink); background: var(--euc-l); }

  .tabs { display: flex; flex-direction: column; gap: 2px; }
  .tab { background: none; border: 0; border-left: 2px solid var(--line-soft); padding: 14px 0 14px 18px; text-align: left; cursor: pointer; font: inherit; color: var(--faint); width: 100%; transition: color 120ms ease, border-color 120ms ease; }
  .tab:hover { color: var(--ink); border-left-color: color-mix(in oklch, var(--acc) 55%, transparent); }
  .tab[aria-selected="true"] { color: var(--ink); border-left-color: var(--acc); }
  .tab b { display: block; font: 700 21px/1.2 var(--h); letter-spacing: -0.015em; }
  .tab span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--faint); }

  .q { border-bottom: 1px solid var(--line-soft); }
  .q summary { list-style: none; cursor: pointer; padding: 20px 0; font: 700 21px/1.3 var(--h); letter-spacing: -0.015em; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
  .q summary::-webkit-details-marker { display: none; }
  .q summary::after { content: "+"; color: var(--acc-d); font: 400 22px/1 var(--b); }
  .q[open] summary::after { content: "\2212"; }
  .q summary:hover { color: var(--acc-hover); }
  .q p { font-size: 15.5px; line-height: 1.65; margin: 0 0 22px; max-width: 64ch; color: var(--muted); }

  .cmp { width: 100%; border-collapse: collapse; min-width: 760px; }
  .cmp th, .cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  .cmp thead th { font: 600 13px/1.3 var(--b); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); border-bottom-color: var(--line); }
  .cmp thead th.own { color: var(--acc-d); }
  .cmp td { font-size: 15px; color: var(--ink); }
  .cmp td.c, .cmp th.c { text-align: center; }
  .cmp td.own { background: var(--acc-l); font-weight: 600; }
  .cmp tbody tr:last-child td { border-bottom: 0; }
  .cmp td.dim { color: var(--faint); }

  .spec { width: 100%; border-collapse: collapse; }
  .spec td { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  .spec tr:last-child td { border-bottom: 0; }
  .spec .n { width: 64px; font: 600 12px/1 var(--b); letter-spacing: 0.12em; color: var(--acc-d); }
  .spec .p { width: 30%; font-size: 15px; color: var(--ink); }
  .spec .v { width: 22%; font: 700 21px/1.2 var(--h); letter-spacing: -0.015em; white-space: nowrap; color: var(--ink); }
  .spec .r { font-size: 15px; color: var(--muted); }
  @media (max-width: 900px) { .spec .p, .spec .v { width: auto; } }

  .prose { color: var(--muted); }
  .prose > * + * { margin-top: 1.15em; }
  .prose h2, .prose h3 { color: var(--ink); margin-top: 1.8em; }
  .prose h3 { margin-top: 1.4em; }
  .prose ul, .prose ol { padding-inline-start: 1.4em; }
  .prose li + li { margin-top: 0.4em; }
  .prose a { color: var(--acc-d); text-decoration: underline; text-underline-offset: 3px; }

  .nv { position: sticky; top: 0; z-index: 60; background: var(--ink); border-bottom: 1px solid color-mix(in oklch, var(--on-dark) 14%, transparent); }
  .nv-bar { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge); min-height: 68px; display: flex; align-items: center; gap: 36px; }
  .nv-logo { display: flex; align-items: center; gap: 11px; color: var(--on-dark); }
  .nv-logo span { font-family: var(--h); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
  .nv-links { display: flex; align-items: center; gap: 26px; }
  .nv-links a { color: var(--on-dark-muted); font-size: 14.5px; white-space: nowrap; }
  .nv-links a:hover { color: var(--on-dark); }
  .nv-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
  @media (max-width: 1040px) { .nv-links { display: none; } }

  .cta-surface { background: var(--surface); border-top: 1px solid var(--line-soft); }
  .field { font: inherit; font-size: 15px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); }
  .kq-mark { color: var(--terra-400); }

  .ft { background: var(--ink); color: var(--on-dark); }
  .ft a { color: var(--on-dark-muted); font-size: 14.5px; }
  .ft a:hover { color: var(--on-dark); }
  .ft h4 { font: 600 12px/1 var(--b); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); }
  .ft input { font: inherit; font-size: 15px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--on-dark) 24%, transparent); background: color-mix(in oklch, var(--on-dark) 6%, transparent); color: var(--on-dark); flex: 1; min-width: 0; }
  .ft input::placeholder { color: var(--on-dark-muted); }
  .ft-band { border-top: 1px solid color-mix(in oklch, var(--on-dark) 14%, transparent); }
  .ft-top { max-width: var(--wrap); margin-inline: auto; padding: 72px var(--edge); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: center; }
  .ft-form { display: flex; gap: 10px; align-items: stretch; }
  .ft-cols { max-width: var(--wrap); margin-inline: auto; padding: 56px var(--edge) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(120px, 1fr)); gap: 40px; }
  .ft-col { display: flex; flex-direction: column; gap: 11px; }
  .ft-brand { display: flex; align-items: center; gap: 11px; }
  .ft-brand span { font-family: var(--h); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
  .ft-blurb { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-muted); margin-top: 14px; max-width: 30ch; }
  .ft-copy { max-width: var(--wrap); margin-inline: auto; padding: 0 var(--edge) 56px; font-size: 13.5px; color: var(--on-dark-muted); }
  @media (max-width: 820px) {
    .ft-top { grid-template-columns: 1fr; }
    .ft-cols { grid-template-columns: repeat(2, 1fr); }
  }
}