/* ==========================================================================
   MAISON ĐỀ — Khách sạn boutique tại phố cổ Hội An
   Phong cách: LUXURY SERIF (phổ thông cao cấp — khách sạn / cưới / thời trang).
   Nền trắng ngà #FAF8F3, chữ than #26231F, nhấn xanh rêu #4F6350, phụ be #D9CDB8.
   Rất ít màu, khoảng trắng lớn, ảnh full-bleed, mỗi màn hình một ý.
   Tiêu đề 'Cormorant' 500 cỡ lớn (có Vietnamese); thân 'Be Vietnam Pro' 300/400;
   nhãn chữ nhỏ viết hoa, tracking rộng (.22em).
   ĐIỂM NHẬN DIỆN: (1) số thứ tự serif rất lớn (01, 02, 03…) màu be mờ đứng cạnh
   tiêu đề mỗi mục và trước mỗi loại phòng; (2) chữ cái đầu lớn (drop cap) ở đoạn
   giới thiệu; (3) đường kẻ mảnh 1px màu be chia khối. Không đổ bóng, không bo góc,
   không hiệu ứng nặng — chỉ chuyển màu nhẹ khi hover.
   Header trong suốt đè lên hero ảnh (chữ trắng), logo serif ở giữa, nav hai bên;
   thanh đặt phòng nổi đè mép dưới hero. Breakpoints: 1100 / 980 / 640px.
   ========================================================================== */
:root{
  --bg:#FAF8F3; --paper:#FFFFFF; --ink:#26231F; --ink-2:#4A463F; --muted:#77716A;
  --moss:#4F6350; --moss-d:#3B4B3C; --moss-l:#E4E9E3;
  --sand:#D9CDB8; --sand-l:#EFE9DD; --sand-x:#F5F1E8;
  --ph:linear-gradient(135deg,#E6DCC8,#D9CDB8);
  --ff-d:'Cormorant',Georgia,'Times New Roman',serif;
  --ff-b:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  --tr:.25s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-b);font-weight:300;font-size:16px;line-height:1.75;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color var(--tr),background var(--tr),border-color var(--tr)}
ul{list-style:none}
strong,b{font-weight:500}
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:500;line-height:1.1;letter-spacing:-.005em}
h1{font-size:clamp(48px,7vw,96px)}
h2{font-size:clamp(36px,4.6vw,60px)}
h3{font-size:clamp(26px,2.6vw,34px)}
h4{font-size:24px}
p{max-width:64ch}
.container{width:min(1200px,100% - 48px);margin-inline:auto}
.narrow{width:min(820px,100%);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--moss);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}
.ph{background:var(--img,var(--ph)) center/cover no-repeat}

/* ---------- Nhãn / nút / kẻ ---------- */
.label{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
.label--light{color:rgba(255,255,255,.85)}
.rule{border:0;border-top:1px solid var(--sand)}
.btn{display:inline-block;font-family:var(--ff-b);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:16px 32px;background:var(--moss);color:#fff;border:1px solid var(--moss);cursor:pointer;line-height:1.2;transition:background var(--tr),color var(--tr),border-color var(--tr)}
.btn:hover{background:var(--moss-d);border-color:var(--moss-d)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--block{display:block;width:100%;text-align:center}
.link{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);border-bottom:1px solid var(--sand);padding-bottom:4px}
.link:hover{border-color:var(--moss)}

/* ---------- Header trong suốt ---------- */
.header{position:absolute;inset:0 0 auto 0;z-index:20;color:#fff;padding:26px 0}
.header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px}
.logo{order:2;font-family:var(--ff-d);font-size:30px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-align:center;white-space:nowrap;line-height:1}
.logo em{font-style:italic;text-transform:none;letter-spacing:0;font-size:1.05em}
.logo small{display:block;font-family:var(--ff-b);font-size:9px;letter-spacing:.34em;font-weight:400;opacity:.8;margin-top:6px}
.nav{display:contents}
.nav ul{display:flex;align-items:center;gap:34px;font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.nav__l{order:1;justify-content:flex-start}
.nav__r{order:3;justify-content:flex-end}
.nav a{position:relative;padding-bottom:4px;opacity:.88}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width var(--tr)}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav a.is-active{opacity:1}
.nav .nav__cta{border:1px solid rgba(255,255,255,.8);padding:10px 18px;opacity:1}
.nav .nav__cta::after{display:none}
.nav .nav__cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;order:3;justify-self:end;width:40px;height:36px;background:none;border:1px solid rgba(255,255,255,.6);cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:10px;width:18px;height:1px;background:#fff;content:"";transition:transform var(--tr)}
.burger span{top:17px}
.burger span::before{top:-6px;left:0}
.burger span::after{top:6px;left:0}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92vh,880px);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;text-align:center;color:#fff;padding:140px 0 120px;overflow:hidden}
.hero--short{min-height:min(58vh,560px);padding:150px 0 90px}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.55) 0%,rgba(20,18,15,.25) 45%,rgba(20,18,15,.55) 100%)}
.hero__in{position:relative;z-index:1;max-width:100%}
.hero .label{margin-bottom:22px}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:italic;font-weight:400}
.hero p{margin:0 auto 34px;font-size:17px;max-width:46ch;opacity:.92}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero__crumb{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin-top:22px}
.hero__crumb span{margin:0 8px}

