/* BAN HAUS design system: shared by every page.
   Page-only rules live in src/pages/<page>.css (linked on that page only).
   Order: tokens · registers · base · layout · type · controls · photo · chrome (header, booking,
   menu, action bar, footer) · components (facts, spec, steps, rate table, gallery, tile, row, equipment,
   list, map) · motion. Fonts: /fonts/fonts.css. No texture, no ornament: hairlines only inside tables. */

/* ── tokens ─────────────────────────────────────────── */
:root{
  --night:#17120e; --night-2:#221b15; --bone:#eee6d9; --bone-2:#aca295; --bone-line:rgba(238,230,217,.15);
  --paper:#f3eee6; --paper-2:#e9e2d6; --ink:#211c17; --ink-2:#655b51; --ink-line:rgba(33,28,23,.14);
  --amber:#cf9a5c; --timber:#8a5a2b;

  --sans:"Manrope Variable","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --t-xs:12px; --t-s:14px; --t-m:16px; --t-l:22px; --t-xl:40px;
  --w-body:400; --w-head:450; --w-mid:500;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --sec:clamp(72px, 4vw + 52px, 120px);
  --m:clamp(20px, 4.45vw, 64px);
  --g:24px; --max:1440px; --hdr:72px; --abar:64px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:1023px){ :root{ --hdr:60px } html{ scroll-padding-bottom:calc(var(--abar) + var(--s-4) + env(safe-area-inset-bottom)) } }
@media (max-width:767px){ :root{ --g:16px; --t-l:20px; --t-xl:30px } }

/* ── registers: evening (night) and day (paper) ─────── */
[data-reg=night]{ --bg:var(--night); --bg-2:var(--night-2); --fg:var(--bone); --fg-2:var(--bone-2); --line:var(--bone-line); --rule:rgba(238,230,217,.5); --acc:var(--amber); background-color:var(--bg); color:var(--fg) }
[data-reg=paper]{ --bg:var(--paper); --bg-2:var(--paper-2); --fg:var(--ink); --fg-2:var(--ink-2); --line:var(--ink-line); --rule:var(--ink); --acc:var(--timber); background-color:var(--bg); color:var(--fg) }

/* ── base ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--night); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + 24px) }
body{ margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--t-m); line-height:1.7; font-weight:var(--w-body); font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body{ word-break:keep-all; overflow-wrap:break-word }
p,dd,li,.sub{ text-wrap:pretty }
html[lang=en] body{ line-height:1.6 }
img,svg,picture,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0; padding:0 }
ul,ol{ list-style:none }
table{ border-collapse:collapse; border-spacing:0 }
:focus-visible{ outline:2px solid var(--acc,var(--timber)); outline-offset:3px; border-radius:1px }
.sr{ position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:fixed; left:var(--m); top:-80px; z-index:100; padding:12px 16px; background:var(--ink); color:var(--paper); font-size:var(--t-s) }
.skip:focus{ top:12px }
main{ display:block; min-height:100vh; padding-top:var(--hdr) }

/* ── layout: 12-column grid (4 on phones) ───────────── */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--m) }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g) }
@media (max-width:767px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.sec{ padding-block:var(--sec) }
.sec[data-reg=paper]+.sec[data-reg=paper],.sec[data-reg=night]+.sec[data-reg=night]{ padding-top:0 }
/* split: heading in columns 1–4, body in 5–12 */
.split{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); row-gap:var(--s-5) }
.split__head{ grid-column:1/5; align-self:start }
.split__head p{ margin-top:var(--s-2); max-width:28ch }
.split__body{ grid-column:5/-1; min-width:0 }
@media (max-width:1023px){ .split__head,.split__body{ grid-column:1/-1 } .split__head p{ max-width:46ch } }

/* ── type: five sizes ───────────────────────────────── */
.t-xl{ font-size:var(--t-xl); line-height:1.25; font-weight:var(--w-head); letter-spacing:-.01em }
.t-l{ font-size:var(--t-l); line-height:1.35; font-weight:var(--w-head); letter-spacing:-.005em }
.t-m{ font-size:var(--t-m) }
.t-s{ font-size:var(--t-s); line-height:1.6 }
.t-xs{ font-size:var(--t-xs); line-height:1.5 }
html[lang=en] .t-xl{ letter-spacing:-.012em }
html[lang=en] .t-l{ letter-spacing:-.004em }
.muted{ color:var(--fg-2,var(--ink-2)) }
.num{ font-variant-numeric:tabular-nums }
.nw{ white-space:nowrap }
/* label: Korean 14 medium; English 12 tracked caps in the logo's voice */
.label{ font-size:var(--t-s); line-height:1.4; font-weight:var(--w-mid); color:var(--fg-2) }
html[lang=en] .label{ font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase }

/* ── controls ───────────────────────────────────────── */
.i{ width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4 }
.i-arr{ width:14px; height:12px; transition:transform .35s var(--ease) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 20px; border:1px solid var(--fg); border-radius:2px; background:var(--fg); color:var(--bg); font-size:var(--t-s); font-weight:var(--w-mid); line-height:1.2; white-space:nowrap; transition:background-color .2s,border-color .2s,color .2s }
.btn:hover{ background:var(--acc); border-color:var(--acc); color:var(--bg) }
.btn--line{ background:transparent; color:var(--fg); border-color:var(--line) }
.btn--line:hover{ background:transparent; color:var(--fg); border-color:var(--fg) }
.btn--block{ display:flex; width:100%; min-height:52px; font-size:var(--t-m) }
.lnk{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:var(--w-mid); text-decoration:underline 1px; text-decoration-color:var(--line); text-underline-offset:6px; transition:text-decoration-color .2s,color .2s }
.lnk:hover{ text-decoration-color:currentColor }
.lnk:hover .i-arr{ transform:translateX(3px) }
.ilink{ text-decoration:underline 1px; text-decoration-color:var(--line); text-underline-offset:4px; transition:text-decoration-color .2s }
.ilink:hover{ text-decoration-color:currentColor }
.copy{ display:none; align-items:center; min-height:44px; padding-inline:4px; font-size:var(--t-s); color:var(--fg-2); text-decoration:underline 1px; text-decoration-color:var(--line); text-underline-offset:4px }
.copy:hover{ color:var(--fg); text-decoration-color:currentColor }
.js .copy{ display:inline-flex }

/* ── photo: LQIP blur under, image fades in once decoded, box reserved (no shift) ── */
.ph{ position:relative; display:block; overflow:hidden; isolation:isolate; background:var(--dom,var(--night-2)) }
.ph::before{ content:""; position:absolute; inset:-8%; z-index:-1; background:var(--lqip) center/cover no-repeat; filter:blur(18px); transform:scale(1.06) }
.ph img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.ph--fill{ height:100% }
.js .ph--fade img{ opacity:0; transition:opacity .6s var(--ease),transform .9s var(--ease) }
.js .ph--fade.is-loaded img{ opacity:1 }
.cap{ margin-top:var(--s-2); font-size:var(--t-xs); color:var(--fg-2) }

/* ── header: one wordmark, register follows the section beneath ── */
.hdr{ position:absolute; top:0; left:0; right:0; z-index:50; height:var(--hdr) }
.js .hdr{ position:fixed; transition:transform .45s var(--ease),visibility 0s,background-color .35s ease,color .35s ease,box-shadow .35s ease }
.hdr.is-line{ box-shadow:0 1px 0 var(--line) }
.js .hdr.is-hidden{ transform:translateY(-100%); visibility:hidden; transition:transform .45s var(--ease),visibility 0s .45s }
.hdr__in{ height:100%; display:flex; align-items:center; gap:var(--s-6) }
.brand{ display:inline-flex; align-items:center; height:44px; flex:none; color:inherit }
.brand svg{ width:150px; height:auto }
.nav{ margin-left:auto; display:flex; align-items:center; gap:28px }
.nav a{ position:relative; display:flex; align-items:center; height:44px; font-size:var(--t-s); font-weight:var(--w-mid); color:var(--fg-2); transition:color .2s; white-space:nowrap }
.nav a:hover,.nav a[aria-current=page]{ color:var(--fg) }
.nav a[aria-current=page]::after{ content:""; position:absolute; left:0; right:0; bottom:9px; height:1px; background:currentColor }
html[lang=en] .nav a{ font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase }
html[lang=en] .nav a[aria-current=page]::after{ right:.16em }
.hdr__tools{ display:flex; align-items:center; gap:var(--s-5) }
.lang{ display:flex; align-items:center; font-size:var(--t-xs); font-weight:600; letter-spacing:.12em; color:var(--fg-2) }
.lang a,.lang__cur{ display:flex; align-items:center; justify-content:center; min-width:44px; height:44px }
.lang__cur{ color:var(--fg) }
.lang a{ transition:color .2s }
.lang a:hover{ color:var(--fg) }
.lang i{ font-style:normal; opacity:.45 }
.menu-btn{ display:none; align-items:center; gap:10px; height:44px; margin-right:-4px; padding-inline:4px; font-size:var(--t-s); font-weight:var(--w-mid) }
.menu-btn .i{ width:18px; height:10px }
/* 1024–1199: the English nav (tracked caps) needs about 90 px more than the Korean; tighten so the 예약 button keeps the margin */
@media (min-width:1024px) and (max-width:1199px){
  .hdr__in{ gap:var(--s-5) }
  .hdr__tools{ gap:var(--s-4) }
  html[lang=en] .nav{ gap:18px }
  html[lang=en] .nav a{ letter-spacing:.1em }
  html[lang=en] .nav a[aria-current=page]::after{ right:.1em }
}
@media (max-width:1023px){
  .nav,.hdr__tools>.lang,.hdr__tools>.btn{ display:none }
  .hdr__tools{ margin-left:auto }
  .menu-btn{ display:inline-flex }
  .brand svg{ width:128px }
}

