/* base reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
img,svg{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
ul{list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:4px}

:root{
  --font-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --font-body:'General Sans','Helvetica Neue',Arial,sans-serif;
  --text-xs:0.78rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.2rem;
  --text-xl:1.6rem;--text-2xl:2.2rem;--text-hero:clamp(2.4rem,1rem+4vw,3.8rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;
  --color-bg:#f4f5f7;--color-surface:#ffffff;--color-surface-2:#eceef1;
  --color-divider:#dde0e5;--color-border:#ccd1d8;
  --color-text:#141a26;--color-text-muted:#565f70;--color-text-faint:#97a0ac;
  --color-primary:#1c3f5e;--color-primary-hover:#142c42;--color-primary-highlight:#d9e2ea;
  --color-ink:#0e1526;--color-ink-2:#141c30;--color-ink-border:#2a3347;
  --color-accent:#6b7686;--color-success:#3f6b3a;
  --radius:14px;--radius-sm:8px;
  --content:1140px;
  --shadow-card:0 1px 2px rgba(14,21,38,.04),0 4px 16px rgba(14,21,38,.06);
  --shadow-card-hover:0 2px 4px rgba(14,21,38,.06),0 10px 28px rgba(14,21,38,.10);
}
[data-theme="dark"]{
  --color-bg:#0e1526;--color-surface:#141c30;--color-surface-2:#182038;
  --color-divider:#2a3347;--color-border:#2a3347;
  --color-text:#e9edf4;--color-text-muted:#9aa6bd;--color-text-faint:#64708a;
  --color-primary:#9fb3cc;--color-primary-hover:#bcd0e9;--color-primary-highlight:#1c2540;
  --color-ink:#0a1020;--color-ink-2:#0e1526;--color-ink-border:#2a3347;
  --color-accent:#9fb3cc;
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4);
}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;text-wrap:balance;font-weight:500}
p,li{text-wrap:pretty}

/* layout */
.container{max-width:var(--content);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-primary);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.header-inner{max-width:var(--content);margin-inline:auto;padding:clamp(.7rem,2vw,1rem) clamp(1rem,4vw,2rem);display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--color-text);font-family:var(--font-display);font-size:1.02rem}
.brand svg{width:34px;height:34px;color:var(--color-primary)}
.brand small{display:block;font-family:var(--font-body);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint);font-weight:500;margin-top:1px}
.nav-desktop{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav-desktop a{font-size:var(--text-sm);color:var(--color-text-muted);transition:color .15s}
.nav-desktop a:hover{color:var(--color-text)}
.nav-desktop a[aria-current="page"]{color:var(--color-text);font-weight:600}
.header-actions{display:flex;align-items:center;gap:.6rem}
.theme-toggle{background:none;border:1px solid var(--color-border);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;color:var(--color-text-muted);cursor:pointer;transition:all .15s}
.theme-toggle:hover{color:var(--color-text);border-color:var(--color-text-faint)}
.btn{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--text-sm);font-weight:600;padding:.6rem 1.1rem;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:all .15s;text-align:center}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-outline{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn-outline:hover{border-color:var(--color-text-faint)}
.nav-toggle{display:none;background:none;border:none;color:var(--color-text);cursor:pointer;padding:.3rem}
@media(max-width:860px){
  .nav-desktop{display:none}
  .nav-toggle{display:block}
  .header-actions .btn-primary{display:none}
}

/* hero */
.hero{padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,4vw,2.5rem);border-bottom:1px solid var(--color-divider)}
.hero .eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4)}
.hero h1{font-size:var(--text-hero);max-width:18ch;letter-spacing:-.01em}
.hero .lede{margin-top:var(--space-5);font-size:var(--text-lg);color:var(--color-text-muted);max-width:58ch}
.sample-banner{margin-top:var(--space-6);display:inline-flex;align-items:flex-start;gap:.6rem;background:var(--color-primary-highlight);border:1px solid var(--color-primary);color:var(--color-primary-hover);padding:.7rem 1rem;border-radius:var(--radius-sm);font-size:var(--text-sm);max-width:70ch}
.sample-banner svg{flex-shrink:0;margin-top:1px}

