/* ==========================================================================
   STRUCTURAL COLOUR -- the site skin                                  (#658)

   The home page is built on assets/sc-theme.css directly. Every other page
   still carries the previous theme's layout (kongen-theme.css, kongen-60s.css
   and its own <style>), and this sheet re-skins that vocabulary rather than
   rewriting 25 pages:

   1. Each page sets <html data-theme="dark">, which switches on the previous
      theme's dark mode -- already contrast-swept across all 26 pages.
   2. This sheet then moves that dark palette from teal ink to black velvet and
      from orange to the film, at a specificity that beats the page's own
      tokens (html[data-theme] :root is 0,2,1; the theme's is 0,2,0).
   3. Shared components -- buttons, cards, callouts, tables, footer, consent
      banner, world grounds -- get the Structural Colour treatment.

   Loaded LAST in <head>, after every page's own <style>, so equal-specificity
   rules here win too. Copy is never touched by this sheet.
   ========================================================================== */

html[data-theme="dark"]:root {
  color-scheme: dark;
  /* grounds */
  --kongen-ink: #050508; --kongen-ink-2: #0E0F18; --kongen-sunken: #08080E; --kongen-black: #050508;
  --kg-background: #050508; --kg-card: #0E0F18; --kg-sunken: #08080E;
  --paper: #050508; --paper-light: #0E0F18; --paper-warm: #0B0C14;
  /* text */
  --kongen-white: #EEF0F7; --kongen-cream: #EEF0F7; --kongen-paper: #EEF0F7;
  --kg-foreground: #EEF0F7; --kg-text: #CBCFDD; --kg-muted-foreground: #A6ACC2; --kg-ink: #EEF0F7;
  --ink: #CBCFDD; --text: #CBCFDD; --black: #EEF0F7;
  --hero-ink: #EEF0F7; --hero-body: #CBCFDD; --hero-muted: #A6ACC2; --color-muted: #A6ACC2;
  /* lines and shade */
  --kg-border: rgba(214, 220, 255, .17); --border: rgba(214, 220, 255, .17); --kg-border-strong: rgba(214, 220, 255, .30);
  --color-border: rgba(214, 220, 255, .17); --color-border-light: rgba(214, 220, 255, .17);
  /* the paper grid was the previous theme's ground; velvet has none */
  --grid-line: transparent; --grid-line-dark: transparent;
  --kg-shade: rgba(0, 0, 0, .55); --kg-shade-inset: rgba(0, 0, 0, .45);
  --shadow-soft: 0 30px 80px -40px rgba(0, 0, 0, .9); --shadow-card: 0 30px 80px -40px rgba(0, 0, 0, .9);
  /* the film takes over every accent the previous theme drew in orange and red */
  --kg-primary: #C9BDFF; --kg-link: #C9BDFF; --kg-primary-deep: #DDD4FF; --kg-primary-tint: rgba(184, 168, 255, .12);
  --kg-primary-foreground: #0A0911;
  --red: #FFB4E1; --red-deep: #FFD3EC; --red-light: rgba(255, 180, 225, .12);
  --kg-mark: #FFB4E1; --kron: #9FF2FF;
  --kg-action: #C9BDFF; --kg-action-deep: #B8A8FF; --kg-action-ink: #0A0911;
  --kg-secondary: #A9FFD9; --kg-positive: #8EF2C6; --moss: #A9FFD9; --kongen-green-night: #A9FFD9;
  --kg-warm: #FFC9AE; --kg-accent: #FFE0A6;
  --kongen-orange: #FFC9AE; --kongen-orange-dark: #FFB08A; --kongen-yellow: #FFE0A6; --kongen-cyan: #9FF2FF;
  --kongen-green: #A9FFD9; --kongen-coral: #FFB4E1; --kongen-violet: #B8A8FF; --kongen-blue: #AEC3FF;
  --kongen-orange-text: #FFC9AE; --kongen-violet-lift: #C9BDFF; --kongen-cyan-text: #9FF2FF; --kongen-green-text: #A9FFD9;
  --kongen-blue-text: #AEC3FF; --kongen-orange-node: #FFC9AE; --kongen-violet-text: #C9BDFF;
  --kongen-orange-night: #FFC9AE; --kongen-orange-night-deep: #FFD9C4;
  --kongen-blue-mark: #AEC3FF; --kongen-orange-mark: #FFC9AE; --kongen-cyan-mark: #9FF2FF; --kongen-coral-mark: #FFB4E1;
  --kongen-green-mark: #A9FFD9; --kongen-violet-mark: #C9BDFF; --kongen-yellow-mark: #FFE0A6;
  --kg-wave-1: #AEC3FF; --kg-wave-2: #FFC9AE; --kg-wave-3: #A9FFD9; --kg-wave-4: #FFE0A6;
  /* the three faces */
  --kg-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --kg-serif: Fraunces, "Bodoni 72", Georgia, "Times New Roman", serif;
  --kg-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--kg-serif); --font-serif: var(--kg-serif); --font-body: var(--kg-sans); --font-mono: var(--kg-mono);
  --ground-veil: .62;
}

