/* Weather subpages and the snorkelling detail call to action. */
.weather-hero .ot-hero__content { padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.weather-hero .ot-hero__title { font-size: clamp(2.8rem, 6vw, 6.25rem); max-width: 1050px; }
.weather-hero .ot-hero__title em { color: var(--teal); }
.weather-hero .ot-hero__sub { max-width: 660px; margin-bottom: 0; }
.weather-hero-back { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.2rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,242,232,.86); text-decoration: none; }
.weather-hero-back:hover { color: #fff; }
.weather-hero-back:focus-visible, .weather-hero-scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; border-radius: 2px; }
.weather-hero-scroll { width: fit-content; margin-top: 2rem; color: rgba(247,242,232,.76); text-decoration: none; }
.weather-hero-scroll .hero-scroll__line { background: rgba(247,242,232,.72); }

.weather-page { padding: 4rem 0 0; color: var(--ink); }
.weather-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.weather-page-heading h2, .weather-section-heading h2, .weather-sources h2, .weather-unavailable h2, .weather-unavailable h3 { font-family: var(--font-display); font-size: clamp(1.45rem, 2.5vw, 2rem); margin-bottom: .35rem; }
.weather-page-heading > p { margin: 0; color: var(--ink-4); font-family: var(--font-mono); font-size: .65rem; }
.weather-eyebrow { margin-bottom: .55rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.weather-unavailable, .weather-sources, .weather-cta { background: var(--bg-card); border-radius: var(--radius-lg); padding: 2rem; }
.weather-sources p { color: var(--ink-2); }

.weather-forecast, .weather-astro { margin: 3.5rem 0; }
.weather-section-heading { max-width: 760px; margin-bottom: 1.25rem; }
.weather-section-heading > p:last-child, .weather-small, .weather-attribution { color: var(--ink-3); font-size: .75rem; }
.weather-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .65rem; }
.weather-day { min-width: 0; padding: 1.2rem .9rem; background: var(--bg-card); border-radius: var(--radius-lg); }
.weather-day h3, .weather-day h4 { font-family: var(--font-display); font-size: 1rem; margin-bottom: .15rem; }
.weather-day time, .weather-astro-day time { font-family: var(--font-mono); color: var(--ink-4); font-size: .65rem; }
.weather-day-description { min-height: 3.6em; margin: 1rem 0 .5rem; color: var(--ink-2); font-size: .78rem; }
.weather-day-temperature { margin-bottom: 0; font-family: var(--font-display); font-size: 1.55rem; }
.weather-day-temperature span { color: var(--ink-3); font-size: 1.05rem; }
.weather-day dl { margin-bottom: 0; padding-top: .75rem; border-top: 1px solid var(--rule); }
.weather-day dl > div { margin-top: .6rem; }
.weather-day dt { color: var(--ink-4); font-size: .62rem; font-weight: 400; line-height: 1.35; }
.weather-day dd { margin: .12rem 0 0; color: var(--ink-2); font-size: .78rem; }
.weather-attribution { margin-top: 1rem; line-height: 1.8; }
.weather-attribution a { color: var(--teal); }

/* The section is a plain run of cards like .weather-forecast — no wrapper box.
   Amber stays as its identity, carried by the eyebrow and the glyphs rather
   than by a border around everything. */
.weather-astro .weather-eyebrow { color: var(--amber-lt); }

.weather-astro-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .65rem; }

/* Matches .weather-day: background and radius define the card, nothing else. */
.weather-astro-day {
    min-width: 0; padding: 1.2rem .9rem;
    background: var(--bg-card); border-radius: var(--radius-lg);
    transition: transform .2s, box-shadow .2s;
}
.weather-astro-day:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.weather-astro-day.is-today { background: var(--teal-dim); }

.weather-astro-day header { margin-bottom: .9rem; }
.weather-astro-day h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: .15rem; }

/* Sunrise and sunset as icon rows, echoing the condition glyphs on the
   forecast cards rather than a description list with hanging indents. */
.weather-astro-day dl { margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.weather-astro-day dl > div { display: flex; align-items: center; gap: .5rem; margin: 0; }
.weather-astro-day dt {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
    color: var(--amber-lt);
    font-weight: 400;
}
/* The label is moved into a .visually-hidden span in the markup: the glyph
   carries it on screen, and a seven-across strip has no room to print
   "Sunrise" and "Sunset" in full. */
.weather-astro-day dt i { width: auto; color: inherit; }
.weather-astro-day dd {
    margin: 0; font-family: var(--font-display); font-size: .92rem;
    font-weight: 600; color: var(--ink);
}

.weather-moon {
    display: flex; gap: .5rem; align-items: center;
    margin: .9rem 0 0; padding-top: .8rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-2); font-size: .67rem; line-height: 1.35;
}

