:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  --ink: #15160f;
  --cream: #f0eddd;
  --sun: #ff5f24;
  --lime: #d8ff39;
  --blue: #1649ff;
  --sky: #9eb9ff;
  --pad: clamp(1.1rem, 3vw, 3rem);
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; background: var(--cream); }
body { min-width: 0; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--cream); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-head {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem var(--pad);
  color: #fff;
  background: linear-gradient(to bottom, rgba(15, 20, 28, 0.46), transparent);
  mix-blend-mode: difference;
}

.identity, .site-head nav, .time-readout { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 2rem); }
.site-head nav { justify-content: center; }
.time-readout { justify-content: flex-end; margin: 0; }
.identity, .site-head a, .time-readout, .eyebrow, .section-note {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.time-readout span:last-child { opacity: 0.6; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: var(--sky);
  transition: background-color 400ms ease;
}

.sky { position: absolute; inset: 0; overflow: hidden; }
.sky::after {
  position: absolute;
  right: -12vw;
  bottom: -24vw;
  width: 68vw;
  height: 46vw;
  border: 1px solid rgba(21, 22, 15, 0.32);
  border-radius: 50%;
  content: "";
  transform: rotate(-13deg);
}

.sun {
  position: absolute;
  z-index: 3;
  left: 40%;
  top: 25%;
  width: clamp(7rem, 15vw, 14rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 1px rgba(21, 22, 15, 0.22);
  transform: translate(-50%, -50%);
  transition: left 180ms linear, top 180ms linear, background-color 400ms ease;
}
.sun span { position: absolute; inset: 18%; border: 1px solid rgba(21, 22, 15, 0.28); border-radius: 50%; }
.sun-path {
  position: absolute;
  left: 9%;
  bottom: 17%;
  width: 82%;
  height: 63%;
  border: 1px dashed rgba(21, 22, 15, 0.5);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.horizon-lines { position: absolute; right: 0; bottom: 13%; left: 0; height: 19%; }
.horizon-lines span { position: absolute; left: -5%; width: 110%; height: 1px; background: rgba(21, 22, 15, 0.45); transform: rotate(var(--r)); }
.horizon-lines span:nth-child(1) { top: 5%; --r: 1deg; }
.horizon-lines span:nth-child(2) { top: 35%; --r: -2deg; }
.horizon-lines span:nth-child(3) { top: 65%; --r: 2.5deg; }
.horizon-lines span:nth-child(4) { top: 95%; --r: -0.5deg; }

.hero-type { position: relative; z-index: 4; display: flex; min-height: 100svh; flex-direction: column; justify-content: flex-end; padding: 8rem var(--pad) 9rem; pointer-events: none; }
.hero-type .eyebrow { position: absolute; top: 17vh; left: var(--pad); }
.hero h1 { margin: 0; font-size: clamp(5.4rem, 15vw, 14rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.68; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: 22vw; color: var(--lime); -webkit-text-stroke: 1px var(--ink); }
.hero-index { position: absolute; right: var(--pad); bottom: 10rem; margin: 0; font-size: 0.66rem; font-weight: 800; line-height: 1.4; letter-spacing: 0.12em; text-align: right; }

.time-control {
  position: absolute;
  z-index: 8;
  right: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem 2rem;
  align-items: end;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(21, 22, 15, 0.65);
}
.time-labels { display: flex; justify-content: space-between; grid-column: 1; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.09em; }
.time-control input { grid-column: 1; width: 100%; }
.time-now { display: flex; min-width: 7.5rem; flex-direction: column; grid-column: 2; grid-row: 1 / 3; gap: 0.2rem; align-items: flex-end; }
.time-now span { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.time-now output { font-size: clamp(2rem, 4vw, 4rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.9; }

input[type="range"] { height: 2rem; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: currentColor; }
input[type="range"]::-webkit-slider-thumb { width: 1.4rem; height: 1.4rem; margin-top: -0.65rem; appearance: none; border: 2px solid currentColor; border-radius: 50%; background: var(--lime); }
input[type="range"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.bridge { display: grid; min-height: 82svh; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2vw; padding: 8vh var(--pad); overflow: hidden; color: var(--cream); background: var(--ink); }
.bridge p { margin: 0; font-size: clamp(4rem, 12vw, 12rem); font-weight: 900; letter-spacing: -0.08em; line-height: 0.8; text-transform: uppercase; }
.bridge p:last-child { text-align: right; color: var(--sun); }
.bridge span { font-size: clamp(3rem, 7vw, 7rem); font-weight: 300; }

.forecast { padding: 14vh var(--pad); color: var(--ink); background: var(--cream); }
.section-head { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; gap: 2rem; margin-bottom: 10vh; }
.section-head h2 { margin: 0; font-size: clamp(4.5rem, 11vw, 11rem); font-weight: 900; letter-spacing: -0.085em; line-height: 0.75; text-transform: uppercase; }
.section-note { justify-self: end; margin: 0; text-align: right; }
.forecast-field { position: relative; min-height: 76svh; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); overflow: hidden; }
.forecast-scale { position: absolute; z-index: 3; top: 2rem; bottom: 5rem; left: 0; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.yield-bars { position: absolute; top: 2rem; right: 0; bottom: 5rem; left: 4rem; display: flex; align-items: flex-end; gap: clamp(0.2rem, 0.6vw, 0.8rem); }
.yield-bars span { flex: 1; height: var(--level); min-width: 0; background: var(--blue); transition: height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease; }
.yield-bars span.is-past { background: var(--sun); }
.forecast-cursor { position: absolute; z-index: 4; top: 0; bottom: 0; left: 36.6%; width: 1px; background: var(--ink); pointer-events: none; transition: left 180ms linear; }
.forecast-cursor span { position: absolute; top: 1.8rem; left: 50%; width: 1rem; height: 1rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--lime); transform: translateX(-50%); }
.forecast-foot { position: absolute; right: 0; bottom: 1rem; left: 4rem; display: flex; justify-content: space-between; }
.forecast-foot p { display: flex; gap: 0.8rem; margin: 0; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }

.finder { display: grid; min-height: 110svh; grid-template-columns: minmax(17rem, 0.62fr) minmax(0, 1.38fr); color: var(--cream); background: var(--ink); }
.finder-copy { display: flex; flex-direction: column; justify-content: space-between; padding: 14vh var(--pad) var(--pad); border-right: 1px solid rgba(240, 237, 221, 0.32); }
.finder-copy h2 { margin: 0; font-size: clamp(3.6rem, 5.8vw, 7rem); font-weight: 900; letter-spacing: -0.08em; line-height: 0.76; text-transform: uppercase; }
.finder-key { display: grid; gap: 0.6rem; }
.finder-key p { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.key-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--color); }
.key-sun { --color: var(--sun); }
.key-site { --color: var(--lime); }

.map-stage { position: relative; min-height: 110svh; overflow: hidden; background: #263b2e; touch-action: manipulation; }
#map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-sun { position: absolute; z-index: 4; left: 36%; top: 24%; width: clamp(5rem, 9vw, 8rem); aspect-ratio: 1; border-radius: 50%; background: var(--sun); box-shadow: 0 0 3rem rgba(255, 95, 36, 0.6); transform: translate(-50%, -50%); transition: left 180ms linear, top 180ms linear; pointer-events: none; }
.map-sun span { position: absolute; inset: 25%; border: 1px solid var(--ink); border-radius: 50%; }
.site-marker { position: absolute; z-index: 6; left: 56%; top: 61%; width: 4rem; height: 4rem; border: 0; border-radius: 50%; color: var(--ink); background: var(--lime); transform: translate(-50%, -50%); cursor: move; }
.site-marker span { position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); }
.site-marker span:first-child { width: 1.4rem; height: 2px; }
.site-marker span:last-child { width: 2px; height: 1.4rem; }
.site-marker:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.map-label { position: absolute; z-index: 3; padding: 0.35rem 0.5rem; color: var(--ink); background: var(--cream); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.map-label-a { top: 28%; left: 16%; }.map-label-b { top: 66%; right: 9%; }.map-label-c { right: 14%; bottom: 19%; }
.map-instruction { position: absolute; z-index: 5; top: var(--pad); left: var(--pad); margin: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.map-time { position: absolute; z-index: 7; right: var(--pad); bottom: var(--pad); left: var(--pad); display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem; color: var(--ink); background: var(--cream); }
.map-time label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.map-time output { min-width: 4ch; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.04em; }

.sequence { position: relative; display: flex; min-height: 110svh; flex-direction: column; justify-content: center; padding: 12vh var(--pad); overflow: clip; color: var(--ink); background: var(--lime); }
.sequence h2 { position: relative; z-index: 2; margin: 1.5rem 0 0; font-size: clamp(5rem, 16vw, 15rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.65; text-transform: uppercase; }
.sequence h2 span { display: block; }.sequence h2 span:nth-child(2) { margin-left: 22vw; color: var(--blue); }.sequence h2 span:last-child { align-self: flex-end; text-align: right; }
.sequence-orbit { position: absolute; right: -15vw; bottom: -18vw; width: 70vw; aspect-ratio: 1; }
.sequence-orbit span { position: absolute; top: 50%; left: 50%; border: 1px solid var(--ink); border-radius: 50%; transform: translate(-50%, -50%) rotate(var(--r)); }
.sequence-orbit span:nth-child(1) { width: 100%; height: 35%; --r: 18deg; }.sequence-orbit span:nth-child(2) { width: 65%; height: 90%; --r: -32deg; }.sequence-orbit span:nth-child(3) { width: 12%; aspect-ratio: 1; background: var(--sun); --r: 0deg; }

.close { display: grid; min-height: 48svh; grid-template-columns: 1fr 2fr; align-items: end; gap: 2rem; padding: 10vh var(--pad) var(--pad); color: var(--cream); background: var(--ink); }
.close > p { margin: 0; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.close a { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.close a span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; }.close a strong { font-size: clamp(2rem, 5vw, 5rem); letter-spacing: -0.06em; }.close a span:last-child { font-size: 2rem; }
.close a:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

@media (max-width: 62rem) {
  .section-head { grid-template-columns: 1fr 2fr; }.section-note { display: none; }
  .finder { grid-template-columns: 38% 62%; }
  .site-marker { width: 3.4rem; height: 3.4rem; }
}

@media (max-width: 44rem) {
  .site-head { grid-template-columns: 1fr auto; }.site-head nav { display: none; }.time-readout { display: none; }
  .hero-type { padding-bottom: 10rem; }.hero-type .eyebrow { top: 8rem; }
  .hero h1 { font-size: clamp(5rem, 23vw, 7.1rem); line-height: 0.73; }.hero h1 span:last-child { margin-left: 0; }
  .sun { width: 8rem; }.sun-path { left: -15%; width: 130%; }
  .hero-index { display: none; }.time-control { grid-template-columns: 1fr; }.time-now { grid-column: 1; grid-row: auto; align-items: flex-start; }.time-labels { order: 2; }.time-control input { order: 1; }.time-now { order: 3; }
  .bridge { min-height: 70svh; grid-template-columns: 1fr; gap: 1rem; align-content: center; }.bridge span { display: none; }.bridge p:last-child { text-align: left; }
  .section-head { display: block; }.section-head h2 { margin-top: 1.5rem; font-size: clamp(4rem, 20vw, 6.5rem); }.forecast-field { min-height: 65svh; }.yield-bars { left: 2.5rem; }.forecast-foot { left: 2.5rem; }
  .finder { display: block; }.finder-copy { min-height: 75svh; padding-top: 12vh; border-right: 0; }.finder-copy h2 { font-size: clamp(3.2rem, 17vw, 6rem); }.map-stage { min-height: 85svh; }.map-time { grid-template-columns: auto 1fr; }.map-time output { grid-column: 2; }.map-label-c { display: none; }
  .sequence { min-height: 90svh; }.sequence h2 { font-size: clamp(4.8rem, 22vw, 7rem); }.sequence h2 span:nth-child(2) { margin-left: 0; }
  .close { grid-template-columns: 1fr; }.close a { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}