/* Authored night-office composition: solid materials, no gradients or glow. */
.night-office{
  position:relative;min-width:0;min-height:720px;overflow:hidden;
  background:#09171b;color:#f1e7cb;border-left:1px solid rgba(241,231,203,.15)
}
.night-office:before{
  content:"";position:absolute;left:0;right:0;top:104px;height:1px;background:#30413e
}
.shift-time{position:absolute;left:34px;top:28px;margin:0;display:flex;align-items:flex-end;gap:7px;color:#d7c8a7}
.shift-time b{font:400 31px/1 LodgePixelDisplay,monospace;letter-spacing:.04em}
.shift-time span{font:400 11px/1 LodgePixelText,monospace;letter-spacing:.16em;margin-bottom:3px;color:#df7b67}
.office-mark{position:absolute;right:34px;top:27px;text-align:right}
.office-mark span{display:block;font:400 27px/.9 LodgePixelDisplay,monospace;letter-spacing:.035em;color:#e6c56d}
.office-mark small{display:block;margin-top:7px;font:400 10px/1 LodgePixelText,monospace;letter-spacing:.11em;text-transform:uppercase;color:#8fa49b}
.featured-room{
  position:absolute;left:6.5%;top:151px;width:43%;margin:0;padding:0;border:0;background:transparent;
  color:#f1e7cb;text-align:left;cursor:pointer;transform:rotate(-.45deg)
}
.feature-frame{display:block;position:relative;width:100%;aspect-ratio:1/1;background:#071016;border:9px solid #342520;border-bottom-width:20px}
.feature-frame:after{content:"OCCUPIED";position:absolute;right:9px;bottom:-16px;font:400 9px/1 LodgePixelText,monospace;letter-spacing:.15em;color:#c99983}
.feature-frame img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}
.feature-number{
  position:absolute;z-index:2;left:-31px;top:29px;min-width:54px;padding:7px 8px 5px;
  background:#e6c56d;color:#071016;border:3px solid #071016;
  font:400 26px/1 LodgePixelDisplay,monospace;text-align:center;transform:rotate(-2deg)
}
.feature-copy{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:15px 2px 0}
.feature-copy b{font:400 19px/1 LodgePixelDisplay,monospace;color:#f1e7cb}
.feature-copy small{font:400 9px/1 LodgePixelText,monospace;letter-spacing:.09em;color:#8fa49b;text-transform:uppercase;text-align:right}
.featured-room:hover .feature-frame,.featured-room:focus-visible .feature-frame{border-color:#6e4a3f}
.key-cabinet{
  position:absolute;right:5%;top:165px;width:38%;min-height:365px;padding:0 18px 20px;
  background:#122a2a;border:8px solid #3d302a;box-shadow:8px 9px 0 #050b0d
}
.key-cabinet header{min-height:55px;margin:0 -18px 17px;padding:14px 16px 10px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:2px solid #685249}
.key-cabinet header b{font:400 15px/1 LodgePixelDisplay,monospace;color:#e6c56d}
.key-cabinet header span{font:400 9px/1 LodgePixelText,monospace;letter-spacing:.08em;text-transform:uppercase;color:#9db0a7}
.key-rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:118px;gap:2px 8px;align-items:start}
.rack-key{
  position:relative;display:flex;min-width:0;height:99px;padding:28px 2px 0;flex-direction:column;align-items:center;
  border:0;background:transparent;color:#071016;cursor:pointer;transform:rotate(var(--tilt));transform-origin:50% 8px
}
.rack-key>span{position:absolute;left:50%;top:1px;width:10px;height:10px;margin-left:-5px;background:#b4975e;border:2px solid #071016}
.rack-key>span:after{content:"";position:absolute;left:3px;top:8px;width:2px;height:21px;background:#947b4d}
.rack-key b{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:43px;background:#d6b761;border:3px solid #735d32;font:400 21px/1 LodgePixelDisplay,monospace}
.rack-key small{position:relative;z-index:1;display:block;width:48px;padding:5px 2px 4px;background:#c9a856;color:#382c18;font:400 7px/1 LodgePixelText,monospace;text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:clip}
.rack-key:hover b,.rack-key:focus-visible b{background:#f1e7cb;border-color:#c96655}
.rack-key:nth-child(2){margin-top:7px}.rack-key:nth-child(3){margin-top:-3px}.rack-key:nth-child(5){margin-left:8px}.rack-key:nth-child(6){margin-top:6px}.rack-key:nth-child(7){margin-left:-5px}
.clerk-note{
  position:absolute;left:8%;bottom:35px;width:205px;margin:0;padding:17px 17px 20px;
  background:#d8caa7;color:#25231d;border-top:7px solid #9e8a61;
  font:400 13px/1.35 LodgePixelText,monospace;transform:rotate(1.6deg);box-shadow:5px 6px 0 rgba(0,0,0,.32)
}
.clerk-note span{display:block;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid #887c61;font-size:9px;letter-spacing:.12em;color:#7b382f}
.counter-edge{position:absolute;left:37%;right:0;bottom:0;height:88px;background:#291f1b;border-top:9px solid #5e4438}
.counter-edge span{position:absolute;left:12%;top:20px;padding:7px 9px 5px;background:#1a1512;color:#bca98c;font:400 9px/1 LodgePixelText,monospace;letter-spacing:.12em;transform:rotate(-1deg)}
.counter-edge i{position:absolute;right:10%;top:24px;width:48px;height:22px;border:4px solid #8c744e;border-top:0}
/* Remove legacy scenic metaphor at the cascade level. */
.motel-scene,.moon,.road-sign,.building,.parking-lot,.room-window{background-image:none}
@media(max-width:1080px){
  .night-office{min-height:760px;border-left:0;border-top:1px solid rgba(241,231,203,.15)}
  .featured-room{left:8%;width:39%;top:160px}
  .key-cabinet{right:7%;width:39%;top:180px}
}
@media(max-width:720px){
  .night-office{min-height:1040px}
  .night-office:before{top:84px}
  .shift-time{left:19px;top:24px}.office-mark{right:19px;top:23px}.office-mark span{font-size:23px}.office-mark small{display:none}
  .featured-room{left:34px;right:auto;top:119px;width:calc(100% - 68px);transform:rotate(-.3deg)}
  .feature-frame{border-width:7px;border-bottom-width:18px}
  .feature-number{left:-20px;top:24px;min-width:48px;font-size:23px}
  .feature-copy{padding-top:13px}.feature-copy b{font-size:17px}.feature-copy small{font-size:8px}
  .key-cabinet{left:24px;right:24px;top:565px;width:auto;min-height:250px;padding:0 12px 14px;border-width:6px;box-shadow:6px 7px 0 #050b0d}
  .key-cabinet header{min-height:45px;margin:0 -12px 10px;padding:10px 12px 8px}
  .key-rack{grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:102px;gap:0 2px}
  .rack-key{height:91px;padding-top:25px}.rack-key b{width:38px;height:37px;font-size:17px}.rack-key small{display:none}
  .rack-key:nth-child(5){margin-left:0}.rack-key:nth-child(7){margin-left:0}
  .clerk-note{left:22px;top:840px;bottom:auto;width:174px;padding:12px 13px 14px;font-size:11px}
  .counter-edge{left:0;bottom:0;height:77px}.counter-edge span{left:auto;right:20px;font-size:8px}.counter-edge i{display:none}
}
@media(max-width:390px){
  .night-office{min-height:1000px}
  .featured-room{left:27px;width:calc(100% - 54px)}
  .key-cabinet{left:17px;right:17px;top:515px}
  .key-rack{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:86px}
  .rack-key{height:79px;padding-top:22px}.rack-key>span:after{height:17px}.rack-key b{width:42px;height:34px}
  .key-cabinet header span{display:none}
  .clerk-note{top:795px}
}
@media(max-width:340px){.feature-copy small{display:none}.key-cabinet{top:470px}.night-office{min-height:950px}.clerk-note{top:750px;width:160px}}
@media(prefers-reduced-motion:reduce){.featured-room,.rack-key{transition:none}}