/* The glyph had lost its rule at some point while the markup kept emitting the
   class, so every moon was drawn the northern-hemisphere way round. Font
   Awesome lights its crescent on the left; in Tasmania a WAXING moon is lit
   on the left and a waning one on the right, so waning phases are flipped. */
.weather-moon__glyph { flex: none; color: var(--parchment); font-size: .95em; }
.weather-moon__glyph.is-waning { transform: scaleX(-1); }

.weather-marine { padding-top: 3.5rem; border-top: 1px solid var(--rule); }
.weather-marine .weather-eyebrow { color: var(--marine-lt); }
.weather-marine-outlook { margin: 1.8rem 0 1rem; font-family: var(--font-display); font-size: 1.2rem; }
.weather-swell-height { margin-top: 1rem; color: var(--teal); }

.weather-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; padding: .7rem 1rem; background: var(--parchment-dim);  color: var(--ink-2); border-radius: var(--radius); text-decoration: none; font-size: .82rem; font-weight: 500;transition:all ease .2s;  }
.weather-button:hover { background: var(--teal-dim); color: var(--teal); transition:all ease .2s; }
.weather-button:focus-visible, .weather-attribution a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; transition:all ease .2s; }
.weather-breadcrumbs { padding-top: 1.5rem; }
.weather-page + .ot-footer .row.g-5 { --bs-gutter-x: 1.5rem; }
html[data-theme="light"] .weather-hero .ot-hero__title em { color: var(--teal); }

/* CTA shared with the parent snorkelling detail page. */
.weather-cta { padding: 1.25rem; margin-bottom: 1.25rem; border-color: var(--teal-rule); }
.weather-cta h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--amber); }
.weather-cta p:not(.weather-eyebrow) { font-size: .82rem; color: var(--ink-2); }
.weather-cta .weather-button { width: 100%; }

