/* Scarlett Begonia - Direction C.
   Generated from the approved HTML prototype by build_wp.py.
   Hero background rules live in inc/assets.php so image URLs stay
   dynamic; everything else is here. Do not hand-edit - regenerate. */

@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}

:root{
  --ink:#2b333b; --soft:#56636f; --muted:#7d8b97;
  --white:#fff; --off:#f7f9fa; --line:#dfe5ea;
  --door:#64686a; --blue:#68849f; --scarlet:#cf1f33;
  /* Accent grey, as specified. The label is ink rather than white: white on this
     grey measures 2.24:1, below even the 3:1 large-text floor, while ink is
     5.73:1. Hover lightens rather than darkens for the same reason — darkening
     under a dark label fell to 4.28:1; this is 6.50:1. */
  --grey:#a8afac; --grey-hv:#b4bab8;
  /* Darkened version of the blue-grey, for the address strip. */
  --strip:#39434d;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --t-xs:.75rem; --t-sm:.9375rem; --t-base:1.0625rem;
  --t-md:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --t-head:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  --t-hero:clamp(1.75rem,1.15rem + 2.7vw,3.25rem);
  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:1360px;
  --nav:1rem;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);
  font-size:var(--t-base);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}


/* ---------- desktop dropdown ---------- */
.hd nav li{position:relative}
.caret{width:11px;height:8px;margin-left:.4rem;flex-shrink:0;
  transition:transform .18s ease}
.has-sub > a{cursor:pointer}
/* display:block, and scoped to beat `.hd nav ul{display:flex}` (0,2,1) which
   the submenu otherwise inherits — that rule was laying the five menu links out
   in a horizontal row instead of a dropdown. */
.hd nav ul.sub{display:block}
.sub{position:absolute;top:100%;left:0;min-width:17rem;
  list-style:none;margin:0;padding:.35rem 0;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(43,51,59,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:5}
/* Opens on hover, on keyboard focus, and on click — the click path is what
   makes it usable on a touchscreen at desktop width, where hover never fires. */
.has-sub:hover > .sub,
.has-sub:focus-within > .sub,
.has-sub.is-open > .sub{opacity:1;visibility:visible;transform:none}
.has-sub:hover > a .caret,
.has-sub.is-open > a .caret{transform:rotate(180deg)}
.sub a{display:flex;align-items:center;min-height:44px;padding:.5rem 1.15rem;
  font-size:var(--nav);font-weight:450;letter-spacing:.02em;color:var(--soft);
  text-decoration:none;white-space:nowrap}
.sub a:hover{background:var(--off);color:var(--ink)}

/* ---------- mobile menu panel ---------- */
.mnav{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  background:var(--white);transform:translateX(100%);visibility:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.mnav.is-open{transform:none;visibility:visible}
.mnav__head{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.35rem var(--gut);border-bottom:1px solid var(--line)}
.mnav__head img{width:min(60vw,250px)}
.mnav__close{width:52px;height:52px;flex-shrink:0;border:0;background:none;
  cursor:pointer;position:relative}
.mnav__close::before,.mnav__close::after{content:"";position:absolute;
  left:50%;top:50%;width:26px;height:3px;background:var(--ink);
  transform-origin:center}
.mnav__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.mnav__close::after{transform:translate(-50%,-50%) rotate(-45deg)}

.mnav ul{list-style:none;margin:0;padding:0}
.mnav > nav{padding:.5rem var(--gut) 0}
.mnav > nav > ul > li{border-bottom:1px solid var(--line)}
.mnav > nav > ul > li > a,
.m-toggle{display:flex;align-items:center;justify-content:space-between;
  width:100%;min-height:60px;padding:.9rem 0;
  background:none;border:0;font:inherit;font-size:1.25rem;font-weight:450;
  letter-spacing:.02em;color:var(--ink);text-decoration:none;text-align:left;
  cursor:pointer}
.m-toggle .caret{width:14px;height:10px}
.m-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.m-sub{padding:0 0 .9rem .9rem;border-left:2px solid var(--line);
  margin-bottom:.9rem}
.m-sublink{display:flex;align-items:center;min-height:52px;padding:.55rem 0;
  font-size:1.0625rem;color:var(--soft);text-decoration:none}
.m-sublink:hover{color:var(--ink)}

/* Reservations lives here on phones. Hiding it entirely, as the reference
   does, buries the most valuable action on the device most people use. */
.mnav__cta{padding:1.75rem var(--gut) .5rem}
.mnav__cta .resv{display:flex;width:100%;margin-left:0;min-height:56px;
  font-size:var(--t-base)}
.mnav__foot{margin-top:auto;padding:1.75rem var(--gut) 2.25rem;
  text-align:center;color:var(--soft);font-size:var(--t-sm);line-height:1.9}
.mnav__foot a{color:var(--ink);text-decoration:none}

body.menu-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .mnav,.sub,.caret{transition:none}
}


/* ---------- 1. address strip ---------- */
.topwrap{display:contents}
.strip .mbr{display:none}
.strip{background:var(--strip);color:rgba(255,255,255,.94)}
.strip .in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.35rem 2rem;padding:.7rem var(--gut);text-align:center}
.strip a{text-decoration:none;font-size:var(--t-sm);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase}
.strip a:hover{text-decoration:underline}

