/* The Sugar Room · Home
   Concept: the walk-in. The hero is the door: you walk through the bakery and into the room as you scroll,
   and arrive inside, where the page opens on the room across a pink neon seam. Then the week, three ways
   into the night, the room full, the way in, and where to find the door. */

.page-home {
  --hm-rose: #b0145a;                     /* brand pink, deepened for the light bakery band */
  --hm-bronze: #7a5a22;                   /* brand gold, deepened for the light bakery band */
}

/* ---------- Hero: the door ----------
   A neon-rimmed arch with the night behind it. The headline reads in a Z around the door ("Walk through"
   left, "the bakery." right, the neon "Keep walking." under it) and ends on the one CTA, centred on the door's
   axis at the threshold. Scrolling walks through: the stage is pinned while the hero's extra height scrolls
   past, main.js writes that progress to --hp (0 to 1), the copy parts like a pair of doors and
   js/hero-door.js moves the three.js camera through the arch into the room. .hm-portal is both the no-WebGL
   door and the box the 3D door is fitted to, so keep the two in sync through these variables. */

.hm-hero {
  --hp: 0;
  --gut: max(4vw, 20px);
  --door-h: min(72svh, 50vw);
  --door-w: calc(var(--door-h) * 0.56);   /* the arch is 0.56 wide per unit of height; hero-door.js uses the same */
  --door-top: 14svh;
  --side: calc(50vw - var(--door-w) / 2 - var(--gut) - 32px);   /* each column beside the door, clear of the glow */
  --t: min(6.2vw, 11svh);                                         /* headline size */
  position: relative;
  height: 210vh;
  height: 210svh;
  padding: 0;
  background: var(--ink);
}
.hm-hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(34% 44% at 50% 50%, rgba(255, 79, 160, 0.16), transparent 70%),
    linear-gradient(to bottom, var(--ink) 0 82%, #120d0e 92%, var(--ink));
}

/* Over the 3D hero the header gets a soft scrim instead of its solid bar (main.js adds that after the hero). */
.page-home .site-header:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(11, 8, 8, 0.72), rgba(11, 8, 8, 0)) no-repeat;   /* no repeat into the 1px border row */
}

.hm-portal {
  position: absolute;
  left: calc(50% - var(--door-w) / 2);
  top: var(--door-top);
  width: var(--door-w);
  height: var(--door-h);
  border-radius: 999px 999px 2px 2px;
  overflow: hidden;
  background: var(--ink-3);
  box-shadow:
    0 0 0 2px #ffd6ea,
    0 0 0 5px rgba(255, 79, 160, 0.9),
    0 0 34px 8px rgba(255, 79, 160, 0.55),
    0 0 140px 30px rgba(255, 79, 160, 0.2);
  cursor: pointer;
  transform: scale(calc(1 + var(--hp) * var(--hp) * 3.4));   /* the walk-through without WebGL */
  transform-origin: 50% 62%;
  transition: opacity 0.9s ease;
}
.hm-portal-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) contrast(1.06) saturate(0.95); }   /* close to the 3D door's grade */
.hm-hero-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
/* WebGL is drawing (or about to draw) the door: the CSS one stays in the layout as the click target and to keep
   the video decoding, but out of sight. If the GL context is lost, both classes go and it comes back. */
.hm-hero.gl-on .hm-hero-gl { opacity: 1; }
.hm-hero.gl-pending .hm-portal,
.hm-hero.gl-on .hm-portal { opacity: 0; transform: none; }

.hm-hero-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hm-hero-ui a, .hm-hero-ui button { pointer-events: auto; }

