/* ═══════════════════════════════════════════════════════════════════
   Kona Las Vegas — demo site
   Newsreader headings over Instrument Sans text on a warm paper page.
   Night navy is kept for the footer, the amenities band, and the group
   sales call to action.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#f5f2ec;
  --paper-2:#ebe6dc;
  --card:#fbf9f5;
  --ink:#1c1d1f;
  --ink-2:rgba(28,29,31,.74);
  --ink-3:rgba(28,29,31,.58);
  --rule:rgba(28,29,31,.16);
  --night:#14213d;
  --night-2:rgba(245,242,236,.76);
  --night-rule:rgba(245,242,236,.2);
  --brass:#a07c45;
  --brass-light:#cfae7a;

  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gut:clamp(18px,4.4vw,64px);
  --hdr-h:72px;
  --max:1360px;

  /* section-local tokens; .sec--invert overrides these */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --line:var(--rule);
  --mark:var(--brass);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sec--invert :focus-visible,.foot :focus-visible{outline-color:var(--paper)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:10px 16px;
  font-size:14px;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

/* ── type primitives ─────────────────────────────────────────────── */

/* Section label: small tracked sans with a brass square, no brackets. */
.label{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sans);
  font-size:12px;font-weight:600;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);
  margin:0 0 clamp(20px,2.6vw,32px);
}
.label::before{
  content:"";flex:0 0 auto;width:7px;height:7px;background:var(--mark);
}

.display{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.7rem,6.4vw,5.6rem);
  line-height:1.02;letter-spacing:-.018em;
  margin:0;
  font-optical-sizing:auto;
}

.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.75rem,3.1vw,2.7rem);
  line-height:1.1;letter-spacing:-.012em;
  margin:0 0 .6em;
  max-width:20ch;
  color:var(--fg);
}

.lede{
  font-size:clamp(1.05rem,1.4vw,1.2rem);
  line-height:1.5;
  color:var(--fg-2);
  margin:1.1em 0 0;
  max-width:44ch;
}

p{margin:0 0 1.1em;color:var(--fg-2);max-width:66ch}
p:last-child{margin-bottom:0}

/* underlined text link */
.arrow{
  display:inline-block;margin-top:clamp(20px,2.6vw,28px);
  font-size:15px;font-weight:500;
  color:var(--fg);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:var(--line);
  transition:text-decoration-color .2s ease;
}
.arrow:hover{text-decoration-color:currentColor}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:15px;font-weight:500;
  text-decoration:none;
  background:var(--ink);color:var(--paper);
  padding:14px 26px;border:1px solid var(--ink);border-radius:0;
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.btn:hover{background:transparent;color:var(--ink)}

.tel{
  text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:5px;color:var(--fg);white-space:nowrap;
}
.tel:hover{text-decoration-color:currentColor}

.phone{
  display:inline-block;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.1;
  letter-spacing:-.01em;text-decoration:none;color:var(--fg);
  margin:0 0 .5em;
  font-variant-numeric:lining-nums;
}
.phone:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}

/* ── header: paper bar, wordmark left, one solid Reserve button ───── */

