:root{--ink:#090909;--paper:#f0eadf;--muted:#aaa49b;--gold:#a98a55;--line:#302f2c;--serif:"new-spirit",Georgia,serif;--sans:"calibri",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:400}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit}

/* ─── HEADER ─────────────────────────────────────────────────── */
.site-header{height:112px;padding:20px 4.2vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #20201f}
.brand{width:112px}.brand img,footer img{object-fit:contain}
.site-header p{margin:0;font-size:14px;letter-spacing:.2em}
.back-link{justify-self:end;text-decoration:none;text-transform:uppercase;font-size:14px;letter-spacing:.12em;border-bottom:1px solid #777;padding-bottom:5px}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero{min-height:760px;display:grid;grid-template-columns:56% 44%;border-bottom:1px solid var(--line)}
.hero-image{min-height:760px}
.hero-copy{padding:9vw 7vw;display:flex;flex-direction:column;justify-content:center}
.eyebrow{color:#bbb5aa;font-size:12px;letter-spacing:.18em;line-height:1.5;margin:0 0 24px;text-transform:uppercase}
.hero h1,.promise h2,.rooms h2,.note h2,.dialog-copy h2{font-family:var(--serif);font-weight:400;letter-spacing:-.035em}
.hero h1{font-size:clamp(54px,6.1vw,102px);line-height:.94;margin:0 0 34px;max-width:8ch}
.intro{font-family:var(--serif);font-size:21px;line-height:1.55;color:#d3cec5;max-width:460px}
.text-link{margin-top:40px;text-transform:uppercase;letter-spacing:.15em;font-size:12px;text-decoration:none}

/* ─── PROMISE ────────────────────────────────────────────────── */
.promise{padding:140px 8vw 120px;text-align:center;max-width:1100px;margin:auto}
.promise h2,.note h2{font-size:clamp(44px,5.4vw,78px);line-height:1.04;margin:0 auto 30px;max-width:850px}
.promise>p:not(.eyebrow),.note>p:not(.eyebrow){font-family:var(--serif);font-size:20px;line-height:1.65;color:#c4beb4;max-width:750px;margin:0 auto}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:75px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promise-grid article{padding:42px 20px}
.promise-grid article+article{border-left:1px solid var(--line)}
.promise-grid strong{display:block;font:52px var(--serif)}
.promise-grid span{text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:var(--muted)}

/* ─── ROOMS ──────────────────────────────────────────────────── */
.rooms{padding:90px 4.2vw 130px}
.rooms-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:52px}
.rooms-heading h2{font-size:clamp(52px,6vw,84px);margin:0}
.rooms-heading>p{color:var(--muted);max-width:360px;line-height:1.6;font-size:16px}
.filters{display:flex;gap:8px;margin-bottom:42px;flex-wrap:wrap}
.filter{border:1px solid #494844;background:transparent;color:#aaa49b;padding:11px 18px;border-radius:50px;text-transform:uppercase;letter-spacing:.1em;font:14px var(--sans);cursor:pointer}
.filter span{margin-left:8px;opacity:.65}
.filter:hover,.filter.active{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 18px}
.room-card{cursor:pointer}
.room-card[hidden]{display:none}
.card-image{aspect-ratio:1.34;overflow:hidden;background:#222}
.card-image img{transition:transform .7s ease}
.room-card:hover img{transform:scale(1.025)}
.card-meta{display:flex;justify-content:space-between;margin:16px 0 10px;color:#9d978e;text-transform:uppercase;font-size:12px;letter-spacing:.13em}
.room-card h3{font:30px var(--serif);letter-spacing:-.02em;margin:0 0 9px}
.room-card p{margin:0;color:#b4aea5;font-size:16px;line-height:1.55}
.card-price{font-family:var(--serif)!important;color:var(--paper)!important;font-size:19px!important;margin-top:16px!important}

/* ─── NOTE ───────────────────────────────────────────────────── */
.note{text-align:center;padding:140px 8vw;background:#141412;border-top:1px solid var(--line)}
.button{display:inline-block;background:var(--gold);color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:12px;padding:17px 27px;margin-top:42px}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer{height:180px;padding:40px 4.2vw;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#817d76;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
footer img{width:110px}

/* ─── DIALOG ─────────────────────────────────────────────────── */
.room-dialog{padding:0;border:0;background:#111;color:var(--paper);width:100vw;height:100vh;max-width:none;max-height:none;grid-template-columns:57% 43%;overflow:hidden}
.room-dialog[open]{display:grid}
.room-dialog::backdrop{background:#000}
.dialog-image{height:100vh}
.dialog-copy{padding:8vh 7vw;overflow:auto;position:relative}
.dialog-copy h2{font-size:clamp(48px,5vw,80px);line-height:1;margin:0 0 20px}
.dialog-copy>p:not(.eyebrow):not(.dialog-price):not(.dialog-note):not(.image-credit){color:#bdb7ae;line-height:1.6;font-size:17px}
.dialog-price{font:24px var(--serif);color:#d6c4a5}
.dialog-copy ul{padding:22px 0;margin:24px 0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dialog-copy li{padding:9px 0;font-size:15px;color:#c8c2b8}
.dialog-copy li:before{content:"—";color:var(--gold);margin-right:11px}
.dialog-note{font:17px var(--serif);color:#d6d0c6}
.image-credit{font-size:9px!important;color:#6f6b65!important;margin-top:28px}
.close{position:fixed;z-index:3;top:25px;right:30px;background:none;border:0;color:#fff;font:38px/1 var(--sans);cursor:pointer;padding:0;line-height:1}
.dialog-back{background:none;border:0;color:#aaa49b;text-transform:uppercase;letter-spacing:.13em;font:12px var(--sans);padding:0;margin-bottom:12vh;cursor:pointer}

/* ─── TABLET 801–1100px ──────────────────────────────────────── */
@media(min-width:801px) and (max-width:1100px){
  .hero{min-height:580px;grid-template-columns:54% 46%}
  .hero-image{min-height:580px}
  .hero-copy{padding:7vw 5.5vw}
  .hero h1{font-size:clamp(44px,5.4vw,72px);margin-bottom:26px}
  .intro{font-size:18px;max-width:380px}
  .promise{padding:100px 7vw 90px}
  .promise h2,.note h2{font-size:clamp(38px,5vw,62px)}
  .promise>p:not(.eyebrow),.note>p:not(.eyebrow){font-size:18px}
  .promise-grid strong{font-size:44px}
  .rooms{padding:80px 4vw 100px}
  .rooms-heading{margin-bottom:40px}
  .rooms-heading h2{font-size:clamp(42px,5.4vw,68px)}
  .rooms-heading>p{max-width:280px;font-size:15px}
  .room-grid{grid-template-columns:repeat(2,1fr);gap:44px 20px}
  .room-card h3{font-size:26px}
  .note{padding:100px 7vw}
  .dialog-copy{padding:6vh 5.5vw}
  .dialog-copy h2{font-size:clamp(38px,4.5vw,64px)}
}

/* ─── MOBILE ≤800px ──────────────────────────────────────────── */
@media(max-width:800px){

  /* Header */
  .site-header{height:auto;min-height:64px;padding:14px 5vw;grid-template-columns:1fr auto;gap:0}
  .site-header>p{display:none}
  .brand{width:88px}
  .back-link{font-size:12px;letter-spacing:.08em;padding-bottom:3px}

  /* Hero — fix the min-height/height:100% gap bug */
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-image{height:46vh;height:46svh;min-height:0;flex-shrink:0}
  .hero-image img{height:100%;object-fit:cover;object-position:center 25%}
  .hero-copy{padding:44px 6vw 56px}
  .hero h1{font-size:clamp(46px,11.8vw,52px);line-height:.96;margin:0 0 22px}
  .intro{font-size:17px;line-height:1.52;max-width:none}
  .text-link{margin-top:26px}
  .eyebrow{font-size:11px;margin-bottom:16px}

  /* Promise */
  .promise{padding:68px 6vw 60px}
  .promise h2,.note h2{font-size:clamp(32px,8.8vw,44px);line-height:1.08;margin-bottom:20px}
  .promise>p:not(.eyebrow),.note>p:not(.eyebrow){font-size:17px;line-height:1.6}
  .promise-grid{margin-top:48px}
  .promise-grid article{padding:30px 16px}
  .promise-grid article+article{border-left:0;border-top:1px solid var(--line)}
  .promise-grid strong{font-size:42px}

  /* Rooms heading */
  .rooms{padding:56px 5vw 72px}
  .rooms-heading{display:block;margin-bottom:32px}
  .rooms-heading h2{font-size:clamp(36px,9.2vw,52px)}
  .rooms-heading>p{font-size:15px;line-height:1.55;margin-top:14px;max-width:none}

  /* Filter row — swipeable, hidden scrollbar, right-padding affordance */
  .filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;padding-right:5vw;margin-bottom:32px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{white-space:nowrap;padding:0 18px;min-height:44px;line-height:44px;font-size:13px;letter-spacing:.09em;flex-shrink:0}
  .filter span{margin-left:5px}

  /* Room grid & cards */
  .room-grid{grid-template-columns:1fr;gap:36px}
  .card-image{aspect-ratio:4/3}
  .room-card h3{font-size:26px;margin-bottom:6px}
  .room-card p{font-size:16px;line-height:1.55}
  .card-price{font-size:18px!important;margin-top:12px!important}
  .card-meta{font-size:11px;margin:14px 0 8px}

  /* Note */
  .note{padding:72px 6vw}
  .button{padding:16px 24px;font-size:11px}

  /* Footer */
  footer{display:block;height:auto;padding:40px 6vw;text-align:center;font-size:13px}
  footer img{width:90px;margin:0 auto 20px}

  /* Dialog — pinned image crop + scrollable copy column */
  .room-dialog{overflow:hidden}
  .room-dialog[open]{display:flex;flex-direction:column}
  .dialog-image{height:42vh;height:42svh;min-height:0;flex-shrink:0}
  .dialog-image img{height:100%;object-fit:cover;object-position:center 30%}
  .dialog-copy{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:36px 6vw 64px}
  .dialog-copy h2{font-size:clamp(28px,7.8vw,40px);line-height:1.06;margin:0 0 14px}
  .dialog-price{font-size:20px}
  .dialog-copy>p:not(.eyebrow):not(.dialog-price):not(.dialog-note):not(.image-credit){font-size:16px;line-height:1.6}
  .dialog-copy ul{margin:20px 0;padding:18px 0}
  .dialog-copy li{font-size:15px;padding:8px 0}
  .dialog-note{font-size:16px}
  .dialog-back{margin-bottom:24px;min-height:44px;display:inline-flex;align-items:center}

  /* Close — prominent 44×44 touch target with backing */
  .close{top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(0,0,0,.5);border-radius:50%;text-shadow:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card-image img{transition:none}}