.hm-hero-top {
  position: absolute;
  top: var(--door-top);
  left: var(--gut);
  right: var(--gut);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 32px;
  opacity: calc(1 - var(--hp) * 3);
}
.hm-hero-top > * { max-width: var(--side); }
.hm-hero-top .eyebrow { text-wrap: balance; }
.hm-status {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
}
.hm-status-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.hm-status.is-open .hm-status-dot { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.hm-status.is-open .hm-status-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--pink);
  animation: hm-ping 2.4s ease-out infinite;
}
@keyframes hm-ping {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

.hm-hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t);
  letter-spacing: -0.045em;
  color: var(--cream);
}
.hm-l1,
.hm-l2 {
  position: absolute;
  display: block;
  width: min-content;           /* one word per line: "Walk / through", "the / bakery." */
  max-width: var(--side);
  line-height: 0.95;
  text-shadow: 0 6px 40px rgba(11, 8, 8, 0.55);
  opacity: calc(1 - var(--hp) * 3);
}
.hm-l1 { left: var(--gut); top: calc(var(--door-top) + var(--door-h) * 0.16); transform: translate3d(calc(var(--hp) * -12vw), 0, 0); }
.hm-l2 { right: var(--gut); top: calc(var(--door-top) + var(--door-h) * 0.44); text-align: right; transform: translate3d(calc(var(--hp) * 12vw), 0, 0); }

/* The neon sign: Sacramento is monoline, so with a white core and a pink halo it reads as bent glass tube.
   It closes the right-hand column, off the footage. Scrolling only moves and fades it (no filter), so the
   glow is painted once instead of on every frame. */
.hm-hero-title .hm-neon {
  position: absolute;
  right: var(--gut);
  top: calc(var(--door-top) + var(--door-h) * 0.44 + var(--t) * 2.3);   /* just under "bakery." */
  font-size: min(5.6vw, 10svh);
  line-height: 1;
  white-space: nowrap;
  color: #ffe8f3;
  text-shadow:
    0 0 0.03em #fff,
    0 0 0.1em #ffa6cf,
    0 0 0.24em rgba(255, 79, 160, 0.95),
    0 0 0.6em rgba(255, 79, 160, 0.7),
    0 0 1.3em rgba(255, 79, 160, 0.42),
    0 0.04em 0.9em rgba(11, 8, 8, 0.7);       /* a soft dark backing so the tube reads over anything */
  transform-origin: 100% 50%;
  transform: translate3d(calc(var(--hp) * 12vw), 0, 0);
  opacity: calc(1 - var(--hp) * 3);
  will-change: transform, opacity;
}
.hm-neon-in { display: inline-block; }

/* The one CTA, on the door's axis in the light at the threshold, styled as another piece of tube. */
.hm-hero-foot {
  position: absolute;
  left: 50%;
  bottom: calc((100svh - var(--door-top) - var(--door-h)) / 2 - 24px);
  translate: -50% 0;
  transform: translate3d(0, calc(var(--hp) * 60px), 0);
  opacity: calc(1 - var(--hp) * 3.2);
}
.hm-hero-book {
  min-height: 48px;
  padding: 0 26px;
  border: 1.5px solid #ffd6ea;
  background: rgba(11, 8, 8, 0.35);
  color: #ffe8f3;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--pink), 0 0 18px rgba(255, 79, 160, 0.6), inset 0 0 12px rgba(255, 79, 160, 0.35);
  white-space: nowrap;
}
.hm-hero-book:hover { background: var(--pink); color: #15060d; }

.hm-scroll-cue {
  position: absolute;
  right: var(--gut);
  bottom: max(3svh, 16px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: calc(1 - var(--hp) * 5);
}
.hm-scroll-cue i {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--pink), transparent);
  transform-origin: top;
  animation: hm-drip 2.2s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@keyframes hm-drip {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hm-hero-motion {
  position: absolute;
  left: var(--gut);
  bottom: max(3svh, 16px);
  opacity: calc(1 - var(--hp) * 4);
}

/* Mid-walk the copy is invisible: take it out of hit-testing and the tab order too. */
.hm-hero.is-walking :is(.hm-hero-top, .hm-hero-foot, .hm-scroll-cue, .hm-hero-motion) { visibility: hidden; }

/* Through the door: the room holds clear, then dims as the page carries on over it. */
.hm-hero-fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to bottom, rgba(11, 8, 8, 0.3), var(--ink));
  opacity: calc((var(--hp) - 0.92) * 6);
  pointer-events: none;
}

/* Intro starting state, before main.js takes over (the head script's timer lifts it if a script fails).
   The CTA starts dim rather than gone, so it is never missing while scripts load. */
.js-intro .hm-hero-top > *,
.js-intro .hm-hero-title,
.js-intro .hm-scroll-cue > *,
.js-intro .hm-portal { opacity: 0; }
.js-intro .hm-hero-foot > * { opacity: 0.4; }

