/* ============================================================
   enhance.css — additions for the rebuilt site, booking page,
   service pages, accessibility. Loaded after styles.css.
   ============================================================ */

/* ---------- accessibility ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ocean-900);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--sun-400);outline-offset:2px;border-radius:6px
}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- brand logo (replaces the emoji mark) ---------- */
.brand{gap:.6rem;flex:0 0 auto}
.brand__txt{white-space:nowrap}
.brand__logo{height:52px;width:auto;display:block;flex:0 0 auto}
/* footer sits on the deep-teal background — a soft light chip keeps the logo's
   red wordmark legible on dark */
.brand--light .brand__logo{height:72px;background:rgba(255,255,255,.92);padding:6px 10px;border-radius:12px}
@media(max-width:560px){ .brand__logo{height:42px} }

/* auto-hiding top nav (slides away on scroll-down, returns on scroll-up) */
.nav{transition:transform .35s var(--ease),box-shadow .3s}
.nav.nav--hidden{transform:translateY(-100%)}

/* mobile nav: keep the whole row inside the viewport so the page never
   scrolls sideways (logo + wordmark + Book + burger was overflowing < ~430px) */
html{overflow-x:clip}
@media(max-width:600px){
  .nav__inner{gap:.5rem;padding:.6rem .85rem}
  .brand__logo{height:42px}
  .nav__cta{gap:.4rem}
  .nav .btn--sm{padding:.5em .8em;font-size:.8rem}
  .nav__burger{font-size:1.5rem}
}
@media(max-width:374px){ .nav .brand__txt{display:none} } /* tiny phones: logo only, keep the Book CTA */

/* ---------- nav: keep links on one line, tighten so the row fits ---------- */
.nav__links a{white-space:nowrap}

/* hamburger sits ABOVE the open drawer and turns into a white ✕ to close */
@media(max-width:1200px){
  /* nav's backdrop-filter makes it the containing block for the fixed drawer,
     which collapses the panel to the nav's height. Drop it on mobile so the
     drawer anchors to the viewport and fills the screen. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--sand-100)}
  .nav__links{top:0;right:0;bottom:0;left:auto;height:auto;overflow-y:auto}
  .nav__burger{position:relative;z-index:80;font-size:0;line-height:1;width:1.7rem;height:1.7rem;display:grid;place-items:center}
  .nav__burger::before{content:"\2630";font-size:1.6rem;line-height:1}            /* ☰ */
  #navLinks.is-open ~ .nav__burger{position:fixed;top:1.05rem;right:1.1rem;color:#fff;z-index:90}
  #navLinks.is-open ~ .nav__burger::before{content:"\2715"}                       /* ✕ */
}
@media(min-width:1201px){
  .nav__inner{gap:.9rem}
  .nav__links{gap:.95rem;margin-left:.3rem}
  .nav__cta{gap:.5rem}
}

