/* The styles every page uses: colours, fonts, spacing, and the parts on every page.
   Search for "── <name> ──" to jump to a part:
     book-button: Book buttons
     enquire-menu: Enquire menu in the header
     site-search: Search button
     site-header: Header
     external-link: External link mark
     letamo-line: Letamo line
     social-links: Social links
     site-footer: Footer
     phone-menu: Phone menu
     dock: Bottom bar on phones (Sleep, Eat, Events, Book)
     enquire-sheet: Enquire sheet (phone)
     song-popup: Song pop-up
     photo-fit: photo-fit
   Forum Homini website, editable IIS version v016 20261109 081746. Generated with Claude Opus 5.5. */
/* reset.css: a small modern reset. Global styles live in cascade layers (reset < base < layout <
   components < effects); Astro component \3c style> blocks are unlayered, so they always win. Owned by the lead. */
@layer reset, base, layout, components, effects;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-block-size: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img,
  picture,
  video,
  canvas,
  svg,
  iframe {
    display: block;
    max-inline-size: 100%;
  }

  img,
  video {
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  /* Lists that are components or navigation carry no bullets or numbers; running-text lists keep theirs */
  :where(ul, ol)[class],
  :where(ul, ol)[role='list'],
  :where(nav, [role='navigation'], dialog) :where(ul, ol) {
    list-style: none;
    padding: 0;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  dt,
  dd,
  figcaption,
  blockquote {
    overflow-wrap: break-word;
  }

  fieldset {
    border: 0;
    padding: 0;
    min-inline-size: 0;
  }

  legend {
    padding: 0;
  }

  table {
    border-collapse: collapse;
  }

  textarea {
    resize: vertical;
  }

  [hidden]:not([hidden='until-found']) {
    display: none !important;
  }

  dialog {
    padding: 0;
    border: 0;
    max-inline-size: none;
    max-block-size: none;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────
   tokens.css: every design token (DESIGN.md §3, §4.1, §5, §6.2). Custom properties only; no selectors
   beyond :root, [data-layer] and the width queries that switch layout tokens. Components never use raw hex.
   Owned by the lead: teams request changes.

   Fonts: --font-display, --font-display-italic and --font-text are defined by Astro's <Font> tags in
   BaseLayout (metric-matched fallbacks included); use them through the --face-* aliases below.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────── */

:root {
  /* §3.1 Colour ─────────────────────────────────────────────────────────────────────────────────────── */
  --paper: #f4eee3;
  --paper-deep: #e9dfcf;
  --ink: #2a1a10;
  --ink-muted: #6b5a4b;
  --rust: #562a0e;
  --soil: #7a3b1f;
  --ochre: #935d26;
  --line: #7d6e60;
  --hairline: #d8ccba;
  --earth: #2b1c12;
  --night: #0e0705;
  --cave: #181513;
  --chert: #1f2124;
  --naledi: #fff3d6;
  --ember: #f3d792; /* owner (12 Oct 2026): "Make sure that we dont have the orange writing anywhere in the website": the salmon-orange #e5a485 becomes the site's gold */
  --fire-core: #ffd89a; /* FireGlow gradient core (§8.29) */
  --ash: #b9ae9f;
  --line-dark: #857868;
  /* Version 2 (owner, 9 Oct 2026): grey #595045 tried; then (12 Oct 2026): "change the Enquire button … the same
     orange you had previously … The places I did not ask to change to a specific colour change it to the same orange":
     back to the copper orange (pages with their own accent colours keep them) */
  /* then (12 Oct 2026): "I absolutely love the colour buttons you are using at Roots and Dare2Dream. Lets replace all
     the orange buttons with this gold type of buttons": gold (the buttons also get the gold gradient, owner-v2.css) */
  --copper: #e3b965;
  --copper-hover: #f3d792;
  --on-copper: #1d1405;
  --veld: #585824;
  --drystone: #595045;
  --breccia: #744a3a;
  --dolomite: #34373a;
  --d2d-night: #0a0214;
  --d2d-violet: #5e0ea0;
  --lilac: #c9a7f0;

  /* Ground-driven roles. The ground classes (base.css) reset these per section; the defaults are paper.
     Components use the roles, never a ground's raw colour, so they read on any ground. */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --heading: var(--rust);
  --link: var(--soil);
  --focus: var(--soil);
  --indicator: var(--soil);
  --eyebrow: var(--ochre);
  --border: var(--line);
  --rule: var(--hairline);
  --layer-tag: var(--ink-muted);
  --caption: var(--ink-muted);
  --mat: var(--paper-deep);
  --wt-display: 600;

  /* Links in running text (§3.1) */
  --link-thickness: 1px;
  --link-thickness-hover: 2px;
  --link-offset: 0.2em;

  /* §3.3 Faces (aliases with safe fallbacks for the Font variables) */
  --face-display: var(--font-display, 'Noto Serif Display', Georgia, serif);
  --face-italic: var(--font-display-italic, 'Noto Serif Display Italic', Georgia, serif);
  --face-text: var(--font-text, 'Instrument Sans', system-ui, sans-serif);

  /* Weights (§3.3). Display 440 on light, 460 on dark (the dark grounds set --wt-display). */
  --wt-name: 470;
  --wt-homini: 520;
  --wt-numeral: 400; /* §3.4 lists 380; the display face now starts at 400 (§3.3 'never below 400', scripts/instance-fonts.py) */
  --wt-h3: 480;
  --wt-lede: 400;
  --wt-italic: 420;
  --wt-body: 400;
  --wt-ui: 500;
  --wt-label: 600;
  --wt-bold: 600;

  /* §3.4 Type scale. Version 2 (owner, 12 Oct 2026): "Dont have too many different sizes. Mabyg stick to three font sizes
     throughout the website. What do you suggest, four? … if there are too many font styles it becomes a mess and look too
     cluttered not minimalistic" → "Yes please do the font sizes": four sizes for the whole site (about 470 settings in
     109 files were brought to these; the earlier scale is in copy-edit/backup-2026-10-12-before-font-sizes):
       xl  big headings (and the big numbers)
       l   gold sub-lines, leads, prices
       m   reading text, form fields
       s   buttons, labels, captions, small print
     Only the name "Forum Homini" on the opening photo keeps its own size (it is the logo). The older names below are
     kept so every component still reads them; each now points at one of the four. */
  --fs-xl: clamp(2.125rem, 1.2rem + 3vw, 3.75rem);
  --fs-l: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-m: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-s: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-name: min(1rem + 13.5vw, 24svh, 13.5rem);
  --fs-numeral: var(--fs-xl);
  --fs-h1: var(--fs-xl);
  --fs-h2: var(--fs-xl);
  --fs-quote: var(--fs-xl);
  --fs-h3: var(--fs-l);
  --fs-lede: var(--fs-l);
  --fs-body-long: var(--fs-m);
  --fs-body: var(--fs-m);
  --fs-small: var(--fs-s);
  --fs-caption: var(--fs-s);
  --fs-label: var(--fs-s);
  --fs-button: var(--fs-s);
  --fs-nav: var(--fs-s);
  --fs-input: var(--fs-m);

  --lh-name: 0.8;
  --lh-numeral: 0.9;
  --lh-h1: 0.98;
  --lh-h2: 1.04;
  --lh-quote: 1.15;
  --lh-h3: 1.15;
  --lh-lede: 1.35;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-caption: 1.45;
  --lh-label: 1.3;
  --lh-button: 1;

  --tr-name: -0.02em;
  --tr-numeral: -0.02em;
  --tr-h1: -0.015em;
  --tr-h2: -0.01em;
  --tr-quote: -0.005em;
  --tr-label: 0.14em;
  --tr-button: 0.01em;
  --tr-nav: 0.01em;

  /* Measures (§3.4) */
  --measure-body: 66ch;
  --measure-long: 64ch;
  --measure-lede: 36ch;
  --measure-quote: 24ch;
  --measure-quote-long: 36ch;
  --measure-caption: 48ch;

  /* §3.5 Spacing scale: 4 8 12 16 24 32 48 64 96 128 192 px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;
  --section-pad: clamp(4rem, 2.5rem + 7vw, 11rem);
  --stack-heading: var(--s-6); /* heading group → body; 48 px from desktop */

  /* Radii and shadows */
  --r-0: 0;
  --r-input: 4px;
  --r-sheet: 16px;
  --r-pill: 999px;
  --shadow-panel: 0 12px 40px rgb(14 7 5 / 0.32);
  --shadow-card: 0 1px 2px rgb(14 7 5 / 0.06), 0 6px 16px rgb(14 7 5 / 0.06);
  --mat-edge: inset 0 0 0 1px var(--hairline);

  /* §3.6 Z-index */
  --z-base: 0;
  --z-media: 1;
  --z-media-2: 2;
  --z-media-3: 3;
  --z-sticky: 20;
  --z-gauge: 30;
  --z-header: 40;
  --z-dock: 45;
  --z-panel: 50;
  --z-status: 60;

  /* §3.7, §4.1 Layout (phone values; the width queries below switch them) */
  --cols: 4;
  --margin: clamp(16px, 4vw, 64px);
  --gutter: 16px;
  --content-max: 1320px;
  --band-max: 1600px;
  /* The header is a floating pill (owner feedback, 29 Sep 2026): --header-h is the band it floats in (pill + air
     above and below), so sticky offsets and scroll-padding clear it. No utility strip any more. */
  --header-h: 64px;
  --header-pill: 52px;
  --utility-h: 0px;
  --dock-h: 64px;
  --sticky-h: 0px;
  --header-offset: var(--header-h);
  --hero-clear: calc(var(--header-h) + 56px);
  /* Height above an over-photo hero: 0 (the hero slides under the floating header at every width but landscape
     phones, where the header sits above it). */
  --hero-top: 0px;

  /* §6.2 Motion */
  --t-press: 120ms;
  --t-micro: 160ms;
  --t-ui: 320ms;
  --t-ui-exit: 224ms;
  --t-reveal: 600ms;
  --t-photo: 900ms;
  --t-page-out: 300ms;
  --t-page-in: 450ms;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cut: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --stagger: 70ms;

  /* §5.3 Grain: one static feTurbulence tile */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-paper: 0.03;
  --grain-photo: 0.05;

  /* §5.1 Pattern tiles: black-on-transparent masks, painted in --pattern-color at --pattern-opacity */
  --pattern-veld: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='36'%20viewBox='0%200%2048%2036'%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%3e%3cpath%20d='M25%2017q0-4-1-7M27%2016v-9M29%2018q0-3%201-6M0%205q0-3-1-5M0%2041q0-3-1-5M48%205q0-3-1-5M48%2041q0-3-1-5M2%205v-9M2%2041v-9M5%206q0-4%202-8M5%2042q0-4%202-8M3%2016q0-4-1-8M5%2017q0-4%201-7M41%2027q0-5-1-9M43%2027q0-6%201-11M13%2010v-8M15%2010q0-6%201-10M15%2046q0-6%201-10M16%2024q0-2-1-3M19%2024q0-5%201-9M6%2031q0-4-1-7M8%2031v-12M10%2032q0-4%201-7M36%208q0-5-1-9M36%2044q0-5-1-9M38%208q0-6%201-10M38%2044q0-6%201-10M30%2029v-7M32%2029v-9M22%2037q0-6-2-10M22%201q0-6-2-10M24%2037q0-7%202-12M24%201q0-7%202-12'/%3e%3c/svg%3e");
  --pattern-drystone: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='40'%20viewBox='0%200%2064%2040'%20fill='none'%20stroke='%23000'%20stroke-linejoin='round'%3e%3cpath%20d='M4%201l10%200%200%208-11%200zM16%202l17-1-1%207-18%200zM34%201l11%200%201%208-12%200zM48%202l18-1%202%208-21%200zM-16%202l18-1%202%208-21%200zM19%2010l18%200%200%2011-20%200zM38%2010l20%200%200%2012-20%200zM60%2010l21%201-1%2011-22%200zM-4%2010l21%201-1%2011-22%200zM11%2023l21%200%200%207-21%200zM34%2024l17-1%200%206-16%200zM52%2023l20%201%201%205-21%200zM-12%2023l20%201%201%205-21%200zM30%2031l11%200%202%208-14%200zM44%2033l17-1%201%207-19%200zM64%2032l15-1%200%207-16%200zM0%2032l15-1%200%207-16%200zM81%2031l11%200%201%207-14%200zM17%2031l11%200%201%207-14%200z'/%3e%3c/svg%3e");
  --pattern-conglomerate: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%20viewBox='0%200%2054%2054'%20fill='none'%20stroke='%23000'%3e%3cpath%20d='M12%2053a6%205-7%201%200%2012-1%206%205-7%201%200-12%201M12-1a6%205-7%201%200%2012-1%206%205-7%201%200-12%201M0%2029a5%203-7%201%200%2010-1%205%203-7%201%200-10%201M54%2029a5%203-7%201%200%2010-1%205%203-7%201%200-10%201M43%2038a6%204%2042%201%200%209%208%206%204%2042%201%200-9-8M21%2037a3%202-7%201%200%205-1%203%202-7%201%200-5%201M25%2016a3%202%2029%201%200%205%203%203%202%2029%201%200-5-3M31%2036a3%202-1%201%200%206%200%203%202-1%201%200-6%200M8%2013a3%202-19%201%200%205-2%203%202-19%201%200-5%202'/%3e%3cpath%20stroke-width='1.8'%20stroke-linecap='round'%20d='M44%2022h0M36%2024h0M34%208h0M39%202h0M38%2049h0M51%2014h0M44%206h0'/%3e%3c/svg%3e");
  --pattern-ash: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%3e%3cpath%20d='M0%209l9-9M0%2018l9.8-9.8M11.6%206.4l6.4-6.4M0%2027l16.3-16.3M18.1%208.9l8.9-8.9M0%2036l12-12M13.9%2022.1l22.1-22.1M9%2036l14.2-14.2M25.1%2019.9l10.9-10.9M18%2036l4.3-4.3M24.2%2029.8l11.8-11.8M27%2036l9-9'/%3e%3cpath%20stroke-width='1.9'%20d='M6.5%2011h0M22%205.5h0M29.5%2025h0M13%2029.5h0'/%3e%3c/svg%3e");
  --pattern-breccia: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='56'%20viewBox='0%200%2064%2056'%20fill='none'%20stroke='%23000'%20stroke-linejoin='round'%3e%3cpath%20d='M53.4%2033.9l-5.8-8%2011-1zM38.6%2054l-8.7-8.7%208.2-2.3zM2.3%2033.3l6%206.3-9.2%203zM66.3%2033.3l6%206.3-9.2%203zM14.9%2020.6l7.3-8.7%204.8%209.6zM20.4%2041.2l-5.8%201.9%201.3-6.7zM31.2%2010.4l6.1-2-.6%207zM10.3%2023.7l1.7%205.1-6.4-1.2zM14.4.9l-3%203.9-1.1-6.4zM14.4%2056.9l-3%203.9-1.1-6.4zM33.9%2026.5l-1.8%205.7-4.2-6.8zM49.1%2010.1l-2.9%206.4-4.1-3.3zM55.3%205.6l-3.5%201.3.3-3zM62.4%2018l-2.5-1.7%202.9-1.8zM22.7%2033.8l2.9-.5.1%202.8zM51.6%2039.5l1.5-2.4%201.1%203zM34.4%204.3l-3-.2%202.5-1.8z'/%3e%3c/svg%3e");
  --pattern-dolomite: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='24'%20viewBox='0%200%2048%2024'%20fill='none'%20stroke='%23000'%3e%3cpath%20d='M0%206h48M0%2018h48M12.6%206l-5.2%2012M36.6%206l-5.2%2012M24.6%2018l-5.2%2012M24.6-6l-5.2%2012M48.6%2018l-5.2%2012M.6%2018l-5.2%2012M48.6-6l-5.2%2012M.6-6l-5.2%2012'/%3e%3c/svg%3e");
  --pattern-stromatolite: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='36'%20viewBox='0%200%2072%2036'%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%3e%3cpath%20d='M3%2033c0-6%203-6%208-6s8%200%208%206M3%2030c0-7%203-7%208-7s8%200%208%207M2%2026c0-8%203-8%209-8s9%200%209%208M2%2023c0-9%203-9%209-9s9%200%209%209M24%2033c0-6%204-6%2011-6s11%200%2011%206M24%2030c0-7%204-7%2011-7s11%200%2011%207M24%2026c0-8%204-8%2011-8s11%200%2011%208M24%2023c0-9%204-9%2011-9s11%200%2011%209M50%2033c0-6%203-6%209-6s9%200%209%206M50%2030c0-7%204-7%209-7s9%200%209%207M50%2026c0-8%203-8%209-8s9%200%209%208M50%2023c0-9%203-9%209-9s9%200%209%209M0%2034.5c9-1%2015%200%2024%200s15-1%2024%200%2015%200%2024%200'/%3e%3c/svg%3e");
  --pattern-opacity: 0.1;

  /* §5.2 Edges (masks; filled with the colour of the ground below them) */
  --edge-grass: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='26'%20viewBox='0%200%20320%2026'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2026V21H320V26zM-1%2021.6q.1-4.5-1.3-8.7q1.7%203.7%203.4%208.7M319%2021.6q.1-4.5-1.3-8.7q1.7%203.7%203.4%208.7M3.1%2021.6q0-7.5-1.4-14.3q1.6%206.2%203.1%2014.3M6.2%2021.6q.8-3.8%201.1-7.6q.5%203.1%201.3%207.6M10.2%2021.6q.5-5.4-.2-10.5q1.3%204.4%202.6%2010.5M14.1%2021.6q-.2-6.7-3-12.9q2.7%205.5%205.2%2012.9M18.1%2021.6q.8-5%20.8-9.7q.8%204.1%201.7%209.7M21.9%2021.6q.5-2.4-.2-4.9q1.3%201.9%202.7%204.9M24.4%2021.6q1-4.1%202.1-8.1q-.1%203.4.2%208.1M28.7%2021.6q.4-3.1.3-6.3q.6%202.6%201.3%206.3M31.9%2021.6q.7-2.6%201-5.4q.4%202.2%201.1%205.4M35.4%2021.6q.7-4.4.5-8.6q.9%203.6%201.9%208.6M38.9%2021.6q1.3-3.1%202.9-6.3q-.3%202.6-.1%206.3M42.9%2021.6q.2-5-1.5-9.8q2%204.1%204%209.8M45.7%2021.6q.7-4.8%201.2-9.3q.3%203.9.7%209.3M48.5%2021.6q.6-4.2.6-8.2q.8%203.4%201.7%208.2M52.4%2021.6q1.3-6.7%203.2-12.8q-.7%205.5-.9%2012.8M56.7%2021.6q.9-4.8%202-9.3q-.3%203.9-.3%209.3M60.1%2021.6q2.5-10.4%207.5-19.4q-2.8%208.5-4.8%2019.4M63.7%2021.6q.3-11.2-1.3-21q1.9%209.2%203.8%2021M67.5%2021.6q0-6.9-1.9-13.1q2.1%205.6%204.2%2013.1M71%2021.6q.2-5.3-1.6-10.3q2.2%204.3%204.3%2010.3M75.1%2021.6q.1-5.4-1.8-10.4q2.3%204.4%204.5%2010.4M78.8%2021.6q1-4.2%201.5-8.2q.5%203.4%201.3%208.2M81.8%2021.6q.9-3.1%201.7-6.2q.2%202.5.7%206.2M86.2%2021.6q0-5.7-1.4-11q1.5%204.7%203%2011M88.5%2021.6q1.2-5.3%202.6-10.3q-.4%204.4-.4%2010.3M91.3%2021.6q.7-3.3.1-6.6q1.2%202.7%202.6%206.6M94.7%2021.6q.5-4.5-.1-8.9q1.1%203.7%202.4%208.9M98.3%2021.6q.7-4.5.3-8.8q1%203.7%202.2%208.8M102.1%2021.6q-.2-6.3-2.3-12q2%205.1%203.9%2012M104.4%2021.6q1.5-5.7%203.6-11q-.8%204.7-1.1%2011M107.9%2021.6q.2-3.6-.7-7.1q1.3%202.9%202.5%207.1M110.7%2021.6q.6-3.1.9-6.2q.2%202.5.6%206.2M113.5%2021.6q1.8-6.7%204.6-12.7q-1.3%205.4-2%2012.7M116.9%2021.6q1-4.3%202.3-8.3q-.4%203.5-.5%208.3M118.8%2021.6q.7-5.1.2-9.9q1.2%204.2%202.6%209.9M122.5%2021.6q-.2-7.1-2.9-13.6q2.8%205.8%205.5%2013.6M127.4%2021.6q.5-4.6.6-9q.4%203.8.9%209M130.8%2021.6q1.8-9.1%205.3-17.1q-1.8%207.4-3%2017.1M134.4%2021.6q0-11.2-2.1-21q2.3%209.2%204.4%2021M138.2%2021.6q-.2-7.9-2.4-14.9q2.1%206.4%204.1%2014.9M141.3%2021.6q.3-5.9-1-11.2q1.8%204.8%203.6%2011.2M145.7%2021.6q1.1-3.7%202.8-7.4q-.7%203.1-1%207.4M149.5%2021.6q1.2-4.6%202.9-9q-.6%203.8-.8%209M152.8%2021.6q.9-4.1%201.9-8q-.1%203.3.1%208M155.4%2021.6q1.2-2.8%202.7-5.6q-.3%202.3-.3%205.6M159.9%2021.6q.3-2.5-.5-5.2q1.1%202.1%202.3%205.2M162.2%2021.6q.7-3.4.4-6.8q1.1%202.8%202.4%206.8M166.5%2021.6q.6-4.4.7-8.5q.5%203.6%201.1%208.5M170.3%2021.6q1-4.3%202.6-8.4q-.7%203.5-1%208.4M172.7%2021.6q1.2-5%202.6-9.7q-.3%204.1-.2%209.7M176.1%2021.6q.8-2.6%201.3-5.4q.4%202.1%201%205.4M179.3%2021.6q1.1-3.1%202.1-6.3q.1%202.6.5%206.3M182.9%2021.6q2.5-9.9%207.4-18.7q-2.7%208.1-4.6%2018.7M187.3%2021.6q0-6-1.9-11.6q2.1%204.9%204.1%2011.6M190.7%2021.6q.1-10.4-2-19.5q2.3%208.5%204.5%2019.5M194.6%2021.6q.3-5-.1-9.6q.8%204.1%201.7%209.6M198.2%2021.6q.8-5.8%201.2-11.1q.4%204.7%201%2011.1M201.3%2021.6q.3-4.8-.3-9.4q.9%204%201.8%209.4M203.4%2021.6q.7-4.5.7-8.8q.8%203.7%201.8%208.8M207.2%2021.6q1.3-7%202.7-13.3q-.2%205.7.1%2013.3M211.3%2021.6q.8-5.3.9-10.2q.7%204.3%201.7%2010.2M215.9%2021.6q.5-2.7.2-5.6q.8%202.2%201.8%205.6M219.7%2021.6q.7-2.9.7-5.9q.6%202.4%201.5%205.9M223%2021.6q.9-2.4%201.8-5q0%202%20.2%205M227.1%2021.6q.8-3.3%201.9-6.6q-.3%202.7-.3%206.6M229.5%2021.6q.8-3%201.3-6.1q.4%202.5%201%206.1M233.3%2021.6q.5-4.2.1-8.2q.8%203.4%201.8%208.2M236.8%2021.6q.8-1.9.8-4q.8%201.5%201.8%204M241.5%2021.6q.2-3-.6-6q1.1%202.4%202.1%206M244.2%2021.6q.3-4-.4-7.9q.9%203.3%201.9%207.9M247.7%2021.6q.5-2.7.2-5.5q.8%202.2%201.7%205.5M249.8%2021.6q.8-2.2.8-4.6q.9%201.8%202%204.6M252.5%2021.6q.8-1.4%201.2-3.2q.4%201.2%201.1%203.2M255.7%2021.6q.4-1.4.1-3.1q.7%201.1%201.5%203.1M258%2021.6q.8-6.2%201.7-11.9q-.2%205.1-.1%2011.9M260.8%2021.6q.8-1.9%201.6-4.1q-.1%201.6%200%204.1M263.4%2021.6q1.5-6.6%203.8-12.6q-.8%205.4-1.1%2012.6M266.9%2021.6q.1-6.3-1.1-12.1q1.4%205.2%202.8%2012.1M270.9%2021.6q.7-5.9.5-11.3q.9%204.8%201.9%2011.3M274.9%2021.6q.9-2.3%202-4.9q-.2%201.9-.2%204.9M278.4%2021.6q.8-1.5%201.4-3.2q.2%201.2.7%203.2M282.3%2021.6q.9-3.7%202.1-7.3q-.3%203-.4%207.3M285.6%2021.6q.6-3.9%201-7.6q.3%203.2.7%207.6M289.5%2021.6q1.1-2.5%202.6-5.2q-.4%202.1-.5%205.2M292.9%2021.6q.3-2.5-.5-5.1q1.1%202%202.3%205.1M296.5%2021.6q.7-3.3%201.4-6.6q0%202.7.2%206.6M299.6%2021.6q.7-2.8%201.1-5.7q.4%202.3.9%205.7M303.6%2021.6q.7-1.8%201.4-3.9q0%201.5.3%203.9M306.7%2021.6q.8-4.4%201.3-8.5q.3%203.6.8%208.5M310.7%2021.6q.1-6.9-1.6-13.1q2%205.6%203.9%2013.1M314.9%2021.6q.9-9.7%201.7-18.3q.1%208%20.4%2018.3M318%2021.6q.7-4.8%201.3-9.4q.1%204%20.4%209.4'/%3e%3c/svg%3e");
  --edge-strata: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='28'%20viewBox='0%200%20400%2028'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2018.2c1.7.2%206.7.9%2010%201.2%203.3.3%206.7.4%2010%20.4%203.3%200%206.7-.5%2010-.6%203.3-.1%206.7%200%2010%20.1%203.3.1%206.7.5%2010%20.6%203.3.1%206.7.1%2010%20.2%203.3.1%206.7.1%2010%20.2%203.3.1%206.7.5%2010%20.6%203.3.1%206.7.3%2010%200%203.3-.2%206.7-1%2010-1.5%203.3-.5%206.7-1.2%2010-1.7%203.3-.4%206.7-.6%2010-1%203.3-.4%206.7-.9%2010-1.3%203.3-.4%206.7-1%2010-1.2%203.3-.2%206.7-.2%2010-.2%203.3%200%206.7.2%2010%20.1%203.3-.1%206.7-.5%2010-.8%203.3-.3%206.7-.8%2010-1%203.3-.2%206.7-.2%2010-.3%203.3-.1%206.7-.2%2010-.3%203.3-.1%206.7-.5%2010-.4%203.3.1%206.7.4%2010%20.8%203.3.4%206.7%201.2%2010%201.7%203.3.5%206.7.9%2010%201.1%203.3.3%206.7.2%2010%20.4%203.3.2%206.7.5%2010%20.7%203.3.2%206.7.4%2010%20.4%203.3%200%206.7-.4%2010-.5%203.3-.1%206.7-.3%2010-.2%203.3.1%206.7.7%2010%201%203.3.3%206.7.7%2010%20.8%203.3.1%206.7-.1%2010-.1%203.3%200%206.7.1%2010%20.1%203.3%200%206.7.2%2010%20.1%203.3-.1%206.7-.5%2010-.8%203.3-.3%206.7-.9%2010-1%203.3-.1%206.7.1%2010%20.3%203.3.2%206.7.6%2010%20.8%203.3.2%206.7.3%2010%20.5%203.3.2%208.3.7%2010%20.8V28H0zM46%2013.1c0-.1%2010.2%200%2015.3%200%205.1.1%2010.1.3%2015.2.3%205.1%200%2010.2.4%2015.3-.1%205.1-.4%2010.1-1.9%2015.2-2.6%205.1-.7%2010.2-1%2015.3-1.6%205.1-.6%2010.1-1.5%2015.2-1.9%205.1-.3%2010.2-.1%2015.3-.2%205.1%200%2015.2-.2%2015.2-.1%200%20.1-10.1.7-15.2.9-5.1.3-10.2.1-15.3.6-5.1.5-10.1%201.6-15.2%202.3-5.1.7-10.2%201-15.3%201.7-5.1.7-10.1%202.1-15.2%202.5-5.1.4-10.2%200-15.3-.2-5.1-.2-10.1-.5-15.2-.8-5.1-.3-15.3-.7-15.3-.8zM236%209.2c0-.1%206.9.2%2010.3.3%203.4.1%206.8.2%2010.2.3%203.4.2%206.9.6%2010.3.6%203.4.1%206.8-.2%2010.2-.3%203.4-.1%206.9-.5%2010.3-.4%203.4.1%206.8.6%2010.2.9%203.4.3%206.9.9%2010.3%201.1%203.4.3%2010.2.3%2010.2.4%200%20.1-6.8.3-10.2.2-3.4-.1-6.9-.5-10.3-.8-3.4-.2-6.8-.7-10.2-.7-3.4%200-6.9.4-10.3.5-3.4.1-6.8.3-10.2.2-3.4-.1-6.9-.5-10.3-.7-3.4-.2-6.8-.4-10.2-.7-3.4-.3-10.3-.8-10.3-.9zM352%207.9c0-.1%202.9-.4%204.3-.6%201.4-.2%202.8-.4%204.2-.5%201.4-.1%202.9-.1%204.3-.1%201.4%200%202.8.1%204.2.2%201.4.1%202.9.3%204.3.4%201.4.2%202.8.4%204.2.5%201.4.2%202.9.2%204.3.4%201.4.2%204.2.4%204.2.5%200%20.1-2.8%200-4.2%200-1.4%200-2.9-.1-4.3-.2-1.4-.1-2.8-.2-4.2-.3-1.4-.1-2.9-.3-4.3-.4-1.4-.1-2.8-.1-4.2-.2-1.4%200-2.9-.1-4.3-.1-1.4%200-2.8.1-4.2.2-1.4.1-4.3.3-4.3.2z'/%3e%3c/svg%3e");
  --edge-skyline: url('/Resources/Images/resized/site/skyline-1600.svg');
}

/* Tablet 641–1024 px */
@media (min-width: 641px) {
  :root {
    --cols: 8;
    --gutter: 20px;
    --header-h: 80px;
    --header-pill: 60px;
    --dock-h: 0px;
  }
}

/* Desktop ≥ 1025 px */
@media (min-width: 1025px) {
  :root {
    --cols: 12;
    --gutter: 24px;
    --stack-heading: var(--s-7);
  }
}

/* Wide ≥ 1440 px */
@media (min-width: 1440px) {
  :root {
    --gutter: 32px;
  }
}

/* Landscape phones: the header starts condensed and solid; heroes flow (§3.7) */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-h: 64px;
    --header-pill: 52px;
    --hero-top: var(--header-h);
  }
}

/* The dock hides while a field has focus, so nothing reserves its height then (§7.5) */
@media (max-width: 640px) {
  :root:has(:is(input, select, textarea):focus) {
    --dock-h: 0px;
  }
}

/* ── §3.8 Layers: set on <html data-layer> by BaseLayout, or on a home <section data-layer> ──────────────
   --layer-band          title-band ground           --layer-band-text   band text
   --layer-band-muted    secondary text on the band  --layer-band-link   links on the band (underlined)
   --layer-band-focus    focus ring on the band      --layer-band-indicator current-state marks on the band
   --layer-band-tag      LayerTag colour on the band --layer-band-scheme color-scheme of the band
   --layer-accent        large text only on the band --layer-pattern     the tile (mask) or none
   --pattern-opacity     the tile's strength         --layer-wdth / --layer-wdth-phone  heading width
   The rock and time tag's words are new copy (N-LAYER-01, see src/data/layers.ts), not a token. */
[data-layer] {
  --layer-band: var(--night);
  --layer-band-text: var(--naledi);
  --layer-band-muted: var(--ash);
  --layer-band-link: var(--ember);
  --layer-band-focus: var(--ember);
  --layer-band-indicator: var(--ember);
  --layer-band-tag: var(--ash);
  --layer-band-scheme: dark;
  --layer-accent: var(--ember);
  --layer-pattern: none;
  --layer-wdth: 100%;
  --layer-wdth-phone: 100%;
}

[data-layer='home'] {
  --layer-band: var(--earth);
}

/* Veld, drystone and breccia bands: naledi text and marks (6.71–7.16:1); ember only as large text (3.52–3.75:1) */
[data-layer='stay'] {
  --layer-band: var(--veld);
  --layer-band-muted: var(--naledi);
  --layer-band-link: var(--naledi);
  --layer-band-indicator: var(--naledi);
  --layer-band-tag: var(--naledi);
  --layer-pattern: var(--pattern-veld);
  --layer-wdth: 100%;
  --layer-wdth-phone: 87.5%;
}

[data-layer='discover'] {
  --layer-band: var(--drystone);
  --layer-band-muted: var(--naledi);
  --layer-band-link: var(--naledi);
  --layer-band-indicator: var(--naledi);
  --layer-band-tag: var(--naledi);
  --layer-pattern: var(--pattern-drystone);
  --layer-wdth: 87.5%;
  --layer-wdth-phone: 87.5%;
}

[data-layer='meet'] {
  --layer-band: var(--breccia);
  --layer-band-muted: var(--naledi);
  --layer-band-link: var(--naledi);
  --layer-band-indicator: var(--naledi);
  --layer-band-tag: var(--naledi);
  --layer-pattern: var(--pattern-conglomerate);
  --layer-wdth: 81.25%;
  --layer-wdth-phone: 81.25%;
}

[data-layer='dine'] {
  --layer-band: var(--cave);
  --layer-pattern: var(--pattern-ash);
  --layer-wdth: 75%;
  --layer-wdth-phone: 75%;
}

/* High tea: daylight. Rust band text on paper-deep; ash hatching at 6% */
[data-layer='dine-day'] {
  --layer-band: var(--paper-deep);
  --layer-band-text: var(--rust);
  --layer-band-muted: var(--ink-muted);
  --layer-band-link: var(--soil);
  --layer-band-focus: var(--soil);
  --layer-band-indicator: var(--soil);
  --layer-band-tag: var(--rust);
  --layer-band-scheme: light;
  --layer-accent: var(--rust);
  --layer-pattern: var(--pattern-ash);
  --pattern-opacity: 0.06;
  --layer-wdth: 75%;
  --layer-wdth-phone: 75%;
}

/* Home Deep time section only (set on its <section>) */
[data-layer='deep'] {
  --layer-band: var(--breccia);
  --layer-band-muted: var(--naledi);
  --layer-band-link: var(--naledi);
  --layer-band-indicator: var(--naledi);
  --layer-band-tag: var(--naledi);
  --layer-pattern: var(--pattern-breccia);
  --pattern-opacity: 0.1;
  --layer-wdth: 62.5%;
  --layer-wdth-phone: 62.5%;
}

[data-layer='contact'] {
  --layer-band: var(--chert);
  --layer-pattern: var(--pattern-dolomite);
  --layer-wdth: 100%;
  --layer-wdth-phone: 100%;
}

[data-layer='legal'] {
  --layer-band: var(--paper-deep);
  --layer-band-text: var(--rust);
  --layer-band-muted: var(--ink-muted);
  --layer-band-link: var(--soil);
  --layer-band-focus: var(--soil);
  --layer-band-indicator: var(--soil);
  --layer-band-tag: var(--rust);
  --layer-band-scheme: light;
  --layer-accent: var(--rust);
  --layer-pattern: none;
  --layer-wdth: 100%;
  --layer-wdth-phone: 87.5%;
}

[data-layer='none'] {
  --layer-band: var(--night);
  --layer-pattern: var(--pattern-stromatolite);
}
/* base.css: document defaults, typography, links, focus, grounds (DESIGN.md §3, §3.8, §4.1, §8.1).
   Owned by the lead. Everything is in @layer base, so component styles override it without a fight. */

@layer base {
  html {
    font-family: var(--face-text);
    font-size: 100%;
    font-weight: var(--wt-body);
    line-height: var(--lh-body);
    font-synthesis: none;
    font-kerning: normal;
    color: var(--fg);
    /* The canvas is night, like the header above and the footer below, so overscroll never flashes paper */
    background: var(--night);
    color-scheme: light;
    accent-color: var(--soil);
    /* §4.1: nothing sticky ever covers the focused element (WCAG 2.4.11) */
    scroll-padding-top: calc(var(--header-h) + var(--sticky-h, 0px) + 16px);
    scroll-padding-bottom: calc(var(--dock-h, 0px) + env(safe-area-inset-bottom) + 16px);
  }

  body {
    font-size: var(--fs-body);
    background: var(--night);
    /* The phone dock is fixed; the page ends above it (§8.8) */
    padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom));
  }

  main {
    display: block;
    background: var(--paper);
    color: var(--ink);
  }

  main:focus {
    outline: none;
  }

  ::selection {
    background: var(--ember);
    color: var(--night);
  }

  /* ── Headings (§3.3, §3.4): Display, balanced, never hyphenated; the width axis only ≥ 40 px ────────── */
  :where(h1, h2, h3, h4) {
    font-family: var(--face-display);
    font-weight: var(--wt-display);
    color: var(--heading);
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: break-word;
  }

  :where(h1) {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--tr-h1);
    font-stretch: var(--layer-wdth-phone, 100%);
  }

  :where(h2) {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
    font-stretch: 100%;
  }

  :where(h3) {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: var(--wt-h3);
  }

  :where(h4) {
    font-family: var(--face-text);
    font-size: var(--fs-body);
    font-weight: var(--wt-bold);
    line-height: var(--lh-small);
  }

  @media (min-width: 641px) {
    :where(h1) {
      font-stretch: var(--layer-wdth, 100%);
    }

    :where(h2) {
      font-stretch: var(--layer-wdth, 100%);
    }
  }

  :where(p, li, dd, figcaption, blockquote) {
    text-wrap: pretty;
  }

  :where(strong, b) {
    font-weight: var(--wt-bold);
  }

  /* Italics are always the Display italic (there is no sans italic, §3.3) */
  :where(em, i, cite) {
    font-family: var(--face-text);
    font-style: normal;
    font-weight: 500;
  }

  :where(blockquote, q) {
    hanging-punctuation: first;
  }

  :where(small) {
    font-size: var(--fs-small);
  }

  :where(hr) {
    border: 0;
    border-block-start: 1px solid var(--rule);
  }

  :where(abbr[title]) {
    text-decoration: none;
  }

  :where(address) {
    font-style: normal;
  }

  :where(table) {
    font-variant-numeric: lining-nums tabular-nums;
  }

  :where(time, data) {
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* ── Links (§3.1): underlined wherever they sit in running text. Navigation lists, buttons, pills,
     chips and card-title links remove the underline in their own component styles. ─────────────────── */
  :where(a) {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-thickness: var(--link-thickness);
    text-decoration-color: currentColor;
    text-underline-offset: var(--link-offset);
    text-decoration-skip-ink: auto;
    transition: text-decoration-thickness var(--t-micro) linear, color var(--t-micro) linear;
  }

  :where(a:hover, a:active) {
    text-decoration-thickness: var(--link-thickness-hover);
  }

  :where(a:visited) {
    color: var(--link);
  }

  /* ── Focus (§8, §14): 2 px ring in the ground's focus colour, 3 px offset, never removed ───────────── */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* ── Ground classes (§3.8, §8.1): colour, background, focus, current-state marks, links, color-scheme ─ */
  .ground-paper,
  .ground-deep {
    --fg: var(--ink);
    --fg-muted: var(--ink-muted);
    --heading: var(--rust);
    --link: var(--soil);
    --focus: var(--soil);
    --indicator: var(--soil);
    --eyebrow: var(--ochre);
    --border: var(--line);
    --rule: var(--hairline);
    --layer-tag: var(--ink-muted);
    --caption: var(--ink-muted);
    --mat: var(--paper-deep);
    --wt-display: 600;
    --bg: var(--paper);
    background-color: var(--bg);
    color: var(--fg);
    color-scheme: light;
  }

  .ground-deep {
    --bg: var(--paper-deep);
    /* ochre measures 4.15:1 on paper-deep: eyebrows take rust there (§3.2) */
    --eyebrow: var(--rust);
    --mat: var(--paper);
  }

  .ground-night,
  .ground-cave,
  .ground-chert,
  .ground-earth {
    --fg: var(--naledi);
    --fg-muted: var(--ash);
    --heading: var(--naledi);
    --link: var(--ember);
    --focus: var(--ember);
    --indicator: var(--ember);
    --eyebrow: var(--ember);
    --border: var(--line-dark);
    --rule: var(--line-dark);
    --layer-tag: var(--ash);
    --caption: var(--ash);
    --mat: var(--night);
    --wt-display: 600;
    --bg: var(--night);
    background-color: var(--bg);
    color: var(--fg);
    color-scheme: dark;
  }

  .ground-cave {
    --bg: var(--cave);
  }

  .ground-chert {
    --bg: var(--chert);
  }

  .ground-earth {
    --bg: var(--earth);
  }

  .ground-d2d {
    --fg: var(--naledi);
    --fg-muted: var(--lilac);
    --heading: var(--naledi);
    --link: var(--lilac);
    --focus: var(--lilac);
    --indicator: var(--lilac);
    --eyebrow: var(--lilac);
    --border: var(--lilac);
    --rule: rgb(201 167 240 / 0.35);
    --layer-tag: var(--lilac);
    --caption: var(--lilac);
    --mat: var(--d2d-night);
    --wt-display: 600;
    --bg: var(--d2d-night);
    background-color: var(--bg);
    color: var(--fg);
    color-scheme: dark;
  }

  /* The layer band of the page (or of a home section that sets its own data-layer) */
  .ground-band {
    --fg: var(--layer-band-text);
    --fg-muted: var(--layer-band-muted);
    --heading: var(--layer-band-text);
    --link: var(--layer-band-link);
    --focus: var(--layer-band-focus);
    --indicator: var(--layer-band-indicator);
    --eyebrow: var(--layer-band-text);
    --border: var(--layer-band-text);
    --rule: var(--layer-band-text);
    --layer-tag: var(--layer-band-tag);
    --caption: var(--layer-band-muted);
    --wt-display: 600;
    --bg: var(--layer-band);
    background-color: var(--bg);
    color: var(--fg);
    color-scheme: var(--layer-band-scheme);
  }

  /* Light bands (dine-day, legal) keep the light display weight */
  [data-layer='dine-day'] .ground-band,
  [data-layer='legal'] .ground-band,
  .ground-band:is([data-layer='dine-day'], [data-layer='legal']) {
    --wt-display: 600;
  }

  /* ── Utilities every team may use ─────────────────────────────────────────────────────────────────── */
  .visually-hidden:not(:focus-within, :active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Skip link: the first focusable element; visible only when focused (§14) */
  .skip-link {
    position: absolute;
    inset-block-start: var(--s-2);
    inset-inline-start: var(--s-2);
    z-index: calc(var(--z-status) + 1);
    padding: var(--s-3) var(--s-5);
    background: var(--night);
    color: var(--naledi);
    font-weight: var(--wt-label);
    text-decoration: none;
    border-radius: var(--r-pill);
    translate: 0 calc(-100% - var(--s-4));
  }

  .skip-link:focus-visible,
  .skip-link:focus {
    translate: 0 0;
    outline-color: var(--ember);
  }
}

/* ── Preferences (§6.6) ───────────────────────────────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --hairline: var(--line);
    --ink-muted: var(--ink);
  }

  @layer base {
    .ground-paper,
    .ground-deep {
      --caption: var(--ink);
      --fg-muted: var(--ink);
    }
  }
}

@media (forced-colors: active) {
  @layer base {
    :focus-visible {
      outline-color: Highlight;
    }
  }
}

/* the option bars that glide (src/scripts/ticker.ts, owner 24 Oct 2026): soft fades at both ends show there is more */
[data-ticker].tk-on {
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.25), #000 30px, #000 calc(100% - 30px), rgb(0 0 0 / 0.25));
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.25), #000 30px, #000 calc(100% - 30px), rgb(0 0 0 / 0.25));
  scroll-snap-type: none !important; /* snapping would pull the slow glide back */
}
/* layout.css: containers, the grid and section rhythm (DESIGN.md §4). Owned by the lead.
   Media queries are written literally from §3.7: phone (max-width: 640px) · tablet (min-width: 641px) and
   (max-width: 1024px) · tablet-up (min-width: 641px) · desktop (min-width: 1025px) · wide (min-width: 1440px). */