/* ---------- 2. header ---------- */
.hd{position:sticky;top:0;z-index:90;background:var(--white);
  border-bottom:1px solid var(--line)}
.hd .in{display:flex;align-items:center;gap:clamp(1.25rem,4.2vw,9rem);
  padding:1.15rem var(--gut)}
.brand{flex-shrink:0;line-height:0}
.brand img{width:clamp(210px,21vw,320px)}
.hd nav{margin-left:auto}
.hd nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.hd nav a{display:flex;align-items:center;min-height:44px;
  padding:.35rem clamp(.3rem,.72vw,.7rem);
  font-size:var(--nav);font-weight:450;letter-spacing:.04em;color:var(--soft);
  text-decoration:none;white-space:nowrap}
.hd nav a:hover{color:var(--blue)}
.hd nav a.resv,
.resv{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  margin-left:clamp(.5rem,1.1vw,1.1rem);padding:.45rem clamp(.8rem,1.25vw,1.1rem);
  background:var(--grey);border:1.5px solid var(--grey);color:var(--ink);
  font-size:var(--t-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.hd nav a.resv:hover,
.resv:hover{background:var(--grey-hv);border-color:var(--grey-hv);color:var(--ink)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;
  cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin-inline:auto;
  box-shadow:0 -7px 0 var(--ink),0 7px 0 var(--ink)}
/* Full navigation only where it genuinely fits. Measured: with the fluid
   sizing above, the row clears the viewport from 1190px up; 1200 leaves a
   margin. A 1280px laptop still gets the full menu rather than a hamburger. */
@media(max-width:1199px){.hd nav,.resv{display:none}.burger{display:block}}

/* ---------- header + strip on phones ----------
   Following the reference: the header comes first and the address strip sits
   underneath it, not above. The phone number drops out — it is already a tap
   target in the hero and the footer, and two lines of chrome above the
   photograph is a lot on a small screen. The address loses the uppercase and
   letter-spacing too; at this size sentence case is easier to read.
   The header goes static here: a sticky bar costs vertical space a phone
   cannot spare, and display:contents above keeps desktop sticky intact. */
@media(max-width:767px){
  .topwrap{display:flex;flex-direction:column}
  .hd{position:static;order:1;border-bottom:0}
  .strip{order:2}
  .hd .in{padding-block:1.35rem}
  .brand img{width:min(76vw,320px)}
  .burger{width:52px;height:52px}
  .burger span{width:30px;height:3px;box-shadow:0 -9px 0 var(--ink),0 9px 0 var(--ink)}
  .strip .in{padding-block:.95rem}
  .strip .phone{display:none}
  .strip a{font-size:clamp(1rem,4.1vw,1.25rem);letter-spacing:0;
    text-transform:none;font-weight:400;line-height:1.4}
  /* Break after the street rather than letting the ZIP orphan onto its own
     line, which is what natural wrapping does at this width. */
  .strip .mbr{display:inline}
}

/* ---------- 3. hero ---------- */


.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 120% 45% at 50% 78%,rgba(26,30,34,.62) 0%,rgba(26,30,34,.3) 55%,rgba(26,30,34,0) 78%),
  linear-gradient(180deg,rgba(26,30,34,.28) 0%,rgba(26,30,34,0) 20%),
  rgba(26,30,34,.14)}
.hero .wrap{position:relative;width:100%}
.hero h1{font-size:var(--t-hero);font-weight:500;letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;color:#fff;margin:0 0 1rem;
  text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 26px rgba(0,0,0,.5)}
.hero .hours{display:inline-flex;align-items:center;gap:.9rem;margin:0;font-size:var(--t-sm);
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.96);
  text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.5)}
.hero .hours::before,.hero .hours::after{content:"";width:clamp(1.5rem,4vw,2.75rem);
  height:1px;background:rgba(255,255,255,.55)}

/* ---------- centred statement ---------- */
.say{padding-block:clamp(3.5rem,7vw,6rem);text-align:center}
.say h2{font-size:var(--t-head);font-weight:500;letter-spacing:.05em;line-height:1.25;
  text-transform:uppercase;margin:0 auto 1.5rem;max-width:22ch}
.say p{font-size:var(--t-md);color:var(--soft);max-width:64ch;margin:0 auto;line-height:1.6}

/* ---------- alternating sections ---------- */
.alt{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.alt{grid-template-columns:1fr 1fr;align-items:stretch}}
.alt__img{background:var(--off)}
/* Square crop rather than the full portrait frame: a third shorter, and the
   only ratio tested that still contains the whole subject. A 3:2 landscape
   crop cut the bottom bells off entirely, so the focal point is set per image
   from where the detail actually sits, not from the centre. */
.alt__img img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;
  object-position:var(--focal,50% 50%);display:block}
@media(max-width:899px){.alt__img img{aspect-ratio:4/3}}
.alt__body{display:flex;flex-direction:column;justify-content:center;text-align:center;
  padding:clamp(3rem,6vw,5.5rem) clamp(1.5rem,5vw,4.5rem)}
/* reversed rows put the image second in the source but first visually on desktop */
@media(min-width:900px){
  .alt--rev .alt__img{order:2}
  .alt--rev .alt__body{order:1}
}
.alt__inner{max-width:34rem;margin-inline:auto;width:100%}

/* section heading with a rule above and below */
.rule-head{margin:0 0 1.5rem}
.rule-head h2{font-size:var(--t-head);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2;margin:0;padding-block:1.1rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.alt p,.menus p{color:var(--soft);margin:0 0 1.25rem;line-height:1.7}
.alt .addr{font-size:var(--t-md);line-height:1.9;color:var(--ink)}
.more{display:inline-block;margin-top:.4rem;font-size:var(--t-sm);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:2px}
.more:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- full-width image strip (breaks the alternating pattern) ---------- */
.band{padding-block:0}
.band__strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.band__strip img{width:100%;height:clamp(15rem,23vw,22rem);object-fit:cover}
/* On a phone a five-across strip gives five slivers; show one image instead.
   In WordPress this becomes a slideshow or a randomised pick. */
@media(max-width:767px){
  .band__strip{grid-template-columns:1fr}
  .band__strip img{height:18rem}
  .band__strip img:not(:first-child){display:none}
}
.band__cap{text-align:center;padding:clamp(2.25rem,4vw,3.25rem) var(--gut)
  clamp(3rem,6vw,4.5rem)}
.band__cap .rule-head{max-width:34rem;margin-inline:auto}
.band__cap p{color:var(--soft);max-width:52ch;margin:0 auto 1.25rem}

/* The five menus, laid out in one horizontal row. They wrap rather than shrink,
   and each stays a full-height tap target. */
.menulist{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.25rem 0;list-style:none;margin:0 auto 1.5rem;padding:0;max-width:62rem}
.menulist li{display:flex;align-items:center}
.menulist li + li::before{content:"";width:1px;height:1.1em;margin-inline:1.1rem;
  background:var(--line)}
.menulist a{display:inline-flex;align-items:center;min-height:44px;padding:.3rem 0;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);white-space:nowrap;
  border-bottom:1px solid transparent}
.menulist a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.fineprint{font-size:var(--t-sm)}

@media(max-width:760px){
  .menulist{flex-direction:column;gap:0}
  .menulist li{width:100%;justify-content:center}
  .menulist li + li::before{display:none}
  .menulist a{border-top:1px solid var(--line);width:100%;justify-content:center}
}

/* ---------- contact ---------- */
.contact{background:var(--off);padding-block:clamp(3.5rem,7vw,6rem);
  scroll-margin-top:6rem}
.contact .rule-head{max-width:34rem;margin-inline:auto;text-align:center}
.cform{max-width:44rem;margin:2.5rem auto 0}
.fr{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:620px){.fr{grid-template-columns:1fr 1fr}}
.f{margin-bottom:1.35rem}
.f label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:.45rem}
.f i{font-style:normal;color:var(--blue)}
.f input,.f textarea{width:100%;min-height:48px;padding:.7rem .9rem;font:inherit;
  font-size:1rem;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:2px}
.f textarea{min-height:8.5rem;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--ink)}
.f .h{display:block;margin-top:.35rem;font-size:var(--t-xs);color:var(--muted)}
.submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.7rem 2.2rem;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  font:inherit;font-size:var(--t-sm);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;border-radius:2px}
.submit:hover{background:transparent;color:var(--ink)}

/* ---------- instagram strip ---------- */
.ig .band__cap a{font-size:var(--t-head);font-weight:500;letter-spacing:.1em;
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.35rem}
.ig .band__cap a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.86);
  padding-block:clamp(3rem,6vw,4.5rem) 1.75rem;text-align:center}
footer .mark{width:250px;margin:0 auto 1.4rem}
footer p{margin:0 0 .5rem}
footer a{color:#fff}
.social{display:flex;justify-content:center;gap:.6rem;list-style:none;
  margin:1.6rem 0 0;padding:0}
.social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.5);border-radius:50%}
.social a:hover{background:#fff} .social a:hover svg{fill:var(--ink)}
.social svg{width:18px;height:18px;fill:#fff}
.legal{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:var(--t-xs);color:rgba(255,255,255,.62)}

/* ---------- interior page header, image band ----------
   Deliberately short: the reference runs about 545px, which eats most of a
   laptop screen before any content appears. 380px on desktop and 200px on a
   phone gives the photograph presence without pushing the page down. Focal
   points are measured per image, not centred, so nothing important is cropped
   out at the shallow ratio. */
.phead--img{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(200px,26vw,380px);background:var(--ink);background-size:cover;
  background-repeat:no-repeat;text-align:center;padding:2rem var(--gut)}
/* The ellipse is 118% wide because a long title ("CONTACT & LOCATION") runs
   past the edge of a 90% ellipse and its outer letters land on unscrimmed
   photo — the same failure the hero headline had. Measured worst-pixel
   contrast behind the glyph box is >=3:1 (large-text threshold) on all four
   bands at both 390px and 1440px. */
.phead--img::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 118% 78% at 50% 50%,rgba(24,28,31,.60) 0%,rgba(24,28,31,.46) 55%,rgba(24,28,31,.30) 100%),
  linear-gradient(180deg,rgba(24,28,31,.34) 0%,rgba(24,28,31,0) 34%)}
