/* ===========================================================================
   04 · COMPONENTS

   Two rules govern this entire file:
     Zero border radius. Everywhere.
     Zero drop shadows. Everywhere.
   Depth comes from colour grounds and 1px rules, never from elevation.

   Surface convention, applied consistently as of this revision:
     Linen       — UI chrome that sits ON something (header bar, booking card)
     Ivory Stone — the page field, and panels that sit on Linen (dropdowns)
   With shadows banned, this one-step colour difference is the only thing
   separating a floating object from the surface behind it. Honour it.
   =========================================================================== */

/* ===========================================================================
   HEADER  ·  spec §7.1  — REVISED, permanent Linen bar
   Built for a Divi Theme Builder header. Add .blenn-header to the header
   template's outer section.

   Changed from the transparent-over-hero original:
     · The bar is permanently Linen. Walnut type on Linen is 8.3:1.
     · js/blenn.js .is-solid now only COMPRESSES the bar on scroll
       (--header-h to --header-h-solid). No colour swap. Leave the JS alone.
     · Link colour is set at ID specificity so a global #page-container a
       rule in the base or type layer cannot override it. That override is
       what made the nav render Walnut on the hero instead of Ivory Stone.
     · Dropdown and mobile-menu backgrounds carry !important to survive the
       Theme Builder Menu module re-adding transparent colour attributes.

   Height is owned by --header-h ONLY. Do not add padding to the header
   section in Divi or here. Divi's default section padding (54px top and
   bottom at 1350px+) doubled the bar to 177px, which hid the top of every
   hero. The plumbing block below zeroes it.
   =========================================================================== */
.blenn-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background-color: var(--surface-secondary);
  border-bottom: var(--hairline) solid var(--rule);
  transition: min-height var(--dur-ui) var(--ease);
}
.blenn-header .et_pb_row { width: var(--container-pct); max-width: var(--container); }

/* WordPress admin bar. Logged-in only, but without this the bar covers the
   top 32px of the header while editing and the nav reads as cramped.
   Visitors never see this offset. */
.admin-bar .blenn-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .blenn-header { top: 46px; }
}

/* The bar is opaque and fixed, so anchor jumps must clear it. Without this,
   Book Now scrolls #book underneath the header. */
html { scroll-padding-top: var(--header-h); }
[id] { scroll-margin-top: var(--header-h); }

/* Compressed state on scroll. Colour does not change. */
.blenn-header.is-solid { min-height: var(--header-h-solid); }

/* Wordmark · retained for the text-lockup variant. The current Theme Builder
   header uses an image logo instead, handled in the plumbing block below. */
.blenn-wordmark {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
}
.blenn-wordmark small {
  display: block;
  font-family: var(--text);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  margin-top: 3px;
  opacity: 0.85;
}

/* Every link in the bar is Walnut, in both states. */
#page-container .blenn-header a,
#page-container .blenn-header .blenn-wordmark,
#page-container .blenn-header.is-solid a,
#page-container .blenn-header.is-solid .blenn-wordmark {
  color: var(--ink);
}

/* Nav · Aktiv 13px caps, 40px gap, five items maximum.
   Chancellor's · The Conspiracy · Rooms · Spa · Weddings and Events
   The 1889 lives on the Chancellor's page. Book is a button, never a nav item. */
#page-container .blenn-header .et_pb_menu .et-menu > li > a,
#page-container .blenn-header.is-solid .et_pb_menu .et-menu > li > a {
  font-family: var(--text);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--dur-ui) var(--ease);
  opacity: 1;
}
/* Horizontal spacing comes from padding-right only. Vertical margins are
   zeroed because the type layer's #page-container li rule and Divi's
   .et_pb_menu--without-logo li rule both add them, which pushed the links
   about 12px above the logo and the Book Now button. */
#page-container .blenn-header .et_pb_menu .et-menu > li {
  padding-right: 40px;
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 1440px) {
  #page-container .blenn-header .et_pb_menu .et-menu > li { padding-right: 28px; }
}
@media (max-width: 1200px) {
  #page-container .blenn-header .et_pb_menu .et-menu > li { padding-right: 20px; }
  #page-container .blenn-header .et_pb_menu .et-menu > li > a { letter-spacing: 0.10em; }
}
#page-container .blenn-header .et_pb_menu .et-menu > li:last-child { padding-right: 0; }
#page-container .blenn-header .et_pb_menu .et-menu > li > a:hover {
  border-bottom-color: var(--rule-accent);
  opacity: 1;   /* Divi fades links on hover; the system underlines instead */
}

