/*
Theme Name:        Shizuka Ryokan
Theme URI:         https://shizuka.com.au
Description:       Custom FSE block theme for Shizuka Ryokan. Built on Twenty Twenty-Five foundation. Follows the brand principle: "If a decision adds noise, remove it. If a decision creates calm, keep it."
Requires at least: WordPress 6.5
Tested up to:      6.7
Requires PHP:      8.1
Version:           1.0.0
Author:            Michael Lelliott
Author URI:        https://lelliott.com.au
License:           Private
Template:          twentytwentyfive
Text Domain:       shizuka-ryokan
Tags:              full-site-editing, block-themes, japanese, hospitality
*/

/* ==========================================================================
   1. CUSTOM PROPERTIES — additional tokens not in theme.json
   ========================================================================== */

:root {
  /* Page layout — 20px gutter, consistent across all sections */
  --sz-gutter:     20px;
  --sz-max-width:  1360px; /* max content width; header inner = max-width + 2 × gutter */

  /* Transitions */
  --sz-transition-fast:   160ms ease;
  --sz-transition-base:   280ms ease;
  --sz-transition-slow:   500ms ease;

  /* Shadows — warm, never cold */
  --sz-shadow-sm:  0 1px 3px rgba(59, 54, 48, 0.08);
  --sz-shadow-md:  0 4px 16px rgba(59, 54, 48, 0.12);
  --sz-shadow-lg:  0 12px 40px rgba(59, 54, 48, 0.18);
  --sz-shadow-hero: 0 0 80px rgba(59, 54, 48, 0.4) inset;

  /* Overlays — warm sepia tones, not flat black */
  --sz-overlay-light: rgba(59, 54, 48, 0.35);
  --sz-overlay-mid:   rgba(59, 54, 48, 0.55);
  --sz-overlay-deep:  rgba(59, 54, 48, 0.75);

  /* Current season — updated per season, default: Summer */
  --sz-season-color: var(--wp--preset--color--summer);

  /* Divider */
  --sz-divider: 1px solid rgba(59, 54, 48, 0.12);

  /* WordPress spacing preset fallbacks — defined here so inline block styles
     always resolve even if theme.json hasn't been processed by the server.
     Values must match theme.json spacingSizes exactly. */
  --wp--preset--spacing--2xs: 0.375rem;  /*  6px */
  --wp--preset--spacing--xs:  0.75rem;   /* 12px */
  --wp--preset--spacing--sm:  1rem;      /* 16px */
  --wp--preset--spacing--md:  1.5rem;    /* 24px */
  --wp--preset--spacing--lg:  2.5rem;    /* 40px */
  --wp--preset--spacing--xl:  4rem;      /* 64px */
  --wp--preset--spacing--2xl: 6rem;      /* 96px */
  --wp--preset--spacing--3xl: 10rem;     /* 160px */
}

/* ==========================================================================
   2. BASE RESET
   ========================================================================== */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Smooth anchor scrolling — desktop pointers only. iOS Safari abandons a CSS
   smooth scroll the moment anything else nudges the viewport (URL-bar collapse,
   touch momentum), which left anchor taps looking dead on phones. Touch
   devices get instant jumps, which Safari executes reliably. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* No pure white, no pure black — enforced at root */
body {
  background-color: var(--wp--preset--color--cloud);
  color: var(--wp--preset--color--timber);
}

/* ==========================================================================
   IMAGE METADATA — hidden globally, opt-in where deliberately needed
   Prevents Media Library captions/titles bleeding into page layouts
   when multiple users upload images.
   To show captions in a specific section, add class sz-show-captions
   to the containing block (e.g. journal posts, gallery pages).
   ========================================================================== */
figcaption,
.wp-element-caption,
.wp-block-image figcaption {
  display: none !important;
}

/* Opt-in: add sz-show-captions to any section/block to restore them */
.sz-show-captions figcaption,
.sz-show-captions .wp-element-caption,
.sz-show-captions .wp-block-image figcaption {
  display: block !important;
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--xs);
  font-style: italic;
  color: rgba(59, 54, 48, 0.5);
  margin-top: 0.5em;
  text-align: left;
}

/* ==========================================================================
   3. TYPOGRAPHY REFINEMENTS
   ========================================================================== */

/* Japanese text: always Noto Sans JP */
.lang-ja,
[lang="ja"],
.sz-japanese {
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* Heading with Japanese subtitle pattern */
.sz-heading-with-jp {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.sz-heading-with-jp .sz-jp-label {
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 300;
  color: var(--sz-season-color);
  letter-spacing: 0.15em;
  display: block;
}

/* Eyebrow label — small spaced caps above headings */
.sz-eyebrow {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk), var(--wp--preset--font-family--noto-sans-jp), sans-serif;
  font-size: var(--wp--preset--font-size--xs);   /* 0.75rem — default for card eyebrows */
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sz-season-color);
  display: block;
  margin-bottom: 0.75em;
}

/* Bilingual eyebrows (Japanese + English) — standardised at 1rem across all instances.
   Covers hero, principle, bath, accommodation, journal sections.
   Excludes booking card eyebrows (English only, stay at xs = 0.75rem). */
.sz-hero .sz-eyebrow,
.sz-section .sz-eyebrow,
.sz-visit-section .sz-eyebrow,
.sz-bath-feature__content .sz-eyebrow,
.sz-principle .sz-eyebrow {
  font-size: 1rem !important; /* !important overrides inline font-size on hero eyebrow */
  letter-spacing: 0.12em;
}

/* Lead paragraph */
.sz-lead,
.is-style-lead p,
p.is-style-lead {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 300;
  line-height: 1.6;
  color: var(--wp--preset--color--timber);
}

/* ==========================================================================
   4. LINKS & BUTTONS
   ========================================================================== */

a {
  color: var(--wp--preset--color--water);
  text-decoration: none;
  transition: color var(--sz-transition-fast);
}

a:hover,
a:focus {
  color: var(--wp--preset--color--timber);
}

/* Primary button — ghost style */
.wp-element-button,
.wp-block-button__link {
  display: inline-block;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 0.85em 2em;
  transition:
    background-color var(--sz-transition-fast),
    color var(--sz-transition-fast);
  cursor: pointer;
  text-decoration: none;
}

/* Explicit ghost-cloud modifier — white border + text, for use on any dark surface.
   Always wins regardless of parent background class. */
.sz-btn--ghost-cloud .wp-element-button,
.sz-btn--ghost-cloud .wp-block-button__link {
  color: var(--wp--preset--color--cloud) !important;
  border-color: var(--wp--preset--color--cloud) !important;
  background-color: transparent;
}

.sz-btn--ghost-cloud .wp-element-button:hover,
.sz-btn--ghost-cloud .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--cloud) !important;
  color: var(--wp--preset--color--timber) !important;
}

/* Ghost on dark */
.has-background .wp-element-button,
.has-timber-background-color .wp-element-button,
.sz-dark-section .wp-element-button {
  color: var(--wp--preset--color--cloud);
  border-color: var(--wp--preset--color--cloud);
}

.has-background .wp-element-button:hover,
.has-timber-background-color .wp-element-button:hover,
.sz-dark-section .wp-element-button:hover {
  background-color: var(--wp--preset--color--cloud);
  color: var(--wp--preset--color--timber);
}

/* Ghost on light */
.wp-element-button:hover,
.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--timber);
  color: var(--wp--preset--color--cloud);
}

/* Timber ghost on cloud backgrounds — overrides the .has-background cloud rule above */
.has-cloud-background-color .wp-element-button,
.has-cloud-background-color .wp-block-button__link {
  color: var(--wp--preset--color--timber) !important;
  border-color: var(--wp--preset--color--timber) !important;
  background-color: transparent;
}

.has-cloud-background-color .wp-element-button:hover,
.has-cloud-background-color .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--timber) !important;
  color: var(--wp--preset--color--cloud) !important;
}

/* Buttons on base-2 (light) sections — SOLID timber. The generic "ghost on
   dark" rule above keys on .has-background, which base-2 also carries, so
   default buttons there were rendering cloud-on-light (illegible). Solid
   matches the .sz-pkg-book buttons they sit beside. Outline style untouched. */
.has-base-2-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--wp--preset--color--timber) !important;
  border-color: var(--wp--preset--color--timber) !important;
  color: var(--wp--preset--color--cloud) !important;
}
.has-base-2-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: #453f39 !important;
  border-color: #453f39 !important;
  color: var(--wp--preset--color--cloud) !important;
}

/* Booking conditions section uses a custom inline bg (#d4cec6) which auto-adds
   .has-background — that incorrectly applies cloud/white button colours.
   Force timber buttons on this light section. */
.sz-section--conditions .wp-element-button,
.sz-section--conditions .wp-block-button__link {
  color: var(--wp--preset--color--timber) !important;
  border-color: var(--wp--preset--color--timber) !important;
  background-color: transparent;
}

.sz-section--conditions .wp-element-button:hover,
.sz-section--conditions .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--timber) !important;
  color: var(--wp--preset--color--cloud) !important;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

/* Remove FSE auto-padding that creates a gap above the hero */
.wp-site-blocks {
  padding-top: 0 !important;
}

/* WordPress admin bar injects margin-top: 32px on <html> —
   this exposes the body's cloud background as a strip above the hero.
   Zero it; our header already offsets itself via body.admin-bar rule. */
html {
  margin-top: 0 !important;
}

.sz-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
  transition: background-color var(--sz-transition-slow);
  overflow: visible;
}

/* Gradient scrim — ensures nav + logo always readable over hero images */
.sz-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.18) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease;
}

/* Hide scrim once solid timber background takes over */
.sz-header.is-scrolled::before {
  opacity: 0;
}

/* Offset header below WP admin bar when logged in */
body.admin-bar .sz-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .sz-header {
    top: 46px;
  }
}


.sz-header.is-scrolled {
  background-color: var(--wp--preset--color--timber);
}

.sz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* No max-width — logo and CTA always travel with the viewport edge at exactly --sz-gutter in */
  padding: 24px var(--sz-gutter);
  width: 100%;
}

.sz-header__logo {
  flex-shrink: 0;
}

/* Site Logo block — set figure width (overrides block's inline style) */
.sz-header .wp-block-site-logo,
.sz-header .sz-header__logo {
  width: 200px !important;
}

/* Img fills the figure, height scales naturally */
.sz-header .wp-block-site-logo img,
.sz-header__logo img,
.sz-header__logo svg {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter var(--sz-transition-slow);
}

/* Navigation */
.sz-nav__list {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Default: light text over hero image + dark scrim */
.sz-nav__list a {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cloud);
  transition: opacity var(--sz-transition-fast);
}

.sz-nav__list a:hover {
  color: var(--wp--preset--color--cloud);
  opacity: 0.65;
}

/* Scrolled: flip to light text on timber background */
.sz-header.is-scrolled .sz-nav__list a {
  color: var(--wp--preset--color--cloud);
}

.sz-header.is-scrolled .sz-nav__list a:hover {
  color: var(--wp--preset--color--cloud);
  opacity: 0.65;
}

/* Book dropdown — replaces "Book a Stay" button */
.sz-book-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger button — matches old sz-nav__book visual style */
.sz-book-dropdown__trigger {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5em 1.25em;
  border: 1px solid var(--wp--preset--color--cloud);
  background: transparent;
  color: var(--wp--preset--color--cloud);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1.4;
  transition: background-color var(--sz-transition-fast), color var(--sz-transition-fast);
}

.sz-book-dropdown__trigger:hover {
  background-color: var(--wp--preset--color--cloud);
  color: var(--wp--preset--color--timber);
}

/* Dropdown panel */
.sz-book-dropdown__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: rgba(44, 40, 35, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 200;
}

.sz-book-dropdown.is-open .sz-book-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Individual items */
.sz-book-dropdown__item {
  display: block;
  padding: 0.75em 1.5em;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 227, 220, 0.65) !important;
  text-decoration: none !important;
  transition: color var(--sz-transition-fast);
}

.sz-book-dropdown__item:hover {
  color: var(--wp--preset--color--cloud) !important;
}

/* Strip default white background TT5 applies to the navigation block */
.sz-nav.wp-block-navigation,
.sz-nav .wp-block-navigation__responsive-container,
.sz-nav .wp-block-navigation__responsive-container-content {
  background: transparent !important;
}

/* WordPress Navigation block — actual rendered element classes */
.sz-nav .wp-block-navigation__container {
  gap: 20px;
  flex-wrap: nowrap !important;   /* prevent items ever wrapping to a second line */
  white-space: nowrap;
}

/* All nav items: cloud/white — !important overrides any inline colour set in block editor */
.sz-nav .wp-block-navigation-item__content,
.sz-nav .wp-block-navigation-item__content:visited,
.sz-nav .wp-block-navigation-item a,
.sz-nav .wp-block-navigation-item a:visited {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 0.68rem !important;  /* slightly smaller than xs (0.75rem) to fit 7 items */
  font-weight: 400;
  letter-spacing: 0.06em;  /* reduced from 0.1em — saves ~15px across the nav */
  text-transform: uppercase;
  color: var(--wp--preset--color--cloud) !important;
  text-decoration: none;
  transition: color var(--sz-transition-fast), opacity var(--sz-transition-fast);
}

.sz-nav .wp-block-navigation-item__content:hover,
.sz-nav .wp-block-navigation-item a:hover {
  color: var(--wp--preset--color--cloud) !important;
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Hamburger — push WP's overlay breakpoint from default ~600px up to 960px
   so the nav collapses before items wrap to a second line.
   The nav block already has overlayMenu:"mobile" set — this just adjusts when.
   -------------------------------------------------------------------------- */

/* Desktop (> 1125px): force inline nav visible, hide hamburger toggle */
@media (min-width: 1126px) {
  .sz-header .wp-block-navigation__responsive-container-open,
  .sz-header .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
  .sz-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: flex !important;
    visibility: visible !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
  }
}

/* Mobile / tablet (≤ 1125px): show hamburger, hide inline nav */
@media (max-width: 1125px) {
  .sz-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  .sz-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    color: var(--wp--preset--color--cloud) !important;
  }
  /* Hamburger icon SVG inherits current colour */
  .sz-header .wp-block-navigation__responsive-container-open svg {
    fill: currentColor;
    width: 24px;
    height: 24px;
  }
  /* Overlay panel: timber background, full screen */
  .sz-header .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--timber) !important;
    padding: 80px var(--sz-gutter) var(--sz-gutter) !important;
  }
  /* Overlay nav links: larger, spaced for touch */
  .sz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
  .sz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    font-size: 1rem !important;
    letter-spacing: 0.15em !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(244, 241, 238, 0.1) !important;
    display: block;
    width: 100%;
  }
  /* Close button */
  .sz-header .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--cloud) !important;
  }
  /* Hide "Book a Stay" CTA on mobile — it lives in the overlay nav instead */
  .sz-nav__actions {
    display: none !important;
  }
}


/* ==========================================================================
   6. HERO — COVER BLOCK
   ========================================================================== */

/* Override Cover block defaults for full-bleed hero.
   calc(100svh - 80px) leaves 80px of the next section visible — visual scroll invite,
   no arrow needed (Shou Sugi Ban House pattern). */
.sz-hero.wp-block-cover {
  min-height: calc(100svh - 80px) !important;
  margin-top: 0 !important;
  align-items: flex-end;
}

.sz-hero.wp-block-cover .wp-block-cover__inner-container {
  width: 100%;
  max-width: 1280px;
  padding-left: var(--wp--preset--spacing--xl);
  padding-right: var(--wp--preset--spacing--xl);
}

/* Gradient overlay — richer than the Cover block's flat dim */
.sz-hero.wp-block-cover .wp-block-cover__background {
  background: linear-gradient(
    to bottom,
    rgba(59, 54, 48, 0.15) 0%,
    rgba(59, 54, 48, 0.0) 35%,
    rgba(59, 54, 48, 0.6) 100%
  ) !important;
  opacity: 1 !important;
}

.sz-hero__title {
  margin: 0 0 var(--wp--preset--spacing--sm);
}

.sz-hero .sz-hero__subtitle {
  max-width: 540px;
  /* core's constrained layout auto-centres fixed-width children with
     !important — pin the 540px measure to the LEFT so it sits on the
     headline's edge. Extra .sz-hero scope out-ranks core's rule. */
  margin: 0 auto var(--wp--preset--spacing--xl) 0 !important;
}

.sz-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md);
  align-items: center;
}

/* Video background — Cover block renders video as .wp-block-cover__video-background
   Core already sets object-fit: cover; we reinforce and add position anchor         */
.sz-hero .wp-block-cover__video-background {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}

/* Scroll hint — CSS only, no HTML block needed */
.sz-hero.wp-block-cover::after {
  content: '';
  position: absolute;
  bottom: var(--wp--preset--spacing--lg);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 40px;
  background-color: rgba(232, 227, 220, 0.35);
  animation: sz-scroll-pulse 2.5s ease-in-out infinite;
}

@keyframes sz-scroll-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleY(1); }
  50%       { opacity: 0.2; transform: translateX(-50%) scaleY(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .sz-hero.wp-block-cover::after { animation: none; }
}

/* ==========================================================================
   6b. RMS AVAILABILITY BAR
   Full-width band immediately below the hero. Timber background, cloud text.
   Sits flush — no gap between hero base and this bar.
   ========================================================================== */

.sz-availability-bar {
  background-color: rgba(44, 40, 35, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 100%;
  padding: 0;
  margin: 0;
  /* Pulls bar up to overlap the bottom of the hero — Shou Sugi Ban pattern */
  position: relative;
  z-index: 10;
  margin-top: -64px;
}

.sz-availability-bar__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.sz-availability-bar__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 28px;
  border-right: 1px solid rgba(232, 227, 220, 0.15);
  position: relative;
}

.sz-availability-bar__label {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 227, 220, 0.5);
  margin-bottom: 4px;
  display: block;
}

.sz-availability-bar__input,
.sz-availability-bar__select {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--wp--preset--color--cloud);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.sz-availability-bar__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.4);
  cursor: pointer;
}

.sz-availability-bar__select option {
  background-color: #3b3630;
  color: var(--wp--preset--color--cloud);
}

.sz-availability-bar__cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background-color: transparent;
  border-left: 1px solid rgba(232, 227, 220, 0.15);
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cloud);
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  border-top: none;
  border-right: none;
  border-bottom: none;
  outline: none;
}

.sz-availability-bar__cta:hover {
  background-color: rgba(232, 227, 220, 0.08);
}

@media (max-width: 768px) {
  .sz-availability-bar__inner {
    flex-direction: column;
  }
  .sz-availability-bar__field {
    border-right: none;
    border-bottom: 1px solid rgba(232, 227, 220, 0.15);
    padding: 14px 20px;
  }
  .sz-availability-bar__cta {
    border-left: none;
    border-top: 1px solid rgba(232, 227, 220, 0.15);
    padding: 18px 20px;
    justify-content: center;
  }
}

