:root {
  --woad: #1d2740;
  --woad-deep: #151c30;
  --woad-light: #9fb3cf;
  --natural: #e6d9bb;
  --weld: #d8a530;
  --madder: #c25a3e;
  --sage: #7f8c58;
  --pad: clamp(16px, 3.2vw, 48px);
  color-scheme: dark;
}

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

html { background: var(--woad); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--woad);
  color: var(--natural);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: clamp(16px, 1.05vw + 8px, 20px);
  line-height: 1.45;
  font-variation-settings: "wdth" 100;
  overflow-x: hidden;
  caret-color: var(--weld);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--weld); color: var(--woad-deep); }
* { scrollbar-width: thin; scrollbar-color: #3a4a6e var(--woad-deep); }
:focus-visible { outline: 2px solid var(--weld); outline-offset: 4px; border-radius: 2px; }

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.bar, main, .foot { position: relative; z-index: 1; }

.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px var(--pad);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  font-variation-settings: "wdth" 112;
  z-index: 5;
  pointer-events: none;
}
.bar { transition: opacity .4s ease-out; }
.bar.is-hidden { opacity: 0; }
.mark { font-weight: 800; }
.bar-date { color: var(--woad-light); font-variant-numeric: tabular-nums; }
.bar-date time { color: var(--natural); }

h2, .year, .count {
  font-variation-settings: "wdth" 125;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

/* hero */
.hero {
  min-height: 100svh;
  padding: 96px var(--pad) 0;
}
.hero-line {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--woad-light);
  max-width: 22ch;
}
.hero-line time { color: var(--natural); }
.count {
  margin-top: 0.3em;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  color: var(--weld);
  font-variant-numeric: tabular-nums;
}
.count span { color: var(--natural); }

/* orbit */
.orbit {
  height: 100svh;
  position: relative;
}
.orbit-ui {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  max-width: 34rem;
}
.year {
  font-size: clamp(4.5rem, 13vw, 10rem);
  font-variant-numeric: tabular-nums;
  color: var(--natural);
}
.readout {
  display: flex;
  gap: 2.4rem;
  margin: 1rem 0 1.2rem;
}
.readout dt { font-size: 0.75rem; color: var(--woad-light); letter-spacing: 0.04em; }
.readout dd {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  font-variant-numeric: tabular-nums;
  color: var(--weld);
}
.note { font-size: 1rem; }
.fine { margin-top: 0.4rem; font-size: 0.75rem; color: var(--woad-light); }

