/* De Brit option 1: "Quiet edition". Neutral stone ground, ink, one burgundy accent (the bed runners in the room photos).
   Newsreader (a light editorial serif, very large) with Geist for text. Hairline rules, square corners, uppercase tracked micro-labels, text links instead of buttons.
   Signature: a headline set at hero size beside one tall photograph with a caption, rooms as an index (thumbnail, name, rate, link), a full-bleed still with a guest's words, and a closing line that is just a very large link.
   Nav: a slim text bar; on phones a full-screen sheet of large serif links. Motion: GSAP in assets/js/motion.js (rules draw in, text and photos rise); off under reduced motion. */
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("assets/fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: italic; font-display: swap; src: url("assets/fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("assets/fonts/geist.woff2") format("woff2"); }
@view-transition { navigation: auto; }
:root {
  color-scheme: light;
  --bg: #ebe9e6; --surface: #f5f4f2; --surface-2: #dedbd7;
  --ink: #1a1315; --muted: #5d5456; --line: rgba(26, 19, 21, .2); --line-strong: rgba(26, 19, 21, .55);
  --accent: #6e1a38; --accent-ink: #f5f4f2; --danger: #a3241c;
  --display: "Newsreader", Georgia, serif; --body: "Geist", system-ui, sans-serif;
  --r: 0px; --max: 1320px; --gutter: clamp(20px, 4.5vw, 64px); --nav-h: 76px;
  --spring: cubic-bezier(.32, .72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.04rem/1.7 var(--body); -webkit-font-smoothing: antialiased; caret-color: var(--accent); overflow-x: clip; }
::selection { background: var(--accent); color: var(--accent-ink); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 300; letter-spacing: -.03em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(3.6rem, 9.4vw, 9.4rem); } h1 em, h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); } h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); letter-spacing: -.02em; line-height: 1.02; }
p { margin: 0 0 1rem; max-width: 60ch; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
section { padding-block: clamp(72px, 10vw, 150px); }
.i { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.eyebrow { margin: 0 0 22px; font: 500 .72rem/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font: 500 .8rem var(--body); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; margin-right: 28px; transition: color .4s var(--spring), border-color .4s var(--spring); }
.textlink:hover { color: var(--accent); border-color: var(--accent); }
.textlink--quiet { border-bottom-color: var(--line-strong); color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 500 .8rem var(--body); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .5s var(--spring), color .5s var(--spring), transform .4s var(--spring); }
.btn:active { transform: scale(.985); }
.btn--primary { background: var(--ink); color: var(--bg); } .btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.btn--quiet { border-color: transparent; text-decoration: underline; padding: 0 12px; }
.btn--lg { min-height: 60px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }

/* Header: a slim text bar */
.top { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: transparent; border-bottom: 1px solid transparent; transition: background .5s var(--spring), border-color .5s var(--spring); }
.top.is-scrolled { background: rgba(235, 233, 230, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; position: relative; z-index: 70; } .logo img { width: 30px; height: auto; }
.logo span { font: 500 .8rem var(--body); letter-spacing: .26em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .76rem var(--body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--muted); border-bottom: 1px solid transparent; transition: color .4s var(--spring), border-color .4s var(--spring); }
.nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.nav .nav__cta { color: var(--accent); border-bottom-color: var(--accent); }
.nav__foot { display: none; } .menu-btn { display: none; }

/* Hero: headline beside one tall photograph */
.hero { min-height: 100dvh; padding-block: calc(var(--nav-h) + 24px) 0; display: grid; grid-template-rows: 1fr auto; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; padding-left: var(--gutter); min-height: 0; }
.hero__l { padding: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 48px) clamp(36px, 5vw, 64px) 0; align-self: center; }
.hero__sub { font-size: 1.14rem; color: var(--muted); max-width: 30em; margin: 30px 0 22px; }
.hero__links { margin: 0; }
.hero__r { margin: 0; position: relative; align-self: stretch; display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.hero__ph { overflow: hidden; background: var(--surface-2); min-height: 360px; } .hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.hero__r figcaption { padding: 12px var(--gutter) 12px 0; font: 400 .74rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.book { display: grid; grid-template-columns: 1fr 1fr .6fr auto; gap: clamp(16px, 3vw, 44px); align-items: end; padding: 22px calc(var(--gutter) + 180px) 26px var(--gutter); border-top: 1px solid var(--line-strong); background: var(--bg); }
.book label { display: grid; gap: 4px; min-width: 0; } .book label span { font: 500 .68rem var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.book input { width: 100%; font: 400 1.1rem var(--body); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 8px 0; min-height: 46px; }
.book input:focus-visible { outline: 0; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.book__go { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 0; background: var(--ink); color: var(--bg); font: 500 .76rem var(--body); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .5s var(--spring), transform .4s var(--spring); }
.book__go:hover { background: var(--accent); } .book__go:active { transform: scale(.985); }

/* Intro */
.intro__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 7vw, 120px); align-items: end; }
.intro__big { font: 300 clamp(1.9rem, 3.8vw, 3.5rem)/1.16 var(--display); letter-spacing: -.02em; max-width: 22em; margin: 0; }
.facts { margin: 0; display: grid; }
.facts div { display: grid; grid-template-columns: 5.2rem 1fr; gap: 18px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line-strong); }
.facts div:last-child { border-bottom: 1px solid var(--line-strong); }
.facts dt { font: 300 2.5rem/1 var(--display); letter-spacing: -.02em; } .facts dd { margin: 0; color: var(--muted); font-size: .98rem; }

/* Rooms as an index */
.rooms { border-top: 1px solid var(--line-strong); }
.rooms__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.rooms__head .eyebrow { grid-column: 1 / -1; margin: 0; } .rooms__note { color: var(--muted); margin: 0; max-width: 34em; }
.rooms__list { display: grid; border-bottom: 1px solid var(--line-strong); }
.room { display: grid; grid-template-columns: clamp(180px, 22vw, 300px) 1fr; gap: clamp(20px, 4vw, 64px); padding-block: clamp(26px, 3.4vw, 44px); border-top: 1px solid var(--line); align-items: start; }
.room__ph { margin: 0; overflow: hidden; background: var(--surface-2); } .room__ph img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.4s var(--spring); }
.room:hover .room__ph img { transform: scale(1.04); }
.room__body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "h r" "p r" "f b"; column-gap: clamp(20px, 4vw, 64px); row-gap: 14px; align-items: start; }
.room__body h3 { grid-area: h; } .room__body > p:not(.room__rate) { grid-area: p; color: var(--muted); max-width: 36em; margin: 0; }
.room__feat { grid-area: f; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .86rem; color: var(--muted); letter-spacing: .04em; }
.room__feat li + li::before { content: "\00b7"; margin: 0 .7em; }
.room__rate { grid-area: r; margin: 0; text-align: right; color: var(--muted); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; max-width: none; } .room__rate b { display: block; font: 300 clamp(2rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -.02em; color: var(--ink); text-transform: none; margin-top: 4px; } .room__rate small { display: block; }
.room .btn { grid-area: b; justify-self: end; align-self: end; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--ink); font-size: .74rem; } .room .btn:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Full-bleed still */
.stillband { margin: 0; padding: 0; position: relative; overflow: hidden; }
.stillband__ph { height: clamp(380px, 62vw, 760px); } .stillband__ph img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 50%; }
.stillband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 19, 21, .72), rgba(26, 19, 21, .1) 55%); pointer-events: none; }
.stillband__cap { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 4vw, 60px); color: #f5f4f2; }
.stillband blockquote { margin: 0; } .stillband blockquote p { font: 300 clamp(1.8rem, 4.4vw, 4rem)/1.08 var(--display); letter-spacing: -.02em; max-width: 18em; margin-bottom: 14px; } .stillband footer { font: 500 .74rem var(--body); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }

/* Facilities: a plain list */
.facil__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 7vw, 120px); align-items: start; }
.facil__l p:not(.eyebrow) { color: var(--muted); max-width: 26em; margin-top: 22px; }
.facil__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 4vw, 56px); border-top: 1px solid var(--line-strong); }
.facil__list li { padding: 20px 0; border-bottom: 1px solid var(--line); } .facil__list .i { display: none; }
.facil__list span { display: grid; gap: 2px; } .facil__list b { font: 400 1.5rem/1.15 var(--display); letter-spacing: -.01em; } .facil__list small { color: var(--muted); font-size: .88rem; }
.facil--page { padding-block: 0 clamp(40px, 5vw, 72px); } .facil--page .facil__list { grid-template-columns: 1fr; }

/* Dining */
.dine { border-top: 1px solid var(--line-strong); }
.dine__grid { display: grid; grid-template-columns: .55fr 1fr; gap: clamp(32px, 8vw, 140px); align-items: center; }
.dine__ph { margin: 0; max-width: 320px; } .dine__ph img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .dine__ph figcaption { padding-top: 10px; font: 400 .72rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dine__txt h2 { margin-bottom: 26px; } .dine__txt p:not(.eyebrow) { color: var(--muted); font-size: 1.12rem; }

/* Guests */
.guests { border-top: 1px solid var(--line-strong); }
.guests__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 7vw, 120px); align-items: start; }
.guests__l { position: sticky; top: 110px; } .guests__score { color: var(--muted); margin-top: 24px; font-size: .96rem; } .guests__score a { color: var(--accent); }
.guests__list { display: grid; border-top: 1px solid var(--line-strong); }
.guests blockquote { margin: 0; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
.guests blockquote p { font: 300 clamp(1.4rem, 2.3vw, 2.1rem)/1.28 var(--display); letter-spacing: -.012em; margin-bottom: 14px; max-width: 28em; }
.guests footer { font: 500 .72rem var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* Find us */
.find { border-top: 1px solid var(--line-strong); }
.find__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 120px); align-items: end; }
.find__txt p:not(.find__times) { color: var(--muted); font-size: 1.1rem; } .find__times { font: 500 .78rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 28px; }