/* ── booking: popover under the header button (desktop), sheet (below 1024) ── */
.book{ position:fixed; z-index:70; top:calc(var(--hdr) - 6px); right:var(--book-r,var(--m)); width:400px; max-width:calc(100vw - 2 * var(--m)); padding:var(--s-2) 0 var(--s-3); border-radius:2px; box-shadow:0 28px 60px -24px rgba(10,7,4,.6),0 0 0 1px rgba(33,28,23,.08); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease,transform .3s var(--ease),visibility 0s .3s }
.book.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .2s ease,transform .3s var(--ease) }
.book__head{ display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 var(--s-5) }
.book__close{ display:none; min-height:44px; margin-right:-8px; padding-inline:8px; font-size:var(--t-s); font-weight:var(--w-mid) }
.book a{ display:grid; grid-template-columns:minmax(0,1fr) auto 12px; align-items:center; column-gap:var(--s-4); min-height:56px; padding:0 var(--s-5); transition:background-color .2s }
.book li+li a{ box-shadow:inset 0 1px 0 var(--line) }
.book a:hover{ background:var(--bg-2) }
.book a:focus-visible{ outline-offset:-3px }
.book__name{ display:flex; flex-direction:column; padding-block:var(--s-2); font-weight:var(--w-mid); line-height:1.4 }
.book__opt{ font-size:var(--t-s); font-weight:var(--w-body); color:var(--fg-2) }
.book__rate{ font-size:var(--t-s); color:var(--fg-2); white-space:nowrap }
.book__rate .amt{ color:var(--fg) }
.book .i-ext{ color:var(--fg-2) }
.scrim{ position:fixed; inset:0; z-index:65; background:rgba(10,7,4,.5); opacity:0; visibility:hidden; transition:opacity .25s,visibility 0s .25s }
.scrim.is-open{ opacity:1; visibility:visible; transition:opacity .25s }
@media (max-width:1023px){
  .book{ top:auto; left:0; right:0; bottom:0; width:auto; max-width:none; border-radius:0; padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom)); transform:translateY(24px) }
  .book__close{ display:inline-flex; align-items:center }
}

/* ── mobile menu sheet ──────────────────────────────── */
.msheet{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--m) calc(var(--s-6) + env(safe-area-inset-bottom)); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility 0s .3s }
.msheet.is-open,.msheet:target{ opacity:1; visibility:visible; transition:opacity .3s ease }
.msheet__top{ flex:none; height:var(--hdr); display:flex; align-items:center; justify-content:space-between }
.msheet__top .brand svg{ width:128px }
.msheet .menu-btn{ display:inline-flex }
.msheet__group{ margin-top:var(--s-6) }
.msheet__group+.msheet__group{ margin-top:var(--s-7) }
.msheet__group .label{ margin-bottom:var(--s-1) }
.msheet__list a{ display:flex; align-items:center; min-height:52px; font-size:var(--t-l); font-weight:var(--w-head); letter-spacing:-.01em }
.msheet__list a[aria-current=page]{ text-decoration:underline 1px; text-underline-offset:8px }
.msheet__foot{ margin-top:auto; padding-top:var(--s-7); display:grid; gap:var(--s-3) }
.msheet__meta{ display:flex; align-items:center; justify-content:space-between; color:var(--fg-2); font-size:var(--t-s) }
.msheet__meta a.num{ display:flex; align-items:center; min-height:44px }
@media (min-width:1024px){ .msheet{ display:none } }

/* ── mobile action bar ──────────────────────────────── */
.abar{ display:none }
@media (max-width:1023px){
  .abar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--s-2); padding:var(--s-2) var(--m) calc(var(--s-2) + env(safe-area-inset-bottom)); box-shadow:0 -1px 0 var(--line); transition:transform .4s var(--ease),visibility 0s }
  .abar .btn{ min-width:0; min-height:48px; padding-inline:var(--s-4); font-size:var(--t-m) }
  .abar .btn>span{ min-width:0; overflow:hidden; text-overflow:ellipsis }
  .abar.is-hidden{ transform:translateY(110%); visibility:hidden; transition:transform .4s var(--ease),visibility 0s .4s }
  .abar__mid,.abar__short{ display:none }
}
/* a room's action label (업라이트 합주실 예약 / Book the upright room) gives way to 네이버 예약 / Book on Naver where it cannot fit */
@media (max-width:399px){ html[lang=en] .abar__room .abar__long{ display:none } html[lang=en] .abar__room .abar__mid{ display:inline } }
@media (max-width:359px){ .abar__room .abar__long{ display:none } .abar__room .abar__mid{ display:inline } }
/* Netlify's free-plan badge (fixed, bottom right, ~200 px): keep the buttons to its left, short labels (after the rules above) */
@media (max-width:1023px){
  html.has-nl-badge .abar{ grid-template-columns:auto auto; justify-content:start; padding-right:216px }
  html.has-nl-badge .abar .btn{ padding-inline:16px }
  html.has-nl-badge .abar .abar__long,html.has-nl-badge .abar .abar__mid{ display:none }
  html.has-nl-badge .abar .abar__short{ display:inline }
}
/* beside the badge on small phones there is room for one button: booking (the phone number is in the menu and the footer) */
@media (max-width:399px){ html.has-nl-badge .abar{ grid-template-columns:auto } html.has-nl-badge .abar .btn--line{ display:none } }
@media (max-width:359px){ html.has-nl-badge .abar .btn{ padding-inline:var(--s-3) } html.has-nl-badge .abar .i-ext{ display:none } }

/* ── footer: lockup, per-room booking table, contact ── */
.ftr{ padding-block:var(--s-9) var(--s-6) }
.ftr__grid{ row-gap:var(--s-7) }
.ftr__mark{ grid-column:1/4; align-self:start; display:block; width:160px; color:var(--fg) }
.ftr__mark svg{ width:100%; height:auto }
.ftr__col{ grid-column:span 4 }
.ftr__book{ grid-column:5/9 }
.ftr__col h2{ margin-bottom:var(--s-3) }
.ftr__rows li{ border-top:1px solid var(--line) }
.ftr__rows li:last-child{ border-bottom:1px solid var(--line) }
.ftr__rows a{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:48px; transition:color .2s }
.ftr__rows a:hover{ color:var(--acc) }
.ftr__rows .muted{ font-size:var(--t-s) }
.ftr__rows .i-ext{ color:var(--fg-2) }
.ftr__base{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-6); font-size:var(--t-s); color:var(--fg-2) }
.ftr__base p:first-child{ margin-right:auto }
@media (max-width:1023px){
  .ftr{ padding-bottom:calc(var(--abar) + var(--s-6) + env(safe-area-inset-bottom)) }
  .ftr__mark{ grid-column:1/-1; width:128px }
  .ftr__col,.ftr__book{ grid-column:1/-1 }
  .ftr__base{ flex-direction:column; align-items:flex-start }
}

