@charset "utf-8";

/* ==========================================================================
   Old Blue Boar — site stylesheet (child of Oogle Theme).

   The approved PHP design, ported to block markup. Values come from
   theme.json (presets and settings.custom.bb.*); this file only aliases them
   to the names the design has always used, then composes the sections.

   UNLAYERED ON PURPOSE. WordPress's global styles are unlayered, so a layered
   child stylesheet would lose every conflict (docs/MIGRATION-LOG.md, P1).
   Specificity is kept low: one class per rule where possible, two where a
   parent or core rule of 0,2,0 has to be matched.
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------------- */
:root {
  --forest-950: var(--wp--custom--bb--color--forest-950);
  --forest-900: var(--wp--preset--color--contrast);
  --forest-800: var(--wp--custom--bb--color--forest-800);
  --forest-700: var(--wp--preset--color--contrast-soft);
  --forest-600: var(--wp--custom--bb--color--forest-600);
  --moss-400: var(--wp--custom--bb--color--moss-400);
  --moss-300: var(--wp--custom--bb--color--moss-300);
  --lake-600: var(--wp--custom--bb--color--lake-600);
  --stone-600: var(--wp--custom--bb--color--stone-600);
  --stone-500: var(--wp--custom--bb--color--stone-500);
  --stone-400: var(--wp--custom--bb--color--stone-400);
  --stone-200: var(--wp--custom--bb--color--stone-200);
  --paper-000: var(--wp--custom--bb--color--paper-000);
  --paper-050: var(--wp--preset--color--base);
  --paper-100: var(--wp--preset--color--surface);
  --warm-100: var(--wp--preset--color--accent-tint);
  --navy-950: var(--wp--custom--bb--color--navy-950);
  --navy-900: var(--wp--preset--color--primary-deep);
  --navy-800: var(--wp--preset--color--primary);
  --navy-700: var(--wp--custom--bb--color--navy-700);
  --brass-300: var(--wp--custom--bb--color--brass-300);
  --brass-200: var(--wp--custom--bb--color--brass-200);
  --ember-500: var(--wp--custom--bb--color--ember-500);
  --ember-600: var(--wp--custom--bb--color--ember-600);
  --ember-700: var(--wp--custom--bb--color--ember-700);
  --cta: var(--wp--preset--color--accent);
  --cta-hover: var(--wp--preset--color--accent-deep);

  --bg: var(--paper-050);
  --ink: var(--forest-900);
  --ink-muted: var(--wp--preset--color--muted);
  --ink-soft: var(--stone-600);
  --ink-invert: var(--paper-050);
  --ink-invert-muted: var(--wp--custom--bb--color--ink-invert-muted);
  --rule: color-mix(in srgb, var(--forest-900) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--forest-900) 34%, transparent);
  --rule-invert: color-mix(in srgb, var(--paper-050) 24%, transparent);
  --accent: var(--ember-500);          /* rules and underlines only */
  --accent-strong: var(--ember-600);   /* anything carrying text: 5.6:1 on paper */
  --accent-hover: var(--ember-700);
  --focus: var(--lake-600);

  --font-display: var(--wp--preset--font-family--heading);
  --font-sans: var(--wp--preset--font-family--body);
  --step--2: var(--wp--preset--font-size--x-small);
  --step--1: var(--wp--preset--font-size--small);
  --step-0: var(--wp--preset--font-size--medium);
  --step-1: var(--wp--preset--font-size--large);
  --step-2: var(--wp--preset--font-size--x-large);
  --step-3: var(--wp--preset--font-size--xx-large);
  --step-4: var(--wp--preset--font-size--xxx-large);
  --step-5: var(--wp--preset--font-size--xxxx-large);
  --step-6: var(--wp--preset--font-size--display);
  --step-7: var(--wp--custom--bb--step--7);
  --step-8: var(--wp--custom--bb--step--8);

  --sp-3xs: var(--wp--preset--spacing--10);
  --sp-2xs: var(--wp--preset--spacing--20);
  --sp-xs: var(--wp--preset--spacing--30);
  --sp-s: var(--wp--preset--spacing--40);
  --sp-m: var(--wp--preset--spacing--50);
  --sp-l: var(--wp--preset--spacing--60);
  --sp-xl: var(--wp--preset--spacing--70);
  --sp-2xl: var(--wp--preset--spacing--80);
  --sp-3xl: var(--wp--custom--bb--space--3-xl);

  --gutter: var(--wp--custom--bb--gutter);
  --wrap: 82.5rem;
  --wrap-narrow: 58rem;
  --measure: 34rem;
  --measure-wide: 46rem;
  --cols: repeat(12, minmax(0, 1fr));
  --col-gap: var(--wp--custom--bb--col-gap);
  /* What a photograph must travel to bleed off the page from inside a .wrap grid. */
  --bleed: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --radius: 2px;

  --ease-settle: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-drift: cubic-bezier(0.33, 0, 0.15, 1);
  --dur-fast: 150ms;
  --dur-mid: 400ms;
  --dur-slow: 700ms;
  --dur-cine: 1800ms;

  /* Header: tall at the top of the page, compact once scrolling starts.
     --header-h is the TOP height and doubles as the page's spacer, so the page
     never moves when the header compacts. */
  --header-h: 4.75rem;
  --header-h-compact: 3.9rem;
  --crest-top: 3.9rem;
  --crest-compact: 2.6rem;
  --brand-name-top: 1.4rem;
  --brand-name-compact: 1.2rem;
  --header-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-dur: 280ms;
}
@media (min-width: 56rem) {
  :root {
    --header-h: 6rem;
    --header-h-compact: 4.5rem;
    --crest-top: 4.9rem;
    --crest-compact: 3.2rem;
    --brand-name-top: 1.75rem;
    --brand-name-compact: 1.32rem;
  }
}

/* ---- Document ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  padding-top: var(--header-h);
  font-variant-ligatures: common-ligatures;
  overflow-x: clip;
}
/* Template parts that sit between main and the footer (the mobile booking
   bar) must not open a strip of page ground above the footer. */
.wp-site-blocks > * { margin-block-start: 0; }

:where(h1, h2, h3, h4) em { font-style: italic; letter-spacing: -0.01em; }
:where(main) p { max-width: var(--measure); }
:where(main) :where(ul, ol):not([class]) { padding-left: 1.15em; }
li::marker { color: var(--stone-500); }
strong, b { font-weight: 600; }
a { text-underline-offset: 0.22em; text-decoration-thickness: from-font; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline-color: var(--focus); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--moss-300) 55%, transparent); color: inherit; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important; /* The one utility that must win everywhere. */
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sections carry their own vertical rhythm; core's block gap never separates them. */
.wp-block-post-content > .alignfull { margin-block: 0; }
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
/* Grid containers position their children; core's flow gap must not.
   Core's flow resets use :first-child / :last-child (specificity 0,2,0), so a
   one-class placement rule would lose to them on the first and last item. One
   0,2,0 rule here owns block margins inside the design's containers; component
   rules set --mt / --mb instead of margin-top / margin-bottom. */
:is(.wrap, [class*="__grid"], .hero, .herorail, .lakemoment, .lakemoment__stage, .finalcta, .roomslide, .obb-header__inner, .obb-footer__inner, .obb-footer__top, .obb-footer__bottom) > :is(*, :first-child, :last-child) {
  margin-block: var(--mt, 0) var(--mb, 0);
}

.section { padding-block: var(--sp-3xl); }
.section--alt { background: var(--paper-000); }
.section--deep { background: var(--forest-950); color: var(--ink-invert); }

/* ---- Images ----------------------------------------------------------------
   Every photograph is uploaded already composed to its design ratio, so
   frames only ever scale. A frame that shows a different ratio than the
   master sets aspect-ratio on the figure and the image covers it. */
:where(main .wp-block-image) { margin: 0; }
:where(main .wp-block-image) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--stone-200);
}
:where(main .wp-block-image) figcaption,
:where(main) .wp-element-caption {
  margin: 0.7rem 0 0;
  font-size: var(--step--2);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  max-width: 38ch;
  text-align: left;
  text-wrap: pretty;
}
/* A frame of fixed shape: the figure sets the ratio, the image fills it. */
.obb-cover img { aspect-ratio: inherit; height: 100%; object-fit: cover; }

/* ---- Type helpers ----------------------------------------------------------- */
.is-style-eyebrow,
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85em;
  margin: 0 0 var(--sp-m);
  font: 600 0.7rem/1.2 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
h2.eyebrow { max-width: none; }
.is-style-eyebrow::before,
.eyebrow::before {
  content: "";
  flex: 0 0 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; text-align: center; }
.eyebrow--center::after { content: ""; flex: 0 0 1.6rem; height: 1px; background: currentColor; opacity: 0.7; }
:is(.theatre, .lakemoment, .nearby, .section--deep, .year, .boats) :is(.is-style-eyebrow, .eyebrow) { color: var(--brass-300); }

.is-style-lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 38ch;
  text-wrap: balance;
}

/* ---- Actions ------------------------------------------------------------------
   Primary: booking. Squared, copper, uppercase (theme.json element styles).
   Secondary: outline, same shape. Editorial: a sentence-case text link with a
   drawn underline and an arrow (the parent's "text" button style, restyled). */
.wp-block-button__link { min-height: 3rem; box-shadow: none; }
.obb-btn--small > .wp-block-button__link { min-height: 2.75rem; padding: 0.7em 1.2em; font-size: 0.7rem; }

.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: inherit;
  border: 1px solid var(--rule-strong);
  padding-block: 0.9em;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: color-mix(in srgb, var(--forest-900) 7%, transparent); color: inherit; }
:is(.finalcta, .section--deep, .hero) .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(10, 18, 13, 0.18);
}
:is(.finalcta, .section--deep, .hero) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.wp-block-button.is-style-text > .wp-block-button__link,
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  min-height: 0;
  padding: 0.3em 0 0.25em;
  border: 0;
  border-radius: 0;
  font: 500 var(--step--1)/1.3 var(--font-sans);
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--dur-mid) var(--ease-settle), color var(--dur-fast) var(--ease-settle);
}
.wp-block-button.is-style-text > .wp-block-button__link::after,
.link-arrow::after {
  content: "\2192";
  color: var(--accent-strong);
  transition: transform var(--dur-mid) var(--ease-settle);
}
.wp-block-button.is-style-text > .wp-block-button__link:hover,
.link-arrow:hover { background-size: 0 1px; background-position: 100% 100%; }
.wp-block-button.is-style-text > .wp-block-button__link:hover::after,
.link-arrow:hover::after { transform: translateX(0.3em); }
:is(.theatre, .lakemoment, .nearby, .section--deep, .finalcta, .year, .boats) .wp-block-button.is-style-text > .wp-block-button__link { color: #fff; }
:is(.theatre, .lakemoment, .nearby, .section--deep, .finalcta, .year, .boats) .wp-block-button.is-style-text > .wp-block-button__link::after { color: var(--brass-300); }

.wp-block-buttons { gap: 0.75rem 1.1rem; }
@media (max-width: 29.99rem) {
  /* Button pairs stack on a phone; the suite carousel's inline links do not. */
  .wp-block-buttons:not(.roomslide__actions):has(.wp-block-button:not(.is-style-text) + .wp-block-button:not(.is-style-text)) { flex-direction: column; align-items: stretch; }
  .wp-block-buttons:not(.roomslide__actions):has(.wp-block-button:not(.is-style-text) + .wp-block-button:not(.is-style-text)) > .wp-block-button { width: 100%; }
}

/* ==========================================================================
   Header. Fixed; transparent over a photographic hero, navy everywhere else,
   compact once the page scrolls. The body is padded by the TOP height, so
   compacting never shifts the page; heroes pull up underneath it.
   ========================================================================== */
.obb-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--wp--custom--z--header);
  color: #fff;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(201, 160, 108, 0.22);
  transition: background-color var(--header-dur) var(--header-ease), border-color var(--header-dur) var(--header-ease), box-shadow var(--header-dur) var(--header-ease);
}
.admin-bar .obb-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* Over a hero, until the page scrolls or the hero is passed. Decided by CSS
   from the first paint, so the header never flashes solid then clears. */
body:has(main :is(.hero--cine, .pagehero, .roomhero)) .obb-header:not([data-scrolled="true"]):not([data-over-hero="false"]) {
  background: linear-gradient(to bottom, rgba(7, 29, 41, 0.55), rgba(7, 29, 41, 0));
  border-bottom-color: transparent;
}
.obb-header[data-over-hero="false"] {
  background: color-mix(in srgb, var(--navy-900) 95%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
}
.obb-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--navy-900) 96%, transparent);
  border-bottom-color: rgba(201, 160, 108, 0.22);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 10px 30px -18px rgba(7, 29, 41, 0.7);
}
.obb-header__inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  min-height: var(--header-h);
  transition: min-height var(--header-dur) var(--header-ease);
}
.obb-header[data-scrolled="true"] .obb-header__inner { min-height: var(--header-h-compact); }