/* ---------- nav dropdown (Experiences) ---------- */
.nav__group{position:relative;display:inline-flex;align-items:center}
.nav__group>a::after{content:" \25BE";position:static;width:auto;height:auto;background:none;font-size:.7em;opacity:.85}
.nav__menu{position:absolute;top:100%;left:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:.4rem;display:none;flex-direction:column;z-index:60}
.nav__group:hover .nav__menu,.nav__group:focus-within .nav__menu{display:flex}
.nav__menu a{padding:.55rem .7rem;border-radius:8px;white-space:nowrap;color:var(--ink-700);font-weight:500}
.nav__menu a:hover{background:var(--sand-100);color:var(--coral-600)}
.nav__menu a::after{display:none}
@media(max-width:1200px){
  .nav__group{display:block;width:100%}
  .nav__group>a::after{content:""}
  .nav__menu{position:static;display:flex;background:transparent;border:0;box-shadow:none;padding:.2rem 0 .2rem 1rem}
  .nav__menu a{color:#f0e2cf;font-size:1rem;padding:.45rem 0}
  .nav__menu a:hover{background:transparent;color:#fff}
  /* let long items (e.g. "Happy Hour & Champagne Sunsets") wrap in the drawer
     instead of being clipped by the fixed-width panel */
  .nav__links a{white-space:normal;overflow-wrap:anywhere}
}

/* ---------- slim footer (booking page & other short pages) ---------- */
.footer--slim{padding:1.3rem 1.25rem}
.footer--slim .footer__bar{margin-top:0;padding-top:0;border-top:none;max-width:var(--max);margin-left:auto;margin-right:auto}

/* ---------- 3-across service cards ---------- */
.cards--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cards--3{grid-template-columns:1fr;max-width:32rem;margin-left:auto;margin-right:auto}}
.card__media{aspect-ratio:3/2}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
/* The key-lime-cake photo is a portrait shot of a server holding the plates;
   center-cropping lands on her torso, so frame it on the cake (lower in frame)
   everywhere it appears as an <img> (homepage card, gallery, etc.). */
img[src*="bsg-brunch"],img[src*="bsg-dessert"]{object-position:center 72%}
/* Multi-photo service cards: stacked slides crossfade (rotation driven by main.js) */
.card__media.has-slides .card__slide{opacity:0;transition:opacity .9s var(--ease),transform .6s var(--ease)}
.card__media.has-slides .card__slide.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){
  .card__media.has-slides .card__slide{opacity:0;transition:none}
  .card__media.has-slides .card__slide.is-active{opacity:1}
}

/* ---------- tiles "pop" on hover (ERS-style) ---------- */
.card{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.card:hover,.card:focus-within{
  transform:translateY(-12px) scale(1.025);
  box-shadow:0 44px 80px -28px rgba(40,24,14,.55);
}
.card:hover .card__media img,.card:focus-within .card__media img{transform:scale(1.09)}
/* NB: don't transform .card__btn — it carries the stretched-link ::after overlay,
   and a transform would re-scope that overlay to the button, shrinking the
   whole-card click target down to just the button on hover/focus. */
.card__btn{transition:color .2s;display:inline-block}
.card:hover .card__btn,.card:focus-within .card__btn{padding-left:4px}
.card__tag{transition:transform .35s var(--ease)}
.card:hover .card__tag,.card:focus-within .card__tag{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  .card:hover,.card:focus-within{transform:none}
  .card:hover .card__media img,.card:focus-within .card__media img{transform:none}
}
.card__price-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-top:.2rem}
.card .meta{font-size:.8rem;color:var(--ink-500);display:flex;gap:.8rem;flex-wrap:wrap;margin:.5rem 0 .2rem}
.card .meta b{color:var(--ocean-800);font-weight:700}

/* ---------- hero CTA (booking lives on /book) ---------- */
.hero__cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
.herocard{background:rgba(255,255,255,.97);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.5rem}
.herocard h3{font-size:1.3rem}
.herocard p{font-size:.9rem;color:var(--ink-500);margin:.25rem 0 1rem}
.herocard__badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.herocard__badges span{background:var(--sand-200);color:var(--ocean-800);font-size:.74rem;font-weight:700;padding:.35em .8em;border-radius:999px}

/* ---------- carolina moon stat chips ---------- */
.boat-stats{display:flex;flex-wrap:wrap;gap:1.4rem;margin:1.2rem 0 1.6rem}
.boat-stat{background:#fff;border-radius:14px;box-shadow:var(--shadow-md);padding:.8rem 1.1rem;min-width:88px}
.boat-stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--teal-500);line-height:1}
.boat-stat span{font-size:.78rem;color:var(--ink-500)}

/* ---------- patented enviro-tour note ---------- */
.note-patent{font-size:.86rem;background:var(--sand-200);border-left:4px solid var(--sun-400);padding:.8rem 1rem;border-radius:10px;color:var(--ink-700);margin-top:1rem}
.note-season{font-size:.86rem;background:var(--sand-200);border-left:4px solid var(--teal-500);padding:.8rem 1rem;border-radius:10px;color:var(--ink-700);margin-top:.7rem}

