/* Event explainer: readable display typography and explicit all-ages rules. */

@import url("./school-takeover-explainer-20260812-2.css");

.brief-sheet h2 {
  display: grid;
  gap: clamp(6px, 0.7vw, 12px);
  max-width: 100%;
  font-size: clamp(3.7rem, 7.15vw, 8.5rem);
  letter-spacing: -0.015em;
  line-height: 0.94;
}

.brief-sheet h2 span {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.brief-sheet h2 .brief-title-last {
  padding: 0.08em 0.12em 0.03em;
  background: var(--blue);
  color: var(--white);
  font-size: 0.67em;
  letter-spacing: 0.01em;
  line-height: 1;
  transform: rotate(-0.6deg);
}

.brief-age-policy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1100px;
}

.brief-age-policy .brief-age-all {
  background: var(--ink);
  color: var(--white);
}

.brief-age-policy .brief-age-all strong {
  color: var(--yellow);
}

@media (max-width: 900px) {
  .brief-age-policy {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
}

@media (max-width: 700px) {
  .brief-sheet h2 {
    gap: 5px;
    font-size: clamp(3rem, 15.1vw, 5.1rem);
    line-height: 0.96;
  }

  .brief-sheet h2 .brief-title-last {
    font-size: 0.61em;
  }
}

@media (max-width: 380px) {
  .brief-sheet h2 {
    font-size: 2.7rem;
  }
}