/* ---------------------------------------------------------------------------
   Theme Builder header, unscoped fallback

   Everything above is scoped to .blenn-header, which only exists if the header
   came from blennerhassett-tb-header.json. A header built by hand in Theme
   Builder has no such class, so none of it applies and Divi's defaults win —
   the visible symptom being a white block behind the nav, because Divi ships
   the Menu module with a solid white background.

   These rules are scoped to Divi's own Theme Builder header region instead, so
   they hold either way. .et-l--header is Divi's wrapper for that template.

   Do not add .blenn-header or .et_pb_section to this selector list. The
   section owns the Linen ground; adding it here would strip it.
   --------------------------------------------------------------------------- */
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu__wrap,
.et-l--header .et_pb_menu__menu,
.et-l--header .et_pb_menu_inner_container,
.et-l--header .et_pb_menu__menu > nav,
#page-container .et-l--header .et_pb_menu,
#page-container .et-l--header .et_pb_menu__wrap,
#page-container .et-l--header .et_pb_menu__menu,
#page-container .et-l--header .et_pb_menu_inner_container {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* The section itself owns the ground. Nothing inside it paints a background. */
#page-container .et-l--header .et_pb_row,
#page-container .et-l--header .et_pb_column,
#page-container .et-l--header .et_pb_text,
#page-container .et-l--header .et_pb_image {
  background-color: transparent !important;
}

/* Divi's menu module reserves height for a logo slot even when empty, which is
   what makes the white block taller than the nav itself. */
#page-container .et-l--header .et_pb_menu__logo-wrap,
#page-container .et-l--header .et_pb_menu__logo-slot { display: none !important; }

/* Keep the list on one line and flush right regardless of which header is used. */
#page-container .et-l--header .et_pb_menu__menu > nav > ul,
#page-container .et-l--header .et-menu {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
}
#page-container .et-l--header .et-menu > li > a { white-space: nowrap; }

/* Submenu. Rooms and Dining carry dropdowns. Square, no shadow.
   Ivory Stone sits one step lighter than the Linen bar, which is what
   separates the panel without an elevation shadow. The brass top rule
   does the rest.

   !important is deliberate. The Theme Builder Menu module emits
     .et_pb_menu_0_tb_header.et_pb_menu .nav li ul { ... !important }
   whenever Dropdown Menu Background Color is set on the module. Clearing
   that field is the root fix; this is the guard for when Divi re-adds it
   after any Visual Builder edit. */
#page-container .blenn-header .et_pb_menu .et-menu li ul.sub-menu {
  background-color: var(--surface-primary) !important;
  border: var(--hairline) solid var(--rule) !important;
  border-top: 3px solid var(--rule-accent) !important;
  border-radius: var(--radius);
  box-shadow: none !important;
  padding: var(--sp-2) 0;
}
#page-container .blenn-header .et_pb_menu .et-menu li ul.sub-menu li a {
  color: var(--ink);
  font-size: var(--fs-btn);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 10px 20px;
  white-space: nowrap;
  border-bottom: 0;
  background-color: transparent !important;
}
#page-container .blenn-header .et_pb_menu .et-menu li ul.sub-menu li a:hover {
  background-color: var(--surface-secondary) !important;
  opacity: 1;
}
/* Third level, if it is ever used. */
#page-container .blenn-header .et_pb_menu .et-menu li ul.sub-menu li ul.sub-menu {
  background-color: var(--surface-primary) !important;
  border: var(--hairline) solid var(--rule) !important;
  border-top: 3px solid var(--rule-accent) !important;
}

/* Divi mobile menu, restyled as the full-bleed River Slate overlay in the spec.
   Same !important reasoning as the dropdown — the module's Mobile Menu
   Background Color setting hits this selector too. */