.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.hdr__in{
  min-height:var(--hdr-h);
  padding:0 var(--gut);
  display:flex;align-items:center;gap:clamp(14px,2vw,32px);
}
.hdr__menu{
  display:none;
  width:28px;height:28px;padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;
}
.hdr__menu span{display:block;height:1.5px;background:var(--ink)}
.hdr__mark{
  display:flex;align-items:center;gap:16px;
  text-decoration:none;white-space:nowrap;color:var(--ink);
}
.wordmark{display:block;height:20px;width:auto}
.hdr__desc{
  font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);
  padding-left:16px;border-left:1px solid var(--rule);line-height:1.3;
}
@media (max-width:1240px){ .hdr__desc{display:none} }
.hdr__nav{display:flex;gap:clamp(16px,2vw,30px);margin-left:auto}
.hdr__nav a{
  font-size:15px;font-weight:500;
  text-decoration:none;color:var(--ink-2);
  padding:6px 0;
  transition:color .2s ease;
}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{color:var(--ink)}
.hdr__nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--ink)}
.hdr__tel{
  font-size:15px;font-weight:500;color:var(--ink-2);
  text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.hdr__tel:hover{color:var(--ink)}
.hdr__book{
  font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;
  background:var(--ink);color:var(--paper);
  padding:10px 18px;border:1px solid var(--ink);
  transition:background .2s ease,color .2s ease;
}
.hdr__book:hover{background:transparent;color:var(--ink)}

@media (max-width:980px){
  :root{--hdr-h:64px}
  .hdr__menu{display:flex}
  .hdr__tel{display:none}
  .hdr__nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;margin:0;
    background:var(--paper);
    max-height:0;overflow:hidden;
    transition:max-height .28s ease;
  }
  .hdr__nav a{padding:16px var(--gut);border-bottom:1px solid var(--rule);font-size:17px}
  .hdr.is-open .hdr__nav{max-height:70vh;border-top:1px solid var(--rule)}
  .hdr__mark{margin-right:auto}
}

/* ── hero: copy left, portrait tower photo right, above the fold ── */

.hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,88px);align-items:center;
  padding:clamp(28px,3.4vw,48px) var(--gut) clamp(48px,6vw,88px);
}
.hero__copy{max-width:560px}
.hero .display{font-size:clamp(3.4rem,8.4vw,7.6rem);line-height:.95}
.hero .lede{max-width:38ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.btn--quiet{background:transparent;color:var(--ink)}
.btn--quiet:hover{background:var(--ink);color:var(--paper)}
.hero__facts{
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:0;margin:clamp(32px,4.4vw,56px) 0 0;
  border-top:1px solid var(--rule);
}
.hero__facts div{padding:16px clamp(16px,2.4vw,32px) 0 0;margin-right:clamp(16px,2.4vw,32px);border-right:1px solid var(--rule)}
.hero__facts div:last-child{border-right:0;margin-right:0}
.hero__facts dt{font-size:13px;color:var(--ink-3);margin:0 0 4px}
.hero__facts dd{margin:0;font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.1;font-variant-numeric:lining-nums}
.hero__media{margin:0}
.hero__media picture{
  display:block;
  height:clamp(460px,calc(100svh - var(--hdr-h) - 190px),800px);
  aspect-ratio:4/5;
}
.hero__media img{width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:50% 50%}
.hero__caption{margin-top:10px;font-size:13px;color:var(--ink-3)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;align-items:start}
  .hero__copy{max-width:none}
  .hero__media picture{height:auto;width:100%}
}
@media (max-width:420px){
  .hero__facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__facts div{padding-right:10px;margin-right:10px}
  .hero__facts dd{font-size:1.25rem}
}

/* ── section shell ───────────────────────────────────────────────── */

.sec{
  background:var(--bg);color:var(--fg);
  padding:clamp(64px,9vw,136px) var(--gut);
  scroll-margin-top:calc(var(--hdr-h) + 14px);
}
.sec + .sec:not(.sec--invert),.hero + .sec{border-top:1px solid var(--line)}
.sec--flush{padding-top:0}
.sec + .sec--flush{border-top:0}

/* ── page heads (rooms, meetings) ────────────────────────────────── */

.page-head{
  padding:clamp(48px,8vw,112px) var(--gut) clamp(36px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:end;
}
.page-head .label{grid-column:1/-1;margin-bottom:0}
.display--page{font-size:clamp(2.4rem,5.4vw,4.6rem);max-width:15ch}
.page-head .lede{margin:0}
.page-head__media{grid-column:1/-1;margin:clamp(12px,2vw,24px) 0 0}
.page-head__media picture,.page-head__media img{width:100%}
.page-head__media img{aspect-ratio:21/9;object-fit:cover}
.page-head__media figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}
@media (max-width:820px){ .page-head__media img{aspect-ratio:4/3} }
@media (max-width:820px){ .page-head{grid-template-columns:1fr} }