/* Closing line */
.cta { background: var(--ink); color: var(--bg); padding-block: clamp(80px, 12vw, 180px); }
.cta__link { display: flex; align-items: center; justify-content: space-between; gap: 24px; text-decoration: none; font: 300 clamp(3.2rem, 11vw, 11rem)/.92 var(--display); letter-spacing: -.04em; border-bottom: 1px solid rgba(245, 244, 242, .4); padding-bottom: clamp(18px, 3vw, 40px); transition: color .5s var(--spring), border-color .5s var(--spring); }
.cta__link .i { width: .7em; height: .7em; transition: transform .8s var(--spring); } .cta__link:hover { color: #f0b3c4; border-color: #f0b3c4; } .cta__link:hover .i { transform: translate(10px, -10px); }
.cta__sub { margin: 26px 0 0; color: rgba(245, 244, 242, .72); font-size: 1.08rem; }

/* Inner pages */
main > section:first-child:not(.hero) { padding-top: calc(var(--nav-h) + 56px); }
.phead { padding-bottom: clamp(24px, 4vw, 56px); } .phead__lede { color: var(--muted); font-size: 1.18rem; max-width: 36em; margin: 26px 0 0; }
.vhead { padding-bottom: clamp(32px, 5vw, 72px); }
.vhead__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.vhead__lede { font-size: 1.14rem; color: var(--muted); max-width: 30em; margin: 28px 0 22px; }
.vhead__photo { margin: 0; } .vhead__photo .hero__ph { min-height: 0; } .vhead__photo img { aspect-ratio: 4 / 5; }
.vlayout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(56px, 8vw, 120px); }
.vmain > section { padding: 0 0 clamp(48px, 6vw, 88px); border: 0; } .vmain h2 { margin-bottom: 26px; font-size: clamp(2rem, 3.4vw, 3rem); }
.rooms--page { padding-block: 0 clamp(48px, 6vw, 88px); } .rooms--page .room { grid-template-columns: 1fr; } .rooms--page .rooms__list { border-bottom: 0; }
.rows { margin: 0 0 14px; display: grid; border-top: 1px solid var(--line-strong); }
.rows div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rows dt { font: 500 .74rem var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); align-self: center; } .rows dd { margin: 0; text-align: right; font: 400 1.35rem var(--display); letter-spacing: -.01em; }
.note { color: var(--muted); font-size: .94rem; max-width: 60ch; } .note a { color: var(--accent); }
.quotes { display: grid; border-top: 1px solid var(--line-strong); }
.quotes blockquote { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--line); } .quotes p { font: 300 1.5rem/1.3 var(--display); letter-spacing: -.01em; margin-bottom: 8px; } .quotes footer { font: 500 .7rem var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
address { font: 300 1.9rem/1.2 var(--display); font-style: normal; letter-spacing: -.01em; margin-bottom: 14px; }
.map { background: var(--surface-2); min-height: 380px; overflow: hidden; } .map iframe { width: 100%; height: 420px; border: 0; display: block; }
.find--page { border: 0; padding-block: 0 !important; }
.glance, .rsvp__card { border: 1px solid var(--line-strong); background: var(--surface); }
.glance { position: sticky; top: 108px; padding: 26px; display: grid; gap: 18px; } .glance h2 { font-size: 1.8rem; margin: 0; }
.glance dl { margin: 0; display: grid; gap: 14px; } .glance dt { font: 500 .68rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .glance dd { margin: 3px 0 0; }
.glance a:not(.textlink) { color: var(--accent); }
.rsvp__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .rsvp__card { padding: clamp(24px, 4vw, 48px); }
.rsvp h1 { font-size: clamp(3rem, 6vw, 5.6rem); }
.contact { list-style: none; padding: 0; margin: 26px 0 0; display: grid; } .contact li { display: flex; align-items: center; gap: 12px; } .contact a { color: var(--accent); }
.legal h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }

/* Footer */
.foot { background: #110b0d; color: var(--bg); padding: clamp(56px, 8vw, 100px) 0 clamp(110px, 11vw, 140px); }
.foot a { color: inherit; text-decoration: none; }
.foot__ask { display: inline-flex; align-items: center; gap: 14px; font: 300 clamp(1.6rem, 3vw, 2.6rem) var(--display); letter-spacing: -.02em; border-bottom: 1px solid rgba(245, 244, 242, .4); padding-bottom: 8px; margin-bottom: clamp(40px, 6vw, 80px); transition: color .4s var(--spring), border-color .4s var(--spring); } .foot__ask:hover { color: #f0b3c4; border-color: #f0b3c4; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); padding-bottom: 36px; border-bottom: 1px solid rgba(245, 244, 242, .2); }
.foot__name { font: 300 2rem/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 14px; }
.foot h2 { font: 500 .68rem var(--body); letter-spacing: .24em; text-transform: uppercase; color: #f0b3c4; margin-bottom: 12px; }
.foot__grid p { margin: 0 0 10px; color: rgba(245, 244, 242, .82); font-size: .96rem; }
.foot__nav { display: grid; } .foot__nav a, .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; } .foot__nav a:hover, .foot__legal a:hover, .foot__grid a:hover { text-decoration: underline; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 28px; padding-top: 16px; color: rgba(245, 244, 242, .6); font-size: .88rem; }
.foot__base p { margin: 0; } .foot__legal { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; background: var(--accent); color: var(--accent-ink); font: 500 .74rem var(--body); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background .4s var(--spring), transform .4s var(--spring); }
.wa:hover { background: var(--ink); } .wa:active { transform: scale(.985); }
.grain { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .04; background: url("assets/img/grain.png"); mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
@media (max-width: 960px) {
  :root { --nav-h: 68px; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--ink); font: 500 .76rem var(--body); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 70; border-bottom: 1px solid var(--ink); }
  .menu-btn .m-close { display: none; } .menu-btn[aria-expanded="true"] .m-open { display: none; } .menu-btn[aria-expanded="true"] .m-close { display: inline; }
  .nav { position: fixed; inset: 0; z-index: 65; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 90px var(--gutter) 40px; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .5s var(--spring), visibility 0s .5s; }
  .nav.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--spring), visibility 0s; }
  .nav a { font: 300 clamp(2.6rem, 11vw, 4.4rem)/1.15 var(--display); letter-spacing: -.03em; text-transform: none; color: var(--ink); border: 0; min-height: 0; padding: 4px 0; } .nav .nav__cta { color: var(--accent); }
  .nav__foot { display: block; margin: 36px 0 0; color: var(--muted); font-size: .96rem; } .nav__foot a { font: 400 1rem var(--body); padding: 0; color: var(--ink); border-bottom: 1px solid var(--line-strong); display: inline; }
  .top.is-scrolled { background: rgba(235, 233, 230, .96); }
  .hero { min-height: 0; } .hero__grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; } .hero__l { padding: 24px var(--gutter) 28px; } .hero__ph { min-height: 0; } .hero__ph img { aspect-ratio: 4 / 3; height: auto; } .hero__r figcaption { padding-left: var(--gutter); }
  .book { grid-template-columns: 1fr 1fr; padding: 18px var(--gutter); } .book label:nth-of-type(3) { grid-column: 1; } .book__go { grid-column: 1 / -1; justify-content: center; }
  .intro__grid, .rooms__head, .facil__grid, .dine__grid, .guests__grid, .find__grid, .vhead__grid, .rsvp__grid, .vlayout, .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .room { grid-template-columns: minmax(0, 1fr); } .room__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "r" "p" "f" "b"; } .room__rate { text-align: left; } .room .btn { justify-self: start; }
  .facil__list { grid-template-columns: minmax(0, 1fr); } .guests__l { position: static; } .glance { position: static; }
  .stillband__ph { height: 480px; } .dine__ph { max-width: 260px; }
}
@media (max-width: 480px) { h1 { font-size: clamp(3.2rem, 15vw, 4.2rem); } }

/* Shared components for both Havilah options: RSVP form, gallery grid, lightbox, reveal.
   Relies on tokens defined by each option: --bg --ink --muted --line --line-strong --accent --accent-ink --surface --surface-2 --r */

[hidden] { display: none !important; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* RSVP form */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 650; font-size: .95rem; padding: 0; }
.field .opt, .hint { color: var(--muted); font-weight: 400; font-size: .88rem; }
.hint { margin: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="date"], .form input[type="number"], .form select, .form textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r); padding: 12px 14px; min-height: 48px;
}
.form textarea { resize: vertical; min-height: 130px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.field.has-error input, .field.has-error select { border-color: var(--danger, #c0261c); }
.err { margin: 0; color: var(--danger, #c0261c); font-size: .9rem; font-weight: 600; }
.field--radios, .field--branch { gap: 8px; }
.field--radios, .field--branch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field--radios legend, .field--branch legend { width: 100%; margin-bottom: 2px; }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font-weight: 600; font-size: .95rem; cursor: pointer; }
.radio input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.radio input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-strong); font-weight: 550; }
.status a { text-underline-offset: 3px; font-weight: 700; }
.form button:disabled { opacity: .6; cursor: progress; }
.done { display: grid; gap: 10px; }
.done h2 { font-size: 1.7rem; }
.done p { margin: 0; color: var(--muted); }
.done a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* Gallery grid */
.all__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-weight: 600; font-size: .92rem; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.masonry { columns: 3 260px; column-gap: 18px; }
.tile { break-inside: avoid; margin: 0 0 18px; }
.tile__open { display: block; width: 100%; padding: 0; border: 0; background: var(--surface-2); border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.tile__open img { width: 100%; height: auto; display: block; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.tile__open:hover img, .tile__open:focus-visible img { transform: scale(1.04); }
.tile__open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tile figcaption { padding-top: 8px; display: grid; gap: 1px; font-size: .95rem; }
.tile figcaption small { color: var(--muted); font-size: .8rem; }
.note { color: var(--muted); font-size: .9rem; margin-top: 18px; }
.note a { color: var(--ink); text-underline-offset: 3px; }

/* Lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; color: #fff; }
.lb::backdrop { background: rgba(8, 10, 12, .92); }
.lb[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lb__fig { margin: 0; display: grid; gap: 10px; justify-items: center; max-height: 100dvh; padding: 24px 0; }
.lb__fig img { max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: var(--r); }
.lb__fig figcaption { color: #dfe5e8; font-size: .95rem; text-align: center; padding-inline: 12px; }
.lb__nav, .lb__x { background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; justify-self: center; }
.lb__nav:hover, .lb__x:hover { background: rgba(255, 255, 255, .24); }
.lb__nav:focus-visible, .lb__x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb__x { position: absolute; top: 16px; right: 16px; z-index: 2; }
.lb .i { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; }
  .masonry { columns: 2 150px; column-gap: 12px; }
  .lb[open] { grid-template-columns: 1fr; }
  .lb__nav { position: absolute; bottom: 16px; }
  .lb__nav--prev { left: 16px; }
  .lb__nav--next { right: 16px; }
}

/* Picture wrappers must not break layouts that size the image from its parent */
picture { display: contents; }

/* Policy and 404 pages */
.legal { padding-top: clamp(32px, 5vw, 64px); }
.legal__wrap { max-width: 760px; }
.legal h1 { margin-bottom: 8px; }
.legal__meta { color: var(--muted); font-size: .92rem; margin-bottom: 28px; }
.legal h2 { font-size: 1.35rem; margin: 30px 0 10px; letter-spacing: -0.015em; }
.legal p, .legal li { color: var(--ink); max-width: 68ch; }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; margin: 0 0 1rem; }
.legal a { text-underline-offset: 3px; font-weight: 600; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.consent { margin: 0; font-size: .88rem; color: var(--muted); }
.consent a { color: var(--ink); text-underline-offset: 3px; font-weight: 600; }

/* Click-to-load map */
.map__ph { height: 100%; min-height: 380px; display: grid; align-content: center; justify-items: start; gap: 6px; padding: clamp(20px, 4vw, 40px); }
.map__ph p { max-width: 30em; color: var(--muted); margin: 0; }
.map__ph a:not(.btn) { color: var(--ink); text-underline-offset: 3px; font-weight: 600; }

/* Tap targets: links in lists and footers are at least 44px tall */
.foot__col a, .contact a, .foot a { display: inline-flex; align-items: center; min-height: 44px; }
.contact { gap: 0 !important; }
.foot__col { gap: 0 !important; }

/* Floating WhatsApp collapses to an icon on phones so it never covers content */
@media (max-width: 700px) {
  .wa { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wa .i { width: 26px; height: 26px; }
}