/* ==========================================================================
   7. SECTIONS — RHYTHM
   ========================================================================== */

/* Standard section padding */
.sz-section {
  padding-top: var(--wp--preset--spacing--2xl);
  padding-bottom: var(--wp--preset--spacing--2xl);
}

.sz-section--lg {
  padding-top: var(--wp--preset--spacing--3xl);
  padding-bottom: var(--wp--preset--spacing--3xl);
}

/* Bath intro — timber section between the full-width image and the treatments grid.
   Hardcoded px so this never depends on CSS custom property resolution. */
.sz-section--bath-intro {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

/* Generic padded section — hardcoded 120px where preset vars aren't resolving on staging */
.sz-section--padded {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

/* Dark section */
.sz-section--dark,
.has-timber-background-color {
  background-color: var(--wp--preset--color--timber);
  color: var(--wp--preset--color--cloud);
}

.sz-section--dark h1,
.sz-section--dark h2,
.sz-section--dark h3,
.sz-section--dark h4,
.sz-section--dark p,
.has-timber-background-color h1,
.has-timber-background-color h2,
.has-timber-background-color h3,
.has-timber-background-color p {
  color: var(--wp--preset--color--cloud);
}

/* Constrained inner width */
.sz-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--preset--spacing--xl);
  padding-right: var(--wp--preset--spacing--xl);
}

.sz-container--narrow {
  max-width: 720px;
}

/* Notice band — slim centred italic strip */
.sz-section--notice {
  padding-top: var(--wp--preset--spacing--md) !important;
  padding-bottom: var(--wp--preset--spacing--md) !important;
  border-top: 1px solid rgba(90, 82, 74, 0.12);
  border-bottom: 1px solid rgba(90, 82, 74, 0.12);
}

/* Conditions band — mid-tone cloud variant */
.sz-section--conditions {
  background-color: #d4cec6 !important;
}

/* Conditions page — repeating policy sections get compact, consistent padding */
.sz-section--conditions-block {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Kill trailing margin on last child inside conditions blocks so padding is exact */
.sz-section--conditions-block > *:last-child {
  margin-bottom: 0 !important;
}

/* Room elements — 3-column grid of kanji term + description */
.sz-room-element {
  padding-top: var(--wp--preset--spacing--lg);
  border-top: 1px solid rgba(90, 82, 74, 0.15);
}

.sz-room-element .sz-eyebrow {
  font-size: 0.85rem !important;
  margin-bottom: var(--wp--preset--spacing--sm);
}

/* Page-level hero — shorter than homepage hero */
.sz-hero--page.wp-block-cover {
  min-height: 65svh !important;
  align-items: flex-end;
}

/* Journal hero — extra height to let the image breathe */
.page-id-5329 .sz-hero--page.wp-block-cover {
  min-height: calc(65svh + 80px) !important;
}

/* Journal content — pull post section 70px closer to hero */
.page-id-5329 main.wp-block-group {
  padding-top: 90px !important;
}

/* ==========================================================================
   8. BOOKING PATHWAY CARDS — landscape image top, text below
   ========================================================================== */

/* Section — top/bottom padding preserved; sides use page gutter */
.sz-booking-pathways-section {
  padding: 48px var(--sz-gutter) !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background-color: var(--wp--preset--color--cloud) !important;
}

/* "Plan your visit" — standalone section, no !important conflict with sz-booking-pathways-section */
.sz-visit-section {
  padding: 48px var(--sz-gutter);
  background-color: #d4cec6;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.sz-visit-section .sz-booking-card {
  background-color: #d4cec6;
}

/* ==========================================================================
   8b. JOURNAL CARDS — 3-column grid, image top, text below
   ========================================================================== */

.sz-journal-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  overflow: hidden;
}

/* Featured image — always 3:2, always at the top, with thin divider below.
   display:block !important ensures the empty <figure> still shows as a
   placeholder when a post has no featured image set. */
.sz-journal-card .wp-block-post-featured-image {
  display: block !important;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  flex-shrink: 0;
  background-color: rgba(90, 82, 74, 0.08); /* visible when no image */
  min-height: 180px;
  border-bottom: 1px solid rgba(90, 82, 74, 0.12);
}

.sz-journal-card .wp-block-post-featured-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.sz-journal-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Suppress any inline images embedded inside the excerpt text */
.sz-journal-card .wp-block-post-excerpt img,
.sz-journal-card .wp-block-post-excerpt figure,
.sz-journal-card .wp-block-post-excerpt .wp-block-image {
  display: none !important;
}

/* Keep excerpt text clean and clamped */
.sz-journal-card .wp-block-post-excerpt p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.sz-journal-card .wp-block-post-terms {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--crimson);
  margin-bottom: 0;
}

.sz-journal-card .wp-block-post-title {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 0.4em;
  margin-bottom: 0.5em;
}

.sz-journal-card .wp-block-post-title a {
  color: var(--wp--preset--color--timber);
  text-decoration: none;
}

.sz-journal-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--crimson);
}

.sz-journal-card .wp-block-post-excerpt {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.7;
  color: var(--wp--preset--color--timber-light);
  margin: 0;
}

.sz-journal-card .wp-block-post-excerpt__more-link {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--timber);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 54, 48, 0.3);
  padding-bottom: 1px;
  margin-top: 0.75em;
  margin-bottom: 32px; /* breathing space below Read more → */
  display: inline-block;
  transition: border-color var(--sz-transition-fast);
}

.sz-journal-card .wp-block-post-excerpt__more-link:hover {
  border-color: var(--wp--preset--color--timber);
}

/* 3-column grid — fills full section width; section's 20px gutter handles the rail */
.sz-booking-pathways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  background-color: transparent;
  width: 100%;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Card: cloud background, stacks image then text */
.sz-booking-card {
  background-color: var(--wp--preset--color--cloud);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Seasonal accent line sweeps in on hover */
.sz-booking-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-color: var(--sz-season-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sz-transition-base);
  z-index: 2;
}
.sz-booking-card:hover::before { transform: scaleX(1); }

/* Image — 4:3 landscape, fills column width */
.sz-booking-card__image {
  margin: 0 !important;
  overflow: hidden;
  display: block;
}
.sz-booking-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
  transition: transform var(--sz-transition-slow);
}
.sz-booking-card:hover .sz-booking-card__image img {
  transform: scale(1.04);
}

/* Text body — sits under the image */
.sz-booking-card__body,
.sz-booking-pathways .wp-block-group:not(.sz-booking-card) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 24px !important;
}

/* Label — seasonal accent, tight */
.sz-booking-card__label {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sz-season-color) !important;
  margin-bottom: 0.4em;
}

/* Title — prominent, close to label */
.sz-booking-card__title {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--2xl);
  font-weight: 400;
  line-height: 0.94;
  color: var(--wp--preset--color--timber) !important;
  margin-bottom: 0.6em;
}

/* Description */
.sz-booking-card__desc {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.36;
  color: rgba(59, 54, 48, 0.6) !important;
  margin-bottom: 1.25em;
}

/* Ghost button — timber on cloud, compact */
.sz-booking-card .wp-block-button__link,
.sz-booking-card .wp-element-button {
  color: var(--wp--preset--color--timber) !important;
  border-color: rgba(59, 54, 48, 0.3) !important;
  background: transparent !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  padding: 0.65em 1.5em !important;
}
.sz-booking-card .wp-block-button__link:hover,
.sz-booking-card .wp-element-button:hover {
  background-color: var(--wp--preset--color--timber) !important;
  color: var(--wp--preset--color--cloud) !important;
}

/* ==========================================================================
   8b. CONTACT — directions accordion, contact items, warning block
   ========================================================================== */

/* Directions accordion — native <details>/<summary>
   NOTE: WP's constrained layout CSS targets known block divs but skips <details>.
   We manually replicate the 900px centering here. */
.sz-direction-item {
  border-bottom: 1px solid rgba(59, 54, 48, 0.12);
  width: 100%;
  max-width: 900px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Strip any indent from content inside the open accordion */
.sz-direction-item .wp-block-paragraph,
.sz-direction-item p {
  padding-left: 0 !important;
  margin-left: 0;
}

.sz-direction-item + .sz-direction-item:first-of-type,
.sz-warning-block + .sz-direction-item {
  border-top: 1px solid rgba(59, 54, 48, 0.12);
}

.sz-direction-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--timber);
  gap: 16px;
  user-select: none;
}

.sz-direction-item summary::-webkit-details-marker,
.sz-direction-item summary::marker { display: none; content: ''; }

.sz-direction-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(59, 54, 48, 0.35);
  transition: color var(--sz-transition-fast);
}

.sz-direction-item[open] summary::after {
  content: '−';
  color: var(--wp--preset--color--timber);
}

.sz-direction-item[open] summary {
  color: var(--wp--preset--color--timber);
}

.sz-direction-item p {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 300;
  line-height: 1.9;
  color: rgba(59, 54, 48, 0.75);
  margin-bottom: 1em;
  padding-bottom: 0;
}

.sz-direction-item p:last-child {
  margin-bottom: 20px;
}

/* Contact items — tighter spacing */
.sz-contact-item {
  padding-bottom: var(--wp--preset--spacing--lg);
  border-bottom: 1px solid rgba(59, 54, 48, 0.08);
  margin-bottom: var(--wp--preset--spacing--lg) !important;
}

/* GPS / warning callout */
.sz-warning-block {
  background-color: rgba(59, 54, 48, 0.06) !important;
  border-left: 3px solid rgba(59, 54, 48, 0.35) !important;
  margin-bottom: 32px !important; /* override inline 2xl (96px) */
}

/* Nearby distances list */
.sz-nearby-block {
  width: 100%;
  max-width: 900px;
  margin-top: 32px !important;   /* override inline 2xl (96px) */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.sz-nearby-block p {
  line-height: 2;
}

/* Directions section — force left-align throughout */
.sz-directions-section,
.sz-directions-section .wp-block-heading,
.sz-directions-section .sz-eyebrow,
.sz-directions-section p,
.sz-directions-section summary {
  text-align: left !important;
}

/* ==========================================================================
   8c. JOURNAL — featured + supporting layout
   ========================================================================== */

.sz-journal-featured {
  margin-bottom: var(--wp--preset--spacing--xl);
}

/* Featured card — 2-col image/text split */
.sz-journal-card--featured {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(90, 82, 74, 0.1);
  overflow: hidden;
}

.sz-journal-card--featured .wp-block-post-featured-image {
  aspect-ratio: 16/9 !important;
  min-height: 320px;
  height: 100%;
  border-bottom: none !important;
}

.sz-journal-card--featured .wp-block-post-featured-image img {
  aspect-ratio: unset !important;
  height: 100% !important;
  min-height: 320px;
}

.sz-journal-card--featured .wp-block-post-title a {
  font-size: var(--wp--preset--font-size--2xl) !important;
}

/* Supporting grid — flush below featured */
.sz-journal-grid {
  margin-top: var(--wp--preset--spacing--lg);
}

@media (max-width: 768px) {
  .sz-journal-card--featured {
    grid-template-columns: 1fr;
  }
  .sz-journal-card--featured .wp-block-post-featured-image {
    min-height: 220px;
    height: 220px;
  }
}

/* ==========================================================================
   8d. JOURNAL — homepage section, archive, article
   ========================================================================== */

/* Homepage journal section — fix button readability.
   .has-background makes buttons white; this section is warm greige not dark. */
.sz-journal-section .wp-element-button,
.sz-journal-section .wp-block-button__link {
  color: var(--wp--preset--color--timber) !important;
  border-color: rgba(59, 54, 48, 0.4) !important;
  background: transparent !important;
}
.sz-journal-section .wp-element-button:hover,
.sz-journal-section .wp-block-button__link:hover {
  background: var(--wp--preset--color--timber) !important;
  color: var(--wp--preset--color--cloud) !important;
  border-color: var(--wp--preset--color--timber) !important;
}

/* Featured card — white background lifts it off the greige section */
.sz-journal-section .sz-journal-card--featured {
  background-color: #ffffff;
}

/* Space before the journal section and above the eyebrow */
.sz-journal-section {
  margin-top: 32px;
  padding-top: 48px !important;
}

/* Section header: eyebrow + italic heading left-column */
.sz-journal-section__header {
  align-items: flex-end;
}
.sz-journal-section__header .wp-block-heading {
  color: var(--wp--preset--color--timber);
  margin-top: 24px !important; /* gap between eyebrow and "From the Hinterland" */
}

/* Archive hero — same as page heroes */
.sz-hero--journal {
  background-color: var(--wp--preset--color--timber);
}

/* Journal archive featured card padding override */
.sz-journal-featured .sz-journal-card--featured {
  background-color: var(--wp--preset--color--cloud);
}

/* Article hero — title sizing */
.sz-hero--article .wp-block-post-title {
  font-size: clamp(2rem, 4vw, var(--wp--preset--font-size--display));
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--cloud);
  margin-top: 0.4em;
}

/* Article body typography */
.sz-article-body .wp-block-post-content p {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--base); /* 1rem — was large (1.375rem), too big */
  font-weight: 300;
  line-height: 1.9;
  color: var(--wp--preset--color--timber);
  margin-bottom: 1.4em;
}

.sz-article-body .wp-block-post-content h2,
.sz-article-body .wp-block-post-content h3,
.sz-article-body .wp-block-post-content h4 {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--timber);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.sz-article-body .wp-block-post-content img {
  max-width: 100%;
  height: auto;
  margin: var(--wp--preset--spacing--xl) 0;
}

.sz-article-body .wp-block-post-content ul,
.sz-article-body .wp-block-post-content ol {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 300;
  line-height: 1.9;
  color: var(--wp--preset--color--timber);
  padding-left: 1.5em;
  margin-bottom: 1.4em;
}

/* Back to Journal link */
.sz-article-back a {
  color: var(--wp--preset--color--timber);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 54, 48, 0.25);
  padding-bottom: 2px;
  transition: border-color var(--sz-transition-fast);
}
.sz-article-back a:hover {
  border-color: var(--wp--preset--color--timber);
}

/* ---- Social sharing plugin suppression ----
   Plugin confirmed as AddToAny (X, FB, Pinterest, Email, LinkedIn, Print, More icons).
   [class*="a2a"] catches every element AddToAny generates regardless of variant.
   Additional selectors cover other common plugins as a safety net. */
[class*="a2a"],
[id*="a2a"],
[class*="addtoany"],
[id*="addtoany"],
.shareaholic-canvas,
[class*="shareaholic"],
[id*="shareaholic"],
.mashsb-container, .mashsb-wrap, .mashshare-wrap,
.sharedaddy, .sd-content, .sd-block,
.wp-block-jetpack-sharing-buttons,
.jetpack-sharing-buttons__services-list,
[class*="mashsb"], [class*="social-warfare"],
[class*="nc_socialPanel"], [class*="rrssb"] {
  display: none !important;
}

/* ---- More from the Journal — section spacing ---- */
.sz-article-body + section {
  margin-top: 0;
}
.sz-article-body + section .sz-eyebrow {
  margin-bottom: var(--wp--preset--spacing--xl) !important;
  padding-top: 8px;
}

/* ---- Journal grid cards without featured image ----
   When post-featured-image renders empty, show a warm placeholder.
   When it doesn't render at all, first-child group gets top padding
   so the card doesn't look collapsed. */
.sz-journal-card .wp-block-post-featured-image:empty {
  display: block !important;
  background-color: rgba(90, 82, 74, 0.12) !important;
  min-height: 180px;
}
/* Text group is first child only when there is no image block above it */
.sz-journal-card > .wp-block-group:first-child {
  padding-top: var(--wp--preset--spacing--lg) !important;
}
/* Reset — when image IS present, the group is not first child so this won't apply */

/* ---- Journal grid — premium spacing and card interactions ---- */

/* Wider breathing room between columns AND between rows */
.sz-journal-grid .wp-block-post-template.is-layout-grid {
  column-gap: var(--wp--preset--spacing--xl) !important;
  row-gap: var(--wp--preset--spacing--2xl) !important;
}

/* Card — subtle lift on hover.
   drop-shadow (not box-shadow) renders correctly despite overflow:hidden. */
.sz-journal-card {
  transition: transform var(--sz-transition-base), filter var(--sz-transition-base);
}
.sz-journal-card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 24px rgba(59, 54, 48, 0.16));
}

/* Image — subtle zoom tied to card hover */
.sz-journal-card .wp-block-post-featured-image img {
  transition: transform var(--sz-transition-slow);
}
.sz-journal-card:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

/* Card text area — more internal breathing room */
.sz-journal-card > .wp-block-group {
  padding-top: var(--wp--preset--spacing--lg) !important;
  padding-bottom: var(--wp--preset--spacing--sm);
}

/* ---- Old post content — hide opening bare image paragraph ----
   Classic-editor posts from 2022 often open with a <p><img></p> that duplicates
   the featured image already shown in the hero. Hide it so the article body
   starts cleanly with text. Targets only a first-child <p> containing solely
   an img (or a linked img) — won't affect body text or captioned figures. */
.sz-article-body .wp-block-post-content > p:first-child:has(> img),
.sz-article-body .wp-block-post-content > p:first-child:has(> a > img) {
  display: none;
}

/* ==========================================================================
   8e. JOURNAL — pagination, article enhancements
   ========================================================================== */

/* Query pagination — shared by journal archive and category/tag archives */
.wp-block-query-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--wp--preset--spacing--3xl);
}

.wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  color: var(--wp--preset--color--timber);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--sz-transition-fast), background-color var(--sz-transition-fast), color var(--sz-transition-fast);
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  border-color: rgba(59, 54, 48, 0.3);
}

.wp-block-query-pagination-numbers .page-numbers.current {
  border-color: var(--wp--preset--color--timber);
  background-color: var(--wp--preset--color--timber);
  color: var(--wp--preset--color--cloud);
  pointer-events: none;
}

.wp-block-query-pagination-numbers .page-numbers.dots {
  border: none;
  cursor: default;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  letter-spacing: 0.05em;
  padding: 0 1rem;
}

/* Article body — blockquote */
.sz-article-body .wp-block-post-content blockquote,
.sz-article-body .wp-block-post-content .wp-block-quote {
  margin: var(--wp--preset--spacing--xl) 0;
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
  border-left: 3px solid var(--wp--preset--color--timber);
  background-color: transparent;
}

.sz-article-body .wp-block-post-content blockquote p,
.sz-article-body .wp-block-post-content .wp-block-quote p {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 0;
}

.sz-article-body .wp-block-post-content blockquote cite,
.sz-article-body .wp-block-post-content .wp-block-quote cite {
  display: block;
  margin-top: var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(59, 54, 48, 0.5);
}

