/* ==========================================================================
   Clearwater — "Storybook Lantern"
   Golden-hour sibling of Storybook Shore: honey, apricot and soft rose by
   day, warm plum by night, and a small lighthouse that keeps a light on.
   Hand-crafted pastel illustration, pillowy spacing, breathing-pace motion.
   ========================================================================== */

:root {
  /* palette — golden hour, low saturation */
  --sky-dawn-top: #F8E3C7;   /* honey */
  --sky-dawn-mid: #F9CFB2;   /* apricot */
  --sky-dawn-low: #F4C0AA;   /* soft rose */
  --sky-morn-top: #F4D8B4;
  --sky-morn-low: #FBF2DF;

  --butter: #FFE9A8;
  --gold: #FFB347;
  --apricot: #F6C49C;
  --plum-lav: #CFA8C2;
  --sage: #C9CDA8;
  --sage-deep: #5F7D5B;
  --sea: #8FBFB4;
  --sand: #F7EFE2;
  --sand-deep: #F1E1C8;

  --night-top: #3A2A4A;      /* warm plum, never indigo, never black */
  --night-mid: #553A63;
  --night-low: #8A5E7E;
  --moonlight: #EDE2EE;

  --ink: #33312E;
  --ink-soft: #57524A;
  --paper: #F5F1EA;

  --font-display: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, "Segoe UI", Verdana, sans-serif;

  --ease: cubic-bezier(0.45, 0.05, 0.35, 1);
  --slow: 1.1s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  overflow-x: hidden;
}

svg { display: block; }

/* visible, friendly focus everywhere */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}
.page-moon :focus-visible,
body.scene-night :focus-visible {
  outline-color: var(--paper);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Fixed graded sky (home: golden dawn -> warm morning)
   ========================================================================== */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-dawn-top) 0%, var(--sky-dawn-mid) 55%, var(--sky-dawn-low) 100%);
}
.sky-layer { position: absolute; inset: 0; }
.sky-dawn {
  background: linear-gradient(180deg, var(--sky-dawn-top) 0%, var(--sky-dawn-mid) 55%, var(--sky-dawn-low) 100%);
}
.sky-morning {
  background: linear-gradient(180deg, var(--sky-morn-top) 0%, var(--sky-morn-low) 100%);
  opacity: 0;
}

/* ==========================================================================
   Header — overlays the scene, no layout space
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 2.6rem);
  pointer-events: none; /* children restore it */
}
.site-header > * { pointer-events: auto; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 251, 242, 0.72);
  border-radius: 999px;
  transition: color var(--slow) var(--ease), background var(--slow) var(--ease);
}

.about-nav { position: relative; }

.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font: 600 1rem var(--font-body);
  color: var(--ink);
  background: rgba(255, 251, 242, 0.72);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.4s var(--ease), color var(--slow) var(--ease);
}
.about-btn:hover { background: rgba(255, 251, 242, 0.9); }
.about-btn .chev { transition: transform 0.35s var(--ease); }
.about-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.about-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 13rem;
  list-style: none;
  background: #FFFBF2;
  border-radius: 22px;
  padding: 0.6rem;
  box-shadow: 0 14px 38px rgba(51, 49, 46, 0.16);
}
.about-menu a {
  display: block;
  padding: 0.75rem 1.1rem;
  min-height: 44px;
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.about-menu a:hover { background: var(--butter); }

/* On the home page the header keeps its warm cream pill in every scene state
   (a small lit lantern over the dark) — ink on cream stays AA through every
   frame of the relight, with no color crossfade to fail mid-transition.
   Only the moon page, a static night, dresses the header dark. */
.page-moon .wordmark,
.page-moon .about-btn {
  color: var(--paper);
  background: rgba(58, 42, 74, 0.5);
}

/* ==========================================================================
   Hero — golden-hour poster: sun, lighthouse, rowboat
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  transform: translateY(-9vh);
}

.brand {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  letter-spacing: 0.01em;
  line-height: 1.04;
  color: var(--ink);
  animation: fade-up 1.4s var(--ease) 1.1s both;
}

.hero-line {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 400;
  color: var(--ink-soft);
  animation: fade-up 1.4s var(--ease) 1.7s both;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.2rem;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 999px;
  animation: fade-up 1.4s var(--ease) 2.3s both;
}
.scroll-cue svg { animation: cue-drift 3.6s var(--ease) infinite; }
.scroll-cue:hover { color: var(--ink); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* hero entrance: the sun lifts, the glow blooms — once */
.sun-rise { animation: sun-rise 2.6s var(--ease) both; }
@keyframes sun-rise {
  from { transform: translateY(54px); }
  to   { transform: translateY(0); }
}

/* ambient micro-motion — barely there */
.cloud-a { animation: drift 26s var(--ease) infinite alternate; }
.cloud-b { animation: drift 34s var(--ease) infinite alternate-reverse; }
.cloud-c { animation: drift 30s var(--ease) 4s infinite alternate; }
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(34px); }
}

