/* Aptiz AI — site-wide tokens and utility classes.
   Extracted from the two duplicated <style> blocks in the design prototype.
   Component classes (.btn, .input, .field, .table, .blueprint, .corner, .tag,
   .card) live in ds.css and are unchanged. */

/* Three tones on paper: BLACK · BLUE-BLACK · GOLD.
   Paper (#f4f2ef) and gold (#B68235, #E1AD66 on dark) come straight from the
   Constellation logo sheet.

   The three have distinct jobs, and black vs blue-black is meant to be
   *visible* — they sit next to each other constantly:

     BLACK   #111113  (b−r  +2)  reading matter: headings, body, links
     BLUE    #1d2b4d  (b−r +48)  structure: buttons, the dark band, labels,
                                 secondary display lines
     GOLD    #b68235              the one chosen thing, and nothing else

   Gold is deliberately rare. The mark has exactly one gold spoke — the single
   teaching action the system commits to — so on the page gold appears only
   where something has been selected: the system pick, the real bottleneck,
   where Aptiz takes it, the endgame column, "Our layer". Chrome that used to
   be gold (buttons, section labels, flow arrows, subheads) is blue-black now.

   Measured constraints behind the mapping:
     gold on paper .............. 3.01  → borders/fills only (needs 3), never text
     black on gold .............. 5.44  → the label colour for a gold button
     blue-black on gold ......... 4.14  → FAILS, so gold buttons never take blue
     blue-black on paper ........ 12.49 → safe down to 12px labels
     paper on blue-black ........ 12.49 → the primary button and the dark band

   Scale direction is conventional: 100 faintest, 900 solid. Note that
   --color-accent-700 is deliberately NOT a gold: it drives .kick, the hero
   subhead, table headers and .btn-ghost, and leaving it bronze is what put
   gold on half the page. */
