:root{
    --paper:#eef3f2;
    --surface:#ffffff;
    --surface-2:#f5f9f8;
    --ink:#132226;
    --ink-soft:#4c6169;
    --ink-faint:#7d9297;
    --line:#d7e1df;
    --line-soft:#e7eeec;
    --accent:#166a8a;
    --accent-ink:#ffffff;
    --ember:#bd6a1c;
    --ember-soft:#f4e3d1;
    --moss:#3d7955;
    --moss-soft:#dceadf;
    --amber-status:#a8791f;
    --amber-status-soft:#f2e6cd;
    --gap-status:#6a7a7e;
    --gap-status-soft:#e6eceb;
    --like:#c23b5a;
    --shadow: 0 1px 2px rgba(19,34,38,.04), 0 8px 24px -12px rgba(19,34,38,.12);
    --shadow-lg: 0 24px 48px -16px rgba(19,34,38,.28);
    --radius: 14px;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0e1a1f;
      --surface:#15242b;
      --surface-2:#1a2c33;
      --ink:#e8f0ee;
      --ink-soft:#aec3c6;
      --ink-faint:#7f979b;
      --line:#2b414a;
      --line-soft:#213339;
      --accent:#74c6e8;
      --accent-ink:#082027;
      --ember:#f0a05c;
      --ember-soft:#3a2a1a;
      --moss:#82c79a;
      --moss-soft:#1c3327;
      --amber-status:#e0b355;
      --amber-status-soft:#332a15;
      --gap-status:#9db0b3;
      --gap-status-soft:#20343a;
      --like:#ef7290;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
      --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0e1a1f;
    --surface:#15242b;
    --surface-2:#1a2c33;
    --ink:#e8f0ee;
    --ink-soft:#aec3c6;
    --ink-faint:#7f979b;
    --line:#2b414a;
    --line-soft:#213339;
    --accent:#74c6e8;
    --accent-ink:#082027;
    --ember:#f0a05c;
    --ember-soft:#3a2a1a;
    --moss:#82c79a;
    --moss-soft:#1c3327;
    --amber-status:#e0b355;
    --amber-status-soft:#332a15;
    --gap-status:#9db0b3;
    --gap-status-soft:#20343a;
    --like:#ef7290;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:16px;
    line-height:1.55;
  }

  h1,h2,h3{
    font-family:"Fraunces", ui-serif, Georgia, serif;
    font-weight:600;
    color:var(--ink);
    text-wrap:balance;
    margin:0;
  }

  a{color:var(--accent);}
  p{margin:0;}
  button{font:inherit;}
  .mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;}
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  /* ---------- Header ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-row{
    display:flex; align-items:center; gap:20px;
    padding:14px 0;
  }
  .wordmark{
    display:flex; flex-direction:column; gap:1px; flex:0 0 auto;
    text-decoration:none; color:var(--ink);
  }
  .wordmark .brand{font-family:"Fraunces", serif; font-weight:600; font-size:1.05rem; letter-spacing:.2px;}
  .wordmark .tag{font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);}

  nav.primary{
    display:flex; gap:2px; overflow-x:auto; flex:1 1 auto;
    scrollbar-width:none;
  }
  nav.primary::-webkit-scrollbar{display:none;}
  nav.primary a{
    white-space:nowrap;
    text-decoration:none; color:var(--ink-soft);
    font-size:.86rem; font-weight:500;
    padding:8px 12px; border-radius:999px;
    transition:background .15s ease, color .15s ease;
  }
  nav.primary a:hover{background:var(--surface-2); color:var(--ink);}
  nav.primary a.active{background:var(--accent); color:var(--accent-ink);}

  .likes-btn{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
    padding:8px 14px; border-radius:999px; cursor:pointer; font-size:.84rem; font-weight:600;
    position:relative;
  }
  .likes-btn:hover{border-color:var(--accent);}
  .likes-btn .count{
    background:var(--like); color:#fff; border-radius:999px;
    font-family:"IBM Plex Mono", monospace; font-size:.68rem; padding:1px 6px;
    min-width:18px; text-align:center;
  }

  @media (max-width: 960px){
    nav.primary{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
      radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
      repeating-radial-gradient(circle at 78% -10%,
        transparent 0, transparent 42px,
        color-mix(in srgb, var(--accent) 9%, transparent) 43px,
        color-mix(in srgb, var(--accent) 9%, transparent) 44px),
      var(--paper);
  }
  .hero-inner{padding:60px 0 40px; position:relative;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent); font-weight:600;
    margin-bottom:18px;
  }
  .eyebrow::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--ember); display:inline-block; transform:rotate(45deg);}

  .hero h1{
    font-size:clamp(2rem, 4.4vw, 3.2rem);
    line-height:1.06;
    max-width:18ch;
    letter-spacing:-.01em;
  }
  .hero h1 em{font-style:italic; color:var(--ember);}

  .hero p.lede{
    margin-top:20px;
    max-width:60ch;
    font-size:1.06rem;
    color:var(--ink-soft);
  }

  .hero .disclaimer{
    margin-top:22px;
    display:inline-flex; align-items:flex-start; gap:10px;
    max-width:64ch;
    padding:12px 14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    font-size:.82rem;
    color:var(--ink-soft);
  }
  .hero .disclaimer strong{color:var(--ink);}

  .stat-row{
    margin-top:30px;
    display:flex; flex-wrap:wrap; gap:26px 38px;
  }
  .stat{display:flex; flex-direction:column; gap:2px;}
  .stat .n{font-family:"Fraunces", serif; font-weight:600; font-size:1.6rem; color:var(--ink); font-variant-numeric:tabular-nums;}
  .stat .l{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}

  .cta-row{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:"Public Sans", sans-serif; font-weight:600; font-size:.9rem;
    padding:11px 18px; border-radius:999px;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn.primary{background:var(--accent); color:var(--accent-ink);}
  .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line);}
  .btn.match{background:var(--like); color:#fff;}

  /* ---------- Finder (search + filters) ---------- */
  .finder{
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:14px 0;
  }
  .finder-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .search-box{flex:1 1 220px; position:relative; max-width:360px;}
  .search-box input{
    width:100%;
    font-family:inherit; font-size:.9rem;
    padding:10px 14px 10px 36px;
    border-radius:999px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink);
    outline:none;
  }
  .search-box input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);}
  .search-box svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none;}

  .finder-toggle{
    flex:0 0 auto; position:relative;
    display:inline-flex; align-items:center; gap:6px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    padding:9px 14px; border-radius:999px; font-size:.86rem; font-weight:600; cursor:pointer;
  }
  .finder-toggle:hover{border-color:var(--accent);}
  .finder-toggle .chevron{transition:transform .15s ease; font-size:.7rem; opacity:.7;}
  .finder-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg);}
  .finder-toggle .filter-badge{
    background:var(--accent); color:var(--accent-ink); border-radius:999px;
    font-family:"IBM Plex Mono", monospace; font-size:.68rem; padding:1px 6px; min-width:16px; text-align:center;
  }

  .filter-groups{
    display:none; gap:20px; flex-wrap:wrap;
    padding-top:16px; margin-top:14px; border-top:1px solid var(--line-soft);
  }
  .filter-groups.open{display:flex;}
  .filter-group{display:flex; flex-direction:column; gap:6px;}
  .filter-label{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
  .chip-row{display:flex; gap:6px; flex-wrap:wrap;}
  .chip{
    background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
    padding:6px 12px; border-radius:999px; font-size:.78rem; cursor:pointer;
    transition:background .12s ease, color .12s ease, border-color .12s ease;
  }
  .chip:hover{border-color:var(--accent);}
  .chip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

  .finder-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto;}
  .results-count{font-family:"IBM Plex Mono", monospace; font-size:.76rem; color:var(--ink-faint); white-space:nowrap;}

  /* ---------- Legend ---------- */
  .legend{
    display:flex; flex-wrap:wrap; gap:18px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:.78rem; color:var(--ink-soft);
  }
  .legend-item{display:flex; align-items:center; gap:7px;}
  .dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
  .dot.active{background:var(--moss);}
  .dot.verify{background:var(--amber-status);}
  .dot.gap{background:var(--gap-status);}

  /* ---------- Sections ---------- */
  section.block{padding:52px 0; border-bottom:1px solid var(--line-soft);}
  section.block:last-of-type{border-bottom:none;}
  .block-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    margin-bottom:28px; flex-wrap:wrap;
  }
  .block-head .cat{
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:8px; display:block;
  }
  .block-head h2{font-size:clamp(1.4rem, 2.4vw, 1.9rem);}
  .block-head .intro{max-width:58ch; color:var(--ink-soft); font-size:.95rem; margin-top:10px;}
  .block-head .count{
    font-family:"IBM Plex Mono", monospace; font-size:.78rem; color:var(--ink-faint);
    white-space:nowrap; padding-bottom:6px;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:16px;
  }

  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
    display:flex; flex-direction:column; gap:10px;
    box-shadow:var(--shadow);
  }
  .card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .card h3{font-size:1.04rem; line-height:1.28;}
  .status-chip{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:6px;
    font-family:"IBM Plex Mono", monospace; font-size:.64rem; letter-spacing:.03em;
    padding:4px 8px; border-radius:999px;
    white-space:nowrap;
  }
  .status-chip.active{background:var(--moss-soft); color:var(--moss);}
  .status-chip.verify{background:var(--amber-status-soft); color:var(--amber-status);}
  .status-chip.gap{background:var(--gap-status-soft); color:var(--gap-status);}
  .status-chip .dot{width:6px; height:6px;}
  .status-chip.active .dot{background:var(--moss);}
  .status-chip.verify .dot{background:var(--amber-status);}
  .status-chip.gap .dot{background:var(--gap-status);}

  .card .org{
    font-family:"IBM Plex Mono", monospace; font-size:.7rem; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:.04em;
  }
  .tag-row{display:flex; flex-wrap:wrap; gap:5px;}
  .tag-row .t{
    font-size:.68rem; padding:2px 8px; border-radius:999px;
    background:var(--surface-2); border:1px solid var(--line-soft); color:var(--ink-soft);
  }
  .card p.desc{color:var(--ink-soft); font-size:.89rem; flex:1;}
  .card .foot{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding-top:10px; border-top:1px solid var(--line-soft);
    font-size:.82rem;
  }
  .card .foot a{
    text-decoration:none; font-weight:600; color:var(--accent);
    display:inline-flex; align-items:center; gap:5px;
  }
  .card .foot a:hover{text-decoration:underline;}
  .like-toggle{
    background:none; border:none; cursor:pointer; color:var(--ink-faint);
    font-size:1rem; line-height:1; padding:2px; border-radius:6px;
  }
  .like-toggle:hover{color:var(--like);}
  .like-toggle.liked{color:var(--like);}

  /* ---------- Faculties ---------- */
  .fac-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px;}
  .fac-card{
    background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px;
  }
  .fac-card .fac-code{font-family:"IBM Plex Mono", monospace; font-size:.72rem; color:var(--accent); font-weight:600;}
  .fac-card h3{margin-top:6px; font-size:1.06rem;}
  .fac-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
  .fac-chips span{
    font-size:.76rem; padding:5px 10px; border-radius:999px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  }

  /* ---------- Footer ---------- */
  footer{padding:44px 0 60px;}
  .foot-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:28px;}
  footer h4{font-family:"Fraunces", serif; font-size:1rem; font-weight:600; margin-bottom:10px;}
  footer p, footer a{font-size:.86rem; color:var(--ink-soft);}
  footer a{display:block; text-decoration:none; margin-bottom:6px;}
  footer a:hover{color:var(--accent);}
  .foot-bottom{
    margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:.76rem; color:var(--ink-faint);
  }

  .no-results{display:none; padding:40px 0; text-align:center; color:var(--ink-faint); font-size:.95rem;}
  .no-results.show{display:block;}

  /* ---------- Match mode ---------- */
  .match-overlay{
    position:fixed; inset:0; z-index:100;
    background:color-mix(in srgb, var(--paper) 80%, black 20%);
    backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center;
    padding:24px;
  }
  .match-overlay.open{display:flex;}
  .match-panel{
    width:100%; max-width:420px;
    display:flex; flex-direction:column; gap:16px;
    align-items:center;
  }
  .match-top{width:100%; display:flex; justify-content:space-between; align-items:center;}
  .match-top .title{font-family:"Fraunces", serif; font-weight:600; color:var(--ink); font-size:1.1rem;}
  .match-close{
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem;
  }
  .match-stage{
    position:relative; width:100%; height:440px;
  }
  .match-card{
    position:absolute; inset:0;
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    box-shadow:var(--shadow-lg);
    padding:26px; display:flex; flex-direction:column; gap:14px;
    cursor:grab; touch-action:none; user-select:none;
    will-change:transform;
  }
  .match-card:active{cursor:grabbing;}
  .match-card .m-scope{
    font-family:"IBM Plex Mono", monospace; font-size:.7rem; letter-spacing:.05em;
    color:var(--accent); text-transform:uppercase; font-weight:600;
  }
  .match-card h3{font-size:1.4rem; margin-top:10px; line-height:1.2;}
  .match-card .m-org{font-size:.82rem; color:var(--ink-faint); margin-top:4px;}
  .match-card p.m-desc{color:var(--ink-soft); font-size:.96rem; margin-top:10px; flex:1;}
  .match-card .m-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto;}
  .match-badge{
    position:absolute; top:24px; font-family:"Fraunces", serif; font-weight:700; font-size:1.4rem;
    padding:6px 14px; border-radius:8px; border:3px solid; transform:rotate(-12deg);
    opacity:0; pointer-events:none; text-transform:uppercase;
  }
  .match-badge.like{right:20px; color:var(--moss); border-color:var(--moss);}
  .match-badge.pass{left:20px; color:var(--gap-status); border-color:var(--gap-status); transform:rotate(12deg);}

  .match-end{
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    padding:32px 26px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center;
  }
  .match-controls{display:flex; gap:18px;}
  .match-controls button{
    width:58px; height:58px; border-radius:50%; border:1px solid var(--line);
    background:var(--surface); font-size:1.4rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow);
  }
  .match-controls .pass-btn{color:var(--gap-status);}
  .match-controls .like-btn{color:var(--like);}
  .match-hint{font-size:.76rem; color:var(--ink-faint); text-align:center;}

  /* ---------- Likes panel ---------- */
  .likes-overlay{
    position:fixed; inset:0; z-index:100; display:none;
    background:color-mix(in srgb, var(--paper) 80%, black 20%);
  }
  .likes-overlay.open{display:block;}
  .likes-panel{
    position:absolute; top:0; right:0; bottom:0; width:min(420px, 100%);
    background:var(--surface); border-left:1px solid var(--line);
    padding:22px; overflow-y:auto;
    display:flex; flex-direction:column; gap:14px;
  }
  .likes-panel .lp-head{display:flex; justify-content:space-between; align-items:center;}
  .likes-panel h3{font-size:1.2rem;}
  .likes-empty{color:var(--ink-faint); font-size:.9rem; padding:20px 0;}
  .likes-list{display:flex; flex-direction:column; gap:10px;}
  .likes-list .li-item{
    border:1px solid var(--line); border-radius:12px; padding:14px;
    display:flex; flex-direction:column; gap:6px;
  }
  .likes-list .li-item .li-title{font-weight:600; font-size:.92rem;}
  .likes-list .li-item .li-org{font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em;}
  .li-actions{display:flex; justify-content:space-between; align-items:center; margin-top:4px;}
  .li-actions a{font-size:.8rem; font-weight:600; text-decoration:none;}
  .li-remove{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:.76rem;}
  .li-remove:hover{color:var(--like);}

  @media (max-width: 640px){
    .finder-row{justify-content:space-between;}
    .finder-actions{margin-left:0;}
    .filter-groups{flex-direction:column; gap:16px;}
  }