/* ---------- Thanh đặt phòng nổi ---------- */
.bookbar{position:relative;z-index:5;margin:-64px auto 0;width:min(1040px,100% - 48px);background:var(--paper);border:1px solid var(--sand);display:grid;grid-template-columns:1fr 1fr 1fr auto}
.bookbar__f{padding:20px 28px;border-right:1px solid var(--sand-l);display:flex;flex-direction:column;gap:6px}
.bookbar__f label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400}
.bookbar__f input,.bookbar__f select{border:0;background:none;font:400 18px var(--ff-d);color:var(--ink);outline:none;width:100%;padding:0}
.bookbar__f select{font-size:17px}
.bookbar .btn{align-self:stretch;display:flex;align-items:center;padding-inline:40px}

/* ---------- Section / số thứ tự lớn ---------- */
.sec{padding:110px 0}
.sec--tight{padding:80px 0}
.sec--sand{background:var(--sand-x)}
.sec--moss{background:var(--moss);color:#fff}
.sec-head{display:flex;align-items:flex-end;gap:26px;margin-bottom:60px}
.sec-head--center{flex-direction:column;align-items:center;text-align:center;gap:6px}
.sec-head--center .num{margin-bottom:-24px}
.num{font-family:var(--ff-d);font-weight:500;font-size:clamp(80px,10vw,130px);line-height:.78;color:var(--sand);letter-spacing:-.02em;flex:none;user-select:none}
.sec--moss .num{color:rgba(255,255,255,.28)}
.sec--moss .label{color:rgba(255,255,255,.75)}
.sec-head .label{margin-bottom:12px}
.sec-head p{margin-top:14px;color:var(--ink-2)}
.sec-head .num+div h2{margin-top:-4px}

/* ---------- Drop cap ---------- */
.dropcap::first-letter{font-family:var(--ff-d);font-weight:500;font-size:4.6em;float:left;line-height:.78;padding:.06em .12em 0 0;color:var(--moss)}

/* ---------- Giới thiệu ---------- */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.intro__text p{margin-bottom:22px;color:var(--ink-2);font-size:17px}
.intro__text h2{margin:8px 0 28px}
.intro__img{aspect-ratio:4/5;position:relative}
.intro__img .ph{position:absolute;inset:0}
.intro__img::before{content:"";position:absolute;inset:auto auto -22px -22px;width:60%;height:60%;border:1px solid var(--sand);z-index:-1}
.facts{display:flex;gap:40px;margin-top:34px;padding-top:26px;border-top:1px solid var(--sand)}
.facts b{display:block;font:500 34px var(--ff-d);line-height:1}
.facts span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Phòng (trang chủ) ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.room{display:flex;flex-direction:column}
.room__num{font-family:var(--ff-d);font-size:72px;line-height:.8;color:var(--sand);font-weight:500;margin-bottom:-22px;position:relative;z-index:1;margin-left:-4px}
.room__img{aspect-ratio:4/5}
.room__img .ph{width:100%;height:100%;transition:filter .4s}
.room:hover .room__img .ph{filter:brightness(.92)}
.room__body{padding:22px 0 0}
.room__body h3{margin:4px 0 8px}
.room__body p{color:var(--ink-2);font-size:15px;margin-bottom:12px}
.room__meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.room__foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px solid var(--sand);margin-top:auto;padding-top:16px}
.room__body+.room__foot{margin-top:18px}
.price{font-family:var(--ff-d);font-size:26px;font-weight:500}
.price small{font-family:var(--ff-b);font-size:12px;color:var(--muted);letter-spacing:.06em}