/* Pullquote (centred, no border) */
.sz-article-body .wp-block-post-content .wp-block-pullquote {
  margin: var(--wp--preset--spacing--xl) 0;
  padding: var(--wp--preset--spacing--xl) 0;
  border-top: 1px solid rgba(59, 54, 48, 0.15);
  border-bottom: 1px solid rgba(59, 54, 48, 0.15);
  text-align: center;
}

.sz-article-body .wp-block-post-content .wp-block-pullquote blockquote {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

.sz-article-body .wp-block-post-content .wp-block-pullquote p {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
}

/* Article hero — no featured image fallback.
   When the post has no featured image, useFeaturedImage renders the cover
   with just the dark overlay and no background photograph. This gradient
   makes it look intentional rather than broken. */
.sz-hero--article {
  background: linear-gradient(160deg, #3b3630 0%, #5a524a 100%);
}

/* Archive hero — same treatment (index.html / category pages) */
.sz-hero--utility {
  background-color: #3b3630; /* fallback only — never use background shorthand here as it overrides WP cover block image */
}

/* ==========================================================================
   9. IMAGE TREATMENTS
   ========================================================================== */

/* Warm vignette on feature images */
.sz-image-feature {
  position: relative;
  overflow: hidden;
}

.sz-image-feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sz-transition-slow);
}

.sz-image-feature:hover img {
  transform: scale(1.02);
}

/* Full-bleed image behind content */
.sz-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.sz-media-text--image-right {
  direction: rtl;
}

.sz-media-text--image-right > * {
  direction: ltr;
}

.sz-media-text__image {
  position: relative;
  overflow: hidden;
}

.sz-media-text__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sz-media-text__content {
  padding: var(--wp--preset--spacing--2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   9b. SHIZUKA PRINCIPLE PANEL — wide statement banner, Mon at top
   ========================================================================== */

.sz-principle {
  /* Padding-driven height — no min-height so it stays compact like reference */
  padding-top: clamp(90px, 11vh, 140px) !important;
  padding-bottom: clamp(90px, 11vh, 140px) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--wp--preset--color--autumn) !important;
}

/* Cloud text on autumn background */
.sz-principle h1,
.sz-principle h2,
.sz-principle h3,
.sz-principle h4,
.sz-principle p {
  color: var(--wp--preset--color--cloud);
}

.sz-principle .sz-container--narrow {
  max-width: 680px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center;
}

.sz-principle__mon {
  margin: 0 auto 14px !important;
}

.sz-principle__mon img {
  width: 72px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

/* eyebrow — inherits .sz-eyebrow base; colour override for autumn bg */
.sz-principle .sz-eyebrow {
  color: rgba(244, 241, 238, 0.45) !important;
  margin-bottom: 0 !important;
}

.sz-principle__quote {
  font-size: clamp(1.5rem, 2.4vw, 3rem) !important; /* +50% */
  line-height: 1.5 !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

.sz-principle__label {
  font-variant-caps: small-caps;
  margin-top: 0 !important;
}

/* ==========================================================================
   9c. BATH FEATURE — full-bleed 50/50 editorial split
   ========================================================================== */

.sz-bath-feature {
  /* Full-bleed split: force flex row on the section itself.
     WP's layout classes may or may not render — this guarantees it. */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Kill any WP content-width constraints inside */
.sz-bath-feature .has-global-padding,
.sz-bath-feature .is-layout-flow,
.sz-bath-feature .is-layout-constrained,
.sz-bath-feature .is-layout-flex {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Image column — left half */
.sz-bath-feature > .sz-bath-feature__image {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 560px !important;
  overflow: hidden !important;
  position: relative;
}

.sz-bath-feature > .sz-bath-feature__image.wp-block-cover {
  min-height: 560px !important;
  height: auto !important;
}

.sz-bath-feature__image .wp-block-cover__image-background {
  object-fit: cover !important;
  object-position: center center !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Empty inner container — hide it so it doesn't add height */
.sz-bath-feature__image .wp-block-cover__inner-container {
  display: none;
}

/* Content column — right half */
.sz-bath-feature > .sz-bath-feature__content {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
}

/* ==========================================================================
   10a. PACKAGES — filter + card grid
   ========================================================================== */

.sz-packages-section {
  background-color: var(--wp--preset--color--cloud);
  padding: var(--wp--preset--spacing--2xl) var(--sz-gutter);
}

.sz-packages-section__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Filter bar */
.sz-packages-filter {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(90, 82, 74, 0.15);
  margin-bottom: var(--wp--preset--spacing--2xl);
}

.sz-packages-filter__btn {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(90, 82, 74, 0.45);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 24px 12px 0;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sz-packages-filter__btn:hover {
  color: var(--wp--preset--color--timber);
}

.sz-packages-filter__btn.is-active {
  color: var(--wp--preset--color--timber);
  border-bottom-color: var(--wp--preset--color--timber);
}

/* Package grid */
.sz-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--lg);
}

@media (max-width: 1024px) {
  .sz-packages-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .sz-packages-grid { grid-template-columns: 1fr; }
  .sz-packages-filter { flex-wrap: wrap; gap: 4px; }
  .sz-packages-filter__btn { padding: 8px 16px; border: 1px solid rgba(90,82,74,0.2); margin-bottom: 0; }
  .sz-packages-filter__btn.is-active { border-color: var(--wp--preset--color--timber); }
}

/* Package card */
.sz-package-card {
  background-color: #fff;
  border: 1px solid rgba(90, 82, 74, 0.1);
  padding: var(--wp--preset--spacing--lg);
  display: flex;
  flex-direction: column;
}

.sz-package-card__nights {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(90, 82, 74, 0.45);
  margin-bottom: 6px;
}

.sz-package-card__note {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--wp--preset--color--timber);
  margin-bottom: 8px;
}

.sz-package-card__title {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--wp--preset--spacing--md);
  color: var(--wp--preset--color--timber);
}

.sz-package-card__inclusions {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(59, 54, 48, 0.8);
  padding-left: 1.2em;
  margin: 0 0 var(--wp--preset--spacing--lg);
  flex: 1;
}

.sz-package-card__inclusions li {
  margin-bottom: 2px;
}

.sz-package-card__cta {
  display: inline-block;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--timber);
  text-decoration: none;
  border: 1px solid var(--wp--preset--color--timber);
  padding: 10px 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
  align-self: flex-start;
  margin-top: auto;
}

.sz-package-card__cta:hover {
  background-color: var(--wp--preset--color--timber);
  color: var(--wp--preset--color--cloud);
}

/* ==========================================================================
   10. NEWSLETTER CTA
   ========================================================================== */

.sz-newsletter-cta {
  background-color: var(--wp--preset--color--cloud);
  text-align: center;
  padding-top: var(--wp--preset--spacing--2xl) !important;
  padding-bottom: var(--wp--preset--spacing--2xl) !important;
  border-top: none;
}

.sz-newsletter-cta__text {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  color: var(--wp--preset--color--timber);
  margin: 0;
}

.sz-newsletter-cta__text a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(90, 82, 74, 0.3);
  padding-bottom: 2px;
  transition: border-color var(--sz-transition-fast);
}

.sz-newsletter-cta__text a:hover {
  border-bottom-color: var(--wp--preset--color--timber);
}

/* ==========================================================================
   11. FOOTER — minimal centered, Shou Sugi Ban–style
   ========================================================================== */

.sz-footer {
  background-color: var(--wp--preset--color--timber);
  color: var(--wp--preset--color--cloud);
  padding: var(--wp--preset--spacing--2xl) var(--sz-gutter) var(--wp--preset--spacing--xl);
  text-align: center;
}

.sz-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--lg);
  max-width: 800px;
  margin: 0 auto;
  padding-top: 20px;
}

.sz-footer__mon {
  width: 80px;
  height: auto;
  opacity: 0.7;
  margin: 0 auto;
}

.sz-footer__mon img {
  width: 80px;
  height: auto;
  filter: brightness(0) invert(0.75);
}

.sz-footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sz-footer__nav-row li {
  display: flex;
  align-items: center;
}

.sz-footer__nav-row li + li::before {
  content: "—";
  color: rgba(232, 227, 220, 0.25);
  padding: 0 10px;
  font-size: var(--wp--preset--font-size--xs);
}

.sz-footer__nav-row a {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 227, 220, 0.6);
  text-decoration: none;
  transition: color var(--sz-transition-fast);
}

/* Primary nav row — bold weight */
.sz-footer__nav-row--primary a {
  font-weight: 600;
  color: rgba(232, 227, 220, 0.75);
}

.sz-footer__nav-row a:hover {
  color: var(--wp--preset--color--cloud);
}

.sz-footer__social {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--md);
}

.sz-footer__social {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 16px;
}

.sz-footer__social .wp-social-link {
  background: transparent !important;
  padding: 0 !important;
}

.sz-footer__social .wp-social-link a {
  padding: 0 !important;
}

.sz-footer__social .wp-social-link svg {
  width: 22px;
  height: 22px;
  fill: rgba(232, 227, 220, 0.55);
  transition: fill var(--sz-transition-fast);
}

.sz-footer__social .wp-social-link:hover svg {
  fill: var(--wp--preset--color--cloud);
}

.sz-footer__divider {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid rgba(232, 227, 220, 0.12);
}

.sz-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: var(--wp--preset--spacing--md);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--preset--spacing--xl);
  padding-right: var(--wp--preset--spacing--xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sz-footer__legal {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  color: rgba(232, 227, 220, 0.3);
}

/* ==========================================================================
   11. SEASONAL ACCENT — active class controls season
   ========================================================================== */

body.season-spring  { --sz-season-color: var(--wp--preset--color--spring);      }
body.season-summer  { --sz-season-color: var(--wp--preset--color--summer);      }
body.season-autumn  { --sz-season-color: var(--wp--preset--color--autumn);      }
body.season-winter  { --sz-season-color: var(--wp--preset--color--winter);      }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 1125px) {
  /* Cards collapse to single column at same breakpoint as hamburger */
  .sz-booking-pathways {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .sz-media-text {
    grid-template-columns: 1fr;
  }

  .sz-media-text__image {
    min-height: 400px;
    position: relative;
    overflow: hidden;
  }

  .sz-media-text__image img {
    position: static;
    width: 100%;
    height: 400px;
    object-fit: cover;
  }

  .sz-bath-feature__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* Bath: stack vertically on tablet; image stays square */
  .sz-bath-feature__image {
    aspect-ratio: 1 / 1;
    min-height: unset !important;
    width: 100%;
  }

  .sz-bath-feature__image .wp-block-image,
  .sz-bath-feature__image figure {
    height: 100%;
  }

  .sz-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sz-header .wp-block-site-logo,
  .sz-header .sz-header__logo {
    width: 180px !important;
  }
}

@media (max-width: 768px) {
  .sz-header__inner {
    /* Keep gutter consistent at mobile, reduce vertical padding */
    padding: 10px var(--sz-gutter);
  }

  .sz-header .wp-block-site-logo,
  .sz-header .sz-header__logo {
    width: 150px !important;
  }

  .sz-hero__title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .sz-footer__grid {
    grid-template-columns: 1fr;
  }

  .sz-footer__bottom {
    flex-direction: column;
    gap: var(--wp--preset--spacing--sm);
    text-align: center;
  }

  .sz-principle__quote {
    font-size: clamp(1.65rem, 6.75vw, 2.625rem) !important; /* +50% */
  }

  .sz-bath-feature__content {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md) !important;
  }
}

/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--sz-season-color);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .sz-hero .wp-block-cover__video-background {
    display: none;
  }
}

/* Visually hidden utility */
.sz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   14. JAPANESE BATH PAGE
   ========================================================================== */

/* Three-step ritual columns */
.sz-bath-ritual .sz-bath-step {
  padding: var(--wp--preset--spacing--lg);
  background-color: rgba(255,255,255,0.5);
  border-top: 3px solid var(--wp--preset--color--water);
}

.sz-bath-step__kanji {
  font-family: var(--wp--preset--font-family--noto-sans-jp) !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  color: var(--wp--preset--color--water) !important;
  margin: 0 0 0.25rem !important;
}

.sz-bath-step__romaji {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--water) !important;
  margin: 0 0 var(--wp--preset--spacing--md) !important;
}

/* "Continue" / related tiles section — eyebrow breathing room */
.sz-bath-continue > .sz-eyebrow,
.sz-bath-continue > p.sz-eyebrow {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Detail list — clean, no bullets */
.sz-detail-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.sz-detail-list li {
  padding: 0.65em 0;
  border-bottom: var(--sz-divider);
}

.sz-detail-list li:first-child {
  border-top: var(--sz-divider);
}

/* CTA section — "Reserve the Japanese Bath" — top breathing room
   Using fixed px value (WP Rocket CSS minifier can mangle calc+var combos) */
.sz-section.sz-cta-section {
  padding-top: 96px !important;
}

/* Enquire Now / View Packages buttons — push down from paragraph above */
.sz-cta-section .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--xl) !important;
}

/* Related tiles */
.sz-related-tile {
  padding: var(--wp--preset--spacing--lg);
  border-top: 3px solid rgba(59,54,48,0.15);
}

/* Related tile links — "VIEW ACCOMMODATION" etc.
   Uppercase text links with underline + hover slide */
.sz-related-tile a {
  color: var(--wp--preset--color--timber);
  text-decoration: none;
  border-bottom: 1px solid rgba(59,54,48,0.35);
  padding-bottom: 2px;
  transition: border-color var(--sz-transition-fast), color var(--sz-transition-fast);
}
.sz-related-tile a:hover {
  color: var(--wp--preset--color--timber);
  border-bottom-color: var(--wp--preset--color--timber);
}

/* Mobile */
@media (max-width: 768px) {
  .sz-bath-step__kanji {
    font-size: 2.5rem !important;
  }
}

/* ==========================================================================
   15. BATHING & TREATMENTS PAGE
   ========================================================================== */

/* Treatment category label */
.sz-treatment-category {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--water) !important;
  margin-bottom: var(--wp--preset--spacing--md) !important;
  padding-bottom: var(--wp--preset--spacing--sm) !important;
  border-bottom: 1px solid rgba(59,54,48,0.12);
}

/* Treatment card */
.sz-treatment-card {
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  background-color: rgba(255,255,255,0.55);
  border-top: 2px solid transparent;
  transition: border-color var(--sz-transition-fast), background-color var(--sz-transition-fast);
}

.sz-treatment-card:hover {
  border-top-color: var(--wp--preset--color--water);
  background-color: rgba(255,255,255,0.8);
}

.sz-treatment-card__meta {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: rgba(59,54,48,0.5) !important;
  margin: 0.2em 0 0.75em !important;
  text-transform: uppercase;
}

/* Conditions details block */
.sz-conditions details summary {
  cursor: pointer;
  padding: var(--wp--preset--spacing--sm) 0;
}

.sz-conditions details[open] summary {
  margin-bottom: var(--wp--preset--spacing--md);
}

/* Mobile */
@media (max-width: 768px) {
  .sz-treatment-card {
    padding: var(--wp--preset--spacing--md);
  }
}

/* ==========================================================================
   16. RETREATS PAGE
   ========================================================================== */

/* Five Elements grid */
.sz-element-card {
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  border-top: 3px solid rgba(59,54,48,0.12);
  text-align: center;
}

.sz-element-card__kanji {
  font-family: var(--wp--preset--font-family--noto-sans-jp) !important;
  font-size: 2.5rem !important;
  line-height: 1 !important;
  color: var(--wp--preset--color--water) !important;
  margin: 0 0 0.4rem !important;
}

.sz-element-card__label {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--timber) !important;
  margin: 0 0 0.6rem !important;
}

.sz-element-card__desc {
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  line-height: 1.7 !important;
  color: rgba(59,54,48,0.7) !important;
  margin: 0 !important;
}

/* Date cards */
.sz-retreat-date-card {
  padding: var(--wp--preset--spacing--lg);
  background-color: rgba(255,255,255,0.5);
  border-top: 2px solid rgba(59,54,48,0.12);
}

.sz-retreat-date-card--featured {
  background-color: var(--wp--preset--color--timber);
  border-top-color: var(--wp--preset--color--water);
}

.sz-retreat-date-card--featured h3,
.sz-retreat-date-card--featured p {
  color: var(--wp--preset--color--cloud) !important;
}

.sz-retreat-date-card__season {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--water) !important;
  margin: 0 0 0.5rem !important;
}

.sz-retreat-date-card__badge {
  display: inline-block;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: var(--wp--preset--font-size--xs) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--water) !important;
  border: 1px solid var(--wp--preset--color--water);
  padding: 0.2em 0.75em !important;
  margin-top: var(--wp--preset--spacing--sm) !important;
}

/* Inclusions columns */
.sz-retreat-inclusions {
  padding: var(--wp--preset--spacing--xl);
  border: 1px solid rgba(244,241,238,0.12);
}

.sz-retreat-inclusions--extended {
  border-color: var(--wp--preset--color--water);
}

/* Facilitator */
.sz-facilitator__photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* Mobile */
@media (max-width: 768px) {
  .sz-element-card {
    text-align: left;
  }

  .sz-retreat-inclusions {
    padding: var(--wp--preset--spacing--lg);
  }
}

/* ==========================================================================
   17. THE SHIZUKA EXPERIENCE PAGE
   ========================================================================== */

/* Section navigation — full-width timber band with two anchor links */
.sz-experience-nav {
  background-color: var(--wp--preset--color--timber);
  position: sticky;
  top: 88px; /* sits just below fixed header */
  z-index: 50; /* below header (500) so header always wins */
  border-bottom: 1px solid rgba(244, 241, 238, 0.1);
  margin-top: 0 !important; /* kill WP block gap above nav */
}

/* List-based nav (wp:list block) */
.sz-experience-nav .wp-block-list,
.sz-experience-nav__list {
  display: flex !important;
  justify-content: center;
  list-style: none !important;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.sz-experience-nav__list li {
  margin: 0;
  padding: 0;
}

.sz-experience-nav__list li::marker {
  display: none;
  content: '';
}

.sz-experience-nav__list li a {
  display: block;
  padding: 1rem 2.5rem;
  color: rgba(244, 241, 238, 0.7) !important;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color var(--sz-transition-fast), border-color var(--sz-transition-fast);
}

.sz-experience-nav__list li a:hover {
  color: var(--wp--preset--color--cloud) !important;
  border-bottom-color: var(--wp--preset--color--cloud);
}

/* Legacy selectors kept for fallback */
.sz-experience-nav__inner {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: var(--sz-max-width);
  margin: 0 auto;
  padding: 0 var(--sz-gutter);
}

.sz-experience-nav__link {
  display: block;
  padding: 1rem 2.5rem;
  color: rgba(244, 241, 238, 0.7) !important;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color var(--sz-transition-fast), border-color var(--sz-transition-fast);
}

.sz-experience-nav__link:hover,
.sz-experience-nav__link.is-active {
  color: var(--wp--preset--color--cloud) !important;
  border-bottom-color: var(--wp--preset--color--cloud);
}

/* Experience section — full-width section with anchor target */
.sz-experience-section {
  scroll-margin-top: 140px; /* sticky header + nav */
}

/* Section divider between Staying and Day Visit — override WP's 100px default stub */
.sz-experience-divider {
  max-width: 100% !important;
  width: 100% !important;
  border: none !important;
  border-top: 1px solid rgba(90, 82, 74, 0.15) !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* Experience timeline step */
.sz-experience-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0 var(--wp--preset--spacing--lg);
  padding: var(--wp--preset--spacing--lg) 0;
  border-bottom: var(--sz-divider);
}

.sz-experience-step:last-child {
  border-bottom: none;
}

.sz-experience-step__time,
.sz-experience-step__marker {
  padding-top: 0.2em;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--water);
  white-space: nowrap;
  min-width: 90px; /* flex layout alignment */
}