/* ── facts strip: up to four key facts, ink rule on top ── */
.facts{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); column-gap:var(--g); row-gap:var(--s-5) }
.facts>div{ padding-top:var(--s-3); border-top:1px solid var(--rule) }
.facts dt{ font-size:var(--t-s); line-height:1.4; color:var(--fg-2) }
html[lang=en] .facts dt{ font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase }
.facts dd{ margin-top:var(--s-2); font-weight:var(--w-mid); line-height:1.45 }
.facts .sub{ display:block; margin-top:2px; font-size:var(--t-s); font-weight:var(--w-body); color:var(--fg-2) }

/* ── spec list: label / value rows ──────────────────── */
.spec{ --k:6.5em }
.spec>div{ display:grid; grid-template-columns:var(--k) minmax(0,1fr); column-gap:var(--s-5); align-items:baseline; padding-block:var(--s-3); border-top:1px solid var(--line) }
.spec>div:last-child{ border-bottom:1px solid var(--line) }
.spec dt{ font-size:var(--t-s); color:var(--fg-2) }
.spec dd{ font-weight:var(--w-mid) }
.spec .sub{ display:block; margin-top:2px; font-size:var(--t-s); font-weight:var(--w-body); line-height:1.55; color:var(--fg-2) }
html[lang=en] .spec{ --k:8.5em }
html[lang=en] .spec dt{ font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase }

/* ── numbered steps (directions) ────────────────────── */
.steps{ counter-reset:step }
.steps li{ counter-increment:step; display:grid; grid-template-columns:24px minmax(0,1fr); align-items:baseline; padding-block:6px }
.steps li::before{ content:counter(step); font-size:var(--t-s); font-weight:600; color:var(--fg-2); font-variant-numeric:tabular-nums }

/* ── rate table: rows, optional group rows, stacked when narrow ── */
.rt-wrap{ container:rt/inline-size }
.rt{ width:100% }
.rt th,.rt td{ padding:var(--s-4) 0; border-top:1px solid var(--line); text-align:left; vertical-align:baseline; font-weight:var(--w-body) }
.rt>tbody:last-child>tr:last-child>*{ border-bottom:1px solid var(--line) }
.rt thead th{ padding:0 0 var(--s-2); border-top:0; font-size:var(--t-s); font-weight:var(--w-mid); color:var(--fg-2) }
html[lang=en] .rt thead th{ font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase }
.rt tbody th{ padding-right:var(--s-5); font-weight:var(--w-mid) }
.rt .sub{ display:block; margin-top:2px; font-size:var(--t-s); font-weight:var(--w-body); line-height:1.55; color:var(--fg-2) }
.rt .sub a{ color:var(--fg) }
.rt .c-min{ width:7.5em; padding-right:var(--s-4); font-size:var(--t-s); color:var(--fg-2); white-space:nowrap }
.rt .c-amt{ width:1%; text-align:right; white-space:nowrap }
.rt .amt{ font-weight:var(--w-mid); font-variant-numeric:tabular-nums }
.rt .per,.rt .tbc{ color:var(--fg-2) }
.rt .tbc{ font-size:var(--t-s) }
.rt .ml{ display:none }
.rt .rt-gh th{ padding:var(--s-6) 0 var(--s-2); border-top:0; font-size:var(--t-s); font-weight:600 }
.rt>tbody:first-child .rt-gh th{ padding-top:0 }
.rt .rt-gh span{ margin-left:var(--s-3); font-weight:var(--w-body); color:var(--fg-2) }
html[lang=en] .rt .rt-gh th{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase }
html[lang=en] .rt .rt-gh span{ font-size:var(--t-s); letter-spacing:0; text-transform:none }
/* inside a room panel a group row (대여) reads like the panel's other labels (요금) */
.room__rates .rt .rt-gh th{ font-weight:var(--w-mid); color:var(--fg-2) }
html[lang=en] .room__rates .rt .rt-gh th{ font-weight:600 }
@container rt (min-width:521px){
  .room__rates>.label{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@container rt (max-width:520px){
  .rt thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .rt tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s-4); padding-block:14px; border-top:1px solid var(--line) }
  .rt>tbody:last-child>tr:last-child{ border-bottom:1px solid var(--line) }
  .rt th,.rt td,.rt>tbody:last-child>tr:last-child>*{ padding:0; border:0 }
  .rt tbody th{ grid-column:1; grid-row:1/span 2; padding-right:0 }
  .rt .c-amt{ grid-column:2; grid-row:1; width:auto }
  .rt .c-min{ grid-column:2; grid-row:2; width:auto; padding:0; text-align:right }
  .rt .ml{ display:inline }
  .rt .rt-gh{ padding:var(--s-6) 0 var(--s-2); border-top:0 }
  .rt>tbody:first-child .rt-gh{ padding-top:0 }
  .rt .rt-gh th{ grid-column:1/-1; grid-row:auto; padding:0 }
}