/* ---------- booking page ---------- */
.book-wrap{max-width:980px;margin:0 auto;padding:2.5rem 1.25rem 4rem}
.book-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:2rem;align-items:start}
@media(max-width:820px){.book-grid{grid-template-columns:1fr}}
.book-panel{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:1.6rem}
.book-steps{display:flex;gap:.5rem;margin-bottom:1.4rem;flex-wrap:wrap}
.book-step{flex:1;min-width:120px;font-size:.78rem;font-weight:700;color:var(--ink-500);padding:.5rem .7rem;border-radius:10px;background:var(--sand-100);border:1.5px solid transparent;text-align:center}
.book-step.is-active{color:#fff;background:var(--ocean-800)}
.book-step.is-done{color:var(--ocean-800);border-color:var(--teal-500)}
.svc-options{display:grid;gap:.9rem}
.svc-option{display:flex;gap:1rem;align-items:center;border:2px solid #e3ecee;border-radius:16px;padding:1rem;cursor:pointer;transition:border .15s,box-shadow .15s;background:#fff;text-align:left;width:100%;font-family:inherit}
.svc-option:hover{border-color:var(--teal-500)}
.svc-option.is-selected{border-color:var(--ocean-800);box-shadow:0 0 0 3px rgba(243,70,36,.15)}
.svc-option__emoji{font-size:2rem}
.svc-option__body h4{font-size:1.1rem;margin-bottom:.2rem}
.svc-option__body p{font-size:.85rem;color:var(--ink-500)}
.svc-option__price{margin-left:auto;text-align:right;font-weight:800;color:var(--ocean-800);white-space:nowrap}
/* phones: the emoji + area were squeezing the description into a sliver — let the
   area (svc-option__price) drop to its own line under the text */
@media(max-width:560px){
  .svc-option{flex-wrap:wrap;gap:.45rem 1rem;padding:.9rem}
  .svc-option__emoji{font-size:1.7rem}
  .svc-option__body{flex:1 1 auto}
  .svc-option__price{flex-basis:100%;margin-left:calc(1.7rem + 1rem);text-align:left;white-space:normal;font-size:.82rem;font-weight:700;color:var(--coral-600)}
}
.slotrow{display:flex;gap:.6rem;flex-wrap:wrap}
.slot-btn{font-family:inherit;font-weight:700;font-size:.9rem;padding:.6em 1.1em;border-radius:12px;border:1.5px solid #d8e3e5;background:#f7fbfb;color:var(--ink-700);cursor:pointer}
.slot-btn[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.slot-btn.is-selected{background:var(--ocean-800);color:#fff;border-color:var(--ocean-800)}
.summary-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:1.5rem;position:sticky;top:90px}
.summary-line{display:flex;justify-content:space-between;font-size:.92rem;padding:.35rem 0;color:var(--ink-700)}
.summary-line.total{border-top:2px solid #eef3f4;margin-top:.5rem;padding-top:.7rem;font-weight:800;color:var(--ink-900);font-size:1.1rem}
.summary-line.deposit{color:var(--coral-600);font-weight:700}
.summary-fine{font-size:.76rem;color:var(--ink-500);margin-top:.8rem}
#card-element{padding:.9rem;border:1.5px solid #dfe7e8;border-radius:12px;background:#fff}
.book-msg{padding:.9rem 1rem;border-radius:12px;font-weight:600;font-size:.92rem;margin-top:1rem}
.book-msg--ok{background:#e8f8ee;color:#0a7d3c}
.book-msg--err{background:#fdeceb;color:#c0392b}

/* ---------- breadcrumb + service pages ---------- */
.crumb{max-width:var(--max);margin:0 auto;padding:1rem 1.25rem;font-size:.85rem;color:var(--ink-500)}
.crumb a{color:var(--teal-500);font-weight:600}
.svc-hero{position:relative;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.svc-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,24,14,.25),rgba(40,24,14,.85))}
.svc-hero__inner{position:relative;max-width:var(--max);margin:0 auto;width:100%;padding:2.5rem 1.25rem}
.svc-hero__inner h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-1px;max-width:20ch}
.svc-hero__inner p{color:#eafdfb;font-size:1.15rem;max-width:40rem;margin-top:.8rem}
.svc-body{max-width:var(--max);margin:0 auto;padding:3.5rem 1.25rem;display:grid;grid-template-columns:1.4fr .8fr;gap:3rem;align-items:start}
@media(max-width:880px){.svc-body{grid-template-columns:1fr}}
.svc-body h2{font-size:1.7rem;margin:1.6rem 0 .6rem}
.svc-body p{margin-bottom:1rem}
.svc-body ul{margin:0 0 1.2rem 1.1rem;display:grid;gap:.4rem}
.svc-side{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:1.5rem;position:sticky;top:90px}
.svc-side h3{font-size:1.2rem;margin-bottom:.6rem}
.price-table{width:100%;border-collapse:collapse;margin:.6rem 0 1rem;font-size:.9rem}
.price-table td{padding:.45rem 0;border-bottom:1px solid #eef3f4}
.price-table td:last-child{text-align:right;font-weight:700;color:var(--ocean-800)}

/* ---------- photo fixes: Carolina Moon = a sailing catamaran, not a diver ---------- */
.feature__media{background-image:url('/img/carolina-moon-sunset-key-largo.jpg')}

/* ---------- video band (click-to-play facade) ---------- */
.video-wrap{max-width:1000px;margin:0 auto;position:relative}
.video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border:none;padding:0;margin:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#06222a}
.video-facade img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.video-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,24,14,.08),rgba(40,24,14,.45))}
.video-facade:hover img,.video-facade:focus-visible img{transform:scale(1.05)}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;color:#fff;background:linear-gradient(135deg,var(--coral-500),var(--coral-600));box-shadow:var(--shadow-lg);z-index:2;transition:transform .25s var(--ease);padding-left:5px}
.video-facade:hover .video-play,.video-facade:focus-visible .video-play{transform:translate(-50%,-50%) scale(1.1)}
.video-cap{text-align:center;margin-top:1rem;font-size:.9rem;color:var(--ink-500)}
.video-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
@media(prefers-reduced-motion:reduce){.video-facade:hover img,.video-facade:focus-visible img{transform:none}.video-facade:hover .video-play,.video-facade:focus-visible .video-play{transform:translate(-50%,-50%)}}

/* ---------- live reviews ---------- */
.review__src{font-size:.74rem;color:var(--ink-500);font-weight:600;display:flex;align-items:center;gap:.3rem;margin-top:.5rem}
.review__avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:.5rem}

/* ---------- about / story page ---------- */
/* the story is many short sections stacked — halve the default 5.5rem section
   padding so the chapters flow instead of leaving big empty gaps between them */
.about-page .section{padding-top:2.6rem;padding-bottom:2.6rem}
.about-page .svc-hero+.section,.about-page .section:first-of-type{padding-top:3.4rem}
.founder{display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:center;background:linear-gradient(135deg,var(--ocean-900),var(--ocean-700));color:#eafdfb;border-radius:var(--radius-lg);padding:2.2rem;box-shadow:var(--shadow-lg)}
.founder__badge{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:2rem;letter-spacing:1px;color:#06222a;background:linear-gradient(135deg,var(--sun-400),var(--sun-500));box-shadow:0 10px 24px -8px rgba(255,158,44,.6)}
.founder__eyebrow{font-family:'Caveat',cursive;font-size:1.4rem;color:var(--sun-400);line-height:1}
.founder h2{color:#fff;margin:.1rem 0 .2rem;font-size:1.7rem}
.founder__role{color:var(--aqua-400);font-weight:600;font-size:.95rem}
.founder p{color:#dff3f4;margin:.7rem 0 0}
@media(max-width:620px){.founder{grid-template-columns:1fr;text-align:center;justify-items:center;padding:1.8rem}}

.timeline{position:relative;max-width:48rem;margin:1.4rem 0 0;padding-left:2.1rem;list-style:none}
.timeline::before{content:"";position:absolute;left:.5rem;top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(var(--teal-500),var(--aqua-400))}
.timeline__item{position:relative;padding:0 0 1.9rem}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{content:"";position:absolute;left:-1.67rem;top:.3rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--coral-500);box-shadow:0 0 0 4px rgba(245,80,63,.18)}
.timeline__year{display:block;font-weight:800;color:var(--teal-500);font-size:1.05rem;line-height:1.1}
.timeline__item h3{font-size:1.18rem;margin:.2rem 0 .4rem}
.timeline__item p{color:var(--ink-700);margin:0}

.pull{border-left:4px solid var(--coral-500);background:var(--sand-100);padding:1.2rem 1.4rem;border-radius:0 12px 12px 0;font-size:1.12rem;color:var(--ocean-800);margin:1.6rem 0}
.pull cite{display:block;margin-top:.5rem;font-size:.85rem;font-style:normal;color:var(--ink-500);font-weight:600}

.about-page .story-photo{max-width:48rem;margin:0 auto}
.about-page .story-photo img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:block}
.about-page .story-photo figcaption{font-size:.86rem;color:var(--ink-500);text-align:center;margin-top:.8rem;font-style:italic;max-width:40rem;margin-left:auto;margin-right:auto}

/* ---------- homepage: tighten gap between Journal slider and FAQ ---------- */
.home-journal{padding-bottom:2rem}
.home-journal + .faq{padding-top:3rem}

/* ============================================================
   LIVE WEATHER / SUNSET — popup modal (js/weather-modal.js).
   Triggered from the announce-bar teaser (.announce__wx) or any
   [data-weather] button, so the homepage itself stays uncluttered.
   ============================================================ */
/* announce-bar teaser button */
.announce__wx{appearance:none;font:inherit;font-weight:600;font-size:.82rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;color:#fff;
  background:rgba(255,180,61,.16);border:1px solid rgba(255,180,61,.5);
  padding:.18rem .7rem;border-radius:999px;transition:background .2s,transform .2s}
.announce__wx:hover{background:rgba(255,180,61,.3)}
.announce__wx[hidden]{display:none}
.announce__wx-ico{font-size:.95rem;line-height:1}

/* "Check today's forecast" button used in page sections */
.wx-open-btn{margin-top:1.2rem;color:var(--ocean-800);border-color:var(--ocean-700)}
.wx-open-btn[hidden]{display:none}

/* modal shell */
.wxmodal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem}
.wxmodal:not([hidden]){display:flex}
.wxmodal__backdrop{position:absolute;inset:0;background:rgba(40,24,14,.6);backdrop-filter:blur(3px)}
.wxmodal__card{position:relative;z-index:1;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  border-radius:var(--radius-lg);padding:1.7rem 1.5rem 1.5rem;color:#eafdfb;box-shadow:var(--shadow-lg);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,180,61,.16), transparent 55%),
    linear-gradient(120deg,var(--ocean-900),var(--ocean-700));
  animation:wxpop .25s var(--ease)}
@keyframes wxpop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wxmodal__card{animation:none}}
/* sunny accent line keyed to how good the day is */
.wxmodal__card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(90deg,var(--sun-400),var(--coral-500))}
.wxmodal__card[data-tier="poor"]::before{background:linear-gradient(90deg,#5e7177,#33474d)}
.wxmodal__card[data-tier="fair"]::before{background:linear-gradient(90deg,#9fd6cf,#5fbac4)}
.wxmodal__close{position:absolute;top:.55rem;right:.6rem;width:2rem;height:2rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.wxmodal__close:hover{background:rgba(255,255,255,.26)}
.wxmodal .wx__headline{font-size:clamp(1.25rem,4.5vw,1.7rem);margin-top:0}
.wxmodal .wx__chips{margin:.3rem 0 .7rem}
.wxmodal .wx__strip{margin-bottom:.2rem}

.wx__head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.5rem;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.wx__live{display:inline-flex;align-items:center;gap:.45rem;color:var(--sun-400)}
.wx__dot{width:8px;height:8px;border-radius:50%;background:var(--sun-400);
  box-shadow:0 0 0 0 rgba(255,180,61,.7);animation:wxpulse 2.4s infinite}
@keyframes wxpulse{0%{box-shadow:0 0 0 0 rgba(255,180,61,.6)}70%{box-shadow:0 0 0 9px rgba(255,180,61,0)}100%{box-shadow:0 0 0 0 rgba(255,180,61,0)}}
@media(prefers-reduced-motion:reduce){.wx__dot{animation:none}}
.wx__loc{color:#bfeef0;opacity:.85}
.wx__headline{font-size:clamp(1.3rem,2.8vw,1.95rem);font-weight:800;line-height:1.12;color:#fff;margin:.1rem 0 .4rem}
.wx__detail{font-size:.96rem;line-height:1.5;color:#d7f6f4;margin:0 0 1rem;max-width:34rem}
.wx__sunnote{color:var(--sun-400);font-weight:600}
.wx__sail{font-size:.9rem;line-height:1.45;color:#eafdfb;margin:.1rem 0 .2rem;
  background:linear-gradient(135deg,rgba(255,180,61,.16),rgba(255,107,94,.1));
  border:1px solid rgba(255,180,61,.32);border-radius:12px;padding:.6rem .8rem}
.wx__sail strong{color:var(--sun-400)}
.wx__actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.wx__cta{display:inline-flex;align-items:center}
.wx__radar-toggle{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#eafdfb;
  font-weight:700;font-size:.86rem;padding:.55rem .9rem;border-radius:999px;cursor:pointer;transition:background .2s}
.wx__radar-toggle:hover{background:rgba(255,255,255,.2)}
.wx__radar{margin-top:.7rem;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md)}
.wx__radar[hidden]{display:none}
.wx__radar iframe{display:block;width:100%;height:340px;border:0}

.wx__chips{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.wx__chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:.6rem .75rem;display:flex;flex-direction:column;gap:.05rem;backdrop-filter:blur(4px)}
.wx__chip--sunset{background:linear-gradient(135deg,rgba(255,180,61,.22),rgba(255,107,94,.16));border-color:rgba(255,180,61,.4)}
.wx__chip-ico{font-size:1.15rem;line-height:1}
.wx__chip-num{font-size:1.25rem;font-weight:800;color:#fff;line-height:1.1}
.wx__chip-num small{font-size:.72rem;font-weight:600;color:#bfeef0}
.wx__chip-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#9fd6cf;font-weight:600}

.wx__strip{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.wx__day{display:flex;flex-direction:column;align-items:center;gap:.18rem;
  background:rgba(255,255,255,.06);border-radius:12px;padding:.55rem .25rem;text-align:center}
.wx__day-name{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#bfeef0}
.wx__day-ico{font-size:1.3rem;line-height:1}
.wx__day-temp{font-size:.84rem;font-weight:700;color:#fff}
.wx__day-temp small{color:#9fd6cf;font-weight:500;margin-left:.15rem}
.wx__day-rain{font-size:.66rem;color:#9fd6cf}

@media(max-width:540px){
  .wxmodal__card{padding:1.4rem 1.1rem 1.2rem}
  .wx__day-ico{font-size:1.1rem}
}