/* Replaceable provisional tokens. Exact rollback is the independent preimage;
   changing this palette does not change the physical journey. */
:root{--cinema-black:#000;--cinema-dark:#111;--cinema-paper:#fff;--cinema-orange:#ff5500;--cinema-blue:#003ce4;--cinema-deep-blue:#0016cb;--gold:var(--cinema-orange);--ink:#fff;--muted:#bcc2cb;--line:#ffffff30;background:var(--cinema-black);font-family:Arial,Helvetica,sans-serif}
#experience{background:var(--cinema-black)}
header{height:88px;border-color:#ffffff26;z-index:6}.brand{letter-spacing:-1.3px;font-size:26px}.brand>span:last-child{color:inherit}.brand-icon{color:var(--cinema-orange)}.brand-line{letter-spacing:1.5px;color:inherit;opacity:.65}.preview-tag{border-color:currentColor;color:inherit;opacity:.65;font-size:8px}
body[data-scene-tone=light]{--ink:#111;--muted:#4b5157;--line:#1113;color:var(--ink)}
body[data-scene-tone=light] header{border-color:#1112}
body[data-scene-tone=light] .eyebrow>span:first-child{color:#a63400}
body[data-scene-tone=light] #experience{background:var(--cinema-paper)}
#scene:after,body[data-hero=true] #scene:after,body:has(#stage-8[aria-current=step]) #scene:after{background:none;pointer-events:none}
body[data-scene-tone=light] #scene:after{background:linear-gradient(#fff 0,rgba(255,255,255,.96) 6.25rem,rgba(255,255,255,.86) 11.5rem,transparent 15.5rem)}
#hero{left:6%;top:26%;width:48%;display:block;text-align:left;max-width:800px}
.hero-kicker{font:600 11px/1.4 'Courier New',monospace;letter-spacing:.17em;color:#ff7737;margin:0 0 24px}
#hero-title{font-size:clamp(58px,6.05vw,116px);font-weight:800;line-height:.93;letter-spacing:-.065em;max-width:none;margin:0 0 30px;color:#fff}
#hero-title br{display:block}.hero-copy{margin:0 0 28px;max-width:320px;font-size:14px;line-height:1.55;color:#bdc1ca}.hero-copy br{display:block}
.hero-actions{justify-content:flex-start;gap:10px}.hero-actions button{min-height:48px;padding:14px 22px;font-size:11px;border:1px solid #fff5;border-radius:100px;background:#0005;color:#fff}
.hero-actions #hero-enter{background:#fff;color:#111;border-color:#fff;font-weight:700;gap:20px}.hero-actions button:hover{border-color:#ff5500}
.atlas-picker{justify-content:flex-start;margin-top:24px;font-size:10px;color:#aeb4be;gap:12px}.atlas-picker select{background:#0d111a;color:white;border:1px solid #ffffff40;border-radius:0;min-height:40px;max-width:230px;padding:8px 10px}
.hero-note{font:8px/1.4 'Courier New',monospace;color:#858b96;margin-top:10px}.hero-note a{text-decoration:underline}
.hero-actions button:focus-visible,.atlas-picker select:focus-visible{outline:2px solid #ff7737;outline-offset:5px}
/* Editorial top strip leaves the mechanical work in the middle of the viewport. */
body #experience .narrative{left:6%;top:114px;width:88%;max-width:none;display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.stage-window{max-width:950px}.eyebrow{font:600 10px/1.3 'Courier New',monospace;letter-spacing:.14em;color:var(--ink);gap:16px}.eyebrow>span:first-child{color:var(--cinema-orange);border-color:var(--cinema-orange)}
body #experience .narrative h1{font-size:clamp(28px,3vw,48px);line-height:1;letter-spacing:-.045em;white-space:normal;margin:12px 0 10px;color:var(--ink)}
.narrative h1 br{display:none}.narrative h1 em{color:inherit}.narrative h1 em:before{content:' '}
#stage-caption{font-size:12px;line-height:1.5;color:var(--muted);max-width:640px}
body #experience .narrative-actions{position:static;flex:none;margin:28px 0 0;display:flex;gap:8px}
.narrative-actions button{min-height:44px;border-color:var(--line);background:#111;color:white;font-size:10px;padding:12px 18px}.narrative-actions #play{background:var(--cinema-orange);color:#111;border-color:var(--cinema-orange)}
body .journey-controls{left:6%;right:6%;bottom:0;padding:14px 0 12px;border-top:1px solid var(--line);background:none;width:auto}
body #stages{position:relative;left:auto;top:auto;bottom:auto;transform:none;width:auto;display:grid;grid-template-columns:repeat(9,1fr);gap:8px;overflow:visible;padding:0}
body #stages:before,body #stages:after{display:none}body .stage{flex-direction:row;gap:8px;align-items:center;min-height:44px;width:auto;color:var(--muted)}body .stage .number{width:29px;height:29px;flex:none;background:transparent;color:inherit;border:1px solid var(--line);box-shadow:none}body .stage .label{display:block;font:10px/1.2 Arial;letter-spacing:0}body .stage[aria-current=step]{color:var(--ink)}body .stage[aria-current=step] .number{background:var(--cinema-orange);color:#111;border-color:var(--cinema-orange)}
.control-heading{color:var(--muted);margin-bottom:6px;font:8px/1.4 'Courier New',monospace}.control-heading>span:first-child{color:var(--muted)}
.transport{margin-top:6px}.transport button{min-height:32px;background:transparent;color:var(--ink);border-color:var(--line)}.transport label,.transport>span{color:var(--muted)}
body #experience .record{left:6%;right:auto;bottom:148px;width:330px;min-width:0;max-width:none;border:1px solid #ffffff36;background:#111e;color:#fff;backdrop-filter:none;border-radius:0;box-shadow:none}
.record-top{font-size:9px;padding:10px 12px}.record summary{padding:10px 12px}.record-body{max-height:220px;overflow:auto}.record-body>p:first-child,.fictional{color:#ff8a51}.live-dot{background:#ff7737;box-shadow:none}
body #experience .record:has(details[open]){left:6%;right:auto;top:auto;bottom:148px;width:350px;max-height:340px}.record:has(details[open]) .record-body{max-height:230px;background:#111}
.scene-caption{right:6%;bottom:150px;color:var(--muted)}.scene-caption strong{color:var(--ink);font:12px/1.4 'Courier New',monospace;letter-spacing:.15em}
@media(min-width:901px){
 body:has(#stage-8[aria-current=step]) #experience .record{left:6%;bottom:148px;width:330px}
 body:has(#stage-8[aria-current=step]) #experience .narrative{left:6%;width:88%;top:114px}
 body:has(#stage-8[aria-current=step]) #experience .stage-window{max-width:950px}
 body:has(#stage-8[aria-current=step]) #experience .narrative h1{font-size:clamp(28px,3vw,48px);white-space:normal}
 body:has(#stage-8[aria-current=step]) #experience #stage-caption{max-width:640px}
}
@media(min-width:901px) and (max-height:760px){#hero{top:23%}#hero-title{font-size:clamp(52px,5.5vw,82px);margin-bottom:20px}.hero-kicker{margin-bottom:15px}.hero-copy{display:block;font-size:12px;margin-bottom:18px}.atlas-picker{margin-top:15px}.hero-note{margin-top:7px}body #experience .narrative{top:95px}body #experience .narrative h1{font-size:30px}#stage-caption{max-width:590px}body #experience .record{bottom:132px}.scene-caption{bottom:136px}}
@media(max-width:900px){
 body #experience #stages{height:48px;right:auto;border-radius:0;background:transparent;border:0;overflow-y:hidden}
 body[data-scene-tone=light] #scene:after{background:none}
 header{height:66px;left:5%;right:5%}.brand{font-size:22px}.preview-tag{font-size:7px}.brand-line{display:none}
 #hero{left:6%;top:53%;width:88%;max-width:none}#hero-title{font-size:clamp(40px,7.5vw,66px);line-height:.95;margin:0 0 16px}.hero-kicker{font-size:9px;margin:0 0 12px}.hero-copy{font-size:12px;max-width:350px;margin:0 0 16px}.hero-copy br{display:none}.hero-actions button{min-height:44px;font-size:10px;padding:12px 16px}.atlas-picker{margin-top:14px;font-size:9px}.atlas-picker select{min-height:36px;max-width:205px}.hero-note{font-size:7px}
 body #experience .narrative{top:48%;left:5%;width:90%;display:block}body #experience .narrative h1{font-size:32px;line-height:1.05;margin:9px 0}#stage-caption{font-size:11px;line-height:1.5}body #experience .narrative-actions{margin-top:12px}.narrative-actions button{min-height:44px;padding:11px 16px}
 body .journey-controls{left:5%;right:5%;padding:10px 0 8px}body #stages{display:flex;overflow-x:auto;scrollbar-width:none;gap:1px}body .stage{flex:0 0 44px;min-height:44px;justify-content:center}body .stage .label{display:none}.transport button{min-width:44px;min-height:38px}.transport{gap:10px}.control-heading{font-size:7px}
 body #experience .record{left:5%;bottom:134px;width:90%;max-width:none}.record-top{font-size:8px;padding:8px 10px}.record summary{padding:9px 10px;font-size:10px}body #experience .record:has(details[open]){left:5%;width:90%;bottom:134px;top:52%;max-height:none;z-index:7}.record:has(details[open]) .record-body{max-height:180px}.scene-caption{top:82px;right:5%;bottom:auto;font-size:7px;gap:3px}.scene-caption strong{font-size:10px}
}
@media(max-width:600px){
 body #experience .narrative{top:39.5%}body #experience .narrative h1{font-size:clamp(25px,7.8vw,32px)}.eyebrow{font-size:8px;letter-spacing:.05em}.narrative h1 br{display:none}#stage-caption{font-size:11px;display:block}.stage-window{max-width:none}
 #hero{top:51%}#hero-title{font-size:clamp(38px,10.5vw,48px)}#hero-title br{display:block}.hero-copy{font-size:11px;max-width:300px}.hero-kicker{margin-bottom:10px}.atlas-picker label{font-size:9px}.hero-actions{gap:7px}.hero-actions button{padding:10px 13px}.atlas-picker{gap:9px}
 body #experience .narrative-actions{margin-top:10px}.scene-caption #attachment{display:none}.transport label{max-width:55px}
}
@media(max-width:600px) and (max-height:760px){#hero{top:48%}#hero-title{font-size:36px;margin-bottom:12px}.hero-copy{font-size:10px;margin-bottom:12px}.hero-kicker{font-size:8px;margin-bottom:8px}.atlas-picker{margin-top:10px}.hero-note{font-size:6px;margin-top:7px}body #experience .narrative{top:34%}body #experience .narrative h1{font-size:25px}#stage-caption{font-size:10px}body #experience .narrative-actions{margin-top:8px}.narrative-actions button{padding:9px 14px}.record-top{font-size:7px}}
/* Keep editorial copy and controls legible against the receiving-bay roof. */
@media(min-width:901px){body[data-scene-tone=light]:has(#stage-8[aria-current=step]) #scene:after{background:linear-gradient(#fff 0,rgba(255,255,255,.96) 100px,rgba(255,255,255,.9) 205px,transparent 285px)}}
body[data-scene-tone=light] .journey-controls{background:linear-gradient(transparent,#fffffff2 18px);box-shadow:0 16px 0 16px #fffffff2}

/* Cinematic editorial finish — original DOM, isolated provisional theme. */
body[data-hero=true] #experience{background:radial-gradient(ellipse at 86% 80%,#001647 0,transparent 46%),radial-gradient(ellipse at 78% 12%,#1b0e08 0,transparent 45%),#000}
#hero-title{letter-spacing:-.055em;text-wrap:balance}
.hero-kicker{display:flex;align-items:center;gap:14px}.hero-kicker:before{content:'';width:30px;height:1px;background:currentColor}
.hero-actions #hero-enter{box-shadow:inset 0 1px 0 #fff,0 2px 14px #0003}
.hero-actions button{transition:background .2s,color .2s,border-color .2s}
.hero-actions #hero-enter:hover{background:#ff5500;color:#fff;border-color:#ff5500}
.atlas-picker select{border-radius:4px}
body:not([data-hero=true]) .journey-controls{background:#111;color:#fff;border:0;padding:14px 16px 10px;box-shadow:none}
body:not([data-hero=true]) .journey-controls .control-heading,
body:not([data-hero=true]) .journey-controls .control-heading>span,
body:not([data-hero=true]) .journey-controls .transport label,
body:not([data-hero=true]) .journey-controls .transport>span{color:#b5b9bf}
body:not([data-hero=true]) .journey-controls .stage,
body:not([data-hero=true]) .journey-controls .stage[aria-current=step],
body:not([data-hero=true]) .journey-controls .transport button{color:#fff}
body:not([data-hero=true]) .journey-controls .stage .number,
body:not([data-hero=true]) .journey-controls .transport button{border-color:#fff4}
body:not([data-hero=true]) .journey-controls .stage[aria-current=step] .number{color:#fff;border-color:#ff5500}
body #experience .record{border-top:2px solid #ff5500}
body[data-scene-tone=ocean] .narrative{text-shadow:0 2px 16px #00102d70}
body[data-scene-tone=ocean] .scene-caption{color:#dde6f3}
@media(max-width:900px){body:not([data-hero=true]) .journey-controls{left:0;right:0;padding:10px 5% 8px}body .stage .number{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.hero-actions button{transition:none}}

/* B12 phone subject readability. Arrival p4.5–7 retains its exact viewport.
   Fixed Node09 eye/target/FOV and all handling paths remain unchanged. */
@media(max-width:600px){
 /* Keep the origin/cargo identifier readable over the moving warehouse roof.
    A paint-only backing preserves the scene and text layout dimensions. */
 body[data-scene-tone=light][data-first-freight=true] .scene-caption{background:var(--cinema-paper);box-shadow:0 0 0 4px var(--cinema-paper)}
 body[data-hero=false] #scene{height:calc(35vh + 60px * var(--mobile-scene-space,0))}
 body[data-hero=true] #scene{height:calc(100% - (100% - max(230px,35vh)) * var(--freight-opacity,0) + 60px * var(--mobile-scene-space,0))}
 body #experience .narrative{top:calc(39.5% + 80px * var(--mobile-scene-space,0))}
}
@media(max-width:600px) and (max-height:740px){
 body[data-hero=false] #scene{height:calc(30vh + 60px * var(--mobile-scene-space,0))}
 body[data-hero=true] #scene{height:calc(100% - (100% - max(185px,30vh)) * var(--freight-opacity,0) + 60px * var(--mobile-scene-space,0))}
 body #experience .narrative{top:calc(34% + 80px * var(--mobile-scene-space,0))}
}

/* Keep the geographic credit and country picker readable on narrow screens.
   These paint/type refinements leave the canvas and protected camera rail alone. */
body[data-scene-tone=light] .scene-caption{
 background:rgba(255,255,255,.94);
 box-shadow:0 0 0 .375rem rgba(255,255,255,.94);
}
@media(max-width:900px){
 .hero-note{font:400 .625rem/1.45 Arial,Helvetica,sans-serif;color:#aeb4be;max-width:26rem}
 .atlas-picker{font-size:.6875rem}
 .atlas-picker label{font-size:inherit}
 .atlas-picker select{font-size:.6875rem;min-height:2.5rem}
}

/* Place mobile copy below the existing canvas. Keep chapter opacity transitions,
   but avoid translating content out of its clipping window on narrow layouts. */
@media(max-width:900px){
 .stage-copy{transform:none}
 body #experience .narrative{top:calc(56px + min(460px,max(245px,44vh)) + .75rem)}
}
@media(max-width:600px){
 body #experience .narrative{top:calc(56px + 35vh + 60px * var(--mobile-scene-space,0) + .5rem)}
 body #experience .narrative h1{font-size:1.75rem;margin:.375rem 0}
 body #experience .narrative-actions{margin-top:.5rem}
}
@media(max-width:600px) and (max-height:740px){
 body #experience .narrative{top:calc(56px + 30vh + 60px * var(--mobile-scene-space,0) + .25rem)}
 body #experience .narrative .eyebrow>span:first-child{padding:0}
 body #experience .narrative h1{font-size:1.375rem;line-height:1.05;margin:.25rem 0}
 body #experience #stage-caption{font-size:.625rem;line-height:1.4}
 body #experience .narrative-actions{margin-top:.125rem}
 #customs-status{grid-template-columns:1fr auto;gap:.125rem;padding-bottom:.375rem;align-items:baseline}
 #customs-progress{grid-column:1 / -1}
 body #experience .record:not(:has(details[open])){bottom:8.125rem}
}

/* A readable freight record occupies the existing phone gap; the scene
   rectangle, compact-phone layout and protected camera composition stay fixed. */
@media(min-width:901px){
 body[data-scene-tone=light] #stage-caption{background:rgba(255,255,255,.96);box-shadow:0 0 0 .25rem rgba(255,255,255,.96)}
}
@media(min-width:375px) and (max-width:600px) and (min-height:780px){
 .record-top{font-size:.625rem;padding:.625rem .75rem}
 .record summary{font-size:.75rem;padding:.625rem .75rem}
 .control-heading{font-size:.5625rem}
 .scene-caption{font-size:.5625rem;line-height:1.4}
 .scene-caption strong{font-size:.6875rem;letter-spacing:.08em}
}

/* WEB-R01: a single content-flow panel, not competing absolute-positioned layers.
   The 3D canvas rectangle, cameras, cargo and renderer are deliberately untouched.
   Footer height is intrinsic (also at enlarged text); surplus copy scrolls inside
   this named region instead of underneath the actions or journey navigation. */
.journey-panel{display:contents}
@media(max-width:900px){
 #experience{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
 body #experience #journey-panel{
  grid-row:1;position:relative;z-index:3;display:block;min-width:0;min-height:0;
  margin:calc(56px + min(460px,max(245px,44vh)) + .75rem) 5% .5rem;
  padding:.125rem .25rem .75rem .125rem;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scroll-padding-block:.75rem;touch-action:pan-y;
 }
 #journey-panel:focus-visible{outline:2px solid var(--cinema-orange);outline-offset:-2px}
 body #experience #journey-panel .narrative{
  position:relative;inset:auto;width:100%;max-width:none;margin:0;display:block;pointer-events:auto;
 }
 body #experience #journey-panel .stage-window{overflow:visible}
 body #experience #journey-panel .stage-copy{transform:none}
 body #experience #journey-panel .narrative-actions{
  position:static;inset:auto;display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0;
 }
 body #experience #journey-panel .narrative-actions button{min-height:44px;max-width:100%;white-space:normal}
 body #experience #journey-panel .record,
 body #experience #journey-panel .record:has(details[open]){
  position:relative;inset:auto;display:block;width:100%;min-width:0;max-width:none;
  min-height:0;max-height:none;margin:.75rem 0 0;z-index:auto;overflow:visible;box-shadow:none;
 }
 body #experience #journey-panel #details,
 body #experience #journey-panel #details[open]{display:block;overflow:visible;max-height:none}
 body #experience #journey-panel .record-body{max-height:none;overflow:visible;background:#111}
 body #experience #journey-panel .record-top{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:.5rem}
 body #experience #journey-panel #phase{min-width:0;overflow-wrap:anywhere}
 body #experience #journey-panel .record summary{min-height:44px;align-items:center;gap:.5rem}
 body #experience #journey-panel .record-body dd{min-width:0;overflow-wrap:anywhere}
 body #experience .journey-controls{
  grid-row:2;position:relative;inset:auto;align-self:end;min-width:0;width:100%;margin:0;
 }
}
@media(max-width:600px){
 body #experience #journey-panel{margin-top:calc(56px + max(230px,35vh + 60px * var(--mobile-scene-space,0)) + .5rem)}
}
@media(max-width:600px) and (max-height:740px){
 body #experience #journey-panel{margin-top:calc(56px + max(185px,30vh + 60px * var(--mobile-scene-space,0)) + .25rem)}
}

/* R11 mobile immersion: one continuous full-viewport freight canvas.
   Chapter text and evidence float over it rather than reserving a separate
   white/black page band. This changes no camera, 3D object, shader, timing,
   cargo continuity or navigation state. The content remains accessible as a
   bounded scrolling overlay and the transport has its own anchored strip. */
@media(max-width:900px){
 body #experience #scene{
  inset:0;top:0;bottom:0;width:100%;height:100%;min-height:0;max-height:none;
 }
 body[data-hero="false"] #experience{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto;
 }
 body[data-hero="false"] #experience #scene:after{
  background:linear-gradient(to bottom,
   rgba(2,9,15,.28) 0%,transparent 22%,transparent 45%,
   rgba(2,9,15,.24) 65%,rgba(2,9,15,.74) 100%);
 }
 body[data-hero="false"] #experience #journey-panel{
  --ink:#f6f7f5;--muted:#dee5ea;
  position:relative;grid-row:2;inset:auto;z-index:4;
  display:block;width:auto;min-width:0;height:auto;min-height:0;
  max-height:min(40dvh,22rem);margin:0;
  padding:.75rem 5% .5rem;overflow-x:hidden;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#f5f5f455 transparent;
  overscroll-behavior:contain;touch-action:pan-y;
  color:var(--ink);border:0;box-shadow:none;
  background:linear-gradient(180deg,transparent,rgba(3,12,19,.50) 12%,rgba(3,12,19,.82) 100%);
 }
 body[data-hero="false"] #experience #journey-panel .narrative{
  position:relative;inset:auto;width:100%;max-width:none;margin:0;
  display:block;pointer-events:auto;
 }
 body[data-hero="false"] #experience #journey-panel .eyebrow,
 body[data-hero="false"] #experience #journey-panel .narrative h1{
  color:#fff;text-shadow:0 1px 12px #00101dcc;
 }
 body[data-hero="false"] #experience #journey-panel .eyebrow>span:first-child{
  color:var(--cinema-orange);border-color:var(--cinema-orange);
 }
 body[data-hero="false"] #experience #journey-panel .narrative h1{
  font-size:clamp(1.35rem,5.5vw,2rem);line-height:1.08;
  margin:.35rem 0 .25rem;letter-spacing:-.035em;
 }
 body[data-hero="false"] #experience #journey-panel #stage-caption{
  display:block;color:#e3eaf0;font-size:.75rem;line-height:1.42;
  max-width:40rem;margin:0;text-shadow:0 1px 10px #00101dbb;
 }
 body[data-hero="false"] #experience #journey-panel .narrative-actions{
  position:static;inset:auto;display:flex;flex-wrap:wrap;
  gap:.5rem;margin:.625rem 0 0;
 }
 body[data-hero="false"] #experience #journey-panel .narrative-actions button{
  min-height:44px;max-width:100%;white-space:normal;
 }
 body[data-hero="false"] #experience #journey-panel .record,
 body[data-hero="false"] #experience #journey-panel .record:has(details[open]){
  position:relative;inset:auto;display:block;width:100%;min-width:0;
  min-height:0;max-width:none;max-height:none;margin:.625rem 0 0;
  background:rgba(3,12,19,.48);border:1px solid #eaf0f133;
  border-top:1px solid #ff550088;border-radius:4px;
  box-shadow:none;backdrop-filter:none;overflow:visible;
 }
 body[data-hero="false"] #experience #journey-panel .record:before{display:none}
 body[data-hero="false"] #experience #journey-panel .record-top{
  display:grid;grid-template-columns:8px minmax(0,1fr) auto;
  gap:.5rem;padding:.5rem .75rem;
 }
 body[data-hero="false"] #experience #journey-panel .record summary{
  min-height:44px;align-items:center;padding:.5rem .75rem;
 }
 body[data-hero="false"] #experience #journey-panel .record-body{
  max-height:min(26dvh,15rem);overflow-y:auto;
  background:rgba(3,12,19,.65);
 }
 body[data-hero="false"] #experience .journey-controls{
  position:relative;grid-row:3;inset:auto;z-index:5;
  align-self:end;width:100%;min-width:0;margin:0;
  padding:.5rem 5% calc(.625rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(3,12,19,.78),#08131de8 32%,#08131df5);
  box-shadow:none;border:0;color:#fff;
 }
 body[data-hero="false"] #experience .scene-caption{
  color:#f5f7f7;text-shadow:0 1px 8px #08131d;
 }
 body[data-hero="false"][data-scene-tone="light"] #experience .scene-caption{
  background:rgba(3,12,19,.40);box-shadow:none;
  padding:.25rem .375rem;border-radius:3px;
 }
 body[data-hero="false"] #experience .scene-caption strong{color:#fff}
}
@media(max-width:600px) and (max-height:740px){
 body[data-hero="false"] #experience #journey-panel{
  max-height:38dvh;padding-top:.375rem;padding-bottom:.25rem;
 }
 body[data-hero="false"] #experience #journey-panel .narrative h1{
  font-size:1.25rem;line-height:1.08;
 }
 body[data-hero="false"] #experience #journey-panel #stage-caption{
  font-size:.6875rem;line-height:1.35;
 }
}
@media(max-width:900px) and (orientation:landscape){
 body[data-hero="false"] #experience #journey-panel{
  /* An abs-positioned grid item keeps its grid-area containing block.
     Span rows 1-2 so top is relative to the viewport and bottom meets
     the anchored controls, even when the controls wrap on short screens. */
  grid-row:1 / 3;grid-column:1;
  position:absolute;left:0;right:auto;top:66px;bottom:0;
  width:min(44vw,23rem);max-height:none;
  padding:.375rem .75rem .5rem 3%;
  background:linear-gradient(90deg,rgba(3,12,19,.86),rgba(3,12,19,.60) 80%,transparent);
 }
 body[data-hero="false"] #experience #journey-panel .narrative h1{
  font-size:clamp(1.125rem,2.6vw,1.5rem);
 }
 body[data-hero="false"] #experience #journey-panel #stage-caption{
  font-size:.6875rem;
 }
 body[data-hero="false"] #experience .journey-controls{
  padding-top:.25rem;padding-bottom:calc(.25rem + env(safe-area-inset-bottom,0px));
 }
}

/* R07 receiving-yard frame: preserve V43 desktop UI and hero styling. */
@media(min-width:901px){
 body[data-pair2-desktop="true"][data-scene-tone="light"]:has(#stage-8[aria-current="step"]) #scene:after{
  background:linear-gradient(#fff 0,rgba(255,255,255,.83) 90px,rgba(255,255,255,.35) 180px,transparent 250px);
 }
}