.home-wrap { max-width:var(--container-wide); margin:0 auto; padding:32px 20px 60px; }

.home-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.home-title {
  font-family:var(--font-display);
  font-size: clamp(30px,5.5vw,42px); font-weight:800; letter-spacing:-.02em; margin-bottom:6px;
}
.home-sub { font-size:var(--text-base); color:var(--t2); }

/* ── Fundamentals banner ────────────────────────────────────── */
.fundamentals-banner {
  display:flex; align-items:center; gap:10px; padding:12px 16px; margin-bottom:20px;
  background:var(--accent-d); border:1px solid var(--accent-b); border-radius:var(--radius);
  box-shadow: 0 8px 24px -16px var(--gold-b);
  font-size:var(--text-base); color:var(--t2); transition:background var(--transition), border-color var(--transition), transform var(--transition);
}
.fundamentals-banner:hover { background:var(--accent-b); border-color:var(--accent); transform:translateY(-1px); }
.fundamentals-banner strong { color:var(--accent); }
.fundamentals-banner-icon { font-size:var(--text-xl); flex-shrink:0; }

/* ── Filter / sort bar ──────────────────────────────────────── */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.filter-bar input[type="text"],
.filter-bar select {
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius);
  padding:11px 12px; font-size:var(--text-base); color:var(--t1); min-height:40px;
}
.filter-bar input[type="text"] { flex:1 1 220px; min-width:180px; }
.filter-bar select { flex:0 0 auto; }
.filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--accent-b); }
.filter-reset {
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--t3);
  padding:11px 12px; min-height:40px; border-radius:var(--radius); border:1px solid transparent; letter-spacing:.04em;
}
.filter-reset:hover { color:var(--t1); border-color:var(--line2); }

.results-meta { font-size:var(--text-xs); color:var(--t3); margin-bottom:14px; }

.guide-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:14px; }
@media (max-width:380px) {
  .home-wrap { padding-left:14px; padding-right:14px; }
}

.guide-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; color:inherit; text-decoration:none;
  position:relative;
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.guide-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient-brand); opacity:0; transition:opacity var(--transition);
}
.guide-card:hover {
  border-color:var(--accent-b); transform:translateY(-3px);
  box-shadow: 0 16px 32px -20px var(--shadow-strong), 0 0 0 1px var(--gold-b);
}
.guide-card:hover::before { opacity:1; }

.guide-card-top { padding:14px 16px 10px; border-bottom:1px solid var(--line); flex:1; }
.guide-card-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.guide-card-title { font-size:var(--text-2xl); font-weight:800; letter-spacing:-.01em; }
.guide-card-season { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--t3); letter-spacing:.05em; margin-bottom:6px; }
.guide-card-sub { font-size:var(--text-sm); color:var(--t2); line-height:1.5; }

/* Avatars stretch to fill the card's full width instead of a small fixed size. */
.guide-card-team { display:flex; gap:8px; padding:12px 16px; }
.guide-card-team .avatar,
.guide-card-team-more {
  width:auto !important; height:auto !important; flex:1 1 0; min-width:0; aspect-ratio:1/1;
}
.guide-card-team-more {
  border-radius:50%; background:var(--surface3);
  display:flex; align-items:center; justify-content:center; font-size:var(--text-xs); color:var(--t3);
  font-family:var(--font-mono);
}
.guide-card-team .avatar .initials { font-size:var(--text-base); }

.guide-card-win {
  font-size:var(--text-sm); color:var(--accent); background:var(--accent-d); border-top:1px solid var(--line);
  padding:9px 16px; line-height:1.5;
}