/* controls */
.controls{padding:var(--space-8) 0;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.search{position:relative;flex:1;min-width:220px}
.search svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--color-text-faint)}
.search input{width:100%;padding:.8rem .9rem .8rem 2.5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm)}
.search input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight)}
.select{position:relative}
.select select{appearance:none;padding:.8rem 2.4rem .8rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);cursor:pointer;min-width:9rem}
.select select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight)}
.select::after{content:"";position:absolute;right:.9rem;top:50%;width:8px;height:8px;border-right:2px solid var(--color-text-faint);border-bottom:2px solid var(--color-text-faint);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.results-count{font-size:var(--text-sm);color:var(--color-text-muted);margin-left:auto}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-5);padding-bottom:var(--space-16)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);cursor:pointer;text-align:left;transition:all .18s;box-shadow:var(--shadow-card);width:100%;color:inherit}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-text-faint)}
.card-head{display:flex;align-items:flex-start;gap:.75rem}
.avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-ink))}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.card-name{font-size:1.02rem;font-weight:500;line-height:1.2}
.card-title{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}
.featured-tag{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--color-primary)}
.sample-tag{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--color-text-faint);border:1px solid var(--color-border);padding:1px 6px;border-radius:20px}
.card-meta{display:flex;align-items:center;gap:.4rem;font-size:var(--text-xs);color:var(--color-text-muted)}
.card-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.25rem}
.badge{font-size:var(--text-xs);font-weight:600;padding:.25rem .6rem;border-radius:20px}
.badge-core{background:var(--color-ink);color:#fff}
.badge-affiliate{background:var(--color-surface-2);color:var(--color-text)}
.badge-outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted)}

/* empty */
.empty{text-align:center;padding:var(--space-20) var(--space-4);color:var(--color-text-muted)}
.empty .icon{width:48px;height:48px;margin:0 auto var(--space-4);border-radius:50%;background:var(--color-surface-2);display:grid;place-items:center;color:var(--color-text-faint)}

/* modal */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(14,21,38,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-card-hover);padding:clamp(1.2rem,3vw,1.8rem);transform:translateY(12px);transition:transform .2s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-head{display:flex;align-items:flex-start;gap:1rem}
.modal-head .avatar{width:64px;height:64px;font-size:1.3rem}
.modal-name{font-size:1.3rem}
.modal-title{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:2px}
.modal-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:.3rem;border-radius:6px;font-size:1.4rem;line-height:1}
.modal-close:hover{color:var(--color-text);background:var(--color-surface-2)}
.modal-section{margin-top:var(--space-5)}
.modal-section h4{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600;margin-bottom:.4rem}
.modal-bio{font-size:var(--text-base);line-height:1.65;color:var(--color-text)}
.modal-creds{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55}
.contact-row{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);margin-top:.3rem}
.contact-row a{color:var(--color-primary);font-weight:500;word-break:break-all}
.contact-row a:hover{text-decoration:underline}
.modal-cta{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:.6rem}
.modal-cta .btn{flex:1;justify-content:center;min-width:160px}

/* footer */
.site-footer{border-top:1px solid var(--color-divider);padding:var(--space-10) 0;margin-top:var(--space-12);color:var(--color-text-muted);font-size:var(--text-sm)}
.footer-inner{max-width:var(--content);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.site-footer a{color:var(--color-primary);font-weight:500}
.site-footer a:hover{text-decoration:underline}

/* mobile nav */
.mobile-nav{display:none;position:fixed;inset:0;z-index:60;background:var(--color-bg);padding:1.5rem;flex-direction:column;gap:.4rem}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:.8rem 0;font-size:var(--text-lg);border-bottom:1px solid var(--color-divider);color:var(--color-text)}
.mobile-nav .close{align-self:flex-end;background:none;border:none;font-size:1.6rem;color:var(--color-text);cursor:pointer}