/* ============================================================
   Ghan House — shared styles
   Used by Home, Rooms index, single-room pages
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  /* Lough & Stone palette */
  --navy:        oklch(0.235 0.025 250);   /* slate navy */
  --navy-deep:   oklch(0.185 0.022 250);
  --navy-soft:   oklch(0.30 0.020 250);
  --cream:       oklch(0.965 0.010 85);    /* parchment */
  --cream-warm:  oklch(0.945 0.014 80);
  --stone:       oklch(0.58 0.012 80);
  --stone-dark:  oklch(0.40 0.010 80);
  --gold:        oklch(0.70 0.075 75);     /* warm brass (used sparingly) */
  --rule:        oklch(0.88 0.010 80);

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --max: 1240px;
  --max-wide: 1640px;
  --elevenpx: 11px;
  --kickerpx: 14px;
  --eyebrowpx: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--navy-deep);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* Header (.hdr) + slide-over menu overlay live in header-global.css now —
   loaded on every page, not just Lough. */

/* ===================================================================
   BUTTONS (generic)
=================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 22px;
  font-family:var(--sans);
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  border:1px solid var(--navy);
  background:transparent; color:var(--navy);
  border-radius:0;
  font-weight:500;
  text-decoration:none;
  transition:background .2s, border-color .2s, color .2s;
}
.btn:hover{ background:var(--navy); color:var(--cream) }
.btn-primary{
  background:var(--navy); border-color:var(--navy); color:var(--cream);
}
.btn-primary:hover{ background:transparent; color:var(--navy) }

.btn-on-dark{
  border-color:rgba(245,240,232,.4); color:var(--cream);
}
.btn-on-dark:hover{ background:rgba(245,240,232,.08); border-color:var(--cream); color:var(--cream) }
.btn-on-dark.btn-primary{
  background:var(--cream); border-color:var(--cream); color:var(--navy-deep);
}
.btn-on-dark.btn-primary:hover{ background:#fff; color:var(--navy-deep) }

/* ===================================================================
   core/buttons bridge — when editors use the native WP buttons block
   inside one of our parent blocks (.dine, .vouchers, .sec.close), the
   children get styled to look like the design's .btn / .btn-on-dark /
   .btn-primary buttons. The first button (or non-outline) is "primary"
   (filled), .is-style-outline is the ghost / secondary.
=================================================================== */

/* Generic core/buttons inside our containers — reset the WP defaults
   so our rules paint on a clean surface. */
.dine .wp-block-buttons,
.vouchers .wp-block-buttons,
.sec.close .wp-block-buttons{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;
}
.dine .wp-block-button,
.vouchers .wp-block-button,
.sec.close .wp-block-button{
  margin:0;
}
.dine .wp-block-button__link,
.vouchers .wp-block-button__link,
.sec.close .wp-block-button__link{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 22px;
  font-family:var(--sans);
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  border-radius:0;
  font-weight:500;
  text-decoration:none;
  background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

/* Dine + closing-cta: dark backdrop → .btn-on-dark styling. */
.dine .wp-block-button__link,
.sec.close .wp-block-button__link{
  border:1px solid var(--cream);
  background:var(--cream);
  color:var(--navy-deep);
}
.dine .wp-block-button__link:hover,
.sec.close .wp-block-button__link:hover{
  background:#fff; color:var(--navy-deep);
}
/* Specificity bump: Astra ships .wp-block-buttons .wp-block-button.is-style-outline
   ... :not(.has-text-color) rules at (0,5,1) / (0,4,2) that paint our outline
   buttons in its global link colour. Matching the same selector chain (and adding
   .wp-element-button) gets us to (0,5,2) and wins cleanly without !important. */
.dine .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button,
.sec.close .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button{
  background:transparent;
  border:1px solid rgba(245,240,232,.4);
  color:var(--cream);
}
.dine .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover,
.sec.close .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover{
  background:rgba(245,240,232,.08);
  border-color:var(--cream);
  color:var(--cream);
}

/* Vouchers: light backdrop → .btn / .btn-primary styling. */
.vouchers .wp-block-button__link{
  border:1px solid var(--navy);
  background:var(--navy);
  color:var(--cream);
}
.vouchers .wp-block-button__link:hover{
  background:transparent; color:var(--navy);
}
.vouchers .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button{
  background:transparent;
  border:1px solid var(--navy);
  color:var(--navy);
}
.vouchers .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover{
  background:var(--navy); color:var(--cream);
}

/* ===================================================================
   SHARED TYPE / SECTION HELPERS
=================================================================== */
.sec{ padding:120px 32px; }
.sec-inner{ max-width:var(--max); margin:0 auto; }
.sec-wide-inner{ max-width:var(--max-wide); margin:0 auto; }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--eyebrowpx);
  font-weight:500;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:rgba(245,240,232,.85);
  display:inline-flex; align-items:center; gap:18px;
  margin-bottom: 28px;
  white-space:nowrap;
}
.eyebrow.left::before{
  content:""; flex:0 0 56px; height:1px; background:rgba(245,240,232,.65);
}
.eyebrow.both::before, .eyebrow.both::after{
  content:""; flex:0 0 36px; height:1px; background:rgba(245,240,232,.55);
}

.kicker{
  font-family:var(--sans);
  font-size:var(--kickerpx); letter-spacing:.32em; text-transform:uppercase;
  color:var(--stone-dark);
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.kicker::before{
  content:""; width:32px; height:1px; background:var(--stone);
}
.kicker.center{ justify-content:center }
.kicker.center::after{ content:""; width:32px; height:1px; background:var(--stone) }

h1.display, h2.display{
  font-family:var(--gh-display-family, var(--serif));
  font-weight:400;
  font-size:calc(var(--gh-display-scale, 1) * clamp(36px, 4.2vw, 60px));
  line-height:1.08;
  letter-spacing:-0.012em;
  color:var(--navy);
  margin:0;
  max-width:22ch;
  text-wrap:pretty;
}
h1.display em, h2.display em{ font-style:italic; color:var(--navy-soft) }
h1.display.on-dark, h2.display.on-dark{ color:var(--cream) }
h1.display.on-dark em, h2.display.on-dark em{ color:var(--cream) }

.lede{
  font-family:var(--gh-intro-family, var(--serif)) !important;
  font-size:calc(var(--gh-intro-scale, 1) * 22px);
  line-height:1.45;
  color:var(--navy);
  max-width:56ch;
  font-style:italic;
  font-weight:400;
}
.lede.on-dark{ color:var(--cream) }

.body-copy{
  font-size:16px; line-height:1.75;
  color:var(--stone-dark);
  max-width:60ch;
}
.body-copy.on-dark{ color:rgba(245,240,232,.78) }

/* Intro band scoping — the "Intro band" customizer control should
   affect every text element inside .sec.intro (the gh/intro AND
   gh/intro-glance blocks), not just the .lede. Each rule cascades
   --gh-intro-* first, then the matching block-type / size var,
   then the global default. */
.sec.intro h2.display{
  font-family: var(--gh-intro-family, var(--gh-display-family, var(--serif)));
  font-size: calc(var(--gh-intro-scale, var(--gh-display-scale, 1)) * clamp(36px, 4.2vw, 60px));
}
.sec.intro .body-copy{
  font-family: var(--gh-intro-family, var(--sans));
  font-size: calc(var(--gh-intro-scale, 1) * 16px);
}
.sec.intro .glance li{
  font-family: var(--gh-intro-family, var(--gh-display-family, var(--serif)));
  font-size: calc(var(--gh-intro-scale, var(--gh-display-scale, 1)) * 19px);
}

.link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--navy); padding-bottom:6px;
  border-bottom:1px solid var(--navy);
  transition:gap .2s ease, color .2s ease;
}
.link:hover{ gap:14px; color:var(--gold) }
.link.on-dark{ color:var(--cream); border-bottom-color:rgba(245,240,232,.5) }
.link.on-dark:hover{ color:var(--gold) }

/* ===================================================================
   HERO-PAGE — full-bleed dark hero with veil + centred eyebrow / h1 / sub.
   Used by gh/hero-page on every Lough inner page (rooms, dining,
   weddings, vouchers, about, contact, etc.).
=================================================================== */
.hero{
  position:relative;
  background:var(--navy);
  color:var(--cream);
  min-height: 78vh;
  overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column;
}
.hero-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 55%;
  z-index:0;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,26,38,.55) 0%, rgba(20,26,38,.18) 30%, rgba(20,26,38,.45) 75%, rgba(20,26,38,.80) 100%);
  z-index:1;
}
.hero-inner{
  position:relative; z-index:2;
  flex:1;
  display:flex; flex-direction:column;
  align-items:center;
  text-align:center;
  padding: clamp(180px, 24vh, 260px) 32px 80px;
  max-width: var(--max-wide);
  margin: 0 auto;
  width:100%;
}
.hero h1{
  font-family:var(--gh-hero-heading-family, var(--serif));
  font-weight:400;
  font-size:calc(var(--gh-hero-heading-scale, 1) * clamp(44px, 5.6vw, 88px));
  line-height:1.06;
  letter-spacing:-0.014em;
  max-width:18ch;
  color:var(--cream);
  margin:0;
  text-wrap:balance;
}
.hero-sub{
  margin-top:28px;
  font-family:var(--gh-hero-sub-family, var(--serif));
  font-style:italic;
  font-size:calc(var(--gh-hero-sub-scale, 1) * clamp(18px, 1.5vw, 22px));
  line-height:1.55;
  color:rgba(245,240,232,.85);
  max-width:46ch;
}

/* ===================================================================
   INTRO + AT-A-GLANCE — text column + optional cream-warm aside.
   Used by gh/intro-glance on every Lough inner page that wants a
   sub-section of "the practical facts" alongside the lede copy.
=================================================================== */
.intro{ background:var(--cream) }
/* Centred variant — applies only to gh/intro (which has .lede inside).
   gh/intro-glance uses .intro too but for its 2-column layout, which
   stays left-aligned. */
.intro:has(.lede){ text-align:center }
.intro:has(.lede) .sec-inner{ display:flex; flex-direction:column; align-items:center; gap:28px }
.lede{ text-align:center }
.intro-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:80px;
  align-items:start;
}
.intro-text{ display:flex; flex-direction:column; gap:24px }
.intro-text h2{ margin-top:4px }
.glance{
  background:var(--cream-warm);
  padding:48px 44px;
  border-left:1px solid var(--rule);
}
.glance h4{
  margin:0 0 22px;
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase; color:var(--stone-dark);
}
.glance ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.glance li{
  display:flex; gap:14px; align-items:flex-start;
  font-family:var(--gh-display-family, var(--serif)); font-size:calc(var(--gh-display-scale, 1) * 19px); line-height:1.4; color:var(--navy);
}
.glance li::before{
  content:""; flex:0 0 auto; width:8px; height:8px;
  margin-top:.55em; transform:rotate(45deg);
  border:1px solid var(--gold);
}

/* ===================================================================
   ROOMS-GRID + ROOM-CARD — section head + cream cards grid.
   Used by gh/rooms-grid (rooms index, dining private rooms, weddings,
   vouchers, about, etc.) and its gh/room-card children.
=================================================================== */
.rooms-sec{ background:var(--cream-warm) }
.rooms-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:64px;
}
.rooms-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.room{
  display:flex; flex-direction:column;
  background:var(--cream);
  border:1px solid var(--rule);
  text-decoration:none;
  color:inherit;
  transition:transform .35s ease, box-shadow .35s ease;
}
.room:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -24px rgba(20,26,38,.25) }
.room-img{
  aspect-ratio: 4/3.2;
  background:var(--stone) center/cover no-repeat;
  position:relative;
}
.room-img .tag{
  position:absolute; top:14px; left:14px;
  background:rgba(20,26,38,.78); color:var(--cream);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  padding:6px 10px; backdrop-filter:blur(6px);
}
.room-body{ padding:28px 28px 32px; display:flex; flex-direction:column; gap:14px; flex:1 }
.room h3{
  margin:0; font-family:var(--gh-card-family, var(--serif)); font-weight:400;
  font-size:calc(var(--gh-card-scale, 1) * 30px); letter-spacing:-.005em; color:var(--navy);
}
.room .meta{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone-dark);
  padding:0; margin:0;
}
.room .meta li{ list-style:none }
.room .meta li + li{ position:relative; padding-left:14px }
.room .meta li + li::before{
  content:""; position:absolute; left:0; top:50%;
  width:6px; height:1px; background:var(--stone);
}
.room .desc{
  font-size:15px; line-height:1.6; color:var(--stone-dark); flex:1;
  margin:0;
}
.room .view{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--navy); border-bottom:1px solid var(--navy);
  align-self:flex-start; padding-bottom:5px;
  transition:color .2s, border-color .2s;
}
.room:hover .view{ color:var(--gold); border-color:var(--gold) }

/* ===================================================================
   EVERY-VARIANT story-split — full-bleed dark editorial split.
   Used by gh/story-split when section_tag="every" (rooms index "every
   room", about sustainability, etc.).
=================================================================== */
.every{
  background:var(--navy);
  color:var(--cream);
}
.every-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height:600px;
}
.every-img{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.every-text{
  padding: clamp(64px, 8vw, 120px) clamp(32px, 6vw, 96px);
  display:flex; flex-direction:column; justify-content:center; gap:28px;
}
.every-text .kicker{ color:rgba(245,240,232,.6) }
.every-text .kicker::before{ background:rgba(245,240,232,.4) }
.every-text h2.display{ color:var(--cream); max-width:18ch }
.every-text .body-copy{ color:rgba(245,240,232,.78) }

/* ===================================================================
   QUOTE — centred testimonial on cream.
   Used by gh/quote on any Lough page.
=================================================================== */
.quote-sec{ background:var(--cream); text-align:center }
.quote-sec .sec-inner{ display:flex; flex-direction:column; align-items:center; gap:28px }
blockquote.q{
  margin:0; max-width:36ch;
  font-family:var(--gh-quote-family, var(--serif)); font-style:italic;
  font-size:calc(var(--gh-quote-scale, 1) * clamp(26px, 2.6vw, 36px)); line-height:1.3;
  color:var(--navy); text-wrap:balance;
}
blockquote.q .mark{
  color:var(--gold); font-style:normal;
  font-size:1.4em; line-height:0; vertical-align:-.18em; padding:0 .08em;
}
.q-by{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone-dark) }

/* ===================================================================
   ACCESS-VARIANT story-split — boxed image + text with CTA button.
   Used by gh/story-split when section_tag="sec access" (rooms index
   accessibility callout).
=================================================================== */
.access{ background:var(--cream-warm) }
.access-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:center;
}
.access-img{
  aspect-ratio: 4/3;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.access-text{ display:flex; flex-direction:column; gap:24px }

/* ===================================================================
   STORY-SPLIT — editorial image + text two-column.
   Used by gh/story-split on home (about), dining (provenance),
   weddings (exclusive use, civil ceremonies), etc.
   The image URL comes from the block's bg_image_url attribute
   (rendered as inline background-image on .story-img).
=================================================================== */
.story{ background:var(--cream-warm) }
.story-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:80px;
  align-items:center;
}
.story-img{
  aspect-ratio: 4/5;
  background:var(--stone) center/cover no-repeat;
  position:relative;
}
.story-img::after{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(245,240,232,.5); pointer-events:none;
}
.story-text{ display:flex; flex-direction:column; gap:28px }
.story-text h2{ margin-top:4px }
.story-text .since{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--serif); font-style:italic;
  color:var(--stone-dark);
  font-size:20px!important;
}
.story-text .since b{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:48px; color:var(--gold); letter-spacing:-.01em;
}

/* ===================================================================
   FAQ ACCORDION — kicker + heading + body + <details> list.
   Used by gh/faq-section + gh/faq-item. Native HTML accordion, no JS.
=================================================================== */
.faq-section{ background:var(--cream) }
.faq-section .sec-inner{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center }
.faq-section .body-copy{ max-width:60ch }
.faq-list{
  width:100%;
  max-width: 880px;
  margin: 24px auto 0;
  text-align:left;
}
.faq-item{
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  font-family: var(--gh-faq-family, var(--serif));
  font-size: calc(var(--gh-faq-scale, 1) * clamp(18px, 1.6vw, 22px));
  line-height: 1.4;
  color: var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::marker{ display:none }
.faq-q{ flex:1 }
.faq-toggle{
  flex: 0 0 auto;
  width: 16px; height: 16px;
  position: relative;
  transition: transform .25s ease;
}
.faq-toggle::before,
.faq-toggle::after{
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--navy);
}
.faq-toggle::after{ transform: rotate(90deg); transition: transform .25s ease }
.faq-item[open] .faq-toggle::after{ transform: rotate(0deg) }
.faq-item summary:hover{ color: var(--gold) }
.faq-item summary:hover .faq-toggle::before,
.faq-item summary:hover .faq-toggle::after{ background: var(--gold) }
/* faq.js drives the open/close animation by setting inline height on
   .faq-a-wrap and letting this transition do the rest. The wrap
   needs display: block to override the UA's display:none on closed
   <details> children, otherwise the script can't measure its
   scrollHeight when starting an open animation. */
.faq-item > .faq-a-wrap{
  display: block;
  overflow: hidden;
  height: 0;
  transition: height .3s ease;
}
.faq-item[open] > .faq-a-wrap{
  height: auto;
}
.faq-a{
  padding: 0 4px 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--stone-dark);
}
.faq-a p{ margin: 0 0 12px }
.faq-a p:last-child{ margin-bottom: 0 }
.faq-a a{
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 1px;
}
.faq-a a:hover{ color: var(--gold); border-color: var(--gold) }

/* ===================================================================
   MAP EMBED — 16:9 iframe inside a centred container.
   Used by Contact's "Find us" section (Google Maps iframe wrapped in
   .map-embed inside a .sec.find-us > .sec-inner).
=================================================================== */
.find-us .sec-inner{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center }
.map-embed{
  position:relative;
  width:100%;
  max-width: var(--max-wide);
  margin: 24px auto 0;
  aspect-ratio: 16/9;
  background: var(--navy-deep);
  overflow:hidden;
}
.map-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
}

/* ===================================================================
   VIDEO FEATURE — kicker + heading + 16:9 video grid.
   1 video → centred single tile; 2+ → responsive 2-col grid.
=================================================================== */
.video-feature{ background:var(--cream) }
.video-feature.alt{ background:var(--cream-warm) }
.video-feature .sec-inner{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center }
.video-feature .body-copy{ max-width:60ch }
.video-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  width:100%;
  max-width: var(--max-wide);
  margin: 24px auto 0;
}
.video-grid.is-single{ grid-template-columns: 1fr; max-width: 900px }
.video-tile{
  aspect-ratio: 16/9;
  background:var(--navy-deep);
  overflow:hidden;
  position:relative;
}
.video-tile iframe{
  width:100%; height:100%; border:0; display:block;
}
@media (max-width: 800px){
  .video-grid{ grid-template-columns: 1fr }
}

/* ===================================================================
   GALLERY — navy band, tile grid, zoom hover
   Used by gh/room-gallery on any Lough page (lightbox JS enqueued
   site-wide; bails when no .gallery-tile present).
=================================================================== */
.gallery{
  background:var(--navy);
  padding: clamp(56px, 7vh, 88px) clamp(32px,5vw,56px);
}
/* When the gallery sits directly under the navy room-hero (single-room
   pages), drop the top padding so the two navy bands read as one. */