#page-container .blenn-header .et_mobile_menu {
  background-color: var(--surface-contrast) !important;
  border-top: 0 !important;
  box-shadow: none !important;
  padding: var(--sp-6) 0;
}
#page-container .blenn-header .et_mobile_menu ul {
  background-color: transparent !important;
}
#page-container .blenn-header .et_mobile_menu li a {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gv-field);
  border-bottom: var(--hairline) solid rgba(176, 138, 99, 0.22);
  padding: var(--sp-4) var(--sp-5);
  background-color: transparent !important;
}
#page-container .blenn-header .et_mobile_menu li a:hover,
#page-container .blenn-header .et_mobile_menu .menu-item-has-children > a {
  background-color: transparent !important;
}
/* Hamburger is Walnut in both states now that the bar is always Linen. */
#page-container .blenn-header .mobile_menu_bar:before,
#page-container .blenn-header.is-solid .mobile_menu_bar:before { color: var(--ink); }
/* 44px minimum target · WCAG 2.5.8 */
#page-container .blenn-header .mobile_menu_bar {
  min-height: 44px;
  display: flex;
  align-items: center;
}


/* ---------------------------------------------------------------------------
   Divi plumbing for the Theme Builder header

   The header template is three columns: logo, menu, booking button. Divi
   gives its rows floats and its modules bottom margins, neither of which suits
   a fixed bar, so this block flattens both. Scoped to .blenn-header only.

   The section's own 20px vertical margin is zeroed in the Theme Builder JSON.
   The override here is the belt to that braces — an opaque bar floating 20px
   below the viewport top reads as a mistake.

   Padding is zeroed for the same reason. Divi's .et_pb_section carries
   padding 4% 0 by default, 54px 0 at 1350px+. On a fixed bar that padding
   adds directly to --header-h and the bar swallows the top of the hero.
   --------------------------------------------------------------------------- */
#page-container .blenn-header.et_pb_section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#page-container .blenn-header .et_pb_row,
#page-container .blenn-header .et_pb_column,
#page-container .blenn-header .et_pb_module {
  margin-bottom: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}
/* Divi flex rows carry margin: auto, which offset the row about 19px below
   centre inside the bar. Horizontal auto is kept for centring. */
#page-container .blenn-header .et_pb_row {
  margin-top: 0 !important;
  margin-left: auto;
  margin-right: auto;
}
#page-container .blenn-header__row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Let content size the three columns.
   Divi writes percentage widths inline from the column structure, and adds
   a percentage gutter margin on top. Five nav items at 13px with 0.14em
   tracking do not fit in what is left, so the list wraps onto four lines.
   Overriding the widths is the fix; narrowing the type is not. */
#page-container .blenn-header__row .et_pb_column {
  width: auto !important;
  max-width: none !important;
  margin-right: var(--sp-7) !important;
  margin-bottom: 0 !important;
  float: none;
}
#page-container .blenn-header__row .et_pb_column:nth-child(1) { flex: 0 0 auto; }
#page-container .blenn-header__row .et_pb_column:nth-child(2) { flex: 1 1 auto; min-width: 0; }
#page-container .blenn-header__row .et_pb_column:nth-child(3) {
  flex: 0 0 auto;
  margin-right: 0 !important;
}

/* Divi's menu list wraps by default. A primary nav must not.
   Margin and padding are zeroed because the type layer gives every ul a
   24px bottom margin, which made the list 44px tall and pinned the links to
   the top of the column instead of its centre. */
#page-container .blenn-header .et_pb_menu__menu > nav > ul,
#page-container .blenn-header .et_pb_menu .et-menu {
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
}
#page-container .blenn-header .et_pb_menu .et-menu > li > a { white-space: nowrap; }

/* Logo. Divi renders the upload at its natural size, which is taller than the
   bar and forces the header open.

   The compressed value must stay under --header-h-solid minus the row's
   vertical padding, or the logo is clipped at the top of the bar on scroll.
   If you change --header-h-solid in 00-tokens.css, re-check this number.

   The logo must NOT lazy-load. WordPress adds loading="lazy" by default and
   on some pages (Packages, Chancellor's) it never fires, so the logo renders
   at 0x0. That is a PHP/plugin fix, not CSS — see the handoff note. */
#page-container .blenn-header .et_pb_menu__logo img,
#page-container .blenn-header .et_pb_image img,
#page-container .blenn-header .blenn-logo img {
  max-height: 52px;
  width: auto;
  transition: max-height var(--dur-ui) var(--ease);
}
#page-container .blenn-header.is-solid .et_pb_menu__logo img,
#page-container .blenn-header.is-solid .et_pb_image img,
#page-container .blenn-header.is-solid .blenn-logo img { max-height: 40px; }

/* The header CTA is compact. 18px/40px is the page button, not a bar button. */
#page-container .blenn-header .btn { padding: 14px 28px; width: auto; }

