/* ==========================================================================
   Rock 'n' Bowl Motel, Bristol — design system
   The neon sign above The Lanes. Same late-night family — warm ink room,
   film grain, sentence-case swagger — wearing motel iconography: a flickering
   VACANCY neon, doors you pick, key fobs, a roadside marquee.
   Fraunces (display) · Archivo (body) · Space Mono (front-desk ledger).
   Tokens are namespaced --rb-* so third-party embeds (Headfirst defines
   generic globals) can't clobber the system.
   ========================================================================== */

:root {
  /* the room at night */
  --rb-ink:        #14100d;
  --rb-ink-2:      #1e1712;
  --rb-ink-3:      #2a1f16;
  --rb-line:       rgba(247, 239, 226, 0.14);
  --rb-line-soft:  rgba(247, 239, 226, 0.08);

  /* light */
  --rb-cream:      #f7efe2;
  --rb-cream-70:   rgba(247, 239, 226, 0.72);
  --rb-cream-50:   rgba(247, 239, 226, 0.52);

  /* neon — amber leads (the sign), pink hums (VACANCY),
     orange is the thread back down to The Lanes */
  --rb-amber:      #ffb43a;
  --rb-amber-hi:   #ffd06e;
  --rb-pink:       #ff4d9e;
  --rb-orange:     #ff5a24;
  --rb-red:        #e5342b;
  --rb-teal:       #43c6b5;

  --rb-font-display: "Fraunces", Georgia, serif;
  --rb-font-body:    "Archivo", -apple-system, Helvetica, sans-serif;
  --rb-font-mono:    "Space Mono", "Courier New", monospace;

  --rb-gutter: clamp(20px, 4.5vw, 64px);
  --rb-measure: 62ch;
  --rb-radius: 14px;
  --rb-header-h: 76px;

  --rb-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--rb-ink);
  color: var(--rb-cream);
  font-family: var(--rb-font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--rb-amber); color: var(--rb-ink); }

/* film grain over everything — the family warmth */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- type -- */
h1, h2, h3 {
  font-family: var(--rb-font-display);
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.display {
  font-style: italic;
  font-weight: 680;
  font-size: clamp(3rem, 9.5vw, 7.5rem);
  line-height: 0.98;
}
.display .lift { color: var(--rb-accent, var(--rb-amber)); }

h2, .h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-style: italic; font-weight: 660; }
h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-style: normal; letter-spacing: 0; }

.eyebrow {
  font-family: var(--rb-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rb-accent, var(--rb-amber));
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 2.2em; height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lede { font-size: clamp(1.05rem, 1.45vw, 1.3rem); color: var(--rb-cream-70); max-width: var(--rb-measure); }
.muted { color: var(--rb-cream-50); }
.mono  { font-family: var(--rb-font-mono); }

/* lane arrows — inherited from downstairs; buttons keep the family momentum */
.arrows { display: inline-flex; gap: 3px; vertical-align: baseline; }
.arrows i {
  width: 0.5em; height: 0.5em;
  background: currentColor;
  clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
}

/* googie sparkle — the Motel's own mark. Four points with concave bézier
   edges (not a spiky polygon) so its curves rhyme with the Fraunces italic. */
.star {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 2C35.5 19 45 28.5 62 32C45 35.5 35.5 45 32 62C28.5 45 19 35.5 2 32C19 28.5 28.5 19 32 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 2C35.5 19 45 28.5 62 32C45 35.5 35.5 45 32 62C28.5 45 19 35.5 2 32C19 28.5 28.5 19 32 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -------------------------------------------------------------- layout -- */
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--rb-gutter); }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); position: relative; }
.section-head { margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.section-head .lede { margin-top: 1.1rem; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 3000;
  background: var(--rb-amber); color: var(--rb-ink);
  padding: 10px 18px; border-radius: 6px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* -------------------------------------------------------------- header -- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 1000;
  height: var(--rb-header-h);
  display: flex; align-items: center;
  transition: background 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--rb-ink) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--rb-line-soft);
}
.site-header .wrap {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* the mark: starburst + live-type lockup, sibling of the Lanes' arrows mark */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand .star {
  font-size: 42px;
  color: var(--rb-amber);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--rb-amber) 60%, transparent));
  animation: star-breathe 5s ease-in-out infinite;
}
@keyframes star-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(6deg); }
}
.brand-name {
  font-family: var(--rb-font-body);
  font-weight: 800; font-style: italic;
  font-size: 1.72rem; letter-spacing: -0.02em;
  line-height: 1;
}
/* the strap: what the place IS — reads at a glance, not as a footnote */
.brand-city {
  display: block;
  font-family: var(--rb-font-mono); font-style: normal; font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rb-amber); margin-top: 4px;
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.site-nav a {
  text-decoration: none; font-weight: 500; font-size: 0.95rem;
  color: var(--rb-cream-70);
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--rb-cream); }
.site-nav a.btn { color: var(--rb-btn-fg); }
.site-nav a.btn:hover { color: var(--rb-btn-fg); }
.site-nav a[aria-current="page"] { color: var(--rb-cream); }
.site-nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 2px;
  background: var(--rb-amber); border-radius: 2px;
}
.site-nav .ext { color: var(--rb-orange); }
.site-nav .ext:hover { color: var(--rb-orange); opacity: 0.85; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  --rb-btn-bg: var(--rb-amber);
  --rb-btn-fg: var(--rb-ink);
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--rb-btn-bg); color: var(--rb-btn-fg);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 0.9em 1.6em; border: 0; border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s var(--rb-ease-out), box-shadow 0.25s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--rb-btn-bg) 42%, transparent);
}
.btn .arrows { transition: transform 0.25s var(--rb-ease-out); }
.btn:hover .arrows { transform: translateX(4px); }
.btn--ghost {
  --rb-btn-bg: transparent; --rb-btn-fg: var(--rb-cream);
  border: 1px solid var(--rb-line);
  background: transparent;
}
.btn--ghost:hover { box-shadow: none; border-color: var(--rb-cream-50); }
.btn--sm { padding: 0.62em 1.15em; font-size: 0.88rem; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rb-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--rb-header-h) + 3rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  isolation: isolate;
}
.hero-media, .hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--rb-ink) 72%, transparent), transparent 22%),
    linear-gradient(to top, var(--rb-ink) 4%, color-mix(in srgb, var(--rb-ink) 55%, transparent) 38%, color-mix(in srgb, var(--rb-ink) 30%, transparent) 100%),
    radial-gradient(90% 60% at 70% 20%, transparent, color-mix(in srgb, var(--rb-ink) 46%, transparent));
}
.hero .display { max-width: 11em; margin-block: 1.2rem 1.4rem; }
.hero .lede { margin-bottom: 2.2rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero--page { min-height: min(72vh, 720px); }

/* ------------------------------------------------- the VACANCY neon ----- */
/* Vertical tube letters on the hero's edge. The NO is switched off — the
   oldest joke on the interstate. One letter flickers like it means it. */
.vacancy {
  position: absolute;
  right: clamp(1rem, 5vw, 4.5rem);
  top: calc(var(--rb-header-h) + 4vh);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.55em;
  padding: 1.1em 0.72em;
  border: 2px solid rgba(247, 239, 226, 0.16);
  border-radius: 10px;
  background: color-mix(in srgb, var(--rb-ink) 55%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: var(--rb-font-mono);
  user-select: none;
}
.vacancy .no {
  font-size: 0.62rem; letter-spacing: 0.3em;
  color: rgba(247, 239, 226, 0.16);       /* unlit tube */
  -webkit-text-stroke: 0.4px rgba(247, 239, 226, 0.22);
}
.vacancy b {
  font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.6rem);
  line-height: 1;
  color: #ffd9ec;
  text-shadow:
    0 0 6px  var(--rb-pink),
    0 0 16px var(--rb-pink),
    0 0 38px color-mix(in srgb, var(--rb-pink) 65%, transparent);
}
.vacancy b.flick  { animation: neon-flick  4.2s infinite; }
.vacancy b.flick2 { animation: neon-flick2 7.3s infinite; }
@keyframes neon-flick {
  0%, 8.4%, 9.6%, 22%, 24%, 100% { opacity: 1; }
  8.5%, 9.5%, 22.5%, 23.5% { opacity: 0.18; text-shadow: none; }
}
@keyframes neon-flick2 {
  0%, 61%, 63.4%, 64.2%, 100% { opacity: 1; }
  61.5%, 63%, 64% { opacity: 0.24; text-shadow: none; }
}

/* (the reader-board card this replaced lives on in the sign strip below —
   same letter-slot mechanic, laid flat and full-bleed) */

/* --------------------------------------------------------------- doors -- */
/* Rooms as motel doors, numbered, light leaking out from under. Hover and
   the door cracks open. */
.doors {
  display: grid; gap: 1.3rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.door {
  --rb-accent: var(--rb-amber);
  display: flex; flex-direction: column; gap: 1rem;
  text-decoration: none;
  perspective: 900px;
}
.door-frame {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(105deg, rgba(247, 239, 226, 0.05), transparent 45%),
    linear-gradient(160deg, var(--rb-ink-3), var(--rb-ink-2) 55%, #181210);
  border: 1px solid var(--rb-line-soft);
  border-bottom-width: 0;
  /* the jamb — a door needs a frame around it */
  box-shadow:
    inset 0 0 44px rgba(0, 0, 0, 0.4),
    0 0 0 6px var(--rb-ink),
    0 0 0 7px var(--rb-line-soft);
  overflow: visible;
  transform-origin: left center;
  transition: transform 0.55s var(--rb-ease-out);
}
/* panel mouldings */
.door-frame::before {
  content: ""; position: absolute; inset: 30% 16% 44%;
  border: 1.5px solid var(--rb-line-soft); border-radius: 4px;
  background: linear-gradient(150deg, rgba(0, 0, 0, 0.22), transparent 60%);
}
.door-frame::after {
  content: ""; position: absolute; inset: 62% 16% 8%;
  border: 1.5px solid var(--rb-line-soft); border-radius: 4px;
  background: linear-gradient(150deg, rgba(0, 0, 0, 0.22), transparent 60%);
}
/* the name plaque — rooms here go by name, not number */
.door-plate {
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%);
  font-family: var(--rb-font-display); font-style: italic; font-weight: 650;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  white-space: nowrap;
  letter-spacing: 0.01em;
  color: var(--rb-ink);
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--rb-accent) 82%, white),
    var(--rb-accent) 45%,
    color-mix(in srgb, var(--rb-accent) 72%, black));
  padding: 0.3em 1.15em;
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 7px rgba(0, 0, 0, 0.55);
}
/* plaque screws */
.door-plate::before, .door-plate::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.door-plate::before { left: 6px; }
.door-plate::after { right: 6px; }
.door-peep {
  position: absolute; top: 22.5%; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(247, 239, 226, 0.75), rgba(12, 9, 7, 0.95) 62%);
  box-shadow: 0 0 0 2.5px rgba(247, 239, 226, 0.16);
}
.door-handle {
  position: absolute; right: 9%; top: 52%;
  width: 7px; height: 26px; border-radius: 4px;
  background: linear-gradient(var(--rb-cream-50), var(--rb-cream-70));
}
/* the hang tag on the handle — carries the sleeps info, swings when the
   door opens */
.door-tag {
  position: absolute; right: 4.5%; top: 55%;
  max-width: 46%;
  text-align: center;
  font-family: var(--rb-font-mono); font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase;
  line-height: 1.45;
  color: var(--rb-cream-70);
  background: var(--rb-ink-3);
  border: 1px solid var(--rb-line);
  border-radius: 7px;
  padding: 1.15em 0.7em 0.75em;
  transform: rotate(6deg);
  transform-origin: top center;
  transition: transform 0.55s var(--rb-ease-out), color 0.4s, border-color 0.4s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
/* the punched hole it hangs by */
.door-tag::before {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid var(--rb-line);
  background: rgba(0, 0, 0, 0.5);
}
.door:hover .door-tag,
.door:focus-visible .door-tag {
  transform: rotate(-5deg);
  color: var(--rb-cream);
  border-color: color-mix(in srgb, var(--rb-accent) 45%, transparent);
}
/* the light under the door */
.door-glow {
  position: absolute; left: 4%; right: 4%; bottom: -2px; height: 3px;
  background: var(--rb-accent);
  border-radius: 999px;
  filter: blur(3px);
  opacity: 0.5;
  transition: opacity 0.4s, box-shadow 0.4s;
}
.door:hover .door-frame,
.door:focus-visible .door-frame {
  transform: rotateY(-17deg);
}
.door:hover .door-glow,
.door:focus-visible .door-glow {
  opacity: 1;
  box-shadow: 0 0 30px 9px color-mix(in srgb, var(--rb-accent) 55%, transparent);
}
.door-info p { color: var(--rb-cream-70); font-size: 0.94rem; max-width: 30ch; }
.door-info a { color: var(--rb-accent); }

/* --------------------------------------------------------- sign strip -- */
/* The sign out front, laid flat: a full-bleed board running between two
   solid amber rails, straight under the hero. Same letters, same tracks —
   they still slot in one by one when the strip scrolls into view. */
.signstrip {
  position: relative;
  background: #0d0a07;
  border-block: 10px solid var(--rb-amber);
  box-shadow:
    0 0 46px color-mix(in srgb, var(--rb-amber) 20%, transparent),
    inset 0 16px 34px rgba(0, 0, 0, 0.55),
    inset 0 -16px 34px rgba(0, 0, 0, 0.55);
}
/* dark seams where board meets rail */
.signstrip::before, .signstrip::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px;
  background: rgba(0, 0, 0, 0.55);
}
.signstrip::before { top: 0; }
.signstrip::after { bottom: 0; }
.signstrip-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.7em 1.5em;
  padding: 1.5em var(--rb-gutter);
  font-family: var(--rb-font-mono);
  font-size: clamp(0.8rem, 1.55vw, 1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center;
  color: var(--rb-cream);
}
.signstrip-item { white-space: nowrap; }
.signstrip-item b { color: var(--rb-amber); font-weight: 700; }
.signstrip-item--neon {
  color: #ffd9ec;
  text-shadow: 0 0 7px var(--rb-pink), 0 0 20px color-mix(in srgb, var(--rb-pink) 60%, transparent);
}
.signstrip .star {
  flex: 0 0 auto;
  font-size: 0.55em;
  color: color-mix(in srgb, var(--rb-amber) 60%, transparent);
}
/* each character, waiting to be slotted onto the track */
.signstrip .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(-0.5em) rotateX(72deg);
}
.signstrip.is-set .ch {
  opacity: 1; transform: none;
  transition: opacity 0.28s ease-out, transform 0.5s var(--rb-ease-out);
  transition-delay: var(--ch-delay, 0ms);
}

/* ------------------------------------------------------------- pillars -- */
/* the downstairs — photographic tiles pointing at The Lanes */
.pillars {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, 1fr);
}
.pillar {
  --rb-accent: var(--rb-orange);
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 38vw, 440px);
  border-radius: var(--rb-radius);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  border: 1px solid var(--rb-line-soft);
}
.pillar img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) brightness(0.8);
  transition: transform 0.7s var(--rb-ease-out), filter 0.5s;
}
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--rb-ink) 88%, transparent), transparent 62%);
}
.pillar:hover img { transform: scale(1.045); filter: saturate(1.05) brightness(0.95); }
.pillar-body { position: relative; z-index: 1; padding: 1.6rem 1.7rem; }
.pillar-kicker {
  font-family: var(--rb-font-mono); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rb-accent); margin-bottom: 0.5rem;
}
.pillar h3 {
  font-family: var(--rb-font-display); font-style: italic;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 660;
  margin-bottom: 0.35rem;
}
.pillar p { color: var(--rb-cream-70); max-width: 34ch; font-size: 0.98rem; }
.pillar .go {
  position: absolute; top: 1.3rem; right: 1.4rem; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--rb-ink) 55%, transparent);
  border: 1px solid var(--rb-line);
  color: var(--rb-accent);
  transition: transform 0.3s var(--rb-ease-out), background 0.3s, color 0.3s;
}
.pillar:hover .go { transform: translateX(4px); background: var(--rb-accent); color: var(--rb-ink); }