.phead--img h1{position:relative;margin:0;color:#fff;
  font-size:clamp(1.5rem,1.05rem + 1.9vw,2.5rem);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 26px rgba(0,0,0,.5)}
/* On a phone the longest titles ("PRIVATE EVENTS", "CONTACT & LOCATION") run
   nearly edge to edge at .16em tracking. Tightening to .10em and adding side
   padding buys back the margin without shrinking the type. */
@media(max-width:767px){.phead--img{min-height:200px;padding:2rem 1.5rem}
  .phead--img h1{letter-spacing:.07em}}

/* ---------- interior page header ---------- */
.phead{padding:clamp(3rem,6vw,5rem) var(--gut) clamp(2rem,4vw,3rem);text-align:center}
.phead .rule-head{max-width:38rem;margin-inline:auto}
.phead p{max-width:56ch;margin:0 auto;color:var(--soft);font-size:var(--t-md);
  line-height:1.6}
.phead .fine{font-size:var(--t-sm)}

.psec{padding-block:clamp(2.5rem,5vw,4rem)}
.psec--alt{background:var(--off)}

/* ---------- menus list ---------- */
.mlist{max-width:54rem;margin-inline:auto;list-style:none;padding:0}
.mlist > li{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.5rem 1.5rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line)}
.mlist > li:first-child{border-top:1px solid var(--line)}
.mlist h3{margin:0;font-size:var(--t-md);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase}
.mlist .links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;
  margin:0;padding:0}
.mlist .links a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mlist .links a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.mlist .stale{display:inline-block;margin-left:.6rem;padding:.1rem .45rem;
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line)}

/* ---------- rooms ---------- */
.rooms{max-width:46rem;margin:0 auto;list-style:none;padding:0}
.rooms li{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.25rem 1.5rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.rooms li:first-child{border-top:1px solid var(--line)}
.rooms b{font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:var(--t-sm)}
.rooms span{color:var(--soft);font-size:var(--t-sm)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:820px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ---------- prose ---------- */
.prose{max-width:60ch;margin-inline:auto}
.prose p{margin:0 0 1.15rem;color:var(--soft);line-height:1.75}
.prose strong{color:var(--ink);font-weight:600}
.prose .lead{font-size:var(--t-md);color:var(--ink)}

/* ---------- tap targets ----------
   Five interactive elements measured under 44px tall: the phone number inside
   the address block, the two section CTAs, the Instagram handle, and the logo
   link. Width was fine in each case; only height fell short. */
.addr a{display:inline-flex;align-items:center;min-height:44px}
.more{min-height:44px}
.ig .band__cap a{display:inline-flex;align-items:center;min-height:44px}
.brand{display:inline-flex;align-items:center;min-height:44px}

/* underlined text link used as a section CTA */
.btn-line{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}
.btn-line:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* consent checkbox: the control and its long label aligned at the top */
.consent{display:flex;align-items:flex-start;gap:.85rem;font-weight:400;
  font-size:var(--t-sm);line-height:1.65;color:var(--soft);cursor:pointer}
.consent input{width:22px;height:22px;min-height:22px;margin-top:.15rem;
  flex-shrink:0;accent-color:var(--blue)}


/* ---------- Gravity Forms ----------
   The contact form on the live site is a Gravity Form, not the static mock-up
   in the prototype. This styles it to match the design using structural
   selectors (label, input, textarea, submit) rather than Gravity's own theme
   classes, which changed in 3.0 and will change again. Anything not covered
   here falls back to Gravity's default, which is plain but not broken.

   Verify this block against the real form after Gravity Forms is updated -
   it is the one piece of the build that could not be tested before install. */
.gform_wrapper{max-width:44rem;margin:2.5rem auto 0}
.gform_wrapper .gform_fields{display:grid;gap:1.35rem;grid-template-columns:1fr}
.gform_wrapper .gfield_label{display:block;font-size:var(--t-sm);font-weight:600;
  margin-bottom:.45rem;color:var(--ink)}
.gform_wrapper .gfield_required{font-style:normal;color:var(--blue);font-weight:600}
.gform_wrapper input[type=text],.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],.gform_wrapper input[type=url],
.gform_wrapper textarea,.gform_wrapper select{width:100%;min-height:48px;
  padding:.7rem .9rem;font:inherit;font-size:1rem;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:2px}
.gform_wrapper textarea{min-height:8.5rem;resize:vertical}
.gform_wrapper input:focus,.gform_wrapper textarea:focus,
.gform_wrapper select:focus{outline:none;border-color:var(--ink)}
/* Gravity's sub-labels ("First", "Last", "Enter Email") */
.gform_wrapper .gform_fields .gfield_description,
.gform_wrapper .ginput_complex label{display:block;margin-top:.35rem;
  font-size:var(--t-xs);font-weight:400;color:var(--muted)}
/* Name and email are two-column on anything wider than a phone, matching the
   approved layout. Gravity ships its own grid; this only sets the columns. */
@media(min-width:620px){
  .gform_wrapper .ginput_complex{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
}
.gform_wrapper .gform_footer{margin-top:1.75rem}
.gform_wrapper .gform_button,.gform_wrapper input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.7rem 2.2rem;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  font:inherit;font-size:var(--t-sm);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;border-radius:2px}
.gform_wrapper .gform_button:hover,.gform_wrapper input[type=submit]:hover{
  background:transparent;color:var(--ink)}
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error textarea{
  border-color:var(--scarlet)}
.gform_wrapper .validation_message{margin-top:.4rem;font-size:var(--t-xs);
  color:var(--scarlet)}
.gform_confirmation_message{padding:1.25rem;background:var(--white);
  border:1px solid var(--line);text-align:center}


/* ---------- Elementor bridge ----------
   Applies only when a page body is rendered from an Elementor template. The
   PHP page templates emit the prototype's own markup and need none of this.

   Elementor inserts .elementor-container / .elementor-column /
   .elementor-widget-wrap / .elementor-widget-container between a section and
   its content. Descendant selectors survive that; layout and margins do not.
   These rules restore the three places it matters. */

/* Widgets carry their own margins. The design controls spacing at the section
   level, so zero them and let the section's padding do the work. */
.elementor-widget:not(:last-child){margin-bottom:0}
.hero .elementor-widget-container > *:last-child,
.say .elementor-widget-container > *:last-child,
.band__cap .elementor-widget-container > *:last-child{margin-bottom:0}

/* The prototype puts gutters and the 1360px cap on an inner .wrap div. Elementor
   has no equivalent, so the widget wrap takes on that job for the sections that
   relied on it. Sections that already carry their own horizontal padding
   (.band__cap, .phead--img) are left alone. */
.elementor-section.hero .elementor-widget-wrap,
.elementor-section.say .elementor-widget-wrap,
.elementor-section.contact .elementor-widget-wrap,
.elementor-section.psec .elementor-widget-wrap,
.elementor-section.phead .elementor-widget-wrap{max-width:var(--max);
  margin-inline:auto;padding-inline:var(--gut)}

/* Elementor 4 lays each widget out as a flex item, so the hero's hours line
   stretched to the full column width and its flanking rules ran to the screen
   edges instead of hugging the text. The widget becomes a centring wrapper and
   the treatment moves onto the paragraph inside it. */
.hero .hours{display:flex;justify-content:center}
.hero .hours::before,.hero .hours::after{content:none}
.hero .hours p{display:inline-flex;align-items:center;gap:.9rem;margin:0;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.5)}
.hero .hours p::before,.hero .hours p::after{content:"";
  width:clamp(1.5rem,4vw,2.75rem);height:1px;background:rgba(255,255,255,.55)}

/* The four-up gallery on Private Events, same grid-collapse story as .alt. */
.elementor-section.gal{display:block}
.elementor-section.gal > .elementor-container{max-width:none;flex-wrap:wrap;gap:10px}
.elementor-section.gal .elementor-column{padding:0}
.elementor-section.gal .elementor-widget-wrap{padding:0}
/* Elementor's own elementor-col-25 is a flat 25%, which plus the 10px gaps
   overflows the row and drops the fourth photo onto a second line - measured
   4x326 + 30 = 1334 in a 1304 container. The columns carry the gap in their
   own width instead. (The simulator had this rule; the shipped stylesheet did
   not, which is exactly the gap a simulation leaves.) */
.elementor-section.gal .elementor-column{width:calc(25% - 7.5px)}
.elementor-section.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
/* Two-up below 820px, matching the prototype. Elementor's own mobile rule
   would take these to one per row, which leaves the gallery very tall. */
@media(max-width:819px){
  .elementor-section.gal .elementor-column{width:calc(50% - 5px)}
}

/* ---------- base typography, defended ----------
   The UserWay accessibility widget loads two stylesheets from its own CDN
   (widget_base.css, widget_lazy.css) after everything else, and one of them
   restyles `body` with !important. Measured on the live site it pulled the
   base font size to 12px, which shrank the body copy on every page - most
   visibly on Donations, which is nothing but body copy. Cross-origin
   !important cannot be outranked by specificity, so this matches it.
   If UserWay is ever removed, these !important flags can go with it. */
html body{font-size:var(--t-base) !important;font-family:var(--body) !important;
  line-height:1.65 !important;color:var(--ink) !important}

/* The default WordPress widgets (Search, Recent Posts, Recent Comments,
   Archives, Categories, Meta) render inside <main> on every page, below the
   content. This design has no sidebar anywhere. They are emptied in
   Appearance > Widgets; this is the belt-and-braces in case any come back. */
main#content > .widget{display:none}

/* THE IMPORTANT ONE. The prototype lays these sections out with display:grid,
   with the two halves (or five strip images) as direct children. Under
   Elementor the only direct child is .elementor-container, so the whole row
   lands in the first grid track - measured at half width for .alt and a fifth
   for .band__strip, with everything inside shrunk to match. Elementor's own
   flex container does the splitting here, so the grid is switched off. */
.elementor-section.alt,
.elementor-section.band__strip{display:block}

/* The alternating rows. In the prototype the section is a two-column grid; in
   Elementor the container is already a flex row, so the section only needs to
   stop constraining width and let the two columns sit flush and equal-height. */
.elementor-section.alt > .elementor-container{max-width:none;align-items:stretch}
.elementor-section.alt .elementor-column{padding:0}
.elementor-section.alt .elementor-widget-wrap{padding:0}
.alt__img .elementor-widget-image,
.alt__img .elementor-widget-container{height:100%}
.alt__img .focal-bells img{object-position:49% 60%}
.alt__img .focal-patio img{object-position:44% 60%}
.alt__img .elementor-widget-image figure,
.alt__img figure.wp-caption{height:100%;margin:0}
/* Restores .alt__body's centring, which the prototype puts on the div itself.
   Three things had to be got right and each was wrong at first:

   - The padding is !important because `.elementor-section.alt
     .elementor-widget-wrap{padding:0}` above is more specific and was
     flattening it, so the text ran to the column edge.
   - flex-wrap has to be nowrap. Elementor's wrap is a wrapping flex
     container, and in a wrapping column the flex line is only as wide as its
     widest item - so `margin-inline:auto` had no free space to distribute and
     the 34rem block sat flush left instead of centred. Measured 792px against
     the prototype's 808px.
   - align-content, not just align-items, because the wrap governs the cross
     axis through align-content once wrapping is in play. */
.alt__body > .elementor-widget-wrap{display:flex;flex-direction:column;
  justify-content:center;height:100%;flex-wrap:nowrap;
  align-content:center;align-items:center}
.elementor-section.alt .alt__body > .elementor-widget-wrap{
  padding:clamp(3rem,6vw,5.5rem) clamp(1.5rem,5vw,4.5rem) !important}
.alt__body .elementor-widget{width:100%;max-width:34rem;margin-inline:auto}

/* The section CTA. In the prototype `.more` is the <a> itself, so its
   underline is the width of the label. In Elementor the class lands on the
   widget wrapper, so the same rule drew a full-column rule under the button -
   a horizontal line the design never had. The wrapper gives the border back
   and the label keeps it. */
.elementor-widget.more{border-bottom:0;min-height:0;display:block;
  padding-bottom:0;margin-top:.4rem}
/* Stacking is made explicit rather than relying on Elementor's own mobile
   rule. Its container is a nowrap flex row by default in some versions, which
   shrinks two full-width columns to half each instead of stacking them - it
   measured 195px per column on a 390px screen. Declaring both the wrap and the
   width here makes the result the same on every Elementor version. */
@media(max-width:899px){
  .elementor-section.alt > .elementor-container{flex-wrap:wrap}
  .elementor-section.alt .elementor-column{width:100%}
}

/* The five-across food strip: five image widgets in five columns, laid out by
   Elementor. The prototype's grid rule does not apply, so the column widths do
   the work and the height rule is re-pointed at the widget's img. */
.elementor-section.band__strip > .elementor-container{max-width:none;flex-wrap:nowrap}
.elementor-section.band__strip .elementor-column{padding:0}
.elementor-section.band__strip .elementor-widget-wrap{padding:0}
.elementor-section.band__strip img{width:100%;height:clamp(15rem,23vw,22rem);
  object-fit:cover;display:block}
@media(max-width:767px){
  .elementor-section.band__strip > .elementor-container{flex-wrap:wrap}
  .elementor-section.band__strip .elementor-column{width:100%}
  .elementor-section.band__strip .elementor-column:not(:first-child){display:none}
  .elementor-section.band__strip img{height:18rem}
}

/* Elementor's button widget wraps the link in .elementor-button-wrapper and
   applies its own skin. The design's .more is a text link with a rule under
   it, so the skin is unwound rather than overridden piecemeal. */
.more .elementor-button{background:none;border:0;border-radius:0;padding:0;
  color:var(--ink);font-family:inherit}
.more .elementor-button-content-wrapper{display:inline-block}
.more .elementor-button-text{display:inline-block;font-size:var(--t-sm);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:2px}
.more .elementor-button:hover .elementor-button-text{color:var(--blue);
  border-bottom-color:var(--blue)}

/* Text-editor widgets emit a <p>; the design's spacing lives on the wrapper. */
/* Zero the editor's default paragraph margins, but keep the horizontal auto
   that centres constrained blocks - a flat `margin:0` here overrode
   `.band__cap p{margin:0 auto}` and pinned the fine print to the left edge. */
.hero .hours p,.alt .addr p,.fineprint p,.band__cap.ig p{margin:0 auto}

/* The prototype nests .band__cap inside .ig; in Elementor both land on one
   section, so the descendant form of the rule never matches. */
.band__cap.ig a{font-size:var(--t-head);font-weight:500;letter-spacing:.1em;
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.35rem}
.band__cap.ig a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* The interior pages' photo band is a section background rather than an <img>,
   so it is declared per page in the template's own settings. This keeps the
   scrim and the title styling identical to the PHP version. */
.phead--img .elementor-widget-container > *{margin:0}

/* ---------- Elementor Theme Builder header and footer ----------
   These apply only when the Theme Builder templates are published. The theme's
   own header.php/footer.php produce the prototype's markup and ignore all of
   this.

   Elementor Pro's Nav Menu widget brings its own DOM (.elementor-nav-menu,
   .elementor-item, .elementor-nav-menu--dropdown) and its own mobile toggle,
   so the design is re-pointed at those class names rather than at the theme's.
   This is the one part of the build that is a second implementation rather
   than a port, and it is the part most likely to need a nudge after import. */

.elementor-section.strip{background:var(--strip);color:rgba(255,255,255,.94)}
.elementor-section.strip .elementor-widget-wrap{padding:.7rem var(--gut);
  justify-content:center}
.elementor-section.strip p{margin:0;text-align:center}
.elementor-section.strip a{color:inherit;text-decoration:none;font-size:var(--t-sm);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.elementor-section.strip a:hover{text-decoration:underline}

.elementor-section.hd{background:var(--white);border-bottom:1px solid var(--line)}
.elementor-section.hd > .elementor-container{max-width:var(--max);margin-inline:auto;
  align-items:center;padding:1.15rem var(--gut)}
.elementor-section.hd .elementor-widget-wrap{padding:0;align-items:center}

/* The row lays itself out the way the design does - logo at its natural size,
   nav taking the space that is left, button at its natural size - rather than
   by Elementor's 30/50/20 column percentages. Measured at 1411px those gave
   the nav a 624px column for 665px of links, so "Donations" wrapped to a
   second line. Letting the middle column flex removes the fixed budget. */
.elementor-section.hd > .elementor-container{flex-wrap:nowrap;align-items:center}
.elementor-section.hd > .elementor-container > .elementor-column{width:auto;
  flex:0 0 auto}
.elementor-section.hd > .elementor-container > .elementor-column:nth-child(2){
  flex:1 1 auto;min-width:0}
.hd .elementor-nav-menu{flex-wrap:nowrap;justify-content:flex-end}
.elementor-section.hd .brand img{width:clamp(210px,21vw,320px)}

/* Top-level links, matching .hd nav a. */
.hd .elementor-nav-menu > li > a.elementor-item{display:flex;align-items:center;
  min-height:44px;padding:.35rem clamp(.3rem,.72vw,.7rem);font-size:var(--nav);
  font-weight:450;letter-spacing:.04em;color:var(--soft);text-decoration:none;
  white-space:nowrap;fill:currentColor}
.hd .elementor-nav-menu > li > a.elementor-item:hover,
.hd .elementor-nav-menu > li > a.elementor-item.elementor-item-active{color:var(--blue);
  background:none}
/* The dropdown, matching .sub. */
.hd .elementor-nav-menu--dropdown{min-width:17rem;background:var(--white);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(43,51,59,.14)}
.hd .elementor-nav-menu--dropdown a.elementor-sub-item{display:flex;align-items:center;
  min-height:44px;padding:.5rem 1.15rem;font-size:var(--nav);font-weight:450;
  letter-spacing:.02em;color:var(--soft);text-decoration:none;white-space:nowrap}
.hd .elementor-nav-menu--dropdown a.elementor-sub-item:hover{background:var(--off);
  color:var(--ink)}

/* Reservations, matching .resv - grey ground with an ink label, because white
   on this grey measures 2.24:1 and fails at any size. */
.resv-wrap .elementor-button{display:inline-flex;align-items:center;
  justify-content:center;min-height:46px;padding:.45rem clamp(.8rem,1.25vw,1.1rem);
  background:var(--grey);border:1.5px solid var(--grey);border-radius:0;
  color:var(--ink);font-family:inherit;font-size:var(--t-sm);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.resv-wrap .elementor-button:hover{background:var(--grey-hv);
  border-color:var(--grey-hv);color:var(--ink)}

/* Elementor's own hamburger. The theme's slide-in panel is not present when a
   Theme Builder header is published, so its toggle is styled to match instead. */
/* Elementor centres its toggle with `margin: 0 auto`; overriding only the
   left margin leaves the right one auto, which splits the free space and
   parks the hamburger in the middle of the row. Measured at 1000px it sat
   379px from the right edge. Both margins have to be set. */
.hd .elementor-menu-toggle{color:var(--ink);background:none;
  margin-left:auto !important;margin-right:0 !important}
/* Elementor centres the toggle inside its column; the design puts it hard
   right, in line with where the Reservations button sits on desktop. */
.hd .elementor-nav-menu__toggle,
.hd .elementor-menu-toggle{justify-content:flex-end}
.hd .elementor-nav-menu__toggle .elementor-menu-toggle{margin-left:auto}
/* The Elementor header switches to its toggle at 1280px, not the theme
   header's 1199px. Measured on the live site: logo 296 + links 665 + button
   173 + gutters 112 = 1247px minimum, so a 1199px breakpoint leaves a band
   between 1200 and 1247 where the row has nowhere to go. 1280 clears it. */
@media(max-width:1279px){
  .hd .elementor-nav-menu--main{display:none}
  .hd .elementor-menu-toggle{display:flex}
  /* The mobile panel, rebuilt from scratch.

     Elementor gates its whole dropdown implementation behind its own
     breakpoint: not just the panel's `display`, but the rules that make the
     list vertical and the max-height its JS animates. Forcing the toggle to
     appear at 1280 without those gave first a hamburger that opened nothing,
     then one that opened a panel with the links still laid out in a
     horizontal row across the header.

     The max-height route was abandoned - the variable Elementor's JS sets
     (--menu-height) never won against its own max-height:0 rule from a
     stylesheet that cannot be overridden by specificity. Keying off the
     `.elementor-active` class the JS puts on the toggle is simpler and does
     not depend on Elementor's animation surviving a version bump. The cost
     is losing the slide animation; the panel appears rather than unrolls. */
  .hd nav.elementor-nav-menu--dropdown{display:none !important}
  .hd .elementor-menu-toggle.elementor-active ~ nav.elementor-nav-menu--dropdown{
    display:block !important;max-height:none !important;overflow:visible !important;
    position:absolute;left:0;right:0;top:100%;width:auto;z-index:120;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 18px 40px rgba(43,51,59,.16)}

  /* The panel spans the header, not the nav column, so every ancestor between
     the two gives up its positioning context. */
  .elementor-section.hd{position:relative}
  .elementor-section.hd .elementor-container,
  .elementor-section.hd .elementor-column,
  .elementor-section.hd .elementor-widget-wrap,
  .elementor-section.hd .elementor-widget,
  .elementor-section.hd .elementor-widget-container{position:static !important}

  .hd nav.elementor-nav-menu--dropdown ul{display:block !important;width:100%;
    margin:0;padding:0;list-style:none}
  .hd nav.elementor-nav-menu--dropdown li{display:block !important;width:100%;
    position:static;float:none}
  .hd nav.elementor-nav-menu--dropdown .elementor-item,
  .hd nav.elementor-nav-menu--dropdown .elementor-sub-item{display:flex;
    align-items:center;width:100%;min-height:52px;padding:.6rem var(--gut);
    white-space:normal;border-bottom:1px solid var(--line);
    font-size:var(--t-base);letter-spacing:.02em;color:var(--ink)}
  /* The Menus PDFs, indented under their parent. */
  .hd nav.elementor-nav-menu--dropdown ul.sub-menu{position:static;transform:none;
    min-width:0;border:0;box-shadow:none;background:var(--off);
    opacity:1 !important;visibility:visible !important;max-height:none !important}
  .hd nav.elementor-nav-menu--dropdown ul.sub-menu .elementor-sub-item{
    padding-left:calc(var(--gut) + 1.25rem);font-size:var(--t-sm);color:var(--soft)}

  /* The Reservations button folds into the menu at this width rather than
     sitting beside the hamburger. The menu carries its own Reservations item
     (hidden on desktop, below), so the action is never lost - it just moves. */
  .elementor-section.hd > .elementor-container > .elementor-column:last-child{display:none}
}

/* The Reservations item exists in the WordPress menu so it can appear in the
   mobile dropdown. On desktop the button in the header is the same action, so
   the menu item is hidden there to avoid offering it twice. */
.hd .elementor-nav-menu--main .resv-item{display:none}
.hd .elementor-nav-menu--dropdown .resv-item > a{font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

.elementor-section.sb-footer{background:var(--ink);color:rgba(255,255,255,.86);
  text-align:center}
.elementor-section.sb-footer .elementor-widget-wrap{
  padding:clamp(3rem,6vw,4.5rem) var(--gut) 1.75rem}
.elementor-section.sb-footer .mark img{width:250px;margin:0 auto 1.4rem}
.elementor-section.sb-footer p{margin:0 0 .5rem}
.elementor-section.sb-footer a{color:#fff}
.elementor-section.sb-footer .legal{margin-top:2.5rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:var(--t-xs);
  color:rgba(255,255,255,.62)}
.sb-footer .elementor-social-icon{background:none;border:1px solid rgba(255,255,255,.5);
  width:44px;height:44px;border-radius:50%}
.sb-footer .elementor-social-icon:hover{background:#fff}
.sb-footer .elementor-social-icon:hover i,
.sb-footer .elementor-social-icon:hover svg{color:var(--ink);fill:var(--ink)}
.sb-footer .elementor-social-icon i,
.sb-footer .elementor-social-icon svg{color:#fff;fill:#fff;font-size:18px}