/* Grid placement properties do not inherit, so a nested grid never picks up its parent cell's span */
@property --span {
  syntax: '*';
  inherits: false;
}
@property --span-tablet {
  syntax: '*';
  inherits: false;
}
@property --span-phone {
  syntax: '*';
  inherits: false;
}
@property --start {
  syntax: '*';
  inherits: false;
}
@property --start-tablet {
  syntax: '*';
  inherits: false;
}

@layer layout {
  /* ── Container (§4.1): <Container wrap="text|content|band|bleed"> ─────────────────────────────────── */
  .wrap {
    --wrap-max: var(--content-max);
    inline-size: min(100% - 2 * var(--margin), var(--wrap-max));
    margin-inline: auto;
  }

  .wrap--text {
    --wrap-max: var(--measure-body);
  }

  .wrap--text.wrap--long {
    --wrap-max: var(--measure-long);
  }

  .wrap--content {
    --wrap-max: var(--content-max);
  }

  .wrap--band {
    --wrap-max: var(--band-max);
  }

  /* Bands run edge to edge below 1600 px (no side margin), then centre in the trench */
  @media (max-width: 1600px) {
    .wrap--band {
      inline-size: 100%;
    }
  }

  .wrap--bleed {
    inline-size: 100%;
    max-inline-size: none;
  }

  /* Pattern in the side margins from 1600 px (the trench cut into continuing earth, §4.1) */
  .wrap--pattern {
    position: relative;
  }

  @media (min-width: 1601px) {
    .wrap--pattern::before {
      content: '';
      position: absolute;
      inset-block: 0;
      inset-inline: calc(50% - 50vw);
      z-index: -1;
      background-color: var(--pattern-color, var(--layer-band-text));
      opacity: var(--pattern-opacity);
      -webkit-mask: var(--layer-pattern) repeat;
      mask: var(--layer-pattern) repeat;
      pointer-events: none;
    }
  }

  /* ── Grid (§4.1): 4 / 8 / 12 columns (the Grid component can change them per width).
     Children place themselves with custom properties; each defaults to the full row:
       --span-phone                       phone (never offset)
       --span-tablet, --start-tablet      tablet
       --span, --start                    desktop and wide
     e.g. style="--span: 7; --start: 6; --span-tablet: 4" ────────────────────────────────────────────── */
  .grid {
    --grid-cols: var(--grid-cols-phone, 4);
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gap, var(--gutter));
    row-gap: var(--grid-row-gap, var(--s-6));
  }

  .grid > * {
    grid-column: auto / span var(--span-phone, var(--grid-cols));
  }

  @media (min-width: 641px) {
    .grid {
      --grid-cols: var(--grid-cols-tablet, 8);
    }

    .grid > * {
      grid-column: var(--start-tablet, auto) / span var(--span-tablet, var(--grid-cols));
    }
  }

  @media (min-width: 1025px) {
    .grid {
      --grid-cols: var(--grid-cols-desktop, 12);
    }

    .grid > * {
      grid-column: var(--start, auto) / span var(--span, var(--grid-cols));
    }
  }

  /* ── Sections (§4.3) ──────────────────────────────────────────────────────────────────────────────── */
  .section {
    padding-block: var(--section-pad);
  }

  /* Sections on the same ground in a row: the second starts closer */
  .section.ground-paper + .section.ground-paper,
  .section.ground-deep + .section.ground-deep,
  .section.ground-night + .section.ground-night,
  .section.ground-cave + .section.ground-cave,
  .section.ground-chert + .section.ground-chert,
  .section.ground-d2d + .section.ground-d2d {
    padding-block-start: var(--s-8);
  }

  /* Anything that moves or bleeds clips its own sideways overflow (§4.1) */
  .bleed-clip {
    overflow-x: clip;
  }

  /* Vertical rhythm helpers */
  .stack > * + * {
    margin-block-start: var(--stack-gap, var(--s-5));
  }

  .stack-tight > * + * {
    margin-block-start: var(--s-3);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--s-3));
    align-items: center;
  }
}
/* components.css: the shared primitives every team builds with (DESIGN.md §3, §5, §8). Owned by the lead.
   Component-specific styles live in each component's own \3c style> block, never here. */

@layer components {
  /* ── Buttons (§8.4, §8.30): the outline pill. Copper belongs to Book (BookCTA) and nothing else; the form's
     Send button (ink fill) is EnquiryForm's own. Colour follows the ground: ink on light, naledi on dark. ── */
  .button {
    --button-h: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-block-size: var(--button-h);
    padding-inline: var(--s-5);
    border: 1.5px solid currentColor;
    border-radius: var(--r-pill);
    color: var(--fg);
    background: transparent;
    font-family: var(--face-text);
    font-size: var(--fs-button);
    font-weight: var(--wt-label);
    line-height: var(--lh-button);
    letter-spacing: var(--tr-button);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition:
      background-color var(--t-micro) linear,
      color var(--t-micro) linear;
  }

  .button:visited {
    color: var(--fg);
  }

  .button:hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }

  .button .icon {
    inline-size: 20px;
    block-size: 20px;
  }

  .button--sm {
    --button-h: 44px;
    padding-inline: var(--s-4);
  }

  .button--lg {
    --button-h: 60px;
    padding-inline: var(--s-6);
  }

  .button--full {
    --button-h: 56px;
    display: flex;
    inline-size: 100%;
  }

  /* ── Chips (outline pills in chip rows, enquiry chips) ─────────────────────────────────────────────── */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: 44px;
    padding-inline: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--fg);
    font-size: var(--fs-small);
    font-weight: var(--wt-ui);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--t-micro) linear,
      border-color var(--t-micro) linear;
  }

  .chip:visited {
    color: var(--fg);
  }

  .chip:hover {
    border-color: currentColor;
    background-color: color-mix(in srgb, currentColor 8%, transparent);
  }

  .chip[aria-current] {
    border-color: var(--indicator);
    box-shadow: inset 0 -2px 0 var(--indicator);
  }

  /* ── Type roles ─────────────────────────────────────────────────────────────────────────────────── */
  /* Small capitals label (typed in sentence case; capitals come from CSS, §2) */
  .label,
  .eyebrow {
    font-family: var(--face-text);
    font-size: var(--fs-label);
    font-weight: var(--wt-label);
    line-height: var(--lh-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    font-stretch: 100%;
  }

  .eyebrow {
    color: var(--eyebrow);
  }

  .label {
    color: var(--fg-muted);
  }

  .lede {
    font-family: var(--face-display);
    font-size: var(--fs-lede);
    font-weight: var(--wt-lede);
    line-height: var(--lh-lede);
    max-inline-size: var(--measure-lede);
    text-wrap: pretty;
  }

  /* A single old line set large (About "Forum Homini is an evolutionary concept!") */
  .display-line {
    font-family: var(--face-display);
    font-size: var(--fs-h2);
    font-weight: var(--wt-display);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
    color: var(--heading);
    text-wrap: balance;
  }

  .caption {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--caption);
    max-inline-size: var(--measure-caption);
  }

  .small {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  /* Prices, times, capacities and dates (§2) */
  .num {
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* Running text: paragraphs 24 px apart, 66ch; .prose--long for pages that are mostly reading (§3.4) */
  .prose {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .prose > * + * {
    margin-block-start: var(--s-5);
  }

  .prose :where(p, ul, ol, dl) {
    max-inline-size: var(--measure-body);
  }

  .prose--long {
    font-size: var(--fs-body-long);
  }

  .prose--long :where(p, ul, ol, dl) {
    max-inline-size: var(--measure-long);
  }

  .prose :where(ul, ol):not([class]) {
    padding-inline-start: 1.25em;
  }

  .prose :where(li + li) {
    margin-block-start: var(--s-2);
  }

  /* ── Icons (<Icon>): stroke icons in currentColor ──────────────────────────────────────────────────── */
  .icon {
    flex: none;
    display: inline-block;
    vertical-align: -0.2em;
    overflow: visible;
  }

  /* ── Texture (§5.1, §5.3) ─────────────────────────────────────────────────────────────────────────────
     .pattern-fill  paints the layer's lithology tile behind the content (set --layer-pattern or use a
                    [data-layer]); colour --pattern-color (default: the text colour) at --pattern-opacity.
     .grain         the static grain at 3% on paper sections; .grain--photo at 5% over heroes and bands.
     Both are off under prefers-contrast: more, forced-colors and print. */
  .pattern-fill {
    position: relative;
    isolation: isolate;
  }

  .pattern-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--pattern-color, var(--fg));
    opacity: var(--pattern-opacity);
    -webkit-mask: var(--layer-pattern) repeat;
    mask: var(--layer-pattern) repeat;
    pointer-events: none;
  }

  .grain {
    position: relative;
    isolation: isolate;
  }

  .grain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grain);
    opacity: var(--grain-paper);
    pointer-events: none;
  }

  .grain--photo::after {
    z-index: var(--z-media);
    opacity: var(--grain-photo);
  }
}

@media (prefers-contrast: more), (forced-colors: active) {
  @layer components {
    .pattern-fill::before,
    .grain::after {
      display: none;
    }
  }
}

@media (forced-colors: active) {
  @layer components {
    .button,
    .chip {
      border: 1px solid ButtonText;
    }
  }
}
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────
   effects.css · owner: chrome-frame · DESIGN.md §6 (the motion system).

   The site-wide motion layer: descend (the page transition), smooth in-page anchors, press, and the two
   reveals, settle and erode. Components keep their own motion (condense, core-pull, twinkle, drift…) in
   `@layer effects { … }` blocks of their own, under the same rules:

   - Final states are the base styles. Every animation here is declared inside
     @media (prefers-reduced-motion: no-preference), and the scroll-driven ones also inside
     @supports (animation-timeline: view()), so reduced motion never leaves anything mid-way.
   - Only transform (translate, scale), opacity and clip-path move (§6.1).
   - Hidden start states only with JavaScript (html.js), motion allowed, and below the fold: the scroll-driven
     reveals start from the element's own view timeline, so anything already in view at load is at its end
     state; the IntersectionObserver fallback (reveal.ts, Firefox) hides only what is below the first screen.
   - print.css resets every [data-reveal] to its final state; no-JS shows everything.

   Hooks for other teams
   - data-reveal="settle"  text blocks and cards below the fold: rise 16 px and fade in (600 ms, --ease-settle).
   - data-reveal="erode"   feature photos below the fold (never a hero): open top-down with clip-path
                           (900 ms, --ease-cut).
   - Stagger: siblings with data-reveal step by --stagger (70 ms, at most four); set style="--reveal-i: n"
     (0–3) to choose the step yourself.
   - data-press            opt a control that is not a button, .button, .book or .chip into press.
   - view-transition-name: layer-band (LayerBand) morphs the band's colour between groups; .site-header and
     .dock are named here so they stay put while the page underneath descends.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── descend: the page transition (§6.3). @view-transition sits outside the layer (it is not a style rule). */
/* Version 2 (owner, 9 Oct 2026): "Why do I have to tap twice … Most of the buttons on the website I have to tap
   twice": with the page transition on, the phone keeps showing the old page, unchanged, until the new one has
   arrived, so a tap looked as if nothing happened. The transition is off: a tap now leaves the page at once. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    /* Anchors glide; scripts and the browser's own restores do not change */
    html {
      scroll-behavior: smooth;
    }

    /* The old page lifts and fades (300 ms), the new one settles in from 4vh below (450 ms) */
    ::view-transition-old(root) {
      animation: fh-descend-out var(--t-page-out) var(--ease-exit) both;
    }

    ::view-transition-new(root) {
      animation: fh-descend-in var(--t-page-in) var(--ease-settle) both;
    }

    /* The layer band: its box moves and its colour crossfades between the two groups */
    ::view-transition-group(layer-band) {
      animation-duration: var(--t-page-in);
      animation-timing-function: var(--ease-settle);
    }

    ::view-transition-old(layer-band),
    ::view-transition-new(layer-band) {
      animation-duration: var(--t-page-in);
      /* Keep the band's own proportions while its height changes; the ground colour carries the morph */
      block-size: 100%;
      object-fit: cover;
      object-position: left top;
    }

    /* Header and dock hold still through the change (only their contents crossfade) */
    .site-header {
      view-transition-name: site-header;
    }

    .dock {
      view-transition-name: dock;
    }

    ::view-transition-group(site-header),
    ::view-transition-group(dock) {
      animation-duration: var(--t-ui);
    }

    @keyframes fh-descend-out {
      to {
        opacity: 0;
        translate: 0 -2vh;
      }
    }

    @keyframes fh-descend-in {
      from {
        opacity: 0;
        translate: 0 4vh;
      }
    }

    /* ── press: buttons give 2% under the finger (§6.3); colour change only under reduced motion ─────── */
    :where(button:not(:disabled), .button, .book, .chip, [data-press]):active {
      animation: fh-press var(--t-press) var(--ease-settle) both;
    }

    @keyframes fh-press {
      to {
        scale: 0.98;
      }
    }

    /* ── Stagger for the reveals: siblings step by --stagger, at most four (§6.2) ─────────────────── */
    :where([data-reveal]) {
      --reveal-i: 0;
    }

    :where([data-reveal] + [data-reveal]) {
      --reveal-i: 1;
    }

    :where([data-reveal] + [data-reveal] + [data-reveal]) {
      --reveal-i: 2;
    }

    :where([data-reveal] + [data-reveal] + [data-reveal] + [data-reveal]) {
      --reveal-i: 3;
    }

    /* ── settle and erode, scroll-driven where view() timelines exist (Chrome 115+, Safari 26+) ────── */
    @supports (animation-timeline: view()) {
      html.js [data-reveal='settle'] {
        animation: fh-settle linear both;
        animation-timeline: view();
        /* entry 0% → entry 60% (§6.3), each stagger step 10% later; tall blocks finish within 40% of a screen */
        animation-range: entry calc(var(--reveal-i) * 10%) entry min(calc(60% + var(--reveal-i) * 10%), 40vh);
      }

      html.js [data-reveal='erode'] {
        animation: fh-erode linear both;
        animation-timeline: view();
        animation-range: entry calc(var(--reveal-i) * 10%) entry min(calc(80% + var(--reveal-i) * 10%), 60vh);
      }

      /* On a timeline the keyframes carry the easing, so each reveal keeps its curve */
      @keyframes fh-settle {
        from {
          opacity: 0;
          translate: 0 16px;
          animation-timing-function: var(--ease-settle);
        }
        to {
          opacity: 1;
          translate: 0 0;
        }
      }

      @keyframes fh-erode {
        from {
          clip-path: inset(0 0 100% 0);
          animation-timing-function: var(--ease-cut);
        }
        to {
          clip-path: inset(0);
        }
      }
    }

    /* ── The IntersectionObserver fallback (reveal.ts marks .is-pending below the fold, then .is-in) ─ */
    @supports not (animation-timeline: view()) {
      html.js [data-reveal='settle'].is-pending {
        opacity: 0;
        translate: 0 16px;
      }

      html.js [data-reveal='erode'].is-pending {
        clip-path: inset(0 0 100% 0);
      }

      html.js [data-reveal='settle'].is-in {
        animation: fh-settle-in var(--t-reveal) var(--ease-settle) both;
        animation-delay: calc(var(--reveal-i) * var(--stagger));
      }

      html.js [data-reveal='erode'].is-in {
        animation: fh-erode-in var(--t-photo) var(--ease-cut) both;
        animation-delay: calc(var(--reveal-i) * var(--stagger));
      }

      @keyframes fh-settle-in {
        from {
          opacity: 0;
          translate: 0 16px;
        }
      }

      @keyframes fh-erode-in {
        from {
          clip-path: inset(0 0 100% 0);
        }
      }
    }
  }
}

/* ── Reduced motion: the safety net (§6.6). Everything above is already declared for no-preference only;
   this catches anything a component animates by mistake, so it lands on its final state at once.
   Important declarations in a layer beat every normal declaration, layered or not. ─────────────────── */
@layer effects {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-delay: 0s !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-delay: 0s !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Version 2 (owner, 6 Oct 2026: "on most of the big photos on landing pages it should zoom – keep to the same style
   throughout"): the same slow push in and pull back as the home's first photo, on every page's big top photo and on
   the Enquire band photo. Not on the Dining concept's reflection hero (its ripple and waterline title are measured
   on the still photo). Off under reduced motion. */
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .hero:not(.hero--reflection) .hero__drift img,
    .enq__media img {
      transform-origin: 50% 50%;
      animation: v2-breathe 9s ease-in-out infinite alternate;
    }

    @keyframes v2-breathe {
      0% {
        scale: 1;
      }
      100% {
        scale: 1.25;
      }
    }
  }
}
/* print.css: pages print as plain documents (DESIGN.md §12.22, §5.3, §6.1). Owned by the lead.
   Header, dock, menus, footer navigation and every effect are hidden; content is always in its final state;
   link targets are printed after running-text links. Unlayered, so it wins over the global layers. */

@media print {
  @page {
    margin: 16mm 14mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
  }

  body * {
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .skip-link,
  .site-header,
  .dock,
  .gauge,
  .subnav,
  dialog,
  .site-footer nav,
  .stars,
  .night-sky,
  .filmstrip__controls,
  iframe,
  canvas,
  video,
  [data-print='hide'] {
    display: none !important;
  }

  /* Every reveal and scroll effect shows its final state */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
  }

  .grain::after,
  .pattern-fill::before,
  .wrap--pattern::before {
    display: none !important;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  figure,
  img,
  table,
  blockquote {
    break-inside: avoid;
  }

  img {
    max-inline-size: 100% !important;
  }

  /* Link targets after links in running text (not after buttons, chips or navigation) */
  main :where(p, li, dd, td, address) a[href^='http']::after,
  main :where(p, li, dd, td, address) a[href^='mailto:']::after,
  main :where(p, li, dd, td, address) a[href^='tel:']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }

  main :where(p, li, dd, td, address) a[href^='/']::after {
    content: ' (https://forumhomini.com' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }
}
/* ═══ Fonts (owner, 23 Oct 2026): from her font sets she chose "set 2: all Cormorant, clean reading": the headings, names
   and prices in Cormorant Garamond (upright, semi-bold), the white lines that were in the heading font ("comes alive through
   all five senses in an", "by Karina Marais", the names) in Cormorant Garamond italic, and all reading, buttons, menus and
   small gold capitals stay in Instrument Sans. Her hand-drawn logos are pictures and do not change. The font files are our
   own (public/fonts), so they load from the website itself. ═══ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html:root {
  font-variant-numeric: lining-nums;
  --face-display: 'Cormorant Garamond', Georgia, serif;
  --face-italic: 'Cormorant Garamond', Georgia, serif;
}

/* Version 3 (owner, 20 Oct 2026): "The websites background colour should be black no coloured background themes any
   more": every rule below that was for a list of dark pages now applies to every page. */
/* Version 2 owner changes that apply across many pages (7 Oct 2026). Loaded last, outside the cascade layers, so it
   wins over the base styles without !important. */

