/*
 * Rules that must outrank any component, which is what the last layer in the
 * cascade order buys us — no !important anywhere.
 */
@layer utilities {
  /* A component that sets `display` on something it also hides would
     otherwise override the browser's own [hidden] rule and show it anyway. */
  [hidden] {
    display: none;
  }

  /* Present to assistive tech, invisible on screen — for text labels on
     icon-only links. */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The reading measure: prose, forms, and any section that should stay
     narrow while its page runs the full site width. */
  .measure {
    max-width: var(--measure);
  }
}