html[data-theme="dark"] body { background: var(--velvet); color: var(--text-2); font-family: var(--sans); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 {
  font-family: var(--serif) !important; font-weight: 500 !important; font-variation-settings: var(--serif-set);
  letter-spacing: -.01em !important;
}
html[data-theme="dark"] h1 em, html[data-theme="dark"] h2 em { font-style: italic; }
/* every heading in the theme's brightest ink (the pages drew some in body ink) */
html[data-theme="dark"] :is(h1, h2, h3, h4):not(.eyebrow) { color: var(--text); }
html[data-theme="dark"] h4 { font-family: var(--serif); font-variation-settings: var(--serif-set); letter-spacing: 0; }
/* kickers: several pages draw their eyebrow as an h3 -- it keeps the theme's mono kicker */
html[data-theme="dark"] :is(h2, h3, h4, p, span, div).eyebrow, html[data-theme="dark"] .section-eyebrow,
html[data-theme="dark"] .flow-eyebrow, html[data-theme="dark"] .doc-type, html[data-theme="dark"] .entry-date {
  font-family: var(--mono) !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase;
  font-variation-settings: normal; font-size: 12px !important; color: var(--dim);
}

/* ---- the previous theme's grounds: the field and the patterns go, the photos stay dark */
html[data-theme="dark"] .kg-rd, html[data-theme="dark"] .pattern-bg, html[data-theme="dark"] .illyrian-pattern,
html[data-theme="dark"] .footer-pattern, html[data-theme="dark"] .kg-scrim { display: none !important; }
/* Fiz, 2026-10-04: "why are the worlds with a white overlay? i would just show the
   video!!" The world clips now come ungraded from the stock originals (#658), so the
   footage shows as shot: no filter here. The scrim below still sits under the copy. */
html[data-theme="dark"] .kg-ground video, html[data-theme="dark"] .kg-ground img { filter: none; }
/* the marketing pages' generic clip gives way to the culture (sc-theme.js 7b) */
html[data-theme="dark"] .kg-ground.sc-ground-replaced { display: none !important; }
/* THE WORLD PAGES: the video, and over it one dark, see-through overlay (#658).
   Fiz, 2026-10-04: "add a dark background transperent overlay to the worldpages.
   and then under it show the background video." The clip plays as shot (ungraded,
   no filter, above); this overlay is the one layer between it and the copy. It is
   darkest under the copy column on a wide screen and the same all over on a phone,
   and fades to the page ground at the foot of the view.
   kongen-theme.css ran this layer at opacity var(--ground-veil) (.68 here), so the
   scrim that stood here only ever reached two thirds of its strength, and washed
   the clip in the previous theme's series colour (::before, 12%). Both stand down. */
html[data-theme="dark"] .kg-ground::before { display: none; }
html[data-theme="dark"] .kg-ground::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, rgba(5, 5, 8, 0) 0%, rgba(5, 5, 8, 0) 72%, #050508 100%),
              linear-gradient(90deg, rgba(5, 5, 8, .80) 0%, rgba(5, 5, 8, .78) 50%, rgba(5, 5, 8, .64) 100%);
}
@media (max-width: 760px) {
  html[data-theme="dark"] .kg-ground::after {
    background: linear-gradient(180deg, rgba(5, 5, 8, 0) 0%, rgba(5, 5, 8, 0) 72%, #050508 100%), rgba(5, 5, 8, .80);
  }
}

/* The ground sits BEHIND the content rather than the content being lifted above
   it: a broad "lift every body > div" rule turned the hidden phone menu from
   fixed to relative and pushed every page's content 1,750px down. The page's own
   background moves to <html>, so a z-index:-1 layer paints over the velvet and
   under everything in flow. */
html[data-theme="dark"] { background: var(--velvet); }
html[data-theme="dark"] body { background: transparent !important; }
html[data-theme="dark"] .sc-grain { z-index: -1; }
html[data-theme="dark"] .sc-torch { z-index: -1; }
/* kongen-theme.css lifts `body > .mobile-overlay` to position:relative (0,1,2) for
   the previous theme's drop-down menu. This theme's menu is a fixed sheet that
   fades in, so it is display:flex while hidden -- left relative, it sat in the
   flow and pushed every page's content 1,750px down. */
html[data-theme="dark"] body > .mobile-overlay { position: fixed; z-index: 45; }
/* The previous header sat in the flow; this bar is fixed, so the page starts
   below it -- otherwise every first heading slides under the glass. */
/* kongen-theme.css makes every header "seamless" -- transparent, borderless, no
   backdrop -- with !important, which stripped the bar's glass: scrolled content
   read straight through the nav. The bar's own glass is re-asserted here. */
html[data-theme="dark"] header.sc-bar {
  padding: env(safe-area-inset-top, 0px) 0 0;
  background: linear-gradient(rgba(5, 5, 8, .74), rgba(5, 5, 8, .5)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important; backdrop-filter: blur(14px) saturate(1.3) !important;
  border-bottom: 1px solid var(--hair) !important;
}
html[data-theme="dark"] header.sc-bar > .container { height: var(--bar-h); }
html[data-theme="dark"] body { padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); }
/* one hero edge (sc-theme.css --hero-gap): the first block of every page starts there --
   the first section's content, or the document column of the legal pages and the blog */
html[data-theme="dark"] :is(body > section:first-of-type, main.kg-page > section.kg-world-hero) { padding-top: var(--hero-gap) !important; }
html[data-theme="dark"] :is(body > article:first-of-type, body > .journal) { margin-top: var(--hero-gap) !important; padding-top: clamp(26px, 3vw, 46px) !important; }
/* the world heroes start at the top too: the copy column was centred against the glyph
   card, so a world's headline sat 20-80px lower than every other page's */
html[data-theme="dark"] .kg-world-hero .kg-world-grid { align-items: start; }
html[data-theme="dark"] .kg-world-hero .kg-world-eyebrow:first-child { margin-top: 0; }
/* inline-flex sat on its parent's 27px line box, 10px down; a block-level flex starts at the edge */
html[data-theme="dark"] .kg-world-hero .kg-world-eyebrow { display: flex; width: fit-content; }

/* ---- the bar: the theme's .sc-bar, plus the inline-toggled hamburger */
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* The phone menu: the theme's left-set list. kongen-theme.css centres every menu
   link; the worlds are thirteen sibling anchors (a.kg-worlds-mob), so the sheet
   wraps -- full-width rows for the main links, the worlds as a run of small ones. */
html[data-theme="dark"] .mobile-overlay { flex-flow: row wrap; align-content: flex-start; gap: 0; }
html[data-theme="dark"] .mobile-overlay > a { flex: 0 0 100%; justify-content: flex-start; text-align: left; }
html[data-theme="dark"] .mobile-overlay > a.kg-worlds-mob {
  flex: 0 0 auto; min-height: 0; font: 500 15px/1.3 var(--sans) !important; padding: 9px 16px 9px 0 !important;
  border: 0 !important; color: var(--text-2) !important;
}
html[data-theme="dark"] .mobile-overlay > a.kg-worlds-mob + a:not(.kg-worlds-mob) { border-top: 1px solid var(--hair); margin-top: 8px; }
html[data-theme="dark"] .mobile-overlay > a.btn { flex: 0 0 auto; justify-content: center; margin-top: 26px; }

/* ---- actions: the previous theme's buttons become the nacre ones */
html[data-theme="dark"] .sc-bar .kg-btn, html[data-theme="dark"] .mobile-overlay .kg-btn { font-family: var(--sans); font-weight: 600; }
html[data-theme="dark"] .btn, html[data-theme="dark"] a.btn { border-radius: 999px; font-family: var(--sans); font-weight: 600; letter-spacing: .01em; }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .kg-btn.primary, html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] .consent-btn-primary, html[data-theme="dark"] .consent-btn-accept, html[data-theme="dark"] .btn-pricing-primary {
  color: var(--on-film) !important; background: var(--film) !important; background-size: 240% 100% !important;
  background-position: var(--sheen, 50%) 50% !important; border: 0 !important; text-shadow: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 12px 36px -14px rgba(184, 168, 255, .6) !important;
}
html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-outline, html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .consent-btn:not(.consent-btn-primary):not(.consent-btn-accept), html[data-theme="dark"] .btn-pricing-outline {
  color: var(--text) !important; background: rgba(214, 220, 255, .04) !important; border: 1px solid var(--hair-3) !important; box-shadow: none !important;
}