/* ---------- Trải nghiệm ảnh lớn ---------- */
.exps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.exp{position:relative;aspect-ratio:3/4;color:#fff;display:flex;align-items:flex-end;padding:34px;overflow:hidden}
.exp .ph{position:absolute;inset:0;transition:transform .8s ease}
.exp:hover .ph{transform:scale(1.04)}
.exp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(20,18,15,.7))}
.exp__in{position:relative;z-index:1}
.exp__in .label{color:rgba(255,255,255,.8);margin-bottom:8px}
.exp__in h3{margin-bottom:8px}
.exp__in p{font-size:14px;opacity:.9;max-width:34ch}

/* ---------- Khoảnh khắc (3 ảnh đêm) ---------- */
.moments{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px}
.moments .ph{width:100%;height:100%}
.moments figure{margin:0;position:relative;overflow:hidden}
.moments figure:first-child{grid-row:span 2}
.moments figcaption{position:absolute;left:20px;bottom:16px;color:#fff;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.moments__note{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px;padding-top:20px;border-top:1px solid var(--sand);flex-wrap:wrap}
.moments__note p{color:var(--ink-2)}

/* ---------- Đánh giá ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.quote{padding:10px 40px;border-left:1px solid var(--sand)}
.quote:first-child{border-left:0;padding-left:0}
.quote:last-child{padding-right:0}
.quote__mark{font-family:var(--ff-d);font-size:72px;line-height:.6;color:var(--sand);display:block;margin-bottom:18px}
.quote p{font-family:var(--ff-d);font-size:22px;line-height:1.4;font-style:italic;margin-bottom:22px;color:var(--ink)}
.quote cite{font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.quote cite b{display:block;font-weight:500;color:var(--ink);letter-spacing:.1em}
.stars{color:var(--moss);letter-spacing:.2em;font-size:12px;margin-bottom:12px}

/* ---------- CTA ---------- */
.cta{position:relative;padding:140px 0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;text-align:center;color:#fff;overflow:hidden}
.cta .hero__bg::after{background:rgba(59,75,60,.78)}
.cta .label{color:rgba(255,255,255,.8)}
.cta h2{margin:16px auto 20px}
.cta p{margin:0 auto 34px;opacity:.9}
.cta .btn--light{margin-inline:6px}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.8);padding:80px 0 30px;font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer .logo{order:0;text-align:left;color:#fff;margin-bottom:18px;display:inline-block}
.footer h4{font-family:var(--ff-b);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);margin-bottom:18px;font-weight:500}
.footer li{margin-bottom:10px}
.footer a:hover{color:#fff}
.footer p{line-height:1.8}
.footer__bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.55)}