/* Owner (7 Oct 2026): "please make the rest of the pages in Roots black to go with it": every restaurant page (the
   Dine layer: Roots, Menus, High tea, Wine tastings, Dare2Dream) sits on the site's dark ground, its cream sections
   turned dark (the same set as the enquiry forms), cards a shade lighter, no cream bands */
/* then (8 Oct 2026, "Activities and news layout should be changend to suit the layout of the new website"): that page
   on the same dark ground */
html main {
  background-color: var(--night);
}


html main :is(.ground-paper, .ground-deep) {
  --paper: color-mix(in srgb, var(--naledi) 7%, var(--night));
  --paper-deep: color-mix(in srgb, var(--naledi) 10%, var(--night));
  --ink: var(--naledi);
  --ink-muted: var(--ash);
  --line: color-mix(in srgb, var(--naledi) 45%, transparent);
  --hairline: var(--line-dark);
  --soil: var(--ember);
  --rust: var(--ember);
  --fg: var(--naledi);
  --fg-muted: var(--ash);
  --heading: var(--naledi);
  --link: var(--ember);
  --focus: var(--ember);
  --indicator: var(--ember);
  --eyebrow: var(--ember);
  --border: var(--line-dark);
  --rule: var(--line-dark);
  --layer-tag: var(--ash);
  --caption: var(--ash);
  --mat: var(--paper-deep);
  --bg: var(--night);
  background-color: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}

html main .ground-deep {
  --bg: var(--paper-deep);
}

/* Owner (8 Oct 2026): "I always have to press the buttons … twice to get a reaction": taps on links, buttons and the
   home page's menus act at once (phones otherwise wait to see whether a second tap is a zoom) */
a,
button,
summary,
[role='button'] {
  touch-action: manipulation;
}

/* Owner (8 Oct 2026): "What do you think if we keep the Enquiries page just black no frills": the enquiry forms have
   no photos (image-plan: hero "type", no end strip), and their title band and tab row sit on the site's black, with no
   pattern, edge or breadcrumbs */
html[data-page^='/enquiries-directions/'] :is(.layer-band, .subnav),
html[data-page='/roots-menu/'] :is(.layer-band, .subnav),
html[data-page='/roots-drinks/'] :is(.layer-band, .subnav),
html[data-page='/dare2dream-menu/'] :is(.layer-band, .subnav) {
  background: var(--night) !important;
  background-image: none !important;
}

html[data-page^='/enquiries-directions/'] .layer-band::before,
html[data-page^='/enquiries-directions/'] .layer-band::after,
html[data-page^='/enquiries-directions/'] .layer-band__crumbs,
html[data-page^='/enquiries-directions/'] :is(.hero__strom, .hero__foot),
/* owner (19 Oct 2026): the Roots menu page (the table QR code) as plain as the enquiry pages: the menu, no frills */
html[data-page='/roots-menu/'] .layer-band::before,
html[data-page='/roots-drinks/'] .layer-band::before,
html[data-page='/roots-drinks/'] .layer-band::after,
html[data-page='/roots-drinks/'] .layer-band__crumbs,
html[data-page='/roots-drinks/'] :is(.hero__strom, .hero__foot),
html[data-page='/roots-menu/'] .layer-band::after,
html[data-page='/roots-menu/'] .layer-band__crumbs,
html[data-page='/roots-menu/'] :is(.hero__strom, .hero__foot),
/* owner (26 Oct 2026: "What is that funny line above the online version?"): the Dare2Dream menu as plain as the Roots menus */
html[data-page='/dare2dream-menu/'] .layer-band::before,
html[data-page='/dare2dream-menu/'] .layer-band::after,
html[data-page='/dare2dream-menu/'] .layer-band__crumbs,
html[data-page='/dare2dream-menu/'] :is(.hero__strom, .hero__foot) {
  display: none !important;
}

/* Owner (11 Oct 2026): "'About' the hotel should also be designed with the black layout of the website"; then "Virtual
   Tour is still in the old layout … What else is still in old format" → "Yes do that": the same for Virtual tour,
   Weddings, Conferences, Private functions, The team, Careers, Gallery, Contact & directions and the four policies. The band under
   the photo is the Candlelight band of Roots and Activities (charcoal, warm glow, a double gold rule with a diamond), no
   breadcrumbs or stripes; its title and section headings gold */
html .layer-band {
  margin-block-start: -1px;
  background:
    radial-gradient(ellipse 38% 120% at 50% 40%, rgb(255 170 80 / 0.16), rgb(255 150 60 / 0.05) 55%, transparent 75%),
    #141110 !important;
}

html :is(.layer-band__crumbs, .hero__edge) {
  display: none !important;
}

html .layer-band--pattern::before,
html .layer-band--pattern::after {
  display: none !important;
}

html .hero__foot {
  block-size: 40px !important;
  background: #141110 !important;
}

html .hero__foot::after {
  inset: 14px 8% auto !important;
  block-size: 6px;
  -webkit-mask: none !important;
  mask: none !important;
  background:
    linear-gradient(90deg, transparent, #c9953f 20%, #f3d792 50%, #c9953f 80%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, #c9953f 20%, #f3d792 50%, #c9953f 80%, transparent) 0 100% / 100% 1px no-repeat !important;
  box-shadow: none;
}

html .hero__foot::before {
  content: '';
  position: absolute;
  inset-block-start: 11px;
  inset-inline-start: calc(50% - 6px);
  inline-size: 12px;
  block-size: 12px;
  rotate: 45deg;
  background: linear-gradient(135deg, #fff3cf, #f3d792 45%, #c9953f);
  box-shadow: 0 0 0 4px #141110, 0 0 14px rgb(243 215 146 / 0.6);
  z-index: 1;
}

html :is(h1.layer-band__title, main h2) {
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html .subnav {
  background: #141110 !important;
}

html main .section {
  padding-block: var(--s-6) !important;
}

/* the rest of the old light parts on those pages: cream cards, light bands and old layer grounds turn dark */
html main :is(.ground-band, .ground-cave, .ground-veld, .ground-earth, [class*='ground-']) {
  --bg: var(--night);
  background-color: var(--night);
  color: var(--naledi);
}

html .layer-band__title {
  -webkit-text-fill-color: transparent;
}

/* Careers (owner: "be creative with that section to fit the rest of the website"): the form in a gold-edged card */
html[data-page='/more/careers/'] .enquiry__card {
  border: 1px solid rgb(201 149 63 / 0.55);
  border-radius: 18px;
  background: color-mix(in srgb, var(--naledi) 5%, var(--night)) !important;
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.9), 0 0 40px -10px rgb(243 215 146 / 0.18);
}

/* no cream backing behind the photos (it showed at their rounded corners), no light behind the opening photo, and no
   old contour "scribble" lines */
html main :is(.photo__frame, .hero__media) {
  background-color: transparent !important;
}

html .credits__contours {
  display: none !important;
}

/* Owner (12 Oct 2026): "replace all the orange buttons with this gold type of buttons"; "The gold colour buttons should
   not look like a flat colour … Use exactly as you used it under the restaurants": every button that took the site's
   orange takes exactly the graded gold of the Roots and Dare2Dream buttons (light to dark), with dark words */
:is(.enq__btn, .enquire-phone, .book:not(.book--quiet), .dock__enquire, .hz .hz__cta, .hs__cta, .menu__enquire, .hz__eyebrow) {
  background-image: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%) !important;
  color: #1d1405;
}

/* Owner (12 Oct 2026): "all the signs for facebook instagram threads etc is still in orange. what do you suggest": the
   social icons and their names in the site's gold, a thin gold ring round each; on hover or focus the ring fills with the
   graded gold of the buttons and the icon turns dark */
:is(.social__pill, .social__chip) {
  color: #f3d792;
  border-color: rgb(201 149 63 / 0.6) !important;
}

:is(.social__pill, .social__chip) .social__icon {
  color: #f3d792;
}

:is(.social__pill, .social__chip):is(:hover, :focus-visible) {
  background-image: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%) !important;
  color: #1d1405 !important;
}

:is(.social__pill, .social__chip):is(:hover, :focus-visible) .social__icon {
  color: #1d1405 !important;
}

/* Owner (17 Oct 2026): "this font is not easy to read … it is used throughout the whole website: Staying over? Dinner is
   included in your room rate, at Roots or Dare2Dream" → her choice A, "a clean upright font, the same one as the buttons
   and menu … do it throughout the website": every sentence-size line that was in the thin display italic is now in the
   upright text face (Instrument Sans), same size and colour, the page taglines and quotes included. The italic stays only
   on big headings. */
/* (19 Oct 2026, owner: "Dinner Photo Carousel … why did you change this to a new font … Change back": .pc__label is a
   heading, so it is only in rule 1 below, in the heading font) */
:is(.pc__price-note, .pc__lede, .pc__h-sub:not(.pc__h-by, .pc__h-name), .pc__story, .pc__front .pc__label, .sr__note, .th__glass-story,
  .inline-note em, .review__letter, .crossing__line, .contact__intro--voice, .hours__notes, .pr__note, .pr__cap, .wl__lede,
  .jb__story, .hs__sub, .sou__sub, .act__quote, .d2-swans__see, .d2-lounge figcaption, .d2-ev__hint, .d2-ev__note--foot,
  .d2-same-note, .d2-ev__song, .d2-intro__menu em, .d2-intro__lede em, .dc-review__fig figcaption, .activities__ask,
  .sh__lede, .layer-band__tagline, .quote__text, .quote__text p, .note__text em) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: var(--wt-body, 400) !important;
  letter-spacing: 0.01em;
}

/* ═══ Design rules for text (owner, 17 Oct 2026: "I like your suggestion of the 10 fonts and sizes"; source/DESIGN-RULES.md).
   Two fonts (heading font for headings, names and prices; clean font for all reading), four sizes, gold for what must
   stand out, white for what is read. Not touched: the first screen (.hh) and the home line (.hl), the top bar, buttons. ═══ */

/* 1 · Main heading: heading font, XL, graded gold */
:is(.hn__title, .sh__title, .d2-title, .display-line, .layer-band__title, .enquiry__done h2, .pc__label, .d2-nowrap,
  .d2-nowrap em, .terms__title) {
  font-family: var(--face-display) !important;
  font-style: normal !important;
  background-image: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

:is(.pc__label, .d2-nowrap, .d2-nowrap em) {
  font-weight: 600 !important;
}

/* 3 · Name: (owner, 23 Oct 2026, set 2) Cormorant Garamond italic, L, white */
:is(.jb__name, .pc__name, .songs__dish, .credits__name, .d2-ev__title, .venue__name, .capacity__caption, .hz__name,
  .enquiry__legend, .terms__h3, .sq__list summary, .qa__list summary, .d2-faq__list summary) {
  font-family: var(--face-text);
  font-style: normal !important;
  font-size: calc(var(--fs-l) * 1.08) !important;
  font-weight: 500;
  background: none !important;
  color: #f6efe4;
  -webkit-text-fill-color: currentColor;
}

/* 4 · One-liner: clean font, L, white */
:is(.careers__lede, .d2-intro__lede, .d2-lede, .dc-story__lede, .hotel-enq__call, .intro__first, .note__frame, .pf__lede,
  .section-intro__lede, .terms__lead, .vt-after__line, .we-intro__line, .wed-fact__text, .wed-plan__line,
  .enquiry__done p, .contact__intro, .d2-swans__h, .act__voice, .act__quote, .d2-ev__hint, .d2-ev__song, .hs__sub,
  .sou__sub, .dc-review__quote, .dc-review__quote p, .quote__text, .quote__text p, .layer-band__tagline, .sh__lede,
  .review__letter, .we-intro__call, .inline-note em, .dc-poster__words) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-size: var(--fs-l) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.005em !important;
  background: none !important;
  color: #f6efe4 !important;
  -webkit-text-fill-color: currentColor;
}

:is(.d2-lede, .note__frame, .wed-fact__text, .dc-poster__words) strong {
  font-family: inherit !important;
  color: inherit;
}

/* 5 · Reading text: clean font, M, white (sentences that were gold) */
:is(.activities__ask, .pc__story, .jb__story, .songs__note, .pc__price-note, .d2-same-note) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-size: var(--fs-m) !important;
  background: none !important;
  color: #f6efe4;
  -webkit-text-fill-color: currentColor;
}

/* 6 · Price: heading font, L, gold */
:is(.pc__price-line, .d2-faq__price, .sr__price, .d2-price, .rd__price, .rd__price-line, .rd__total) {
  font-family: var(--face-display) !important;
  font-style: normal !important;
  font-size: var(--fs-l) !important;
  font-weight: 600 !important;
  background: none !important;
  color: #f3d792;
  -webkit-text-fill-color: currentColor;
}

/* 7 · Label: clean font, S, capitals, spaced, gold */
:is(.capacity__head, .contact__coords-k, .review__title, .terms__sub, .terms__time-k, .times__k, .capacity__table th,
  .capacity__card dt, .cp__or, .venue__equip strong, .gallery__refs summary, .d2-eyebrow, .sr__per, .capacity__cards-title,
  .careers__label, .credits__role, .rd__rain-h, .pc__kicker, .songs__kicker, .hn__eyebrow,
  /* the short headings above films (owner, 17 Oct 2026: "Should by day and by night not be in gold everywhere") */
  .rd__caption, .wl__caption) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-size: var(--fs-s) !important;
  font-weight: var(--wt-label, 600) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none !important;
  color: #e6c27a;
  -webkit-text-fill-color: currentColor;
}

/* 8 · Small print: clean font, S, softer white */
:is(.pr__cap, .venue__cap, .dc-review__credit, .sh__caption, .hr__asat, .quote__who,
  .dc-review__fig figcaption, .songs__song) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-size: var(--fs-s) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: none;
  background: none;
  color: #cfc6b8;
  -webkit-text-fill-color: currentColor;
}

/* 10 · Links in text: clean font, gold, underlined (phone numbers and e-mail addresses that were in the heading font) */
:is(.hotel-enq__tel, .hotel-enq__mail, .wed-plan__tel, .we-intro__tel, .cp__gm-link, .enquiry__done a) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  color: #f3d792;
}

/* the line about what is included, inside a price block (Romantic Dinners, Forest Breakfast): a one-liner, not a price */
.rd__price .rd__menu-line {
  font-family: var(--face-text) !important;
  font-size: var(--fs-l) !important;
  font-weight: 400 !important;
  color: #f6efe4 !important;
}

/* Dare2Dream (owner, 17 Oct 2026: "Ebook & Audiobook should be in gold with purple online"): her own exception to the
   rule "never a sentence in gold"; "online" in the purple of "a Tale" */
.d2-lede.d2-ebook {
  color: #f3d792 !important;
}

.d2-lede.d2-ebook a {
  color: #b98cff;
  -webkit-text-fill-color: #b98cff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* (owner, 17 Oct 2026: "why do you have this size font: Included for guests staying over and this bigger: Swans form a
   lifelong bond … this looks too big"): the one-liner size is for short lines only (about 12 words); a longer sentence or
   paragraph is reading text, the third size, like "Included for guests staying over" */
:is(.d2-lede.d2-gold-pale, .hotel-enq__call, .review__letter, .note__frame, .we-intro__line, .rd__price .rd__menu-line,
  .intro__first, .section-intro__lede, .act__voice, .act__quote, .quote__text, .quote__text p, .pf__lede, .wed-fact__text,
  .wed-plan__line, .careers__lede, .dc-story__lede, .dc-review__quote, .dc-review__quote p) {
  font-size: var(--fs-m) !important;
  line-height: 1.6 !important;
}

/* Romantic Dinners (owner, 17 Oct 2026: "yes make the price bigger and first"): her own exception to "prices in the second
   size": the price for two first, in the heading size and graded gold; under it what it is made of, in the clean font,
   white, the reading size */
.rd__price .rd__big {
  font-family: var(--face-display) !important;
  font-size: var(--fs-xl) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  background-image: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%) !important;
  -webkit-background-clip: text;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.rd__price .rd__breakdown {
  margin-block-start: var(--s-2);
  font-family: var(--face-text) !important;
  font-size: var(--fs-m) !important;
  font-weight: 400 !important;
  color: #f6efe4 !important;
  -webkit-text-fill-color: currentColor;
}

.rd__price .rd__menu-line {
  font-size: var(--fs-m) !important;
}

/* (owner, 17 Oct 2026, the website review: "Do it in the order you prefer … Go"): the legal pages open straight on their
   text: no big photo at the top and no row of small old photos */
:is(html[data-page='/terms-and-conditions/'], html[data-page='/refund-cancellation-policy/'], html[data-page='/privacy-policy/'], html[data-page='/disclaimer/']) :is(.hero__media, .hero__strip) {
  display: none !important;
}

/* (17 Oct 2026, the website review) two more sentences that were in the heading font: the refund policy's clauses and the
   conference enquiry page's opening line are reading text (rule 5) */
:is(.refund__clause, .ce-intro__line) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-size: var(--fs-m) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #f6efe4;
}

/* (17 Oct 2026, the website review) the link to the Upgrades on the suites and the romantic dinners: a gold outlined pill */
.up-link,
.up-link:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block-start: var(--s-4);
  padding-inline: var(--s-5);
  border: 1.5px solid #e6c27a;
  border-radius: var(--r-pill);
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
}

.up-link:hover {
  background: rgb(243 215 146 / 0.14);
}

/* (owner, 25 Oct 2026, of "Make it unforgettable: see the indulgences": "Is there any way … to attract attention" → "Gold shine: a
   soft gold light sweeps across the button every few seconds, like light on jewellery"): a soft band of light crosses the button
   about every 5 seconds; still for visitors who ask for less motion */
.up-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.up-link::after {
  content: '';
  position: absolute;
  inset: -2px auto -2px 0;
  inline-size: 45%;
  z-index: -1;
  background: linear-gradient(100deg, rgb(255 243 207 / 0) 0%, rgb(255 243 207 / 0.55) 50%, rgb(255 243 207 / 0) 100%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .up-link::after {
    animation: up-shine 5s ease-in-out 1.5s infinite;
  }
}
@keyframes up-shine {
  0% { transform: translateX(-130%) skewX(-18deg); }
  28%, 100% { transform: translateX(330%) skewX(-18deg); }
}

.up-link:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}

.up-link-row {
  text-align: center;
}

/* (owner, 18 Oct 2026: "There is no gap before this") the same 40 px around the button as every other button */
.up-link-row {
  margin-block-start: var(--gap-item, 40px) !important;
}

.up-link-row .up-link {
  margin-block-start: 0;
}

/* ═══ Spacing rules for the whole site (owner, 18 Oct 2026: "I like it Honeymoon. apply this new rule of layout throughout
   the website"; source/DESIGN-RULES.md, Spacing):
     between sections         72 px on a phone, 112 px on a laptop (each section gives half above and half below)
     a heading to its content 24 px / 32 px
     around a button or card  40 px
   The first screen (.hh), the home line (.hl), the top photo (.hero), the gold rows and the floating bars keep their own
   spacing. Written with :where() so a part's own finer rule (the butterfly card, the joined dinner sections) still wins. ═══ */
:root {
  --gap-section: 72px;
  --gap-heading: 24px;
  --gap-item: 40px;
}

@media (min-width: 1025px) {
  :root {
    --gap-section: 112px;
    --gap-heading: 32px;
  }
}

:where(main) > :where(section, div):not(.hero, .hh, .hl, .bf, .up-toast, [class*='hh__'], .visually-hidden, .sou, .hs, .hr, .hz, .hn) {
  padding-block: calc(var(--gap-section) / 2) !important;
  margin-block: 0 !important;
}

/* the parts every suite shares (as tried on the Honeymoon suite) */
:where(main) .sh {
  padding-block-start: 0 !important;
}

:where(main) :is(.jb__h, .rg__h, .sq__h, .pr__head, .sh__title) {
  margin-block-end: var(--gap-heading) !important;
}

:where(main) .sh__grid {
  row-gap: var(--gap-item) !important;
}

:where(main) .sh__film {
  margin-block-start: 8px !important;
}

:where(main) .jb__stage {
  margin-block-start: -17px;
}

@media (min-width: 1025px) {
  :where(main) .jb__stage {
    margin-block-start: -42px !important;
  }
}

/* the sections whose older spacing was stronger than the rule above: brought into line */
:where(main) > .about-intro.about-intro,
:where(main) > .about-art.about-art,
:where(main) > .about-arch.about-arch,
:where(main) > .about-line.about-line,
:where(main) > .about-end.about-end,
:where(main) > .split.split,
:where(main) > .about-video.about-video,
:where(main) > .pc.pc,
:where(main) > .d2-intro.d2-intro,
:where(main) > .d2-swans.d2-swans,
:where(main) > .d2-faq.d2-faq,
:where(main) > .songs.songs,
:where(main) > .wed-story.wed-story,
:where(main) > .wed-hang-wrap.wed-hang-wrap,
:where(main) > .wed-plan.wed-plan,
:where(main) > .conf-venues.conf-venues,
:where(main) > .conf-book.conf-book,
:where(main) > .pf.pf,
:where(main) > .act-lists.act-lists,
:where(main) > .activities.activities,
:where(main) > .quote.quote,
:where(main) > .cp.cp,
:where(main) > .doc.doc,
:where(main) > .careers.careers,
:where(main) > .discover-social.discover-social,
:where(main) > .ic-intro.ic-intro,
:where(main) > .up-intro.up-intro {
  padding-block: calc(var(--gap-section) / 2) !important;
  margin-block: 0 !important;
}

/* sections with a photo across their whole box (the Enquire band, Roots' produce): the space sits outside the photo */
:where(main) > .enq.enq,
:where(main) > .dc-produce.dc-produce {
  margin-block: calc(var(--gap-section) / 2) !important;
}

/* the card grids of Plan your visit and Gift vouchers: the section gives the space, not the grid as well */
.ic-grid {
  padding-block: 0 !important;
}

/* the first and last thing inside each section adds no space of its own at the section's edge (only the standard spacing
   counts); margins only, three levels deep (the section, its container, its wrapper) */
:where(main) > :where(section, div):not(.hero, .hh, .hl, .bf, .sou, .hs, .hr, .hz, .hn) > :first-child,
:where(main) > :where(section, div):not(.hero, .hh, .hl, .bf, .sou, .hs, .hr, .hz, .hn) > * > :first-child,
:where(main) > :where(section, div):not(.hero, .hh, .hl, .bf, .sou, .hs, .hr, .hz, .hn) > * > * > :first-child {
  margin-block-start: 0 !important;
}

:where(main) > :where(section, div):not(.hero, .hh, .hl, .bf, .sou, .hs, .hr, .hz, .hn) > :last-child,
:where(main) > :where(section, div):not(.hero, .hh, .hl, .bf, .sou, .hs, .hr, .hz, .hn) > * > :last-child,
:where(main) > :where(section, div):not(.hero, .hh, .hl, .bf, .sou, .hs, .hr, .hz, .hn) > * > * > :last-child {
  margin-block-end: 0 !important;
}

/* a photo river inside another section (About the hotel) adds no space of its own: the section gives it */
:where(main) > * :where(.pr) {
  padding-block: 0 !important;
}

:where(main) > * .section-intro + :where(.pr),
:where(main) > * .section-intro ~ * :where(.pr) {
  margin-block-start: var(--gap-heading) !important;
}

/* owner (19 Oct 2026, her notes, About the hotel: "River flow headings not done right"): a heading in its own box above a
   photo river (Architecture, The Lounge) gets the heading gap, and a button under a river (Activities) the button gap;
   they were touching the photos */
:where(main) > * > .wrap:has(> .section-intro:last-child) + .pr.pr {
  margin-block-start: var(--gap-heading) !important;
}

/* owner (19 Oct 2026): "there is not gap between the big photo and the riverflow photos beneath": The Sum of Us and the art
   river below it get the item gap (they touched) */
:where(main) > * > .wrap:has(> .about-art__sum:last-child) + .pr.pr {
  margin-block-start: var(--gap-item) !important;
}

:where(main) > * > .pr ~ .wrap > .about-art__more.about-art__more {
  margin-block-start: var(--gap-item) !important;
}

/* (18 Oct 2026, the website review) the restaurant forms: WhatsApp first, the form second */
.wa-quick {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-block: var(--gap-item);
  padding: var(--s-5);
  border: 1px solid rgb(230 194 122 / 0.45);
  border-radius: 22px;
  text-align: center;
}

.wa-quick__line {
  font-family: var(--face-text);
  font-size: var(--fs-m);
  color: #f6efe4;
}

.wa-quick__btn,
.wa-quick__btn:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--s-6);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
  color: #1d1405;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
}

.wa-quick__btn:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}

.wa-quick__or {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  color: #cfc6b8;
}

/* (owner, 18 Oct 2026, the website review, point 8: "Take out all these old photos"): the old website's header photos,
   shown as small rows (the filmstrip: under or beside the top photo, and at the foot of some pages), are gone everywhere;
   new photos come from the shot list (source/SITE-PHOTO-LIST.md) */
main :is(.filmstrip, .hero__swap, .hero__strip, .end-strip) {
  display: none;
}

/* (owner, 18 Oct 2026: "the name of each option/spot should have the heading on the left handside of the picture because
   the picture is not across the screen. Move the picture to the right with the beautiful heading in the same style next
   to it"): on a laptop the five spots and Forest Breakfast show their three-line heading on the left and the whole photo
   on the right, below the top bar; on a phone (too narrow for both) the photo stays whole on top with the heading under it */
@media (min-width: 1025px) {
  html .hero.hero--whole {
    display: grid;
    grid-template-columns: minmax(22rem, 1fr) auto;
    align-items: center;
  }

  html .hero.hero--whole .hero__media {
    grid-column: 2;
    grid-row: 1;
    inline-size: min(64vw, calc((100svh - var(--header-h) - 24px) * var(--ratio)));
    margin-inline: 0 var(--margin);
  }

  html .hero.hero--whole .hero__band {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    background: none !important;
  }

  html .hero.hero--whole .hero__band::before,
  html .hero.hero--whole .hero__band::after {
    display: none;
  }

  html .hero.hero--whole .hero__band .layer-band__wrap {
    inline-size: 100%;
    padding-inline: var(--margin) var(--s-6);
  }

  html .hero.hero--whole .hero__foot {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* owner (19 Oct 2026), the lines on the landing page's photos ("Where the veld grows on your roof", "Every layer, a stage
   of human evolution"): from four samples "I choose 3 but a short gold line before the words. I like the size of this
   font": the heading font, larger, white, with a short graded-gold line before the words (her exception to style 4) */
html body main p.hs__sub.hs__sub,
html body main p.sou__sub.sou__sub {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--face-text);
  font-style: normal !important;
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 1.9rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #f6efe4 !important;
}

html body main p.hs__sub.hs__sub::before,
html body main p.sou__sub.sou__sub::before {
  content: '';
  flex: none;
  inline-size: 40px;
  block-size: 1.5px;
  margin-block-start: 0.62em;
  background: linear-gradient(90deg, #c9953f, #f3d792);
}

/* Version 3 (owner, 20 Oct 2026): "The websites background colour should be black no coloured background themes any more":
   the coloured title bands and grounds of every layer are black */
html {
  --layer-band: var(--night);
}

body,
.site-header__ground,
html:not([data-page='/dare2dream/']) main :is(.layer-band, .ground-band),
main :is(.ground-veld, .ground-earth, .ground-cave, .ground-chert, .ground-d2d, .ground-paper, .ground-deep) {
  background-color: var(--night) !important;
}

/* Version 3 (owner, 20 Oct 2026): "the heading of each section on the landing page should have a small black gap and the
   heading should sit halve on the black and halve on the photo … it should rather fade into one another … keep things
   the same throughout": every big photo on the landing page starts under the same black band (--seam), fades out of it
   and fades back into black at its foot; its heading sits on the line, half on the black, half on the photo */
html[data-page='/'] {
  /* owner (20 Oct 2026): "Not impressed with the narrow photos you cant see the whole concept for each one": a thinner
     band for the heading, so each whole photo is as big as the screen allows */
  /* owner (20 Oct 2026): "move it up and that it still looks like it is on the photo … EAT should also move up higher":
     every landing heading a little higher, just under the top bar (was + clamp(1.5rem, 3.5vw, 3rem)) */
  --seam: calc(var(--header-h) + clamp(0.75rem, 2vw, 1.75rem));
  --seam-size: clamp(3rem, 8vw, 6.5rem);
  /* owner (20 Oct 2026): "I still want you to move up all the headings on the pictures/videos of sleep eat events, The sum of us, Wake up to the veld as these headings are covering to see the photos": every landing photo starts under its heading, so the heading
     sits on the night above the photo and never covers it */
  /* owner (20 Oct 2026): "Why cant it be as big as the video walking down … everything must be the same": every photo
     fills the whole screen again, as the walking video does; its top fades into night under the heading, as the video's does */
  --photo-top: 0px;
}

/* laptops: the heading stays fully below the top bar (higher would tuck it under the bar) */
@media (min-width: 641px) {
  html[data-page='/'] {
    --seam: calc(var(--header-h) + clamp(1.5rem, 3.5vw, 3rem));
  }
}

.seam-band {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  /* owner (20 Oct 2026): "the videos and photos should touch the side of the screen … like the video walking down.
     Rather keep the big heading on the photo/video": no solid black band any more, only a soft fall of night from the
     section above, so the photo fills the screen and the heading sits on it */
  /* owner (20 Oct 2026): "the fading starts too late … The black fading spaces should every where be the same size": one
     deeper fade, the same on every landing photo, so each heading reads clearly while it still sits on its photo */
  block-size: calc(var(--seam) + clamp(90px, 16svh, 170px));
  background: linear-gradient(to bottom, var(--night) 0%, color-mix(in srgb, var(--night) 82%, transparent) 30%, color-mix(in srgb, var(--night) 40%, transparent) 65%, transparent);
  pointer-events: none;
}

.seam-foot {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  block-size: 38%;
  background: linear-gradient(to top, var(--night) 0%, color-mix(in srgb, var(--night) 80%, transparent) 25%, transparent);
  pointer-events: none;
}

.seam-title {
  position: absolute;
  z-index: 4;
  inset-block-start: var(--seam);
  inset-inline-start: max(var(--margin), calc((100% - var(--content-max)) / 2));
  margin: 0;
  /* every heading starts on the same top line (a two-line heading, "Wake up to the veld" on phones, continues below) */
  translate: 0 calc(var(--seam-size) * -0.5);
  font-family: var(--face-display);
  font-size: var(--seam-size);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.015em;
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.75));
  pointer-events: none;
}

.seam-under {
  position: absolute;
  z-index: 4;
  inset-block-start: calc(var(--seam) + var(--seam-size) * 0.62);
  inset-inline-start: max(var(--margin), calc((100% - var(--content-max)) / 2));
}

/* the entrance film fades into the black before Sleep */
html[data-page='/'] .hh__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  block-size: 30%;
  background: linear-gradient(to top, var(--night), transparent);
  pointer-events: none;
}


/* owner (20 Oct 2026): "All those photos/videos on landing page should use the same layout and style": The Sum of Us and
   Wake up to the veld now hold still while the visitor scrolls, with the heading at the top, exactly like Sleep (one photo,
   1.6 screens of scrolling), instead of passing by like an ordinary picture */
html[data-page='/'] :is(.sou, .hs) {
  min-block-size: 160svh;
}

html[data-page='/'] :is(.sou__frame, .hs__frame) {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  min-block-size: 100svh !important;
}


/* owner (20 Oct 2026): "THE SUM OF US hedaing should still move up I dont want it on the Artwork. WAKE UP TO THE VELD should
   also move up higher": these two photos start just under their heading (the soft fade still runs into them), so the
   heading sits on the night at the top of its photo, clear of the sculpture and the veld */
html[data-page='/'] body :is(.sou__frame .sou__art, .hs__frame .hs__art) {
  inset-block-start: calc(var(--seam) + var(--seam-size) * 0.6) !important;
  block-size: auto !important;
  inset-block-end: 0 !important;
}

/* phones: "Wake up to the veld" takes two lines, so its photo starts under the second line */
@media (max-width: 640px) {
  html[data-page='/'] body .hs__frame .hs__art {
    inset-block-start: calc(var(--seam) + var(--seam-size) * 2) !important;
  }
}

/* owner (20 Oct 2026): "I also do not like that EAT is not moved up higher on the photo" (and Events, "There is still a sharp line
for the events photo"): the Roots and Dare2Dream photos
   start just under the word Eat (the soft fade still runs into them), so Eat sits clear on the night above the restaurant */
html[data-page='/'] body :is(#eat, #events) .jr__shot {
  inset-block-start: calc(var(--seam) + var(--seam-size) * 0.6) !important;
}

/* owner (20 Oct 2026): "I do not like it if you have a sharp line on the last two photos to place the headings above. Is
   should blend like you had it previously - They all flow into one another … Everything is going to be black background":
   the photos that start under their heading (Eat, The Sum of Us, the veld) melt out of the black at their top, no edge */
html[data-page='/'] body :is(.sou__frame .sou__art, .hs__frame .hs__art, #eat .jr__shot, #events .jr__shot) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.35) 8svh, rgb(0 0 0 / 0.8) 16svh, #000 26svh);
  mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.35) 8svh, rgb(0 0 0 / 0.8) 16svh, #000 26svh);
}

/* owner (20 Oct 2026): "The DARE2 DREAM photo is not showing the whole photo. Fix that": the whole photo, never cut, as large as
   the space under Eat allows (laptop: full height, centred; phone: full width), its edges melting into the black */
html[data-page='/'] body #eat .jr__shot--b .jr__art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}

/* sized from the screen (Safari-safe): the whole 4:3 photo, as large as fits under Eat, centred */
html[data-page='/'] body #eat .jr__shot--b .jr__art img {
  --room: calc(100svh - var(--seam) - var(--seam-size) * 0.6);
  position: absolute !important;
  inset-block-start: 50% !important;
  inset-inline-start: 50% !important;
  inline-size: min(100vw, calc(var(--room) * 4 / 3)) !important;
  block-size: auto !important;
  aspect-ratio: 4 / 3;
  max-inline-size: none !important;
  max-block-size: none !important;
  object-fit: cover !important;
  translate: -50% -50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 85%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 85%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}


/* owner (20 Oct 2026): "the Pink DARE2DREAM on photo is not bright and clear": no dark fade over the sign any more: the
   heading's night band ends just under Eat, the photo itself no longer fades in at its top (it starts under Eat already),
   its own soft top edge is thin, and the colours a touch clearer */
html[data-page='/'] body #eat .seam-band {
  block-size: calc(var(--seam) + var(--seam-size) * 0.6) !important;
}

html[data-page='/'] body #eat .jr__shot--b {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html[data-page='/'] body #eat .jr__shot--b .jr__art img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 85%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 85%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  filter: saturate(1.12) contrast(1.06);
}

/* owner (20 Oct 2026): "I think we should do away with the round corners of the photos … We do not have any round corners on
   the landing page photos or videos. Change it every where": every photo and film has square corners, as on the landing
   page. (Kept round on purpose: the gold frames of the turning carousels, the round magnifier of the treasure hunt, buttons.) */
:is(
  .hub__frame, .pr__shot, .rg__fig img, .ps__media video, .ps__media img, .pc__photo, .pc__big, .wl__video, .bt__fig img,
  .d2-swans__photo img, main .photo__frame, .d2-dome__photo img, .d2-ev__media--wide img, .d2-ev__video, .about-art__sum img,
  .act-lists img, .act img, .wed26__space img, .gv-pic, .dc-poster__stage, .dc-poster__frame, .dc-poster__shade,
  .dc-review__thumb img, .dc-review__pages img, .dc-sign img, .sh__video, .sh__photo, .up__fig img, .rd__video,
  .vx, .vx video, .photo__img, .d2-swans__cutout
) {
  border-radius: 0 !important;
}

/* (22 Oct 2026, owner: "look at version 2 … this is not the way we had it": Dare2Dream keeps its Version 2 top, the glowing
   band and the turquoise neon line under her name, so it is left out of the next rules and of the black ground above) */
/* owner (21 Oct 2026): "The whole website should be in this new style" (as the landing page): the top of every inner page
   is the photo melting into plain black, then the title and the page, with no charcoal band, no gold rule-and-diamond strip
   and no big empty space under the title */
html:not([data-page='/dare2dream/']) .layer-band:not(.layer-band--slim) {
  background: var(--night) !important;
}

html:not([data-page='/dare2dream/']) .layer-band--slim {
  background: transparent !important;
}

html:not([data-page='/dare2dream/']) .hero__foot {
  display: none !important;
}

html:not([data-page='/dare2dream/']) .hero__media :is(.hero__art, .hero__photo) {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent) !important;
  mask-image: linear-gradient(to bottom, #000 80%, transparent) !important;
}

html:not([data-page='/dare2dream/']) .layer-band:not(.layer-band--slim) {
  padding-block: var(--gap-heading) 0 !important;
}

html .layer-band__title {
  margin-block-end: 0 !important;
}

/* the first section after the title band starts at the heading-to-content space, not a full section gap */
html .hero + :is(section, div),
html .layer-band + :is(section, div) {
  padding-block-start: var(--gap-heading) !important;
}

/* owner (21 Oct 2026): "some of your gold buttons have this odd white line at the bottom … BOOK A TABLE AT ROOTS": a gold pill
   with a see-through border repeated its light top colour in the border along the bottom; the gold now runs edge to edge */
:is(a, button, summary, label) {
  background-origin: border-box !important;
}

/* owner (21 Oct 2026): "No border line squares any where in the website … Square corners … The whole website should be in this
   new style": no outlined boxes or cards anywhere (the content stands on the black, as on the landing page), and square
   corners. Kept on purpose: the outlined and gold buttons (her choice, 20 Oct), form fields (so they can be seen), the
   carousels' gold frames, the menus' day/night switch and the round record of the Dare2Dream songs. */
:is(.bt__player, .cp__dir, .map__frame, .note, .enquiry__card, .review, .terms, .wa-quick, .note__frame, .pc__card, .up-pkg__card, .up__card,
  .ic-card, .cf26__card, .features-block, .badge__plinth, .sd__grid, .cd, .rd__rain, .rm__paper, .dm__paper, .bank,
  .up__card, .photo, .photo__frame, .songs__row) {
  border-color: transparent !important;
  border-radius: 0 !important;
}

:is(.photo, .photo--mat, .map__frame, .note__frame, .features-block, .features-block--card, .pc__card, .note, .enquiry__card,
  .review, .terms, .bank, .badge__plinth, .cp__dir, .rm__paper, .dm__paper, .venue__pdf) {
  box-shadow: none;
  outline: 0 !important;
}

/* (21 Oct 2026, the same new style) with their outlines gone, cards are no longer boxes: no tinted box behind them and no
   inner padding that read as empty black between them */
:is(.up__card, .up-pkg__card, .ic-card, .pc__card, .cf26__card, .enquiry__card, .review, .terms, .wa-quick, .bank, .bt__player, .cp__dir) {
  background: none !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

/* the Enquire photo band melts out of the night at its top (it began with a hard edge) */
.enq__media {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%);
  mask-image: linear-gradient(to bottom, transparent, #000 10%);
}

/* the links to the other policies sit one heading-space under the text, not a big gap */
:is(.related, nav.related) {
  margin-block-start: var(--gap-item) !important;
  padding-block-start: 0;
}

/* (21 Oct 2026, "finish the remaining small gaps") the policy pages: the three spaces only. Clauses sit one button-space
   apart, the text starts a heading-space under the title, and the links to the other policies one section-space below */
html :is(.clause) {
  padding-block: calc(var(--gap-item) / 2) !important;
}

html .clause:first-child {
  padding-block-start: 0 !important;
}

html :is(.doc) {
  padding-block-start: var(--gap-heading) !important;
}

html .doc__related {
  margin-block-start: 0 !important;
}

/* the empty strip under the page titles (its photo strip is no longer shown) adds no space */
html .hero__ext {
  padding-block: 0 !important;
  min-block-size: 0;
}

/* (Roots keeps its own top: the hand-drawn title on the waterline with its reflection, owner 21 Oct 2026: "What's going on
   here?" when it was blown up) */
/* owner (21 Oct 2026): "I am taking landscape videos and photos to fill the whole screen like the landing page. Change
   everywhere that it fills the screen" (source/DESIGN-RULES.md, Full screen, like the landing page): on a laptop the top photo
   of every page fills the screen under the top bar, edge to edge; the page title sits on its soft dark top, as on the landing
   page (this replaces the 18 Oct layout of the title beside a smaller photo). Phones: the photo across the full width. */
/* owner (22 Oct 2026, the Dare2Dream page: "Just restore that the way it was always, because there was no straight line …
   This is not the way we had it"): the Dare2Dream page keeps its own top: the whole photo with soft dark edges, "by Karina
   Marais" on it and "Dinner with a Story" at its foot, as until 21 Oct (the full-screen rule below leaves it out) */
@media (min-width: 641px) {
  html:not([data-page='/dare2dream/']) .hero.hero--whole:not(.hero--reflection) {
    display: block !important;
  }

  html:not([data-page='/dare2dream/']) .hero:not(.hero--reflection) {
    position: relative;
  }

  html:not([data-page='/dare2dream/']) body main .hero.hero:not(.hero--reflection) .hero__media.hero__media {
    position: relative !important;
    inline-size: 100vw !important;
    max-inline-size: none !important;
    margin-inline: calc(50% - 50vw) !important;
    block-size: calc(100svh - var(--header-h, 80px)) !important;
    min-block-size: 0 !important;
    aspect-ratio: auto !important;
  }

  html:not([data-page='/dare2dream/']) body main .hero.hero:not(.hero--reflection) .hero__media.hero__media :is(.hero__frame, .hero__drift, .hero__art, .photo, .photo__frame, picture) {
    inline-size: 100% !important;
    block-size: 100% !important;
    max-block-size: none !important;
    aspect-ratio: auto !important;
  }

  html:not([data-page='/dare2dream/']) body main .hero.hero:not(.hero--reflection) .hero__media.hero__media :is(img, video) {
    inline-size: 100% !important;
    block-size: 100% !important;
    max-inline-size: none !important;
    max-block-size: none !important;
    object-fit: cover !important;
  }

  /* a soft dark top on the photo for the title */
  html:not([data-page='/dare2dream/']) .hero:not(.hero--reflection) .hero__media::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    block-size: 38%;
    background: linear-gradient(to bottom, rgb(14 7 5 / 0.75), rgb(14 7 5 / 0.35) 55%, transparent);
    pointer-events: none;
  }

  /* the title (and its line) on the photo's soft top */
  html:not([data-page='/dare2dream/']) .hero.hero--whole:not(.hero--reflection) .hero__band,
  html:not([data-page='/dare2dream/']) .hero:not(.hero--reflection) .layer-band--slim {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 3;
    padding-block: var(--gap-heading) 0 !important;
    background: none !important;
  }
}

/* owner (22 Oct 2026: "look at this line over text. Can you please check everywhere on the website for these type of errors"):
   the bank slip's perforated top edge sat in the slip's padding; with the boxes gone (21 Oct) it lay over "BANK TRANSFERS /
   EFT". The slip is no longer a box, so its edge goes too */
.bank::before {
  display: none;
}

/* (22 Oct 2026, the same check: "lines over text … everywhere") the enquiry form's coloured top band and the letter
   preview's thin side line were edges of the old boxes; without the boxes they lay over "Your visit" and "Dear …" */
.enquiry__card::before,
.review::before {
  display: none;
}

/* owner (22 Oct 2026, the Dare2Dream page: "look at version 2 … this is not the way we had it"): the Version 2 top of
   Dare2Dream, stronger than the site-wide band rules above: the band under the photo glows from the photo's night into the
   violet of the forest lights and the dome's turquoise, and the turquoise neon line runs under it (as 8 Oct 2026) */
html[data-page='/dare2dream/'] main .layer-band.layer-band {
  background:
    linear-gradient(to bottom, #0b0608 0%, rgb(11 6 8 / 0) 50%),
    radial-gradient(ellipse 55% 110% at 30% 70%, rgb(124 58 237 / 0.42), transparent 70%),
    radial-gradient(ellipse 55% 110% at 72% 75%, rgb(57 213 197 / 0.3), transparent 70%),
    #0b0608 !important;
}

html[data-page='/dare2dream/'] main .hero__foot.hero__foot {
  display: block !important;
  block-size: 6px !important;
  background-color: #0b0608 !important;
}

html[data-page='/dare2dream/'] main .hero__foot.hero__foot::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: auto 0 0 !important;
  block-size: 3px !important;
  -webkit-mask: none !important;
  mask: none !important;
  background: #39d5c5 !important;
  box-shadow: 0 0 12px 3px rgb(57 213 197 / 0.85), 0 0 30px 6px rgb(57 213 197 / 0.4) !important;
}

html[data-page='/dare2dream/'] main .hero__foot.hero__foot::before {
  display: none !important;
}

/* (22 Oct 2026, same request) on a laptop the title-beside-the-photo layout of the romantic dinner pages does not apply to
   Dare2Dream (as in Version 2): its photo across the top, the glowing band with "by Karina Marais" under it, then the line */
@media (min-width: 1025px) {
  html[data-page='/dare2dream/'] .hero.hero--whole .hero__media {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    inline-size: auto !important;
    block-size: calc(100svh - var(--header-h, 80px) - 24px) !important;
    margin-inline: 0 !important;
    justify-self: center !important;
  }

  html[data-page='/dare2dream/'] .hero.hero--whole .hero__band {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
  }

  html[data-page='/dare2dream/'] .hero.hero--whole .hero__foot {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* owner (23 Oct 2026: "The private function is smaller than celebrate with us. I think your font size, the first one must be
   bigger than the second one … if, like the others as well, we've got to change. The first one must be the bigger font"):
   on every page the page's title is one clear step bigger than the headings under it (they were the same size) */
html body main :is(h1.layer-band__title, h1.ps__title):not(.visually-hidden) {
  font-size: calc(var(--fs-xl) * 1.3) !important;
  line-height: 1.05 !important;
}

/* (23 Oct 2026, set 2) "Staying over? Dinner is included in your room rate …" is one of the white lines: Cormorant italic */
html body main p.pc__price-note.pc__price-note {
  font-family: var(--face-text);
  font-style: normal !important;
  font-weight: 500;
  font-size: calc(var(--fs-l) * 1.08) !important;
  color: #f6efe4 !important;
}

/* stone-cursor.css · Version 5: Hercules's hand-axe cursor (Version 4 eureka.css), the label pill in our gold */
/* ── The hand-axe cursor ─────────────────────────────────────────────────────────────────────────────────
   Without script: the axe as a plain cursor image on every fine pointer. With script (html.e-cur): the native
   cursor hides and the animated axe (.e-cursor) takes over; text fields keep their caret. */
@media (pointer: fine) {
  html,
  html body {
    cursor: url('/Resources/Images/eureka/hand-axe-48.png') 3 1, auto;
  }
  html :is(a, button, summary, label, select, [role='button'], [data-cursor]) {
    cursor: url('/Resources/Images/eureka/hand-axe-48.png') 3 1, pointer;
  }
  /* (owner, 2 Nov 2026: "I don't want to see a cursor and a stone tool"): the stone is the computer's own cursor now, so a second one cannot show;
     the moving axe of Version 4 stays hidden (stone-cursor.ts keeps its flakes and its label); only while the stone breaks is there no cursor */
  html.e-cur,
  html.e-cur body,
  html.e-cur *,
  html.e-cur *::before,
  html.e-cur *::after {
    cursor: url('/Resources/Images/eureka/hand-axe-48.png') 3 1, auto !important;
    cursor: -webkit-image-set(url('/Resources/Images/eureka/hand-axe-48.png') 1x, url('/Resources/Images/eureka/hand-axe-96.png') 2x) 3 1, auto !important;
  }
  html.e-cur.e-break,
  html.e-cur.e-break body,
  html.e-cur.e-break *,
  html.e-cur.e-break *::before,
  html.e-cur.e-break *::after {
    cursor: none !important;
  }
  html.e-cur :is(input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button'], [type='range']), textarea, [contenteditable='true']) {
    cursor: text !important;
  }

  /* (owner, 25 Oct 2026: "Sometimes see the tool as the cursor, but also showing the arrow. I don't want to see the arrow
     anywhere"): no arrow over a film's own play bar either */
  html.e-cur video::-webkit-media-controls,
  html.e-cur video::-webkit-media-controls-enclosure,
  html.e-cur video::-webkit-media-controls-panel,
  html.e-cur video::-webkit-media-controls-play-button,
  html.e-cur video::-webkit-media-controls-timeline {
    cursor: url('/Resources/Images/eureka/hand-axe-48.png') 3 1, auto !important;
  }

  /* an open photo viewer, menu or enquiry sheet (a dialog above everything): the stone axe as the pointer there too, its dark
     background included (that background never took the page's pointer, so the arrow showed) */
  html.e-cur dialog,
  html.e-cur dialog *,
  html.e-cur dialog::backdrop,
  dialog,
  dialog *,
  dialog::backdrop {
    cursor: url('/Resources/Images/eureka/hand-axe-48.png') 3 1, auto !important;
  }

  html.e-cur dialog :is(input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button'], [type='range']), textarea) {
    cursor: text !important;
  }
}

.e-cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10001;
  pointer-events: none;
  will-change: transform;
  contain: layout style;
}
.e-cursor[hidden] {
  display: block;
  opacity: 0;
}
.e-cursor__axe {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  max-width: none;
  height: auto;
  transform-origin: 3px 2px;
  /* (owner, 31 Oct 2026: "It's staggering and it's not moving nicely on the laptop"): the axe on its own layer, its shadows drawn once and not again every frame */
  will-change: transform;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.95)) drop-shadow(0 6px 10px rgb(0 0 0 / 0.55));
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s linear;
  user-select: none;
}
.e-cursor.is-hover .e-cursor__axe {
  width: 42px;
}
.e-cursor.is-text .e-cursor__axe {
  opacity: 0;
}
.e-cursor.is-out {
  opacity: 0;
}
.e-cursor__label {
  position: absolute;
  left: 30px;
  top: 34px;
  padding: 7px 12px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
  color: #1d1405;
  font: 600 12px/1 var(--face-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6) translateY(-6px);
  transform-origin: 0 0;
  transition: opacity 0.25s linear, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.e-cursor.has-label .e-cursor__label {
  opacity: 1;
  transform: none;
}
.e-flakes {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

/* smooth-scroll.css · Version 5: what Lenis needs (Hercules's Version 4 eureka.css); the browser's own smooth jump is off
   while Lenis glides, so the two never fight */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}
/* The calm navigation (owner, 26 Oct 2026: "On some screens on the iPhone, it's just buttons all over the place … You can't even
   see the picture anymore … Come up with a solution" → "Yes, build the calm navigation in the preview (one top bar, one bottom
   bar on the phone, none at the bottom on the laptop, carousels back to full size)").
     laptop:          one top bar (Sleep · Eat · Events as words, Enquire, Book a suite, ☰); nothing floating at the bottom
     phone / tablet:  one slim top bar (back, logo, ☰; it steps aside while scrolling down) and one bottom bar
                      (Sleep · Eat · Events · Enquire; Call and Book a suite open from Enquire)
     every screen:    the rows of suite, dinner and event names stay where they stand on the page (they no longer float),
                      no extra buttons under the carousels, slimmer buttons.
   One file, loaded last, so the whole change can be taken back in one step (backups in copy-edit/backup-2026-10-26-calm-nav). */

/* the floating Sleep · Eat · Events bar: gone everywhere (the landing page's too) */
html .hc {
  display: none;
}

/* the top bar: a little slimmer */
:root {
  --header-h: 58px;
  --header-pill: 46px;
}

@media (min-width: 1025px) {
  :root {
    --header-h: 70px;
    --header-pill: 52px;
  }
}

/* phones and tablets: search lives in the ☰ menu, the top bar keeps back, logo and ☰ */
/* (owner, 26 Oct 2026: "Where is our search bar? … put it back immediately on both iPhone and the laptop"): the search button
   shows on every screen (it was hidden on phones) */

/* the one bottom bar on phones and tablets: slim */
@media (max-width: 959px) {
  :root {
    --dock-h: 48px;
  }

  /* (owner, 26 Oct 2026: "you've got to have the narrow, streamlined, trimmed bars"): 38 px in all */
  html .dock {
    block-size: 38px;
    padding: 4px !important;
  }

  /* (owner, 26 Oct 2026: "Why would inquire at the bottom be so big? The sleep, eat, events, it must now all be the same size"):
     the four cells one slim size, one letter size; Enquire keeps its gold fill only */
  html .dock .dock__cell {
    block-size: 30px;
  }

  /* (6 Nov 2026) letter-spacing was 0.08em; always overridden by css/site.css, so its value is here now */

  html .dock .dock__label,
  html .dock .dock__ch .dock__label {
    font-size: 0.74rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  html body {
    padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom)) !important;
  }
}

/* tablets: the bar is narrower than the screen, centred */
@media (min-width: 641px) and (max-width: 959px) {
  html .dock {
    inset-inline: auto;
    left: 50%;
    translate: -50% 0;
    inline-size: min(560px, calc(100vw - 32px));
  }
}

html nav.jb[data-jumpbar] {
  position: static;
  opacity: 1;
  visibility: visible;
}

html nav.jb[data-jumpbar] ul,
html nav.jb[data-jumpbar] a {
  pointer-events: auto;
}

html main:has(> [data-jumpbar]) > div:has(> .jb.jb--page) {
  padding-block-start: 0 !important;
}

/* under each carousel only the name, the price and a small More: the extra buttons go (Enquire and the menu have them) */
html section.jb :is(div, p):has(> a[data-press]) {
  display: none;
}

html .jb .jb__link {
  min-block-size: 30px;
  margin-block-start: 6px;
  padding-inline: 14px;
  font-size: 0.8rem;
}

/* slimmer page buttons */
html .subnav__link {
  min-block-size: 38px;
  font-size: 0.875rem;
}

html nav.jb a {
  padding: 0.35em 0.85em;
  font-size: 0.875rem;
}

/* the laptop top bar: Sleep · Eat · Events as words, not buttons (owner, 20 Oct 2026: "I dont want the sleep eat events in the top
   bar as buttons"); the part you are in is gold with a fine gold line under it */
html .site-header .groups .groups__btn.groups__btn--plain {
  border: 0 !important;
  background: none !important;
  box-shadow: none;
  color: #fff3d6 !important;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

html .site-header .groups .groups__btn.groups__btn--plain[aria-current='page'] {
  color: #f3d792 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

html .site-header .groups .groups__btn.groups__btn--plain::after {
  display: none;
}

/* (owner, 26 Oct 2026: "Look how big all these buttons are"): the indulgence page's buttons and the rows of suite, indulgence and
   dinner names, smaller and lighter */
/* (6 Nov 2026) min-block-size was 40px; always overridden by css/site.css, so its value is here now */
html .u1 .u1__btn,
html .u1 .u1__btn:visited {
  min-block-size: 36px;
  padding-inline: 18px;
  font-size: 0.9rem;
}

html .sn .sn__btn,
html .sn .sn__btn:visited {
  min-block-size: 34px;
  padding-inline: 14px;
  font-size: 0.85rem;
}

/* the five dinners carousel on the Romantic Dinner indulgence page: the full width of the screen, on the page's own black */
html .u1 > .jb#indulgence-dinners {
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: calc(50% - 50vw);
  padding-block-start: 0;
  background: transparent;
}

/* one heading only: the page's own "Romantic Dinner" title; the carousel's heading stays for screen readers */
html #indulgence-dinners .jb__h {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html .u1 > .jb#indulgence-dinners {
  padding-block-end: 0;
  margin-block-end: 0;
}

html .u1 > .jb#indulgence-dinners + .u1__body {
  margin-block-start: var(--gap-section);
}

/* the rows of suite names, indulgences, dinners and Weddings · Conferences · Private functions (owner, 26 Oct 2026: "That bar
   should be a floating bar at the bottom, a moving floating bar. And I like the narrow style"): one slim bar floating at the
   foot, its names gliding by themselves when they do not fit (Hercules's gliding row); on a phone and tablet it rides just
   above Sleep · Eat · Events · Enquire, on a laptop it is alone at the bottom */
html .sn--floating {
  inset-block-start: auto !important;
  inset-block-end: calc(14px + env(safe-area-inset-bottom)) !important;
  opacity: 1;
  visibility: visible;
  transition: none !important;
}

