/* Open Steppe — homepage demos, shared layer.
 * Self-hosted fonts (latin + cyrillic). Zero external requests.
 * Token names per CANN spec §3.6. Scheme values are demo placeholders
 * pending Mister Pixel brand book; RU strings are draft pending native review. */

/* ---------- Fonts ---------- */
@font-face { font-family:"Spectral"; src:url("fonts/spectral-latin-300-normal.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-latin-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-cyrillic-300-normal.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-cyrillic-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-cyrillic-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-cyrillic-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Spectral"; src:url("fonts/spectral-cyrillic-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ---------- Tokens: schemes × modes ---------- */
:root {
  /* Scheme 1 — Paper & Ink (default): neutral monochrome */
  --color-brand-light:    oklch(0.972 0.004 95);
  --color-brand-dark:     oklch(0.185 0.010 95);
  --color-brand-primary:  oklch(0.30 0.010 95);   /* accent */
  --color-text-primary:   oklch(0.20 0.010 95);
  --color-text-secondary: oklch(0.46 0.010 95);
  --color-text-inverse:   oklch(0.975 0.004 95);
  --color-surface-card:   oklch(0.988 0.003 95);
  --color-semantic-live:  oklch(0.55 0.19 27);
  --rule:        oklch(0.86 0.008 95);
  --rule-strong: oklch(0.30 0.010 95);
  --img-tint: none;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Spectral", Georgia, serif;
  --font-ui:      "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}
[data-scheme="steppe"] {
  --color-brand-light:    oklch(0.965 0.013 85);
  --color-brand-primary:  oklch(0.50 0.115 55);   /* ochre */
  --color-brand-dark:     oklch(0.22 0.030 55);
  --color-text-primary:   oklch(0.22 0.018 70);
  --color-text-secondary: oklch(0.47 0.025 65);
  --color-surface-card:   oklch(0.982 0.010 85);
  --rule:        oklch(0.86 0.018 80);
  --rule-strong: oklch(0.50 0.115 55);
}
[data-scheme="alatau"] {
  --color-brand-light:    oklch(0.970 0.006 230);
  --color-brand-primary:  oklch(0.43 0.085 230);  /* glacial blue */
  --color-brand-dark:     oklch(0.21 0.030 240);
  --color-text-primary:   oklch(0.21 0.015 240);
  --color-text-secondary: oklch(0.46 0.020 235);
  --color-surface-card:   oklch(0.985 0.005 230);
  --rule:        oklch(0.86 0.012 230);
  --rule-strong: oklch(0.43 0.085 230);
}
[data-mode="dark"] {
  --color-brand-light:    oklch(0.165 0.008 95);
  --color-brand-dark:     oklch(0.94 0.005 95);
  --color-brand-primary:  oklch(0.82 0.010 95);
  --color-text-primary:   oklch(0.90 0.006 95);
  --color-text-secondary: oklch(0.64 0.010 95);
  --color-text-inverse:   oklch(0.16 0.008 95);
  --color-surface-card:   oklch(0.205 0.008 95);
  --rule:        oklch(0.32 0.008 95);
  --rule-strong: oklch(0.72 0.010 95);
  --img-tint: brightness(0.86) contrast(1.02);
}
[data-mode="dark"][data-scheme="steppe"] {
  --color-brand-light: oklch(0.170 0.014 60);
  --color-brand-primary: oklch(0.72 0.105 60);
  --color-brand-dark: oklch(0.93 0.015 80);
  --color-text-primary: oklch(0.90 0.010 80);
  --color-text-secondary: oklch(0.64 0.022 70);
  --color-surface-card: oklch(0.210 0.014 60);
  --rule: oklch(0.33 0.016 60); --rule-strong: oklch(0.72 0.105 60);
}
[data-mode="dark"][data-scheme="alatau"] {
  --color-brand-light: oklch(0.170 0.012 240);
  --color-brand-primary: oklch(0.72 0.075 225);
  --color-brand-dark: oklch(0.93 0.008 230);
  --color-text-primary: oklch(0.90 0.006 230);
  --color-text-secondary: oklch(0.64 0.015 232);
  --color-surface-card: oklch(0.210 0.012 240);
  --rule: oklch(0.33 0.012 238); --rule-strong: oklch(0.72 0.075 225);
}

/* ---------- Base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  background: var(--color-brand-light);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
img, svg { display:block; max-width:100%; }
img { filter: var(--img-tint); }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--color-brand-dark); color:var(--color-text-inverse); padding:8px 16px; font-family:var(--font-ui); font-size:14px; z-index:100; }
.skip-link:focus { left:0; }

.kicker { font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-brand-primary); }
.byline { font-family:var(--font-ui); font-size:12.5px; color:var(--color-text-secondary); }
.byline b { font-weight:500; color:var(--color-text-primary); }
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--color-semantic-live); margin-right:6px; vertical-align:1px; }

/* ---------- Common editorial components ---------- */
.art { background: oklch(0.90 0.005 95); overflow:hidden; }
.art img { width:100%; height:100%; object-fit:cover; }
.cap { font-family:var(--font-ui); font-size:11.5px; color:var(--color-text-secondary); padding-top:7px; }

.band-head { display:flex; align-items:baseline; gap:16px; margin-bottom:22px; }
.band-head h2 { font-family:var(--font-display); font-weight:600; font-size:24px; }
.band-head .hrule { flex:1; height:1px; background:var(--rule); }
.band-head a { font-family:var(--font-ui); font-size:13px; color:var(--color-text-secondary); white-space:nowrap; }

.card h3 { font-family:var(--font-display); font-weight:500; line-height:1.24; }
.card .kicker { display:inline-block; margin-bottom:7px; }
.card p.dek { font-size:15px; color:var(--color-text-secondary); margin-top:6px; }
.card .byline { margin-top:9px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }

/* Numbered most-read list */
.mostread { counter-reset: mr; }
.mostread li { list-style:none; counter-increment: mr; display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.mostread li::before { content: counter(mr, decimal-leading-zero); font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--color-brand-primary); min-width:26px; }
.mostread h3 { font-family:var(--font-display); font-weight:500; font-size:17.5px; line-height:1.3; }

/* Dark ink block */
.inkblock { background:var(--color-brand-dark); color:var(--color-text-inverse); }
.inkblock .kicker { color:var(--color-brand-light); opacity:.75; }
.inkblock .byline { color:var(--color-text-inverse); opacity:.7; }
.inkblock .byline b { color:var(--color-text-inverse); }

footer.site {
  border-top:2px solid var(--rule-strong); margin-top:24px; padding:28px 0 110px;
  font-family:var(--font-ui); font-size:13px; color:var(--color-text-secondary);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}

/* ---------- Article page ---------- */
.article-hero { max-width:1180px; margin:0 auto; padding:40px 24px 0; }
.article-hero .kicker { font-size:12px; }
.article-hero h1 { font-family:var(--font-display); font-weight:300; font-size:clamp(34px,4.8vw,58px); line-height:1.08; margin:14px 0 18px; max-width:24ch; }
.article-hero .standfirst { font-size:20px; font-weight:300; line-height:1.5; max-width:56ch; color:var(--color-text-primary); }
.article-hero .meta { display:flex; gap:18px; flex-wrap:wrap; margin:20px 0 26px; font-family:var(--font-ui); font-size:13px; color:var(--color-text-secondary); }
.article-hero .meta b { font-weight:500; color:var(--color-text-primary); }
.article-hero .art { aspect-ratio: 21/9; }
.article-body { max-width:680px; margin:0 auto; padding:40px 24px 20px; font-size:18px; line-height:1.68; }
.article-body p { margin-bottom:22px; }
.article-body p:first-of-type::first-letter { font-family:var(--font-display); font-size:58px; float:left; line-height:.83; padding:6px 10px 0 0; font-weight:500; color:var(--color-brand-primary); }
.article-body h2 { font-family:var(--font-display); font-weight:600; font-size:24px; margin:36px 0 14px; }
.pullquote { border-left:3px solid var(--color-brand-primary); margin:32px 0; padding:6px 0 6px 24px; font-family:var(--font-display); font-weight:300; font-size:24px; line-height:1.38; font-style:italic; }
.article-foot { max-width:680px; margin:0 auto; padding:8px 24px 30px; font-family:var(--font-ui); font-size:12.5px; color:var(--color-text-secondary); border-bottom:1px solid var(--rule); }
.related { max-width:1180px; margin:0 auto; padding:40px 24px 10px; }

/* ---------- Demo control bar (demo chrome only, not part of theme) ---------- */
.demo-bar {
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; align-items:center; gap:6px;
  background:var(--color-surface-card); border:1px solid var(--rule);
  border-radius:999px; padding:7px 10px;
  box-shadow:0 6px 24px oklch(0.1 0 0 / 0.16);
  font-family:var(--font-ui); font-size:12px;
}
.demo-bar button {
  border:1px solid var(--rule); background:transparent; color:var(--color-text-primary);
  font-family:var(--font-ui); font-size:11.5px; font-weight:500;
  border-radius:999px; padding:5px 11px; cursor:pointer;
}
.demo-bar button[aria-pressed="true"] { background:var(--color-brand-dark); color:var(--color-text-inverse); border-color:var(--color-brand-dark); }
.demo-bar .swatch { width:20px; height:20px; border-radius:50%; padding:0; border:2px solid var(--rule); }
.demo-bar .swatch[aria-pressed="true"] { border-color:var(--color-brand-dark); box-shadow:0 0 0 2px var(--color-surface-card) inset; }
.demo-bar .sw-paper  { background:oklch(0.35 0.01 95); }
.demo-bar .sw-steppe { background:oklch(0.50 0.115 55); }
.demo-bar .sw-alatau { background:oklch(0.43 0.085 230); }
.demo-bar .sep { width:1px; height:18px; background:var(--rule); margin:0 2px; }
.demo-bar .home { padding:5px 9px; border:0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}