@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) {
  .wp-block-buttons:has(.wp-block-button:not(.is-style-text) + .wp-block-button:not(.is-style-text)) { flex-direction: column; align-items: stretch; }
  .wp-block-buttons: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;
  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; }
.roomslide__name a { color: inherit; text-decoration: none; }
.roomslide__name a::after { content: ""; position: absolute; inset: 0; }
.roomslide__name a:focus-visible { outline: none; }
.roomslide:focus-within { outline: 2px solid var(--brass-300); outline-offset: 8px; border-radius: 4px; }
.roomslide:has(:focus-visible) { outline: 2px solid var(--brass-300); }
.roomslide:not(:has(: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 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); }
@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 { aspect-ratio: 4 / 5; object-fit: cover; outline: 0.45rem solid var(--bg); }
.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);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--forest-700);
  color: var(--ink-invert);
  text-align: center;
}
@media (min-width: 40rem) { .map-embed { aspect-ratio: 16 / 9; min-height: 0; } }
.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; }

.feature__detail--natural img { aspect-ratio: auto; }
.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); }
.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; }
  .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; }