/* Escape The Space — home page, "Hazard Poster" design (2026-11-08).
 * Loaded after styles.css on index.html only. Everything is scoped under body.hp so the
 * other pages keep today's look. styles.css still supplies the shared pieces this page
 * relies on: the gift card pop-up, the Common questions bar and the header Search button.
 * The page commits to one look (yellow and black) in both light and dark mode.
 */
body.hp {
  --hp-y: #faec17;
  --hp-k: #0b0b0b;
  --hp-k2: #151515;
  --hp-w: #fbf8ea;
  --hp-paper: #ffffff; /* content bands: white with black type (Andrew, Nov 8) */
  --hp-w-soft: rgba(251, 248, 234, 0.7);
  --hp-font: "Archivo", "Arial Black", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hp-max: 1200px;
  --hp-pad: 96px; /* one vertical rhythm for every content band */
  background: var(--hp-y);
  color: var(--hp-k);
  font-family: var(--hp-font);
  font-variation-settings: "wdth" 100;
  font-size: 17px;
  line-height: 1.5;
}
body.hp section { padding: 0; }
/* Content bands share one top/bottom padding. Selector beats the reset above. */
body.hp .hp-rooms, body.hp .hp-sizes, body.hp .hp-visit, body.hp .hp-close { padding-block: var(--hp-pad); }
body.hp p { color: inherit; margin: 0; }
body.hp h1, body.hp h2, body.hp h3 { margin: 0; color: inherit; font-family: var(--hp-font); }
body.hp a { color: inherit; }
body.hp img { max-width: 100%; }
body.hp a:focus-visible, body.hp button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.hp-wrap {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

/* Display type: expanded, heavy, uppercase */
.hp-display {
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-wrap: balance;
}

/* Buttons: square, black on yellow (inverted on black sections) */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--hp-font); font-weight: 800; font-size: 14px; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 13px 20px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--hp-k); color: var(--hp-y) !important;
  transition: transform 0.15s ease;
}
.hp-btn:hover { transform: translateY(-2px); }
.hp-btn-lg { padding: 18px 28px; font-size: 15px; }
.hp-ghost { background: transparent; color: var(--hp-k) !important; box-shadow: inset 0 0 0 2px var(--hp-k); }
.hp-hero .hp-ghost { background: var(--hp-paper); }
.hp-on-dark .hp-btn { background: var(--hp-y); color: var(--hp-k) !important; }
.hp-on-dark .hp-ghost { background: transparent; color: var(--hp-w) !important; box-shadow: inset 0 0 0 2px var(--hp-w); }

/* Sticker shadow so the logo's white border doesn't cut hard against the yellow:
   a hairline black outline plus a hard black offset, like a die-cut sticker (Andrew, Nov 8) */
.hp-logo-shadow { filter: drop-shadow(0.75px 0 0 #0b0b0b) drop-shadow(-0.75px 0 0 #0b0b0b) drop-shadow(0 0.75px 0 #0b0b0b) drop-shadow(0 -0.75px 0 #0b0b0b) drop-shadow(2px 3px 0 #0b0b0b); }

/* ── Header ───────────────────────────────────────────── */
.hp-nav { position: relative; z-index: 20; background: var(--hp-y); border: 0; box-shadow: none; }
.hp-nav-in { display: flex; align-items: center; gap: 28px; padding-block: 20px; }
.hp-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; font-variation-settings: "wdth" 112; white-space: nowrap; }
.hp-logo img { width: 26px; height: auto; }
.hp-links { display: flex; gap: 26px; margin-left: auto; }
.hp-links a { font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.hp-links a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hp-cta { display: flex; align-items: center; gap: 10px; }
.hp-menu { display: none; }
.hp-lbl-narrow { display: none; }
/* Hamburger: three bars that fold into an X while the menu is open */
.burger { position: relative; display: block; width: 20px; height: 14px; }
.burger i { position: absolute; left: 0; right: 0; height: 2.5px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 5.75px; }
.burger i:nth-child(3) { bottom: 0; }
[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }
/* The open menu's links: yellow on black. Needs body.hp so it beats "body.hp a { color: inherit }" */
/* Search button that assistant.js adds to the header: black to match */
body.hp .nav-search { background: transparent; color: var(--hp-k); border: 2px solid var(--hp-k); border-radius: 0; box-shadow: none; }
body.hp .nav-search:hover { background: var(--hp-k); color: var(--hp-y); }

/* ── Hero ─────────────────────────────────────────────── */
.hp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; padding-block: 36px 72px; }
.hp-kicker { font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px !important; }
.hp-hl { font-size: clamp(2.8rem, 8vw, 7.4rem); }
.hp-hl > span { display: block; }
.hp-out { color: transparent; -webkit-text-stroke: 3px var(--hp-k); }
.hp-lede { font-size: 20px; line-height: 1.45; max-width: 44ch; margin: 30px 0 30px !important; font-weight: 500; }
.hp-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* The whole keyhole, shadow included, sits inside the hero with room to spare */
.hp-mark { justify-self: center; width: 230px; padding: 10px 14px 28px; }
.hp-mark img { display: block; width: 100%; height: auto; transform: rotate(3deg); filter: drop-shadow(1.5px 0 0 #0b0b0b) drop-shadow(-1.5px 0 0 #0b0b0b) drop-shadow(0 1.5px 0 #0b0b0b) drop-shadow(0 -1.5px 0 #0b0b0b) drop-shadow(7px 9px 0 #0b0b0b); }

.hp-stripe { height: 24px; background: repeating-linear-gradient(-45deg, var(--hp-k) 0 20px, var(--hp-y) 20px 40px); }
.hp-ticker { background: var(--hp-k); color: var(--hp-y); }
/* Facts list: 2 columns on laptop, 1 on phone, a small yellow square before each */
.hp-ticker-in { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 64px; padding-block: 20px; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
/* Running banner: big condensed caps, no markers, one row at every width */
.hp-ticker-in.is-rot { padding-block: 22px; font-weight: 900; font-variation-settings: "wdth" 75; font-size: clamp(15px, calc((100vw - 48px) / 19.6), 40px); line-height: 1.1; letter-spacing: 0.02em; }
.hp-ticker-in.is-rot li::before { content: none; }
.hp-ticker-in li { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.hp-ticker-in li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; background: var(--hp-y); }
/* Rotating banner: one phrase at a time slides in from the right and out to the left (script adds .is-rot) */
.hp-ticker { overflow: hidden; }
.hp-ticker-in.is-rot { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hp-ticker-in.is-rot li { grid-area: 1 / 1; justify-content: center; transform: translateX(100vw); transition: none; }
.hp-ticker-in.is-rot li.is-on { transform: none; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.hp-ticker-in.is-rot li.is-out { transform: translateX(-100vw); transition: transform 0.6s cubic-bezier(.6,0,.8,.3); }
@media (prefers-reduced-motion: reduce) {
  .hp-ticker-in.is-rot li, .hp-ticker-in.is-rot li.is-out { transform: none; opacity: 0; }
  .hp-ticker-in.is-rot li.is-on { opacity: 1; transition: opacity 0.4s ease; }
  .hp-ticker-in.is-rot li.is-out { transition: opacity 0.3s ease; }
}

/* ── Rooms (black) ────────────────────────────────────── */
.hp-dark { background: var(--hp-k); color: var(--hp-w); }
.hp-h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 14px !important; }
.hp-sub { max-width: 48ch; font-size: 18px; margin-bottom: 40px !important; }
.hp-dark .hp-sub { color: var(--hp-w-soft); }
.hp-rmark { display: none; } /* phone only: keyhole beside the stacked "Pick / your / room." */
.hp-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; }
.hp-room { display: block; background: var(--hp-k2); text-decoration: none; color: var(--hp-w) !important; }
/* height:auto matters: the width/height attributes would otherwise force 1000px-tall images */
.hp-room img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.hp-room-b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px 22px; align-items: baseline; }
.hp-n { grid-row: span 3; font-weight: 900; font-variation-settings: "wdth" 125; font-size: 52px; line-height: 0.8; color: var(--hp-y); }
.hp-room h3 { font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: -0.01em; font-variation-settings: "wdth" 112; }
.hp-room .hp-meta { font-size: 14px; font-weight: 600; color: var(--hp-y); }
.hp-room p { font-size: 15px; color: var(--hp-w-soft); }
.hp-room:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.hp-more { margin-top: 32px; }

/* ── Group sizes (white) ──────────────────────────────── */
.hp-sizes { background: var(--hp-paper); }
.hp-sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--hp-k); }
.hp-sgrid > div { padding: 22px 22px 26px 0; }
.hp-sgrid > div + div { padding-left: 22px; border-left: 2px solid var(--hp-k); }
.hp-sgrid b { display: block; font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(40px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.hp-sgrid span { display: block; margin-top: 8px; font-weight: 600; font-size: 15px; }

/* ── Team wall ────────────────────────────────────────── */
.hp-wall { position: relative; background: var(--hp-y); }
.hp-wall img { display: block; width: 100%; height: 540px; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.hp-wall-box { position: absolute; left: max(24px, calc((100% - var(--hp-max)) / 2 + 24px)); bottom: 48px; max-width: 520px; background: var(--hp-y); padding: 28px 32px; margin-right: 24px; }
.hp-wall-box h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 10px !important; }
.hp-wall-box p { font-weight: 500; }

/* ── Visit (black) ────────────────────────────────────── */
.hp-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.hp-vgrid h3 { font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: 0.04em; color: var(--hp-y); margin-bottom: 10px !important; font-variation-settings: "wdth" 112; }
.hp-vgrid p { color: var(--hp-w-soft); font-size: 16px; }
.hp-vgrid a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Closing band (white) ─────────────────────────────── */
.hp-close { background: var(--hp-paper); }
.hp-close .hp-h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.hp-close .hp-sub { margin-bottom: 0 !important; }
.hp-close .hp-ctas { margin-top: 30px; }

/* ── Footer ───────────────────────────────────────────── */
.hp-foot { background: var(--hp-k); color: var(--hp-w-soft); padding-block: 56px 40px; font-size: 15px; }
.hp-fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.hp-foot h4 { color: var(--hp-y); font-family: var(--hp-font); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px; }
.hp-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hp-foot a { color: var(--hp-w) !important; text-decoration: none; }
.hp-foot a:hover { text-decoration: underline; }
.hp-foot .hp-logo { color: var(--hp-w) !important; margin-bottom: 14px; }
.hp-foot p { max-width: 38ch; }
.hp-fbot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(251, 248, 234, 0.15); font-size: 13px; }

/* ── Tablet ───────────────────────────────────────────── */
@media (max-width: 960px) {
  body.hp { --hp-pad: 80px; }
  .hp-links { gap: 18px; }
  .hp-hero-in { grid-template-columns: minmax(0, 1fr) 200px; }
  .hp-mark { width: 170px; }
  .hp-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-sgrid > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hp-sgrid > div:nth-child(n+3) { border-top: 2px solid var(--hp-k); }
  .hp-fgrid { grid-template-columns: 1fr 1fr; }
}

/* ── Narrow laptop windows: full menu no longer fits, use the Menu button ── */
@media (max-width: 1020px) {
  .hp-nav-in { gap: 0 14px; flex-wrap: wrap; }
  .hp-cta { margin-left: auto; }
  /* Menu opens in the page flow under the header and pushes the page down (Andrew, Nov 8).
     The black band reaches both screen edges; the links line up with the logo. */
  .hp-links { order: 5; flex: 0 0 100%; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; position: static; background: var(--hp-paper); box-shadow: 0 0 0 100vmax var(--hp-paper), 0 2px 0 100vmax var(--hp-k), 0 -2px 0 100vmax var(--hp-k); clip-path: inset(-2px -100vmax); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.28s ease, margin 0.28s ease, padding 0.28s ease, visibility 0s linear 0.28s; }
  .hp-links.open { max-height: 360px; visibility: visible; margin: 22px 0 -20px; padding: 4px 0 6px; transition: max-height 0.28s ease, margin 0.28s ease, padding 0.28s ease, visibility 0s; }
  /* Open menu: white panel, black words, black dividers, black line top and bottom (Andrew, Nov 8) */
  body.hp .hp-links a { color: var(--hp-k); padding: 14px 0; font-size: 17px; font-weight: 700; border-bottom: 2px solid var(--hp-k); }
  body.hp .hp-links a:last-child { border-bottom: 0; }
  /* Icon header (Andrew, Nov 8): logo, then BOOK NOW, a search icon and a hamburger, all one height */
  .hp-cta { gap: 8px; }
  .hp-cta .hp-btn { order: 1; height: 44px; padding: 0 16px; font-size: 13px; }
  body.hp .hp-cta .nav-search { order: 2; width: 44px; height: 44px; padding: 0; justify-content: center; }
  /* Search and menu icons: white buttons, black icon and border, also when tapped (Andrew, Nov 8) */
  body.hp .hp-cta .nav-search, body.hp .hp-cta .nav-search:hover { background: var(--hp-paper); color: var(--hp-k); }
  .hp-cta .nav-search svg { width: 20px; height: 20px; }
  .hp-cta .nav-search-label, .hp-lbl-wide { display: none; }
  .hp-lbl-narrow { display: inline; }
  .hp-menu { order: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--hp-paper); color: var(--hp-k); border: 2px solid var(--hp-k); border-radius: 0; cursor: pointer; }
}

/* ── Phone ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hp-nav-in { gap: 0 12px; padding-block: 14px; }
  .hp-logo span { display: none; }
  .hp-logo img { width: 30px; }
  .hp-cta { margin-left: auto; }
  .hp-links.open { margin: 16px 0 -14px; }
  .hp-btn { padding: 11px 14px; font-size: 13px; }
  .hp-btn-lg { padding: 17px 20px; font-size: 14px; flex: 1; }

  .hp-hero-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 18px 44px; }
  .hp-mark { display: none; } /* phone: the menu logo is enough (Andrew, Nov 8) */
  .hp-kicker { margin-bottom: 14px !important; }
  .hp-hl { font-size: clamp(2.5rem, 13vw, 3.6rem); }
  .hp-out { -webkit-text-stroke: 2px var(--hp-k); }
  .hp-lede { font-size: 17px; margin: 22px 0 !important; }
  .hp-ticker-in { grid-template-columns: minmax(0, 1fr); gap: 9px; padding-block: 18px; font-size: 12px; }
  .hp-ticker-in.is-rot { padding-block: 16px; }

  body.hp { --hp-pad: 60px; }
  .hp-rhead { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 18px; }
  .hp-rmark { display: block; width: 100%; height: auto; transform: rotate(-3deg); filter: drop-shadow(1px 0 0 #0b0b0b) drop-shadow(-1px 0 0 #0b0b0b) drop-shadow(0 1px 0 #0b0b0b) drop-shadow(0 -1px 0 #0b0b0b) drop-shadow(4px 6px 0 #0b0b0b); }
  .hp-rhead .hp-h2 { margin-bottom: 0 !important; font-size: clamp(2.6rem, 14vw, 3.6rem); }
  .hp-rhead .hp-h2 span { display: block; }
  .hp-rgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hp-room { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .hp-room-b { padding: 12px 14px; gap: 2px 12px; }
  .hp-n { font-size: 40px; }
  .hp-room h3 { font-size: 17px; }
  .hp-room .hp-meta { font-size: 13px; }
  .hp-room p { font-size: 13.5px; line-height: 1.4; }
  .hp-sgrid b { font-size: clamp(26px, 9vw, 40px); font-variation-settings: "wdth" 112; } /* "10–14" stays on one line in its cell */
  .hp-sgrid > div + div { padding-left: 16px; }
  .hp-sgrid > div { padding-right: 12px; }
  .hp-wall img { height: 440px; }
  .hp-wall-box { left: 16px; right: 16px; bottom: 16px; margin-right: 0; padding: 20px; }
  .hp-vgrid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hp-fgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .burger i, .hp-links, .hp-links.open { transition: none; }
  .hp-btn { transition: none; }
  .hp-btn:hover { transform: none; }
}

/* Header Book button: white words on black, phone and desktop alike (Andrew, Nov 8) */
body.hp .hp-cta .hp-btn { color: var(--hp-paper) !important; }
/* Big Book a room buttons: white words on black too (Andrew, Nov 8) */
body.hp a.hp-btn[href="book.html"]:not(.hp-ghost) { color: var(--hp-paper) !important; }

/* Header logo: the yellow keyhole in a black square, the same size as the header buttons (Andrew, Nov 8) */
.logo-tile { display: grid; place-items: center; width: 44px; height: 44px; background: #0b0b0b; flex: 0 0 auto; }
b.logo-tile img { display: block; width: 23px; height: 32px; max-width: none; filter: none; }