/* SHARED UI — DESKTOP / ALL SCREEN SIZES
 * Loaded last on every page so fonts, button corners and focus treatments
 * cannot drift between page-specific stylesheets. Layout remains page-owned.
 */
:root {
  /* Soft eggshell surfaces, shared by the splash, header, and reading sections.
   * The welcome leaf section has its own approved lighter background. */
  --cream: #F4EFE4;
  --card: #F9F4EA;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', Arial, sans-serif;
  --button-radius: 12px;
  /* Slightly deeper versions of the brand colours improve small-text contrast. */
  --muted: #59634f;
  --rust: #944b23;
}

/* One consistent type pairing: serif headings and reading text, sans-serif controls.
 * Small uppercase section labels deliberately use the sans-serif face.
 * Italic editorial quotes and the footer tagline retain the serif treatment.
 */
body { font-family: var(--sans); }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); }
.stitle, .links a, .mmenu a, .flinks a { font-family: var(--sans); }
button, input, select, textarea, .btn { font-family: var(--sans); }

/* All button-shaped links and native buttons share soft, rounded corners.
 * The mobile consultation link uses .cta rather than .btn in the markup.
 */
.btn, button, .mmenu .cta, input[type='submit'], input[type='button'] {
  border-radius: var(--button-radius);
  min-height: 44px;
}
button { min-width: 44px; }

/* Use the same legible outlined header button on every page. */
nav .links .btn {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
}
nav .links .btn:hover,
nav .links .btn:focus-visible {
  color: var(--cream);
  background: var(--ink);
}

/* Focus is visible for keyboard users on both cream and dark backgrounds. */
:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 4px;
}

/* Improve the small label's contrast on the sage About panel. */
.col-c .namepanel .k { color: #46513d; }

/* Light text on filled buttons needs a darker olive than decorative artwork. */
.btn:hover { background-color: #4e5b3d; color: var(--cream); }

/* Decorative foliage is static so there is no continuous motion to pause. */
.hero .edge, .sprig { animation: none; }

/* Solid header surface: artwork must never compete with navigation or branding.
 * Keep the same opaque colour before and after scrolling on every page.
 */
nav#nav, nav#nav.scrolled {
  background: var(--cream);
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}

/* Active navigation must override each page's default link decoration. */
nav .links a[aria-current], .mmenu a[aria-current] {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: auto;
}

/* SUPPORTING TEXT — one readable serif treatment across all pages.
 * Keep large editorial verses, standalone quotes, and signatures separate.
 * The #main scope intentionally wins over older page-specific text styles.
 */
#main p:not(.verse):not(.quote):not(.sig),
#main li,
#main .contact .s,
#main .tier .dur,
#main .fees .note,
#main .wwith {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
}

/* Introductory subheadings already ran larger than body copy; keep that scale. */
#main .shead p { font-size: 24px; }

/* Footer contact details and acknowledgement copy remain secondary but larger. */
footer .fine, footer .landack p {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
}

/* One interaction treatment for every booking action, including mobile.
 * Header/content buttons keep their outlined resting style; the mobile menu
 * keeps its filled style. Hover, focus and press share a colour and timing.
 */
:is(#nav, #mmenu, #main) a.booking-button {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
:is(#nav, #mmenu, #main) a.booking-button:hover,
:is(#nav, #mmenu, #main) a.booking-button:focus-visible,
:is(#nav, #mmenu, #main) a.booking-button:active {
  background: #4e5b3d;
  color: var(--cream);
  border-color: #4e5b3d;
}

/* COMPACT FOOTER — acknowledgement first, then copyright and navigation.
 * One 18px size keeps all footer text consistent; the serif/sans pairing
 * follows the rest of the website. The logo and its tagline remain hidden.
 */
footer { padding: 36px 36px 28px; text-align: left; }
footer .footer-inner { max-width: 1200px; margin: 0 auto; }
footer .footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}
footer .footer-left, footer .footer-right { min-width: 0; }
footer .fbrand, footer .tag { display: none; }
footer .fine, footer .footer-copyright, footer .flinks a,
footer .landack-k, footer .landack p {
  font-size: 18px;
  line-height: 1.5;
}
footer .fine { padding: 0; letter-spacing: normal; }
footer .flinks { justify-content: flex-end; gap: 8px 32px; margin: 0; }
footer .flinks a { letter-spacing: .08em; }
footer .landack {
  max-width: none;
  width: 100%;
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
footer .landack-k { margin-bottom: 10px; padding-left: 0; letter-spacing: .08em; }
footer .landack p + p { margin-top: 8px; }

/* Secondary-page contacts sit above the copyright and navigation row. */
footer .footer-contact { margin: 0 0 18px; }
footer .footer-contact-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px 24px;
  margin: 0;
}
footer .footer-contact-items a { text-align: left; }

/* SECTION RHYTHM — one spacing scale for reading sections on every page.
 * The splash retains its full-screen layout. Image bands and split panels
 * use the section's padding instead of adding a second layer inside it.
 */
:root { --section-space: 96px; }
#main:not(:has(> .hero)) { padding-top: var(--header-height, 100px); }
#main > section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  margin-top: 0;
  margin-bottom: 0;
  border-top: 0;
  border-bottom: 0;
}
#main > .band { min-height: 0; }
#main > .band > .inner,
#main > .cta.split > .grid { padding-top: 0; padding-bottom: 0; }
/* Keep dividers only at the fixed menu and below the acknowledgement. */
footer { border-top: 0; }
#main .sdash, #main hr { display: none; }
/* Footer links use the same scale and tracking as the desktop navigation. */
footer .flinks a { font-size: 13px; letter-spacing: .3em; }

/* The upper footer rule spans the viewport; the lower rule follows the text. */
footer { border-top: 1px solid var(--line); }
footer .landack { border-top: 0; padding-top: 0; }

/* Intrinsic dimensions reserve image space without stretching responsive artwork. */
img { height: auto; }