/* ---------- Trang PHÒNG ---------- */
.room-full{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding:80px 0;border-top:1px solid var(--sand)}
.room-full:first-of-type{border-top:0;padding-top:0}
.room-full:nth-child(even) .room-full__img{order:2}
.room-full__img{aspect-ratio:4/3;position:relative}
.room-full__img .ph{position:absolute;inset:0}
.room-full .num{margin-bottom:-18px;display:block;font-size:clamp(64px,7vw,96px)}
.room-full h2{font-size:clamp(34px,3.6vw,48px);margin:0 0 14px}
.room-full>div>p{color:var(--ink-2);margin-bottom:24px}
.specs{display:flex;gap:30px;flex-wrap:wrap;font-size:13px;letter-spacing:.06em;color:var(--ink-2);padding:16px 0;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand);margin-bottom:22px}
.specs b{display:block;font:500 11px/1 var(--ff-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.amen{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:28px}
.amen li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.amen svg{width:18px;height:18px;stroke:var(--moss);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.room-full__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.room-full__foot .price{font-size:32px}
.room-full__foot div{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Trang PHÒNG CHI TIẾT ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:300px 300px;gap:12px}
.gallery figure{margin:0;overflow:hidden}
.gallery figure:first-child{grid-row:span 2}
.gallery .ph{width:100%;height:100%}
.detail{display:grid;grid-template-columns:1fr 380px;gap:70px;align-items:start;margin-top:70px}
.detail__main h2{font-size:clamp(34px,3.6vw,50px);margin:8px 0 22px}
.detail__main .specs{margin:26px 0 34px}
.detail__main h3{margin:44px 0 18px;display:flex;align-items:baseline;gap:14px}
.detail__main h3 .num{font-size:44px;line-height:.8}
.detail__main p{color:var(--ink-2);margin-bottom:18px}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--sand);border-width:1px 0 0 1px}
.amen-grid li{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--sand);border-width:0 1px 1px 0;font-size:14px;color:var(--ink-2)}
.amen-grid svg{width:20px;height:20px;stroke:var(--moss);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.policy{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.policy li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--sand-l);font-size:14px;color:var(--ink-2)}
.policy li b{flex:none;width:120px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:4px}
.aside{position:sticky;top:30px;background:var(--paper);border:1px solid var(--sand);padding:34px}
.aside .price{font-size:36px;margin-bottom:4px}
.aside .price small{font-size:12px}
.aside>p{font-size:13px;color:var(--muted);margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--sand-l)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{font:300 15px var(--ff-b);color:var(--ink);background:var(--bg);border:1px solid var(--sand);padding:12px 14px;outline:none;width:100%;transition:border-color var(--tr)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--moss)}
.field textarea{min-height:110px;resize:vertical}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aside__note{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
.other-rooms{display:flex;gap:30px;flex-wrap:wrap;margin-top:60px;padding-top:26px;border-top:1px solid var(--sand)}
.other-rooms a{display:flex;align-items:baseline;gap:12px;font-family:var(--ff-d);font-size:22px}
.other-rooms a span{font-size:12px;font-family:var(--ff-b);letter-spacing:.2em;color:var(--sand);font-weight:500}
.other-rooms a:hover{color:var(--moss)}

/* ---------- Trang ẨM THỰC ---------- */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.menu-grid .sticky-img{position:sticky;top:30px;aspect-ratio:4/5}
.menu-grid .sticky-img .ph{width:100%;height:100%}
.menu-group{margin-bottom:56px}
.menu-group h3{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.menu-group h3 .num{font-size:44px;line-height:.8}
.menu-group>span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.dish{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--sand-l)}
.dish__name{font-family:var(--ff-d);font-size:22px;font-weight:500}
.dish__desc{font-size:13px;color:var(--muted);margin-top:2px}
.dish__dots{flex:1;border-bottom:1px dotted var(--sand);transform:translateY(-6px);min-width:24px}
.dish__price{font-family:var(--ff-d);font-size:20px;white-space:nowrap}
.hours{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.hours div{background:var(--paper);border:1px solid var(--sand);padding:34px;text-align:center}
.hours b{display:block;font:500 30px var(--ff-d);margin:8px 0 4px}
.hours span{font-size:13px;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--sand);margin-top:70px}
.split .ph{min-height:420px}
.split__body{padding:60px;display:flex;flex-direction:column;justify-content:center}
.split__body h3{margin:8px 0 16px}
.split__body p{color:var(--ink-2);margin-bottom:20px}

/* ---------- Trang TRẢI NGHIỆM ---------- */
.tours{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.tour{display:flex;flex-direction:column;position:relative}
.tour__img{aspect-ratio:4/3;overflow:hidden;position:relative}
.tour__img .ph{width:100%;height:100%;transition:transform .8s ease}
.tour:hover .tour__img .ph{transform:scale(1.04)}
.tour__num{position:absolute;top:12px;left:14px;font-family:var(--ff-d);font-size:56px;line-height:.8;color:#fff;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.45);z-index:1}
.tour__body{padding:20px 0 0;flex:1;display:flex;flex-direction:column}
.tour__body h3{font-size:26px;margin:4px 0 8px}
.tour__body p{font-size:14px;color:var(--ink-2);margin-bottom:16px}
.tour__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;border-top:1px solid var(--sand)}
.tour__foot .price{font-size:22px}
.tour__foot span.dur{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.timeline{max-width:820px;margin-inline:auto}
.tl{display:grid;grid-template-columns:120px 1px 1fr;gap:0 34px;padding:26px 0}
.tl+.tl{border-top:1px solid var(--sand-l)}
.tl__time{font:500 30px var(--ff-d);line-height:1;color:var(--moss)}
.tl__time small{display:block;font:400 11px var(--ff-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.tl__line{background:var(--sand)}
.tl h4{margin-bottom:6px}
.tl p{font-size:15px;color:var(--ink-2)}

/* ---------- Trang ĐẶT PHÒNG ---------- */
.booking{display:grid;grid-template-columns:1fr 400px;gap:70px;align-items:start}
.form-sec{margin-bottom:44px}
.form-sec h3{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.form-sec h3 .num{font-size:44px;line-height:.8}
.summary{position:sticky;top:30px;background:var(--paper);border:1px solid var(--sand);padding:34px}
.summary h3{margin-bottom:6px}
.summary>.label{margin-bottom:22px;display:block;color:var(--muted)}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:12px 20px;font-size:14px;color:var(--ink-2);padding:18px 0;border-top:1px solid var(--sand-l);border-bottom:1px solid var(--sand-l)}
.summary dd{text-align:right;color:var(--ink);font-weight:400}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0 6px}
.summary__total b{font:500 34px var(--ff-d)}
.summary__total span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.summary small{display:block;font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px}
.summary .btn{margin-top:22px}
.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.contact-strip div{padding-left:22px;border-left:1px solid var(--sand)}
.contact-strip b{display:block;font:500 24px var(--ff-d);margin:6px 0 4px}
.contact-strip span{font-size:14px;color:var(--ink-2)}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.checkline input{margin-top:6px;accent-color:var(--moss)}
.msg{margin-top:16px;padding:14px 18px;border:1px solid var(--moss);color:var(--moss);font-size:14px;background:var(--moss-l)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .intro{gap:50px}
  .room-full{gap:44px}
  .detail{grid-template-columns:1fr 340px;gap:44px}
  .booking{grid-template-columns:1fr 340px;gap:44px}
  .menu-grid{gap:50px}
}
@media (max-width:980px){
  .header{padding:18px 0}
  .header__in{grid-template-columns:auto 1fr auto}
  .logo{order:1;font-size:24px;justify-self:start}
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);padding:20px 24px 26px;border-top:1px solid rgba(255,255,255,.14)}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav li a::after{display:none}
  .nav .nav__cta{margin-top:16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.8)}
  .bookbar{grid-template-columns:1fr 1fr}
  .bookbar__f:nth-child(even){border-right:0}
  .bookbar .btn{grid-column:1/-1;justify-content:center;padding:20px}
  .sec{padding:80px 0}
  .intro,.room-full,.menu-grid,.split{grid-template-columns:1fr}
  .intro__img{aspect-ratio:4/3}
  .room-full:nth-child(even) .room-full__img{order:0}
  .rooms,.exps,.quotes,.tours,.hours,.contact-strip{grid-template-columns:1fr 1fr}
  .quote{padding:10px 26px}
  .quote:first-child{padding-left:0}
  .quote:nth-child(3){border-left:0;padding-left:0;margin-top:30px}
  .moments{grid-template-columns:1fr 1fr;grid-template-rows:260px 260px 260px}
  .moments figure:first-child{grid-row:span 1;grid-column:span 2}
  .detail,.booking{grid-template-columns:1fr}
  .aside,.summary{position:static}
  .menu-grid .sticky-img{position:static;aspect-ratio:16/9}
  .footer__grid{grid-template-columns:1fr 1fr}
  .amen-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .container{width:min(1200px,100% - 32px)}
  .hero{min-height:min(88vh,720px);padding:120px 0 110px}
  .hero--short{min-height:auto;padding:130px 0 70px}
  .bookbar{grid-template-columns:1fr;width:min(1040px,100% - 32px);margin-top:-40px}
  .bookbar__f{border-right:0;border-bottom:1px solid var(--sand-l);padding:16px 20px}
  .sec{padding:64px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:36px}
  .sec-head .num{font-size:72px}
  .sec-head--center{align-items:center}
  .rooms,.exps,.quotes,.tours,.hours,.contact-strip,.policy,.amen-grid,.footer__grid,.field--2{grid-template-columns:1fr}
  .exp{aspect-ratio:4/5}
  .quote{padding:0;border-left:0;margin-top:30px}
  .quote:first-child{margin-top:0}
  .moments{grid-template-columns:1fr;grid-template-rows:240px 240px 240px}
  .moments figure:first-child{grid-column:span 1}
  .gallery{grid-template-columns:1fr;grid-template-rows:260px 200px 200px}
  .gallery figure:first-child{grid-row:span 1}
  .split__body{padding:34px 24px}
  .split .ph{min-height:260px}
  .tl{grid-template-columns:1fr;gap:10px}
  .tl__line{display:none}
  .tl__time{font-size:24px}
  .tl__time small{display:inline;margin-left:10px}
  .facts{gap:22px;flex-wrap:wrap}
  .aside,.summary{padding:24px}
  .room-full__foot .price{font-size:26px}
  .contact-strip div{border-left:0;padding-left:0;border-top:1px solid var(--sand);padding-top:16px}
  .intro__img::before{display:none}
  .cta{padding:90px 0}
}