/* Front page only. Everything shared lives in hmt_theme.css. */

.hmt-home-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--hmt-text-strong);
  margin-bottom: .4rem;
}

.hmt-home-standfirst {
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmt-text-muted);
  margin-bottom: 1.4rem;
}

/* ─── Live counts ─────────────────────────────────────────────────── */

.hmt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  list-style: none;
  padding: 0 0 1.6rem;
  margin: 0 0 1.6rem;
  border-bottom: 1px solid var(--hmt-line-soft);
}
.hmt-stats li {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--hmt-text-faint);
}
.hmt-stats strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hmt-text-strong);
}

/* ─── The five tool cards ─────────────────────────────────────────── */

.hmt-home-grid { margin-bottom: 2.4rem; }

.hmt-home-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .7rem;
  row-gap: .3rem;
  align-items: start;
}

.hmt-home-icon {
  grid-row: 1 / span 2;
  font-size: 1.5rem;
  line-height: 1;
}

.hmt-home-card-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--hmt-text-strong);
}

.hmt-home-card-blurb {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--hmt-text-muted);
}

/* ─── Family list ─────────────────────────────────────────────────── */

.hmt-home-families h2 {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hmt-text-faint);
  margin-bottom: .5rem;
}

.hmt-home-note {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--hmt-text-muted);
  max-width: 42rem;
  margin-bottom: 1rem;
}

.hmt-family-list {
  display: grid;
  gap: .1rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  padding: 0;
}

.hmt-family-list li {
  display: flex;
  align-items: baseline;
  gap: .1rem;
  padding: .34rem 0;
  font-size: .86rem;
  border-bottom: 1px solid var(--hmt-line-soft);
}

.hmt-family-name { flex: 1 1 auto; }

.hmt-family-count {
  font-size: .72rem;
  color: var(--hmt-text-faint);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .hmt-stats { gap: 1rem; }
  .hmt-stats strong { font-size: 1.2rem; }
}

/* ── Women of Metal feature link ─────────────────────────────────────
   Deliberately NOT a seventh nav item: hmt_pages() drives the nav on
   every page and the masthead is laid out for six. */
.hmt-home-feature {
  margin: 0 0 1.8rem;
  padding: .8rem 1rem;
  background: var(--hmt-surface);
  border: 1px solid var(--hmt-line-soft);
  border-left: 3px solid var(--hmt-fam-origins);
  border-radius: var(--hmt-radius);
}
.hmt-home-feature a { color: var(--hmt-text); text-decoration: none; font-size: .95rem; }
.hmt-home-feature a strong { color: var(--hmt-fam-origins-ink); }
.hmt-home-feature a:hover, .hmt-home-feature a:focus-visible { color: var(--hmt-text-strong); }

/* ─── The doors ──────────────────────────────────────────────────────
   The front page's main event. Phrased as questions rather than genre
   names because a newcomer does not yet have the vocabulary, and asking
   them to choose between 77 names is the same level-of-detail failure the
   charts have. --accent is the genre's family colour. */

.hmt-doors-wrap { margin: 0 0 2.4rem; }

.hmt-doors-h {
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--hmt-text-strong);
  margin: 0 0 .4rem;
}

.hmt-doors {
  list-style: none;
  margin: 1.1rem 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .7rem;
}

.hmt-door { display: flex; }
.hmt-door > a {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  width: 100%;
  padding: .85rem 1rem;
  background: var(--hmt-surface);
  border: 1px solid var(--hmt-line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--hmt-radius);
  text-decoration: none;
}
.hmt-door > a:hover, .hmt-door > a:focus-visible {
  background: var(--hmt-surface-2);
  border-color: var(--hmt-line);
  border-left-color: var(--accent);
}

.hmt-door-q {
  font-size: .97rem;
  font-weight: 600;
  color: var(--hmt-text-strong);
  line-height: 1.35;
}
.hmt-door-genre {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--accent-ink);
}
.hmt-door-rec {
  font-size: .84rem;
  color: var(--hmt-text-muted);
  line-height: 1.45;
  margin-top: .12rem;
}
.hmt-door-band { color: var(--hmt-text-faint); }

.hmt-doors-more { font-size: .88rem; color: var(--hmt-text-muted); margin: 0; }
.hmt-doors-more a { color: var(--hmt-text); }

/* ─── Six places ──────────────────────────────────────────────────────
   Deliberately smaller and denser than the doors above. The doors are the
   page's primary offer and get a full card each; these are the second
   question, so they read as a row of tiles rather than competing with the
   six above them for the same attention. */

.hmt-home-places { margin: 2.2rem 0 0; }
.hmt-home-places > h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hmt-text-strong);
  margin: 0 0 .4rem;
}

.hmt-places {
  list-style: none;
  margin: 1rem 0 .9rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .55rem;
}
.hmt-places > li { display: flex; }
.hmt-places > li > a {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: 100%;
  padding: .6rem .75rem;
  background: var(--hmt-surface);
  border: 1px solid var(--hmt-line-soft);
  border-top: 2px solid var(--accent);
  border-radius: var(--hmt-radius);
  text-decoration: none;
}
.hmt-places > li > a:hover,
.hmt-places > li > a:focus-visible { background: var(--hmt-surface-2); border-color: var(--hmt-line); }

.hmt-place-name { font-size: .92rem; font-weight: 600; color: var(--hmt-text-strong); }
.hmt-place-what {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--accent-ink);
}
.hmt-place-era {
  font-size: .74rem;
  color: var(--hmt-text-faint);
  font-variant-numeric: tabular-nums;
}

/* ─── The charts, demoted below the doors ────────────────────────── */

.hmt-home-charts { margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--hmt-line-soft); }
.hmt-home-charts > h2, .hmt-home-families > h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hmt-text-strong);
  margin: 0 0 .4rem;
}