/* ==========================================================================
   The Larson Chronicles — shared stylesheet
   No web fonts (system stack only) — zero font-swap layout shift.
   No JS required for any interaction, including dark mode, on this site.
   ========================================================================== */

:root {
  /* --- Light mode (default) tokens --- */
  --color-bg:        #FBF8F2;
  --color-bg-raised:  #F2EDE1;
  --color-ink:       #2A2622;
  --color-muted:     #6B6459;
  --color-accent:    #3F5D48;  /* deep pine — editorial voice: headings, primary buttons */
  --color-accent-2:  #946A25;  /* warm amber — secondary highlight, hover states */
  --color-link:      #1B2A80;  /* brand blue (from the logo) — functional: links, focus */
  --color-border:    #E1D9C6;
  --color-button-text: #FFFFFF;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --max-width: 46rem;
  --space-s: clamp(0.6rem, 0.55rem + 0.3vw, 0.9rem);
  --space-m: clamp(1.15rem, 1rem + 1vw, 1.75rem);
  --space-l: clamp(2rem, 1.5rem + 3vw, 4rem);
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #1C1917;  /* warm charcoal, not pure black */
    --color-bg-raised:  #26221F;
    --color-ink:       #F3EDE3;  /* warm off-white, not stark white */
    --color-muted:     #A79C8C;
    --color-accent:    #8FBE9F;  /* pine, lightened for dark surfaces */
    --color-accent-2:  #D9A54B;  /* amber, brightened for dark surfaces */
    --color-link:      #93A6FF;  /* brand blue, lightened periwinkle */
    --color-border:    #3A342E;
    --color-button-text: #1C1917; /* dark ink reads on the lightened accent fills */
  }
}

/* Manual override via the theme toggle button — wins over system preference
   regardless of source order, since an attribute selector outranks a bare
   :root in specificity. Same token values as above, just re-scoped. */
:root[data-theme="dark"] {
  --color-bg:        #1C1917;
  --color-bg-raised:  #26221F;
  --color-ink:       #F3EDE3;
  --color-muted:     #A79C8C;
  --color-accent:    #8FBE9F;
  --color-accent-2:  #D9A54B;
  --color-link:      #93A6FF;
  --color-border:    #3A342E;
  --color-button-text: #1C1917;
}
:root[data-theme="light"] {
  --color-bg:        #FBF8F2;
  --color-bg-raised:  #F2EDE1;
  --color-ink:       #2A2622;
  --color-muted:     #6B6459;
  --color-accent:    #3F5D48;
  --color-accent-2:  #946A25;
  --color-link:      #1B2A80;
  --color-border:    #E1D9C6;
  --color-button-text: #FFFFFF;
}

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

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 var(--space-s);
}

h1 { font-size: clamp(2.25rem, 1.8rem + 2.5vw, 3.25rem); }

h2 {
  font-size: clamp(1.4rem, 1.2rem + 1.1vw, 1.875rem);
  margin-top: var(--space-l);
  position: relative;
  padding-bottom: 0.4em;
  display: inline-block;
}
/* Signature detail: a two-tone thread beneath every section heading —
   a quiet nod to "the threads that connect them" from the series itself. */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.75rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
}

h3 { font-size: 1.15rem; color: var(--color-accent); }

p, ul, ol, dl, fieldset { max-width: var(--max-width); }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--color-accent-2); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.5em 1em;
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-s);
  top: var(--space-s);
}

/* Header + nav */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 5vw;
  border-bottom: 1px solid var(--color-border);
}

header p { margin: 0; flex-shrink: 0; }
header a { text-decoration: none; }

nav { min-width: 0; }

.logo { display: block; height: 32px; width: auto; }

.logo-dark-mode { display: none; }
.logo-light-mode { display: block; }
@media (prefers-color-scheme: dark) {
  .logo-light-mode { display: none; }
  .logo-dark-mode { display: block; }
}
:root[data-theme="light"] .logo-light-mode { display: block; }
:root[data-theme="light"] .logo-dark-mode { display: none; }
:root[data-theme="dark"] .logo-light-mode { display: none; }
:root[data-theme="dark"] .logo-dark-mode { display: block; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--color-link); color: var(--color-link); }
.theme-toggle svg { display: block; }

/* Icon swap — default follows system preference... */
.icon-moon { display: none; }
.icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  .icon-sun { display: none; }
  .icon-moon { display: block; }
}
/* ...manual override (data-theme) always wins over system preference */
:root[data-theme="light"] .icon-sun { display: block; }
:root[data-theme="light"] .icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

