/* The Tiny Travelers
   Palette and type taken from the books themselves: the painted night-sky
   covers, Fredoka for display, Andika (a literacy face) for reading.
   The page moves from night at the top to warm paper below, the same way
   each story moves from the cosmos back home. */

:root {
  --night:  #141a3a;
  --deeper: #0a0e24;
  --dusk:   #27306a;
  --glow:   #f5b942;
  --ember:  #e8734a;
  --aqua:   #5fc9d6;
  --leaf:   #7fb069;
  --paper:  #fdf6e7;
  --paper-2:#f6ecd6;
  --ink:    #1b2142;
  --muted:  #5d6484;
  --rule:   #e4d8bd;
  /* Always-cream: for text on surfaces that stay night in both themes
     (the header, the hero, the CTA band, the footer). */
  --on-night: #fdf6e7;
  --shadow-lift: 0 18px 40px rgba(10, 14, 36, .28);
  --shadow-soft: 0 10px 28px rgba(27, 33, 66, .12);
}

* { box-sizing: border-box; }

html {
  color-scheme: light dark;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Andika, "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--dusk); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ember); }

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 44rem; }

h1, h2, h3 {
  font-family: Fredoka, Andika, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.45rem; }

p { max-width: 38rem; }
.lead { font-size: 1.22rem; color: var(--muted); }
.sub  { color: var(--muted); font-size: 1.08rem; }

