/* layout.css — container, section rhythm, hairgrid, flow, utilities. */
@layer layout {
  .pwp-container {
    inline-size: 100%;
    /* Mockup: content edge sits 70px from the viewport edge at 1440, so the
       gutter lives outside the 1300px content width. */
    max-inline-size: calc(var(--pwp-container) + (2 * var(--pwp-gutter)));
    margin-inline: auto;
    padding-inline: var(--pwp-gutter);
  }
  .pwp-container--narrow { max-inline-size: calc(var(--pwp-container-narrow) + (2 * var(--pwp-gutter))); }
  .pwp-container--wide { max-inline-size: calc(var(--pwp-container-wide) + (2 * var(--pwp-gutter))); }
  /* Smallest handhelds get a tighter gutter so nothing overflows at 320px. */
  @media (max-width: 359px) { :root { --pwp-gutter: 16px; } }


  /* Section rhythm. --pwp-section-y is the ONLY knob; sections vary it
     deliberately (craft rubric §5) instead of every band being identical. */
  .pwp-section {
    --pwp-section-y: 72px;
    padding-block: var(--pwp-section-y);
    background: var(--pwp-bg);
    color: var(--pwp-fg);
  }
  @media (min-width: 768px)  { .pwp-section { --pwp-section-y: 96px; } }
  @media (min-width: 1240px) { .pwp-section { --pwp-section-y: 112px; } }
  .pwp-section--tight { --pwp-section-y: var(--pwp-space-7); }
  .pwp-section--tall  { --pwp-section-y: var(--pwp-space-8); }

  .pwp-section--seam  { border-block-start: var(--pwp-hairline); }

  .pwp-flow > * + * { margin-block-start: var(--pwp-flow, var(--pwp-space-5)); }
  .pwp-flow--tight  { --pwp-flow: var(--pwp-space-3); }
  .pwp-flow--loose  { --pwp-flow: var(--pwp-space-7); }

  .pwp-hairgrid { display: grid; gap: 1px; background: var(--pwp-line); }
  .pwp-hairgrid > * { background: var(--pwp-card); padding: var(--pwp-space-6); }

  .pwp-sr-only {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}