/* ============================================================
 * Header
 * Site title/tagline, live clock + location, hero location name, and the horizon gradient strip.
 * ============================================================ */
/* ---------- Header ---------- */
header.top{padding:24px 0 16px;}
.top-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:baseline; gap:8px 12px; flex-wrap:wrap; flex:1 1 auto; 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; flex-shrink:0; max-width:280px;}
.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{margin-top:6px;}
.hero-location .hero-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(28px, 4.2vw, 46px);
  line-height:1.2;
  padding-bottom:0.08em;
  letter-spacing:0.2px;
  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;
}

.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;
}