/* ---- surfaces: cards, panels, callouts, tables -- velvet raised, hairline, no cream */
html[data-theme="dark"] :is(.card, .audience-card, .kg-panel, .callout, .legal-nav, .kg-receipt, .kg-glyph-card, .feature-card,
  .price-card, .plan-card, .tier-card, .faq-item, .product-card, .stat-card, .info-card) {
  background-color: rgba(14, 15, 24, .78); border-color: var(--hair-2);
}
html[data-theme="dark"] .callout { border-left-color: var(--f2) !important; }
html[data-theme="dark"] table { border-color: var(--hair-2); }
html[data-theme="dark"] th { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .78em; color: var(--dim); }
html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: var(--hair) !important; }
html[data-theme="dark"] code, html[data-theme="dark"] pre { font-family: var(--mono); }
html[data-theme="dark"] :not(pre) > code { background: rgba(214, 220, 255, .06); border: 1px solid var(--hair); border-radius: 6px; padding: .08em .4em; color: var(--text); }
html[data-theme="dark"] pre { background: linear-gradient(180deg, rgba(18, 19, 31, .92), rgba(10, 10, 16, .92)); border: 1px solid var(--hair-2); border-radius: 16px; }

/* ---- the previous dark mode drew these in teal ink, cream or light ink; velvet now */
html[data-theme="dark"] .content-backdrop, html[data-theme="dark"] section:nth-child(even) .content-backdrop {
  background: rgba(14, 15, 24, .86) !important; border: 1px solid var(--hair-2) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme="dark"] .dev-path { background: rgba(14, 15, 24, .78) !important; border-color: var(--hair-2) !important; }