/* Brand: the crest, the name and the place, one link to home. */
.obb-brand {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  align-items: center;
  flex: none;
  margin: 0;
}
.obb-brand::before {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: var(--crest-top);
  height: var(--crest-top);
  background: url("../img/brand/crest-light-sm.webp") center / contain no-repeat;
  transition: width var(--header-dur) var(--header-ease), height var(--header-dur) var(--header-ease);
}
.obb-header[data-scrolled="true"] .obb-brand::before { width: var(--crest-compact); height: var(--crest-compact); }
.obb-brand > * { margin: 0; }
.obb-brand__name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--font-display);
  font-size: var(--brand-name-top);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: #fff;
  transition: font-size var(--header-dur) var(--header-ease);
}
.obb-header[data-scrolled="true"] .obb-brand__name { font-size: var(--brand-name-compact); }
.obb-brand__name a { color: inherit; text-decoration: none; }
/* The name's link covers the whole lock-up, crest included. */
.obb-brand__name a::after { content: ""; position: absolute; inset: 0; }
.obb-brand__sub {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 0.18rem;
  font: 400 0.6rem/1.1 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.obb-header[data-scrolled="true"] .obb-brand__sub { opacity: 0.8; }
@media (max-width: 32rem) {
  .obb-header .obb-brand__name a { font-size: 0; }
  .obb-header .obb-brand__sub { display: none; }
}

/* Primary navigation (core Navigation). */
.obb-header .obb-nav { color: #fff; }
/* Core sizes the "Menu" button with font-size: inherit at 0,3,0, so its type is set on the block. */
.obb-header nav.obb-nav { font-size: var(--step--1); font-weight: 500; line-height: 1.62; }
.obb-header .obb-nav .wp-block-navigation__container { gap: clamp(1rem, 1.6vw, 2rem); }
.obb-header .obb-nav .wp-block-navigation-item__content {
  position: relative;
  min-block-size: 0;
  padding-block: 0.4rem;
  font: 500 var(--step--2)/1.62 var(--font-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.obb-header .obb-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--brass-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-settle);
}
.obb-header .obb-nav .wp-block-navigation-item__content:hover::after,
.obb-header .obb-nav .wp-block-navigation-item__content[aria-current]::after { transform: scaleX(1); }

/* "Menu": the open button, with three hairlines before the word. */
.obb-header .wp-block-navigation__responsive-container-open {
  gap: 0.55em;
  padding: 0.55em 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.obb-header .wp-block-navigation__responsive-container-open::before {
  content: "";
  width: 20px;
  height: 9px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

.obb-header__actions { display: flex; align-items: center; gap: var(--sp-s); flex: none; }
.obb-header__actions > * { margin: 0; }
.obb-header__phone { display: none; font-size: var(--step--2); letter-spacing: 0.06em; opacity: 0.85; font-variant-numeric: tabular-nums; }
.obb-header__phone a { color: #fff; text-decoration: none; }
@media (min-width: 76rem) { .obb-header__phone { display: block; } }

/* Below 64rem the menu button sits after "Book", as on the PHP site. */
@media (max-width: 63.99rem) {
  .obb-header nav.obb-nav { order: 3; margin-left: calc(var(--sp-s) - var(--sp-m)); }
  .obb-header__actions { margin-left: auto; }
}

/* ---- Mobile menu (the navigation-overlay part) -------------------------------- */
.obb-overlay {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  padding: var(--sp-s) var(--gutter) var(--sp-xl);
  background: var(--forest-900);
  color: var(--ink-invert);
}
.obb-overlay > * { margin: 0; }
.obb-overlay__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.obb-brand--compact { grid-template-rows: auto; }
.obb-overlay .obb-brand__name { grid-row: 1; align-self: center; }
.obb-overlay .wp-block-navigation-overlay-close {
  font: 500 var(--step--1)/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.obb-overlay nav.obb-overlay__nav { margin-top: var(--sp-xl); } /* Core copies the class onto the inner list too. */
.obb-overlay .wp-block-navigation .wp-block-navigation-item__content,
.obb-overlay .obb-btn--row > .wp-block-button__link {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0.55em 0;
  border: 0;
  border-bottom: 1px solid var(--rule-invert);
  border-radius: 0;
  background: none;
  font: 400 var(--step-3)/1.62 var(--font-display);
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--ink-invert);
  text-decoration: none;
}
.obb-overlay__book { display: block; }
.obb-overlay__book .wp-block-button { display: block; width: 100%; }
.obb-overlay__foot { display: grid; gap: var(--sp-s); margin-top: var(--sp-xl); }
.obb-overlay__foot p { margin: 0; font-size: var(--step--1); letter-spacing: 0.04em; }
.obb-overlay__foot a { color: var(--ink-invert); text-decoration: underline; }
.obb-overlay .obb-overlay__nav .wp-block-navigation__container { gap: 0; }

/* ==========================================================================
   Footer: light, quiet, clearly after the story ends.
   ========================================================================== */
.obb-footer {
  background: var(--paper-100);
  color: var(--ink-muted);
  padding-block: var(--sp-2xl) var(--sp-l);
  font-size: var(--step--1);
  border: 0;
}
/* Pages that end on light content get a rule above the footer. */
body:not(:has(.wp-block-post-content > :is(.finalcta, .section--deep):last-child)) .obb-footer { border-top: 1px solid var(--rule-strong); }
.obb-footer a { color: inherit; text-decoration: none; }
.obb-footer a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.obb-footer__inner { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.obb-footer__top {
  display: grid;
  gap: var(--sp-xl);
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 56rem) { .obb-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.obb-footer__about-col > * { margin: 0; }
.obb-wordmark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
}
.obb-wordmark__sub {
  margin-top: 0.35rem;
  font: 500 clamp(0.52rem, 0.44rem + 0.35vw, 0.62rem)/1 var(--font-sans);
  letter-spacing: clamp(0.12em, 0.06em + 0.3vw, 0.22em);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
.obb-footer__about { margin-top: var(--sp-m); max-width: 34ch; color: var(--ink-muted); }
.obb-footer__label {
  margin: 0 0 var(--sp-s);
  font: 600 0.68rem/1.2 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.obb-footer__col > * { margin-block: 0; }
.obb-footer__col > .obb-footer__label { margin-bottom: var(--sp-s); }
.obb-footer__nav .wp-block-navigation__container { gap: 0; }
.obb-footer__nav .wp-block-navigation-item { margin-bottom: 0.5em; }
.obb-footer__nav .wp-block-navigation-item__content { padding: 0; min-block-size: 0; font-size: var(--step--1); line-height: 1.62; }
.obb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-m);
  justify-content: space-between;
  padding-top: var(--sp-m);
  font-size: var(--step--2);
  color: var(--ink-soft);
}
.obb-footer__bottom p { margin: 0; max-width: none; }
.obb-footer__nap { color: var(--ink); }
.obb-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2xs) var(--sp-m); }
.obb-footer__meta > * { margin: 0; }
.obb-footer__social { display: flex; flex-wrap: wrap; gap: var(--sp-m); list-style: none; margin: 0; padding: 0; }
.obb-footer__social li { margin: 0; }
.obb-footer__social a {
  display: inline-block;
  padding-block: 0.3rem;
  margin-block: -0.3rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
}
.obb-footer__social a:hover, .obb-footer__social a:focus-visible { text-decoration-color: var(--accent); }

/* ---- Mobile booking bar ----------------------------------------------------- */
.obb-sticky-book {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--forest-900) 96%, transparent);
  border-top: 1px solid var(--rule-invert);
  transform: translateY(110%);
  transition: transform var(--dur-mid) var(--ease-settle);
}
.obb-sticky-book[data-visible="true"] { transform: none; }
.obb-sticky-book > * { margin: 0; }
.obb-sticky-book__label { margin: 0; color: var(--ink-invert); font-size: var(--step--1); line-height: 1.25; }
.obb-sticky-book__label b { display: block; font: 400 var(--step-0)/1.25 var(--font-display); }
@media (min-width: 64rem) { .obb-sticky-book { display: none; } }
@media (max-width: 63.99rem) {
  body:has(.obb-sticky-book) .obb-footer { padding-bottom: calc(var(--sp-l) + 4.5rem + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* ---- 1. Cinematic hero ------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
}
/* Heroes pull up under the fixed header (0,2,0 to match the section reset). */
.wp-block-post-content > :is(.hero, .pagehero, .roomhero) { margin-top: calc(var(--header-h) * -1); }
.hero--cine {
  min-height: min(56rem, 100svh);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  background: var(--navy-950);
}
.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--dur-cine) linear;
  will-change: opacity;
}
.hero__frame:first-child, .hero__frame[data-active] { opacity: 1; }
.hero__stage:has(.hero__frame[data-active]) .hero__frame:not([data-active]) { opacity: 0; }
.hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: none;
}
.hero--cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(7, 29, 41, 0.6) 0%, rgba(7, 29, 41, 0) 22%),
    linear-gradient(to top, rgba(7, 20, 14, 0.9) 0%, rgba(7, 20, 14, 0.5) 34%, rgba(7, 20, 14, 0.12) 62%, rgba(7, 20, 14, 0.2) 100%),
    linear-gradient(to right, rgba(7, 20, 14, 0.45) 0%, rgba(7, 20, 14, 0) 60%);
}
.hero__body {
  display: grid;
  justify-items: start;
  text-align: left;
  padding-block: calc(var(--header-h) + var(--sp-2xl)) clamp(2rem, 7vh, 4.5rem);
}
.hero__heading { margin: 0; display: grid; gap: clamp(0.9rem, 2vh, 1.4rem); font-size: inherit; line-height: 1.08; color: #fff; }
.hero__place {
  display: block;
  margin: 0;
  font: 500 0.7rem/1.08 var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.hero__place::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.6rem;
  height: 1px;
  margin: -0.15em 0.9em 0 0;
  background: rgba(201, 160, 108, 0.7);
}
@media (max-width: 30rem) { .hero__state { display: none; } }
.hero__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 1.2rem + 5.4vw, 6.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 13ch;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(4, 12, 8, 0.45);
}
.hero__promise {
  --mt: clamp(1rem, 2.4vh, 1.6rem);
  max-width: 36ch;
  font: 400 clamp(1.02rem, 0.9rem + 0.55vw, 1.3rem)/1.55 var(--font-sans);
  color: rgba(255, 255, 255, 0.9);
  text-wrap: balance;
}

/* The booking rail: the hero's own foot, not a card laid over it. */
.herorail {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 20, 14, 0.42);
  backdrop-filter: blur(8px) saturate(120%);
  color: #fff;
}
.herorail__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem var(--sp-l);
  padding-block: 1.05rem;
}
.herorail__line { margin: 0; max-width: none; color: rgba(255, 255, 255, 0.8); font-size: var(--step--1); }
.herorail__line b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  letter-spacing: -0.005em;
  color: #fff;
  margin-right: 0.35em;
}
.herorail__actions { display: flex; align-items: center; gap: 0.6rem var(--sp-l); }
.herorail__actions > * { margin: 0; }
.herorail__phone { margin: 0; font-size: var(--step--1); white-space: nowrap; }
.herorail__phone a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 0.3em; }
.herorail__phone a:hover { text-decoration-color: var(--brass-300); }
/* Frame ticks (built by the front-end module) sit just above the rail. */
.hero__ticks { position: absolute; right: var(--gutter); bottom: calc(100% + 1rem); display: flex; gap: 0.55rem; margin: 0; padding: 0; list-style: none; z-index: 3; }
.hero__ticks > li { margin: 0; }
.hero__tick { appearance: none; border: 0; padding: 0.55rem 0; background: none; cursor: pointer; width: clamp(1.6rem, 4vw, 2.6rem); }
.hero__tick::before { content: ""; display: block; height: 2px; background: rgba(255, 255, 255, 0.34); transition: background var(--dur-mid) var(--ease-settle); }
.hero__tick[aria-current="true"]::before { background: var(--brass-200); }
.hero__tick:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 63.99rem) {
  .herorail__inner { display: grid; justify-items: start; gap: 0.9rem; padding-block: 1.1rem 1.3rem; }
  .herorail__actions { flex-wrap: wrap; gap: 0.75rem 1.4rem; }
  .herorail__actions .wp-block-buttons { order: -1; }
}
@media (max-width: 29.99rem) {
  .herorail__line b { display: block; margin: 0 0 0.1rem; }
  .herorail__inner { grid-template-columns: minmax(0, 1fr); }
  .herorail__actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; justify-self: stretch; }
  .herorail__actions .wp-block-buttons, .herorail__actions .wp-block-button { justify-self: stretch; width: 100%; }
}

/* ---- 2. At a glance ------------------------------------------------------- */
.glance { padding-block: var(--sp-2xl) 0; }
.glance__grid {
  display: grid;
  gap: var(--sp-l) var(--col-gap);
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--rule);
}
.glance__lead .eyebrow { margin-bottom: var(--sp-s); }
.glance__count { display: flex; align-items: flex-end; gap: 1rem; margin: 0; max-width: none; }
.glance__num {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 3.8rem + 7vw, 9.5rem);
  line-height: 0.74;
  color: var(--navy-800);
  letter-spacing: -0.04em;
}
.glance__count-text { font-size: var(--step-0); line-height: 1.45; color: var(--ink-muted); max-width: 17ch; padding-bottom: 0.1rem; }
.glance__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--col-gap);
}
.glance__item {
  margin: 0;
  padding: 1.1rem 0 1.2rem;
  border-top: 1px solid var(--rule);
  display: grid;
  align-content: start;
  gap: 0.2rem;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink-soft);
}
.glance__item b { font-weight: 600; font-size: var(--step-0); color: var(--ink); letter-spacing: -0.005em; }
.glance__item--key { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .glance__grid { grid-template-columns: var(--cols); align-items: end; }
  .glance__lead { grid-column: 1 / span 4; }
  .glance__list { grid-column: 5 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .glance__item--key { grid-column: auto; }
  .glance__item { padding: 0.2rem 1.1rem; border-top: 0; border-left: 1px solid var(--rule); }
}
/* Line icons drawn for this site (one stroke, currentColor), as masks so they
   need no markup in the content. */
.obb-icon::before {
  content: "";
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 0.45rem;
  background: var(--accent-strong);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.obb-icon--dock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5l4.5-4 3 2.5 3.5-3.5 5 5 4-3'/%3E%3Cpath d='M4 13.5h16'/%3E%3Cpath d='M7 13.5v4M12 13.5v4M17 13.5v4'/%3E%3Cpath d='M2 19.5c1.7 0 1.7-1.2 3.3-1.2s1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.6 1.2 3.3 1.2'/%3E%3C/svg%3E"); }
.obb-icon--cup { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h11v3.5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5V11z'/%3E%3Cpath d='M16 12.5h1.2a2.3 2.3 0 0 1 0 4.6H15.6'/%3E%3Cpath d='M3.5 21.5h14'/%3E%3Cpath d='M8.5 3.5c-.9 1 .9 2 0 3.5M12.5 3.5c-.9 1 .9 2 0 3.5'/%3E%3C/svg%3E"); }
.obb-icon--paddle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 19.8l9.3-9.3'/%3E%3Cpath d='M13.2 10.8c-1.3-1.3-.9-4 .9-5.8s4.5-2.2 5.8-.9.9 4-.9 5.8-4.5 2.2-5.8.9z'/%3E%3Cpath d='M3 21l2.4-2.4'/%3E%3C/svg%3E"); }
.obb-icon--paw { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='6.3' cy='10.2' rx='1.6' ry='2.1'/%3E%3Cellipse cx='10' cy='6.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='14.3' cy='6.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='17.9' cy='10.2' rx='1.6' ry='2.1'/%3E%3Cpath d='M12.1 11.6c-2.6 0-5.4 3.6-5.4 6.1 0 1.5 1.2 2.3 2.6 2.3 1.1 0 1.8-.6 2.8-.6s1.7.6 2.8.6c1.4 0 2.6-.8 2.6-2.3 0-2.5-2.8-6.1-5.4-6.1z'/%3E%3C/svg%3E"); }
.obb-icon--wifi { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.2a13.6 13.6 0 0 1 19 0'/%3E%3Cpath d='M5.6 12.6a9.2 9.2 0 0 1 12.8 0'/%3E%3Cpath d='M8.8 15.9a4.7 4.7 0 0 1 6.4 0'/%3E%3Ccircle cx='12' cy='19.2' r='1.1'/%3E%3C/svg%3E"); }

/* ---- 3. The inn: photograph off the right edge, detail across its corner --- */
.innstory { padding-block: var(--sp-2xl) var(--sp-2xl); overflow-x: clip; }
.innstory__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--col-gap); }
.innstory__text { grid-column: 1 / -1; grid-row: 1; }
.innstory__title { font-family: var(--font-display); font-size: var(--step-6); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 var(--sp-m); max-width: 11ch; }
.innstory__text .is-style-lead { margin-bottom: var(--sp-s); }
.innstory__text > p:not(.is-style-lead):not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 36ch; }
.innstory__main { grid-column: 1 / -1; grid-row: 2; --mt: var(--sp-xl); margin-inline: calc(-1 * var(--gutter)); }
.innstory__main img { border-radius: 0; }
.innstory__detail { grid-column: 4 / -1; grid-row: 3; --mt: -22%; position: relative; z-index: 2; width: min(100%, 13rem); justify-self: end; }
.innstory__detail img { outline: 0.45rem solid var(--bg); }
@media (min-width: 56rem) {
  .innstory__grid { grid-template-columns: var(--cols); align-items: start; }
  .innstory__text { grid-column: 1 / span 4; grid-row: 1; padding-top: var(--sp-xl); position: relative; z-index: 2; }
  .innstory__main { grid-column: 6 / -1; grid-row: 1; --mt: 0; margin-inline: 0 calc(-1 * var(--bleed)); aspect-ratio: 4 / 3; }
  .innstory__main img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
  .innstory__detail { grid-column: 5 / span 3; grid-row: 1; align-self: end; --mt: 0; --mb: calc(-1 * var(--sp-xl)); width: min(100%, 14rem); justify-self: start; }
  .innstory__detail img { outline-width: 0.6rem; }
}

/* ---- 4. Rooms theatre: a dark stage and a real slider ----------------------- */
.theatre {
  position: relative;
  overflow: hidden;
  background: var(--forest-950);
  color: var(--ink-invert);
  padding-block: var(--sp-3xl) var(--sp-2xl);
}
.theatre::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 160, 108, 0.45), transparent);
}
.theatre :is(h2, h3) { color: #fff; }
.theatre__head { display: grid; gap: var(--sp-m); align-items: end; margin-bottom: var(--sp-xl); }
@media (min-width: 56rem) { .theatre__head { grid-template-columns: minmax(0, 1fr) auto; } }
.theatre__title { font-size: var(--step-6); line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
.theatre__lede { color: rgba(255, 255, 255, 0.72); max-width: 46ch; margin-top: var(--sp-s); }
.theatre__tools { display: flex; align-items: center; gap: var(--sp-l); }
.theatre__tools > * { margin: 0; }

/* The run: a scroll-snap viewport that bleeds to the screen edge, so the
   next suite is visibly cut off. Works with touch, trackpad, keys and Tab
   without JavaScript; the module adds buttons, drag and progress. */
.slider__viewport {
  display: flex;
  gap: var(--sp-m);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.25rem max(var(--gutter), calc(50vw - var(--wrap) / 2));
  scroll-padding-inline: max(var(--gutter), calc(50vw - var(--wrap) / 2));
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__viewport:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 6px; }
.slider__viewport > * { margin: 0; flex: none; }
.slider__track { max-width: none; display: flex; gap: var(--sp-m); margin: 0; padding: 0; list-style: none; }
.slider__track > li { margin: 0; }
.roomslide--all { align-self: start; }
.slider__track > li, .roomslide--all { flex: 0 0 auto; width: min(82vw, 24rem); scroll-snap-align: start; }
@media (min-width: 56rem) { .slider__track > li, .roomslide--all { width: 30rem; } }
@media (min-width: 90rem) { .slider__track > li, .roomslide--all { width: 33rem; } }
.obb-slider[data-dragging] .slider__viewport { scroll-behavior: auto; cursor: grabbing; }
.obb-slider[data-dragging] a { pointer-events: none; }
.slider__controls { display: flex; gap: var(--sp-2xs); align-items: center; }
.slider__btn {
  appearance: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-settle), border-color var(--dur-fast) var(--ease-settle), opacity var(--dur-fast) linear;
}
.slider__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--brass-300); }
.slider__btn[disabled] { opacity: 0.3; cursor: default; }
.slider__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.slider__progress {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin: var(--sp-l) auto 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  overflow: hidden;
}
.slider__progress::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--slider-thumb, 30%);
  transform: translateX(var(--slider-pos, 0%));
  background: var(--brass-300);
  transition: transform 220ms var(--ease-settle);
}

/* A suite, as a slide. The name's link covers the card. */
.roomslide { position: relative; display: block; color: inherit; }
.roomslide__media { position: relative; overflow: hidden; border-radius: var(--radius); margin: 0; }
.roomslide__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transition: transform 1200ms var(--ease-drift);
}
.roomslide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 29, 41, 0.72), rgba(7, 29, 41, 0) 46%);
  opacity: 0;
  pointer-events: none; /* Decoration over the photograph's link. */
  transition: opacity var(--dur-mid) var(--ease-settle);
}
.roomslide:hover .roomslide__media img, .roomslide:focus-within .roomslide__media img { transform: scale(1.05); }
.roomslide:hover .roomslide__media::after, .roomslide:focus-within .roomslide__media::after { opacity: 1; }
.roomslide__body { padding-top: 1.1rem; display: grid; gap: 0.25rem; }
.roomslide__body > * { margin: 0; }
.roomslide__num { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-300); }
.roomslide__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.011em; color: #fff; }
/* A suite card has three real links: photograph and title (to the suite; the
   photograph's is out of the tab order) and its actions. No stretched link: it
   would cover the booking link. Each link shows its own focus ring. */
.roomslide__media > a { display: block; color: inherit; }
.roomslide__name a { color: inherit; text-decoration: none; }
.roomslide__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.roomslide a:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 4px; border-radius: 2px; }
/* The "all suites" card is one link (its title, stretched): ring the card. */
.roomslide--all:has(:focus-visible) { outline: 2px solid var(--brass-300); outline-offset: 8px; border-radius: 4px; }
.roomslide--all a:focus-visible { outline: none; }
.roomslide__beds { font-size: var(--step--1); color: rgba(255, 255, 255, 0.66); }
.roomslide__cue {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
}
.roomslide__body > .roomslide__cue { margin-top: 0.6rem; } /* 0,2,0: it can be the only child. */
.roomslide__cue::after { content: ""; width: 1.4rem; height: 1px; background: var(--brass-300); transition: width var(--dur-mid) var(--ease-settle); }
.roomslide:hover .roomslide__cue::after, .roomslide:focus-within .roomslide__cue::after { width: 2.6rem; }
/* The suite card's actions: real links in the cue's style. */
.roomslide__actions { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.roomslide__actions .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35rem 0; min-height: 2.75rem;
  background: none; border: 0; border-radius: 0; color: #fff;
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em; text-transform: none; text-decoration: none;
}
.roomslide__actions .wp-block-button__link::after { content: ""; width: 1.4rem; height: 1px; background: var(--brass-300); transition: width var(--dur-mid) var(--ease-settle); }
.roomslide__actions .wp-block-button__link:hover::after, .roomslide__actions .wp-block-button__link:focus-visible::after { width: 2.6rem; }
/* The last slide: everything the run does not show. */
.roomslide--all .roomslide__media {
  display: grid;
  place-content: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  padding: var(--sp-l);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #121c16;
}
.roomslide--all .roomslide__media::after { content: none; }
.roomslide--all .roomslide__media > * { margin: 0 auto; }
.roomslide__all-title { font: 400 var(--step-4)/1 var(--font-display); color: #fff; }
.roomslide__all-title a { color: inherit; text-decoration: none; }
.roomslide__all-title a::after { content: ""; position: absolute; inset: 0; }
.roomslide__all-text { margin-top: var(--sp-s); color: rgba(255, 255, 255, 0.65); font-size: var(--step--1); max-width: 28ch; }

/* ---- 5. Around the inn: a staggered photo essay ---------------------------- */
.essay { padding-block: var(--sp-3xl); }
.essay__head { max-width: 46rem; --mb: var(--sp-2xl); }
.essay__head .is-style-eyebrow { margin-bottom: var(--sp-m); }
.essay__title { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.016em; margin: 0; }
.essay__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--sp-xl); align-items: start; }
.essay__fig--a { grid-column: 1 / span 5; }
.essay__fig--b { grid-column: 2 / -1; }
.essay__fig--c { grid-column: 1 / span 3; }
.essay__note { grid-column: 4 / -1; align-self: center; }
.essay__note p { font-size: var(--step-0); color: var(--ink-muted); }
.essay__fig--d { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); }
.essay__fig--d figcaption { padding-inline: var(--gutter); }
.essay__fig--d img { border-radius: 0; }
.essay__fig--e { grid-column: 3 / -1; }
@media (min-width: 56rem) {
  .essay__grid { grid-template-columns: var(--cols); row-gap: 0; }
  .essay__fig--a { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .essay__fig--b { grid-column: 7 / -1; grid-row: 1; --mt: var(--sp-2xl); }
  .essay__fig--c { grid-column: 7 / span 2; grid-row: 2; --mt: var(--sp-xl); }
  .essay__note { grid-column: 9 / span 4; grid-row: 2; --mt: var(--sp-xl); align-self: start; padding-left: var(--sp-s); }
  .essay__fig--d { grid-column: 2 / span 7; grid-row: 3; --mt: var(--sp-2xl); margin-inline: 0; }
  .essay__fig--d figcaption { padding-inline: 0; }
  .essay__fig--d img { border-radius: var(--radius); }
  .essay__fig--e { grid-column: 10 / span 3; grid-row: 3; --mt: calc(var(--sp-2xl) * 2); }
}

/* ---- 6. Lake Santeetlah: the full-bleed moment ------------------------------ */
.lakemoment { background: var(--navy-950); color: #fff; overflow: hidden; }
.lakemoment__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: clamp(32rem, 92svh, 60rem);
}
.lakemoment__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.lakemoment__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 60%;
  border-radius: 0;
  background: none;
}
.lakemoment__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--navy-950) 0%, rgba(7, 29, 41, 0.72) 22%, rgba(7, 29, 41, 0.1) 52%, rgba(7, 29, 41, 0) 70%),
    linear-gradient(to bottom, rgba(7, 29, 41, 0.35), rgba(7, 29, 41, 0) 20%);
}
.lakemoment__over { padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.lakemoment__over .is-style-eyebrow { margin-bottom: var(--sp-s); }
.lakemoment__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 1.3rem + 5.6vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 50px rgba(4, 16, 24, 0.5);
}
.lakemoment__title em { display: block; white-space: nowrap; }
.lakemoment__foot { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--col-gap); padding-bottom: var(--sp-3xl); }
/* On a phone the second dock photograph would only repeat the first. */
.lakemoment__inset { display: none; }
.lakemoment__copy { grid-column: 1 / -1; padding-top: var(--sp-s); }
.lakemoment__text { font-size: var(--step-1); line-height: 1.5; color: rgba(255, 255, 255, 0.86); max-width: 40ch; }
.obb-facts { list-style: none; margin: var(--sp-l) 0; padding: 0; display: grid; gap: 0; }
.obb-facts li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--sp-s);
  margin: 0;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.9);
}
.obb-facts strong { font: 600 0.68rem/1.4 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-300); padding-top: 0.2rem; }
@media (min-width: 56rem) {
  .lakemoment__foot { grid-template-columns: var(--cols); }
  .lakemoment__inset { display: block; grid-column: 9 / span 4; grid-row: 1; --mt: calc(-1 * var(--sp-3xl)); position: relative; z-index: 1; }
  .lakemoment__copy { grid-column: 1 / span 6; grid-row: 1; padding-top: var(--sp-l); }
  .lakemoment__over { padding-bottom: var(--sp-2xl); }
  .lakemoment__bg img { object-position: 50% 58%; }
}

