/*
 * Q-kid International Nursery — a lullaby.
 *
 * The school takes children from eighteen months, so the page is set at the
 * hour those children are being carried to bed: deep blue, a moon, a few
 * stars, and ivory light instead of white glare. The mark is theirs, drawn by
 * hand in ink, and on this ground it becomes moonlight.
 *
 * Laid out the way the Promkun site is — a fixed bar, a hero, bands of colour
 * that change as you scroll, a footer carrying the mark — so the two schools
 * read as one family without wearing the same clothes. The bands walk through
 * a night: deep dark at the top, dusk in the middle, one lit band at dawn
 * where the practical details live, then back to dark to say goodnight.
 */

:root {
  --night: #0C1630;        /* the ground: deep blue, well past dusk */
  --night-2: #16264F;      /* the band that follows it */
  --dusk: #1A2A55;         /* raised surfaces */
  --dawn: #F6F2E9;         /* the one lit band, where the details live */

  --moon: #F5F0E4;         /* warm ivory: all light text */
  --moonlight: #BCCAEB;    /* secondary text on dark */
  --ink: #14224A;          /* text on the lit band */
  --ink-soft: #46527A;

  --star: #F2D08A;         /* the one warm accent */
  --star-dim: rgba(242, 208, 138, 0.34);

  --display: 'Mali', 'IBM Plex Sans Thai', cursive;
  --body: 'IBM Plex Sans Thai', system-ui, sans-serif;

  /* Thai stacks a tone mark on top of an above-vowel — เมื่อ is เ + ม + ◌ื + ◌่ —
     and Mali, being handwriting, draws those marks tall and loopy. Measured in
     the browser across every base × above-vowel × tone combination: Mali 500's
     ink runs 1.415em above the baseline (ฮื้) and 0.412em below it (งู), so two
     lines of Thai collide at any leading under 1.83 — 1.92 if you allow mai tri
     and mai chattawa, which this copy happens not to use. The hero heading was
     overlapping itself by 21px before this. Do not tighten it without measuring
     again; nothing carrying Thai should go under 1.55 even in the body face,
     where IBM Plex needs 1.50. */
  --display-leading: 1.94;

  --wrap: 1080px;
  --band: clamp(64px, 8vw, 96px);
  --bar: 74px;             /* what the sticky bar covers; anchors clear it */
}

/* The same page with the light on. Night is the school's identity so it is the
   default and the toggle is a choice, not a preference sniff — but a nursery
   website gets read at two in the afternoon as often as at bedtime, and ivory
   on deep blue is not what everyone wants in daylight.
   The arc inverts rather than flattening: at night one band is lit, by day one
   band is dark, so the page still has a moment that stands apart. */
