/* V44: model-first exhibition layout. Keep the object as the hero; shorten copy without removing controls. */
@media (min-width: 851px) and (orientation:landscape){
  #shell #stage .scene[data-id="5"],#shell #stage .scene[data-id="6"],
  #shell #stage .scene[data-id="9"],#shell #stage .scene[data-id="10"],
  #shell #stage .scene[data-id="11"],#shell #stage .scene[data-id="12"],
  #shell #stage .scene[data-id="13"],#shell #stage .scene[data-id="14"],
  #shell #stage .scene[data-id="15"],#shell #stage .scene[data-id="16"],
  #shell #stage .scene[data-id="17"]{
    grid-template-columns:minmax(220px,25%) minmax(0,1fr)!important;
    padding:94px 5.4vw 86px 5.6vw!important;gap:2.25vw!important;
  }
  #shell #stage .scene[data-id="5"] .visual,#shell #stage .scene[data-id="6"] .visual,
  #shell #stage .scene[data-id="9"] .visual,#shell #stage .scene[data-id="10"] .visual,
  #shell #stage .scene[data-id="11"] .visual,#shell #stage .scene[data-id="12"] .visual,
  #shell #stage .scene[data-id="13"] .visual,#shell #stage .scene[data-id="14"] .visual,
  #shell #stage .scene[data-id="15"] .visual,#shell #stage .scene[data-id="16"] .visual,
  #shell #stage .scene[data-id="17"] .visual{
    width:100%!important;height:min(80vh,790px)!important;min-height:430px!important;max-width:none!important;overflow:visible!important;
  }
  #shell #stage .scene[data-id="5"] .copy,#shell #stage .scene[data-id="6"] .copy,
  #shell #stage .scene[data-id="9"] .copy,#shell #stage .scene[data-id="10"] .copy,
  #shell #stage .scene[data-id="11"] .copy,#shell #stage .scene[data-id="12"] .copy,
  #shell #stage .scene[data-id="13"] .copy,#shell #stage .scene[data-id="14"] .copy,
  #shell #stage .scene[data-id="15"] .copy,#shell #stage .scene[data-id="16"] .copy,
  #shell #stage .scene[data-id="17"] .copy{max-width:none!important;min-width:0!important;padding-right:6px!important}
  #shell #stage .scene[data-id="5"] .copy h1,#shell #stage .scene[data-id="6"] .copy h1,
  #shell #stage .scene[data-id="9"] .copy h1,#shell #stage .scene[data-id="10"] .copy h1,
  #shell #stage .scene[data-id="11"] .copy h1,#shell #stage .scene[data-id="12"] .copy h1,
  #shell #stage .scene[data-id="13"] .copy h1,#shell #stage .scene[data-id="14"] .copy h1,
  #shell #stage .scene[data-id="15"] .copy h1,#shell #stage .scene[data-id="16"] .copy h1,
  #shell #stage .scene[data-id="17"] .copy h1{font-size:clamp(35px,4.15vw,61px)!important;line-height:1.12!important;margin:12px 0 12px!important}
  #shell #stage .scene[data-id="5"] .copy h1 em,#shell #stage .scene[data-id="6"] .copy h1 em,
  #shell #stage .scene[data-id="9"] .copy h1 em,#shell #stage .scene[data-id="10"] .copy h1 em,
  #shell #stage .scene[data-id="11"] .copy h1 em,#shell #stage .scene[data-id="12"] .copy h1 em,
  #shell #stage .scene[data-id="13"] .copy h1 em,#shell #stage .scene[data-id="14"] .copy h1 em,
  #shell #stage .scene[data-id="15"] .copy h1 em,#shell #stage .scene[data-id="16"] .copy h1 em,
  #shell #stage .scene[data-id="17"] .copy h1 em{font-size:.34em!important;line-height:1.35!important;margin-top:7px!important}
  #shell #stage .scene[data-id="5"] .copy p,#shell #stage .scene[data-id="6"] .copy p,
  #shell #stage .scene[data-id="9"] .copy p,#shell #stage .scene[data-id="10"] .copy p,
  #shell #stage .scene[data-id="11"] .copy p,#shell #stage .scene[data-id="12"] .copy p,
  #shell #stage .scene[data-id="13"] .copy p,#shell #stage .scene[data-id="14"] .copy p,
  #shell #stage .scene[data-id="15"] .copy p,#shell #stage .scene[data-id="16"] .copy p,
  #shell #stage .scene[data-id="17"] .copy p{font-size:13px!important;line-height:1.7!important;max-width:34em!important}
  #shell #stage .scene[data-id="5"] .learning,#shell #stage .scene[data-id="6"] .learning,
  #shell #stage .scene[data-id="9"] .learning,#shell #stage .scene[data-id="10"] .learning,
  #shell #stage .scene[data-id="11"] .learning,#shell #stage .scene[data-id="12"] .learning,
  #shell #stage .scene[data-id="13"] .learning,#shell #stage .scene[data-id="14"] .learning,
  #shell #stage .scene[data-id="15"] .learning,#shell #stage .scene[data-id="16"] .learning,
  #shell #stage .scene[data-id="17"] .learning{margin-top:13px!important;padding-top:10px!important;gap:8px!important;font-size:11px!important;line-height:1.55!important;max-width:100%!important}
  #shell #stage .scene[data-id="5"] .learning strong,#shell #stage .scene[data-id="6"] .learning strong,
  #shell #stage .scene[data-id="9"] .learning strong,#shell #stage .scene[data-id="10"] .learning strong,
  #shell #stage .scene[data-id="11"] .learning strong,#shell #stage .scene[data-id="12"] .learning strong,
  #shell #stage .scene[data-id="13"] .learning strong,#shell #stage .scene[data-id="14"] .learning strong,
  #shell #stage .scene[data-id="15"] .learning strong,#shell #stage .scene[data-id="16"] .learning strong,
  #shell #stage .scene[data-id="17"] .learning strong{font-size:11px!important}

  /* The continuation bookmark was sitting on top of the exhibit. Move it into the outer right margin. */
  #shell:has(#stage .scene[data-id="9"]) .bottomnav .bookmark-nav--next,
  #shell:has(#stage .scene[data-id="10"]) .bottomnav .bookmark-nav--next,
  #shell:has(#stage .scene[data-id="13"]) .bottomnav .bookmark-nav--next,
  #shell:has(#stage .scene[data-id="14"]) .bottomnav .bookmark-nav--next{position:relative!important;left:18px!important;z-index:15!important;min-width:138px!important;padding:8px 14px 9px 12px!important}

  /* Compass: enlarge the model lane, compact the explanation and keep all four steps accessible. */
  #shell #stage .scene[data-id="9"] .suspension-stage,#shell #stage .scene[data-id="10"] .suspension-stage{grid-template-columns:minmax(0,1.35fr) minmax(190px,.72fr)!important;gap:13px!important;padding:8px 0 62px!important}
  #shell #stage .scene[data-id="9"] .suspension-hero,#shell #stage .scene[data-id="10"] .suspension-hero{min-height:0!important;height:100%!important}
  #shell #stage .scene[data-id="9"] .suspension-side,#shell #stage .scene[data-id="10"] .suspension-side{padding:6px 0!important;gap:7px!important;overflow:auto!important}
  #shell #stage .scene[data-id="9"] .suspension-side h3,#shell #stage .scene[data-id="10"] .suspension-side h3{font-size:20px!important;letter-spacing:.1em!important}
  #shell #stage .scene[data-id="9"] .suspension-side p,#shell #stage .scene[data-id="10"] .suspension-side p{font-size:11px!important;line-height:1.55!important}
  #shell #stage .scene[data-id="9"] .principle-card,#shell #stage .scene[data-id="10"] .principle-card{padding:7px 8px!important;grid-template-columns:28px minmax(0,1fr)!important;gap:7px!important;border-radius:8px!important}
  #shell #stage .scene[data-id="9"] .principle-num,#shell #stage .scene[data-id="10"] .principle-num{width:26px!important;height:26px!important;font-size:14px!important}
  #shell #stage .scene[data-id="9"] .principle-copy b,#shell #stage .scene[data-id="10"] .principle-copy b{font-size:12px!important;margin-bottom:2px!important}
  #shell #stage .scene[data-id="9"] .principle-copy span,#shell #stage .scene[data-id="10"] .principle-copy span{font-size:10px!important;line-height:1.45!important}
  #shell #stage .scene[data-id="9"] .suspension-caption,#shell #stage .scene[data-id="10"] .suspension-caption{font-size:10px!important;line-height:1.45!important;padding:7px 9px!important}

  /* Tower: reserve most of the right side for the model; keep only minimal in-model labels. */
  #shell #stage .scene[data-id="13"] .visual{height:min(82vh,810px)!important;min-height:470px!important}
  #shell #stage .scene[data-id="13"] .tower-caption{left:22px!important;bottom:82px!important;max-width:48%!important}
  #shell #stage .scene[data-id="13"] .tower-caption strong{font-size:13px!important;letter-spacing:.08em!important}
  #shell #stage .scene[data-id="13"] .tower-caption span,#shell #stage .scene[data-id="13"] .tower-credit,
  #shell #stage .scene[data-id="13"] .v7-tower-levels,#shell #stage .scene[data-id="13"] .v7-tower-insight{display:none!important}
  #shell #stage .scene[data-id="13"] .tower-controls{left:14px!important;right:14px!important;bottom:14px!important;padding:8px!important}

  /* Canal and process exhibits: the interactive exhibit owns the space, not a large text panel. */
  #shell #stage .scene[data-id="14"] .visual{height:min(78vh,760px)!important;min-height:430px!important}
  #shell #stage .scene[data-id="14"] .copy p{max-width:32em!important}
  #shell #stage .scene[data-id="15"] .mx20-model,#shell #stage .scene[data-id="16"] .mx20-model{left:0!important;top:13%!important;width:76%!important;height:65%!important}
  #shell #stage .scene[data-id="15"] .mx20-notes,#shell #stage .scene[data-id="16"] .mx20-notes{top:24%!important;right:3%!important;width:21%!important;padding:0 0 0 8px!important}
  #shell #stage .scene[data-id="15"] .mx20-notes h2,#shell #stage .scene[data-id="16"] .mx20-notes h2{font-size:19px!important;line-height:1.4!important;margin-bottom:8px!important}
  #shell #stage .scene[data-id="15"] .mx20-notes p,#shell #stage .scene[data-id="16"] .mx20-notes p{font-size:11px!important;line-height:1.5!important}
  #shell #stage .scene[data-id="15"] .mx20-notes .mx20-source,#shell #stage .scene[data-id="16"] .mx20-notes .mx20-source{display:none!important}
}

