/* CYKI design tokens, shared site-wide (ADR-073 D6, market-hub/README.md).
   Light is the default and ALWAYS the first-visit theme (ruling R4): the OS preference is never read.
   The choice is stored by assets/cyki-theme.js. Dark = [data-theme="dark"] on <html>.
   This file only defines variables and a few kv-* classes. It sets no element styles, so a legacy page
   can link it without changing anything it did not opt into.
   Version marker (used by the blog patch script): cyki-tokens v3 */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/anton-regular.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/space-grotesk-regular.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/space-grotesk-semibold.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600 800;font-display:swap;src:url('/assets/fonts/jetbrains-mono-bold.woff2') format('woff2')}

:root{
  color-scheme:light;
  --bg:#F5F2ED; --surf:#FFFFFF; --text:#0A0A0A; --text2:#3F3D39; --muted:#5F5D57;
  --line:#D9D4CA; --line2:#E6E2D9; --border:#BDB7AB; --pos:#0F7A58; --neg:#C42030; --stripe:#EFEBE3;
  --orange:#FF4A17; --on-orange:#0A0A0A;
  --grid:rgba(10,10,10,.16);
  --glass:rgba(245,242,237,.78); --popglass:rgba(255,253,248,.88); --popsolid:#FFFFFF; --poptx:#0A0A0A;
  --glsolid:#FBFAF8; --gltint:rgba(255,255,255,.62); --gb:14px;
  --veil:rgba(245,242,237,.84); --kvbox:min(1216px,calc(100vw - 64px));
  /* heatmap tints: the one place colour is not a plain token (pale in light, deep in dark) */
  --heat-neg-1:#F6D9DB; --heat-neg-2:#EFBCC1; --heat-neg-3:#E9A3AA;
  --heat-pos-1:#D5EBE2; --heat-pos-2:#B5DBCB; --heat-pos-3:#93CAB4; --heat-zero:#EFEBE3;
  --f-head:Anton,'Arial Narrow',Impact,sans-serif;
  --f-ui:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-num:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0A0A; --surf:#1A1A1A; --text:#F5F2ED; --text2:#C9C6BF; --muted:#888780;
  --line:#262626; --line2:#1f1f1f; --border:#3a3a3a; --pos:#1D9E75; --neg:#E63946; --stripe:#141414;
  --grid:rgba(245,242,237,.20);
  --glass:rgba(10,10,10,.72); --popglass:rgba(34,34,32,.86); --popsolid:#222220; --poptx:#F5F2ED;
  --glsolid:#262624; --gltint:rgba(56,56,54,.60); --veil:rgba(10,10,10,.84);
  --heat-neg-1:#3A1519; --heat-neg-2:#55191F; --heat-neg-3:#701E27;
  --heat-pos-1:#0F2F26; --heat-pos-2:#124136; --heat-pos-3:#14543F; --heat-zero:#141414;
}
/* Inside the glass chapters the original dark figure tokens fail on the blended glass: use the chapter-only lifts (README, "Figure tokens on glass") */
:root[data-theme="dark"] .kvst,:root[data-theme="dark"] main.kvfig{--muted:#A8A69F;--pos:#34C08F;--neg:#FF7882}

@media (max-width:700px){:root{--kvbox:calc(100vw - 32px)}}
/* ---- shared kv-* components (used by hub pages and, over time, legacy pages) ---- */
.kvchip{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4;color:var(--text2);white-space:nowrap;vertical-align:middle}
.kvai{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--text2);border-radius:4px;padding:2px 8px;font-family:var(--f-ui);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4;color:var(--text2);white-space:nowrap;vertical-align:middle}
.kvest{font-family:var(--f-ui);font-size:12px;font-weight:400;color:var(--muted);border:1px solid var(--border);border-radius:3px;padding:1px 5px;white-space:nowrap}
.kvtheme-btn{width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.kvtheme-btn svg{width:22px;height:22px}
.kvtheme-btn .kv-sun{display:none}
:root[data-theme="dark"] .kvtheme-btn .kv-sun{display:block}
:root[data-theme="dark"] .kvtheme-btn .kv-moon{display:none}
.kvtheme-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.kvthemefade{transition:background-color .18s ease,color .18s ease}
@media (prefers-reduced-motion:reduce){.kvthemefade{transition:none}}
/* ---- site header "Market" link (every page; hub pages carry it in their own nav) ---- */
.kvmlink{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--f-num);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text) !important;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;box-sizing:border-box}
.kvmlink:hover{border-bottom-color:var(--text)}
.kvmlink:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* ---- THE exposed blueprint grid: ONE definition for every page (hub, static pages, blog, published articles). 2026-10-08 fix.
   Markup is the markup of the hub itself (blog-system/cyki-blog/site-chrome-lib.php writes it into legacy pages; market-lib.php mkt_grid()/mkt_hl() into the hub):
   .kvgd > .kvgv > 5 x .kvv (vertical hairlines at 0/25/50/75/100%)  and  .kvhl > .kvln + .kvbx > 2 x .kvmk (orange markers) + .kvlbl (mono "Spec" label).
   The draw-in animation lives in market.css and only runs where market.js sets .kvjs; everywhere else the grid is simply drawn. ---- */
