/* Tools extras. Tokens stay in /assets/css/challenge-guide.css. Rhythm from home.css. Reversible: drop this sheet + restore tools/index.html. */

body.tools .section,
body.tools .dir {
  scroll-margin-top: 5.25rem;
}

body.tools .hero {
  padding-bottom: 2.1rem;
}

body.tools .hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.15rem);
}

body.tools .stat {
  margin: 1.15rem 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

body.tools .stat b {
  color: var(--primary);
  font-weight: 800;
}

.dir-list .rels {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.dir-list a.input {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding-top: 0.12rem;
}

.dir-list a.input:hover {
  color: var(--primary-deep);
}

body.tools .guide-grid .tile h3 a {
  color: inherit;
}

@media (max-width: 40rem) {
  body.tools .hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 2.55rem);
  }

  .dir-list .rels {
    gap: 0.45rem;
  }
}