/* strip */
.strip {
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.track {
  display: flex;
  gap: 0;
  padding: 0 var(--pad);
  will-change: transform;
}
.panel {
  flex: 0 0 clamp(280px, 38vw, 560px);
  padding: 0 clamp(16px, 3vw, 48px) 0 0;
}
.panel h2 {
  display: inline-block;
  font-size: clamp(3.4rem, 8vw, 7rem);
  color: transparent; /* stitched on the canvas; kept here for screen readers */
  margin-bottom: 0.25em;
}
.panel p { max-width: 24ch; font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
.panel i { color: var(--natural); font-style: italic; }
.panel-next h2 { color: transparent; }

/* nucleus + meteors */
.nucleus, .meteors {
  min-height: 130svh;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}
.nucleus { justify-content: flex-end; }
.side { max-width: 30rem; }
.side h2 { font-size: clamp(2.8rem, 6.5vw, 6rem); margin-bottom: 0.3em; }
.side p { font-size: clamp(1.05rem, 1.4vw, 1.35rem); max-width: 26ch; }
.meteors .side { max-width: 46rem; }
.meteors h2 { color: var(--natural); font-size: clamp(2.4rem, 5vw, 4.6rem); }
.nucleus h2 { color: var(--weld); }

.showers { list-style: none; padding: 0; margin-top: 1.6rem; display: grid; gap: 0.5rem; }
.showers li {
  display: grid;
  grid-template-columns: 9.5rem auto 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-top: 0.5rem;
  border-top: 1px solid #3a4a6e;
}
.showers b { font-weight: 700; }
.showers span { color: var(--woad-light); }
.showers em { font-style: normal; color: var(--weld); font-weight: 700; font-size: 0.85rem; }

/* close */
.close {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 var(--pad) 18svh;
}
.age { text-align: center; }
.age label { display: block; color: var(--woad-light); font-size: 0.85rem; margin-bottom: 0.3rem; }
.age input {
  font: inherit;
  font-size: 2rem;
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  width: 6ch;
  text-align: center;
  color: var(--natural);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--woad-light);
  padding: 0.1em 0;
  -moz-appearance: textfield;
}
.age input::-webkit-outer-spin-button, .age input::-webkit-inner-spin-button { -webkit-appearance: none; }
.age input::placeholder { color: #8a9cbc; }
.age input:hover { border-color: var(--natural); }
.age input:focus-visible { outline: none; border-color: var(--weld); }
.age-out { margin-top: 1rem; font-size: 1.15rem; }
.age-out output { color: var(--weld); font-weight: 800; font-variant-numeric: tabular-nums; }

.foot {
  padding: 28px var(--pad) 32px;
  font-size: 0.8rem;
  color: var(--woad-light);
  border-top: 1px solid #2c3958;
  background: var(--woad-deep);
}

@media (max-width: 700px) {
  .readout { gap: 1.4rem; }
  .showers li { grid-template-columns: 8rem auto; }
  .showers em { grid-column: 1 / -1; }
  .nucleus { align-items: flex-end; padding-bottom: 14svh; }
  .meteors { align-items: flex-end; padding-bottom: 14svh; }
}

/* needle-eye cursor */
.needle {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 1.5px solid var(--natural);
  border-radius: 50% / 38%;
  rotate: -35deg;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease-out, scale .35s cubic-bezier(.16, 1, .3, 1), border-color .3s ease-out;
}
.needle.on { opacity: 1; }
.needle.big { scale: 1.8; border-color: var(--weld); }
@media (pointer: fine) { html, body { cursor: none; } input { cursor: none; } }

/* flyby */
.flyby { height: 100svh; position: relative; }
.fly-ui { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); }
.fly-date { color: var(--woad-light); font-size: clamp(0.95rem, 1.2vw, 1.15rem); }
.fly-km {
  font-variation-settings: "wdth" 125;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-size: clamp(3.6rem, 12vw, 11rem);
  font-variant-numeric: tabular-nums;
  margin: 0.15em 0 0.1em;
}
.fly-note { font-size: clamp(1.05rem, 1.4vw, 1.35rem); color: var(--weld); font-weight: 700; }
.flyby.hit .fly-km { color: var(--madder); }

/* loader */
.loader {
  position: fixed; inset: 0; z-index: 20;
  background: var(--woad-deep);
  display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--natural);
}
.loader-n {
  font-variation-settings: "wdth" 125; font-weight: 850; letter-spacing: -0.03em;
  font-size: clamp(3rem, 8vw, 6rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.loader-bar {
  width: min(320px, 70vw); height: 3px;
  background: repeating-linear-gradient(90deg, #3a4a6e 0 8px, transparent 8px 12px);
}
.loader-bar i {
  display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: repeating-linear-gradient(90deg, var(--weld) 0 8px, transparent 8px 12px);
}
.loader-t { font-size: 0.8rem; color: var(--woad-light); letter-spacing: 0.06em; }

/* 1910 */
.earth { height: 100svh; display: flex; align-items: center; padding: 0 var(--pad); }
.earth h2 { color: var(--natural); }
.earth .earth-2 { margin-top: 0.8rem; color: var(--woad-light); }
@media (max-width: 700px) { .earth { align-items: flex-end; padding-bottom: 12svh; } }

.side p, .panel p { text-wrap: pretty; }
.hero-line { margin-top: 0.2em; color: var(--woad-light); }
.count { margin-top: 0; }
.fly-date { margin-top: 0.6rem; }
.nucleus .side { max-width: 44rem; }
.nucleus h2 { white-space: nowrap; font-size: clamp(2.6rem, 5.4vw, 5rem); }