:root {
  --color-bg:#f4f2ef;          /* paper — straight from the logo sheet */
  --color-surface:#ffffff;     /* raised stock: inputs, cards */
  --color-text:#111113;        /* BLACK · 16.9:1 on paper */
  --color-blue:#1d2b4d;        /* BLUE-BLACK · 12.5:1 on paper */
  --color-text-2:#434243;      /* the ONLY secondary text tone · 8.95:1 */
  --color-divider: color-mix(in srgb,#111113 13%, transparent);

  --color-neutral-100:#eceae6; /* alternate paper band */
  --color-neutral-200:#e3e0da;
  --color-neutral-800:#434243; /* same tone as --color-text-2 — one grey, not two */

  /* Exactly three golds. The ramp used to hold seven, which is what made the
     page look busy: #c9a05f, #8a6026, #5e411a, #ead9c0 and #d9bd8c were all
     on screen at once and none of them earned their place. Every ramp step
     now resolves to one of these three, or to a neutral. */
  --color-accent:#b68235;      /* GOLD — borders, fills, the one gold button */
  --color-accent-100:#f3ece0;  /* its wash — the chosen card's background */
  --color-accent-200:#f3ece0;
  --color-accent-300:#b68235;
  --color-accent-400:#b68235;
  --color-accent-600:#b68235;
  --color-accent-700:#1d2b4d;  /* blue-black on purpose — see the note above */
  --color-accent-800:#111113;  /* black reads better on the wash (16:1) than bronze did */
  --color-accent-900:#1d2b4d;  /* the inverted mission band */

  --font-heading:"Schibsted Grotesk", system-ui, sans-serif; --font-heading-weight:500;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --shadow-lg: 0 18px 48px color-mix(in srgb, #111113 12%, transparent);
}

body {
  margin: 0; color: var(--color-text); font-family: var(--font-body); font-weight: 400;
  /* Barely-there tint so the page reads as stock rather than flat #fff. */
  background:
    radial-gradient(1200px 640px at 76% -10%, color-mix(in srgb, #111113 3.5%, transparent), transparent 68%),
    var(--color-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Links stay black with an underline. Gold would fail contrast at body size and
   would spend the brand's one accent on ordinary navigation. */
a { color: var(--color-text); text-decoration-color: color-mix(in srgb, var(--color-text) 35%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--color-text); text-decoration-color: var(--color-text); }

/* Primary buttons are blue-black, not gold. ds.css fills them with
   --color-accent; overriding here keeps gold for chosen-state only. */
.btn-primary { background: var(--color-blue); color: var(--color-bg); border-color: var(--color-blue); }
.btn-primary:hover { background: #26375f; border-color: #26375f; color: var(--color-bg); }
.btn-primary:active { background: #16203a; border-color: #16203a; color: var(--color-bg); }
.btn-ghost { color: var(--color-blue); }

/* Inverted band: the mission section is solid blue-black, so every token the
   markup inside it references has to flip. Setting them on the element means
   the inline var() references in the HTML need no changes at all. */
.ink-band {
  --color-text: #f4f2ef;
  --color-text-2: color-mix(in srgb,#f4f2ef 82%, transparent);
  --color-divider: color-mix(in srgb,#f4f2ef 18%, transparent);
  --color-accent: #e1ad66;     /* the logo's on-dark gold · 6.9:1 here */
  --color-accent-100: color-mix(in srgb,#e1ad66 12%, transparent);
  --color-accent-200: color-mix(in srgb,#e1ad66 12%, transparent);
  --color-accent-800: #f4f2ef;
  --color-accent-300: color-mix(in srgb,#f4f2ef 34%, transparent);
  --color-accent-400: color-mix(in srgb,#f4f2ef 46%, transparent);
  --color-accent-600: #e1ad66;
  --color-accent-700: #e1ad66;
  color: var(--color-text);
}
.ink-band a { color: #f4f2ef; }
/* The single gold button on the site: the band's main CTA. Black label —
   blue-black on gold is 4.14:1 and would fail. */
.ink-band .btn-primary { background: #e1ad66; color: #111113; border-color: #e1ad66; }
.ink-band .btn-primary:hover { background: #ecc188; border-color: #ecc188; color: #111113; }
.ink-band .btn-primary:active { background: #d49b4d; border-color: #d49b4d; color: #111113; }
.ink-band .btn-ghost { color: var(--color-text); border-color: var(--color-accent-300); }
.ink-band .btn-ghost:hover { background: color-mix(in srgb, #f4f2ef 12%, transparent); }

.disp { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: none; margin: 0; letter-spacing: -0.018em; line-height: 1.04; }
.kick { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--color-accent-700); margin: 0; }
.tag { font-family: "JetBrains Mono", monospace; font-weight: 500; letter-spacing: 0.03em; }
.body { color: var(--color-text-2); line-height: 1.5; }
.crule { height: 1px; border: 0; background: var(--color-divider); margin: 12px 0 26px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(24px,5vw,64px); box-sizing: border-box; }
.sec { border-top: 1px solid var(--color-divider); padding: clamp(48px,7vw,88px) 0; }
/* Connective arrows are structure, not emphasis — muted black keeps gold for
   the chosen element. */
.arrow { color: var(--color-text-2); font-family: var(--font-heading); font-weight: 600; }
.icn { color: var(--color-accent); }
.icn svg { display: block; }

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

/* Anchored sections must clear the sticky nav when jumped to. */
[id] { scroll-margin-top: 92px; }

/* Visible keyboard focus — the prototype had none. */
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-blue); color: var(--color-bg);
  padding: 10px 16px; text-decoration: none; font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--color-bg); }

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

.site-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 26px;
  padding: 16px clamp(24px,5vw,64px);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
}
/* ── the Constellation lockup ─────────────────────────────────────────
   Mark + wordmark, matching the logo sheet: "Aptiz" in ink at regular
   weight, "AI" smaller, uppercase, letterspaced, in gold. */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text); }
.brand:hover { text-decoration: none; }
.brand .mark { display: block; color: currentColor; overflow: visible; flex: none; }
.brand .mark .gold { color: var(--color-accent); }
.brand .word { display: inline-flex; align-items: baseline; white-space: nowrap; }
.brand .word .n { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0.005em; }
.brand .word .ai {
  font-family: var(--font-heading); font-weight: 600; text-transform: uppercase;
  /* Brand gold. WCAG exempts logotypes from the contrast minimum, so this can
     be the real #b68235 rather than a darkened stand-in. */
  color: var(--color-accent); letter-spacing: 0.2em;
}
.ink-band .brand .word .ai { color: #e1ad66; }

.site-nav { padding-block: 12px; }
.site-nav .brand { gap: 15px; }
.site-nav .brand .mark { width: 52px; height: 52px; }
.site-nav .brand .word .n { font-size: 30px; }
.site-nav .brand .word .ai { font-size: 14px; margin-left: 10px; }

footer .brand .mark { width: 40px; height: 40px; }
footer .brand .word .n { font-size: 24px; }
footer .brand .word .ai { font-size: 11px; margin-left: 8px; }

@media (max-width: 640px) {
  .site-nav .brand .mark { width: 42px; height: 42px; }
  .site-nav .brand .word .n { font-size: 25px; }
  .site-nav .brand .word .ai { font-size: 12px; margin-left: 8px; }
}
.site-nav .spacer { flex: 1; }
.site-nav .navlink { font-size: 14px; color: var(--color-text); text-decoration: none; }
.site-nav .navlink[aria-current="true"] { color: var(--color-accent-700); }

/* Hamburger — hidden on desktop, shown when the inline links collapse. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-text); cursor: pointer;
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-drawer {
  display: none;
  /* top is set by nav.js from the measured nav height. */
  position: fixed; top: 77px; left: 0; right: 0; z-index: 19;
  flex-direction: column;
  padding: 12px clamp(24px,5vw,64px) 22px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
/* :not(.btn) matters. `.nav-drawer a` outranks `.btn-primary` on
   specificity, so without it the drawer's CTA renders ink-on-ink. */
.nav-drawer a:not(.btn) {
  padding: 14px 0; font-size: 16px; color: var(--color-text);
  text-decoration: none; border-bottom: 1px solid var(--color-divider);
}
.nav-drawer a:last-child { border-bottom: 0; margin-top: 14px; text-align: center; }
.nav-drawer.is-open { display: flex; }

/* ------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .r-split { grid-template-columns: 1fr !important; }
  .r-track { grid-template-columns: 1fr !important; }
  .r-track .arrow { display: none !important; }
  .r-3 { grid-template-columns: 1fr 1fr !important; }
  .r-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .r-2 { grid-template-columns: 1fr !important; }
  .r-3 { grid-template-columns: 1fr !important; }
  .r-4 { grid-template-columns: 1fr !important; }
  /* Links move into the drawer rather than disappearing. */
  .site-nav .navlink,
  .site-nav .nav-cta { display: none !important; }
  .nav-toggle { display: inline-flex; }
}

/* ------------------------------------------------- live demo (index) */

.demo-tab {
  padding: 7px 16px; font-size: 14px; cursor: pointer;
  border: 1px solid var(--color-divider);
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body);
}
.demo-tab + .demo-tab { border-left: 0; }
.demo-tab[aria-selected="true"] {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: var(--color-bg);
  font-weight: 500;
}

.move-card {
  border: 1px solid var(--color-divider); padding: 16px; cursor: pointer;
  background: var(--color-bg); color: inherit; text-align: left; width: 100%;
  font-family: var(--font-body); transition: border-color .15s, background-color .15s;
}
.move-card:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.move-card[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-100); }
.move-card .badge-slot { min-height: 22px; margin-bottom: 6px; }

/* ----------------------------------------------------------- forms */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-grid .field { display: flex; flex-direction: column; gap: 6px; }
.form-grid .field.span-2 { grid-column: 1 / -1; }
.form-grid .field > span { font-size: 13px; font-weight: 600; }
/* 55% ink measured 3.8:1 on paper at 12px — below WCAG AA. 72% clears it. */
.form-grid .field .hint { font-size: 12px; font-weight: 400; color: var(--color-text-2); }
.req { color: var(--color-blue); }

/* ds.css paints .tag-outline in flat gold; at 11px that is 2.8:1. Keep the
   gold hairline, move the label to bronze. */
.tag-outline { color: var(--color-blue); border-color: var(--color-accent); }

select.input { appearance: none; background-image: none; }
/* Left alone, the browser paints its own grey here — a colour nobody chose. */
.input, select.input, textarea.input { border-color: var(--color-divider); }
.consent input { accent-color: var(--color-blue); }
textarea.input { min-height: 96px; resize: vertical; font-family: inherit; }

.consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; font-size: 13px; line-height: 1.45;
  color: var(--color-text-2);
}
.consent input { margin-top: 3px; flex: none; accent-color: var(--color-accent); }

/* Honeypot — off-screen rather than display:none so headless bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: 13px; margin: 14px 0 0; }
.form-status[data-state="error"] { color: #b42318; }
.form-status[data-state="error"] a { color: #b42318; text-decoration-color: currentColor; }
.form-status[data-state="sending"] { color: color-mix(in srgb, var(--color-text) 65%, transparent); }

button[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------- prose page */

.prose { max-width: 70ch; }
.prose h2 { font-size: 22px; margin: 34px 0 10px; }
.prose h3 { font-size: 17px; margin: 24px 0 8px; }
.prose p, .prose li { font-size: 15px; line-height: 1.65; color: var(--color-text-2); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }