/* Most5 layout system, revision20261022-r2.
 * Canvas and structural rules are full bleed. Content starts at the same
 * viewport/panel inset. Prose has a separate reading measure; only media
 * objects may centre within their own pane. No page-centred child islands.
 * 900px and below retain the approved stacked/mobile layout.
 */
:root { --page-gutter:clamp(24px,2.5vw,64px); --prose-measure:44rem; }
@media (min-width:901px) {
  :root { --gutter:var(--page-gutter); }
  .most5-page .most-footer-inner,
  .most5-page .most-footer-bottom { max-width:none; margin-inline:0; }
  .most5-page .most-footer p { max-width:var(--prose-measure); }
}

/* Home: preserve the paired-panel structure and full-bleed photography.
 * Each paragraph belongs to its own panel, never to an independent page centre.
 */
@media (min-width:901px) {
  /* Repeated editorial pairs share the midpoint; the hero feature and the
     research-tool rail retain their distinct, functional proportions. */
  .most5-home .research-premise,
  .most5-home .practice-heading,
  .most5-home .form-field,
  .most5-home #open-lab .lab-body,
  .most5-home .iqb-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .most5-home .research-premise,
  .most5-home .practice-heading { column-gap:calc(2 * var(--gutter)); }

  .most5-home .research-copy,
  .most5-home #systems .tool-summary,
  .most5-home #systems .tool-note > p,
  .most5-home .form-definition > p:not(.form-thesis),
  .most5-home .practice-heading > p,
  .most5-home .primary-case-stage--research > div > p,
  .most5-home .iqb-bottom .case-record > div > p,
  .most5-home .update-content > p,
  .most5-home .contact-guide > p:not(.eyebrow),
  .most5-home .independent-development__cases > dd {
    width:100%; max-width:var(--prose-measure); margin-inline:0;
  }
  .most5-home .research-copy { justify-self:start; }
  .most5-home .form-specimen h2 { font-size:clamp(8rem,32cqi,22rem); }
  .most5-home #open-lab .lab-title h2 { font-size:clamp(4rem,18cqi,8rem); }
  .most5-home .primary-case-stage--research > h4,
  .most5-home .primary-case-stage--research > div {
    width:100%; max-width:none; margin-inline:0;
  }
  /* Overview uses the existing two photo/information tracks, not a third
     narrow column centred somewhere between them. */
  .most5-home .node-case__body {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:calc(2 * var(--gutter)); align-items:start;
  }
  .most5-home .node-case__body > h4 { margin:0; }
  .most5-home .node-case__body > p {
    width:100%; max-width:var(--prose-measure); margin:0;
  }
  .most5-home .node-case__heading,
  .most5-home .node-case__information { padding-inline:clamp(20px,1.5vw,32px); }
  .most5-home .node-case__heading { padding-block:clamp(20px,1.5vw,32px); }
  /* The video is an object in the right pane. Its 640px maximum is local;
     the surrounding row and divider still occupy the whole canvas. */
  .most5-home #open-lab .most-openlab__frame,
  .most5-home #open-lab .most-openlab__topbar,
  .most5-home #open-lab .most-openlab > figcaption {
    width:100%; max-width:640px; margin-inline:auto;
  }
  .most5-home #open-lab .lab-body > .lab-copy {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:calc(2 * var(--gutter));
  }
  .most5-home #open-lab .lab-copy > p {
    grid-column:2; width:100%; max-width:var(--prose-measure); margin:0;
  }
  .most5-home .independent-development__intro { max-width:none; }
}

/* About: full-width chapter frames and locally aligned reading columns.
 * This fragment follows the approved About styles. Mobile layouts, content,
 * media crops, paragraph grouping and chapter order remain authoritative.
 */
@media (min-width: 901px) {
  .about-page main {
    --about-measure: var(--prose-measure, 44rem);
    --about-column-gap: calc(2 * var(--page-gutter));
  }

  /* Paint and rules belong to the canvas; the gutter belongs to its content.
     A two-gutter gap places the second reading edge at midpoint + gutter. */
  .about-page .about-intro-inner,
  .about-page .about-section-head-inner,
  .about-page .about-explanation-inner,
  .about-page .about-partners-list,
  .about-page .about-list-note,
  .about-page .about-awards-list,
  .about-page .about-awards-inner,
  .about-page .about-director-identity,
  .about-page .about-biography,
  .about-page .about-lab-inner,
  .about-page .about-company-details {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--page-gutter);
  }

  .about-page .about-intro-copy,
  .about-page .about-prose,
  .about-page .about-section-head-inner > p,
  .about-page .about-biography p,
  .about-page .about-cycle-caption {
    max-width: var(--about-measure);
    margin-inline: 0;
    text-align: left;
  }

  .about-page .about-explanation-inner > div {
    min-width: 0;
    margin-inline: 0;
  }

  /* The diagram enclosure spans the canvas. Only the two panes own insets;
     an additional outer inset would double the gutter and break its rules. */
  .about-page .about-system-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .about-page .about-system-layout,
  .about-page .about-biography { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-page .about-system-layout::before { inset: 0; }
  .about-page .about-cycle { padding-inline: var(--page-gutter); }
  .about-page .about-system-row,
  .about-page .about-system-return { padding-inline: var(--page-gutter); }
  .about-page .about-system-copy { max-width: var(--about-measure); }

  /* Horizontal controls are a full-width structural row, not a capped island. */
  .about-page .about-partner-viewport { padding-inline: var(--page-gutter); }
  .about-page .about-partner-rail-controls {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--page-gutter);
  }

  /* Awards already has an outer frame; its nested heading gets no second one. */
  .about-page .about-awards-inner > .about-section-head > .about-section-head-inner {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .about-page .about-awards-body {
    width: calc(100% + 2 * var(--page-gutter));
    max-width: none;
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
  }

  /* A model is a bounded object within its pane, independent of prose width. */
  .about-page .about-lab-media {
    width: 100%;
    max-width: 640px;
    justify-self: center;
    margin-inline: auto;
  }
}

/* Wide layouts share the page gutter; reading copy stays in its own track. */
@media screen and (min-width: 901px) {
  .iqb-detail {
    --gutter: var(--page-gutter, clamp(24px, 2.5vw, 64px));
    --iqb-prose-measure: 44rem;
  }

  .iqb-detail .frame {
    max-width: none;
  }

  /* Keep text aligned with the hero metadata, including screens above 1800px. */
  .iqb-detail .hero-identity,
  .iqb-detail .hero-question {
    left: var(--gutter);
  }

  /* Chapter rules span the canvas while their labels retain the shared inset. */
  .iqb-detail .section-top {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }

  /* The repeated equal reading pairs share the same midpoint as About/Home. */
  .iqb-detail .scope-layout,
  .iqb-detail .continuity > .frame { column-gap:calc(2 * var(--gutter)); }

  /* The heading has its own frame; only the following frame is a two-column row. */
  .iqb-detail .continuity > .frame:first-child {
    display: block;
    padding-bottom: 32px;
  }

  .iqb-detail .scope-layout > p,
  .iqb-detail .scope-layout > div > p,
  .iqb-detail .observation-copy,
  .iqb-detail .connections-intro > p,
  .iqb-detail .contact-caption,
  .iqb-detail .continuity p:not(.years):not(.eyebrow),
  .iqb-detail .lab-description p,
  .iqb-detail .boundary-note,
  .iqb-detail .credit-layout > div {
    max-width: var(--iqb-prose-measure);
    margin-inline: 0;
    text-align: left;
  }
}