.sec--invert{
  --bg:var(--night);
  --fg:var(--paper);
  --fg-2:var(--night-2);
  --line:var(--night-rule);
  --mark:var(--brass-light);
}

.sec__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,44px);
}
.sec__head .h2{margin:0}

/* ── staggered image collage with numbered captions ──────────────── */

.collage{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(12px,1.8vw,26px);
  align-items:start;
}
.collage figure{margin:0}
.collage__sm{margin-top:clamp(40px,7vw,120px)}
.collage__sm img{width:100%;aspect-ratio:4/5;object-fit:cover}
.collage__lg img{width:100%;aspect-ratio:4/3;object-fit:cover}
.collage figcaption,.feature__num,.gallery figcaption{
  display:flex;gap:12px;align-items:baseline;
  margin-top:12px;font-size:13px;color:var(--ink-3);
}
.collage figcaption b,.gallery figcaption b{
  font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;
}

/* Flipping with `order` alone reorders the items but NOT the column widths, which
   put the large image in the narrow track and blew the small one up. Swap the
   track widths to match the new order. */
.collage--flip{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.collage--flip .collage__sm{order:2}
.collage--flip .collage__lg{order:1}

/* copy block sits bottom-right of the collage */
.colcopy{
  margin:clamp(32px,4.4vw,64px) 0 0 auto;
  max-width:560px;
}
.colcopy .h2{max-width:18ch}

@media (max-width:760px){
  .collage{grid-template-columns:1fr;gap:12px}
  .collage__sm{margin-top:0}
  .collage--flip .collage__sm,.collage--flip .collage__lg{order:0}
  .collage__sm img{aspect-ratio:4/3}
  .colcopy{margin-left:0;max-width:none}
}

/* ── explore: two feature cards on the home page ───────────────────── */

.feature{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(18px,3vw,44px);align-items:end;
}
@media (max-width:760px){ .feature{grid-template-columns:1fr} }
.feature__card{display:block;text-decoration:none;color:inherit}
.feature__media{display:block;overflow:hidden;background:var(--paper-2)}
.feature__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.feature li:nth-child(2) .feature__media img{aspect-ratio:4/5}
.feature__card:hover .feature__media img{transform:scale(1.015)}
.feature__body{display:block;padding:18px 0 0}
.feature__kicker{
  display:block;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.feature__name{
  display:block;margin:6px 0 8px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.01em;color:var(--fg);
}
.feature__txt{display:block;color:var(--fg-2);max-width:48ch}
.feature__card .arrow{margin-top:14px}
.feature__card:hover .arrow{text-decoration-color:currentColor}

/* ── room grid (rooms page) ──────────────────────────────────────── */

.room-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,4.4vw,64px) clamp(18px,2.6vw,36px);
}
.room-grid li:nth-child(even){margin-top:clamp(0px,6vw,96px)}
@media (max-width:640px){
  .room-grid{grid-template-columns:1fr}
  .room-grid li:nth-child(even){margin-top:0}
}

/* ── rails: amenities carousel ───────────────────────────────────── */

.rail__nav{display:flex;gap:8px}
.rail__btn{
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;color:var(--fg);
  border:1px solid var(--line);border-radius:50%;
  font-size:15px;cursor:pointer;
  transition:border-color .2s ease,opacity .2s ease;
}
.rail__btn:hover:not(:disabled){border-color:var(--fg)}
.rail__btn:disabled{opacity:.3;cursor:default}
@media (max-width:900px){ .rail__nav{display:none} }