/* ---- 7. Breakfast: warm ground --------------------------------------------- */
.morning { background: var(--warm-100); padding-block: var(--sp-3xl); }
.morning__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.morning__main { grid-column: 1 / span 5; grid-row: 1; }
.morning__main figcaption { max-width: 48%; }
.morning__detail { grid-column: 4 / -1; grid-row: 2; --mt: -40%; position: relative; z-index: 1; width: min(100%, 13rem); justify-self: end; }
.morning__detail img { outline: 0.45rem solid var(--warm-100); }
.morning__text { grid-column: 1 / -1; grid-row: 3; padding-top: var(--sp-xl); }
.morning__text .is-style-eyebrow { margin-bottom: var(--sp-m); }
.morning__title { font-family: var(--font-display); font-size: var(--step-6); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 var(--sp-m); max-width: 11ch; }
.morning__text .is-style-lead { margin-bottom: var(--sp-s); }
.morning__text > p:not(.is-style-lead):not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 42ch; margin-bottom: var(--sp-s); } /* the lunch line, as the duo's body text */
@media (min-width: 56rem) {
  .morning { padding-bottom: calc(var(--sp-3xl) + var(--sp-l)); }
  .morning__grid { grid-template-columns: var(--cols); }
  .morning__main { grid-column: 2 / span 4; grid-row: 1; }
  .morning__main figcaption { max-width: 60%; }
  .morning__detail { grid-column: 5 / span 2; grid-row: 1; align-self: end; --mt: 0; --mb: calc(-1 * var(--sp-l)); }
  .morning__detail img { outline-width: 0.6rem; }
  .morning__text { grid-column: 8 / span 5; grid-row: 1; align-self: center; padding-top: 0; }
}

/* ---- 8. Nearby: drive times beside two photographs -------------------------- */
.nearby { background: var(--forest-950); color: #fff; padding-block: var(--sp-3xl); }
.nearby__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--sp-xl); align-items: start; }
.nearby__text { grid-column: 1 / -1; }
.nearby__title { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.016em; color: #fff; margin: 0 0 var(--sp-l); max-width: 14ch; }
.nearby__list { list-style: none; margin: 0 0 var(--sp-l); padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.nearby__list li { margin: 0; }
.nearby__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-s);
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
}
.nearby__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; transition: transform var(--dur-mid) var(--ease-settle); }
.nearby__time { font-size: var(--step--1); color: rgba(255, 255, 255, 0.62); text-align: right; }
.nearby__list a:hover .nearby__name, .nearby__list a:focus-visible .nearby__name { transform: translateX(0.35rem); color: var(--brass-200); }
.nearby__links { flex-wrap: wrap; gap: 0.6rem var(--sp-l); }
.nearby figcaption { color: rgba(255, 255, 255, 0.6); }
.nearby__fig--a { grid-column: 1 / span 4; grid-row: 2; }
.nearby__fig--b { grid-column: 4 / -1; grid-row: 2; --mt: 55%; position: relative; z-index: 1; }
.nearby__fig--b img { outline: 0.45rem solid var(--forest-950); }
@media (min-width: 56rem) {
  .nearby__grid { grid-template-columns: var(--cols); }
  .nearby__text { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .nearby__fig--a { grid-column: 7 / span 4; grid-row: 1; }
  .nearby__fig--b { grid-column: 10 / span 3; grid-row: 1; --mt: var(--sp-3xl); }
  .nearby__fig--b img { outline-width: 0.6rem; }
}

/* ---- 9. The whole inn: quiet ------------------------------------------------- */
.wholeinn { padding-block: var(--sp-3xl) var(--sp-2xl); }
.wholeinn__grid { display: grid; gap: var(--sp-l) var(--col-gap); align-items: center; }
.wholeinn__text .is-style-eyebrow { margin-bottom: var(--sp-m); }
.wholeinn__title { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.05; margin: 0 0 var(--sp-s); max-width: 18ch; }
.wholeinn__text > p:not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 40ch; margin-bottom: var(--sp-s); }
@media (min-width: 56rem) {
  .wholeinn__grid { grid-template-columns: var(--cols); }
  .wholeinn__media { grid-column: 1 / span 6; }
  .wholeinn__text { grid-column: 8 / span 4; }
}

/* ---- 10. Final call to action: its own moment, clearly not the footer ------- */
.finalcta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: clamp(36rem, 92svh, 46rem);
  color: #fff;
}
.finalcta__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.finalcta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 30%;
  border-radius: 0;
  background: none;
}
.finalcta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 18, 13, 0.95) 0%, rgba(10, 18, 13, 0.86) 48%, rgba(10, 18, 13, 0.55) 64%, rgba(10, 18, 13, 0.08) 100%);
}
@media (min-width: 56rem) {
  .finalcta { align-items: center; min-height: clamp(34rem, 84vh, 50rem); }
  .finalcta__bg img { object-position: 60% 45%; }
  .finalcta::after { background: linear-gradient(90deg, rgba(10, 18, 13, 0.9) 0%, rgba(10, 18, 13, 0.72) 36%, rgba(10, 18, 13, 0) 70%); }
}
.finalcta__body { padding-block: var(--sp-2xl); }
.finalcta__body > * { max-width: 34rem; }
.finalcta__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85em;
  --mb: 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-200);
  text-shadow: 0 1px 12px rgba(10, 18, 13, 0.6);
}
.finalcta__eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.7; }
.finalcta__title { font-family: var(--font-display); font-size: var(--step-7); line-height: 0.94; letter-spacing: -0.024em; margin: 0; color: #fff; }
.finalcta__text { --mt: var(--sp-s); font-size: var(--step-1); line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.finalcta__actions { --mt: var(--sp-l); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; }
.finalcta__actions > * { margin: 0; }
.finalcta__phone { margin: 0; font-size: var(--step--1); }
.finalcta__phone a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 0.2em; }
.finalcta__note {
  position: relative;
  --mt: var(--sp-l);
  padding-top: var(--sp-m);
  max-width: 34rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  text-wrap: balance;
}
.finalcta__note::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 1px; background: var(--brass-300); }
.finalcta--center { align-items: center; text-align: center; }
.finalcta--center::after {
  background:
    radial-gradient(90% 75% at 50% 55%, rgba(10, 18, 13, 0.82), rgba(10, 18, 13, 0.6) 70%),
    linear-gradient(to bottom, rgba(10, 18, 13, 0.35), rgba(10, 18, 13, 0.55));
}
@media (min-width: 56rem) {
  .finalcta--center::after {
    background:
      radial-gradient(70% 80% at 50% 52%, rgba(10, 18, 13, 0.84), rgba(10, 18, 13, 0.55) 75%),
      linear-gradient(to bottom, rgba(10, 18, 13, 0.3), rgba(10, 18, 13, 0.5));
  }
}
.finalcta--center .finalcta__body { display: grid; justify-items: center; padding-block: var(--sp-3xl); }
.finalcta--center .finalcta__body > * { max-width: 40rem; }
.finalcta--center .finalcta__eyebrow { justify-content: center; }
.finalcta--center .finalcta__eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.7; }
.finalcta--center .finalcta__actions { justify-content: center; }
.finalcta--center .finalcta__body > .finalcta__title { margin-inline: auto; }
.finalcta--center .finalcta__body > .finalcta__text { max-width: 36rem; margin-inline: auto; }
.finalcta--center .finalcta__note { margin-inline: auto; }
.finalcta--center .finalcta__note::before { left: 50%; transform: translateX(-50%); }

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* ---- Editorial page head: title on the page's ground, photograph off the
   right edge. The header over it is solid, so nothing is pulled up. Visible
   breadcrumbs were removed in the WordPress build (BreadcrumbList schema
   stays), so the text column simply sits on the photograph's baseline. ---- */
.pagehead { padding-block: var(--sp-xl) var(--sp-2xl); overflow-x: clip; }
.pagehead__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: end; }
.pagehead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 1.3rem + 5vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 12ch;
}
.pagehead__lede { margin: var(--sp-m) 0 0; font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); max-width: 40ch; }
.pagehead__media { margin-inline: calc(-1 * var(--gutter)); }
.pagehead__media img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 56rem) {
  .pagehead { padding-block: var(--sp-l) var(--sp-3xl); }
  .pagehead__grid { grid-template-columns: var(--cols); align-items: stretch; }
  .pagehead__text { grid-column: 1 / span 6; padding-bottom: var(--sp-l); display: flex; flex-direction: column; justify-content: flex-end; }
  .pagehead__media { grid-column: 7 / -1; margin: 0 calc(-1 * var(--bleed)) 0 0; align-self: end; }
  .pagehead__media img { aspect-ratio: auto; }
  /* The page's own frame at desktop (import option ratio=…); a phone keeps 4/3. */
  .pagehead__media:is(.pagehead__media--r4x5, .pagehead__media--r5x4, .pagehead__media--r3x2, .pagehead__media--r4x3) img { object-fit: cover; }
  .pagehead__media--r4x5 img { aspect-ratio: 4 / 5; }
  .pagehead__media--r5x4 img { aspect-ratio: 5 / 4; }
  .pagehead__media--r3x2 img { aspect-ratio: 3 / 2; }
  .pagehead__media--r4x3 img { aspect-ratio: 4 / 3; }
}

/* ---- Opening: a large statement, body text offset under it ------------------ */
.opening { padding-block: var(--sp-3xl); }
.opening__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-m) var(--col-gap); align-items: start; }
.opening__eyebrow, .opening__title, .opening__body { grid-column: 1 / -1; }
.opening__eyebrow { --mb: var(--sp-m); }
.opening__title { font-family: var(--font-display); font-size: var(--step-6); line-height: 0.98; letter-spacing: -0.02em; --mb: var(--sp-m); max-width: 16ch; }
.opening__body > p:not(.is-style-lead) { color: var(--ink-muted); max-width: 44ch; }
.opening__detail { grid-column: 3 / -1; justify-self: end; width: min(100%, 13rem); }
@media (min-width: 56rem) {
  .opening__grid { grid-template-columns: var(--cols); }
  .opening__eyebrow { grid-column: 1 / span 6; }
  .opening__title { grid-column: 1 / span 9; }
  .opening__body { grid-column: 4 / span 5; }
  .opening__detail { grid-column: 10 / span 3; grid-row: 3; justify-self: stretch; width: auto; --mt: calc(-1 * var(--sp-2xl)); }
}

/* ---- Feature: text beside a photograph, the photograph larger --------------- */
.feature { padding-block: var(--sp-3xl); overflow-x: clip; }
.feature--warm { background: var(--warm-100); }
.feature--alt { background: var(--paper-100); }
.feature__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-l) var(--col-gap); align-items: center; }
.feature__text { grid-column: 1 / -1; }
.feature__text .is-style-eyebrow { margin-bottom: var(--sp-m); }
.feature__text > p:not(.is-style-lead):not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 42ch; }
.feature__title { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.016em; margin: 0 0 var(--sp-m); max-width: 14ch; }
.feature__media { grid-column: 1 / -1; }
.feature--bleed .feature__media { margin-inline: calc(-1 * var(--gutter)); }
.feature--bleed .feature__media img { border-radius: 0; }
.feature--bleed .feature__media figcaption { padding-inline: var(--gutter); }
@media (min-width: 56rem) {
  .feature__grid { grid-template-columns: var(--cols); }
  .feature__text { grid-column: 1 / span 5; grid-row: 1; }
  .feature__media { grid-column: 7 / -1; grid-row: 1; }
  .feature--reverse .feature__text { grid-column: 8 / span 5; }
  .feature--reverse .feature__media { grid-column: 1 / span 6; }
  .feature--bleed .feature__media { margin: 0 calc(-1 * var(--bleed)) 0 0; }
  .feature--bleed.feature--reverse .feature__media { margin: 0 0 0 calc(-1 * var(--bleed)); }
  .feature--bleed .feature__media figcaption { padding-inline: 0; }
}

/* Visitor breakfast prices: three short facts on hairlines. */
.pricelist { list-style: none; margin: var(--sp-m) 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-s) var(--sp-l); }
.pricelist > li:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .pricelist { grid-template-columns: repeat(3, max-content); }
  .pricelist > li:nth-child(3) { grid-column: auto; }
}
.pricelist > li {
  display: grid;
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-strong);
  font: 400 var(--step-2)/1.1 var(--font-display);
}
.pricelist strong {
  display: block;
  margin-bottom: 0.2rem;
  font: 600 0.68rem/1.62 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- Duo: two uneven text columns, the second dropped and illustrated ------- */
.duo { padding-block: var(--sp-3xl); border-top: 1px solid var(--rule); }
.duo__grid { display: grid; gap: var(--sp-2xl) var(--col-gap); align-items: start; }
.duo__col .is-style-eyebrow { margin-bottom: var(--sp-m); }
.duo__title { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.05; margin: 0 0 var(--sp-m); max-width: 16ch; }
.duo__col > p:not(.is-style-lead):not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 42ch; }
.duo__media { margin-bottom: var(--sp-l); max-width: 24rem; }
@media (min-width: 56rem) {
  .duo__grid { grid-template-columns: var(--cols); }
  .duo__col { grid-column: 1 / span 5; }
  .duo__col--offset { grid-column: 8 / span 5; --mt: var(--sp-3xl); }
}

