:root{
      /* Zemew Blue palette */
      --zms-100: #98BAE3;
      --zms-300: #5981B1;
      --zms-500: #365475;
      --zms-700: #15273C;
      --zms-900: #020408;

      /* Theme */
      --bg: #0e1623; 
      --bg-elev: #1a2d44; 
      --text: #E8EEF9; 
      --muted: #bcd1ee; 
      --card: #1f2f45; 
      --accent: #5981B1; 
      --accent-2: #98BAE3;
      --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;
      --header-offset: 88px;
    }

    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    html, body {
      height: 100%;
      margin: 0;
      background: transparent !important;
    }
    body{ 
      margin:0 !important; 
      background: transparent !important;
      background-attachment: unset !important;
      color:var(--text);
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
      position: relative;
    }
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #5981B1, #365475) !important;
      z-index: -1;
      pointer-events: none;
    }
    a{ color:var(--accent); text-decoration:none }
    a:hover{ filter:brightness(1.1) saturate(1.05) }

    /* Header */
    header{ 
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgb(14,22,35);
      border-bottom: 1px solid rgba(152,186,227, 0.18);
    }
    .nav{ 
      max-width:var(--container); 
      margin:auto; 
      display:flex; 
      align-items:center; 
      justify-content:space-between; 
      gap:16px; 
      padding:12px 18px; 
    }
    .brand{ 
      display:flex; 
      align-items:center; 
      gap:10px; 
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--text);
    }
    .brand .logo-img{
      height: 32px;
      width: auto;
      display: block;
      border-radius:10px;
      box-shadow:none;
      background:transparent;
      object-fit:contain;
      padding:0;
    }
    .nav a{ color:var(--text); opacity:.95 }
    .nav .btn.primary {
      background: linear-gradient(135deg, #5981B1, #365475);
      color: #fff;
      border-color: rgba(152,186,227, 0.35);
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 600;
      text-decoration: none;
      display: inline-block;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(89,129,177, 0.2);
      border: 1px solid rgba(152,186,227, 0.35);
      cursor: pointer;
      transform: translateY(0) scale(1);
    }
    .nav .btn.primary:hover {
      background: linear-gradient(135deg, #6B9BD1, #4A6B95);
      transform: translateY(-1px) scale(1);
      box-shadow: 0 4px 12px rgba(89,129,177, 0.35);
      border-color: rgba(152,186,227, 0.5);
    }
    .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;
      transform: translateY(0) scale(1);
    }
    .btn:hover{ transform: translateY(-2px) scale(1); }
    .btn .icon-img{ height:22px; width:auto; object-fit:contain; display:inline-block; vertical-align:middle }

    /* Hero (minimal) */
    main .hero-wrap{
      background:
        radial-gradient(900px 600px at 12% -10%, rgba(152,186,227, 0.22), transparent 70%),
        radial-gradient(900px 600px at 100% 0%, rgba(89,129,177, 0.22), transparent 70%),
        rgba(14,22,35, 0.95) !important;
      min-height: 20vh !important;
    }
    main .hero{ 
      max-width:var(--container); 
      margin:0 auto; 
      padding:24px 20px 16px; 
      background: transparent !important;
      min-height: auto !important;
    }
    main .hero > div {
      width: 100%;
      max-width: var(--container);
      text-align: center;
      margin: 0 auto;
    }
    main .hero h1{ font-size:clamp(28px,3.4vw,42px); line-height:1.1; margin:0 0 4px }
    main .hero p.lead{ color:var(--muted); margin:0 0 6px }
    main .hero .cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content: center; }

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

    /* Alternating section backgrounds */
    section.alt-a{ 
      background: transparent;
    }

    /* 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: var(--bg-elev); 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(--zms-300); 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 Zemew blue when selected */
.chip.active{
  background: var(--zms-300);  /* solid Zemew blue fill */
  border-color: var(--zms-300);
  color:#fff;
}

/* "All" looks like a normal chip until active, then also Zemew blue */
.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: var(--zms-300);
  border-color: var(--zms-300);
  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: rgba(14,22,35, 0.85);
    }
    .group.alt-b{
      background: rgba(21,39,60, 0.85);
    }
    .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 rgba(152,186,227, 0.18); 
      background: radial-gradient(circle at 50% -30%, rgba(152,186,227, 0.1), transparent 80%), 
                  rgba(14,22,35, 0.9);
    }
    .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 (Zemew blue) */
    #toTop{
      position:fixed; 
      right:18px; 
      bottom:18px; 
      z-index:99999;
      opacity:0; 
      visibility: hidden;
      transform: translateY(10px); 
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
      background: linear-gradient(135deg, var(--zms-300), var(--zms-500)); 
      color:#fff;
      border:1px solid rgba(152,186,227, 0.35);
      cursor:pointer; 
      pointer-events:none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      padding: 0;
      margin: 0;
    }
    #toTop.show{ 
      opacity:1; 
      visibility: visible;
      transform: translateY(0); 
      pointer-events:auto;
    }
    #toTop:hover{
      background: linear-gradient(135deg, var(--zms-100), var(--zms-300));
      transform: translateY(-4px) scale(1);
      box-shadow: 0 6px 20px rgba(89,129,177, 0.5), 0 4px 12px rgba(0,0,0,0.4);
    }