/* KZN shared stylesheet.
   Tokens, reset, typography, primitives and motion for all six pages.
   Spec: docs/superpowers/specs/2026-08-06-kzn-crezco-reskin-design.md */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('schibsted-grotesk-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('jetbrains-mono-variable.woff2') format('woff2');
}

:root {
  /* Surface */
  --paper: #F6F3EE;
  --mint: #DCE7DF;
  --white-field: #FBFAF7;
  --sand: #F1EBE4;
  --forest: #16302A;

  /* Text */
  --ink: #16302A;
  --ink-soft: rgba(22, 48, 42, .72);
  /* .7 is the floor that clears WCAG AA (4.5:1) on every surface this token is
     used over: 5.13:1 on --paper, 4.78:1 on --mint, 5.28:1 on --white-field,
     4.97:1 on --sand. Do not lighten it — .5 measured 2.8–3.0:1 and failed. */
  --ink-faint: rgba(22, 48, 42, .7);
  --rule: rgba(22, 48, 42, .1);

  /* Accent — #DE6A4E is an accepted WCAG AA shortfall on text.
     See the accessibility section of the spec before changing it. */
  --accent: #DE6A4E;
  --accent-deep: #C9573B;
  --accent-light: #E8917A;

  /* Type */
  --font-body: 'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;

  --type-micro: 0.625rem;
  --type-mono: 0.6875rem;
  --type-small: 0.8125rem;
  --type-body: clamp(0.875rem, 0.85rem + 0.2vw, 0.90625rem);
  --type-lead: clamp(0.9375rem, 0.9rem + 0.3vw, 0.96875rem);
  --type-ui: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  --type-card-title: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --type-brand: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem);
  --type-sub: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);
  --type-section-title: clamp(1.75rem, 1.2rem + 2.6vw, 2.375rem);
  --type-page-title: clamp(2.25rem, 1.3rem + 4.6vw, 4.25rem);

  /* Shape */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 26px;

  /* Layout */
  --shell: min(1240px, calc(100vw - 48px));
  --header: 68px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-reveal: 620ms;
  --lift-card: -2px;
  --lift-button: -1px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Layout scaffolding ---------- */

.section { padding: clamp(56px, 7vw, 104px) 0; border-bottom: 1px solid var(--rule); position: relative; }
.section-shell { width: var(--shell); margin: 0 auto; position: relative; }
.section--mint { background: var(--mint); }
.section--white { background: #fff; }
.section--forest { background: var(--forest); color: var(--paper); }
.section--forest .section-title,
.section--forest h3 { color: var(--paper); }
.section--forest .mono { color: var(--accent-light); }
.section--forest .section-label { color: var(--accent-light); }
.section--forest .section-intro { color: rgba(246, 243, 238, .75); }

/* One treatment for every page. index.html's values are the reference — they
   are the ones reviewed against the mockup — so the label is always mono
   --ink-faint with a 32px gap under it. Pages must not re-colour or re-space
   it locally; the only permitted variation is the dark-band inversion above. */
.section-label {
  color: var(--ink-faint);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: .08em;
  margin-bottom: 32px;
  text-transform: uppercase;
}
.section-title { font-size: var(--type-section-title); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.section-intro { font-size: var(--type-lead); color: var(--ink-soft); max-width: 62ch; }

/* 56px grid backdrop, as drawn in the mockup. Decorative only.
   `border-radius: inherit` matters on the subpages, where the panels carrying
   .grid-overlay are rounded cards rather than full-bleed bands; without it the
   grid paints square corners outside the panel it belongs to. On index.html's
   full-bleed sections the inherited radius is 0, so nothing changes there. */
.grid-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header);
  background: rgba(246, 243, 238, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

/* Lockup order is: terracotta square, then the name, then a real terracotta
   period. .brand's 9px gap must fall only between the square and the name, so
   the name and its period are wrapped in a single .brand-name flex item —
   otherwise the bare "KZN" text node becomes its own flex item and the gap
   pushes the period away from the N. */
.brand { display: flex; align-items: center; gap: 9px; font-size: var(--type-brand); font-weight: 600; letter-spacing: -.02em; }
.brand-square { width: 15px; height: 15px; background: var(--accent); border-radius: 2px; display: block; flex: none; }
.brand-name { display: block; }
.brand-dot { color: var(--accent); }
.nav-links a { font-size: var(--type-small); color: var(--ink-soft); transition: color var(--dur-fast) var(--ease); }
.nav-links a:hover { color: var(--accent-deep); }

/* ---------- Subpage nav ----------
   contact.html and company-brain.html (and the three pages Task 5 converts)
   carry an identical lightweight nav instead of the homepage's .site-header,
   so it lives here rather than being copied into every local <style> block.
   The container is scoped to .page-nav rather than the bare `nav` element
   because index.html's <nav class="nav-shell"> must keep its own grid layout
   and shell width. .nav-logo / .nav-back are unique to the subpages. */

.page-nav {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 32px 40px;
}

/* Same lockup as index.html's .brand — square, name, terracotta period — so the
   mark does not change when a visitor moves between the homepage and a subpage.
   The 9px gap must fall only between the square and the name, hence .brand-name
   wrapping the text and its period into one flex item (see the .brand note). */
.nav-logo {
  align-items: center;
  display: inline-flex;
  font-size: var(--type-brand);
  font-weight: 600;
  gap: 9px;
  letter-spacing: -.02em;
  min-height: 44px;
}

.nav-back {
  align-items: center;
  color: var(--ink-soft);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  gap: 8px;
  letter-spacing: .08em;
  min-height: 44px;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.nav-back:hover { color: var(--accent-deep); }
.nav-back::before { content: '←'; }

/* The subpages float their language switch bottom-right instead of docking it
   in a header. Self-contained, so index.html's own .lang-toggle is untouched. */
.lang-toggle--float {
  background: var(--white-field);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  bottom: 24px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: .1em;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  position: fixed;
  right: 24px;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  z-index: 60;
}
.lang-toggle--float:hover { border-color: var(--ink); color: var(--accent-deep); }

/* ---------- Buttons ---------- */

/* .btn-submit (contact.html) and .btn-cta (company-brain.html, and the product
   pages Task 5 converts) are the subpages' primary buttons under different
   names; they are listed here for the same reason the card treatment lists
   page class names — so no markup has to change to pick the treatment up. */
.button-primary, .button-secondary, .nav-cta,
.btn-submit, .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-small);
  font-weight: 500;
  min-height: 48px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-mid) var(--ease);
}

