/* ZZ-CI Shared Tokens — for all LPK variants */
@font-face{font-family:'Display';src:url('/_shared/fonts/NotoSerifDisplay_ExtraCondensed-ExtraLight.ttf') format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:'Display';src:url('/_shared/fonts/NotoSerifDisplay_ExtraCondensed-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Display';src:url('/_shared/fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'PP';src:url('/_shared/fonts/PPNeueMontreal-Hairline.otf') format('opentype');font-weight:100;font-display:swap}
@font-face{font-family:'PP';src:url('/_shared/fonts/PPNeueMontreal-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'PP';src:url('/_shared/fonts/PPNeueMontreal-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'PP';src:url('/_shared/fonts/PPNeueMontreal-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'PP';src:url('/_shared/fonts/PPNeueMontreal-Bold.otf') format('opentype');font-weight:700;font-display:swap}

/* ────────── DARK (default) — ZZ-CI ────────── */
:root{
  --bg:#22201f;--bg-2:#2d2a27;--bg-3:#1a1817;
  --fg:#fffada;--fg-2:rgba(255,250,218,.62);--fg-3:rgba(255,250,218,.32);
  --line:rgba(255,250,218,.09);
  --accent:#A53A2A;--accent-h:#c14d3a;
  --positive:#cafcca;
  --positive-dim:rgba(202,252,202,.18);
  /* Gradient endpoints — theme-aware */
  --grad-warm-2:#332e2a;
  --grad-warm-3:#3a342c;
  --grad-warm-red:#3a2e2c;
  --display:'Display',Georgia,serif;
  --pp:'PP',-apple-system,system-ui,sans-serif;
  --content-max:1240px;
}

/* ────────── LIGHT — ZZ-CI inverted, same accent ────────── */
[data-mode="light"]{
  --bg:#fffada;--bg-2:#f0eac5;--bg-3:#e8e0b5;
  --fg:#22201f;--fg-2:rgba(34,32,31,.68);--fg-3:rgba(34,32,31,.40);
  --line:rgba(34,32,31,.12);
  --accent:#A53A2A;--accent-h:#8a2d20;
  --positive:#2d7a3a;            /* readable green on cream */
  --positive-dim:rgba(45,122,58,.14);
  --grad-warm-2:#e8e0b5;
  --grad-warm-3:#e0d5a0;
  --grad-warm-red:#ead2b8;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:var(--pp);font-weight:300;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;transition:background .35s ease,color .35s ease}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* ─── ZZ Wordmark (typographic, no PNG) ───
   Rule (feedback_zz_logo_rules.md): Z bold (700), ABA/INGO regular (400), & ExtraLight (200)
   Display ExtraCondensed. Single line, single color (inherits parent color). */
.zz-wordmark{font-family:var(--display);font-weight:400;font-size:22px;line-height:1;letter-spacing:-.040em;white-space:nowrap;display:inline-block;color:inherit;text-transform:none;-webkit-font-smoothing:antialiased}
.zz-wordmark b{font-weight:700}
.zz-wordmark .amp{font-weight:200;margin:0 .14em;color:inherit}
.zz-wordmark.sm{font-size:19px;letter-spacing:-.034em}
.zz-wordmark.lg{font-size:44px;letter-spacing:-.05em}
.zz-wordmark.xl{font-size:72px;letter-spacing:-.055em}

/* ─── Topbar (full-bleed bg, inner aligned to content) ─── */
.zz-topbar{position:fixed;top:0;left:0;right:0;z-index:50;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:.5px solid var(--line)}
.zz-topbar-inner{max-width:var(--content-max);margin:0 auto;padding:.85rem 2rem;display:flex;align-items:center;justify-content:space-between;font-family:var(--pp);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);gap:1.5rem}
.zz-topbar .brand{display:flex;align-items:center;gap:.7rem;color:var(--fg)}
.zz-topbar .brand .slash{color:var(--fg-3);font-size:16px;font-weight:200}
.zz-topbar .brand .tag{color:var(--accent);font-weight:400;letter-spacing:.18em;font-size:11px}
.zz-topbar nav{display:flex;gap:1.4rem}
.zz-topbar nav a{color:var(--fg-2);transition:color .2s;font-size:11.5px;letter-spacing:.16em}
.zz-topbar nav a:hover{color:var(--fg)}
.zz-topbar nav a.on{color:var(--accent)}
.zz-topbar .right{display:flex;align-items:center;gap:1rem}
.zz-topbar .right .live{display:flex;align-items:center;gap:.5rem;color:var(--positive);font-size:11.5px}
.zz-topbar .right .live .dot{width:7px;height:7px;border-radius:50%;background:var(--positive);box-shadow:0 0 10px var(--positive);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Theme toggle */
.theme-toggle{appearance:none;background:transparent;border:.5px solid var(--line);color:var(--fg-2);width:30px;height:30px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,background .2s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--fg-3);color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.theme-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:block}
[data-mode="light"] .theme-toggle .sun{display:block}
[data-mode="light"] .theme-toggle .moon{display:none}

@media (max-width:780px){
  .zz-topbar-inner{padding:.75rem 1.25rem;gap:.8rem}
  .zz-topbar .brand .tag{display:none}
  .zz-topbar nav{display:none}
  .zz-topbar .right .live{font-size:10.5px}
}

/* ─── Footer ─── */
.zz-footer{padding:2.5rem 2rem;border-top:.5px solid var(--line);font-family:var(--pp);font-size:11.5px;letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase;background:var(--bg)}
.zz-footer-inner{max-width:var(--content-max);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;align-items:center}
.zz-footer .links{display:flex;gap:1.5rem;flex-wrap:wrap}
.zz-footer .links a{color:var(--fg-3);transition:color .2s}
.zz-footer .links a:hover{color:var(--accent)}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--pp);font-weight:400;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:.95rem 1.6rem;border:0;border-radius:999px;cursor:pointer;text-decoration:none;transition:all .2s}
.btn-primary{background:var(--accent);color:#fffada}
.btn-primary:hover{background:var(--accent-h);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--fg);border:.5px solid var(--line)}
.btn-ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-fg{background:var(--fg);color:var(--bg)}
.btn-fg:hover{background:var(--fg-2);color:var(--bg)}

@media (prefers-reduced-motion:reduce){.dot{animation:none!important}html,body{transition:none!important}}