/* ============================================================
 * Header
 * Site title/tagline, live clock + location, hero location name, and the horizon gradient strip.
 * ============================================================ */
/* ---------- Header ---------- */
header.top{padding:24px 0 16px;}
/* Two independent columns side by side, each a vertical flex stack of its own two pieces.
   Unlike a shared grid row, neither column's items are stretched to match the other column's
   height -- the city name sits immediately below the brand/tagline based on the left column's
   own content, regardless of how tall the clock/date/location text on the right happens to be
   (which is what created a large, content-dependent gap before this fix). The toggle is
   guaranteed to sit directly under the clock since they're stacked in the very same column. */
.header-row{
  display:flex; align-items:stretch; justify-content:space-between; gap:16px 24px;
}
.header-col-left{
  display:flex; flex-direction:column; justify-content:space-between; gap:6px;
  flex:1 1 auto; min-width:0;
}
.header-col-right{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; gap:8px;
  flex-shrink:0; max-width:280px;
}
.brand{display:flex; align-items:baseline; gap:8px 12px; flex-wrap:wrap; min-width:0;}
.brand h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  margin:0;
  letter-spacing:0.4px;
  color:var(--ink-dim);
}
.brand .tagline{color:var(--ink-faint); font-size:11.5px; font-family:var(--font-mono); min-width:0;}
.clock-box{text-align:right; min-width:0;}
.clock-box .clock-date{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.04em;}
.clock-box .time{font-family:var(--font-mono); font-size:26px; font-weight:500; color:var(--gold); line-height:1; margin-top:2px;}
.clock-box .loc{font-size:12px; color:var(--ink-dim); margin-top:4px; white-space:normal; overflow-wrap:break-word;}

.hero-location{min-width:0;}
.hero-location .hero-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(24px, 4vmin, 42px);
  line-height:1.2;
  padding-bottom:0.08em;
  letter-spacing:0.2px;
  overflow-wrap:break-word;
  background:linear-gradient(90deg, var(--ink) 0%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-location .hero-coords{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); margin-top:6px;
}

@media (max-width:700px){
  .header-row{flex-wrap:wrap;}
  .header-col-left, .header-col-right{flex-basis:100%; max-width:none;}
  .header-col-right{align-items:flex-start;}
  .clock-box{text-align:left;}
}

.horizon-strip{
  height:6px; border-radius:4px; margin:6px 0 20px;
  background:linear-gradient(90deg, #232860 0%, #3B3F82 12%, var(--coral) 30%, var(--gold) 45%, var(--sky) 55%, var(--gold) 65%, var(--coral) 78%, #3B3F82 90%, #232860 100%);
  opacity:0.85;
}