.sz-experience-step__content {
  /* inherits body Spectral */
}

.sz-experience-step__content h4 {
  margin-bottom: 0.4em;
}

.sz-experience-step__content p {
  margin: 0;
  color: rgba(59, 54, 48, 0.75);
}

/* Omotenashi principle block */
.sz-experience-principle {
  background-color: var(--wp--preset--color--autumn);
  color: var(--wp--preset--color--cloud);
  text-align: center;
  padding: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--xl);
}

.sz-experience-principle blockquote,
.sz-experience-principle .wp-block-quote {
  border: none;
  padding: 0;
  max-width: 640px;
  margin: 0 auto;
}

.sz-experience-principle cite,
.sz-experience-principle .wp-block-quote cite {
  font-style: normal;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Mobile */
@media (max-width: 768px) {
  .sz-experience-nav__link {
    padding: 0.875rem 1.25rem;
    letter-spacing: 0.1em;
  }

  .sz-experience-step {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--xs);
  }

  .sz-experience-step__time {
    font-size: var(--wp--preset--font-size--xs);
  }

  .sz-experience-principle {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
  }
}

/* =============================================================
   19. ACCOMMODATION — Image blocks
   ============================================================= */

/* Full-width room photo (70svh cover placeholder) */
.sz-room-full-image {
  display: block;
  overflow: hidden;
}

.sz-room-full-image .wp-block-cover__image-background,
.sz-room-full-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Split columns — stretch both columns to equal height */
.sz-split-columns {
  align-items: stretch !important;
}

.sz-split-columns > .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* Split image cover block fills the full column height */
.sz-split-image {
  flex: 1 1 auto;
  min-height: 500px;
  position: relative;
  overflow: hidden;
}

.sz-split-image .wp-block-cover__image-background,
.sz-split-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* 3-column photo strip */
.sz-photo-strip-item {
  display: block;
  overflow: hidden;
  position: relative;
}

.sz-photo-strip-item .wp-block-cover__image-background,
.sz-photo-strip-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .sz-split-columns {
    flex-direction: column;
  }

  .sz-split-image {
    min-height: 300px;
    flex: none;
  }

  .sz-photo-strip-item {
    min-height: 260px;
  }
}

/* ==========================================================================
   20. NOW BOOK IT — Restaurant widget
   ========================================================================== */

/* Widget section anchor target — scroll offset accounts for fixed header */
.sz-nbi-section {
  scroll-margin-top: 100px;
}

/* Widget container */
.sz-nbi-widget {
  width: 100%;
  background-color: var(--wp--preset--color--cloud);
  border-radius: 0;
  overflow: hidden;
}

/* The iframe itself — NBI resizer script handles height */
.sz-nbi-widget iframe[data-id="nbi-widget"] {
  display: block;
  width: 100%;
  border: none;
  min-height: 480px;
}

/* ==========================================================================
   21. SPACONNECT — Spa booking widget
   ========================================================================== */

/* Scroll offset — fixed header is ~88px; 100px gives a 12px visual buffer */
.sz-spa-section {
  scroll-margin-top: 100px;
}

/* Shizuka Experience page — in-page anchor divs need header + sticky subnav offset */
#overnight,
#day-visit {
  scroll-margin-top: 140px;
}

/* Widget wrapper */
.sz-spa-widget {
  width: 100%;
  overflow-x: auto; /* allows horizontal scroll on narrow viewports if needed */
}

.sz-spa-widget iframe {
  display: block;
  width: 100%;
  border: none;
}

/* ==========================================================================
   22. TREATMENT CARDS — clickable interaction
   ========================================================================== */

/* Cards signal clickability on hover */
.sz-treatment-card {
  cursor: pointer;
  transition: background-color 0.2s ease, border-top-color 0.2s ease;
}

/* ==========================================================================
   23. BUTTON CLEARANCE — prevent buttons abutting section borders
   ========================================================================== */

/* Any button group that is the last or only child in a block container
   gets a bottom buffer so it never sits flush against the section edge.
   32px matches our smallest spacing token (sm). */
.wp-block-cover__inner-container > .wp-block-buttons:last-child,
.wp-block-group > .wp-block-buttons:last-child,
.sz-booking-card__body > .wp-block-buttons,
.sz-service-card > .wp-block-buttons:last-child,
.sz-related-tile > .wp-block-buttons:last-child,
.sz-treatment-card > .wp-block-buttons:last-child,
.sz-chef-section__content > .wp-block-buttons:last-child,
.sz-bath-feature__content > .wp-block-buttons:last-child {
  padding-bottom: 32px;
}

/* ==========================================================================
   24. RMS AVAILABILITY BAR — front page
   ========================================================================== */

/* Note: core availability bar CSS is in Section 6 (lines ~625-740).
   This section holds only override/addition notes.
   RMS URL modifier parameters awaiting confirmation from Paige at RMS —
   parameter names will be added to theme.js once confirmed.
   Base URL: https://bookings.rmscloud.com/Search/Index/61F123E568CC6670/1/
   ========================================================================== */

/* ==========================================================================
   25. ROOMS PILOT — block styles + components (handover patterns)
   ========================================================================== */

/* Eyebrow label — small, uppercase, tracked. Used above sub-headings. */
.is-style-shizuka-eyebrow {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: var(--wp--preset--font-size--xs) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0 0 0.5rem !important;
  line-height: 1.4;
}

/* Underlined editorial link — in-body cross-links (never a button). */
.is-style-shizuka-link a {
  color: var(--wp--preset--color--timber);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}
.is-style-shizuka-link a:hover { opacity: 0.6; }

/* "In every room" feature list — two-column dashed list. */
.shizuka-features {
  list-style: none;
  padding: 0;
  margin: var(--wp--preset--spacing--md) 0 0 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 2rem;
}
.shizuka-features li {
  position: relative;
  padding-left: 1.25rem;
  margin: 0;
}
.shizuka-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--water);
}

/* Room gallery — soft square corners. */
.shizuka-room-gallery img { border-radius: 2px; }

/* Cancellation / policy table. */
.shizuka-policy-table table { border-collapse: collapse; width: 100%; }
.shizuka-policy-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
  vertical-align: top;
}
.shizuka-policy-table td:first-child {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .shizuka-features { grid-template-columns: 1fr; }
  .shizuka-policy-table td:first-child { white-space: normal; }
}

/* ==========================================================================
   26. 2026 DESIGN SYSTEM — seasonal accents + signed-off page components
   Source of truth: Claude Design handoff (design/tokens.css, June 2026).
   Only --sz-accent / --sz-accent-ink / --sz-mon-filter change per season;
   neutrals are constant so contrast never breaks on a season flip.
   Season comes from the body class set in functions.php (season-*).
   ========================================================================== */

body {
  /* default = winter 冬 */
  --sz-accent: #b7282f;
  --sz-accent-ink: #e9e5dd;
  --sz-accent-soft: rgba(183, 40, 47, 0.12);
  --sz-mon-filter: brightness(0) invert(1);
  --sz-timber: #3b3630;
  --sz-cloud: #e9e5dd;
  --sz-cloud-deep: #ddd8cd;
  --sz-paper: #f3efe8;
  --sz-line: #cfc7ba;
  --sz-line-dark: rgba(232, 227, 220, 0.22);
  --sz-on-dark: #e8e3dc;
  --sz-on-dark-soft: rgba(232, 227, 220, 0.66);
  --sz-ink-soft: #6b645b;
}
body.season-spring      { --sz-accent: #d5845f; --sz-accent-ink: #3b3630; --sz-accent-soft: rgba(213,132,95,.14);  --sz-mon-filter: none; }
body.season-summer      { --sz-accent: #7a9b7f; --sz-accent-ink: #2c2823; --sz-accent-soft: rgba(122,155,127,.16); --sz-mon-filter: none; }
body.season-late-summer { --sz-accent: #cbaa62; --sz-accent-ink: #3b3630; --sz-accent-soft: rgba(203,170,98,.18);  --sz-mon-filter: none; }
body.season-autumn      { --sz-accent: #b95d39; --sz-accent-ink: #e9e5dd; --sz-accent-soft: rgba(185,93,57,.14);   --sz-mon-filter: brightness(0) invert(1); }
body.season-winter      { --sz-accent: #b7282f; --sz-accent-ink: #e9e5dd; --sz-accent-soft: rgba(183,40,47,.12);   --sz-mon-filter: brightness(0) invert(1); }

/* Legacy seasonal hover/accent lines (Section 6-24 era) now follow the
   2026 accent — kills the old-palette green on card hovers etc. */
body[class*="season-"] { --sz-season-color: var(--sz-accent); }

/* —— Readability pass v2 (11 Jun): small serif copy → 500 weight, near-ink —— */
/* v3 addition: design-spec body measure — 17px / 1.62 (tokens.css source of truth) */
body { --sz-ink-soft: #575047; font-weight: 400; font-size: 17px; line-height: 1.62; }
.sz-booking-card__desc { font-size: 17px !important; line-height: 1.6 !important; }
/* Tile descriptions render one uniform weight — neutralise any inline bolds */
.sz-booking-card__desc strong,
.sz-booking-card__desc b { font-weight: inherit; }
/* v4 — final readability dial: reading copy at full Timber ink */
.sz-booking-card__desc,
.sz-journal-card p,
.sz-journal-featured p,
.sz-bath-feature__content p,
.u-body {
  color: var(--wp--preset--color--timber) !important; /* #3b3630 full ink */
}
p { font-weight: 400; }
.has-contrast-2-color { color: #575047 !important; }
.sz-booking-card__desc,
.sz-page-hero__lead,
.sz-journal-card p,
.sz-journal-featured p,
.sz-bath-feature__content p,
.u-lead, .u-body {
  font-weight: 400 !important;
  color: #4a443d !important;
}
.sz-dark-section p,
.sz-page-hero__lead {
  color: var(--sz-on-dark-soft) !important; /* dark sections keep light ink */
}

/* —— JP + Latin kicker (seasonal accent) —— */
.sz-kicker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px !important;
  color: var(--sz-accent);
}
.sz-kicker__jp {
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.sz-kicker__sep { opacity: 0.7; }
.sz-kicker__latin {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* On light backgrounds the latin half quietens to ink-soft */
.sz-on-light .sz-kicker__latin { color: var(--sz-ink-soft); }

/* —— Page hero (acf/shizuka-page-hero) —— */
.sz-page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 70vh;
  background-color: var(--sz-timber);
  background-size: cover;
  background-position: center;
  color: var(--sz-on-dark);
}
.sz-page-hero--tall { min-height: 76vh; }
.sz-page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,25,21,.62) 0%, rgba(28,25,21,.12) 42%, rgba(28,25,21,.72) 100%);
}
.sz-page-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 40px 64px;
}
.sz-page-hero__title {
  /* Per-script stack: Latin → Neue Haas (grotesk), Japanese (安らぎ) → Heisei Mincho */
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial,
               "heisei-mincho-std", "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
  font-weight: 300;
  font-size: clamp(2.75rem, 6vw, 5rem);
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0 0 22px;
  color: var(--sz-on-dark);
}
.sz-page-hero__lead {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  max-width: 540px;
  color: var(--sz-on-dark-soft);
  margin: 0;
}
@media (min-width: 1200px) {
  .sz-page-hero__copy { transform: translateX(-200px); }
  .sz-page-hero__inner { padding-left: 240px; }
}

/* —— Section sub-nav strip —— */
.sz-subnav {
  background: var(--sz-cloud-deep);
  border-bottom: 1px solid var(--sz-line);
}
.sz-subnav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sz-subnav__label {
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--sz-ink-soft);
  padding: 16px 18px 16px 0;
  border-right: 1px solid var(--sz-line);
  white-space: nowrap;
  margin: 0 !important;
}
.sz-subnav__inner a {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--timber);
  text-decoration: none;
  padding: 17px 0 15px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.sz-subnav__inner a.is-active {
  font-weight: 600;
  border-bottom-color: var(--sz-accent);
}

/* —— Plain-text section kicker (single class, validation-safe in paragraphs) —— */
.sz-kicker2 {
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: 13px; /* +1 for JP glyph legibility in the paired kickers */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sz-accent) !important;
  margin: 0 0 14px !important;
}

/* —— Check-in / glyph stat columns —— */
.sz-stat { border-top: 2px solid var(--sz-timber); padding-top: 14px; }
.sz-stat__glyph {
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: 19px; /* kanji needs more px than Latin — 12-13px was stroke soup */
  letter-spacing: 0.12em;
  color: var(--sz-accent);
  margin: 0 0 10px !important;
}
.sz-stat__value {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400;
  font-size: 1.875rem;
}

/* —— Room gallery grid (5 slots; first spans both rows) —— */
.sz-room-gallery.wp-block-gallery {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 272px;
  gap: 16px;
}
.sz-room-gallery.wp-block-gallery > figure.wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  height: 100%;
}
.sz-room-gallery.wp-block-gallery > figure.wp-block-image:first-child { grid-row: span 2; }
.sz-room-gallery.wp-block-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

/* —— Inclusion rows (◆ accent bullets, hairline tops) —— */
.sz-inclusions { list-style: none; padding: 0; margin: 0 !important; columns: 2; column-gap: 40px; }
.sz-inclusions li {
  break-inside: avoid;
  border-top: 1px solid var(--sz-line);
  padding: 12px 0 12px 22px;
  position: relative;
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 0.9375rem;
}
.sz-inclusions li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 13px;
  font-size: 9px;
  color: var(--sz-accent);
}

/* —— Dark feature section (two-ways-to-bathe etc.) —— */
.sz-dark-section { background: var(--sz-timber) !important; color: var(--sz-on-dark); }
.sz-dark-section h2, .sz-dark-section h3, .sz-dark-section h4 { color: var(--sz-on-dark); }
.sz-dark-section p { color: var(--sz-on-dark-soft); }
.sz-dark-section .sz-kicker__latin { color: var(--sz-on-dark-soft); }
.sz-dark-card {
  border: 1px solid var(--sz-line-dark);
  border-radius: 3px;
  padding: 18px 18px 26px;
}
.sz-dark-card .sz-card-eyebrow {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sz-accent-ink);
  background: var(--sz-accent);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 2px;
  margin: 14px 0 10px !important;
}
.sz-link-light a {
  color: var(--sz-on-dark) !important;
  border-bottom: 1.5px solid var(--sz-on-dark);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400;
  font-size: 14px;
  padding-bottom: 3px;
}

@media (max-width: 860px) {
  .sz-page-hero__inner { padding: 110px 24px 44px; }
  .sz-subnav__inner { padding: 0 24px; }
  .sz-room-gallery.wp-block-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .sz-room-gallery.wp-block-gallery > figure.wp-block-image:first-child { grid-column: span 2; }
  .sz-inclusions { columns: 1; }
}

/* ==========================================================================
   27. 2026 HEADER + FOOTER + STAY COMPONENTS
   ========================================================================== */

/* —— Header (sz-hdr) — absolute over heroes, light-on-dark —— */
.sz-hdr {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  color: var(--sz-on-dark);
}
.sz-hdr__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 40px;
}
.sz-hdr__mark { flex-shrink: 0; display: flex; }
.sz-hdr__mark img { height: 44px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.sz-hdr__nav { display: flex; gap: 24px; align-items: center; margin-left: auto; }
.sz-hdr__nav a {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sz-on-dark);
  text-decoration: none;
  opacity: 0.9;
  white-space: nowrap;
}
.sz-hdr__nav a:hover { opacity: 1; }
.sz-hdr__tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.sz-hdr__search { position: relative; display: flex; align-items: center; }
.sz-hdr__search-glyph { position: absolute; left: 11px; font-size: 15px; opacity: 0.7; pointer-events: none; }
.sz-hdr__search input {
  width: 150px;
  transition: width 0.25s ease;
  background: rgba(232,227,220,0.1);
  border: 1px solid rgba(232,227,220,0.35);
  border-radius: 2px;
  color: var(--sz-on-dark);
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 11px 12px 11px 30px;
}
.sz-hdr__search input::placeholder { color: rgba(232,227,220,0.55); }
.sz-hdr__search input:focus { width: 230px; outline: none; border-color: rgba(232,227,220,0.7); }
.sz-hdr__book { position: relative; }
.sz-hdr__book-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; cursor: pointer;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sz-on-dark);
  border: 1px solid rgba(232,227,220,0.5);
  border-radius: 2px;
  padding: 12px 22px;
  transition: background 0.2s, color 0.2s;
}
.sz-hdr__book-btn:hover { background: var(--sz-cloud); color: var(--sz-timber); }
.sz-hdr__book-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 260px; /* "Book Bathing & Wellness" one line */
  background: var(--sz-timber);
  border: 1px solid var(--sz-line-dark);
  border-radius: 2px;
  padding: 6px 0;
  z-index: 40;
}
.sz-hdr__book--open .sz-hdr__book-menu { display: block; }
.sz-hdr__book-menu a {
  display: block;
  padding: 11px 18px;
  color: var(--sz-on-dark);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap; /* menu shrink-wraps to longest label */
}
.sz-hdr__book-menu a:hover { background: rgba(232,227,220,0.08); }
.sz-hdr__burger { display: none; background: none; border: 0; color: var(--sz-on-dark); font-size: 24px; cursor: pointer; padding: 4px 8px; }

@media (max-width: 980px) {
  .sz-hdr__nav, .sz-hdr__search { display: none; }
  .sz-hdr__burger { display: block; }
  .sz-hdr--open { background: var(--sz-timber); }
  .sz-hdr--open .sz-hdr__nav {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--sz-timber);
    padding: 12px 24px 24px;
    border-top: 1px solid var(--sz-line-dark);
  }
  .sz-hdr--open .sz-hdr__nav a { padding: 13px 0; font-size: 13px; width: 100%; border-bottom: 1px solid var(--sz-line-dark); }
}

