:root{
      /* Polar Pop palette */
      --polar-deep:#065758;   --polar-ice:#E2F0EF;    --polar-mist:#A9D4D6;
      --polar-sea:#82C3C5;    --polar-coral:#C46960;

      /* Theme */
      --bg:#065758; --bg-elev:#0c4a4c; --text:#E2F0EF; --muted:#A9D4D6;
      --card:#082f30; --accent:#C46960; --accent-2:#82C3C5;
      --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
      --radius: 18px; --shadow: 0 10px 30px rgba(0,0,0,.35);
      --container: 1200px;

      /* Sparkles */
      --sparkle:#fff;
    }

    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{ margin:0; background:var(--bg); color:var(--text);
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif; }
    a{ color:var(--accent); text-decoration:none }
    a:hover{ filter:brightness(1.1) saturate(1.05) }

    /* Header */
    header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
      background: color-mix(in oklab, var(--bg) 90%, transparent);
      border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
    .nav{ max-width:var(--container); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.5px }
    .brand .logo-img{ width:36px; height:36px; border-radius:10px; box-shadow:var(--shadow); background:var(--bg-elev); object-fit:contain; padding:2px }
    .brand span{ color: var(--accent); }
    .nav a{ color:var(--text); opacity:.95 }
    .nav a.top-btn{ background: var(--accent); color:#fff; border:1px solid color-mix(in oklab, var(--accent) 60%, transparent); }
    .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow); transition: transform .12s ease; position:relative; overflow:visible }
    .btn:hover{ transform:translateY(-2px) }
    .btn .icon-img{ height:22px; width:auto; object-fit:contain; display:inline-block; vertical-align:middle }

    /* Hero (minimal) */
    .hero-wrap{
      background:
        radial-gradient(900px 600px at 12% -10%, color-mix(in oklab, var(--polar-coral) 22%, transparent), transparent 70%),
        radial-gradient(900px 600px at 100% 0%, color-mix(in oklab, var(--polar-sea) 22%, transparent), transparent 70%),
        color-mix(in oklab, var(--polar-ice) 14%, var(--bg));
    }
    .hero{ max-width:var(--container); margin:auto; padding:32px 20px 18px; display:grid; grid-template-columns:1fr; gap:12px; align-items:center }
    .hero h1{ font-size:clamp(28px,3.4vw,42px); line-height:1.1; margin:0 0 4px }
    .hero p.lead{ color:var(--muted); margin:0 0 6px }
    .cta{ display:flex; gap:12px; flex-wrap:wrap }

    /* Sections */
    section{ padding: 32px 0 }
    section .wrap{ max-width:var(--container); margin:auto; padding:0 20px }

    /* Alternating section backgrounds */
    section.alt-a{ background: radial-gradient(circle at top left, color-mix(in oklab, var(--polar-coral) 20%, transparent), transparent 70%), color-mix(in oklab, var(--polar-ice) 20%, var(--bg)) }

    /* Cards & grid */
    .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px }
    @media (max-width:1000px){ .grid{ grid-template-columns:1fr 1fr } }
    @media (max-width:640px){ .grid{ grid-template-columns:1fr } }
    .card{ background:linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent), color-mix(in oklab, var(--bg) 40%, transparent)); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius: var(--radius); padding:16px; position:relative; overflow:hidden }
    .card:hover{ box-shadow:var(--shadow) }
    .card .top{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
    .badge{ font-size:12px; background:var(--accent-2); color:#fff; padding:4px 8px; border-radius:999px; border:none }
    .card p{ color:var(--muted); margin:8px 0 12px }
    .actions{ display:flex; gap:10px; flex-wrap:wrap }
    .thumb{ width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); margin-bottom:10px; background:var(--bg-elev) }

    /* Filter bar */
    .filterbar{ display:flex; flex-direction:column; gap:12px; align-items:stretch; margin:8px 0 16px }
    .chips{ display:flex; gap:8px; flex-wrap:wrap }
    .chip{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); cursor:pointer; background:var(--bg-elev); color:var(--text); position:relative; overflow:visible }
/* NEW — solid coral when selected */
.chip.active{
  background:#c46960;  /* solid coral fill */
  border-color:#c46960;
  color:#fff;
}

/* "All" looks like a normal chip until active, then also coral */
.chip[data-tag="all"]{
  background: var(--bg-elev);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.chip[data-tag="all"].active{
  background:#c46960;
  border-color:#c46960;
  color:#fff;
}

    .searchbox{ display:flex; align-items:center; gap:8px }
    .searchbox input[type="search"]{ flex:1 1 280px; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); background:var(--bg-elev); color:var(--text) }
    .searchbox input[type="search"]:focus{ outline:none; box-shadow:var(--ring); border-color: color-mix(in oklab, var(--accent) 35%, transparent) }

    /* Result count + empty state */
    .resultline{ color:var(--muted); font-size:.95rem; text-align:center; margin-top:-2px }
    .empty{ display:none; text-align:center; color:var(--muted); padding:18px 0 }

    /* Grouped sections (styled like Events “months”) */
    .group{ margin-top:24px; border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) }
    .group.alt-a{
      background:
        radial-gradient(circle at top left, color-mix(in oklab, var(--polar-coral) 18%, transparent), transparent 70%),
        color-mix(in oklab, var(--polar-ice) 10%, var(--bg));
    }
    .group.alt-b{
      background:
        radial-gradient(circle at bottom right, color-mix(in oklab, var(--polar-sea) 20%, transparent), transparent 70%),
        color-mix(in oklab, var(--polar-mist) 12%, var(--bg));
    }
    .group h2{
      font-size: clamp(22px, 2.6vw, 34px); margin: 0 0 10px; position:relative; padding-bottom:6px;
    }
    .group h2::after{
      content:""; position:absolute; left:0; bottom:0; width:72px; height:3px; border-radius:999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.95;
    }

    /* Footer */
    footer{ border-top:1px solid color-mix(in oklab, var(--accent) 40%, transparent); background: radial-gradient(circle at 50% -30%, color-mix(in oklab, var(--polar-ice) 15%, transparent), transparent 80%), color-mix(in oklab, var(--polar-ice) 10%, var(--bg)) }
    .foot{ max-width:var(--container); margin:auto; padding:28px 20px; color:var(--muted); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between }

    /* Utilities */
    .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 }
    .icon{ width:22px; height:22px; display:inline-block }
    .icon svg{ width:100%; height:100% }

    /* Back-to-top (coral) */
    #toTop{
      position:fixed; right:18px; bottom:18px; z-index:999;
      opacity:0; transform:translateY(10px); transition: all .15s ease;
      background:#C46960; color:#fff;
      border:1px solid color-mix(in oklab, #C46960 60%, transparent);
    }
    #toTop.show{ opacity:1; transform:none }

    /* Sparkles host */
    .sparkle-host{ position:relative }
    .sparkle{ position:absolute; left:0; top:0; width:6px; height:6px; pointer-events:none; border-radius:50%;
      background: radial-gradient(circle, #fff 0 28%, color-mix(in oklab, var(--sparkle) 92%, #fff) 29% 60%, transparent 61%);
      filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sparkle) 85%, transparent));
      transform: translate(-50%, -50%) scale(.9) rotate(0deg); opacity:.95; animation: tt-sparkle .8s ease-out forwards; }
    @keyframes tt-sparkle{ to{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.1) rotate(90deg); opacity:0; } }
    @media (prefers-reduced-motion: reduce){
      .sparkle{ animation:none; opacity:0 }
      .btn:hover, .chip:hover{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--sparkle) 25%, transparent) inset; }
    }