/* Future Vision — design tokens (B4). Hybrid: cinematic dark shell + editorial
   reading. "The Narrow Path We Tread" — cool near-black, cold starlight accent,
   a single warm dawn note. Distinctive, restrained; not a default WP theme. */

:root {
	--fv-bg:        #090b10;   /* deep cool near-black */
	--fv-bg-2:      #0e1118;
	--fv-surface:   #141925;   /* cards, nav */
	--fv-surface-2: #1b2230;
	--fv-line:      rgba(255,255,255,0.09);
	--fv-line-2:    rgba(255,255,255,0.16);

	--fv-ink:       #e9ecf4;   /* primary text on dark */
	--fv-ink-soft:  #b8c0d4;
	--fv-muted:     #838ca6;

	--fv-accent:    #74a9ff;   /* cold starlight blue — links, focus, primary CTA */
	--fv-accent-ink:#0a1020;
	--fv-dawn:      #e7b24a;   /* warm dawn — used sparingly */

	/* Editorial reading "page" (light, inside the dark shell) */
	--fv-paper:     #f7f4ec;
	--fv-paper-ink: #1c1b18;
	--fv-paper-soft:#55514a;
	--fv-paper-line:#d8d2c4;
	--fv-mark:      #fff2bf;   /* :target highlight */

	--fv-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--fv-font-body:    Georgia, "Times New Roman", serif;
	--fv-font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fv-maxw-read: 44rem;
	--fv-maxw:      72rem;
	--fv-nav-h:     3.25rem;
	/* Height of WordPress's admin bar, as an offset for our sticky elements.
	   0 by default; set below only when WP actually renders the bar. */
	--fv-admin-h:   0px;
	--fv-radius:    10px;
	--fv-shadow:    0 10px 40px rgba(0,0,0,0.45);
}

*, *::before, *::after { box-sizing: border-box; }

.fv-shell {
	margin: 0;
	background:
		radial-gradient(1200px 600px at 70% -10%, rgba(116,169,255,0.10), transparent 60%),
		radial-gradient(900px 500px at 10% 110%, rgba(231,178,74,0.06), transparent 60%),
		var(--fv-bg);
	color: var(--fv-ink);
	font-family: var(--fv-font-ui);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

.fv-wrap { max-width: var(--fv-maxw); margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--fv-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--fv-accent); outline-offset: 2px; border-radius: 3px; }

.fv-btn {
	display: inline-block; font-family: var(--fv-font-ui); font-size: 0.95rem; font-weight: 600;
	padding: 0.6rem 1.15rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
}
.fv-btn-primary { background: var(--fv-accent); color: var(--fv-accent-ink); }
.fv-btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.fv-btn-ghost { background: transparent; border-color: var(--fv-line-2); color: var(--fv-ink); }
.fv-btn-ghost:hover { background: var(--fv-surface); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- WordPress admin-bar offset -------------------------------------------
   Every page behind the login gate is viewed by a logged-in user, so WordPress
   renders #wpadminbar: position:fixed, z-index 99999, plus a forced
   `html { margin-top: 32px !important }`.

   Our sticky top nav used `top: 0`, so at scroll-0 it sat below the bar and
   looked correct — then on the first scroll it stuck to viewport top and slid
   UNDERNEATH the admin bar, which paints over it. The nav appeared to vanish
   on scroll (reported by Greg 2026-07-27). Pre-existing on every gated view:
   the doc pages, /characters/ and /readthrough/.

   Below 783px WordPress switches the bar to position:absolute so it scrolls
   away with the page — there the offset must go back to 0, or the nav would
   float a 46px gap below the viewport top. */
body.admin-bar { --fv-admin-h: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar { --fv-admin-h: 0px; }
}