/*
 * The Station Hotel, Carnoustie
 * ---------------------------------------------------------------------------
 * A thin custom layer on top of Bootstrap 5.
 *
 * Bootstrap supplies grid, navbar and utilities only. Everything that makes the site
 * look like a bespoke hotel site rather than a Bootstrap template lives here:
 * typography, colour, spacing and the section rhythm.
 *
 * Design tokens are defined once, in :root. The visual direction will be retuned once
 * the new photography arrives (PROJECT_BRIEF.md section 4) -- that should be a change to
 * these variables, not to the templates.
 *
 * Palette intent: warm, traditional, Scottish, welcoming. Not dark, not corporate, not
 * pretending to be five-star.
 */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --sh-ink: #23201c;            /* body text: warm near-black, never pure #000 */
  --sh-ink-soft: #5c564e;
  --sh-paper: #fbf9f5;          /* page background: warm off-white */
  --sh-paper-alt: #f2ece2;      /* alternate section band */
  --sh-line: #e0d8ca;

  --sh-heather: #3d4a5c;        /* deep muted blue: headings, header */
  --sh-heather-dark: #2c3542;
  --sh-brass: #a8763e;          /* warm accent: links, CTAs */
  --sh-brass-dark: #8a5f30;
  --sh-moss: #55684f;

  --sh-white: #ffffff;

  /* --- Type -------------------------------------------------------------- */
  /* Placeholder stacks. Phase 2 self-hosts a proper serif/sans pairing
     (TODO.md Phase 2) -- swap the two variables, not the rules below. */
  --sh-font-heading: Georgia, "Times New Roman", serif;
  --sh-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sh-fs-hero: clamp(2rem, 5vw, 3.4rem);
  --sh-fs-h1: clamp(1.9rem, 4vw, 2.75rem);
  --sh-fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --sh-fs-h3: 1.25rem;
  --sh-fs-body: 1.0625rem;
  --sh-fs-small: 0.9rem;

  --sh-lh-tight: 1.15;
  --sh-lh-body: 1.65;

  /* --- Spacing and shape -------------------------------------------------- */
  --sh-section-y: clamp(3rem, 7vw, 5.5rem);
  --sh-radius: 4px;             /* restrained: heavy rounding reads as a template */
  --sh-shadow: 0 2px 14px rgba(35, 32, 28, 0.08);
  --sh-maxw-text: 68ch;
}

/* --- Base ----------------------------------------------------------------- */

/* An image must never be wider than the box it sits in. Without this the placeholder SVGs
   -- which are 1200 x 800 -- rendered at full size wherever a call site did not happen to
   pass a constraining class, and pushed /about/ and /contact/ into sideways scrolling at
   every width. Real photography would have done exactly the same after the shoot, because
   masters are 2400px. Fixed once here rather than per call site (`DECISIONS.md` D-011:
   every layout must render complete with no uploads). Rules that set an explicit height,
   such as the hero and the logo, are class-based and still win. */
img {
  max-width: 100%;
  height: auto;
}

body {
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-body);
  line-height: var(--sh-lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h5, .h6 {
  font-family: var(--sh-font-heading);
  color: var(--sh-heather);
  line-height: var(--sh-lh-tight);
  font-weight: 600;
}

h1 { font-size: var(--sh-fs-h1); }
h2 { font-size: var(--sh-fs-h2); margin-top: 2rem; }
h3 { font-size: var(--sh-fs-h3); margin-top: 1.5rem; }

p, li { max-width: var(--sh-maxw-text); }

a { color: var(--sh-brass-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sh-brass); }

.lead { font-size: 1.2rem; color: var(--sh-ink-soft); }
.text-muted { color: var(--sh-ink-soft) !important; }

/* Accessibility: a visible skip link and obvious focus rings. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  background: var(--sh-heather);
  color: var(--sh-white);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; color: var(--sh-white); }

:focus-visible {
  outline: 3px solid var(--sh-brass);
  outline-offset: 2px;
}

/* --- Header --------------------------------------------------------------- */

.header-strip {
  background: var(--sh-heather-dark);
  color: var(--sh-white);
  font-size: var(--sh-fs-small);
  padding: 0.4rem 0;
}
.header-strip a { color: var(--sh-white); text-decoration: none; font-weight: 600; }
.header-strip__location { opacity: 0.85; }

.site-nav {
  background: var(--sh-white);
  border-bottom: 1px solid var(--sh-line);
  padding-block: 0.75rem;
}

.navbar-brand { display: flex; flex-direction: column; line-height: 1.1; }
.navbar-brand__name {
  font-family: var(--sh-font-heading);
  font-size: 1.35rem;
  color: var(--sh-heather);
  font-weight: 600;
}
/* Superseded by the logo (D-029): no template renders this any more. Kept rather than
   deleted, but pointed at the accessible brass so that reviving it cannot reintroduce a
   3.18:1 text colour. */
.navbar-brand__place {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sh-brass-dark);
}

.site-nav .nav-link {
  color: var(--sh-ink);
  font-size: 0.98rem;
  padding-inline: 0.85rem;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus { color: var(--sh-brass-dark); }

/* --- Buttons -------------------------------------------------------------- */

/* Book a Room: the most important control on the site, so its label has to be readable.
   White on --sh-brass measures 3.18:1 and AA wants 4.5:1 at this size, so the default is
   the deeper brass the hover state already used, and the hover goes one step deeper again.
   Same hue, slightly richer -- a contrast fix, not a new colour. */
.btn-book {
  background: var(--sh-brass-dark);
  border: 1px solid var(--sh-brass-dark);
  color: var(--sh-white);
  font-weight: 600;
  padding: 0.55rem 1.4rem;
  border-radius: var(--sh-radius);
}
.btn-book:hover, .btn-book:focus {
  background: var(--sh-brass-deep);
  border-color: var(--sh-brass-deep);
  color: var(--sh-white);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--sh-heather);
  color: var(--sh-heather);
  padding: 0.5rem 1.25rem;
  border-radius: var(--sh-radius);
}
.btn-outline:hover, .btn-outline:focus {
  background: var(--sh-heather);
  color: var(--sh-white);
}

/* --- Hero ----------------------------------------------------------------- */

.hero { position: relative; background: var(--sh-heather-dark); }

.hero__image {
  width: 100%;
  height: clamp(320px, 62vh, 620px);
  object-fit: cover;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Gradient rather than a flat wash: keeps the photography readable without
     dulling it, which matters once real images land. */
  background: linear-gradient(90deg, rgba(35, 32, 28, 0.66) 0%, rgba(35, 32, 28, 0.15) 70%);
}
.hero__overlay > .container { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }

.hero__text { flex: 1 1 420px; color: var(--sh-white); }
.hero__title { color: var(--sh-white); font-size: var(--sh-fs-hero); }
.hero__subtitle { color: rgba(255, 255, 255, 0.92); font-size: 1.1rem; max-width: 46ch; }

.hero--room .hero__image, .hero--page .hero__image { height: clamp(240px, 42vh, 420px); }
.hero__overlay--page { background: linear-gradient(0deg, rgba(35, 32, 28, 0.72) 0%, rgba(35, 32, 28, 0.2) 100%); }

/* --- Book a Room CTA ------------------------------------------------------- */
/*
 * The active public booking flow (DECISIONS.md D-017). We do not ask for dates or guest
 * numbers -- every CTA points at `booking:book`, which redirects to Little Hotelier.
 */

.booking-cta {
  background: var(--sh-white);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow);
  padding: 2rem;
  text-align: center;
}
/*
 * One centred column for the band's words and buttons. Every child is centred with auto
 * side margins as well as centred text: the site-wide `p { max-width: 68ch }` makes each
 * paragraph a box narrower than the band, and a box pinned to the left edge (the button
 * row and the telephone line used to be) centres its text around the wrong line.
 */
.booking-cta__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.booking-cta__inner > * { margin-inline: auto; }
.booking-cta__title { margin-top: 0; font-size: var(--sh-fs-h2); }
.booking-cta__text { color: var(--sh-ink-soft); }
.booking-cta__actions { margin-block: 1.5rem 0.75rem; }
.booking-cta__actions .btn { margin: 0.25rem; }
.booking-cta__note { font-size: var(--sh-fs-small); color: var(--sh-ink-soft); margin-block: 0; }

.btn-lg { padding: 0.75rem 2rem; font-size: 1.05rem; }

.hero__actions { margin-top: 1.75rem; }
.hero__actions .btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.hero__actions .btn-hero-secondary { border-color: var(--sh-white); color: var(--sh-white); }
.hero__actions .btn-hero-secondary:hover { background: var(--sh-white); color: var(--sh-heather); }

.booking-panel { position: sticky; top: 1.5rem; }

/* --- PARKED: on-site availability search styles ---------------------------- */
/*
 * Styles for the search widget removed in D-017. Nothing renders these classes. Kept
 * alongside the parked template; delete together if the search is not revived.
 */
/* --- Sections -------------------------------------------------------------- */

.section { padding-block: var(--sh-section-y); }
.section--intro, .section--highlights, .section--booking { background: var(--sh-paper-alt); }
.section__title { margin-top: 0; margin-bottom: 2rem; }
.section__more { margin-top: 2rem; }

.page-header {
  background: var(--sh-heather);
  color: var(--sh-white);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-header h1 { color: var(--sh-white); }
.page-header__intro { color: rgba(255, 255, 255, 0.9); font-size: 1.15rem; max-width: 60ch; }

.quick-facts { background: var(--sh-heather-dark); color: var(--sh-white); padding-block: 1rem; }
.quick-facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  font-size: var(--sh-fs-small);
}
.quick-facts__list li { max-width: none; }

.breadcrumb-bar { background: var(--sh-paper-alt); padding-block: 0.65rem; font-size: var(--sh-fs-small); }
.breadcrumb-bar .breadcrumb { margin: 0; }

/* --- Cards ----------------------------------------------------------------- */

.card {
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  background: var(--sh-white);
  overflow: hidden;
}
.card__media { display: block; }
.card-img-top { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-title a { color: var(--sh-heather); text-decoration: none; }
.card-title a:hover { color: var(--sh-brass-dark); }
.card-meta { font-size: var(--sh-fs-small); color: var(--sh-ink-soft); margin-bottom: 0.5rem; }

.feature-list { list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: var(--sh-fs-small); }
.feature-list li { padding-left: 1.1rem; position: relative; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sh-brass); }
.feature-list--full { columns: 2; }

.callout {
  background: var(--sh-paper-alt);
  border-left: 3px solid var(--sh-brass);
  padding: 1.25rem;
  border-radius: var(--sh-radius);
  margin-bottom: 1.5rem;
}

.empty-state {
  background: var(--sh-paper-alt);
  border: 1px dashed var(--sh-line);
  border-radius: var(--sh-radius);
  padding: 2rem;
  text-align: center;
}
.empty-state p { margin-inline: auto; }

.cta-band {
  background: var(--sh-heather);
  color: var(--sh-white);
  padding: 2.5rem;
  border-radius: var(--sh-radius);
  text-align: center;
}
.cta-band h2 { color: var(--sh-white); margin-top: 0; }
.cta-band p { margin-inline: auto; color: rgba(255, 255, 255, 0.9); }
.cta-band .btn { margin: 0.25rem; }
.cta-band .btn-outline { border-color: var(--sh-white); color: var(--sh-white); }
.cta-band .btn-outline:hover { background: var(--sh-white); color: var(--sh-heather); }

.cross-links, .filter-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.filter-list a.is-current { font-weight: 700; color: var(--sh-heather); }

/* --- Enquiry forms --------------------------------------------------------- */
/*
 * Hotel enquiry forms, not admin forms. Generous spacing, clear labels, restrained
 * styling until the design phase.
 */

.enquiry {
  background: var(--sh-white);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 2rem;
}
.enquiry__title { margin-top: 0; }
.enquiry__field { margin-bottom: 1.1rem; }
.enquiry__field .form-label { font-weight: 600; margin-bottom: 0.3rem; }
.enquiry__field .required { color: var(--sh-brass-dark); }
.enquiry__field .form-text { margin-top: 0.2rem; font-size: 0.85rem; }