.room-hero + .gallery{ padding-top: 0 }
.gallery-grid{
  max-width: var(--max-wide);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-tile{
  aspect-ratio: 4/3;
  background:var(--stone) center/cover no-repeat;
  cursor:zoom-in;
  position:relative;
  overflow:hidden;
}
.gallery-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s ease;
}
.gallery-tile:hover img{ transform:scale(1.04) }
.gallery-cap{
  max-width: var(--max-wide); margin: 22px auto 0;
  text-align:center;
  font-family:var(--sans);
  font-size:11px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color: rgba(245,240,232,.5);
}

/* ===================================================================
   CLOSING CTA — navy band, centred copy, light-on-dark
=================================================================== */
.close{
  background:var(--navy-deep);
  color:var(--cream);
  text-align:center;
}
.close .sec-inner{ display:flex; flex-direction:column; align-items:center; gap:28px }
.close .kicker{ color:rgba(245,240,232,.55); justify-content:center }
.close .kicker::before,
.close .kicker.center::after{ background:rgba(245,240,232,.35) }
.close h2.display{ color:var(--cream); max-width:18ch }
.close h2.display em{ color:var(--cream); opacity:.85 }
.close .body-copy{ color:rgba(245,240,232,.75); max-width:50ch }
.close .cta-row{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px;
}

/* ===================================================================
   FOOTER
=================================================================== */
footer.ft{
  background:var(--navy-deep);
  color:rgba(245,240,232,.7);
  padding: 80px 32px 40px;
  font-family: var(--gh-footer-family, var(--sans));
  font-size: calc(var(--gh-footer-scale, 1) * 14px);
}
.ft-inner{ max-width:var(--max); margin:0 auto }
.ft-top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:48px; border-bottom:1px solid rgba(245,240,232,.12);
}
.ft-brand{
  font-family:var(--gh-footer-family, var(--sans));
  font-size:calc(var(--gh-footer-scale, 1) * 18px);
  letter-spacing:.42em;
  text-transform:uppercase; color:var(--cream); margin-bottom:14px;
  font-weight:500;
}
.ft-tag{
  font-family:var(--gh-footer-family, var(--serif))!important;
  font-style:italic;
  font-size:calc(var(--gh-footer-scale, 1) * 18px);
  color:rgba(245,240,232,.6); max-width:30ch;
}
.ft-col h4{
  font-family:var(--gh-footer-family, var(--sans));
  font-size:calc(var(--gh-footer-scale, 1) * 10.5px);
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(245,240,232,.5); margin:0 0 14px; font-weight:500;
}
.ft-col ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
  font-size:calc(var(--gh-footer-scale, 1) * 14px);
}
.ft-col a:hover{ color:var(--gold) }
.ft-bot{
  display:flex; justify-content:space-between; gap:24px; padding-top:32px;
  font-size:calc(var(--gh-footer-scale, 1) * 11px);
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,240,232,.45);
}

/* ===================================================================
   RESPONSIVE
   (Header responsive rules live in header-global.css.)
=================================================================== */
@media (max-width: 980px){
  .ft-top{ grid-template-columns:1fr 1fr; gap:32px }
  .sec{ padding:80px 24px }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr) }
  .story-grid{ grid-template-columns: 1fr; gap:48px }
  .intro-grid, .every-grid, .access-grid{ grid-template-columns:1fr; gap:48px }
  .rooms-grid{ grid-template-columns:1fr }
  .every-img{ min-height:320px }
  .glance{ border-left:0; border-top:1px solid var(--rule) }
  .rooms-head{ flex-direction:column; align-items:flex-start }
}
@media (max-width: 600px){
  .ft-top{ grid-template-columns:1fr }
  .gallery-grid{ grid-template-columns: 1fr }
}