@media (max-width: 1199px) {
    .weather-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .weather-astro-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .weather-hero .ot-hero__content { padding-bottom: 2.5rem; }
    .weather-hero .ot-hero__title { font-size: clamp(2.45rem, 12vw, 3.2rem); }
    .weather-hero-scroll { margin-top: 1.4rem; }
    .weather-page { padding-top: 3rem; }
    .weather-page-heading { display: block; }
    .weather-page-heading > p { margin-top: .5rem; }
    .weather-sources, .weather-unavailable { padding: 1.3rem; }
    .weather-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather-astro { padding: 1.25rem; }
    .weather-astro-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather-breadcrumbs .ot-crumb { display: flex; flex-wrap: wrap; row-gap: .5rem; line-height: 1.6; }
}
@media (max-width: 359px) {
    .weather-days, .weather-astro-days { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .weather-hero .ot-hero__bg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONDITION GLYPHS, BARS AND METERS
   The page used to be numbers and labels only, which reads as a wall of
   near-identical text across seven columns. These give the week a shape you
   can scan: a glyph per day, a temperature bar on a shared scale, a rain
   meter, and arrows that actually point where the weather is going.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Condition glyph ────────────────────────────────────────────────────── */
.weather-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; flex-shrink: 0;
    border-radius: 50%; font-size: 1rem;
    background: var(--bg-3); color: var(--ink-3);
}

/* Tone by condition, so a week of sun and a week of storms look different
   before you read a word of it. */
.weather-glyph.tone-clear { background: var(--amber-dim);   color: var(--amber-lt); }
.weather-glyph.tone-cloud { background: var(--bg-3);        color: var(--ink-2); }
.weather-glyph.tone-rain  { background: var(--teal-dim);    color: var(--teal); }
.weather-glyph.tone-storm { background: var(--mustard-dim); color: var(--mustard-lt); }
.weather-glyph.tone-snow  { background: rgba(255,255,255,.06); color: var(--ink); }
.weather-glyph.tone-fog   { background: var(--bg-2);        color: var(--ink-3); }
.weather-glyph.tone-swell { background: var(--marine-lt);   color: #eaf6f8; }
.weather-glyph.tone-unknown { background: var(--bg-2);      color: var(--ink-4); }

/* ── Direction arrow ────────────────────────────────────────────────────── */
/* --bearing is the way the weather is TRAVELLING, already turned around from
   the "comes from" bearing the API reports. */
.weather-arrow {
    display: inline-block;
    transform: rotate(var(--bearing, 0deg));
    font-size: .78em;
}

/* ── Temperature range bar ──────────────────────────────────────────────── */
/* One shared scale across the week: --from is where the day's low sits in
   that span, --len how far it reaches to the high. */
.weather-range {
    position: relative; height: 5px; margin: .55rem 0 .3rem;
    border-radius: 100px; background: var(--bg-3); overflow: hidden;
}
.weather-range__fill {
    position: absolute; top: 0; bottom: 0;
    left: var(--from, 0%); width: var(--len, 100%);
    border-radius: 100px;
    background: linear-gradient(85deg, #82bed5, rgb(221 128 107));
}

/* ── Rain / swell meter ─────────────────────────────────────────────────── */
.weather-meter { margin: .5rem 0 .15rem; }
.weather-meter__label {
    display: flex; align-items: center; gap: .3rem;
    font-family: var(--font-mono); font-size: .62rem; color: var(--ink-3);
    margin-bottom: .28rem;
}
.weather-meter__label i { color: var(--teal); font-size: .6rem; }
.weather-meter__track {
    display: block; height: 4px; border-radius: 100px;
    background: var(--bg-3); overflow: hidden;
}
.weather-meter__fill {
    display: block; height: 100%; width: var(--pct, 0%);
    border-radius: 100px; background: var(--teal);
}
.weather-meter--swell { margin-top: .35rem; }

/* ── Swell height bands ─────────────────────────────────────────────────── */
/* Thresholds are set for snorkellers, not surfers: under .5 m workable,
   over 1.5 m generally not. */
.band-calm     { color: var(--emerald-lt); }
.band-moderate { color: var(--amber-lt); }
.band-big      { color: var(--red); }
.weather-meter__fill.band-calm     { background: var(--emerald); }
.weather-meter__fill.band-moderate { background: var(--amber); }
.weather-meter__fill.band-big      { background: var(--red); }
.weather-band-note {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: .5rem !important;
    font-family: var(--font-mono); font-size: .62rem;
    letter-spacing: .08em; text-transform: uppercase;
}

/* ── Current-conditions layout ──────────────────────────────────────────── */

/* ── Day cards ──────────────────────────────────────────────────────────── */
.weather-day__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .5rem; margin-bottom: .5rem;
}
.weather-day { transition: transform .2s, box-shadow .2s; }
.weather-day:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
/* Today is marked explicitly rather than by position, so the marine strip
   marks its own first card too. */
.weather-day.is-today { background: var(--teal-dim); }
.weather-day-description { min-height: 2.6em; }

@media (prefers-reduced-motion: reduce) {
    .weather-day { transition: none; }
    .weather-day:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   Almost nothing is needed here now: --amber, --amber-lt, --mustard-lt and
   --red gained light variants in styles-base.css, so every rule above picks
   the right colour on its own. Only the two that use a literal rather than a
   token still need saying.
   ═══════════════════════════════════════════════════════════════════════════ */

/* rgba(255,255,255,.06) is invisible on parchment. */
html[data-theme="light"] .weather-glyph.tone-snow { background: var(--bg-3); color: var(--ink-2); }

/* #eaf6f8 on --marine-lt is fine in both themes, but the swell glyph reads
   better against the light palette's own teal. */
html[data-theme="light"] .weather-glyph.tone-swell { background: var(--teal); color: #f7f2e8; }

/* ═══════════════════════════════════════════════════════════════════════════
   CURRENT CONDITIONS — the "weather scene" panel
   Used for both readings on the page: the atmospheric one and the offshore
   swell. The condition itself carries the design — an oversized glyph washed
   in behind the number, and a glow tinted by what the sky is actually doing.
   ═══════════════════════════════════════════════════════════════════════════ */
.weather-now {
    position: relative; overflow: hidden;
    padding: 2.5rem 2.25rem 0;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: 0 18px 50px rgba(0,0,0,.30);
    /* --scene is set per condition below; the glow is what carries the mood. */
    background-image: radial-gradient(90% 130% at 78% -10%, var(--scene, transparent), transparent 62%);
}
.weather-now.tone-clear   { --scene: rgba(212,150,58,.30); }
.weather-now.tone-cloud   { --scene: rgba(255,255,255,.07); }
.weather-now.tone-rain    { --scene: rgba(90,180,200,.28); }
.weather-now.tone-storm   { --scene: rgba(212,209,58,.22); }
.weather-now.tone-snow    { --scene: rgba(255,255,255,.14); }
.weather-now.tone-fog     { --scene: rgba(158,149,141,.18); }
.weather-now.tone-swell   { --scene: rgba(43,106,122,.34); }
.weather-now.tone-unknown { --scene: rgba(255,255,255,.05); }

.weather-now__watermark {
    position: absolute; top: -.15em; right: -.08em;
    font-size: clamp(9rem, 22vw, 17rem); line-height: 1;
    color: var(--ink); opacity: .07; pointer-events: none;
}
.weather-now__body { position: relative; z-index: 1; }

.weather-now__eyebrow {
    display: flex; align-items: center; gap: .7rem;
    font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--teal); margin-bottom: 1.1rem;
}
.weather-now__eyebrow span { width: 22px; height: 1px; background: var(--teal); flex: none; }

.weather-now__reading { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; }
.weather-now__temp {
    font-family: var(--font-display); font-size: clamp(4.5rem, 11vw, 8rem);
    font-weight: 900; line-height: .82; letter-spacing: -.05em;
    color: var(--ink); margin: 0;
}
.weather-now__temp span { color: var(--teal); font-size: .5em; letter-spacing: -.02em; }
/* The degree mark belongs at the top of the numerals, not on their baseline.
   Rubik's ring has an ink ascent of .719em and the digits .703em of a parent
   twice the size, so the ring starts .344 parent-em low — .687em of the
   span's own size. A transform rather than vertical-align, so the line box
   and the panel height do not move. The swell panel's "m" keeps the shared
   rule above and stays on the baseline, where a unit belongs. */
.weather-now__deg { display: inline-block; transform: translateY(-.687em); }
.weather-now__desc h2,
.weather-now__desc h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-bottom: .1rem; }
.weather-now__desc > p { color: var(--ink-3); font-size: .88rem; margin: 0; }

.weather-now__pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.75rem; }
.weather-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem; border-radius: 100px;
    background: var(--bg-3); color: var(--ink-2); font-size: .78rem;
}
.weather-pill i:first-child { color: var(--teal); font-size: .8em; }
.weather-pill strong { color: var(--ink); font-family: var(--font-display); font-weight: 700; }
.weather-pill--range strong { color: var(--amber-lt); }