/* Portrait screens: the headline sits above the arch, the neon sign below it. */
@media (max-aspect-ratio: 4/5) {
  .hm-hero {
    --hm-t: min(11.5vw, 7.4svh);
    --door-top: calc(14svh + var(--hm-t) * 2.1 + 36px);
    --door-h: min(43svh, 110vw);
    height: 180vh;
    height: 180svh;
  }
  .hm-hero-stage {
    background:
      radial-gradient(50% 34% at 50% 50%, rgba(255, 79, 160, 0.16), transparent 70%),
      var(--ink);
  }
  .hm-hero-top { top: 9svh; }
  .hm-hero-top > * { max-width: none; }
  .hm-hero-title { font-size: var(--hm-t); }
  .hm-l1, .hm-l2 { width: auto; max-width: none; white-space: nowrap; }
  .hm-l1 { top: 14svh; }
  .hm-l2 { top: calc(14svh + 1.04em); }
  .hm-hero-title .hm-neon {
    right: auto;
    left: 50%;
    translate: -50% 0;
    top: calc(var(--door-top) + var(--door-h) + 1.5svh);
    font-size: min(15vw, 8.4svh);
    transform-origin: 50% 50%;
    transform: scale(calc(1 + var(--hp) * 0.4));
  }
  .hm-hero-foot { bottom: max(4svh, 24px); }
  .hm-scroll-cue { display: none; }
}

@media (max-width: 760px) {
  .hm-hero-top, .hm-hero-foot { display: none; }      /* the sticky Book button is already on screen */
  .hm-hero-motion { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .hm-hero { --door-h: min(33svh, 110vw); }
}

/* Short landscape screens (phones on their side): no walk-through, everything on one screen. */
@media (min-aspect-ratio: 4/5) and (max-height: 540px) {
  .hm-hero { --door-h: 64svh; --door-top: 20svh; height: 100vh; height: 100svh; }
  .hm-hero-top, .hm-scroll-cue { display: none; }
  .hm-hero { --t: min(5.4vw, 11svh); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hero { height: 100vh; height: 100svh; }
  .hm-status.is-open .hm-status-dot::after, .hm-scroll-cue i { animation: none; }
}

/* ---------- First-visit loader ---------- */

.sr-loader { display: none; }
.sr-first .sr-loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--ink);
}
.sr-loader-mark { display: grid; justify-items: center; gap: 26px; }
.sr-loader-logo { width: min(240px, 58vw); height: auto; }
.sr-loader-bar {
  width: min(200px, 46vw);
  height: 1px;
  overflow: hidden;
  background: var(--line);
}
/* Creeps forward on its own while the scripts download; main.js then drives it from what is ready. */
.sr-loader-bar i {
  display: block;
  height: 100%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  transform: scaleX(0.06);
  transform-origin: left;
  animation: sr-creep 5s cubic-bezier(0.1, 0.6, 0.2, 1) forwards;
}
@keyframes sr-creep { to { transform: scaleX(0.55); } }

/* ---------- Shared bits for this page ---------- */

.hm-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px 8px;
  border-bottom: 1px solid rgba(255, 79, 160, 0.55);
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.hm-link .hm-arr { color: var(--pink); transition: transform 0.25s ease; }
.hm-link:hover { color: var(--pink-soft); border-color: var(--pink); }
.hm-link:hover .hm-arr { transform: translateX(5px); }

.hm-split-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.hm-split-head > div { min-width: 0; }
.hm-split-head h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.hm-split-head h2 em,
.hm-rooms-head h2 em,
.hm-ways-intro h2 em,
.hm-visit-info h2 em,
.page-home .cta-band h2 em {
  font-style: italic;
  color: var(--pink);
  text-shadow: 0 0 22px rgba(255, 79, 160, 0.35);
}
.hm-split-head--compact { margin-bottom: clamp(26px, 4vw, 40px); }
.hm-split-head--compact h2 { font-size: clamp(34px, 4.6vw, 56px); }

/* ---------- The door ---------- */

.page-home .hm-door { padding: 0; background: var(--ink); }

.hm-door-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
}

.hm-door-copy { min-width: 0; }

/* The room photo beside the arrival copy. */
.hm-door-fig {
  position: relative;
  z-index: 2;
  width: clamp(150px, 28vw, 360px);
  margin: 0;
}
.hm-door-fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--ink-3);
}
.hm-door-fig figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11, 8, 8, 0.74);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hm-door-back {
  position: relative;
  padding-block: clamp(96px, 12vw, 150px) clamp(80px, 11vw, 140px);
}
/* The seam: a thin pink neon line behind the photos. */
.hm-door-back::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 79, 160, 0), var(--pink) 18%, var(--pink) 82%, rgba(255, 79, 160, 0));
  box-shadow: 0 0 16px 1px rgba(255, 79, 160, 0.7), 0 0 44px 4px rgba(255, 79, 160, 0.25);
}

.hm-door-back .hm-door-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.hm-door-back .hm-door-fig {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
}
.hm-door-back .hm-door-fig img {
  border: 1px solid rgba(255, 79, 160, 0.4);
  box-shadow: 0 0 0 6px rgba(255, 79, 160, 0.07), 0 40px 90px -30px rgba(255, 79, 160, 0.5);
}

.hm-door-back .hm-door-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

/* Label pinned to the middle of the seam on wide screens. */
.hm-door-seam {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 79, 160, 0.55);
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 0 26px -6px rgba(255, 79, 160, 0.7);
  color: var(--pink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hm-door-seam::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
}

.hm-door-reveal {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hm-door-reveal em {
  color: var(--pink);
  text-shadow: 0 0 22px rgba(255, 79, 160, 0.45);
}
.hm-door-body {
  margin-top: 26px;
  max-width: 50ch;
  color: var(--muted);
  font-size: 17px;
}
.hm-door-more { margin-top: 30px; }

/* ---------- This week ---------- */

.page-home .marquee + .hm-week { border-top: 0; }   /* the marquee already draws the rule */

.page-home .hm-week {
  padding-block: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}

/* A ruled programme: the 1px gaps draw the rules at every breakpoint. */
.hm-week-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-block: 1px solid var(--line);
  background: var(--line);
}
.hm-week-list > li { display: flex; min-width: 0; background: var(--ink-2); }

.hm-night {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 26px 24px 28px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.hm-night::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pink);
  box-shadow: 0 0 14px rgba(255, 79, 160, 0.8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.hm-night:hover,
.hm-night:focus-visible { background-color: rgba(255, 79, 160, 0.06); }
.hm-night:hover::before,
.hm-night:focus-visible::before { transform: scaleX(1); }

.hm-night-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hm-night-day::after {
  content: "→";
  content: "→" / "";
  color: var(--pink);
  letter-spacing: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hm-night:hover .hm-night-day::after,
.hm-night:focus-visible .hm-night-day::after { opacity: 1; transform: none; }

.hm-night h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.08;
}
.hm-night p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.hm-night-meta {
  margin-top: auto;
  padding-top: 8px;
  color: var(--cream);
  opacity: 0.72;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

/* ---------- Three ways into the night ---------- */

.page-home .hm-rooms {
  background:
    radial-gradient(45% 35% at 88% 6%, rgba(255, 79, 160, 0.1), transparent 70%),
    var(--ink);
}

.hm-rooms-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 20px 64px;
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 80px);
}
.hm-rooms-head > div { min-width: 0; }
.hm-rooms-head h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6.2vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.hm-rooms-head > p { max-width: 38ch; color: var(--muted); font-size: 17px; }

/* A staggered triptych: the middle panel drops, the third sits between. */
.hm-rooms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.hm-panel { position: relative; min-width: 0; }
.hm-panel:nth-child(2) { margin-top: clamp(56px, 9vw, 132px); }
.hm-panel:nth-child(3) { margin-top: clamp(28px, 4.5vw, 66px); }

.hm-panel-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #2c1d22 0%, #120c0d 100%);
}
.hm-panel:nth-child(2) .hm-panel-media { aspect-ratio: 3 / 4; }
.hm-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hm-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11, 8, 8, 0.8) 0%, rgba(11, 8, 8, 0.35) 14%, rgba(11, 8, 8, 0) 30%),
    linear-gradient(to top, rgba(11, 8, 8, 0.94) 0%, rgba(11, 8, 8, 0.4) 30%, rgba(11, 8, 8, 0) 56%);
}
.hm-panel:hover .hm-panel-media img { transform: scale(1.045); }
.hm-panel:focus-within .hm-panel-media { outline: 2px solid var(--gold); outline-offset: 4px; }