.gull-a { animation: glide 18s var(--ease) infinite alternate; }
.gull-b { animation: glide 22s var(--ease) 2s infinite alternate-reverse; }
@keyframes glide {
  from { transform: translate(0, 0); }
  to   { transform: translate(46px, -14px); }
}

.grass-a, .grass-b {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.grass-a { animation: sway 6.5s var(--ease) infinite alternate; }
.grass-b { animation: sway 7.5s var(--ease) 1.2s infinite alternate-reverse; }
@keyframes sway {
  from { transform: rotate(-2.2deg); }
  to   { transform: rotate(2.2deg); }
}

.shimmer { animation: shimmer 7s var(--ease) infinite alternate; }
@keyframes shimmer {
  from { opacity: 0.35; }
  to   { opacity: 0.8; }
}

/* the lighthouse breathes its light at resting-breath pace:
   one 10s cycle, ~4s in / ~6s out */
.lh-beam {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: beam-breathe 10s var(--ease) infinite;
}
@keyframes beam-breathe {
  0%, 100% { opacity: 0.4; }
  40%      { opacity: 0.85; }
}
.lh-lamp { animation: lamp-breathe 10s var(--ease) infinite; }
@keyframes lamp-breathe {
  0%, 100% { opacity: 0.7; }
  40%      { opacity: 1; }
}

/* phones: xMidYMax slice crops the viewBox edges, so pull the sun, the
   lighthouse and the rowboat into the centre band that survives the crop
   (790px keeps the sun's left ray clear of the lighthouse roof at 600px) */
@media (max-width: 640px) {
  .hero-scene .sun-group { transform: translate(790px, 470px); }
  .hero-scene .lighthouse { transform: translate(600px, 556px); }
  .hero-scene .rowboat { transform: translate(770px, 786px); }
}

/* ==========================================================================
   Support — one breath
   ========================================================================== */

.support {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6rem;
  padding: clamp(5rem, 12vh, 8rem) 1.5rem;
  text-align: center;
}

.support-cloud { animation: drift 28s var(--ease) infinite alternate; }

.breath p {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 auto 1.4em;
}
.breath p:last-child { margin-bottom: 0; }

/* ==========================================================================
   The Choice — golden dusk into warm plum, lanterns & fireflies
   ========================================================================== */

.choice {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.6rem);
  padding: clamp(6rem, 14vh, 9rem) 1.5rem 11rem;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, var(--sky-morn-top) 0%, var(--plum-lav) 46%, #F6CBA4 100%);
  color: var(--ink);
}

/* warm + night veils crossfade over the base dusk */
.choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FBD9B0 0%, var(--butter) 52%, #FFD9A8 100%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}
.night-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 55%, var(--night-low) 100%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}

body.scene-warm .choice::before { opacity: 1; }
body.scene-night .night-veil { opacity: 1; }

/* AA through the relight: a slow ink->paper crossfade would pass through an
   unreadable midpoint, so while night falls the words take a short breath —
   they dip out (300ms), swap color in a single hidden frame, and return once
   the sky has settled. JS adds body.relighting for ~0.85s on night changes
   (skipped entirely under reduced motion, where the scene snaps instead). */