@media (max-width: 959px) {
  html .sn--floating {
    inset-block-end: calc(var(--dock-h, 56px) + 6px + env(safe-area-inset-bottom)) !important;
  }

  html body:has(.sn--floating) {
    padding-block-end: calc(var(--dock-h, 56px) + 52px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 960px) {
  html body:has(.sn--floating) {
    padding-block-end: 64px;
  }
}

html .sn--floating .sn__row {
  padding: 3px !important;
  gap: 3px !important;
}

html .sn--floating .sn__btn,
html .sn--floating .sn__btn:visited {
  min-block-size: 30px !important;
  padding-inline: 12px !important;
  font-size: 0.8rem !important;
}

/* (owner, 26 Oct 2026: "Why is there such a big gap open above presidential suite? … Those gaps should not be there"): the suite,
   indulgence and Treats pages start just under the top bar, with the same small space as the carousel pages */
html main > section.ps:first-child,
html main > section.u1:first-child,
html main > section.tm,
html main > section.ps,
html main > section.u1 {
  padding-block-start: 0 !important;
  margin-block-start: -40px !important;
}

@media (max-width: 640px) {
  html main > section.ps,
  html main > section.u1,
  html main > section.tm {
    margin-block-start: -22px !important;
  }
}

/* (owner, 26 Oct 2026: "Why must the top bar be so wide and thick? … make that a bit smaller"): a slimmer, narrower top bar, as
   the leading sites (laptop about 60 px in all with a 44 px pill, phone about 52 px with a 42 px pill; the buttons inside 34 px) */
:root {
  --header-h: 52px;
  --header-pill: 42px;
}

@media (min-width: 1025px) {
  :root {
    --header-h: 60px;
    --header-pill: 44px;
  }

  html .site-header .bar__inner {
    max-inline-size: 1160px;
  }
}

html .site-header .bar__inner .back-arrow,
html .site-header .bar__inner .menu-button,
html .site-header .bar__inner .search-button {
  min-block-size: 34px;
  min-inline-size: 34px;
  block-size: 34px;
  inline-size: 34px;
}

html .site-header .bar__inner .logo {
  min-block-size: 34px;
}

html .site-header .bar__inner .logo__mark {
  block-size: 24px;
}

html .site-header .bar__inner :is(.site-header__enquire, .site-header__book) :is(a, button),
html .site-header .bar__inner a.site-header__book,
html .site-header .bar__inner .enquire-phone {
  min-block-size: 34px !important;
  font-size: 0.85rem;
}

html .site-header .bar__inner .menu-button,
html .site-header .bar__inner .search-button,
html .site-header .bar__inner .back-arrow {
  padding: 0;
  display: inline-grid;
  place-items: center;
}

html .site-header .bar__inner .menu-button svg,
html .site-header .bar__inner .search-button svg,
html .site-header .bar__inner .back-arrow svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}

html .site-header .bar__inner :is(.menu-button, .search-button, .back-arrow) svg {
  min-inline-size: 18px;
  max-inline-size: none;
}


/* the carousel pages' titles: the same small space under the top bar as the other pages (even gaps) */
html .jb.jb--page {
  padding-block-start: 24px !important;
}

@media (max-width: 640px) {
  html .jb.jb--page {
    padding-block-start: 14px !important;
  }
}

/* ── ONE BUTTON SIZE EVERYWHERE (owner, 26 Oct 2026: "Fix the whole website with all the buttons now to the slim version and add
   that in our document … We cannot have different things"). Written in source/DESIGN-RULES.md ("Buttons: one slim size").
     text buttons (gold or gold outline): 36 px high, 14 px letters, 16 px inside at the sides
     small pills (rows of names, chips, More): 30 px high, 13 px letters
     round arrows: 36 px · film play buttons: 56 px                                                                       */
html body :is(.button, .book, .al__btn, .bt__more, .cd__btn, .d2-book__flip, .dc-review__btn, .enq__choice, .contact__wa, .ha__link,
  .ic-btn, .pc__doc, .pm__btn, .pr__link, .rm__open, .send, .songs__play, .sr__tab, .tm__btn, .u1__btn, .up-link,
  .wa-quick__btn, .map__load, .venue__enquire, .bf__btn, .sl__cta, .hb__cta, .mn__btn, .tm__all, .conf-book__button, .wed-plan__button,
  .sheet__btn, .home-actions a, .ha__btn, .rd__actions a) {
  block-size: auto;
  min-block-size: 36px;
  padding-block: 4px !important;
  padding-inline: 16px !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
}

html body :is(.chip, .social__chip, .subnav__link, nav.jb a, .d2-ev__tab, .sn__btn, .jb__link, .button--sm) {
  block-size: auto !important;
  min-block-size: 30px !important;
  padding-block: 3px !important;
  padding-inline: 12px !important;
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
}

html body :is(.pr__arrow, .pc__arrow, .songs__arrow, .hr__arrow, .es__back, .jb__arrow) {
  inline-size: 36px;
  block-size: 36px;
  min-block-size: 36px;
  font-size: 1.1rem !important;
}

html body .vx__play {
  inline-size: 56px !important;
  block-size: 56px !important;
}

html body :is(.d2-jump a, .d2-jump__switch a) {
  block-size: auto;
  min-block-size: 30px;
  padding-block: 3px !important;
  padding-inline: 12px !important;
  font-size: 0.8125rem !important;
}

html body .book {
  --book-h: 36px;
  padding-block: 0 !important;
}

html body .book .book__label {
  padding-block: 0;
  line-height: 1.2;
}

/* ── The menus under Sleep · Eat · Events (owner, 26 Oct 2026): the word to its place on the landing page, a small gold arrow
   beside it opens everything under it. Black, a fine gold line, gold headings, cream names (our design rules). */
html .site-header .groups .mm {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

html .site-header .mm__arrow {
  display: inline-grid;
  place-items: center;
  /* 26 px (at least 24 px after the bar's scaling), not overlapping the word: the smallest easy tap (accessibility check at publish, 26 Oct 2026); the arrow itself is unchanged */
  inline-size: 26px;
  block-size: 26px;
  margin-inline-start: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #e6c27a;
  cursor: pointer;
  transition: transform 200ms ease, background-color 200ms ease;
}

html .site-header .mm__arrow:hover {
  background: rgb(243 215 146 / 0.14);
}

html .site-header .mm__arrow[aria-expanded='true'] {
  transform: rotate(180deg);
}

html .site-header .mm__panel {
  position: absolute;
  inset-block-start: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  z-index: 60;
  display: flex;
  gap: 34px;
  inline-size: max-content;
  max-inline-size: min(760px, calc(100vw - 48px));
  padding: 20px 26px 22px;
  border: 1px solid rgb(230 194 122 / 0.6);
  border-radius: 18px;
  background: #0d0806;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.9);
  pointer-events: auto;
  text-align: start;
}

html .site-header .mm__panel[hidden] {
  display: none;
}

html .site-header .mm__h {
  margin: 0 0 8px;
  font-family: var(--face-display);
  font-size: 1.15rem;
  color: #f3d792;
  white-space: nowrap;
}

html .site-header .mm__col ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html .site-header .mm__link,
html .site-header .mm__link:visited {
  display: block;
  padding: 3px 0;
  color: #f6efe4;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

html .site-header .mm__link--all {
  color: #e6c27a;
}

html .site-header .mm__link:hover {
  color: #f3d792;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

/* phone ☰ menu: the arrow beside each word unfolds its lists */
html .mmm__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

html .mmm__arrow {
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid rgb(230 194 122 / 0.6);
  border-radius: 999px;
  background: none;
  color: #e6c27a;
  transition: transform 200ms ease;
}

html .mmm__arrow[aria-expanded='true'] {
  transform: rotate(180deg);
}

html .mmm__panel {
  display: grid;
  gap: 12px;
  padding: 6px 4px 14px;
}

html .mmm__panel[hidden] {
  display: none;
}

html .mmm__h {
  margin: 0 0 4px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6c27a;
}

html .mmm__col ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html .mmm__col a {
  font-size: 0.95rem;
  color: inherit;
  text-decoration: none;
}

/* (owner, 26 Oct 2026: "all the bars must now be narrow … the Dare to Dream menu"): the menus' Day | Night switch is a small
   pill bar: 30 px pills inside a thin ring (38 px in all, like the slim bars) */
/* (6 Nov 2026) block-size was 30px; always overridden by css/site.css, so its value is here now */
html .mn__switch .mn__btn {
  min-block-size: 30px !important;
  block-size: auto;
}

/* (owner, 26 Oct 2026: "I want the small, thinner banner all over now … bring that into our menu designs as well … Everything must
   now line up"): the beige part bands of every online menu (wine & drinks, Roots, Dare2Dream, spa) one slim height, the same
   everywhere */
html :is(.dm__sec-h, .rm__part-h, .sp__part-h) {
  padding: 6px 12px !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.22em;
}

/* (owner, 26 Oct 2026: "Look at this mess. The open gap before that banner … fix it everywhere"): the shortcut bar now sits in
   the page (no longer floating), so the space kept for the old floating bar goes; the page starts right under the top bar */
html main:has(> [data-jumpbar]) {
  padding-block-start: 0 !important;
}

/* the Roots photo (the reflection) on laptops: one full-width column, so the whole photo shows (it had shrunk to nothing) */
html .hero.hero--whole.hero--reflection {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
}

html .hero.hero--whole.hero--reflection > .hero__media {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

html .hero.hero--whole.hero--reflection > .layer-band {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* the Roots photo starts right under the top bar (the top bar is part of the page now, nothing to leave room for) */
html .hero.hero--reflection.hero--over {
  padding-block-start: 0;
}

/* (owner, 26 Oct 2026: "the word gallery … all in capital letters … a spot on all three of the pop-up menus"): GALLERY across the
   foot of each drop-down, under a fine gold line, opening that part of the gallery */
html .site-header .mm__panel {
  flex-wrap: wrap;
  row-gap: 14px;
}

html .site-header .mm__gallery {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid rgb(230 194 122 / 0.35);
  text-decoration: none;
}

html .site-header .mm__gallery-w {
  font-family: var(--face-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #f3d792;
}

html .site-header .mm__gallery-s {
  font-family: var(--face-text);
  font-style: normal;
  font-size: 1rem;
  color: #f6efe4;
}

html .site-header .mm__gallery:hover .mm__gallery-w {
  color: #fff3cf;
}

/* (owner, 26 Oct 2026, iPhone: "You have sleep, eat, events twice under one each other … take out the big sleep, eat, events
   buttons in the gold buttons"): the landing page's big gold Sleep · Eat · Events buttons are gone; Sleep · Eat · Events live
   only in the slim top bar (laptop) and the slim bottom bar (phone) */
/* (owner, 26 Oct 2026, then: "I like Option 2: keep the big gold buttons, and the bottom bar waits" + "the buttons are very large
   … you've got to have the narrow, streamlined, trimmed bars"): the gold Sleep · Eat · Events buttons stay on the first screen,
   slim (36 px, the site's button size); the phone's bottom bar waits until they have scrolled away (HeroSurface script), and
   the extra floating row of the same buttons is retired (the bottom bar does that job) */
html .hh .hh__doors .hh__door {
  min-block-size: 36px !important;
  padding-inline: 20px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em;
}

html .hh__float {
  display: none !important;
}

@media (max-width: 959px) {
  /* the bar no longer repeats the gold buttons, so it stays on the landing page's first screen too */
  html[data-doors-in-view] .dock {
    opacity: 0;
    translate: 0 120%;
    pointer-events: none;
  }

  html .dock {
    transition: opacity 300ms ease, translate 400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}


/* (owner, 26 Oct 2026: "the big Forum Homini gold button at the top is so big … at the top we need inquire and book a suite …
   come up with a solution for the whole layout when we land on the laptop, on the iPhone"):
   · the home's first screen: no logo button in the top bar (the big logo on the photo says Forum Homini); it comes back as soon
     as the page scrolls, and on every other page
   · phones: the logo button smaller, and a slim Book a suite with the search on the right (Enquire is in the bottom bar) */
/* (owner: "on the laptop version, you must always keep the logo … I only mentioned that on the phone"): hidden on the phone's
   first screen only */
@media (max-width: 959px) {
  html .site-header.site-header[data-home][data-state='top'] .bar__inner .logo.logo {
    display: none !important;
  }

  html .site-header[data-home][data-state='top'] .bar__inner {
    justify-content: flex-end !important;
  }

  html .site-header.site-header .bar__inner .actions {
    gap: 6px !important;
  }

  html .site-header.site-header .bar__inner {
    padding-inline: 6px;
  }
}

html .site-header[data-home] .logo {
  transition: opacity 300ms linear;
}

@media (max-width: 959px) {
  html .site-header.site-header .bar__inner .logo.logo {
    min-block-size: 30px !important;
    block-size: 30px;
    padding-inline: 10px !important;
  }

  html .site-header.site-header .bar__inner .logo.logo .logo__mark {
    block-size: 20px !important;
    inline-size: auto;
  }

  html .site-header.site-header .bar__inner .logo.logo .logo__name {
    block-size: 11px;
    inline-size: auto;
  }

  html .site-header.site-header .actions .book.site-header__book {
    display: inline-flex !important;
    min-block-size: 30px !important;
    block-size: 30px !important;
    padding-inline: 12px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
    inline-size: auto !important;
  }

  html .site-header.site-header .actions .book.site-header__book * {
    white-space: nowrap !important;
  }

  html .site-header .bar__inner .search-button {
    min-block-size: 30px !important;
    min-inline-size: 30px !important;
    block-size: 30px;
    inline-size: 30px;
  }
}

/* the phone's first screen of the home: the bottom bar waits, so Enquire sits in the top bar beside Book a suite (slim); phones
   only: from 641 px the top bar has its own Enquire already (owner: "I see inquiries twice … One must be taken out") */
@media (max-width: 640px) {
  html .site-header.site-header[data-home][data-state='top'] .enquire-phone {
    display: inline-flex !important;
    align-items: center;
    min-block-size: 30px !important;
    block-size: 30px !important;
    padding-inline: 12px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
  }
}

/* (26 Oct 2026, iPhone sweep) a film that grows a little as it fades in poked 9 px past the screen on two pages and let the page
   slide sideways; no page moves sideways now (clip keeps the sticky top bar working) */
html,
html body {
  overflow-x: clip;
}

/* (26 Oct 2026) the landing page's old chapter bar is gone, so the phone's bottom bar stays on the landing page too once the gold
   buttons have scrolled away (it used to step aside for that bar) */
@media (max-width: 959px) {
  html.hc-on:not([data-doors-in-view]) .dock {
    opacity: 1 !important;
    translate: 0 0 !important;
    pointer-events: auto !important;
  }
}

/* (owner, 26 Oct 2026, iPhone) the gold button with the faces and three lines on the left of the phone's top bar; on phones it
   takes the place of the name button (the name button stays on laptops, her rule) */
html .site-header .pmg-open {
  display: none;
}

@media (max-width: 959px) {
  html .site-header.site-header .bar__inner .pmg-open {
    /* (owner: "should be as big as the inquiry button"): the same height and about the same width as Enquire */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    block-size: 30px;
    min-inline-size: 84px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
    color: #4a3a2a;
    cursor: pointer;
  }

  html .site-header .pmg-open__mark {
    block-size: 22px;
    inline-size: auto;
  }

  html .site-header.site-header .bar__inner .logo.logo {
    display: none;
  }

  html .site-header[data-home][data-state='top'] .bar__inner {
    justify-content: space-between !important;
  }
}

/* (owner, 26 Oct 2026: "There's no reason for those buttons to be different sizes. Choose one size … center the word inside. Try
   not to make them too long"): each row of buttons one width, the word centred
   · the phone's bottom bar: four equal cells */
@media (max-width: 959px) {
  html .dock.dock {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px;
  }

  html .dock .dock__cell {
    inline-size: 100%;
    padding-inline: 0;
    justify-content: center;
  }

  /* · the phone's top bar: the faces menu, Enquire and Book a suite one width (96 px), 30 px tall */
  html .site-header.site-header .bar__inner .pmg-open,
  html .site-header.site-header[data-home][data-state='top'] .enquire-phone,
  html .site-header.site-header .actions .book.site-header__book {
    inline-size: 96px !important;
    min-inline-size: 96px !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }

  html .site-header.site-header .actions .book.site-header__book :is(svg, .icon) {
    display: none;
  }
}

/* · the landing page's gold Sleep · Eat · Events: three equal buttons */
html .hh .hh__doors .hh__door {
  inline-size: 100px;
  padding-inline: 0 !important;
  justify-content: center;
}

/* ═══ One size per row, everywhere (owner, 26 Oct 2026: "all the gold buttons … must be the same size … also on the screen of
   the laptop … It must look all the same. It mustn't be too busy with different sizes") ═══
   A row of buttons takes the width of its longest word, every button in it that same width, the word centred.          */
html :is(.sr__tabs, .ha, .pm__actions, .tm__actions, .bt__choose, .about-food__link, .way, .ic-actions) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  inline-size: fit-content;
  max-inline-size: 100%;
}

html :is(.sr__tabs, .ha, .pm__actions, .tm__actions, .bt__choose, .about-food__link, .ic-actions) > :is(a, button),
html .way > li,
html .way > li > a {
  inline-size: 100%;
  justify-content: center !important;
  text-align: center;
}

/* the indulgence pages: Add to my stay · Give as a gift (· the spa menu) two to a line, one width; the hint line under them */
html .u1__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
}

html .u1__actions > a {
  inline-size: 100%;
  justify-content: center;
  text-align: center;
}

html .u1__actions > :not(a) {
  grid-column: 1 / -1;
}

/* rows of choices (the enquiry page's places, the gallery's parts): a tidy grid of equal small buttons */
html :is(.enq__choices, .gallery__chip-row) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  max-inline-size: 50rem;
  margin-inline: auto !important;
}

html :is(.enq__choices, .gallery__chip-row) > li > :is(a, button) {
  inline-size: 100%;
  justify-content: center;
  text-align: center;
}

@media (max-width: 640px) {
  html :is(.sr__tabs, .ha, .pm__actions, .tm__actions, .bt__choose, .about-food__link, .way, .u1__actions) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
  }

  html :is(.sr__tabs, .ha, .pm__actions, .tm__actions, .bt__choose, .about-food__link, .u1__actions) > :is(a, button),
  html .way > li > a {
    white-space: normal !important;
    line-height: 1.2;
  }

  html :is(.enq__choices, .gallery__chip-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* (owner, 26 Oct 2026: "It's got to be similar to the bottom footer menu, but they're all too spaced out … no line spaces in
   between … streamlined, minimalistic"): the phone footer's fold-out rows slim (42 px, as the top menu) and the lists tight */
@media (max-width: 640px) {
  html .site-footer .site-footer__group .site-footer__toggle {
    min-block-size: 42px;
    font-size: 0.8rem;
  }

  html .site-footer .site-footer__group,
  html .site-footer .site-footer__col {
    margin: 0 !important;
    padding-block: 0;
  }

  html .site-footer .site-footer__col a {
    min-block-size: 0;
    padding-block: 3px !important;
    font-size: 0.86rem;
    line-height: 1.35;
  }

  html .site-footer .site-footer__col ul:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding-block: 2px 10px !important;
  }

  html .site-footer .site-footer__nav {
    gap: 0 !important;
    row-gap: 0 !important;
  }
}

/* ═══ The calm iPhone (owner, 26 Oct 2026: "Yes, build the calmer iPhone layout: gold menu button and search at the top, one
   slim bottom bar with Enquire and Book a suite, no floating rows") ═══
   top: the gold faces menu (left) and search (right) only · bottom: one slim bar, Enquire (gold) and Book a suite (quiet),
   two equal halves, always there · no floating rows of names (suites, indulgences, events)                                */
html .dock .dock__book {
  display: none;
}

@media (max-width: 959px) {
  /* (owner, 31 Oct 2026: "Should it not be a back button somewhere at the top?"): the round back arrow in the top bar on phones too */
  html .site-header.site-header .bar__inner .site-header__enquire {
    display: none;
  }

  html .site-header.site-header .bar__inner {
    justify-content: space-between;
  }

  html .dock.dock {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    inline-size: min(calc(100vw - 24px), 360px) !important;
    inset-inline: 0 !important;
    left: 0 !important;
    right: 0 !important;
    translate: none;
    margin-inline: auto !important;
  }

  html .dock .dock__ch {
    display: none !important;
  }

  html .dock .dock__book {
    display: flex !important;
    color: #f3d792 !important;
    box-shadow: inset 0 0 0 1px rgb(230 194 122 / 0.7);
  }

  /* the bar no longer repeats the gold buttons, so it stays on the landing page's first screen too */
  html[data-doors-in-view] .dock {
    opacity: 1 !important;
    translate: none !important;
    pointer-events: auto !important;
  }

  /* (owner, 26 Oct 2026: "Put Hercules's versions back … the floating row of names on the iPhone"): his gliding row stays */
}

/* (owner, 26 Oct 2026: "I don't like the Inquire and Book a suite at the bottom. That should go in the top banner"): on phones
   the top bar holds everything: the gold faces menu (left), then Enquire, Book a suite (or Book a table) and search (right),
   the three buttons one width; there is no bottom bar on phones any more */
@media (max-width: 959px) {
  html .site-header.site-header .bar__inner .enquire-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 92px;
    min-inline-size: 92px;
    block-size: 30px;
    min-block-size: 30px !important;
    padding-inline: 0;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  html .site-header.site-header .bar__inner .actions .book.site-header__book {
    display: inline-flex !important;
    inline-size: 92px !important;
    min-inline-size: 92px !important;
  }

  html .site-header.site-header .bar__inner .pmg-open {
    inline-size: 92px !important;
    min-inline-size: 92px !important;
  }

  html .site-header.site-header .bar__inner .actions {
    gap: 6px !important;
  }

  html .dock.dock,
  html[data-doors-in-view] .dock {
    display: none !important;
  }

  html body {
    padding-block-end: env(safe-area-inset-bottom) !important;
  }

  :root {
    --dock-h: 0px !important;
  }
}

/* (owner, 26 Oct 2026: "Enquire could be the only button, because Book a suite also comes into Enquire. So take away the Book a
   suite"): on phones the top bar is the gold faces menu, Enquire and search; Book a suite / Book a table open from Enquire */
@media (max-width: 959px) {
  html .site-header.site-header .bar__inner .actions .book.site-header__book {
    display: none !important;
  }
}

/* (owner, 26 Oct 2026: "We should keep the hints of that Hercules said … you cannot remove things that Hercules said"): the Scroll
   down words stay on phones too (Hercules point 3) */

/* (owner, 26 Oct 2026: "keep the Sleep, Eat, Events bar … at the bottom … very sleek, thinned buttons for easy navigation.
   Otherwise, I always have to scroll up back to the top bar to get the three lines. Let's just try that"): on phones the slim
   bottom bar is back with Sleep · Eat · Events only (three equal buttons, each to its page); Enquire stays in the top bar; on
   the landing page the bar waits while the gold Sleep · Eat · Events buttons are on the screen (never both at once) */
@media (max-width: 959px) {
  :root {
    --dock-h: 48px !important;
  }

  html body .dock.dock {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    inline-size: min(calc(100vw - 24px), 340px) !important;
    margin-inline: auto !important;
    inset-inline: 0 !important;
  }

  html body .dock .dock__ch {
    display: flex !important;
  }

  html body .dock :is(.dock__enquire, .dock__book) {
    display: none !important;
  }

  html body {
    padding-block-end: calc(48px + env(safe-area-inset-bottom)) !important;
  }

  html[data-doors-in-view] body .dock.dock {
    opacity: 0 !important;
    translate: 0 120% !important;
    pointer-events: none !important;
  }
}

/* the gold pill's two halves (faces → opening page · three lines → menu) */
@media (max-width: 959px) {
  html .site-header.site-header .bar__inner .pmg-open {
    padding: 0 !important;
    gap: 0;
    overflow: hidden;
  }

  html .site-header .pmg-open__home,
  html .site-header .pmg-open__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    flex: 1 1 50%;
    border: 0;
    background: none;
    color: #4a3a2a;
    cursor: pointer;
  }

  html .site-header .pmg-open__menu {
    border-inline-start: 1px solid rgb(74 58 42 / 0.35);
  }
}

/* phones: the gold faces button alone on the left (to the opening page); the three-lines menu a round button like search,
   between Enquire and search */
html .site-header.site-header .bar__inner .pmg-menu {
  display: inline-grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  padding: 0;
  border: 1px solid rgb(230 194 122 / 0.8);
  border-radius: 999px;
  background: none;
  color: #f3d792;
  cursor: pointer;
}

@media (max-width: 959px) {
  html .site-header.site-header .bar__inner .pmg-open {
    inline-size: 64px !important;
    min-inline-size: 64px !important;
  }

  html .site-header .pmg-open__home {
    flex: 1 1 100%;
  }

}

/* (owner, 26 Oct 2026: "Why do you need to underline on the buttons, the gold buttons? It's looking horrible"): the words inside a
   gold button are never underlined (the button itself shows it is a link) */
html .ha__link .ha__link-text,
html :is(a, button)[class*="btn"] :is(span, *),
html .ha__link {
  text-decoration: none !important;
}

/* ═══ Buttons and links (owner, 26 Oct 2026: "Don't always just use buttons … rethink when you use a button and when you just
   use a link that's underlined"): ONE gold button per place, for the main action (book); every other action (WhatsApp, Call,
   Email …) is a small underlined word link beside or under it, never another button. Here: the action rows (.ha) under the
   dinners, Forest Breakfast and the other pages: the first is the gold button, the rest are word links on one line. */
html body .ha .ha__link ~ .ha__link,
html body .rd .rd__actions .ha__link ~ .ha__link {
  background: none !important;
  border: 0;
  box-shadow: none;
  min-block-size: 0 !important;
  padding: 4px 2px !important;
  color: #f3d792;
}

html body .ha .ha__link ~ .ha__link .ha__link-text {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.3em;
  text-decoration-color: rgb(243 215 146 / 0.6) !important;
}

html body .ha .ha__link:first-of-type .ha__link-text {
  text-decoration: none !important;
}

html body .ha {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: center;
  column-gap: 22px !important;
  row-gap: 10px !important;
}

html body .ha .ha__link:first-of-type {
  flex-basis: 100%;
  max-inline-size: 280px;
  justify-content: center !important;
  white-space: nowrap;
}

/* (owner, 26 Oct 2026, suite pages: "check availability, out of the buttons, and just make them things to click on. That is
   underlined"): More rates · Check availability · Make it unforgettable are underlined gold word links, not buttons */
html body .sr .sr__tab,
html body .sr .sr__tab[aria-expanded] {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-block-size: 0 !important;
  padding: 4px 2px !important;
  color: #f3d792 !important;
  -webkit-text-fill-color: #f3d792 !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.3em !important;
  text-decoration-color: rgb(243 215 146 / 0.6) !important;
}

html body .sr .sr__tabs {
  column-gap: 26px !important;
  inline-size: auto !important;
}

html body .sr .sr__tabs.sr__tabs {
  display: flex !important;
  justify-content: flex-start !important;
  inline-size: auto !important;
}

html body .sr .sr__tabs > .sr__tab {
  inline-size: auto !important;
}

/* (owner: "unforgettable, see the indulgences, rather make that in a gold button"): the one gold button on the suite page */
html body a.up-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 36px !important;
  padding: 4px 18px !important;
  /* (owner, 31 Oct 2026: "take out the color inside it, and then we let it grow bigger and smaller"): a gold frame, no gold inside, breathing */
  border: 1px solid #e6c27a !important;
  border-radius: 999px !important;
  background: none !important;
  color: #f3d792;
  -webkit-text-fill-color: #f3d792;
  font-weight: 500 !important;
  text-decoration: none;
  overflow: visible;
}

html body a.up-link::after {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  html body :not(.rd, .bt__after) > a.up-link {
    animation: up-link-breathe 2.4s ease-in-out infinite !important;
  }

  @keyframes up-link-breathe {
    0%, 100% {
      scale: 1;
    }
    50% {
      scale: 1.08;
    }
  }
}

/* ═══ One gold button per place, the rest word links (owner, 26 Oct 2026: "apply the same idea to all six places") ═══ */
/* a gold-underlined word link (the shared look) */
html body .dare2dream-x,
html body :is(.songs__play, .rd a.up-link, .bt__after a.up-link, .bt__choose .bt__more ~ .bt__more, .ic-actions .ic-btn) {
  background: none !important;
  border: 0 !important;
  box-shadow: none;
  min-block-size: 0 !important;
  padding: 4px 2px !important;
  color: #f3d792 !important;
  -webkit-text-fill-color: #f3d792 !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.3em;
  text-decoration-color: rgb(243 215 146 / 0.6) !important;
}

/* plan your visit: Show availability is the gold button; Book a suite under it is the word link
   (gift vouchers and treats keep their one gold button per card: one per place) */
html body [data-page='/gift-vouchers/'] .ic-actions .ic-btn,
html[data-page='/gift-vouchers/'] body .ic-actions .ic-btn {
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%) !important;
  color: #1d1405 !important;
  -webkit-text-fill-color: #1d1405 !important;
  text-decoration: none !important;
  padding: 4px 16px !important;
  min-block-size: 30px !important;
}

/* (owner: "the button for the make it unforgettable seems very big … more narrow, a more slim line"): the suite pages' one gold
   button slim: 30 px tall, smaller letters */
html body .sr ~ * a.up-link,
html body a.up-link {
  min-block-size: 30px !important;
  padding: 3px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

html body .rd a.up-link,
html body .bt__after a.up-link {
  min-block-size: 0 !important;
  padding: 4px 2px !important;
  font-size: 1rem !important; /* (owner, 2 Nov 2026: "It is so tiny, I've struggled to read it") */
  font-weight: 500 !important;
}

/* ═══ Gallery as the fourth word (owner, 26 Oct 2026) ═══ */
/* the phone's bottom bar and the landing page's gold buttons: four equal */
@media (max-width: 959px) {
  html body .dock.dock {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    inline-size: min(calc(100vw - 20px), 380px) !important;
  }

  html body .dock .dock__label {
    letter-spacing: 0.04em;
  }
}

@media (max-width: 640px) {
  html .hh .hh__doors .hh__door {
    inline-size: 80px !important;
    font-size: 0.82rem !important;
  }

  html .hh .hh__doors > ul {
    gap: 6px !important;
  }
}

/* the gallery page opens straight on The Lounge (owner: "I don't want to see the sum of us … What are all those buttons there at
   the top of the gallery? … I immediately want to see the lounge"): no top photo, no row of buttons; the page title stays for
   screen readers only */
html[data-page='/more/gallery/'] main > section.hero {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

html[data-page='/more/gallery/'] .gallery__chips {
  display: none !important;
}

html[data-page='/more/gallery/'] main {
  padding-block-start: 0 !important;
}

html[data-page='/more/gallery/'] .gallery-page {
  padding-block-start: 20px !important;
}

/* (owner: "the Dare to Dream photo … so small" on the landing page): on phones the Dare2Dream photo fills the screen like the
   others, held so the pink Dare2Dream sign and the gate stay in view */
@media (max-width: 640px) {
  html body #eat .jr__shot.jr__shot--b .art__img.art__img {
    translate: none;
    transform: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  html body #eat .jr__shot.jr__shot--b .art__img.art__img,
  html .jr__shot--fit .art__img,
  html .jr__shot--fit :is(img, picture) {
    position: absolute !important;
    inset: 0 !important;
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: cover !important;
    object-position: 50% 30% !important;
  }
}

/* (26 Oct 2026, the check before publishing): after the landing page's last photo (Gallery), "What our guests say" follows at the
   normal section gap, not the band's own large padding on top of the photo's dark fade */
html[data-page="/"] .gg ~ .hr {
  padding-block-start: var(--gap-heading, 24px);
}

/* (owner, 30 Oct 2026: "make all three links at the top … underline it that you can see you can go to them"): the headings in the
   top menus open their overview, usually the carousel; a fine gold line shows it is a link, as under Options on the landing page */
html .mega-h,
html .mega-h:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(230 194 122 / 0.75);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

html .mega-h:hover,
html .mega-h:focus-visible {
  text-decoration-color: currentColor;
}

/* (the final check, 30 Oct 2026: "the words … on top of one another"): on a laptop the legal pages' heading stood over their first line */
@media (min-width: 641px) {
  html .hero--band + .doc {
    padding-block-start: 120px !important;
  }
}

/* (owner, 31 Oct 2026: "too busy"): on a phone the back arrow replaces a row that only leads to other pages (Roots, Dare2Dream, Forest Breakfast) */
/* (owner, 31 Oct 2026, laptop: "we cannot work like that … exactly the same"): on the laptop too: the back arrow leads away, the row only moves within the page */
html nav.jb[data-jumpbar]:not(:has(a[href^='#'])),
html nav.jb[data-jumpbar] li.jb__switch {
  display: none !important;
}

/* (owner, 31 Oct 2026: "the big black gaps … It's got to be the same everywhere … You have to get a rule in here"): a page that is one carousel ends
   with its carousel, not with the screen, and the footer follows at the one section gap */
html main :is(.hb, .sl, .ug, .hb) {
  min-block-size: 0;
  padding-block-end: 0 !important;
}

html main .jb.jb--page {
  padding-block-end: 24px !important;
}

html[data-page='/plan-your-visit/'] main .ic-intro {
  padding-block-end: 0 !important;
}

html[data-page='/suites/'] main > :is(section, div):last-of-type {
  padding-block-end: 16px !important;
}

html[data-page='/contact-directions/'] main figure {
  margin-block-end: 0 !important;
}

@media (max-width: 640px) {
  html main .hero__ext {
    padding-block-start: 0 !important;
  }
}

/* (owner, 31 Oct 2026: "fix all those gaps, that they all look the same throughout the website") */
html[data-page='/contact-directions/'] main .cp__col {
  margin-block-start: -32px;
}

html[data-page='/plan-your-visit/'] main .ic-intro + section {
  padding-block-start: 12px !important;
}

@media (max-width: 640px) {
  html[data-page='/privacy-policy/'] main .layer-band {
    padding-block-end: 0 !important;
  }

  html main .hotel-enq__lead,
  html main .terms + * {
    margin-block-start: 0 !important;
  }
}

html[data-page='/contact-directions/'] main .hero__platecell {
  margin-block-end: -36px;
}

@media (max-width: 640px) {
  html[data-page='/contact-directions/'] main .hero__platecell {
    margin-block-end: -16px;
  }

  html main .terms .contact__rows {
    margin-block-end: -12px;
  }

  html[data-page='/privacy-policy/'] main :has(> li.related__item) {
    margin-block-start: -10px !important;
  }
}

@media (max-width: 640px) {
  html main .enquiry.enquiry--aside {
    gap: 48px !important;
    row-gap: 48px !important;
  }

  html main :is(.pe__social, .de__social) {
    margin-block-start: 40px !important;
  }
}

/* (owner, 31 Oct 2026: "the spaces between the video and the river flow and objects to art and the four color rock and then the jacuzzi,
   they must all have the same open gap" · "The writing between the video and the river flow must be centered vertically, always"):
   every suite page has ONE gap, --suite-gap: film, words, river and every section after it. The sections' own spaces are off. */
html main:has(> section.ps--wide) {
  --suite-gap: 64px;
}

@media (max-width: 640px) {
  html main:has(> section.ps--wide) {
    --suite-gap: 40px;
  }
}

html main:has(> section.ps--wide) > section.ps--wide {
  padding-block-end: 0 !important;
}

html main > section.ps--wide .ps__media {
  margin-block-end: calc(var(--suite-gap) - var(--gap-heading)) !important;
}

/* the links under the words carry a little air of their own, so the gap under the writing looks the same as the gap above it */
html main > section.ps--line {
  margin-block-end: -8px !important;
}

html main:has(> section.ps--wide) > section:not(.ps--wide) {
  padding-block: 0 !important;
  margin-block: var(--suite-gap) 0 !important;
}

html main:has(> section.ps--wide) > section:last-of-type {
  padding-block-end: var(--suite-gap) !important;
}

/* Objets d'art keeps a little empty room under its carousel */
html main:has(> section.ps--wide) > section.jb--song.jb--song {
  margin-block-end: -11px !important;
}

@media (max-width: 640px) {
  html main:has(> section.ps--wide) > section.jb--song.jb--song {
    margin-block-end: -17px !important;
  }
}

/* (owner, 31 Oct 2026: "take out that secondary menu on all places … the top banner takes us back now to everything"): the rows of shortcut
   buttons under the top bar and the floating rows of pages are gone from every page; to bring one back, take its name out of this list */
html body :is([data-jumpbar], [data-jump], .sn--floating) {
  display: none;
}

/* the Musical carousel stands at the one gap rule: the ring's own room above and below it is taken back */
html body main section#songs {
  margin-block: -32px -48px !important;
}

@media (min-width: 641px) {
  html body main section#songs {
    margin-block: -32px -80px !important;
  }
}

/* (owner, 31 Oct 2026: "words in the background overlapping"): while a song plays its window and "Now playing" keep their full room */
html body main section#songs:has(.songs__stage:not([hidden])) {
  margin-block-end: var(--gap-item) !important;
}

/* (owner, 1 Nov 2026: "too much gold"): on the landing page gold is kept for Enquire and the first screen; every other button is
   the gold outline (Buttons and navigation, rule 1: gold = the main action, gold outline = the others) */
html body main .jr__cta,
html body main .jr__cta:visited {
  border-radius: 999px !important;
  min-block-size: 36px;
  padding-inline: 16px !important;
  background: rgb(14 7 5 / 0.35) !important;
  border: 1px solid #e6c27a !important;
  color: #f3d792;
  -webkit-text-fill-color: #f3d792;
}

/* (owner, 1 Nov 2026: "the scroll button is now too big … the main heading … covering … the whole movie" + "a more slim line button
   … thinner, a more minimalistic gold buttons"; her yes to all three): first screen only: logo a quarter smaller on the laptop, the
   four gold buttons at the small pill size (30 px), the scroll arrow the arrow size (36 px) */
@media (min-width: 960px) {
  html .hh .hh__logo {
    inline-size: min(60vw, 570px);
  }
}

/* (owner, 1 Nov 2026: "bring those sleep, eat, events and gallery back in the gold"): gold again, keeping the slim 30 px */
html .hh .hh__doors .hh__door {
  min-block-size: 30px !important;
}

/* (owner, 1 Nov 2026: "got to be small, tiny, just to attract attention"): a 24 px ring, the tap area 44 px */
html .hh__scroll {
  inset-block-end: 28px !important;
  inset-inline-start: calc(50% - 22px) !important;
  inline-size: 44px;
  block-size: 44px;
}

html .hh__scroll .hh__cue,
html .hh__scroll .hh__cuearrow,
html .hh__scroll::before {
  inset-block-start: 10px !important;
  inset-inline-start: 10px !important;
  inline-size: 24px;
  block-size: 24px;
}

html .hh__scroll .hh__cue {
  -webkit-mask-image: radial-gradient(closest-side, transparent 90%, #000 94%);
  mask-image: radial-gradient(closest-side, transparent 90%, #000 94%);
}

html .hh__scroll .hh__cuearrow {
  background-position: 50% 42% !important;
  background-size: 1px 7px !important;
}

html .hh__scroll .hh__cuearrow::after {
  inline-size: 4px;
  block-size: 4px;
  border-inline-end-width: 1px !important;
  border-block-end-width: 1px !important;
}

/* (owner, 1 Nov 2026: "your pulsing button is moving down. It doesn't disappear when they scroll"): it goes as soon as they scroll */
html .hh__scroll {
  transition: opacity 200ms ease;
}

html[data-scrolling-on] .hh__scroll {
  opacity: 0;
  pointer-events: none;
}

html .hh .hh__body {
  padding-block-end: 76px !important;
}

/* (owner, 1 Nov 2026: "a whole big black screen at the bottom … move it all more down") */
@media (max-width: 640px) {
  html .hh__scroll {
    inset-block-end: 6px !important;
  }

  html .hh .hh__body {
    padding-block-end: 50px !important;
  }
}

/* (owner, 1 Nov 2026: "romantic dinners don't have the same size … the smoothing in and out can maybe be bigger with the heading of
   each one in there … breakfast for two, it's also not big enough … the eat must look the same as the rest"): on the landing page the
   Romantic Dinners and Forest Breakfast rows fill the same space as Roots, the heading on the photos' soft top, each dinner's name
   at the top of its photo */
html.jr-on #eat .jr__row {
  inset: var(--eat-top) 0 0 !important;
  block-size: auto;
}

html.jr-on #eat .jr__row-name {
  inset: var(--s-2) 0 auto !important;
  z-index: 2;
  padding-block-end: 0;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.9);
}

/* (owner, 1 Nov 2026: "move all the headings above the photos under romantic dinner"): each dinner's name at the top of its photo */
html.jr-on #eat .jr__tile-name {
  inset: 0 0 auto;
  padding-block: 44px 0;
}