@media (max-width: 980px) {
  #page-container .blenn-header__row .et_pb_column {
    width: auto !important;
    margin: 0 !important;
  }
  #page-container .blenn-header__row .et_pb_column:nth-child(1) { flex: 1 1 auto; }
  #page-container .blenn-header__row .et_pb_column:nth-child(2) { flex: 0 0 auto; }
  #page-container .blenn-header__row .et_pb_column:nth-child(3) { flex: 0 0 auto; }
}
@media (max-width: 767px) {
  /* The sticky bar is the booking layer on phones. Two CTAs is noise. */
  #page-container .blenn-header__row .et_pb_column:nth-child(3) { display: none !important; }
}

/* ===========================================================================
   HERO  ·  spec §7.3
   Apply .section-hero to a Divi fullwidth section with a background image.

   The fixed header sits over the top --header-h of every hero by design.
   Hero copy is bottom-aligned, so it clears the bar as long as the header
   stays at --header-h. If the hero ever looks cropped, check the header
   height first, not these rules.
   =========================================================================== */
.section-hero,
#page-container .section-hero.et_pb_section {
  position: relative;
  min-height: 600px;
  height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 !important;
}

/* Compact interior hero. Already in the existing class vocabulary. */
.hero-compact,
#page-container .hero-compact.et_pb_section {
  height: 56vh;
  min-height: 420px;
}

/* Scrim · River Slate, never black. */
.hero-scrim::before,
#page-container .hero-scrim.et_pb_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
  pointer-events: none;
  z-index: 1;
}
.section-hero .et_pb_row { position: relative; z-index: 2; }

.section-hero h1,
#page-container .section-hero h1 { color: var(--gv-field); }

.section-hero .hero-copy,
#page-container .section-hero .et_pb_row.hero-copy {
  padding-bottom: var(--section-y-tall);
}

@media (max-width: 767px) {
  .section-hero,
  #page-container .section-hero.et_pb_section {
    height: 78svh;          /* svh, not vh — vh jumps when browser chrome retracts */
    min-height: 480px;
    text-align: center;
  }
  #page-container .section-hero h1 { max-width: none; margin: 0 auto; }
  .section-hero .hero-copy,
  #page-container .section-hero .et_pb_row.hero-copy { padding-bottom: var(--sp-9); }
}


/* ===========================================================================
   BOOKING LAYER  ·  spec §7.2
   Rendered by [blenn_bookbar]. Put that shortcode in a Divi Code module and
   make the module GLOBAL — that is the single place the booking bar exists.

   Pass no attributes. Divi entity-encodes quotes inside a Code module, so
   [blenn_bookbar overlap="true"] arrives at PHP as "true" and the
   overlap class is silently dropped. Write [blenn_bookbar] and nothing else.
   =========================================================================== */

/* The section holding the bookbar must carry the page ground. With no
   background set, Divi renders it white, which puts a white band across the
   full viewport between the hero's bottom edge and the next section — and the
   card then reads as sitting in a gap rather than on anything.

   :has() handles it without touching Divi. .section-bookbar is the explicit
   opt-in for anywhere :has() is unavailable or the structure differs; add it
   in the section's CSS Class field.

   :not(:has(.et_pb_section)) is load-bearing. The Theme Builder body
   template wraps the whole page in its own .et_pb_section
   (.et_pb_section_0_tb_body, #main-content), and that wrapper also
   contains .bookbar. A bare :has(.bookbar) matched the wrapper, which
   zeroed its padding here and, in the 767px block below, hid every page
   that carries a booking bar on phones (Home, Rooms, Historic Suites,
   The Spa). The guard limits the match to the innermost section, the one
   that holds the bookbar module and nothing else. Do not remove it. */
#page-container .et_pb_section:has(.bookbar):not(:has(.et_pb_section)),
#page-container .section-bookbar.et_pb_section {
  background-color: var(--surface-primary);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.bookbar { position: relative; z-index: 20; }

/* Overlap depth. The card is roughly 137px tall at desktop, so -88px puts
   about two thirds of it on the hero — enough to read as a deliberate layer.
   The previous -56px was 41% and read as hanging below the hero instead.
   Reduced at tablet where the card wraps and gets taller. */
.bookbar--overlap { margin-top: -88px; }

.bookbar__inner {
  width: var(--container-pct);
  max-width: var(--container);
  margin: 0 auto;
}