.prompt {
  color: var(--ink);
  transition: color 0s linear 0.41s, opacity 0.3s var(--ease);
}
body.scene-night .prompt {
  color: var(--paper);
  transition: color 0s linear 0.51s, opacity 0.3s var(--ease);
}
body.relighting .prompt { opacity: 0; }

/* paper lanterns and fireflies — half-lit at dusk, fully lit at night,
   resting while the sun previews */
.fireflies {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}
body.scene-night .choice .fireflies { opacity: 1; }
body.scene-warm .choice .fireflies { opacity: 0; }

.tw { animation: twinkle 4.5s var(--ease) infinite alternate; }
.t2 { animation-delay: 1.1s; }
.t3 { animation-delay: 2.3s; }
.t4 { animation-delay: 3.2s; }
@keyframes twinkle {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* fireflies: soft twinkle plus a drift small enough to half-notice */
.ff {
  animation:
    twinkle 5s var(--ease) infinite alternate,
    ff-drift 14s var(--ease) infinite alternate;
}
.f2 { animation-delay: 1.1s, 3s;   animation-duration: 5s, 17s; }
.f3 { animation-delay: 2.3s, 6s;   animation-duration: 6s, 12s; }
.f4 { animation-delay: 3.2s, 1.5s; animation-duration: 4.5s, 19s; }
@keyframes ff-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(10px, -12px); }
}

.lantern { animation: lantern-float 18s var(--ease) infinite alternate; }
.lantern-b { animation-duration: 22s; animation-delay: 4s; }
@keyframes lantern-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
.lantern-glow { animation: breathe-glow 10s var(--ease) infinite alternate; }

/* phones: keep the lanterns inside the visible centre band, and gather a few
   fireflies into it too (xMidYMid slice leaves roughly x 570-870 visible when
   the stacked orbs make the section ~900px tall). cx, not transform: the
   ff-drift animation owns the transform property and would override it. */
@media (max-width: 640px) {
  .fireflies .lantern-pos-a { transform: translate(600px, 140px); }
  .fireflies .lantern-pos-b { transform: translate(820px, 96px); }
  .fireflies .ff:nth-child(1) { cx: 640px; }
  .fireflies .ff:nth-child(2) { cx: 750px; }
  .fireflies .ff:nth-child(5) { cx: 840px; }
  .fireflies .ff:nth-child(6) { cx: 790px; }
}

.prompt {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.15;
  max-width: 16ch;
}

.orbs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2rem, 9vw, 9rem);
  flex-wrap: wrap;
}

.choice-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: 32px;
  transition: transform var(--slow) var(--ease), color 0s linear 0.36s;
}
body.scene-night .choice-link {
  color: var(--paper);
  transition-delay: 0s, 0.56s;
}
.choice-link:hover { transform: translateY(-8px); }

.orb {
  width: clamp(170px, 24vw, 270px);
  height: auto;
}