/* ---------- header ---------- */
.site-header {
  background: var(--deeper);
  color: var(--on-night);
  position: relative;
  z-index: 3;
}
.header-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; padding-top: 18px; padding-bottom: 18px;
}
.brand {
  font-family: Fredoka, sans-serif; font-weight: 600; font-size: 1.45rem;
  color: var(--on-night); text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.brand::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 14px 3px rgba(245, 185, 66, .65); flex: none;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: #d9ddf2; text-decoration: none; font-weight: 700; font-size: .98rem;
  padding: 9px 15px; border-radius: 8px;
}
.nav a:hover { color: var(--night); background: var(--glow); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 10px; text-decoration: none;
  font-family: Fredoka, sans-serif; font-size: 1.06rem; font-weight: 600;
  border: 0; cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.btn-coral { background: var(--ember); color: #fff; }
.btn-coral:hover { background: #d8603a; color: #fff; }
.btn-sun   { background: var(--glow); color: var(--night); }
.btn-sun:hover { background: #ecac2f; color: var(--night); }
.btn-teal  { background: var(--aqua); color: var(--night); }
.btn-teal:hover { background: #46b8c6; color: var(--night); }
.btn-ghost {
  background: transparent; color: var(--dusk);
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn-ghost:hover { background: var(--dusk); color: var(--on-night); box-shadow: none; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- night sky ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 520px at 72% -10%, rgba(245,185,66,.20), transparent 62%),
    radial-gradient(900px 480px at 12% 8%, rgba(95,201,214,.14), transparent 60%),
    linear-gradient(176deg, var(--deeper) 0%, var(--night) 55%, #1d2550 100%);
  color: var(--on-night);
  padding: clamp(48px, 7vw, 92px) 0 0;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.4px 1.4px at 28% 62%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.8px 1.8px at 46% 14%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.3px 1.3px at 63% 44%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 81% 24%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 92% 58%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 7% 76%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.7px 1.7px at 55% 80%, rgba(255,255,255,.5), transparent);
}
.hero > * { position: relative; }
.hero h1, .hero h2, .hero h3 { color: var(--on-night); }
.hero .lead { color: #c9cfe8; }

.hero-grid {
  display: grid; gap: clamp(28px, 5vw, 60px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.hero h1 .tiny { color: var(--glow); }

/* three covers, lit against the night */
.cover-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.cover-stack img {
  width: 100%; border-radius: 6px;
  box-shadow: 0 20px 44px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.1);
}
.cover-stack a { display: block; transition: transform .18s ease; }
.cover-stack a:hover { transform: translateY(-6px); }
.cover-stack a:nth-child(2) { margin-bottom: 26px; }
@media (prefers-reduced-motion: reduce) { .cover-stack a:hover { transform: none; } }

.hero-small { padding-bottom: clamp(36px, 5vw, 56px); }
.hero-small .wrap { position: relative; }

/* the night meets the paper */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px;
  background: var(--paper);
  clip-path: polygon(0 62%, 7% 48%, 18% 60%, 31% 42%, 44% 56%, 57% 40%, 70% 55%, 82% 44%, 92% 58%, 100% 46%, 100% 100%, 0 100%);
}

/* ---------- sections ---------- */
.band { padding: clamp(52px, 7vw, 86px) 0; }
.band.tint-sky  { background: var(--paper-2); }
.band.tint-sun  { background: var(--paper-2); }
.band.tint-mint { background: var(--paper); border-top: 1px solid var(--rule); }
.books { padding: clamp(52px, 7vw, 86px) 0; }
.about { padding: clamp(52px, 7vw, 86px) 0; background: var(--paper); border-top: 1px solid var(--rule); }
.sig { font-family: Fredoka, sans-serif; font-size: 1.15rem; color: var(--ink); margin-top: 26px; }

.cta {
  padding: clamp(56px, 7vw, 90px) 0;
  background:
    radial-gradient(800px 320px at 50% 0%, rgba(245,185,66,.22), transparent 65%),
    linear-gradient(170deg, var(--night), var(--deeper));
  color: var(--on-night); text-align: center;
}
.cta h2 { color: var(--on-night); }
.cta p { color: #c9cfe8; margin-left: auto; margin-right: auto; }

/* ---------- books ---------- */
.book {
  display: grid; gap: clamp(22px, 4vw, 48px); align-items: start;
  grid-template-columns: minmax(170px, 260px) minmax(0, 1fr);
  padding: clamp(26px, 4vw, 40px) 0;
  border-top: 1px solid var(--rule);
}
.book:first-of-type { border-top: 0; }
.book-cover-img { border-radius: 6px; box-shadow: var(--shadow-lift); width: 100%; }
.book-upcoming { opacity: 1; }
.tagline { font-family: Fredoka, sans-serif; font-size: 1.12rem; color: var(--ember); margin: -2px 0 14px; }
.disclosure { font-size: .86rem; color: var(--muted); margin-top: 18px; }

.status {
  display: inline-block; font-weight: 700; font-size: .84rem;
  padding: 5px 13px; border-radius: 999px;
  background: var(--paper-2); color: var(--muted); margin: 0 0 12px;
  border: 1px solid var(--rule);
}
.status-live { background: var(--leaf); color: #10240f; border-color: transparent; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 20px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  --tint: var(--aqua);
  position: relative;
  background: #fff; border-radius: 22px; padding: 30px 28px 28px;
  box-shadow: 0 1px 0 rgba(27,33,66,.06), 0 18px 34px -24px rgba(27,33,66,.38);
  border: 2px solid color-mix(in srgb, var(--tint) 42%, #fff);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 100%;
  background: linear-gradient(170deg, color-mix(in srgb, var(--tint) 26%, #fff) 0%, #fff 62%);
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card h3 { margin-bottom: 8px; color: color-mix(in srgb, var(--tint) 32%, var(--ink)); }
.card p { margin-bottom: 0; }
.card-sun   { --tint: var(--glow); }
.card-coral { --tint: var(--ember); }
.card-teal  { --tint: var(--aqua); }
.card-sky   { --tint: var(--dusk); }
.card-grape { --tint: #8e7bd6; }
.card-pink  { --tint: var(--ember); }
.card-leaf  { --tint: var(--leaf); }
.emoji { display: none; }

/* ---------- free printable pages ---------- */
.sampler { padding: clamp(52px, 7vw, 86px) 0; background: var(--paper-2); }
.pages { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.page-card {
  --tint: var(--aqua);
  background: linear-gradient(170deg, color-mix(in srgb, var(--tint) 22%, #fff) 0%, #fff 60%);
  border-radius: 22px; padding: 26px 24px;
  box-shadow: 0 1px 0 rgba(27,33,66,.06), 0 18px 34px -24px rgba(27,33,66,.38);
  display: flex; flex-direction: column;
  border: 2px solid color-mix(in srgb, var(--tint) 42%, #fff);
}
.page-card h3 { color: color-mix(in srgb, var(--tint) 32%, var(--ink)); }
.pages .page-card:nth-child(4n+2) { --tint: var(--glow); }
.pages .page-card:nth-child(4n+3) { --tint: var(--ember); }
.pages .page-card:nth-child(4n+4) { --tint: var(--leaf); }
.page-card h3 { margin-bottom: 6px; font-size: 1.22rem; }
.page-card p { flex: 1; margin-bottom: 14px; }
.page-link {
  display: inline-block; align-self: flex-start;
  background: var(--dusk); color: #fff; text-decoration: none;
  font-family: Fredoka, sans-serif; font-weight: 600; font-size: 1rem;
  padding: 11px 20px; border-radius: 9px;
}
.page-link:hover { background: var(--night); color: #fff; }

/* ---------- forms ---------- */
.signup, .unlock {
  background: #fff; border-radius: 16px; padding: 28px;
  box-shadow: var(--shadow-soft); margin: 22px 0 26px;
  border: 1px solid var(--rule);
}
.signup label, .unlock label {
  display: block; font-family: Fredoka, sans-serif; font-weight: 600;
  font-size: 1.05rem; margin-bottom: 10px;
}
.signup-row, .unlock-row { display: flex; gap: 12px; flex-wrap: wrap; }
.signup input, .unlock input {
  flex: 1 1 250px; padding: 14px 18px; font-size: 1.05rem;
  border: 2px solid var(--rule); border-radius: 10px;
  font-family: inherit; color: var(--ink); background: var(--paper);
}
.signup input:focus, .unlock input:focus { outline: none; border-color: var(--dusk); background: #fff; }
.unlock input {
  letter-spacing: .14em; text-transform: uppercase;
  font-family: Fredoka, sans-serif; font-weight: 600;
}
.fine, .unlock-note { font-size: .88rem; color: var(--muted); }
.fine { margin-bottom: 0; }

.unlock-msg { margin-top: 18px; }
.unlock-msg .bad {
  background: #fdeae2; border-left: 4px solid var(--ember);
  border-radius: 8px; padding: 13px 16px; font-weight: 700; max-width: none;
}
.unlock-msg .status {
  text-transform: none; letter-spacing: normal; font-size: 1.02rem;
  padding: 11px 18px; font-weight: 700;
}
.unlock-files { list-style: none; padding: 0; margin: 14px 0 0; }
.unlock-files li { margin-bottom: 12px; }
.unlock-files a {
  display: inline-block; background: var(--leaf); color: #10240f;
  text-decoration: none; font-family: Fredoka, sans-serif; font-weight: 600;
  padding: 13px 24px; border-radius: 10px;
}
.unlock-files a:hover { background: #6d9c58; color: #10240f; }

.try-codes { list-style: none; padding: 0; margin: 18px 0 6px; }
.try-codes li {
  background: #fff; border-radius: 10px; padding: 13px 18px;
  margin-bottom: 9px; border-left: 4px solid var(--glow);
  box-shadow: var(--shadow-soft); font-size: .98rem; max-width: 40rem;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--deeper); color: #aeb5d6;
  padding: 44px 0; font-size: .95rem;
}
.site-footer p { margin: 7px 0; max-width: none; }
.site-footer a { color: var(--on-night); }
.site-footer a:hover { color: var(--glow); }
.links { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0; }

/* ---------- not found ---------- */
.notfound { padding: clamp(56px, 8vw, 100px) 0; }
.notfound ul { list-style: none; padding: 0; }
.notfound li { margin-bottom: 12px; font-size: 1.08rem; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hero-grid { grid-template-columns: 1fr; }
  .cover-stack { max-width: 480px; }
  .book { grid-template-columns: 1fr; }
  .book-cover-img { max-width: 230px; }
  .nav a { padding: 7px 11px; font-size: .92rem; }
  .hero::after { height: 28px; }
}

/* ---------- printable previews ---------- */
.page-thumb { display: block; margin: -26px -24px 16px; background: #fff;
  border-bottom: 2px solid color-mix(in srgb, var(--tint) 34%, #fff); }
.page-thumb img { width: 100%; height: 210px; object-fit: cover; object-position: top center; display: block; }
.page-card:hover .page-thumb img { opacity: .94; }

/* ---------- dark mode ----------
   The books move from a painted night sky down to warm paper. In dark mode
   the night simply keeps going: the page becomes the sky and each coloring
   page stays a sheet of paper lying on it, which is what it actually is.
   Applied by the OS preference unless the reader has chosen light, and by
   an explicit choice either way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #141a3a;
    --paper-2: #1b2246;
    --ink:     #f2ecdd;
    --muted:   #a6adcb;
    --rule:    #2e3768;
    --dusk:    #8fa0e8;
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, .45);
    --shadow-lift: 0 18px 40px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --paper:   #141a3a;
  --paper-2: #1b2246;
  --ink:     #f2ecdd;
  --muted:   #a6adcb;
  --rule:    #2e3768;
  --dusk:    #8fa0e8;
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, .6);
}

/* In dark mode the panels go dark too, rather than leaving a page full of
   glaring white rectangles. The artwork keeps its paper, because a coloring
   page lying on a dark desk is exactly what it is. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dark-surface: 1; }
}
:root[data-theme="dark"] { --dark-surface: 1; }

@supports (color: color-mix(in srgb, red, blue)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .page-card,
    :root:not([data-theme="light"]) .lib-card {
      background: color-mix(in srgb, var(--tint, var(--c, var(--aqua))) 15%, #1b2246);
      border-color: color-mix(in srgb, var(--tint, var(--c, var(--aqua))) 42%, #1b2246);
      color: var(--ink);
    }
    :root:not([data-theme="light"]) .card::before { background: none; }
    :root:not([data-theme="light"]) .card h3,
    :root:not([data-theme="light"]) .page-card h3,
    :root:not([data-theme="light"]) .lib-card span {
      color: color-mix(in srgb, var(--tint, var(--c, var(--aqua))) 62%, #ffffff);
    }
    :root:not([data-theme="light"]) .signup,
    :root:not([data-theme="light"]) .unlock { background: #1b2246; color: var(--ink); }
    :root:not([data-theme="light"]) .lib-search,
    :root:not([data-theme="light"]) input[type="email"],
    :root:not([data-theme="light"]) input[type="text"] {
      background: #10152f; color: var(--ink);
      border-color: color-mix(in srgb, var(--dusk) 45%, #10152f);
    }
    :root:not([data-theme="light"]) .chip {
      background: color-mix(in srgb, var(--c) 16%, #1b2246);
      color: color-mix(in srgb, var(--c) 66%, #ffffff);
      border-color: color-mix(in srgb, var(--c) 40%, #1b2246);
    }
    :root:not([data-theme="light"]) .chip[data-cat="all"] { --c: var(--glow); }
    :root:not([data-theme="light"]) .chip[aria-pressed="true"] { color: #16203f; }
    :root:not([data-theme="light"]) .chip[data-cat="all"][aria-pressed="true"] { color: #16203f; }
    :root:not([data-theme="light"]) .lib-controls {
      background: color-mix(in srgb, var(--paper) 92%, #000); }
  }

  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .page-card,
  :root[data-theme="dark"] .lib-card {
    background: color-mix(in srgb, var(--tint, var(--c, var(--aqua))) 15%, #1b2246);
    border-color: color-mix(in srgb, var(--tint, var(--c, var(--aqua))) 42%, #1b2246);
    color: var(--ink);
  }
  :root[data-theme="dark"] .card::before { background: none; }
  :root[data-theme="dark"] .card h3,
  :root[data-theme="dark"] .page-card h3,
  :root[data-theme="dark"] .lib-card span {
    color: color-mix(in srgb, var(--tint, var(--c, var(--aqua))) 62%, #ffffff);
  }
  :root[data-theme="dark"] .signup,
  :root[data-theme="dark"] .unlock { background: #1b2246; color: var(--ink); }
  :root[data-theme="dark"] .lib-search,
  :root[data-theme="dark"] input[type="email"],
  :root[data-theme="dark"] input[type="text"] {
    background: #10152f; color: var(--ink);
    border-color: color-mix(in srgb, var(--dusk) 45%, #10152f);
  }
  :root[data-theme="dark"] .chip {
    background: color-mix(in srgb, var(--c) 16%, #1b2246);
    color: color-mix(in srgb, var(--c) 66%, #ffffff);
    border-color: color-mix(in srgb, var(--c) 40%, #1b2246);
  }
  :root[data-theme="dark"] .chip[data-cat="all"] { --c: var(--glow); }
  :root[data-theme="dark"] .chip[aria-pressed="true"] { color: #16203f; }
  :root[data-theme="dark"] .lib-controls {
    background: color-mix(in srgb, var(--paper) 92%, #000); }
}

/* The artwork itself stays on paper, just dimmed so it does not glare. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lib-card img,
  :root:not([data-theme="light"]) .page-thumb img,
  :root:not([data-theme="light"]) .book-cover-img,
  :root:not([data-theme="light"]) .lib-example img { filter: brightness(.88); }
}
:root[data-theme="dark"] .lib-card img,
:root[data-theme="dark"] .page-thumb img,
:root[data-theme="dark"] .book-cover-img,
:root[data-theme="dark"] .lib-example img { filter: brightness(.88); }

/* ---------- theme toggle ---------- */
.theme-toggle {
  margin-left: 14px; flex: none;
  width: 38px; height: 38px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  background: transparent;
  border: 2px solid rgba(253, 246, 231, .32);
  color: #fdf6e7;
  font-size: 1.02rem; line-height: 1;
}
.theme-toggle:hover { border-color: var(--glow); color: var(--glow); }
.theme-toggle:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }