:root{
  --bg:#05070f;
  --ink:#e8ecf5;
  --dim:#9aa6bf;
  --faint:#6b7894;
  --sin:#5ad2ff;
  --sgn:#ff8fa8;
  --gold:#ffd27d;
  --edge:rgba(120,145,190,.16);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── live map canvas, fixed behind everything ── */
#map{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  display:block;
}
#grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(90,210,255,.07), transparent 45%),
    radial-gradient(circle at 78% 72%, rgba(255,143,168,.07), transparent 45%),
    linear-gradient(180deg, rgba(5,7,15,.68) 0%, rgba(5,7,15,.45) 35%, rgba(5,7,15,.86) 100%);
}

main{position:relative; z-index:2}

/* ── sections ── */
.act{
  min-height:100vh;
  padding:9vh 6vw 8vh;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.act h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3.8vw,46px);
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
.lede{
  max-width:62ch;
  line-height:1.7;
  color:var(--dim);
  font-size:clamp(13px,1.25vw,15px);
  margin:0 0 1.9em;
}
.lede strong{color:var(--gold); font-weight:600}
.fine{color:#8b98b4; font-size:11.5px; letter-spacing:.04em; margin-top:1.4em}

/* ── hero ── */
.hero{justify-content:center; text-align:center; align-items:center}
.hero .kicker{margin-bottom:2.6em}
.kicker{
  color:#8b98b4; font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; margin:0 0 3.5em;
}
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(38px,8.2vw,104px);
  line-height:.95;
  letter-spacing:-.03em;
  margin:0 0 .9em;
}
h1 .one{color:var(--sin)}
h1 .hour{color:var(--gold)}
h1 .apart{color:var(--sgn)}

