/* Keep the doorway clear and fit all copy between navigation and the HUD. */
@media(min-width:701px){
  .hero{top:50%;left:5.5%;width:30%;max-width:430px;translate:0 -50%;padding:20px 0 65px}
  .hero h1{font-size:clamp(35px,min(4.1vw,7.4svh),65px);line-height:1.06;margin:22px 0;letter-spacing:-.045em}
  .hero h1 em{white-space:normal;font-size:1em}
  .hero .eyebrow{font-size:9px;letter-spacing:.16em}
  .hero .intro{font-size:12px;line-height:1.75}
  .hero .journeyButton{margin-top:8px;min-width:155px;font-size:12px}
  .doorLabel{top:45%;right:6%;padding-left:16px}.doorLabel span{font-size:42px}.doorLabel p{font-size:8px}
  .sceneMeta{bottom:80px;font-size:8px}
  header{padding-top:22px;padding-bottom:20px}.brand{font-size:14px}.brandmark{font-size:38px}.brand small{font-size:8px}
}
.junctionHeading{left:5%;right:5%;bottom:83px;max-width:500px}
.junctionHeading h2{font-size:clamp(25px,2.7vw,40px);margin:10px 0}
.junctionHeading>p:last-child{font-size:12px;margin:10px 0 0}
.junctionHeading .eyebrow{font-size:9px}
.junctionShade{background:linear-gradient(0deg,#13160eee,transparent 42%,transparent 82%,#13160e66)}
#roomComposition .roomPhoto{object-fit:fill;filter:none}
#roomWorld{transition:none;background:#201b10}
#roomWorld>.shade{background:linear-gradient(0deg,#15150ed9,transparent 20%,transparent 84%,#15150e44)}
.personAware{opacity:0;pointer-events:none;mask-image:radial-gradient(ellipse 15% 35% at 56% 70%,#000 70%,transparent 100%);transition:opacity .7s ease .3s}
body[data-room-focus=profile] .personAware{opacity:1}
.roomEffects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.screenGlow,.tvGlow,.speakerWave,.guitarStrings{opacity:0}
body[data-room-focus=projects] .screenGlow{animation:screenWake 1.8s ease both}
body[data-room-focus=experience] .tvGlow{animation:screenWake 1.8s ease both}
body[data-room-focus=contact] .speakerWave{animation:speakerWake 1.6s ease both;transform-origin:1398px 294px}
body[data-room-focus=skills] .guitarStrings{animation:stringWake 1.3s ease both}
@keyframes screenWake{0%,22%,48%{opacity:.03}12%,36%{opacity:.32}70%,100%{opacity:.13}}
@keyframes speakerWake{0%{opacity:0;scale:.6}25%{opacity:.7}100%{opacity:0;scale:1.6}}
@keyframes stringWake{0%,100%{opacity:0}20%,60%{opacity:.7;translate:1px 0}40%,80%{opacity:.3;translate:-1px 0}}
body[data-room-focus] .roomHeading,body[data-room-focus] .roomBottom,body[data-room-focus] #objectMap,body[data-room-focus] .roomDirectory{opacity:0;pointer-events:none}
body[data-room-focus] #roomWorld>.shade{opacity:.2}
#room .roomHeading{top:110px;left:5%;bottom:auto;max-width:250px}
#room .roomHeading h2{font-size:28px}#room .roomHeading>p:last-child{max-width:225px}
.roomDirectory{position:absolute;bottom:74px;left:5%;right:5%;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.roomDirectory button{font-size:11px;padding:10px 13px;border:1px solid #eee4b84d;background:#1e2114bb;backdrop-filter:blur(8px)}
.roomDirectory button:hover{background:#53502bea}
#portfolio.scenePanel{position:fixed;inset:100px 3.5% 30px auto;margin:0;width:44%;max-width:650px;max-height:none;height:calc(100svh - 130px);padding:25px 30px;background:#192119f2;border:1px solid #e5d59c38;box-shadow:0 20px 90px #0005;animation:reveal .5s ease both}
#portfolio.scenePanel::backdrop{background:transparent;backdrop-filter:none}
.scenePanel .profileGrid{display:block}.scenePanel .portrait{display:none}
#portfolio.scenePanel h2{font-size:clamp(32px,3.4vw,52px)}
#portfolio.scenePanel .lead{font-size:16px;line-height:1.7}
.scenePanel .works{grid-template-columns:1fr}.scenePanel .work{display:grid;grid-template-columns:95px 1fr;gap:0 16px}.scenePanel .workVisual{grid-row:1/3;margin:0}.scenePanel .work h3{font-size:20px;margin:8px 0}.scenePanel .work small{align-self:end}
@media(max-width:700px){
  #roomComposition .personAware,#roomComposition .roomEffects{top:32.177%;height:31.674%;bottom:auto}
  #roomComposition .personAware{mask-image:radial-gradient(ellipse 13% 23% at 56% 62%,#000 70%,transparent 100%)}
  .hero{bottom:100px}.hero h1{font-size:34px}.journeyButton{margin:0}
  .junctionHeading{left:24px;right:24px;bottom:80px;max-width:330px}.junctionHeading h2{font-size:27px}.junctionHeading>p:last-child{max-width:300px;font-size:12px}
  #room .roomHeading{top:85px;left:24px;bottom:auto;max-width:300px}#room .roomHeading h2{font-size:25px}#room .roomHeading>p:last-child{max-width:290px}
  .roomDirectory{bottom:72px;left:18px;right:18px;gap:7px}.roomDirectory button{font-size:12px;min-height:44px;padding:8px 12px}
  #portfolio.scenePanel{inset:auto 10px 10px;margin:0;width:calc(100% - 20px);height:53svh;max-height:53svh;padding:18px 22px}
  #portfolio.scenePanel .dialogTop{top:-18px;padding-top:10px}#portfolio.scenePanel h2{font-size:33px}.scenePanel .eyebrow{font-size:9px}
  body[data-room-focus] header{background:#151d1680}
}
body[data-motion=reduce] .personAware{transition:none}
body[data-motion=reduce][data-room-focus] #roomWorld{transform:var(--focus-transform)!important}
body[data-motion=reduce] .screenGlow,body[data-motion=reduce] .tvGlow,body[data-motion=reduce] .speakerWave,body[data-motion=reduce] .guitarStrings{animation:none!important}