:root[data-theme="day"] {
  --night: #FBF7EE;
  --night-2: #F3ECDC;
  --dusk: #FFFFFF;
  --dawn: #16264F;

  --moon: #13203C;
  --moonlight: #5A6480;
  --ink: #F5F0E4;
  --ink-soft: #BCCAEB;

  /* measured: #B07C10 gave the kicker only 3.42:1 on this ground, so the day
     gold is darker than the night one — 5.6:1, and it still reads as gold */
  --star: #8A5F06;
  --star-dim: rgba(138, 95, 6, 0.28);
}
/* the mark is one ivory PNG; inverted it becomes the ink drawing it started as */
:root[data-theme="day"] .brand img,
:root[data-theme="day"] .hero-mark img,
:root[data-theme="day"] .f-mark { filter: invert(1); }
:root[data-theme="day"] .hero-mark img { filter: invert(1) drop-shadow(0 10px 22px rgba(19, 32, 60, .16)); }
:root[data-theme="day"] .topbar { background: rgba(251, 247, 238, .88); border-bottom-color: rgba(19, 32, 60, .12); }
:root[data-theme="day"] .btn-ghost { border-color: rgba(19, 32, 60, .26); }
:root[data-theme="day"] .btn-ghost:hover { border-color: var(--moon); background: rgba(19, 32, 60, .05); }
:root[data-theme="day"] .btn-star { color: #FFF8E9; }
:root[data-theme="day"] .btn-star:hover { background: #A5740E; border-color: #A5740E; }
:root[data-theme="day"] .band-dawn { box-shadow: inset 0 46px 52px -46px rgba(0, 0, 0, .45); }
:root[data-theme="day"] .band-dawn .kicker { color: #F2D08A; }
:root[data-theme="day"] .band-dawn em { color: #F2D08A; }
:root[data-theme="day"] .facts > div { border-bottom-color: rgba(188, 202, 235, .22); }
:root[data-theme="day"] .pillars li { border-color: rgba(19, 32, 60, .10); box-shadow: 0 2px 10px rgba(19, 32, 60, .05); }
:root[data-theme="day"] .pillars li::before { background: radial-gradient(70% 60% at 22% 0%, rgba(176, 124, 16, .10), transparent 70%); }
:root[data-theme="day"] footer { background: #F3ECDC; border-top-color: rgba(19, 32, 60, .12); }
:root[data-theme="day"] .hero { background: radial-gradient(130% 92% at 78% -8%, rgba(255, 247, 228, .9) 0%, rgba(251, 247, 238, 0) 62%), var(--night); }
:root[data-theme="day"] .hero::after { background: radial-gradient(58% 100% at 50% 0%, rgba(176, 124, 16, .10), transparent 72%); }
/* by day the light source is a sun, and the stars are gone */
:root[data-theme="day"] .moon {
  background: radial-gradient(circle at 38% 34%, #FFF6DC 0%, #FBDB93 44%, #F3C766 70%, #E9B647 100%);
  box-shadow: 0 0 44px 12px rgba(243, 199, 102, .40), 0 0 130px 52px rgba(243, 199, 102, .16);
}
:root[data-theme="day"] .hero::before,
:root[data-theme="day"] .twinkle,
:root[data-theme="day"] .shoot { opacity: 0 !important; }

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

html { scroll-behavior: smooth; }
/* every heading these links point at used to land underneath the sticky bar */
section[id], header[id] { scroll-margin-top: var(--bar); }

body {
  background: var(--night);
  color: var(--moon);
  transition: background-color .45s ease, color .45s ease;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 680px; }
/* A reading measure that keeps the left edge where the rest of the page put it.
   .narrow re-centres, which is right for the closing section and wrong for a
   paragraph that follows a left-aligned heading — the text visibly stepped
   inward halfway down the page. */
.measure { max-width: 62ch; }

/* English is the second voice, never a second page: half the families here
   read one and half the other. */
.en { display: block; font-size: .86em; color: var(--moonlight); line-height: 1.62; margin-top: 8px; }
.band-dawn .en { color: var(--ink-soft); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--star); color: var(--night);
  padding: 10px 18px; border-radius: 999px; z-index: 200;
}
.skip-link:focus { left: 20px; top: 14px; }

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

/* ---- the bar ----------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 13px 28px;
  background: rgba(12, 22, 48, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(188, 202, 235, 0.15);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { width: 42px; height: auto; }
.brand-text { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; }
/* The second line is Thai at 11.5px and it sits directly under the wordmark,
   so it gets ordinary Thai leading rather than the 1.1 a Latin lockup would
   take — otherwise the marks in เนชั่น and เซอรี่ climb into the Q-kid above. */
.brand-text small {
  display: block; font-family: var(--body); font-weight: 400;
  font-size: 11.5px; line-height: 1.55; letter-spacing: .01em;
  color: var(--moonlight); margin-top: 1px;
}
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar-links a { text-decoration: none; }
.topbar-links a:not(.btn) { color: var(--moonlight); font-size: 15.5px; transition: color .18s ease; }
.topbar-links a:not(.btn):hover { color: var(--moon); }

/* ---- the bar's right-hand cluster ---------------------------------------- */

.topbar-right { display: flex; align-items: center; gap: 14px; }

/* The light switch. One span becomes either body: a filled disc for the sun,
   or the same disc with a second one punched out of it for the crescent. */
.theme-switch {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid rgba(188, 202, 235, .3); border-radius: 50%;
  cursor: pointer; padding: 0;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.theme-switch:hover { border-color: var(--star); transform: scale(1.06); }
:root[data-theme="day"] .theme-switch { border-color: rgba(19, 32, 60, .22); }
.orb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--star);
  box-shadow: inset -5px -2px 0 0 var(--night);
  transition: box-shadow .38s cubic-bezier(.22,.61,.36,1), background-color .38s ease;
}
/* by day it fills out into a sun, with rays */
:root[data-theme="day"] .orb {
  width: 13px; height: 13px;
  box-shadow:
    inset 0 0 0 0 var(--night),
    0 -8px 0 -5px var(--star), 0 8px 0 -5px var(--star),
    -8px 0 0 -5px var(--star), 8px 0 0 -5px var(--star),
    -6px -6px 0 -5.5px var(--star), 6px 6px 0 -5.5px var(--star),
    -6px 6px 0 -5.5px var(--star), 6px -6px 0 -5.5px var(--star);
}

/* Three lines that become a cross. Only ever shown on small screens, where the
   links have nowhere to sit. */
.menu-btn {
  display: none; width: 38px; height: 38px; flex: none; padding: 0;
  background: none; border: 1px solid rgba(188, 202, 235, .3); border-radius: 50%;
  cursor: pointer; position: relative;
}
:root[data-theme="day"] .menu-btn { border-color: rgba(19, 32, 60, .22); }
.menu-btn i, .menu-btn::before, .menu-btn::after {
  content: ''; position: absolute; left: 11px; right: 11px; height: 1.5px; border-radius: 2px;
  background: var(--moon);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
.menu-btn::before { top: 13px; }
.menu-btn i { top: 18.2px; }
.menu-btn::after { bottom: 13px; }
.menu-btn[aria-expanded="true"]::before { transform: translateY(5.2px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i { opacity: 0; }
.menu-btn[aria-expanded="true"]::after { transform: translateY(-5.2px) rotate(-45deg); }

@media (max-width: 860px) {
  .topbar { padding: 11px 18px; }
  .brand-text small { display: none; }
  .menu-btn { display: block; }
  .topbar-right > .btn { display: none; }
  .topbar-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 18px 18px;
    /* opaque, and from the palette so it follows the theme: `inherit` took the
       background of .topbar-right, which has none, and the menu opened
       see-through onto the moon */
    background: var(--night);
    border-bottom: 1px solid rgba(188, 202, 235, .16);
    /* closed by default and inert, so a tab never lands in a hidden menu */
    display: none;
  }
  .topbar-links.open { display: flex; }
  .topbar-links a:not(.btn) { padding: 13px 2px; border-bottom: 1px solid rgba(188, 202, 235, .12); font-size: 16px; }
  .topbar-links .btn { margin-top: 14px; }
}
@media (min-width: 861px) { .topbar-links .btn.menu-cta { display: none; } }

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: 999px;
  font-size: 16px; font-weight: 500; line-height: 1.6; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-star { background: var(--star); color: #2A2008; border-color: var(--star); }
.btn-star:hover { background: #F7DFA9; transform: translateY(-1px); }
.btn-ghost { color: var(--moon); border-color: rgba(188, 202, 235, 0.42); }
.btn-ghost:hover { border-color: var(--moon); background: rgba(245, 240, 228, 0.07); }
.topbar .btn { padding: 9px 20px; font-size: 15px; }

/* ---- the moon ---------------------------------------------------------- */

/* One light source for the whole page. It rises above the mark in the hero and
   returns, smaller and dimmer, where the reader is asked to visit. It is a lit
   body, not a flat disc, so the highlight sits off-centre and the glow is cast
   by shadows rather than painted as a ring. */
.moon {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 36% 31%, #FFFCF2 0%, #F7EBCB 42%, #ECDAAE 68%, #DCC894 100%);
  box-shadow:
    0 0 50px 12px rgba(247, 235, 203, .26),
    0 0 150px 56px rgba(188, 202, 235, .13);
  pointer-events: none;
}

/* ---- hero -------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(52px, 6.4vw, 80px) 0 clamp(52px, 6.4vw, 80px);
  background:
    radial-gradient(130% 92% at 78% -8%, rgba(26, 42, 85, .9) 0%, rgba(12, 22, 48, 0) 62%),
    var(--night);
}
/* a scatter of stars, fixed rather than twinkling: a nursery at night, not a
   screensaver */
.hero::before {
  content: ''; position: absolute; inset: -90px 0; pointer-events: none;
  transform: translate3d(0, var(--star-shift, 0px), 0);
  background-image:
    radial-gradient(1.7px 1.7px at 12% 22%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 26% 66%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 15%, rgba(242, 208, 138, .5) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 62% 80%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 38%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 72%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 34% 90%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 55% 48%, var(--star-dim) 50%, transparent 51%);
}
/* the ground the night sits on: a wide, very soft lift along the bottom edge */
.hero::after {
  content: ''; position: absolute; left: -12%; right: -12%; bottom: -180px; height: 300px;
  background: radial-gradient(58% 100% at 50% 0%, rgba(188, 202, 235, .15), transparent 72%);
  pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 48px; align-items: center;
}

.eyebrow { font-size: 14.5px; color: var(--moonlight); margin-bottom: 18px; display: flex; align-items: flex-start; gap: 10px; }
/* flex-start, not center: when the line wraps on a phone the rule belongs
   beside the first line, not floating between the two */
.eyebrow::before { content: ''; width: 22px; height: 1px; margin-top: .85em; background: var(--star); flex: none; }

h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(29px, 4.4vw, 45px); line-height: var(--display-leading);
  letter-spacing: -.005em; text-wrap: balance;
}
.hero-sub { margin-top: 20px; max-width: 42ch; color: var(--moon); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Three things a parent wants before anything else — age, hours, where you are
   — said once in the hero and again, in full, in the lit band below. */
.hero-facts {
  list-style: none; display: grid; grid-template-columns: repeat(3, auto);
  justify-content: start; gap: 0 26px; margin-top: 34px;
  font-size: 14.5px; line-height: 1.62; color: var(--moon);
}
.hero-facts li { padding-left: 15px; border-left: 1px solid rgba(188, 202, 235, .28); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
.hero-facts .en { font-size: 12.5px; margin-top: 3px; }
@media (max-width: 620px) {
  .hero-facts { grid-template-columns: 1fr; gap: 14px; }
  .hero-facts li { padding-left: 15px; border-left: 1px solid rgba(188, 202, 235, .28); }
}

/* The moon rises above the mark, never across it: both are ivory, and where
   they overlapped the Q simply dissolved into the light. They are two rows of
   the same grid rather than a disc positioned by hand, so no viewport width
   can push one onto the other. */
.hero-mark { display: grid; justify-items: center; gap: clamp(20px, 3.4vw, 40px); }
.hero-mark .moon {
  position: relative; justify-self: end;
  width: clamp(96px, 12vw, 150px); aspect-ratio: 1; margin-right: 9%;
}
.hero-mark img {
  width: min(248px, 54vw); height: auto;
  filter: drop-shadow(0 0 30px rgba(188, 202, 235, .26));
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-mark { order: -1; gap: 18px; }
  .hero-mark img { width: 172px; }
  .hero-mark .moon { margin-right: 14%; }
  .hero-sub { max-width: none; }
}

/* ---- bands ------------------------------------------------------------- */

.band { padding: var(--band) 0; position: relative; overflow: hidden; }
.band, footer, .topbar, .pillars li { transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
.band-night { background: var(--night); }
.band-dusk { background: var(--night-2); }
/* the one lit band: first light along its top edge, so the page reads as a
   night that breaks rather than a dark page with a white hole in it */
.band-dawn {
  background: var(--dawn); color: var(--ink);
  box-shadow: inset 0 46px 52px -46px rgba(242, 208, 138, .75);
}

.kicker { font-size: 14px; color: var(--star); margin-bottom: 10px; letter-spacing: .01em; }
/* on the lit band this gold sits on ivory, where #9A7418 measured only 3.85:1 */
.band-dawn .kicker { color: #8A5F06; }

h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.9vw, 31px); line-height: var(--display-leading);
  margin-bottom: 22px; text-wrap: balance;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; max-width: 900px; }
@media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } }

em { font-style: normal; font-family: var(--display); font-weight: 500; color: var(--star); }
.band-dawn em { color: #8A5F06; }

/* ---- the four pillars -------------------------------------------------- */

.pillars {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 38px;
}
.pillars li {
  position: relative; overflow: hidden;
  background: var(--dusk); border: 1px solid rgba(188, 202, 235, .14);
  border-radius: 16px; padding: 22px 20px 20px;
  font-size: 17px;
}
/* a little sky inside each tile, brightest at the star */
.pillars li::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 22% 0%, rgba(242, 208, 138, .13), transparent 70%);
}
.pillars .en { font-size: 12.5px; margin-top: 2px; }
.star {
  position: relative; display: block; width: 14px; height: 14px; margin-bottom: 12px;
  background: var(--star);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@media (max-width: 780px) { .pillars { grid-template-columns: repeat(2, 1fr); } }

/* ---- the name ---------------------------------------------------------- */

/* One quiet beat: the school's own explanation of what it is called, set as a
   line of handwriting rather than a paragraph. */
.name-line {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.6vw, 27px); line-height: var(--display-leading);
  max-width: 22ch;
}
.name-line span { color: var(--star); }

/* ---- the lit band ------------------------------------------------------ */

.facts { margin-top: 6px; max-width: 760px; }
.facts > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 4px 24px;
  padding: 17px 0; border-bottom: 1px solid rgba(20, 34, 74, .13);
}
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-soft); font-size: 15.5px; }
.facts dd { color: var(--ink); }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---- closing ----------------------------------------------------------- */

.cta { text-align: center; }
.cta .kicker { text-align: center; }
.cta .hero-cta { justify-content: center; }
.cta p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta .moon { width: clamp(64px, 8vw, 96px); aspect-ratio: 1; right: 7%; top: 44px; }
.map { margin-top: 22px; font-size: 15px; }
.map a { color: var(--star); }

/* ---- footer ------------------------------------------------------------ */

footer {
  background: #08102A; padding: 44px 0 52px; text-align: center;
  border-top: 1px solid rgba(188, 202, 235, .12);
}
.f-mark { width: 60px; height: auto; opacity: .88; margin-bottom: 14px; }
.f-name { font-size: 15.5px; }
.f-quiet { font-size: 14px; color: var(--moonlight); margin-top: 5px; }
/* Links inside running text take the colour of the text around them. The two
   in the facts list were still browser-default blue — which passed on the ivory
   band by luck and read at 1.57:1 once that band inverted for daylight. */
.facts a, .f-quiet a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .2s ease;
}
.facts a:hover, .f-quiet a:hover { text-decoration-color: currentColor; }

/* A phone number that wraps mid-number reads as two numbers. */
a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }

/* ---- the sky is not a photograph --------------------------------------- */

/* Four stars that breathe, on top of the fixed field. Four, not forty: a
   nursery at night, still not a screensaver. The periods are prime-ish and
   unequal so they never fall into step with each other. */
.twinkle {
  position: absolute; border-radius: 50%; background: #FFF6DF;
  width: 2.5px; height: 2.5px; pointer-events: none; opacity: .45;
  box-shadow: 0 0 5px 1px rgba(255, 246, 223, .6);
  animation: breathe 5.5s ease-in-out infinite;
}
.twinkle:nth-of-type(1) { left: 17%; top: 26%; animation-duration: 5.5s; }
.twinkle:nth-of-type(2) { left: 39%; top: 13%; animation-duration: 7.3s; animation-delay: -2.1s; width: 3px; height: 3px; }
.twinkle:nth-of-type(3) { left: 58%; top: 70%; animation-duration: 6.1s; animation-delay: -4.4s; }
.twinkle:nth-of-type(4) { left: 84%; top: 58%; animation-duration: 8.2s; animation-delay: -1.3s; }
@keyframes breathe {
  0%, 100% { opacity: .22; transform: scale(.85); }
  50%      { opacity: .95; transform: scale(1.15); }
}

/* A shooting star, rarely. Its whole job is that someone who stays on the page
   for half a minute sees one and is pleased. Positioned and fired from script
   so it never runs while the hero is off screen. */
.shoot {
  position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%;
  background: #FFF8E6; opacity: 0; pointer-events: none;
  box-shadow: 0 0 8px 2px rgba(255, 248, 230, .8);
}
.shoot::after {
  content: ''; position: absolute; right: 2px; top: 50%; width: 104px; height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(255, 248, 230, .9), rgba(255, 248, 230, 0));
  border-radius: 2px;
}

