/* Shared by index.html and faq/index.html. Extracted from the inline block 2026-09-09 when the FAQ moved
   to its own page, so the two pages cannot drift apart. The font url()s are relative and this file sits at
   the site root, so they resolve the same for a page in a subdirectory. */
/* ------------------------------------------------------------------
     The Solitaire Hotel - brand redress of the Alexander House frame.
     Type: Lydian (titles) / Secular Light (script accent) / Antonio (body + caps).
     FONT LICENSING, checked 2026-09-07:
       Secular Light - LICENSED web kit (woff2/woff) from Blaze Type. Good to ship.
       Lydian        - Webfont licence IS bought: MyFonts order #7316451 covers both Desktop/1 user
                       and "Webfonts / 10,000 pageviews per month, Annual License". But the file Bill
                       sent is the DESKTOP deliverable (LydianBT-Roman.ttf + a desktop-only EULA with
                       no webfont grant), so it cannot be the one we ship. Waiting on the webfont
                       package (woff2/woff) from that same order.
                       TEMPORARY (Chad's call, 2026-10-06): titles render from Bill's own desktop file,
                       fonts/lydian-temp.ttf, until the webfont kit arrives (expected within days). When it
                       does: delete lydian-temp.ttf, point the @font-face below at the kit's files under a NEW
                       filename (/fonts/* is cached for a year, see netlify.toml), and keep the kit's
                       pageview counter @import if it has one. Roman only; the site sets no Lydian italics.
                       NOTE: annual + metered. Renews yearly and caps at 10,000 pageviews/month.
       Antonio       - free Google font, no restriction.
     ------------------------------------------------------------------ */
  /* Secular Light: LICENSED web kit from Blaze Type (woff2 with woff fallback), installed 2026-09-07.
     Still to confirm from the order confirmation: that the website entitlement covers thesolitairehotel.ca. */
  @font-face { font-family: 'Secular'; src: url('fonts/secular-light.woff2') format('woff2'), url('fonts/secular-light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Antonio'; src: url('fonts/Antonio-Variable.ttf') format('truetype'); font-weight: 100 700; font-style: normal; font-display: swap; }
  /* TEMPORARY Lydian, see the licensing note above. Swap for the MyFonts webfont kit when it arrives. */
  @font-face { font-family: 'Lydian'; src: url('fonts/lydian-temp.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  :root {
    /* Brand palette (Alexandra's palette file + board). Olive and sky are provisional until the last two values land. */
    --soot:      #191512;
    --espresso:  #29230f;
    --olive:     #645d3e;   /* reserved: board colour, unused until Alexandra's final values land */
    --cream:     #e8dcbf;
    --cream-lt:  #f1e8d2;
    --cream-card:#efe5cc;
    --red:       #a62f2b;
    --sky:       #62b1cc; /* Bill 10-01: a lighter blue than the palette's #3f9bba */
    --sky-lt:    #7cc0d7;
    --ink:       #191512;
    --ink-soft:  #4b4538;
    --cream-dim: rgba(232,220,191,0.62);
    --lamp:      rgba(232,169,75,0.12); /* lamplight glow, gallery only */

    --title:  'Lydian', 'Antonio', 'Oswald', 'Arial Narrow', sans-serif; /* Lydian from the TEMPORARY file until the webfont kit lands; Antonio if it fails to load */
    --script: 'Secular', 'Brush Script MT', cursive;
    /* Named --sh-sans, not --sans: the Cloudbeds engine sets --sans on :root when it loads, which turned the nav into the system font. */
    --sh-sans:   'Antonio', 'Oswald', 'Arial Narrow', sans-serif;

    /* Harlequin diamond band, cream on transparent. Recoloured per section with currentColor-free data URIs below. */
    --diamond-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'%3E%3Cpath d='M8 0 L16 11 L8 22 L0 11 Z' fill='%23e8dcbf'/%3E%3C/svg%3E");
    --diamond-red:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'%3E%3Cpath d='M8 0 L16 11 L8 22 L0 11 Z' fill='%23a62f2b'/%3E%3C/svg%3E");
  }

  body { font-family: var(--sh-sans); font-weight: 400; font-size: 17px; background: var(--soot); color: var(--cream); overflow-x: hidden; line-height: 1.7; letter-spacing: 0.012em; -webkit-font-smoothing: antialiased; }
  a { text-decoration: none; color: inherit; }
  img { display: block; width: 100%; height: 100%; object-fit: cover; }
  button { font-family: inherit; }

  /* moody treatment for placeholder photography */
  .warm { filter: saturate(0.92) contrast(1.06) brightness(0.86) sepia(0.14); }

  /* type roles */
  .label { font-family: var(--sh-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--red); }
  .display { font-family: var(--title); font-weight: 400; line-height: 1.08; letter-spacing: 0.005em; }
  .script { font-family: var(--script); font-weight: 300; font-style: normal; line-height: 1.2; }

  /* club divider: short rules + the TSH club mark */
  .club-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0 22px; }
  .club-rule .ln { height: 1px; width: clamp(40px, 9vw, 84px); background: linear-gradient(to right, transparent, var(--red)); opacity: 0.9; }
  .club-rule .ln.r { background: linear-gradient(to left, transparent, var(--red)); }
  .club-rule img { width: 22px; height: 22px; object-fit: contain; }
  .club-rule.left { justify-content: flex-start; }
  .club-rule.left .ln:first-child { display: none; }

  /* harlequin band: one pattern moment per screen, edges only */
  .band { height: 22px; background-repeat: repeat-x; background-size: 16px 22px; background-position: center; }
  .band.cream-on-soot { background-color: var(--soot); background-image: var(--diamond-cream); }
  .band.cream-on-red { background-color: var(--red); background-image: var(--diamond-cream); }
  .band.red-on-soot { background-color: var(--soot); background-image: var(--diamond-red); }

  /* eyebrow colour rule: red on light grounds, cream on dark grounds (the club rule and diamonds carry the red there) */
  .on-dark .label { color: var(--cream); opacity: 0.78; }

  /* buttons */
  .btn { display: inline-block; font-family: var(--sh-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; padding: 15px 38px 14px; border-radius: 999px; transition: background 0.3s, color 0.3s, transform 0.3s, border-color 0.3s; border: 1px solid transparent; cursor: pointer; }
  .btn.sky { background: var(--sky); color: var(--soot); }
  .btn.sky:hover { background: var(--sky-lt); transform: translateY(-1px); }
  .btn.cream { background: var(--cream); color: var(--soot); }
  .btn.cream:hover { background: var(--cream-lt); transform: translateY(-1px); }
  .btn.ghost { background: transparent; color: var(--cream); border-color: rgba(232,220,191,0.55); }
  .btn.ghost:hover { border-color: var(--cream); background: rgba(232,220,191,0.08); }

  /* LOADER: a soot plate with the S while the hero image decodes.
     SAFETY: the fade-out is a CSS animation on a timer, not something script has to do. A dead script,
     a blocked image or no JS at all still clears the overlay on its own. The .done class only makes it
     leave sooner. Never make this dependent on JS alone or a failure hides the whole site. */
  .loader { position: fixed; inset: 0; z-index: 999; background: var(--soot); display: flex; align-items: center; justify-content: center; animation: loaderOut 1s ease 3.4s forwards; }
  .loader.done { animation: loaderOut 1s ease forwards; }
  /* The mark leaves slightly ahead of the plate and drifts up, so the exit is two staged movements
     rather than the whole overlay blinking off in one step. */
  .loader.done .loader-mark { animation: loaderMarkOut 0.75s ease forwards; }
  @keyframes loaderMarkOut { to { opacity: 0; transform: translateY(-14px) scale(0.97); } }
  .loader-mark { display: flex; flex-direction: column; align-items: center; gap: 20px; animation: loaderIn 0.9s ease both; }
  .loader-mark img { width: auto; height: clamp(110px, 16vh, 175px); object-fit: contain; }
  /* echoes the club rule used as a divider throughout the page */
  .loader-rule { display: block; height: 1px; width: 0; background: linear-gradient(to right, transparent, var(--red), transparent); animation: loaderRule 1s ease 0.3s both; }
  @keyframes loaderIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes loaderRule { from { width: 0; opacity: 0; } to { width: 190px; opacity: 1; } }
  @keyframes loaderOut { to { opacity: 0; visibility: hidden; } }
  @media (prefers-reduced-motion: reduce) {
    .loader-mark, .loader-rule { animation: none; }
    .loader { animation: loaderOut 0.2s linear 0.6s forwards; }
    .loader.done { animation: loaderOut 0.2s linear forwards; }
    .loader.done .loader-mark { animation: none; }
    html.js-loading .hero-inner { animation-play-state: running; }
  }

  /* NAV */
  .nav { position: fixed; top: var(--notice-h, 0px); left: 0; right: 0; z-index: 100; transition: background 0.45s, border-color 0.45s, transform 0.45s; border-bottom: 1px solid transparent; }
  .nav.scrolled { background: rgba(25,21,18,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(232,220,191,0.12); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 48px; height: 84px; max-width: 1340px; margin: 0 auto; }
  .nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; transition: transform 0.45s; padding: 12px 10px; }
  .nav.scrolled .nav-logo { transform: translate(-50%, -50%) scale(0.82); }
  .nav-logo img { height: 34px; width: auto; object-fit: contain; }
  .nav-links { display: flex; gap: 36px; list-style: none; }
  .nav-links a { font-family: var(--sh-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-dim); transition: color 0.3s; }
  .nav-links a:hover { color: var(--cream); }
  .nav-book { font-size: 11.5px; padding: 11px 24px 10px; }
  .nav-book .short { display: none; }

  /* keyboard + skip */
  a:focus-visible, button:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 2px; }
  .skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--sky); color: var(--soot); font-family: var(--sh-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; transition: top 0.2s; }
  .skip:focus { top: 16px; }
  .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 6; }
  .nav-toggle span { width: 26px; height: 2px; background: var(--cream); transition: 0.3s; }

  /* HERO: the board's own hierarchy. Red blackletter eyebrow, Lydian headline, script accent, Book Now. */
  .hero { position: relative; height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--soot); }
  .hero-img { position: absolute; inset: 0; object-position: 50% 58%; transform: scale(1.06); animation: slowZoom 18s ease forwards; filter: saturate(0.9) brightness(0.48) sepia(0.2) contrast(1.05); }
  @keyframes slowZoom { to { transform: scale(1); } }
  .hero-veil { position: absolute; inset: 0; background:
    radial-gradient(ellipse at 50% 40%, rgba(166,47,43,0.18), transparent 55%),
    linear-gradient(to bottom, rgba(25,21,18,0.55), rgba(25,21,18,0.25) 45%, rgba(25,21,18,0.92)); }
  .hero-inner { position: relative; z-index: 3; padding: 0 24px; max-width: 900px; animation: fadeUp 1.6s ease 0.1s both; }
  /* The hero used to run its entrance BEHIND the loader and be finished by the time the plate lifted,
     so the site appeared as a hard cut. Pausing it while the loader is up means the two cross-dissolve:
     the plate fades out as the hero fades up. js-loading is only ever set by script, and script also
     schedules an unconditional timer to clear it, so the hero can never be left paused and invisible. */
  html.js-loading .hero-inner { animation-play-state: paused; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
  .hero-eyebrow { width: clamp(170px, 22vw, 230px); height: auto; margin: 0 auto 22px; object-fit: contain; filter: drop-shadow(0 2px 18px rgba(0,0,0,0.45)); }
  .hero h1 { font-size: clamp(42px, 6vw, 74px); color: var(--cream); margin: 0 auto; max-width: 17ch; }
  .hero-script { font-size: clamp(24px, 3vw, 34px); color: var(--cream); opacity: 0.92; margin: 18px 0 36px; }
  /* The script line under the headline used to carry the 36px gap above this button. It was removed at
     Bill’s request 09-08, which left the button sitting flush against the h1 with zero space. */
  .hero-inner .btn { margin-top: clamp(30px, 3.6vw, 46px); }
  .scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(232,220,191,0.64); display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(232,220,191,0.7), transparent); animation: cueDrop 2.2s ease-in-out infinite; transform-origin: top; }
  @keyframes cueDrop { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .scroll-cue::after, .hero-img, .hero-inner { animation: none; } .hero-img { transform: none; } .reveal { transition: none; opacity: 1; transform: none; } }

  /* ABOUT: soot ground, the 58 Alexander mark, short story */
  .about { position: relative; background: var(--soot); color: var(--cream); padding: clamp(90px, 12vw, 160px) 48px; }
  .about-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 7vw, 110px); align-items: center; }

  /* The S is portrait where the old combo mark was landscape, so this is sized by HEIGHT. Driving it by
     width made it 393px tall and far too dominant in the column. */
  /* Bill’s longer blurb took the text column to ~1150px, which left the centred mark floating with 337px
     of dead space above AND below it. Sticky lets the S travel down beside the copy as you read, so the
     column never reads as empty. align-self:start is required - the grid centres its items otherwise and
     a centred item has no room to travel. */
  .about-mark { width: 100%; margin: 0 auto; display: flex; justify-content: center; align-self: start; position: sticky; top: clamp(96px, 20vh, 180px); }
  @media (min-width: 1400px) { .about-mark img { max-height: 540px; } }
  /* Sized to fill the column rather than float in it. At 300px the S sat in a 648px-tall cell and the
     left half of the section read as empty against a dense right half. */
  .about-mark img { object-fit: contain; width: auto; height: auto; max-height: 480px; max-width: 100%; filter: drop-shadow(0 14px 34px rgba(0,0,0,0.5)); }
  .about h2 { font-size: clamp(34px, 4.6vw, 58px); color: var(--cream); margin: 6px 0 10px; }
  .about .script { font-size: clamp(22px, 2.4vw, 30px); color: var(--cream); opacity: 0.9; margin-bottom: 24px; }
  /* 56ch resolved to only 291px in a 648px column, so the copy sat as a narrow ribbon far short of the
     headline. Percentage keeps the measure tracking the column as it flexes; it lands the text edge on the
     headline. Do not put a ch cap back here - Antonio is condensed and ch under-delivers badly. */
  .about p { color: rgba(232,220,191,0.8); max-width: 83%; margin-bottom: 18px; }
  .about p:last-child { margin-bottom: 0; }
  .about-facts { display: flex; gap: 40px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(232,220,191,0.16); }
  .fact .n { font-family: var(--title); font-size: 34px; line-height: 1; color: var(--cream); }
  .fact .l { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cream-dim); margin-top: 6px; }

  /* ROOMS: alabaster ground. One large gallery, with the five rooms as a switcher beside it. */
  .rooms { position: relative; background: var(--cream); color: var(--ink); padding: clamp(90px, 12vw, 150px) 0 clamp(96px, 12vw, 160px); }
  .rooms-head { text-align: center; margin-bottom: 56px; padding: 0 32px; }
  .rooms-head h2 { font-size: clamp(32px, 4.6vw, 56px); color: var(--ink); }
  .rooms-head .script { font-size: clamp(22px, 2.4vw, 30px); color: var(--red); margin-top: 8px; }
  .rooms-b { display: grid; grid-template-columns: 1.7fr 1fr; gap: 52px; max-width: 1500px; margin: 0 auto; padding: 0 48px; align-items: center; }

  /* The gallery track is the only horizontally scrolling thing in the section, so a sideways swipe
     inside it can never be mistaken for a swipe on the room list. That is the whole reason this
     layout replaced the card carousel: nested horizontal scrolling has no good mobile answer. */
  .room-gal { position: relative; background: var(--espresso); overflow: hidden; aspect-ratio: 3/2; }
  .gal-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
  .gal-track::-webkit-scrollbar { display: none; }
  .gal-track:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
  .gal-track > figure { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
  .gal-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: none; background: rgba(25,21,18,0.42); color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, opacity 0.3s; }
  .gal-nav:hover:not(:disabled) { background: var(--red); }
  .gal-nav:disabled { opacity: 0.22; cursor: default; }
  .gal-nav svg { width: 15px; height: 15px; display: block; }
  .gal-nav.l { left: 14px; }
  .gal-nav.r { right: 14px; }
  .gal-count { position: absolute; z-index: 2; top: 14px; right: 14px; background: rgba(25,21,18,0.55); color: var(--cream); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; padding: 5px 10px 4px; }
  .gal-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 7px; }
  .gal-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(232,220,191,0.45); transition: background 0.3s; }
  .gal-dots i.on { background: var(--cream); }

  /* Room names sit above the gallery as one centred row, so the side column carries only the copy.
     Splitting those two jobs is what removed the six horizontal rules and the 113px overhang that the
     stacked list version had; it is a real tablist, so arrow keys move between rooms. */
  .room-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 34px); list-style: none; max-width: 1500px; margin: 0 auto 40px; padding: 0 48px; }
  /* The tabs carry a class on purpose: once the Cloudbeds popup has opened, its stylesheet styles every
     `button:not([class])` on the page as a white rounded pill, and that rule outlives the popup. */
  .room-strip button { background: none; border: none; border-radius: 0; box-shadow: none; cursor: pointer; font-family: var(--title); font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-soft); opacity: 0.5; padding: 6px 0 10px; border-bottom: 2px solid transparent; transition: opacity 0.3s, color 0.3s, border-color 0.3s; }
  .room-strip button:hover { opacity: 1; }
  .room-strip li.on button { opacity: 1; color: var(--red); border-bottom-color: var(--red); }
  .room-strip button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

  .room-panel:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
  .room-name { font-family: var(--title); font-size: clamp(26px, 2.2vw, 32px); font-weight: 400; color: var(--ink); margin-bottom: 6px; }
  .room-meta { font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
  .room-meta .suit { margin: 0 7px; font-size: 13px; line-height: 1; color: var(--red); }
  .room-desc { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.65; }
  /* Bathroom arrangement is what a guest actually decides on here, so it is stated on every room
     rather than left to be discovered at check-in. */
  .room-amen { font-size: 12.5px; letter-spacing: 0.03em; line-height: 1.55; color: var(--ink-soft); opacity: 0.85; margin-bottom: 24px; }
  .room-link { position: relative; display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 4px; transition: color 0.3s; }
  .room-link::after { content: ""; position: absolute; inset: -12px -8px; }
  .room-link:hover { color: var(--red); }

  /* Switching rooms used to hard-cut: innerHTML is replaced, so the gallery and copy blinked to the new
     room. A short fade makes them read as one object changing rather than two elements being swapped. */
  @keyframes roomSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .room-swap { animation: roomSwap 0.42s ease both; }

  /* Photos fade as they decode so a lazily-loaded shot never pops in behind that fade. The js-fade class
     is added by script, so if JS never runs the images are simply visible and nothing is hidden. */
  .room-gal.js-fade img { opacity: 0; transition: opacity 0.45s ease; }
  .room-gal.js-fade img.ready { opacity: 1; }

  /* Dots are a mouse affordance for jumping straight to a photo. They stay aria-hidden and out of the
     tab order because the arrows already give keyboard and screen-reader users the same control. */
  .gal-dots i { cursor: pointer; }
  .gal-dots i:hover { background: var(--cream); }

  @media (prefers-reduced-motion: reduce) {
    .gal-track { scroll-behavior: auto; }
    .room-swap { animation: none; }
    .room-gal.js-fade img { transition: none; }
  }

  .rooms-extras { max-width: 1500px; margin: 52px auto 0; padding: 0 48px; text-align: center; }
  .rooms-extras .l { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
  .rooms-extras p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; max-width: 620px; margin: 0 auto; }

  /* FAQ: cream ground, sitting between the dark neighbourhood section and the dark footer so the page
     does not end on three dark bands in a row. Native <details> so it works with no JS at all and keeps
     keyboard and screen-reader behaviour for free. */
  .faq { background: var(--cream); color: var(--ink); padding: clamp(84px, 11vw, 130px) 24px clamp(90px, 12vw, 140px); }
  .faq-head { text-align: center; margin-bottom: 44px; }
  .faq-head h2 { font-size: clamp(30px, 4vw, 48px); color: var(--ink); }
  .faq-list { max-width: 780px; margin: 0 auto; }
  .faq-list details { border-bottom: 1px solid rgba(25,21,18,0.16); }
  .faq-list details:first-of-type { border-top: 1px solid rgba(25,21,18,0.16); }
  .faq-list summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 2px; position: relative; font-family: var(--title); font-size: clamp(18px, 1.5vw, 21px); color: var(--ink); transition: color 0.3s; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary:hover { color: var(--red); }
  .faq-list summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
  /* the marker is a plus that becomes a minus, drawn from two rules so it needs no icon font */
  .faq-list summary::after, .faq-list summary::before { content: ""; position: absolute; right: 6px; top: 50%; background: var(--red); transition: transform 0.3s, opacity 0.3s; }
  .faq-list summary::before { width: 14px; height: 1.5px; transform: translateY(-50%); }
  .faq-list summary::after { width: 1.5px; height: 14px; right: 12px; transform: translateY(-50%); }
  .faq-list details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
  .faq-list details[open] summary { color: var(--red); }
  /* No ch-based cap here. 68ch in Antonio resolves to only ~440px, so answers were stuffed into 56%
     of a 780px container while the rules beside them ran full width. Let them fill the column. */
  .faq-answer { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); padding: 0 40px 22px 2px; }
  .faq-note { text-align: center; font-size: 13.5px; color: var(--ink-soft); opacity: 0.85; margin: 34px auto 0; max-width: 60ch; }
  .faq-note a { border-bottom: 1px solid var(--red); padding-bottom: 2px; }
  .faq-note a:hover { color: var(--red); }

  /* BOOKING: the vermilion band */
  .book { position: relative; background: var(--red); color: var(--cream); padding: clamp(96px, 13vw, 160px) 32px; text-align: center; overflow: hidden; }
  .book::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(25,21,18,0.22), transparent 60%); pointer-events: none; }
  .book-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
  /* SiteMinder recommend a minimum 1024px container for the embedded engine, and it renders on a white
     ground by design ("stripped back branding"). So the heading column stays at 760px and only the engine
     widens, sitting as a cream card on the oxblood band rather than punching a white hole through it. */
  .book-engine { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; background: var(--cream-lt); padding: 10px; box-shadow: 0 30px 60px -34px rgba(25,21,18,0.65); }
  .book-engine .ibe { min-height: 520px; }
  /* The engine injects its own iframe; make sure it can never overflow the card on small screens. */
  .book-engine iframe { display: block; width: 100%; border: 0; }
  .book-fallback { margin-top: 22px; font-size: 13.5px; letter-spacing: 0.03em; color: rgba(232,220,191,0.9); }
  .book-fallback a { border-bottom: 1px solid rgba(232,220,191,0.6); padding-bottom: 2px; }
  .book-fallback a:hover { color: var(--cream); border-bottom-color: var(--cream); }
  .book .label { color: var(--cream); }
  .book .club-rule .ln { background: linear-gradient(to right, transparent, rgba(232,220,191,0.8)); }
  .book .club-rule .ln.r { background: linear-gradient(to left, transparent, rgba(232,220,191,0.8)); }
  .book h2 { font-size: clamp(30px, 4.2vw, 52px); color: var(--cream); margin: 4px 0 10px; }
  .book .sub { color: rgba(232,220,191,0.97); margin-bottom: 10px; }
  .book-reassure { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,220,191,0.8); margin-bottom: 38px; }
  .book { padding-left: 24px; padding-right: 24px; }
  .booking-placeholder { border: 1px solid rgba(232,220,191,0.6); padding: 50px 30px 46px; position: relative; background: rgba(25,21,18,0.08); }
  .booking-placeholder .ph-label { font-family: var(--title); font-size: 25px; color: var(--cream); }
  .booking-placeholder .ph-sub { font-size: 14px; letter-spacing: 0.03em; color: var(--cream); margin: 8px auto 24px; max-width: 46ch; }
  .booking-placeholder .corner { position: absolute; width: 18px; height: 18px; object-fit: contain; opacity: 0.9; }
  .booking-placeholder .corner.tl { top: 10px; left: 10px; }
  .booking-placeholder .corner.br { bottom: 10px; right: 10px; transform: rotate(180deg); }

  /* NEIGHBOURHOOD: espresso, lamplit */
  .gallery { background-color: var(--espresso); background-image:
      radial-gradient(circle at 18% 12%, rgba(166,47,43,0.18), transparent 36%),
      radial-gradient(circle at 82% 80%, var(--lamp), transparent 40%),
      radial-gradient(circle at 50% 118%, rgba(166,47,43,0.16), transparent 55%);
    padding: clamp(90px, 12vw, 150px) 0; color: var(--cream); }
  .gallery-head { text-align: center; margin-bottom: 56px; padding: 0 32px; }
  .gallery-head h2 { font-size: clamp(32px, 4.6vw, 56px); color: var(--cream); }
  .gallery-head .script { font-size: clamp(22px, 2.4vw, 30px); color: var(--cream); opacity: 0.9; margin-top: 8px; }
  .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 1300px; margin: 0 auto; padding: 0 48px; }
  .gallery-grid figure { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--soot); }
  .gallery-grid figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .gallery-grid img { transition: transform 0.9s ease, filter 0.6s ease; }
  .gallery-grid figure:hover img { transform: scale(1.05); filter: saturate(1.05) contrast(1.05) brightness(0.95) sepia(0.1); }
  .gallery-note { text-align: center; margin: 40px auto 0; max-width: 60ch; padding: 0 32px; color: rgba(232,220,191,0.7); font-size: 15.5px; }

  /* FOOTER */
  .footer { background: var(--soot); color: var(--cream); padding: 0 48px 34px; }
  .footer .band { margin: 0 -48px 54px; }
  .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; max-width: 1240px; margin: 0 auto 26px; padding-bottom: 32px; border-bottom: 1px solid rgba(232,220,191,0.14); }
  .footer-emblem { height: 120px; width: auto; object-fit: contain; margin-bottom: 18px; }
  .footer-tag { font-size: 14.5px; color: rgba(232,220,191,0.68); line-height: 1.8; max-width: 300px; }
  .footer-col-title { font-size: 11.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cream); opacity: 0.78; margin-bottom: 20px; }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 3px; }
  .footer-links a { display: inline-block; font-size: 15px; padding: 5px 0; color: rgba(232,220,191,0.7); transition: color 0.3s; }
  .footer-links a:hover { color: var(--cream); }
  .footer-bottom { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
  .footer-copy { font-size: 12.5px; color: rgba(232,220,191,0.6); letter-spacing: 0.04em; }
  .footer-ig { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: 0.12em; padding: 10px 0; color: rgba(232,220,191,0.68); transition: color 0.3s; }
  .footer-ig:hover { color: var(--cream); }
  .footer-ig svg { width: 18px; height: 18px; }

  /* reveal */
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease, transform 0.9s ease; }
  .reveal.in { opacity: 1; transform: none; }

  @media (max-width: 1200px) {
    .nav-links { gap: 22px; }
    .nav-links a { font-size: 12px; letter-spacing: 0.16em; }
    .nav-logo img { height: 30px; }
  }
  @media (max-width: 1100px) {
    .rooms-b, .rooms-extras, .room-strip { max-width: 1040px; }
    .rooms-b { gap: 36px; }
  }
  @media (max-width: 1000px) {
    .rooms-b { grid-template-columns: 1fr; gap: 28px; }
    .room-strip { margin-bottom: 30px; }
    .nav-inner { padding: 0 22px; height: 68px; }
    .nav-logo img { height: 24px; }
    .nav.scrolled .nav-logo { transform: translate(-50%, -50%); }
    .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--soot); border-top: 1px solid rgba(232,220,191,0.12); border-bottom: 1px solid rgba(232,220,191,0.12); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.35s ease, visibility 0s linear 0.35s; }
    .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.35s ease, visibility 0s; }
    .nav.open { background: rgba(25,21,18,0.96); }
    .nav-links li { width: 100%; text-align: center; }
    .nav-links a { display: block; padding: 16px; font-size: 13px; letter-spacing: 0.22em; }
    .nav-toggle { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
    .nav-book { margin-left: auto; font-size: 11px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; }
  }
  @media (max-width: 900px) {
    .hero { min-height: 600px; }
    .about { padding-left: 24px; padding-right: 24px; }
    .about-inner { grid-template-columns: 1fr; gap: 44px; text-align: center; }
    /* stacked layout: the mark sits above the copy, so pinning it would just cover the text */
    .about-mark { position: static; }
    .about-mark img { max-height: 240px; }
    .about .club-rule.left { justify-content: center; }
    .about .club-rule.left .ln:first-child { display: block; }
    /* the 83% cap is for the wide desktop column; on a stacked phone column it just wastes 56px */
    .about p { margin-left: auto; margin-right: auto; max-width: none; }
    .about-facts { justify-content: center; }
    .rooms-b, .rooms-extras, .room-strip { padding: 0 24px; }
    .gallery-grid { grid-template-columns: 1fr 1fr; padding: 0 24px; }
    .gallery-grid figure:first-child { grid-column: span 2; }
    .footer { padding: 0 24px 30px; }
    .footer .band { margin: 0 -24px 44px; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
  }
  @media (max-width: 560px) {
    .nav-book { padding: 0 14px; letter-spacing: 0.18em; font-size: 11px; }
    .nav-book .full { display: none; }
    .nav-book .short { display: inline; }
    .nav-logo img { height: 20px; }
    .room-gal { aspect-ratio: 4/3; }
    /* Five room names wrap to three rows on a phone. Taller padding so each stays a comfortable
       touch target rather than the 38px the desktop padding left them at. */
    .room-strip { gap: 14px 22px; }
    .room-strip button { padding: 11px 0 9px; }
    .about-facts { gap: 26px; }
    .fact .n { font-size: 28px; }
  }

  /* Interim real-photo set (2026-09-19) */
  .gallery-grid.duo { grid-template-columns: 1fr 1fr; max-width: 1100px; }
  .gallery-grid.duo figure, .gallery-grid.duo figure:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4/5; }
  .gal-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--cream-dim); font-family: var(--sh-sans); text-transform: uppercase; letter-spacing: 0.28em; font-size: 13px; }
  .gal-empty img { width: 64px; height: 64px; object-fit: contain; opacity: 0.85; }
  .gal-track img { object-position: 50% 62%; } /* portrait room shots in a landscape frame: favour the bed over the ceiling */
  .room-panel .room-link + .room-link { margin-left: 22px; }

  /* Expanded photo view (2026-10-01). Room photos are portrait, the gallery frame is landscape. */
  .gal-track img { cursor: zoom-in; }
  .gal-expand { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; border: none; background: rgba(25,21,18,0.55); color: var(--cream); font-family: var(--sh-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 11px 5px 9px; cursor: pointer; transition: background 0.3s; }
  .gal-expand:hover { background: var(--red); }
  .gal-expand:focus-visible, .lb button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
  .gal-expand svg { width: 13px; height: 13px; display: block; }
  .lb { border: none; padding: 0; margin: 0; background: transparent; color: var(--cream); width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; overflow: hidden; }
  .lb::backdrop { background: rgba(15,12,10,0.95); }
  .lb[open] { display: flex; align-items: center; justify-content: center; animation: lbIn 0.25s ease both; }
  @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
  .lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .lb figure img { width: auto; height: auto; max-width: min(92vw, 1400px); max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; }
  .lb figcaption { font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); white-space: pre; }
  .lb .gal-nav { width: 48px; height: 48px; background: rgba(232,220,191,0.12); }
  .lb .gal-nav.l { left: clamp(10px, 3vw, 40px); }
  .lb .gal-nav.r { right: clamp(10px, 3vw, 40px); }
  .lb .gal-nav svg { width: 18px; height: 18px; }
  .lb.solo .gal-nav { display: none; }
  .lb-close { position: absolute; z-index: 3; top: clamp(12px, 2.4vh, 26px); right: clamp(12px, 3vw, 40px); width: 44px; height: 44px; border-radius: 999px; border: none; background: rgba(232,220,191,0.12); color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
  .lb-close:hover { background: var(--red); }
  .lb-close svg { width: 16px; height: 16px; display: block; }
  @media (prefers-reduced-motion: reduce) { .lb[open] { animation: none; } }

  /* Cloudbeds booking (2026-10-01) */
  .cb-host { position: absolute; left: -9999px; top: 0; visibility: hidden; }
  .booking-placeholder .ph-alt { margin-top: 22px; font-size: 13px; letter-spacing: 0.03em; color: rgba(232,220,191,0.9); }
  .booking-placeholder .ph-alt a { border-bottom: 1px solid rgba(232,220,191,0.6); padding-bottom: 2px; }
  .booking-placeholder .ph-alt a:hover { border-bottom-color: var(--cream); }
  .book-page { padding-top: 96px; background: #ffffff; min-height: 100vh; }
  .book-fallback { max-width: 760px; margin: 0 auto; padding: 28px 24px 56px; text-align: center; font-size: 14px; color: var(--ink-soft); }
  .book-fallback a { color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 2px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* OPENING NOTICE (Bill 10-04): red strip fixed above the nav. --notice-h pushes the nav down and keeps
     anchor jumps and the first section on the FAQ and booking pages clear of it. When the has-notice
     class comes off <html> (after opening day), the strip hides and every offset returns to 0. */
  .notice { display: none; }
  html.has-notice { --notice-h: 36px; scroll-padding-top: var(--notice-h); }
  html.has-notice .notice { position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: var(--notice-h); margin: 0;
    display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0 16px;
    background: var(--red); color: var(--cream); font-family: var(--sh-sans); font-size: 12px; font-weight: 500;
    letter-spacing: 0.28em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
  .notice i { flex: none; width: 8px; height: 11px; background: var(--diamond-cream) center / contain no-repeat; }
  html.has-notice .book-page { padding-top: calc(96px + var(--notice-h)); }
  html.has-notice .faq { padding-top: calc(clamp(84px, 11vw, 130px) + var(--notice-h)); }
  @media (max-width: 760px) {
    html.has-notice { --notice-h: 32px; }
    html.has-notice .notice { font-size: 10px; letter-spacing: 0.16em; gap: 9px; padding: 0 10px; }
    .notice .edge { display: none; }
  }
  @media (max-width: 359px) {
    html.has-notice .notice { font-size: 9px; letter-spacing: 0.1em; gap: 7px; }
  }

  /* Instagram feed (Elfsight) in the neighbourhood section. Until a post renders, the feed sits hidden
     behind the photo grid at full width (laid out, so Elfsight's lazy loader and width probe still work);
     .ig-live swaps them. Hidden with opacity + clip-path, not visibility: Elfsight's own styles set
     visibility back to visible on its elements, which showed its header through the grid. */
  .ig-swap { position: relative; }
  .ig-feed { max-width: 1300px; margin: 0 auto; padding: 0 48px; }
  .ig-swap:not(.ig-live) .ig-feed { position: absolute; top: 0; left: 0; right: 0; opacity: 0; clip-path: inset(50%); pointer-events: none; }
  .ig-swap.ig-live .gallery-grid { display: none; }
  /* The feed's own header names the account, so the @handle line under the heading goes with the grid. */
  .gallery.ig-on .gallery-head .script { display: none; }
  .ig-swap.ig-live .ig-feed { animation: ig-in 0.6s ease both; }
  @keyframes ig-in { from { opacity: 0; } to { opacity: 1; } }
  .gallery .script a { color: inherit; border-bottom: 1px solid rgba(232,220,191,0.4); padding-bottom: 2px; }
  .gallery .script a:hover { border-bottom-color: var(--cream); }
  @media (max-width: 760px) { .ig-feed { padding: 0 24px; } }