@media (max-width: 640px) {
  html.jr-on #eat .jr__row {
    inset-block-end: calc(54px + env(safe-area-inset-bottom)) !important;
  }

  html.jr-on #eat .jr__tile-name {
    padding-block: 20px 0;
  }

  html.jr-on #eat .jr__tile:nth-of-type(n + 3) .jr__tile-name {
    padding-block: 10px 0;
  }
}

html.jr-on #eat .jr__ctas--c .jr__cta,
html.jr-on #eat .jr__ctas--d .jr__cta {
  background: rgb(14 7 5 / 0.7) !important;
}

/* (owner, 1 Nov 2026: "that seems like a big error"): phones: Sleep, Eat, Events and Gallery stood 12 px under the top bar; all four
   start clear of it */
@media (max-width: 640px) {
  html:root {
    --seam: calc(var(--header-h) + 30px);
  }
}

/* (owner, 1 Nov 2026: "There should be no fading, or there must be fading everywhere, or the photos must just go into one another"):
   phones: the four photos of Romantic Dinners and Forest Breakfast melt into one another both ways, no lines */
@media (max-width: 640px) {
  html.jr-on #eat .jr__tile:nth-of-type(even) {
    margin-inline-start: -16%;
  }

  html.jr-on #eat .jr__tile:nth-of-type(n + 3) {
    margin-block-start: -16%;
  }

  html.jr-on #eat .jr__tile:nth-of-type(odd) {
    margin-inline-end: -16%;
  }

  html.jr-on #eat .jr__tile:nth-of-type(-n + 2) {
    margin-block-end: -16%;
  }

  html.jr-on #eat .jr__tile:nth-of-type(1) .jr__tile-art {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
    mask-image: linear-gradient(to bottom, transparent, #000 12%);
  }

  html.jr-on #eat .jr__tile:nth-of-type(2) .jr__tile-art {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 27%), linear-gradient(to bottom, transparent, #000 12%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 27%), linear-gradient(to bottom, transparent, #000 12%);
    mask-composite: intersect;
  }

  html.jr-on #eat .jr__tile:nth-of-type(3) .jr__tile-art {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  }

  html.jr-on #eat .jr__tile:nth-of-type(4) .jr__tile-art {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 27%), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 27%), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    mask-composite: intersect;
  }

  html.jr-on #eat .jr__tile:nth-of-type(n + 3) .jr__tile-name {
    padding-block: 34px 0;
  }

  html.jr-on #eat .jr__tile:nth-of-type(even) .jr__tile-name {
    padding-inline-start: 16%;
  }
}

/* phones: the long names on Eat's buttons stay inside the button */
@media (max-width: 640px) {
  html body main #eat .jr__cta {
    max-inline-size: calc(100vw - 32px);
    padding-inline: 12px !important;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* (owner, 1 Nov 2026: "the photos inside are not the same size of the width of the outside photo"): on the landing page the gallery
   tiles fill exactly the space of the Lounge photo that opens over them, edge to edge */
html.gg-on .gg .gg__peek {
  padding: 0 0 calc(56px + env(safe-area-inset-bottom)) !important;
  gap: 0 !important;
  justify-content: stretch;
}

html.gg-on .gg .gg__peek .gt {
  flex: 1 1 auto;
  min-block-size: 0;
  grid-auto-rows: minmax(0, 1fr);
}

@media (min-width: 900px) {
  html.gg-on .gg .gg__peek {
    padding: 0 !important;
  }
}

/* (owner, 1 Nov 2026: "the headings must be a bit bigger"): the four dinners' names */
html.jr-on #eat .jr__tile-name {
  font-size: 1.9rem;
  text-shadow: 0 1px 10px rgb(0 0 0), 0 0 3px rgb(0 0 0 / 0.8);
}

@media (max-width: 640px) {
  html.jr-on #eat .jr__tile-name {
    font-size: 1.3rem;
  }
}

/* (owner, 1 Nov 2026: "The name must be at the top on the landing page in the gallery"): clear of the button at the foot */
/* (owner, 1 Nov 2026: "too small to read … the words … must be higher up … more on like a black line"): each name on a solid black
   strip above its photo, never on the photo */
html.gg-on .gg .gg__peek .gt__tile {
  border-radius: 0;
  background: #000;
}

html.gg-on .gg .gg__peek .gt__tile .gt__art {
  inset: 0 0 50px;
}

/* (owner, 2 Nov 2026: "put all the names of the each one below"): each name on its strip below its photo */
html.gg-on .gg .gg__peek .gt__name {
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 50px;
  padding: 0 4px;
  font-size: 1.02rem;
  line-height: 1.08;
  text-align: center;
  background: #000;
  text-shadow: none;
}

@media (min-width: 900px) {
  html.gg-on .gg .gg__peek .gt__tile .gt__art {
    inset-block-end: 66px;
  }

  html.gg-on .gg .gg__peek .gt__name {
    block-size: 66px;
    padding: 0 10px;
    font-size: 1.5rem;
  }
}

/* (owner, 1 Nov 2026: "there's a frame behind it. I can see the next picture's frame"): the photo behind stays hidden until the
   gates in front start to part, so nothing shows through their soft edges */
html.es-on .es--home:not(.es--conf-on) .es__scene--conf,
html.es-on .es--home:not(.es--pf-on) .es__scene--pf {
  visibility: hidden;
}

/* (owner, 1 Nov 2026: "a line going down in the middle of the screen of the eat of the roots photo … Fix that"): no gold line on Eat's gates */
html.t-doors.jr-on .jr__door::after {
  display: none;
}

/* (owner, 1 Nov 2026: "a vertical line going down on the roots photo … a stripe"): two halves laid side by side always leave a line where
   they meet, so each photo stays one whole photo until its own gates start to part; the next photo shows only in the opening gap */
html.t-doors.jr-on #eat {
  --a-whole: calc(1 - min(1, var(--e) * 2000));
  --b-whole: calc(min(1, var(--e) * 2000) * (1 - min(1, var(--e2) * 2000)));
  --c-whole: calc(min(1, var(--e2) * 2000) * (1 - min(1, var(--e3) * 2000)));
}

html.t-doors.jr-on #eat .jr__shot--a:not(.jr__door) {
  opacity: max(0.001, var(--a-whole));
}

html.t-doors.jr-on #eat .jr__shot--a.jr__door {
  opacity: calc(1 - var(--a-whole));
}

html.t-doors.jr-on #eat .jr__shot--b:not(.jr__door) {
  visibility: visible;
  opacity: max(0.001, var(--b-whole));
  clip-path: inset(0 max(0%, calc(50% - var(--e) * 52%)));
}

html.t-doors.jr-on #eat .jr__door--of-b {
  visibility: visible;
  opacity: min(1, calc(var(--e2) * 2000));
}

html.t-doors.jr-on #eat .jr__row--c:not(.jr__door) {
  visibility: visible;
  opacity: max(0.001, var(--c-whole));
  clip-path: inset(0 max(0%, calc(50% - var(--e2) * 52%)));
}

html.t-doors.jr-on #eat .jr__door--of-c {
  opacity: min(1, calc(var(--e3) * 2000));
}

html.t-doors.jr-on #eat .jr__row--d {
  opacity: min(1, calc(var(--e3) * 40));
}

/* the next photo only ever shows in the opening gap, never through the soft edges of the gates in front */
html.t-doors.jr-on #eat .jr__row--d {
  clip-path: inset(0 max(0%, calc(50% - var(--e3) * 52%)));
}

/* (owner, 1 Nov 2026: "Fix that line where the two halves meet now forever. I don't ever want to see them again"): on every gate of the
   landing page: no gold line and no shadow at the join, and a closed photo is one whole photo, so there is no join to see */
html .es .es__half,
html .gg .gg__half {
  box-shadow: none;
}

.es--wed-whole .es__scene--wed .es__half--l,
.es--conf-whole .es__scene--conf .es__half--l,
.es--pf-whole .es__scene--pf .es__half--l,
.gg--whole .gg__half--l {
  flex: 0 0 100%;
}

.es--wed-whole .es__scene--wed .es__half--r,
.es--conf-whole .es__scene--conf .es__half--r,
.es--pf-whole .es__scene--pf .es__half--r,
.gg--whole .gg__half--r {
  display: none;
}

/* the swap from whole photo to gates happens at once, never a fade through black */
html.t-doors.jr-on #eat .jr__shot,
html.t-doors.jr-on #eat .jr__row {
  transition: none !important;
}

/* (owner, 1 Nov 2026: "I don't like the word restaurant reflecting in the pond … You can have the roots shadow on the water upside down"):
   landing page: only Roots mirrors in the water */
html body #eat .reflection__mirror--logo img {
  clip-path: inset(0 0 25% 0);
}

html body #eat .reflection__mirror--logo {
  translate: 0 -24%;
}

/* (owner, 1 Nov 2026: "the nymph about a little bit up"): the steel woman stands higher in her photo */
/* (6 Nov 2026) object-position was 50% 82%; always overridden by css/home-journey.css, so its value is here now */
html body main #eat .jr__shot .jr__side--l img {
  object-position: var(--jr-pos);
}

/* (owner, 1 Nov 2026: "Option two, that the full cell phone … Keep the full phone"): phones: each suite's film fills the screen under the
   suite's name; the price and river follow when the visitor scrolls. This replaces the 21 Oct whole-film-across-the-width rule on phones */
@media (max-width: 640px) {
  html body .ps.ps--wide .ps__media video {
    block-size: calc(100svh - 178px) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    inline-size: 100vw !important;
  }
}

/* (owner, 1 Nov 2026: "That's how all the videos should play on the phone … on the laptop version, they also fill the whole screen"): every
   landscape film: phones: the screen under its heading, cropped to fit; laptops: edge to edge. Upright films keep their own shape */
@media (max-width: 640px) {
  html body main .rd-open__video {
    block-size: calc(100svh - 271px) !important;
    max-block-size: none;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  html body main .u1__film {
    inline-size: 100vw !important;
    block-size: calc(100svh - 125px) !important;
    max-block-size: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  html body main :is(.gallery__video, .wl__video, .d2-ev__media--wide .d2-ev__video),
  html body main .rd__film:not(.rd__film--upright) .rd__video,
  html body main .fb-film .rd__video {
    inline-size: 100vw;
    block-size: calc(100svh - 90px);
    max-block-size: none;
    aspect-ratio: auto;
    object-fit: cover;
    /* (owner, 2 Nov 2026: "a big black gap on the left-hand side"): Safari ignored the side margins on these films inside their .vx box, so the film began at the column and ran off the right; moved with left instead, which Safari and Chrome both follow */
    position: relative;
    left: calc(50% - 50vw);
    margin-inline: 0;
    max-inline-size: none;
    transform: none;
    scale: none;
  }
}

@media (min-width: 641px) {
  html body main :is(.wl__video, .d2-ev__media--wide .d2-ev__video),
  html body main .rd__film:not(.rd__film--upright) .rd__video {
    inline-size: 100vw;
    max-inline-size: none;
    block-size: auto;
    max-block-size: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    /* (owner, 2 Nov 2026: "a big black gap on the left-hand side"): Safari ignored the side margins on these films inside their .vx box, so the film began at the column and ran off the right; moved with left instead, which Safari and Chrome both follow */
    position: relative;
    left: calc(50% - 50vw);
    margin-inline: 0;
    transform: none;
    scale: none;
  }
}

/* (owner, 2 Nov 2026: "The picture is not in the center of the page"): the reveal's clip held these films to the narrow column, so their sides were cut and showed black */
html body main :is(.wl__film, .rd__film, .pf-films__fig).v5-unveil:has(video) {
  clip-path: none !important;
}

html body main :is(.wl__film, .rd__film, .wl__fig):has(video) {
  transform: none;
  scale: none;
  max-inline-size: none;
}

/* (owner, 1 Nov 2026: "Why won't you have whispering tree, then romantic dinner in the forest in one line?"): laptops: the dinner's whole name on one line */
@media (min-width: 641px) {
  html body .rd-open__h {
    display: block !important;
    inline-size: auto;
    max-inline-size: none;
    white-space: nowrap;
  }

  html body .rd-open__h span {
    display: inline;
  }

  html body .rd-open__h span + span::before {
    content: ' ';
  }
}

/* (owner, 1 Nov 2026: "I cannot see the red chandelier in the photo … if the name is red chandelier, I should see the chandelier"): landing page, Eat: its tile centres on the chandelier */
html body #eat .jr__row--c .jr__tile:nth-of-type(3) img {
  object-position: 83% 40%;
}

/* accessibility: the Gallery link in full gold, and a tap area of at least 24 px */
html body .gg .gg__options {
  color: #f3d792;
  opacity: 1;
  padding-block: 12px;
}

html body .gg .gg__options * {
  color: #f3d792 !important;
  opacity: 1 !important;
}

html.gg-on .gg .gg__peek {
  opacity: 1;
}

/* (owner, 2 Nov 2026: "the three of them next to each other"): Forest Breakfast on the landing page: three upright photos side by side on a
   laptop, melting into one another as the rows above do; a phone is too narrow for that, so it shows one (below). The top and foot fade on the row itself, so no photo's edge shows in the fade */
html.jr-on #eat .jr__row--d {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
}

html.jr-on #eat .jr__row--d .jr__tile:nth-of-type(n) {
  margin: 0;
}

html.jr-on #eat .jr__row--d .jr__tile:nth-of-type(n) .jr__tile-art {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (min-width: 641px) {
  html.jr-on #eat .jr__row--d {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  html.jr-on #eat .jr__row--d .jr__tile + .jr__tile {
    margin-inline-start: -12%;
  }

  html.jr-on #eat .jr__row--d .jr__tile img {
    object-position: 50% 62%;
  }

  html.jr-on #eat .jr__row--d .jr__tile + .jr__tile .jr__tile-art {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%);
    mask-image: linear-gradient(to right, transparent, #000 10%);
  }
}

/* (owner, 3 Nov 2026, iPhone: "I don't want to see just a black table at the top … I think it should be the one photo"): a phone shows one whole
   photo, the table for two under the branches, with the forest around it; the three stay side by side on a laptop */
@media (max-width: 640px) {
  html.jr-on #eat .jr__row--d {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  html.jr-on #eat .jr__row--d .jr__tile:not(:nth-of-type(2)) {
    display: none;
  }

  html.jr-on #eat .jr__row--d .jr__tile:nth-of-type(2) img {
    object-position: 58% 50%;
  }
}

/* (owner, 2 Nov 2026: "stretch the photos of edge to edge. That's for the whole website"): each single large landscape photo runs from the
   left edge of the screen to the right, phone and laptop; rivers, carousels, gallery tiles and small team photos keep their sizes */
html body main .u1__fig:not(.u1__fig--film) img {
  inline-size: 100vw;
  max-inline-size: none;
  max-block-size: none;
  object-fit: cover;
}

html body main .rg__fig {
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: calc(50% - 50vw) !important;
}

html body main .rg__fig img {
  inline-size: 100%;
  border-radius: 0 !important;
  box-shadow: none;
}

html body main .dc-sign :is(.photo, picture, img) {
  max-inline-size: none;
  inline-size: 100vw;
}

html body main .dc-sign .photo {
  margin-inline: calc(50% - 50vw) !important;
}

/* (owner, 2 Nov 2026: "Yes, stretch them"): the Treats menu: each photo edge to edge */
html body main .tm__item img {
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: calc(50% - 50vw) !important;
  block-size: auto;
  border-radius: 0 !important;
}

/* (owner, 2 Nov 2026: "the balloon photo at the top should be stretched"): Activities: the heading, then the balloon photo edge to edge; the rest of the page stays as it was */
html[data-page="/forum-homini-hotel/activities-and-news/"] main .hero--filmstrip .hero__grid {
  display: block !important;
  max-inline-size: none !important;
  inline-size: 100% !important;
  padding-inline: 0 !important;
}

html[data-page="/forum-homini-hotel/activities-and-news/"] main .hero--filmstrip .hero__platecell,
html[data-page="/forum-homini-hotel/activities-and-news/"] main .hero--filmstrip .hero__plate,
html[data-page="/forum-homini-hotel/activities-and-news/"] main .hero--filmstrip .hero__plate :is(.photo__frame, picture, img) {
  display: block;
  inline-size: 100vw !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-page="/forum-homini-hotel/activities-and-news/"] main .hero--filmstrip .hero__plate img {
  block-size: auto !important;
}

/* the same layout as the indulgence pages: the heading centred, the same space above it and under it, then the photo */
html[data-page="/forum-homini-hotel/activities-and-news/"] main .hero--filmstrip h1 {
  text-align: center;
  inline-size: 100%;
  padding-inline: var(--margin, 20px);
  margin: 0 !important;
}

html[data-page="/forum-homini-hotel/activities-and-news/"] main .hero--filmstrip .layer-band__grid {
  display: block !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  padding-block: var(--gap-heading) !important;
  padding-inline: 0 !important;
  margin: 0 !important;
}

/* (owner, 2 Nov 2026: "the heading is too close to the carousel"): All activities: the heading's space above the ring */
html body main #all-activities .jb__head {
  margin-block-end: calc(var(--gap-heading) * 2) !important;
}

/* (owner, 2 Nov 2026: "one event at a time, all under each other … You don't put them next to each other"): Activities: each partner one under the other, photo first, words centred, no boxes; a large photo runs edge to edge */
html body main .pc__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--gap-heading) * 2) !important;
}

html body main .pc__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: 'photo' 'head' 'body' !important;
  justify-items: center;
  inline-size: 100%;
  grid-column: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center;
}

/* (owner, 2 Nov 2026: "all the photos must be the same size. So the smallest photo will then dictate"): one size for all; then "It's got to be bigger photos on the laptop version": 860 px wide on a laptop, the full width on a phone */
html body main .pc__card :is(.pc__big, .pc__photo) {
  inline-size: min(100%, 860px);
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

html body main .pc__card :is(.pc__head, .pc__body) {
  justify-items: center;
  max-inline-size: 860px;
  margin-inline: auto;
  text-align: center;
}

html body main .pc__list {
  list-style-position: inside;
}

html body main .pc__go,
html body main .pc__go:visited {
  color: inherit;
  text-decoration: none;
  -webkit-text-fill-color: currentcolor;
}

/* the words at the top of these three photos stay whole */
html body main :is(#game-drives, #artful-tones, #beach-and-bush) img,
html body main .a1__fig:is([data-activity="game-drives"], [data-activity="artful-tones"], [data-activity="beach-and-bush"]) img {
  object-position: 50% 0;
}

html body main .a1 {
  margin-block-start: -60px !important;
}

/* (owner, 2 Nov 2026: "The photos are far too small … This is not the look and feel of our website"): on a laptop every activity photo runs edge to edge, as the rest of the website; the phone stays as it is */
@media (min-width: 641px) {
  html body main .pc__card :is(.pc__big, .pc__photo),
  html body main .a1__fig {
    inline-size: 100vw !important;
    max-inline-size: none;
  }

  html body main .pc__card :is(.pc__big, .pc__photo) {
    margin-inline: calc(50% - 50vw);
  }
}

/* (owner, 2 Nov 2026, Hercules: "difficult to read" → "option one"): no slanted font anywhere: the names, questions and lines in the clean reading font */
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) body :is(em, i, cite, address) {
  font-style: normal;
}

/* (owner, 2 Nov 2026: "The headings are all over the pictures. You can't even see the pictures"): phones, gallery page: two across, each name under its photo */
@media (max-width: 899px) {
  html body main .gallery .gt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 14px 8px;
  }

  html body main .gallery .gt__item {
    aspect-ratio: auto;
    grid-column: auto;
  }

  html body main .gallery .gt__item--wide {
    grid-column: span 2;
  }

  html body main .gallery .gt__tile {
    position: static;
    overflow: visible;
  }

  html body main .gallery .gt__tile .gt__art {
    position: relative;
    inset: auto;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
  }

  html body main .gallery .gt__item--wide .gt__art {
    aspect-ratio: 16 / 9;
  }

  html body main .gallery .gt__name {
    position: static;
    display: block;
    padding: 6px 2px 0;
    background: none;
    font-size: 0.9375rem !important;
    line-height: 1.2;
    text-align: center;
  }
}

/* the same names on the landing page's Gallery tiles, phones: back to their size before the 2 Nov font change */
@media (max-width: 899px) {
  html body main .gg .gt__name {
    font-size: 0.875rem !important;
  }
}

/* phones: these small labels back to their size before the 2 Nov font change */
@media (max-width: 899px) {
  html body main .act-lists .pc__label,
  html[data-page='/forum-homini-hotel/activities-and-news/'] body main .pc__label {
    font-size: 0.875rem !important;
  }
}

/* (owner, 2 Nov 2026: "Go see where we have such big fonts" → "Yes, all four"): text that is not a heading stands under the headings: prices, check-in times, legal numbers, the small Conferences headings */
html body :is(.rd__price-line:not(.rd__menu-line), .terms__time-v, .times__v, .clause__n, h3.cf26__card-h) {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem) !important;
}

/* (owner, 2 Nov 2026: "It's supposed to be all landscape photos … It will be more rows … put it on the black"): laptops, gallery page: five across in three
   rows, every photo landscape, each name on the black under its photo; Lounge and Team two wide so the rows come out even */
@media (min-width: 900px) {
  html body main .gallery .gt {
    container-type: inline-size;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 18px 12px;
  }

  html body main .gallery .gt__item {
    position: relative;
    aspect-ratio: auto;
    block-size: auto;
    grid-column: auto;
  }

  html body main .gallery :is(.gt__item--wide, .gt__item--last) {
    grid-column: span 2;
  }

  html body main .gallery .gt__tile {
    position: static;
    display: block;
    block-size: auto;
    overflow: visible;
  }

  /* every photo the height of a landscape tile, the two wide ones too */
  html body main .gallery .gt__tile .gt__art {
    position: relative;
    inset: auto;
    display: block;
    aspect-ratio: auto;
    block-size: calc((100cqw - 48px) / 5 * 0.75);
    overflow: hidden;
    border-radius: 4px;
  }

  html body main .gallery .gt__item--last .art__img {
    object-position: 50% 12%;
  }

  html body main .gallery .gt__name {
    position: static;
    display: block;
    padding: 8px 4px 0;
    background: none;
    font-size: 1rem !important;
    line-height: 1.2;
    text-align: center;
  }
}

/* (owner, 2 Nov 2026: "Write it in gold and then in the same, yeah, gold and the same size of 1,500"): the Hotel guests line as the price above it */
html body main .rd__price-line.rd__breakdown {
  font-family: var(--face-display) !important;
  font-weight: 600;
  color: #f3d792 !important;
  -webkit-text-fill-color: #f3d792;
}

/* (owner, 2 Nov 2026: "It was a beautiful heading … It's showing off the carousel"): Roots: the carousel headings back to the gold serif headings they were before the font change */
html[data-page='/rootsrestaurant/dining-concept/'] body main .pc__label {
  font-family: var(--face-display) !important;
  font-size: var(--fs-h2) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* (owner, 2 Nov 2026: "the sentences that's just going over must be closer to one another … The hotel guests can be a little bit further away … Look at the big
   gap"): the lines of a sentence close together, Hotel guests a small step away, the even gap before the film */
html body main .rd__price-line.rd__menu-line {
  line-height: 1.3 !important;
}

html body main .rd__price .rd__price-line.rd__breakdown {
  margin-block-start: 12px !important;
}

html body main .rd:has(> .wrap > .rd__price):has(+ .rd--films) {
  padding-block-end: 0 !important;
}

html body main .rd:has(> .wrap > .rd__price) + .rd--films {
  padding-block-start: var(--gap-item, 24px) !important;
}

/* (owner, 2 Nov 2026: "a big black gap on the left-hand side of the video"): in Safari a wide film pushed its grid column wider, so the whole column slid to the right of
   the page and the film with it; the columns now stay their own width and the film alone stretches edge to edge, in Safari and Chrome */
html body main .rd__films,
html body main .wl__films,
html body main .pf-films {
  grid-template-columns: minmax(0, 1fr);
}

html body main :is(.rd__film, .wl__film, .pf-films__fig):has(video) {
  min-inline-size: 0;
  inline-size: auto;
}

/* (owner, 2 Nov 2026: "that film is now zoomed in. It's so big that I can't even focus"): on a laptop a film at the full width stood taller than the screen under the top
   bar; the Forest Breakfast and romantic dinner films now fit the screen whole, centred */
@media (min-width: 641px) {
  html body main .rd__film:not(.rd__film--upright) .rd__video {
    --film-w: min(100vw, calc((100svh - 100px) * 16 / 9));
    inline-size: var(--film-w) !important;
    left: calc(50% - var(--film-w) / 2) !important;
  }
}

/* (owner, 2 Nov 2026: "everything is close up … It's got to be normal, the way I gave it to you"): on a phone the Forest Breakfast film plays whole, in its own shape, not cropped to the tall screen */
@media (max-width: 640px) {
  html[data-page='/forest-breakfast/'] body main .rd__film:not(.rd__film--upright) .rd__video {
    block-size: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
  }
}

/* (owner, 2 Nov 2026, Forest Breakfast: "Is that world-class?"): the booking button with WhatsApp and Call under it stands in the middle of the page, under the photos */
html body main .ha.ha--center {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}

/* (owner, 3 Nov 2026: "you cannot put two next to each other … different sizes of headings … There's no gaps"): conferences: one calm centred column on
   every screen and three heading sizes only: the section (.cf26__h), the block under it, the small gold label. Sections and blocks stand one big gap apart,
   a heading stays close to its own words. The three rooms stay across (her wish, 25 Oct). */
html body .cf26 .cf26-fold,
html body .cf26 .cf26__table-wrap,
html body .cf26 .cf26__includes,
html body .cf26 .cf26__card {
  inline-size: 100%;
  max-inline-size: 48rem;
  margin-inline: auto;
}

html body .cf26 :is(.cf26__rates, .cf26__days, .cf26__pair) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-section);
}

html body .cf26 :is(.cf26__table-wrap, .cf26__day, .cf26__includes, .cf26__card, .cf26__part) {
  display: grid;
  gap: var(--gap-item);
  margin-block: 0;
  padding: 0;
  border: 0;
  text-align: center;
}

html body .cf26 .cf26__part {
  gap: var(--s-2);
}

html body .cf26 :is(.cf26__table-wrap, .cf26__day, .cf26__includes) {
  gap: var(--s-3);
}

html body .cf26 .cf26__includes {
  margin-block-start: var(--gap-section);
}

html body .cf26 :is(.cf26__h--day, .cf26__pair--gap) {
  margin-block-start: var(--gap-section);
}

html body .cf26 .cf26__card > .cf26__h {
  margin-block: 0;
}

html body .cf26 :is(.cf26__day-name, h3.cf26__card-h) {
  margin: 0;
  background: none;
  color: #f3d792;
  font-family: var(--face-display);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem) !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  -webkit-text-fill-color: currentColor;
}

