/* The home studio: object positions follow furniture and perspective in one illustration. */
.room-world{width:min(100%,calc((100svh - 85px)*1.5));top:75px}
.room-art{filter:url(#room-ink-render);opacity:1;mix-blend-mode:multiply}
.room-color-art{filter:none;mix-blend-mode:normal;mask-image:none;clip-path:none;opacity:0}
.room-world[data-color] .room-color-art{opacity:1}
.wall-photo{padding:0;border:0;background:transparent;box-shadow:none;clip-path:none;transform-origin:0 0}
.wall-photo img{filter:grayscale(1) sepia(.25) brightness(1.08);opacity:.86}
.wall-photo:hover img,.wall-photo:focus-visible img{filter:none;opacity:1}
.room-evening .wall-photo:hover img,.room-evening .wall-photo:focus-visible img{filter:brightness(.85);opacity:1}
.wall-photo-caption{font-size:11px}
.wall-light-switch{left:65.5%;top:17.8%}
/* The plate follows the room scale while the button retains a usable hit area. */
.wall-light-switch .switch-plate{transform:scale(var(--frame-scale,1))}
.room-object{border-radius:4px}.room-object:hover{background:transparent}
.room-object .object-label{top:85%;box-shadow:2px 2px 0 #705943}
.room-curiosity .object-label{top:110%}
.room-evening .room-art{filter:url(#room-ink-render) grayscale(1) invert(1);mix-blend-mode:screen;opacity:.88}
.room-evening .room-color-art{filter:brightness(.38) saturate(.95);mix-blend-mode:normal;opacity:0}
.room-evening .room-world[data-color] .room-color-art{opacity:1}
.room-evening .wall-photo,.room-evening .wall-photo-graduation{background:transparent;border:0}
.room-evening .room-world:after{background:radial-gradient(ellipse 6% 13% at 10% 27%,#ffe3a339,transparent 85%),radial-gradient(ellipse 9% 17% at 41% 32%,#ffe4a333,transparent 85%),radial-gradient(ellipse 7% 10% at 94% 36%,#ffd89335,transparent 85%),radial-gradient(ellipse 5% 6% at 44% 27%,#f7c66e26,transparent 85%)}
@media(max-width:800px){.room-world{width:1180px;top:60px}.room-experience{height:900px}.room-intro{bottom:24px}}
@media(max-width:540px){.room-world{width:1000px;top:92px}.room-stage{height:760px}.room-experience{height:auto;padding-top:735px}.room-intro{bottom:auto}.wall-photo-caption{font-size:10px}}
.wall-photo-marathon{left:0;top:0;width:88.02667901493702px;height:182.0px;transform:scale(var(--frame-scale,1)) matrix3d(1.3706204089583423,0.3548078660815446,0,0.0013209525915172918,0.0,1.054945054945055,0,0.0,0,0,1,0,212.0,19.0,0,1);}
.wall-photo-travel{left:0;top:0;width:52.39896042178091px;height:152.5px;transform:scale(var(--frame-scale,1)) matrix3d(1.7353595138303715,0.47250213535464813,0,0.001974242905381538,0.0,1.0491803278688525,0,0.0,0,0,1,0,335.0,58.0,0,1);}
.wall-photo-graduation{left:0;top:0;width:82.49723835818361px;height:182.0px;transform:scale(var(--frame-scale,1)) matrix3d(-1.983292591029275,-0.5037205654707022,0,-0.001959049355257957,0.0,0.9120879120879122,0,0.0,0,0,1,0,1417.0,60.0,0,1);}
.room-header{background:var(--room-paper);height:76px}
.room-art{mask-image:linear-gradient(to bottom,transparent,#000 2%,#000 80%,transparent 99%)}
.room-color-art{mask-image:linear-gradient(to bottom,transparent,#000 2%,#000 80%,transparent 99%);mask-size:100% 100%;mask-position:0 0}
@media(max-width:540px){.room-header{height:75px}.room-art{mask-image:linear-gradient(to bottom,transparent,#000 2%,#000 84%,transparent 99%)}}
/* Explicit base stacking prevents filtered artwork disappearing in narrow scrolling viewports. */
.room-art{z-index:0}
.room-guide{z-index:5}
@media(hover:none){.room-object:not(.room-curiosity) .object-label{font:400 14px/1.2 Plex,sans-serif}}


/* Brand marks now share the room’s sparse ink drawing, not separate shaded cutouts. */
.object-esgo .object-label{top:72%}

/* Painted regions are detected from the same source pixels as the ink view. */
.room-color-art{clip-path:none;filter:saturate(1.35)}
.object-running .object-label{top:82%}

.room-world{background:var(--room-paper)}

/* The diploma is the supplied original document, fitted inside the rear-wall frame. */
.degree-frame-art .wall-photo-degree{left:65px;top:82px;width:108px;height:141.0649px;transform:translate(-50%,-50%);pointer-events:auto}
.wall-photo-degree img{object-fit:contain;background:#fff;object-position:center}

/* Enlarge the existing illustrated frame with its own source pixels. */
.degree-frame-art{position:absolute;z-index:3;pointer-events:none;left:0;top:0;width:130px;height:167px;overflow:hidden;background:var(--room-paper);transform-origin:0 0;transform:scale(var(--frame-scale,1)) translate(711px,39px) scale(1.28)}
.degree-frame-art>.degree-frame-image{position:absolute;left:-730px;top:-68px;width:1536px;height:1024px;max-width:none;filter:url(#room-ink-render);mix-blend-mode:multiply}
.room-evening .degree-frame-art>.degree-frame-image{filter:url(#room-ink-render) grayscale(1) invert(1);mix-blend-mode:screen;opacity:.88}

/* Keep the introduction below the illustrated objects at every desktop height. */
@media(min-width:801px){
 .room-experience{height:auto;min-height:0;padding-top:calc(99px + min(55vw, (100svh - 85px)*.825))}
 .room-intro{position:relative;inset:auto;margin:0 4vw;padding-bottom:30px}
}
@media(min-width:541px) and (max-width:800px){
 .room-experience{height:auto;padding-top:735px}
 .room-intro{position:relative;inset:auto;margin:0 24px;padding-bottom:30px}
}
/* Real public login capture inside the existing monitor bezel. */
.room-monitor{position:absolute;left:0;top:0;z-index:4;width:120px;height:160px;transform-origin:0 0;transform:scale(var(--frame-scale,1)) matrix3d(-1.7191712669529067,-0.4453281537517891,0,-0.0016220268520411641,0.4061260478429768,0.7189710693109794,0,0.0003360764669801676,0,0,1,0,1424.0,258.0,0,1);background:#062457;outline-offset:3px;overflow:hidden}
.room-monitor img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1) sepia(.2);opacity:.8;transition:filter .3s,opacity .3s}
.room-monitor:hover img,.room-monitor:focus-visible img,.room-world[data-color="esgo"] .room-monitor img{filter:none;opacity:1}
.room-evening .room-monitor img{filter:grayscale(1) brightness(.55)}
.room-evening .room-monitor:hover img,.room-evening .room-monitor:focus-visible img,.room-evening .room-world[data-color="esgo"] .room-monitor img{filter:brightness(.85);opacity:1}
@media(prefers-reduced-motion:reduce){.room-monitor img{transition:none}}
.room-monitor{background:transparent}
.room-monitor img{background:#062457;opacity:1}

.object-countries{z-index:3}.object-countries .object-label{top:108%;white-space:nowrap}

/* A short entrance, never shown for direct case links or reduced-motion visitors. */
.room-entry{display:none}
.room-entering .room-entry{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#f2ebdf;color:#503b2b;padding:28px;text-align:center;opacity:1;transition:opacity .55s ease;animation:entry-failsafe 0s 4s forwards}
.room-entry p{font:italic 400 clamp(30px,4.2vw,64px)/1.2 Instrument,Georgia,serif;max-width:900px;animation:entry-words .65s ease both}
.entry-skip{position:absolute;right:30px;bottom:28px;border:0;background:transparent;padding:12px;font:14px Plex,system-ui,sans-serif;text-decoration:underline;text-underline-offset:4px}
.entry-leaving .room-entry{opacity:0;pointer-events:none}
@keyframes entry-words{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes entry-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.room-entering .room-entry{display:none;animation:none}.room-entry p{animation:none}}

/* One continuous room: the illustration is the page, with text resting on its floor. */
body.room-home{--scene-width:max(100vw,calc(100svh * 1.5));--scene-height:calc(var(--scene-width) / 1.5);--floor-extension:0px;overflow-x:hidden}
.room-experience{height:calc(var(--scene-height) + var(--floor-extension));min-height:100svh;padding:0}
.room-stage{inset:0;height:var(--scene-height);overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none}
.room-stage::-webkit-scrollbar{display:none}
.room-world{width:var(--scene-width);top:0;flex:none}
.room-art,.room-color-art{mask-image:none}
.room-header{height:auto;background:none;padding:24px 4vw;align-items:flex-start}
.room-header nav{margin-right:11vw;padding-top:8px}
.room-header a{text-shadow:0 0 6px var(--room-paper),0 0 12px var(--room-paper),0 0 18px var(--room-paper)}
.room-guide{top:auto;bottom:18px;left:4vw;max-width:none;padding:0;background:none;border-radius:0}
.room-guide p{font-size:12px}
.room-intro{position:absolute;inset:auto 14vw 68px 4vw;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,27%);gap:5vw;align-items:end}
.room-name h1{font-size:clamp(64px,6.3vw,112px);line-height:.94;letter-spacing:-.045em;white-space:nowrap}
.room-name br{display:none}
.room-name>p{font-size:12px;max-width:none;margin:0 0 12px}
.room-note,.room-evening .room-note{padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;max-width:310px}
.room-note:before{display:none}
.room-note p{font-size:clamp(19px,1.6vw,26px);line-height:1.2;max-width:none}
.room-note a{font-size:12px;margin-top:10px}
.room-bottom{position:absolute;top:calc(var(--scene-height) + var(--floor-extension) - 42px);left:31vw;right:4vw;min-height:0;margin:0;padding:0;gap:22px;z-index:5;font-size:11px}
.room-directory{display:none}
/* Stories occupy the same canvas rather than appearing as another boxed window. */
.room-reader{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}
.room-reader::backdrop{background:var(--room-paper);backdrop-filter:none}
.reader-bar{background:var(--room-paper);padding-inline:4vw}
@media(max-width:1100px){.room-intro{right:8vw;gap:4vw;grid-template-columns:minmax(0,1fr) 230px}.room-name h1{font-size:6.5vw}.room-note p{font-size:19px}.room-header nav{gap:20px;margin-right:10vw}.room-bottom{left:34vw;font-size:10px;gap:12px}}
@media(max-width:800px){
 .room-header{padding:21px 24px;background:linear-gradient(var(--room-paper),transparent)}
 .room-header nav{margin-right:0;padding-top:5px}
 .room-intro{left:24px;right:24px;bottom:92px;grid-template-columns:1fr 220px;gap:24px}
 .room-name h1{font-size:54px;white-space:normal}.room-name br{display:block}.room-name>p{font-size:11px;max-width:230px;margin-bottom:10px}
 .room-note p{font-size:19px}.room-guide{left:24px;bottom:56px;max-width:calc(100% - 48px)}
 .room-bottom{left:24px;right:24px;top:calc(var(--scene-height) + var(--floor-extension) - 34px);display:flex;font-size:11px;padding:0;gap:16px}
 .room-controls{margin:0;order:0;flex-basis:auto}.room-bottom>a{margin:0}.room-availability{flex-basis:auto}
 .reader-bar{padding-inline:18px}
}
@media(max-width:540px){
 body.room-home{--scene-width:max(100vw,calc(100svh * 1.5))}
 .room-header{padding:18px 20px}.room-header nav{gap:17px;font-size:12px}
 .room-intro{display:block;left:22px;right:22px;bottom:104px;padding:0}
 .room-name h1{font-size:clamp(42px,12.4vw,58px);white-space:nowrap;letter-spacing:-.055em}.room-name br{display:none}
 .room-name>p{max-width:none;font-size:10px;margin-bottom:8px}
 .room-note{margin-top:10px;max-width:none}.room-note p{display:none}.room-note a{margin:0;font-size:12px}
 .room-guide{left:22px;bottom:65px}.room-guide p{font-size:11px}
 .room-bottom{left:22px;right:22px;top:calc(var(--scene-height) + var(--floor-extension) - 50px);flex-wrap:wrap;gap:3px 16px;justify-content:space-between;font-size:10px}
 .room-availability{flex-basis:100%;line-height:1.4}.room-controls button{font-size:11px;min-height:28px;padding:3px 0}
 .room-bottom>a{font-size:11px}.reader-bar{height:88px}
}

/* The room is one screen. Scale the complete scene rather than cropping furniture. */
html:has(body.room-home){height:100%;overflow:hidden}
body.room-home{--scene-width:min(100vw,calc(100dvh * 1.5));--scene-height:calc(var(--scene-width) / 1.5);--floor-extension:0px;height:100dvh;overflow:hidden}
.room-experience{height:100dvh;min-height:0;padding:0}
.room-stage{height:100dvh;inset:0;overflow:hidden;justify-content:center;align-items:flex-start}
.room-world{width:var(--scene-width);top:0}
.room-intro{left:4vw;right:14vw;bottom:55px;grid-template-columns:minmax(0,1fr) minmax(210px,27%);gap:4vw}
.room-name h1{font-size:clamp(38px,6.8dvh,84px);white-space:nowrap}
.room-name br{display:none}
.room-name>p{font-size:11px;margin-bottom:8px;max-width:none}
.room-note p{font-size:clamp(17px,2.3dvh,24px)}
.room-note a{font-size:12px;margin-top:7px}
.room-guide{left:4vw;bottom:14px}
.room-bottom{top:auto;bottom:8px;left:31vw;right:4vw;font-size:10px;min-height:28px;flex-wrap:nowrap;gap:16px}
.room-availability{flex-basis:auto}
.room-controls{flex-basis:auto}
.room-bottom>a{margin:0}
.desktop-hint{display:inline}.mobile-hint{display:none}
@media(max-aspect-ratio:1/1){
 .room-stage{inset:76px 0 195px;height:auto;align-items:center}
 .room-intro{left:24px;right:24px;bottom:86px;grid-template-columns:1fr 210px;gap:20px}
 .room-name h1{font-size:clamp(34px,6vw,54px)}
 .room-note p{font-size:18px}
 .room-guide{bottom:57px;left:24px}
 .room-bottom{bottom:10px;left:24px;right:24px;flex-wrap:wrap;justify-content:space-between;font-size:10px;gap:4px 16px}
 .room-object{min-width:0;min-height:0}
}
@media(max-width:540px) and (max-aspect-ratio:1/1){
 .room-intro{display:block;left:22px;right:22px;bottom:104px}
 .room-name h1{font-size:clamp(34px,11.6vw,54px)}
 .room-name>p{font-size:10px}
 .room-note{margin-top:8px}.room-note a{margin:0}
 .room-guide{left:22px;bottom:73px}
 .room-bottom{left:22px;right:22px;bottom:12px}
 .room-availability{flex-basis:100%}
}
@media(max-height:600px) and (min-aspect-ratio:1/1){
 .room-header{padding:12px 3vw}.room-monogram{font-size:34px}.room-header nav{padding-top:3px;font-size:12px}
 .room-intro{left:3vw;right:3vw;bottom:41px;grid-template-columns:1fr auto}
 .room-name h1{font-size:32px}.room-name>p{font-size:10px;margin-bottom:5px}
 .room-note{margin:0}.room-note p{display:none}.room-note a{margin:0}
 .room-guide{display:none}.room-bottom{left:3vw;right:3vw;bottom:5px;font-size:9px}
 .room-controls button,.room-bottom>a{font-size:10px}
}