/* Floated right and rule-less. The panel has overflow:hidden, which makes it
   a block formatting context, so it still contains the float and grows to fit
   — no clearfix needed, and no bottom padding on .weather-now either. */
.weather-now__foot {
    position: relative; z-index: 1; float: right;
    margin: 1.75rem -2.25rem 0; padding: .85rem 2.25rem;
    font-family: var(--font-mono); font-size: .66rem; color: var(--ink-4);
}

/* The swell reading keeps the band colour on its number, which would otherwise
   be overridden by .weather-now__temp's own colour. */
.weather-now__temp.band-calm     { color: var(--emerald-lt); }
.weather-now__temp.band-moderate { color: var(--amber-lt); }
.weather-now__temp.band-big      { color: var(--red); }
.weather-now--marine .weather-now__temp span,
.weather-now--marine .weather-now__eyebrow,
.weather-now--marine .weather-now__eyebrow span,
.weather-now--marine .weather-pill i:first-child { color: var(--marine-lt); }
.weather-now--marine .weather-now__eyebrow span { background: var(--marine-lt); }

.weather-now .weather-band-note { margin-top: .4rem !important; }

@media (max-width: 575px) {
    .weather-now { padding: 1.5rem; }
    .weather-now__foot { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── The CTA on the snorkelling detail page ─────────────────────────────────
   Same visual language as .weather-now, sized for a sidebar. When a cached
   reading is available it becomes a live preview and picks up the condition
   tint; with nothing cached it stays the plain invitation and none of the
   --live rules apply. */
.weather-cta--live {
    position: relative; overflow: hidden;
    background-image: radial-gradient(95% 120% at 82% -15%, var(--scene, transparent), transparent 60%);
}
.weather-cta--live.tone-clear   { --scene: rgba(212,150,58,.30); }
.weather-cta--live.tone-cloud   { --scene: rgba(255,255,255,.07); }
.weather-cta--live.tone-rain    { --scene: rgba(90,180,200,.28); }
.weather-cta--live.tone-storm   { --scene: rgba(212,209,58,.22); }
.weather-cta--live.tone-snow    { --scene: rgba(255,255,255,.14); }
.weather-cta--live.tone-fog     { --scene: rgba(158,149,141,.18); }
.weather-cta--live.tone-unknown { --scene: rgba(255,255,255,.05); }

.weather-cta__watermark {
    position: absolute; top: -.2em; right: -.12em;
    font-size: 7.5rem; line-height: 1;
    color: var(--ink); opacity: .06; pointer-events: none;
}
.weather-cta > *:not(.weather-cta__watermark) { position: relative; z-index: 1; }

.weather-cta__reading { display: flex; align-items: center; gap: .8rem; margin-bottom: .35rem; }
/* Scoped with the element in the selector to match the weight of
   '.weather-cta p:not(.weather-eyebrow)' above, which would otherwise force
   these back to .82rem and --ink-2. */
.weather-cta p.weather-cta__temp {
    font-family: var(--font-display); font-size: 3.1rem; font-weight: 900;
    line-height: .9; letter-spacing: -.04em; color: var(--ink); margin: 0;
}
.weather-cta p.weather-cta__temp span { color: var(--teal); }

.weather-cta__facts { list-style: none; margin: .6rem 0 1.1rem; padding: 0; }
.weather-cta__facts li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: var(--ink-2); padding: .3rem 0;
}
.weather-cta__facts li > i:first-child { width: 14px; color: var(--teal); font-size: .78em; }

.weather-cta p.weather-cta__stamp {
    margin: .75rem 0 0;
    font-family: var(--font-mono); font-size: .6rem; color: var(--ink-4);
}


.weather-daylight {
    margin-top: 1rem;
    text-align: center;
}
.weather-daylight__label{
    font-size: .67rem;
    font-weight: normal;
    font-family: var(--font-mono);
}

.sunrise-set{
    display: block;
    font-size: .67rem;
    margin-top: 4px;
    font-weight: normal;
    font-family: var(--font-mono);
}

/* ── Local outlook links ────────────────────────────────────────────────────
   Named rows rather than buttons: the host is shown so it is clear where each
   one goes before clicking, which matters more here than button styling. */
.weather-sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 1.5rem 3rem; }
.weather-sources__intro p:last-child { margin-bottom: 0; }
.weather-sources__list { list-style: none; margin: 0; padding: 0; align-self: center; }
.weather-sources__list li + li { margin-top: .5rem; }
.weather-sources__list a {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1rem; border-radius: var(--radius);
    background: var(--teal-dim); text-decoration: none;
    transition: background .2s, transform .15s;
}
.weather-sources__list a:hover { background: var(--sky-dim); transform: translateX(3px); }
.weather-sources__list a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.weather-source__name { font-size: .85rem; font-weight: 600; color: var(--ink); }
.weather-source__host {
    margin-left: auto; font-family: var(--font-mono); font-size: .62rem; color: var(--ink-4);
}
.weather-sources__list a > i { color: var(--teal); font-size: .72rem; flex: none; }

