/* Portrait choreography: copy, full-screen scene, then its supporting data.
   Keep these rules separate from the approved desktop composition. */
@media (max-width:700px){
  html{scroll-padding-top:90px}
  .cinematic .header{min-height:72px;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));flex-wrap:nowrap;background:linear-gradient(#030610f5,#030610cc,transparent)}
  .cinematic .header .brand img{width:124px}
  .nav-contact{min-height:44px;padding:10px 16px;font-size:12px}
  body:not(.reading-mode) .world{height:100svh;bottom:auto}
  body:not(.reading-mode) .film-stage{height:100svh}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter]{top:max(96px,calc(env(safe-area-inset-top) + 82px));left:22px;right:22px;text-align:center}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter] h1,
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter] h2{font-size:clamp(30px,8.6vw,42px);line-height:1.06;letter-spacing:-.045em}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter .eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:16px}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter]>p:not(.eyebrow){font-size:13px;line-height:1.55;max-width:35ch;margin:16px auto 0}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter="0"]{top:30%}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter="0"] h1{font-size:clamp(36px,10vw,48px)}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter="6"]{top:25%}
  .film-controls{left:18px;right:18px;bottom:max(10px,env(safe-area-inset-bottom));padding-top:14px}
  .film-control-top{padding-left:46px;min-height:44px}
  .film-hint{font-size:9px;letter-spacing:.03em;max-width:48%}
  .motion-toggle{font-size:10px;padding:8px 10px}
  .film-chapters{top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 44px);left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:0}
  .film-chapters button{width:40px;height:44px}
  .film-chapters button:after{left:17px;top:19px;width:6px;height:6px}
  .film-chapters button:hover:before,.film-chapters button:focus-visible:before{display:none}
  .film-disclaimer{bottom:90px;font-size:9px;line-height:1.4;width:100%;max-width:330px;margin:0}
  .accessibility-launcher{width:44px;height:44px;bottom:max(10px,env(safe-area-inset-bottom));left:12px}
  .accessibility-launcher svg{width:26px;height:26px}
  .scene-caption{display:none}
  .order-book{top:41%;width:calc(100% - 40px);padding:14px 16px}
  .order-book table{font-size:11px}
  .order-book th{font-size:9px}
  .order-book td{padding:6px 3px}
  .book-heading strong{font-size:13px}
  .execution-tape{font-size:9px;padding-bottom:10px}
  .book-status{font-size:9px;line-height:1.5}
  .broker-ledger{left:20px;right:20px;width:auto;bottom:calc(126px + env(safe-area-inset-bottom));padding:12px 14px}
  .ledger-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
  .ledger-grid>div{font-size:9px;line-height:1.3}
  .ledger-grid strong{font-size:16px;margin-top:4px;white-space:nowrap}
  .ledger-grid .residual{grid-column:2 / 4}
  .ledger-note{font-size:9px;line-height:1.4;margin-top:10px}
  .broker-ledger .book-heading span{font-size:8px}
  .model-explainer{left:20px;right:20px;bottom:calc(132px + env(safe-area-inset-bottom));gap:6px}
  .model-explainer div{padding:12px 4px;min-width:0;background:#050b1de6}
  .model-explainer small{font-size:8px;letter-spacing:0}
  .model-explainer strong{font-size:13px;line-height:1.3;margin:10px 0}
  .model-explainer span{display:block;font-size:10px;line-height:1.5}
  .model-explainer i{display:none}
  .portfolio-view{top:auto;bottom:calc(130px + env(safe-area-inset-bottom));left:20px;right:20px;padding:14px}
  .portfolio-title{font-size:8px;line-height:1.5;flex-wrap:wrap}
  .portfolio-metrics{font-size:10px;gap:8px;margin-top:16px}
  .portfolio-metrics strong{font-size:18px}
  .portfolio-view svg{height:65px}
  .portfolio-view p{font-size:9px;line-height:1.5;flex-wrap:wrap;gap:5px 12px}
  .portfolio-note{font-size:10px;line-height:1.5;margin-top:10px}
  .spatial-label span{font-size:9px;margin:10px 0 0 0}
  .ticket-detail{width:145px;margin:0;padding:10px}
  .ticket-detail strong{font-size:12px}.ticket-detail div{font-size:10px;margin-top:6px}
  .ticket-detail small{font-size:8px;margin-top:8px}
  #broker-marker{display:none}
  body:has(.film-stage[data-chapter="3"]) #trade-marker{display:none}
  .film-stage[data-chapter="4"] .decision-annotations{display:block}
  .spatial-ready .decision-annotations span,.spatial-ready .decision-annotations span+span{width:140px;margin-left:-70px;font-size:8px;line-height:1.5}
  .spatial-ready .decision-annotations strong{font-size:14px;margin-top:5px}
  .cinematic .research,.cinematic .company{min-height:0;padding-top:90px;padding-bottom:90px}
  .cinematic .section-heading h2,.company-grid h2{font-size:36px}
  .cinematic .contact{min-height:75svh}
  .reading-mode .film-chapter{max-width:100%}
}
@media (max-width:700px) and (max-height:740px){
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter]{top:max(82px,calc(env(safe-area-inset-top) + 68px))}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter] h2{font-size:clamp(28px,7.8vw,34px)}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter .eyebrow{margin-bottom:10px;font-size:8px}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter]>p:not(.eyebrow){font-size:12px;line-height:1.45;margin-top:12px}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter="0"]{top:29%}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter="6"]{top:24%}
  .order-book{top:39%;padding:10px 14px}
  .order-book td{padding:4px 3px}.order-book tr:nth-child(n+6){display:none}
  .broker-ledger{bottom:120px;padding:10px 12px}.ledger-grid{gap:8px}.ledger-grid strong{font-size:14px}
  .broker-ledger .book-heading{margin-bottom:8px}.ledger-note{margin-top:7px}
  .model-explainer{bottom:125px}.model-explainer div{padding:10px 3px}
  .model-explainer strong{font-size:11px}.model-explainer span{font-size:9px}
  .portfolio-view{bottom:123px;padding:11px}.portfolio-view svg{height:38px;margin-top:8px}
  .portfolio-metrics{margin-top:10px;font-size:9px}.portfolio-metrics strong{font-size:16px}
  .portfolio-note{font-size:9px;margin-top:7px}.portfolio-title{font-size:7px}
  .ticket-detail{padding:7px}.ticket-detail small{display:none}
}

