/* The home page: hero and the entry cards. */

body{--page-max:var(--page-narrow)}
.page{padding:48px 20px 40px}
.hero h2{font-size:32px;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px}
.hero p{margin:0;color:var(--ink-2);font-size:16px;max-width:56ch}
.hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:34px}
.hcard{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);
  padding:20px 22px;text-decoration:none;
  transition:transform .13s,box-shadow .13s,border-color .13s;
}
.hcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--ink-3)}
@media (hover:none){ .hcard:active{transform:scale(.98)} }
.hcard h3{margin:0;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.hcard h3 svg{color:var(--accent)}
.hcard p{margin:0;color:var(--ink-2);font-size:14px}
.hcard .go{margin-top:auto;padding-top:10px;font-size:13.5px;color:var(--accent);font-weight:550}
.hlist{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.hlist li{display:flex;flex-direction:column}
.hlist .hn{font-weight:600}
.hlist .hm{color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums}
.hlist .hm .pok{color:var(--ok)}
.hmuted{color:var(--ink-3);font-size:13px}

@media (max-width:700px){
  .page{padding:30px 16px 28px}
  .hero h2{font-size:26px}
  .hcards{margin-top:24px;gap:12px}
  .hcard{padding:16px 18px}
}