/* Linen, not Ivory Stone. The card lands half on the hero photo and half on an
   Ivory Stone section; matching the section meant its lower half dissolved
   into the page and only the part over the photo read as an object. With
   shadows banned, a one-step colour difference is the only separation
   available. Same reasoning as the header bar. */
.bookbar__card {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-7);
  background: var(--surface-secondary);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: none;
}
.bookbar__card--single {
  justify-content: center;
  padding: var(--sp-5) var(--sp-7);
}

/* Fields · bottom rule only, no boxes. spec §7.8 */
.field { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 0; min-width: 0; }
.field label {
  font-family: var(--text);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--ink);
}
.field input,
.field select,
#page-container .field input,
#page-container .field select {
  font-family: var(--text);
  font-size: var(--fs-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-2) 0;
  min-height: 44px;
  width: 100%;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-bottom: 2px solid var(--focus);
}

/* Sticky mobile bar · rendered in wp_footer, shown under 767px only. */
.stickybook {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--cta-bg);
  padding-bottom: env(safe-area-inset-bottom);
}
.stickybook a {
  display: block;
  height: var(--stickybook-h);
  line-height: var(--stickybook-h);
  text-align: center;
  text-decoration: none;
  color: var(--cta-ink);
  font-family: var(--text);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .bookbar__card { flex-wrap: wrap; }
  .bookbar__card .btn { width: 100%; }
  /* The card wraps to two rows here and roughly doubles in height.
     Keeping -88px would push it most of the way up the hero. */
  .bookbar--overlap { margin-top: -56px; }
}
@media (max-width: 767px) {
  /* On phones the sticky bar IS the booking layer. Two of them is noise. */
  .bookbar { display: none; }
  .stickybook { display: block; }
  /* The section still exists and would collapse to a white sliver.
     Innermost section only. See the :not(:has()) note above; without it
     this line hides the entire page body on phones. */
  #page-container .et_pb_section:has(.bookbar):not(:has(.et_pb_section)),
  #page-container .section-bookbar.et_pb_section { display: none; }
}


/* ===========================================================================
   BUTTONS  ·  spec §7.5
   Square. No shadow. Colour-only hover — a button that grows or lifts on
   hover is the commonest tell of a template theme.
   =========================================================================== */
.btn,
#page-container .btn,
#page-container .et_pb_button.btn {
  display: inline-block;
  padding: 18px 40px;
  font-family: var(--text);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  box-shadow: none;
  transition: background-color var(--dur-ui) var(--ease),
              color var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease);
}

.btn-primary,
#page-container .btn-primary,
#page-container .et_pb_button.btn-primary {
  background-color: var(--cta-bg);
  color: var(--cta-ink);
}
.btn-primary:hover,
#page-container .btn-primary:hover { background-color: var(--cta-bg-hover); color: var(--cta-ink); }

.btn-secondary,
#page-container .btn-secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-secondary:hover,
#page-container .btn-secondary:hover { background-color: var(--ink); color: var(--cta-ink); }

.btn-on-dark,
#page-container .btn-on-dark {
  background: transparent;
  border-color: var(--gv-field);
  color: var(--gv-field);
}
.btn-on-dark:hover,
#page-container .btn-on-dark:hover { background-color: var(--gv-field); color: var(--surface-contrast); }

/* Text link */
.btn-text,
#page-container .btn-text {
  display: inline-block;
  font-family: var(--text);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--rule);
  padding-bottom: 6px;
  transition: border-color var(--dur-ui) var(--ease);
}
.btn-text:hover, #page-container .btn-text:hover { border-bottom-color: var(--rule-accent); }

.surface-slate .btn-text, .on-contrast .btn-text {
  color: var(--gv-field);
  border-bottom-color: rgba(244, 239, 230, 0.4);
}
.surface-slate .btn-text:hover, .on-contrast .btn-text:hover { border-bottom-color: var(--gv-brass); }

@media (max-width: 767px) {
  .btn, #page-container .btn { width: 100%; }
}


/* ===========================================================================
   CARDS  ·  spec §7.6
   No border, no radius, no shadow, no lift. The card is defined by its image
   edge and its whitespace. No rate on a card until rate parity is resolved.
   =========================================================================== */
