:root { --paper:#f2eadb; --ink:#26382f; --red:#d8482f; --line:rgba(38,56,47,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Manrope",sans-serif; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; padding:30px 5vw 24px; isolation:isolate; }
.topography { position:absolute; inset:0; z-index:-2; opacity:.13; background-image:radial-gradient(ellipse at 72% 48%,transparent 0 13%,var(--ink) 13.2% 13.35%,transparent 13.55% 19%,var(--ink) 19.2% 19.35%,transparent 19.55% 26%,var(--ink) 26.2% 26.35%,transparent 26.55% 35%,var(--ink) 35.2% 35.35%,transparent 35.55%); transform:rotate(-8deg) scale(1.2); }
.nav,.brand,footer { display:flex; align-items:center; }
.nav { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:19px; }
.brand { gap:12px; text-decoration:none; color:inherit; font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; background:var(--red); color:var(--paper); font-family:"Russo One"; font-size:20px; }
.coordinates,footer { font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.content { align-self:center; width:min(760px,61vw); padding:54px 0 36px; }
.eyebrow { color:var(--red); text-transform:uppercase; font-weight:800; letter-spacing:.2em; font-size:11px; display:flex; align-items:center; gap:10px; }
.eyebrow span { width:38px; height:2px; background:var(--red); }
h1 { font-family:"Russo One",sans-serif; font-size:clamp(66px,9.3vw,150px); line-height:.79; text-transform:uppercase; letter-spacing:-.055em; margin:24px 0 28px; font-weight:400; }
h1 em { color:var(--red); font-style:normal; }
.city-lockup { display:inline-flex; align-items:center; gap:.1em; white-space:nowrap; }
.sun-logo { width:.55em; height:.55em; flex:none; overflow:visible; fill:var(--red); stroke:var(--red); stroke-width:7; stroke-linecap:square; transform:translateY(.02em); }
.lead { font-size:clamp(15px,1.25vw,19px); line-height:1.7; margin:0; font-weight:500; }
.countdown { margin-top:35px; padding-top:23px; border-top:1px solid var(--line); display:flex; align-items:flex-start; max-width:650px; }
.time-unit { min-width:94px; }
.time-unit strong { display:block; font-family:"Russo One"; font-size:clamp(31px,3.2vw,52px); font-weight:400; line-height:1; font-variant-numeric:tabular-nums; }
.time-unit span { display:block; margin-top:8px; text-transform:uppercase; font-weight:800; font-size:9px; letter-spacing:.16em; opacity:.65; }
.divider { font-family:"Russo One"; font-size:35px; line-height:.85; color:var(--red); margin:0 20px 0 5px; }
.flight-card { margin-top:34px; border:1px solid var(--ink); display:flex; align-items:center; width:min(570px,100%); background:rgba(242,234,219,.72); padding:15px 18px; gap:14px; }
.flight-icon { width:34px; height:34px; background:var(--ink); color:var(--paper); display:grid; place-items:center; }
.flight-card div:not(.flight-icon) { display:flex; flex-direction:column; gap:3px; }
.flight-card span { text-transform:uppercase; letter-spacing:.12em; font-size:8px; font-weight:700; opacity:.6; }
.flight-card strong { text-transform:uppercase; letter-spacing:.03em; font-size:12px; }
.flight-date { margin-left:auto; padding-left:22px; border-left:1px solid var(--line); }
.bear-scene { position:absolute; right:1vw; bottom:52px; width:38vw; height:73vh; z-index:-1; }
.sun { position:absolute; width:29vw; height:29vw; max-width:460px; max-height:460px; border-radius:50%; background:var(--red); right:2vw; top:5%; }
.bear { position:absolute; width:min(32vw,460px); right:2vw; bottom:5%; fill:var(--ink); filter:drop-shadow(15px 16px 0 rgba(38,56,47,.10)); }
.ground-line { position:absolute; bottom:7%; right:-6vw; width:43vw; border-bottom:2px solid var(--ink); transform:rotate(-2deg); }
.scene-caption { position:absolute; right:1.2vw; top:6%; color:var(--paper); text-align:right; text-transform:uppercase; font-weight:800; font-size:9px; line-height:1.6; letter-spacing:.15em; }
footer { justify-content:space-between; border-top:1px solid var(--line); padding-top:20px; }
@media (max-width:800px) {
  .hero { padding:22px 22px 18px; min-height:100svh; }
  .coordinates { display:none; }
  .content { width:100%; padding:38px 0 260px; align-self:start; }
  h1 { font-size:clamp(58px,20vw,105px); margin-top:20px; }
  .lead br { display:none; }
  .countdown { justify-content:space-between; }
  .time-unit { min-width:0; }
  .time-unit strong { font-size:clamp(27px,9vw,42px); }
  .divider { margin:0 4px; font-size:28px; }
  .flight-card { padding:12px; }
  .flight-date { padding-left:10px; }
  .bear-scene { width:100%; height:310px; bottom:46px; right:-5%; }
  .sun { width:260px; height:260px; right:8%; top:0; }
  .bear { width:270px; right:8%; bottom:0; }
  .ground-line { width:90%; right:-10%; bottom:4%; }
  .scene-caption { right:11%; top:7%; }
  .weather-note { display:none; }
}
@media (max-width:420px) { .flight-icon { display:none; } .flight-card { gap:8px; } .flight-card strong { font-size:10px; } }
@media (prefers-reduced-motion:no-preference) { .bear { animation:arrive 1s ease-out both; } .sun { animation:rise .8s .15s ease-out both; } }
@keyframes arrive { from { transform:translateX(80px); opacity:0; } }
@keyframes rise { from { transform:scale(.7); opacity:0; } }