.clocks{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,4vw,64px); flex-wrap:wrap; margin-bottom:2.6em;
}
.clock{min-width:190px}
.city{font-size:11px; letter-spacing:.3em; color:#95a2bd}
.who{font-family:var(--serif); font-size:17px; color:#c3cce0; margin:.35em 0 .5em}
.time{
  font-size:clamp(30px,5.2vw,58px);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; line-height:1;
}
#clock-sin .time{color:var(--sin); text-shadow:0 0 34px rgba(90,210,255,.42)}
#clock-sgn .time{color:var(--sgn); text-shadow:0 0 34px rgba(255,143,168,.42)}
.meta{font-size:11px; letter-spacing:.16em; color:#8b98b4; margin-top:.9em}

.gap{display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.75}
.gap-line{width:1px; height:26px; background:linear-gradient(var(--faint),transparent)}
.gap-label{font-size:10px; letter-spacing:.22em; color:var(--gold); white-space:nowrap}

.verdict{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(15px,2.1vw,25px);
  color:var(--ink); max-width:26ch; line-height:1.5; margin:0;
  min-height:3em;
}
.scroll-hint{
  margin-top:3em; font-size:10px; letter-spacing:.38em;
  color:#8b98b4; text-transform:uppercase;
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}

/* ── stat panels ── */
.panel-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; background:var(--edge); border:1px solid var(--edge); margin-bottom:1.8em;
}
.panel{background:#070a14; padding:20px}
.panel-num{
  font-size:clamp(30px,4.6vw,48px); color:var(--gold);
  font-variant-numeric:tabular-nums; line-height:1;
}
.panel-lbl{font-size:11px; letter-spacing:.12em; color:#95a2bd; margin-top:.9em; text-transform:uppercase}

/* ── flight list ── */
.legend{margin:0 0 1em; display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.lg{font-size:13px; line-height:1}
.lg-her{color:var(--sgn)}
.lg-him{color:var(--sin)}
.lg-x{color:#8b98b4}

.flight-list{
  list-style:none; margin:0; padding:0 16px;
  background:#070a14; border:1px solid var(--edge);
}
.flight-list li{
  display:grid;
  grid-template-columns:104px 1fr 92px 84px;
  gap:14px; align-items:center;
  padding:11px 4px; border-bottom:1px solid var(--edge);
  font-size:13px; color:var(--dim);
}
.flight-list li:last-child{border-bottom:none}
.fl-cs{color:var(--ink); letter-spacing:.06em}
.fl-track{position:relative; height:3px; background:rgba(140,165,210,.24); border-radius:2px}
.fl-dot{
  position:absolute; top:50%; width:7px; height:7px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--faint);
  transition:left .9s linear;
}
.fl-dot.her{background:var(--sgn); box-shadow:0 0 12px var(--sgn)}
.fl-dot.him{background:var(--sin); box-shadow:0 0 12px var(--sin)}
.fl-alt,.fl-dir{font-size:12px; text-align:right; font-variant-numeric:tabular-nums; color:#aab6cd}
.fl-dir.her{color:var(--sgn)}
.fl-dir.him{color:var(--sin)}

/* ── coverage horizon ── */
.horizon-wrap{border:1px solid var(--edge); background:#070a14; padding:34px 26px 26px; margin-bottom:2.4em}
.horizon-track{
  position:relative; height:22px; border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(120,145,190,.10) 0 6px,transparent 6px 12px);
}
.horizon-lit{
  position:absolute; top:0; bottom:0; left:0; width:0;
  background:linear-gradient(90deg,rgba(90,210,255,.42),rgba(90,210,255,.13));
}
.horizon-mark{position:absolute; top:-9px; bottom:-9px; width:2px; background:var(--gold); left:0}
.horizon-end{position:absolute; top:30px; font-size:10px; letter-spacing:.22em; color:#95a2bd}
.horizon-sin{left:0; color:var(--sin)}
.horizon-sgn{right:0; color:var(--sgn)}

/* ── weather ── */
.wx-pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-bottom:2.6em}
.wx{
  border:1px solid var(--edge); background:#070a14;
  padding:26px;
}
.wx header{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9em}
.wx-city{font-size:11px; letter-spacing:.26em; color:#95a2bd}
.wx-sky{font-size:12px; color:#c3cce0; text-align:right; max-width:16ch}
.wx-temp{font-size:clamp(44px,7vw,74px); line-height:1; font-variant-numeric:tabular-nums}
#wx-sin .wx-temp{color:var(--sin)}
#wx-sgn .wx-temp{color:var(--sgn)}
.wx-rows{margin-top:1.5em; display:grid; gap:9px}
.wx-rows div{display:flex; justify-content:space-between; font-size:12px; color:#95a2bd}
.wx-rows b{color:var(--ink); font-weight:400}
.wx-bar{height:2px; background:rgba(120,145,190,.14); margin-top:1.8em; overflow:hidden}
.wx-bar i{display:block; height:100%; width:0}
#bar-sin{background:var(--sin)}
#bar-sgn{background:var(--sgn)}
.weather-verdict,.sun-verdict{
  font-family:var(--serif); font-style:italic; font-size:clamp(15px,2vw,23px);
  color:var(--gold); max-width:40ch; line-height:1.6; margin:0;
}

/* ── sun ── */
.sun-chart{border:1px solid var(--edge); background:#070a14; padding:30px 26px; margin-bottom:2.4em}
.sun-row{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.sun-times{font-size:11px; color:#95a2bd; width:150px; text-align:right; font-variant-numeric:tabular-nums}
.sun-row-ov .sun-track{height:12px; background:transparent}
.sun-overlap{
  position:absolute; top:0; bottom:0; left:0; width:0; border-radius:2px;
  background:repeating-linear-gradient(45deg,rgba(255,210,125,.55) 0 5px,rgba(255,210,125,.22) 5px 10px);
}
.sun-row-ov .sun-lbl{color:var(--gold)}
.sun-lbl{font-size:11px; letter-spacing:.2em; color:#95a2bd; width:34px}
.sun-track{position:relative; flex:1; height:16px; background:rgba(140,165,210,.20); border-radius:2px; overflow:hidden}
.sun-day{
  position:absolute; top:0; bottom:0; left:0; width:0; border-radius:2px;
  /* peaks at solar noon, not at sunset */
  background:linear-gradient(90deg,
    rgba(255,210,125,.22) 0%, rgba(255,210,125,.80) 50%, rgba(255,210,125,.22) 100%);
}
.sun-now{position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--ink); left:0}
#now-sin{background:var(--sin)}
#now-sgn{background:var(--sgn)}
.sun-axis{
  display:flex; justify-content:space-between;
  margin:0 164px 0 48px; font-size:10px; color:#8b98b4; letter-spacing:.1em;
}
.sun-axis span{width:0; display:flex; justify-content:center; overflow:visible; white-space:nowrap}

/* ── units ── */
.units{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--edge); border:1px solid var(--edge)}
.unit{background:#070a14; padding:30px 24px}
.unit-v{font-size:clamp(24px,3.4vw,38px); color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.05}
.unit-l{font-size:12px; color:#95a2bd; margin-top:1em; line-height:1.7}

/* ── letter ── */
.letter{
  font-family:var(--serif); font-size:clamp(16px,2.1vw,25px); line-height:1.6;
  color:var(--ink); margin:0 0 1.4em; padding-left:26px;
  border-left:2px solid var(--gold); max-width:46ch;
}
#recompose{
  background:rgba(255,210,125,.07); border:1px solid rgba(255,210,125,.5); color:var(--gold);
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  padding:14px 28px; cursor:pointer; align-self:flex-start; transition:background .15s,border-color .15s;
}
#recompose:hover{background:rgba(255,210,125,.16); border-color:var(--gold)}
#recompose:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

footer{
  padding:7vh 6vw; text-align:center; color:#8b98b4; font-size:11px;
  letter-spacing:.1em; border-top:1px solid var(--edge);
}
footer p{margin:.5em 0}
kbd{border:1px solid var(--edge); padding:2px 6px; border-radius:3px; color:var(--dim)}
.egg-hint{opacity:.45}

/* ── easter egg ── */
.egg{
  position:fixed; inset:0; z-index:10; background:rgba(5,7,15,.94);
  display:flex; align-items:center; justify-content:center; padding:8vw;
  backdrop-filter:blur(6px);
}
/* display:flex outranks the [hidden] UA default, which left this 94%-opaque
   blurred panel covering the entire page at all times. Do not remove. */
.egg[hidden]{display:none}
.egg-inner{
  font-family:var(--serif); font-size:clamp(20px,3.6vw,44px); line-height:1.5;
  text-align:center; color:var(--gold); max-width:20ch;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}
@media (max-width:640px){
  .flight-list li{grid-template-columns:78px 1fr 62px; }
  .fl-dir{display:none}
}