html[data-theme="dark"] .flow-spotlight-media { background: #08080E !important; }
html[data-theme="dark"] .organism-table tbody tr:nth-child(even) td { background: rgba(214, 220, 255, .035) !important; }
html[data-theme="dark"] .install-block { background: rgba(214, 220, 255, .05) !important; color: var(--text) !important; border: 1px solid var(--hair-2); }
html[data-theme="dark"] .install-block:hover { background: rgba(214, 220, 255, .08) !important; border-color: var(--hair-3); }
html[data-theme="dark"] .bridge {
  background: radial-gradient(80% 120% at 50% 0%, rgba(184, 168, 255, .10), rgba(184, 168, 255, 0) 70%), var(--raised) !important;
  color: var(--text-2) !important; border: 1px solid var(--hair-2);
}
html[data-theme="dark"] .bridge h2 { color: var(--text) !important; }
html[data-theme="dark"] .bridge p { color: var(--text-2) !important; }
html[data-theme="dark"] .bridge code { background: rgba(214, 220, 255, .08) !important; color: var(--text) !important; }
html[data-theme="dark"] .mech-flow li .mech-num { background: rgba(214, 220, 255, .10) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--hair-2); }
html[data-theme="dark"] .mech-us .mech-flow li .mech-num { background: var(--film) !important; color: var(--on-film) !important; box-shadow: none; }