/* Phone portrait: preserve a readable vertical sequence, with the model first after the brief introduction. */
@media (max-width:850px) and (orientation:portrait){
  #shell #stage .scene[data-id="5"],#shell #stage .scene[data-id="6"],
  #shell #stage .scene[data-id="9"],#shell #stage .scene[data-id="10"],
  #shell #stage .scene[data-id="11"],#shell #stage .scene[data-id="12"],
  #shell #stage .scene[data-id="13"],#shell #stage .scene[data-id="14"],
  #shell #stage .scene[data-id="15"],#shell #stage .scene[data-id="16"],
  #shell #stage .scene[data-id="17"]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:12px!important;padding-left:6vw!important;padding-right:6vw!important}
  #shell #stage .scene[data-id="5"] .copy h1,#shell #stage .scene[data-id="6"] .copy h1,
  #shell #stage .scene[data-id="9"] .copy h1,#shell #stage .scene[data-id="10"] .copy h1,
  #shell #stage .scene[data-id="11"] .copy h1,#shell #stage .scene[data-id="12"] .copy h1,
  #shell #stage .scene[data-id="13"] .copy h1,#shell #stage .scene[data-id="14"] .copy h1,
  #shell #stage .scene[data-id="15"] .copy h1,#shell #stage .scene[data-id="16"] .copy h1,
  #shell #stage .scene[data-id="17"] .copy h1{font-size:clamp(30px,8vw,48px)!important;margin:8px 0!important}
  #shell #stage .scene[data-id="5"] .copy p,#shell #stage .scene[data-id="6"] .copy p,
  #shell #stage .scene[data-id="9"] .copy p,#shell #stage .scene[data-id="10"] .copy p,
  #shell #stage .scene[data-id="11"] .copy p,#shell #stage .scene[data-id="12"] .copy p,
  #shell #stage .scene[data-id="13"] .copy p,#shell #stage .scene[data-id="14"] .copy p,
  #shell #stage .scene[data-id="15"] .copy p,#shell #stage .scene[data-id="16"] .copy p,
  #shell #stage .scene[data-id="17"] .copy p{font-size:13px!important;line-height:1.65!important}
  #shell #stage .scene[data-id="9"] .visual,#shell #stage .scene[data-id="10"] .visual{height:auto!important;min-height:0!important;overflow:visible!important}
  #shell #stage .scene[data-id="9"] .suspension-stage,#shell #stage .scene[data-id="10"] .suspension-stage{height:auto!important;min-height:0!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(270px,42vh) auto!important;gap:12px!important;padding:0 0 72px!important}
  #shell #stage .scene[data-id="9"] .suspension-hero,#shell #stage .scene[data-id="10"] .suspension-hero{height:100%!important;min-height:270px!important}
  #shell #stage .scene[data-id="9"] .suspension-side,#shell #stage .scene[data-id="10"] .suspension-side{overflow:visible!important}
  #shell #stage .scene[data-id="13"] .visual{height:54vh!important;min-height:300px!important}
  #shell #stage .scene[data-id="13"] .tower-caption span,#shell #stage .scene[data-id="13"] .tower-credit,#shell #stage .scene[data-id="13"] .v7-tower-levels,#shell #stage .scene[data-id="13"] .v7-tower-insight{display:none!important}
  #shell #stage .scene[data-id="14"] .visual{height:58vh!important;min-height:320px!important}
  #shell #stage .scene[data-id="15"] .visual,#shell #stage .scene[data-id="16"] .visual{height:62vh!important;min-height:340px!important}
  #shell #stage .scene[data-id="15"] .mx20-model,#shell #stage .scene[data-id="16"] .mx20-model{left:0!important;top:10%!important;width:100%!important;height:59%!important}
  #shell #stage .scene[data-id="15"] .mx20-notes,#shell #stage .scene[data-id="16"] .mx20-notes{top:auto!important;right:5%!important;bottom:19%!important;width:43%!important}
  #shell #stage .scene[data-id="15"] .mx20-notes .mx20-source,#shell #stage .scene[data-id="16"] .mx20-notes .mx20-source{display:none!important}
}