@media(max-width:700px){
  body:has(.film-stage[data-chapter="2"]) #trade-marker{left:50%;top:36%;transform:translateX(-50%)!important;margin-left:0!important}
  body:has(.film-stage[data-chapter="2"]) #trade-marker span{margin:0;font-size:9px}
  body:has(.film-stage[data-chapter="2"]) .ticket-detail{width:210px;padding:8px 10px}
  body:has(.film-stage[data-chapter="2"]) .ticket-detail div{display:flex;justify-content:space-between;gap:10px}
  body:has(.film-stage[data-chapter="2"]) .ticket-detail em{margin:0}
  body:has(.film-stage[data-chapter="2"]) .ticket-detail small{display:none}
}
@media(max-width:700px) and (max-height:740px){
  body:has(.film-stage[data-chapter="2"]) #trade-marker{top:40%}
}

/* In a short landscape viewport, give copy and data their own space. */
@media(max-width:1000px) and (max-height:520px) and (orientation:landscape){
  .cinematic .header{height:62px;min-height:62px;padding:8px max(24px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left));background:linear-gradient(#030610f5,transparent)}
  .cinematic .header .brand img{width:115px}.header nav{display:none}.nav-contact{min-height:40px;padding:9px 15px;font-size:11px}
  body:not(.reading-mode) .world{height:100svh;bottom:auto}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter]{top:82px;left:max(24px,env(safe-area-inset-left));right:56%;text-align:left}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter] h1,
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter] h2{font-size:clamp(26px,3.8vw,34px);line-height:1.05}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter .eyebrow{font-size:8px;margin-bottom:12px}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter]>p:not(.eyebrow){font-size:12px;line-height:1.5;margin:14px 0 0;max-width:34ch}
  .film-chapter .button{margin-top:16px;padding:10px 15px}
  .film-controls{left:80px;right:24px;bottom:8px}.film-control-top{padding:0;justify-content:flex-end}.film-hint{display:none}.motion-toggle{font-size:10px;min-height:40px}
  .film-chapters{top:auto;bottom:8px;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:0}.film-chapters button{width:36px;height:40px}.film-chapters button:after{left:15px;top:17px}
  .film-disclaimer{bottom:42px;font-size:8px;left:50%;width:80%;white-space:normal;text-align:center}
  .accessibility-launcher{width:42px;height:42px;bottom:10px;left:max(18px,env(safe-area-inset-left))}
  .scene-caption{display:none}
  .order-book{left:73%;top:74px;width:44%;padding:10px 14px}.order-book table{font-size:10px}.order-book td{padding:3px}.order-book tr:nth-child(n+6){display:none}.book-status{font-size:8px;margin-top:6px}
  .broker-ledger{left:49%;right:20px;top:auto;bottom:72px;width:auto;padding:10px}.ledger-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.ledger-grid>div{font-size:8px}.ledger-grid strong{font-size:12px}.ledger-grid .residual{grid-column:auto;border:0;padding:0}.ledger-note{font-size:8px;margin-top:8px}.book-heading{margin-bottom:8px}.book-heading strong{font-size:12px}
  .model-explainer{left:49%;right:20px;bottom:74px;gap:6px}.model-explainer div{padding:8px 4px}.model-explainer i{display:none}.model-explainer small{font-size:7px}.model-explainer strong{font-size:12px;margin:6px 0}.model-explainer span{font-size:9px}
  .portfolio-view{left:49%;right:20px;top:90px;bottom:auto;padding:12px}.portfolio-title{font-size:7px}.portfolio-metrics{font-size:9px;margin-top:10px}.portfolio-metrics strong{font-size:16px}.portfolio-view svg{height:38px;margin-top:5px}.portfolio-view p{font-size:8px;gap:6px;flex-wrap:wrap}.portfolio-note{font-size:9px;margin-top:7px}
  body:has(.film-stage[data-chapter="2"]) #trade-marker{left:73%;top:24%;margin-left:0!important;transform:translateX(-50%)!important}.ticket-detail{width:160px;padding:6px}.ticket-detail small{display:none}.spatial-label span{font-size:8px}
  .film-stage[data-chapter="4"] .decision-annotations{display:block}.spatial-ready .decision-annotations span,.spatial-ready .decision-annotations span+span{width:150px;margin-left:-75px;font-size:7px}.spatial-ready .decision-annotations strong{font-size:13px}
  .accessibility-dialog{bottom:10px;max-height:calc(100dvh - 20px)}
}

@media(max-width:700px) and (max-height:620px) and (orientation:portrait){
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter] h2{font-size:26px}
  body.cinematic:not(.reading-mode) .film-stage .film-chapter[data-chapter]>p:not(.eyebrow){font-size:11.5px}
  .broker-ledger{bottom:116px;padding:10px 12px}
  /* The two client totals are already stated in the narrative above. */
  .ledger-grid>div:nth-child(-n+2){display:none}
  .ledger-grid .residual{grid-column:auto}.ledger-grid>div{font-size:8px}.ledger-note{font-size:8px}
  .model-explainer{bottom:120px}.model-explainer div{padding:8px 3px}.model-explainer strong{margin:7px 0}
  .portfolio-view{bottom:116px;padding:10px}.portfolio-title strong{display:none}.portfolio-metrics{font-size:8px;margin-top:8px}.portfolio-metrics strong{font-size:14px;margin-top:4px}.portfolio-view svg{height:28px}.portfolio-view p{font-size:8px}.portfolio-note{font-size:8px}
  .order-book{top:40%;padding:10px 12px}.order-book td{padding:3px}.order-book .execution-tape{padding-bottom:6px}
  body:has(.film-stage[data-chapter="2"]) #trade-marker{top:40%}
}