/* Kosmos brand tokens — from PDF brand pack v1.0 */
:root {
  /* Colour */
  --ink: #0E0E0C;
  --paper: #F2EFE8;
  --signal: #3CFF7A;
  --rule-light: rgba(14,14,12,0.12);
  --rule-dark: rgba(242,239,232,0.18);
  --dim-light: rgba(14,14,12,0.55);
  --dim-dark: rgba(242,239,232,0.55);

  /* Type */
  --grotesk: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "EB Garamond", "Times New Roman", serif;

  /* Motion */
  --t-instant: 80ms;
  --t-quick: 180ms;
  --t-page: 320ms;
  --ease: cubic-bezier(.2,0,0,1);

  /* Radius (default 0 — pill only for tags) */
  --r-0: 0;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;
}

/* Reset within the artboards */
.kosmos-page, .kosmos-page * { box-sizing: border-box; }
.kosmos-page {
  font-family: var(--grotesk);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.kosmos-page--dark { background: var(--ink); color: var(--paper); }

/* Wordmark — bicolour split: Bold + Regular */
.km-wordmark {
  font-family: var(--grotesk);
  letter-spacing: -0.04em;
  font-weight: 400;
  white-space: nowrap;
}
.km-wordmark b { font-weight: 700; letter-spacing: -0.04em; }

/* Monogram */
.km-monogram {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  font-family: var(--grotesk);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
}
.km-monogram > span { display: grid; place-items: center; aspect-ratio: 1/1; }
.km-monogram .k { background: var(--ink); color: var(--paper); }
.km-monogram .h { background: var(--signal); color: var(--ink); }
.km-monogram--inv .k { background: var(--paper); color: var(--ink); }

/* Mono caption — always uppercase, tracked out */
.km-cap {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 11px;
  font-weight: 400;
}
.km-cap--lg { font-size: 13px; }

/* Counterpoint italic */
.km-counter { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Headlines */
.km-h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; }
.km-h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; text-wrap: balance; }
.km-h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.km-body { font-weight: 400; line-height: 1.5; max-width: 60ch; }

/* Buttons */
.km-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--grotesk); font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
  cursor: pointer; transition: background var(--t-instant) var(--ease);
}
.km-btn:hover { background: #1a1a17; }
.km-btn--signal { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.km-btn--signal:hover { background: #2af069; }
.km-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.km-btn-arrow { display: inline-block; transition: transform var(--t-instant) var(--ease); }
.km-btn:hover .km-btn-arrow { transform: translateX(3px); }

.km-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--t-instant) var(--ease);
}
.km-link:hover { opacity: 0.7; }

/* Signal dot */
.km-dot {
  display: inline-block; width: 8px; height: 8px; background: var(--signal);
  border-radius: 50%; vertical-align: middle;
}
.km-dot--pulse { animation: km-pulse 2s ease-in-out infinite; }
@keyframes km-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Hairline rule */
.km-rule { border: 0; border-top: 1px solid var(--rule-light); }
.kosmos-page--dark .km-rule { border-top-color: var(--rule-dark); }

/* Sticky nav (shared idea) */
.km-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 56px;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  border-bottom: 1px solid var(--rule-light);
}
.kosmos-page--dark .km-nav {
  background: color-mix(in oklab, var(--ink) 90%, transparent);
  border-bottom-color: var(--rule-dark);
}
.km-nav__links { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.km-nav__links a { color: inherit; text-decoration: none; opacity: 0.75; transition: opacity var(--t-instant) var(--ease); }
.km-nav__links a:hover { opacity: 1; }

/* Tag (the only place we use the pill radius) */
.km-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 10px;
  border: 1px solid currentColor;
}

/* Imagery placeholder — diagrammatic, never fake-3D */
.km-placeholder {
  position: relative;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  display: grid; place-items: center;
  overflow: hidden;
  border: 1px solid var(--rule-dark);
}
.km-placeholder--paper {
  background: var(--paper); color: var(--ink);
  border-color: var(--rule-light);
}
.km-placeholder::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px dashed currentColor; opacity: 0.3;
}

/* === Global hover language: green is the only light. === */
.kosmos-page--dark .km-row {
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-row:hover {
  background: rgba(60,255,122,0.06);
}
.kosmos-page--dark .km-row:hover .km-row__marker {
  color: var(--signal);
  opacity: 1;
}
.kosmos-page--dark .km-cell-kosmos {
  background: var(--signal);
  color: var(--ink);
}
.kosmos-page--dark .km-tile {
  transition: background var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-tile:hover {
  background: #14140f;
}
.kosmos-page--dark .km-tile:hover .km-tile__stat {
  color: var(--ink) !important;
  background: var(--signal);
  padding: 4px 10px;
}

/* Step rows — the big index number flips to ink-on-green on hover so it
   stays legible instead of blocking out against the green wash.
   !important is required: the number carries an inline color:var(--signal)
   which would otherwise win and render green-on-green. */
.kosmos-page--dark .km-step:hover .km-step__num {
  color: var(--ink) !important;
  background: var(--signal);
}

/* CRT counter accent — use anywhere a number needs to land green */
.km-counter { color: var(--signal); }

/* Mark — inline highlight */
.km-mark { color: var(--signal); }

.kosmos-page--dark .km-nav__links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--t-instant) var(--ease), color var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-nav__links a.is-current {
  opacity: 1;
  color: var(--signal);
}
.kosmos-page--dark .km-nav__links a:not(.km-nav__cta):not(.is-current):hover {
  color: var(--signal);
  opacity: 1;
}

/* Section CTA — subtle by default, lights up green on hover */
.km-section-cta:hover {
  background: rgba(60,255,122,0.06);
  border-color: var(--signal) !important;
  color: var(--signal);
}
.km-section-cta:hover .km-btn-arrow {
  transform: translateX(4px);
}
/* Bold variant: the right cell is already green, so on hover only nudge arrow */
.km-section-cta--bold:hover {
  background: transparent;
  border-color: var(--signal) !important;
  color: inherit;
}

/* Nav CTA — distinct hover with full color flip.
   Scoped under .km-nav so it beats the descendant rule above. */
.km-nav .km-nav__cta {
  background: transparent;
  color: var(--signal);
  border: 1px solid var(--signal);
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.km-nav .km-nav__cta:hover {
  background: var(--signal);
  color: var(--ink);
}
.km-nav .km-nav__cta:hover .km-btn-arrow { color: var(--ink); }

/* Comparison + value-stack row striping — subtle green rhythm */
.kosmos-page--dark .km-stripe:nth-of-type(odd) {
  background: rgba(60,255,122,0.035);
}

/* Standard CTA button on dark — green hover ring */
.kosmos-page--dark .km-btn--ghost-dark {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.kosmos-page--dark .km-btn--ghost-dark:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}

/* Section divider helper */
.km-section { padding: 120px 96px; }
.km-section--tight { padding: 80px 96px; }
.km-section--hero { padding: 56px 96px 80px; }

/* Quote — counterpoint italic block */
.km-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}