/* =============================================================================
   Utilities — layout primitives + small single-purpose helpers.
   Depends on tokens.css. Keep this list short and load-bearing; anything used
   once belongs in a component, not here.
   ========================================================================== */

/* --- Containers ---------------------------------------------------------- */
.aft-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.aft-container--wide { max-width: var(--container-wide); }
.aft-container--text { max-width: var(--container-text); }

/* --- Section rhythm ------------------------------------------------------ */
.aft-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.aft-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.aft-section--ink { background: var(--c-ink); color: var(--c-on-ink); }
.aft-section--alt { background: var(--c-paper-2); }

/* --- Stack (vertical rhythm) --------------------------------------------- */
.aft-stack   { display: flex; flex-direction: column; }
.aft-stack-1 > * + * { margin-top: var(--sp-1); }
.aft-stack-2 > * + * { margin-top: var(--sp-2); }
.aft-stack-3 > * + * { margin-top: var(--sp-3); }
.aft-stack-4 > * + * { margin-top: var(--sp-4); }
.aft-stack-5 > * + * { margin-top: var(--sp-5); }
.aft-stack-6 > * + * { margin-top: var(--sp-6); }

/* --- Cluster (horizontal wrap group) ------------------------------------- */
.aft-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.aft-cluster--tight { gap: var(--sp-2); }
.aft-cluster--between { justify-content: space-between; }

/* --- Grid ---------------------------------------------------------------- */
.aft-grid { display: grid; gap: var(--sp-5); }
.aft-grid--2 { grid-template-columns: repeat(2, 1fr); }
.aft-grid--3 { grid-template-columns: repeat(3, 1fr); }
.aft-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

@media (max-width: 60rem) {
  .aft-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 44rem) {
  .aft-grid--2, .aft-grid--3 { grid-template-columns: 1fr; }
}

/* --- Type helpers -------------------------------------------------------- */
.aft-display { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.aft-lead { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-muted); }
.aft-mono { font-family: var(--font-mono); }
.aft-muted { color: var(--text-muted); }
.aft-faint { color: var(--text-faint); }
.aft-balance { text-wrap: balance; }
.aft-nowrap { white-space: nowrap; }

/* Magenta ink text — accessible magenta for words on white */
.aft-ink-magenta { color: var(--accent-text); }
/* Highlight a run of text with a lime marker sweep */
.aft-mark {
  background: linear-gradient(var(--c-lime), var(--c-lime)) no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
  padding-inline: 0.05em;
}
.aft-mark--magenta {
  background-image: linear-gradient(var(--c-magenta), var(--c-magenta));
  color: var(--c-ink);
}

/* --- Misc ---------------------------------------------------------------- */
.aft-hidden { display: none !important; }
.aft-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aft-center { text-align: center; }
.aft-full { width: 100%; }