/* ---- Questions: heading beside a core Accordion ------------------------------ */
.faqblock { display: grid; gap: var(--sp-l) var(--col-gap); align-items: start; }
.faqblock__head .is-style-eyebrow { margin-bottom: var(--sp-m); }
.faqblock__title { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.05; margin: 0; max-width: 12ch; }
.faqblock__note { color: var(--ink-muted); margin-top: var(--sp-s); max-width: 28ch; }
@media (min-width: 56rem) {
  .faqblock { grid-template-columns: var(--cols); }
  .faqblock__head { grid-column: 1 / span 4; }
  .faqblock > :is(.faq, .faqblock__body) { grid-column: 6 / -1; }
}
/* A faqblock whose right column is prose (group stays: rates and minimum stays). */
.faqblock__body > :is(*, :first-child, :last-child) { margin-block: 0; }
.faqblock__body > p:not(:last-child) { margin-bottom: var(--sp-s); }
.faqblock__body > p:not(.is-style-lead) { color: var(--ink-muted); max-width: 46ch; }
.faq { border-top: 1px solid var(--rule); }
.faq .wp-block-accordion-item { margin: 0; border-bottom: 1px solid var(--rule); }
.faq .wp-block-accordion-heading { margin: 0; }
.faq .wp-block-accordion-heading__toggle {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-m);
  padding: var(--sp-m) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  /* 600, as the PHP site's h3 > button inherited it. */
  font: 600 var(--step-1)/1.35 var(--font-display);
  color: inherit;
}
.faq .wp-block-accordion-heading__toggle::after {
  content: "";
  flex: none;
  align-self: center;
  width: 0.9em;
  height: 0.9em;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: background-size var(--dur-mid) var(--ease-settle);
}
.faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle::after,
.faq .wp-block-accordion-heading__toggle[aria-expanded="true"]::after {
  background-size: 100% 1px, 1px 0;
}
.faq .wp-block-accordion-panel p { padding-bottom: var(--sp-m); margin: 0; color: var(--ink-muted); max-width: var(--measure-wide); }
/* The answer's own padding is the design's spacing: no parent panel padding
   (core-accordion.css) and no flow gap between question and answer. */
.faq .wp-block-accordion-item > :is(*, :first-child, :last-child) { margin-block: 0; }
.faq .wp-block-accordion-panel { padding-block-end: 0; }

/* ---- /book/: the booking engine is the page ----------------------------------
   One centred axis: eyebrow, heading, one line, widget (all from the site
   plugin's [blueboar_booking]), then the other ways to book on a dark ground
   that closes the page before the light footer. No hero spacing on a
   transactional page. */
.bookhead { padding-block: var(--sp-l) var(--sp-m); }
@media (min-width: 56rem) { .bookhead { padding-block: var(--sp-xl) var(--sp-l); } }
.bookhead__inner { display: grid; justify-content: center; justify-items: center; text-align: center; }
.bookhead .eyebrow { margin: 0 0 var(--sp-s); }
.bookhead__title { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.018em; margin: 0; }
.bookhead__title em { display: block; } /* "Book your stay at / Blue Boar Inn", never "... / at Blue Boar Inn" */
.bookhead__line {
  margin: var(--sp-s) 0 0;
  max-width: 36rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: balance;
}
.bookhead__all { margin-top: var(--sp-s); }

/* The widget. Guestroom Genie lays itself out on its own breakpoints: under
   768px of frame it fills the frame; at 768px and over it sits in a narrower
   box. The frame is capped just under that, so the widget always fills it.
   Nothing here reaches inside the vendor iframe. */
.booking-embed {
  min-height: var(--embed-min-height, 620px);
  background: var(--paper-000);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-s);
}
.booking-embed__frame { width: 100%; border: 0; display: block; }
.booking-embed__fallback { padding: var(--sp-l); }
.bookwidget { padding-bottom: var(--sp-2xl); }
.bookwidget .booking-embed {
  --embed-pad: var(--sp-xs);
  max-width: calc(760px + 2 * var(--embed-pad) + 2px);
  min-height: calc(var(--embed-min-height, 550px) + 2 * var(--embed-pad) + 3px);
  margin-inline: auto;
  padding: var(--embed-pad);
  border-top: 2px solid var(--accent-strong);
  box-shadow: 0 1px 2px rgba(14, 23, 18, 0.05), 0 24px 48px -28px rgba(14, 23, 18, 0.3);
}
@media (max-width: 40rem) {
  .bookwidget { margin-inline: calc(0.5rem - var(--gutter)); } /* the widget alone goes almost edge to edge */
  .bookwidget .booking-embed { --embed-pad: 0.25rem; border-inline: 0; box-shadow: none; }
}

/* Other ways to book: three equal columns on one axis. Subgrid keeps label,
   lead, text and action on shared rows however the copy wraps. */
:is(.bookhelp__head, .bookhelp__item) > :is(*, :first-child, :last-child) { margin-block: 0; }
.bookhelp__head { --mb: var(--sp-xl); display: grid; justify-items: center; text-align: center; max-width: 40rem; margin-inline: auto; }
.bookhelp__head > .is-style-eyebrow { margin-bottom: var(--sp-s); }
.bookhelp__title { font-size: var(--step-5); line-height: 1.04; color: #fff; }
.bookhelp__head > .bookhelp__lede { margin-top: var(--sp-s); max-width: 34rem; color: var(--ink-invert-muted); text-wrap: balance; }
.bookhelp__grid {
  margin: 0 auto;
  max-width: 66rem;
  display: grid;
  border-top: 1px solid var(--rule-invert);
}
.bookhelp__item {
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding: var(--sp-l) var(--sp-s);
  border-bottom: 1px solid var(--rule-invert);
}
.bookhelp__item > .bookhelp__label {
  margin-bottom: var(--sp-xs);
  font: 600 0.7rem/1.2 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-300);
}
.bookhelp__lead { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; color: #fff; text-wrap: balance; }
.bookhelp__lead a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.4); text-decoration-thickness: 1px; }
.bookhelp__lead a:hover { text-decoration-color: var(--brass-300); }
.bookhelp__item > .bookhelp__text { margin-top: var(--sp-xs); max-width: 30ch; font-size: var(--step--1); color: var(--ink-invert-muted); text-wrap: pretty; }
.bookhelp__text a { color: #fff; }
.bookhelp__item > .bookhelp__action { margin-top: var(--sp-m); justify-content: center; line-height: 1; overflow-wrap: anywhere; }
@media (min-width: 60rem) {
  .bookhelp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-invert); }
  .bookhelp__item {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: var(--sp-xl) var(--sp-l);
    border-bottom: 0;
  }
  .bookhelp__item + .bookhelp__item { border-left: 1px solid var(--rule-invert); }
  .bookhelp__item > .bookhelp__action { align-self: end; }
}

/* ---- /rooms/: photographed suites ---------------------------------------------
   A Query Loop over the suites that have a confirmed photograph (never one
   room's photograph standing in for another). The first is the lead card. */
.suites { padding-block: 0 var(--sp-3xl); }
.suites__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-xl) var(--col-gap);
  align-items: start;
}
.suites__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .suites__grid { grid-template-columns: var(--cols); row-gap: var(--sp-l); }
  .suites__grid > :first-child { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .suites__grid > :not(:first-child) { grid-column: 9 / -1; }
}

.room-card { position: relative; display: block; }
.room-card > :is(*, :first-child, :last-child),
.room-card__body > :is(*, :first-child, :last-child) { margin-block: 0; }
.room-card__media { margin: 0; overflow: hidden; border-radius: var(--radius); }
.room-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--dur-slow) var(--ease-drift);
}
.suites__grid > :first-child .room-card__media img { aspect-ratio: 4 / 3; }
.room-card:hover .room-card__media img { transform: scale(1.045); }
.room-card__body { padding-top: 1rem; display: grid; gap: 0.25rem; justify-items: start; }
.room-card__number {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.room-card__name {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.05;
}
.room-card__name a { color: inherit; text-decoration: none; }
.suites__grid > :first-child .room-card__name { font-size: var(--step-5); }
:is(.suites__grid > :not(:first-child), .othersuites__cards) .room-card__name { font-size: var(--step-2); }
.room-card__meta { font-size: var(--step--1); letter-spacing: 0.02em; color: var(--ink-soft); }
.room-card__body > .room-card__actions { margin-top: 0.6rem; }

/* ---- /rooms/: every suite, by number ------------------------------------------ */
.ledger-section { padding-block: var(--sp-3xl); border-top: 1px solid var(--rule); }
.ledger-section__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: start; }
.ledger-section__intro > :is(*, :first-child, :last-child) { margin-block: 0; }
.ledger-section__intro > .is-style-eyebrow { margin-bottom: var(--sp-m); }
.ledger-section__intro > .ledger-section__title {
  margin-bottom: var(--sp-m);
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.02;
}
.ledger-section__intro > p:not(.is-style-eyebrow) { margin-bottom: 1rem; color: var(--ink-muted); max-width: 34ch; }
.ledger { min-width: 0; }
@media (min-width: 56rem) {
  .ledger-section__grid { grid-template-columns: var(--cols); }
  .ledger-section__intro {
    grid-column: 1 / span 3;
    position: sticky;
    top: calc(var(--header-h-compact) + var(--sp-l));
  }
  .ledger-section__grid > .ledger { grid-column: 5 / -1; }
}

/* A table at width, labelled blocks on a phone (the site plugin's
   [blueboar_suite_table] keeps explicit table roles for screen readers). */
.suitetable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.suitetable thead th {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  text-align: left;
  padding: 0 0.9rem 0.8rem 0;
  vertical-align: bottom;
  border-bottom: 1px solid var(--rule-strong);
}
.suitetable td,
.suitetable tbody th {
  padding: 1rem 0.9rem 1rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  text-align: left;
  font-weight: 400;
}
.suitetable :is(th, td):last-child { padding-right: 0; }
.suitetable__row { scroll-margin-top: calc(var(--header-h) + 1rem); }
.suitetable__row:target { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); }
td.suitetable__num {
  width: 2.6rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--navy-800);
}
.suitetable__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; white-space: nowrap; }
.suitetable__name a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
.suitetable__book span:not(.visually-hidden) { display: block; color: var(--ink-soft); }
.suitetable__book .link-arrow { margin-top: 0.3rem; white-space: nowrap; }
.suitetable td:is([data-label="Sleeps"], [data-label="Private bathroom"]) { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .suitetable, .suitetable tbody, .suitetable tr, .suitetable td, .suitetable tbody th { display: block; }
  .suitetable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .suitetable tr.suitetable__row {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: var(--sp-s);
    padding: 1.1rem 0 1.2rem;
    border-top: 1px solid var(--rule);
  }
  .suitetable tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .suitetable td, .suitetable tbody th { padding: 0; border: 0; }
  td.suitetable__num { grid-row: 1 / span 5; width: auto; }
  .suitetable__row > :not(.suitetable__num) { grid-column: 2; }
  .suitetable__name { white-space: normal; margin-bottom: 0.45rem; }
  .suitetable td[data-label] { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.5rem; padding: 0.15rem 0; }
  .suitetable td[data-label]::before {
    content: attr(data-label);
    padding-top: 0.2em;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .suitetable__book { margin-top: 0.2rem; }
  .suitetable__book span:not(.visually-hidden) { color: var(--ink); }
  .suitetable__book .link-arrow { grid-column: 2; justify-self: start; }
}

/* ---- /rooms/: what every stay includes ----------------------------------------- */
.includes { background: var(--paper-100); padding-block: var(--sp-3xl); }
.includes__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: start; }
:is(.includes__head, .includes__item) > :is(*, :first-child, :last-child) { margin-block: 0; }
.includes__head > .is-style-eyebrow { margin-bottom: var(--sp-m); }
.includes__head > .includes__title {
  margin-bottom: var(--sp-l);
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.02;
}
.includes__list { display: grid; grid-template-columns: 1fr; gap: 0 var(--col-gap); }
.includes__list > :is(*, :first-child, :last-child) { margin-block: 0; }
.includes__item { padding: 1.1rem 0 1.3rem; border-top: 1px solid var(--rule); }
.includes__item > .includes__term { margin-bottom: 0.3rem; font-weight: 600; font-size: var(--step-0); }
.includes__desc { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.55; max-width: 40ch; }
@media (min-width: 40rem) {
  .includes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .includes__list > .includes__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .includes__list > .includes__item:last-child:nth-child(odd) .includes__desc { max-width: 60ch; }
}
@media (min-width: 56rem) {
  .includes__grid { grid-template-columns: var(--cols); }
  .includes__head { grid-column: 1 / span 5; }
  .includes__grid > .includes__list { grid-column: 7 / -1; padding-top: var(--sp-2xl); }
}

/* ---- Suite page (single-bb_suite): the room, full size, first ---------------- */
/* The template's sections (hero, fact bar, the suite's content) meet edge to edge. */
.obb-main > :is(*, :first-child, :last-child) { margin-block: 0; }
.obb-main > .roomhero { margin-top: calc(var(--header-h) * -1); } /* under the transparent header */
.roomhero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(46rem, 86svh);
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  isolation: isolate;
  overflow: hidden;
  color: var(--ink-invert);
}
.roomhero > :is(*, :first-child, :last-child) { margin-block: 0; }
.roomhero__bg { position: absolute; inset: 0; z-index: -2; margin: 0; height: 100%; }
.roomhero__bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 48rem) { .roomhero__bg img { object-position: 50% 45%; } }
.roomhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--forest-900) 86%, transparent) 0%,
    color-mix(in srgb, var(--forest-900) 30%, transparent) 46%,
    color-mix(in srgb, var(--forest-900) 20%, transparent) 100%);
}
.roomhero__body { padding-block: var(--sp-xl) var(--sp-2xl); }
.roomhero__body > .roomhero__num {
  margin-top: var(--sp-m);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-200);
}
.roomhero__body > .roomhero__name {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.4rem + 6vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.024em;
  color: #fff;
}

/* Key facts, before any prose. */
.factbar { border-bottom: 1px solid var(--rule); }
.factbar__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-m) 0;
  display: grid;
  gap: var(--sp-s) var(--sp-l);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem) { .factbar__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .factbar__list { grid-template-columns: repeat(5, 1fr); } }
.factbar__list > li { margin: 0; }
.factbar__key {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.factbar__val { display: block; margin-top: 0.35em; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; }

/* Description and booking, side by side. */
.split { display: grid; gap: var(--sp-l) var(--sp-xl); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 7fr 5fr; gap: var(--sp-2xl); }
  .split--top { align-items: start; }
}
.stack > :is(*, :first-child, :last-child) { margin-block: 0; }
.stack > :not(:first-child) { margin-top: var(--flow, var(--sp-s)); }
.stack--m { --flow: var(--sp-m); }
.stack > .amenities { margin-top: 0; } /* sits directly under its heading, as on the PHP page */
.bookrail {
  padding: var(--sp-m) 0 0;
  border-top: 2px solid var(--accent-strong);
}
.bookrail > :is(*, :first-child, :last-child) { margin-block: 0; }
@media (min-width: 64rem) {
  .bookrail { position: sticky; top: calc(var(--header-h) + var(--sp-m)); }
}
.bookrail > .bookrail__rate { margin-bottom: var(--sp-s); font-family: var(--font-display); font-size: var(--step-3); line-height: 1.2; }
.bookrail > .bookrail__actions { display: grid; gap: var(--sp-xs); margin-top: var(--sp-l); }
.bookrail__actions > .wp-block-button,
.bookrail__actions .wp-block-button__link { width: 100%; }
.bookrail > .bookrail__note { margin-top: var(--sp-m); font-size: var(--step--1); color: var(--ink-soft); }
.note {
  border-left: 2px solid var(--accent);
  padding: var(--sp-2xs) 0 var(--sp-2xs) var(--sp-m);
  color: var(--ink-muted);
  max-width: var(--measure-wide);
}
.amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-xs) var(--sp-l);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.amenities > li { position: relative; margin: 0; padding-left: 1.4em; font-size: var(--step--1); }
.amenities > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--moss-400);
}

/* The suite from other angles. Core's lightbox ("expand on click") opens them. */
.roomgallery { padding-block: var(--sp-2xl) var(--sp-3xl); }
.roomgallery .wrap > .roomgallery__title {
  margin: 0 0 var(--sp-xl);
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.02;
}
.roomgallery__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-m) var(--col-gap);
  align-items: start;
}
.roomgallery__item img { transition: transform var(--dur-slow) var(--ease-drift); }
.roomgallery__item:hover img { transform: scale(1.02); }
.roomgallery__item { overflow: hidden; border-radius: var(--radius); }
.roomgallery__item--a, .roomgallery__item--d { grid-column: 1 / -1; }
.roomgallery__item--b { grid-column: 1 / span 3; }
.roomgallery__item--c { grid-column: 4 / -1; --mt: var(--sp-xl); }
.roomgallery .wrap > .roomgallery__note { margin-top: var(--sp-m); font-size: var(--step--2); color: var(--ink-soft); }
@media (min-width: 56rem) {
  .roomgallery__grid { grid-template-columns: var(--cols); row-gap: var(--sp-l); }
  .roomgallery__item--a { grid-column: 1 / span 8; grid-row: 1; }
  .roomgallery__item--b { grid-column: 9 / -1; grid-row: 1; --mt: var(--sp-3xl); }
  .roomgallery__item--c { grid-column: 2 / span 4; grid-row: 2; --mt: 0; }
  .roomgallery__item--d { grid-column: 7 / span 5; grid-row: 2; --mt: var(--sp-2xl); }
}

/* The other suites. */
.othersuites { background: var(--paper-100); padding-block: var(--sp-3xl); }
.othersuites__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: start; }
.othersuites__head > :is(*, :first-child, :last-child) { margin-block: 0; }
.othersuites__head > .is-style-eyebrow { margin-bottom: var(--sp-m); }
.othersuites__head > p:not(.is-style-eyebrow) { margin-top: var(--sp-s); color: var(--ink-muted); max-width: 34ch; }
.othersuites__head > .wp-block-buttons { margin-top: var(--sp-s); }
.othersuites__query > :is(*, :first-child, :last-child),
.othersuites__cards > :is(*, :first-child, :last-child) { margin-block: 0; }
.othersuites__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-l) var(--col-gap); }
@media (min-width: 56rem) {
  .othersuites__grid { grid-template-columns: var(--cols); }
  .othersuites__head { grid-column: 1 / span 4; }
  .othersuites__grid > .othersuites__query { grid-column: 6 / -1; }
}

/* ---- Photographic page hero (The Inn, the lake): title over the photograph ---- */
.pagehero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(24rem, 58svh, 36rem);
  padding-top: var(--header-h);
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
}
.pagehero--tall { min-height: clamp(28rem, 74svh, 46rem); }
.pagehero > :is(*, :first-child, :last-child) { margin-block: 0; }
.pagehero__bg { position: absolute; inset: 0; z-index: -2; height: 100%; }
.pagehero__bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: none; }
.pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(7, 29, 41, 0.62) 0%, rgba(7, 29, 41, 0) 26%),
    linear-gradient(to top, rgba(7, 22, 15, 0.88) 0%, rgba(7, 22, 15, 0.32) 46%, rgba(7, 22, 15, 0.06) 74%);
}
.pagehero__body { padding-block: var(--sp-2xl) clamp(2.5rem, 7vh, 4.5rem); }
.pagehero__body > :is(*, :first-child, :last-child) { margin-block: 0; }
.pagehero__body > .pagehero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85em;
  margin-bottom: var(--sp-s);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-200);
}
.pagehero__eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.7; }
.pagehero__title {
  max-width: 13ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 1.2rem + 5.4vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.022em;
  color: #fff;
  text-shadow: 0 2px 44px rgba(6, 14, 10, 0.45);
}
.pagehero__body > .pagehero__lede {
  margin-top: var(--sp-m);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
@media (prefers-reduced-motion: no-preference) {
  .js .pagehero:not([data-settle="done"]) :is(.pagehero__eyebrow, .pagehero__title, .pagehero__lede) { opacity: 0.001; transform: translateY(22px); }
  .pagehero :is(.pagehero__eyebrow, .pagehero__title, .pagehero__lede) { transition: opacity 900ms var(--ease-settle), transform 900ms var(--ease-settle); }
  .pagehero .pagehero__title { transition-delay: 110ms; }
  .pagehero .pagehero__lede { transition-delay: 230ms; }
  .js .pagehero .pagehero__bg img { transform: scale(1.05); transition: transform 2400ms var(--ease-drift); }
  .js .pagehero[data-settle="done"] .pagehero__bg img { transform: scale(1); }
}

/* ---- The Inn: the property ------------------------------------------------------ */
.property { padding-block: var(--sp-3xl); }
.property__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-l) var(--col-gap); align-items: start; }
.property__head, .property__body { grid-column: 1 / -1; }
.property__head > :is(*, :first-child, :last-child),
.property__body > :is(*, :first-child, :last-child) { margin-block: 0; }
.property__head > .is-style-eyebrow { margin-bottom: var(--sp-m); }
.property__title { max-width: 13ch; font-family: var(--font-display); font-size: var(--step-6); line-height: 0.98; letter-spacing: -0.02em; }
.property__body > p:not(:first-child) { margin-top: var(--sp-s); }
.property__body > p:not(.is-style-lead) { color: var(--ink-muted); }
.property__main { grid-column: 1 / span 4; }
.property__main figcaption { max-width: 55%; }
.property__detail { grid-column: 3 / -1; position: relative; --mt: -3rem; }
.property__detail img { outline: 0.45rem solid var(--bg); }
@media (min-width: 56rem) {
  .property__grid { grid-template-columns: var(--cols); row-gap: 0; }
  .property__head { grid-column: 1 / span 7; grid-row: 1; }
  .property__body { grid-column: 2 / span 5; grid-row: 2; padding-top: var(--sp-xl); }
  .property__main { grid-column: 9 / -1; grid-row: 1 / span 2; --mt: var(--sp-2xl); }
  .property__main figcaption { margin-left: auto; text-align: right; max-width: 30ch; }
  .property__detail { grid-column: 7 / span 3; grid-row: 3; --mt: calc(-1 * var(--sp-2xl)); }
  .property__detail img { outline-width: 0.6rem; }
}

/* ---- The Inn: the grounds mosaic -------------------------------------------------- */
.grounds { padding-block: var(--sp-2xl) var(--sp-3xl); }
.grounds .wrap > :is(*, :first-child, :last-child) { margin-block: 0; }
.grounds .wrap > .grounds__head { max-width: 44rem; margin-bottom: var(--sp-2xl); }
.grounds__head > :is(*, :first-child, :last-child) { margin-block: 0; }
.grounds__head > .is-style-eyebrow { margin-bottom: var(--sp-m); }
.grounds__title { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; }
.gmosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-xl) var(--col-gap); align-items: start; }
.gmosaic > :is(*, :first-child, :last-child) { margin-block: var(--mt, 0) 0; }
.gfig { grid-column: 1 / -1; }
.gfig:nth-child(2n) { grid-column: 2 / -1; }
.gfig figcaption { margin-top: 0.9rem; max-width: 44ch; font-size: var(--step--1); color: var(--ink-muted); }
.gfig figcaption strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--ink);
}
@media (min-width: 56rem) {
  .gmosaic { grid-template-columns: var(--cols); row-gap: var(--sp-2xl); }
  .gfig:nth-child(4n+1) { grid-column: 1 / span 7; }
  .gfig:nth-child(4n+2) { grid-column: 9 / span 4; --mt: var(--sp-3xl); }
  .gfig:nth-child(4n+3) { grid-column: 2 / span 4; }
  .gfig:nth-child(4n+4) { grid-column: 7 / span 6; --mt: var(--sp-2xl); }
}

/* ---- The Inn: indoors --------------------------------------------------------------- */
.indoors { background: var(--warm-100); padding-block: var(--sp-3xl); }
.indoors__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-l) var(--col-gap); align-items: start; }
.indoors__main { grid-column: 1 / span 5; }
.indoors__text { grid-column: 1 / -1; }
.indoors__text > :is(*, :first-child, :last-child) { margin-block: 0; }
.indoors__text > .is-style-eyebrow { margin-bottom: var(--sp-m); }
.indoors__text > .indoors__title { margin-bottom: var(--sp-m); font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; }
.indoors__text > p:not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 40ch; }
.indoors__a { grid-column: 1 / span 3; }
.indoors__b { grid-column: 4 / -1; --mt: var(--sp-xl); }
@media (min-width: 56rem) {
  .indoors__grid { grid-template-columns: var(--cols); row-gap: 0; }
  .indoors__main { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .indoors__text { grid-column: 7 / span 5; grid-row: 1; padding-top: var(--sp-xl); }
  .indoors__a { grid-column: 7 / span 3; grid-row: 2; --mt: var(--sp-xl); }
  .indoors__b { grid-column: 10 / span 3; grid-row: 2; --mt: var(--sp-3xl); }
}

/* ---- Where next: two uneven links, not two equal cards --------------------------
   Each card is one link: the name's link covers the card (stretched link). */
.nextpair { padding-block: var(--sp-3xl); }
.nextpair__grid { display: grid; gap: var(--sp-2xl) var(--col-gap); align-items: end; }
.nextpair__item { position: relative; display: grid; gap: 0.35rem; color: inherit; }
.nextpair__item > :is(*, :first-child, :last-child) { margin-block: 0; }
.nextpair__item > .wp-block-image { margin-bottom: 0.8rem; }
.nextpair__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.nextpair__name { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1.05; }
.nextpair__item--small .nextpair__name { font-size: var(--step-3); }
.nextpair__name a { color: inherit; text-decoration: none; }
.nextpair__name a::after { content: ""; position: absolute; inset: 0; }
.nextpair__name a:focus-visible { outline: 0; }
.nextpair__item:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.nextpair__text { color: var(--ink-muted); font-size: var(--step--1); max-width: 40ch; }
.nextpair__item:hover .nextpair__name a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent);
}
@media (min-width: 56rem) {
  .nextpair__grid { grid-template-columns: var(--cols); }
  .nextpair__item { grid-column: 1 / span 7; }
  .nextpair__item--small { grid-column: 9 / -1; }
}