nav a {
  color: var(--color-ink);
  font-size: 0.95rem;
}

nav a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom: 2px solid var(--color-accent-2);
}

/* Main content */
main {
  padding: var(--space-l) 5vw;
  max-width: 60rem;
  margin: 0 auto;
}

section, article { margin-bottom: var(--space-l); }

.hero {
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--color-border);
}

/* Hero background treatment (Option C) — generated atmosphere, no stock
   photo required. The .hero.hero-bg combination overrides the plain
   .hero's border/padding since the combined selector is more specific. */
.hero.hero-bg {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-bottom: none;
  padding-block: var(--space-l);
  padding-inline: max(5vw, calc((100vw - 60rem) / 2 + 5vw));
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 15%, color-mix(in srgb, var(--color-accent-2) 45%, transparent), transparent 55%),
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 60%),
    linear-gradient(180deg, var(--color-bg-raised), var(--color-bg));
}
.hero-bg-panel {
  max-width: 34rem;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(2px);
  padding: var(--space-m);
  border-radius: var(--radius);
}
.hero-bg-panel h1 { margin-top: 0; }

.tagline {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem);
  color: var(--color-muted);
  max-width: 38rem;
}

.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-m);
}

.book-meta {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin-top: -0.5rem;
}

.author-photo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: var(--space-m);
}

/* --- Repeatable book-display pattern (the "SOP" for showcasing a title) ---
   Fixed slot order for every book, so scanning one teaches you all of them:
   1. Eyebrow (which book, at a glance)
   2. Title (largest, unmistakable focal point)
   3. Meta (protagonist + age — instant relevance check)
   4. Hook paragraph (the premise)
   5. Thesis (the emotional throughline)
   6. Status badge (color-coded, no prose needed to parse it) */

.book-eyebrow {
  margin: 0 0 0.35em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.book-eyebrow + h2 { margin-top: 0; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-s);
  padding: 0.3em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 0.85rem;
  font-weight: 600;
}
.status-badge::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}
.status-available { color: var(--color-accent); }
.status-nearly     { color: var(--color-accent); }
.status-soon       { color: var(--color-accent-2); }
.status-planned    { color: var(--color-muted); }

.book-thesis {
  font-style: italic;
  color: var(--color-accent);
}

/* Signup CTAs — genuine Grid use: two parallel choices, side by side on
   wider viewports, stacked on mobile. Applied straight to the <section>
   that wraps the two <article> signups — no wrapper div involved. */
.signup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-m);
}
.signup-grid > article {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.signup-grid > article form { margin-top: auto; }

/* Explore-the-series links — Grid applied directly to the <ul> */
.explore-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-s);
  list-style: none;
  padding: 0;
  max-width: none;
}
.explore-links li {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.explore-links a {
  display: block;
  padding: var(--space-s) var(--space-m);
  text-decoration: none;
  font-weight: 600;
}
.explore-links a:hover { background: var(--color-border); color: var(--color-link); }

/* Buttons */
.button {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-button-text);
  padding: 0.65em 1.4em;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}
.button:hover { background: var(--color-accent-2); color: var(--color-button-text); }
.button.secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.button.secondary:hover {
  background: var(--color-accent);
  color: var(--color-button-text);
}

/* Forms */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-m);
  background: var(--color-bg-raised);
}
legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form-title {
  margin: 0 0 var(--space-s);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}
label {
  display: block;
  font-weight: 600;
  margin-top: var(--space-s);
  margin-bottom: 0.3em;
}
input[type="text"], input[type="email"], textarea {
  width: 100%;
  max-width: 28rem;
  padding: 0.6em 0.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-ink);
}
textarea { resize: vertical; }

/* FAQ disclosure */
details {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-s) 0;
}
summary {
  font-family: var(--font-display);
  font-size: 1.15rem;
  cursor: pointer;
  color: var(--color-ink);
}
summary:hover { color: var(--color-link); }
details p { margin-top: var(--space-s); color: var(--color-ink); }

/* Footer */
footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-m) 5vw var(--space-l);
  color: var(--color-muted);
  font-size: 0.9rem;
}
footer nav ul { gap: var(--space-s) var(--space-m); }

@media (max-width: 40rem) {
  header { flex-direction: column; align-items: flex-start; }
  .logo { height: 26px; }
}

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