/* Roomhook v3 — option 2, cofounder.co direction, with mindcloud.co type: medium Hanken Grotesk headlines over Inter text.
   A full-bleed pixel-art hero of The Larkfield, then a calm paper page: regular-weight sans, two-tone headlines,
   mono labels, numbered lists and soft product panels. Room statuses keep their own four colours:
   staying = blue · arriving = amber · free = green · closed = orange. */

/* Suisse Int'l (firecrawl.dev's type). The full Regular covers everything; the Medium/Semibold/Bold cuts here are the
   trial files, which only carry letters and a little punctuation, so they're limited to those characters (unicode-range):
   numbers and symbols in heavier text fall back to the full Regular. Needs a Suisse licence before this goes live. */
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-trial-medium.ttf") format("truetype"); font-weight: 500; font-display: swap;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A, U+00B7, U+00C0-00FF, U+2019; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-trial-semibold.ttf") format("truetype"); font-weight: 600; font-display: swap;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A, U+00B7, U+00C0-00FF, U+2019; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-trial-bold.ttf") format("truetype"); font-weight: 700; font-display: swap;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A, U+00B7, U+00C0-00FF, U+2019; }
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #f5f5f2;
  --bg-2: #efefeb;
  --panel: #f1f1ee;
  --paper: #fbfbf8;
  --white: #ffffff;
  --ink: #1c1917;
  --ink-80: #292524;
  --ink-60: #57534e;
  --ink-50: #79716b;
  --ink-35: rgba(38, 35, 35, .35);
  --line: rgba(32, 32, 32, .08);
  --line-2: rgba(32, 32, 32, .13);

  --blue: #1c6fd9;   --blue-l: #dae9fb;   --blue-t: #164f9c;
  --amber: #f59e0b;  --amber-l: #fdefd2;  --amber-t: #8a5300;
  --green: #34a853;  --green-l: #dff0d5;  --green-t: #22713a;
  --orange: #ff672f; --orange-l: #f7e0d6; --orange-t: #a83a12;

  /* room statuses take the leather of the key cards in the hero's trays */
  --stay: #7b1d22;   --stay-l: #f6e6e4;   --stay-t: #7b1d22;
  --arrive: #c9a45c; --arrive-l: #f8f0de; --arrive-t: #7a5a1c;
  --empty: #a2703d;  --empty-l: #f3e8db;  --empty-t: #6e4520;
  --closed: #2a2624; --closed-l: #ebe8e5; --closed-t: #2a2624;

  --sans: "Suisse Intl", "Inter", ui-sans-serif, system-ui, sans-serif;
  --display: "Suisse Intl", "Inter", ui-sans-serif, system-ui, sans-serif;
  --num: "Hanken Grotesk", "Inter", ui-sans-serif, sans-serif; /* room numbers stamped on the key cards: the Suisse trial has no digits in its heavier cuts */
  --mono: "IBM Plex Mono", "Geist Mono", ui-monospace, Menlo, monospace;

  --gutter: 28px;
  --max: 1220px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --card-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 12px 32px -14px rgba(20, 20, 20, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 var(--sans);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ---------- Type ---------- */

.h1 { font: 500 clamp(36px, 4.1vw, 56px)/1.06 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.h2 { font: 500 clamp(30px, 3.4vw, 46px)/1.1 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.h2 .soft, .h1 .soft { color: var(--ink-50); }
.lead { font-size: 17px; line-height: 1.45; letter-spacing: -.02em; color: var(--ink-80); max-width: 460px; text-wrap: pretty; }
.label { font: 400 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); }
.mono { font-family: var(--mono); }
.note-small { font: 400 12px/1.4 var(--mono); color: var(--ink-50); }

/* ---------- Buttons ---------- */

/* firecrawl.dev's buttons at our size (44px, 20px sides, 16px text; 34px and 14px in the nav): a flat fill with 10px
   corners, a faint white sheen from the top, a soft glow of its own colour pooled at the bottom, and a whisper of a
   drop shadow tinted the same colour. The quiet ones are just a 4% tint, no border, no shadow. */
.btn {
  --tint: 39, 32, 27;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: 10px;
  font: 500 16px/1 var(--sans); letter-spacing: -.2px; white-space: nowrap; border: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  transition: transform .15s var(--ease), background-color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-dark, .btn-red {
  color: #fff;
  box-shadow: inset 0 -6px 12px 0 rgba(var(--glow), .22), 0 2px 4px 0 rgba(var(--tint), .12), 0 1px 1px 0 rgba(var(--tint), .12),
    0 .5px .5px 0 rgba(var(--tint), .16), 0 .25px .25px 0 rgba(var(--tint), .2);
}
.btn-dark { --glow: 0, 0, 0; background-color: #27201b; }
.btn-dark:hover { background-color: #342b25; }
.btn-white { background-color: #fff; color: #2a2420; }
.btn-white:hover { background-color: #f6f4f1; }
.btn-line { background-color: rgba(0, 0, 0, .04); color: #2a2420; }
.btn-line:hover { background-color: rgba(0, 0, 0, .07); }
.btn svg { width: 16px; height: 16px; }

/* ---------- Nav: a frosted panel hanging from the top edge ---------- */

/* the panel is as wide as the page's content plus its own 20px inset, so the logo and the button line up with the content */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 max(8px, calc(var(--gutter) - 20px)); pointer-events: none; }
.nav-panel {
  pointer-events: auto; width: min(calc(var(--max) + 40px), 100%);
  background: rgba(245, 245, 242, .78);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 10px 30px -18px rgba(0, 0, 0, .35);
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
/* At the top of the page there is no panel: the nav sits straight on the hero. It hangs down once you scroll. */
.nav:not(.is-solid):not(.is-open) .nav-panel { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav:not(.is-solid):not(.is-open) .logo, .nav:not(.is-solid):not(.is-open) .logo-mark { color: #fff; }
.nav:not(.is-solid):not(.is-open) .nav-links a { color: rgba(255, 255, 255, .82); }
.nav:not(.is-solid):not(.is-open) .nav-login { color: rgba(255, 255, 255, .72); }
.nav:not(.is-solid):not(.is-open) .nav-links a:hover, .nav:not(.is-solid):not(.is-open) .nav-login:hover { color: #fff; }
.nav:not(.is-solid):not(.is-open) .nav-cta { background-color: #fff; color: #2a2420; box-shadow: none; }
.nav:not(.is-solid):not(.is-open) .nav-toggle { background: rgba(255, 255, 255, .16); color: #fff; }
.logo, .nav-links a, .nav-login { transition: color .35s; }
.nav-bar { display: flex; align-items: center; gap: 28px; min-height: 58px; padding: 9px 20px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 600 20px/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.logo-mark { width: 28px; height: 22px; color: #be2c36; transition: color .35s; } /* white over the hero, red once the panel is up */
.nav-links { display: flex; gap: 28px; margin-left: 20px; }
.nav-links a, .nav-login { font: 500 14px/1 var(--sans); letter-spacing: -.005em; color: rgba(30, 30, 30, .7); transition: color .2s; white-space: nowrap; }
@media (max-width: 1100px) { .nav-links { gap: 20px; } }
.nav-login { margin-left: auto; color: rgba(30, 30, 30, .6); }
.nav-links a:hover, .nav-login:hover { color: var(--ink); }
.nav-cta { min-height: 34px; padding: 0 12px; font-size: 14px; letter-spacing: -.16px; } /* the nav keeps the compact size */
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .nav { padding: 0 10px; }
  .nav-links, .nav-login { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-bar { gap: 10px; padding: 9px 10px 9px 16px; }
  .nav-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 100px; border: 0; background: rgba(30, 30, 30, .07); color: var(--ink); }
  .nav-toggle svg { width: 18px; height: 18px; }
  .nav.is-open .nav-bar { flex-wrap: wrap; }
  .nav.is-open .nav-links { display: flex; flex-direction: column; order: 5; width: 100%; gap: 0; margin: 4px 8px 4px 0; }
  .nav.is-open .nav-links a { padding: 13px 0; font-size: 17px; border-top: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .logo { font-size: 21px; }
  .logo-mark { width: 26px; height: 21px; }
}

/* ---------- Hero: the front desk at night ---------- */

.hero { position: relative; overflow: hidden; color: #fff; background: #82573a; }
.hero::before { /* warm shade behind the headline so it reads over the busy atrium */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 52%; pointer-events: none;
  background: radial-gradient(ellipse 78% 100% at 50% 0%, rgba(38, 20, 6, .82), rgba(38, 20, 6, .58) 55%, rgba(38, 20, 6, 0) 100%);
}
.hero-copy { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding-top: 120px; text-align: center; }
/* the stamp above the headline, after the Figma stamp: a perforated paper of #603b28 (the mask keeps a solid middle
   and punches round holes all along the edge) with a 5px margin round a dark label; the link sits straight on the paper.
   The drop shadow is on the link itself, outside the mask, so it isn't cut away. */
.hero-stamp { display: inline-flex; margin-bottom: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); transition: transform .3s var(--ease); }
.hero-stamp:hover { transform: translateY(-1px); }
.hs-in {
  --r: 1.6px;
  display: flex; align-items: stretch; padding: 5px; background: #603b28;
  font: 400 12px/1 var(--sans); letter-spacing: 0; white-space: nowrap; color: #fff;
  -webkit-mask:
    radial-gradient(var(--r), #0000 96%, #000) round calc(-1.4 * var(--r)) calc(-1.4 * var(--r)) / calc(2.8 * var(--r)) calc(2.8 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 2.8 * var(--r)) calc(100% - 2.8 * var(--r));
  mask:
    radial-gradient(var(--r), #0000 96%, #000) round calc(-1.4 * var(--r)) calc(-1.4 * var(--r)) / calc(2.8 * var(--r)) calc(2.8 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 2.8 * var(--r)) calc(100% - 2.8 * var(--r));
}
.hs-long, .hs-short, .hs-label { display: flex; align-items: center; height: 25px; padding: 0 13px; background: #2f190e; }
.hs-in i { display: none; }
.hs-in b { display: flex; align-items: center; height: 25px; padding: 0 7px 0 11px; font-weight: 600; }
.hero-stamp .hs-short { display: none; }
@media (max-width: 520px) {
  .hs-long, .hs-short { padding: 0 11px; }
  .hero-stamp .hs-long { display: none; }
  .hero-stamp .hs-short { display: flex; }
}
.hero h1 { max-width: 820px; margin: 0 auto; font-size: clamp(36px, 4vw, 56px); text-shadow: 0 2px 30px rgba(0, 20, 40, .35); }
.hero .lead { font-size: 16px; color: rgba(255, 255, 255, .9); margin: 18px auto 0; max-width: 600px; text-shadow: 0 1px 14px rgba(30, 14, 4, .7); }
.hero-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
/* the hero asks for an email to start moving in: a frosted field, and the red button beside it */
.hero-form { position: relative; flex-wrap: nowrap; }
.hero-field {
  display: flex; align-items: center; width: min(320px, 100%); height: 44px; padding: 0 18px;
  border-radius: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  transition: border-color .2s, background-color .2s;
}
.hero-field:focus-within { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .16); }
.hero-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 16px/1 var(--sans); letter-spacing: -.2px; color: #fff; }
.hero-field input::placeholder { color: rgba(255, 255, 255, .68); }
.btn-red { /* just a soft, dark drop below it: no edge line, no coloured haze */
  background-color: #be2c36;
  box-shadow: 0 4px 12px -4px rgba(40, 6, 10, .5);
}
.btn-red:hover { background-color: #c8343e; }
.hero-note { position: absolute; left: 0; right: 0; top: calc(100% + 8px); font-size: 13.5px; color: rgba(255, 244, 228, .9); text-shadow: 0 1px 10px rgba(30, 14, 4, .7); }
.hero-note.is-error { color: #ffd2b8; }
@media (max-width: 560px) {
  .hero-form { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .hero-field { width: 100%; }
}

.desk-stage {
  position: relative; z-index: 1;
  /* the counter is centred on the page, the art a little wider than the screen so the props at its ends run off the sides */
  width: max(108%, 1500px); aspect-ratio: 1605 / 980;
  left: 50%; transform: translateX(-50%);
  margin-top: 0; /* script.js pulls the art up so the iPad sits a fixed gap under the buttons */
}
.desk-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* the sharp art fades in over its soft copy, so there is no edge to see */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
}
.desk-soft {
  position: absolute; left: -3%; right: -3%; bottom: 0; height: 200%;
  display: flex; flex-direction: column;
  filter: blur(26px) saturate(1.1) brightness(.82);
}
.desk-soft img { display: block; width: 100%; height: 50%; object-fit: fill; }
.desk-soft img.is-mirror { transform: scaleY(-1); }
/* The iPad: its own layer on top of the art, standing on the counter */
.ipad { position: absolute; z-index: 2; left: var(--ix); bottom: var(--ib); width: var(--iw); transform: translateX(-50%); }
.ipad-body {
  position: relative; padding: 2.2%;
  border-radius: 4.2% / 6%;
  background: #141416;
  box-shadow:
    0 0 0 1px #3a3b3f,                    /* metal edge */
    0 0 0 2px #8d8f94,
    0 30px 40px -24px rgba(30, 15, 5, .55),
    0 8px 14px -6px rgba(30, 15, 5, .35);
}
.ipad-cam { position: absolute; top: 1.05%; left: 50%; width: .55%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a4660, #0b0d14 70%); }
.ipad-screen { position: relative; aspect-ratio: 1000 / 694; border-radius: 2.4% / 3.4%; overflow: hidden; background: var(--panel); }
.ipad-shadow { position: absolute; left: 4%; right: 4%; bottom: -3%; height: 6%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40, 20, 5, .45), transparent 70%); filter: blur(4px); z-index: -1; }
.screen-app {
  position: absolute; left: 0; top: 0; width: 1000px; height: 694px;
  transform-origin: 0 0; visibility: hidden;
  display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 8px;
  background: var(--panel); color: var(--ink);
  overflow: hidden;
}
.ipad-screen.is-fitted .screen-app { visibility: visible; }
/* The iPad's Overview, laid out after a budgeting dashboard: a top bar, a greeting with two actions and tonight's
   occupancy card over the inn's photo, four small stat cards beside a takings chart, then the keys and the arrivals.
   Drawn at 1000 x 694 and scaled to the screen. */
.screen-app.is-top { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 14px; }
.bo-bg { position: absolute; left: 0; top: 0; width: 100%; height: 430px; object-fit: cover; object-position: 50% 38%;
  -webkit-mask: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .45) 68%, transparent 94%); mask: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .45) 68%, transparent 94%); }
/* the photo runs on behind the first row of cards and dissolves into the page colour, with no edge: the fade to the
   panel colour is the top layer, so the side shading under it disappears with the photo */
.screen-app.is-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 430px; pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 241, 238, 0) 42%, rgba(241, 241, 238, .55) 66%, var(--panel) 94%), linear-gradient(180deg, rgba(24, 14, 8, 0) 18%, rgba(24, 14, 8, .45) 38%, rgba(24, 14, 8, 0) 60%); } /* a band of shade behind the greeting only, so the black logo keeps the bright sky */
.screen-app.is-top > * { position: relative; z-index: 2; }
.screen-app.is-top > .bo-bg { position: absolute; z-index: 0; }
.screen-app.is-top::before { z-index: 1; } /* the shading sits between the photo and the cards */
.bo-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; color: #fff; }
/* the inn's mark: a line-drawn palm, and its name set in a serif, both in near-black on the bright sky */
.bo-inn { display: flex; align-items: center; gap: 9px; }
.bo-crest { width: 30px; height: 30px; }
.bo-word b { display: block; font: italic 400 19px/1 Georgia, "Times New Roman", serif; letter-spacing: .01em; color: #1c1917; }
.bo-word small { display: block; margin-top: 3px; font: 500 8.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(28, 25, 23, .7); }
.bo-nav .av, .bo-me .av { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--stay); color: #f3dfb2; font: 600 11px/1 var(--mono); }
/* the page tabs hang from the top bezel like a MacBook's notch: the bezel's own black, square at the top, rounded at
   the foot, with concave "ears" (::before/::after) where it meets the screen's edge */
.bo-nav ul {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  display: flex; gap: 2px; padding: 6px 8px 8px; border-radius: 0 0 18px 18px; background: #141416;
}
.bo-nav ul::before, .bo-nav ul::after {
  content: ""; position: absolute; top: 0; width: 16px; height: 16px; background: #141416;
  -webkit-mask: radial-gradient(circle at var(--ear) 100%, #0000 15.5px, #000 16px); mask: radial-gradient(circle at var(--ear) 100%, #0000 15.5px, #000 16px);
}
.bo-nav ul::before { right: 100%; --ear: 0; }
.bo-nav ul::after { left: 100%; --ear: 100%; }
.bo-nav li { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.bo-nav li.is-on { background: #fff; color: var(--ink); font-weight: 500; }
.bo-me { display: flex; align-items: center; gap: 8px; }
.bo-me > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #141416; color: #fff; }
.bo-me > i svg { width: 15px; height: 15px; }
.bo-face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .3); } /* Ruth Lark (demo owner) */
.bo-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: auto; color: #fff; } /* the spare height goes above it, so more of the inn shows */
.bo-hero small { display: block; font-size: 12px; color: rgba(255, 255, 255, .75); }
.bo-hero h3 { margin-top: 6px; font: 500 32px/1.05 var(--display); letter-spacing: -.03em; }
.bo-btns { display: flex; gap: 8px; margin-bottom: 2px; } /* level with the greeting, at the right */
.bo-btns b { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 500; }
.bo-btns b.is-dark { background: #be2c36; color: #fff; } /* the hero button's red */
.bo-btns svg { width: 14px; height: 14px; }
.bo-mid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 10px; }
.bo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bo-stats section, .bo-chart, .bo-keys, .bo-bills { padding: 14px 15px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(30, 16, 6, .4); }
.bo-stats header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.25; color: var(--ink-80); white-space: nowrap; }
.bo-stats header i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink-60); }
.bo-stats header svg { width: 14px; height: 14px; }
.bo-stats b { display: block; margin-top: 14px; font: 500 26px/1 var(--display); letter-spacing: -.03em; }
.bo-stats b span { font-size: 15px; color: var(--ink-50); }
.bo-stats small { display: block; margin-top: 6px; font-size: 10.5px; color: var(--ink-50); }
.bo-stats em { font-style: normal; font-weight: 500; }
.is-red { color: var(--stay); } .is-gold { color: var(--arrive-t); } .is-green { color: var(--green-t); }
.bo-chart { display: flex; flex-direction: column; }
.bo-chart header { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-60); }
.bo-pill { font-style: normal; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; color: var(--ink-80); }
.bo-big { margin-top: 6px; font: 500 28px/1 var(--display); letter-spacing: -.03em; }
.bo-big span { font: 400 12px/1 var(--sans); letter-spacing: 0; color: var(--ink-50); }
.bo-bars { position: relative; flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; margin-top: 12px; min-height: 120px; }
.bo-bar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
/* each room is a slim pill on a faint track, a rich gradient of its colour (lighter at the top, deeper below); Room 7 carries the tooltip and a
   soft glow, and a dashed line marks the average rate */
.bo-bar::before { content: ""; position: absolute; left: 50%; bottom: 14.5px; top: 4px; width: 12px; margin-left: -6px; border-radius: 6px; background: var(--bg); }
.bo-bar i { position: relative; width: 12px; height: var(--h); border-radius: 6px; background: #d9d4cc; }
.bo-bar.is-direct i { background: linear-gradient(180deg, #a3323a, #6a161c); }
.bo-bar.is-site i { background: linear-gradient(180deg, #e0c07c, #b48d42); }
.bo-bar.is-free i { background: none; border: 1.5px dashed var(--line-2); }
.bo-bar.is-closed i { height: 12px; background: #d9d4cc; }
.bo-bar i::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: 3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.bo-bar.is-free i::after, .bo-bar.is-closed i::after { display: none; }
.bo-bar.is-on i { box-shadow: 0 0 0 4px rgba(123, 29, 34, .12), 0 6px 14px -4px rgba(123, 29, 34, .5); }
.bo-avg { position: absolute; left: 0; right: 0; bottom: calc(14.5px + var(--h)); border-top: 1px dashed rgba(28, 25, 23, .25); pointer-events: none; }
.bo-avg em { position: absolute; right: 0; bottom: 3px; font: 400 9.5px/1 var(--mono); font-style: normal; color: var(--ink-50); background: var(--white); padding-left: 4px; }
.bo-bar > span:last-child { font: 400 9.5px/1 var(--mono); color: var(--ink-50); }
.bo-tip { position: absolute; z-index: 1; bottom: calc(var(--h) + 22px); left: 50%; translate: -50% 0; padding: 7px 10px; border-radius: 9px; background: #1c1410; color: #fff; white-space: nowrap; font-size: 10.5px; line-height: 1.3; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.bo-tip b { display: block; font: 500 13px/1.2 var(--display); }
.bo-tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #1c1410; rotate: 45deg; }
.bo-low { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; } /* both cards as tall as the taller one */
.bo-keys header, .bo-bills header { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--ink-80); font-weight: 500; }
.bo-keys header em, .bo-bills header em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--ink-50); }
.ov-tags { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: auto 0; padding: 12px 0; } /* centred in the space under the heading */
/* each tag is the leather key card from the tray and the board (drawn by ::after), its room number set above it */
.ov-tags .mini-tag {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; height: auto; padding: 0; border: 0; border-radius: 0;
  cursor: pointer; font: 500 10px/1 var(--mono); letter-spacing: 0; text-shadow: none; transition: transform .25s var(--ease);
}
.ov-tags .mini-tag::after { content: ""; width: 100%; aspect-ratio: 3 / 5; background: var(--card) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 5px rgba(40, 18, 6, .28)); }
.ov-tags .mini-tag::before { display: none; }
.ov-tags .mini-tag.stay, .ov-tags .mini-tag.arrive, .ov-tags .mini-tag.empty, .ov-tags .mini-tag.closed { background: none; color: var(--ink-60); }
.ov-tags .mini-tag.stay { --card: url("assets/card-stay.webp"); --gold: #efd48e; --deboss: rgba(0, 0, 0, .45); }
.ov-tags .mini-tag.arrive { --card: url("assets/card-arrive.webp"); --gold: #866219; --deboss: rgba(255, 255, 255, .55); }
.ov-tags .mini-tag.empty { --card: url("assets/card-empty.webp"); --gold: #fbe3a3; --deboss: rgba(0, 0, 0, .4); }
.ov-tags .mini-tag.closed { --card: url("assets/card-closed.webp"); --gold: #d4b46a; --deboss: rgba(0, 0, 0, .6); }
/* ---- the Overview answers the pointer on its parts (icons, keys, bars, rows), never the whole card: a room lights up
   across keys, chart and arrivals (script.js) ---- */
.bo-stats header i { transition: background .25s, color .25s, border-color .25s; }
.bo-stats header i:hover { background: #141416; border-color: #141416; color: #fff; }
.bo-nav li { transition: background .2s, color .2s; }
.bo-nav li:not(.is-on):hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bo-btns b, .bo-pill, .bo-me > i { transition: transform .2s var(--ease), filter .2s, background .2s; }
.bo-btns b:hover { transform: translateY(-1px); filter: brightness(.94); }
.bo-pill:hover { background: var(--bg); }
.bo-me > i:hover { transform: scale(1.06); }
.ov-tags .mini-tag { cursor: default; transition: transform .3s var(--ease), opacity .25s; }
.ov-tags .mini-tag::after { transition: filter .3s var(--ease); }
.ov-tags .mini-tag.is-on { transform: translateY(-5px) rotate(-3deg); color: var(--ink); }
.ov-tags .mini-tag.is-on::after { filter: drop-shadow(0 9px 8px rgba(40, 18, 6, .32)); }
.bo-bar i, .bo-bar > span:last-child { transition: box-shadow .25s, opacity .25s, color .2s; }
.bo-bar .bo-tip { display: none; }
.bo-bar.is-on .bo-tip { display: block; }
/* the end bars' tips lean inwards so they stay on the card */
.bo-bar:nth-child(-n+2) .bo-tip { translate: -18% 0; }
.bo-bar:nth-child(-n+2) .bo-tip::after { left: 18%; }
.bo-bar:nth-child(n+11) .bo-tip { translate: -82% 0; }
.bo-bar:nth-child(n+11) .bo-tip::after { left: 82%; }
.bo-bar.is-on > span:last-child { color: var(--ink); font-weight: 500; }
.bo-bill { transition: background .25s, box-shadow .25s, opacity .25s; }
.bo-bill.is-on { background: var(--white); box-shadow: 0 0 0 1px var(--line-2), 0 8px 16px -12px rgba(30, 16, 6, .4); }
.bo-legend li { cursor: default; transition: color .2s; }
.bo-legend li:hover { color: var(--ink); }
.ov-tags .is-dim, .bo-bill.is-dim { opacity: .3; }
.bo-bar.is-dim i, .bo-bar.is-dim > span:last-child { opacity: .25; }
.bo-bills { display: flex; flex-direction: column; gap: 6px; }
.bo-bill { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 10px; background: var(--bg); font-size: 12px; }
.bo-bill > i { display: grid; place-items: center; height: 28px; border-radius: 7px; font: 600 11px/1 var(--sans); font-style: normal; background: var(--arrive-l); color: var(--arrive-t); }
.bo-bill b { display: block; font-weight: 500; }
.bo-bill small { display: block; font-size: 10.5px; color: var(--ink-50); }
.bo-tag { font-style: normal; padding: 3px 8px; border-radius: 999px; background: var(--green-l); color: var(--green-t); font-size: 10px; font-weight: 500; }
.bo-tag.is-late { background: var(--stay-l); color: var(--stay-t); }
.bo-bill strong { font: 500 14px/1 var(--display); }
.bo-keys { display: flex; flex-direction: column; }
.bo-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-60); }
.bo-legend li { display: flex; align-items: center; gap: 6px; }
.bo-legend i { width: 8px; height: 8px; border-radius: 2px; }
.bo-legend .stay { background: var(--stay); } .bo-legend .arrive { background: var(--arrive); } .bo-legend .empty { background: var(--empty); } .bo-legend .closed { background: var(--closed); }

/* The app's sidebar (rendered in script.js), on the Overview in the hero and on the Rooms page below */
.app-nav { display: flex; flex-direction: column; gap: 14px; padding: 10px 8px; font-size: 13px; color: var(--ink-60); min-width: 0; }
.an-inn, .an-user { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 9px; }
.an-inn { background: var(--white); border: 1px solid var(--line-2); }
.an-inn b, .an-user b { display: block; font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; }
.an-inn small, .an-user small { display: block; font-size: 11px; color: var(--ink-50); white-space: nowrap; }
.app-nav .av { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--stay); color: #f3dfb2; font: 600 11px/1 var(--mono); }
.app-nav .av.is-ruth { border-radius: 50%; background: var(--arrive-l); color: var(--arrive-t); }
.app-nav ul { display: flex; flex-direction: column; gap: 2px; }
.app-nav li { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; white-space: nowrap; }
.app-nav li svg { flex: none; width: 16px; height: 16px; }
.app-nav li em { margin-left: auto; font: 400 11px/1 var(--mono); font-style: normal; color: var(--ink-50); }
.app-nav li.is-on { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 0 0 1px var(--line); }
.an-user { margin-top: auto; }
.app-nav.is-rail { align-items: center; padding: 8px 0; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.app-nav.is-rail .an-inn { padding: 0; border: 0; background: none; }
.app-nav.is-rail li { padding: 9px; }
.app-nav.is-rail li span, .app-nav.is-rail li em, .app-nav.is-rail .an-inn > span:last-child, .app-nav.is-rail .an-user > span:last-child { display: none; }
.app-nav.is-rail li.is-on { background: var(--ink-80); color: #fff; box-shadow: none; }

/* Props on the counter (see index.html): a soft contact shadow and a faint reflection in the polished marble */
.prop { position: absolute; z-index: 2; left: var(--x); bottom: var(--b); width: var(--w); }
.prop img { display: block; width: 100%; height: auto; -webkit-box-reflect: below -2px linear-gradient(transparent 84%, rgba(255, 255, 255, .2)); }
.prop::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40, 18, 4, .5), transparent 70%); filter: blur(4px); z-index: -1; }
/* The key-card tray on the counter, right of the iPad (one photo, cards and all; see index.html) */
.tray { position: absolute; z-index: 2; left: var(--tx); bottom: var(--tb); width: var(--tw); aspect-ratio: 1483 / 726; }
.tray-img { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-box-reflect: below -2px linear-gradient(transparent 84%, rgba(255, 255, 255, .2)); }
.tray-shadow { position: absolute; left: -2%; right: -2%; bottom: -5%; height: 14%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40, 18, 4, .6), transparent 70%); filter: blur(5px); }
/* room numbers stamped on the front card of each stack, set like .fob-no and sized to the card (cqw = card width) */
.tray-no { position: absolute; left: var(--x); top: 19.8%; width: 19.76%; aspect-ratio: 3 / 5; container-type: inline-size; pointer-events: none; }
.tray-no b { position: absolute; left: 10cqw; top: 11cqw; font: 600 21cqw/1 var(--num); letter-spacing: -.04em; color: var(--gold); text-shadow: 0 1px 0 var(--deboss); opacity: .9; filter: brightness(.86); }
.tray-no.is-stay { --gold: #efd48e; --deboss: rgba(0, 0, 0, .45); }
.tray-no.is-closed { --gold: #d4b46a; --deboss: rgba(0, 0, 0, .6); }
.tray-no.is-arrive { --gold: #866219; --deboss: rgba(255, 255, 255, .55); }
.tray-no.is-empty { --gold: #fbe3a3; --deboss: rgba(0, 0, 0, .4); }
/* the burgundy stack's front card, measured on the photo; the flying Room 3 card starts here */
.tray-slot { position: absolute; left: 7.82%; top: 19.8%; width: 19.76%; aspect-ratio: 3 / 5; }

@media (max-width: 820px) {
  .hero-copy { position: relative; padding: 108px var(--gutter) 0; }
  .desk-stage { width: 980px; }
}

.dot.stay { background: #e58e93; }
.dot.arrive { background: #f0d39a; }
.dot.empty { background: #d9a66e; }
.dot.closed { background: #bdb5ad; }

/* pixel grass above the footer (drawn in script.js) */
.px-grass { display: block; width: 100%; height: 44px; margin-top: -1px; }

/* ---------- Statement + board panel ---------- */

.section { padding: 112px 0; }
.statement { text-align: center; padding-top: 72px; }
.statement .h2 { max-width: 860px; margin: 0 auto; }
.statement .panel, .statement .caps { text-align: left; }

/* The Rooms page, dressed like the Overview on the hero's iPad: the inn's photo fading into the panel, the top bar
   with the pages hanging in a notch, the greeting row, then white cards. The rack's keys and hooks are untouched. */
.panel {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr 330px; gap: 10px;
  padding: 0 16px 16px; border-radius: 30px;
  background: var(--panel); border: 8px solid #141416; /* a black bezel round the screen; the notch hangs from it */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 60px -36px rgba(20, 20, 20, .45);
}
.rm > * { position: relative; z-index: 2; }
.rm .rm-bg { position: absolute; z-index: 0; height: 330px; object-position: 50% 20%; } /* the Cotswold hills under a blue sky */
.rm::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 330px; pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 241, 238, 0) 42%, rgba(241, 241, 238, .55) 66%, var(--panel) 94%), linear-gradient(180deg, rgba(24, 14, 8, 0) 16%, rgba(24, 14, 8, .42) 36%, rgba(24, 14, 8, 0) 62%); }
.rm-nav, .rm-hero { grid-column: 1 / -1; }
.rm-hero { margin: 22px 0 4px; }
.rm-hero h3 { margin-top: 10px; font-size: 34px; }
/* the date is a picker: the board for any night, from the calendar */
.rm-date { display: inline-flex !important; align-items: center; gap: 7px; padding: 6px 10px 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); color: #fff !important; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rm-date svg { width: 15px; height: 15px; }
.rm-date .rm-chev { width: 13px; height: 13px; margin-left: 2px; opacity: .8; }
.rm .bo-btns b { padding: 9px 15px; font-size: 13px; }

.panel-main {
  padding: 16px 20px 22px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(30, 16, 6, .4);
}
.panel-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.pt-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-80); }
.pt-head em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-50); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-60); }
.legend b { font-weight: 500; color: var(--ink); }
.sq { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.sq.stay { background: var(--stay); }
.sq.arrive { background: var(--arrive); }
.sq.empty { background: var(--empty); }
.sq.closed { background: var(--closed); }

.panel-side {
  display: flex; flex-direction: column; padding: 8px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(30, 16, 6, .4);
}
.side-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); }
.side-tabs button { flex: 1; padding: 7px 8px; border-radius: 999px; border: 0; background: none; font-size: 12.5px; color: var(--ink-60); }
.side-tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: 0 1px 3px rgba(30, 16, 6, .12); }
.side-body { flex: 1; padding: 10px 2px 2px; display: flex; flex-direction: column; gap: 6px; }
.side-body[hidden] { display: none; }
/* each row like an arrival on the Overview: the room in a small chip, the guest, a status pill, the time */
.srow { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 13px; }
.srow > :nth-child(2) { min-width: 0; }
.srow b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow small { display: block; color: var(--ink-50); font-size: 11.5px; }
.srow time { font: 500 15px/1 var(--display); color: var(--ink); }
.srow .mini-tag { width: auto; height: 30px; padding: 0; border: 0; border-radius: 8px; place-items: center; font: 600 11.5px/1 var(--sans); }
.srow .mini-tag::before { display: none; }
.srow .chip { grid-column: 3 / -1; justify-self: end; padding: 3px 9px; border-radius: 999px; font: 500 11px/1.3 var(--sans); }
.srow .chip.empty { background: var(--green-l); color: var(--green-t); }
.srow .bo-tag { font-size: 11px; padding: 3px 9px; }
.mini-tag { width: 30px; height: 36px; border-radius: 5px 5px 7px 7px; display: grid; place-items: end center; padding-bottom: 5px; font: 500 12px/1 var(--sans); position: relative; border: 1px solid; }
.mini-tag::before { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset; }
.mini-tag.stay { background: var(--stay-l); border-color: #e8c9c6; color: var(--stay-t); }
.mini-tag.arrive { background: var(--arrive-l); border-color: #ead9b0; color: var(--arrive-t); }
.mini-tag.empty { background: var(--empty-l); border-color: #e2cdb5; color: var(--empty-t); }
.mini-tag.closed { background: var(--closed-l); border-color: #d6d1cc; color: var(--closed-t); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-60); }
.side-foot span { flex: 1; }
.side-foot i { width: 28px; height: 28px; border-radius: 50%; background: #141416; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; }

.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; margin-top: 48px; font-size: 15px; line-height: 1.5; color: var(--ink-60); }
/* each point: its icon in a grey tile with the title beside it, a hairline, then the line about it underneath */
.caps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; align-content: start; }
.caps i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: rgba(32, 32, 32, .06); color: var(--ink); }
.caps i svg { width: 17px; height: 17px; }
.caps b { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
.caps span { grid-column: 1 / -1; display: block; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); }

@media (max-width: 1000px) {
  .panel { grid-template-columns: 1fr; }
  .caps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* narrow: the notch keeps only the page you're on */
  .rm-nav li:not(.is-on) { display: none; }
  .rm-nav .bo-word small { display: none; }
}
@media (max-width: 640px) {
  .panel { padding: 0 10px 10px; border-width: 6px; border-radius: 24px; }
  .rm-nav .bo-word { display: none; }
  .rm-hero { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
  .rm-hero h3 { font-size: 28px; }
  .rm .rm-bg, .rm::before { height: 300px; }
  .caps { grid-template-columns: 1fr; gap: 16px; }
  .panel-main { padding: 14px 12px 18px; }
  .legend { margin-left: 0; gap: 10px; }
}

/* ---------- The rack ---------- */

.rack-wrap { position: relative; padding-top: 6px; }
.rack { --row-gap: 30px; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--row-gap) 14px; }
/* the hardware is brass, to go with the keys: a round rail lit from above, a brass collar where each hook meets it,
   and a split ring through each card's punched hole */
.rack::before, .rack::after { /* two rails, drawn behind the pegs */
  content: ""; position: absolute; left: -8px; right: -8px; height: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #fbe7b0 0, #d9b06a 30%, #a87a3c 62%, #6b4a22 100%);
  box-shadow: 0 3px 5px -1px rgba(50, 28, 8, .35), 0 1px 0 rgba(255, 255, 255, .5) inset;
}
.rack::before { top: 5px; }
.rack::after { top: calc(50% + var(--row-gap) / 2 + 5px); }
.hook { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.peg { position: relative; z-index: 2; width: 12px; height: 12px; border-radius: 50%; margin-top: 2px; background: radial-gradient(circle at 36% 30%, #fff6d8 0, #e8c57e 30%, #a9783a 70%, #5e3f1c 100%); box-shadow: 0 2px 3px rgba(50, 28, 8, .45); }
.ghost { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 92px; aspect-ratio: 3 / 5; border: 1.5px dashed var(--line-2); border-radius: 9px; display: grid; place-items: center; font: 600 20px/1 var(--num); color: var(--ink-35); opacity: 0; transition: opacity .3s; }
.hook.is-awaiting .ghost { opacity: 1; }
.hook.is-awaiting .fob { opacity: 0; pointer-events: none; }
.hook.is-off .ghost { opacity: 1; }

.fob { position: relative; display: block; width: 100%; max-width: 92px; margin-top: -4px; padding: 0; border: 0; background: none; transform-origin: 50% 0; transition: transform .35s var(--ease), opacity .2s; text-align: left; }
.fob-loop { /* the split ring: a ring cut out of a brass gradient, from the hook down through the card's hole */
  display: block; width: 11px; height: 23px; margin: -3px auto -15px; position: relative; z-index: 1;
  border: 2.4px solid transparent; border-radius: 6px;
  background: linear-gradient(90deg, #5e3f1c 0, #c99a50 30%, #fff1c4 48%, #c99a50 66%, #6b4a22 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 1.5px 1px rgba(40, 20, 4, .45));
}
/* Each key is a real leather key card (assets/card-*.webp, cut out by tools/key-cards.py):
   the photo carries the leather, the hole and the brass key; number, channel and status are stamped on top in gold */
.fob-tag {
  --card-ar: 3 / 5;
  position: relative; display: flex; flex-direction: column; aspect-ratio: var(--card-ar);
  padding: 12% 10% 10%;
  color: var(--gold);
  background: var(--card) center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 10px rgba(40, 18, 6, .32)) drop-shadow(0 2px 2px rgba(40, 18, 6, .22));
}
.fob-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.fob-no { font: 600 clamp(15px, 1.5vw, 19px)/1 var(--num); letter-spacing: -.04em; text-shadow: 0 1px 0 var(--deboss); }
/* the status sits under the card, like a label on the board, so the key on the card stays clear */
.fob-st { display: block; margin-top: 7px; text-align: center; font: 400 8px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--st, var(--ink-60)); }
/* how it was booked rides on the status line ("Staying · Direct"), off the card, so it never covers the key */
.fob-ch::before { content: "\00a0·\00a0"; }
.fob-st b { display: block; font: 500 10.5px/1.3 var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink-80); }
.fob.is-stay { --st: var(--stay-t); }
.fob.is-arrive { --st: var(--arrive-t); }
.fob.is-empty { --st: var(--empty-t); }
.fob.is-closed { --st: var(--closed-t); }
.fob.is-stay { --card: url("assets/card-stay.webp"); --gold: #efd48e; --deboss: rgba(0, 0, 0, .45); }
.fob.is-arrive { --card: url("assets/card-arrive.webp"); --gold: #866219; --deboss: rgba(255, 255, 255, .55); }
.fob.is-empty { --card: url("assets/card-empty.webp"); --gold: #fbe3a3; --deboss: rgba(0, 0, 0, .4); }
.fob.is-closed { --card: url("assets/card-closed.webp"); --gold: #d4b46a; --deboss: rgba(0, 0, 0, .6); }

button.fob { cursor: pointer; }
button.fob:hover { transform: rotate(-3deg) translateY(-2px); }
button.fob:focus-visible { outline: none; }
button.fob:focus-visible .fob-tag { outline: 2px solid var(--ink); outline-offset: 3px; }
.fob.is-lifted { opacity: 0; pointer-events: none; }
.fob.is-swinging { animation: swing 1.1s var(--ease); }
@keyframes swing { 0% { transform: rotate(7deg); } 30% { transform: rotate(-4.5deg); } 55% { transform: rotate(2.5deg); } 78% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }

@media (max-width: 720px) {
  .rack { --row-gap: 24px; grid-template-columns: repeat(4, 1fr); column-gap: 10px; }
  .rack::before, .rack::after { display: none; }
  .hook::before { content: ""; position: absolute; top: 5px; left: -6px; right: -6px; height: 6px; background: linear-gradient(180deg, #fbe7b0 0, #d9b06a 30%, #a87a3c 62%, #6b4a22 100%); box-shadow: 0 3px 5px -1px rgba(50, 28, 8, .35); }
  .fob-ch { display: none; }
  .fob-st { font-size: 7px; }
  .fob-st b { font-size: 9px; white-space: nowrap; }
}

/* ---------- Room chapters ---------- */

.intro { padding-bottom: 24px; }
.intro .lead { margin-top: 18px; max-width: 520px; }

.chapter { padding: 88px 0; }
.chapter-grid { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: center; }
.chapter.is-flip .chapter-grid { grid-template-columns: 1fr 380px; }
.chapter.is-flip .chapter-copy { order: 2; }
.chapter-copy .label { display: block; margin-bottom: 18px; }
.chapter-copy .h2 { font-size: clamp(30px, 3.2vw, 44px); }
.chapter-copy .h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.12; } /* a feature headline in the narrow column */
.chapter-copy .lead { margin-top: 18px; }

.acc { margin-top: 28px; display: grid; gap: 8px; }
.acc-item { background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; transition: background-color .2s; }
.acc-item button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; background: none; text-align: left; font-size: 15px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.acc-item button .n { font: 400 11px/1 var(--mono); color: var(--ink-35); width: 22px; }
.acc-item button .pm { margin-left: auto; width: 12px; height: 12px; position: relative; color: var(--ink-50); }
.acc-item button .pm::before, .acc-item button .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.2px; margin-top: -.6px; background: currentColor; transition: transform .25s var(--ease); }
.acc-item button .pm::after { transform: rotate(90deg); }
.acc-item.is-open button .pm::after { transform: rotate(0); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc-body > div { overflow: hidden; }
.acc-body p { padding: 0 14px 14px 50px; font-size: 14px; color: var(--ink-60); line-height: 1.5; }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-item.is-open { background: var(--white); }

.stage { position: relative; }
.art {
  position: relative; border-radius: 14px; padding: 8px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(20, 20, 20, .35);
}
.art-crop { display: block; overflow: hidden; border-radius: 9px; }
.art img { display: block; border-radius: 9px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; image-rendering: pixelated; background: var(--bg-2); }

/* Parallax: script.js sets --p on each chapter, from -1 (just below the screen) through 0 (centred) to 1 (leaving at
   the top). Each layer moves at its own rate: the scene drifts inside its frame, the frame and the copy move a little,
   and the floating card or phone moves most, so it seems to sit in front. Individual translate/scale properties keep
   these clear of the reveal and positioning transforms. */
.chapter { --p: 0; --k: 1; }
.chapter .art { translate: 0 calc(var(--p) * var(--k) * -26px); }
.chapter .art img { scale: 1.16; translate: 0 calc(var(--p) * var(--k) * 26px); }
.chapter .ui, .chapter .phone { translate: 0 calc(var(--p) * var(--k) * -84px); }
.chapter-copy { translate: 0 calc(var(--p) * var(--k) * 16px); }
@media (max-width: 820px) { .chapter { --k: .5; } }
.art figcaption { position: absolute; left: 20px; bottom: 18px; font: 400 11px/1 var(--mono); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.stage .art { width: 84%; }
.chapter.is-flip .stage .art { margin-left: auto; }

.ui {
  position: absolute; z-index: 2; width: min(320px, 58%);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--card-shadow), 0 30px 50px -26px rgba(20, 20, 20, .3);
  font-size: 13px;
}
.ui-r { right: 0; bottom: -28px; }
.ui-l { left: 0; bottom: -28px; }
.ui-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); font-weight: 600; }
.ui-head .chip { margin-left: auto; }
.ui-body { padding: 12px 14px 14px; }
.ui-body > p { color: var(--ink-60); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; font: 400 11px/1.3 var(--mono); white-space: nowrap; background: var(--bg-2); color: var(--ink-60); }
.chip.stay { background: var(--stay-l); color: var(--stay-t); }
.chip.arrive { background: var(--arrive-l); color: var(--arrive-t); }
.chip.empty { background: var(--empty-l); color: var(--empty-t); }
.chip.closed { background: var(--closed-l); color: var(--closed-t); }
.kvs { display: grid; gap: 0; }
.kvs div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kvs div:last-child { border-bottom: 0; }
.kvs dt { color: var(--ink-50); }
.kvs dd { font-weight: 500; text-align: right; }
.kvs dd.good { color: var(--green-t); }
.sms { padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--bg); border: 1px solid var(--line); line-height: 1.45; margin-bottom: 10px; }
.sms small { display: flex; justify-content: space-between; font: 400 10.5px/1 var(--mono); color: var(--ink-50); margin-bottom: 7px; }
.tl li { display: grid; grid-template-columns: 18px 44px 1fr; gap: 8px; padding: 5px 0; align-items: start; }
.tl time { font: 400 12px/18px var(--mono); }
.tl span:last-child { color: var(--ink-60); line-height: 18px; }
.tick { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--green-l); color: var(--green-t); }
.tick svg { width: 11px; height: 11px; }
.tick.wait { background: var(--amber-l); color: var(--amber-t); }
.tick.wait::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.bars { display: grid; gap: 12px; margin: 4px 0 10px; }
.bar-row { display: grid; gap: 6px; }
.bar-row p { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-60); }
.bar-row p b { font-weight: 500; color: var(--ink); }
.bar { height: 22px; border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 5px; }
.bar.site i { width: 100%; background: linear-gradient(90deg, #ffb59a, #ff8f66); }
.bar.direct i { width: 3px; background: var(--green); }
.big-num { font: 600 34px/1 var(--display); letter-spacing: -.04em; display: flex; align-items: center; gap: 8px; }

.note { padding: 10px 12px; border-radius: 8px; background: var(--amber-l); color: #5d3a00; line-height: 1.4; }
.note small { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-t); margin-bottom: 6px; }
.stays { display: flex; gap: 6px; margin: 10px 0; }
.stays span { flex: 1; text-align: center; padding: 6px 0; border-radius: 6px; font: 400 11px/1 var(--mono); background: var(--bg-2); color: var(--ink-50); }
.stays span.now { background: var(--stay-l); color: var(--stay-t); }

.channels { display: grid; gap: 6px; margin-top: 10px; }
.channels li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 7px; background: var(--white); border: 1px solid var(--line); }
.channels s { color: var(--ink-50); text-decoration-color: var(--orange); }

/* Maya's phone */
.phone { position: absolute; z-index: 2; right: 0; top: 50%; transform: translateY(-46%); width: 236px; padding: 8px; border-radius: 32px; background: #1d1d1d; box-shadow: 0 40px 60px -28px rgba(0, 0, 0, .45); }
.chapter.is-flip .phone { right: auto; left: 0; }
.phone-screen { background: var(--paper); border-radius: 25px; padding: 12px 11px 16px; min-height: 380px; }
.phone-top { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--sans); padding: 0 6px 12px; }
.phone-top i { width: 58px; height: 16px; border-radius: 10px; background: #1d1d1d; margin-top: -3px; }
.phone h4 { font: 600 16px/1.2 var(--display); letter-spacing: -.02em; padding: 0 6px; }
.phone .sub { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-50); padding: 2px 6px 12px; }
.hk-list { display: grid; gap: 7px; }
.hk-item { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; padding: 10px 9px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--white); font-size: 12px; line-height: 1.35; cursor: pointer; user-select: none; transition: background-color .25s; }
.hk-item input { position: absolute; opacity: 0; pointer-events: none; }
.hk-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: all .2s; }
.hk-box svg { width: 12px; height: 12px; }
.hk-item b { display: flex; justify-content: space-between; font-weight: 500; font-size: 12.5px; }
.hk-item b em { font: 400 10.5px/1.6 var(--mono); font-style: normal; color: var(--ink-50); }
.hk-item small { font: 400 10.5px/1.4 var(--mono); color: var(--ink-50); }
.hk-item.is-done { background: var(--green-l); border-color: #bfdfae; }
.hk-item.is-done .hk-box { background: var(--green); border-color: var(--green); color: #fff; }
.hk-item.is-done b em { color: var(--green-t); }
.hk-item:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.hk-hint { margin-top: 10px; text-align: center; font-size: 11px; color: var(--ink-50); transition: opacity .3s; }
.hk-hint.is-gone { opacity: 0; }
.stage.has-phone .art { width: 78%; }

.mini { margin-top: 26px; max-width: 360px; }
.mini-hooks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; padding-top: 8px; border-top: 3px solid #c9c7c1; }
.mini-hooks span { height: 28px; border-radius: 3px 3px 5px 5px; border: 1px solid; transition: background-color .4s, border-color .4s, opacity .4s; }
.mini-hooks .stay { background: var(--stay-l); border-color: #e8c9c6; }
.mini-hooks .arrive { background: var(--arrive-l); border-color: #ead9b0; }
.mini-hooks .empty { background: var(--empty-l); border-color: #e2cdb5; }
.mini-hooks .closed { background: var(--closed-l); border-color: #d6d1cc; }
.mini-hooks .off { background: none; border-style: dashed; border-color: var(--line-2); }
.mini-hooks .dim { opacity: .35; }
.mini-hooks .is-clean { background: var(--green); border-color: var(--green); opacity: 1; }
.mini-hooks .is-dirty { opacity: 1; }
.mini p { margin-top: 10px; font: 400 11.5px/1.4 var(--mono); color: var(--ink-50); }
.mini p b { color: var(--ink); font-weight: 500; }

@media (max-width: 980px) {
  .chapter-grid, .chapter.is-flip .chapter-grid { grid-template-columns: 1fr; gap: 44px; }
  .chapter.is-flip .chapter-copy { order: 0; }
  .stage .art, .stage.has-phone .art { width: 100%; }
  .ui, .ui-r, .ui-l { position: relative; inset: auto; width: auto; margin: -56px 14px 0; }
  .phone, .chapter.is-flip .phone { position: relative; inset: auto; transform: none; margin: -90px auto 0; }
}

/* ---------- The five jobs: a stepper on the left, each job with its screen on a photo of the inn ---------- */

.features { padding: 96px 0 120px; }
.feat { display: grid; grid-template-columns: 220px 1fr; gap: 72px; align-items: start; }
.feat-steps { position: sticky; top: 140px; }
.feat-steps ol { position: relative; display: grid; gap: 4px; padding-left: 22px; border-left: 1px solid var(--line-2); }
.feat-steps a { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 10px 0; font: 500 19px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink-35); transition: color .3s; }
.feat-steps a::before { /* the active step's mark on the line */
  content: ""; position: absolute; left: -23px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--ink); transform: scaleY(0); transition: transform .35s var(--ease);
}
.feat-steps a:hover { color: var(--ink-60); }
.feat-steps a.is-on { color: var(--ink); }
.feat-steps a.is-on::before { transform: none; }
.feat-list { display: grid; gap: 132px; }
.feat-item { scroll-margin-top: 110px; }
.feat-tag { line-height: 0; }
/* each job's stamp in its own colour, the label in its brighter shade over a deeper edge */
.about-stamp.is-c1 .hs-in { background: #3f0a10; } .about-stamp.is-c1 .hs-label { background: #7b1d22; }
.about-stamp.is-c2 .hs-in { background: #173823; } .about-stamp.is-c2 .hs-label { background: #2f6a43; }
.about-stamp.is-c3 .hs-in { background: #14223a; } .about-stamp.is-c3 .hs-label { background: #2b4a78; }
.about-stamp.is-c4 .hs-in { background: #5a3d0c; } .about-stamp.is-c4 .hs-label { background: #a8781f; }
.about-stamp.is-c5 .hs-in { background: #121010; } .about-stamp.is-c5 .hs-label { background: #3a3532; }
.feat-h { margin-top: 22px; font: 500 clamp(24px, 2.55vw, 34px)/1.15 var(--display); letter-spacing: -.035em; } /* two lines: what it does, then what it saves you */
@media (min-width: 901px) { .feat-h { white-space: nowrap; } }
.feat-h .soft { color: var(--ink-50); }
.feat-p { margin-top: 16px; max-width: 54ch; font-size: 16px; line-height: 1.55; color: var(--ink-60); }
/* the photo of the inn, and on it a big Roomhook window that runs off the right and bottom edges */
.feat-media { position: relative; margin-top: 32px; padding: 40px 0 0 5%; aspect-ratio: 1.4; /* the window comes out at the Rooms panel's proportions */ border-radius: 18px; overflow: hidden; background: var(--bg-2); }
.feat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.06; transition: scale 1.4s var(--ease); }
.feat-item.is-seen .feat-bg { scale: 1; }
.fw {
  position: relative; display: flex; flex-direction: column; height: calc(100% + 10px); margin: 0 -48px -10px 0; padding: 0 66px 22px 18px; border-radius: 26px 0 0 0; overflow: hidden; isolation: isolate; /* sized by what it shows, running off the photo's right edge and foot; the inside stops 18px short of the edge */
  background: var(--panel); border: 8px solid #141416; box-shadow: 0 40px 80px -30px rgba(20, 10, 4, .6); /* the black bezel, as on the Rooms panel; the notch hangs from it */
  font-size: 13px; color: var(--ink);
  opacity: 0; translate: 0 40px; transition: opacity .6s var(--ease) .25s, translate .9s var(--ease) .25s;
}
.feat-item.is-seen .fw { opacity: 1; translate: 0 0; }
.fw > * { position: relative; z-index: 2; }
/* like the Overview: a photo across the top of the window, fading into the panel, with the page's title on it */
.fw > .fw-bg { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 210px; object-fit: cover; object-position: 50% 30%;
  -webkit-mask: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .4) 70%, transparent 96%); mask: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .4) 70%, transparent 96%); }
.fw::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 210px; pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 241, 238, 0) 44%, rgba(241, 241, 238, .55) 70%, var(--panel) 96%), linear-gradient(180deg, rgba(24, 14, 8, .3) 0, rgba(24, 14, 8, .45) 52%, rgba(24, 14, 8, 0) 80%); }
.fw-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 14px; color: #fff; }
.fw-hero small { display: block; font-size: 11px; color: rgba(255, 255, 255, .8); }
.fw-hero h3 { margin-top: 4px; font: 500 26px/1.05 var(--display); letter-spacing: -.03em; }
.fw-hero .bo-btns { margin: 0; }
.fw-hero .bo-btns b { padding: 8px 13px; font-size: 12px; }
.fw-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 54px; }
.fw-nav .bo-word b { font-size: 17px; }
.fw-nav .bo-word small { display: none; }
.fw-nav .bo-word b { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); } /* white over the windows' busier photos */
.fw-nav .bo-crest { stroke: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); }
.fw-nav ul { top: 0; left: auto; right: 104px; translate: none; } /* the notch sits right of centre, so the inn's name has its room */
.fw-nav li { padding: 6px 10px; font-size: 12px; }
.fw-grid { flex: 1; display: grid; gap: 10px; align-content: stretch; min-height: 0; } /* the cards share out the window's height */
.fw-card { padding: 13px 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(30, 16, 6, .4); min-width: 0; }
.fw-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.fw-card > header b { font-weight: 500; }
.fw-card > header em { font-style: normal; font-size: 11px; color: var(--ink-50); white-space: nowrap; }
.fw-wide { grid-column: 1 / -1; }
.fw-tall { grid-row: span 2; }
/* a status that moves with the scroll: one <s> per stage, only the current one shows */
.fw-st s { display: none; text-decoration: none; }
.feat-item:not(.is-s1) .fw-st s:nth-child(1), .feat-item.is-s1:not(.is-s2) .fw-st s:nth-child(2),
.feat-item.is-s2:not(.is-s3) .fw-st s:nth-child(3), .feat-item.is-s3 .fw-st s:nth-child(4) { display: inline; }
/* arrivals and bookings, like the Overview's */
.fw-bills { display: grid; gap: 6px; }
.fw-bills li { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bg); font-size: 12px; transition: background .3s, box-shadow .3s; }
.fw-bills li > i { display: grid; place-items: center; height: 28px; border-radius: 7px; font: 600 11px/1 var(--sans); font-style: normal; background: var(--arrive-l); color: var(--arrive-t); }
.fw-bills li > i.stay { background: var(--stay-l); color: var(--stay-t); }
.fw-bills b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-bills span { min-width: 0; }
.fw-bills small { display: block; font-size: 10.5px; color: var(--ink-50); }
.fw-bills strong { font: 500 14px/1 var(--display); }
.bo-tag.is-site { background: var(--bg-2); color: var(--ink-60); }
.feat-item.is-s1 .fw-bills li.fw-hot { background: var(--white); box-shadow: 0 0 0 1px var(--line-2), 0 8px 16px -12px rgba(30, 16, 6, .4); }
.fw-foot { margin-top: 10px; font: 400 10.5px/1.3 var(--mono); color: var(--ink-50); }
/* things that arrive with the scroll: .fw-s1 / .fw-s2 / .fw-s3 show from that stage on */
.fw-s1, .fw-s2, .fw-s3 { transition: opacity .45s var(--ease), translate .5s var(--ease), background .3s, color .3s; }
.fw-msg.fw-s1, .fw-msg.fw-s2, .fw-msg.fw-s3, .fw-note.fw-s2 { opacity: 0; translate: 0 10px; }
.feat-item.is-s1 .fw-msg.fw-s1, .feat-item.is-s2 .fw-msg.fw-s2, .feat-item.is-s3 .fw-msg.fw-s3, .feat-item.is-s2 .fw-note.fw-s2 { opacity: 1; translate: 0 0; }
/* late arrivals: the text thread */
.fw-thread { display: flex; flex-direction: column; gap: 6px; }
.fw-thread > header { margin-bottom: 3px; }
.fw-msg { padding: 6px 10px; border-radius: 12px 12px 12px 4px; background: var(--bg); line-height: 1.35; font-size: 11.5px; }
.fw-msg small { display: block; margin-bottom: 3px; font: 400 9.5px/1.2 var(--mono); color: var(--ink-50); }
.fw-msg.is-in { background: var(--green-l); color: var(--green-t); border-radius: 12px 12px 4px 12px; }
.fw-late { grid-template-columns: 1.05fr 1fr; }
.fw-late .fw-card { padding: 11px 13px; }
.fw-late .fw-card > header { margin-bottom: 8px; }
.fw-late .fw-bills li { padding: 5px 10px; }
.fw-late .bo-tag.fw-st { min-width: 64px; text-align: center; transition: background .3s, color .3s; }
.feat-item:not(.is-s3) .fw-late .fw-hot .bo-tag.fw-st { background: var(--stay-l); color: var(--stay-t); }
/* the key rack in the windows (the same leather keys as the board) */
.mvd-keys.fw-keys { grid-template-columns: repeat(12, minmax(0, 36px)); justify-content: space-between; gap: 6px; padding-top: 8px; } /* a long rack of small keys */
.fw-keys .mk em { display: none; }
.fw-keys .mk b { font-size: 10px; }
.fw-keys .mk.is-hot { transform: translateY(-4px); }
.fw-keys .mk.is-hot::before { outline: 2px solid var(--ink); outline-offset: 2px; }
.feat-item.is-s3 .fw-keys[data-fw-keys="4"] .mk[data-room="4"] { --card: url("assets/card-stay.webp"); --gold: #efd48e; } /* Room 4: arriving, then in */
.feat-item:not(.is-s1) .fw-keys[data-fw-keys="11"] .mk[data-room="11"] { --card: url("assets/card-empty.webp"); --gold: #fbe3a3; } /* Room 11: open, then closed */
.fw-keys .mk::before { transition: background-image .3s; }
.fw-keys .mk .rd { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 2px 5px; border-radius: 999px; background: var(--green); color: #fff; font: 600 8px/1 var(--sans); opacity: 0; transition: opacity .3s; }
/* direct bookings */
.fw-direct { grid-template-columns: 1.15fr 1fr; }
.fw-book strong { font: 500 13px/1 var(--display); min-width: 46px; text-align: right; }
.fw-big { display: flex; align-items: center; gap: 10px; font: 500 34px/1 var(--display); letter-spacing: -.03em; }
.fw-bars { display: grid; gap: 6px; margin-top: 12px; }
.fw-bars p { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-60); }
.fw-bars p b { color: var(--ink); font-weight: 500; }
.fw-bars i { display: block; height: 12px; border-radius: 6px; background: var(--bg); position: relative; overflow: hidden; }
.fw-bars i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; transition: width 1s var(--ease); }
.fw-bars i.is-site::after { background: linear-gradient(90deg, #e0c07c, #b48d42); }
.fw-bars i.is-direct::after { background: linear-gradient(90deg, #a3323a, #6a161c); }
.feat-item.is-s2 .fw-bars i.is-site::after { width: 100%; }
.feat-item.is-s2 .fw-bars i.is-direct::after { width: 3%; }
.fw-ringcard { display: flex; flex-direction: column; }
.fw-ring { --p: 0; position: relative; width: 92px; height: 92px; margin: auto; border-radius: 50%; background: conic-gradient(#7b1d22 calc(var(--p) * 1%), var(--bg) 0); display: grid; place-content: center; text-align: center; transition: --p 1s; }
.fw-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--white); }
.fw-ring b, .fw-ring span { position: relative; } .fw-ring b { font: 500 26px/1 var(--display); } .fw-ring span { font-size: 10.5px; color: var(--ink-50); }
.feat-item.is-s3 .fw-ring { --p: 60; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
/* housekeeping and guests: lists that tick themselves off */
.fw-checks { display: grid; gap: 6px; }
.fw-checks li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 12px; }
.fw-checks li > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); color: transparent; transition: all .3s; }
.fw-checks li > i svg { width: 13px; height: 13px; }
.fw-checks b { display: block; font-weight: 500; }
.fw-checks small { display: block; font-size: 10.5px; color: var(--ink-50); }
.fw-checks em { font: 400 10.5px/1 var(--mono); font-style: normal; color: var(--ink-50); opacity: 0; transition: opacity .3s; }
.feat-item.is-s1 .fw-checks .fw-s1, .feat-item.is-s2 .fw-checks .fw-s2, .feat-item.is-s3 .fw-checks .fw-s3 { background: var(--green-l); }
.feat-item.is-s1 .fw-checks .fw-s1 > i, .feat-item.is-s2 .fw-checks .fw-s2 > i, .feat-item.is-s3 .fw-checks .fw-s3 > i { background: var(--green); border-color: var(--green); color: #fff; }
.feat-item.is-s1 .fw-checks .fw-s1 em, .feat-item.is-s2 .fw-checks .fw-s2 em, .feat-item.is-s3 .fw-checks .fw-s3 em { opacity: 1; }
.fw-hk { grid-template-columns: 1fr 1.25fr; }
.fw-hk .mvd-keys.fw-keys { grid-template-columns: repeat(6, 1fr); gap: 12px 8px; }
.fw-guests { grid-template-columns: 1.1fr 1fr; }
.fw-guest > header { justify-content: flex-start; }
.fw-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--stay-l); color: var(--stay-t); font: 600 12px/1 var(--sans); }
.fw-guest > header small { display: block; font-size: 10.5px; color: var(--ink-50); }
.fw-stays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 12px; }
.fw-stays li { padding: 9px 10px; border-radius: 10px; background: var(--bg); opacity: .45; transition: opacity .4s, background .3s; }
.fw-stays b { display: block; font-weight: 500; font-size: 12px; } .fw-stays small { font-size: 10px; color: var(--ink-50); }
.feat-item.is-s1 .fw-stays .fw-s1, .feat-item.is-s2 .fw-stays .fw-s2, .feat-item.is-s3 .fw-stays .fw-s3 { opacity: 1; }
.feat-item.is-s3 .fw-stays .is-now { background: var(--stay-l); color: var(--stay-t); }
.fw-note { padding: 10px 12px; border-radius: 10px; background: var(--amber-l); color: #5d3a00; line-height: 1.4; font-size: 12.5px; }
.fw-likes { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; translate: 0 8px; }
.feat-item.is-s1 .fw-likes { opacity: 1; translate: 0 0; }
.fw-likes small { flex-basis: 100%; font: 400 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.fw-likes span { padding: 5px 10px; border-radius: 999px; background: var(--bg); font-size: 11.5px; color: var(--ink-80); }
.fw-checks .fw-next em { opacity: 1; }
.fw-note small { display: block; margin-bottom: 4px; font: 400 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-t); }
/* closed rooms */
.fw-closed { grid-template-columns: 1fr 1.1fr; }
.fw-dl { display: grid; gap: 6px; }
.fw-dl div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.fw-dl dt { color: var(--ink-50); } .fw-dl dd { font-weight: 500; }
.fw-btn { display: block; margin-top: 10px; padding: 8px; border-radius: 9px; background: #1c1917; color: #fff; text-align: center; font-size: 12px; font-weight: 500; transition: background .3s; }
.fw-btn s { text-decoration: none; } .fw-btn s + s { display: none; }
.feat-item.is-s1 .fw-btn { background: var(--green-l); color: var(--green-t); }
.feat-item.is-s1 .fw-btn s:first-child { display: none; } .feat-item.is-s1 .fw-btn s + s { display: inline; }
.fw-chan { display: grid; gap: 6px; }
.fw-back { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--green-l); color: var(--green-t); font-size: 12.5px; font-weight: 500; }
.fw-dl-tight { margin-top: 10px; gap: 2px; }
.fw-checks li:not([class]) em { opacity: 1; } /* a room that isn't on today's ticking yet */
.fw-chan li { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 12px; }
.fw-chan em { font: 400 10.5px/1 var(--mono); font-style: normal; padding: 3px 7px; border-radius: 6px; background: var(--green-l); color: var(--green-t); transition: all .3s; }
.fw-chan em s { text-decoration: none; } .fw-chan em s + s { display: none; }
.feat-item.is-s1 .fw-chan .fw-s1 span, .feat-item.is-s2 .fw-chan .fw-s2 span, .feat-item.is-s3 .fw-chan .fw-s3 span { text-decoration: line-through; text-decoration-color: #be2c36; color: var(--ink-50); }
.feat-item.is-s1 .fw-chan .fw-s1 em, .feat-item.is-s2 .fw-chan .fw-s2 em, .feat-item.is-s3 .fw-chan .fw-s3 em { background: var(--closed-l); color: var(--closed-t); }
.feat-item.is-s1 .fw-chan .fw-s1 em s:first-child, .feat-item.is-s2 .fw-chan .fw-s2 em s:first-child, .feat-item.is-s3 .fw-chan .fw-s3 em s:first-child { display: none; }
.feat-item.is-s1 .fw-chan .fw-s1 em s + s, .feat-item.is-s2 .fw-chan .fw-s2 em s + s, .feat-item.is-s3 .fw-chan .fw-s3 em s + s { display: inline; }
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  .feat-steps { display: none; }
  .feat-list { gap: 88px; }
  .feat-media { padding: 44px 0 0; aspect-ratio: auto; }
  .fw { height: auto; }
  .fw { margin: 0 10px -10px; border-width: 6px 6px 0; border-radius: 20px 20px 0 0; padding: 0 12px 24px; }
  .fw-hero h3 { font-size: 22px; }
  .fw-nav { margin-right: 0; }
  .fw-nav ul li:not(.is-on), .fw-nav .bo-word { display: none; }
  .fw-nav ul { left: 50%; right: auto; translate: -50% 0; }
  .fw-grid { width: 100%; grid-template-columns: 1fr !important; }
  .fw-tall { grid-row: auto; }
  .mvd-keys.fw-keys { grid-template-columns: repeat(6, 1fr); }
}

/* ---- the job's own card, the one that lifts out: more picture than words, and it can be played with ---- */
/* the slot holds the window's own card for this job (its full list); the lifted card sits on it and, as it comes up,
   leaves that card showing in its place */
.fw-hole { position: relative; display: grid; min-width: 0; }
/* every card fills its row, and its list shares out the height, so a short card never leaves bare panel under it */
.fw-grid { align-items: stretch; }
.fw-hk > .fw-hole, .fw-guests > .fw-hole { grid-row: auto; } /* two cards side by side: one row, the same height */
.fw-grid > .fw-card { display: flex; flex-direction: column; }
.fw-grid > .fw-card > ul { flex: 1; grid-auto-rows: 1fr; }
.fw-grid > .fw-card > ul > li { align-content: center; }
.fw-hole > * { grid-area: 1 / 1; min-width: 0; }
.fw-under { opacity: 0; transition: opacity .5s var(--ease) .15s; }
.fw-under { display: flex; flex-direction: column; }
.fw-under > ul { flex: 1; grid-auto-rows: 1fr; } /* its rows share out the slot, so no blank space under them */
.fw-under > ul > li { align-content: center; }
.feat-item.is-s1 .fw-under { opacity: 1; }
.feat-item.is-s1 .fw-hole > .fw-pop { align-self: start; }
.fw-av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--stay-l); color: var(--stay-t); font: 600 12px/1 var(--sans); }
.fw-av.is-arrive { background: var(--arrive-l); color: var(--arrive-t); }
.fw-pop > header { justify-content: flex-start; }
.fw-pop > header > span:nth-child(2) { flex: 1; min-width: 0; }
.fw-pop > header small { display: block; font-size: 11.5px; color: var(--ink-50); }
.fw-keythumb { display: block; width: 26px; aspect-ratio: 3 / 5; flex: none; background: var(--card) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 3px rgba(40, 18, 6, .25)); }
.fw-keythumb.stay { --card: url("assets/card-stay.webp"); } .fw-keythumb.arrive { --card: url("assets/card-arrive.webp"); }
.fw-keythumb.empty { --card: url("assets/card-empty.webp"); } .fw-keythumb.closed { --card: url("assets/card-closed.webp"); }
.fw-mini { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); font: 500 12px/1 var(--sans); color: var(--ink); cursor: pointer; transition: background .2s, transform .2s; }
.fw-mini svg { width: 14px; height: 14px; transition: rotate .6s var(--ease); }
.fw-mini:hover { background: var(--bg); }
.fw-mini.is-done svg { rotate: 360deg; }
/* 1 · the door code, as the guest sees it, and its way to the door */
.fw-pin { display: flex; gap: 10px; justify-content: center; margin: 18px 0 20px; }
.fw-pin i { display: grid; place-items: center; width: 62px; height: 74px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font: 500 38px/1 var(--display); font-style: normal; color: var(--ink-35); transition: color .4s, background .4s, transform .5s var(--ease); }
.feat-item.is-s1 .fw-pin i { color: var(--ink); background: var(--white); box-shadow: 0 8px 18px -12px rgba(30, 16, 6, .45); }
.feat-item.is-s1 .fw-pin i:nth-child(2) { transition-delay: .08s; } .feat-item.is-s1 .fw-pin i:nth-child(3) { transition-delay: .16s; } .feat-item.is-s1 .fw-pin i:nth-child(4) { transition-delay: .24s; }
.fw-code.is-resent .fw-pin i { animation: fw-flip .5s var(--ease) both; }
.fw-code.is-resent .fw-pin i:nth-child(2) { animation-delay: .06s; } .fw-code.is-resent .fw-pin i:nth-child(3) { animation-delay: .12s; } .fw-code.is-resent .fw-pin i:nth-child(4) { animation-delay: .18s; }
@keyframes fw-flip { 50% { transform: rotateX(90deg); } }
.fw-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.fw-path::before, .fw-path::after { content: ""; position: absolute; left: 16.6%; top: 19px; height: 3px; border-radius: 3px; }
.fw-path::before { right: 16.6%; background: var(--bg-2); }
.fw-path::after { width: 0; background: var(--green); transition: width .7s var(--ease); }
.feat-item.is-s2 .fw-path::after { width: 33.3%; } .feat-item.is-s3 .fw-path::after { width: 66.7%; }
.fw-path li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fw-path li i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--line-2); color: var(--ink-35); transition: all .4s; }
.fw-path li i svg { width: 18px; height: 18px; }
.fw-path small { font: 400 11.5px/1 var(--mono); color: var(--ink-35); transition: color .4s; }
.feat-item.is-s1 .fw-path .fw-s1 i, .feat-item.is-s2 .fw-path .fw-s2 i, .feat-item.is-s3 .fw-path .fw-s3 i { background: var(--green); border-color: var(--green); color: #fff; }
.feat-item.is-s1 .fw-path .fw-s1 small, .feat-item.is-s2 .fw-path .fw-s2 small, .feat-item.is-s3 .fw-path .fw-s3 small { color: var(--ink); }
/* 2 · what the stay cost to win, as two columns; switch the length of stay */
.fw-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); }
.fw-seg button { padding: 6px 11px; border: 0; border-radius: 999px; background: none; font: 500 11.5px/1 var(--sans); color: var(--ink-60); cursor: pointer; }
.fw-seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(30, 16, 6, .15); }
.fw-hbars { display: grid; gap: 12px; margin-top: 16px; }
.fw-hbar { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 12px; font-size: 13px; }
.fw-hbar span { color: var(--ink-60); white-space: nowrap; } .fw-hbar span small { font: 400 10.5px/1 var(--mono); color: var(--ink-35); }
.fw-hbar i { position: relative; display: block; height: 14px; border-radius: 7px; background: var(--bg); overflow: hidden; }
.fw-hbar em { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 7px; transition: width 1s var(--ease); }
.fw-hbar.is-site em { background: linear-gradient(90deg, #e0c07c, #b48d42); }
.fw-hbar.is-direct em { background: linear-gradient(90deg, #a3323a, #6a161c); }
.feat-item.is-s2 .fw-hbar.is-site em { width: var(--site-w, 40%); }
.feat-item.is-s2 .fw-hbar.is-direct em { width: 10px; }
.fw-hbar b { font: 500 16px/1 var(--display); text-align: right; }
.fw-saved { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--green-l); color: var(--green-t); font-size: 12.5px; }
.fw-saved b { font: 500 18px/1 var(--display); }
/* 3 · Maya's phone: three rooms to tick, a ring that fills */
.fw-phone > header { align-items: center; }
.fw-phone > header b { font-size: 14px; }
.fw-phone > header small { flex: 1; font-size: 11.5px; color: var(--ink-50); }
.fw-donut { --done: 0; position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; aspect-ratio: 1; border-radius: 50%; isolation: isolate; background: conic-gradient(var(--green) calc(var(--done) * 33.34%), var(--bg-2) 0); font: 400 10.5px/1 var(--mono); color: var(--ink-50); transition: --done .6s; }
.fw-donut::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--white); z-index: -1; }
.fw-donut b { color: var(--ink); font-size: 13px; }
@property --done { syntax: "<number>"; inherits: true; initial-value: 0; }
.fw-tiles { display: grid; gap: 6px; margin-top: 4px; }
.fw-tile { display: grid; grid-template-columns: 22px 1fr auto 26px; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; transition: background .3s, border-color .3s; }
.fw-tile .fw-keythumb { width: 22px; }
.fw-tile b { font: 600 15px/1 var(--num); }
.fw-tile small { font-size: 11.5px; color: var(--ink-50); }
.fw-box { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--white); color: transparent; transition: all .3s; }
.fw-box svg { width: 14px; height: 14px; stroke-width: 2; }
.fw-tile.is-done { background: var(--green-l); border-color: rgba(52, 168, 83, .3); }
.fw-tile.is-done small { color: var(--green-t); }
.fw-tile.is-done .fw-box { background: var(--green); border-color: var(--green); color: #fff; }
.fw-tile:hover { border-color: var(--line-2); }
.fw-keys .mk.is-ready .rd { opacity: 1; }
/* 4 · the guest at a glance: their stays, the note, what they like */
.fw-dots { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 14px; }
.fw-dots::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 9px; height: 2px; background: var(--bg-2); }
.fw-dots li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fw-dots i { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--line-2); transition: all .4s; }
.fw-dots small { font-size: 11.5px; color: var(--ink-50); }
.feat-item.is-s1 .fw-dots .fw-s1 i, .feat-item.is-s2 .fw-dots .fw-s2 i { background: var(--stay); border-color: var(--stay); }
.feat-item.is-s3 .fw-dots .is-now i { background: var(--stay); border-color: var(--stay); box-shadow: 0 0 0 5px var(--stay-l); }
.fw-sticky { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--amber-l); border: 1px solid rgba(180, 141, 66, .3); color: #5d3a00; font: italic 400 15px/1.3 Georgia, "Times New Roman", serif; opacity: 0; translate: 0 8px; transition: opacity .45s var(--ease), translate .5s var(--ease); }
.fw-sticky svg { width: 20px; height: 20px; flex: none; }
.feat-item.is-s2 .fw-sticky { opacity: 1; translate: 0 0; }
.fw-likes2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.fw-likes2 button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink-80); cursor: pointer; transition: all .25s; }
.fw-likes2 svg { width: 22px; height: 22px; }
.fw-likes2 small { font-size: 11.5px; }
.fw-likes2 button[aria-pressed="true"] { background: var(--green-l); border-color: rgba(52, 168, 83, .4); color: var(--green-t); }
.fw-likes2 button[aria-pressed="true"]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
/* 5 · Room 11's channels, switched off one by one, or by hand */
.fw-lockkey { position: relative; }
.fw-lockkey .fw-keythumb { width: 30px; }
.fw-lockkey em { position: absolute; right: -8px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1c1917; color: #fff; }
.fw-lockkey em svg { width: 11px; height: 11px; }
.fw-switches ul { display: grid; gap: 6px; margin-top: 2px; }
.fw-switches li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--bg); transition: opacity .3s; }
.fw-switches li > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); font: 600 14px/1 var(--num); font-style: normal; color: var(--ink-80); }
.fw-switches li > i svg { width: 18px; height: 18px; }
.fw-switches li b { font-weight: 500; font-size: 14px; }
.fw-toggle { position: relative; width: 46px; height: 26px; border: 0; border-radius: 999px; background: var(--green); cursor: pointer; transition: background .3s; }
.fw-toggle::after { content: ""; position: absolute; top: 3px; left: 23px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .3s var(--ease); }
.fw-toggle[aria-pressed="false"] { background: var(--line-2); }
.fw-toggle[aria-pressed="false"]::after { left: 3px; }
.fw-switches li.is-off b { color: var(--ink-50); text-decoration: line-through; text-decoration-color: #be2c36; }

/* Wide screens: each window is drawn at the Rooms panel's own size (1040 × 714, the same type and spacing) and scaled
   into the photo by script.js (--fw-s), so its proportions match section 2. Its right side runs off the photo wherever it
   falls; the card that tells the job lifts out of the window instead (.fw-pop) */
@media (min-width: 901px) {
  .feat-media { aspect-ratio: auto; height: var(--fw-mh, 560px); padding: 0; }
  .fw {
    position: absolute; left: 5%; top: 40px; width: 1040px; height: auto; margin: 0; padding: 0 24px 24px; /* as tall as what it shows: no empty panel */
    border-radius: 30px 30px 0 0; font-size: 14px; transform-origin: 0 0; scale: var(--fw-s, .75); overflow: visible;
  }
  .fw > .fw-bg, .fw::before { border-radius: 22px 22px 0 0; }
  /* the job's own card comes up out of the window as the story starts, larger and casting its shadow on the rest;
     each lands wholly inside the photo, at least 24px from its edges */
  .fw-pop.fw-switches { justify-self: start; width: 74%; } /* a short card: three switches */
  .fw-pop { position: relative; z-index: 5; transform-origin: 0 0; transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
  .feat-item.is-s1 .fw-pop { box-shadow: 0 0 0 1px var(--line), 0 50px 80px -30px rgba(20, 10, 4, .5), 0 18px 30px -18px rgba(20, 10, 4, .3); }
  .feat-item.is-s1 .fw-late .fw-pop { transform: translate(-130px, 108px) scale(1.12); }
  .feat-item.is-s1 .fw-direct .fw-pop { transform: translate(-155px, 150px) scale(1.18); }
  .feat-item.is-s1 .fw-hk .fw-pop { transform: translate(-14px, 30px) scale(1.12); }
  .feat-item.is-s1 .fw-guests .fw-pop { transform: translate(-30px, 8px) scale(1.04); }
  .feat-item.is-s1 .fw-closed .fw-pop { transform: translate(-125px, 40px) scale(1.1); }
  .fw > .fw-bg, .fw::before { height: 300px; }
  .fw-nav { height: 60px; }
  .fw-nav ul { left: 50%; right: auto; translate: -50% 0; }
  .fw-nav li { padding: 7px 14px; font-size: 12.5px; }
  .fw-nav .bo-word b { font-size: 19px; }
  .fw-nav .bo-word small { display: block; color: rgba(255, 255, 255, .78); }
  .fw-hero { margin: 30px 0 18px; }
  .fw-hero small { font-size: 12px; }
  .fw-hero h3 { margin-top: 6px; font-size: 34px; }
  .fw-hero .bo-btns b { padding: 9px 15px; font-size: 13px; }
  .fw-grid { gap: 12px; }
  .fw-card { padding: 16px 18px; }
  .fw-card > header { font-size: 13.5px; margin-bottom: 12px; }
  .fw-card > header em { font-size: 12px; }
  .fw-bills li { padding: 8px 12px; font-size: 13px; }
  .fw-bills small, .fw-checks small { font-size: 11.5px; }
  .fw-bills strong { font-size: 15px; }
  .fw-msg { padding: 9px 12px; font-size: 13px; }
  .fw-late .fw-card { padding: 16px 18px; }
  .fw-late .fw-bills li { padding: 8px 12px; }
  .mvd-keys.fw-keys { grid-template-columns: repeat(12, minmax(0, 58px)); }
  .fw-keys .mk b { font-size: 12px; }
  .fw-checks li { padding: 10px 12px; font-size: 13px; }
  .fw-chan li, .fw-dl div { font-size: 13px; padding-top: 9px; padding-bottom: 9px; }
  .fw-big { font-size: 40px; }
  .fw-bars p { font-size: 12.5px; }
  .fw-ring { width: 120px; height: 120px; }
  .fw-stays li { padding: 12px; }
  .fw-note, .fw-likes span { font-size: 13px; }
}

/* ---------- Moving in: four step books ---------- */

.moving-head { text-align: center; }
.moving-head .h2 { max-width: 860px; margin: 26px auto 0; }
.about-stamp.is-orange .hs-in { background: #7a3410; } /* the stamp in orange: a burnt-orange label on a deeper edge */
.about-stamp.is-orange .hs-label { background: #c45a1c; }
.books { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; align-items: end; }
/* each book stands on the panel, leather like the key cards (assets/stepbooks, tools/gen-step-books.sh) */
.step-book { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s var(--ease); }
.step-book img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(40, 18, 6, .28)) drop-shadow(0 3px 4px rgba(40, 18, 6, .2)); transition: filter .45s var(--ease); }
.step-book::after { /* its shadow on the panel */
  content: ""; position: absolute; left: 8%; right: 4%; bottom: -10px; height: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 18, 6, .35), transparent); filter: blur(3px); transition: transform .45s var(--ease), opacity .45s;
}
.step-book:hover, .step-book:focus-visible { transform: translateY(-10px); }
.step-book:hover img, .step-book:focus-visible img { filter: drop-shadow(0 30px 26px rgba(40, 18, 6, .3)) drop-shadow(0 4px 6px rgba(40, 18, 6, .2)); }
.step-book:hover::after, .step-book:focus-visible::after { transform: translateY(10px) scale(.9); opacity: .6; }
.step-book:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 6px; }
@media (max-width: 1000px) { .books { grid-template-columns: 1fr 1fr; gap: 36px 28px; } }
@media (max-width: 560px) { .books { gap: 28px 16px; } }

.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 6px; background: var(--white); border: 1px solid var(--line-2); font: 400 11px/1 var(--mono); color: var(--ink-80); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .2); white-space: nowrap; }
.fchip i { width: 8px; height: 8px; border-radius: 2px; }

/* ---- the open book: the book's own cover swings open on its spine (--cover, set by script.js) ---- */
.mv-open { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; color: var(--ink); }
.mv-open[hidden] { display: none; }
.mv-scrim { position: absolute; inset: 0; background: rgba(245, 245, 242, .6); opacity: 0; transition: opacity .45s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mv-open.is-open .mv-scrim { opacity: 1; }
.mv-open[data-step="1"] { --lth: #6e1519; --lth-2: #4a0d10; --mark: #7b1d22; }
.mv-open[data-step="2"] { --lth: #9a5a26; --lth-2: #6b3b16; --mark: #a2703d; }
.mv-open[data-step="3"] { --lth: #2a2624; --lth-2: #141210; --mark: #2a2624; }
.mv-open[data-step="4"] { --lth: #e9dcc0; --lth-2: #cdb98f; --mark: #b48d42; }
.mv-book3d {
  position: relative; width: min(800px, 100%, calc((100svh - 72px) * 1.7)); aspect-ratio: 1.7; perspective: 2600px;
  transform: translateX(-25%) translateY(24px) scale(.88); opacity: 0;
  transition: transform .9s var(--ease), opacity .4s;
}
.mv-open.is-open .mv-book3d { transform: none; opacity: 1; }
.mv-book3d::before { /* the open boards: a little of the binding shows round the pages */
  content: ""; position: absolute; inset: -10px; border-radius: 14px; background: linear-gradient(160deg, var(--lth), var(--lth-2));
  box-shadow: 0 50px 90px -30px rgba(40, 18, 6, .55); opacity: 0; transition: opacity .4s 1s;
}
.mv-open.is-open .mv-book3d::before { opacity: 1; }
.mv-page { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #fbf8f1; }
.mv-right { right: 0; border-radius: 0 8px 8px 0; background-image: linear-gradient(90deg, rgba(60, 40, 20, .16), rgba(60, 40, 20, 0) 9%); }
.mv-left { background-image: linear-gradient(270deg, rgba(60, 40, 20, .16), rgba(60, 40, 20, 0) 9%); }
.mv-cover {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.6, .05, .25, 1) .3s;
}
.mv-open.is-open .mv-cover { transform: rotateY(-180deg); }
.mv-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mv-front { background: var(--cover) center / cover no-repeat; filter: drop-shadow(0 30px 40px rgba(40, 18, 6, .35)); }
.mv-back { transform: rotateY(180deg); left: 0; width: 100%; border-radius: 8px 0 0 8px; }
.mv-left { padding: 36px 34px 28px 38px; display: flex; flex-direction: column; }
.mv-step h3 { margin-top: 12px; font: 500 30px/1.05 var(--display); letter-spacing: -.035em; }
.mv-step > p:not(.label) { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-60); max-width: 36ch; }
.mv-step ul { margin-top: 18px; border-top: 1px solid var(--line-2); }
.mv-step li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.mv-step li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--mark); flex: none; }
.mv-nav { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--mono); color: var(--ink-50); }
.mv-nav button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.mv-nav button:hover { background: var(--ink); color: #fff; }
.mv-nav svg { width: 15px; height: 15px; }
.mv-close { position: absolute; top: -18px; right: -18px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #141416; color: #fff; cursor: pointer; opacity: 0; transition: opacity .3s .9s, transform .2s; }
.mv-close svg { width: 16px; height: 16px; }
.mv-open.is-open .mv-close { opacity: 1; }
/* closing is the opening run backwards: the cover swings shut and the book slides back to the middle, then it leaves */
.mv-open.is-closing .mv-scrim { opacity: 1; }
.mv-open.is-closing .mv-book3d { transform: translateX(-25%); opacity: 1; transition: transform .9s var(--ease) .05s; }
.mv-open.is-closing .mv-cover { transition: transform .9s cubic-bezier(.6, .05, .25, 1); }
.mv-open.is-closing .mv-book3d::before, .mv-open.is-closing .mv-close { transition: opacity .2s; }
.mv-open.is-closing.is-gone .mv-scrim { opacity: 0; }
.mv-open.is-closing.is-gone .mv-book3d { transform: translateX(-25%) translateY(24px) scale(.88); opacity: 0; transition: transform .45s var(--ease), opacity .35s; }
body.is-lifting .bell-fab { opacity: 0; visibility: hidden; pointer-events: none; } /* the desk bell steps aside while a book or a card is open */
.mv-close:hover { transform: scale(1.06); }
.mv-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ---- the right page: a small Roomhook screen to try, dressed like the Overview (--d = when its motion starts) ---- */
.mv-right { display: grid; place-items: center; padding: 26px 26px 26px 34px; }
.mv-demo { display: none; width: 100%; }
.mv-demo.is-play { display: block; }
.mvd-win { position: relative; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(30, 16, 6, .4); padding: 14px 15px; }
.mvd-win header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; color: var(--ink-50); }
.mvd-win header b { font: italic 400 17px/1 Georgia, "Times New Roman", serif; color: var(--ink); white-space: nowrap; }
.mvd-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-60); font-style: normal; font-size: 11px; font-weight: 500; white-space: nowrap; transition: background .3s, color .3s; }
.mvd-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mvd-status.is-good { background: var(--green-l); color: var(--green-t); }
.mvd-status.is-busy { background: var(--arrive-l); color: var(--arrive-t); }
.mvd-status.is-busy::before { animation: mvd-pulse 1s infinite; }
.mv-demo button.fchip { cursor: pointer; transition: transform .2s var(--ease), opacity .25s, box-shadow .2s; }
.mv-demo button.fchip:hover { transform: translateY(-2px); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .3); }
.mv-demo button.fchip[aria-pressed="false"] { opacity: .5; box-shadow: none; border-style: dashed; }

/* the key rack inside the small screens: 12 keys from ROOMS (script.js) */
.mvd-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 8px; padding-top: 10px; border-top: 3px solid #c9a45c; }
.mvd-keys .mk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-style: normal; cursor: default; transition: transform .3s var(--ease); }
.mvd-keys .mk::before { content: ""; width: 100%; aspect-ratio: 3 / 5; border-radius: 4px; background: var(--card) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 4px rgba(40, 18, 6, .25)); transition: opacity .35s, transform .45s var(--ease); }
.mvd-keys .mk b { position: absolute; left: 12%; top: 7%; font: 600 11px/1 var(--num); color: var(--gold); transition: opacity .3s; }
.mvd-keys .mk em { font: 400 9.5px/1 var(--mono); font-style: normal; color: var(--ink-50); transition: opacity .3s; }
.mvd-keys .mk:hover { transform: translateY(-4px) rotate(-3deg); }
.mvd-keys .mk.stay { --card: url("assets/card-stay.webp"); --gold: #efd48e; }
.mvd-keys .mk.arrive { --card: url("assets/card-arrive.webp"); --gold: #866219; }
.mvd-keys .mk.empty { --card: url("assets/card-empty.webp"); --gold: #fbe3a3; }
.mvd-keys .mk.closed { --card: url("assets/card-closed.webp"); --gold: #d4b46a; }
/* step 1's layers: no rooms (empty hooks), rooms (every key free), bookings (tonight's colours), rates (the price under each) */
/* step 1 starts with empty hooks; each file adds a layer: rooms (blank keys), bookings (tonight's colours), rates (prices) */
.mvd-import:not(.has-rooms) .mk::before { opacity: 1; background: none; border: 1.5px dashed var(--line-2); filter: none; transform: none; }
.mvd-import:not(.has-rooms) .mk b { color: var(--ink-35); }
.mvd-import.has-rooms:not(.has-bookings) .mk { --card: url("assets/card-arrive.webp"); } /* one blank key for every room until the bookings say otherwise */
.mvd-import.has-rooms:not(.has-bookings) .mk::before { filter: grayscale(.9) brightness(1.03) drop-shadow(0 4px 4px rgba(40, 18, 6, .18)); }
.mvd-import.has-rooms:not(.has-bookings) .mk b { color: #6f665c; }
.mvd-import:not(.has-rates) .mk em { opacity: 0; }
.mvd-import.has-rooms .mk::before { animation: mvd-hang .55s var(--ease) both; animation-delay: calc(var(--k) * .04s); transition: filter .5s; }
.mvd-import.has-rooms .mk { cursor: pointer; }
.mvd-import .mk.is-picked { transform: translateY(-5px) rotate(-3deg); }
.mvd-import .mk.is-picked::before { outline: 2px solid var(--ink); outline-offset: 2px; }
.mvd-hint { margin-top: 12px; min-height: 2.6em; display: grid; place-items: center; font: 400 10.5px/1.3 var(--mono); color: var(--ink-50); text-align: center; }
.mvd-hint b { color: var(--ink); font-weight: 500; }
.mvd-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
/* the files are buttons: + to add, a tick once in, a quick progress line while it reads */
.mvd-files .fchip { position: relative; overflow: hidden; padding: 7px 8px 7px 10px; }
.mvd-files .fchip svg { width: 13px; height: 13px; margin-left: 2px; }
.mvd-files .fchip .fc-done { display: none; color: var(--green-t); }
.mvd-files .fchip[aria-pressed="true"] .fc-add { display: none; }
.mvd-files .fchip[aria-pressed="true"] .fc-done { display: block; }
.mvd-files .fchip[aria-pressed="false"] { opacity: 1; border-style: dashed; box-shadow: none; background: rgba(255, 255, 255, .6); }
.mvd-files .fchip.is-next { animation: mvd-nudge 1.6s ease-in-out infinite; }
.mvd-files .fchip::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--green); }
.mvd-files .fchip.is-loading::after { animation: mvd-load .6s ease-out forwards; }
@keyframes mvd-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(190, 44, 54, 0); } 50% { box-shadow: 0 0 0 4px rgba(190, 44, 54, .14); } }
@keyframes mvd-load { to { width: 100%; } }

/* step 2: channels wired to the board */
/* the three channels side by side, their wires running down into the board */
.mvd-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mvd-sources .fchip { flex-direction: column; justify-content: center; gap: 7px; min-height: 52px; padding: 8px 6px; font: 500 11px/1.25 var(--sans); white-space: normal; text-align: center; }
.mvd-wires { display: block; width: 100%; height: 30px; overflow: visible; }
.mvd-wires path { fill: none; stroke: #c9a45c; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; animation: mvd-flow 1.2s linear infinite; transition: opacity .3s; }
.mvd-wires path.is-off { opacity: .12; animation: none; }
.mvd-rows { display: grid; gap: 6px; }
.mvd-rows li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; background: var(--bg); font-size: 11.5px; transition: opacity .3s, transform .3s var(--ease), background .2s; }
.mvd-rows li:hover { background: var(--white); box-shadow: 0 0 0 1px var(--line-2); }
.mvd-rows li.is-off { display: none; }
.mvd-rows li > i { display: grid; place-items: center; height: 26px; border-radius: 7px; font: 600 10px/1 var(--sans); font-style: normal; background: var(--arrive-l); color: var(--arrive-t); }
.mvd-rows li > i.stay { background: var(--stay-l); color: var(--stay-t); }
.mvd-rows span { min-width: 0; }
.mvd-rows b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvd-rows small { display: block; font-size: 10px; color: var(--ink-50); }
.mvd-rows em { font: 400 10px/1 var(--mono); font-style: normal; color: var(--ink-50); }
.is-play .mvd-rows li { animation: mvd-slide .5s var(--ease) both; animation-delay: calc(var(--d) + var(--i, 0) * .12s); }
.mvd-rows li:nth-child(2) { --i: 1; } .mvd-rows li:nth-child(3) { --i: 2; } .mvd-rows li:nth-child(4) { --i: 3; } .mvd-rows li:nth-child(5) { --i: 4; }

/* step 3: the guest's side, the inn's own booking page */
.mvd-site { padding: 10px 12px 12px; }
.mvd-site header { gap: 8px; margin-bottom: 10px; }
.mvd-dots { display: flex; gap: 4px; } .mvd-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.mvd-url { flex: 1; min-width: 0; padding: 4px 10px; border-radius: 6px; background: var(--bg); font: 400 10.5px/1.3 var(--mono); color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvd-site-hero { position: relative; height: 78px; border-radius: 10px; overflow: hidden; }
.mvd-site-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.mvd-site-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 6, .62), rgba(20, 12, 6, .05) 75%); }
.mvd-site-hero span { position: absolute; z-index: 1; left: 14px; top: 50%; translate: 0 -50%; color: #fff; }
.mvd-site-hero b { display: block; font: italic 400 21px/1 Georgia, "Times New Roman", serif; }
.mvd-site-hero small { display: block; margin-top: 5px; font: 500 8.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.mvd-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.mvd-form span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 10.5px; color: var(--ink-80); }
.mvd-form svg { width: 12px; height: 12px; color: var(--ink-50); }
.mvd-roomlist { display: grid; gap: 5px; margin-top: 8px; }
.mvd-roomlist li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 5px 9px 5px 5px; border-radius: 9px; border: 1px solid var(--line); font-size: 11px; }
.mvd-roomlist li.is-on { border-color: var(--line-2); background: var(--bg); } /* the chosen room: a soft fill, no heavy outline */
.mvd-roomlist li.is-taken { opacity: .5; }
.mvd-roomlist img { width: 38px; height: 30px; border-radius: 6px; object-fit: cover; }
.mvd-roomlist b { display: block; font-weight: 500; }
.mvd-roomlist small { display: block; font-size: 9.5px; color: var(--ink-50); }
.mvd-roomlist em { font: 500 13px/1 var(--display); font-style: normal; text-align: right; }
.mvd-roomlist em small { font: 400 9px/1.3 var(--sans); }
.mvd-book { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 0; border-radius: 9px; background: #be2c36; color: #fff; font: 500 12px/1.2 var(--sans); cursor: pointer; transition: filter .2s, transform .2s, background .3s; }
.mvd-book:hover { filter: brightness(.94); }
.mvd-book:active { transform: scale(.98); }
.mvd-book.is-done { background: #1c1917; cursor: default; }
/* step 3 plays itself: the page comes in piece by piece, the free room is picked, the button is pressed */
.is-play .mvd-site > * { animation: mvd-in .5s var(--ease) both; }
.is-play .mvd-site > :nth-child(2) { animation-delay: calc(var(--d) + .1s); } .is-play .mvd-site > :nth-child(3) { animation-delay: calc(var(--d) + .25s); }
.is-play .mvd-site > :nth-child(4) { animation-delay: calc(var(--d) + .4s); } .is-play .mvd-site > :nth-child(5) { animation-delay: calc(var(--d) + .55s); }
.mvd-roomlist li.is-on { transition: background .35s, border-color .35s, box-shadow .35s; }
.mvd-site:not(.is-picked) .mvd-roomlist li.is-on { background: var(--white); border-color: var(--line); }
.mvd-site.is-picked .mvd-roomlist li.is-on { box-shadow: 0 0 0 3px rgba(190, 44, 54, .12); border-color: rgba(190, 44, 54, .35); }
.mvd-book.is-press { transform: scale(.96); filter: brightness(.9); }
.mvd-mail.is-in .mvd-env { animation: mvd-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes mvd-pop { from { transform: scale(0); } to { transform: scale(1); } }
.mvd-mail { /* the confirmation, folded away until the guest books */
  display: flex; align-items: center; gap: 10px; max-height: 0; margin-top: 0; padding: 0 10px; overflow: hidden; border-radius: 10px;
  background: var(--bg); font-size: 11px; text-align: left; opacity: 0;
  transition: max-height .45s var(--ease), margin-top .45s var(--ease), padding .45s var(--ease), opacity .35s;
}
.mvd-mail.is-in { max-height: 70px; margin-top: 8px; padding: 8px 10px; opacity: 1; }
.mvd-env { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--green-l); color: var(--green-t); flex: none; }
.mvd-env svg { width: 15px; height: 15px; }
.mvd-mail > span:nth-child(2) { flex: 1; min-width: 0; }
.mvd-mail b { display: block; font-weight: 600; }
.mvd-mail small { display: block; font-size: 9.5px; color: var(--ink-50); }
.mvd-mailkey { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mvd-mailkey .mk { display: block; width: 20px; aspect-ratio: 3 / 5; border-radius: 3px; background: url("assets/card-empty.webp") center / 100% 100%; filter: drop-shadow(0 3px 3px rgba(40, 18, 6, .25)); }
.mvd-mail.is-in .mvd-mailkey .mk { animation: mvd-booked .5s var(--ease) .9s both; }
.mvd-mailkey small { font: 400 8.5px/1 var(--mono); }
@keyframes mvd-booked { 0% { transform: none; } 45% { transform: rotateY(90deg); background-image: url("assets/card-empty.webp"); } 55% { transform: rotateY(90deg); background-image: url("assets/card-stay.webp"); } 100% { transform: none; background-image: url("assets/card-stay.webp"); } }

/* step 4: side by side, or the board only */
.mvd-seg { display: flex; gap: 2px; width: max-content; margin: 0 auto 14px; padding: 3px; border-radius: 999px; background: #141416; }
.mvd-seg button { padding: 7px 14px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .6); font: 500 12px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.mvd-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.mvd-seg button:not([aria-pressed="true"]):hover { color: #fff; }
.mvd-vs { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; align-items: start; transition: grid-template-columns .5s var(--ease); }
.mvd-vs.is-board { grid-template-columns: 0fr 1fr; gap: 0; }
.mvd-old { overflow: hidden; min-width: 0; transition: opacity .35s, padding .5s var(--ease), border-width .5s; }
.mvd-vs.is-board .mvd-old { opacity: 0; padding-left: 0; padding-right: 0; border-width: 0; }
.mvd-old .lines { display: grid; gap: 7px; }
.mvd-old .lines i { height: 6px; border-radius: 3px; background: var(--bg-2); }
.mvd-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-60); }
.mvd-new .mvd-keys { gap: 8px 6px; }
[data-demo="4"].is-play .mk::before { animation: mvd-hang .55s var(--ease) both; animation-delay: calc(var(--d) + var(--k) * .05s); }
[data-demo="4"] .mk em, [data-demo="4"] .mk b { display: none; } /* the small board in step 4 shows just the keys */

@keyframes mvd-hang { from { opacity: 0; transform: translateY(-12px) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes mvd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mvd-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes mvd-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes mvd-pulse { 50% { opacity: .3; } }

@media (max-width: 760px) {
  /* phones: the open book is one page after the other, no cover swing */
  .mv-open { padding: 12px; align-items: end; }
  .mv-book3d { width: 100%; aspect-ratio: auto; max-height: calc(100svh - 24px); overflow: auto; border-radius: 14px; transform: translateY(40px); perspective: none; display: flex; flex-direction: column; background: #fbf8f1; }
  .mv-book3d::before { display: none; }
  .mv-open.is-open .mv-book3d { transform: none; }
  .mv-open.is-closing .mv-book3d, .mv-open.is-closing.is-gone .mv-book3d { transform: translateY(40px); opacity: 0; transition: transform .35s, opacity .3s; }
  .mv-page { position: relative; width: 100%; inset: auto; border-radius: 0; }
  .mv-cover { position: relative; left: 0; width: 100%; transform: none !important; order: -1; transition: none; }
  .mv-front { display: none; }
  .mv-back { position: relative; transform: none; }
  .mv-left { padding: 32px 22px 22px; }
  .mv-right { padding: 22px; background-image: none; border-top: 1px solid var(--line); }
  .mv-close { top: 10px; right: 10px; }
  .mv-step h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-book3d, .mv-cover { transition: none; }
  .mv-demo *, .mv-demo *::before { animation: none !important; }
}

.faq { max-width: 860px; margin: 0 auto; }
.faq-sec { padding-top: 0; }
.faq { text-align: center; } /* centred: stamp, heading, then the six questions */
.faq .h2 { margin-top: 22px; }
.faq .acc { max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; }
.quotes-head .h2 { margin-top: 22px !important; }
.faq .acc { margin-top: 22px; }
.faq .acc-item button { font-size: 16px; padding: 16px 18px; }
.faq .acc-body p { padding-left: 54px; font-size: 15px; }

/* ---------- Final: hang your own keys (dark, like the desk at night) ---------- */

.final.is-dark { position: relative; overflow: hidden; padding: 120px 0 112px; text-align: center; color: #f5ede2;
  background: radial-gradient(70% 60% at 50% 30%, rgba(201, 164, 92, .16), transparent 70%), linear-gradient(180deg, #1c130d, #120c08); }
.final-head .hero-stamp { margin-bottom: 0; }
.final-head .h2 { margin: 24px auto 0; color: #fff; }
.final-head .h2 .soft { color: rgba(245, 230, 210, .55); }
.hang { max-width: 880px; margin: 48px auto 0; }
/* the brass name plate: type the inn's name onto it */
.hang-plate { position: relative; display: inline-block; padding: 12px 34px; border-radius: 6px;
  background: linear-gradient(180deg, #e9cf92, #c9a45c 48%, #9d7738); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(60, 36, 10, .35), 0 10px 22px -10px rgba(0, 0, 0, .7); }
.hang-plate input { width: min(360px, 70vw); border: 0; outline: 0; background: none; text-align: center; font: italic 400 26px/1.2 Georgia, "Times New Roman", serif; color: #3a2408; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.hang-plate input::placeholder { color: rgba(58, 36, 8, .45); }
.hang-screws::before, .hang-screws::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3cc, #8a6328 70%); }
.hang-screws::before { left: 12px; } .hang-screws::after { right: 12px; }
/* the rack: rows of brass rail, a hook per room, a key on each hook */
.hang-rack { display: grid; gap: 34px; margin: 40px auto 0; }
.hang-rack { width: max-content; max-width: 100%; }
.hang-row { position: relative; display: grid; grid-template-columns: repeat(var(--per, 10), 58px); gap: 10px; } /* every rail the full width, keys hung from the left */
/* the same hardware as the board in section 2: a brass rail through the pegs, a split ring from each peg through the card */
.hang-row::before { content: ""; position: absolute; left: -8px; right: -8px; top: 5px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #fbe7b0 0, #d9b06a 30%, #a87a3c 62%, #6b4a22 100%); box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.hk { position: relative; width: 58px; display: flex; flex-direction: column; align-items: center; }
.hk::before { content: ""; position: relative; z-index: 2; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff6d8 0, #e8c57e 30%, #a9783a 70%, #5e3f1c 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.hk .fob-loop { position: absolute; left: 50%; top: -19px; width: 9px; height: 29px; margin: 0; translate: -50% 0; border-width: 2px; } /* rides with the card as it swings */
.hk i { position: relative; display: block; width: 100%; aspect-ratio: 3 / 5; margin-top: 9px; transform-origin: 50% 0; background: var(--card, url("assets/card-empty.webp")) center / 100% 100% no-repeat; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); animation: hk-hang .7s var(--ease) both; }
.hk i b { position: absolute; left: 12%; top: 8%; font: 600 11px/1 var(--num); font-style: normal; color: #fbe3a3; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.hk:nth-child(4n+2) i { --card: url("assets/card-stay.webp"); }
.hk:nth-child(4n+3) i { --card: url("assets/card-arrive.webp"); } .hk:nth-child(4n+3) i b { color: #866219; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.hk:nth-child(4n) i { --card: url("assets/card-closed.webp"); }
.hk.is-out i { animation: hk-off .35s ease-in both; }
.hk:hover i { animation: hk-swing 1s var(--ease); }
.hang-rack.is-going .hk i { animation: hk-swing 1.1s var(--ease) both; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes hk-hang { from { opacity: 0; transform: translateY(-26px) rotate(-14deg); } 60% { opacity: 1; transform: rotate(6deg); } to { transform: none; } }
@keyframes hk-off { to { opacity: 0; transform: translateY(18px) rotate(10deg); } }
@keyframes hk-swing { 0%, 100% { transform: none; } 25% { transform: rotate(8deg); } 55% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } }
.hang-bar { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.hang-step { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 245, 230, .08); border: 1px solid rgba(255, 245, 230, .14); }
.hang-step button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: rgba(255, 245, 230, .1); color: #fff; cursor: pointer; transition: background .2s; }
.hang-step button:hover { background: rgba(255, 245, 230, .2); }
.hang-step svg { width: 16px; height: 16px; }
.hang-step span { min-width: 74px; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.hang-step b { font: 600 16px/1 var(--num); color: #fff; }
.hang-step small { font-size: 12px; color: rgba(245, 230, 210, .6); }
.hang-note { margin-top: 18px; font-size: 13px; color: rgba(245, 230, 210, .6); min-height: 1.4em; }
.hang-note b { color: #fff; font-weight: 500; }
@media (max-width: 640px) { .hk { width: 40px; } .hang-row { gap: 6px; grid-template-columns: repeat(var(--per, 6), 40px); } .hang-plate input { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .hk i, .hang-rack.is-going .hk i { animation: none; } }

/* ---------- What Roomhook does: the inn through a keyhole, opening as you scroll ----------
   .about is 260vh tall; .about-pin sticks to the screen while --open (set by script.js) runs 0 → 1: the black around the
   keyhole scales away from the hole's centre until the photo fills the screen, the headline steps back, and the note
   about the demo inn comes in over the photo. */

.about { --open: 0; position: relative; height: 260vh; background: #0a0705; color: #fff; }
.about-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.about-photo { position: absolute; inset: 0; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; scale: calc(1.18 - var(--open) * .18); }
.about-hole {
  position: absolute; left: 50%; top: 17vh; height: 52vh; width: auto; aspect-ratio: 300 / 620; overflow: visible;
  translate: -50% 0; transform-origin: 50% 46%;
  scale: calc(1 + var(--open) * var(--open) * 22);
}
.about-black { fill: #0a0705; }
.about-copy {
  position: absolute; left: 0; right: 0; top: calc(17vh + 52vh + 36px); padding: 0 var(--gutter); text-align: center;
  opacity: calc(1 - var(--open) * 6); translate: 0 calc(var(--open) * 40px);
}
.about-stamp { margin-bottom: 0; } /* the hero's stamp, as a label: the staying key card's burgundy, set in capitals */
.about-stamp .hs-in { background: #3f0a10; }
.about-stamp .hs-label { height: 30px; padding: 0 12px; background: #6e111a; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.about-stamp:hover { transform: none; }
.about-copy .h2 { max-width: none; margin: 0 auto; color: #fff; font-size: clamp(26px, 3vw, 40px); }
@media (min-width: 720px) { .about-copy .h2 { white-space: nowrap; } } /* one line per sentence: two lines in all */
.about-copy .h2 .soft { color: rgba(245, 230, 210, .55); }
@media (max-width: 640px) {
  .about-hole { top: 18vh; height: 44vh; }
  .about-copy { top: calc(18vh + 44vh + 26px); }
}
@media (prefers-reduced-motion: reduce) {
  .about { height: auto; }
  .about-pin { position: relative; }
}

/* ---------- Night sections: the lobby after dark, like the hero ----------
   Two of the page's sections (moving in, and the last call to move in) sit on a dimmed photo of the lobby,
   so the page goes back to the front desk between the light chapters. */

.is-night { position: relative; color: #f5ede2; background: #2a1a10 var(--night) center / cover no-repeat; isolation: isolate; }
.is-night::before { /* deep brown at the edges, a little lamplight left in the middle */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(40, 22, 10, .45), rgba(30, 16, 8, .88) 80%), linear-gradient(180deg, rgba(30, 16, 8, .5), rgba(30, 16, 8, .2) 40%, rgba(30, 16, 8, .6));
}
.is-night .label, .is-night .note-small { color: rgba(245, 230, 210, .6); }
.is-night .h2 { color: #fff; }
.is-night .h2 .soft { color: rgba(245, 230, 210, .55); }
.is-night .lead { color: rgba(245, 237, 226, .82); }


/* the last call: an empty brass rail with chalk outlines where the keys will hang */
.is-night .btn-line { background-color: rgba(255, 245, 230, .1); color: #fff7ec; }
.is-night .btn-line:hover { background-color: rgba(255, 245, 230, .16); }

/* ---------- Footer: the mark and its line, three columns of links, then the small print ---------- */

.footer { padding: 88px 0 36px; color: #f5ede2; background: #120c08; border-top: 1px solid rgba(255, 245, 230, .06); }
.foot { display: grid; grid-template-columns: 1fr repeat(4, max-content); gap: 32px 56px; align-items: start; } /* the links pushed to the right edge */
.foot-logo { display: inline-block; color: #be2c36; transition: opacity .2s; } /* the mark alone, large */
.foot-logo .logo-mark { display: block; width: 64px; height: 52px; }
.foot-logo:hover { opacity: .85; }
.foot-line { margin-top: 24px; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.2; color: #fff; } /* the page's heading style, in two lines */
.foot-line .soft { color: rgba(245, 230, 210, .5); }
@media (min-width: 861px) { .foot-line { white-space: nowrap; } }
.foot-col h4 { margin-bottom: 22px; font-size: 13.5px; font-weight: 500; color: rgba(245, 230, 210, .55); }
.foot-col ul { display: grid; gap: 12px; }
.foot-col a, .foot-link { padding: 0; border: 0; background: none; font: 400 14px/1.35 var(--sans); color: rgba(245, 237, 226, .85); cursor: pointer; transition: color .2s; }
.foot-col a:hover, .foot-link:hover { color: #fff; }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 88px; font-size: 13.5px; color: rgba(245, 230, 210, .55); }
.foot-small { display: grid; gap: 16px; }
.foot-social { display: flex; gap: 18px; }
.foot-social a { color: rgba(245, 237, 226, .55); transition: color .2s; }
.foot-social a:hover { color: #fff; }
.foot-social svg { width: 19px; height: 19px; display: block; }
.foot-seals { display: flex; gap: 14px; }
/* square postage stamps in the key cards' leathers: a perforated paper edge, the words and a small mark in gold foil */
.foot-stamp { --r: 2.4px; width: 92px; aspect-ratio: 1; padding: 6px; background: #efe5d2; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); transition: transform .3s var(--ease);
  -webkit-mask: radial-gradient(var(--r), #0000 96%, #000) round calc(-1.4 * var(--r)) calc(-1.4 * var(--r)) / calc(2.8 * var(--r)) calc(2.8 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 2.8 * var(--r)) calc(100% - 2.8 * var(--r));
  mask: radial-gradient(var(--r), #0000 96%, #000) round calc(-1.4 * var(--r)) calc(-1.4 * var(--r)) / calc(2.8 * var(--r)) calc(2.8 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 2.8 * var(--r)) calc(100% - 2.8 * var(--r)); }
.foot-stamp:hover { transform: translateY(-3px); }
.st-in { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding: 7px 4px 6px; border-radius: 4px; text-align: center;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .14), transparent 60%), var(--lth); color: var(--gold); text-shadow: 0 1px 0 var(--deboss);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 0 0 3px rgba(255, 255, 255, .06); }
.st-in small { font: 600 7.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.st-in b { font: 600 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.st-icon { width: 28px; height: 24px; filter: drop-shadow(0 1px 0 var(--deboss)); }
svg.st-icon[viewBox="0 0 24 24"] { width: 26px; height: 26px; }
.foot-stamp.is-stay { --lth: #7b1d22; --gold: #efd48e; --deboss: rgba(0, 0, 0, .45); }
.foot-stamp.is-empty { --lth: #a2622e; --gold: #fbe3a3; --deboss: rgba(0, 0, 0, .4); }
.foot-stamp.is-arrive { --lth: #e7d9bc; --gold: #866219; --deboss: rgba(255, 255, 255, .55); }
.foot-top { display: inline-flex; align-items: center; gap: 10px; color: rgba(245, 237, 226, .85); transition: color .2s; }
.foot-top svg { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: #be2c36; color: #fff; transition: transform .25s var(--ease); }
.foot-top:hover { color: #fff; }
.foot-top:hover svg { transform: translateY(-2px); }
@media (max-width: 860px) {
  .foot { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .foot-lead { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .foot-base { flex-direction: column; align-items: flex-start; gap: 24px; } }

/* ---------- Lift-a-key layer ---------- */

.lift-layer { position: fixed; inset: 0; z-index: 100; }
.lift-layer[hidden] { display: none; }
.lift-scrim { position: absolute; inset: 0; background: rgba(245, 245, 242, .55); opacity: 0; transition: opacity .35s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lift-layer.is-open .lift-scrim { opacity: 1; }
.flipper { position: fixed; perspective: 1400px; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px 14px 22px 22px; }
.flip-front { container-type: inline-size; border: 1px solid; border-radius: 14px 14px 22px 22px; }
/* the room number stays where it is on the key in the rack (top left, clear of the brass key), sized to the card */
.flip-front b { position: absolute; left: 10cqw; top: 12cqw; font: 600 20cqw/1 var(--num); letter-spacing: -.04em; }
.flip-front { border: 0; background: var(--card) center / 100% 100% no-repeat; color: var(--gold); text-shadow: 0 2px 0 var(--deboss); }
.flip-front.is-stay { --card: url("assets/card-stay.webp"); --gold: #efd48e; --deboss: rgba(0, 0, 0, .45); }
.flip-front.is-arrive { --card: url("assets/card-arrive.webp"); --gold: #866219; --deboss: rgba(255, 255, 255, .55); }
.flip-front.is-empty { --card: url("assets/card-empty.webp"); --gold: #fbe3a3; --deboss: rgba(0, 0, 0, .4); }
.flip-front.is-closed { --card: url("assets/card-closed.webp"); --gold: #d4b46a; --deboss: rgba(0, 0, 0, .6); }
.flip-back { transform: rotateY(180deg); overflow: auto; }
body.is-lifting { overflow: hidden; }

/* the back of a lifted key: the same 3:5 card, punched for its hook, the room's night set top to bottom */
.rcard {
  position: relative; display: flex; flex-direction: column; min-height: 100%;
  padding: 40px 22px 20px; font-size: 14px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px 14px 22px 22px;
  box-shadow: 0 40px 80px -30px rgba(20, 20, 20, .35);
}
.rcard::before { /* the punched hole */
  content: ""; position: absolute; top: 14px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--bg-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-room { font: 400 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.rc-guest { margin-top: 14px; font: 600 26px/1.1 var(--display); letter-spacing: -.035em; }
.rc-sub { color: var(--ink-50); margin-top: 4px; }
.rc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 26px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.rc-meta div { background: var(--white); padding: 10px 12px; }
.rc-meta dt { font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.rc-meta dd { margin-top: 6px; font-weight: 500; overflow-wrap: anywhere; }
.rc-meta dd.good { color: var(--green-t); }
.rc-note { margin-top: 12px; }
.rc-log { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.rc-log h4 { font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 8px; }
.rc-log li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 13px; line-height: 1.35; padding: 4px 0; }
.rc-log li time { display: block; font: 400 11.5px/1.2 var(--mono); }
.rc-log li span { color: var(--ink-60); }
/* the room itself across the top of the card, like the inn's photo on the Overview: the name sits on a band of shade,
   then the photo dissolves into the card */
.rc-photo { position: absolute; left: 0; top: 0; width: 100%; height: 360px; object-fit: cover; border-radius: 13px 13px 0 0;
  -webkit-mask: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .5) 84%, transparent 99%); mask: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .5) 84%, transparent 99%); }
.rc-shade { position: absolute; left: 0; right: 0; top: 0; height: 360px; border-radius: 13px 13px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 251, 248, 0) 76%, rgba(251, 251, 248, .6) 88%, var(--paper) 99%), linear-gradient(180deg, rgba(24, 14, 8, .25) 0, rgba(24, 14, 8, 0) 20%, rgba(24, 14, 8, .55) 58%, rgba(24, 14, 8, .2) 80%, rgba(24, 14, 8, 0) 92%); }
.rcard::before { z-index: 1; }
.rcard > :not(.rc-photo):not(.rc-shade) { position: relative; }
.rc-head { margin-top: 138px; }
.rc-head .rc-room { color: rgba(255, 255, 255, .8); }
.rc-head + .rc-guest { color: #fff; }
.rc-head + .rc-guest + .rc-sub { color: rgba(255, 255, 255, .8); }
.rc-foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rc-foot small { display: flex; align-items: center; gap: 6px; color: var(--ink-50); font-size: 12px; }
.rc-foot small svg { flex: none; width: 15px; height: 15px; }
@media (max-width: 420px) {
  /* a phone-sized card: tighter, so the whole night still fits the 3:5 shape */
  .rcard { padding: 34px 16px 16px; font-size: 13px; }
  .rc-guest { font-size: 22px; margin-top: 10px; }
  .rc-meta { margin-top: 12px; }
  .rc-log { margin-top: 12px; gap: 10px; }
  .rc-log li { font-size: 12.5px; }
  .rc-photo, .rc-shade { height: 310px; }
  .rc-head { margin-top: 116px; }
  .rc-foot { padding-top: 12px; margin-top: auto; }
}

/* ---------- The key card that drops from the hero onto the board ---------- */

.fly-key { position: absolute; left: 0; top: 0; z-index: 45; pointer-events: none; transform-origin: 50% 50%; will-change: transform; perspective: 900px; transition: none; } /* it follows the scroll exactly: no easing in from its start (it is a .fob, which animates) */
.fly-key:not(.is-placed) { visibility: hidden; } /* nothing shows until it has been put where the scroll says */
.fly-spin { position: relative; transform-style: preserve-3d; will-change: transform; }
.fly-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fly-face.is-back { position: absolute; inset: 0; display: grid; place-items: center; transform: rotateY(180deg); background: url("assets/card-back.webp") center / 100% 100% no-repeat; }
.fly-mark { width: 44%; height: auto; margin-top: 6%; color: #efd48e; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45)); } /* gold, debossed like .fob-no */
.fly-key .fob-tag, .fly-face.is-back { filter: drop-shadow(0 22px 22px rgba(40, 18, 6, .35)) drop-shadow(0 4px 6px rgba(40, 18, 6, .25)); }
.fly-key[hidden] { display: none; }
/* still in the tray: in the counter's lamplight, like the cards around it */
.fly-face { transition: filter .5s ease; }
.fly-key.in-tray .fly-face { filter: brightness(.86) sepia(.12); }
.fly-key.in-tray .fob-tag { filter: drop-shadow(3px 2px 4px rgba(30, 12, 2, .45)); }
.fly-wall { position: absolute; z-index: 46; pointer-events: none; background-repeat: no-repeat; }
.fly-wall[hidden] { display: none; }

/* ---------- Reveal ---------- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .fob, button.fob:hover { transition: none; transform: none; }
}

/* ---------- The desk bell and the chat it opens ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prop-bell { padding: 0; border: 0; background: none; cursor: pointer; }
.prop-bell img, .bell-fab img { transform-origin: 50% 100%; transition: filter .25s; }
.prop-bell:hover img { filter: brightness(1.12) drop-shadow(0 0 14px rgba(255, 200, 110, .45)); }
.prop-bell:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }
/* rung: the plunger goes down, the dome shivers */
.is-ringing img { animation: ding .7s var(--ease); }
@keyframes ding {
  0% { transform: scaleY(1); } 8% { transform: scaleY(.95) translateY(1%); } 18% { transform: scaleY(1) rotate(2.5deg); }
  34% { transform: rotate(-2deg); } 52% { transform: rotate(1.2deg); } 70% { transform: rotate(-.6deg); } 100% { transform: none; }
}

.bell-fab { /* just the bell, standing in the corner: no disc behind it, only its own shadow */
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 64px; padding: 0;
  border: 0; background: none; cursor: pointer;
  transition: transform .3s var(--ease), opacity .3s;
}
.bell-fab img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(30, 14, 4, .35)); }
.bell-fab:hover { transform: translateY(-2px); }
.bell-fab[hidden] { display: none; }

.desk-chat { /* a plain messenger: a header, the conversation, a box to type in */
  position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(320px, calc(100vw - 24px)); height: min(420px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgba(30, 18, 8, .35), 0 4px 12px rgba(0, 0, 0, .06);
  transform-origin: 100% 100%; animation: chat-in .45s var(--ease);
}
.desk-chat[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.dc-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.dc-av { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: #be2c36; }
.dc-av img { width: 18px; height: auto; }
.dc-head h2 { font: 600 14px/1.2 var(--display); letter-spacing: -.01em; }
.dc-head p { margin-top: 1px; font-size: 12px; color: var(--ink-50); }
.dc-close { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-60); cursor: pointer; transition: background .2s; }
.dc-close svg { width: 16px; height: 16px; }
.dc-close:hover { background: var(--bg); }
.dc-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 6px; }
.dc-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; background: var(--bg); font-size: 13px; line-height: 1.45; color: var(--ink); animation: msg-in .35s var(--ease); }
.dc-msg p + p { margin-top: 5px; }
.dc-msg.is-me { align-self: flex-end; background: #1c1917; color: #fff; }
.dc-msg a { color: var(--stay); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.dc-meta { margin: -2px 0 4px 4px; font-size: 11px; color: var(--ink-50); }
.dc-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.dc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-35); animation: dot 1s infinite; }
.dc-typing i:nth-child(2) { animation-delay: .15s; } .dc-typing i:nth-child(3) { animation-delay: .3s; }
.dc-form { display: flex; align-items: center; gap: 6px; margin: 0 10px; padding: 5px 5px 5px 12px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--white); transition: border-color .2s; }
.dc-form:focus-within { border-color: var(--ink-35); }
.dc-form input { flex: 1; min-width: 0; height: 28px; border: 0; outline: 0; background: none; font: 400 13px/1.4 var(--sans); color: var(--ink); }
.dc-form button { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink-50); cursor: pointer; transition: background .2s, color .2s; }
.dc-form:focus-within button { background: #1c1917; color: #fff; }
.dc-form button svg { width: 14px; height: 14px; }
.dc-note { padding: 7px 12px 10px; text-align: center; font-size: 11px; color: var(--ink-50); }
@media (max-width: 520px) {
  .desk-chat { right: 12px; bottom: 12px; max-height: calc(100vh - 24px); }
  .bell-fab { right: 14px; bottom: 14px; width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-ringing img, .desk-chat, .dc-msg { animation: none; }
}

/* ---------- What Roomhook does: the example a chapter is shown on ---------- */

.eg { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 10px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line); font: 400 12px/1.4 var(--mono); color: var(--ink-60); }
.eg::before { content: ""; width: 7px; height: 10px; border-radius: 2px 2px 3px 3px; background: var(--stay); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); flex: none; }

/* ---------- From the desk: demo quotes ---------- */

.quotes-head { max-width: 900px; }
/* a bento after amplemarket.com: quotes on paper, tonight's results on the board's status colours */
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b" "c d e"; gap: 16px; margin-top: 44px; }
.q-a { grid-area: a; } .q-b { grid-area: b; } .q-c { grid-area: c; } .q-d { grid-area: d; } .q-e { grid-area: e; }
.qcard { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 280px; padding: 20px 20px 18px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 24px -20px rgba(30, 16, 6, .4); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
a.qcard:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(30, 16, 6, .45); }
/* the owners' words, on a photo of the inn under a dark band, like the screens' headers */
.qcard.is-photo { justify-content: flex-end; color: #fff; border: 0; background: #241509; min-height: 300px; }
.q-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.qcard.is-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 9, 5, .5) 0, rgba(14, 9, 5, .2) 28%, rgba(14, 9, 5, .55) 55%, rgba(14, 9, 5, .9) 100%); } /* enough shade under the words to read on any sky */
.qcard.is-photo blockquote { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.qcard.is-photo > *:not(.q-bg) { position: relative; z-index: 2; }
.q-mark { position: absolute !important; top: 20px; left: 20px; display: block; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.q-crest { width: 28px; height: 28px; }
.q-mark b { display: block; font: italic 400 18px/1 Georgia, "Times New Roman", serif; }
.q-mark small { display: block; margin-top: 5px; font: 500 8.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.qcard.is-quote blockquote { margin: 0; font: 500 clamp(20px, 2vw, 26px)/1.28 var(--display); letter-spacing: -.02em; text-wrap: pretty; }
.q-e blockquote { font-size: clamp(18px, 1.6vw, 21px); }
.qcard.is-photo .q-foot { border-top-color: rgba(255, 255, 255, .22); }
.qcard.is-photo .q-who small { color: rgba(255, 255, 255, .75); }
.q-face { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; } /* a plain round photo, no ring or shadow */
.q-face.is-sm { width: 34px; height: 34px; }
/* the innkeepers' own cards: their words, a small piece of the board they mean, who they are */
.qcard.is-quote:not(.is-photo) blockquote { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.38; }
.qcard.is-quote:not(.is-photo) .q-foot { margin-top: auto; }
.q-proof { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.q-pin.is-sm { display: flex; gap: 5px; }
.q-pin.is-sm i { width: 30px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--white); border: 1px solid var(--line); font: 500 18px/1 var(--display); font-style: normal; }
.q-bars { flex-direction: column; align-items: stretch; gap: 8px; }
.q-bars span { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 10px; }
.q-bars small { font-size: 12px; color: var(--ink-60); }
.q-bars i { height: 10px; border-radius: 5px; }
.q-bars i.is-site { width: 55%; background: linear-gradient(90deg, #e0c07c, #b48d42); }
.q-bars i.is-direct { width: 90%; background: linear-gradient(90deg, #a3323a, #6a161c); }
.q-proof .q-ticks { display: flex; gap: 6px; }
.q-proof .q-ticks i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--white); color: transparent; }
.q-proof .q-ticks i svg { width: 13px; height: 13px; stroke-width: 2; }
.q-proof .q-ticks i.is-done { background: var(--green); border-color: var(--green); color: #fff; }
.q-face.is-initials.is-c2 { background: var(--green-l); color: var(--green-t); }
.q-face.is-initials.is-c3 { background: var(--stay-l); color: var(--stay-t); }
.q-face.is-initials.is-c4 { background: #e3e9f3; color: #2b4a78; }
.q-face.is-initials { display: grid; place-items: center; background: var(--arrive-l); color: var(--arrive-t); font: 600 13px/1 var(--sans); } /* until there's a photo */
/* tonight's results, as small screens */
.qcard.is-stat > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.qcard.is-stat > header b { font-weight: 500; }
.qcard.is-stat > p { margin-top: auto; font-size: 14px; line-height: 1.45; color: var(--ink-60); }
.q-direct { display: flex; align-items: center; gap: 16px; }
.q-ring { --p: 60; position: relative; display: grid; place-content: center; width: 92px; height: 92px; flex: none; border-radius: 50%; background: conic-gradient(#7b1d22 calc(var(--p) * 1%), var(--bg) 0); text-align: center; }
.q-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--white); }
.q-ring b, .q-ring small { position: relative; } .q-ring b { font: 500 28px/1 var(--display); } .q-ring small { font-size: 11px; color: var(--ink-50); }
.q-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex: 1; }
.q-keys i { aspect-ratio: 3 / 5; background: url("assets/card-stay.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 3px 3px rgba(40, 18, 6, .22)); }
.q-keys i.s { background-image: url("assets/card-arrive.webp"); opacity: .45; }
.q-pin { display: flex; gap: 8px; }
.q-pin i { display: grid; place-items: center; flex: 1; height: 64px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font: 500 32px/1 var(--display); font-style: normal; }
.q-ticks { display: grid; gap: 6px; }
.q-ticks li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 13px; font-weight: 500; }
.q-ticks li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); color: transparent; }
.q-ticks li i svg { width: 12px; height: 12px; stroke-width: 2; }
.q-ticks li.is-done { background: var(--green-l); color: var(--green-t); }
.q-ticks li.is-done i { background: var(--green); border-color: var(--green); color: #fff; }
.q-who { display: flex; align-items: center; gap: 10px; }
.q-who b { display: block; font-weight: 500; font-size: 14.5px; }
.q-who small { display: block; font-size: 12.5px; color: var(--ink-50); }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.q-tag { font: 400 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); }
.q-chev { width: 16px; height: 16px; color: var(--ink-80); flex: none; transition: translate .25s var(--ease); }
a.qcard:hover .q-chev { translate: 3px 0; }
@media (max-width: 960px) { .qgrid { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b e" "c d"; } }
@media (max-width: 600px) { .qgrid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "e" "c" "d"; } .qcard { min-height: 0; } }