/* ============================================================================
   K2 SPACE — site.css  (shared pka-style foundation)
   Extracted verbatim from index.html's <style> block. Page-agnostic: every
   k2 page links this file. No homepage-only selectors — all components are
   general (.poster shell, masthead, cards, flow, footer, toggle).

   The pre-paint FOUC theme script STAYS inline in index.html <head> (before
   this stylesheet) so there is no flash. Runtime behavior lives in site.js.
   ============================================================================ */

  /* ---------- Tier 1 — theme-independent ---------- */
  :root{
    --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
    --mono:"Geist Mono",ui-monospace,"SF Mono",Monaco,Consolas,monospace;
    --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    /* The ONE retained orange — a subtle warm card/box hover glow, both themes. */
    --hover-glow:0 10px 30px -10px rgba(249,140,30,.40), 0 0 0 1px rgba(249,140,30,.18);
  }

  /* ---------- Tier 2 — DARK (default): GOLD on neutral charcoal ---------- */
  :root[data-theme="dark"]{
    --gold:#d4a017;        --gold-rgb:212,160,23;
    --gold-soft:#e0b34a;   --gold-deep:#9a7322;   --gold-label:#cfa330;
    --heading:#fbf3e4;     --heading-2:#f6ecda;   --on-gold:#1a1206;
    --cream:#f4ead7;       --muted:#b2a589;       --dim:#9a8d73;
    --line:rgba(var(--gold-rgb),.07);
    --panel:rgba(28,28,32,.55);       --panel-2:rgba(28,28,32,.55);
    --panel-edge:rgba(var(--gold-rgb),.16);
    --edge:rgba(var(--gold-rgb),.22); --edge-soft:rgba(var(--gold-rgb),.13); --edge-strong:rgba(var(--gold-rgb),.4);
    --dashed:rgba(var(--gold-rgb),.18);
    --chip-fill:rgba(var(--gold-rgb),.05); --chip-fill-2:rgba(var(--gold-rgb),.04);
    --search-bg:rgba(12,12,14,.6);    --inset-hi:rgba(255,255,255,.03);    --toptop-bg:rgba(28,28,32,.85);
    --card-shadow:none;               --top-shadow:0 12px 30px -12px rgba(0,0,0,.9);
    --gold-fill:var(--gold);          --gold-text:var(--gold);
    --lamp:#2f9c6a;        --crimson:#fb5a3c;     --focus:var(--gold);   --atmo:1;
  }

  /* ---------- Tier 2 — LIGHT: GOLD on Apple-clean daylight ---------- */
  :root[data-theme="light"]{
    --gold:#b8860b;        --gold-rgb:184,134,11;
    --gold-soft:#8c6200;   --gold-deep:#9a6d00;   --gold-label:#8a6000;
    --heading:#1d1d1f;     --heading-2:#1d1d1f;   --on-gold:#ffffff;
    --cream:#1d1d1f;       --muted:#636366;       --dim:#636366;
    --line:rgba(0,0,0,0.07);
    --panel:#ffffff;       --panel-2:#f5f5f7;
    --panel-edge:rgba(0,0,0,0.10);
    --edge:rgba(0,0,0,0.10); --edge-soft:rgba(0,0,0,0.10); --edge-strong:rgba(0,0,0,0.22);
    --dashed:rgba(0,0,0,0.10);
    --chip-fill:#f5f5f7;   --chip-fill-2:#f5f5f7;
    --search-bg:#ffffff;   --inset-hi:transparent; --toptop-bg:#ffffff;
    --card-shadow:0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05);
    --top-shadow:0 1px 2px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.10);
    --gold-fill:#9a6d00;   --gold-text:#8a6000;
    --lamp:#1a7a3c;        --crimson:#c9261b;     --focus:#9a6d00;       --atmo:0;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#0c0c0d;}
  :root[data-theme="light"] html, :root[data-theme="light"] body{background:#fbfbfd;}
  body{font-family:var(--sans);color:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.5;
    transition:background-color .25s ease,color .25s ease;}

  /* focus ring — GOLD + opaque, both themes */
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
      transition-duration:.01ms!important;scroll-behavior:auto!important;}
    body,.theme-toggle{transition:none!important;}
  }
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* ---------- POSTER FRAME — atmosphere gated to dark via --atmo ---------- */
  .poster{
    position:relative;width:100%;max-width:1400px;margin:0 auto;
    padding:clamp(30px,5.2vw,78px) clamp(20px,6vw,86px) clamp(38px,4vw,60px);
    overflow:hidden;
    background:
      radial-gradient(1200px 720px at 50% -8%, rgba(var(--gold-rgb),.12), rgba(var(--gold-rgb),0) 60%),
      radial-gradient(900px 600px at 88% 18%, rgba(150,152,160,.05), transparent 55%),
      radial-gradient(1100px 900px at 10% 95%, rgba(47,156,106,.05), transparent 55%),
      linear-gradient(180deg,#101012 0%, #0d0d0f 45%, #0a0a0b 100%);
  }
  :root[data-theme="light"] .poster{ background:#fbfbfd; }
  .poster::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--atmo);
    background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(1200px 1000px at 50% 30%, #000 35%, transparent 78%);
            mask-image:radial-gradient(1200px 1000px at 50% 30%, #000 35%, transparent 78%);
  }
  .poster::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--atmo);
    box-shadow:inset 0 0 220px 70px rgba(0,0,0,.72);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
  }
  .poster > *{position:relative;z-index:1}

  /* ---------- TOP BAR + sun/moon toggle ---------- */
  .topbar{display:flex;align-items:center;gap:16px;margin-bottom:24px}
  .wordmark{font-family:var(--serif);font-size:26px;color:var(--heading);text-decoration:none;line-height:1}
  .wordmark span{color:var(--gold-text)}
  .theme-toggle{
    margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:999px;
    border:1px solid var(--panel-edge);background:var(--panel);color:var(--gold-text);
    cursor:pointer;transition:border-color .18s ease,background-color .25s ease,color .18s ease;
  }
  .theme-toggle:hover{border-color:var(--gold-label)}
  .theme-toggle svg{width:20px;height:20px;display:block}
  .theme-toggle .icon-sun{display:none}
  .theme-toggle .icon-moon{display:block}
  :root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
  :root[data-theme="dark"] .theme-toggle .icon-moon{display:none}

  /* ---------- MASTHEAD ---------- */
  .eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-text);display:flex;align-items:center;gap:14px;justify-content:center;}
  .eyebrow::before,.eyebrow::after{content:"";height:1px;width:74px;background:linear-gradient(90deg,transparent,var(--gold-deep))}
  .eyebrow::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
  .title{font-family:var(--serif);font-weight:400;text-align:center;font-size:clamp(58px,9.4vw,128px);line-height:.94;letter-spacing:-.5px;margin:18px 0 6px;color:var(--heading);
    text-shadow:0 2px 40px rgba(var(--gold-rgb),calc(.28 * var(--atmo))), 0 0 1px rgba(var(--gold-rgb),calc(.5 * var(--atmo)));}
  .title em{font-style:italic;color:var(--gold)}
  .deck{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);line-height:1.34;color:var(--cream);text-align:center;max-width:760px;margin:0 auto;opacity:.92;}
  .deck b{color:var(--gold-soft);font-style:italic}
  .meta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
  .chip{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--edge);border-radius:100px;padding:7px 16px;background:var(--chip-fill);}
  .chip b{color:var(--gold-text);font-weight:600}

  /* ---------- SECTION SHELL ---------- */
  section{margin-top:62px}
  .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:26px}
  .sec-num{font-family:var(--mono);font-size:13px;color:var(--gold-label);letter-spacing:.2em}
  .sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(27px,4vw,40px);color:var(--heading-2);line-height:1.04}
  .sec-sub{font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.08em;margin-left:auto;text-transform:uppercase}
  .rule{height:1px;background:linear-gradient(90deg,var(--gold-deep),rgba(var(--gold-rgb),.05) 70%,transparent);margin-top:4px}

  /* ---------- HUB CARD GRID (avatar-less .card variant) ---------- */
  .hubs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px}
  .hubs-3{grid-template-columns:repeat(3,1fr)}
  .card.soon{opacity:.66}
  .card.soon:hover{transform:none;border-color:var(--edge-soft);box-shadow:inset 0 1px 0 var(--inset-hi),var(--card-shadow)}
  .card{background:var(--panel);border:1px solid var(--edge-soft);border-radius:20px;padding:30px 28px 26px;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
    box-shadow:inset 0 1px 0 var(--inset-hi),var(--card-shadow);
    transition:transform .18s ease,box-shadow .25s ease,border-color .18s ease;}
  .card:hover{transform:translateY(-2px);border-color:var(--edge-strong);box-shadow:inset 0 1px 0 var(--inset-hi),var(--hover-glow)}
  .card::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(var(--gold-rgb),calc(.12 * var(--atmo))),transparent 70%);pointer-events:none}
  .card .idx{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep)}
  .card .name{font-family:var(--serif);font-size:clamp(34px,4.4vw,46px);line-height:.98;color:var(--heading);margin-top:8px}
  .card .path{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-top:9px}
  .card .desc{font-size:15px;color:var(--cream);opacity:.9;margin-top:16px;line-height:1.5;font-weight:300}
  .card .owns{margin-top:18px;padding-top:15px;border-top:1px dashed var(--dashed)}
  .card .owns .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--gold-label);text-transform:uppercase}
  .card .owns .v{font-size:14.5px;color:var(--cream);opacity:.92;margin-top:5px;line-height:1.45}
  .card .go{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);display:inline-flex;align-items:center;gap:8px}
  .card .go .chev{font-family:var(--serif);font-size:20px;line-height:0;transition:transform .18s ease}
  .card:hover .go .chev{transform:translateX(4px)}

  /* ---------- FLOW — pipeline with › connectors ---------- */
  .flow{display:flex;align-items:stretch;gap:0;background:var(--panel);
    border:1px solid var(--panel-edge);border-radius:20px;padding:30px 22px;overflow:hidden;
    box-shadow:inset 0 1px 0 var(--inset-hi),var(--card-shadow);}
  .step{flex:1;text-align:center;padding:6px 12px;position:relative}
  .step .n{font-family:var(--mono);font-size:11px;color:var(--gold-deep);letter-spacing:.2em}
  .step .ic{font-size:30px;margin:8px 0 10px;filter:drop-shadow(0 6px 14px rgba(var(--gold-rgb),calc(.35 * var(--atmo))))}
  .step .lab{font-family:var(--serif);font-size:23px;color:var(--heading-2);line-height:1.05}
  .step .d{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.4;font-weight:300}
  .step .d code{font-family:var(--mono);font-size:11.5px;color:var(--gold-soft);background:var(--chip-fill);padding:1px 6px;border-radius:5px}
  .step + .step::before{content:"\203A";position:absolute;left:-9px;top:48px;font-size:30px;color:var(--gold);opacity:.65;font-family:var(--serif)}
  .loop-note{text-align:center;font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.08em;margin-top:14px}
  .loop-note b{color:var(--gold-soft)}

  /* ---------- FOOTER ---------- */
  .foot{margin-top:60px;padding-top:26px;border-top:1px solid var(--panel-edge);display:flex;align-items:center;justify-content:space-between;gap:20px}
  .foot .lockup{font-family:var(--serif);font-size:30px;color:var(--heading-2)}
  .foot .lockup span{color:var(--gold-text)}
  .foot .tag{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.08em;text-align:right;line-height:1.7}
  .foot .tag b{color:var(--gold-soft)}
  .signoff{text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--gold-label);letter-spacing:.2em;margin-top:26px;text-transform:uppercase}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1080px){
    .sec-head{flex-wrap:wrap;row-gap:6px}
    .sec-sub{display:none}
    .hubs{grid-template-columns:1fr}
    .flow{flex-wrap:wrap;gap:24px 6px}
    .step{flex:1 1 150px}
    .step + .step::before{display:none}
  }
  @media (max-width:680px){
    section{margin-top:46px}
    .eyebrow{font-size:11px;letter-spacing:.26em}
    .eyebrow::before,.eyebrow::after{width:32px}
    .meta-row .chip{font-size:11px;padding:6px 12px}
    .flow{flex-direction:column;gap:0}
    .step{flex:1 1 auto;padding:18px 10px;border-bottom:1px dashed rgba(var(--gold-rgb),.14)}
    .step:last-child{border-bottom:none}
    .foot{flex-direction:column;align-items:flex-start;text-align:left;gap:14px}
    .foot .lockup{font-size:clamp(22px,6.5vw,30px)}
    .foot .tag{text-align:left}
  }