.enquiry__error {
  color: #a3302a;
  font-size: 0.88rem;
  margin: 0.3rem 0 0;
  font-weight: 600;
}
.enquiry__field.has-error .form-control,
.enquiry__field.has-error .form-select { border-color: #a3302a; }

.enquiry__actions { margin-top: 1.5rem; }
.enquiry__privacy {
  font-size: 0.85rem;
  color: var(--sh-ink-soft);
  margin: 1rem 0 0;
}

/* Honeypot: hidden from people without `display:none`, which some bots detect. */
.enquiry-honeypot-wrap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.section--enquiry { background: var(--sh-paper-alt); }

/* --- Restaurant menus (PDF documents, D-039) ----------------------------- */

.card--menu { border-top: 3px solid var(--sh-brass); }
.card--menu .card-title { margin-bottom: .35rem; }
.card--menu .card-text { color: var(--sh-ink-soft); }

/* --- Articles -------------------------------------------------------------- */

.article__header { padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; }
.article__category { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.article__meta { color: var(--sh-ink-soft); font-size: var(--sh-fs-small); }
.article__image img { width: 100%; max-height: 520px; object-fit: cover; }
.article__body h2 { margin-top: 2.5rem; }
.article__pillar-link { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sh-line); }

.gallery__item figcaption { font-size: 0.8rem; color: var(--sh-ink-soft); margin-top: 0.35rem; }

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--sh-heather-dark);
  color: rgba(255, 255, 255, 0.82);
  padding-block: 3.5rem 1.5rem;
  margin-top: 0;
}
.site-footer a { color: var(--sh-white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-brand { font-family: var(--sh-font-heading); font-size: 1.3rem; color: var(--sh-white); margin-bottom: 0.25rem; }
.footer-tagline { font-size: var(--sh-fs-small); }
.footer-address { font-style: normal; font-size: var(--sh-fs-small); }
.footer-heading {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --sh-brass is only 3.85:1 on the navy footer, and this is small uppercase text.
     --sh-brass-pale is the brass intended for dark surfaces: 7.24:1. */
  color: var(--sh-brass-pale);
  font-family: var(--sh-font-body);
}
.footer-links, .footer-social { list-style: none; padding: 0; font-size: var(--sh-fs-small); }
.footer-social { display: flex; gap: 1.25rem; margin-top: 2rem; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }

/* --- Motion ---------------------------------------------------------------- */

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

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .hero__overlay { position: static; background: var(--sh-heather-dark); padding-block: 2rem; }
  .hero__overlay > .container { display: block; }
  .hero__image { height: 42vh; }
  .booking-panel { position: static; }
  .site-nav .nav-link { padding-inline: 0; }
  .btn-book { display: block; text-align: center; margin-top: 0.75rem; }
}

/* ==========================================================================
   VISUAL REFINEMENT — September 2026
   --------------------------------------------------------------------------
   Photography-led hotel styling built before the final shoot. These rules
   deliberately use the existing semantic templates and media slots, so the
   real photography can drop in without another layout rebuild.
   ========================================================================== */

:root {
  --sh-ink: #25231f;
  --sh-ink-soft: #625d55;
  --sh-paper: #fbfaf7;
  --sh-paper-alt: #f3efe7;
  --sh-paper-deep: #ebe4d8;
  --sh-line: #ded6c8;
  --sh-heather: #263746;
  --sh-heather-dark: #182631;
  --sh-heather-soft: #435866;
  --sh-brass: #b8874e;          /* decorative only: 3.18:1 on white, so never text */
  --sh-brass-dark: #8f6434;     /* the text/CTA brass: 4.98:1 on paper, 5.20:1 with white */
  --sh-brass-deep: #7d5729;     /* CTA hover: 6.43:1 with white */
  --sh-brass-pale: #dcc49f;     /* brass for navy surfaces: 7.24:1 on the footer */
  --sh-moss: #53614c;
  --sh-white: #fff;

  --sh-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sh-font-body: Aptos, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --sh-fs-hero: clamp(2.75rem, 6vw, 5.5rem);
  --sh-fs-h1: clamp(2.25rem, 4.8vw, 4.2rem);
  --sh-fs-h2: clamp(1.9rem, 3.5vw, 3rem);
  --sh-fs-h3: clamp(1.2rem, 1.6vw, 1.45rem);
  --sh-section-y: clamp(4.25rem, 8vw, 7rem);
  --sh-radius: 2px;
  --sh-radius-soft: 10px;
  --sh-shadow: 0 18px 55px rgba(24, 38, 49, 0.09);
  --sh-shadow-hover: 0 28px 70px rgba(24, 38, 49, 0.15);
  --sh-container-wide: 1320px;
}

html { scroll-behavior: smooth; }
body {
  letter-spacing: 0.004em;
  overflow-x: hidden;
}

::selection {
  background: var(--sh-brass-pale);
  color: var(--sh-heather-dark);
}

/* Bootstrap pads a container by half its own gutter (12px), but a row marked `g-5` pulls
   itself out by 24px, so it hung 12px outside the container and /about/ and /contact/ could
   be scrolled sideways on a phone. The canonical relationship is container padding = half
   the row gutter, so the padding is matched to the largest gutter the templates use. Any
   page that later gains an image content block would have had the same fault. */
.container {
  max-width: var(--sh-container-wide);
  padding-inline: 1.5rem;
}
main { min-height: 50vh; }

h1, h2, h3, h4, .h5, .h6 {
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h2 { margin-top: 0; }

p { text-wrap: pretty; }

.lead {
  line-height: 1.72;
  font-size: clamp(1.08rem, 1.4vw, 1.28rem);
}

.text-link,
.section-heading__link {
  color: var(--sh-heather);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 135, 78, 0.55);
  padding-bottom: 0.12rem;
  transition: color .2s ease, border-color .2s ease;
}
.text-link:hover,
.section-heading__link:hover {
  color: var(--sh-brass-dark);
  border-color: var(--sh-brass-dark);
}

.section-kicker,
.page-header__eyebrow,
.hero__eyebrow {
  margin: 0 0 .85rem;
  font-family: var(--sh-font-body);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.section-kicker,
.page-header__eyebrow { color: var(--sh-brass-dark); }
.hero__eyebrow { color: #ead8bc; }

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 0 rgba(24, 38, 49, .05);
}

.header-strip {
  background: var(--sh-heather-dark);
  padding: .42rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-strip__location {
  letter-spacing: .045em;
  opacity: .82;
}
.header-strip__phone {
  letter-spacing: .035em;
  transition: color .2s ease;
}
.header-strip__phone:hover { color: #f0d8b3; }

.site-nav {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  padding-block: .95rem;
  border-bottom: 0;
}

.navbar-brand {
  position: relative;
  padding-left: 1rem;
  gap: .12rem;
}
.navbar-brand::before {
  content: "";
  position: absolute;
  inset: .15rem auto .15rem 0;
  width: 2px;
  background: var(--sh-brass);
}
.navbar-brand__name {
  font-size: 1.48rem;
  letter-spacing: -.015em;
  color: var(--sh-heather-dark);
}
.navbar-brand__place {
  font-size: .64rem;
  letter-spacing: .2em;
  color: var(--sh-brass-dark);
}

.site-nav .nav-link {
  position: relative;
  padding: .55rem .78rem !important;
  font-size: .91rem;
  font-weight: 590;
  color: #343330;
}
.site-nav .nav-link::after {
  transition: transform .18s ease;
}
.site-nav .nav-link:not(.dropdown-toggle)::before {
  content: "";
  position: absolute;
  left: .78rem;
  right: .78rem;
  bottom: .28rem;
  height: 1px;
  background: var(--sh-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.site-nav .nav-link:not(.dropdown-toggle):hover::before,
.site-nav .nav-link:not(.dropdown-toggle):focus::before { transform: scaleX(1); }

.dropdown-menu {
  border: 1px solid rgba(222,214,200,.75);
  border-radius: 0;
  padding: .55rem;
  box-shadow: 0 20px 45px rgba(24,38,49,.12);
  min-width: 14rem;
}
.dropdown-item {
  border-radius: 2px;
  padding: .55rem .7rem;
  font-size: .9rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sh-paper-alt);
  color: var(--sh-heather-dark);
}

.navbar-toggler {
  border: 1px solid var(--sh-line);
  border-radius: 2px;
  padding: .45rem .55rem;
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  font-weight: 680;
  letter-spacing: .015em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-book {
  position: relative;
  background: var(--sh-brass);
  border-color: var(--sh-brass);
  padding: .68rem 1.45rem;
  box-shadow: 0 7px 18px rgba(143,100,52,.16);
}
.btn-book:hover,
.btn-book:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(143,100,52,.23);
}
.btn-outline {
  background: transparent;
  border-color: rgba(38,55,70,.55);
  padding: .62rem 1.35rem;
  font-weight: 650;
}
.btn-outline:hover,
.btn-outline:focus { transform: translateY(-1px); }
.btn-lg { padding: .9rem 1.85rem; }

/* Hero -------------------------------------------------------------------- */

.hero {
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -15vw -24vw auto;
  width: 42vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.hero__media { position: relative; }
.hero__image {
  height: clamp(540px, 76vh, 790px);
  filter: saturate(.88) contrast(1.03);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.hero--home:hover .hero__image { transform: scale(1.012); }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 64%, rgba(24,38,49,.18) 100%);
  pointer-events: none;
}
.hero__overlay {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(16,28,37,.84) 0%, rgba(16,28,37,.63) 36%, rgba(16,28,37,.18) 72%, rgba(16,28,37,.04) 100%);
}
.hero__overlay > .container {
  display: grid;
  /* `max-content`, not `auto`: an `auto` track takes all the remaining width and the
     stretched buttons then read as two blank panels rather than as calls to action. */
  grid-template-columns: minmax(0, 760px) max-content;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  padding-top: 7vh;
  padding-bottom: 7vh;
}
.hero__text { max-width: 760px; }
.hero__title {
  max-width: 12ch;
  margin: 0;
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
  text-shadow: 0 3px 30px rgba(0,0,0,.16);
}
.hero__subtitle {
  margin: 1.4rem 0 0;
  max-width: 52ch;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.65;
}
.hero__promise {
  margin: 1.45rem 0 0;
  color: rgba(255,255,255,.76);
  font-size: .76rem;
  font-weight: 680;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__promise span { color: var(--sh-brass-pale); padding-inline: .28rem; }
.hero__actions {
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 190px;
  margin: 0 0 .15rem;
}
.hero__actions .btn { margin: .35rem 0; }
.hero__actions .btn-book {
  background: #fff;
  border-color: #fff;
  color: var(--sh-heather-dark);
  box-shadow: 0 12px 34px rgba(0,0,0,.13);
}
.hero__actions .btn-book:hover {
  background: var(--sh-brass);
  border-color: var(--sh-brass);
  color: #fff;
}
.hero__actions .btn-hero-secondary {
  border-color: rgba(255,255,255,.72);
  background: rgba(17,31,41,.18);
  backdrop-filter: blur(4px);
}

.hero--page .hero__image,
.hero--room .hero__image { height: clamp(390px, 54vh, 600px); }
.hero__overlay--page {
  align-items: end;
  background: linear-gradient(0deg, rgba(20,32,42,.9) 0%, rgba(20,32,42,.38) 62%, rgba(20,32,42,.10) 100%);
}
.hero__overlay--page > .container {
  display: block;
  padding-top: 6rem;
  padding-bottom: 4.5rem;
}
.hero__text--page { max-width: 800px; }
.hero--page .hero__title,
.hero--room .hero__title {
  max-width: 15ch;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}

/* Quick facts ------------------------------------------------------------- */

.quick-facts {
  position: relative;
  z-index: 4;
  background: transparent;
  color: var(--sh-heather-dark);
  padding: 0;
  margin-top: -1.4rem;
}
.quick-facts .container {
  background: #fff;
  border: 1px solid rgba(222,214,200,.82);
  box-shadow: var(--sh-shadow);
  padding: 1.35rem 2rem;
}
.quick-facts__list {
  gap: .5rem 0;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.quick-facts__list li {
  position: relative;
  flex: 1 1 auto;
  text-align: center;
  padding: .25rem 1.25rem;
}
.quick-facts__list li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--sh-line);
}

/* Sections ---------------------------------------------------------------- */

.section { position: relative; }
.section--intro {
  background: var(--sh-paper);
  padding-top: clamp(5rem, 10vw, 8rem);
}
.intro-copy h2 {
  margin-bottom: 1.35rem;
  font-weight: 500;
}
.intro-copy .lead { color: var(--sh-ink-soft); }

.section--rooms,
.section--blog { background: #fff; }
.section--highlights {
  background:
    linear-gradient(180deg, rgba(235,228,216,.64), rgba(243,239,231,.84));
}
.section--location { background: #fff; }
.section--booking {
  background: var(--sh-paper-alt);
  overflow: hidden;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-heading--center {
  justify-content: center;
  text-align: center;
}
.section-heading .section__title { margin-bottom: 0; }
.section__title { font-weight: 520; }

.page-header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(184,135,78,.18), transparent 28%),
    linear-gradient(120deg, var(--sh-heather-dark), var(--sh-heather));
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.page-header::after {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  right: -12rem;
  bottom: -20rem;
}
.page-header h1 {
  margin: 0;
  max-width: 13ch;
  font-weight: 500;
  letter-spacing: -.035em;
}
.page-header__eyebrow { color: #e4c89f; }
.page-header__intro {
  margin-top: 1.2rem;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  max-width: 55ch;
}

.breadcrumb-bar {
  background: #fff;
  border-bottom: 1px solid var(--sh-line);
  padding-block: .75rem;
}

.page-body__content {
  font-size: 1.08rem;
  line-height: 1.82;
}
.page-body__content > p:first-child::first-letter {
  float: left;
  color: var(--sh-brass-dark);
  font-family: var(--sh-font-heading);
  font-size: 3.7rem;
  line-height: .84;
  padding: .18rem .55rem 0 0;
}

/* Cards ------------------------------------------------------------------- */

.card {
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(222,214,200,.72);
  transition: transform .28s ease, box-shadow .28s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-shadow-hover);
}
.card__media {
  position: relative;
  overflow: hidden;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(24,38,49,.14));
  opacity: 0;
  transition: opacity .25s ease;
}
.card:hover .card__media::after { opacity: 1; }
.card-img-top {
  aspect-ratio: 4 / 3;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
.card:hover .card-img-top { transform: scale(1.035); }
.card-body { padding: 1.55rem 1.5rem 1.65rem; }
.card-title {
  margin-bottom: .65rem;
  font-size: 1.28rem !important;
  font-weight: 560;
}
.card-title a {
  color: var(--sh-heather-dark);
  background-image: linear-gradient(var(--sh-brass), var(--sh-brass));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .22s ease, color .22s ease;
}
.card:hover .card-title a { background-size: 100% 1px; }
.card-text {
  color: var(--sh-ink-soft);
  font-size: .96rem;
  line-height: 1.65;
}
.card-meta {
  color: var(--sh-brass-dark);
  font-weight: 690;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .7rem;
}
.card--highlight .card-img-top { aspect-ratio: 5 / 4; }
.card--room .card-img-top { aspect-ratio: 4 / 3; }
.card--article .card-img-top { aspect-ratio: 16 / 10; }

/* Booking CTA ------------------------------------------------------------- */

.booking-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 25%, rgba(184,135,78,.24), transparent 28%),
    linear-gradient(125deg, var(--sh-heather-dark), #304756);
  color: rgba(255,255,255,.88);
  border: 0;
  border-radius: 0;
  box-shadow: var(--sh-shadow);
  padding: clamp(2.8rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}
.booking-cta::after {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  right: -7rem;
  bottom: -10rem;
  z-index: -1;
}
.booking-cta__title {
  color: #fff;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem);
}
.booking-cta__text { color: rgba(255,255,255,.8); }
.booking-cta__note { color: rgba(255,255,255,.68); }
.booking-cta__note a { color: #fff; }
.booking-cta .btn-book {
  background: #fff;
  border-color: #fff;
  color: var(--sh-heather-dark);
}
.booking-cta .btn-book:hover {
  background: var(--sh-brass);
  border-color: var(--sh-brass);
  color: #fff;
}
.booking-cta .btn-outline {
  border-color: rgba(255,255,255,.62);
  color: #fff;
}
.booking-cta .btn-outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--sh-heather-dark);
}

/* Location ---------------------------------------------------------------- */

.location-card {
  padding: clamp(1rem, 3vw, 2.5rem) clamp(0rem, 2vw, 1.5rem);
}
.location-card h2 {
  max-width: 14ch;
  font-weight: 520;
}
.location__address {
  margin: 1.35rem 0;
  color: var(--sh-ink-soft);
  font-style: normal;
}
.location-media img,
.section--location .location-media img {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: var(--sh-shadow);
}

/* Content sections and galleries ----------------------------------------- */

.section--image_left,
.section--image_right { background: #fff; }
.section--image_left img,
.section--image_right img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: var(--sh-shadow);
}
.section--text:nth-of-type(even),
.section--highlights { background: var(--sh-paper-alt); }

.gallery__item { margin: 0; overflow: hidden; }
.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform .4s ease;
}
.gallery__item:hover img { transform: scale(1.02); }
.gallery__item figcaption { padding-top: .55rem; }

.cross-links {
  gap: .75rem;
}
.cross-links a,
.filter-list a {
  display: inline-block;
  color: var(--sh-heather-dark);
  text-decoration: none;
  border: 1px solid var(--sh-line);
  background: #fff;
  padding: .55rem .85rem;
  font-size: .88rem;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cross-links a:hover,
.filter-list a:hover,
.filter-list a.is-current {
  background: var(--sh-heather-dark);
  border-color: var(--sh-heather-dark);
  color: #fff;
}

.empty-state {
  border: 1px solid var(--sh-line);
  background: linear-gradient(135deg, #fff, var(--sh-paper-alt));
  padding: clamp(2rem, 5vw, 4rem);
}

.callout {
  border: 0;
  border-left: 3px solid var(--sh-brass);
  background: #fff;
  box-shadow: 0 8px 30px rgba(24,38,49,.06);
  padding: 1.6rem;
}

/* Enquiry forms ----------------------------------------------------------- */

.enquiry {
  position: relative;
  border: 0;
  border-top: 3px solid var(--sh-brass);
  background: #fff;
  box-shadow: var(--sh-shadow);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.enquiry__title {
  margin-bottom: 1.6rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 520;
}
.enquiry__field { margin-bottom: 1.25rem; }
.enquiry__field .form-label {
  color: var(--sh-heather-dark);
  font-size: .86rem;
  font-weight: 720;
}
.form-control,
.form-select {
  border: 1px solid #cec5b7;
  border-radius: 0;
  padding: .72rem .8rem;
  background-color: #fff;
  color: var(--sh-ink);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sh-brass);
  box-shadow: 0 0 0 .2rem rgba(184,135,78,.13);
}
textarea.form-control { min-height: 135px; }
.enquiry__privacy {
  border-top: 1px solid var(--sh-line);
  padding-top: 1rem;
  margin-top: 1.25rem;
}

/* Restaurant menus -------------------------------------------------------- */

.card--menu {
  background: #fff;
  box-shadow: 0 12px 34px rgba(24,38,49,.05);
}
.card--menu .card-title { font-family: var(--sh-font-heading); font-weight: 520; }

/* Articles ---------------------------------------------------------------- */

.article__header { padding-top: clamp(3.5rem, 7vw, 6rem); }
.article__category { color: var(--sh-brass-dark); font-weight: 750; }
.article__body {
  font-size: 1.08rem;
  line-height: 1.82;
}
.article__body p { margin-bottom: 1.35rem; }
.article__image img { box-shadow: var(--sh-shadow); }
.pagination { margin-top: 3rem; }
.page-link {
  color: var(--sh-heather-dark);
  border-color: var(--sh-line);
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  position: relative;
  overflow: hidden;
  background: #14212a;
  padding-block: 5rem 1.5rem;
}
.site-footer::after {
  content: "S";
  position: absolute;
  right: -1rem;
  bottom: -8.5rem;
  color: rgba(255,255,255,.025);
  font-family: var(--sh-font-heading);
  font-size: 28rem;
  line-height: 1;
  pointer-events: none;
}
.footer-brand {
  font-size: 1.75rem;
  letter-spacing: -.02em;
}
.footer-tagline,
.footer-address,
.footer-contact { color: rgba(255,255,255,.68); }
.footer-heading { color: #d5b587; }
.footer-links li { margin-bottom: .4rem; }
.footer-bottom { color: rgba(255,255,255,.55); }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .hero__overlay > .container {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 2rem;
  }
  .site-nav .nav-link { padding-inline: .55rem !important; }
}

@media (max-width: 991.98px) {
  .site-header { position: relative; }
  .site-nav { padding-block: .75rem; }
  .navbar-collapse {
    margin-top: .9rem;
    border-top: 1px solid var(--sh-line);
    padding-top: .75rem;
  }
  .site-nav .nav-link { padding: .62rem 0 !important; }
  .site-nav .nav-link:not(.dropdown-toggle)::before { display: none; }
  .site-nav .btn-book { display: inline-block; width: 100%; margin-top: .8rem; }

  .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(16,28,37,.88) 0%, rgba(16,28,37,.42) 75%, rgba(16,28,37,.18) 100%);
    padding: 0;
    align-items: end;
  }
  .hero__overlay > .container,
  .hero__overlay--page > .container {
    display: block;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .hero__image { height: clamp(560px, 78vh, 720px); }
  .hero--page .hero__image,
  .hero--room .hero__image { height: 500px; }
  .hero__title { max-width: 13ch; }
  .hero__actions {
    margin-top: 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
  .hero__actions .btn { margin-right: .55rem; }
  .hero__actions .btn-book { display: inline-block; width: auto; margin-top: .35rem; }
  .quick-facts { margin-top: 0; }
  .quick-facts .container { border-left: 0; border-right: 0; }
  .quick-facts__list li { flex: 1 1 33%; }
  .quick-facts__list li + li::before { display: none; }
  .booking-panel { position: static; }
}

@media (max-width: 767.98px) {
  :root { --sh-section-y: 4rem; }
  .header-strip__location { font-size: .7rem; }
  .header-strip__phone { font-size: .78rem; }
  .hero__image { height: 620px; }
  .hero__overlay > .container { padding-bottom: 2.5rem; }
  .hero__title { font-size: clamp(2.65rem, 12vw, 4rem); }
  .hero__subtitle { font-size: 1rem; }
  .hero__promise { font-size: .66rem; letter-spacing: .11em; }
  .hero__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero__actions .btn { width: 100%; margin: .25rem 0; }
  .quick-facts .container { padding: 1rem .7rem; }
  .quick-facts__list { font-size: .68rem; }
  .quick-facts__list li { flex: 1 1 50%; padding: .45rem .5rem; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .section-heading--center { align-items: center; }
  .card:hover { transform: none; }
  .feature-list--full { columns: 1; }
  .booking-cta__actions .btn { width: 100%; margin-inline: 0; }
  .location-media img,
  .section--location .location-media img { min-height: 300px; }
  .page-body__content > p:first-child::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; }
  .footer-bottom { gap: .5rem; }
}

@media (max-width: 479.98px) {
  .navbar-brand__name { font-size: 1.28rem; }
  .navbar-brand__place { letter-spacing: .15em; }
  .hero__image { height: 570px; }
  .hero--page .hero__image,
  .hero--room .hero__image { height: 460px; }
}

/* Error pages ------------------------------------------------------------- */
.error-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 18%, rgba(184,135,78,.22), transparent 27%),
    linear-gradient(130deg, #15242e, #304653);
  color: rgba(255,255,255,.82);
}
.error-page__main {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding-block: 3rem;
}
.error-page__card {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  padding: clamp(2rem, 6vw, 5rem);
  border-left: 2px solid var(--sh-brass);
  background: rgba(17,31,41,.52);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
}
.error-page__card h1 { color: #fff; max-width: 12ch; font-weight: 500; }
.error-page__card .lead { color: rgba(255,255,255,.78); }
.error-page__card a:not(.btn) { color: #ead5b6; }
.error-page__code {
  position: absolute;
  right: -1rem;
  top: -4rem;
  margin: 0;
  color: rgba(255,255,255,.035);
  font-family: var(--sh-font-heading);
  font-size: 15rem;
  line-height: 1;
}

/* --- Staff preview bar ----------------------------------------------------- */
/* Only rendered on the staff-only article preview, never on a public page. */

.preview-bar {
  background: #b8860b;
  color: #fff;
  padding: 0.6rem 0;
  font-size: 0.95rem;
}
.preview-bar a {
  color: #fff;
  text-decoration: underline;
  margin-left: 0.5rem;
}

/* --- Event card description ------------------------------------------------ */
/* The longer description sits under the summary; keep its paragraphs tight so a
   card does not turn into an essay. */

.event__description { font-size: 0.95rem; }
.event__description > :last-child { margin-bottom: 0; }
.event__description h2,
.event__description h3,
.event__description h4 { font-size: 1rem; margin-top: 0.75rem; }

/* --- Editorial notes ------------------------------------------------------- */
/* "[TO CONFIRM with the hotel: ...]" — an unanswered question, marked so nobody
   mistakes it for finished copy. Deliberately visible before launch: these are the
   conversation Steve and Bryan have on the day. Wrapped by core/formatting.py after
   sanitising, so no author can produce one. */

.editorial-note {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-left: 3px solid var(--sh-brass);
  border-radius: var(--sh-radius);
  background: var(--sh-paper-alt);
  color: var(--sh-ink-soft);
  font-size: 0.94em;
  font-style: italic;
}

/* --- Section lead ---------------------------------------------------------- */
/* One paragraph of introduction under a section heading, before its cards. */

.section-lead {
  max-width: var(--sh-maxw-text);
  margin-bottom: 1.75rem;
  color: var(--sh-ink-soft);
  line-height: var(--sh-lh-body);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0;
}

/* --- Official logo --------------------------------------------------------- */
/* Source artwork is 213x132 (ratio 1.614) with a white background.
   Rules here only ever set a HEIGHT; width stays automatic, so the logo can never be
   stretched. No filters: the official colours are used exactly as supplied.
   `.brand-logo--panel` is the deliberate white plate for navy surfaces. */

.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.brand-logo--panel {
  background: var(--sh-white);
  padding: 0.4rem 0.55rem;
  border-radius: var(--sh-radius);
}

/* Header. Sized against the navigation and the Book a Room button rather than against the
   old text wordmark: at 52px it read as an afterthought beside them. 76px tall is 123px
   wide, still 1.7x the artwork's own pixels, and the bar padding is trimmed so the white
   band stays elegant rather than merely tall. */
.brand-logo--header { height: 76px; }

@media (min-width: 992px) {
  .site-nav { padding-block: 0.45rem; }
}

@media (max-width: 991.98px) {
  .brand-logo--header { height: 60px; }
}
@media (max-width: 380px) {
  .brand-logo--header { height: 52px; }
}

.brand-logo--footer { height: 66px; }

.brand-logo--error {
  height: 60px;
  margin-bottom: 1rem;
}

/* The 500 page is centred, so the logo is too. */
.error-page__card .brand-logo--error { margin-inline: auto; }

/* The brand link now holds the artwork rather than two lines of type, so the decorative
   brass rule and the text-based layout that framed it are no longer wanted. The logo is a
   complete lockup on its own. */
.navbar-brand {
  display: flex;
  align-items: center;
  padding-left: 0;
  gap: 0;
}
.navbar-brand::before { content: none; }

.footer-brand {
  margin-bottom: 0.9rem;
}


/* --- Optional photographs behind navy bands (D-041) ------------------------ */
/*
   PHOTO OPTIONAL, NAVY FALLBACK ALWAYS. `{% band_background %}` emits nothing when no
   photograph is set, and none of these rules apply without `.has-band-photo`, so a band
   with no photograph is byte-for-byte the navy band it always was.

   With a photograph: the picture fills the band behind a navy scrim, inside the band's
   own stacking context (`isolation`), so the words, buttons and the footer's decorative
   "S" all stay above it.

   Contrast is set by the scrim, measured against the worst case -- a pure white photograph:
   - booking band, .82 navy: the band's dimmest text (white at .68) is 4.8:1, the title
     and buttons well above 7:1;
   - footer, .9 navy: the footer's dimmest text (white at .55) is 4.9:1;
   - Discover category page header (D-048), the booking band's .9 -> .82 scrim: the brass
     eyebrow (#e4c89f) is 5.7:1 at the lightest point, the intro 7.9:1, the title 9.2:1.
     The photograph is absolutely positioned, so the header keeps its navy height.
   A real photograph is darker than white, so real contrast is higher.
*/
.has-band-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.band-photo,
.band-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.band-photo { z-index: -2; }
.band-photo picture,
.band-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.band-scrim {
  z-index: -1;
  background: linear-gradient(115deg, rgba(20,33,42,.9) 0%, rgba(20,33,42,.82) 55%, rgba(20,33,42,.82) 100%);
}
.site-footer.has-band-photo .band-scrim { background: rgba(20,33,42,.9); }
.booking-cta.has-band-photo { background: var(--sh-heather-dark); }

/* --- Contact map (D-042) --------------------------------------------------- */

.contact-map {
  margin-bottom: 2rem;
}
.contact-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--sh-paper-alt);
  border: 1px solid var(--sh-line);
  overflow: hidden;
}
.contact-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-map__link { margin-top: .6rem; font-size: var(--sh-fs-small); }
@media (max-width: 575.98px) {
  .contact-map__frame { aspect-ratio: 1 / 1; }
}

/* --- Event photographs and documents (D-040) ------------------------------- */

.event-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.event-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.event-gallery figcaption { font-size: .8rem; color: var(--sh-ink-soft); margin-top: .25rem; }
.event-documents { margin-top: 1.25rem; }
.event-documents__title {
  font-family: var(--sh-font-body);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sh-brass-dark);
  margin-bottom: .5rem;
}
.event-documents ul { list-style: none; padding: 0; margin: 0; }
.event-documents li { padding-block: .45rem; border-top: 1px solid var(--sh-line); }
.event-documents li:last-child { border-bottom: 1px solid var(--sh-line); }
.event-documents__type {
  font-size: .72rem;
  letter-spacing: .08em;
  border: 1px solid currentColor;
  padding: 0 .3rem;
  margin-left: .35rem;
  vertical-align: middle;
}
.event-documents__description { display: block; font-size: .85rem; color: var(--sh-ink-soft); }

/* The event's own menu (D-053): one clear button above any other PDFs. Heather with white
   text is 9:1; it reads as the card's action without competing with "Book a Room". */
.event-menu { margin-top: 1.25rem; }
.event-menu + .event-documents { margin-top: 1.5rem; }
.btn-event-menu {
  background: var(--sh-heather);
  border: 1px solid var(--sh-heather);
  color: var(--sh-white);
  font-weight: 650;
  padding: .55rem 1.2rem;
}
.btn-event-menu:hover,
.btn-event-menu:focus {
  background: var(--sh-heather-dark);
  border-color: var(--sh-heather-dark);
  color: var(--sh-white);
}
.btn-event-menu:focus-visible { outline: 3px solid var(--sh-brass-dark); outline-offset: 2px; }
.event-menu__description { font-size: .85rem; color: var(--sh-ink-soft); margin: .4rem 0 0; }

/* --- Local guides (D-043) -------------------------------------------------- */

.section--travel { padding-block: clamp(2rem, 4vw, 3rem); background: var(--sh-paper-alt); }
.travel-panel {
  background: #fff;
  border-top: 3px solid var(--sh-brass);
  box-shadow: var(--sh-shadow);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.travel-panel__title { font-size: var(--sh-fs-h3); margin-bottom: .25rem; }
.travel-panel__from { color: var(--sh-ink-soft); margin-bottom: 1.25rem; }
.travel-panel__modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.travel-mode {
  border: 1px solid var(--sh-line);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.travel-mode--train { border-color: var(--sh-heather-soft); background: var(--sh-paper); }
.travel-mode__label {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sh-brass-dark);
  font-weight: 700;
}
.travel-mode__time {
  font-family: var(--sh-font-heading);
  font-size: 1.35rem;
  color: var(--sh-heather-dark);
}
.travel-mode__notes { font-size: .88rem; color: var(--sh-ink-soft); }
.travel-panel__disclaimer { font-size: .9rem; color: var(--sh-ink-soft); margin: 0; }

.card--attraction .card-body,
.card--guide .card-body { padding: 1.25rem; }
.attraction__journey {
  font-size: .92rem;
  color: var(--sh-heather-dark);
  margin-bottom: .6rem;
}
.attraction__journey-label { font-weight: 700; }
.attraction__journey-notes { display: block; color: var(--sh-ink-soft); font-size: .85rem; }
.attraction__more { font-size: .95rem; }
.attraction__address { font-size: .88rem; color: var(--sh-ink-soft); }
.attraction__links { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .92rem; }
.attraction__links li { margin-top: .3rem; }
.article__guide-link { font-weight: 600; }

/* --- Explore dropdown (D-044) ---------------------------------------------- */
/* Longer now that it lists the Local Guides: a quiet label and dividers group it, and
   the current page is marked in brand colours rather than Bootstrap's blue. */
.dropdown-menu .dropdown-header {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sh-brass-dark);
  padding: .5rem .7rem .25rem;
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--sh-paper-alt);
  color: var(--sh-heather-dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sh-brass);
}
.site-nav .nav-link.is-current { color: var(--sh-heather-dark); }
@media (max-width: 991.98px) {
  /* In the mobile menu the list opens in place: comfortable tap targets, no flyout. */
  .dropdown-menu--explore { box-shadow: none; border-left: 2px solid var(--sh-line); }
  .dropdown-menu--explore .dropdown-item { padding-block: .7rem; }
}

/* --- Explore Area (D-045, article pins D-046) ------------------------------- */

.area-map {
  position: relative;
  width: 100%;
  height: clamp(340px, 58vh, 580px);
  background: var(--sh-paper-alt);
  border: 1px solid var(--sh-line);
  z-index: 0;            /* keep Leaflet's panes under the sticky header */
}
.area-map__fallback { padding: 1.25rem; color: var(--sh-ink-soft); margin: 0; }
.area-map__note { font-size: .9rem; color: var(--sh-ink-soft); margin-top: .75rem; }

.area-pin span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sh-brass-dark);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(24,38,49,.35);
}
.area-pin--hotel span { background: var(--sh-heather-dark); border-color: var(--sh-brass-pale); }
.area-pin:focus-visible { outline: 3px solid var(--sh-heather-dark); outline-offset: 2px; border-radius: 50%; }

/* Geographic clusters (Leaflet.markercluster): a numbered brass bubble. */
.leaflet-marker-icon.area-cluster {   /* beats leaflet.css, which loads later */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sh-brass-dark);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(24,38,49,.4);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.area-cluster:focus-visible { outline: 3px solid var(--sh-heather-dark); outline-offset: 2px; }

.area-popup__title { font-size: 1.05rem; margin: 0 0 .35rem; }
.area-popup__place { margin: 0 0 .25rem; font-weight: 600; }
.area-popup__guide { margin: 0 0 .5rem; font-size: .9rem; color: var(--sh-ink-soft); }
.area-popup__links { margin: 0; line-height: 1.8; }

.area-places__context { margin-bottom: 1.25rem; }
.area-places__tools { margin-bottom: 1rem; }
.area-places__follow { display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; }
.area-places__follow input { width: 1.1rem; height: 1.1rem; accent-color: var(--sh-brass-dark); }
.area-results__status { font-weight: 600; margin-bottom: 1rem; }
.card--place.is-selected { outline: 3px solid var(--sh-brass); outline-offset: -3px; box-shadow: var(--sh-shadow); }

.destination-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.destination-card {
  background: #fff;
  border: 1px solid var(--sh-line);
  border-top: 3px solid var(--sh-line);
  padding: 1.1rem 1.2rem;
}
.destination-card.is-selected { border-top-color: var(--sh-brass); box-shadow: var(--sh-shadow); }
.destination-card__title { margin-bottom: .3rem; }
.destination-card__distance { font-weight: 600; margin-bottom: .2rem; }
.destination-card__modes { font-size: .88rem; color: var(--sh-ink-soft); margin-bottom: .5rem; }
.destination-card__links { margin: 0; font-size: .95rem; }
.section--places { background: var(--sh-paper-alt); }
@media (max-width: 575.98px) {
  .area-map { height: 360px; }
}
.leaflet-container .area-popup a { color: var(--sh-brass-dark); }
.leaflet-container .area-popup a:hover { color: var(--sh-heather-dark); }
.leaflet-container { font-family: var(--sh-font-body); }

/* --- Awards & recognition in the footer (D-053) ----------------------------- */
/*
   Optional. Only rendered when an award is visible, so a footer without awards is
   untouched. Each logo sits on its own light tile, which gives it contrast on the plain
   navy footer and on the photograph scrim alike -- the scrim is never weakened for it.
   Logos keep their proportions: `object-fit: contain`, never `cover`, no filters.
*/
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2rem;
}
.footer-meta .footer-social { margin: 0; }
.footer-awards .footer-heading { margin-bottom: .75rem; }
.footer-awards__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 5.75rem));
  gap: .6rem;
}
.award-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.25rem;
  padding: .4rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  background: rgba(255,255,255,.96);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.award-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.award-tile:focus-visible { outline: 3px solid var(--sh-brass-pale); outline-offset: 3px; }
.award-tile__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (min-width: 992px) {
  /* Desktop: social links on the left, the logos in the spare space to their right. */
  .footer-meta { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-awards { text-align: right; }
  /* Fill from the right: the first award (display order) sits at the right edge and the
     rest grow leftwards. Visual only -- the markup, and so the reading and tab order,
     stays in staff order. No empty placeholders are rendered. */
  .footer-awards__list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .footer-awards__list li { flex: 0 0 5.75rem; }
}
@media (max-width: 399.98px) {
  .footer-awards__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
  .award-tile { height: 3.75rem; }
}

/* The award dialog: Bootstrap's modal, with the logo shown whole on a light panel. */
.award-modal .modal-title { font-family: var(--sh-font-heading); }
.award-modal__logo {
  display: flex;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--sh-white);
  border: 1px solid var(--sh-line);
  border-radius: 6px;
}
.award-modal__img {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  width: auto;
  height: auto;
  object-fit: contain;
}
.award-modal__year {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sh-brass-dark);
  margin-bottom: .5rem;
}