/* The moon and the field drift at different rates as the page moves, which is
   the whole of the depth. Transform only — no layout, no paint. */
.hero-mark .moon { transform: translate3d(var(--moon-x, 0px), var(--moon-y, 0px), 0); will-change: transform; }
.hero-mark img { transform: translate3d(0, var(--mark-y, 0px), 0); }

/* ---- how far through you are -------------------------------------------- */

.read-bar {
  position: fixed; left: 0; top: 0; z-index: 120;
  width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--star), #FFF3D2);
  pointer-events: none;
}

/* ---- things that answer when you touch them ----------------------------- */

.pillars li {
  transition: transform .26s cubic-bezier(.22,.61,.36,1), border-color .26s ease, background-color .26s ease;
}
.pillars li:hover { transform: translateY(-4px); border-color: var(--star-dim); }
.pillars li .star { transition: transform .26s cubic-bezier(.34,1.56,.64,1), filter .26s ease; }
.pillars li:hover .star { transform: scale(1.35) rotate(18deg); filter: drop-shadow(0 0 7px var(--star)); }

.facts > div { transition: background-color .2s ease; border-radius: 8px; }
.facts > div:hover { background: rgba(20, 34, 74, .045); }
:root[data-theme="day"] .facts > div:hover { background: rgba(245, 240, 228, .07); }

.topbar-links a:not(.btn) { position: relative; }
.topbar-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--star); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.topbar-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.map a { position: relative; }
.map a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- arriving ---------------------------------------------------------- */

/* Sections settle in as you reach them. The class is added by script, so with
   no script — or with motion turned down — everything is simply there. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); }
.js-reveal .reveal.seen {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--stagger, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .twinkle { opacity: .45; }
  .shoot { display: none; }
  .read-bar { display: none; }
}