.choice-link .copy {
  font-family: var(--font-display);
  /* never below 1.5rem (24px): stays "large text" for the 3:1 AA threshold
     while the scene relights beneath it */
  font-size: clamp(1.5rem, 2.2vw, 1.65rem);
  font-weight: 400;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.choice-link:hover .copy,
.choice-link:focus-visible .copy { opacity: 1; transform: translateY(0); }

/* same breath as the prompt while the scene crosses to night */
body.relighting .choice-link .copy {
  opacity: 0;
  transition-duration: 0.3s, 0.3s;
}

/* touch / no-hover: copy always visible, stacked, big targets */
@media (hover: none) {
  .choice-link .copy { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .orbs { flex-direction: column; align-items: center; gap: 1.6rem; }
  .choice-link .copy { opacity: 1; transform: none; }
}

/* moon's gentle rock + glow breathing */
.moon-rock {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rock 9s var(--ease) infinite alternate;
}
@keyframes rock {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}
.moon-glow { animation: breathe-glow 7s var(--ease) infinite alternate; }
.orb-rays {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes breathe-glow {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

.choice-shore {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  height: clamp(110px, 16vh, 180px);
  pointer-events: none;
}
.shore-sea, .shore-dune { transition: fill var(--slow) var(--ease); }
body.scene-night .shore-sea { fill: #3E3554; }
body.scene-night .shore-dune { fill: #BFA89E; }

/* ==========================================================================
   Story & approach — two small notes on the sand
   ========================================================================== */

.shore-notes {
  background: var(--sand);
  padding: clamp(3rem, 7vh, 4.5rem) 1.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  text-align: center;
}
.shore-note {
  max-width: 38ch;
  scroll-margin-top: 5.5rem;
}
.shore-note h2 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-bottom: 0.5rem;
}
.shore-note p { color: var(--ink-soft); }

/* ==========================================================================
   Footer — on the sand
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--sand);
  text-align: center;
  padding: clamp(3.5rem, 8vh, 5.5rem) 1.5rem 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.take {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.take-title {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.qr { filter: drop-shadow(0 8px 22px rgba(51, 49, 46, 0.12)); }

.qr-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.4s var(--ease);
}
.qr-download:hover { background: var(--gold); }

.qr-download-alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.2rem 0.4rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qr-download-alt:hover { color: var(--ink-soft); }

.footer-nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--ink-soft);
}
.footer-nav a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.6rem 0.4rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.footer-nav a:hover { border-bottom-color: var(--gold); }

.write-line { color: var(--ink-soft); }
.write-line a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0.2rem;
  display: inline-block;
}

.safety {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.9;
  max-width: 44ch;
}
.safety a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.2rem 0.1rem;
  display: inline-block;
}
.fine {
  font-family: var(--font-display);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ==========================================================================
   Quiz page (sun path) — late-morning honey light
   ========================================================================== */

.page-quiz {
  background: linear-gradient(180deg, var(--sky-morn-top) 0%, #F8E8CC 70%, var(--sand) 100%) fixed;
  min-height: 100svh;
}

.quiz-main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6.5rem 1.5rem 4rem;
}

.step {
  width: min(40rem, 100%);
  text-align: center;
  animation: fade-up 0.9s var(--ease) both;
}
.step[hidden] { display: none; }

.step h1, .step h2 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  line-height: 1.2;
  margin-bottom: 1.1rem;
}
.step h1:focus, .step h2:focus,
.step h1:focus-visible, .step h2:focus-visible,
.moon-line:focus, .moon-line:focus-visible { outline: none; }

.step .note {
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

.answers {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 2.2rem 0 1.8rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  padding: 0.95rem 1.8rem;
  font: 700 1.125rem var(--font-body);
  color: var(--ink);
  background: #FFFBF2;
  border: 2.5px solid rgba(51, 49, 46, 0.16);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: var(--butter); border-color: var(--gold); transform: translateY(-2px); }
.btn[aria-pressed="true"] { background: var(--butter); border-color: var(--gold); }

.btn-primary {
  width: auto;
  background: var(--gold);
  border-color: var(--gold);
}
.btn-primary:hover { background: #FFC468; }

.btn-ghost {
  width: auto;
  min-height: 44px;
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
  font-weight: 600;
}
.btn-ghost:hover { background: rgba(255, 251, 242, 0.7); border-color: transparent; color: var(--ink); }

/* the sun rises as you go — the quiz's progress */
.progress-sun {
  position: fixed;
  top: 5.2rem;
  right: clamp(1.2rem, 4vw, 2.6rem);
  width: 104px;
  z-index: 40;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.progress-sun.is-up { opacity: 1; }
@media (max-width: 480px) {
  .progress-sun { width: 64px; }
  .quiz-main { padding-top: 9.5rem; }
}
.progress-sun .p-horizon { stroke: var(--ink-soft); opacity: 0.55; }
.progress-sun .p-sun {
  transform: translateY(calc((1 - var(--rise, 0)) * 40px));
  transition: transform 1.1s var(--ease);
}
.progress-sun .p-rays {
  opacity: var(--rise, 0);
  transition: opacity 1.1s var(--ease);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* simple forms */
.form-field {
  text-align: left;
  margin-bottom: 1.2rem;
}
.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.form-field input {
  width: 100%;
  min-height: 56px;
  padding: 0.8rem 1.3rem;
  font: 400 1.125rem var(--font-body);
  color: var(--ink);
  background: #FFFBF2;
  /* warm gray, >=3:1 against the cream fill and every quiz-page sky tone
     (WCAG 1.4.11): the empty field's boundary has to be findable */
  border: 2.5px solid #7E7669;
  border-radius: 999px;
}
.form-field input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.quiz-form { max-width: 26rem; margin: 0 auto; }

/* gentle inline validation messages */
.form-error {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.45rem 0 0 1.3rem;
  color: var(--ink);
}
.page-moon .form-error { color: var(--butter); }
.moon-form .form-error {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
}

.step-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

/* ==========================================================================
   Moon page — warm plum night, the lighthouse keeps its beam on
   ========================================================================== */

.page-moon {
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 52%, var(--night-low) 100%) fixed;
  color: var(--paper);
}

.moon-main {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6.5rem 1.5rem 4rem;
  overflow: hidden;
}

.moon-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.moon-content {
  position: relative;
  z-index: 2;
  width: min(34rem, 100%);
  text-align: center;
}

.moon-line {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.2;
  margin-bottom: 2.4rem;
}

.moon-form {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.moon-form input {
  flex: 1 1 16rem;
  min-height: 56px;
  padding: 0.8rem 1.4rem;
  font: 400 1.125rem var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid transparent;
  border-radius: 999px;
}
.moon-form input:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}
.moon-btn {
  min-height: 56px;
  padding: 0.9rem 1.9rem;
  font: 700 1.125rem var(--font-body);
  color: var(--ink);
  background: var(--moonlight);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.4s var(--ease), transform 0.35s var(--ease);
}
.moon-btn:hover { background: #FFFFFF; transform: translateY(-2px); }

.moon-note {
  font-size: 1.05rem;
  color: var(--paper);
  margin-bottom: 1.8rem;
}

.moon-quiet { font-size: 1.05rem; }
.moon-quiet,
.moon-quiet a {
  color: var(--paper);
}
.moon-quiet a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0.2rem;
  display: inline-block;
}
.moon-quiet a:hover { color: #FFFFFF; }

.moon-thanks p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.45;
}

.moon-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.moon-footer .safety { color: var(--paper); }
.moon-footer .safety a,
.moon-footer a { color: var(--paper); }

.quiz-footer .safety { color: var(--ink-soft); }
.quiz-footer .safety a { color: var(--ink); }

/* the light left on: lamp glow breathes, beam sweeps slowly */
.lh-lamp-glow { animation: breathe-glow 10s var(--ease) infinite alternate; }
.lh-beam-night {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: beam-sweep 16s var(--ease) infinite alternate;
}
@keyframes beam-sweep {
  from { transform: rotate(-4.5deg); }
  to   { transform: rotate(3.5deg); }
}

/* phones: xMidYMax slice crops the viewBox edges, so pull the moon and the
   lighthouse toward the centre band that survives the crop */
@media (max-width: 640px) {
  .moon-scene .m-moon { transform: translate(850px, 150px); }
  .moon-scene .m-lighthouse { transform: translate(545px, 724px); }
}

/* ==========================================================================
   Reduced motion — static scene per section, instant everything
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  /* fixed-background scroll grading off: each section owns a static scene */
  .sky { display: none; }
  .hero { background: linear-gradient(180deg, var(--sky-dawn-top) 0%, var(--sky-dawn-mid) 55%, var(--sky-dawn-low) 100%); }
  .support { background: linear-gradient(180deg, var(--sky-morn-top) 0%, var(--sky-morn-low) 100%); }
  .page-quiz, .page-moon { background-attachment: scroll; }
  /* the beams hold a steady, visible glow instead of breathing */
  .lh-beam { opacity: 0.6; }
  .lh-beam-night { transform: none; }
}