/* Pages without a dark hero need breathing room under the absolute header */
.sz-hdr--solid { position: relative; background: var(--sz-timber); }

/* —— Footer (sz-ftr) —— */
.sz-ftr { background: var(--sz-timber); color: var(--sz-on-dark); }
.sz-ftr a { color: var(--sz-on-dark); text-decoration: none; }
.sz-ftr__inner { max-width: 1280px; margin: 0 auto; padding: 64px 40px 24px; }
.sz-ftr__lead {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 20px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--sz-line-dark);
}
.sz-ftr__logo { width: 132px; height: auto; filter: brightness(0) invert(1); }
.sz-ftr__jp {
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--sz-on-dark-soft); margin: 0 !important;
}
.sz-ftr__lead h3 {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400; font-size: 30px; max-width: 560px; margin: 0;
  color: var(--sz-on-dark);
}
.sz-ftr__sub {
  font-family: var(--wp--preset--font-family--spectral);
  font-style: italic;
  font-size: 14px;
  color: var(--sz-on-dark-soft);
  margin: -8px 0 0 !important;
}
.sz-ftr__news { display: flex; gap: 10px; width: min(440px, 90%); }
.sz-ftr__news input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--sz-line-dark);
  border-radius: 3px;
  padding: 13px 16px;
  color: var(--sz-on-dark);
  font-family: var(--wp--preset--font-family--spectral);
  font-style: italic;
}
.sz-ftr__news button {
  background: var(--sz-cloud); color: var(--sz-timber);
  border: 1.5px solid var(--sz-cloud); border-radius: 3px;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 22px; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sz-ftr__news button:hover { background: transparent; color: var(--sz-cloud); }
.sz-ftr__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 56px;
}
.sz-ftr__col-head {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sz-on-dark-soft);
  margin: 0 0 14px !important;
}
.sz-ftr__col-head--gap { margin-top: 26px !important; }
.sz-ftr__cols a { display: block; position: relative; width: fit-content; font-family: var(--wp--preset--font-family--spectral); font-size: 14px; opacity: 0.8; padding: 4.5px 0; }
.sz-ftr__cols a:hover { opacity: 1; }
.sz-ftr__addr { font-family: var(--wp--preset--font-family--spectral); font-size: 14px; color: var(--sz-on-dark-soft); line-height: 1.7; margin: 0; }
.sz-ftr__legal {
  display: flex; justify-content: space-between;
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--sz-line-dark);
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--sz-on-dark-soft);
}
.sz-ftr__legal a { color: inherit; margin-left: 18px; }
.sz-ftr__ack { background: var(--sz-cloud); color: var(--wp--preset--color--timber); padding: 40px; border-top: 1px solid var(--sz-line); }
.sz-ftr__ack-label {
  max-width: 720px; margin: 0 auto 10px !important;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600; font-size: 11px; letter-spacing: 0.22em;
}
.sz-ftr__ack-copy {
  max-width: 720px; margin: 0 auto !important;
  font-family: var(--wp--preset--font-family--spectral);
  font-style: italic; font-size: 0.875rem; color: var(--sz-ink-soft);
}

@media (max-width: 860px) {
  .sz-ftr__cols { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 40px; }
  .sz-ftr__legal { flex-direction: column; gap: 10px; }
  .sz-ftr__ack { padding: 32px 24px; }
}

/* —— Stay: route cards / experience rail / package cards / cross strip —— */
.sz-route { border-top: 2px solid var(--sz-timber); padding-top: 20px; }
.sz-route .sz-stat__glyph { margin-bottom: 8px !important; }
.sz-package-card { background: var(--sz-paper) !important; border: 1px solid var(--sz-line); }
/* Pin each card's CTA row to the bottom — cards in a row get equal-height
   columns, so buttons align across the row no matter how long the copy runs.
   (Scoped to COLUMN cards — the group variant, e.g. "Host your own retreat",
   is normal text flow and keeps its natural rhythm.) */
.wp-block-column.sz-package-card > :last-child { margin-top: auto !important; }
.sz-package-card > * { padding-left: 24px; padding-right: 24px; }
.sz-package-card > figure { padding: 0; margin: 0 0 18px !important; }
.sz-package-card > figure img { width: 100%; height: auto; display: block; }
.sz-package-card .sz-pkg-eyebrow {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sz-accent);
}
.sz-package-card .sz-pkg-foot { padding-bottom: 24px; }
.sz-cross { border-top: 1px solid var(--sz-line); padding-top: 16px; }
.sz-hero-actions a.sz-availability-bar__cta { display: inline-block; }

/* —— Ma band: driven by the seasonal accent (one-switch retheme) —— */
.sz-principle {
  background-color: var(--sz-accent) !important;
  color: var(--sz-accent-ink) !important;
}
.sz-principle h2, .sz-principle p { color: var(--sz-accent-ink) !important; }
.sz-principle__mon img {
  width: 64px !important;
  height: auto;
  filter: var(--sz-mon-filter);
  margin: 0 auto;
}

/* —— Page-hero action row (CHECK AVAILABILITY + underlined link) —— */
.sz-page-hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.sz-page-hero__cta {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400; font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sz-on-dark); text-decoration: none;
  border: 1px solid rgba(232,227,220,0.6);
  border-radius: 2px; padding: 13px 26px;
  transition: background .2s, color .2s;
}
.sz-page-hero__cta:hover { background: var(--sz-cloud); color: var(--sz-timber); }
.sz-page-hero__link {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400; font-size: 14px;
  color: var(--sz-on-dark); text-decoration: underline;
  text-underline-offset: 5px;
}

/* —— Package card footer row (From $— ↔ Book) —— */
.sz-pkg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 24px 24px;
}
.sz-pkg-row .sz-pkg-from {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sz-ink-soft);
}
.sz-pkg-row .sz-pkg-book {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  background: var(--sz-timber); color: var(--sz-cloud);
  border: 1.5px solid var(--sz-timber); border-radius: 3px;
  padding: 11px 18px;
  transition: background .2s, color .2s;
}
.sz-pkg-row .sz-pkg-book:hover { background: transparent; color: var(--sz-timber); }

/* —— Ready-to-book action pair —— */
.sz-ready-actions { display: flex; gap: 22px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.sz-ready-actions .sz-pkg-book { padding: 14px 24px; }
.sz-ready-actions a.sz-ready-link {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400; font-size: 13.5px;
  color: var(--wp--preset--color--timber);
  text-decoration: underline; text-underline-offset: 5px;
}
@media (max-width: 760px) { .sz-ready-actions { justify-content: flex-start; } }

/* —— Homepage kickers/labels → seasonal accent (2026 design) —— */
.sz-booking-card__label,
.sz-bath-feature .sz-eyebrow,
.sz-journal-section .sz-eyebrow {
  color: var(--sz-accent) !important;
}

/* ==========================================================================
   29. PAGE BANDS + MEDIA FIT — match signed-off design (12 Jun annotations)
   Design sections are FLUSH contiguous bands; intra-section rhythm ~18px;
   media fills its frame edge-to-edge.
   ========================================================================== */

/* Flush bands — no cream gaps between top-level sections in page content */
.wp-block-post-content > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* …and between ROOT-level blocks (WP inserts a 40px block-gap between
   wp-site-blocks children — the gap above the Stay hero and between the
   homepage's template-level sections). */
.wp-site-blocks > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* "All packages →" — sits top-right beside the section H2, per design.
   Scoped to links immediately following an H2 so policy links etc. are safe. */
.wp-block-post-content h2.wp-block-heading + p.is-style-shizuka-link {
  text-align: right;
  margin-top: -2.4em !important;
}
@media (max-width: 760px) {
  .wp-block-post-content h2.wp-block-heading + p.is-style-shizuka-link {
    text-align: left;
    margin-top: 18px !important;
  }
}

/* Intra-section rhythm — tighten the default block gap to the design's stack */
.wp-block-post-content .is-layout-constrained > * + * {
  margin-block-start: 18px !important;
}
.wp-block-post-content h2.wp-block-heading { margin-bottom: 4px; }

/* Dark experience rail (Stay) — text measure + image fills its half and
   bleeds to the band edges. Scoped to the vertically-centred columns so the
   Rooms two-ways cards (same dark section class) are untouched. */
.sz-dark-section p { max-width: 58ch; }
/* Rail image: absolute-fill the right half of the band — pinned to the
   band's top, bottom and right edges (negative margins can't reach the
   bottom edge; absolute positioning can). */
/* Scoped to the Stay page (8954) — the same dark-section + centred-columns
   + image-last-column shape exists innocently elsewhere (e.g. Accessibility
   bath section) and must NOT get the absolute-fill treatment. */
@media (min-width: 861px) {
  body.page-id-8954 .sz-dark-section > .are-vertically-aligned-center {
    position: relative;
    min-height: 440px;
  }
  body.page-id-8954 .sz-dark-section > .are-vertically-aligned-center > .wp-block-column:last-child {
    margin: 0 !important;
  }
  body.page-id-8954 .sz-dark-section > .are-vertically-aligned-center > .wp-block-column:last-child .wp-block-image {
    position: absolute;
    top: calc(-1 * var(--wp--preset--spacing--70));
    bottom: calc(-1 * var(--wp--preset--spacing--70));
    left: 52%;
    right: calc(-1 * var(--wp--preset--spacing--40));
    margin: 0 !important;
    height: auto;
  }
  body.page-id-8954 .sz-dark-section > .are-vertically-aligned-center > .wp-block-column:last-child .wp-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
@media (max-width: 860px) {
  body.page-id-8954 .sz-dark-section .are-vertically-aligned-center .wp-block-column:last-child .wp-block-image { margin: 18px 0 0 !important; }
  body.page-id-8954 .sz-dark-section .are-vertically-aligned-center .wp-block-column:last-child .wp-block-image img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  }
}

/* Package cards — kill the legacy Packages-page padding (§10a set 40px on
   the same class, insetting the image on all four sides) */
.sz-package-card { padding: 0 !important; }

/* Package cards — image flush to card edges, uniform 3:2 crop.
   Belt-and-braces selectors: cover figure nesting/wrapper variants. */
.sz-package-card figure,
.sz-package-card .wp-block-image {
  padding: 0 !important;
  margin: 0 0 18px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.sz-package-card figure img,
.sz-package-card .wp-block-image img {
  width: 100% !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* Top of page — hero flush to viewport top, header offset under admin bar */
body { margin: 0 !important; }
.wp-site-blocks { margin-top: 0 !important; padding-top: 0 !important; }
.sz-page-hero { margin-top: 0 !important; }
body.admin-bar .sz-hdr { top: 32px; }

/* Two-ways cards (Rooms) — uniform 4:3 crop */
.sz-dark-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   30. CANCELLATION BAND + LINK ROLLOVERS (12 Jun)
   ========================================================================== */

/* Cancellation band — centre the read column (was justified hard-left) */
.wp-block-post-content .has-base-2-background-color.is-layout-constrained > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Kicker + eyebrow share one line, per design */
.wp-block-post-content .has-base-2-background-color > p.sz-kicker2,
.wp-block-post-content .has-base-2-background-color > p.is-style-shizuka-eyebrow {
  display: inline-block;
  margin-top: 0 !important;
  vertical-align: baseline;
}
.wp-block-post-content .has-base-2-background-color > p.sz-kicker2 { margin-right: 14px !important; }

/* Policy table — design's hairline grid, not zebra stripes */
.shizuka-policy-table table { border: 1px solid var(--sz-line); }
.shizuka-policy-table.is-style-stripes tbody tr { background: transparent !important; }
.shizuka-policy-table td {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--sz-line);
}
.shizuka-policy-table td:first-child { border-right: 1px solid var(--sz-line); width: 45%; }
.shizuka-policy-table tr:last-child td { border-bottom: 0; }

/* —— Link rollover: accent underline sweeps in, left → right. Subtle. —— */
.is-style-shizuka-link a,
.sz-link-light a,
a.sz-ready-link,
.sz-journal-card .wp-block-post-excerpt__more-link,
.sz-subnav__inner a,
.sz-hdr__nav a,
.sz-ftr__cols a {
  position: relative;
}
.is-style-shizuka-link a::after,
.sz-link-light a::after,
a.sz-ready-link::after,
.sz-journal-card .wp-block-post-excerpt__more-link::after,
.sz-subnav__inner a::after,
.sz-hdr__nav a::after,
.sz-ftr__cols a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 0;
  background: var(--sz-accent);
  transition: width 0.28s ease;
}
.is-style-shizuka-link a:hover::after,
.sz-link-light a:hover::after,
a.sz-ready-link:hover::after,
.sz-journal-card .wp-block-post-excerpt__more-link:hover::after,
.sz-subnav__inner a:hover::after,
.sz-hdr__nav a:hover::after,
.sz-ftr__cols a:hover::after {
  width: 100%;
}
/* Keep text fully legible on hover (was fading to 60%) */
.is-style-shizuka-link a:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .is-style-shizuka-link a::after, .sz-hdr__nav a::after { transition: none; }
}

/* —— Accessibility strip: copy left, link centred-right (design).
   Targets the only group with BOTH top+bottom hairline borders, so the
   cancellation band (top border only) is untouched. —— */
.wp-block-post-content .wp-block-group[style*="border-top-color"][style*="border-bottom-color"] {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 48px;
  align-items: center;
}
.wp-block-post-content .wp-block-group[style*="border-top-color"][style*="border-bottom-color"] > h4 {
  margin: 0 !important;
  grid-column: 1;
}
.wp-block-post-content .wp-block-group[style*="border-top-color"][style*="border-bottom-color"] > p {
  margin: 6px 0 0 !important;
  grid-column: 1;
}
.wp-block-post-content .wp-block-group[style*="border-top-color"][style*="border-bottom-color"] > p.is-style-shizuka-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0 !important;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .wp-block-post-content .wp-block-group[style*="border-top-color"][style*="border-bottom-color"] {
    display: block;
  }
  .wp-block-post-content .wp-block-group[style*="border-top-color"][style*="border-bottom-color"] > p.is-style-shizuka-link {
    margin-top: 14px !important;
  }
}

/* Cancellation band — settle the stack: tighter heading, breathing room
   around the table, link clear of the table edge */
.wp-block-post-content .has-base-2-background-color h2.wp-block-heading { margin-bottom: 0; }
.wp-block-post-content .has-base-2-background-color .shizuka-policy-table { margin-top: 24px !important; }
.wp-block-post-content .has-base-2-background-color .shizuka-policy-table + p.is-style-shizuka-link { margin-top: 22px !important; }

/* ==========================================================================
   31. FEEDBACK ROUND 1 — Catherine + Kimika (12 Jun)
   ========================================================================== */

/* —— A. Japanese type → Heisei Mincho (Nana's call). Per-script font stack:
   LATIN glyphs render in Neue Haas (Latin), JAPANESE falls through to Heisei
   Mincho. Requires Heisei Mincho added to the Adobe kit oxv5mcq + published.
   System mincho fallbacks keep it elegant if the kit font is absent. —— */
body {
  /* Per-script stack: LATIN renders sans (Neue Haas, or Helvetica/Arial if the
     kit font is slow), JAPANESE falls through the sans fonts (no JP glyphs) to
     Heisei Mincho. Sans fallbacks sit BEFORE the mincho so Latin never lands on
     a serif — fixes "Victoria, Australia" rendering serif. */
  --wp--preset--font-family--noto-sans-jp:
    "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial,
    "heisei-mincho-std", "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
}
.sz-stat__glyph, .sz-kicker__jp, .sz-subnav__label, .sz-ftr__jp {
  font-family: "heisei-mincho-std", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;   /* part of the 500→400 pass — kanji now renders Heisei W3 (light). Bump to 500 if the Japanese eyebrows read too faint. */
}

/* —— B. Journal — softer, quieter (Catherine: jarring after the Ma band) —— */
.sz-journal-section { padding-top: 120px !important; padding-bottom: 120px !important; }
.sz-journal-section .sz-journal-card--featured { grid-template-columns: 1.15fr 1fr; }
.sz-journal-section .sz-journal-card--featured .wp-block-post-featured-image { min-height: 230px; }
.sz-journal-section .sz-journal-card--featured .wp-block-post-title a { font-size: var(--wp--preset--font-size--xl) !important; }
.sz-journal-section .sz-journal-grid { margin-top: 56px; }
.sz-journal-section .wp-block-post-template.is-layout-grid {
  column-gap: var(--wp--preset--spacing--xl) !important;
  row-gap: var(--wp--preset--spacing--xl) !important;
}

/* —— C. Yohaku (余白) — more breathing room (Kimika #1). First pass, tune to taste. —— */
.sz-booking-pathways-section { padding-top: 96px !important; padding-bottom: 96px !important; }
.sz-booking-pathways { gap: 40px; }
.sz-booking-card__body { padding: 22px 24px 30px !important; }
.sz-bath-feature > .sz-bath-feature__content { padding-top: 96px !important; padding-bottom: 96px !important; }
.wp-block-post-content .is-layout-constrained > * + * { margin-block-start: 26px !important; }
.wp-block-post-content > .wp-block-group { padding-top: 96px !important; padding-bottom: 96px !important; }

/* —— D. Stay hero legibility — deepen scrim, weighted bottom-left to the copy —— */
.sz-page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(28,25,21,0.6) 0%, rgba(28,25,21,0.15) 50%, rgba(28,25,21,0) 100%),
    linear-gradient(180deg, rgba(28,25,21,0.4) 0%, rgba(28,25,21,0.15) 38%, rgba(28,25,21,0.82) 100%);
}

/* ==========================================================================
   32. JOURNAL REDESIGN + TILE BUTTON PAIR — to Claude Design prototype (15 Jun)
   ========================================================================== */

/* —— A. PATHWAY TILES: primary solid button + text-link "→" pair ——
   Markup already distinguishes them: the first button is plain
   .wp-block-button (primary); the second is .is-style-outline (→ link). —— */
.sz-booking-card .wp-block-buttons {
  align-items: center;
  gap: 20px;
  margin-top: auto;
}
/* Primary — solid timber fill, terracotta on hover */
.sz-booking-card .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.sz-booking-card .wp-block-button:not(.is-style-outline) .wp-element-button {
  background-color: var(--wp--preset--color--timber) !important;
  color: var(--wp--preset--color--cloud) !important;
  border-color: var(--wp--preset--color--timber) !important;
}
.sz-booking-card .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.sz-booking-card .wp-block-button:not(.is-style-outline) .wp-element-button:hover {
  background-color: var(--sz-season-color) !important;
  border-color: var(--sz-season-color) !important;
  color: var(--wp--preset--color--cloud) !important;
}
/* Secondary — strip the box, render as a text link with a trailing arrow */
.sz-booking-card .wp-block-button.is-style-outline .wp-block-button__link,
.sz-booking-card .wp-block-button.is-style-outline .wp-element-button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0.1em !important;
  color: var(--wp--preset--color--timber) !important;
  text-transform: none !important;   /* sentence case "View packages →", not shouting */
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  font-size: var(--wp--preset--font-size--small) !important;
}
.sz-booking-card .wp-block-button.is-style-outline .wp-block-button__link::after {
  content: " →";
  transition: margin-left var(--sz-transition-fast);
}
.sz-booking-card .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sz-booking-card .wp-block-button.is-style-outline .wp-element-button:hover {
  background: transparent !important;
  color: var(--sz-season-color) !important;
}
.sz-booking-card .wp-block-button.is-style-outline .wp-block-button__link:hover::after {
  margin-left: 4px;
}