/* small chrome the previous theme drew as light-on-dark ink chips */
html[data-theme="dark"] .nn[data-tooltip]::after { background: var(--raised) !important; color: var(--text) !important; border: 1px solid var(--hair-2); }
html[data-theme="dark"] .domains-nav:hover { background: rgba(214, 220, 255, .10) !important; color: var(--text) !important; }

/* ---- world pages: the copy reads in the theme's text face; names stay display */
html[data-theme="dark"] .kg-world-shot img { filter: saturate(.92) brightness(.84); }
html[data-theme="dark"] .kg-page { font-family: var(--sans); }

/* ---- links in running text: lavender with a film underline */
html[data-theme="dark"] :is(p, li, td, dd) a:not(.btn):not(.kg-btn):not(.kg-mlink) {
  color: var(--kg-link); text-decoration: underline; text-decoration-color: rgba(184, 168, 255, .55); text-underline-offset: 3px;
}
html[data-theme="dark"] :is(p, li, td, dd) a:not(.btn):not(.kg-btn):not(.kg-mlink):hover { color: var(--text); text-decoration-color: var(--f3); }

/* ---- the footer, in the theme's shape, on every page */
html[data-theme="dark"] footer, html[data-theme="dark"] footer.kg-night, html[data-theme="dark"] .article-footer {
  background: radial-gradient(70% 60% at 50% 0%, rgba(184, 168, 255, .07), rgba(184, 168, 255, 0) 70%), var(--velvet) !important;
  border-top: 1px solid var(--hair) !important; color: var(--faint);
}
html[data-theme="dark"] .footer-quote { font-family: var(--serif) !important; font-style: italic; font-variation-settings: var(--serif-set); color: var(--text-2) !important; }
html[data-theme="dark"] footer .footer-nav a, html[data-theme="dark"] .article-footer a:not(.btn):not(.kg-btn) { color: var(--text-2) !important; text-decoration: none !important; }
html[data-theme="dark"] footer .footer-nav a:hover, html[data-theme="dark"] .article-footer a:not(.btn):not(.kg-btn):hover { color: var(--text) !important; }
html[data-theme="dark"] .kg-footer-mark { width: 48px; height: 48px; margin: 0 auto 14px; display: block; }
/* --paper-light was the previous theme's light ink as well as its light ground.
   It is a ground here, so text drawn in it -- the inline-styled footer wordmark,
   the footers' hover state -- takes the theme's ink instead. */
html[data-theme="dark"] :is(footer, .article-footer, .journal-footer) [style*="paper-light"] { color: var(--text) !important; }
html[data-theme="dark"] footer a:not(.btn):not(.kg-btn):hover { color: var(--text) !important; }

/* ---- the consent banner, as a velvet glass bar */
html[data-theme="dark"] .consent-banner {
  background: rgba(8, 8, 13, .94) !important; color: var(--text-2) !important; border-top: 1px solid var(--hair-2) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-theme="dark"] .consent-banner a { color: var(--kg-link) !important; }
html[data-theme="dark"] .consent-banner, html[data-theme="dark"] .consent-banner * { font-family: var(--sans) !important; }

/* ---- sliders anywhere on the site get the film track and the pearl thumb */
html[data-theme="dark"] input[type="range"]:not(.sc-range):not(#kg-calls) { accent-color: #B8A8FF; }