/* The existing Lab remains the experience; these are its portfolio arrival and reader. */
.portfolio-lab #lab>header{flex-wrap:wrap;background:linear-gradient(#07111afa 72%,#07111a00);padding-bottom:22px;gap:12px}
#portfolio-nav{display:flex;gap:24px;width:100%;font-size:13px}#portfolio-nav a{text-decoration:none;color:#e9d9b8;border-bottom:1px solid #b7a06b66;padding:4px 0}
.portfolio-lab #arrival{left:5%;bottom:12%;max-width:570px;width:47%;padding:28px 32px;background:linear-gradient(110deg,#07111af9,#07111adb);max-height:calc(100dvh - 210px);overflow:auto}
.portfolio-lab #arrival h1{font-size:clamp(34px,4.2vw,60px);letter-spacing:-.035em;max-width:440px;margin:18px 0}.portfolio-lead{font:22px/1.4 Georgia,serif;color:#f5e4bd;margin:0 0 18px}.portfolio-intro{font-size:15px;line-height:1.7;color:#e0e3dc;margin-bottom:23px}
.portfolio-lab #arrival button{margin:0 8px 10px 0;font-size:13px}.portfolio-lab #arrival .small{line-height:1.6}.portfolio-lab #lab>footer{background:linear-gradient(transparent,#07111af5 30%)}
.portfolio-lab #arrival{padding:22px 28px;scrollbar-width:thin}.portfolio-lab #arrival h1{margin:12px 0}.portfolio-intro{font-size:14px;line-height:1.6;margin:14px 0 20px}.portfolio-lab #arrival .small{margin:5px 0}
#portfolio-reader{position:fixed;inset:3vh 2vw 3vh auto;width:min(1120px,94vw);height:94dvh;max-width:none;max-height:none;margin:0;padding:0;border:1px solid #a18f69;border-radius:7px;box-shadow:0 20px 90px #000b;background:#10212c;color:#f4ebd7;overflow:hidden}
#portfolio-reader::backdrop{background:#03090dc4;backdrop-filter:blur(3px)}.reader-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 17px;height:60px;gap:15px;font-size:12px}.reader-bar button{font-size:12px}#portfolio-reader iframe{width:100%;height:calc(100% - 60px);border:0;background:#f4f1e8}.portfolio-reading{overflow:hidden}
@media(max-width:700px){.portfolio-lab #lab>header{padding:12px;gap:10px}.portfolio-lab #lab>header small{font-size:8px}.portfolio-lab #lab>header>div{gap:4px}.portfolio-lab #lab>header button{font-size:10px;padding:7px}#portfolio-nav{gap:15px;font-size:11px;justify-content:space-between}#portfolio-nav a{padding:3px 0}.portfolio-lab #arrival{width:auto;left:16px;right:16px;bottom:76px;padding:20px;max-height:calc(100dvh - 205px)}.portfolio-lab #arrival h1{font-size:40px;margin:13px 0}.portfolio-lead{font-size:20px}.portfolio-intro{font-size:14px;line-height:1.6}.portfolio-lab #arrival .small{font-size:10px}#portfolio-reader{inset:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px)}.reader-bar{padding:8px 10px}.reader-bar>span{font-size:10px}.portfolio-lab #oca-owner-status{max-width:125px;font-size:9px}}
@media(max-height:700px) and (min-width:701px){.portfolio-lab #arrival{bottom:78px;padding:20px 25px;max-height:calc(100dvh - 190px)}.portfolio-lab #arrival h1{font-size:40px;margin:10px 0}.portfolio-lead{font-size:20px}.portfolio-intro{font-size:13px;margin:12px 0}}
/* On very narrow phones the brand and controls need an extra header row. */
@media(max-width:360px){.portfolio-lab #arrival{max-height:calc(100dvh - 250px)}#portfolio-nav{gap:10px}.portfolio-lab #place-menu{top:155px;max-height:calc(100dvh - 230px);overflow:auto}}
#portfolio-mobile-explore,#portfolio-mobile-collection{display:none}
/* A phone is a scrolling visit, not a reduced desktop viewport. The illustration
   remains the Lab; its touch navigation and real collection are at screen scale. */
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
  body.portfolio-lab{height:auto;min-height:100dvh}
  body.portfolio-lab:has(dialog[open]){overflow:hidden}
  .portfolio-lab #lab{height:auto;min-height:100dvh;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
  .portfolio-lab #lab>header{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:#07111a;grid-row:1;grid-column:1/-1}
  .portfolio-lab #lab>header>a{font-size:16px;min-width:0}.portfolio-lab #lab>header small{font-size:7px;letter-spacing:.08em;max-width:185px}
  .portfolio-lab #lab>header button{min-height:44px;padding:8px;font-size:11px}
  #portfolio-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:11px;text-align:center}
  #portfolio-nav a{min-height:44px;display:flex;align-items:center;justify-content:center;padding:6px 0}
  .portfolio-lab #viewport{position:relative;inset:auto;grid-row:2;width:100%;height:auto;aspect-ratio:1672/941}
  .portfolio-lab #arrival{position:relative;inset:auto;grid-row:3;width:auto;max-width:none;max-height:none;overflow:visible;margin:0;padding:24px max(24px,env(safe-area-inset-left));border:0;box-shadow:none;background:#0b1720;display:flex;flex-wrap:wrap;gap:0 8px}
  .portfolio-lab #arrival>p,.portfolio-lab #arrival>h1{flex-basis:100%}
  .portfolio-lab #arrival .eyebrow{order:0}.portfolio-lab #arrival h1{order:1;font-size:clamp(34px,8vw,42px);margin:8px 0 16px;max-width:none}
  .portfolio-lab #arrival .portfolio-lead{order:2;font-size:21px;line-height:1.45}
  .portfolio-lab #arrival button{order:3;min-height:48px;margin:0 0 10px;padding:12px;font-size:13px;flex:1 1 auto}
  .portfolio-lab #arrival .portfolio-intro{order:4;font-size:15px;line-height:1.7;margin:14px 0}
  .portfolio-lab #arrival .small{order:5;font-size:11px;line-height:1.7}
  .portfolio-lab:not(.entered) #lab>footer{display:none}
  .portfolio-lab.entered #portfolio-mobile-explore{display:block;grid-row:3;padding:22px max(16px,env(safe-area-inset-left));background:#0b1720}
  #portfolio-mobile-explore h2{font-size:27px;margin:0 0 16px}
  #portfolio-mobile-explore nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #portfolio-mobile-explore a{display:flex;flex-direction:column;justify-content:center;gap:6px;text-decoration:none;padding:14px 12px;border:1px solid #53625e;border-radius:5px;min-height:88px;background:#13252d}
  #portfolio-mobile-explore strong{font-size:15px;line-height:1.3;font-weight:500;color:#f3dfb8}
  #portfolio-mobile-explore a span{font-size:11px;line-height:1.45;color:#bccdca}
  .mobile-lab-tools{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.mobile-lab-tools button{min-height:48px;font-size:13px;flex:1;padding:10px}
  .portfolio-lab #lab>footer{position:relative;inset:auto;grid-column:1/-1;grid-row:5;min-height:56px;padding:8px 16px max(8px,env(safe-area-inset-bottom));background:#07111a}
  .portfolio-lab #lab>footer #orientation,.portfolio-lab #oca-owner-status,.portfolio-lab #replay,.portfolio-lab #back kbd{display:none}
  .portfolio-lab #back{min-height:44px;width:100%;font-size:13px}
  .portfolio-lab #place-menu{position:absolute;top:100px;right:12px;left:12px;max-height:calc(100dvh - 116px);overflow:auto;grid-template-columns:1fr 1fr}
  .portfolio-lab #place-menu button{min-height:48px;font-size:13px;padding:10px}
  .portfolio-lab #conversation,.portfolio-lab #observation,.portfolio-lab #oca-controls{position:relative;inset:auto;transform:none;grid-row:3;grid-column:1/-1;width:auto;margin:0 12px;max-height:none;overflow:visible;padding:20px}
  .portfolio-lab #oca-root{display:contents}
  .portfolio-lab #responses button{min-height:44px}
  .portfolio-lab #observation-link{display:inline-flex;align-items:center;min-height:44px}
  .portfolio-lab.focused #portfolio-mobile-explore{grid-row:4}
  .portfolio-lab[data-portfolio-station=rge] #viewport{height:120px;aspect-ratio:auto}
  .portfolio-lab[data-portfolio-station=rge] #portfolio-mobile-collection{display:block;grid-row:3;height:440px;min-width:0;background:#091923}
  .portfolio-lab[data-portfolio-station=rge] #portfolio-mobile-explore{display:none}
  #portfolio-mobile-collection>div{width:100%;height:100%}
  #portfolio-mobile-collection .reality-orbit-arrow{min-width:44px}
  #portfolio-mobile-collection .reality-engine-controls summary{min-height:44px;padding:12px;font-size:12px}
  #portfolio-mobile-collection .reality-engine-readout strong{font-size:24px}
  #portfolio-mobile-collection .reality-enter{font-size:14px;min-height:48px}
  .portfolio-lab .reality-workspace{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0}
  .portfolio-lab .reality-workspace>header{position:relative;inset:auto;min-height:56px;padding:6px 10px;gap:10px;flex-wrap:wrap}
  .portfolio-lab .reality-workspace>header button{min-height:44px;font-size:12px}
  .portfolio-lab .reality-workspace>header strong{font-size:14px}
  .portfolio-lab .reality-workspace>header a{font-size:11px}
  .portfolio-lab #portfolio-reader{inset:0;width:100%;height:100dvh;border:0;border-radius:0}
  .reader-bar{padding:6px 12px;height:56px}.reader-bar button{min-height:44px;padding:8px 12px}
  #portfolio-reader iframe{height:calc(100% - 56px)}
  .portfolio-lab #studio-monitor.expanded{position:fixed;inset:0;border:0;border-radius:0;height:100dvh}
  .portfolio-lab.studio-open #portfolio-mobile-explore{visibility:hidden;pointer-events:none}
}
/* The existing engine requires 240px of reading height after its chrome.
   Keep the direct, full-document routes available on unusually short screens. */
@media(max-height:339px) and (max-width:1000px){.portfolio-lab.entered[data-portfolio-station=rge] #portfolio-mobile-explore{display:block;grid-row:4;grid-column:1/-1}}
@media(max-height:500px) and (min-width:500px) and (max-width:1000px){
  .portfolio-lab #lab{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .portfolio-lab #viewport{grid-column:1;grid-row:2;align-self:start}
  .portfolio-lab #arrival,.portfolio-lab.entered #portfolio-mobile-explore{grid-column:2;grid-row:2}
  .portfolio-lab #arrival{padding:20px 24px}.portfolio-lab #arrival h1{font-size:34px}
  .portfolio-lab #arrival .eyebrow{display:none}
  .portfolio-lab[data-portfolio-station=rge] #viewport{height:auto;aspect-ratio:1672/941}
  .portfolio-lab[data-portfolio-station=rge] #portfolio-mobile-collection{grid-row:2;grid-column:2}
}
@media(max-height:500px) and (min-width:800px) and (max-width:1000px){
  .portfolio-lab #lab>header{grid-template-columns:minmax(200px,1fr) auto;gap:4px 12px}
  #portfolio-nav{grid-row:1;grid-column:2;margin-right:176px;width:auto;gap:12px;min-width:310px}
  .portfolio-lab #lab>header>div{grid-row:1;grid-column:2;justify-self:end}
}
.reader-bar>div,.studio-monitor-bar>div{display:flex;gap:8px;align-items:center}
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
 .reader-bar>span,.studio-monitor-bar>span{display:none}
 .reader-bar>div,.studio-monitor-bar>div{width:100%;justify-content:space-between;gap:6px}
 .reader-bar button,.studio-monitor-bar button{font-size:12px;padding:8px;min-height:44px}
}

.portfolio-lab.studio-open{overflow:hidden}