.button-primary, .nav-cta, .btn-submit, .btn-cta { background: var(--accent); color: #fff; }
.button-primary:hover, .nav-cta:hover,
.btn-submit:hover, .btn-cta:hover { background: var(--accent-deep); color: #fff; transform: translateY(var(--lift-button)); }

.button-secondary { background: var(--white-field); color: var(--ink); border-color: var(--rule); }
.button-secondary:hover { background: var(--paper); border-color: var(--ink); transform: translateY(var(--lift-button)); }

/* ---------- Cards ---------- */

/* Card treatment is applied to the class names the pages already use, so no
   markup has to change to pick it up. These are the real, verified selectors:
   index.html uses model-cell / capability-cell / system-card / proof; the
   product pages use cap-card / flow-card / scale-item / tl-item / step;
   burntrend uses contact-card.
   matrixbench's .matrix-cell is deliberately NOT in this list either: it is a
   data cell in the hero grid, and a hover lift would make the grid jump.
   .process-step (index.html, #process) is deliberately NOT in this list: it
   lives inside the dark .section--forest panel and already has its own
   forest-tuned local styling (translucent light border, light-on-dark hover)
   in index.html. This treatment's light --white-field base and --ink hover
   border (the same hex as --forest) would be illegible there.
   .system-status (index.html hero) was removed from this list: the mockup
   draws it as a banded module — header strip, product rows, footer strip, each
   supplying its own padding — so a flat 24px padded card is wrong for it. It
   now carries its own rule in index.html. */
.card,
.model-cell,
.capability-cell,
.system-card,
.cap-card,
.flow-card,
.scale-item,
.tl-item,
.step,
.contact-card,
.proof {
  background: var(--white-field);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}

.card:hover,
.model-cell:hover,
.capability-cell:hover,
.system-card:hover,
.cap-card:hover,
.flow-card:hover,
.scale-item:hover,
.tl-item:hover,
.step:hover,
.contact-card:hover,
.proof:hover {
  background: var(--paper);
  border-color: var(--ink);
  transform: translateY(var(--lift-card));
  box-shadow: 0 6px 20px rgba(22, 48, 42, .07);
}

/* index.html's hero SYSTEM/STATUS module. It used to be in the card list
   above, but the mockup draws it as a banded module — header strip, product
   rows, footer strip, each supplying its own padding — so the card rule's flat
   24px padding was wrong for it. The container lives here rather than in
   index.html's local block because that block is guarded by a test forbidding
   box-shadow and literal border-radius values; the bands, rows and chips
   inside it are token-only and stay local to the page. */
.system-status {
  background: #fff;
  border: 1px solid rgba(22, 48, 42, .12);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px -28px rgba(22, 48, 42, .35);
  overflow: hidden;
}

/* ---------- Forms (contact.html) ---------- */

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  /* Same 48px touch-target floor the buttons carry. textarea overrides its own
     height below this via rows/height, so it stays free to grow taller. */
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--ink);
  background: var(--white-field);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(220, 231, 223, .9);
}

.form-field label {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--sand);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--ink-soft);
}

/* ---------- Motion ---------- */

/* Hidden state is gated behind `.js`, which the inline head script sets.
   Without JavaScript the page renders fully visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.js .reveal.is-revealed { opacity: 1; transform: none; }

/* Siblings land in sequence. --i is set by kzn.js. */
.js .reveal-group > .reveal { transition-delay: calc(var(--i, 0) * 60ms); }

/* Live-status dot. Used by index.html's hero SYSTEM/STATUS header band. It is
   the only looping animation on the site; it goes static under reduced motion
   below rather than merely being sped up. */
@keyframes kzn-pulse {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: .7;  transform: scale(1.35); }
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: kzn-pulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift-card: 0;
    --lift-button: 0;
  }

  html { scroll-behavior: auto; }

  .js .reveal,
  .js .reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pulse-dot { animation: none; opacity: .6; transform: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}