/* ── gallery: snap track, arrows on hover, thumbnails across the column ── */
.gal{ min-width:0 }
.gal__view{ position:relative }
.gal__track{ position:relative; display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:3/2; background:var(--bg-2) }
.gal__track::-webkit-scrollbar{ display:none }
.gal__slide{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always }
.gal__slide .ph{ height:100% }
.gal__btn{ position:absolute; top:50%; width:44px; height:44px; margin-top:-22px; display:none; place-items:center; border-radius:2px; background:rgba(23,18,14,.72); color:var(--bone); opacity:0; transition:opacity .25s,background-color .2s }
.gal__btn .i{ width:16px; height:16px }
.gal__btn:hover{ background:var(--night) }
.gal__btn--prev{ left:var(--s-4) }
.gal__btn--next{ right:var(--s-4) }
.gal__view:hover .gal__btn,.gal__btn:focus-visible{ opacity:1 }
.gal__btn[disabled]{ opacity:0!important; pointer-events:none }
.gal__thumbs{ display:none; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:var(--s-2); margin-top:var(--s-3) }
.gal__thumbs button{ position:relative; display:block; aspect-ratio:2/1; opacity:.5; transition:opacity .25s }
.gal__thumbs button .ph{ height:100% }
.gal__thumbs button:hover{ opacity:.85 }
.gal__thumbs button[aria-current=true]{ opacity:1 }
.gal__thumbs button[aria-current=true]::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--fg) }
.gal__count{ display:none; font-size:var(--t-s); color:var(--fg-2); font-variant-numeric:tabular-nums }
/* arrows and thumbnails need JS; without it the track still scrolls */
@media (min-width:1024px){ .js .gal__btn,.js .gal__thumbs{ display:grid } }
@media (max-width:1023px){
  .gal{ margin-inline:calc(var(--m) * -1) }
  .gal__track{ aspect-ratio:auto; gap:var(--s-2); padding-inline:var(--m); scroll-padding-inline:var(--m); background:none }
  .gal__slide{ flex-basis:calc(100% - 24px); aspect-ratio:4/3 }
  .gal__thumbs,.gal__btn{ display:none }
  .gal__count{ display:block; padding:var(--s-3) var(--m) 0 }
}

/* ── tile: photo + caption; becomes an index row below 1024 with .tile--index ── */
.tile{ display:block; color:inherit }
.tile .ph img{ transition:opacity .6s var(--ease),transform .9s var(--ease) }
.tile:hover .ph img{ transform:scale(1.03) }
.tile__cap{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s-4); align-items:baseline; padding-top:var(--s-4) }
.tile__name{ font-size:var(--t-l); font-weight:var(--w-head); line-height:1.35; transition:color .2s }
.tile:hover .tile__name{ color:var(--acc) }
.tile__rate{ font-size:var(--t-s); color:var(--fg-2); white-space:nowrap; text-align:right }
.tile__rate .amt{ color:var(--fg); font-weight:var(--w-mid) }
.tile__meta{ grid-column:1/-1; margin-top:2px; font-size:var(--t-s); color:var(--fg-2) }
@media (max-width:1023px){
  .tile--index{ display:grid; grid-template-columns:clamp(104px,26vw,176px) minmax(0,1fr); column-gap:var(--s-4); align-items:start; padding-block:var(--s-4); border-top:1px solid var(--line) }
  .tile--index .ph{ aspect-ratio:1/1!important }
  .tile--index .tile__cap{ grid-template-columns:minmax(0,1fr); padding-top:0 }
  .tile--index .tile__rate{ margin-top:2px; text-align:left; white-space:normal }
  .tile--index .tile__meta{ margin-top:var(--s-1) }
}

