: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);
  --hero-img:    url(/wp-content/uploads/2025/04/DJI_0021-scaled.jpg);

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

  --max: 1240px;

  --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 / .menu-btn / .brand* / .btn-book / .acts / .loc) lives
   in header-global.css — loaded on every page, not just home. */

/* Generic btn used in body sections */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 22px;
  font-family:var(--sans);
  font-size:var(--elevenpx); letter-spacing:.32em; text-transform:uppercase;
  border:1px solid rgba(245,240,232,.4);
  background:transparent; color:var(--cream);
  border-radius:0;
  font-weight:500;
  transition:background .2s, border-color .2s, color .2s;
}
.btn:hover{ background:rgba(245,240,232,.08); border-color:var(--cream) }
.btn-primary{
  background:var(--cream); border-color:var(--cream); color:var(--navy-deep);
}
.btn-primary:hover{ background:#fff }

/* ===================================================================
   HERO — full-bleed lough, centred rotating tagline, availability widget
=================================================================== */
.hero{
  position:relative;
  background:var(--navy);
  color:var(--cream);
  min-height: 100vh;
  overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column;
}
.hero-img{
  position:absolute; inset:0;
  background-image: var(--hero-img);
  background-size:cover;
  background-position:center 50%;
  filter:saturate(1.0) brightness(1.0);
  transform:scale(1.03);
  z-index:0;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,26,38,.40) 0%, rgba(20,26,38,.08) 30%, rgba(20,26,38,.35) 75%, rgba(20,26,38,.75) 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(140px, 18vh, 220px) 32px 24px;
  max-width: 1640px;
  margin: 0 auto;
  width:100%;
}

.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;
}
/* No default ::before — let shared.css's .eyebrow.left / .eyebrow.both
   modifier classes decide whether to render the rule(s). */

.hero-rotator{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px, 5.8vw, 92px);
  line-height:1.06;
  letter-spacing:-0.014em;
  max-width: 26ch;
  color:var(--cream);
  display:grid;
  min-height: 2.2em;
  margin: 0 auto;
  text-wrap:balance;
}
.hero-rotator .line{
  grid-area: 1 / 1;
  opacity:0; transform:translateY(14px);
  transition:opacity .9s ease, transform .9s ease;
}
.hero-rotator .line.is-active{ opacity:1; transform:translateY(0) }
.hero-rotator em{ font-style:italic; color:var(--cream); font-weight:400 }

/* Availability widget — cream parchment card */
.avail{
  margin-top: clamp(36px, 6vh, 64px);
  width:min(880px, 100%);
  background: var(--cream);
  color: var(--navy-deep);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.45);
  padding: 26px 40px 32px;
  text-align:left;
}
.avail-head{
  text-align:center;
  font-family:var(--sans);
  font-size:var(--elevenpx);
  font-weight:500;
  letter-spacing:.36em;
  text-transform:uppercase;
  color: var(--stone-dark);
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
  margin-bottom:18px;
}
.avail-fields{
  display:grid;
  grid-template-columns: 1.4fr 1.4fr .8fr .8fr .8fr;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom:1px solid var(--rule);
  margin-bottom:22px;
}
.avail-field{ display:flex; flex-direction:column; gap:6px; cursor:pointer }
.avail-field .lab{
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--gold);
}
.avail-field .val{
  font-family:var(--serif);
  font-style:italic;
  font-size:24px;
  line-height:1.1;
  color: var(--navy-deep);
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.avail-field input.val{ font-family: var(--sans); font-style: normal; font-size: 17px; }
.avail-field select.val{ appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.avail-field .val:focus{ outline: 2px solid var(--gold); outline-offset: 4px; }
.avail-cta{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:54px;
  background: var(--navy-deep);
  color: var(--cream);
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  border:0;
  cursor:pointer;
  text-decoration: none;
  transition:background .2s;
}
.avail-cta:hover{ background: var(--navy) }
.avail-foot{
  margin-top:14px;
  text-align:center;
  font-family:var(--sans);
  font-size:12px;
  color: var(--stone-dark);
}
.avail-foot a{
  color: var(--navy-deep);
  text-decoration:underline;
  text-underline-offset: 3px;
  text-decoration-thickness:1px;
}
.avail-foot a:hover{ color: var(--gold) }

/* Accolade marquee strip at base of hero */
.hero-marquee{
  position:relative; z-index:2;
  border-top: 1px solid rgba(245,240,232,.18);
  background: rgba(20,26,38,.40);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cream);
  padding: 20px 32px;
  font-family:var(--sans);
  font-size:var(--elevenpx);
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.hero-marquee-inner{
  max-width: 1640px;
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-marquee .item{
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(245,240,232,.88);
  white-space:nowrap;
}
.hero-marquee .item .stars{ color: var(--gold); letter-spacing:.05em; font-family:var(--serif); font-size:13px }
.hero-marquee .sep{
  color: rgba(245,240,232,.45);
  font-size:8px;
}

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

.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);
}

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

.lede{
  font-family:var(--serif) !important;
  font-size:22px;
  line-height:1.45;
  color:var(--navy);
  max-width: 56ch;
  font-style:italic;
  font-weight:400;
}

.body-copy{
  font-size:16px; line-height:1.75;
  color:var(--stone-dark);
  max-width:60ch;
}

.link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--elevenpx); 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) }

/* .intro centring (text-align, flex sec-inner, .lede) lives in
   shared.css now — applies everywhere gh/intro is used, not just
   the home page. */

/* Story-split (.story / .story-grid / .story-img / .story-text) lives
   in shared.css now — used on home, dining, weddings, etc. */

/* ROOMS */
.rooms{ background:var(--cream) }
.rooms-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:64px;
}
.rooms-head .link{ flex-shrink:0; margin-bottom:8px }
.rooms-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.room{
  display:flex; flex-direction:column;
  background:var(--cream-warm);
  border:1px solid var(--rule);
  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(--serif); font-weight:400;
  font-size:30px; letter-spacing:-.005em; color:var(--navy);
}
.room .meta{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  font-size:var(--elevenpx); letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone-dark);
}
.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 .meta{ padding:0; margin:0 }
.room .desc{ font-size:15px; line-height:1.6; color:var(--stone-dark); flex:1 }
.room .book{
  font-size:var(--elevenpx); 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 .book:hover{ color:var(--gold); border-color:var(--gold) }

/* DINE - editorial split */
.dine{
  background:var(--navy);
  color:var(--cream);
  padding:0;
}
.dine-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height:640px;
}
.dine-img{
  background:url(/wp-content/uploads/2019/12/GhanHouse_Beacon13_EmmaStewartPhotography-1040.jpg) center/cover no-repeat;
}
.dine-text{
  padding: clamp(64px, 8vw, 120px) clamp(32px, 6vw, 96px);
  display:flex; flex-direction:column; justify-content:center; gap:28px;
}
.dine-text .kicker{ color:rgba(245,240,232,.6) }
.dine-text .kicker::before{ background:rgba(245,240,232,.4) }
.dine-text h2.display{ color:var(--cream); max-width:18ch }
.dine-text h2.display em{ color:var(--gold) }
.dine-text .body-copy{ color:rgba(245,240,232,.75) }
.dine-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
.dine-cta .btn-primary{ color:var(--navy-deep) }

/* TESTIMONIAL */
.review{ background:var(--cream); text-align:center }
.review .sec-inner{ display:flex; flex-direction:column; align-items:center; gap:36px }
.review-meta{
  font-family:var(--sans); font-size:14px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--stone-dark);
}
.review-stars{
  font-family:var(--serif); font-size:28px; color:var(--gold); letter-spacing:.2em;
}
blockquote.q{
  margin:0; max-width:34ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(28px, 3vw, 40px); line-height:1.25;
  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:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone-dark) }

/* VOUCHERS */
.vouchers{
  background:var(--cream-warm);
}
.vouch-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center;
}
.vouch-card{
  background:var(--navy);
  color:var(--cream);
  padding:56px 48px;
  position:relative;
  aspect-ratio: 3/2;
  display:flex; flex-direction:column; justify-content:space-between;
}
.vouch-card::after{
  content:""; position:absolute; inset:12px; border:1px solid rgba(245,240,232,.25); pointer-events:none;
}
.vouch-card .corner{
  font-family:var(--serif); font-size:var(--elevenpx); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}
.vouch-card .gift{
  font-family:var(--serif); font-size:48px; line-height:1.05; font-style:italic;
}
.vouch-card .gift b{ font-style:normal; font-weight:500; color:var(--gold) }
.vouch-card .from{ font-size:var(--elevenpx); letter-spacing:.24em; text-transform:uppercase; opacity:.7 }
.vouch-text{ display:flex; flex-direction:column; gap:24px }
.vouch-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px }
.vouch-cta .btn{ color:var(--navy); border-color:var(--navy) }
.vouch-cta .btn:hover{ background:var(--navy); color:var(--cream) }
.vouch-cta .btn-primary{ background:var(--navy); color:var(--cream) }
.vouch-cta .btn-primary:hover{ background:transparent; color:var(--navy); border-color:var(--navy) }

/* VISIT — full-bleed 50/50 split mirroring the .dine pattern.
   Text panel on the left, Mournes/Lough photo filling the right half. */
.visit{
  background:var(--cream);
  color:var(--navy);
  padding:0;
}
.visit-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height:640px;
}
.visit-text{
  /* Left padding tracks the page's content gutter so the dl aligns with the
     centred content elsewhere on the page; right padding stays a comfortable
     reading inset. Falls back to clamp() on viewports narrower than --max. */
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
  padding-right: clamp(32px, 6vw, 96px);
  padding-left: max(clamp(32px, 6vw, 96px), calc(50vw - var(--max, 1240px) / 2));
  display:flex; flex-direction:column; justify-content:center; gap:24px;
}
.visit-text dl{ margin:0; display:grid; gap:18px }
.visit-text dt{
  font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--stone-dark);
  margin-bottom:4px;
}
.visit-text dd{
  margin:0; font-family:var(--serif); font-size:22px; line-height:1.35; color:var(--navy);
}
.visit-text dd small{ font-family:var(--sans); font-size:14px; color:var(--stone-dark); display:block; margin-top:4px; line-height:1.55 }
.visit-img{
  background:url(/wp-content/uploads/2025/04/DJI_0021-scaled.jpg) center/cover no-repeat;
}
@media (max-width: 980px){
  .visit-grid{ grid-template-columns: 1fr }
  .visit-img{ min-height: 320px; }
}

/* FOOTER */
footer.ft{
  background:var(--navy-deep);
  color:rgba(245,240,232,.7);
  padding: 80px 32px 40px;
}
.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(--sans); font-size:18px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--cream); margin-bottom:14px;
  font-weight:500;
}
.ft-tag{ font-family:var(--serif); font-style:italic; font-size:18px; color:rgba(245,240,232,.6); max-width:30ch }
.ft-col h4{
  font-size: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:14px }
.ft-col a:hover{ color:var(--gold) }
.ft-bot{
  display:flex; justify-content:space-between; gap:24px; padding-top:32px;
  font-size:var(--elevenpx); letter-spacing:.22em; text-transform:uppercase; color:rgba(245,240,232,.45);
}

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width: 980px){
  /* Responsive header rules live in header-global.css. */
  .visit-grid, .vouch-grid{ grid-template-columns:1fr; gap:48px }
  .rooms-grid{ grid-template-columns:1fr }
  .dine-grid{ grid-template-columns:1fr }
  .dine-img{ min-height:320px }
  .ft-top{ grid-template-columns:1fr 1fr; gap:32px }
  .sec{ padding:80px 24px }
  .avail-fields{ grid-template-columns:1fr; gap:18px; }
  .hero-marquee-inner{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap }
}
@media (max-width: 600px){
  .hero-inner{ padding:120px 22px 24px }
  .avail{ padding:22px 22px 26px }
  .ft-top{ grid-template-columns:1fr }
  .rooms-head{ flex-direction:column; align-items:flex-start }
  blockquote.q{ font-size:24px }
  .vouch-card{ padding:36px 28px }
  .vouch-card .gift{ font-size:34px }
}