/* Shared by every page of zontakllc.com: colour tokens (light and dark), base rules, the top bar, buttons and the
   status bar. Page layouts live in each page (the homepage) or in article.css. */
/* ---------- tokens: one accent ("blue sky"), calm neutrals, colour only where it means something ---------- */
:root {
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "JetBrains Mono", "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #f7f8fa;  --band: #eef1f5;  --surface: #ffffff;  --sunk: #f2f4f7;
  --text: #15181d;  --muted: #545d6a;  --line: #dde2e9;  --line-strong: #c9d0da;
  --accent: #2563c9;  --on-accent: #ffffff;  --accent-soft: #e6eefb;
  --ok: #276b3f;  --warn: #8a5d00;  --bad: #b42318;
  --grid: rgb(21 24 29 / 0.045);  --glow: rgb(37 99 201 / 0.10);
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px -12px rgb(16 24 40 / 0.12);
  --radius: 14px;
  --max: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 7vw, 88px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181d;  --band: #1a1d23;  --surface: #1f232a;  --sunk: #14161a;
    --text: #d4d7dd;  --muted: #8f96a1;  --line: #2b3038;  --line-strong: #3a404a;
    --accent: #6ea8ff;  --on-accent: #0b1220;  --accent-soft: #1d2a3f;
    --ok: #8cc89b;  --warn: #e5b567;  --bad: #f08a8a;
    --grid: rgb(212 215 221 / 0.035);  --glow: rgb(110 168 255 / 0.09);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 32px -16px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #16181d;  --band: #1a1d23;  --surface: #1f232a;  --sunk: #14161a;
  --text: #d4d7dd;  --muted: #8f96a1;  --line: #2b3038;  --line-strong: #3a404a;
  --accent: #6ea8ff;  --on-accent: #0b1220;  --accent-soft: #1d2a3f;
  --ok: #8cc89b;  --warn: #e5b567;  --bad: #f08a8a;
  --grid: rgb(212 215 221 / 0.035);  --glow: rgb(110 168 255 / 0.09);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 32px -16px rgb(0 0 0 / 0.5);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--accent); color: var(--on-accent); font: 600 14px var(--mono); border-radius: 8px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- top bar: the logo with the tagline, the theme switch, one solid button ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand-word { display: grid; gap: 1px; white-space: nowrap; }
.brand-word b { font: 600 15px/1.2 var(--mono); letter-spacing: -0.01em; }
.brand-word small { font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 539px) { .brand-word small { display: none; } }   /* on a phone the tagline heads the list instead */
@media (max-width: 359px) { .brand-word { display: none; } }         /* the logo alone on the smallest phones */
.top-end { display: flex; align-items: center; gap: 10px; }
.top .btn { min-height: 40px; }
.theme { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.theme:hover { color: var(--text); border-color: var(--line-strong); }
.theme svg { width: 17px; height: 17px; }
.theme .sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .sun { display: block; } :root:not([data-theme="light"]) .theme .moon { display: none; } }
:root[data-theme="dark"] .theme .sun { display: block; } :root[data-theme="dark"] .theme .moon { display: none; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; font: 600 13.5px var(--mono); text-decoration: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn .arr { font-family: var(--sans); }
.cta[aria-current] { background: var(--surface); border-color: var(--line-strong); color: var(--text); }   /* its pane is open: the form's Send is the solid one */

/* the status bar: one quiet line of true facts across the foot of the card (wraps on a phone) */
.statusbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--sunk); font: 400 11.5px/1.6 var(--mono); color: var(--muted); }
.statusbar a { color: var(--text); text-underline-offset: 3px; }
.statusbar .dot { margin-inline: 6px; opacity: .5; font-style: normal; }
.sb-live::before { content: ""; display: inline-block; vertical-align: 1px; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ok); }   /* green = live */