:root{
  --g900:#0f3d2a;--g800:#14513a;--g700:#1b6b4a;--g500:#3f9c6b;--accent:#7fd1a3;
  --bg:#eef8f1;--card:#ffffff;--ink:#14281f;--muted:#587064;--line:#d5e8dc;--link:#14683f;
  --serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
[data-theme="dark"]{--bg:#0b1a13;--card:#12261c;--ink:#e6f3ea;--muted:#93ad9f;--line:#21402f;--link:#7fd1a3}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.top{background:var(--g900);color:#fff}
.top-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:38px;width:auto}
.brand b{font-family:var(--serif);font-size:1.2rem;letter-spacing:.01em}
.theme{background:rgba(255,255,255,.08);border:0;color:#fff;border-radius:999px;width:38px;height:38px;font-size:1.05rem;cursor:pointer}
.theme:hover{background:rgba(255,255,255,.18)}

.hero{background:radial-gradient(120% 140% at 85% 0%,var(--g700) 0%,var(--g800) 40%,var(--g900) 100%);color:#fff;padding:46px 0 84px}
.hero-in{display:flex;align-items:center;gap:36px}
.crest{flex:none;height:132px;width:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
h1{font-family:var(--serif);font-weight:700;font-size:2.5rem;line-height:1.12;margin:0 0 12px}
.lede{margin:0;max-width:480px;color:#cfe9d9;font-size:1.02rem}

main{flex:1;padding-bottom:48px}
.search{display:flex;align-items:center;gap:10px;max-width:520px;margin:-26px 0 30px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:0 18px;height:52px;color:var(--muted);box-shadow:0 8px 24px rgba(15,61,42,.14)}
.search:focus-within{border-color:var(--g500);box-shadow:0 8px 24px rgba(15,61,42,.14),0 0 0 3px rgba(63,156,107,.3)}
.search input{flex:1;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;min-width:0}

.group{margin:0 0 28px}
h2{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.15rem;margin:0 0 12px;color:var(--ink)}
h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--g500)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{position:relative;display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--g500);transition:width .18s}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,61,42,.16);border-color:var(--g500);outline:none}
.card:hover::before{width:8px}
.ic{flex:none;width:60px;height:60px;border-radius:16px;object-fit:cover;background:var(--line)}
.letter{display:grid;place-items:center;background:var(--g700);color:#fff;font-family:var(--serif);font-weight:700;font-size:1.7rem}
.txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.txt b{font-family:var(--serif);font-size:1.1rem}
.txt em{font-style:normal;font-size:.8rem;color:var(--link);font-weight:700}
.txt span{font-size:.88rem;color:var(--muted);margin-top:4px}
.go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg);color:var(--link);font-size:1.1rem;transition:background .18s,color .18s}
.card:hover .go{background:var(--g700);color:#fff}
.none{text-align:center;color:var(--muted)}

.foot{background:var(--g900);color:#a9cdb8;font-size:.82rem;padding:18px 0;text-align:center}
@media (max-width:640px){
  .hero{padding:32px 0 70px}.hero-in{flex-direction:column;align-items:flex-start;gap:18px}
  .crest{height:96px}h1{font-size:1.85rem}.grid{grid-template-columns:1fr}
}
