/*
 * app.css — design system shared by index.html, gallery.html and how.html:
 * the ChicagoFLF display face, the film-grain overlay, the topbar/nav chrome,
 * the twinkling starfield, and a couple of shared utilities.
 *
 * Loaded from each page's <head> *before* its inline <style>, so a page can
 * still override any of these (e.g. gallery's darker --panel) and keep its own
 * page-specific layout inline. The custom properties these rules read
 * (--ink, --dim, --accent, --font-display, …) are defined in each page's
 * inline :root, which is where the per-page palette deliberately diverges.
 */

@font-face {
    font-family: "ChicagoFLF";
    src: url("fonts/ChicagoFLF.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

/* Film-grain noise overlay. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Topbar / nav chrome ---- */
.topbar .brand {
    font-family: var(--font-display); font-weight: normal;
    font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.topbar .brand:hover { color: #eef0ff; }
.topbar .nav { display: flex; gap: 18px; font-size: 13px; }
.topbar .nav a { color: var(--dim); text-decoration: none; }
.topbar .nav a:hover { color: var(--accent); }
.topbar .nav a[aria-current="page"] { color: var(--ink); }
.topbar .brand:focus-visible, .topbar .nav a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

/* ---- Wordmark: the lowercase domain set as the logotype, "after-dark.fun".
   "after" and "dark" take the host element's ink color; the hyphen is dimmed so
   the two words stay the anchors; the dot and "fun" are the favicon marble's
   yellow (#ffff00) — the site's one brand-only spark (every functional accent
   stays --accent blue). The dot is a small glowing phosphor orb. ---- */
.wordmark { font-family: var(--font-display); font-weight: normal; white-space: nowrap; }
.wm-hy  { color: var(--dim); }
.wm-tld { color: var(--marble, #ffff00); }
.wm-dot {
    color: var(--marble, #ffff00);
    text-shadow: 0 0 6px rgba(255, 255, 0, 0.75), 0 0 16px rgba(255, 255, 0, 0.35);
}
.wordmark:hover .wm-dot {
    text-shadow: 0 0 9px rgba(255, 255, 0, 0.95), 0 0 22px rgba(255, 255, 0, 0.5);
}

/* ---- Shared utilities ---- */
.poster.hidden { opacity: 0; pointer-events: none; }
footer .disclaimer { max-width: 64ch; margin: 0 auto 14px; opacity: 0.85; }