/* ---- Lake: the walk down to the water --------------------------------------------- */
:is(.walkdown__text, .boats__col, .thelake__text, .thelake__aside) > :is(*, :first-child, :last-child) { margin-block: 0; }
:is(.walkdown__text, .boats__col, .thelake__text, .thelake__aside) > p:not(:last-child) { margin-bottom: var(--sp-s); }
:is(.walkdown__text, .thelake__text) > p.is-style-eyebrow { margin-bottom: var(--sp-m); }
.walkdown { padding-block: var(--sp-3xl); overflow-x: clip; }
.walkdown__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-l) var(--col-gap); align-items: start; }
.walkdown__text { grid-column: 1 / -1; }
.walkdown__text > p:not(.is-style-lead):not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 40ch; }
.walkdown__text > .walkdown__title {
  margin-bottom: var(--sp-m);
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.walkdown__main { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); }
.walkdown__main img { border-radius: 0; }
.walkdown__detail { grid-column: 3 / -1; position: relative; width: min(100%, 14rem); justify-self: end; --mt: -5rem; }
.walkdown__detail img { outline: 0.45rem solid var(--bg); }
@media (min-width: 56rem) {
  .walkdown__grid { grid-template-columns: var(--cols); row-gap: 0; }
  .walkdown__text { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .walkdown__main { grid-column: 6 / -1; grid-row: 1; margin: 0 calc(-1 * var(--bleed)) 0 0; }
  .walkdown__detail { grid-column: 5 / span 3; grid-row: 2; justify-self: start; width: min(100%, 17rem); --mt: calc(-1 * var(--sp-2xl)); }
  .walkdown__detail img { outline-width: 0.6rem; }
}

/* ---- Lake: the boats, on navy ---------------------------------------------------- */
.boats { background: var(--navy-950); color: #fff; padding-block: var(--sp-3xl); }
.boats__grid { display: grid; gap: var(--sp-l) var(--col-gap); }
.boats__grid > .boats__title {
  grid-column: 1 / -1;
  --mb: var(--sp-l);
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
}
.boats p { color: rgba(255, 255, 255, 0.76); }
.boats .boats__lede { font-size: var(--step-1); line-height: 1.5; max-width: 36ch; } /* colour: .boats p wins on the PHP site too */
.boats .boats__col > h3 { margin-bottom: var(--sp-s); font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: 0; color: #fff; }
.boats__col--aside { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: var(--sp-m); }
@media (min-width: 56rem) {
  .boats__grid { grid-template-columns: var(--cols); }
  .boats__col { grid-column: 1 / span 5; }
  .boats__col--aside { grid-column: 8 / span 4; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); padding: 0 0 0 var(--sp-l); }
}

/* ---- Lake: the lake itself ------------------------------------------------------- */
.thelake { padding-block: var(--sp-3xl); }
.thelake__grid { display: grid; gap: var(--sp-l) var(--col-gap); align-items: start; }
.thelake__stat { display: flex; align-items: flex-end; gap: 1rem; }
.thelake__stat > * { margin: 0; }
.thelake__num {
  font-family: var(--font-display);
  font-size: clamp(6rem, 3.6rem + 9vw, 12rem);
  line-height: 0.74;
  letter-spacing: -0.04em;
  color: var(--navy-800);
}
.thelake__unit { max-width: 16ch; color: var(--ink-muted); font-size: var(--step-0); line-height: 1.4; }
.thelake__text > .thelake__title { margin-bottom: var(--sp-m); font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; }
.thelake__text > p:not(.is-style-lead):not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 42ch; }
.thelake__aside { border-top: 1px solid var(--rule-strong); padding-top: var(--sp-m); }
.thelake .thelake__aside > h3 { margin-bottom: var(--sp-s); font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: 0; }
.thelake__aside p { color: var(--ink-muted); font-size: var(--step--1); }
.thelake__links { gap: 0.5rem var(--sp-l); }
@media (min-width: 56rem) {
  .thelake__grid { grid-template-columns: var(--cols); row-gap: var(--sp-2xl); }
  .thelake__stat { grid-column: 1 / span 5; grid-row: 1; }
  .thelake__text { grid-column: 7 / span 5; grid-row: 1 / span 2; }
  .thelake__media { grid-column: 1 / span 6; grid-row: 2 / span 2; }
  .thelake__aside { grid-column: 8 / span 4; grid-row: 3; align-self: end; }
}

/* ---- Group stays: four things, not just the bedrooms ---------------------------- */
.fourup { padding-block: var(--sp-3xl); }
.fourup__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: start; }
.fourup__head > :is(*, :first-child, :last-child) { margin-block: 0; }
.fourup__head > p.is-style-eyebrow { margin-bottom: var(--sp-m); }
.fourup__head > .fourup__title { margin-bottom: var(--sp-m); max-width: 12ch; font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; }
.fourup__note { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; color: var(--ink-muted); max-width: 22ch; }
.fourup__list { display: grid; gap: 0 var(--col-gap); }
.fourup__list > :is(*, :first-child, :last-child) { margin-block: 0; }
.fourup__item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: var(--sp-s);
  align-content: start;
  padding: var(--sp-m) 0 var(--sp-l);
  border-top: 1px solid var(--rule);
}
.fourup__item > :is(*, :first-child, :last-child) { margin-block: 0; }
.fourup__item > .fourup__num {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 0.9;
  color: var(--accent-strong);
}
.fourup .fourup__item > h3 { margin: 0.2rem 0 0.35rem; font-size: var(--step-0); }
.fourup__item > p:not(.fourup__num) { color: var(--ink-muted); font-size: var(--step--1); }
@media (min-width: 40rem) {
  .fourup__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fourup__list > .fourup__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fourup__list > .fourup__item:last-child:nth-child(odd) p { max-width: 60ch; }
}
@media (min-width: 56rem) {
  .fourup__grid { grid-template-columns: var(--cols); }
  .fourup__head { grid-column: 1 / span 4; }
  .fourup__grid > .fourup__list { grid-column: 6 / -1; }
}

/* ---- Feature with an inset detail photograph over the main one ------------------- */
.feature__frame { position: relative; }
.feature__frame > :is(*, :first-child, :last-child) { margin-block: 0; }
.feature__detail { position: absolute; z-index: 1; right: -0.5rem; bottom: -3rem; width: min(38%, 13rem); }
.feature__detail img { object-fit: cover; outline: 0.45rem solid var(--bg); }
/* The 4:5 crop only where a detail is not shown at its own proportions. The
   --natural variant keeps the ratio its width/height attributes give it: an
   "aspect-ratio: auto" override removed that ratio, and a lazy image (sizes=auto,
   which browsers size-contain) then fell back to contain-intrinsic-size's 1500 px
   height — a 200 px x 1500 px strip over /contact/ (2026-09-30). */
.feature__detail:not(.feature__detail--natural) img { aspect-ratio: 4 / 5; }
.feature--warm .feature__detail img { outline-color: var(--warm-100); }
.feature--alt .feature__detail img { outline-color: var(--paper-100); }
div.feature__media > :is(*, :first-child, :last-child) { margin-block: 0; } /* the group variant (frame + caption), not an Image block's own caption */
div.feature__media > .feature__caption {
  max-width: 55%;
  margin-top: 0.9rem;
  font-size: var(--step--2);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  text-wrap: pretty;
}
@media (min-width: 56rem) {
  .feature__detail { right: auto; left: calc(-1 * var(--sp-2xl)); bottom: calc(-1 * var(--sp-xl)); width: min(34%, 15rem); }
  .feature--reverse .feature__detail { left: auto; right: calc(-1 * var(--sp-2xl)); }
  .feature__detail img { outline-width: 0.6rem; }
}

/* ---- Group stays: who books the whole inn ------------------------------------------ */
.whofor { padding-block: var(--sp-3xl); }
.whofor__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: start; }
.whofor__text > :is(*, :first-child, :last-child) { margin-block: 0; }
.whofor__text > p.is-style-eyebrow { margin-bottom: var(--sp-m); }
.whofor__text > .whofor__title { margin-bottom: var(--sp-m); font-family: var(--font-display); font-size: var(--step-4); line-height: 1.05; }
.whofor__text > p:not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 40ch; }
.whofor__text > p:not(.is-style-eyebrow):not(:last-child) { margin-bottom: var(--sp-s); }
.whofor__list { list-style: none; margin: 0; padding: 0; }
.whofor__list > li {
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
}
.whofor__list > li:nth-child(even) { padding-left: clamp(1rem, 5vw, 4rem); }
@media (min-width: 56rem) {
  .whofor__grid { grid-template-columns: var(--cols); }
  .whofor__text { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h-compact) + var(--sp-l)); }
  .whofor__grid > .whofor__list { grid-column: 6 / -1; }
}

/* ---- Explore: the guide intro and its index ---------------------------------------- */
.guideintro { padding-block: 0 var(--sp-2xl); }
.guideintro__grid { display: grid; gap: var(--sp-xl) var(--col-gap); border-top: 1px solid var(--rule); padding-top: var(--sp-xl); }
.guideintro__text { max-width: 30ch; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.22; }
.guideintro__nav > :is(*, :first-child, :last-child) { margin-block: 0; }
.guideintro__index { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--col-gap); }
.guideintro__index > li { margin: 0; break-inside: avoid; }
.guideintro__index a {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  font-size: var(--step--1);
  color: inherit;
}
.guideintro__index a span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent-strong); }
.guideintro__index a:hover { color: var(--accent-strong); }
@media (min-width: 56rem) {
  .guideintro__grid { grid-template-columns: var(--cols); }
  .guideintro__text { grid-column: 1 / span 7; }
  .guideintro__nav { grid-column: 9 / -1; }
  .guideintro__index { columns: 1; }
}

/* ---- Explore: one section per category ------------------------------------------ */
.guidecat { padding-block: var(--sp-2xl) var(--sp-3xl); border-top: 1px solid var(--rule); scroll-margin-top: var(--header-h-compact); }
.guidecat .wrap > :is(*, :first-child, :last-child) { margin-block: 0; }
.guidecat .wrap > .guidecat__head { margin-bottom: var(--sp-2xl); }
.guidecat__head { display: grid; gap: var(--sp-l) var(--col-gap); align-items: end; }
.guidecat__head > :is(*, :first-child, :last-child),
.guidecat__text > :is(*, :first-child, :last-child) { margin-block: 0; }
.guidecat__text > .guidecat__num { margin-bottom: var(--sp-s); font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--accent-strong); }
.guidecat__title { font-family: var(--font-display); font-size: var(--step-6); line-height: 0.98; letter-spacing: -0.02em; }
.guidecat__text > .guidecat__intro { margin-top: var(--sp-m); max-width: 36ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); }
.guidecat__media { margin-inline: calc(-1 * var(--gutter)); }
.guidecat__media img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.guidecat__media figcaption { padding-inline: var(--gutter); }
@media (min-width: 56rem) {
  .guidecat__head { grid-template-columns: var(--cols); }
  .guidecat__text { grid-column: 1 / span 5; grid-row: 1; padding-bottom: var(--sp-s); }
  .guidecat__head > .guidecat__media { grid-column: 7 / -1; grid-row: 1; margin: 0 calc(-1 * var(--bleed)) 0 0; }
  .guidecat__media figcaption { padding-inline: 0; }
  .guidecat--flip .guidecat__text { grid-column: 8 / span 5; }
  .guidecat--flip .guidecat__head > .guidecat__media { grid-column: 1 / span 6; margin: 0 0 0 calc(-1 * var(--bleed)); }
  .guidecat--text .guidecat__text { grid-column: 1 / span 8; }
}

/* ---- Explore: the places ---------------------------------------------------------- */
.placelist { display: grid; gap: var(--sp-l); }
.placelist > :is(*, :first-child, :last-child) { margin-block: 0; }
@media (min-width: 44rem) { .placelist { grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl) var(--sp-l); } }
@media (min-width: 76rem) { .placelist { grid-template-columns: repeat(3, 1fr); } }
.place { display: grid; align-content: start; gap: 0.55rem; padding-top: var(--sp-m); border-top: 1px solid var(--rule); }
.place > :is(*, :first-child, :last-child),
.place__head > :is(*, :first-child, :last-child) { margin-block: 0; }
.place__head { display: grid; gap: 0.15rem; }
.place__name { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.12; letter-spacing: 0; }
.place__kind { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.place > .place__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-top: 0.2rem;
  max-width: none;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--cta);
}
.place__meta span + span::before { content: "· "; color: var(--stone-400); font-weight: 400; }
.place__text { color: var(--ink-muted); max-width: none; }
.place__note { padding-left: var(--sp-s); border-left: 2px solid var(--rule); max-width: none; font-size: var(--step--1); color: var(--ink-soft); }
.place > .wp-block-buttons { justify-self: start; margin-top: 0.2rem; }

/* ---- Drive-time tables (synced patterns, core Table block) ------------------------
   Hairlines, not core's boxed cells; the caption above the table, as on the PHP
   site. The figure is the horizontal scroll region on a narrow screen. */
.wp-block-table.data-table { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow-x: auto; }
.wp-block-table.data-table table { min-width: 34rem; font-size: var(--step--1); border-collapse: collapse; table-layout: auto; }
@media (max-width: 47.99rem) { .wp-block-table.data-table table { min-width: 0; width: 100%; } }
.wp-block-table.data-table figcaption {
  order: -1;
  margin: 0;
  padding-bottom: var(--sp-s);
  max-width: none;
  text-align: left;
  font-size: var(--step--1);
  line-height: inherit;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.wp-block-table.data-table :is(th, td) {
  padding: 0.85em 1em 0.85em 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
  word-break: normal; /* core's fixed-layout tables break words, which squeezed "Distance" */
  overflow-wrap: normal;
}
.wp-block-table.data-table tbody th { font-weight: 700; }
.wp-block-table.data-table thead { border-bottom: 0; }
.wp-block-table.data-table thead th {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom-color: var(--rule-strong);
}
.wp-block-table.data-table :is(th, td):last-child { padding-right: 0; }
.wp-block-table.data-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.faqblock__head > p.note--spaced { margin-block: var(--sp-m); }

/* ---- Plan: getting here, beside the nearest drive times -------------------------- */
.practical { padding-block: var(--sp-3xl); }
.practical__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: start; }
.practical__text > :is(*, :first-child, :last-child) { margin-block: 0; }
.practical__text > p:not(:last-child) { margin-bottom: var(--sp-s); }
.practical__text > p.is-style-eyebrow { margin-bottom: var(--sp-m); }
.practical__text > .practical__title { margin-bottom: var(--sp-m); font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; }
.practical__text > p:not(.is-style-lead):not(.is-style-eyebrow) { color: var(--ink-muted); max-width: 44ch; }
.practical__aside > :is(*, :first-child, :last-child) { margin-block: 0; }
@media (min-width: 56rem) {
  .practical__grid { grid-template-columns: var(--cols); }
  .practical__text { grid-column: 1 / span 6; }
  .practical__aside { grid-column: 8 / -1; padding-top: var(--sp-2xl); }
}
.opening--alt { background: var(--paper-100); }