.hm-panel-no,
.hm-panel-tag {
  position: absolute;
  z-index: 1;
  top: 16px;
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(11, 8, 8, 0.85);
}
.hm-panel-no {
  left: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
}
.hm-panel-tag {
  right: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The headline hangs off the bottom edge of the photo. */
.hm-panel h3 {
  position: relative;
  margin-top: -0.62em;
  padding-left: 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hm-panel h3 em {
  font-style: italic;
  color: var(--pink);
  text-shadow: 0 0 22px rgba(255, 79, 160, 0.4);
}
.hm-panel-body { min-width: 0; }
.hm-panel-body p {
  margin-top: 16px;
  max-width: 34ch;
  color: var(--muted);
  font-size: 15.5px;
}
.hm-panel .hm-link { margin-top: 18px; }
/* The arrow link covers the whole panel. */
.hm-panel .hm-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hm-panel--room .hm-panel-media img { object-position: 50% 45%; }
.hm-panel--bar .hm-panel-media img { object-position: 50% 30%; }
.hm-panel--private .hm-panel-media img { object-position: 50% 50%; }

/* ---------- Gallery ---------- */

.page-home .hm-gallery {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}
/* The 3:4 night shots trim a sliver at 4:5: keep the faces and the signs, lose the floor. */
.hm-gallery .slot { object-position: 50% 30%; }
.hm-gallery .tile-reel .reel { object-position: 50% 50%; }

/* ---------- Pick your way in ---------- */

.page-home .hm-ways { background: var(--ink); }

.hm-ways-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.hm-ways-intro { min-width: 0; }
.hm-ways-intro h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.hm-ways-intro > p:not(.eyebrow) {
  margin-top: 20px;
  max-width: 36ch;
  color: var(--muted);
  font-size: 17px;
}

.hm-ways-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.hm-ways-list > li { border-bottom: 1px solid var(--line); }

.hm-way {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 6px 20px;
  align-items: center;
  padding: 26px 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.hm-way:hover,
.hm-way:focus-visible { background-color: rgba(255, 79, 160, 0.05); }

.hm-way-no {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
}
.hm-way-name {
  grid-column: 2;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
}
.hm-way-desc {
  grid-column: 2;
  max-width: 48ch;
  color: var(--muted);
  font-size: 15.5px;
}
.hm-way-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--pink);
  font-size: 20px;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.hm-way:hover .hm-way-arrow,
.hm-way:focus-visible .hm-way-arrow {
  background: var(--pink);
  border-color: var(--pink);
  color: #15060d;
  transform: translateX(4px);
}

/* ---------- Visit ---------- */

.page-home .hm-visit {
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 116px);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(42% 80% at 20% 50%, rgba(255, 79, 160, 0.13), transparent 72%),
    var(--ink);
}

.hm-visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* The real sign: the pink neon script on the building out front, with its glow
   spilling past the frame onto the page. */
.hm-visit-sign {
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
}
.hm-visit-sign::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 79, 160, 0.3), rgba(255, 79, 160, 0));
  animation: hm-hum 6s ease-in-out infinite;
}
.hm-visit-sign img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 40% 50%;
  border: 1px solid rgba(255, 79, 160, 0.4);
  border-radius: var(--radius);
  background: var(--ink-3);
  box-shadow: 0 0 0 6px rgba(255, 79, 160, 0.07), 0 40px 90px -30px rgba(255, 79, 160, 0.55);
}
.hm-visit-sign figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 79, 160, 0.45);
  border-radius: 999px;
  background: rgba(11, 8, 8, 0.78);
  color: var(--pink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hm-visit-sign figcaption::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
}

.hm-visit-info { min-width: 0; }
.hm-visit-info h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

.hm-nowrap { white-space: nowrap; }