/* --------------------------------------------------------------- rules -- */
/* house rules — starburst bullets (the sign again, tiny) */
.rules { list-style: none; padding: 0; display: grid; gap: 0.9rem; max-width: var(--rb-measure); }
.rules li { display: flex; gap: 0.9em; align-items: flex-start; color: var(--rb-cream-70); }
.rules li::before {
  content: ""; flex: 0 0 auto; margin-top: 0.34em;
  width: 0.85em; height: 0.85em;
  background: var(--rb-accent, var(--rb-amber));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 2C35.5 19 45 28.5 62 32C45 35.5 35.5 45 32 62C28.5 45 19 35.5 2 32C19 28.5 28.5 19 32 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 2C35.5 19 45 28.5 62 32C45 35.5 35.5 45 32 62C28.5 45 19 35.5 2 32C19 28.5 28.5 19 32 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------- split media -- */
.split {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
}
.split figure {
  border-radius: var(--rb-radius); overflow: hidden;
  border: 1px solid var(--rb-line-soft);
  position: relative;
}
.split figure img { width: 100%; height: 100%; object-fit: cover; }
.split .amenities { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.amenity {
  font-family: var(--rb-font-mono); font-size: 0.76rem; letter-spacing: 0.06em;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--rb-line);
  color: var(--rb-cream-70);
}

/* ------------------------------------------------------------- gallery -- */
.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(140px, 16vw, 230px);
}
.gallery figure {
  border-radius: var(--rb-radius); overflow: hidden;
  border: 1px solid var(--rb-line-soft);
  position: relative;
}
.gallery figure img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.6s var(--rb-ease-out), filter 0.4s;
}
.gallery figure:hover img { transform: scale(1.04); filter: saturate(1.05); }
.gallery figure:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery figure:nth-child(2) { grid-column: span 2; }
.gallery figure:nth-child(3) { grid-column: span 2; }
.gallery figure:nth-child(4) { grid-column: span 3; }
.gallery figure:nth-child(5) { grid-column: span 3; }
.gallery figcaption {
  position: absolute; left: 0.9rem; bottom: 0.7rem;
  font-family: var(--rb-font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rb-cream-70);
  background: color-mix(in srgb, var(--rb-ink) 72%, transparent);
  padding: 4px 10px; border-radius: 999px;
}

/* --------------------------------------------------------- flip (cream) -- */
.flip {
  background: var(--rb-cream); color: var(--rb-ink);
  --rb-line: rgba(20, 16, 13, 0.16);
  --rb-line-soft: rgba(20, 16, 13, 0.1);
}
.flip .lede, .flip p { color: color-mix(in srgb, var(--rb-ink) 74%, transparent); }
.flip .muted { color: color-mix(in srgb, var(--rb-ink) 50%, transparent); }
.flip ::selection { background: var(--rb-ink); color: var(--rb-cream); }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  border-top: 1px solid var(--rb-line-soft);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem;
  background: color-mix(in srgb, var(--rb-ink) 60%, black);
}
.footer-sign {
  font-family: var(--rb-font-display); font-style: italic; font-weight: 660;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
}
.footer-sign em { color: var(--rb-amber); font-style: inherit; }
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: 3rem;
}
.footer-grid h4 {
  font-family: var(--rb-font-mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rb-cream-50); margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.footer-grid a { text-decoration: none; color: var(--rb-cream-70); transition: color 0.2s; }
.footer-grid a:hover { color: var(--rb-amber-hi); }
.hours { font-family: var(--rb-font-mono); font-size: 0.88rem; }
.hours li { display: flex; justify-content: space-between; gap: 1.5rem; color: var(--rb-cream-70); }
.footer-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rb-line-soft);
  font-size: 0.82rem; color: var(--rb-cream-50);
}
.footer-foot a { color: inherit; }

/* -------------------------------------------------------------- reveal -- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s, transform 0.8s var(--rb-ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- big stamp bg -- */
.stamp {
  position: absolute; z-index: 0; pointer-events: none;
  font-family: var(--rb-font-display); font-style: italic; font-weight: 700;
  font-size: clamp(9rem, 24vw, 22rem);
  line-height: 1; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--rb-line-soft);
  inset-inline-start: -0.08em; top: -0.14em;
  user-select: none;
}

/* ------------------------------------------------------------ notices -- */
.notice-18 {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--rb-font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1.5px solid var(--rb-amber); color: var(--rb-amber);
  padding: 8px 16px; border-radius: 6px;
  transform: rotate(-1.2deg);
}
.tbc-note {
  border: 1.5px dashed color-mix(in srgb, var(--rb-teal) 55%, transparent);
  border-radius: var(--rb-radius);
  padding: 1.1rem 1.4rem;
  font-family: var(--rb-font-mono);
  font-size: 0.82rem; letter-spacing: 0.03em;
  color: var(--rb-teal);
  max-width: 72ch;
}

/* -------------------------------------------------------------- embeds -- */
/* the ibex booking iframe gets a lit reception desk to sit on */
.embed-shell {
  background: var(--rb-cream); color: var(--rb-ink);
  border-radius: var(--rb-radius);
  padding: clamp(1.2rem, 3vw, 2.5rem);
  border: 1px solid var(--rb-line-soft);
  min-height: 480px;
}
.embed-fallback {
  display: grid; place-items: center; text-align: center;
}
.embed-fallback[hidden] { display: none; }
.embed-fallback {
  min-height: 400px; gap: 0.4rem;
  border: 1.5px dashed rgba(20, 16, 13, 0.25);
  border-radius: 10px;
  padding: 2rem;
}
.embed-fallback .mono { font-size: 0.8rem; color: rgba(20,16,13,0.55); max-width: 46ch; }
.embed-shell .ibex-loading-message {
  font-family: var(--rb-font-mono);
  text-align: center; padding: 2rem;
  color: rgba(20,16,13,0.55);
}
.embed-shell .ibex-frame iframe { width: 100%; border: 0; }

/* booking-page layout: desk + aside, stacking below 900px */
.book-layout {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  align-items: start;
}

/* aside cards on the booking page */
.desk-card {
  background: var(--rb-ink-2);
  border: 1px solid var(--rb-line-soft);
  border-radius: var(--rb-radius);
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.desk-card h3 { font-family: var(--rb-font-display); font-style: italic; font-size: 1.5rem; }
.desk-card p { color: var(--rb-cream-70); font-size: 0.95rem; }
.desk-card .mono a { color: var(--rb-amber); }

/* -------------------------------------------------------------- mobile -- */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rb-line); border-radius: 8px;
  color: var(--rb-cream); padding: 8px 10px; cursor: pointer;
}
.nav-toggle svg { display: block; }

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .book-layout { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 28vw, 220px); }
  .gallery figure:nth-child(n) { grid-column: span 2; grid-row: auto; }
  .vacancy { top: auto; bottom: 32vh; right: 0.8rem; padding: 0.8em 0.55em; }
  .site-nav {
    position: fixed; inset: var(--rb-header-h) 0 auto 0;
    flex-direction: column; align-items: flex-start;
    gap: 0;
    background: color-mix(in srgb, var(--rb-ink) 96%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rb-line-soft);
    padding: 0.8rem var(--rb-gutter) 1.4rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.7rem 0; font-size: 1.15rem; width: 100%; }
  .site-nav .btn { margin-top: 0.8rem; width: auto; }
  .nav-toggle { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vacancy b.flick, .vacancy b.flick2 { animation: none; }
  .brand .star { animation: none; }
  .signstrip .ch { opacity: 1; transform: none; transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}