/* Phone landscape: model gets the wide lane; text is deliberately short and controls stay reachable. */
@media (max-width:900px) and (orientation:landscape){
  #shell #stage .scene[data-id="5"],#shell #stage .scene[data-id="6"],
  #shell #stage .scene[data-id="9"],#shell #stage .scene[data-id="10"],
  #shell #stage .scene[data-id="11"],#shell #stage .scene[data-id="12"],
  #shell #stage .scene[data-id="13"],#shell #stage .scene[data-id="14"],
  #shell #stage .scene[data-id="15"],#shell #stage .scene[data-id="16"],
  #shell #stage .scene[data-id="17"]{grid-template-columns:minmax(0,28%) minmax(0,1fr)!important;grid-template-rows:1fr!important;padding:44px 4vw 48px!important;gap:2vw!important;overflow:hidden!important}
  #shell #stage .scene[data-id="5"] .copy,#shell #stage .scene[data-id="6"] .copy,
  #shell #stage .scene[data-id="9"] .copy,#shell #stage .scene[data-id="10"] .copy,
  #shell #stage .scene[data-id="11"] .copy,#shell #stage .scene[data-id="12"] .copy,
  #shell #stage .scene[data-id="13"] .copy,#shell #stage .scene[data-id="14"] .copy,
  #shell #stage .scene[data-id="15"] .copy,#shell #stage .scene[data-id="16"] .copy,
  #shell #stage .scene[data-id="17"] .copy{max-height:calc(100dvh - 102px)!important;overflow:auto!important;padding:0 6px 0 0!important}
  #shell #stage .scene[data-id="5"] .visual,#shell #stage .scene[data-id="6"] .visual,
  #shell #stage .scene[data-id="9"] .visual,#shell #stage .scene[data-id="10"] .visual,
  #shell #stage .scene[data-id="11"] .visual,#shell #stage .scene[data-id="12"] .visual,
  #shell #stage .scene[data-id="13"] .visual,#shell #stage .scene[data-id="14"] .visual,
  #shell #stage .scene[data-id="15"] .visual,#shell #stage .scene[data-id="16"] .visual,
  #shell #stage .scene[data-id="17"] .visual{height:calc(100dvh - 94px)!important;min-height:0!important;overflow:hidden!important}
  #shell #stage .scene[data-id="9"] .suspension-stage,#shell #stage .scene[data-id="10"] .suspension-stage{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;grid-template-rows:1fr!important;min-height:0!important;height:100%!important;padding:0 0 48px!important;gap:7px!important}
  #shell #stage .scene[data-id="9"] .suspension-hero,#shell #stage .scene[data-id="10"] .suspension-hero{min-height:0!important;height:100%!important}
  #shell #stage .scene[data-id="9"] .suspension-side,#shell #stage .scene[data-id="10"] .suspension-side{padding:0!important;gap:4px!important;overflow:auto!important}
  #shell #stage .scene[data-id="9"] .suspension-side h3,#shell #stage .scene[data-id="10"] .suspension-side h3{font-size:14px!important}
  #shell #stage .scene[data-id="9"] .principle-card,#shell #stage .scene[data-id="10"] .principle-card{padding:4px 5px!important;grid-template-columns:20px 1fr!important;gap:4px!important}
  #shell #stage .scene[data-id="9"] .principle-num,#shell #stage .scene[data-id="10"] .principle-num{width:18px!important;height:18px!important;font-size:10px!important}
  #shell #stage .scene[data-id="9"] .principle-copy b,#shell #stage .scene[data-id="10"] .principle-copy b{font-size:9px!important}
  #shell #stage .scene[data-id="9"] .principle-copy span,#shell #stage .scene[data-id="10"] .principle-copy span{font-size:8px!important;line-height:1.3!important}
  #shell #stage .scene[data-id="13"] .tower-controls{left:5px!important;right:5px!important;bottom:5px!important;padding:4px!important;gap:3px!important}
  #shell #stage .scene[data-id="13"] .tower-controls button{font-size:8px!important;padding:4px 5px!important}
  #shell #stage .scene[data-id="14"] .canal-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #shell #stage .scene[data-id="15"] .mx20-model,#shell #stage .scene[data-id="16"] .mx20-model{left:0!important;top:7%!important;width:76%!important;height:65%!important}
  #shell #stage .scene[data-id="15"] .mx20-notes,#shell #stage .scene[data-id="16"] .mx20-notes{top:16%!important;right:1%!important;width:23%!important}
  #shell .bottomnav{left:4vw!important;right:4vw!important;bottom:4px!important;min-height:30px!important}
  #shell .bottomnav .bookmark-nav--next{min-width:105px!important;padding:4px 8px!important}
}