.card { display: flex; flex-direction: column; }
.card__mask { overflow: hidden; }
.card__mask > * { transition: transform var(--dur-image) var(--ease); }
.card:hover .card__mask > * { transform: scale(1.03); }
.card h4 { margin: var(--sp-5) 0 var(--sp-3); }
.card p { font-size: 16px; margin-bottom: var(--sp-5); }
.card .btn-text { margin-top: auto; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .card:hover .card__mask > * { transform: none; }
}

/* Divi blurb, brought into the card system. */
#page-container .card-blurb .et_pb_blurb_content { max-width: none; text-align: left; }
#page-container .card-blurb .et_pb_main_blurb_image { margin-bottom: var(--sp-5); }


/* ---------------------------------------------------------------------------
   Package inclusion lists
   The "What is included" label is an H4, but at list-label scale rather than
   display scale, and the list under it is tighter than body prose.
   --------------------------------------------------------------------------- */
#page-container .pkg-includes-h {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  margin: var(--sp-6) 0 var(--sp-4);
}
#page-container .split-text ul { padding-left: var(--sp-5); margin-bottom: 0; }
#page-container .split-text li { font-size: 16px; line-height: 1.6; margin-bottom: var(--sp-2); }
.surface-slate .pkg-includes-h,
.on-contrast .pkg-includes-h { color: var(--ink-on-contrast); }


/* ---------------------------------------------------------------------------
   Card internals

   The type layer sets #page-container h4 { margin: 0 }, which is one ID and
   one element. A bare .card h4 cannot beat it, so card headings collapsed onto
   the image edge. These selectors carry the same ID so the spec's spacing
   actually lands.
   --------------------------------------------------------------------------- */
#page-container .card h4,
#page-container .card-grid .card h4 {
  margin: var(--sp-5) 0 var(--sp-3);
}
#page-container .card p { font-size: 16px; margin-bottom: var(--sp-5); max-width: none; }
#page-container .card .btn-text { margin-top: auto; align-self: flex-start; }
#page-container .card .et_pb_text { margin-bottom: 0; }
#page-container .card .et_pb_image { margin-bottom: 0; }

/* Divi's image module adds its own bottom margin inside a card. */
#page-container .card-grid .et_pb_column.card > .et_pb_module:not(:last-child) {
  margin-bottom: 0;
}

/* ===========================================================================
   SPLIT ROWS  ·  existing class vocabulary, unchanged
   =========================================================================== */
.split-row,
#page-container .split-row.et_pb_row { align-items: center; }

#page-container .split-row .et_pb_column { margin-bottom: 0; }

.split-text h2, #page-container .split-text h2 { margin-bottom: var(--sp-5); }
.split-text p, #page-container .split-text p { max-width: 54ch; }

/* .split-text-left is the reversed variant in the existing layouts. */
@media (min-width: 981px) {
  #page-container .split-row.split-text-left .et_pb_column:first-child { order: 2; }
  #page-container .split-row.split-text-left .et_pb_column:last-child { order: 1; }
}


/* ===========================================================================
   STATEMENT  ·  existing class, unchanged
   The type-led moment. Large Warbler, brass rule, generous padding.
   Doubles as the §7.4 alternate when a section has no usable photography.
   =========================================================================== */
.statement, #page-container .statement { text-align: center; }
.statement h2, #page-container .statement h2 {
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: 0.06em;
  max-width: 22ch;
  margin: 0 auto;
}
.statement .lead, #page-container .statement .lead p {
  margin: var(--sp-7) auto 0;
  text-align: center;
  max-width: 52ch;
}
.statement .rule-brass { margin-left: auto; margin-right: auto; }

@media (max-width: 1200px) { .statement h2, #page-container .statement h2 { font-size: 48px; } }
@media (max-width: 767px)  {
  .statement h2, #page-container .statement h2 { font-size: 30px; max-width: none; }
}

/* Type-led alternate · same section with the image removed. */
.type-led .card__mask,
.type-led .et_pb_image,
.type-led .split-media { display: none; }
#page-container .type-led.et_pb_section {
  padding-top: var(--section-y-tall) !important;
  padding-bottom: var(--section-y-tall) !important;
}


/* ===========================================================================
   PROOF BAND
   Review figures as content. Brass at 40px clears large-text AA at 3.28:1.
   =========================================================================== */
.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--hairline) solid var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
}
.proof__item { padding: var(--sp-8) var(--sp-7); border-left: var(--hairline) solid var(--rule); }
.proof__item:first-child { border-left: 0; padding-left: 0; }
.proof__item:last-child { padding-right: 0; }
.proof__figure {
  font-family: var(--display);
  font-size: var(--fs-h2);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink-display);
}
.proof__label { font-size: var(--fs-caption); line-height: 1.6; margin: var(--sp-4) 0 0; max-width: 26ch; }

