/*
 * Wide-screen composition
 *
 * This final stylesheet controls only the shared canvas at genuinely wide
 * widths. Component typography remains owned by each project stylesheet, so
 * local hierarchies and fixed utility sizes keep participating in the normal
 * cascade.
 */

@media (min-width: 2200px) {
  :root {
    --wide-stage: 176rem;
    --wide-gutter: max(5vw, calc((100vw - var(--wide-stage)) / 2));
  }

  html {
    font-size: clamp(21px, .48vw, 32px);
    overflow-x: clip;
  }

}

/* Application-like and editorial stages grow as coherent compositions on
   4K/8K canvases instead of sending their columns toward opposite corners. */
@media (min-width: 3840px) {
  .topbar,
  .stage,
  .controller {
    width: min(84vw, var(--wide-stage));
  }

  .head,
  .doc-head,
  .hero,
  .series,
  .synthesis,
  .footer,
  .chapter,
  .context-documentation {
    padding-inline: var(--wide-gutter);
  }

  .series .piece:nth-child(even) {
    margin-inline: calc(var(--wide-gutter) * -1);
    padding-inline: var(--wide-gutter);
  }

  .pack-header,
  .pack-hero,
  .pack-footer {
    padding-inline: max(6vw, calc((100vw - var(--wide-stage)) / 2));
  }

  .process-stage {
    padding-inline: max(5vw, calc((100vw - 22rem - var(--wide-stage)) / 2));
  }

  .stage-workshop,
  .stage-resonances {
    padding-inline: max(4vw, calc((100vw - 22rem - var(--wide-stage)) / 2));
  }

  /* Keep the personal profile on the same editorial stage as the
     portfolio at 4K/8K; its paragraphs and timeline still cap their own
     reading measure, so the larger canvas does not create long text lines. */
  .person-profile {
    width: min(84vw, var(--wide-stage));
    max-width: none;
  }

  .person-profile-bio > p {
    max-width: 56ch;
  }
}