/* ==========================================================================
   layout.css — layout primitives + utilities (PLAN §6.1 step 4)
   Utility namespace: u-  (FROZEN, PLAN §11.5d)
   ========================================================================== */

/* Centered content column (BRIEF §7). */
.u-container {
  max-inline-size: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
@media (min-width: 48rem) {
  .u-container { padding-inline: var(--space-lg); }
}

/* Readable prose measure. */
.u-prose { max-inline-size: var(--maxw-prose); }

/* Vertical rhythm: consistent spacing between flow children. */
.u-stack { display: flex; flex-direction: column; }
.u-stack > * + * { margin-block-start: var(--space-md); }
.u-stack--lg > * + * { margin-block-start: var(--space-lg); }
.u-stack--sm > * + * { margin-block-start: var(--space-sm); }

/* Section vertical rhythm + sticky-header anchor offset (PLAN §14.5 SF-4).
   --space-xl on mobile, --space-2xl from tablet up (BRIEF §5). */
.u-section {
  padding-block: var(--space-lg);
  scroll-margin-top: var(--wf-header-h);
}
@media (min-width: 48rem) {
  .u-section { padding-block: var(--space-2xl); }
}

/* Visually hidden but available to assistive tech. */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element (PLAN §14.5 SF-1). Hidden until focus. */
.u-skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: -10rem;
  z-index: 1000;
  padding: var(--space-xs) var(--space-md);
  background: var(--c-parchment);
  color: var(--c-terracotta-dk);
  border: 2px solid var(--c-terracotta-dk);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: inset-block-start 0.15s ease;
}
.u-skip:focus {
  inset-block-start: var(--space-xs);
}

/* Simple centered text helper. */
.u-center { text-align: center; }

/* Eyebrow flourish above a heading. */
.u-eyebrow {
  display: block;
  font-family: var(--font-script);
  color: var(--c-clay);
  font-size: var(--step-1);
  margin-block-end: var(--space-2xs);
}

/* Hide an element on phones only (any tag — card, list item, etc.), to trim
   a long mobile list down to its most essential entries without touching
   >=48rem, where the full set still shows. */
@media (max-width: 47.99rem) {
  .u-hide-mobile { display: none; }
}