/* One centered content rail, including the visual stories on wide screens.
   Reading columns may be narrower; backgrounds can extend beyond the rail. */
:root {
  --dm-page-edge:max(var(--dm-gutter),calc((100% - var(--dm-container))/2));
}

/* Clip decoration without creating a second, focus-scrollable viewport. */
.home-layout .stage {overflow:clip}
/* Frame the scene below the live header, outside the content rail. */
.home-layout .stage .frame-corners {
  top:calc(var(--dm-shell-height) + 24px);bottom:118px;
  left:max(12px,calc(var(--dm-page-edge) - 20px));
  right:max(12px,calc(var(--dm-page-edge) - 20px));
  z-index:2;opacity:calc(.46 * var(--route-retreat,1));
}
.home-layout .frame-corners span {width:16px;height:16px}
@media(max-width:650px) {
  .home-layout .stage .frame-corners {top:calc(var(--dm-shell-height) + 16px);bottom:92px;left:10px;right:10px}
  .home-layout .frame-corners span {width:10px;height:10px}
}

@media(min-width:1001px) {
  .home-layout {--home-gutter:var(--dm-page-edge)}
  .home-layout .content-section {padding-inline:var(--dm-page-edge)}

  /* Keep the opening copy and its controls on the same rail as the header. */
  .home-layout .hero-copy {
    left:var(--dm-page-edge);
    width:calc(100% - 2 * var(--dm-page-edge));
    max-width:860px;
  }
  .home-layout .hero-copy h1 {font-size:clamp(56px,5.4vw,78px);max-width:860px}
  .home-layout :is(.frame-corners,.stage-bottom,.progress-track,.media-note) {
    left:var(--dm-page-edge);right:var(--dm-page-edge);
  }
  .home-layout .loading-marker {right:var(--dm-page-edge)}
  .home-layout :is(.route-heading,.route-message) {left:var(--dm-page-edge)}
  .home-layout .route-message {width:min(660px,52%);max-width:none}

  /* Text and phone form one bounded two-column composition. */
  .home-layout .phone-finale .phone-scene-inner {
    left:var(--dm-page-edge);right:var(--dm-page-edge);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;
  }
  .home-layout .phone-finale.phone-static {padding-inline:var(--dm-page-edge)}
  .home-layout .phone-finale.phone-static .phone-scene-inner {
    inset:auto;min-height:600px;max-width:var(--dm-container);margin-inline:auto;
  }
  .home-layout .phone-copy {max-width:560px}
  .home-layout .phone-copy h2 {font-size:clamp(44px,4.5vw,64px)}
  .home-layout .phone-object {height:min(62svh,600px)}

  /* The graph and its HTML labels share the same bounded coordinate space. */
  .complex-editorial .complex-opening {height:min(100svh,820px);min-height:680px}
  .complex-editorial .opening-inner {
    height:100%;display:flex;flex-direction:column;justify-content:center;
    padding-top:var(--complex-header-height);padding-bottom:76px;
  }
  .complex-editorial .opening-inner .breadcrumbs {
    position:absolute;top:calc(var(--complex-header-height) + 20px);margin:0;
  }
  .complex-editorial .opening-copy {width:46%;max-width:560px;padding:0}
  .complex-editorial .opening-copy h1 {font-size:clamp(48px,4.2vw,64px)}
  .complex-editorial .opening-copy .opening-summary {font-size:17px;max-width:440px}
  .complex-editorial .opening-graph {
    inset:0 auto 0 50%;translate:-50% 0;
    width:min(var(--dm-container),calc(100% - 2 * var(--dm-gutter)));
    height:100%;margin:0;
  }

  /* Photographs fill the screen. Only their text and controls use the rail. */
  .material-opening .breadcrumbs {padding-inline:var(--dm-page-edge)}
  .material-panorama-copy {
    padding:160px 0 72px;margin-left:var(--dm-page-edge);
    width:540px;max-width:46%;
  }
  .material-panorama h1 {font-size:clamp(60px,5vw,76px)}
  .material-panorama:has(.soil-regular) h1 {font-size:clamp(48px,4.2vw,60px)}
  .material-panorama-copy .panorama-description {max-width:46ch}
  .material-panorama .panorama-note {right:var(--dm-page-edge)}
}

/* Wide displays add margins, not larger type or more distance between columns. */
@media(min-width:1600px) {
  .home-layout .hero-copy {top:28%}
  .home-layout .route-message-text {font-size:56px}
}