@layer layout {
  /* mattemotto: secciones que cambian de color. el ritmo es la marca. */

  .shell {
    inline-size: 100%;
    max-inline-size: var(--max-page);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  .page-grid {
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    column-gap: var(--gutter);
    row-gap: var(--row-gutter);
  }

  /* — section · vertical rhythm via padding, not chrome. — */
  .section {
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
    position: relative;
  }
  .section-tight { padding-block: clamp(2rem, 4vw, 3rem); }
  .section-deep  { padding-block: clamp(5rem, 10vw, 9rem); }

  /* — surface modifiers · the brand chord. cyan · ink · bone-deep. — */
  .section--cyan {
    background: var(--surface-cyan);
    color: var(--on-cyan);
  }
  .section--cyan a { text-decoration-color: var(--ink); }
  .section--cyan a:hover { text-decoration-color: var(--orange); }
  .section--cyan ::selection { background: var(--ink); color: var(--cyan-bright); }

  .section--ink {
    background: var(--surface-ink);
    color: var(--on-ink);
  }
  .section--ink hr { background: var(--hairline-on-ink); }
  .section--ink ::selection { background: var(--orange); color: var(--ink); }

  .section--bone-deep {
    background: var(--surface-bone-deep);
    color: var(--on-bone);
  }

  /* — full-bleed photo break · single decisive image, no chrome. — */
  .section--full-bleed-photo {
    padding-block: 0;
    min-block-size: clamp(40svh, 56vh, 70svh);
    position: relative;
    color: var(--on-ink);
    overflow: clip;
    isolation: isolate;
  }
  .section--full-bleed-photo > picture,
  .section--full-bleed-photo > .full-bleed-photo__img {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .section--full-bleed-photo picture img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* — full-bleed escape hatch · used inside content for edge-to-edge media. — */
  .full-bleed { inline-size: 100vw; margin-inline: calc(50% - 50vw); }

  /* — column spans — */
  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-12 { grid-column: 1 / -1; }
  .col-start-2 { grid-column-start: 2; }
  .col-start-3 { grid-column-start: 3; }
  .col-start-4 { grid-column-start: 4; }
  .col-start-5 { grid-column-start: 5; }
  .col-start-7 { grid-column-start: 7; }
  .col-start-8 { grid-column-start: 8; }
  .col-start-9 { grid-column-start: 9; }

  @media (aspect-ratio < 3/4) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9 { grid-column: 1 / -1; }
    .col-start-2, .col-start-3, .col-start-4, .col-start-5,
    .col-start-7, .col-start-8, .col-start-9 { grid-column-start: auto; }
  }
  @media (3/4 <= aspect-ratio < 1/1) {
    .col-7, .col-8, .col-9 { grid-column: 1 / -1; }
    .col-5, .col-6 { grid-column: span 8; }
    .col-3, .col-4 { grid-column: span 4; }
  }

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

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
  }
}