/* —— B. JOURNAL SECTION: soft paper band (overrides inline greige) —— */
.sz-journal-section.has-background {
  background-color: var(--wp--preset--color--paper) !important;
}

/* Centred header: eyebrow ▸ italic heading ▸ subtitle (subtitle added in editor) */
.sz-journal-section__header {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 24px;
  margin-bottom: 84px;
}
.sz-journal-section__header .sz-eyebrow,
.sz-journal-section__header .wp-block-heading,
.sz-journal-section__header p {
  text-align: center !important;
}
.sz-journal-section__header .sz-eyebrow {
  font-size: 0.95rem !important;
  letter-spacing: 0.2em !important;
}
/* The display line — big Spectral italic, like the prototype (~54px) */
.sz-journal-section__header .wp-block-heading {
  margin-top: 0 !important;
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 4vw, 3.4rem) !important;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
/* Subtitle paragraph (added in the editor) — quiet serif, two lines */
.sz-journal-section__header p:not(.is-style-shizuka-link) {
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-size: var(--wp--preset--font-size--large) !important;
  line-height: 1.6;
  color: var(--wp--preset--color--muted) !important;
  max-width: 36ch;
  margin: 0 auto !important;
}
/* "All journal entries →" — strip the box, render as a quiet centred text-link
   (prototype places it at the foot; until moved in the editor it sits centred
   under the heading). */
.sz-journal-section__header .wp-block-buttons {
  justify-content: center;
}
.sz-journal-section__header .wp-block-button__link,
.sz-journal-section__header .wp-element-button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--wp--preset--color--timber) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: var(--wp--preset--font-size--small) !important;
}
.sz-journal-section__header .wp-block-button__link:hover,
.sz-journal-section__header .wp-element-button:hover {
  background: transparent !important;
  color: var(--sz-season-color) !important;
}

/* —— Featured card: smaller, inset, cream, 4:3 image left —— */
.sz-journal-section .sz-journal-card--featured {
  grid-template-columns: 0.82fr 1fr;   /* modest 3:2 image + content, like the prototype */
  gap: 48px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent !important;   /* prototype: no card fill */
  border: none !important;                     /* prototype: no border */
  align-items: center;                         /* image keeps 3:2, doesn't stretch tall */
}
.sz-journal-section .sz-journal-card--featured .wp-block-post-featured-image {
  aspect-ratio: 3 / 2 !important;
  min-height: 0 !important;
  height: auto !important;
  border: none !important;
}
.sz-journal-section .sz-journal-card--featured .wp-block-post-featured-image img {
  aspect-ratio: 3 / 2 !important;
  min-height: 0 !important;
  height: 100% !important;
}
.sz-journal-section .sz-journal-card--featured .wp-block-post-title,
.sz-journal-section .sz-journal-card--featured .wp-block-post-title a {
  font-size: clamp(2rem, 2.6vw, 2.4rem) !important;
  line-height: 1.12 !important;
}
/* Featured eyebrow (post terms) — quiet muted, not blue/crimson */
.sz-journal-section .sz-journal-card--featured .wp-block-post-terms,
.sz-journal-section .sz-journal-card--featured .wp-block-post-terms a {
  color: var(--wp--preset--color--muted) !important;
}
/* Content side of the featured card — generous padding */
.sz-journal-section .sz-journal-card--featured > .wp-block-group,
.sz-journal-section .sz-journal-card--featured > div:not(.wp-block-post-featured-image) {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
/* even spacing via the flex gap — drop the blocks' own margins */
.sz-journal-section .sz-journal-card--featured > .wp-block-group > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* —— Supporting 3-up: bordered cream cards with SMALL thumbnails —— */
.sz-journal-grid .sz-journal-card {
  background-color: var(--wp--preset--color--paper) !important;
  border: 1px solid var(--wp--preset--color--line);
}
.sz-journal-grid .sz-journal-card .wp-block-post-featured-image {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.sz-journal-grid .sz-journal-card .wp-block-post-featured-image img {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
}
/* Pad the text region inside each supporting card */
.sz-journal-grid .sz-journal-card > .wp-block-group,
.sz-journal-grid .sz-journal-card > div:not(.wp-block-post-featured-image) {
  padding: 22px 24px 28px !important;
}
/* Category label (post terms) — quiet uppercase, seasonal accent */
.sz-journal-grid .sz-journal-card .wp-block-post-terms {
  color: var(--sz-season-color) !important;
}
/* "Read more →" — seasonal accent, no heavy underline */
.sz-journal-grid .sz-journal-card .wp-block-post-excerpt__more-link {
  color: var(--sz-season-color) !important;
  border-bottom-color: transparent !important;
}
.sz-journal-grid .sz-journal-card .wp-block-post-excerpt__more-link:hover {
  border-bottom-color: var(--sz-season-color) !important;
}

/* ==========================================================================
   28. UI TEXT PRESENCE PASS — per Michael's annotated screenshot, 11 Jun.
   The small uppercase UI/accent layer (kickers, labels, ghost buttons, nav,
   link rows) gains weight (→600), a size notch, and lifted opacity.
   Reading copy untouched — this is the layer the eye said was faint.
   ========================================================================== */

/* Header */
.sz-hdr__nav a { font-size: 12.5px; font-weight: 400; opacity: 1; }
.sz-hdr__book-btn { font-size: 12px; font-weight: 400; border-color: rgba(232,227,220,0.75); }
.sz-hdr__search input { font-size: 12px; border-color: rgba(232,227,220,0.55); }
.sz-hdr__search input::placeholder { color: rgba(232,227,220,0.75); }

/* Hero kicker + subtitle (beats their inline rgba colours) */
.sz-hero .sz-eyebrow { color: rgba(232,227,220,0.92) !important; font-weight: 400 !important; }
.sz-hero__subtitle { color: rgba(238,233,226,0.96) !important; font-weight: 400 !important; }

/* Availability bar */
.sz-availability-bar__label { font-size: 0.72rem; font-weight: 400; color: rgba(232,227,220,0.78); }
.sz-availability-bar__cta { font-size: 0.78rem; font-weight: 400; }

/* Ghost buttons — global + tile-card variants */
.wp-element-button,
.wp-block-button__link { font-weight: 400; font-size: 0.8rem; }
.sz-booking-card .wp-block-button__link,
.sz-booking-card .wp-element-button {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  border-color: rgba(59,54,48,0.5) !important;
}

/* Kickers / eyebrow labels — sitewide */
.sz-eyebrow { font-weight: 600; }
.sz-booking-card__label { font-size: 0.8rem; font-weight: 600; }
.sz-kicker2 { font-size: 13px; font-weight: 400; }

/* Ma band — label + attribution */
.sz-principle .sz-eyebrow { color: rgba(244,241,238,0.85) !important; }
.sz-principle__label { font-weight: 400 !important; }

/* Journal — category labels, Read more links, italic header */
.sz-journal-card .wp-block-post-terms { font-size: 0.8rem; font-weight: 400; }
.sz-journal-card .wp-block-post-excerpt__more-link {
  font-size: 0.8rem;
  font-weight: 400;
  border-bottom-color: rgba(59,54,48,0.55);
}
.sz-journal-section__header .wp-block-heading { font-weight: 400 !important; }

/* Footer — newsletter labels */
.sz-ftr__jp { font-size: 13px; color: rgba(232,227,220,0.85); }
.sz-ftr__sub { font-size: 15px; color: rgba(232,227,220,0.82); }

/* JP/EN kicker heads — settled weight (12 Jun: one step back from 700) */
.sz-booking-card__label { font-weight: 600; font-size: 0.875rem !important; letter-spacing: 0.18em; }
.sz-eyebrow { font-weight: 600; }
.sz-kicker2 { font-weight: 600; font-size: 14px; }

/* Bath feature — mobile stack fix v2. The image lives INSIDE __inner (grid),
   not as a direct child — descendant selectors this time, and they out-rank
   the old Section-12 mobile rules by coming later in the file. */
@media (max-width: 1125px) {
  .sz-bath-feature { flex-direction: column !important; }
  .sz-bath-feature .sz-bath-feature__inner { grid-template-columns: 1fr !important; }
  .sz-bath-feature .sz-bath-feature__image,
  .sz-bath-feature .sz-bath-feature__content {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sz-bath-feature .sz-bath-feature__image {
    display: block !important;
    position: relative;
    min-height: 320px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* Mobile header — burger + BOOK right-justified */
@media (max-width: 980px) {
  .sz-hdr__tools { margin-left: auto; }
}

/* Page-content headings — design scale (H2 clamp 28–44, H3 22–28).
   Inline-styled homepage headings are immune (inline always wins). */
.wp-block-post-content h2.wp-block-heading {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: -0.01em;
  line-height: 1.06;
}
.wp-block-post-content h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk);
  font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
}

/* Bath feature copy — proper padding both modes (old rules targeted the wrong
   DOM level and a legacy reset zeroed it; this descendant rule wins by order) */
.sz-bath-feature .sz-bath-feature__content {
  padding: 70px 56px !important;
}
@media (max-width: 1125px) {
  .sz-bath-feature .sz-bath-feature__content {
    padding: 40px 24px !important;
  }
}

/* Mobile — breathing room at the sides */
@media (max-width: 768px) {
  :root { --sz-gutter: 24px; }
  .sz-booking-pathways-section { padding-left: 24px !important; padding-right: 24px !important; }
  .sz-journal-section { padding-left: 24px !important; padding-right: 24px !important; }
  .sz-section { padding-left: 24px; padding-right: 24px; }
  .sz-principle { padding-left: 24px !important; padding-right: 24px !important; }
  .sz-bath-feature > .sz-bath-feature__content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .sz-ftr__inner { padding-left: 24px; padding-right: 24px; }
}

/* ==========================================================================
   33. EXACT TOKEN RECONCILIATION — from Claude Design handoff
   Real px values lifted from home.jsx + tokens.css. Supersedes the eyeballed
   approximations in §31/§32. Prototype ink-soft #6b645b = preset contrast-2;
   prototype --cloud #e9e5dd = preset base. Spacing: s3 24 · s4 40 · s5 64 · s6 96 · s7 140.
   ========================================================================== */

/* —— HERO H1 — .u-display: grotesk, clamp(56–116). 300 to match Stay/Rooms heroes —— */
.sz-hero h1, .sz-herocopy h1, .sz-hero .wp-block-heading {
  font-weight: 300 !important;
  font-size: clamp(56px, 8.5vw, 116px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.02 !important;
}

/* —— THREE TILES —— */
/* Image = 4:5 PORTRAIT (documentary), not 4:3 */
.sz-booking-card__image { aspect-ratio: 4 / 5 !important; }
.sz-booking-card__image img { aspect-ratio: 4 / 5 !important; height: 100% !important; }
/* JP label — .u-jp 12px, accent, tracked; Latin uppercased (宿泊 — STAY) */
.sz-booking-card__label {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
/* Title — 28px grotesk 500 (was 36/400) */
.sz-booking-card__title {
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
}
/* Body — 15.5px Spectral, ink-soft */
.sz-booking-card__desc {
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: #6b645b !important;
}
/* Primary button — .u-btn: 12px/600/0.12em, 14×22, radius 3 */
.sz-booking-card .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.sz-booking-card .wp-block-button:not(.is-style-outline) .wp-element-button {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  padding: 14px 22px !important;
  border-radius: 3px !important;
}
/* Secondary — .u-link override: 13px, underlined (offset 5), sentence case */
.sz-booking-card .wp-block-button.is-style-outline .wp-block-button__link,
.sz-booking-card .wp-block-button.is-style-outline .wp-element-button {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
  border: 0 !important;
  padding: 0 !important;
}

/* —— JOURNAL: section frame — page-bg (cloud=base #e9e5dd), 140 top, hairline lead-in —— */
.sz-journal-section.has-background,
.sz-journal-section {
  background-color: #e9e5dd !important;
  padding-top: 140px !important;
  border-top: 1px solid var(--wp--preset--color--line) !important;
}
.sz-journal-section .sz-container { max-width: 1080px !important; }

/* —— JOURNAL: header — 34px Spectral italic 400; subtitle 17px ink-soft —— */
.sz-journal-section__header { gap: 14px !important; margin-bottom: 0 !important; }
.sz-journal-section__header .wp-block-heading {
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
}
.sz-journal-section__header p:not(.is-style-shizuka-link) {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #6b645b !important;
  max-width: 440px !important;
}
/* "All journal entries →" — .u-link: 14px grotesk 500, 1.5px underline */
.sz-journal-section__header .wp-block-button__link,
.sz-journal-section__header .wp-element-button {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--wp--preset--color--timber) !important;
  border-radius: 0 !important;
  padding: 0 0 3px !important;
  background: transparent !important;
  color: var(--wp--preset--color--timber) !important;
}

/* —— JOURNAL: featured — true 1fr/1fr, 64 gap, 96 above, 3:2 image —— */
.sz-journal-section .sz-journal-card--featured {
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  max-width: none !important;
  margin: 96px auto 0 !important;
  align-items: center !important;
}
.sz-journal-section .sz-journal-card--featured .wp-block-post-featured-image,
.sz-journal-section .sz-journal-card--featured .wp-block-post-featured-image img {
  aspect-ratio: 3 / 2 !important;
}
/* Featured eyebrow (terms) — 11px/600/0.22em ink-soft */
.sz-journal-section .sz-journal-card--featured .wp-block-post-terms,
.sz-journal-section .sz-journal-card--featured .wp-block-post-terms a {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6b645b !important;
}
/* Featured title — 30px grotesk 500 */
.sz-journal-section .sz-journal-card--featured .wp-block-post-title,
.sz-journal-section .sz-journal-card--featured .wp-block-post-title a {
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
}
/* Featured excerpt — 17px Spectral ink-soft */
.sz-journal-section .sz-journal-card--featured .wp-block-post-excerpt {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #6b645b !important;
}
/* Featured read-more — .u-link 14px grotesk 500, 1.5px underline */
.sz-journal-section .sz-journal-card--featured .wp-block-post-excerpt__more-link {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--wp--preset--color--timber) !important;
  border-bottom: 1.5px solid var(--wp--preset--color--timber) !important;
  padding-bottom: 3px !important;
}

/* —— JOURNAL: supporting 3-up (thumbnails per Michael) — prototype type tokens —— */
.sz-journal-grid { margin-top: 140px !important; }
.sz-journal-grid .wp-block-post-template.is-layout-grid {
  column-gap: 40px !important;
  row-gap: 40px !important;
}
.sz-journal-grid .sz-journal-card .wp-block-post-terms {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6b645b !important;
}
.sz-journal-grid .sz-journal-card .wp-block-post-title,
.sz-journal-grid .sz-journal-card .wp-block-post-title a {
  font-size: 21px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}
.sz-journal-grid .sz-journal-card .wp-block-post-excerpt__more-link {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-bottom: 1.5px solid var(--wp--preset--color--timber) !important;
  color: var(--wp--preset--color--timber) !important;
}

/* —— BATH FEATURE heading — grotesk 500, clamp(30–44) —— */
.sz-bath-feature h2, .sz-bath-feature__content h2 {
  font-size: clamp(30px, 3.6vw, 44px) !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   34. REVIEW TWEAKS — Michael, 16 Jun (weights, rollover, button lockup)
   ========================================================================== */

/* Bath: lighter headline + lighter lead paragraph */
.sz-bath-feature h2, .sz-bath-feature__content h2 { font-weight: 400 !important; }
.sz-bath-feature__content p { font-weight: 300 !important; }

/* Tile titles — lighter */
.sz-booking-card__title { font-weight: 400 !important; }

/* Journal title rollover — seasonal accent (terracotta), matching the eyebrows
   (was a hardcoded crimson) */
.sz-journal-card .wp-block-post-title a:hover { color: var(--sz-season-color) !important; }

/* Tile actions — one horizontal lock-up, bottom-anchored across all three tiles.
   margin-top:auto pins the row to the card foot so they align on a common line;
   nowrap keeps primary + "→" link side by side. (Labels must be short enough to
   fit one line — use the prototype's short labels, e.g. "Explore Bathing".) */
.sz-booking-card .wp-block-buttons {
  margin-top: auto !important;
  flex-wrap: wrap !important;        /* degrade cleanly if a label is long */
  align-items: center;
  gap: 14px 16px !important;
}
/* never let a label break to two lines (no squished tall buttons) — with short
   prototype labels this keeps primary + "→" link on one locked row */
.sz-booking-card .wp-block-button__link,
.sz-booking-card .wp-element-button { white-space: nowrap !important; }

/* Journal featured title — drop weight to match the lighter headings */
.sz-journal-section .sz-journal-card--featured .wp-block-post-title,
.sz-journal-section .sz-journal-card--featured .wp-block-post-title a {
  font-weight: 400 !important;
}

/* ==========================================================================
   35. STAY / ROOMS RECONCILIATION — exact tokens from stay.jsx + rooms.jsx
   accent = --sz-season-color (matches homepage terracotta eyebrows);
   ink-soft #6b645b. Sizes are the handoff's real px.
   ========================================================================== */

/* —— SUB-NAV (shared) —— */
.sz-subnav__label {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  color: #6b645b !important;
}
.sz-subnav__inner a {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: #6b645b !important;
}
.sz-subnav__inner a:hover { color: var(--sz-season-color) !important; }

/* —— SECTION EYEBROWS (JP+latin, accent, 12px) —— */
.sz-kicker2 {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  color: var(--sz-season-color) !important;
}
/* small label eyebrows (package / card / stat) — 11px / 600 / 0.22em */
.sz-pkg-eyebrow, .sz-card-eyebrow {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--sz-season-color) !important;
}

/* —— STAY: route cards ("Three ways in") —— */
.sz-route { border-top: 2px solid var(--wp--preset--color--timber) !important; padding-top: 20px !important; }
.sz-route .sz-stat__glyph { font-size: 12px !important; letter-spacing: 0.18em !important; color: var(--sz-season-color) !important; }
.sz-route h3 { font-size: 23px !important; }
.sz-route p { font-size: 15px !important; }
.sz-route .is-style-shizuka-link a { font-size: 13px !important; }

/* —— STAY: experience rail (dark) —— */
.sz-dark-section h2 { font-size: clamp(28px, 3.4vw, 42px) !important; }

/* —— STAY: packages preview —— */
.sz-package-card h3 { font-size: 22px !important; }
.sz-package-card p  { font-size: 14.5px !important; }
.sz-pkg-row { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.sz-pkg-from {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.22em !important;
  text-transform: uppercase !important; color: #6b645b !important;
}
/* "Book" / "Check availability" — solid .u-btn */
.sz-pkg-book {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.12em !important;
  text-transform: uppercase !important; text-decoration: none !important;
  background: var(--wp--preset--color--timber) !important; color: var(--wp--preset--color--cloud) !important;
  border: 1px solid var(--wp--preset--color--timber) !important; border-radius: 3px !important;
  padding: 12px 20px !important;
  transition: background var(--sz-transition-fast), color var(--sz-transition-fast);
}
.sz-pkg-book:hover { background: var(--sz-season-color) !important; border-color: var(--sz-season-color) !important; }

/* On dark sections the solid timber button disappears (timber-on-timber, only
   the label showing) and the CTA relied on its orange hover to be seen.
   Reverse it: CLOUD fill at rest — the section's one bright element — with
   the season colour kept as the hover moment. */
.sz-dark-section .sz-pkg-book {
  background: var(--wp--preset--color--cloud) !important;
  border-color: var(--wp--preset--color--cloud) !important;
  color: var(--wp--preset--color--timber) !important;
}
.sz-dark-section .sz-pkg-book:hover {
  background: var(--sz-season-color) !important;
  border-color: var(--sz-season-color) !important;
  color: var(--wp--preset--color--cloud) !important;
}

/* ==========================================================================
   §41 ACCENT SIZE DIAL — site-wide (2 Jul)
   Body copy is 17px and headings are generous, but the arrow CTAs were
   running at 12.5 / 13 / 13.5px depending on context — proportionally
   undersized at exactly the moments the page asks someone to act, and
   thin tap targets on touch. One size everywhere: 15px.
   (Standalone kanji markers were 12-13px → 19px at their base rules above;
   paired kickers 12 → 13px.)
   ========================================================================== */
.is-style-shizuka-link a,
.sz-link-light a,
a.sz-ready-link,
.sz-route .is-style-shizuka-link a,
.sz-cross .is-style-shizuka-link a {
	font-size: 15px !important;
}

/* Card bottom breathing room. The card itself is padding:0 BY DESIGN (its
   image bleeds flush to the edges — the L3623 rule), which is why setting
   card padding never worked: space must come from the last child instead. */
.sz-package-card > :last-child { margin-bottom: 50px !important; }

/* ==========================================================================
   §42 ROOMS REFINEMENTS (Kimika, 4 Jul)
   ========================================================================== */
/* Check-in/check-out stats: three stacked rows → two.
   Row 1 = the kanji mark; row 2 = label + time side by side on one line. */
.sz-stat { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 20px; }
.sz-stat > * { margin: 0 !important; }
.sz-stat .sz-stat__glyph { flex-basis: 100%; margin-bottom: 10px !important; }

/* Cancellation table: six boxes → three. Removing the mid-row divider lets
   each policy line read as ONE continuous band (label flows into its text). */
.shizuka-policy-table td:first-child { border-right: 0 !important; }

/* Cancellation header (Kimika): the "PLEASE READ BEFORE BOOKING" eyebrow
   stacks UNDER the kicker instead of sharing its line — also fixes the §39
   grid-margin double-applying to two inline-blocks on one line, which was
   throwing the eyebrow to the far right. */
.wp-block-post-content .has-base-2-background-color:has(.shizuka-policy-table) > p.is-style-shizuka-eyebrow {
	display: block !important;
	margin: 8px 0 0 !important;
}
/* …and the "Full terms & conditions →" link sits at the RIGHT edge of the
   policy table, echoing the Accessibility / Ready-to-book right-link rhythm. */
.wp-block-post-content .has-base-2-background-color:has(.shizuka-policy-table) .is-style-shizuka-link {
	text-align: right;
}

/* ==========================================================================
   §43 FOOTER SEAM — pages that end on a dark section were merging seamlessly
   into the dark footer (same timber), reading as one endless run (flagged on
   Private Events; also Restaurant, Retreats, Sustainability). Give the
   footer its OWN plane: a hairline seam + a half-step darker ground, so
   every page ends with a visible landing — on light-ending pages the seam
   reads as a quiet keyline, nothing more.
   ========================================================================== */
.sz-ftr {
	border-top: 1px solid rgba(232, 227, 220, 0.15);
	background: #322e29; /* half-step deeper than section timber #3b3630 */
}

/* ==========================================================================
   §45 BOOKING SECTIONS — two-column (Catherine, 27 Jul).
   The #book (Bathing) and #reserve (Restaurant) sections ran intro copy at
   full viewport width with the widget stranded beneath. Now: copy in a
   readable LEFT column, booking widget beside it on the RIGHT — intent next
   to action. Targets any section containing .sz-booking-embed. Stacks back
   to single column below 1000px (current mobile behaviour unchanged).
   ========================================================================== */
@media (min-width: 1000px) {
	.wp-block-post-content > .wp-block-group.is-layout-constrained:has(> .sz-booking-embed) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
		column-gap: 72px;
		align-items: start;
		/* full-bleed background stays; CONTENT constrained to the 1280 grid */
		padding-inline: max(var(--wp--preset--spacing--40), calc((100% - 1280px) / 2)) !important;
	}
	.wp-block-post-content > .wp-block-group.is-layout-constrained:has(> .sz-booking-embed) > * {
		grid-column: 1;
	}
	.wp-block-post-content > .wp-block-group.is-layout-constrained:has(> .sz-booking-embed) > .sz-booking-embed {
		grid-column: 2;
		grid-row: 1 / span 14; /* rides alongside however many text blocks exist */
		width: 100%;
		max-width: 620px;
		margin: 0 !important;
	}
	/* LIGHT booking section (Bathing) tidy: widget tucks down to the heading
	   line instead of floating at kicker height. Dark (Restaurant) untouched. */
	.wp-block-post-content > .wp-block-group.is-layout-constrained:not(.sz-dark-section):has(> .sz-booking-embed) > .sz-booking-embed {
		margin-top: 52px !important;
	}
}

/* SpaConnect opens as a short form inside a 600px frame — trim the initial
   white void; its own inner scroll takes over once treatments/times expand. */
.sz-booking-embed iframe[src*="spaconnect"] {
	height: 500px;
	min-height: 500px;
}
/* ==========================================================================
   §46 FAQ PAGE (id 1277) + content-H1 typography
   The FAQ is the first page whose H1 lives in CONTENT rather than the ACF
   hero — global styles left it at body size (17px!). Give content H1s the
   display treatment (safe: no other page has one; future pages inherit).
   Plus: tighten the intro→first-section seam (two stacked 96px paddings
   read as a void around a small intro) and set the question rhythm.
   ========================================================================== */
.wp-block-post-content h1.wp-block-heading {
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: clamp(38px, 4.2vw, 54px);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.08;
}
.page-id-1277 .entry-content > .wp-block-group:first-child { padding-bottom: 24px !important; }
.page-id-1277 .entry-content > .wp-block-group:nth-child(2) { padding-top: 24px !important; }
/* questions: air above each, snug to their answer */
.page-id-1277 .entry-content h3.wp-block-heading { font-size: 21px; margin-top: 44px !important; }
.page-id-1277 .entry-content h3.wp-block-heading:first-child { margin-top: 0 !important; }

/* Mobile: SpaConnect's inner page is fixed-width (doesn't reflow) and was
   clipping its right edge. Give it a real 540px canvas inside a swipeable
   card — everything reachable with a sideways swipe. */
@media (max-width: 999px) {
	.sz-booking-embed { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.sz-booking-embed iframe[src*="spaconnect"] { min-width: 540px; height: 560px; min-height: 560px; }
	/* Now Book It's inner layout needs ~380px — was clipping "Summary"/"NEXT"
	   at phone widths; give it its width inside the same swipe track */
	.sz-booking-embed iframe[src*="nowbookit"] { min-width: 390px; }
}

/* ==========================================================================
   §44 EXPERIENCE "OUR STORY" — editorial reset (Michael, 4 Jul).
   Catherine's longer rewrite outgrew the side-by-side layout. New shape,
   done purely in CSS over the existing markup (her words untouched):
     1. landscape image as a full-width banner on top
     2. kicker + heading spanning full width
     3. the copy flowing in TWO editorial columns beneath
   Scoped to the Experience page via :has(); older browsers keep the plain
   stacked layout (still readable, nothing breaks).
   ========================================================================== */
/* the section's columns row stacks; the image column jumps to the TOP */
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 48px;
}
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column {
	flex-basis: auto !important;
	width: 100% !important;
	align-self: stretch !important;
}
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column:has(> figure.wp-block-image:only-child) {
	order: -1; /* image banner first, regardless of markup order */
}
/* both text columns start flush at the same height — the theme's block-gap
   margin was pushing only the FIRST column down; normalise to bottom margins */
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column:has(> h2) > p {
	margin-top: 0 !important;
	margin-bottom: 24px !important;
}
/* the banner: wide cinematic crop, full section width */
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}
/* the text column becomes a two-column editorial run… */
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column:has(> h2) {
	column-count: 2;
	column-gap: 64px;
}
/* …with the kicker + heading spanning both columns */
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column:has(> h2) > .sz-kicker2,
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column:has(> h2) > h2 {
	column-span: all;
}
.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column:has(> h2) > h2 {
	margin-bottom: 32px;
}
/* single column again on small screens */
@media (max-width: 781px) {
	.page-id-2523 .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column:has(> h2) {
		column-count: 1;
	}
}

/* —— STAY: cross strip ("While you stay") —— */
.sz-cross { border-top: 1px solid var(--wp--preset--color--line) !important; padding-top: 16px !important; }
.sz-cross h4 { font-size: 17px !important; }
.sz-cross p  { font-size: 14px !important; }
.sz-cross .is-style-shizuka-link a { font-size: 12.5px !important; }

/* —— ROOMS: check-in / out stats —— */
.sz-stat { border-top: 2px solid var(--wp--preset--color--timber) !important; padding-top: 16px !important; }
.sz-stat .sz-stat__glyph { font-size: 19px !important; letter-spacing: 0.12em !important; color: var(--sz-season-color) !important; }
.sz-stat h4 {                       /* the value, e.g. "from 2:00pm" — u-display 30px */
  font-size: 30px !important; font-weight: 400 !important; letter-spacing: -0.015em !important;
}

/* —— ROOMS: in-every-room inclusions — 2-col, ◆ accent, serif 15 —— */
.sz-inclusions {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--xl);
}
.sz-inclusions li {
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-size: 15px !important;
  border-top: 1px solid var(--wp--preset--color--line);
  padding: 12px 0 12px 22px; position: relative;
}
.sz-inclusions li::before {
  content: "◆"; position: absolute; left: 0; top: 12px;
  color: var(--sz-season-color); font-size: 11px;
}

/* —— ROOMS: two ways to bathe (dark cards) —— */
.sz-dark-card h3 { font-size: 22px !important; }
.sz-dark-card p  { font-size: 15px !important; }

/* —— ROOMS: ready-to-book CTA lock-up —— */
.sz-ready-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.sz-ready-link {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.02em !important;
  text-transform: none !important; text-decoration: underline !important; text-underline-offset: 5px !important;
  color: var(--wp--preset--color--timber) !important;
}
.sz-ready-link:hover { color: var(--sz-season-color) !important; }

/* ==========================================================================
   36. STAY/ROOMS — Catherine structural round (legibility, cancellation, two-ways)
   ========================================================================== */

/* —— Hero legibility (Catherine: heading illegible) — deepen scrim, weight bottom-left —— */
.sz-page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(28,25,21,0.80) 0%, rgba(28,25,21,0.38) 52%, rgba(28,25,21,0.10) 100%),
    linear-gradient(180deg, rgba(28,25,21,0.45) 0%, rgba(28,25,21,0.28) 42%, rgba(28,25,21,0.92) 100%) !important;
}

