:root{
  --bg:#0b0e14;
  --panel:#141a24;
  --panel-2:#1a212d;
  --line:rgba(242,245,248,0.10);
  --ink:#f2f5f8;
  --mist:#9aa7b8;
  --mist-dim:#69748a;
  --teal:#7ad1c4;
  --teal-soft:rgba(122,209,196,0.14);
  --card-radius:14px;
  --display:'Instrument Serif', Georgia, serif;
  --sans:'Manrope', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-width:0;overflow-wrap:anywhere;}
a{color:inherit;}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.5rem;}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance;}
p{line-height:1.6;color:var(--mist);margin:0;}
.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--teal);}
.eyebrow::before{content:'';width:1rem;height:1px;background:var(--teal);}

header.site{padding:1.2rem 0;}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
.wordmark{font-family:var(--display);font-style:italic;font-size:1.3rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:0.5rem;}
.wordmark .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);}
.header-right{display:flex;align-items:center;gap:0.9rem;}
.lang-switch{display:flex;align-items:center;gap:0.4rem;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.03em;}
.lang-switch a{color:var(--mist-dim);text-decoration:none;padding:0.15rem 0.35rem;border-radius:4px;}
.lang-switch a:hover{color:var(--mist);}
.lang-switch a.is-active{color:var(--ink);background:rgba(255,255,255,0.08);}
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.6rem 1.1rem;border-radius:999px;font-size:0.86rem;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform 0.15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-teal{background:var(--teal);color:#062420;}
.btn-outline{border-color:var(--line);color:var(--ink);}

.hero{position:relative;padding:3.6rem 0 1rem;text-align:center;overflow:hidden;isolation:isolate;transition:background 1.5s ease;}
.hero .wrap{max-width:76rem;}

@media (min-width:960px){
  .hero{padding:4.2rem 0 2.4rem;}
  .hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:2.5rem;align-items:center;text-align:left;}
  .hero-left .eyebrow{justify-content:flex-start;}
  .hero h1{margin:0;max-width:none;}
  .hero .lede{margin:1rem 0 0;max-width:30rem;}
  .hero-caption{margin-left:0;}
  .hero-right{display:flex;justify-content:center;}
  .sf-arc-wrap{margin:0;max-width:26rem;}
}
.hero-sky{position:absolute;inset:0;z-index:-6;background:linear-gradient(180deg, var(--sky-a), var(--sky-b));transition:background 1.5s ease;animation:sf-sky-in 1.6s ease both;}
.hero[data-sky="day"]{--sky-a:#2f6fa8;--sky-b:#0b0e14;}
.hero[data-sky="night"]{--sky-a:#0a0f1e;--sky-b:#0b0e14;}

/* aurora ribbon: opacity is --aurora-opacity, set server-side straight from
   the same aurora score the "Aurora chance" panel reports for this location
   -- it only actually shows when there's a real chance to see one tonight,
   not a decorative loop. Sits behind clouds (same z-index, earlier in the
   DOM) since real clouds block a real aurora too. */
.hero-aurora{
  position:absolute;inset:0;z-index:-5;
  opacity:var(--aurora-opacity,0);
  transition:opacity 3s ease;
  pointer-events:none;
  background-image:
    linear-gradient(100deg, transparent 8%, rgba(94,234,176,0.4) 24%, rgba(122,209,196,0.28) 38%, transparent 54%),
    linear-gradient(95deg, transparent 42%, rgba(94,234,176,0.32) 58%, rgba(122,209,196,0.22) 70%, transparent 86%);
  background-size:180% 100%;
  filter:blur(7px);
  animation:sf-aurora-drift 16s ease-in-out infinite alternate;
}
@keyframes sf-aurora-drift{
  0%{background-position:0% 0%, 100% 0%;transform:skewX(0deg);}
  50%{background-position:18% 0%, 82% 0%;transform:skewX(-1.6deg);}
  100%{background-position:-8% 0%, 108% 0%;transform:skewX(1.1deg);}
}
.hero-clouds{
  position:absolute;inset:0;z-index:-5;
  background-image:
    radial-gradient(ellipse 34% 16% at 18% 16%, rgba(255,255,255,0.75), transparent 70%),
    radial-gradient(ellipse 22% 11% at 30% 12%, rgba(255,255,255,0.6), transparent 70%),
    radial-gradient(ellipse 30% 15% at 68% 24%, rgba(255,255,255,0.62), transparent 70%),
    radial-gradient(ellipse 20% 10% at 80% 20%, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(ellipse 26% 13% at 48% 9%, rgba(255,255,255,0.48), transparent 70%);
  background-repeat:no-repeat;
  background-size:140% 140%;
  opacity:var(--cloud-opacity,0);
  transition:opacity 1.8s ease;
  animation:sf-cloud-drift 100s ease-in-out infinite alternate;
}
.hero-stars{position:absolute;inset:0;z-index:-5;opacity:var(--stars-opacity,0);transition:opacity 1.8s ease;}
.hero-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:sf-twinkle 5s ease-in-out infinite;animation-delay:var(--d,0s);}

/* horizon: ocean + mountain peaks define where sky meets land */
.hero-horizon{position:absolute;left:0;right:0;bottom:0;width:100%;height:140px;z-index:-3;animation:sf-horizon-in 1.3s cubic-bezier(.2,.8,.2,1) both;animation-delay:0.15s;}
.hero-horizon .far-range{fill:url(#farGrad);opacity:0.55;}
.hero-horizon .mid-range{fill:url(#midGrad);}
.hero-horizon .near-range{fill:url(#nearGrad);}
.hero-horizon .ridge-line{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:1;stroke-linecap:round;}
.hero-horizon .treeline-mid{fill:#26394a;transform-box:fill-box;transform-origin:50% 100%;animation:sf-tree-sway 7s ease-in-out infinite;}
.hero-horizon .treeline-near{fill:#0a121b;transform-box:fill-box;transform-origin:50% 100%;animation:sf-tree-sway 9s ease-in-out infinite reverse;}
@keyframes sf-tree-sway{0%,100%{transform:skewX(0deg);}50%{transform:skewX(0.7deg);}}
.hero-horizon .water{fill:url(#waterGrad);}
.hero-horizon .reflection{fill:#0a121d;opacity:0.18;}
.hero-horizon .wave-line{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:1.4;}
.hero-horizon .wave-line-2{stroke:rgba(255,255,255,0.1);stroke-width:1.1;}
@media (prefers-reduced-motion: reduce){
  .hero-horizon .treeline-mid,.hero-horizon .treeline-near{animation:none;}
}

/* drifting mist across the ridge line -- independent of the sky's own
   clouds, sits in front of the mountain art (unlike the aurora/clouds,
   which sit behind it) since fog crosses in front of a shoreline. */
.hero-mist{
  position:absolute;left:0;right:0;bottom:90px;height:110px;z-index:-2;
  background-image:
    radial-gradient(ellipse 42% 60% at 12% 55%, rgba(242,245,248,0.10), transparent 70%),
    radial-gradient(ellipse 36% 55% at 52% 40%, rgba(242,245,248,0.08), transparent 70%),
    radial-gradient(ellipse 46% 65% at 86% 58%, rgba(242,245,248,0.09), transparent 70%);
  filter:blur(9px);
  animation:sf-mist-drift 42s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes sf-mist-drift{from{transform:translateX(-4%);}to{transform:translateX(4%);}}
@media (max-width:640px){.hero-mist{bottom:60px;height:80px;}}
@media (prefers-reduced-motion: reduce){.hero-mist{animation:none;}}
.boat-ripple{fill:none;stroke:rgba(255,255,255,0.22);stroke-width:1;animation:sf-ripple 4.2s ease-in-out infinite;}
.boat-ripple-2{animation-delay:0.6s;opacity:0.7;}
@keyframes sf-ripple{0%,100%{opacity:0.5;transform:scale(1);}50%{opacity:0.15;transform:scale(1.08);}}
.boat-outline{fill:none;stroke:#0a121d;stroke-width:0.8;opacity:0.5;}
@media (max-width:640px){.hero-horizon{height:100px;}}

/* a sjark at anchor and the odd jumping fish -- small coastal fishing boats
   like this are Senja's actual livelihood, not generic decoration */
.fishing-boat{transform-box:fill-box;transform-origin:50% 100%;animation:sf-boat-bob 4.2s ease-in-out infinite;}
.fishing-boat .boat-hull{fill:#dfe6ee;opacity:0.9;}
.fishing-boat .boat-cabin{fill:#eef3f8;opacity:0.95;}
.fishing-boat .boat-window{fill:#1c2836;opacity:0.8;}
.fishing-boat .boat-waterline{fill:none;stroke:#0a121d;stroke-width:0.8;opacity:0.35;}
.fishing-boat .boat-mast,.fishing-boat .boat-crane{stroke:#c7d0da;stroke-width:1;fill:none;opacity:0.85;}
.fishing-boat .boat-antenna-ball{fill:#d97a5c;}
@keyframes sf-boat-bob{0%,100%{transform:rotate(-2deg) translateY(0);}50%{transform:rotate(2deg) translateY(-2.5px);}}

.fish-body{fill:#dfe6ee;}
.fish-jump{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:sf-fish-jump 11s ease-in-out infinite;}
.fish-jump.fish-b{animation-duration:14s;animation-delay:5s;}
@keyframes sf-fish-jump{
  0%,84%,100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(0.85);}
  87%{opacity:1;transform:translate(3px,-16px) rotate(-18deg) scale(1);}
  91%{opacity:1;transform:translate(9px,-8px) rotate(14deg) scale(1);}
  95%{opacity:0;transform:translate(13px,3px) rotate(35deg) scale(0.85);}
}
@media (prefers-reduced-motion: reduce){
  .fishing-boat,.fish-jump{animation:none;}
  .fish-jump{opacity:0;}
}

/* precipitation + wind -- driven by the actual MET Norway symbol_code and
   wind_speed for whatever location the hero is currently reading, not a
   decorative loop. */
.hero-precip{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity 1s ease;}
/* Faded out well before the horizon/water art (rather than covering it
   uniformly full-bleed) so falling precipitation reads as sky weather in
   front of the fjord, not a flat film pasted over the whole hero -- a hard
   cut at a fixed height would itself look like a seam, so this is a soft
   mask gradient instead of a clipped box. */
.hero[data-precip="rain"] .hero-precip{
  opacity:0.4;
  background-image:repeating-linear-gradient(115deg, transparent 0 4px, rgba(255,255,255,0.4) 4px 5px, transparent 5px 15px);
  background-size:120% 140px;
  animation:sf-rain 0.4s linear infinite;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 35%, transparent 68%);
  mask-image:linear-gradient(180deg, #000 0%, #000 35%, transparent 68%);
}
.hero[data-precip="snow"] .hero-precip{
  opacity:0.85;
  background-image:
    radial-gradient(2.4px 2.4px at 10% 0, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 60% 0, #fff 99%, transparent),
    radial-gradient(2px 2px at 85% 0, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 35% 0, #fff 99%, transparent),
    radial-gradient(2px 2px at 50% 0, #fff 99%, transparent);
  background-size:220px 220px;
  background-repeat:repeat;
  animation:sf-snow 7s linear infinite;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
  mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
}
.hero[data-precip="fog"] .hero-precip{
  opacity:0.6;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0.38) 62%, transparent);
  filter:blur(2px);
  animation:sf-fog 14s ease-in-out infinite alternate;
}
@keyframes sf-rain{from{background-position:0 0;}to{background-position:-50px 140px;}}
@keyframes sf-snow{
  from{background-position:0 -20px, 0 -20px, 0 -20px, 0 -20px, 0 -20px;}
  to{background-position:24px 220px, -34px 220px, 14px 220px, -18px 220px, 30px 220px;}
}
@keyframes sf-fog{from{transform:translateX(-3%);}to{transform:translateX(3%);}}

.hero-wind{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity 1s ease;}
.hero[data-windy="true"] .hero-wind{
  opacity:0.3;
  background-image:repeating-linear-gradient(100deg, transparent 0 30px, rgba(255,255,255,0.45) 30px 32px, transparent 32px 72px);
  background-size:280px 60px;
  animation:sf-wind 0.9s linear infinite;
}
@keyframes sf-wind{from{background-position:0 0;}to{background-position:280px 16px;}}

@keyframes sf-sky-in{from{opacity:0;}to{opacity:1;}}
@keyframes sf-horizon-in{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes sf-cloud-drift{from{background-position:0% 0%;}to{background-position:-8% 3%;}}
@keyframes sf-twinkle{0%,100%{opacity:0.35;}50%{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .hero-precip,.hero-wind,.hero-sky,.hero-horizon,.hero-clouds,.hero-stars i,.hero-aurora{animation:none !important;}
}
.hero .eyebrow{justify-content:center;margin-bottom:0.9rem;}
.hero h1{font-size:clamp(2rem,5.4vw,4rem);max-width:44rem;margin:0 auto;color:#fff;}
.hero h1 em{color:var(--teal);font-style:italic;}
.hero .lede{margin:1rem auto 0;max-width:38rem;font-size:1.08rem;color:rgba(255,255,255,0.72);}
.hero-caption{margin-top:1.1rem;display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.76rem;color:rgba(255,255,255,0.75);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);padding:0.4rem 0.9rem;border-radius:999px;}
.hero-caption .live-dot{background:var(--teal);box-shadow:0 0 6px var(--teal);}

/* sun-position arc */
.sf-arc-wrap{max-width:34rem;margin:1.8rem auto 0;}
.sf-arc{width:100%;height:auto;display:block;overflow:visible;}
.sf-arc-horizon{stroke:rgba(255,255,255,0.25);stroke-width:1.5;}
.sf-arc-path{fill:none;stroke:rgba(255,255,255,0.25);stroke-width:1.5;stroke-dasharray:3 5;}
.sf-arc-label{font-family:var(--mono);font-size:9px;fill:rgba(255,255,255,0.55);}
.sf-arc-label tspan{fill:rgba(255,255,255,0.85);}
[data-arc-marker-group]{transition:transform 0.6s ease;}
[data-arc-marker-group] circle:first-child{animation:sf-pulse 3s ease-in-out infinite;}
@keyframes sf-pulse{0%,100%{opacity:0.18;}50%{opacity:0.32;}}
@media (prefers-reduced-motion: reduce){[data-arc-marker-group] circle:first-child{animation:none;}}

/* search */
.search-band{padding:2.2rem 0;background:var(--panel);border-bottom:1px solid var(--line);}
.sf-search-wrap{position:relative;max-width:min(34rem,100%);margin:0 auto;}
.sf-loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;margin:1.1rem auto 0;max-width:46rem;}
.sf-chip{padding:0.55rem 0.7rem;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--mist);font-size:0.84rem;cursor:pointer;font-family:var(--sans);text-align:center;}
.sf-chip:hover,.sf-chip.is-active{border-color:var(--teal);color:var(--ink);background:rgba(122,209,196,0.12);}
@media (max-width:640px){.sf-loc-grid{grid-template-columns:repeat(2,1fr);}}
.sf-search{display:flex;align-items:center;gap:0.6rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:0.7rem 1.2rem;}
.sf-search input{flex:1;background:none;border:0;outline:0;color:var(--ink);font-family:var(--sans);font-size:0.95rem;}
.sf-search input::placeholder{color:var(--mist-dim);}
.sf-search svg{flex:none;color:var(--mist-dim);}
.sf-suggestions{position:absolute;top:calc(100% + 0.4rem);left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,0.35);z-index:10;text-align:left;}
.sf-suggestions[hidden]{display:none;}
.sf-suggestion{display:block;width:100%;text-align:left;padding:0.65rem 1rem;background:none;border:0;color:var(--ink);font-size:0.88rem;cursor:pointer;font-family:var(--sans);}
.sf-suggestion:hover,.sf-suggestion.is-active{background:var(--panel-2);}
.sf-chip{padding:0.4rem 0.9rem;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--mist);font-size:0.8rem;cursor:pointer;font-family:var(--sans);}
.sf-chip:hover,.sf-chip.is-active{border-color:var(--teal);color:var(--ink);}

.reveal{opacity:0;transform:translateY(12px);transition:opacity 0.5s ease, transform 0.5s ease;}
.reveal.is-visible{opacity:1;transform:none;}

section{padding:2.2rem 0;}
.section-head{max-width:34rem;margin-bottom:1.4rem;}
.section-head h2{font-size:clamp(1.35rem,2.2vw,1.7rem);}
.section-head p{margin-top:0.6rem;font-size:0.92rem;}

/* the panel -- the core reusable component, in-page and embedded */
.sf-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--card-radius);
  overflow:hidden;max-width:34rem;margin:0 auto;
  --g1:#131c2e;--g2:#1c2440;--aurora-glow:0;--aurora-color:#7ad1c4;
}
.sf-hero{position:relative;padding:1.4rem 1.5rem 1.2rem;background:linear-gradient(135deg, var(--g1), var(--g2));overflow:hidden;}
.sf-hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 80% 15%, var(--aurora-color), transparent 60%);opacity:var(--aurora-glow);pointer-events:none;transition:opacity 1s ease;}
.sf-hero-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:0.75rem;}
.sf-loc-name{font-size:1.5rem;color:#fff;}
.sf-loc-coords{font-family:var(--mono);font-size:0.72rem;color:rgba(255,255,255,0.6);margin-top:0.15rem;}
.sf-hero-main{position:relative;z-index:1;margin-top:1rem;}
.sf-phase-badge{display:inline-flex;align-items:center;gap:0.4rem;padding:0.32rem 0.7rem;border-radius:999px;background:rgba(255,255,255,0.16);color:#fff;font-size:0.78rem;font-weight:600;backdrop-filter:blur(4px);}
.sf-temp{font-family:var(--display);font-size:2.6rem;color:#fff;margin-top:0.5rem;line-height:1;}
.sf-weather-desc{display:flex;align-items:center;gap:0.35rem;font-size:0.82rem;color:rgba(255,255,255,0.82);margin-top:0.4rem;flex-wrap:wrap;}
.sf-weather-desc strong[data-aurora-label]{background:rgba(20,26,36,0.82);padding:0.05rem 0.45rem;border-radius:999px;}
.live-dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;flex:none;margin-top:0.4rem;}

.sf-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.1rem;background:var(--line);}
.sf-stat{background:var(--panel);padding:0.7rem 1.1rem;display:flex;flex-direction:column;gap:0.15rem;}
.sf-stat-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--mist-dim);}
.sf-stat-val{font-family:var(--mono);font-size:0.95rem;white-space:nowrap;color:var(--ink);}
.sf-stat-val[data-aurora-label]{white-space:normal;line-height:1.25;}

.sf-aurora-msg{padding:0.8rem 1.5rem;font-size:0.82rem;border-top:1px solid var(--line);}

.sf-chart{padding:1rem 1.5rem 0.4rem;border-top:1px solid var(--line);}
.sf-chart-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--mist-dim);margin-bottom:0.6rem;}
.sf-bars{display:flex;gap:0.35rem;align-items:flex-end;height:5rem;}
.sf-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:0.3rem;height:100%;justify-content:flex-end;}
.sf-bar-val{font-family:var(--mono);font-size:0.62rem;color:var(--mist-dim);white-space:nowrap;}
.sf-bar-track{width:100%;max-width:1.1rem;height:2.6rem;display:flex;align-items:flex-end;background:var(--panel-2);border-radius:3px;overflow:hidden;}
.sf-bar-fill{width:100%;height:var(--h,4%);background:var(--teal);border-radius:3px 3px 0 0;}
.sf-bar.is-forecast .sf-bar-fill{background:var(--mist-dim);opacity:0.6;}
.sf-bar.is-today .sf-bar-fill{background:#fff;}
.sf-bar-day{font-size:0.62rem;color:var(--mist-dim);}

.sf-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.4rem;padding:0.7rem 1.5rem;border-top:1px solid var(--line);font-size:0.72rem;color:var(--mist-dim);font-family:var(--mono);}
.sf-brand{color:var(--mist-dim);}

/* how it works, condensed */
.how-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;}
.how-item{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--panel);}
.how-item .eyebrow{margin-bottom:0.4rem;}
.how-item p{font-size:0.85rem;}

/* embed */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start;}
.code-block{position:relative;background:#0a0d13;border:1px solid var(--line);border-radius:var(--card-radius);padding:1rem 1.1rem;font-family:var(--mono);font-size:0.78rem;line-height:1.6;color:var(--mist);white-space:pre-wrap;overflow-wrap:anywhere;}
.code-block .tag{color:#8fc1e8;}
.code-block .str{color:var(--teal);}
.code-block .code-text{display:block;padding-right:3.6rem;}
.code-copy-btn{position:absolute;top:0.6rem;right:0.6rem;padding:0.28rem 0.6rem;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.02em;color:var(--mist);background:rgba(255,255,255,0.06);border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;}
.code-copy-btn:hover{background:rgba(255,255,255,0.12);color:var(--ink);}
.code-copy-btn.is-copied{background:var(--teal);color:#062420;border-color:var(--teal);}
.embed-preview-label{margin-top:0.6rem;font-size:0.72rem;color:var(--mist-dim);text-align:center;}

.cta-band{text-align:center;}
.cta-band h2{margin-top:0.5rem;}
.cta-band p{margin-top:0.7rem;max-width:26rem;margin-left:auto;margin-right:auto;}
.cta-band .btn{margin-top:1.3rem;}

.contact-form{max-width:26rem;margin:1.6rem auto 0;display:flex;flex-direction:column;gap:0.7rem;text-align:left;}
.contact-form input,.contact-form textarea{
  width:100%;padding:0.7rem 0.9rem;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:0.92rem;resize:vertical;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--mist-dim);}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--teal);outline-offset:1px;}
.contact-form .btn{margin-top:0.2rem;align-self:flex-start;}
.contact-feedback{margin-top:0;min-height:1.2em;font-size:0.85rem;color:var(--mist);text-align:left;}
.contact-feedback.is-ok{color:var(--teal);}

footer.site{padding:2rem 0;border-top:1px solid var(--line);}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:0.4rem 1.2rem;font-size:0.78rem;color:var(--mist-dim);}
footer.site a{color:var(--mist);}

.embed-body{background:transparent;margin:0;padding:0;}
.embed-body .sf-panel{max-width:22rem;}
.embed-body .sf-panel.is-banner,.embed-body .sf-panel.is-wide{max-width:100%;}
.sf-panel.is-small{max-width:18rem;}
.sf-panel.is-small .sf-hero{padding-bottom:1.1rem;}
.sf-panel.is-small .sf-temp{font-size:2rem;}

/* banner -- one/two-line icon+text strip, e.g. for a header bar */
.sf-panel.is-banner{max-width:100%;}
.sf-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.55rem;
  padding:0.7rem 1.1rem;background:linear-gradient(100deg, var(--g1), var(--g2));
  color:#fff;font-size:0.86rem;line-height:1.3;
}
.sf-banner-icon svg{display:block;}
.sf-banner-name{font-family:var(--display);font-size:1rem;}
.sf-banner-sep{opacity:0.5;}
.sf-banner-aurora{display:inline-flex;align-items:center;gap:0.3rem;}
.sf-banner-aurora strong{font-weight:700;background:rgba(20,26,36,0.82);padding:0.05rem 0.45rem;border-radius:999px;}
.sf-banner-brand{margin-left:auto;font-family:var(--mono);font-size:0.72rem;color:rgba(255,255,255,0.7);white-space:nowrap;}

/* wide -- the full graphical widget, landscape layout */
.sf-panel.is-wide{max-width:100%;}
.sf-wide-row{display:flex;align-items:stretch;}
.sf-wide-hero{
  flex:0 0 14rem;position:relative;overflow:hidden;padding:1.4rem 1.3rem;
  background:linear-gradient(160deg, var(--g1), var(--g2));color:#fff;
}
.sf-wide-hero .sf-loc-name{font-size:1.3rem;}
.sf-wide-hero .sf-temp{font-size:2.2rem;margin-top:0.8rem;}
.sf-wide-body{flex:1;display:flex;flex-direction:column;min-width:0;}
.sf-stats-grid-wide{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){
  .sf-wide-row{flex-direction:column;}
  .sf-wide-hero{flex:0 0 auto;}
  .sf-stats-grid-wide{grid-template-columns:1fr 1fr;}
}

.embed-loc-note{font-size:0.88rem;margin-bottom:1.2rem;}
.embed-loc-note strong{color:var(--ink);font-weight:600;}
.embed-loc-note a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
.widget-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start;}
.widget-size-col{text-align:center;}
.widget-size-col h4{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--mist-dim);margin-bottom:0.7rem;font-weight:600;}
.widget-size-col .code-block{text-align:left;font-size:0.68rem;margin-bottom:0.8rem;}
@media (max-width:820px){.widget-sizes{grid-template-columns:1fr;}}

.widget-wide-showcase{margin-top:1.6rem;}
.widget-wide-showcase h4{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--mist-dim);margin-bottom:0.7rem;font-weight:600;}
.widget-wide-showcase .code-block{margin-bottom:0.8rem;}

@media (max-width: 720px){
  .split{grid-template-columns:1fr;}
  .sf-stats-grid{grid-template-columns:1fr 1fr;}
}

/* Full-page visual system. Embedded widgets keep their compact dimensions. */
.forecast-site{
  --bg:#090f16;--panel:#131e2a;--panel-2:#1c2b3a;
  --ink:#f5f7fa;--mist:#b2bfcc;--mist-dim:#91a2b5;
  --line:rgba(185,210,229,.17);--teal:#a0e5ce;--card-radius:20px;
  background:radial-gradient(ellipse at 90% 35%,#122331 0,transparent 45%),var(--bg);
}
.forecast-site .wrap{max-width:76rem;padding-inline:2rem;}
.forecast-site h1,.forecast-site h2,.forecast-site h3{font-family:var(--sans);font-weight:700;letter-spacing:-.045em;line-height:1.08;}
.forecast-site section{padding-block:4rem;}
.forecast-site header.site{padding:1.3rem 0;border-bottom:1px solid var(--line);background:#0c141e;}
.forecast-site .wordmark{font-family:var(--sans);font-style:normal;font-size:1.35rem;font-weight:700;letter-spacing:-.06em;gap:.75rem;}
.forecast-site .wordmark .dot{width:25px;height:25px;border:6px solid var(--teal);background:transparent;box-shadow:none;}
.forecast-site .btn{min-height:46px;padding:.75rem 1.35rem;border-radius:10px;font-weight:700;}
.forecast-site .lang-switch{gap:.2rem;padding:4px;border:1px solid var(--line);border-radius:10px;}
.forecast-site .lang-switch a{padding:.6rem .65rem;color:var(--mist);border-radius:6px;}
.forecast-site .lang-switch a.is-active{color:var(--ink);background:var(--panel-2);}
.forecast-site .eyebrow{font-size:.73rem;font-weight:500;letter-spacing:.12em;line-height:1.7;}
.forecast-site .eyebrow::before{height:5px;width:5px;border-radius:50%;}
.forecast-site .hero{padding:5rem 0 8rem;}
.forecast-site .hero[data-sky="day"]{--sky-a:#23475f;--sky-b:#0c1723;}
.forecast-site .hero[data-sky="night"]{--sky-a:#102137;--sky-b:#090f16;}
.forecast-site .hero h1{font-size:clamp(2.8rem,5vw,4.65rem);line-height:1.06;max-width:13em;}
.forecast-site .hero h1 em{font-family:var(--display);font-weight:400;letter-spacing:-.025em;}
.forecast-site .hero .lede{font-size:1.12rem;line-height:1.8;color:#c8d5e1;max-width:31rem;margin-top:1.5rem;}
.forecast-site .hero-caption{font-family:var(--sans);font-size:.8rem;line-height:1.5;padding:.65rem .9rem;border-radius:9px;background:#0b1829b3;margin-top:1.8rem;}
.forecast-site .hero-caption .live-dot{margin-top:0;}
.forecast-site .hero-horizon{height:190px;}
.forecast-site .sf-arc-wrap{width:100%;padding:1.5rem 1rem .5rem;border:1px solid #b5d2ea26;border-radius:24px;background:linear-gradient(140deg,#c4e4ff0d,#0b19234d);box-shadow:0 24px 70px #0000001f;}
.forecast-site .sf-arc-path{stroke:#c4d9ea80;stroke-width:2;}
.forecast-site .sf-arc-label{fill:#bdcddd;font-size:10px;}
.forecast-site .search-band{padding:2rem 0;background:#101b27;border-block:1px solid var(--line);}
.forecast-site .sf-search-wrap{max-width:100%;}
.forecast-site .sf-search{min-height:62px;border-radius:12px;background:#09121d;border-color:#7894ac66;padding:1rem 1.2rem;gap:.85rem;}
.forecast-site .sf-search input{min-width:0;font-size:1rem;}
.forecast-site .sf-search svg{width:21px;height:21px;color:var(--teal);}
.forecast-site .sf-search:focus-within{outline:2px solid var(--teal);outline-offset:3px;}
.forecast-site .sf-loc-grid{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:1rem;}
.forecast-site .sf-chip{min-height:44px;border-radius:8px;font-size:.85rem;font-weight:600;background:#192634;transition:background .15s,border-color .15s;}
.forecast-site .sf-chip.is-active{color:var(--teal);border-color:#a0e5ce80;background:#a0e5ce14;}
.forecast-site .conditions-section{padding-top:2.5rem;}
.conditions-section .sf-panel{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);box-shadow:0 20px 60px #00000026;}
.conditions-section .sf-hero{grid-row:span 3;padding:2rem;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line);}
.conditions-section .sf-loc-name{font-size:1.85rem;font-weight:700;letter-spacing:-.04em;}
.conditions-section .sf-loc-coords{font-size:.8rem;margin-top:.5rem;}
.conditions-section .sf-hero-main{margin-top:2.5rem;}
.conditions-section .sf-temp{font-family:var(--sans);font-size:clamp(4rem,7vw,6.5rem);font-weight:600;letter-spacing:-.075em;margin:1rem 0;}
.conditions-section .sf-weather-desc{font-size:.9rem;line-height:1.7;}
.conditions-section .sf-phase-badge{padding:.5rem .8rem;font-size:.8rem;}
.conditions-section .sf-stat{padding:1.25rem 1.5rem;gap:.5rem;}
.conditions-section .sf-stat-label{font-size:.69rem;color:#a9b9c9;}
.conditions-section .sf-stat-val{font-size:1.15rem;font-weight:500;}
.conditions-section .sf-aurora-msg{padding:1rem 1.5rem;font-size:.88rem;background:#0d1822;}
.conditions-section .sf-chart{padding:1.25rem 1.5rem;}
.conditions-section .sf-chart-label{color:var(--mist);font-size:.7rem;line-height:1.6;}
.conditions-section .sf-bars{height:6rem;}
.conditions-section .sf-bar-track{max-width:1.6rem;height:3.5rem;}
.conditions-section .sf-bar-val,.conditions-section .sf-bar-day{color:var(--mist);font-size:.65rem;}
.conditions-section .sf-foot{grid-column:1/-1;padding:1rem 1.5rem;}
.forecast-site .section-head{max-width:43rem;margin-bottom:2rem;}
.forecast-site .section-head h2,.forecast-site .cta-band h2{font-size:clamp(2rem,3.3vw,3rem);margin-top:.65rem;}
.forecast-site .section-head p{font-size:1rem;line-height:1.8;}
.forecast-site .how-row{gap:1.25rem;counter-reset:source;}
.forecast-site .how-item{padding:2rem;position:relative;overflow:hidden;border-top:3px solid var(--teal);}
.forecast-site .how-item:nth-child(2){border-top-color:#aebbf4;}
.forecast-site .how-item:nth-child(3){border-top-color:#efc487;}
.forecast-site .how-item::before{counter-increment:source;content:'0' counter(source);display:block;font-family:var(--mono);font-size:.8rem;color:var(--mist-dim);margin-bottom:2rem;}
.forecast-site .how-item .eyebrow{font-family:var(--sans);font-size:1.2rem;font-weight:700;text-transform:none;letter-spacing:-.025em;color:var(--ink);}
.forecast-site .how-item .eyebrow::before{display:none;}
.forecast-site .how-item p{font-size:.94rem;line-height:1.85;margin-top:.5rem;}
.forecast-site #embed{border-block:1px solid var(--line);background:#0d1621;}
.forecast-site .widget-size-col,.forecast-site .widget-wide-showcase{padding:1.25rem;border:1px solid var(--line);border-radius:16px;background:#14202d;min-width:0;}
.forecast-site .widget-size-col h4,.forecast-site .widget-wide-showcase h4{color:var(--ink);line-height:1.7;margin-top:0;min-height:2.5rem;text-align:left;}
.forecast-site .code-block{border-radius:10px;background:#0a121b;}
.forecast-site .code-copy-btn{min-height:36px;}
.forecast-site .cta-band{padding-block:5rem;background:radial-gradient(ellipse at 50% 100%,#1e3e423f,transparent 70%);}
.forecast-site .contact-form{max-width:34rem;gap:1rem;}
.forecast-site .contact-form input,.forecast-site .contact-form textarea{padding:1rem 1.1rem;background:var(--panel);border-radius:10px;}
.forecast-site .contact-form .btn{width:100%;justify-content:center;}
.forecast-site footer.site{padding:2rem 0;background:#090f16;}
.forecast-site footer.site .wrap{line-height:1.8;}
.forecast-site :is(a,button):focus-visible{outline:2px solid var(--teal);outline-offset:4px;}
@media(min-width:960px){
  .forecast-site .hero-grid{grid-template-columns:1.2fr 1fr;gap:4rem;}
  .forecast-site .hero h1{margin:0;}
  .forecast-site .hero .lede{margin-left:0;}
  .forecast-site .hero .eyebrow{justify-content:flex-start;}
  .forecast-site .sf-arc-wrap{max-width:none;margin:0;}
}
@media(max-width:959px){
  .forecast-site .hero{padding:3.5rem 0 7rem;}
  .forecast-site .sf-arc-wrap{max-width:30rem;margin:2.5rem auto 0;}
  .conditions-section .sf-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);}
  .conditions-section .sf-hero{padding:1.5rem;}
}
@media(max-width:640px){
  .forecast-site .wrap{padding-inline:1.15rem;}
  .forecast-site section{padding-block:2.5rem;}
  .forecast-site header.site .wrap{gap:.65rem;}
  .forecast-site .wordmark{font-size:1.05rem;gap:.5rem;}
  .forecast-site .wordmark .dot{width:19px;height:19px;border-width:5px;}
  .forecast-site .header-right{gap:.5rem;}
  .forecast-site .lang-switch a{padding:.55rem .4rem;}
  .forecast-site header .btn{font-size:.75rem;padding:.65rem .8rem;}
  .forecast-site .hero h1{font-size:clamp(2.65rem,10vw,3.8rem);}
  .forecast-site .hero .eyebrow{font-size:.63rem;letter-spacing:.07em;}
  .forecast-site .hero .lede{font-size:1rem;}
  .forecast-site .hero-caption{text-align:left;font-size:.73rem;}
  .forecast-site .hero-horizon{height:115px;}
  .forecast-site .sf-arc-wrap{padding:.75rem .5rem 0;}
  .forecast-site .sf-loc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .conditions-section .sf-panel{display:block;}
  .conditions-section .sf-hero{min-height:0;padding:1.5rem;border-right:0;}
  .conditions-section .sf-hero-main{margin-top:1.5rem;}
  .conditions-section .sf-temp{font-size:5rem;}
  .conditions-section .sf-stat{padding:1rem;}
  .conditions-section .sf-stat-val{font-size:1rem;}
  .conditions-section .sf-chart{padding:1rem;}
  .conditions-section .sf-bars{gap:.2rem;}
  .conditions-section .sf-bar-val,.conditions-section .sf-bar-day{font-size:.58rem;}
  .forecast-site .how-item{padding:1.5rem;}
  .forecast-site .how-item::before{margin-bottom:1rem;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .boat-ripple{animation:none;}
}

/* Observatory: a calm hierarchy of live measurements and natural light. */
.forecast-site{--teal:#9bc9bb;--gold:#e9c58e;--aurora:#b6a3dd;background:#0b131d;}
.forecast-site .hero{padding:3.5rem 0 6rem;text-align:left;}
.forecast-site .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;align-items:center;}
.forecast-site .hero h1{font-size:clamp(2.5rem,4.5vw,4.5rem);font-weight:500;letter-spacing:-.055em;margin:0;}
.forecast-site .hero .eyebrow{justify-content:flex-start;color:#b5c6d5;}
.forecast-site .hero[data-sky="day"]{--sky-a:#1a3347;--sky-b:#0b1723;}
.forecast-site .hero-clouds{filter:blur(18px);opacity:calc(var(--cloud-opacity,0) * .28);}
.forecast-site .hero-horizon{opacity:.65;height:125px;}
.forecast-site .hero-right{display:block;min-width:0;}
.live-temperature{display:flex;align-items:flex-start;gap:.5rem;margin:.6rem 0 .2rem;font-size:clamp(6rem,10vw,9rem);font-weight:500;line-height:1.1;letter-spacing:-.085em;font-variant-numeric:tabular-nums;}
.live-unit{font-size:.28em;letter-spacing:-.04em;margin-top:.45em;color:#b7c9d8;}
.live-description{font-size:1.15rem;color:#d0dce6;}
.live-metrics{display:flex;gap:2.5rem;margin-top:1.8rem;}
.metric-label{display:block;color:#9fb2c4;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.55rem;}
.metric-number{font-size:1.55rem;font-variant-numeric:tabular-nums;font-weight:500;}
.metric-unit{font-size:.8rem;color:#9fb2c4;}
.sun-observatory{width:100%;}
.sun-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid #e9c58e26;padding-bottom:1rem;font-size:.9rem;color:var(--gold);}
.sun-phase{font-family:var(--mono);font-size:.7rem;color:#bdcbd8;}
.forecast-site .sf-arc-wrap{max-width:none;margin:1.5rem 0 0;padding:0;background:none;border:0;box-shadow:none;border-radius:0;}
.forecast-site .sf-arc-path{stroke:var(--gold);stroke-width:1.25;stroke-dasharray:none;}
.forecast-site .sf-arc-area{fill:#e9c58e06;}
.forecast-site .sf-arc-ticks{stroke:#e9c58e80;stroke-width:1;}
.forecast-site .sf-arc-horizon{stroke:#b5c6d54d;stroke-width:.6;}
.forecast-site .sf-arc-label{font-size:8px;fill:#a3b7c8;}
.forecast-site .sf-arc-label tspan{fill:var(--gold);font-weight:500;}
.sun-note{font-family:var(--mono);font-size:.65rem;text-align:center;color:#97aabc;margin-top:.75rem;}
.forecast-site .search-band{background:#0e1925;padding:1.6rem 0;border-top:0;}
.forecast-site .search-band .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:1rem 2rem;align-items:center;}
.forecast-site .sf-search-wrap{width:100%;}
.forecast-site .sf-search{min-height:54px;background:#0b141f;}
.forecast-site .sf-loc-grid{margin:0;gap:.4rem;}
.forecast-site .sf-chip{background:transparent;border-color:transparent;font-weight:500;font-size:.75rem;padding:.4rem;}
.search-feedback{grid-column:1/-1;font-size:.85rem;color:#e9c58e;}
.search-feedback:empty{display:none;}
.search-feedback:not(:empty){grid-row:2;}
.forecast-site .conditions-section{padding-block:3rem;}
.conditions-section .sf-panel{display:grid;grid-template-columns:1fr;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;}
.conditions-section .sf-hero{display:none;}
.conditions-section .sf-stats-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;background:transparent;border-block:1px solid var(--line);}
.conditions-section .sf-stat{background:transparent;padding:1.6rem 1rem;border-right:1px solid var(--line);gap:.8rem;}
.conditions-section .sf-stat:first-child{padding-left:0;}
.conditions-section .sf-stat:last-child{border-right:0;}
.conditions-section .sf-stat-val{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:1.35rem;letter-spacing:-.04em;}
.conditions-section .sf-stat:nth-child(-n+4) .sf-stat-val{color:var(--gold);}
.conditions-section .sf-stat:nth-child(n+5) .sf-stat-val{color:var(--aurora)!important;}
.conditions-section .sf-stat-label{font-size:.65rem;min-height:2.6em;line-height:1.4;}
.conditions-section .sf-aurora-msg{background:transparent;border:0;padding:1.25rem 0;color:#b9adc9;}
.conditions-section .sf-chart{padding:1.5rem 0;border-top:1px solid var(--line);}
.conditions-section .sf-bars{height:7rem;gap:.8rem;}
.conditions-section .sf-bar-track{max-width:2.2rem;height:4.5rem;background:#b6a3dd0c;}
.conditions-section .sf-bar-fill{background:#b6a3dd;}
.conditions-section .sf-bar.is-forecast .sf-bar-fill{background:#b6a3dd;opacity:.4;}
.conditions-section .sf-bar.is-today .sf-bar-fill{background:#ece4fa;}
.conditions-section .sf-foot{padding:1rem 0;}
.forecast-site .how-row{gap:0;}
.forecast-site .how-item{background:none;border:0;border-radius:0;padding:0 2rem;border-right:1px solid var(--line);}
.forecast-site .how-item:first-child{padding-left:0;}
.forecast-site .how-item:last-child{border-right:0;padding-right:0;}
.forecast-site .how-item::before{margin-bottom:1.2rem;}
.forecast-site .how-item:nth-child(2) .eyebrow{color:var(--aurora);}
.forecast-site .how-item:nth-child(3) .eyebrow{color:var(--gold);}
.embed-studio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem;border-top:1px solid var(--line);padding-top:2rem;}
.embed-controls{min-width:0;}
.embed-controls label{display:block;margin-bottom:1rem;}
#embedFormat{width:100%;min-height:52px;padding:.8rem 2rem .8rem 1rem;background:#172330;color:var(--ink);border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.9rem;}
#embedFormat:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}
.embed-location{font-size:1.8rem;color:var(--ink);margin-top:2rem;letter-spacing:-.04em;}
.embed-location-link{font-size:.85rem;color:var(--teal);text-underline-offset:4px;}
.embed-code-details{border-block:1px solid var(--line);margin-top:2rem;padding:1rem 0;}
.embed-code-details summary{cursor:pointer;font-size:.9rem;padding:.5rem 0;}
.embed-code-details .code-block{margin-top:1rem;}
.embed-stage{min-width:0;background:radial-gradient(ellipse at 50% 40%,#243848,#101a26 75%);padding:2.5rem 1.5rem;border-radius:4px;}
.embed-stage .embed-preview{display:flex;justify-content:center;}
.embed-stage iframe{box-shadow:0 24px 60px #0005;border-radius:14px;}
.embed-stage .embed-preview-label{margin-top:1.5rem;line-height:1.7;}
@media(max-width:1000px){
  .forecast-site .hero-grid{gap:2rem;}
  .conditions-section .sf-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .conditions-section .sf-stat:nth-child(3){border-right:0;}
  .conditions-section .sf-stat:nth-child(n+4){border-top:1px solid var(--line);}
  .conditions-section .sf-stat:first-child{padding-left:1rem;}
  .forecast-site .search-band .wrap{grid-template-columns:1fr;}
  .forecast-site .sf-loc-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:640px){
  .forecast-site .hero{padding:2.5rem 0 4.5rem;}
  .forecast-site .hero-grid{grid-template-columns:1fr;gap:2.5rem;}
  .forecast-site .hero h1{font-size:2.75rem;}
  .live-temperature{font-size:6.5rem;}
  .live-metrics{margin-top:1.3rem;}
  .forecast-site .sf-arc-wrap{max-width:25rem;margin:1rem auto 0;}
  .forecast-site .hero-horizon{height:75px;}
  .forecast-site .sf-loc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .conditions-section .sf-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .conditions-section .sf-stat{padding:1.2rem .75rem;}
  .conditions-section .sf-stat:nth-child(3){border-right:1px solid var(--line);}
  .conditions-section .sf-stat:nth-child(2n){border-right:0;}
  .conditions-section .sf-stat:nth-child(n+3){border-top:1px solid var(--line);}
  .conditions-section .sf-stat-val{font-size:1.25rem;}
  .conditions-section .sf-bars{gap:.3rem;}
  .forecast-site .how-row{grid-template-columns:1fr;}
  .forecast-site .how-item,.forecast-site .how-item:first-child,.forecast-site .how-item:last-child{padding:1.5rem 0;border-right:0;border-top:1px solid var(--line);}
  .embed-studio{grid-template-columns:1fr;gap:2rem;}
  .embed-stage{padding:1.5rem .75rem;}
}

.forecast-site .sf-chip[data-name="Aurora Borealis Observatory"]{grid-column:span 2;}

.forecast-site .hero[data-precip="rain"] .hero-precip{opacity:.12;}
.forecast-site .hero[data-windy="true"] .hero-wind{opacity:.1;}

/* Illustrated weather: motion is confined to the icon, leaving readings calm. */
.forecast-site{--teal:#91d8bf;--aurora:#baa2e7;}
.forecast-site .hero[data-sky="day"]{--sky-a:#182d3c;--sky-b:#0b1723;}
.forecast-site .hero[data-sky="night"]{--sky-a:#151b32;--sky-b:#0b1420;}
.forecast-site .hero-aurora{background-image:linear-gradient(105deg,transparent 8%,#6cd6ae66 24%,#91d8bf38 38%,transparent 54%),linear-gradient(95deg,transparent 42%,#ac85df55 58%,#b6a3dd33 70%,transparent 86%);}
.forecast-site .hero-clouds{opacity:calc(var(--cloud-opacity,0) * .12);}
.live-weather-reading{display:flex;align-items:center;gap:1.2rem;}
.live-weather-reading .live-temperature{order:-1;}
.weather-illustration{width:clamp(110px,11vw,155px);height:auto;flex:none;overflow:visible;}
.weather-illustration>g,.weather-illustration>.wi-thunder{display:none;}
.weather-illustration[data-symbol^="clearsky"] .wi-sun,
.weather-illustration[data-symbol^="fair"] .wi-sun,
.weather-illustration[data-symbol^="partlycloudy"] .wi-sun,
.weather-illustration[data-symbol*="showers"] .wi-sun{display:block;}
.weather-illustration[data-symbol$="_night"] .wi-sun{display:none;}
.weather-illustration[data-symbol="clearsky_night"] .wi-moon,
.weather-illustration[data-symbol="fair_night"] .wi-moon,
.weather-illustration[data-symbol="partlycloudy_night"] .wi-moon,
.weather-illustration[data-symbol*="showers"][data-symbol$="_night"] .wi-moon{display:block;}
.weather-illustration:not([data-symbol^="clearsky"]):not([data-symbol="unknown"]) .wi-cloud{display:block;}
.weather-illustration[data-symbol*="rain"] .wi-rain,
.weather-illustration[data-symbol*="sleet"] .wi-rain,
.weather-illustration[data-symbol*="snow"] .wi-snow,
.weather-illustration[data-symbol*="sleet"] .wi-snow,
.weather-illustration[data-symbol^="fog"] .wi-fog,
.weather-illustration[data-symbol*="thunder"] .wi-thunder,
.weather-illustration[data-symbol="unknown"] .wi-unknown{display:block;}
.weather-illustration[data-symbol*="thunder"] .wi-rain path:nth-child(2),
.weather-illustration[data-symbol*="thunder"] .wi-snow path:nth-child(2),
.weather-illustration[data-symbol*="sleet"] .wi-rain path:nth-child(2),
.weather-illustration[data-symbol*="sleet"] .wi-snow path:not(:nth-child(2)){display:none;}
.wi-cloud{animation:wi-drift 7s ease-in-out infinite;}
.wi-rays{transform-origin:76px 49px;animation:wi-turn 40s linear infinite;}
.wi-moon{animation:wi-moon-float 8s ease-in-out infinite;}
.wi-rain path{animation:wi-drop 1.8s linear infinite;animation-delay:var(--delay);}
.wi-snow path{animation:wi-flake 4s ease-in-out infinite;animation-delay:var(--delay);}
.wi-fog{animation:wi-drift 6s ease-in-out infinite reverse;}
.wi-thunder{animation:wi-thunder-glow 5s ease-in-out infinite;}
@keyframes wi-drift{0%,100%{transform:translateX(-2px);}50%{transform:translateX(3px);}}
@keyframes wi-turn{to{transform:rotate(360deg);}}
@keyframes wi-moon-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@keyframes wi-drop{0%{transform:translate(2px,-3px);opacity:0;}20%{opacity:.95;}85%{opacity:.7;}100%{transform:translate(-4px,14px);opacity:0;}}
@keyframes wi-flake{0%{transform:translate(0,-3px);opacity:0;}20%{opacity:1;}70%{opacity:.9;}100%{transform:translate(4px,10px);opacity:0;}}
@keyframes wi-thunder-glow{0%,100%{opacity:.6;}50%{opacity:1;}}
@media(max-width:640px){.live-weather-reading{gap:.75rem;}.weather-illustration{width:112px;}}
@media(prefers-reduced-motion:reduce){.weather-illustration *{animation:none!important;}}