/* Four facts on a two-by-two ruled grid. */
.hm-visit-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 28px;
  margin: clamp(28px, 4vw, 40px) 0 0;
}
.hm-visit-facts > div {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hm-visit-facts dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hm-visit-facts dd {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
}
.hm-visit-facts dd small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.hm-visit-facts .todo {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  font-family: var(--sans);
}
.hm-visit-info .cta-row { align-items: center; gap: 14px 28px; margin-top: 36px; }

@keyframes hm-hum {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .hm-week-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-rooms-head { grid-template-columns: minmax(0, 1fr); }
  .hm-panel h3 { font-size: clamp(38px, 5vw, 56px); }
}

@media (max-width: 860px) {
  /* The seam label drops into the copy column. */
  .hm-door-seam {
    position: static;
    transform: none;
    margin-bottom: 22px;
  }

  .hm-rooms-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hm-panel,
  .hm-panel:nth-child(2),
  .hm-panel:nth-child(3) {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 0;
  }
  .hm-panel:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
  .hm-panel:nth-child(2) .hm-panel-media { order: 2; aspect-ratio: 4 / 5; }
  .hm-panel h3 { margin-top: 0; padding-left: 0; font-size: clamp(36px, 6vw, 52px); }

  .hm-ways-grid,
  .hm-visit-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the sign becomes a wide band above the facts. */
  .hm-visit-sign { max-width: 600px; }
  .hm-visit-sign img { aspect-ratio: 4 / 3; object-position: 50% 52%; }
  .hm-visit-sign::before { inset: -14% 0; }
}

@media (max-width: 760px) {
  .hm-door-grid,
  .hm-door-back .hm-door-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hm-door-back .hm-door-copy,
  .hm-door-back .hm-door-fig { grid-column: 1; grid-row: auto; }
  .hm-door-back { padding-block: 64px 72px; }
  .hm-door-back .hm-door-copy { order: -1; padding-top: 0; }
  .hm-door-back .hm-door-fig { width: 100%; justify-self: stretch; margin-top: 32px; }
  .hm-door-back .hm-door-fig img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
  .hm-door-fig figcaption { left: 8px; bottom: 8px; padding: 5px 10px; font-size: 10px; letter-spacing: 0.12em; }

  .hm-panel,
  .hm-panel:nth-child(2),
  .hm-panel:nth-child(3) { display: block; }
  .hm-panel-media,
  .hm-panel:nth-child(2) .hm-panel-media { aspect-ratio: 4 / 3; }
  .hm-panel h3 { margin-top: -0.6em; padding-left: 16px; font-size: clamp(40px, 12vw, 56px); }
  .hm-panel--room .hm-panel-media img { object-position: 50% 35%; }
  .hm-panel--bar .hm-panel-media img { object-position: 50% 10%; }
  .hm-panel--private .hm-panel-media img { object-position: 50% 42%; }

  .hm-way { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px 14px; padding: 22px 4px; }
  .hm-way-no { font-size: 19px; }
  .hm-way-arrow { width: 44px; height: 44px; font-size: 18px; }

  .hm-visit-sign figcaption { left: 10px; bottom: 10px; padding: 6px 12px; font-size: 10px; letter-spacing: 0.14em; }
  .hm-visit-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hm-visit-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding-block: 16px; }
  .hm-visit-facts > div:last-child { border-bottom: 1px solid var(--line); }
  .hm-visit-facts dt { padding-top: 5px; }
  .hm-visit-facts dd { margin: 0; font-size: 19px; }
}

@media (max-width: 420px) {
  .hm-week-list { grid-template-columns: minmax(0, 1fr); }
  .hm-night { padding: 22px 18px 24px; }
  .hm-door-seam { white-space: normal; letter-spacing: 0.18em; }
  .hm-visit-facts > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hm-visit-facts dt { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-link,
  .hm-link .hm-arr,
  .hm-night,
  .hm-night::before,
  .hm-night-day::after,
  .hm-panel-media img,
  .hm-way,
  .hm-way-arrow { transition: none; }
  .hm-link:hover .hm-arr,
  .hm-panel:hover .hm-panel-media img,
  .hm-way:hover .hm-way-arrow,
  .hm-way:focus-visible .hm-way-arrow { transform: none; }
  .hm-visit-sign::before { animation: none; }
}