/* ── row: a text-only index row (no photo) ──────────── */
.xrow{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); align-items:baseline; padding-block:var(--s-5); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.xrow__name{ grid-column:1/5; font-size:var(--t-l); font-weight:var(--w-head); line-height:1.35; transition:color .2s }
.xrow__meta{ grid-column:5/9; font-size:var(--t-s); color:var(--fg-2) }
.xrow__rate{ grid-column:9/12; font-size:var(--t-s); color:var(--fg-2) }
.xrow__rate .amt{ color:var(--fg); font-weight:var(--w-mid) }
.xrow .i-arr{ grid-column:12; justify-self:end; align-self:center }
.xrow:hover .xrow__name{ color:var(--acc) }
.xrow:hover .i-arr{ transform:translateX(3px) }
@media (max-width:1023px){
  .xrow{ grid-template-columns:minmax(0,1fr) auto; row-gap:2px; padding-block:var(--s-4) }
  .xrow__name{ grid-column:1 }
  .xrow .i-arr{ grid-column:2; grid-row:1 }
  .xrow__meta,.xrow__rate{ grid-column:1/-1 }
}

/* ── room page head: gallery (8 cols) + info panel (4 cols) whose booking line sits on the gallery's bottom edge ── */
.room{ padding-block:var(--s-7) var(--sec) }
.room__grid{ row-gap:var(--s-6) }
.room__gal{ grid-column:1/9 }
.room__info{ grid-column:9/-1; display:flex; flex-direction:column; min-width:0 }
.room__info>.t-xl{ margin-top:-.28em }
.room__facts{ --cols:2; margin-top:var(--s-6) }
.room__rates{ margin-top:var(--s-6) }
.room__rates>.label{ margin-bottom:var(--s-1) }
.room__book{ margin-top:auto; padding-top:var(--s-5); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:var(--s-4) }
@media (min-width:1024px) and (max-width:1279px){ .room__gal{ grid-column:1/8 } .room__info{ grid-column:8/-1 } }
@media (max-width:1023px){
  .room{ padding-top:0 }
  .room__gal,.room__info{ grid-column:1/-1 }
  .room__info>.t-xl{ margin-top:0 }
  .room__book{ padding-top:var(--s-3) }
  .room__book .lnk{ display:none }
}

/* ── other rooms: one text row per room (name, summary, rate), ruled as a table; photo tiles are for the home page ── */
.others .xrow{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto 14px }
.others .xrow>*{ grid-column:auto }
.others .xrow__rate{ white-space:nowrap }
.xrow+.xrow{ border-top:0 }
@media (max-width:1023px){
  .others .xrow{ grid-template-columns:minmax(0,1fr) auto }
  .others .xrow__name{ grid-column:1 } .others .xrow .i-arr{ grid-column:2; grid-row:1 }
  .others .xrow__meta,.others .xrow__rate{ grid-column:1/-1 }
}

/* ── equipment: groups of model / role rows ─────────── */
.eq{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--g); row-gap:var(--s-7) }
.eq h3{ margin-bottom:var(--s-2) }
.eq li{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); padding-block:var(--s-3); border-top:1px solid var(--line) }
.eq li:last-child{ border-bottom:1px solid var(--line) }
.eq .role{ font-size:var(--t-s); color:var(--fg-2); text-align:right }
@media (max-width:767px){ .eq{ grid-template-columns:minmax(0,1fr); row-gap:var(--s-6) } }

/* ── lists: .list rows on hairlines; .list--plain for rules (sentences, not table rows: no rules between them,
   two columns from 1024) ── */
.list>li{ padding-block:var(--s-3); border-top:1px solid var(--line) }
.list>li:last-child{ border-bottom:1px solid var(--line) }
.list--plain>li,.list--plain>li:last-child{ padding-block:var(--s-2); border:0; break-inside:avoid }
@media (min-width:1024px){ .list--plain{ columns:2; column-gap:var(--g) } }

/* ── static map (inline SVG, labels in the page fonts) ── */
.map{ position:relative; display:block; overflow:hidden; background:var(--paper) }
.map svg{ width:100%; height:auto; transition:transform 1.2s var(--ease) }
.map:hover svg{ transform:scale(1.012) }
.map-svg text{ font-family:var(--sans) }
.map .map-svg--portrait{ display:none }
@media (max-width:767px){ .map .map-svg--landscape{ display:none } .map .map-svg--portrait{ display:block } }

/* ── motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; transition-delay:0s!important; animation-duration:.01ms!important; scroll-behavior:auto!important }
  .tile:hover .ph img,.map:hover svg{ transform:none }
}