:root{
    --navy:#00264d; --navy-light:#004080; --navy-pale:#e9eff6; --navy-pale-2:#dbe5f0;
    --orange:#ef7e1a; --orange-light:#ff9a45; --orange-pale:#fef1e2;
    --ink:#0a1626; --muted:#5c6b80; --paper:#ffffff; --paper-2:#f6f8fb;
    --line:#e2e8f0; --line-strong:#cbd6e3;
    --display:"Playfair Display","Times New Roman",serif; --body:"Noto Sans",-apple-system,sans-serif;
    --shadow-sm:0 2px 10px rgba(0,38,77,0.06); --shadow-md:0 12px 34px rgba(0,38,77,0.10); --shadow-lg:0 24px 60px rgba(0,38,77,0.16);
    --heading:var(--navy); --header-bg:rgba(255,255,255,0.96); --card-bg:#ffffff;
    --topbar-h:36px; --header-h:64px;
  }
  html[data-theme="dark"]{
    --navy-pale:rgba(255,255,255,0.07); --navy-pale-2:rgba(255,255,255,0.14);
    --ink:#eef2f8; --muted:#93a4bd; --paper:#0b1626; --paper-2:#0f1f36;
    --line:#1e2f47; --line-strong:#2c415f; --heading:#eef2f8;
    --header-bg:rgba(11,22,38,0.9); --card-bg:#0f1f36;
    --shadow-sm:0 2px 10px rgba(0,0,0,0.35); --shadow-md:0 12px 34px rgba(0,0,0,0.45); --shadow-lg:0 24px 60px rgba(0,0,0,0.55);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s ease,color .3s ease;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{list-style:none;}
  button{font-family:inherit;}
  ::selection{background:var(--orange);color:#fff;}
  :focus-visible{outline:2px solid var(--orange);outline-offset:3px;}
  .wrap{max-width:1200px;margin:0 auto;padding:0;}
  @media (max-width:640px){.wrap{padding:0 20px;}}

  .eyebrow{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:9px;justify-content:center;}
  .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;}

  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;padding:12px 22px;border-radius:999px;border:1.5px solid transparent;transition:all .25s ease;white-space:nowrap;cursor:pointer;}
  .btn.solid{background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(239,126,26,0.28);}
  .btn.solid:hover{background:#d96e0f;transform:translateY(-2px);}
  .btn.outline{border-color:var(--heading);color:var(--heading);}
  .btn.outline:hover{background:var(--navy);color:#fff;transform:translateY(-2px);border-color:var(--navy);}
  .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;flex-shrink:0;}

  /* ============ HERO ZONE ============ */
  .hero-zone{
    position:relative;background-color:var(--paper-2);padding-bottom:0;
    background-image:
      radial-gradient(circle, rgba(0,38,77,0.09) 1.6px, transparent 1.6px),
      linear-gradient(115deg, rgba(0,38,77,0.05) 1px, transparent 1px);
    background-size:24px 24px, 48px 48px; background-position:0 0, 0 0;
    overflow:hidden; isolation:isolate;
  }
  /* Light-mode pattern above uses navy rgba values, near-invisible on a dark
     background — white-based values at the same positions/sizes for dark mode. */
  html[data-theme="dark"] .hero-zone {
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.08) 1.6px, transparent 1.6px),
      linear-gradient(115deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  }
  .hero-zone::before, .hero-zone::after{content:"";position:absolute;border-radius:50%;filter:blur(6px);pointer-events:none;z-index:0;}
  .hero-zone::before{top:-140px;right:-140px;width:460px;height:460px;background:radial-gradient(circle,rgba(239,126,26,0.16),transparent 70%);}
  .hero-zone::after{bottom:-200px;left:-140px;width:440px;height:440px;background:radial-gradient(circle,rgba(0,64,128,0.14),transparent 70%);}
  .hero-zone > *{position:relative;z-index:1;}

  .page-banner{padding-top:56px;padding-bottom:44px;text-align:center;}
  .crumb-inline{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
  .crumb-inline a:hover{color:var(--orange);}
  .crumb-inline span{margin:0 6px;color:var(--line-strong);}
  .crumb-inline .cur{color:var(--heading);font-weight:600;margin:0;}
  h1.hero-title{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.8vw,50px);color:var(--heading);line-height:1.1;margin-top:14px;}
  h1.hero-title em{color:var(--orange);font-style:normal;}
  .hero-sub{max-width:52ch;margin:16px auto 0;font-size:16px;line-height:1.7;color:var(--muted);}
  .banner-search{max-width:480px;margin:28px auto 0;display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid var(--line);border-radius:999px;padding:13px 22px;box-shadow:var(--shadow-sm);}
  .banner-search svg{width:16px;height:16px;stroke:var(--muted);flex-shrink:0;}
  .banner-search input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);width:100%;}
  .banner-search input::placeholder{color:var(--muted);}

  /* ============ FILTER BAR ============ */
  .filter-section{padding-top:44px;padding-bottom:60px;}
  .filter-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
  .filter-head h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,29px);color:var(--heading);}
  .filter-head .count{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);padding:4px 12px;border-radius:999px;}

  .filter-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:6px;overflow:hidden;}
  .filter-row-label{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:block;}
  .filter-row + .filter-row{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
  .filter-row-top{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;}

  .campus-tabs{display:flex;gap:8px;flex-wrap:wrap;min-width:0;}
  .campus-tab{font-size:13px;font-weight:700;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);color:var(--muted);cursor:pointer;background:var(--card-bg);white-space:nowrap;}
  .campus-tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}

  .dept-select-wrap{position:relative;min-width:220px;}
  .dept-select-wrap select{
    appearance:none;width:100%;font:inherit;font-size:13px;font-weight:700;color:var(--heading);
    background:var(--card-bg);border:1.5px solid var(--line);border-radius:999px;padding:10px 38px 10px 18px;cursor:pointer;
  }
  .dept-select-wrap::after{
    content:"";position:absolute;right:16px;bottom:13px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg);pointer-events:none;
  }

  .tag-row-wrap{display:flex;align-items:center;gap:8px;min-width:0;}
  .tag-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;min-width:0;flex:1;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);}
  .tag-row::-webkit-scrollbar{display:none;}
  .tag-row-arrow{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card-bg);color:var(--heading);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:all .2s ease;}
  .tag-row-arrow.left,.tag-row-arrow.right{margin-top:-6px;}
  .tag-row-arrow:hover{background:var(--orange);border-color:var(--orange);color:#fff;}
  .tag-row-arrow[disabled]{opacity:0.35;cursor:default;pointer-events:none;}
  @media (max-width:640px){.tag-row-arrow{display:none;}}
  .tag-pill{flex-shrink:0;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:999px;background:var(--card-bg);color:var(--heading);border:1px solid var(--line);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;}
  .tag-pill:hover{border-color:var(--orange);}
  .tag-pill.is-active{background:var(--orange);color:#fff;border-color:var(--orange);}

  .clear-filters{font-size:12.5px;font-weight:700;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;flex-shrink:0;}
  .clear-filters:hover{color:var(--heading);border-color:var(--line-strong);}

  @media (max-width:640px){
    .filter-panel{padding:18px 16px;border-radius:16px;}
    .filter-row-top{flex-direction:column;align-items:stretch;gap:14px;}
    .campus-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 16px 8px;margin:0 -16px;position:relative;width:calc(100% + 32px);max-width:calc(100% + 32px);}
    .campus-tabs::-webkit-scrollbar{display:none;}
    .filter-row-label + .campus-tabs{margin-top:-2px;}
    .dept-select-wrap{min-width:0;width:100%;}
    .tag-row{margin:0 -16px;padding:2px 16px 8px;width:calc(100% + 32px);max-width:calc(100% + 32px);}
    .filter-row-top .clear-filters{align-self:flex-start;}
    .filter-row{position:relative;}
    .filter-row:has(.campus-tabs)::before,.filter-row:has(.campus-tabs)::after,
    .filter-row:has(.tag-row)::before,.filter-row:has(.tag-row)::after{content:"";position:absolute;bottom:14px;width:20px;pointer-events:none;z-index:2;}
    .filter-row:has(.campus-tabs)::before,.filter-row:has(.tag-row)::before{left:-2px;top:26px;background:linear-gradient(90deg,var(--paper-2),transparent);}
    .filter-row:has(.campus-tabs)::after,.filter-row:has(.tag-row)::after{right:-2px;top:26px;background:linear-gradient(270deg,var(--paper-2),transparent);}
  }

  .grid-empty{display:none;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:70px 20px;grid-column:1/-1;}
  .grid-empty.show{display:flex;}
  .grid-empty .ic{width:52px;height:52px;border-radius:14px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
  .grid-empty .ic svg{width:24px;height:24px;stroke:var(--orange);}
  .grid-empty h4{font-family:var(--display);font-weight:700;font-size:17px;color:var(--heading);}
  .grid-empty p{font-size:13.5px;color:var(--muted);max-width:36ch;}

  /* ============ CLUB GRID (image-rich) ============ */
  /* min-height + align-content:center: when there are only 1-2 results, the
     grid gets padded out to a reasonable minimum height and its (few) rows
     center vertically inside it, instead of sitting stuck at the top with a
     big dead gap of empty space below before the footer. With many results
     the content naturally exceeds this min-height, so it has no effect. */
  .club-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px;min-height:38vh;align-content:center;}
  @media (max-width:1000px){.club-grid{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:720px){.club-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:460px){.club-grid{grid-template-columns:1fr;}}

  .club-card{background:var(--card-bg);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease,background .3s ease;}
  .club-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--line-strong);}
  .club-media{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,var(--navy-pale),var(--paper-2));display:flex;align-items:center;justify-content:center;padding:22px;border-bottom:1px solid var(--line);}
  .club-media img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,38,77,0.12));background:#fff;border-radius:10px;}
  .club-media .club-tag{position:absolute;top:10px;left:10px;right:10px;z-index:2;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--orange);background:var(--card-bg);border:1px solid var(--orange-pale);padding:4px 10px;border-radius:999px;width:fit-content;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;}
  .club-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1;}
  .club-name{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--heading);line-height:1.3;}
  .club-meta{display:flex;gap:14px;font-size:12px;color:var(--muted);font-weight:600;}
  .club-meta span{display:flex;align-items:center;gap:5px;}
  .club-meta svg{width:12px;height:12px;stroke:var(--orange);}
  .club-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);}
  .club-foot-label{font-size:12px;font-weight:700;color:var(--heading);}
  .club-arrow{width:28px;height:28px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease;}
  .club-arrow svg{width:13px;height:13px;stroke:var(--heading);}
  .club-card:hover .club-arrow{background:var(--orange);transform:translateX(2px);}
  .club-card:hover .club-arrow svg{stroke:#fff;}

  .pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:44px 0 60px;}
  .page-btn{min-width:38px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--card-bg);color:var(--muted);font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .page-btn.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .page-btn:hover:not(.is-active){border-color:var(--navy);color:var(--heading);}
  .page-btn.is-disabled{opacity:.4;pointer-events:none;}
  .page-dots{color:var(--line-strong);font-weight:700;padding:0 2px;}

  /* ============ CAMPUS STRIP ============ */
  .campus-strip{padding:0 0 70px;}
  .campus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  @media (max-width:800px){.campus-grid{grid-template-columns:1fr;}}
  .campus-tile{border-radius:18px;padding:26px;background:linear-gradient(150deg,var(--navy),#001830);color:#fff;position:relative;overflow:hidden;}
  .campus-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 260px 160px at 90% 0%,rgba(255,154,69,0.18),transparent 60%);}
  .campus-tile h4{font-family:var(--display);font-weight:700;font-size:18px;position:relative;}
  .campus-tile p{font-size:13px;color:rgba(255,255,255,0.65);margin-top:6px;position:relative;}
  .campus-tile a{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:12.5px;font-weight:700;color:var(--orange-light);position:relative;}

  [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  [data-reveal].is-visible{opacity:1;transform:translateY(0);}