@media (max-width: 980px) {
  .proof { grid-template-columns: 1fr; }
  .proof__item {
    border-left: 0;
    border-top: var(--hairline) solid var(--rule);
    padding: var(--sp-6) 0;
  }
  .proof__item:first-child { border-top: 0; }
}


/* ===========================================================================
   LOCAL EVENTS  ·  [blenn_events]
   Third-party listings rendered through our own type and palette, so they do
   not read as an embedded widget.
   =========================================================================== */
.blenn-events__list { list-style: none; margin: 0; padding: 0; max-width: none; }

.blenn-events__item {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: var(--hairline) solid var(--rule);
  margin: 0;
}
.blenn-events__item:first-child { border-top: 0; padding-top: 0; }
.blenn-events__item:last-child { padding-bottom: 0; }

/* Date chip. Square, no fill, no radius — a rule and whitespace instead. */
.blenn-events__date {
  flex: 0 0 72px;
  text-align: center;
  border: var(--hairline) solid var(--rule);
  padding: var(--sp-3) var(--sp-2);
  align-self: flex-start;
}
.blenn-events__month {
  display: block;
  font-family: var(--text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}
.blenn-events__day {
  display: block;
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-top: 2px;
}

.blenn-events__body { flex: 1 1 auto; min-width: 0; }
#page-container .blenn-events__body h4 { margin: 0 0 var(--sp-2); }
#page-container .blenn-events__body h4 a {
  text-decoration: none;
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--dur-ui) var(--ease);
}
#page-container .blenn-events__body h4 a:hover { border-bottom-color: var(--rule-accent); }
#page-container .blenn-events__body p { margin: 0 0 var(--sp-2); max-width: 60ch; }
#page-container .blenn-events__body p:last-child { margin-bottom: 0; }

.blenn-events__source { margin-top: var(--sp-6); opacity: 0.75; }
.blenn-events__admin { color: var(--ink); opacity: 1; }

/* On River Slate grounds. */
.surface-slate .blenn-events__item,
.on-contrast .blenn-events__item { border-top-color: rgba(176, 138, 99, 0.28); }
.surface-slate .blenn-events__date,
.on-contrast .blenn-events__date { border-color: rgba(176, 138, 99, 0.35); }
.surface-slate .blenn-events__month, .surface-slate .blenn-events__day,
.on-contrast .blenn-events__month, .on-contrast .blenn-events__day { color: var(--ink-on-contrast); }

@media (max-width: 767px) {
  .blenn-events__item { gap: var(--sp-4); padding: var(--sp-5) 0; }
  .blenn-events__date { flex-basis: 60px; padding: var(--sp-2); }
  .blenn-events__day { font-size: 22px; }
}


/* ===========================================================================
   TABLES  ·  existing classes, unchanged
   =========================================================================== */
.table-block, #page-container .table-block table {
  width: 100%;
  border-collapse: collapse;
  border: var(--hairline) solid var(--rule);
}
#page-container .table-block th {
  background: var(--surface-contrast);
  color: var(--ink-on-contrast);
  font-family: var(--text);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border: var(--hairline) solid var(--rule);
}
#page-container .table-block td {
  font-size: 16px;
  padding: var(--sp-3) var(--sp-4);
  border: var(--hairline) solid var(--rule);
  vertical-align: top;
}
#page-container .table-block tbody tr:nth-child(even) { background: var(--surface-primary); }

/* Horizontal scroll wrapper. The capacity matrix is 11 columns wide and will
   scroll on desktop too, which is correct — shrinking it to fit makes it
   unreadable. Put that row in .container-wide to reduce how far it scrolls. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.table-specs td:first-child { font-weight: 600; white-space: nowrap; }

/* Row headers.

   A wide matrix uses th[scope="row"] for the space names, which would
   otherwise inherit the River Slate column-header treatment and render as
   eight solid blocks down the left edge. They are Linen labels instead. */
#page-container .table-specs tbody th[scope="row"] {
  background: var(--surface-secondary);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  min-width: 190px;
}