.rail{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(12px,1.6vw,22px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  /* Without this, scroll-snap-align:start snaps past the inline padding and
     drags the first card flush against the viewport edge. */
  scroll-padding-inline:var(--gut);
  padding-bottom:4px;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none}

.rail__item{flex:0 0 auto;width:clamp(240px,29vw,400px);scroll-snap-align:start}
.rail__item--am{width:clamp(232px,24vw,330px)}
.rail__item--am .tile{height:100%}

.card{
  display:block;width:100%;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;
}
.card__media{display:block;overflow:hidden;background:var(--paper-2)}
.card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.015)}
.card__body{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0 0;border-bottom:1px solid var(--line);padding-bottom:14px;
}
.card__name{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.15;letter-spacing:-.01em;
}
.card__meta{
  display:block;font-size:14px;color:var(--ink-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ── spec list ───────────────────────────────────────────────────── */

.spec{
  margin:clamp(20px,2.6vw,30px) 0 0;
  display:grid;grid-template-columns:minmax(120px,auto) 1fr;
  font-size:16px;
}
.spec dt{
  font-size:13px;font-weight:600;color:var(--fg);
  padding:12px 20px 12px 0;border-top:1px solid var(--line);
}
.spec dd{margin:0;color:var(--fg-2);padding:12px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}

/* ── tiles ───────────────────────────────────────────────────────── */

.grid{list-style:none;margin:clamp(48px,6.4vw,92px) 0 0;padding:0;display:grid;gap:clamp(20px,2.8vw,36px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){ .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .grid--3{grid-template-columns:1fr} }

.tile img{
  width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2);
}
.tile--tall img{aspect-ratio:4/5}
.tile__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,1.7vw,1.45rem);line-height:1.2;
  margin:16px 0 6px;color:var(--fg);
}
.tile__txt{color:var(--fg-2);font-size:15.5px;line-height:1.55;margin:0;max-width:40ch}

/* ── meetings + events ───────────────────────────────────────────── */

.meet__intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,80px);align-items:end;
}
.meet__intro p{font-size:clamp(1.05rem,1.3vw,1.15rem)}
.meet__stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.meet__stats li{padding:18px 16px 16px;border-left:1px solid var(--line)}
.meet__stats li:first-child{border-left:0;padding-left:0}
.meet__stats b{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,3.4vw,3rem);line-height:1;letter-spacing:-.01em;color:var(--fg);
  font-variant-numeric:lining-nums;
}
.meet__stats span{display:block;margin-top:10px;font-size:13px;color:var(--ink-2)}
@media (max-width:980px){
  .meet__intro{grid-template-columns:1fr}
}
@media (max-width:560px){
  .meet__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meet__stats li:nth-child(3){border-left:0;padding-left:0}
  .meet__stats li:nth-child(n+3){border-top:1px solid var(--line)}
}

.meet__subhead{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;
  margin:clamp(64px,8vw,112px) 0 20px;color:var(--fg);
}

.table-wrap{overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.spec-table{
  width:100%;min-width:820px;border-collapse:collapse;
  font-size:15.5px;font-variant-numeric:tabular-nums;
}
.table-note{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.spec-table th,.spec-table td{
  text-align:left;padding:15px 14px;
  border-top:1px solid var(--line);vertical-align:baseline;
  white-space:nowrap;
}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:1px solid var(--line)}
.spec-table th:first-child{padding-left:0}
.spec-table td:last-child,.spec-table th:last-child{padding-right:0}
.spec-table thead th{
  font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
  border-top:0;padding-top:0;
}
.spec-table tbody th{
  font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--fg);
}
.spec-table td{color:var(--fg)}
.spec-table .num{text-align:right}

.meet__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--line);
}
.meet__grid li{padding:22px 24px 6px 24px;border-left:1px solid var(--line)}
.meet__grid li:first-child{border-left:0;padding-left:0}
@media (max-width:860px){
  .meet__grid{grid-template-columns:1fr}
  .meet__grid li{border-left:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:20px}
}
.meet__grid h3{
  font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;
  margin:0 0 8px;color:var(--fg);
}
.meet__grid p{font-size:15.5px;margin:0}

.gallery{
  list-style:none;margin:clamp(56px,7vw,100px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
}
.gallery li{grid-column:span 2;margin:0}
.gallery figure{margin:0}
.gallery li.gallery__wide{grid-column:span 3}
.gallery li.gallery__full{grid-column:1/-1}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--paper-2)}
.gallery li.gallery__full img{aspect-ratio:21/8}
@media (max-width:760px){
  .gallery{grid-template-columns:1fr}
  .gallery li,.gallery li.gallery__wide,.gallery li.gallery__full{grid-column:auto}
  .gallery li.gallery__full img{aspect-ratio:3/2}
}

.meet__cta{
  margin-top:clamp(56px,7vw,100px);
  display:grid;grid-template-columns:minmax(0,1.2fr) auto;
  gap:28px;align-items:end;
  padding:clamp(28px,4vw,56px);
  background:var(--night);color:var(--paper);
}
.meet__cta .h2{margin:0 0 .45em;color:var(--paper);max-width:18ch}
.meet__cta p{color:var(--night-2);margin:0;max-width:58ch}
.meet__cta .btn{background:var(--paper);border-color:var(--paper);color:var(--night)}
.meet__cta .btn:hover{background:transparent;color:var(--paper)}
@media (max-width:760px){ .meet__cta{grid-template-columns:1fr} }

/* ── contact ─────────────────────────────────────────────────────── */

.contact{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,80px);align-items:start;
}
.contact__note{max-width:44ch;margin:0}
.contact__col .spec{margin-top:0}
@media (max-width:820px){ .contact{grid-template-columns:1fr} }

/* ── night footer ────────────────────────────────────────────────── */

.foot{background:var(--night);color:var(--paper)}
.foot__in{
  padding:clamp(28px,4vw,48px) var(--gut);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);flex-wrap:wrap;
  font-size:14px;
}
.foot p{margin:0;color:inherit}
.foot__mark{color:var(--brass-light);display:block}
.foot__mark .wordmark{height:18px}
.foot__nav{display:flex;gap:clamp(14px,2.2vw,28px);flex-wrap:wrap;margin-left:auto}
.foot__nav a{text-decoration:none;color:var(--night-2);transition:color .2s ease}
.foot__nav a:hover{color:var(--paper)}
.foot__dim{flex:1 0 100%;color:rgba(245,242,236,.56);padding-top:18px;border-top:1px solid var(--night-rule)}

/* ── modal ───────────────────────────────────────────────────────── */

.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:rgba(20,22,26,.6)}
.modal__panel{
  position:relative;width:min(960px,100%);
  max-height:100dvh;overflow-y:auto;
  background:var(--card);
  -webkit-overflow-scrolling:touch;
}
.modal__x{
  position:absolute;top:12px;right:12px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  background:var(--card);border:1px solid var(--rule);
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.modal__x:hover{border-color:var(--ink)}

.modal__strip{
  display:flex;gap:6px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--paper-2);
}
.modal__strip::-webkit-scrollbar{display:none}
.modal__strip img{
  flex:0 0 auto;width:min(78%,540px);
  aspect-ratio:5/4;object-fit:cover;scroll-snap-align:center;
}

.modal__body{padding:clamp(24px,3.4vw,44px)}
.modal__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  line-height:1.1;letter-spacing:-.012em;margin:0 0 .5em;
}
.modal__txt{color:var(--ink-2);max-width:58ch;margin:0}
.modal__body .btn{margin-top:clamp(24px,3vw,34px)}
.modal__body .spec{margin-bottom:0}

@media (min-width:721px){
  .modal{padding:24px}
  .modal__panel{max-height:calc(100dvh - 48px)}
}
@media (max-width:720px){
  .modal{place-items:end}
  .modal__panel{width:100%;max-height:92dvh}
  .modal__strip img{width:88%}
}

body.is-locked{overflow:hidden}

/* ── Conduit widget mounting layer ────────────────────────────────── */

#widget-slot{position:fixed;right:0;bottom:0;z-index:110;pointer-events:none}
#widget-slot:not(:empty){pointer-events:auto}

