:root { --navy:#0E2A45; --ocean:#163A5C; --teal:#1D6D6B; --wave:#2B9B8E;
        --bg:#F4F8FA; --card:#FFFFFF; --text:#0B1C2E; --muted:#5A6B7A; }
* { box-sizing:border-box; margin:0; }
body { font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       background:var(--bg); color:var(--text); line-height:1.5; }
header { background:linear-gradient(135deg,var(--navy),var(--ocean),var(--teal));
         color:#fff; padding:1.4rem 1rem 0; }
header .inner, main { max-width:56rem; margin:0 auto; padding:0 .5rem; }
header .toprow { display:flex; align-items:baseline; justify-content:space-between; }
header .brand { font-size:1.7rem; letter-spacing:-.02em; font-weight:700;
     color:#fff; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
header p.sub { color:#B8CAD6; font-size:.95rem; margin-top:.2rem; }
nav.lang { font-size:.8rem; }
nav.lang a, nav.lang span { color:#B8CAD6; text-decoration:none; padding:0 .2rem; }
nav.lang a:hover { color:#fff; }
nav.lang .cur { color:#fff; font-weight:700; }
nav.main { display:flex; gap:.2rem; flex-wrap:wrap; margin-top:1rem; }
nav.main a { color:#DCE8EF; text-decoration:none; font-size:.92rem; font-weight:600;
             padding:.55rem .9rem; border-radius:8px 8px 0 0; }
nav.main a.active, nav.main a:hover { background:var(--bg); color:var(--teal); }
main { padding:1.2rem .8rem 3rem; }
h2.day, h2.section { font-size:1.05rem; color:var(--teal); margin:1.6rem 0 .6rem;
         text-transform:capitalize; }
.event, .card { background:var(--card); border-radius:10px; padding:.9rem 1rem;
         margin-bottom:.6rem; border-left:3px solid var(--wave);
         box-shadow:0 1px 3px rgba(14,42,69,.08); }
.event h3, .card h3 { font-size:1.02rem; }
.event h3 a, .card h3 a { color:var(--text); text-decoration:none; }
.event h3 a:hover, .card h3 a:hover { color:var(--teal); }
.meta { font-size:.85rem; color:var(--muted); margin-top:.15rem; }
.tag { display:inline-block; font-size:.72rem; font-weight:600; color:var(--teal);
       background:rgba(43,155,142,.12); border-radius:4px; padding:.1rem .45rem;
       margin-right:.4rem; vertical-align:1px; }
.desc { font-size:.92rem; color:var(--muted); margin-top:.4rem; }
article.detail { background:var(--card); border-radius:12px; padding:1.4rem;
                 box-shadow:0 1px 3px rgba(14,42,69,.08); }
article.detail h2 { font-size:1.4rem; margin-bottom:.4rem; }
article.detail .desc { font-size:1rem; color:var(--text); margin:1rem 0; }
a.btn { display:inline-block; background:var(--teal); color:#fff; text-decoration:none;
        padding:.55rem 1.1rem; border-radius:8px; font-size:.9rem;
        margin:.6rem .5rem 0 0; }
a.btn.alt { background:var(--ocean); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
        gap:.7rem; }
.hero-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
        gap:.7rem; margin:1rem 0 1.5rem; }
.hero-cards a { display:block; background:var(--card); border-radius:10px;
        padding:1rem; text-decoration:none; color:var(--text); font-weight:700;
        border-top:3px solid var(--wave); box-shadow:0 1px 3px rgba(14,42,69,.08); }
.hero-cards a span { display:block; font-weight:400; font-size:.82rem;
        color:var(--muted); margin-top:.2rem; }
.townchips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1rem; }
.townchips a { background:var(--card); border:1px solid rgba(43,155,142,.35);
        color:var(--teal); font-size:.85rem; font-weight:600; padding:.3rem .7rem;
        border-radius:16px; text-decoration:none; }
.townchips a:hover { background:rgba(43,155,142,.12); }
.note { font-size:.8rem; color:var(--muted); font-style:italic; margin-top:1rem; }
figure.hero { margin:0 0 1rem; }
figure.hero img { width:100%; max-height:24rem; object-fit:cover; border-radius:10px; }
figure.hero figcaption { font-size:.72rem; color:var(--muted); margin-top:.25rem; }
figure.hero figcaption a { color:var(--muted); }
.card img.thumb { width:100%; height:9rem; object-fit:cover; border-radius:8px;
                  margin-bottom:.55rem; display:block; }
footer { text-align:center; color:var(--muted); font-size:.85rem; padding:2rem 1rem; }
footer a { color:var(--teal); }
nav.crumb { font-size:.85rem; margin-bottom:1rem; }
nav.crumb a { color:var(--teal); text-decoration:none; }

/* ── dark mode ─────────────────────────────────────────── */
:root[data-theme="dark"] { --bg:#0A1826; --card:#13283C; --text:#E6EEF4;
        --muted:#9FB3C2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0A1826; --card:#13283C;
        --text:#E6EEF4; --muted:#9FB3C2; }
}

/* ── header controls: search + theme toggle ───────────────── */
.hdr-tools { display:flex; gap:.5rem; align-items:center; }
.search-wrap { position:relative; }
#q { width:12rem; max-width:44vw; border:0; border-radius:16px; padding:.4rem .8rem;
     font-size:.85rem; background:rgba(255,255,255,.15); color:#fff; }
#q::placeholder { color:#B8CAD6; }
#q:focus { outline:2px solid var(--wave); background:rgba(255,255,255,.22); }
#results { position:absolute; right:0; top:2.4rem; width:22rem; max-width:80vw;
     background:var(--card); border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.25);
     max-height:70vh; overflow:auto; z-index:50; display:none; }
#results a { display:block; padding:.55rem .8rem; text-decoration:none; color:var(--text);
     border-bottom:1px solid rgba(128,128,128,.12); }
#results a:hover, #results a.sel { background:rgba(43,155,142,.14); }
#results .rt { font-weight:600; font-size:.9rem; }
#results .rd { font-size:.78rem; color:var(--muted); }
#results .empty { padding:.7rem .8rem; color:var(--muted); font-size:.85rem; }
.iconbtn { background:rgba(255,255,255,.15); border:0; color:#fff; cursor:pointer;
     width:2rem; height:2rem; border-radius:16px; font-size:1rem; line-height:1; }
.iconbtn:hover { background:rgba(255,255,255,.28); }

/* ── card hover polish ─────────────────────────────────── */
.card, .event, .hero-cards a { transition:transform .12s ease, box-shadow .12s ease; }
.card:hover, .event:hover, .hero-cards a:hover {
     transform:translateY(-2px); box-shadow:0 6px 18px rgba(14,42,69,.16); }

/* ── mobile nav: scroll instead of wrap ────────────────── */
@media (max-width:640px) {
  nav.main { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
        scrollbar-width:none; }
  nav.main::-webkit-scrollbar { display:none; }
  nav.main a { white-space:nowrap; }
  #q { width:8rem; }
}

/* ── live weather widget ───────────────────────────────── */
.weather { display:flex; align-items:center; gap:.8rem; background:var(--card);
     border-radius:12px; padding:.8rem 1rem; margin:0 0 1rem;
     box-shadow:0 1px 3px rgba(14,42,69,.08); }
.weather .wx-emoji { font-size:2rem; }
.weather .wx-temp { font-size:1.6rem; font-weight:800; }
.weather .wx-meta { font-size:.82rem; color:var(--muted); }

/* ── eclipse countdown ─────────────────────────────────── */
.countdown { background:linear-gradient(135deg,#0E2A45,#4A2C6B); color:#fff;
     border-radius:12px; padding:1rem 1.2rem; margin:0 0 1.2rem; text-decoration:none;
     display:block; }
.countdown b { font-size:1.05rem; }
.countdown .cd-nums { font-size:1.5rem; font-weight:800; margin-top:.2rem;
     font-variant-numeric:tabular-nums; }
.countdown .cd-sub { font-size:.8rem; color:#D9C7EC; }

/* ── share bar ─────────────────────────────────────────── */
.sharebar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
     margin:1.4rem 0 0; font-size:.85rem; color:var(--muted); }
.sharebar a, .sharebar button { display:inline-flex; align-items:center; gap:.35rem;
     text-decoration:none; border:1px solid rgba(43,155,142,.4); color:var(--teal);
     background:var(--card); border-radius:16px; padding:.35rem .8rem; font-size:.85rem;
     cursor:pointer; }
.sharebar a:hover, .sharebar button:hover { background:rgba(43,155,142,.12); }
.sharebar .wa { border-color:#25D366; color:#128C4B; }

/* ── back to top ───────────────────────────────────────── */
#toTop { position:fixed; right:1rem; bottom:1rem; width:2.6rem; height:2.6rem;
     border-radius:50%; border:0; background:var(--teal); color:#fff; font-size:1.2rem;
     cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.25); display:none; z-index:40; }
#toTop.show { display:block; }

/* ── photo lightbox ────────────────────────────────────── */
figure.hero img, .card img.thumb { cursor:zoom-in; }
#lb { position:fixed; inset:0; background:rgba(4,10,18,.92); display:none;
     align-items:center; justify-content:center; z-index:100; padding:1rem; }
#lb.show { display:flex; }
#lb img { max-width:96vw; max-height:88vh; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,.5); }
#lb .lb-cap { position:absolute; bottom:.6rem; left:0; right:0; text-align:center;
     color:#cdd8e0; font-size:.8rem; padding:0 1rem; }
#lb .lb-x { position:absolute; top:.8rem; right:1.1rem; color:#fff; font-size:2rem;
     cursor:pointer; line-height:1; }