/* —— Sub-nav active state (is-active in markup) —— */
.sz-subnav__inner a.is-active {
  color: var(--wp--preset--color--timber) !important;
  font-weight: 600 !important;
  border-bottom: 1.5px solid var(--sz-season-color) !important;
  padding-bottom: 4px;
}

/* —— Cancellation table — clear row pairing (Catherine: reads down L then R) —— */
.shizuka-policy-table { width: 100%; margin-left: 0; margin-right: 0; }
.shizuka-policy-table table { width: 100%; border-collapse: collapse; border: 1px solid var(--wp--preset--color--line); }
.shizuka-policy-table tr { border-top: 1px solid var(--wp--preset--color--line); }
.shizuka-policy-table tr:first-child { border-top: 0; }
/* kill the zebra stripes — they fight the row pairing */
.shizuka-policy-table.is-style-stripes tbody tr:nth-child(odd) td,
.shizuka-policy-table tbody tr td { background-color: transparent !important; }
.shizuka-policy-table td {
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  padding: 16px 22px !important;
  vertical-align: top;
  width: 50%;
  border: 0 !important;
}
/* left = the condition (ink), right = the outcome (ink-soft). Mid-row divider
   removed 5 Aug (Kimika, delegated call) — each policy row reads as one
   continuous band; rows stay separated by the tr hairlines above. */
.shizuka-policy-table td:first-child {
  border-right: 0 !important;
  color: var(--wp--preset--color--timber) !important;
}
.shizuka-policy-table td:last-child { color: #6b645b !important; }

/* —— Two ways to bathe — badge each card's label so image↔caption is unmistakable —— */
.sz-dark-card .sz-card-eyebrow {
  display: inline-block;
  background: rgba(212,131,94,0.20);
  color: var(--sz-season-color) !important;
  padding: 6px 12px;
  border-radius: 2px;
  margin-bottom: 4px;
}

/* ==========================================================================
   37. MULTI-PAGE BUILDOUT FIXES — flagged by the build verify pass (17 Jun)
   ========================================================================== */

/* Secondary links inside dark bands were timber-on-timber (invisible). Lift to
   on-dark; terracotta on hover. Covers sz-ready-link + editorial links on dark
   (Restaurant, Bathing & Wellness, Packages, Experience). */
.sz-dark-section .sz-ready-link,
.sz-dark-section .is-style-shizuka-link a,
.sz-dark-section .sz-pkg-from {
  color: var(--sz-on-dark, #e9e5dd) !important;
}
.sz-dark-section .sz-ready-link:hover,
.sz-dark-section .is-style-shizuka-link a:hover {
  color: var(--sz-season-color) !important;
}

/* ==========================================================================
   38. CONTACT — GRAVITY FORMS + MAP (design pass, 18 Jun)
   Replaces the directional placeholder form/map. Gravity Forms output styled
   to the underline-minimal look from the approved preview; serif inputs,
   grotesk eyebrow labels, timber Send button (matches .sz-pkg-book), terracotta
   focus. Map = live embed iframe. Accordions (.sz-direction-item) already
   styled in §ROOMS; cards (.sz-route) already styled — untouched here.
   ========================================================================== */

/* —— Enquiry form (Gravity Forms) —— */
.sz-enquiry { max-width: 880px; } /* forms read as a column, not a 1280px sprawl */
.sz-enquiry .gform_wrapper,
.sz-enquiry .gform-body { margin: 0; }
.sz-enquiry .gform_wrapper .gform_fields {
  display: flex; flex-direction: column; gap: 22px;
}
.sz-enquiry .gform_wrapper .gfield { margin: 0 !important; padding: 0 !important; }

/* Field labels → eyebrow treatment */
.sz-enquiry .gform_wrapper .gfield_label {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--muted) !important;
  margin: 0 0 6px !important; line-height: 1.4 !important;
}
.sz-enquiry .gform_wrapper .gfield_required { color: var(--sz-season-color) !important; margin-left: 3px; }

/* Inputs / select / textarea → minimal underline, serif body */
.sz-enquiry .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.sz-enquiry .gform_wrapper .gfield select,
.sz-enquiry .gform_wrapper .gfield textarea {
  width: 100% !important; box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important; border-bottom: 1px solid var(--sz-line) !important;
  border-radius: 0 !important;
  padding: 9px 0 !important;
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-size: 16px !important; color: var(--sz-timber) !important;
  box-shadow: none !important; transition: border-color var(--sz-transition-fast, 0.2s ease);
}
.sz-enquiry .gform_wrapper .gfield input:focus,
.sz-enquiry .gform_wrapper .gfield select:focus,
.sz-enquiry .gform_wrapper .gfield textarea:focus {
  outline: none !important; border-bottom-color: var(--sz-season-color) !important;
}
.sz-enquiry .gform_wrapper .gfield textarea { height: 170px !important; min-height: 170px !important; resize: vertical !important; } /* hard height — GF's field-size setting was inflating it to ~800px */
.sz-enquiry .gform_wrapper .gfield ::placeholder { color: var(--sz-line) !important; opacity: 1; }

/* Select → strip native chrome, add a quiet chevron */
.sz-enquiry .gform_wrapper .gfield select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a85d3a' stroke-width='1.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 2px center !important;
  padding-right: 22px !important; cursor: pointer;
}

/* Send button → matches .sz-pkg-book */
.sz-enquiry .gform_wrapper .gform_footer { margin: 26px 0 0 !important; padding: 0 !important; }
.sz-enquiry .gform_wrapper .gform_footer input[type="submit"],
.sz-enquiry .gform_wrapper .gform_footer button {
  display: inline-flex !important; align-items: center !important;
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.12em !important;
  text-transform: uppercase !important; width: auto !important;
  background: var(--wp--preset--color--timber) !important; color: var(--wp--preset--color--cloud) !important;
  border: 1px solid var(--wp--preset--color--timber) !important; border-radius: 3px !important;
  padding: 13px 26px !important; cursor: pointer !important;
  transition: background var(--sz-transition-fast, 0.2s ease), border-color var(--sz-transition-fast, 0.2s ease);
}
.sz-enquiry .gform_wrapper .gform_footer input[type="submit"]:hover,
.sz-enquiry .gform_wrapper .gform_footer button:hover {
  background: var(--sz-season-color) !important; border-color: var(--sz-season-color) !important;
}

/* Validation / confirmation — keep quiet and on-brand */
.sz-enquiry .gform_wrapper .gfield_description.validation_message,
.sz-enquiry .gform_wrapper .gform_validation_errors {
  font-family: var(--wp--preset--font-family--neue-haas-grotesk) !important;
  font-size: 12px !important; color: var(--sz-season-color) !important;
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 0 !important;
}
.sz-enquiry .gform_confirmation_message {
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-size: 16px !important; color: var(--sz-timber) !important; line-height: 1.6;
}