html body .cf26 :is(.cf26__list-h, .cf26__dinner, .cf26__addon strong, .cf26__period, .ic-card__list-h) {
  margin: 0;
  color: #e6c27a;
  font-family: var(--face-text) !important;
  font-size: var(--fs-s) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

html body .cf26 .cf26__period span {
  color: #cfc6b8;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* lists stand in the middle of the column, each gold point beside its words */
html body .cf26 ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto !important;
  text-align: start;
}

/* (owner, 3 Nov 2026: "have a little open space before you say arrival, tea … It's too squished up"): every list stands one heading gap under its heading */
html body .cf26 :is(.cf26__day-name, .cf26__list-h, .ic-card__list-h, .cf26__includes > .cf26__day-name) + ul,
html body .cf26 :is(.cf26__list-h, .ic-card__list-h) {
  margin-block-end: 0;
}

html body .cf26 :is(.cf26__includes, .cf26__part, .ic-card__list) > ul,
html body .cf26 .cf26__ol li > ul {
  margin-block-start: var(--gap-heading) !important;
}

html body .cf26 :is(.cf26__includes, .cf26__part) {
  gap: 0;
}

html body .cf26 .cf26__part > :is(.cf26__text, .cf26__addon, .cf26__note) {
  margin-block-start: var(--s-2);
}

html body .cf26 .cf26__part + .cf26__part {
  margin-block-start: var(--gap-item);
}

html body .cf26 .ic-card__list-h {
  margin-block-start: var(--s-4);
}

html body .cf26 :is(.ic-card, .ic-card__lists, .ic-card__list) {
  inline-size: 100%;
  text-align: center;
}

html body .cf26 :is(.cf26__text, .cf26__note, .cf26__addon, .cf26__ol) {
  text-align: center;
}

html body .cf26 .cf26__ol {
  display: grid;
  gap: var(--gap-item);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* (owner, 2 Nov 2026, Hercules: "option one"): every name that was in the slanted font is in the clean reading font, also where a later rule asked for the heading font; Dare2Dream and the butterfly story keep theirs (dare2dream-font.css) */
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .act__quote {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .activities__ask {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .crossing__line {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .dates__caption em {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .dc-review__credit {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .dc-review__fig figcaption {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .diptych__voice em {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .dm__bf {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .dm__fly-line {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .dm__fly-s {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .enq__or {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .gt__name {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hero__sky-tagline {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hours__notes {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hs__sub {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .inline-note em {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .jb__story {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .jb__sub {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .jb__switch a {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .jr__tile-name {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .layer-band__tagline {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pc__h-sub {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pc__label {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pc__lede {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pc__price-note {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pc__story {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* (9 Nov 2026) the rule forcing the plain font on the ☰ menu headings (.pmg__h) is gone: they are gold Cormorant
   everywhere now, see "── phone-menu ──" (Karina's list 2.6) */

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pr__cap {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pr__note {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .quote__text {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .review__letter {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .rm__memoir {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sc__sum {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sd__sub {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sh__lede {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .site-header .mm__gallery-s {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sou__sub {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sp__line {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sr__note {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .th__glass-story {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .th__lede {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .v5pre__cap {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .wl__lede {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) :is(.jb__name, .pc__name, .songs__dish, .credits__name, .d2-ev__title, .venue__name, .capacity__caption, .hz__name,
  .enquiry__legend, .terms__h3, .sq__list summary, .qa__list summary, .d2-faq__list summary) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) :where(em, i, cite) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main :is(p.pc__price-note, p.dc-story__lede, p.dc-story__body, p.dc-poster__words, blockquote.dc-review__quote, blockquote.dc-review__quote p) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main p.hs__sub.hs__sub {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main p.pc__price-note.pc__price-note {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main p.sou__sub.sou__sub {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* (9 Nov 2026) not the ☰ menu's group names ([data-c-phone-menu]): they are gold Cormorant now (Karina's list 2.6) */
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .mega-h:not([data-c-phone-menu]) {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sd__name {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .wed26__space-name {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .features__text {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pm__legend {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hr__quote {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hero__line {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .cf26__dinner {
  font-family: var(--face-text) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* (owner, 2 Nov 2026: "The fonts looks far too big"): at the same setting this font looks bigger than the slanted one, so the names take the reading size */
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .cf26__dinner {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .features__text {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .gt__name {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hero__line {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hr__quote {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .inline-note em {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .jr__tile-name {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pc__label {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pc__price-note {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pm__legend {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .wed26__space-name {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) :where(em, i, cite) {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main :is(p.pc__price-note, p.dc-story__lede, p.dc-story__body, p.dc-poster__words, blockquote.dc-review__quote, blockquote.dc-review__quote p) {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main p.pc__price-note.pc__price-note {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .sd__name {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .features__text {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .hr__quote {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .wed26__space-name {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .pm__legend {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

/* (owner, 2 Nov 2026: "The fonts looks far too big"): at the same setting this font looks bigger than the slanted one, so the names take the reading size */

html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) .cf26__dinner {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}

/* the names under the carousels and plates: one step above the reading size */
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) :is(.jb__name, .pc__name) {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important;
  line-height: 1.3 !important;
}

/* (owner, 2 Nov 2026: "the questions … massive big font … fix that everywhere"): every question at the reading size */
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main .sq summary,
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main .sq details summary,
html:not([data-page="/dare2dream/"], [data-page="/dare2dream-menu/"], [data-page^="/butterfly"]) main :is(.qa, .dc-qa, .faq, [class*="questions"]) summary {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
}
/* (owner, 2 Nov 2026: "except for at Karina's Dare to Dream … Do not change my Dare to Dream font"): Dare2Dream, its menu and the butterfly story keep the slanted heading font; the same rules as before option one, on these pages only */
:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) :is(.jb__name, .pc__name, .songs__dish, .credits__name, .d2-ev__title, .venue__name, .capacity__caption, .hz__name,
  .enquiry__legend, .terms__h3, .sq__list summary, .qa__list summary, .d2-faq__list summary) {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main p.hs__sub.hs__sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main p.sou__sub.sou__sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main p.pc__price-note.pc__price-note {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) :where(em, i, cite) {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .sr__note {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .th__lede {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .th__glass-story {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .quote__text {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .pc__label {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .pc__story {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .layer-band__tagline {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .hero__sky-tagline {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .v5pre__cap {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .jb__switch a {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .crossing__line {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .review__letter {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .pr__note {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .pr__cap {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .sp__line {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .gt__name {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .hours__notes {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .pc__lede {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .pc__h-sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .pc__price-note {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .rm__memoir {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .sc__sum {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .dm__fly-line {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .dm__fly-s {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .dm__bf {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .jb__sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .sd__sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .hs__sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .sou__sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .jr__tile-name {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .wl__lede {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .act__quote {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .enq__or {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-swans__see {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-swans__sub {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-lounge figcaption {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-ev__hint {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-ev__note.d2-ev__note--foot {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-same-note {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main p.layer-band__tagline.layer-band__tagline {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main :is(p.d2-intro__lede, p.pc__price-note, p.songs__note, p.d2-ev__hint, p.d2-ev__note--foot, p.d2-same-note, h2.d2-swans__h, p.d2-lede.d2-gold-pale) {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main p.d2-intro__lede.d2-intro__lede {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-intro__trio {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-act__song {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-intro__memoir {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .d2-intro__lede {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main p.d2-lede.d2-ebook {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main p.d2-lede.d2-ebook a {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .sh__lede {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .dc-review__fig figcaption {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .dc-review__credit {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) main :is(p.pc__price-note, p.dc-story__lede, p.dc-story__body, p.dc-poster__words, blockquote.dc-review__quote, blockquote.dc-review__quote p) {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

:is(html[data-page="/dare2dream/"], html[data-page="/dare2dream-menu/"], html[data-page="/butterfly/"], html[data-page="/butterfly/read/"], html[data-page="/butterfly/listen/"]) .activities__ask {
  font-family: var(--face-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* finishing.css · Version 5: Hercules's finishing touches (Version 4 eureka.css), on our design */

/* a rising line keeps room for the tails of g, y and p: its mask reaches a little below the line by a clip, not by size,
   so the heading keeps its exact height and place */
.v5-mask-line-mask {
  overflow: visible !important;
  clip-path: inset(-0.2em -0.3em -0.22em -0.3em);
}

/* large photos and films unveil from below as they arrive (finishing.ts adds .v5-unveil, then .is-in) */
.v5-unveil {
  clip-path: inset(22% 0% 0% 0%);
  opacity: 0;
  transition: clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s linear;
}

.v5-unveil :is(img, video) {
  transform: scale(1.14);
  transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.v5-unveil.is-in {
  clip-path: inset(0% 0% 0% 0%);
  opacity: 1;
}

.v5-unveil.is-in :is(img, video) {
  transform: none;
}

/* pages glide into each other instead of flashing (browsers that know page transitions; others simply change page).
   Laptops only: on phones the glide was switched off on 9 Oct 2026 (owner: "Why do I have to tap twice": the phone kept
   showing the old page until the new one had arrived), and stays off. */
@media (pointer: fine) and (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root) {
  animation: v5-vt-out 0.55s cubic-bezier(0.77, 0, 0.175, 1) both;
}

::view-transition-new(root) {
  animation: v5-vt-in 0.85s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes v5-vt-out {
  to {
    opacity: 0.25;
    transform: scale(0.97) translateY(-2%);
  }
}

@keyframes v5-vt-in {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(8%);
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .v5-unveil,
  .v5-unveil :is(img, video) {
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}

/* (owner, 25 Oct 2026: "There must be two, the one that's always at the top and then the one with the options inside it on that
   page"): a page with the row of options under the top bar (the suites, events, hotel pages, upgrades, dinners) starts below
   both, so the row never covers the top photo or heading (her rule: the top bar never on the photo) */
:root {
  --bar2-h: 52px;
}
@media (min-width: 768px) {
  :root {
    --bar2-h: 64px;
  }
}
main:has(> .sn--floating, > [data-jumpbar]):not(:has(.jb--page)) {
  padding-block-start: var(--bar2-h);
}
/* hints.css · Version 5: the two one-time hints (hints.ts), in our gold */

/* 1 · over the carousel, low in the middle: a gold pill with a hand moving across */
.v5-hint {
  position: absolute;
  inset-block-end: 18%;
  inset-inline-start: 50%;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
  color: #1d1405;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.8);
  font: 600 0.95rem/1 var(--face-text);
  white-space: nowrap;
  pointer-events: none;
  translate: -50% 0;
  animation: v5-hint-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: opacity 400ms linear;
}

.v5-hint.is-gone {
  opacity: 0;
}

.v5-hint__hand {
  display: inline-block;
  font-size: 1.15rem;
  animation: v5-hint-hand 1.4s ease-in-out infinite;
}

@keyframes v5-hint-in {
  from {
    opacity: 0;
    translate: -50% 10px;
  }
}

@keyframes v5-hint-hand {
  0%,
  100% {
    transform: translateX(-8px) rotate(-8deg);
  }

  50% {
    transform: translateX(8px) rotate(8deg);
  }
}

/* (owner, 31 Oct 2026, "Option 1: stone"): no pill, Hercules's stone with its gold label, as on the laptop */
.v5-hint--stone {
  gap: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

.v5-hint__axe {
  width: 44px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.7));
  transform-origin: 50% 90%;
  animation: v5-hint-tap 1.5s ease-in-out infinite;
}

.v5-hint__view {
  padding: 7px 12px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
  color: #1d1405;
  font: 600 0.85rem/1 var(--face-text);
  white-space: nowrap;
  translate: -4px 22px;
}

@keyframes v5-hint-tap {
  0%,
  100% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(12deg);
  }
}

/* 2 · the floating bars glow softly gold twice */
.v5-glow {
  animation: v5-glow 1.3s ease-in-out 2;
}

@keyframes v5-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(243 215 146 / 0);
  }

  50% {
    box-shadow: 0 0 0 4px rgb(243 215 146 / 0.55), 0 0 26px 6px rgb(243 215 146 / 0.45);
  }
}

/* ── book-button ── */
/* (6 Nov 2026) color was var(--on-copper); always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) min-block-size was var(--book-h); always overridden by css/site.css, so its value is here now */
.book[data-c-book-button] {
  --book-h: 52px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 36px;
  padding-inline: calc(var(--s-5) - 1.5px);
  border: 1.5px solid var(--copper);
  border-radius: var(--r-pill);
  background-color: var(--copper);
  color: #1d1405;
  font-family: var(--face-text);
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  line-height: var(--lh-button);
  letter-spacing: var(--tr-button);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-micro) linear, border-color var(--t-micro) linear;
}
/* The faint static grain inside the fill (the hotel's copper light fittings, §8.8) */
.book[data-c-book-button]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grain);
  background-size: 160px;
  opacity: 0.14;
  pointer-events: none;
}
.book[data-c-book-button]:visited {
  color: var(--on-copper);
}
.book[data-c-book-button]:hover,
.book[data-c-book-button]:focus-visible {
  background-color: var(--copper-hover);
  border-color: var(--copper-hover);
}
/* On light grounds the boundary is rust (10.49:1); the fill alone is 2.42:1 on paper */
.book--light[data-c-book-button],
.book--light[data-c-book-button]:hover,
.book--light[data-c-book-button]:focus-visible {
  border-color: var(--rust);
}
/* On dark grounds the focus ring is ember (the ground's --focus); on light, soil */
.book--dark[data-c-book-button] {
  --focus: var(--ember);
}
/* One line whenever it fits; a long label ("Book accommodation online") wraps, balanced, rather than
     overflow a narrow column (320 px reflow) */
.book[data-c-book-button] {
  max-inline-size: 100%;
}
.book__label[data-c-book-button] {
  display: block;
  white-space: normal;
  text-wrap: balance;
  padding-block: var(--s-2);
}
.book[data-c-book-button] .book__icon {
  inline-size: 16px;
  block-size: 16px;
  stroke-width: 1.75;
}
.book--sm[data-c-book-button] {
  --book-h: 44px;
  padding-inline: calc(var(--s-5) - 1.5px - 4px);
}
.book--lg[data-c-book-button] {
  --book-h: 60px;
  padding-inline: calc(var(--s-5) - 1.5px);
  font-size: var(--fs-m);
}
@media (min-width: 641px) {
  .book--lg[data-c-book-button] {
    padding-inline: calc(var(--s-6) - 1.5px);
  }
}
/* Quiet: the outline secondary (header). Dark ground: naledi words and a soft naledi line; light: ink and rust */
.book--quiet[data-c-book-button] {
  border-color: color-mix(in srgb, var(--naledi) 42%, transparent);
  background-color: transparent;
  color: var(--naledi);
}
.book--quiet[data-c-book-button]::before {
  display: none;
}
.book--quiet[data-c-book-button]:visited {
  color: var(--naledi);
}
.book--quiet[data-c-book-button]:hover,
.book--quiet[data-c-book-button]:focus-visible {
  border-color: var(--naledi);
  background-color: color-mix(in srgb, var(--naledi) 12%, transparent);
}
.book--quiet[data-c-book-button].book--light,
.book--quiet[data-c-book-button].book--light:visited {
  border-color: var(--rust);
  color: var(--ink);
}
.book--quiet[data-c-book-button].book--light:hover {
  background-color: var(--paper-deep);
}
.book--quiet[data-c-book-button] .book__icon {
  opacity: 0.8;
}
/* (6 Nov 2026) inline-size was 100%; always overridden by css/site.css, so its value is here now */
.book--full[data-c-book-button] {
  --book-h: 56px;
  display: flex;
  inline-size: 100%;
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .book[data-c-book-button] {
      transition:
        background-color var(--t-micro) linear,
        border-color var(--t-micro) linear,
        scale var(--t-press) var(--ease-settle);
    }
    .book[data-c-book-button]:active {
      scale: 0.98;
    }
  }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .book[data-c-book-button]::before {
    display: none;
  }
}
@media (forced-colors: active) {
  .book[data-c-book-button] {
    border-color: ButtonText;
  }
}
@media print {
  .book[data-c-book-button] {
    border-color: currentColor;
    background: none;
  }
}

/* ── enquire-menu ── */
.enq[data-c-enquire-menu] {
  position: relative;
  display: flex;
}
/* (6 Nov 2026) color was var(--on-copper); always overridden by css/site.css, so its value is here now */
.enq__btn[data-c-enquire-menu] {
  --focus: var(--naledi);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding-inline: 20px 16px;
  border-radius: var(--r-pill);
  background: var(--copper);
  color: #1d1405;
  font-family: var(--face-text);
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  line-height: 1;
  letter-spacing: var(--tr-button);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-micro) linear;
}
.enq__btn[data-c-enquire-menu]:hover,
.enq__btn[data-c-enquire-menu][aria-expanded=true] {
  background: var(--copper-hover);
}
.enq__btn[data-c-enquire-menu] .enq__chev {
  transition: rotate var(--t-micro) linear;
}
.enq__btn[data-c-enquire-menu][aria-expanded=true] .enq__chev {
  rotate: 180deg;
}
/* ── The chooser: a light panel under the button, right-aligned; 48 px rows ─────────────────────────── */
.enq__pop[data-c-enquire-menu] {
  --fg: var(--ink);
  --link: var(--ink);
  --focus: var(--soil);
  position: absolute;
  inset-block-start: calc(100% + 18px);
  inset-inline-end: -4px;
  z-index: var(--z-panel);
  inline-size: max-content;
  min-inline-size: 17rem;
  max-inline-size: calc(100vw - 2 * var(--margin));
  padding: var(--s-2);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  box-shadow: 0 18px 50px rgb(14 7 5 / 0.28), 0 2px 8px rgb(14 7 5 / 0.12);
}
.enq__list[data-c-enquire-menu] {
  display: grid;
}
.enq__item--contact[data-c-enquire-menu]:first-of-type,
li[data-c-enquire-menu]:not(.enq__item--contact) + .enq__item--contact[data-c-enquire-menu] {
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-2);
  border-block-start: 1px solid var(--hairline);
}
.enq__link[data-c-enquire-menu] {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 48px;
  padding-inline: var(--s-4);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--fs-button);
  font-weight: var(--wt-ui);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-micro) linear;
}
.enq__link[data-c-enquire-menu]:visited {
  color: var(--ink);
}
.enq__link[data-c-enquire-menu]:hover {
  background: var(--paper-deep);
}
.enq__link[data-c-enquire-menu]:focus-visible {
  outline-offset: -2px;
}
.enq__link[data-c-enquire-menu] .icon {
  color: var(--soil);
}
.enq__link[data-c-enquire-menu] .enq__arrow {
  margin-inline-start: auto;
  padding-inline-start: var(--s-4);
  box-sizing: content-box;
  color: var(--ink-muted);
}
.enq__item--contact[data-c-enquire-menu] .enq__link[data-c-enquire-menu] {
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .enq__pop[data-c-enquire-menu]:not([hidden]) {
      transform-origin: 100% 0;
      transition: opacity var(--t-ui) var(--ease-out-expo), scale var(--t-ui) var(--ease-out-expo);
      @starting-style {
        opacity: 0;
        scale: 0.96;
      }
    }
    .enq__btn[data-c-enquire-menu] {
      transition: background-color var(--t-micro) linear, scale var(--t-press) var(--ease-settle);
    }
    .enq__btn[data-c-enquire-menu]:active {
      scale: 0.97;
    }
  }
}
@media (forced-colors: active) {
  .enq__btn[data-c-enquire-menu] {
    border: 1px solid ButtonText;
  }
  .enq__pop[data-c-enquire-menu] {
    border: 1px solid CanvasText;
  }
}

/* ── site-search ── */
.search-button[data-c-site-search] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  border: 1.5px solid #e6c27a;
  border-radius: 999px;
  background: transparent;
  color: #f3d792;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.search-button[data-c-site-search]:hover {
  background-color: rgb(243 215 146 / 0.14);
}
.search-button[data-c-site-search]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}
.ss[data-c-site-search] {
  inline-size: min(100vw - 24px, 44rem);
  max-block-size: min(80svh, 40rem);
  margin: calc(var(--header-h, 80px) + 8px) auto auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6efe4;
}
.ss[data-c-site-search]::backdrop {
  background: rgb(8 4 3 / 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ss__panel[data-c-site-search] {
  display: grid;
  gap: var(--s-3, 12px);
}
.ss__bar[data-c-site-search] {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  padding: 6px 8px 6px 18px;
  border: 1.5px solid #e6c27a;
  border-radius: 999px;
  background: #0e0705;
  color: #f3d792;
}
.ss__input[data-c-site-search] {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 48px;
  border: 0;
  background: transparent;
  color: #f6efe4;
  font: inherit;
  font-size: var(--fs-l, 1.25rem);
  outline: none;
}
.ss__input[data-c-site-search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.ss__input[data-c-site-search]::placeholder {
  color: #b9ae9f;
}
.ss__close[data-c-site-search] {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(243 215 146 / 0.12);
  color: #f3d792;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.ss__results[data-c-site-search] {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  max-block-size: calc(min(80svh, 40rem) - 80px);
}
.ss__results[data-c-site-search] .ss__hint {
  padding: var(--s-2, 8px) var(--s-4, 16px);
  color: #b9ae9f;
  font-size: var(--fs-s, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ss__results[data-c-site-search] .ss__hit {
  display: grid;
  gap: 2px;
  padding: var(--s-3, 12px) var(--s-4, 16px);
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid rgb(230 194 122 / 0.18);
}
.ss__results[data-c-site-search] .ss__hit:hover,
.ss__results[data-c-site-search] .ss__hit:focus-visible {
  background: rgb(243 215 146 / 0.1);
  outline: none;
}
.ss__results[data-c-site-search] .ss__t {
  font-family: var(--face-display);
  font-size: var(--fs-l, 1.25rem);
  color: #f3d792;
}
.ss__results[data-c-site-search] .ss__d {
  font-size: var(--fs-s, 0.95rem);
  line-height: 1.4;
  color: #e9e1d4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ── site-header ── */
.site-header[data-c-site-header][data-home][data-state=top] .primary[data-c-site-header] {
  visibility: hidden;
  opacity: 0;
}
.site-header[data-c-site-header][data-home] .primary[data-c-site-header] {
  transition: opacity 300ms linear, visibility 0s linear 0s;
}
.site-header__sentinel[data-c-site-header] {
  position: absolute;
  inset-block-start: 64px;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  visibility: hidden;
  pointer-events: none;
}
/* The page's band colour behind the header's own height, on pages the hero does not slide under */
.site-header__ground[data-c-site-header] {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--header-h);
  background: var(--layer-band);
  pointer-events: none;
}
.site-header__ground--over[data-c-site-header] {
  display: none;
}
@media (max-height: 500px) and (orientation: landscape) {
  .site-header__ground--over[data-c-site-header] {
    display: block;
  }
}
/* ── The header: a sticky, transparent band; only the pill takes the pointer ─────────────────────── */
.site-header[data-c-site-header] {
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --link: var(--ink);
  --focus: var(--soil);
  --indicator: var(--copper);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  block-size: var(--header-h);
  color: var(--ink);
  font-family: var(--face-text);
  pointer-events: none;
  view-transition-name: site-header;
}
.bar[data-c-site-header] {
  display: flex;
  align-items: center;
  block-size: var(--header-h);
  padding-inline: calc(var(--margin) - 4px);
}
/* ── The pill ─────────────────────────────────────────────────────────────────────────────────────── */
.bar__inner[data-c-site-header] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  inline-size: 100%;
  max-inline-size: calc(var(--content-max) + 8px);
  block-size: var(--header-pill);
  margin-inline: auto;
  padding-inline: 10px 4px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 0 0 1px rgb(14 7 5 / 0.06), 0 10px 30px rgb(14 7 5 / 0.12);
  pointer-events: auto;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar__inner[data-c-site-header] {
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
  .site-header[data-c-site-header][data-state=top][data-over-photo] .bar__inner[data-c-site-header] {
    background: color-mix(in srgb, var(--paper) 74%, transparent);
  }
}
.site-header[data-c-site-header][data-state=top] .bar__inner[data-c-site-header] {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18), 0 6px 24px rgb(14 7 5 / 0.1);
}
/* ── Logo: the ink mark and the name ──────────────────────────────────────────────────────────────── */
.logo[data-c-site-header] {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline-end: 4px;
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
}
.logo[data-c-site-header]:visited {
  color: var(--ink);
}
.logo__mark[data-c-site-header] {
  display: block;
  inline-size: auto;
  block-size: 30px;
}
.logo__name[data-c-site-header] {
  font-family: var(--face-display);
  font-size: var(--fs-m);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
/* owner (19 Oct 2026): "Make the top gold button with Forum Homini smaller it is to over powering": the name, the
     mark and the button itself smaller */
.logo__name--drawn[data-c-site-header] {
  display: block;
  inline-size: auto;
  block-size: 13px;
}
@media (min-width: 641px) {
  .logo__name--drawn[data-c-site-header] {
    block-size: 15px;
  }
}
.site-header[data-c-site-header] .logo[data-c-site-header] .logo__mark[data-c-site-header] {
  block-size: 24px;
}
/* owner (19 Oct 2026): after comparing the dark button with the silver logo and the gold one, "I Like B": the gold
     button, the dark mark and the hand-drawn name in the brown of the mark's lips (as Enquire) */
.site-header[data-c-site-header] .logo[data-c-site-header] {
  min-block-size: 38px;
  gap: 7px;
  padding-inline: 9px 13px !important;
}
@media (max-width: 359px) {
  .logo__name[data-c-site-header] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* ── Primary nav (≥ 960 px) ───────────────────────────────────────────────────────────────────────── */
.primary[data-c-site-header] {
  display: none;
}
.groups[data-c-site-header] {
  display: flex;
  align-items: center;
  gap: 2px;
}
.groups__item[data-c-site-header] {
  position: relative;
}
.groups__btn--plain[data-c-site-header] {
  padding-inline: 18px;
  text-decoration: none;
}
.groups__btn[data-c-site-header] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 44px;
  padding-inline: 14px 10px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-nav);
  font-weight: var(--wt-ui);
  line-height: 1;
  letter-spacing: var(--tr-nav);
  white-space: nowrap;
  transition: background-color var(--t-micro) linear;
}
.groups__btn[data-c-site-header]:hover,
.groups__btn[data-c-site-header][aria-expanded=true] {
  background-color: color-mix(in srgb, var(--ink) 7%, transparent);
}
.groups__btn[data-c-site-header] .groups__chev {
  color: var(--ink-muted);
  transition: rotate var(--t-micro) linear;
}
.groups__btn[data-c-site-header][aria-expanded=true] .groups__chev {
  rotate: 180deg;
}
/* The current group: a copper dot under its name (aria-current carries it for screen readers) */
.groups__btn[data-c-site-header][aria-current]::after {
  content: "";
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: calc(50% - 9px);
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--copper);
}
/* ── Actions ──────────────────────────────────────────────────────────────────────────────────────── */
.actions[data-c-site-header] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}
.actions[data-c-site-header] .site-header__enquire,
.actions[data-c-site-header] .site-header__book {
  display: none;
}
/* Owner (7 Oct 2026): "You have Enquire twice": on phones the bottom bar (Dock) already has Enquire, beside Call and
     Book a suite, so the top bar's phone Enquire is hidden (it was display: inline-flex) */
/* (6 Nov 2026) color was var(--on-copper); always overridden by css/site.css, so its value is here now */
.enquire-phone[data-c-site-header] {
  display: none;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 18px;
  border-radius: var(--r-pill);
  background: var(--copper);
  color: #1d1405;
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  line-height: 1;
  letter-spacing: var(--tr-button);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.enquire-phone[data-c-site-header]:visited {
  color: var(--on-copper);
}
.enquire-phone[data-c-site-header]:hover {
  background: var(--copper-hover);
}
.menu-button[data-c-site-header] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-micro) linear;
}
.menu-button[data-c-site-header]:hover {
  background-color: color-mix(in srgb, var(--ink) 7%, transparent);
}
@media (min-width: 760px) {
  .menu-button[data-c-site-header] {
    padding-inline: 14px 16px;
  }
}
/* Phone: the Menu button is its icon (the word stays its accessible name) */
.menu-button__label[data-c-site-header] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 641px) {
  .bar__inner[data-c-site-header] {
    padding-inline: 18px 8px;
  }
  .logo__mark[data-c-site-header] {
    block-size: 34px;
  }
  .logo__name[data-c-site-header] {
    font-size: var(--fs-l);
  }
  .enquire-phone[data-c-site-header] {
    display: none;
  }
  .actions[data-c-site-header] {
    gap: var(--s-2);
  }
  .actions[data-c-site-header] .site-header__enquire,
  .actions[data-c-site-header] .site-header__book {
    display: flex;
  }
  .logo[data-c-site-header] {
    gap: 10px;
    padding-inline-end: var(--s-2);
  }
}
@media (min-width: 760px) {
  .menu-button__label[data-c-site-header] {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }
}
@media (min-width: 641px) {
  .actions[data-c-site-header] .site-header__book {
    white-space: nowrap;
  }
  .actions[data-c-site-header] .site-header__book .book__label {
    white-space: nowrap;
  }
}
@media (min-width: 960px) {
  .primary[data-c-site-header] {
    display: flex;
    flex: 1;
    justify-content: center;
  }
}
@media (min-width: 1180px) {
  .groups[data-c-site-header] {
    gap: var(--s-2);
  }
}
.site-header[data-c-site-header][data-state=hidden] {
  translate: 0 -100%;
}
@media (prefers-reduced-transparency: reduce) {
  .bar__inner[data-c-site-header],
  .site-header[data-c-site-header][data-state=top][data-over-photo] .bar__inner[data-c-site-header] {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .bar__inner[data-c-site-header] {
      transition: background-color var(--t-ui) var(--ease-out-expo), box-shadow var(--t-ui) var(--ease-out-expo);
      animation: pill-in 900ms var(--ease-out-expo) 120ms both;
    }
    @keyframes pill-in {
      from {
        opacity: 0;
        translate: 0 -14px;
        scale: 0.97;
      }
    }
    .enquire-phone[data-c-site-header],
    .menu-button[data-c-site-header] {
      transition: background-color var(--t-micro) linear, scale var(--t-press) var(--ease-settle);
    }
    .enquire-phone[data-c-site-header]:active,
    .menu-button[data-c-site-header]:active {
      scale: 0.97;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .site-header[data-c-site-header] {
      transition: translate var(--t-ui) var(--ease-out-expo);
    }
    .site-header[data-c-site-header][data-state=hidden] {
      transition: translate var(--t-ui-exit) var(--ease-exit);
    }
  }
}
@media (forced-colors: active) {
  .bar__inner[data-c-site-header] {
    border: 1px solid CanvasText;
  }
  .enquire-phone[data-c-site-header] {
    border: 1px solid ButtonText;
  }
}
@media print {
  .site-header[data-c-site-header] {
    position: static;
  }
  .actions[data-c-site-header],
  .primary[data-c-site-header] {
    display: none;
  }
}
.bar__inner[data-c-site-header],
.site-header[data-c-site-header][data-state=top] .bar__inner[data-c-site-header],
.site-header[data-c-site-header][data-state=top][data-over-photo] .bar__inner[data-c-site-header] {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1.5px solid #e6c27a;
  box-shadow: none !important;
}
/* owner (19 Oct 2026, her notes, About the hotel on the iPhone: "not right also check laptop version"): with the clear bar
     the page's words showed through it once scrolled; now a soft dark shade fades in behind the bar after scrolling, so
     the words fade away before they reach it. At the top of each page the bar stays clear over the photo, as before. */
.site-header[data-c-site-header]::before {
  content: "";
  position: absolute;
  inset: 0 0 -18px;
  background:
    linear-gradient(
      to bottom,
      rgb(14 7 5) 0%,
      rgb(14 7 5) 78%,
      rgb(14 7 5 / 0));
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.site-header[data-c-site-header]:not([data-state=top])::before {
  opacity: 1;
}
/* the back arrow (owner, 22 Oct 2026): always first in the bar, before the logo, a gold-outlined round button */
.back-arrow[data-c-site-header],
.back-arrow[data-c-site-header]:visited {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: 6px;
  border: 1.5px solid #e6c27a;
  border-radius: 50%;
  background: rgb(14 7 5 / 0.35);
  color: #f3d792;
  cursor: pointer;
}
.back-arrow[data-c-site-header][hidden] {
  display: none;
}
.back-arrow[data-c-site-header]:hover {
  background: rgb(243 215 146 / 0.16);
}
.back-arrow[data-c-site-header]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
.site-header[data-c-site-header],
.site-header[data-c-site-header] .groups__btn[data-c-site-header],
.site-header[data-c-site-header] .menu-button[data-c-site-header] {
  color: var(--naledi);
  text-shadow: none;
}
/* owner (17 Oct 2026): "no the colour lips do not look great reverse back. I think place Forum Homini logo in gold button
     like enquire": the mark and the name in a gold pill, dark on gold, as the Enquire button */
.site-header[data-c-site-header] .logo[data-c-site-header],
.site-header[data-c-site-header] .logo[data-c-site-header]:visited {
  padding-inline: 10px 14px;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  text-shadow: none;
}
.site-header[data-c-site-header] .logo[data-c-site-header]:hover {
  background:
    linear-gradient(
      180deg,
      #fff8e0,
      #f7e2a6 40%,
      #d9a74e 85%);
}
.site-header[data-c-site-header] .groups__btn[data-c-site-header]:hover,
.site-header[data-c-site-header] .menu-button[data-c-site-header]:hover {
  background-color: rgb(243 215 146 / 0.16);
}
/* owner (17 Oct 2026): "The book a suite should also have the gold outline for buttons. Please do a gold outline of any
     buttons on the top bar throughout the website": Book a suite, the ☰ menu button and Stay · Dine · Celebrate & Meet ·
     Discover get a thin gold outline (Enquire stays solid gold) */
.actions[data-c-site-header] .site-header__book,
.actions[data-c-site-header] .site-header__book:visited,
.site-header[data-c-site-header] .menu-button[data-c-site-header],
.site-header[data-c-site-header] .groups__btn[data-c-site-header] {
  border: 1.5px solid #e6c27a !important;
  color: var(--naledi) !important;
}
.actions[data-c-site-header] .site-header__book:hover,
.site-header[data-c-site-header] .menu-button[data-c-site-header]:hover,
.site-header[data-c-site-header] .groups__btn[data-c-site-header]:hover {
  background-color: rgb(243 215 146 / 0.16) !important;
}
/* owner (20 Oct 2026): "I dont want the sleep eat events in the top bar as buttons": the bar is the logo and the ☰ only.
     Version 5 (owner, 24 Oct 2026: Hercules's navigation): on laptops the bar shows them again as words, not buttons:
     cream lettering, the page the visitor is in in gold with a fine gold line under it; phones keep the ☰ only. */
.site-header[data-c-site-header] .primary[data-c-site-header] {
  display: none;
}
@media (min-width: 960px) {
  .site-header[data-c-site-header] .primary[data-c-site-header] {
    display: flex !important;
  }
}
/* (owner, 25 Oct 2026: "I don't want them in the top bar … we've got the floating bar. I don't want you to make the top bar
     crammed"): the Version 5 words in the bar (Sleep · Eat · Events · The hotel) are off again; the floating bar does it */
.site-header[data-c-site-header] .actions[data-c-site-header] {
  margin-inline-start: auto;
}
.site-header[data-c-site-header] .menu-button[data-c-site-header] {
  min-inline-size: 48px;
  padding-inline: 12px !important;
}
.site-header[data-c-site-header] .menu-button__label[data-c-site-header] {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── external-link ── */
.ext[data-c-external-link] .ext__icon{display:inline-block;margin-inline-start:0.2em;vertical-align:-0.1em;inline-size:0.9em;block-size:0.9em}

/* ── letamo-line ── */
.letamo[data-c-letamo-line] {
  max-inline-size: var(--measure-body);
  padding-inline-start: calc(16px + var(--s-2));
  text-indent: calc(-16px - var(--s-2));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.letamo[data-c-letamo-line] .letamo__pin {
  margin-inline-end: var(--s-2);
  vertical-align: -0.2em;
  color: var(--link);
}
.letamo[data-c-letamo-line] a {
  color: var(--link);
  white-space: nowrap;
}

/* ── social-links ── */
.social[data-c-social-links] .ext__icon {
  color: var(--fg-muted);
  flex: none;
}
/* ── Quiet: one wrapping row of small pills ───────────────────────────────────────────────────────── */
.social--quiet[data-c-social-links] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.social[data-c-social-links] .social__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 40px;
  padding-inline: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-size: var(--fs-caption);
  font-weight: var(--wt-ui);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--t-micro) linear,
    border-color var(--t-micro) linear,
    background-color var(--t-micro) linear;
}
.social[data-c-social-links] .social__pill:visited {
  color: var(--fg-muted);
}
.social[data-c-social-links] .social__pill:hover {
  border-color: color-mix(in srgb, var(--fg) 45%, transparent);
  background-color: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
}
@media (pointer: coarse) {
  .social[data-c-social-links] .social__pill {
    min-block-size: 44px;
  }
}
.social[data-c-social-links] .social__icon {
  flex: none;
  color: var(--link);
}
/* ── Inline: the old strip as three outline chips ─────────────────────────────────────────────────── */
.social--inline[data-c-social-links] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
/* (6 Nov 2026) color was var(--fg); always overridden by css/site.css, so its value is here now */
.social[data-c-social-links] .social__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-inline: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: #f3d792;
  font-size: var(--fs-small);
  font-weight: var(--wt-ui);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-micro) linear, border-color var(--t-micro) linear;
}
.social[data-c-social-links] .social__chip:visited {
  color: var(--fg);
}
.social[data-c-social-links] .social__chip:hover {
  border-color: currentColor;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}
/* (6 Nov 2026) color was var(--link); always overridden by css/site.css, so its value is here now */
.social[data-c-social-links] .social__chip .social__icon {
  color: #f3d792;
}
@media (forced-colors: active) {
  .social[data-c-social-links] .social__chip,
  .social[data-c-social-links] .social__pill {
    border-color: ButtonText;
  }
}

/* ── site-footer ── */
.site-footer[data-c-site-footer] {
  --footer-rule: color-mix(in srgb, var(--line-dark) 38%, transparent);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--s-7) var(--s-5);
  background:
    radial-gradient(
      120% 70% at 0% 100%,
      color-mix(in srgb, var(--earth) 80%, transparent),
      transparent 60%),
    var(--night);
  content-visibility: auto;
  contain-intrinsic-size: auto 1700px;
}
.site-footer__directions[data-c-site-footer] a[data-c-site-footer] {
  color: #f3d792;
  text-underline-offset: 0.2em;
}
/* A very faint static grain over the whole footer */
.site-footer[data-c-site-footer]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 160px;
  opacity: 0.05;
  pointer-events: none;
}
@media (min-width: 641px) {
  .site-footer[data-c-site-footer] {
    padding-block: var(--s-8) var(--s-6);
    contain-intrinsic-size: auto 1100px;
  }
}
@media (min-width: 1025px) {
  .site-footer[data-c-site-footer] {
    contain-intrinsic-size: auto 820px;
  }
}
/* ── Main: brand block and the five columns ───────────────────────────────────────────────────────── */
.site-footer__main[data-c-site-footer] {
  display: grid;
  gap: var(--s-8);
}
.site-footer__brand[data-c-site-footer] {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  max-inline-size: 26rem;
}
.site-footer__logo[data-c-site-footer] {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--s-4);
  color: var(--naledi);
  font-family: var(--face-display);
  font-size: var(--fs-l);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-footer__logo[data-c-site-footer]:visited {
  color: var(--naledi);
}
/* owner (19 Oct 2026): "why did you make this so big … use the stars with the name": the whole logo, modest */
.site-footer__logo[data-c-site-footer] img[data-c-site-footer].site-footer__name {
  block-size: auto;
  inline-size: clamp(220px, 10vw + 140px, 270px);
}
.site-footer__logo[data-c-site-footer] img[data-c-site-footer] {
  display: block;
  block-size: 52px;
  inline-size: auto;
}
.site-footer__line[data-c-site-footer] {
  color: var(--naledi);
  font-family: var(--face-display);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-lede);
  text-wrap: balance;
}
.site-footer__contact[data-c-site-footer],
.site-footer__address[data-c-site-footer] {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ash);
}
.site-footer__k[data-c-site-footer] {
  color: var(--ash);
}
.site-footer__contact[data-c-site-footer] a[data-c-site-footer] {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--naledi);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.site-footer__contact[data-c-site-footer] a[data-c-site-footer]:visited {
  color: var(--naledi);
}
.site-footer__contact[data-c-site-footer] a[data-c-site-footer]:hover {
  text-decoration-color: var(--ember);
}
.site-footer__brand[data-c-site-footer] .site-footer__letamo {
  color: var(--ash);
}
/* The columns: phone two-up (Legal across), tablet three-up, desktop five across */
.site-footer__nav[data-c-site-footer] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--gutter);
}
.site-footer__group[data-c-site-footer] {
  margin-block-end: var(--s-3);
  color: var(--ash);
  font-family: var(--face-text);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  font-stretch: 100%;
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.site-footer__col[data-c-site-footer] ul[data-c-site-footer] {
  display: grid;
}
.site-footer__col[data-c-site-footer] a[data-c-site-footer] {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-block: 4px;
  color: var(--naledi);
  font-size: var(--fs-small);
  font-weight: var(--wt-body);
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--t-micro) linear;
}
.site-footer__col[data-c-site-footer] a[data-c-site-footer]:visited {
  color: var(--naledi);
}
.site-footer__col[data-c-site-footer] a[data-c-site-footer]:hover {
  color: var(--ember);
}
.site-footer__col[data-c-site-footer] a[data-c-site-footer][aria-current] {
  text-decoration-line: underline;
  text-decoration-color: var(--copper);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.site-footer__col--legal[data-c-site-footer] a[data-c-site-footer] {
  color: var(--ash);
}
.site-footer__col--legal[data-c-site-footer] a[data-c-site-footer]:visited {
  color: var(--ash);
}
@media (pointer: coarse) {
  /* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */
  .site-footer__col[data-c-site-footer] a[data-c-site-footer] {
    min-block-size: 0;
  }
  .site-footer__contact[data-c-site-footer] a[data-c-site-footer] {
    min-block-size: 44px;
  }
}
@media (max-width: 640px) {
  .site-footer__nav[data-c-site-footer]:has(.site-footer__toggle) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-block-end: 1px solid var(--footer-rule);
  }
  .site-footer__col[data-c-site-footer]:has(.site-footer__toggle) {
    border-block-start: 1px solid var(--footer-rule);
  }
  .site-footer__group[data-c-site-footer]:has(.site-footer__toggle) {
    margin: 0;
  }
  .site-footer__col[data-c-site-footer] ul[data-c-site-footer]:not([hidden]) {
    padding-block-end: var(--s-4);
  }
  .site-footer__main[data-c-site-footer]:has(.site-footer__toggle) + .site-footer__quiet[data-c-site-footer] {
    margin-block-start: 0;
    border-block-start: 0;
  }
}
.site-footer__group[data-c-site-footer] .site-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  min-block-size: 56px;
  color: var(--naledi);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* The chevron: a small rotated corner, turning when open */
.site-footer__group[data-c-site-footer] .site-footer__toggle::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate var(--t-micro) linear;
}
.site-footer__group[data-c-site-footer] .site-footer__toggle[aria-expanded=true]::after {
  rotate: 225deg;
  translate: 0 2px;
}
@media (min-width: 641px) {
  .site-footer__nav[data-c-site-footer] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .site-footer__main[data-c-site-footer] {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gutter);
  }
  .site-footer__nav[data-c-site-footer] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .site-footer__col[data-c-site-footer] a[data-c-site-footer] {
    min-block-size: 36px;
  }
}
/* ── Quiet row ────────────────────────────────────────────────────────────────────────────────────── */
.site-footer__quiet[data-c-site-footer] {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--footer-rule);
}
.site-footer__also[data-c-site-footer] {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
}
.site-footer__also[data-c-site-footer] a[data-c-site-footer] {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  color: var(--ash);
  font-size: var(--fs-caption);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.3em;
}
.site-footer__also[data-c-site-footer] a[data-c-site-footer]:visited {
  color: var(--ash);
}
.site-footer__also[data-c-site-footer] a[data-c-site-footer]:hover {
  color: var(--naledi);
  text-decoration-color: currentColor;
}
@media (pointer: coarse) {
  .site-footer__also[data-c-site-footer] a[data-c-site-footer] {
    min-block-size: 44px;
  }
}
/* ── The slim legal line (laptop) and five compact columns (25 Oct 2026) ─────────────────────────────── */
.site-footer__legal[data-c-site-footer] {
  display: none;
}
@media (min-width: 641px) {
  .site-footer__nav[data-c-site-footer] .site-footer__col--legal[data-c-site-footer] {
    display: none;
  }
  .site-footer__base[data-c-site-footer] .site-footer__legal[data-c-site-footer] {
    display: block;
    flex: 1 1 100%;
    order: 3;
  }
  .site-footer__legal[data-c-site-footer] ul[data-c-site-footer] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-footer__legal[data-c-site-footer] a[data-c-site-footer],
  .site-footer__legal[data-c-site-footer] a[data-c-site-footer]:visited {
    display: inline-flex;
    align-items: center;
    min-block-size: 28px;
    color: var(--ash);
    font-size: var(--fs-caption);
    text-decoration: none;
  }
  .site-footer__legal[data-c-site-footer] a[data-c-site-footer]:hover {
    color: var(--naledi);
  }
}
@media (min-width: 641px) {
  .site-footer[data-c-site-footer] {
    padding-block-end: calc(var(--s-5) + 96px);
  }
}
@media (min-width: 641px) and (pointer: fine) {
  .site-footer__col[data-c-site-footer] a[data-c-site-footer] {
    min-block-size: 30px;
    padding-block: 2px;
  }
}
@media (min-width: 1200px) {
  .site-footer[data-c-site-footer] .site-footer__main[data-c-site-footer] {
    grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr);
  }
  .site-footer[data-c-site-footer] .site-footer__nav[data-c-site-footer] {
    grid-template-columns: repeat(6, minmax(0, auto)) !important;
    justify-content: space-between;
  }
}
/* ── Base ─────────────────────────────────────────────────────────────────────────────────────────── */
.site-footer__base[data-c-site-footer] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--footer-rule);
  color: var(--ash);
  font-size: var(--fs-caption);
}
/* Back to the top: a floating round gold button with an up arrow (9 Nov 2026, Karina's list 2.4; was a small
   "Back to top" link at the very end of the footer). It shows once the footer logo is in view and stays bottom right,
   above the phone bar, while the visitor is in the footer; the script is in parts/footer.html. */
.site-footer__top[data-c-site-footer] {
  position: fixed;
  inset-inline-end: 16px;
  inset-block-end: calc(16px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-dock) + 1);
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #f3d792, #c9953f);
  box-shadow: 0 6px 18px rgb(14 7 5 / 0.45);
  color: #2b1c10;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s;
}
.site-footer__top[data-c-site-footer].is-shown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.25s ease, translate 0.25s ease;
}
.site-footer__top[data-c-site-footer] .icon {
  inline-size: 22px;
  block-size: 22px;
  stroke-width: 2;
}
@media (max-width: 959px) {
  .site-footer__top[data-c-site-footer] {
    inset-block-end: calc(60px + env(safe-area-inset-bottom));
  }
}
/* the quick fade while the page jumps to the top */
html.to-top-fade body {
  opacity: 0;
  transition: opacity 0.2s ease;
}
html.to-top-back body {
  transition: opacity 0.25s ease;
}
@media print {
  .site-footer__nav[data-c-site-footer],
  .site-footer__quiet[data-c-site-footer],
  .site-footer__top[data-c-site-footer] {
    display: none;
  }
  .site-footer[data-c-site-footer] {
    content-visibility: visible;
  }
}
/* ── Tidier footer (owner, 22 Oct 2026: "is the bottom footer with all info done as a world class website. the layout it is
     a lot" → "maybe it is just the line spacing" → "Yes, tidy the footer as you suggested"): closer line spacing, the six
     lists three across on a laptop (two rows instead of three), the social links as one small row without the three
     doubles, no hairlines between the folded lists on a phone, and less empty space at the foot ── */
.site-footer__brand[data-c-site-footer] {
  gap: var(--s-4);
}
.site-footer__contact[data-c-site-footer],
.site-footer__address[data-c-site-footer] {
  line-height: 1.55;
}
.site-footer__nav[data-c-site-footer] {
  gap: var(--s-6) var(--gutter);
}
.site-footer__group[data-c-site-footer] {
  margin-block-end: var(--s-2);
}
.site-footer__col[data-c-site-footer] a[data-c-site-footer] {
  padding-block: 3px;
  line-height: 1.35;
}
@media (min-width: 641px) {
  .site-footer__nav[data-c-site-footer] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
.site-footer__quiet[data-c-site-footer] {
  margin-block-start: var(--s-7);
  padding-block-start: 0;
  border-block-start: 0;
}
.site-footer__quiet[data-c-site-footer] [data-social=facebook-legacy],
.site-footer__quiet[data-c-site-footer] [data-social=x-search],
.site-footer__quiet[data-c-site-footer] [data-social=tripadvisor-home] {
  display: none;
}
/* (6 Nov 2026) color was #e9e1d4; always overridden by css/site.css, so its value is here now */
.site-footer__quiet[data-c-site-footer] .social__pill {
  min-block-size: 36px;
  padding-inline: 10px 12px;
  border-color: transparent;
  color: #f3d792;
}
.site-footer__quiet[data-c-site-footer] .social__pill:hover {
  border-color: rgb(230 194 122 / 0.45);
}
/* (6 Nov 2026) color was #f3d792; always overridden by css/site.css, so its value is here now */
.site-footer__quiet[data-c-site-footer] .social__icon {
  color: #f3d792;
}
.site-footer__base[data-c-site-footer] {
  margin-block-start: var(--s-5);
  padding-block-start: 0;
  border-block-start: 0;
}
@media (max-width: 640px) {
  .site-footer__nav[data-c-site-footer]:has(.site-footer__toggle),
  .site-footer__col[data-c-site-footer]:has(.site-footer__toggle) {
    border: 0;
  }
  .site-footer__quiet[data-c-site-footer],
  .site-footer__main[data-c-site-footer]:has(.site-footer__toggle) + .site-footer__quiet[data-c-site-footer] {
    margin-block-start: var(--s-6);
  }
}
/* Legal → Privacy (owner, 22 Oct 2026): a small gold heading over the hotel's privacy documents */
.site-footer__sub[data-c-site-footer] {
  margin-block: var(--s-3) var(--s-1);
  font-family: var(--face-text);
  font-size: var(--fs-label, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6c27a;
}

/* ── phone-menu ── */
.pmg[data-c-phone-menu] {
  position: fixed;
  inset: auto 0 0 0;
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: 80svh;
  margin: 0;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 1px solid rgb(230 194 122 / 0.6);
  border-block-end: 0;
  border-radius: 18px 18px 0 0;
  background: #0e0a07;
  color: #f6efe4;
}
.pmg[data-c-phone-menu]:focus {
  outline: none;
}
.pmg[data-c-phone-menu][open] {
  animation: pmg-up 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pmg-up {
  from {
    translate: 0 100%;
  }
}

/* ── phone-menu ── */
.pmg[data-c-phone-menu]::backdrop {
  background: rgb(0 0 0 / 0.55);
}
.pmg__top[data-c-phone-menu] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block-end: 6px;
}
.pmg__home[data-c-phone-menu] {
  font-family: var(--face-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6c27a;
  text-decoration: none;
}
.pmg__close[data-c-phone-menu] {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid rgb(230 194 122 / 0.6);
  border-radius: 999px;
  background: none;
  color: #f3d792;
  font-size: 1.05rem;
  line-height: 1;
}
/* the rows: as in the phone footer, spaced capitals, a small chevron, a hairline */
.pmg__row[data-c-phone-menu] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  block-size: 42px;
  padding: 0;
  border: 0;
  border-block-start: 1px solid rgb(230 194 122 / 0.22);
  background: none;
  color: #f6efe4;
  font-family: var(--face-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
button[data-c-phone-menu].pmg__row::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  margin-inline-end: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 200ms linear;
}
.pmg__row[data-c-phone-menu][aria-expanded=true] {
  color: #f3d792;
}
.pmg__row[data-c-phone-menu][aria-expanded=true]::after {
  rotate: 225deg;
  translate: 0 2px;
}
.pmg__row--link[data-c-phone-menu] {
  color: #f3d792;
  border-block-end: 1px solid rgb(230 194 122 / 0.22);
}
/* the open list: each gold group name in the heading font, its places in ONE column under it
   (9 Nov 2026, Karina's chosen look, list 2.6; was a small plain gold name over two columns) */
.pmg__list[data-c-phone-menu] {
  padding-block: 2px 10px;
}
.pmg__group[data-c-phone-menu] + .pmg__group[data-c-phone-menu] {
  margin-block-start: 20px;
}
.pmg__h[data-c-phone-menu] {
  margin: 8px 0;
}
.pmg__group[data-c-phone-menu] + .pmg__group[data-c-phone-menu] .pmg__h[data-c-phone-menu] {
  margin-block-start: 0;
}
.pmg__h[data-c-phone-menu],
.pmg__list[data-c-phone-menu] .pmg__h[data-c-phone-menu] a[data-c-phone-menu] {
  padding: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pmg__list[data-c-phone-menu] ul[data-c-phone-menu] {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pmg__list[data-c-phone-menu] li[data-c-phone-menu] {
  padding-block: 5px;
}
.pmg__list[data-c-phone-menu] a[data-c-phone-menu] {
  display: block;
  font-family: var(--face-text);
  font-size: 16px;
  line-height: 1.25;
  color: #f6efe4;
  text-decoration: none;
}
.pmg__list[data-c-phone-menu] a[data-c-phone-menu]:active {
  color: #f3d792;
}
@media (min-width: 960px) {
  .pmg[data-c-phone-menu] {
    inset: 64px max(20px, calc(50% - 650px)) auto auto;
    inline-size: 440px;
    max-block-size: calc(100svh - 84px);
    border: 1px solid rgb(230 194 122 / 0.6);
    border-radius: 18px;
  }
}

/* ── dock ── */
/* Sleep · Eat · Events in the bar: light gold words, the part you are in lit in gold (as the old floating bar) */
.dock__ch[data-c-dock] {
  color: #f3d792;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dock__ch[data-c-dock] .dock__label[data-c-dock] {
  font-size: 0.78rem;
}
/* the part you are in: a fine gold ring (the gold pill is Enquire's) */
.dock__ch[data-c-dock].is-here {
  box-shadow: inset 0 0 0 1px #e6c27a;
  color: #fff3cf;
}
.dock[data-c-dock] {
  display: none;
}
@media (max-width: 959px) {
  /* (6 Nov 2026) block-size was 56px; always overridden by css/site.css, so its value is here now */
  .dock[data-c-dock] {
    --focus: var(--ember);
    position: fixed;
    inset-inline: 8px;
    inset-block-end: calc(6px + env(safe-area-inset-bottom));
    z-index: var(--z-dock);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
    align-items: center;
    gap: 4px;
    block-size: 38px;
    padding: 5px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--night) 94%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--naledi) 12%, transparent), 0 10px 30px rgb(14 7 5 / 0.35);
    color: var(--naledi);
    color-scheme: dark;
    font-family: var(--face-text);
    view-transition-name: dock;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dock[data-c-dock] {
      background: color-mix(in srgb, var(--night) 82%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(1.3);
      backdrop-filter: blur(16px) saturate(1.3);
    }
  }
  .dock__cell[data-c-dock] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    block-size: 46px;
    min-inline-size: 0;
    padding-inline: 6px;
    border-radius: var(--r-pill);
    color: var(--naledi);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-micro) linear;
  }
  /* the hidden "(opens in a new tab)" sits at the cell's own corner, not centred past its edge */
  .dock__cell[data-c-dock] .visually-hidden {
    inset-block-start: 0;
    inset-inline-start: 0;
  }
  .dock__cell[data-c-dock]:visited {
    color: var(--naledi);
  }
  .dock__cell[data-c-dock]:active {
    background-color: color-mix(in srgb, var(--naledi) 10%, transparent);
  }
  .dock__cell[data-c-dock]:focus-visible {
    outline-offset: -2px;
  }
  .dock__label[data-c-dock] {
    font-size: var(--fs-s);
    font-weight: var(--wt-label);
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
  }
  .dock__cell[data-c-dock] .icon {
    flex: none;
    color: var(--ember);
  }
  /* Enquire: the copper centre */
  /* (6 Nov 2026) color was var(--on-copper); always overridden by css/site.css, so its value is here now */
  .dock__enquire[data-c-dock] {
    --focus: var(--naledi);
    background-color: var(--copper);
    color: #1d1405;
  }
  .dock__enquire[data-c-dock]:visited {
    color: var(--on-copper);
  }
  .dock__enquire[data-c-dock]:active {
    background-color: var(--copper-hover);
  }
  body:has(:is(input, select, textarea):focus) .dock[data-c-dock] {
    display: none;
  }
}
@media (max-width: 359px) {
  .dock__label[data-c-dock] {
    font-size: var(--fs-s);
  }
  .dock__cell[data-c-dock] .icon {
    display: none;
  }
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .dock__cell[data-c-dock] {
      transition: background-color var(--t-micro) linear, scale var(--t-press) var(--ease-settle);
    }
    .dock__cell[data-c-dock]:active {
      scale: 0.97;
    }
    .dock[data-c-dock] {
      animation: dock-in 900ms var(--ease-out-expo) 200ms both;
    }
    @keyframes dock-in {
      from {
        opacity: 0;
        translate: 0 24px;
      }
    }
  }
}
@media (forced-colors: active) {
  .dock[data-c-dock] {
    border: 1px solid CanvasText;
  }
  .dock__enquire[data-c-dock] {
    border: 1px solid ButtonText;
  }
}
@media print {
  .dock[data-c-dock] {
    display: none;
  }
}

/* ── enquire-sheet ── */
.sheet__quick[data-c-enquire-sheet] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 var(--s-5) var(--s-4);
}
/* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */
.sheet__btn[data-c-enquire-sheet] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 36px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.sheet__btn--gold[data-c-enquire-sheet] {
  border-color: transparent;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
/* A light sheet, like the header's Enquire chooser (owner feedback, 29 Sep 2026) */
.sheet[data-c-enquire-sheet] {
  --fg: var(--ink);
  --link: var(--ink);
  --focus: var(--soil);
  --heading: var(--ink);
  --wt-display: 600;
  inline-size: 100%;
  max-inline-size: 40rem;
  max-block-size: calc(100dvh - var(--s-7));
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-start-start-radius: var(--r-sheet);
  border-start-end-radius: var(--r-sheet);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  font-family: var(--face-text);
  box-shadow: var(--shadow-panel);
}
.sheet[data-c-enquire-sheet]::backdrop {
  background: color-mix(in srgb, var(--night) 64%, transparent);
}
html:has(dialog.sheet[open]) {
  overflow: hidden;
}

/* ── enquire-sheet ── */
.sheet__inner[data-c-enquire-sheet] {
  padding: var(--s-4) var(--margin) calc(var(--s-5) + env(safe-area-inset-bottom));
}
.sheet__head[data-c-enquire-sheet] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-block-size: 56px;
}
.sheet__title[data-c-enquire-sheet] {
  font-size: var(--fs-l);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.1;
  color: var(--ink);
}
.sheet__close[data-c-enquire-sheet] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  margin-inline-end: calc(-1 * var(--s-3));
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  letter-spacing: var(--tr-button);
}
.sheet__close[data-c-enquire-sheet]:hover {
  background-color: var(--paper-deep);
}
.sheet__list[data-c-enquire-sheet] {
  display: grid;
  margin-block-start: var(--s-2);
}
.sheet__list[data-c-enquire-sheet] li[data-c-enquire-sheet] + li[data-c-enquire-sheet] {
  border-block-start: 1px solid var(--hairline);
}
.sheet__list[data-c-enquire-sheet] li[data-c-enquire-sheet]:not(.sheet__item--contact) + .sheet__item--contact[data-c-enquire-sheet] {
  border-block-start-color: var(--line);
  margin-block-start: var(--s-3);
}
.sheet__link[data-c-enquire-sheet] {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 56px;
  color: var(--ink);
  font-size: var(--fs-m);
  font-weight: var(--wt-ui);
  line-height: 1.25;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sheet__link[data-c-enquire-sheet]:visited {
  color: var(--ink);
}
.sheet__link[data-c-enquire-sheet]:focus-visible {
  outline-offset: -2px;
}
.sheet__text[data-c-enquire-sheet] {
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.sheet__item--contact[data-c-enquire-sheet] .sheet__link[data-c-enquire-sheet] {
  font-size: var(--fs-button);
  font-variant-numeric: lining-nums tabular-nums;
}
.sheet__link[data-c-enquire-sheet] .sheet__icon {
  color: var(--soil);
}
.sheet__link[data-c-enquire-sheet] .sheet__chev {
  color: var(--ink-muted);
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .sheet[data-c-enquire-sheet][open] {
      transition: translate var(--t-ui) var(--ease-out-expo);
      @starting-style {
        translate: 0 100%;
      }
    }
    .sheet[data-c-enquire-sheet][open]::backdrop {
      transition: opacity var(--t-ui) var(--ease-out-expo);
      @starting-style {
        opacity: 0;
      }
    }
    .sheet[data-c-enquire-sheet][open] .sheet__list[data-c-enquire-sheet] li[data-c-enquire-sheet] {
      transition: opacity var(--t-ui) var(--ease-out-expo), translate var(--t-ui) var(--ease-out-expo);
      @starting-style {
        opacity: 0;
        translate: 0 8px;
      }
    }
    .sheet[data-c-enquire-sheet][open] .sheet__list[data-c-enquire-sheet] li[data-c-enquire-sheet]:nth-child(2) {
      transition-delay: 40ms;
    }
    .sheet[data-c-enquire-sheet][open] .sheet__list[data-c-enquire-sheet] li[data-c-enquire-sheet]:nth-child(3) {
      transition-delay: 80ms;
    }
    .sheet[data-c-enquire-sheet][open] .sheet__list[data-c-enquire-sheet] li[data-c-enquire-sheet]:nth-child(n+4) {
      transition-delay: 120ms;
    }
  }
}
@media (forced-colors: active) {
  .sheet[data-c-enquire-sheet] {
    border: 1px solid CanvasText;
  }
}
.more-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.more-btn {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  margin-block: 2px 8px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #f3d792;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.more-btn:hover {
  color: #fff3cf;
}
.more-btn:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}

/* ── song-popup ── */
.song-pop[data-c-song-popup]{inline-size:min(900px,calc(100vw - 32px));max-inline-size:none;padding:0;border:0;background:none;overflow:visible}.song-pop[data-c-song-popup]::backdrop{background:rgb(0 0 0 / 0.88)}.song-pop__screen[data-c-song-popup]{position:relative;aspect-ratio:16 / 9;max-block-size:calc(100dvh - 32px);border:1.5px solid #e6c27a;border-radius:16px;background:#000;overflow:hidden;box-shadow:0 0 50px 6px rgb(233 196 106 / 0.25)}.song-pop__film[data-c-song-popup],.song-pop__film[data-c-song-popup] iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}.song-pop__close[data-c-song-popup]{position:absolute;inset-block-start:8px;inset-inline-end:8px;z-index:2;inline-size:44px;block-size:44px;border:1.5px solid #e6c27a;border-radius:50%;background:rgb(0 0 0 / 0.7);color:#fff;font-size:var(--fs-l);line-height:1;cursor:pointer}.song-pop__close[data-c-song-popup]:focus-visible{outline:2px solid #f3d792;outline-offset:3px}.v5pre {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: grid;
    place-items: center;
    background: #000;
    pointer-events: none;
  }

  html:not(.v5-pre-on) .v5pre {
    display: none;
  }

  /* nothing scrolls while it plays */
  html.v5-pre-on body {
    overflow: hidden;
  }

  .v5pre__in {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding: 0 20px;
    text-align: center;
  }

  /* the place name and the logo share one spot: the name first, the logo at the end */
  .v5pre__top {
    display: grid;
    place-items: center;
    margin-block-end: 18px;
  }

  .v5pre__top > * {
    grid-area: 1 / 1;
  }

  .v5pre__place {
    color: #f3d792;
    font: 500 clamp(1rem, 0.9rem + 0.6vw, 1.4rem) / 1.2 var(--face-text);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    /* (25 Oct 2026) shown the moment the page arrives (the count starts once the script is there), never a blank black screen */
    opacity: 1;
  }

  .v5pre__logo {
    inline-size: min(64vw, 360px);
    block-size: auto;
    opacity: 0;
  }

  .v5pre__axe {
    inline-size: 64px;
    block-size: auto;
    opacity: 1;
  }

  .v5pre__num {
    min-inline-size: 9ch;
    background: linear-gradient(180deg, #fff3cf, #f3d792 40%, #c9953f 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 600 clamp(2.8rem, 1.6rem + 5vw, 6.4rem)/1.1 var(--face-display);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .v5pre__cap {
    color: rgb(255 243 214 / 0.8);
    font: 500 clamp(1rem, 0.9rem + 0.4vw, 1.3rem)/1.3 var(--face-text);
  }

/* ── photo-fit ── */
/* Photo fit and position (from the photo settings). Was written into 47 pages; one copy here is enough. */
:where([data-astro-image]) {
  object-fit: var(--fit);
  object-position: var(--pos);
  height: auto;
}
:where([data-astro-image=full-width]) {
  width: 100%;
}
:where([data-astro-image=constrained]) {
  max-width: 100%;
}