/* SMOKERS artwork-synced visual layer.
   Tokens are sampled from the 12 shipped GIFs; geometry follows their coarse pixel grid. */
@font-face{
  font-family:SmokersSpriteDisplay;
  src:url('/assets/fonts/SmokersSpriteDisplay.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap
}
:root{
  --sprite-lime:#c9f711;--sprite-black:#000;--sprite-night:#050608;
  --sprite-red:#b4202a;--sprite-bone:#f4db9c;--sprite-blue:#285cc4;
  --sprite-navy:#143464;--sprite-white:#fff;--sprite-muted:#6d758d;
  --display:SmokersSpriteDisplay,monospace;--text:LodgePixelText,monospace;
  --night:var(--sprite-night);--deep:var(--sprite-black);--teal:var(--sprite-blue);
  --aqua:var(--sprite-lime);--pool:var(--sprite-navy);--coral:var(--sprite-red);
  --coral-dark:var(--sprite-red);--butter:var(--sprite-lime);--paper:var(--sprite-bone);
  --cream:var(--sprite-white);--ink:var(--sprite-black);--line:rgba(255,255,255,.28);
  color-scheme:dark
}
html{background:var(--sprite-night)}
body{background:var(--sprite-night);color:var(--sprite-white);font-family:var(--text);font-synthesis:none}
button,input,select{font-family:var(--text);border-radius:0}
img{image-rendering:pixelated}
.skip-link{background:var(--sprite-lime);color:var(--sprite-black);border:4px solid var(--sprite-black);box-shadow:4px 4px 0 var(--sprite-blue)}

/* Header: a black sprite HUD, not motel signage. */
.site-header{height:84px;background:var(--sprite-black);border-bottom:6px solid var(--sprite-lime)}
.wordmark{gap:10px}
.wordmark strong{font:400 40px/.75 var(--display);letter-spacing:.02em;color:var(--sprite-lime)}
.wordmark em{font:400 18px/.8 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sprite-white);transform:none}
.night-status{font-size:12px;color:var(--sprite-white);letter-spacing:.12em}
.night-status span{width:9px;height:9px;border-radius:0;background:var(--sprite-red);border:2px solid var(--sprite-white)}
.site-header nav a{font-family:var(--display);font-size:18px;line-height:.8;letter-spacing:.06em;border-bottom:4px solid transparent}
.site-header nav a:hover,.site-header nav a:focus-visible{border-color:var(--sprite-lime);color:var(--sprite-lime)}
.menu-toggle{font:400 20px/.8 var(--display);background:var(--sprite-lime);color:var(--sprite-black);border:4px solid var(--sprite-black);box-shadow:4px 4px 0 var(--sprite-blue)}
.mobile-menu{background:var(--sprite-lime);color:var(--sprite-black);border-bottom:6px solid var(--sprite-black)}
.mobile-menu a{font-family:var(--display);font-size:22px;letter-spacing:.04em;border-color:var(--sprite-black)}

/* Hero: the same flat lime/black contrast as every collection frame. */
.arrival{background:var(--sprite-black);border-bottom:0}
.sky-copy{background:var(--sprite-lime);color:var(--sprite-black);border-right:6px solid var(--sprite-black)}
.sky-copy:after{display:none}
.route-mark,.kicker{font-size:12px;letter-spacing:.14em;color:var(--sprite-red)}
.arrival h1{max-width:690px;margin-bottom:30px;font:400 clamp(70px,6.6vw,106px)/.76 var(--display);letter-spacing:.005em;color:var(--sprite-black)}
.arrival h1 i{font:400 1em/.76 var(--display);letter-spacing:.005em;color:var(--sprite-red);text-transform:none;transform:none;margin-left:0}
.arrival-deck{max-width:510px;font:400 clamp(18px,1.45vw,22px)/1.46 var(--text);letter-spacing:.01em}
.key-button{border:5px solid var(--sprite-black);background:var(--sprite-black);color:var(--sprite-white);box-shadow:7px 7px 0 var(--sprite-blue)}
.key-button span{padding:16px 18px;font:400 24px/.8 var(--display);letter-spacing:.05em}
.key-button b{min-width:58px;border-left:5px solid var(--sprite-lime);font:400 27px/.8 var(--display);color:var(--sprite-lime)}
.key-button:hover,.key-button:focus-visible{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--sprite-blue)}
.text-link{font:400 20px/.9 var(--display);letter-spacing:.04em;text-underline-offset:5px}

/* Authored key desk retained, recolored and squared to the sprite world. */
.night-office{background:var(--sprite-night);color:var(--sprite-white);border-left:6px solid var(--sprite-black)}
.night-office:before{height:5px;top:102px;background:var(--sprite-blue)}
.shift-time b{font:400 39px/.75 var(--display);letter-spacing:.03em;color:var(--sprite-lime)}
.shift-time span{font:400 17px/.8 var(--display);letter-spacing:.06em;color:var(--sprite-red)}
.office-mark span{font:400 34px/.72 var(--display);letter-spacing:.03em;color:var(--sprite-white)}
.office-mark small{font:400 11px/1 var(--text);color:var(--sprite-lime)}
.featured-room{color:var(--sprite-white);transform:none}
.feature-frame{background:var(--sprite-lime);border:8px solid var(--sprite-black);border-bottom-width:18px;box-shadow:8px 8px 0 var(--sprite-blue)}
.feature-frame:after{right:6px;bottom:-15px;font:400 13px/.8 var(--display);letter-spacing:.08em;color:var(--sprite-white)}
.feature-frame img{image-rendering:pixelated}
.feature-number{left:-27px;top:26px;min-width:58px;padding:7px 8px 5px;background:var(--sprite-red);color:var(--sprite-white);border:5px solid var(--sprite-black);font:400 31px/.75 var(--display);transform:none}
.feature-copy{padding-top:17px}
.feature-copy b{font:400 26px/.8 var(--display);letter-spacing:.025em;color:var(--sprite-white)}
.feature-copy small{font:400 11px/1 var(--text);color:var(--sprite-lime)}
.featured-room:hover .feature-frame,.featured-room:focus-visible .feature-frame{border-color:var(--sprite-lime);box-shadow:8px 8px 0 var(--sprite-red)}
.key-cabinet{background:var(--sprite-blue);border:7px solid var(--sprite-black);box-shadow:8px 8px 0 var(--sprite-bone)}
.key-cabinet header{border-bottom:5px solid var(--sprite-black)}
.key-cabinet header b{font:400 23px/.8 var(--display);color:var(--sprite-white)}
.key-cabinet header span{font-size:10px;color:var(--sprite-bone)}
.rack-key{color:var(--sprite-black)}
.rack-key>span{width:12px;height:12px;margin-left:-6px;background:var(--sprite-bone);border:3px solid var(--sprite-black)}
.rack-key>span:after{left:3px;top:9px;width:3px;height:21px;background:var(--sprite-black)}
.rack-key b{width:50px;height:43px;background:var(--sprite-bone);border:4px solid var(--sprite-black);font:400 26px/.75 var(--display)}
.rack-key small{width:50px;padding:5px 2px 4px;background:var(--sprite-black);color:var(--sprite-white);font:400 11px/.8 var(--display)}
.rack-key:hover b,.rack-key:focus-visible b{background:var(--sprite-lime);border-color:var(--sprite-black)}
.clerk-note{background:var(--sprite-bone);color:var(--sprite-black);border:5px solid var(--sprite-black);border-top:9px solid var(--sprite-red);box-shadow:6px 6px 0 var(--sprite-blue);font:400 14px/1.35 var(--text)}
.clerk-note span{border-color:var(--sprite-black);color:var(--sprite-red)}
.counter-edge{background:var(--sprite-red);border-top:8px solid var(--sprite-black)}
.counter-edge span{background:var(--sprite-black);color:var(--sprite-white);font:400 14px/.8 var(--display)}
.counter-edge i{border-color:var(--sprite-bone)}

/* Assignment strip. */
.desk-strip{background:var(--sprite-blue);color:var(--sprite-white);border-top:6px solid var(--sprite-black);border-bottom:6px solid var(--sprite-black)}
.desk-label span,.desk-guest span{opacity:1;color:var(--sprite-bone)}
.desk-label b{font:400 34px/.8 var(--display)}
.desk-guest img{border:4px solid var(--sprite-black);box-shadow:4px 4px 0 var(--sprite-lime)}
.desk-guest strong,.desk-note{font-family:var(--text)}
.desk-strip>button{border:4px solid var(--sprite-black);background:var(--sprite-lime);color:var(--sprite-black);font:400 20px/.8 var(--display);box-shadow:4px 4px 0 var(--sprite-black)}
.desk-strip>button:hover,.desk-strip>button:focus-visible{background:var(--sprite-white);color:var(--sprite-black);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sprite-black)}

/* Register: flat paper/ink, thick sprite dividers. */
.register-section{background:var(--sprite-bone);color:var(--sprite-black);border-bottom:7px solid var(--sprite-black)}
.register-heading .kicker{color:var(--sprite-red)}
.register-heading h2,.pool-copy h2,.office-copy h2,.sheet-copy h2{font-family:var(--display);font-weight:400;letter-spacing:.005em}
.register-heading h2{font-size:clamp(64px,6.2vw,96px);line-height:.75;color:var(--sprite-black)}
.register-heading>p:last-child{font:400 clamp(18px,1.4vw,21px)/1.48 var(--text)}
.register-book{background:var(--sprite-white);color:var(--sprite-black);border:5px solid var(--sprite-black);box-shadow:12px 12px 0 var(--sprite-blue)}
.register-book:before{width:4px;background:var(--sprite-red)}
.book-tools{border-bottom:5px solid var(--sprite-black)}
.book-tools label{color:var(--sprite-black)}
.book-tools input,.book-tools select{height:48px;border:4px solid var(--sprite-black);background:var(--sprite-white);color:var(--sprite-black);padding:0 10px}
.book-tools input::placeholder{color:#4a525e;opacity:1}
.book-tools input:focus,.book-tools select:focus{border-color:var(--sprite-blue);box-shadow:inset 0 -4px 0 var(--sprite-blue)}
.book-tools select option{background:var(--sprite-white);color:var(--sprite-black)}
.book-tools p b{font:400 43px/.7 var(--display);color:var(--sprite-red)}
.register-columns{color:var(--sprite-black);border-bottom:3px solid var(--sprite-black);font-weight:700}
.guest-row{color:var(--sprite-black);border-bottom:3px solid var(--sprite-black)}
.guest-row:hover,.guest-row:focus-visible,.guest-row.active{background:var(--sprite-lime)}
.guest-row .room-no{font:400 32px/.8 var(--display);color:var(--sprite-red)}
.guest-identity img{border:4px solid var(--sprite-black);background:var(--sprite-lime)}
.guest-identity small,.guest-habit small{color:#333941}
.guest-identity b,.guest-habit b{font-family:var(--text)}
.key-tag{width:54px;background:var(--sprite-red);color:var(--sprite-white);border:4px solid var(--sprite-black);font:400 22px/.8 var(--display)}
.register-empty button{background:var(--sprite-lime);color:var(--sprite-black);border:4px solid var(--sprite-black);font:400 20px/.8 var(--display)}

/* Collection facts use the same lime/cobalt/red fields found in the portraits. */
.pool-section{background:var(--sprite-blue);color:var(--sprite-white);border-bottom:7px solid var(--sprite-black)}
.pool-water{background:var(--sprite-lime);border-right:16px solid var(--sprite-black);box-shadow:none}
.pool-water:before{font:400 clamp(100px,15vw,230px)/.75 var(--display);color:var(--sprite-black)}
.pool-water span{height:5px;background:var(--sprite-black)}
.pool-water:after{border:5px solid var(--sprite-black);border-radius:0;background:var(--sprite-red);color:var(--sprite-white);font:400 28px/.8 var(--display)}
.pool-copy .kicker{color:var(--sprite-lime)}
.pool-copy h2{font-size:clamp(64px,5.8vw,90px);line-height:.75;color:var(--sprite-white)}
.pool-copy p:last-child{font:400 20px/1.48 var(--text)}
.pool-stats div{border-top:4px solid var(--sprite-black)}
.pool-stats dt{color:var(--sprite-bone)}
.pool-stats dd{font:400 36px/.8 var(--display);color:var(--sprite-lime)}

/* Exit office: no glass, no glow, only flat collection colors. */
.office{background:var(--sprite-black);border-bottom:0}
.office-window{background:var(--sprite-red);border-color:var(--sprite-black)}
.blinds{background:var(--sprite-red);border-top:9px solid var(--sprite-black);border-bottom:9px solid var(--sprite-black)}
.office-window>div{background:var(--sprite-bone);color:var(--sprite-black);border:7px solid var(--sprite-black);box-shadow:10px 10px 0 var(--sprite-blue);transform:none}
.office-window p{font:400 31px/.8 var(--display);color:var(--sprite-red)}
.office-window b{font:400 68px/.7 var(--display);color:var(--sprite-black)}
.office-copy{background:var(--sprite-lime);color:var(--sprite-black)}
.office-copy .kicker{color:var(--sprite-red)}
.office-copy h2{font-size:clamp(64px,5.8vw,90px);line-height:.75;color:var(--sprite-black)}
.office-copy>p:not(.kicker){font:400 20px/1.48 var(--text)}
.office-actions a{border:4px solid var(--sprite-black);background:var(--sprite-white);color:var(--sprite-black);font:400 20px/.8 var(--display);box-shadow:4px 4px 0 var(--sprite-black)}
.office-actions a:first-child{background:var(--sprite-red);color:var(--sprite-white);border-color:var(--sprite-black)}
.office-actions a:hover,.office-actions a:focus-visible,.office-actions a:first-child:hover,.office-actions a:first-child:focus-visible{background:var(--sprite-blue);color:var(--sprite-white);border-color:var(--sprite-black)}
.contract-copy{background:var(--sprite-black);border:5px solid var(--sprite-black);color:var(--sprite-white);box-shadow:6px 6px 0 var(--sprite-blue)}
.contract-copy code{color:var(--sprite-lime)}
.contract-copy b{background:var(--sprite-red);color:var(--sprite-white);font:400 17px/.8 var(--display)}
/* Footer now follows the blue pool section directly (the black exit office was
   removed for the Robinhood chain relaunch). The pool's 7px black border-bottom
   already reads as the divider, so a blue border-top here produced a stray
   blue→black→blue→black stripe at the seam. No border: black meets black. */
footer{background:var(--sprite-black);color:var(--sprite-white);border-top:0}
footer a{color:var(--sprite-lime)}

/* Room sheet is a physical sprite panel, not a soft modal card. */
.room-sheet{background:var(--sprite-bone);color:var(--sprite-black);border:6px solid var(--sprite-black);box-shadow:14px 14px 0 var(--sprite-blue)}
.room-sheet::backdrop{background:rgba(0,0,0,.9)}
.sheet-close{background:var(--sprite-red);color:var(--sprite-white);border:4px solid var(--sprite-black);font:400 19px/.8 var(--display)}
.sheet-image-wrap{background:var(--sprite-lime);border:12px solid var(--sprite-black)}
.sheet-image-wrap:before{background:none}
.sheet-image-wrap span{background:var(--sprite-lime);color:var(--sprite-black);border:4px solid var(--sprite-black);font:400 23px/.8 var(--display)}
.sheet-copy h2{font-size:clamp(52px,5vw,76px);line-height:.75;color:var(--sprite-black)}
.sheet-lead{font:400 19px/1.35 var(--text);color:var(--sprite-red);transform:none}
.sheet-copy dl div{border-top:3px solid var(--sprite-black)}
.sheet-copy dd{font-family:var(--text)}
.sheet-actions a,.sheet-actions button{border:4px solid var(--sprite-black);background:var(--sprite-white);color:var(--sprite-black);font:400 18px/.8 var(--display);box-shadow:4px 4px 0 var(--sprite-black)}
.sheet-actions a{background:var(--sprite-lime);color:var(--sprite-black);border-color:var(--sprite-black)}
.sheet-actions button:hover,.sheet-actions button:focus-visible{background:var(--sprite-blue);color:var(--sprite-white);border-color:var(--sprite-black)}
.toast{background:var(--sprite-lime);color:var(--sprite-black);border:4px solid var(--sprite-black);box-shadow:5px 5px 0 var(--sprite-blue);font-family:var(--text)}
.load-failure{color:var(--sprite-red)}
:focus-visible{outline:4px solid var(--sprite-red);outline-offset:3px}

/* Frame-step interaction: immediate and pixel-snapped, never floaty. */
.key-button,.desk-strip>button,.office-actions a,.sheet-actions a,.sheet-actions button,.featured-room .feature-frame{
  transition:transform 90ms steps(1,end),box-shadow 90ms steps(1,end),background-color 90ms steps(1,end),color 90ms steps(1,end)
}

/* Kill every legacy scenic/effect layer at the final cascade. */
.motel-scene,.motel-scene:after,.moon,.road-sign,.building,.parking-lot,.room-window,.blinds,.pool-water,.sheet-image-wrap:before{background-image:none}
.moon,.road-sign{filter:none}

@media(max-width:1080px){
  .night-office{border-left:0;border-top:6px solid var(--sprite-black)}
  .sky-copy{border-right:0;border-bottom:6px solid var(--sprite-black)}
}
@media(max-width:720px){
  .site-header{height:74px;border-bottom-width:5px}
  .wordmark strong{font-size:32px}.wordmark em{font-size:14px}
  .sky-copy{min-height:600px;padding-top:60px}
  .arrival h1{font-size:clamp(64px,18vw,82px);line-height:.75}
  .key-button span{font-size:22px}
  .night-office:before{top:82px}
  .shift-time b{font-size:33px}.shift-time span{font-size:14px}
  .office-mark span{font-size:29px}
  .feature-frame{border-width:7px;border-bottom-width:17px;box-shadow:6px 6px 0 var(--sprite-blue)}
  .feature-number{left:-18px;top:22px;min-width:50px;border-width:4px;font-size:27px}
  .feature-copy b{font-size:23px}
  .key-cabinet{border-width:6px;box-shadow:6px 6px 0 var(--sprite-bone)}
  .key-cabinet header b{font-size:20px}
  .rack-key b{font-size:23px}
  .clerk-note{border-width:4px;border-top-width:8px}
  .desk-strip>button{font-size:18px}
  .register-heading h2,.pool-copy h2,.office-copy h2{font-size:clamp(60px,16vw,78px);line-height:.75}
  .register-book{border-width:4px;box-shadow:8px 8px 0 var(--sprite-blue)}
  .book-tools input,.book-tools select{border-width:3px}
  .guest-row .room-no{font-size:28px}.key-tag{width:45px;font-size:19px}
  .pool-water{border-right:0;border-bottom:13px solid var(--sprite-black);box-shadow:none}
  .room-sheet{border-width:4px;box-shadow:8px 8px 0 var(--sprite-blue)}
  .sheet-copy h2{font-size:clamp(48px,14vw,66px)}
}
@media(max-width:390px){
  .night-office{min-height:1030px}
  .wordmark strong{font-size:30px}
  .arrival h1{font-size:clamp(61px,17vw,72px)}
  .arrival-deck{font-size:17px}
  .feature-copy b{font-size:21px}
  .rack-key b{width:42px;height:35px;font-size:21px}
}
@media(max-width:340px){
  .night-office{min-height:980px}
  .wordmark em{display:none}.arrival h1{font-size:58px}.office-mark span{font-size:27px}
  .register-heading h2{font-size:56px}
}
@media(prefers-reduced-motion:reduce){
  .key-button,.desk-strip>button,.office-actions a,.sheet-actions a,.sheet-actions button,.featured-room .feature-frame{transition:none}
}