/* ========================================================================== ZEITGEIST WIRE — design tokens Light is now default (set via [data-mode="light"] on in header.php and as the JS fallback in theme.js). Dark remains fully supported via the toggle. Variables below are still declared dark-first in :root for legacy reasons; light values in the override block underneath are what render on first load. ========================================================================== */ :root { /* dark (default) */ --zg-bg: #15140F; --zg-bg-raised: #1C1A14; --zg-bg-sunken: #0E0D09; --zg-ink: #EDE9DF; --zg-ink-muted: #B8B5A8; --zg-ink-faint: #8C8979; --zg-line: #33312A; --zg-line-strong: #46443A; --zg-void: #E0564A; --zg-void-ink: #15140F; --zg-indexed: #3FAE7E; --zg-indexed-ink: #0E0D09; --zg-font-display: "Oswald", "Arial Narrow", Arial, sans-serif; --zg-font-body: "Inter", Arial, sans-serif; --zg-font-mono: "IBM Plex Mono", "Courier New", monospace; --zg-max: 1080px; --zg-radius: 2px; } [data-mode="light"] { --zg-bg: #EFEDE6; --zg-bg-raised: #FAF9F5; --zg-bg-sunken: #E3E0D6; --zg-ink: #191814; --zg-ink-muted: #52504A; --zg-ink-faint: #75726A; --zg-line: #C9C5B8; --zg-line-strong: #B0AC9C; --zg-void: #C2362B; --zg-void-ink: #EFEDE6; --zg-indexed: #1F6F4A; --zg-indexed-ink: #EFEDE6; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.zg-body { margin: 0; background: var(--zg-bg); color: var(--zg-ink); font-family: var(--zg-font-body); font-size: 16px; line-height: 1.55; transition: background 0.15s ease, color 0.15s ease; } @media (prefers-reduced-motion: reduce) { body.zg-body, * { transition: none !important; animation: none !important; } } a { color: var(--zg-ink); text-decoration: none; } a:hover { color: var(--zg-void); } img { max-width: 100%; display: block; } .zg-mono { font-family: var(--zg-font-mono); letter-spacing: 0.04em; } .zg-eyebrow { font-family: var(--zg-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zg-ink-faint); } .zg-wrap { max-width: var(--zg-max); margin: 0 auto; padding: 0 24px; } /* ---------- masthead ---------- */ .zg-masthead { background: var(--zg-bg-sunken); border-bottom: 1px solid var(--zg-line); } .zg-masthead__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; max-width: var(--zg-max); margin: 0 auto; gap: 16px; } .zg-wordmark { font-family: var(--zg-font-display); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--zg-ink); white-space: nowrap; } .zg-nav { display: flex; align-items: center; gap: 20px; font-family: var(--zg-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zg-ink-faint); flex-wrap: wrap; } .zg-nav a { color: var(--zg-ink-faint); } .zg-nav a:hover { color: var(--zg-ink); } .zg-nav a.is-active { color: var(--zg-ink); border-bottom: 2px solid var(--zg-void); padding-bottom: 2px; } .zg-mode-toggle { font-family: var(--zg-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; border: 1px solid var(--zg-line-strong); color: var(--zg-ink-faint); padding: 5px 10px; cursor: pointer; border-radius: var(--zg-radius); } .zg-mode-toggle:hover { color: var(--zg-ink); border-color: var(--zg-ink-faint); } .zg-mode-toggle:focus-visible { outline: 2px solid var(--zg-void); outline-offset: 2px; } .zg-strip { border-bottom: 1px solid var(--zg-line); padding: 6px 24px; font-family: var(--zg-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zg-ink-faint); display: flex; justify-content: space-between; max-width: var(--zg-max); margin: 0 auto; } /* ---------- badges ---------- */ .zg-badge { display: inline-block; font-family: var(--zg-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: var(--zg-radius); } .zg-badge--void { background: var(--zg-void); color: var(--zg-void-ink); } .zg-badge--indexed { background: var(--zg-indexed); color: var(--zg-indexed-ink); } /* ---------- dispatch hero ---------- */ .zg-hero { padding: 28px 24px; border-bottom: 1px solid var(--zg-line); max-width: var(--zg-max); margin: 0 auto; } .zg-hero__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .zg-hero__meta-text { font-family: var(--zg-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--zg-ink-faint); text-transform: uppercase; } .zg-hero__headline { font-family: var(--zg-font-display); font-size: clamp(24px, 4vw, 34px); font-weight: 700; line-height: 1.18; text-transform: uppercase; letter-spacing: -0.005em; max-width: 720px; margin: 0 0 16px; } .zg-hero__headline a { color: inherit; } .zg-hero__headline a:hover { color: var(--zg-void); } /* ---------- sparkline ---------- */ .zg-spark-caption { font-family: var(--zg-font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zg-ink-faint); margin-top: 4px; } /* ---------- dispatch grid / cards ---------- */ .zg-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--zg-max); margin: 0 auto; } .zg-card { padding: 18px 20px; border-right: 1px solid var(--zg-line); border-bottom: 1px solid var(--zg-line); } .zg-grid > .zg-card:nth-child(3n) { border-right: none; } .zg-card__tag { font-family: var(--zg-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; } .zg-card__tag--void { color: var(--zg-void); } .zg-card__tag--indexed { color: var(--zg-indexed); } .zg-card__title { font-family: var(--zg-font-display); font-size: 17px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; line-height: 1.25; } .zg-card__title a { color: var(--zg-ink); } .zg-card__title a:hover { color: var(--zg-void); } .zg-card__excerpt { font-family: var(--zg-font-body); font-size: 13px; color: var(--zg-ink-muted); line-height: 1.5; margin: 0 0 10px; } .zg-card__meta { font-family: var(--zg-font-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--zg-ink-faint); margin-top: 8px; } @media (max-width: 860px) { .zg-grid { grid-template-columns: repeat(2, 1fr); } .zg-grid > .zg-card:nth-child(3n) { border-right: 1px solid var(--zg-line); } .zg-grid > .zg-card:nth-child(2n) { border-right: none; } } @media (max-width: 560px) { .zg-grid { grid-template-columns: 1fr; } .zg-grid > .zg-card { border-right: none !important; } .zg-masthead__row { flex-direction: column; align-items: flex-start; } .zg-strip { flex-direction: column; gap: 2px; } } /* ---------- single dispatch ---------- */ .zg-single { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; } .zg-single__title { font-family: var(--zg-font-display); font-size: clamp(26px, 4vw, 38px); text-transform: uppercase; font-weight: 700; line-height: 1.18; margin: 14px 0 18px; } .zg-single__body { font-size: 17px; line-height: 1.7; } .zg-single__body p { margin: 0 0 1.2em; } .zg-single__body h2 { font-family: var(--zg-font-display); text-transform: uppercase; font-size: 20px; border-bottom: 1px solid var(--zg-line); padding-bottom: 6px; margin: 2em 0 0.8em; } .zg-single__body blockquote { border-left: 3px solid var(--zg-void); margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em; color: var(--zg-ink-muted); font-style: italic; } .zg-single__body a { color: var(--zg-indexed); text-decoration: underline; } .zg-single__body a:hover { color: var(--zg-void); } .zg-single__body code { font-family: var(--zg-font-mono); background: var(--zg-bg-sunken); padding: 2px 5px; border-radius: var(--zg-radius); font-size: 0.9em; } /* ---------- archive ---------- */ .zg-archive-list { max-width: var(--zg-max); margin: 0 auto; padding: 0 24px 48px; } .zg-archive-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--zg-line); } .zg-archive-row__title { font-family: var(--zg-font-display); font-size: 16px; text-transform: uppercase; font-weight: 700; } .zg-archive-row__title a { color: var(--zg-ink); } .zg-archive-row__title a:hover { color: var(--zg-void); } .zg-archive-row__date { font-family: var(--zg-font-mono); font-size: 11px; color: var(--zg-ink-faint); white-space: nowrap; } /* ---------- sidebar ---------- */ .zg-sidebar { border-left: 1px solid var(--zg-line); padding: 0 0 0 20px; } .zg-sidebar__heading { font-family: var(--zg-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zg-ink-faint); border-bottom: 1px solid var(--zg-line); padding-bottom: 8px; margin-bottom: 12px; } .zg-ticker-item { display: block; padding: 9px 0; border-bottom: 1px solid var(--zg-line); font-size: 13px; } .zg-ticker-item:last-child { border-bottom: none; } .zg-ticker-item__term { font-weight: 600; } .zg-ticker-item__sub { font-family: var(--zg-font-mono); font-size: 10px; color: var(--zg-ink-faint); display: block; margin-top: 2px; } /* ---------- footer ---------- */ .zg-footer { border-top: 1px solid var(--zg-line); background: var(--zg-bg-sunken); padding: 24px 24px 28px; } .zg-footer__row { max-width: var(--zg-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--zg-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zg-ink-faint); } /* ---------- focus ---------- */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--zg-void); outline-offset: 2px; } /* ---------- generic page ---------- */ .zg-page { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; } .zg-page__title { font-family: var(--zg-font-display); font-size: clamp(26px, 4vw, 36px); text-transform: uppercase; font-weight: 700; margin: 0 0 20px; }