/* ── booking demo ────────────────────────────────────────────────── */
.booking-page{min-height:100vh;background:var(--paper)}
.booking-head{background:var(--paper);color:var(--ink);padding:20px var(--gut);border-bottom:1px solid var(--rule)}
.booking-head__in{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.booking-head__mark{display:block;color:inherit}
.booking-head__back{font-size:15px;font-weight:500;color:var(--ink-2);text-underline-offset:5px}
.booking-main{max-width:1180px;margin:auto;padding:clamp(40px,6vw,80px) var(--gut) 88px}
.booking-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:clamp(28px,4vw,48px)}
.booking-intro .h2{margin:0;max-width:16ch;font-size:clamp(2rem,4vw,3.2rem)}
.booking-note{max-width:38ch;margin:0;color:var(--ink-2);font-size:15px}
.booking-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);gap:clamp(28px,5vw,72px);align-items:start}
.booking-room{background:var(--card);overflow:hidden;border:1px solid var(--rule)}
.booking-room img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover}
.booking-room__body{padding:clamp(22px,3vw,34px)}
.booking-room__body .h2{margin:0 0 10px;font-size:clamp(1.7rem,3vw,2.4rem)}
.booking-room__meta{margin:0;color:var(--ink-2);font-size:15px}
.booking-card{background:var(--card);border:1px solid var(--rule);padding:clamp(22px,3vw,34px)}
.booking-card h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.2;margin:0 0 22px}
.booking-form{display:grid;gap:18px}
.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.booking-field{display:grid;gap:7px}
.booking-field--wide{grid-column:1/-1}
.booking-field label{font-size:13px;font-weight:600;color:var(--ink)}
.booking-field input,.booking-field select{width:100%;min-height:48px;border:1px solid var(--rule);border-radius:0;background:var(--paper);color:var(--ink);padding:10px 12px;font:inherit;font-size:16px}
.booking-field input:focus,.booking-field select:focus{outline:2px solid var(--ink);outline-offset:1px}
.booking-price{border-top:1px solid var(--rule);padding-top:18px;display:grid;gap:9px}
.booking-price__row{display:flex;justify-content:space-between;gap:20px;font-size:15px;font-variant-numeric:tabular-nums}
.booking-price__row--total{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px;font-family:var(--serif);font-size:1.35rem}
.booking-disclaimer{margin:0;color:var(--ink-2);font-size:13px;line-height:1.55}
.booking-error{max-width:680px;background:var(--card);border:1px solid #b84e3c;padding:28px}
.booking-error h1{font-family:var(--serif);font-weight:400;margin-top:0}
.booking-confirmation{background:var(--card);border:1px solid var(--rule);padding:clamp(32px,5vw,58px);max-width:720px}
.booking-confirmation h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:10px 0 20px}
.booking-confirmation p{max-width:55ch;color:var(--ink-2)}
.booking-confirmation[hidden],.booking-error[hidden],.booking-grid[hidden]{display:none}
@media (max-width:800px){
  .booking-intro{display:block}.booking-note{margin-top:18px}.booking-grid{grid-template-columns:1fr}
}
@media (max-width:520px){.booking-fields{grid-template-columns:1fr}.booking-field--wide{grid-column:auto}}

/* ── scroll reveal ───────────────────────────────────────────────── */

/* Only armed once JS confirms it can un-arm them, so a script failure can
   never leave the page blank. */
.js [data-reveal] > *{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.js [data-reveal].is-in > *{opacity:1;transform:none}
.js [data-reveal].is-in > *:nth-child(2){transition-delay:.07s}
.js [data-reveal].is-in > *:nth-child(3){transition-delay:.14s}
.js [data-reveal].is-in > *:nth-child(4){transition-delay:.21s}

/* ── motion: strip everything on request ─────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail,.modal__strip{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
  .card:hover .card__media img,.feature__card:hover .feature__media img{transform:none}
  /* never withhold content when motion is off */
  .js [data-reveal] > *{opacity:1!important;transform:none!important}
}