/* ── Safety note ────────────────────────────────────────────────────────────
   The one thing on this page that might stop somebody entering the water on a
   bad day. It was small grey type at the very bottom; it now reads as the
   advisory it is, in the caution colour rather than the page's teal. */
.weather-safety {
    display: flex; align-items: flex-start; gap: 1.1rem;
    margin: 2.5rem 0 3.5rem; padding: 1.5rem 1.65rem;
    background: var(--amber-dim); border-left: 4px solid var(--amber);
    border-radius: var(--radius);
}
.weather-safety__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%;
    background: var(--bg-card); color: var(--amber-lt); font-size: 1rem; margin-top: auto;
    margin-bottom: auto;
}
.weather-safety h2 {
    font-family: var(--font-display); font-size: 1.05rem;
    color: var(--amber-lt); margin-bottom: .3rem;
}
.weather-safety p { margin: 0; color: var(--ink-2); font-size: .84rem; line-height: 1.75; }

@media (max-width: 767px) {
    .weather-sources { grid-template-columns: 1fr; }
    .weather-safety { padding: 1.25rem; gap: .85rem; }
}



/* ── Unavailable states ─────────────────────────────────────────────────────
   Two causes, told apart: a transient fetch failure (retry offered) and a site
   with no coordinates recorded (nothing to retry, so no button). Styled as a
   calm notice rather than an error — neither case is the reader's fault. */
.weather-unavailable { display: flex; align-items: flex-start; gap: 1.1rem; }
.weather-unavailable__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%;
    background: var(--bg-3); color: var(--ink-3); font-size: 1.05rem;
}
.weather-unavailable h2,
.weather-unavailable h3 { margin-bottom: .35rem; }
.weather-unavailable p { color: var(--ink-2); font-size: .86rem; line-height: 1.75; max-width: 62ch; }
.weather-unavailable .weather-button { margin-top: .5rem; width: fit-content; }
.weather-marine .weather-unavailable { padding: 1.5rem; background: var(--bg-card); border-radius: var(--radius-lg); }
.weather-marine .weather-unavailable p:last-child { margin-bottom: 0; }