/* ==========================================================================
   Layout primitives — containers, sections, flow, grids
   ========================================================================== */
@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow { --container-max: 760px; }
  .container--text { --container-max: 68ch; }
  .container--wide { --container-max: 1600px; }

  /* Sections */
  .section {
    padding-block: var(--section-space);
  }

  .section--sm { padding-block: var(--section-space-sm); }
  .section--flush-top { padding-block-start: 0; }
  .section--surface { background: var(--surface-2); }
  .section--paper { background: var(--surface); }
  .section--dark {
    background: var(--night);
    color: var(--on-dark);
    --heading: var(--on-dark);
    --link: var(--on-dark);
    --link-hover: var(--coral-500);
    --text-muted: var(--on-dark-muted);
    --border: var(--on-dark-line);
  }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-end: clamp(var(--space-5), 3vw, var(--space-7));
  }

  .section-head__text {
    display: grid;
    gap: var(--space-3);
    max-width: 52ch;
  }

  .section-head--center {
    justify-content: center;
    text-align: center;
  }

  .section-head--center .section-head__text {
    justify-items: center;
  }

  /* Flow: vertical rhythm between siblings */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack, var(--space-4));
  }

  .flow > * + * {
    margin-block-start: var(--flow, 1em);
  }

  /* Cluster: wrapping inline group */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster, var(--space-3));
  }

  /* Auto grid */
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-5));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 240px), 100%), 1fr));
  }

  /* Two-column split that collapses */
  .split {
    display: grid;
    gap: var(--split-gap, var(--space-7));
    align-items: var(--split-align, start);
  }

  @media (min-width: 1024px) {
    .split { grid-template-columns: var(--split-cols, 1fr 1fr); }
  }

  /* Horizontal scroll-snap rail (mobile carousels, chip rows) */
  .rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--rail-item, 78%);
    gap: var(--rail-gap, var(--space-4));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
  }

  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }

  /* Media ratio boxes */
  .ratio {
    position: relative;
    aspect-ratio: var(--ratio, 4 / 5);
    overflow: hidden;
    background: var(--surface-3);
  }

  .ratio > img,
  .ratio > picture > img,
  .ratio > video,
  .ratio > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
@layer utilities {
  .list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .text-center { text-align: center; }
  .text-muted { color: var(--text-muted); }
  .text-soft { color: var(--text-soft); }
  .text-accent { color: var(--accent-ink); }
  .text-sm { font-size: var(--fs-sm); }
  .text-xs { font-size: var(--fs-xs); }
  .text-lg { font-size: var(--fs-md); }
  .serif { font-family: var(--font-serif); }
  .tabular { font-variant-numeric: tabular-nums; }
  .nowrap { white-space: nowrap; }
  .measure { max-width: var(--measure); }

  .mt-0 { margin-block-start: 0 !important; }
  .mb-0 { margin-block-end: 0 !important; }

  .full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  @media (max-width: 767.98px) {
    .hide-sm { display: none !important; }
  }

  @media (min-width: 768px) {
    .show-sm-only { display: none !important; }
  }

  @media (max-width: 1023.98px) {
    .hide-md-down { display: none !important; }
  }

  @media (min-width: 1024px) {
    .hide-lg { display: none !important; }
  }

  /* Subtle linen texture for hero / surfaces (< 5% opacity) */
  .texture-linen {
    position: relative;
    isolation: isolate;
  }

  .texture-linen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--texture-grain), var(--texture-weave);
    opacity: 0.045;
    mix-blend-mode: multiply;
  }
}