/* Numeric cells stay on one line; the label column is the only one that wraps. */
#page-container .table-specs th[scope="col"],
#page-container .table-specs td {
  white-space: nowrap;
  font-size: 14px;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
}
#page-container .table-specs tbody tr:nth-child(even) th[scope="row"] {
  background: var(--surface-secondary);
}

@media (max-width: 767px) {
  #page-container .table-specs tbody th[scope="row"] { min-width: 150px; font-size: 14px; }
  #page-container .table-specs td { font-size: 13.5px; padding: var(--sp-2); }
}


/* ===========================================================================
   INQUIRE BAND  ·  existing class, unchanged
   Closing reserve band. One per page.
   =========================================================================== */
.inquire-band,
#page-container .inquire-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.inquire-band h3, #page-container .inquire-band h3 { max-width: 24ch; margin: 0; }

@media (max-width: 767px) {
  .inquire-band, #page-container .inquire-band { gap: var(--sp-6); }
}


/* ===========================================================================
   FORMS  ·  spec §7.8
   Bottom rule only. Error state is a rule PLUS text, never colour alone —
   the palette has no red and colour alone fails WCAG 1.4.1.
   =========================================================================== */
#page-container .et_pb_contact_form_label { position: static; clip: auto; height: auto; width: auto; }
#page-container .et_pb_contact_form_label,
.blenn-form label {
  display: block;
  font-family: var(--text);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
#page-container .et_pb_contact_form input[type="text"],
#page-container .et_pb_contact_form input[type="email"],
#page-container .et_pb_contact_form input[type="tel"],
#page-container .et_pb_contact_form textarea,
#page-container .et_pb_contact_form select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: var(--hairline) solid var(--rule) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  font-family: var(--text) !important;
  font-size: var(--fs-body) !important;
  padding: var(--sp-2) 0 !important;
  min-height: 44px;
}
#page-container .et_pb_contact_form input:focus,
#page-container .et_pb_contact_form textarea:focus {
  border-bottom: 2px solid var(--focus) !important;
  outline: none;
}
#page-container .et_contact_error {
  border-bottom: 2px solid var(--gv-walnut) !important;
}
#page-container .et_pb_contact_error_text {
  font-size: var(--fs-caption);
  color: var(--ink);
}
/* Placeholder is not a label. Every field keeps a visible one. */
#page-container ::placeholder { color: var(--ink); opacity: 0.55; }


/* ===========================================================================
   FOOTER
   River Slate deep. Ivory Stone type at 13.81:1.
   Social links stay OUT until the Facebook pages transfer to Taylor
   Hospitality. No article:publisher, no twitter:site, no twitter:creator.
   =========================================================================== */
.blenn-footer,
#page-container .blenn-footer.et_pb_section {
  background-color: var(--surface-footer);
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-7);
}
.blenn-footer h4, #page-container .blenn-footer h4 {
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  color: var(--gv-field);
  margin-bottom: var(--sp-5);
}
.blenn-footer ul, #page-container .blenn-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.blenn-footer li, #page-container .blenn-footer li {
  font-size: var(--fs-caption);
  line-height: 1.9;
  color: var(--gv-field);
  margin-bottom: 0;
}
.blenn-footer a, #page-container .blenn-footer a {
  color: var(--gv-field);
  text-decoration: none;
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--dur-ui) var(--ease);
}
.blenn-footer a:hover, #page-container .blenn-footer a:hover { border-bottom-color: var(--gv-brass); }

.blenn-footer__legal {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--hairline) solid rgba(176, 138, 99, 0.2);
}
/* Divi column plumbing for the footer grid. */
#page-container .blenn-footer__grid .et_pb_column { margin-bottom: var(--sp-8); }
#page-container .blenn-footer__grid .et_pb_column:last-child { margin-bottom: 0; }
#page-container .blenn-footer .et_pb_module { margin-bottom: 0; }
#page-container .blenn-footer__legal.et_pb_row { margin-top: 0; }
@media (max-width: 767px) {
  #page-container .blenn-footer__grid .et_pb_column { margin-bottom: var(--sp-7); }
}

.blenn-footer__legal p, #page-container .blenn-footer__legal p {
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--gv-field);
  opacity: 0.8;
  max-width: 78ch;
}


/* ===========================================================================
   MOTION  ·  spec §9
   Reveal fires once, on one block per section. Staggered fade-ups on every
   element are the template default and read as generated.
   =========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* Never leave content hidden if JS fails. */
.no-js .reveal { opacity: 1; transform: none; }