/* The same menu on every page (Richard 2026-10-06: "While on the separate pages, the menu disappears. Why not keep it
   the same on every page?"), and on phones one bottom bar instead of four loose buttons ("there are basically 2 rows of
   the bottom menu ... the Boek nu button could be a bit thinner ... put a slight background on this bottom menu and
   don't allow clickthrough"). Behaviour in nav.js. Loaded after each page's own styles, so these rules win.
   House pages get it through site.css (@import); the homepage and the room pages link it directly. */

/* the menu: the homepage's links on every page; under 1080px they fold behind the ☰ button */
nav.top .back{display:none}
nav.top .nav-links{display:flex;gap:20px;margin-left:12px;font-family:var(--body);font-size:15px;font-weight:600;white-space:nowrap}
nav.top .nav-links a{position:relative;text-decoration:none;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.6)}
/* hover: a red line slides in above from the left and below from the right (Richard 2026-10-06, after codepen
   nefejames/qEWBOBz, in the red of the logo); the page you are on keeps the line below */
nav.top .nav-links a::before,nav.top .nav-links a::after{content:"";position:absolute;left:0;width:100%;height:2px;background:#d7141a;
  transform:scaleX(0);transition:transform .4s ease-out;pointer-events:none}
nav.top .nav-links a::before{top:-1px;transform-origin:left}
nav.top .nav-links a::after{bottom:-1px;transform-origin:right}
nav.top .nav-links a:hover::before,nav.top .nav-links a:hover::after,nav.top .nav-links a:focus-visible::before,
nav.top .nav-links a:focus-visible::after,nav.top .nav-links a.here::after{transform:scaleX(1)}
/* the language switch: the language you are not on stays readable (Richard 2026-10-06) */
nav.top .lang button{background:rgba(0,0,0,.2);color:#dcd9e0}
nav.top .lang button.on{background:#fff;color:#000}
nav.top .burger{display:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--line,#2a2a33);background:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;flex:none}
@media(max-width:1080px){
  nav.top .nav-links{display:none}
  nav.top .burger{display:grid;place-items:center}
  nav.top .nav-links.open{display:flex;position:fixed;top:70px;left:0;right:0;flex-direction:column;background:rgba(11,11,13,.97);
    padding:24px;gap:18px;font-size:20px;border-bottom:1px solid var(--line,#2a2a33);margin:0;max-height:calc(100svh - 70px);overflow:auto}
}

/* phones: Halloween, sound, booking and WhatsApp share one bar along the bottom */
@media(max-width:700px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:118;display:flex;align-items:center;gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(11,11,13,.92);border-top:1px solid rgba(255,255,255,.1)}
  .mbar[hidden]{display:none}
  .mbar>*{position:static!important;inset:auto!important;transform:none!important;margin:0!important;flex:none}
  .mbar .mobile-book{display:flex!important;flex:1 1 auto;min-width:0;height:44px;padding:0 14px!important;align-items:center;justify-content:center;
    border-radius:999px;font-size:15px;white-space:nowrap}
  .mbar .wa,.mbar .wa img{width:44px!important;height:44px!important}
  .mbar .hw-pill button,.mbar .ts-snd{height:44px;display:flex;align-items:center;justify-content:center}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* an opened card or window covers everything, the bottom buttons included */
html:has(.modal.open) .mbar,html:has(.modal.open) .hw-pill,html:has(.modal.open) .ts-snd,html:has(.modal.open) .wa,html:has(.modal.open) .mobile-book{visibility:hidden}

/* Sara-style pass 2026-10-07 */
/* the red booking button in the menu hides wherever the phone bar shows (no two "Boek" buttons at 601-700 px) */
@media(max-width:700px){nav.top .nav-right .btn{display:none}}
/* the phone menu: the "you are here" line sits under the link, not across the whole menu */
nav.top .nav-links.open{align-items:flex-start}
/* the footer, the same on every page (markup: tools/build-footer.py). Richard 2026-10-07: "could use a fresher look
   and perhaps some additional links spread on the left and right of the page". Columns over the menu's width; on a
   phone two columns and every link big enough to tap. Room themes show through: the band is only a shade darker. */
html footer.ft{padding:64px 0 100px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.32);color:#a6a2b2;font-size:15px;line-height:1.55}
html footer.ft>.wrap{display:block;width:min(1180px,100% - 32px);margin-inline:auto}
html footer.ft .ft-cols{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:36px 32px}
html footer.ft .ft-brand img{display:block;width:52px;height:52px;margin-bottom:18px}
html footer.ft p{margin:0 0 12px;max-width:none;color:inherit;font-size:inherit;line-height:inherit;text-shadow:none}
html footer.ft .ft-brand p a{display:block;width:fit-content}
html footer.ft h4{font-family:inherit;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:#f1ede4;margin:0 0 14px}
html footer.ft ul{list-style:none;margin:0;padding:0}
html footer.ft li{margin:0 0 8px;padding:0;background:none}html footer.ft li::before{content:none}
html footer.ft a{color:#c9c5d3;text-decoration:none}
html footer.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
html footer.ft .ft-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;color:#8f8d99}
html footer.ft .ft-bar a+a{margin-left:22px}
@media(max-width:960px){html footer.ft .ft-cols{grid-template-columns:repeat(4,minmax(0,1fr))}html footer.ft .ft-brand{grid-column:1/-1}}
@media(max-width:700px){html footer.ft{padding:30px 0 16px;line-height:1.5}
  /* on a phone only the contact details; the link columns are in the menu anyway (Richard 2026-10-07) */
  html footer.ft .ft-cols{display:block}html footer.ft .ft-cols>div:not(.ft-brand){display:none}
  html footer.ft .ft-brand a{display:block;padding:9px 0}
  html footer.ft .ft-brand{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
  html footer.ft .ft-brand>a:first-child{grid-row:span 3;padding:0}html footer.ft .ft-brand img{width:44px;height:44px;margin:0}
  html footer.ft .ft-brand p{margin:0}html footer.ft .ft-brand p a{display:inline-block;margin-right:18px}
  html footer.ft .ft-brand .ft-open{font-size:14px}
  html footer.ft .ft-bar{flex-direction:column;gap:0;margin-top:16px;padding-top:12px;font-size:13px}html footer.ft .ft-bar a{display:inline-block;padding:11px 0}}
/* the site's icons: hand-drawn Doodle Icons (CC0) with Tabler (MIT) for the gaps, in theStart red, files made by
   tools/get-icons.mjs (assets/icons-hand/LICENSE.txt). Richard 2026-10-07: no AI icons; "Start with C and fill in the
   rest". Size: --hs on the row. */
img.hi{display:block;width:var(--hs,52px);height:var(--hs,52px)}
/* the menu sits in the same place on every page (home and VR were 10 px off) */
nav.top>.wrap{width:min(1180px,100% - 32px)}nav.top .nav-in{height:70px;gap:18px}nav.top .nav-in .logo{width:46px;height:46px}

/* "Live rooms" drops down the three rooms, each in its room's own look (Richard 2026-10-21: "a dropdown falls with all
   three the live rooms so they can choose it directly. Have the three also have their own theme"). Made by nav.js.
   Harbor Hotel: the hotel's postcard (cream paper, the photo with a margin, Gloock). Undercover: the agency (Tektur,
   agent green, target corners on the photo). Chernobyl: the zone (stencil letters, radiation yellow, a hazard band).
   Opens on hover or keyboard focus, closes a moment after the pointer leaves; in the ☰ menu a list under the link. */
nav.top .rd{position:relative;display:flex;align-items:center}
nav.top .rd-panel{position:absolute;top:100%;left:-12px;padding-top:24px;z-index:5;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease .12s,transform .16s ease .12s,visibility 0s linear .28s}
nav.top .rd:hover>.rd-panel,nav.top .rd:focus-within>.rd-panel,nav.top .rd.open>.rd-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
nav.top .rd.shut>.rd-panel{opacity:0;visibility:hidden;transition:none}
nav.top .rd-box{display:grid;grid-template-columns:repeat(3,216px);gap:10px;padding:10px;background:#0d0d10;border:1px solid #2a2a33;border-radius:8px;
  box-shadow:0 28px 60px -22px rgba(0,0,0,.9)}
nav.top .nav-links .rd-room{display:block;overflow:hidden;border-radius:6px;white-space:normal;text-shadow:none;color:#fff;background:var(--rd-ink)}
nav.top .nav-links .rd-room::before,nav.top .nav-links .rd-room::after{content:none}
nav.top .rd-img{position:relative;display:block;height:120px;overflow:hidden}
nav.top .rd-img img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .25s ease}
nav.top .rd-fx{position:absolute;inset:0;pointer-events:none}
nav.top .rd-name{display:block;padding:12px 14px 2px;font-weight:400;font-size:24px;line-height:1.05;color:var(--rd-acc)}
nav.top .nav-links .rd-room small{display:block;padding:3px 14px 14px;font:500 13px/1.4 'Outfit',system-ui,sans-serif;color:var(--rd-mute);text-wrap:balance}
nav.top .rd-room:hover .rd-img img,nav.top .rd-room:focus-visible .rd-img img{filter:brightness(1.2) saturate(1.1)}
nav.top .rd-room:hover .rd-name,nav.top .rd-room:focus-visible .rd-name{text-decoration:underline;text-decoration-color:var(--rd-line);
  text-decoration-thickness:2px;text-underline-offset:5px}
nav.top .nav-links .rd-room:focus-visible{outline:2px solid var(--rd-line);outline-offset:2px}
nav.top .nav-links .rd-room.here{box-shadow:inset 0 0 0 2px var(--rd-line)}
nav.top .rd-harbor{--rd-ink:#f3ecd9;--rd-acc:#2a2418;--rd-mute:#5a4f3c;--rd-line:#b3121f}
nav.top .rd-harbor .rd-img{height:112px;margin:8px 8px 0;border-radius:2px}
nav.top .rd-harbor .rd-name{font-family:'Gloock',Georgia,serif;font-size:25px}
nav.top .rd-undercover{--rd-ink:#060b10;--rd-acc:#39ff88;--rd-mute:#9fb0bb;--rd-line:#39ff88}
nav.top .rd-undercover .rd-name{font-family:'Tektur','Outfit',sans-serif;font-weight:700;font-size:19px;letter-spacing:.14em;text-transform:uppercase;padding-top:15px}
nav.top .rd-undercover .rd-fx{--c:#39ff88;background:
  linear-gradient(var(--c),var(--c)) top 10px left 10px/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) top 10px left 10px/2px 16px no-repeat,
  linear-gradient(var(--c),var(--c)) top 10px right 10px/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) top 10px right 10px/2px 16px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom 10px left 10px/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom 10px left 10px/2px 16px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom 10px right 10px/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom 10px right 10px/2px 16px no-repeat}
nav.top .rd-chernobyl{--rd-ink:#0a0b07;--rd-acc:#d6ff2e;--rd-mute:#a9ab98;--rd-line:#d6ff2e}
nav.top .rd-chernobyl .rd-name{font-family:'Big Shoulders Stencil Display','Big Shoulders Display',Impact,sans-serif;font-weight:800;font-size:28px;
  letter-spacing:.04em;text-transform:uppercase}
nav.top .rd-chernobyl .rd-fx{top:auto;height:7px;background:repeating-linear-gradient(-45deg,#ffb020 0 7px,#0a0b07 7px 14px)}
@media(max-width:1080px){
  nav.top .nav-links.open .rd{display:block;align-self:stretch}
  nav.top .rd-panel,nav.top .rd.shut>.rd-panel{position:static;padding-top:14px;opacity:1;visibility:visible;transform:none;transition:none}
  nav.top .rd-box{grid-template-columns:1fr;gap:12px;padding:0 0 0 14px;background:none;border:0;border-left:2px solid #2a2a33;border-radius:0;box-shadow:none}
  nav.top .nav-links .rd-room{display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:center;background:none;border-radius:0}
  nav.top .rd-img,nav.top .rd-harbor .rd-img{grid-row:span 2;width:72px;height:44px;margin:0;border-radius:4px}
  nav.top .rd-name{padding:0;font-size:20px}
  nav.top .nav-links .rd-room small{padding:0}
  nav.top .rd-harbor{--rd-acc:#f3ecd9;--rd-mute:#b9b3a3}
  nav.top .rd-undercover .rd-name{padding:0}
  nav.top .rd-undercover .rd-fx{display:none}
  nav.top .rd-chernobyl .rd-fx{height:4px}
}
@media(prefers-reduced-motion:reduce){nav.top .rd-panel{transition:none}}
/* the ☰ menu scrolls clear of the phone bar: its last link (Contact) never ends under Boek nu / WhatsApp (2026-10-21, with
   the three rooms in it the menu is longer than a short phone) */
@media(max-width:700px){nav.top .nav-links.open{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}