/* Form note under the form */
.sz-form-note {
  font-family: var(--wp--preset--font-family--spectral) !important;
  font-size: 13px !important; color: var(--wp--preset--color--muted) !important;
  margin-top: 16px !important; line-height: 1.6 !important;
}

/* —— Live map embed —— */
.sz-map {
  margin: 18px 0 8px; border: 1px solid var(--sz-line); border-radius: 3px;
  overflow: hidden; line-height: 0;
}
.sz-map iframe {
  display: block; width: 100%; height: 240px; border: 0;
  filter: saturate(0.85) contrast(0.96);
}

/* —— Enquiry form on DARK bands (Private Events #enquiry, Retreats #enquiry) ——
   §38 base form styling is ink-on-cloud; inside .sz-dark-section invert to on-dark
   so labels/inputs/Send stay legible on timber. */
.sz-dark-section .sz-enquiry .gform_wrapper .gfield_label { color: var(--sz-on-dark-soft) !important; }
.sz-dark-section .sz-enquiry .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.sz-dark-section .sz-enquiry .gform_wrapper .gfield select,
.sz-dark-section .sz-enquiry .gform_wrapper .gfield textarea {
  color: var(--sz-on-dark) !important;
  border-bottom-color: rgba(233, 229, 221, 0.32) !important;
}
.sz-dark-section .sz-enquiry .gform_wrapper .gfield input:focus,
.sz-dark-section .sz-enquiry .gform_wrapper .gfield select:focus,
.sz-dark-section .sz-enquiry .gform_wrapper .gfield textarea:focus {
  border-bottom-color: var(--sz-season-color) !important;
}
.sz-dark-section .sz-enquiry .gform_wrapper .gfield ::placeholder { color: var(--sz-on-dark-soft) !important; }
.sz-dark-section .sz-enquiry .gform_wrapper .gfield select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e9e5dd' stroke-width='1.4'/%3E%3C/svg%3E") !important;
}
/* On dark, invert the Send button: cloud fill, timber text */
.sz-dark-section .sz-enquiry .gform_wrapper .gform_footer input[type="submit"],
.sz-dark-section .sz-enquiry .gform_wrapper .gform_footer button {
  background: var(--wp--preset--color--cloud) !important; color: var(--wp--preset--color--timber) !important;
  border-color: var(--wp--preset--color--cloud) !important;
}
.sz-dark-section .sz-enquiry .gform_wrapper .gform_footer input[type="submit"]:hover,
.sz-dark-section .sz-enquiry .gform_wrapper .gform_footer button:hover {
  background: var(--sz-season-color) !important; border-color: var(--sz-season-color) !important; color: var(--sz-on-dark) !important;
}
.sz-dark-section .sz-enquiry .gform_confirmation_message { color: var(--sz-on-dark) !important; }

/* —— SpaConnect booking widget embed (Bathing & Wellness #book) ——
   Day-spa/wellness bookings run through SpaConnect (iframe), NOT RMS (accommodation). */
/* Booking widgets held in a quiet framed card (yohaku around them), centred —
   so the third-party iframe reads as a considered object, not a bolted-on tool. */
.sz-booking-embed {
  max-width: 680px; margin: var(--wp--preset--spacing--50, 40px) auto 0;
  background: #faf8f4; border: 1px solid var(--sz-line); border-radius: 4px;
  padding: 16px;
}
.sz-booking-embed iframe {
  display: block; width: 100%; min-height: 600px; border: 0;
  background: transparent; border-radius: 2px;
}
/* Now Book It (Restaurant #reserve) auto-sizes via its own iframe-resizer — lower the floor. */
.sz-booking-embed--auto iframe { min-height: 480px; }
/* On the dark Restaurant band, the holding card lifts off the timber. */
.sz-dark-section .sz-booking-embed {
  background: #453f39; border-color: rgba(233, 229, 221, 0.16);
}

/* ==========================================================================
   39. NO-HERO PAGES — solid header (Privacy, Terms, FAQ, any hero-less page)
   The header is position:absolute + transparent + light-on-dark to sit over a
   hero. On a page that opens on light content it vanishes and overlaps the
   content. body.sz-no-hero (set in functions.php when there's no ACF hero) drops
   it into normal flow as a solid timber bar; logo + nav are already light.
   ========================================================================== */
body.sz-no-hero .sz-hdr {
  position: relative;
  top: 0;
  background: var(--wp--preset--color--timber);
}
body.sz-no-hero .sz-hdr::before { display: none; }

/* ==========================================================================
   §39 SECTION GRID — one shared left line at every viewport width
   Sections are full-width constrained groups whose children centre at MIXED
   widths (1280 / 880 / 760 / 720 / 660) — centred columns of different
   widths only share a left edge on narrow screens, so alignment drifts
   apart as the window widens (+ the old justify-left bands hugged the
   viewport edge). This pins every section child to the SAME 1280px grid
   line; narrower blocks keep their reading measure, left-aligned on it.
   • For 1280 children the formula equals core's own centring — no change.
   • Page-content markup now also carries the fix (outer 1280 + inner
     narrow group) — this rule makes it live without re-pasting, and
     future-proofs any band that forgets the pattern.
   • Privacy (2600) + Terms (2598) excluded — intentionally centred legal
     columns. Homepage renders from the template (no .entry-content), so
     its centred Principle band is naturally untouched.
   ========================================================================== */
body:not(.page-id-2600):not(.page-id-2598) .entry-content > .wp-block-group.is-layout-constrained > :not(.sz-booking-embed) {
	margin-left: max(0px, calc((100% - 1280px) / 2)) !important;
	margin-right: auto !important;
}

/* ==========================================================================
   §40 PATHWAY TILES — smooth tablet stage
   Was: 3 columns snap to ONE giant column at 1125px, so through 769–1125px
   each card (and its 800px-wide image) stretched past 1000px — upscaled,
   soft, clunky. Now: 2 columns through that band, with the third card as a
   full-width editorial strip (wide shallow crop, so it can't balloon).
   ≤768px keeps the existing stacked mobile layout untouched.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1125px) {
	.sz-booking-pathways { grid-template-columns: 1fr 1fr; }
	.sz-booking-card:last-child { grid-column: 1 / -1; }
	.sz-booking-card:last-child .sz-booking-card__image,
	.sz-booking-card:last-child .sz-booking-card__image img {
		aspect-ratio: 21 / 9 !important;
	}
}

/* Retreats (4958) — 50px inside the Bring-your-own card, between its top
   border and the kicker. Card padding itself is locked to 0 (§10a), so the
   space goes on the first child. Only group-card on the page. */
body.page-id-4958 .wp-block-group.sz-package-card > :first-child {
	padding-top: 50px;
}

/* Every in-page anchor jump clears the ~88px fixed header (12px buffer),
   so sections land with their Japanese eyebrow visible. :where() keeps
   zero specificity — the page-specific 140px offsets (Experience sticky
   subnav) still win. Logged-in admin bar adds 32px. */
:where([id]) {
	scroll-margin-top: 100px;
}
body.admin-bar :where([id]) {
	scroll-margin-top: 132px;
}

/* Accessibility (9026) — the bath section's image column is missing the
   vertical-centre class its four sibling sections carry; centre every
   column inside this page's centred rows so all five sections match. */
body.page-id-9026 .are-vertically-aligned-center > .wp-block-column {
	align-self: center;
}

/* Packages — nights jump-nav (Catherine): three chips under the sub-nav
   that skip straight to each length section. Full-bleed band aligned to
   the 1280 grid; landings clear the header via the global scroll-margin. */
.sz-nights-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 30px max(var(--wp--preset--spacing--40), calc((100% - 1280px) / 2)) 0;
}
.sz-nights-nav a {
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sz-timber);
	text-decoration: none;
	border: 1px solid var(--sz-timber);
	padding: 11px 22px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sz-nights-nav a:hover {
	background-color: var(--sz-timber);
	color: var(--sz-cloud);
}

/* Nights jump-nav label row + deeper landings (Michael 28 Jul):
   the three package sections land ~100px deeper than the global offset —
   header just clears, kicker sits at top. Id selectors outrank :where(). */
.sz-nights-nav .sz-kicker2 {
	flex-basis: 100%;
	margin: 0 0 16px;
}
#one-night,
#two-nights,
#two-three-nights {
	scroll-margin-top: -60px; /* section top rides above the viewport; the
	   96px section padding is mostly consumed, kicker lands ~36px from top */
}
body.admin-bar #one-night,
body.admin-bar #two-nights,
body.admin-bar #two-three-nights {
	scroll-margin-top: -28px; /* same visual landing under the admin bar */
}

/* RMS "More Rates" footnote — sits under every View-package / booking CTA.
   font-size !important outranks the card's 14.5px paragraph rule. */
.sz-pkg-note {
	font-family: var(--wp--preset--font-family--spectral) !important;
	font-size: 12.5px !important;
	font-style: italic;
	line-height: 1.5;
	color: rgba(59, 54, 48, 0.65);
	margin-top: 10px;
}

/* Closing-section variant: the More-Rates note hugs the right-aligned
   Check-availability lock-up instead of floating as a loose paragraph. */
.sz-ready-actions + .sz-pkg-note {
	margin-top: 12px;
	text-align: right;
}

/* Packages (2583) — card footer stacks left: "From $X" with the View-package
   button directly beneath, normal spacing, instead of price-left/button-right.
   Scoped to the Packages page so Stay's curated cards keep their row layout. */
body.page-id-2583 .sz-package-card .sz-pkg-row {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Package cards — bullet markers sit on the same left line as the eyebrow,
   heading, price and button (24px card margin + ~16px marker gutter). */
.sz-package-card > ul.wp-block-list {
	padding-left: 40px;
}

/* Rooms (8934) "Ready to book?" — pin the actions lock-up to the top of the
   row instead of floating at the centre of a variable-height text column;
   it now sits level with the first line at every viewport width and zoom. */
body.page-id-8934 .are-vertically-aligned-center > .wp-block-column:has(.sz-ready-actions) {
	align-self: flex-start;
	margin-top: 78px; /* clears the in-column "Ready to book?" heading so the
	   lock-up sits level with the "Choose your dates…" paragraph */
}

/* Gifts — voucher lock-up left-aligned under the copy (page is
   voucher-only while the product shop waits on checkout), with 50px
   of air above and below the buttons. */
.sz-voucher-embed .sz-ready-actions {
	justify-content: flex-start;
	margin-top: 50px;
	margin-bottom: 50px;
}

/* Homepage pathway tiles — stack the Dining tile's two CTAs (Reserve a
   table / View the Menu) so all three tiles read button-over-link and the
   solid buttons share one baseline. No-op on single-button tiles. */
.sz-booking-card .wp-block-buttons {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* ==========================================================================
   §47 WHOLE-CARD CLICK — cursor affordance (5 Aug)
   theme.js finds cards that already contain a link (package cards, dark
   cards, homepage pathway tiles, journal rows) and makes the full card a
   tap target, adding .sz-card-link. The real <a> inside stays for SEO,
   keyboard and screen readers — this only signals the wider hit area.
   ========================================================================== */
.sz-card-link {
	cursor: pointer;
}

/* ==========================================================================
   §49 TREATMENTS PAGE — text-first cards (10 Aug, wellness sprint)
   Treatment cards reuse .sz-package-card but open with text (no figure),
   so the first child needs the top breathing room a card image usually
   provides. Scoped to the sz-treatment variant only.
   ========================================================================== */
.sz-package-card.sz-treatment > p:first-child {
	padding-top: 40px;
}

/* Treatments page jump-nav landings — same values as the packages page
   (§ above): the section's top padding is mostly consumed so the kicker
   lands ~36px from the top instead of drifting high in the viewport. */
#massage,
#facials,
#reflexology,
#yoga-meditation {
	scroll-margin-top: -60px;
}
body.admin-bar #massage,
body.admin-bar #facials,
body.admin-bar #reflexology,
body.admin-bar #yoga-meditation {
	scroll-margin-top: -28px;
}

/* ==========================================================================
   §50 TREATMENTS BOOKING FORK — ask-once visit chooser (11 Aug)
   The #book section asks "How are you visiting?" once, remembers the answer
   (theme.js + localStorage), and shows only the matching path: day guests
   get the SpaConnect scheduler, staying guests get the RMS routes and never
   see day inventory. Without JS (or before choosing) both panels show
   side by side, so the page degrades safely.
   ========================================================================== */
.sz-visit-chooser {
	display: none;
}
body.sz-visit-choose .sz-visit-chooser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}
.sz-visit-chooser .sz-visit-q {
	margin: 0;
	font-size: 17px;
}
.sz-visit-chooser button {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 12px 22px;
	background: var(--sz-timber);
	color: var(--sz-cloud);
	border: 1.5px solid var(--sz-timber);
	border-radius: 3px;
	transition: background .2s, color .2s;
}
.sz-visit-chooser button:hover {
	background: transparent;
	color: var(--sz-timber);
}
body.sz-visit-choose .sz-book-day,
body.sz-visit-choose .sz-book-stay {
	display: none;
}
body.sz-visit-day .sz-book-stay {
	display: none;
}
body.sz-visit-stay .sz-book-day {
	display: none;
}
body.sz-visit-day .sz-book-day,
body.sz-visit-stay .sz-book-stay {
	flex-basis: 100% !important;
}
body.sz-visit-stay .sz-book-stay {
	max-width: 720px;
}
.sz-book-day .sz-booking-embed {
	max-width: 780px;
}
.sz-visit-status {
	font-size: 13.5px;
	color: #8a8278;
	margin-bottom: 6px;
}
.sz-visit-status a {
	text-decoration: underline;
}

/* §50b — booking gate inside a dark section (bathing #book): light-ink
   variants for the chooser, status line, eyebrows and inline links. */
.sz-dark-section .sz-visit-chooser .sz-visit-q {
	color: var(--sz-on-dark);
}
.sz-dark-section .sz-visit-chooser button {
	background: transparent;
	color: var(--sz-cloud);
	border-color: var(--sz-cloud);
}
.sz-dark-section .sz-visit-chooser button:hover {
	background: var(--sz-cloud);
	color: var(--sz-timber);
}
.sz-dark-section .sz-visit-status {
	color: var(--sz-on-dark-soft);
}
.sz-dark-section .sz-pkg-eyebrow {
	color: var(--sz-on-dark-soft);
}
.sz-dark-section .sz-book-day a,
.sz-dark-section .sz-book-stay a,
.sz-dark-section .sz-visit-status a {
	color: var(--sz-on-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* §50c — solid (dark, light-copy) variants for the bathing page's audience
   switch and the Explore-all-treatments button. Scoped modifiers so the
   standard jump-nav chips and ghost buttons elsewhere stay untouched. */
.sz-nights-nav--solid a {
	background: var(--sz-timber);
	color: var(--sz-cloud);
	border-color: var(--sz-timber);
}
.sz-nights-nav--solid a:hover {
	background: transparent;
	color: var(--sz-timber);
}
.sz-btn-solid .wp-block-button__link {
	background: var(--sz-timber) !important;
	color: var(--sz-cloud) !important;
	border-color: var(--sz-timber) !important;
}
.sz-btn-solid .wp-block-button__link:hover {
	background: transparent !important;
	color: var(--sz-timber) !important;
}

/* ==========================================================================
   §51 MOBILE FIXES — booking-gate layout + button wrap (12 Aug, cutover night)
   Partner change in §2 base reset: scroll-behavior smooth is now scoped to
   desktop pointers (iOS Safari cancels smooth anchor scrolls → dead taps).
   Here: the visit chooser stacks full-width on small screens, and Book
   buttons never wrap mid-word ("BOO K") inside tight price rows.
   ========================================================================== */
.sz-pkg-book {
	white-space: nowrap;
}
@media (max-width: 640px) {
	body.sz-visit-choose .sz-visit-chooser {
		flex-direction: column;
		align-items: stretch;
	}
	.sz-visit-chooser .sz-visit-q {
		margin-bottom: 2px;
	}
	.sz-visit-chooser button {
		width: 100%;
		padding: 14px 22px;
	}
}

/* ==========================================================================
   §52 FOOTER SOCIAL LINKS (4 Sep) — Instagram + Facebook as quiet text
   links under the newsletter signup (same "stay connected" corner).
   Typographic, no icon set — house style. URLs match the schema sameAs.
   ========================================================================== */
.sz-ftr__social {
	margin-top: 14px;
	display: flex;
	gap: 20px;
}
.sz-ftr__social a {
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	opacity: .8;
	transition: opacity .2s;
}
.sz-ftr__social a:hover {
	opacity: 1;
}

/* ==========================================================================
   §53 HOMEPAGE HERO — legibility on bright footage (7 Sep, spring review).
   Season-proof: no per-season classes.
   1) Scrim: the original bottom-weighted gradient (§6) was tuned on dark
      winter footage; spring blossom + white yukata behind cloud type needs
      a left-weighted layer under the copy column. Right side stays bright.
   2) Type: soft shadow lifts the title/subtitle/eyebrow off pale areas.
   Fold: NOT touched here — §6's 100svh−80px already puts the availability
   bar's bottom edge exactly on the fold, and the admin bar does not shift
   the page on this theme. The review page's "bar below the fold" was the
   sz-no-hero body class (solid in-flow header) — fixed in functions.php.
   ========================================================================== */
.sz-hero.wp-block-cover .wp-block-cover__background {
	background:
		linear-gradient(to right, rgba(59, 54, 48, 0.50) 0%, rgba(59, 54, 48, 0.22) 45%, rgba(59, 54, 48, 0) 72%),
		linear-gradient(to bottom, rgba(59, 54, 48, 0.15) 0%, rgba(59, 54, 48, 0) 35%, rgba(59, 54, 48, 0.65) 100%) !important;
}
.sz-hero__title,
.sz-hero .sz-hero__subtitle,
.sz-hero .sz-eyebrow {
	text-shadow: 0 1px 2px rgba(59, 54, 48, 0.35), 0 8px 32px rgba(59, 54, 48, 0.45);
}

/* §53b — HEADER SCRIM. The 2026 header (.sz-hdr) sits absolutely over the
   hero with light type and had NO scrim of its own (the no-hero rule at
   §… that hides .sz-hdr::before was hiding nothing). Dark winter footage
   masked that; pale spring sky/blossom behind the nav did not. A soft
   timber gradient fades out over ~220px beneath the header; nav type gets
   a light shadow. Season-proof; no-hero pages still hide it. */
.sz-hdr::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 220px;
	background: linear-gradient(to bottom, rgba(59, 54, 48, 0.62) 0%, rgba(59, 54, 48, 0.34) 45%, rgba(59, 54, 48, 0) 100%);
	pointer-events: none;
	z-index: -1;
}
.sz-hdr__nav a,
.sz-hdr__book-btn,
.sz-hdr__search input,
.sz-hdr__search-glyph {
	text-shadow: 0 1px 2px rgba(59, 54, 48, 0.45);
}