/* ---- Plan: through the year, on deep forest -------------------------------------- */
.year { padding-block: var(--sp-3xl); background: var(--forest-950); color: #fff; }
.year .wrap > :is(*, :first-child, :last-child) { margin-block: 0; }
.year .wrap > .year__head { max-width: 44rem; margin-bottom: var(--sp-2xl); }
.year__head > :is(*, :first-child, :last-child) { margin-block: 0; }
.year__head > p.is-style-eyebrow { margin-bottom: var(--sp-m); }
.year__title { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; color: #fff; }
.year__grid { display: grid; gap: var(--sp-l) var(--col-gap); }
.year__season { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: var(--sp-m); }
.year__season > :is(*, :first-child, :last-child) { margin-block: 0; }
.year .year__season > h3 {
  margin-bottom: var(--sp-s);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}
.year__season p { color: rgba(255, 255, 255, 0.74); font-size: var(--step--1); line-height: 1.6; }
@media (min-width: 40rem) { .year__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) {
  .year__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .year__season:nth-child(even) { --mt: var(--sp-2xl); }
}

/* ---- Contact: how to reach us ---------------------------------------------------- */
.reach { padding-block: var(--sp-2xl) var(--sp-3xl); }
.reach__grid { display: grid; gap: var(--sp-xl) var(--col-gap); align-items: start; }
.reach__main > :is(*, :first-child, :last-child),
.reach__aside > :is(*, :first-child, :last-child) { margin-block: 0; }
.reach__main > p.is-style-eyebrow { margin-bottom: var(--sp-m); }
.reach__phone {
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.reach__phone a { color: inherit; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat; }
.reach__main > .reach__email { margin: var(--sp-s) 0 var(--sp-l); font-size: var(--step-1); }
.reach__note { color: var(--ink-muted); max-width: 40ch; }
.reach__main > .reach__address { margin-top: var(--sp-m); color: var(--ink-muted); }
.reach__aside > :not(:first-child) { margin-top: var(--sp-m); }
@media (min-width: 56rem) {
  .reach__grid { grid-template-columns: var(--cols); }
  .reach__main { grid-column: 1 / span 6; }
  .reach__aside { grid-column: 8 / -1; padding-top: var(--sp-xl); }
}

/* The map: nothing third-party loads until the guest asks (child script). */
.map-embed {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 17rem;
  padding: var(--sp-l);
  border-radius: var(--radius);
  background: var(--forest-700);
  color: var(--ink-invert);
  text-align: center;
}
/* 16:9, but never shorter than its own text. No overflow: hidden on the box (the
   iframe rounds its own corners): with it, an aspect-ratio box may shrink below
   its content, which clipped the note and hid the button in the narrow aside
   (1024 px, 2026-09-30). */
@media (min-width: 40rem) { .map-embed { aspect-ratio: 16 / 9; min-height: auto; } }
.map-embed > :is(*, :first-child, :last-child),
.map-embed__intro > :is(*, :first-child, :last-child) { margin-block: 0; }
.map-embed__intro > :not(:first-child) { margin-top: var(--sp-m); }
.map-embed__intro > .map-embed__actions { margin-top: calc(var(--sp-s) + var(--sp-m)); } /* PHP: paragraph margin + the button's own (an inline-block's margins do not collapse) */
.map-embed__actions { justify-content: center; }
.map-embed .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--ink-invert); border-color: var(--rule-invert); background: transparent; }
.map-embed .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: color-mix(in srgb, var(--paper-050) 12%, transparent); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }

.fourup__list--one { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .fourup__list--one { grid-template-columns: 1fr; }
  .fourup__list--one > .fourup__item:last-child:nth-child(odd) { grid-column: auto; }
}
.practical--alt { background: var(--paper-100); }
/* Lunch facts (/dining/, /lake-santeetlah/): the price-list hairlines, stacked in the narrow aside. */
.practical__aside .pricelist { grid-template-columns: minmax(0, 1fr); }
.practical__aside .pricelist > li:nth-child(3) { grid-column: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); }

/* ---- Contact: the form (Gravity Forms, its CSS off; styled as the PHP light form) --
   Scoped .contactform .gform_wrapper: Oogle Theme's integrations/gravity-forms.css
   still loads with any form, after this file, at up to 0,3,1 (MIGRATION-LOG P20). */
.contactform > :is(*, :first-child, :last-child) { margin-block: 0; }
.contactform > :not(:first-child) { margin-top: var(--sp-l); }
.contactform > :is(.gform_wrapper, .gform_confirmation_wrapper) { margin-top: var(--sp-m); } /* the PHP form's own --flow */
.contactform__head > :is(*, :first-child, :last-child) { margin-block: 0; }
.contactform__head > :not(:first-child) { margin-top: var(--sp-m); }
.contactform .gform_wrapper form { margin: 0; }
.contactform .gform_wrapper form .gform_fields { display: grid; grid-template-columns: 1fr; row-gap: var(--sp-m); column-gap: var(--sp-l); }
@media (max-width: 43.99rem) {
  /* The PHP form paired fields in rows (a wider gap inside a pair on a phone). */
  .contactform .gform_wrapper .gform_fields > .gfield--width-half:nth-child(odd):not(:first-child) { margin-top: calc(var(--sp-l) - var(--sp-m)); }
}
@media (min-width: 44rem) { .contactform .gform_wrapper form .gform_fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contactform .gform_wrapper .gfield--width-full { grid-column: 1 / -1; }
.contactform .gform_wrapper .gfield { display: grid; gap: 0.4em; align-content: start; min-width: 0; margin: 0; }
/* The honeypot: present for bots, never shown. */
.contactform .gform_wrapper .gfield.gform_validation_container,
.contactform .gform_wrapper .gfield.gfield--type-honeypot { display: none; }
.contactform .gform_wrapper .gfield_label {
  display: block;
  margin: 0;
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contactform .gform_wrapper .gfield_label span { font: inherit; line-height: inherit; color: inherit; }
.contactform .gform_wrapper .gfield_required .gfield_required { margin-left: 0.35em; }
.contactform .gform_wrapper .gfield :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.72em 0.8em;
  font: 400 var(--step-0)/1.3 var(--font-sans);
  color: var(--ink);
  background: var(--paper-000);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: none;
}
.contactform .gform_wrapper .gfield textarea { height: calc(6lh + 1.44em + 2px); min-block-size: 0; resize: vertical; }
.contactform .gform_wrapper .gfield :is(input, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--rule-strong); }
.contactform .gform_wrapper .gform_footer { margin: var(--sp-m) 0 0; padding: 0; }
.contactform .gform_wrapper .gform_button { display: inline-flex; align-items: center; inline-size: auto; width: auto; min-height: 3rem; cursor: pointer; }
/* Errors: said in words at the top (focus moves there) and beside each field. */
.contactform .gform_wrapper .gform_validation_errors {
  margin: 0 0 var(--sp-m);
  padding: var(--sp-s) var(--sp-m);
  border: 0;
  border-left: 2px solid var(--wp--custom--color--error, #b3261e);
  border-radius: 0;
  background: color-mix(in srgb, var(--wp--custom--color--error, #b3261e) 6%, transparent);
  color: var(--ink);
}
.contactform .gform_wrapper .gform_validation_errors :is(h2, .gform_submission_error) { margin: 0; font: 600 var(--step-0)/1.4 var(--font-sans); color: var(--ink); }
.contactform .gform_wrapper .gform_validation_errors ol { margin: 0.4em 0 0; padding-left: 1.2em; font-size: var(--step--1); }
.contactform .gform_wrapper .gform_validation_errors a { color: inherit; }
.contactform .gform_wrapper .gfield_error :is(input, textarea) { border-color: var(--wp--custom--color--error, #b3261e); }
.contactform .gform_wrapper .validation_message { font-size: var(--step--1); color: var(--wp--custom--color--error, #b3261e); }
.contactform .gform_confirmation_message { padding: 0; font-size: var(--step-0); }
.contactform .gform_confirmation_message .bb-form-sent {
  margin: 0;
  padding: var(--sp-m);
  border-left: 2px solid var(--moss-400);
  background: var(--paper-100);
  max-width: var(--measure-wide);
}

/* ---- Type-led pages (accessibility, privacy): the page head and prose ------------ */
.page-head { padding-block: var(--sp-xl); }
.page-head__title { max-width: 14ch; font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); line-height: 0.98; letter-spacing: -0.02em; }
.section--flush-top { padding-block-start: 0; }
.stack--l { --flow: var(--sp-l); }
.prose { max-width: var(--measure); } /* with .wrap--narrow: a centred 34rem column, as on the PHP site */
.prose > h3:not(:first-child) { margin-top: var(--sp-l); }
.privacy__contact { color: var(--ink); }

/* ---- 404 ---------------------------------------------------------------------------- */
.notfound { padding-top: var(--sp-2xl); }
.notfound .stack > .index-list { margin-top: var(--sp-s); } /* PHP: the list's margin:0 overrode the stack; only the lede's paragraph margin remains */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index-list > li { margin: 0; border-bottom: 1px solid var(--rule); }
.index-item {
  position: relative;
  display: grid;
  gap: var(--sp-2xs) var(--sp-l);
  padding-block: var(--sp-m);
  color: inherit;
  text-decoration: none;
  transition: padding-inline-start var(--dur-mid) var(--ease-settle);
}
@media (min-width: 56rem) { .index-item { grid-template-columns: 14rem minmax(0, 1fr) auto; align-items: baseline; } }
a.index-item:hover { padding-inline-start: var(--sp-xs); }
.index-item__label { font-family: var(--font-display); font-size: var(--step-2); }
.index-item__text { color: var(--ink-muted); font-size: var(--step--1); max-width: 52ch; }

/* ==========================================================================
   Motion. Everything is visible at rest; motion only refines a complete page.
   Hidden-at-rest states apply only with JavaScript and without a reduced-
   motion preference. Classes are set in the editor ("reveal-rise" …).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js :is(.reveal-rise, .reveal-mask, .reveal-mask-left, .reveal-zoom):not([data-revealed]) { opacity: 0.001; }
  .js .reveal-rise:not([data-revealed]) { transform: translateY(56px); }
  .js .reveal-zoom:not([data-revealed]) { transform: scale(1.09); }
  .js .reveal-mask:not([data-revealed]) { clip-path: inset(0 0 100% 0); opacity: 1; }
  .js .reveal-mask-left:not([data-revealed]) { clip-path: inset(0 100% 0 0); opacity: 1; }
  /* Chrome's lazy loader ignores a clip-path on an ancestor, so a masked photo
     far down the page was fetched at load. Clipping the image itself defers it
     to its reveal, as on the PHP site. Invisible either way. */
  .js :is(.reveal-mask, .reveal-mask-left):not([data-revealed]) img { clip-path: inset(50%); }
  .reveal-rise, .reveal-zoom {
    transition: transform var(--dur-mid) var(--ease-settle), opacity var(--dur-mid) linear;
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal-mask, .reveal-mask-left {
    clip-path: inset(-1.5rem);
    transition: clip-path 1200ms var(--ease-drift) var(--reveal-delay, 0ms);
  }
  [data-revealed] { transform: none; opacity: 1; }

  /* Ken Burns on the active hero frame. */
  .hero__frame img { transform: scale(1); }
  .hero__frame[data-active] img { animation: bb-kenburns 11000ms var(--ease-drift) forwards; }
  .hero__frame[data-active][data-kb="2"] img { animation-name: bb-kenburns-2; }
  .hero__frame[data-active][data-kb="3"] img { animation-name: bb-kenburns-3; }
  @keyframes bb-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1.2%, -1%, 0); } }
  @keyframes bb-kenburns-2 { from { transform: scale(1.12) translate3d(1%, 0.8%, 0); } to { transform: scale(1.02); } }
  @keyframes bb-kenburns-3 { from { transform: scale(1.03) translate3d(1.4%, 0, 0); } to { transform: scale(1.13) translate3d(-0.6%, -1.4%, 0); } }

  /* Hero entrance, once, on load. */
  .js .hero--story:not([data-settle="done"]) :is(.hero__title, .herorail__inner) { opacity: 0.001; transform: translateY(22px); }
  .hero--story :is(.hero__title, .herorail__inner) { transition: opacity 1100ms var(--ease-settle), transform 1100ms var(--ease-settle); }
  .hero--story[data-settle="done"] :is(.hero__title, .herorail__inner) { opacity: 1; transform: none; }
  .hero--story .hero__title { transition-delay: 240ms; }
  .hero--story .herorail__inner { transition-delay: 760ms; }

  /* The lake scales to rest as it is scrolled through; parallax on the inn. */
  .lakemoment__bg img { transform: scale(var(--lake-scale, 1.06)); }
  .parallax img { transform: translate3d(0, var(--parallax, 0px), 0) scale(1.14); }

  /* The final CTA's photograph eases in from a slight zoom as it arrives. */
  .js .finalcta .finalcta__bg img { transform: scale(1.06); transition: transform 2400ms var(--ease-drift); }
  .js .finalcta[data-revealed] .finalcta__bg img { transform: scale(1); }

  /* Photographs settle a little inside their frames on hover. */
  :is(.essay__fig, .morning__main, .wholeinn__media, .nearby__fig) { overflow: hidden; }
  :is(.essay__fig, .morning__main, .wholeinn__media, .nearby__fig) img { transition: transform 1400ms var(--ease-drift); }
  :is(.essay__fig, .wholeinn__media, .nearby__fig):hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__frame { transition: none; }
  .slider__viewport { scroll-behavior: auto; }
  .obb-header, .obb-header__inner, .obb-brand::before, .obb-brand__name { transition: none; }
}

/* ==========================================================================
   PLATFORM WORKAROUND P6 — navigation overlay (docs/MIGRATION-LOG.md).
   Oogle Theme 1.1.0's core-navigation.css pads and paints the open overlay
   container (0,3,0) and sizes its links (0,4,0) even when the Navigation
   block uses a custom overlay part. Neither is a token, so a child that wants
   a full-bleed dark menu must match those selectors. Kept to these rules and
   nothing else; delete the block if the parent tokenises the overlay.
   ========================================================================== */
.obb-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0;
  background: var(--forest-900);
}
.wp-block-navigation__responsive-container.is-menu-open .obb-overlay__nav .wp-block-navigation-item__content {
  padding-block: 0.55em;
  font-size: var(--step-3);
  text-transform: none;
  letter-spacing: normal;
}
.wp-block-navigation__responsive-container.is-menu-open .obb-overlay__nav .wp-block-navigation-item__content::after { content: none; }
.wp-block-table.data-table:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }