@layer pages {
  /* mattemotto: el estudio, sin lifestyle. cuatro plates, doce pasos, una mesa. */

  /* ─────────────────────────────────────────────────────────────
     S1 · PAGE HEAD — bone
     ───────────────────────────────────────────────────────────── */
  .about-head {
    grid-column: 1 / span 10;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-block-start: clamp(0.5rem, 2vw, 1.25rem);
  }
  .about-head__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-800);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    text-wrap: balance;
  }
  @media (aspect-ratio < 3/4) {
    .about-head { grid-column: 1 / -1; }
  }

  /* ─────────────────────────────────────────────────────────────
     S2 · PORTRAIT SPREAD — ink
     ───────────────────────────────────────────────────────────── */
  .bio__portrait {
    grid-column: 1 / span 6;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .bio__portrait picture {
    display: block;
    aspect-ratio: 4 / 5;
    inline-size: 100%;
    overflow: clip;
    border: 1px solid var(--hairline-on-ink);
    background: var(--ink-deep);
  }
  .bio__portrait picture img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 18%;
    filter: contrast(1.02) saturate(0.94);
  }
  .bio__caption {
    color: var(--on-ink-quiet);
    font-size: var(--fs-mono-100);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
  }

  .bio__copy {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-self: start;
  }
  .bio__name {
    margin: var(--space-2xs) 0 var(--space-sm);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--bone);
    text-wrap: balance;
  }
  .bio__para {
    margin: 0;
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--on-ink-quiet);
    max-inline-size: 44ch;
  }
  .bio__para strong { color: var(--bone); font-weight: 700; }

  .bio__spec {
    margin: var(--space-md) 0 0;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--hairline-on-ink);
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-xl);
    row-gap: var(--space-sm);
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-200);
    letter-spacing: var(--tracking-mono);
  }
  .bio__spec > div { display: contents; }
  .bio__spec-label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-mono-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--on-ink-quiet);
  }
  .bio__spec dd { margin: 0; color: var(--bone); font-variant-numeric: tabular-nums; }

  @media (3/4 <= aspect-ratio < 1/1) {
    .bio__portrait { grid-column: 1 / span 5; }
    .bio__copy     { grid-column: 6 / span 7; }
  }
  @media (aspect-ratio < 3/4) {
    .bio__portrait,
    .bio__copy { grid-column: 1 / -1; }
    .bio__copy { margin-block-start: var(--space-md); }
  }

  /* ─────────────────────────────────────────────────────────────
     S3 · CERTIFICACIONES — bone, 2×2
     ───────────────────────────────────────────────────────────── */
  .certs__head {
    grid-column: 1 / span 10;
    margin-block-end: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .certs__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }

  .certs {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);
  }
  .cert {
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border: 1px solid var(--hairline-on-bone);
    background: transparent;
    color: var(--ink);
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: clamp(1.25rem, 2.2vw, 2rem);
    row-gap: var(--space-xs);
    align-items: baseline;
  }
  .cert__id {
    grid-row: 1 / span 4;
    align-self: start;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 0.95;
    color: var(--orange);
    letter-spacing: 0;
  }
  .cert__name {
    margin: 0;
    grid-column: 2;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-500);
    line-height: var(--lh-snug);
    letter-spacing: -0.018em;
    color: var(--ink);
  }
  .cert__discipline {
    margin: 0;
    grid-column: 2;
    color: var(--orange);
    font-size: var(--fs-mono-100);
  }
  .cert__body {
    margin: 0;
    grid-column: 2;
    font-size: var(--fs-200);
    line-height: var(--lh-snug);
    color: var(--on-bone-quiet);
    max-inline-size: 48ch;
  }

  @media (aspect-ratio < 1/1) {
    .certs { grid-template-columns: 1fr; }
  }
  @media (aspect-ratio < 3/4) {
    .certs__head { grid-column: 1 / -1; }
    .cert {
      grid-template-columns: max-content 1fr;
      padding: clamp(1.25rem, 4vw, 1.75rem);
    }
    .cert__id { font-size: clamp(1.75rem, 6vw, 2.4rem); }
  }

  /* ─────────────────────────────────────────────────────────────
     S4 · TECNOLOGÍAS APLICADAS — cyan, 4-up
     ───────────────────────────────────────────────────────────── */
  .tech__head {
    grid-column: 1 / span 9;
    margin-block-end: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .tech__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }

  .tech {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    border-block-start: 1px solid var(--hairline-on-cyan);
    border-block-end: 1px solid var(--hairline-on-cyan);
  }
  .tech__col {
    padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
    border-inline-start: 1px solid var(--hairline-on-cyan);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    color: var(--ink);
  }
  .tech__col:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .tech__col:last-child  { padding-inline-end: 0; }
  .tech__id {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-mono-200);
    color: var(--ink);
    opacity: 0.7;
    letter-spacing: 0;
  }
  .tech__name {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-500);
    line-height: 1.0;
    letter-spacing: -0.018em;
    color: var(--ink);
  }
  .tech__sub {
    margin: 0;
    font-size: var(--fs-mono-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    color: var(--on-cyan-quiet);
  }

  @media (3/4 <= aspect-ratio < 4/3) {
    .tech { grid-template-columns: repeat(2, 1fr); }
    .tech__col:nth-child(2)  { padding-inline-end: 0; }
    .tech__col:nth-child(3)  { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--hairline-on-cyan); }
    .tech__col:nth-child(4)  { border-block-start: 1px solid var(--hairline-on-cyan); padding-inline-end: 0; }
  }
  @media (aspect-ratio < 3/4) {
    .tech__head { grid-column: 1 / -1; }
    .tech { grid-template-columns: 1fr; }
    .tech__col {
      border-inline-start: 0;
      padding-inline: 0;
      border-block-start: 1px solid var(--hairline-on-cyan);
    }
    .tech__col:first-child { border-block-start: 0; }
  }

  /* ─────────────────────────────────────────────────────────────
     S5 · PROCEDIMIENTO — ink, 12 steps
     ───────────────────────────────────────────────────────────── */
  .proc__head {
    grid-column: 1 / span 9;
    margin-block-end: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .proc__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: var(--bone);
    text-wrap: balance;
  }

  .proc {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    row-gap: 0;
    border-block-start: 1px solid var(--hairline-on-ink);
  }
  .proc__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1rem, 1.75vw, 1.5rem) clamp(1.5rem, 2.4vw, 2rem) clamp(1rem, 1.75vw, 1.5rem);
    border-inline-end: 1px solid var(--hairline-on-ink);
    border-block-end: 1px solid var(--hairline-on-ink);
  }
  /* 4-col layout — kill outer gutters and bottom row hairline */
  .proc__step:nth-child(4n+1) { padding-inline-start: 0; }
  .proc__step:nth-child(4n)   { padding-inline-end: 0; border-inline-end: 0; }
  .proc__step:nth-last-child(-n+4) { border-block-end: 0; }

  .proc__no {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-mono-300);
    line-height: 1;
    color: var(--cyan-bright);
    letter-spacing: 0;
  }
  .proc__name {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    letter-spacing: -0.014em;
    color: var(--bone);
  }
  .proc__body {
    margin: 0;
    font-size: var(--fs-200);
    line-height: var(--lh-snug);
    color: var(--on-ink-quiet);
    max-inline-size: 32ch;
  }

  /* 1/1 ≤ aspect < 4/3 → 3 cols × 4 rows */
  @media (1/1 <= aspect-ratio < 4/3) {
    .proc { grid-template-columns: repeat(3, 1fr); }
    .proc__step {
      border-inline-end: 1px solid var(--hairline-on-ink);
      border-block-end: 1px solid var(--hairline-on-ink);
      padding-inline-start: clamp(1rem, 1.75vw, 1.5rem);
      padding-inline-end:   clamp(1rem, 1.75vw, 1.5rem);
    }
    .proc__step:nth-child(4n+1) { padding-inline-start: clamp(1rem, 1.75vw, 1.5rem); }
    .proc__step:nth-child(4n)   { padding-inline-end:   clamp(1rem, 1.75vw, 1.5rem); border-inline-end: 1px solid var(--hairline-on-ink); }
    .proc__step:nth-child(3n+1) { padding-inline-start: 0; }
    .proc__step:nth-child(3n)   { padding-inline-end: 0; border-inline-end: 0; }
    .proc__step:nth-last-child(-n+4) { border-block-end: 1px solid var(--hairline-on-ink); }
    .proc__step:nth-last-child(-n+3) { border-block-end: 0; }
  }

  /* 3/4 ≤ aspect < 1/1 → 2 cols × 6 rows */
  @media (3/4 <= aspect-ratio < 1/1) {
    .proc { grid-template-columns: repeat(2, 1fr); }
    .proc__step {
      border-inline-end: 1px solid var(--hairline-on-ink);
      border-block-end: 1px solid var(--hairline-on-ink);
      padding-inline-start: clamp(1rem, 1.75vw, 1.5rem);
      padding-inline-end:   clamp(1rem, 1.75vw, 1.5rem);
    }
    .proc__step:nth-child(4n+1) { padding-inline-start: clamp(1rem, 1.75vw, 1.5rem); }
    .proc__step:nth-child(4n)   { padding-inline-end:   clamp(1rem, 1.75vw, 1.5rem); border-inline-end: 1px solid var(--hairline-on-ink); }
    .proc__step:nth-child(2n+1) { padding-inline-start: 0; }
    .proc__step:nth-child(2n)   { padding-inline-end: 0; border-inline-end: 0; }
    .proc__step:nth-last-child(-n+4) { border-block-end: 1px solid var(--hairline-on-ink); }
    .proc__step:nth-last-child(-n+2) { border-block-end: 0; }
  }

  /* < 3/4 → single column */
  @media (aspect-ratio < 3/4) {
    .proc__head { grid-column: 1 / -1; }
    .proc { grid-template-columns: 1fr; }
    .proc__step {
      border-inline-end: 0;
      border-block-end: 1px solid var(--hairline-on-ink);
      padding-inline: 0 !important;
      padding-block: clamp(1.25rem, 4vw, 1.75rem);
    }
    .proc__step:last-child { border-block-end: 0; }
  }
}