/* why page: the poster text in big letters, then the four types of event */

.manifesto {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}
.manifesto__line {
  max-width: 18ch;
  margin: 0 0 0.6em;
  font-size: clamp(2.25rem, 1.2rem + 5vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
/* the middle line is longer so it's a bit smaller */
.manifesto__line--long {
  max-width: 26ch;
  font-size: clamp(1.6rem, 1rem + 3vw, 3.75rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}


/* ---- "what you can do": one row per type, each links to the program ---- */

.things {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 6rem);
}
.things__head { margin: 0 -0.6rem; padding: 0 0.6rem 0.75rem; border-bottom: var(--rule-thick); }

.thing {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name arrow" "text arrow";
  gap: 0.25rem 1.5rem;
  align-items: center;
  margin-inline: -0.6rem;
  padding: clamp(1.25rem, 3vw, 2rem) 0.6rem;
  border-bottom: var(--rule-thick);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
/* on bigger screens the name and text sit side by side */
@media (min-width: 48em) {
  .thing { grid-template-columns: minmax(14rem, 1fr) 2fr auto; grid-template-areas: "name text arrow"; }
}
.thing__name {
  grid-area: name;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.thing__text { grid-area: text; font-weight: 600; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
.thing__count { display: block; margin-top: 0.35rem; }
.thing__arrow {
  grid-area: arrow;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  font-weight: 800;
  transition: transform 0.2s var(--ease);
}
.thing:hover { background: var(--fg); color: var(--bg); }
.thing:hover .thing__arrow { transform: translateX(0.2em); }
.thing:focus-visible { outline-offset: -4px; }