.kvgd{position:absolute;inset:0;z-index:-1;pointer-events:none}
.kvgv{position:absolute;top:0;bottom:0;left:50%;width:min(1216px,calc(100% - 64px));transform:translateX(-50%)}
.kvv{position:absolute;top:0;bottom:0;width:1px;background:var(--grid)}
.kvhl{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:1}
.kvln{position:absolute;inset:0;background:var(--grid)}
.kvbx{position:absolute;left:50%;top:0;width:min(1216px,calc(100% - 64px));transform:translateX(-50%);height:0}
.kvmk{position:absolute;top:0;width:7px;height:7px;background:#FF4A17;transform:translate(-50%,-50%)}
.kvlbl{position:absolute;left:22px;top:-9px;font-style:normal;font-family:var(--f-num);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);background:var(--bg);padding:0 6px;line-height:18px;white-space:nowrap}
.kvrow{position:relative}
/* spacer above the first Spec line on pages that carry the line right under the header (keeps the label clear of the sticky bar) */
.kvrow.kvtop{height:22px}
.kvrow.kvtop .kvhl{top:22px}
@media (max-width:700px){.kvgv,.kvbx{width:calc(100% - 32px)}}
/* ---- ONE footer for every page (static pages, both blog templates, published articles, /watch/**, /market/**).
   Markup: blog-system/cyki-blog/site-footer.html. tests/footer-identity.py asserts every page carries it byte for byte.
   Compact: wordmark + socials on the left, four labelled columns on the right, one legal line at the bottom.
   Anton for the wordmark only, Space Grotesk for links, mono for the small legal line. ---- */
footer.kvfoot{position:relative;z-index:1;clear:both;border:0;margin:0;padding:0;background:var(--bg);letter-spacing:0;color:var(--text);font-family:var(--f-ui);font-size:15px;line-height:1.4;text-align:left}
.kvfoot ul{list-style:none;margin:0;padding:0}
.kvfoot li{margin:0;padding:0}
.kvfoot-in{box-sizing:border-box;max-width:1280px;margin:0 auto;padding:44px 32px 0}
.kvfoot-top{display:flex;flex-wrap:wrap;gap:32px 56px;justify-content:space-between;align-items:flex-start}
.kvfoot-brandcol{flex:0 0 auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.kvfoot .kvfoot-brand{font-family:var(--f-head);font-weight:400;font-size:34px;letter-spacing:.04em;line-height:1;color:var(--text);text-decoration:none}
.kvfoot-social{display:flex;gap:6px;margin-left:-10px}
.kvfoot .kvfoot-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text2);border-radius:6px}
.kvfoot .kvfoot-social a:hover{color:var(--text)}
.kvfoot-social svg{width:20px;height:20px;display:block}
.kvfoot nav.kvfoot-cols{letter-spacing:0;font-family:var(--f-ui);font-size:15px;flex:1 1 560px;max-width:760px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.kvfoot-h{margin:0 0 6px;font-family:var(--f-num);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kvfoot .kvfoot-cols a{display:flex;align-items:center;min-height:36px;color:var(--text2);font-family:var(--f-ui);font-size:15px;font-weight:500;text-decoration:none}
.kvfoot .kvfoot-cols a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.kvfoot a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.kvfoot-bar{margin-top:40px;border-top:1px solid var(--line);padding:16px 0 22px}
.kvfoot .kvfoot-bar p{margin:0;max-width:none;font-family:var(--f-num);font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--muted)}
.kvfoot-hub{margin-top:36px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:2px}
.kvfoot .kvfoot-hub p{margin:0;max-width:none;font-family:var(--f-num);font-size:11px;line-height:1.6;color:var(--muted)}
.kvfoot-hub nav{display:flex;flex-wrap:wrap;gap:0 22px;font-family:var(--f-ui);font-size:14px}
.kvfoot .kvfoot-hub nav a{display:inline-flex;align-items:center;min-height:36px;color:var(--text2);font-size:13px;text-decoration:none}
.kvfoot .kvfoot-hub nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.kvfoot-hub+.kvfoot-bar{margin-top:0;border-top:0;padding-top:4px}
@media (max-width:860px){.kvfoot nav.kvfoot-cols{flex-basis:100%;max-width:none}}
@media (max-width:700px){
  .kvfoot .kvfoot-in{padding:32px 16px 0}
  .kvfoot nav.kvfoot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  .kvfoot .kvfoot-cols a{min-height:44px}
  .kvfoot-bar{margin-top:28px;padding-bottom:28px}
}
/* home page only: the quiet small-print block under the footer (publisher identity, sign-in disclosure, support) */
.kvsmall{position:relative;z-index:1;box-sizing:border-box;max-width:none;margin:0;padding:22px max(32px,calc((100% - 1216px) / 2)) 40px;background:var(--bg);border-top:1px solid var(--line);font-family:var(--f-num);font-size:11px;line-height:1.6;color:var(--muted)}
.kvsmall p{margin:0 0 8px;max-width:78em}
.kvsmall a{color:var(--text2);text-decoration:underline}
.kvsmall strong{color:var(--text2);font-weight:600}
@media (max-width:700px){.kvsmall{padding:20px 16px 96px}}