/* ==========================================================================
   戈瓦·花时间 V4 — 轻奢 design system
   Ink (deep teal) + brass + paper. System fonts only (no CDN fonts:
   Google Fonts is unreachable from mainland China).
   ========================================================================== */

:root{
  /* ground —— 原来一半页面铺深墨青，是"暗奢"。这批照片本身通透明亮，
     暗底压着亮照片既不协调，也就是姨说的"昏暗"。改成纸本为主，
     深色只留给页脚做压脚，以及一处摄影停顿。 */
  --ink:#171F21;
  --ink-2:#1E2729;
  --ink-3:#26302F;
  /* paper —— 偏暖的米白三档，靠明度差分段，不靠深浅对撞 */
  --paper:#F8F6F1;
  --paper-2:#F1EDE4;
  --paper-3:#E8E2D6;
  /* metal —— 纸上要略深一点才立得住 */
  --brass:#A5873F;
  --brass-lt:#C9AE72;
  --brass-dk:#7E6630;
  /* type */
  --text:#1C2426;
  --text-2:#4A5557;
  --body:#5A6664;
  --body-lt:rgba(248,246,241,.66);
  --hair:rgba(28,36,38,.13);
  --hair-lt:rgba(248,246,241,.16);
  --hair-brass:rgba(165,135,63,.34);

  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC",serif;
  --serif-lat:Didot,"Baskerville","Times New Roman",Georgia,serif;
  --sans:"PingFang SC","Helvetica Neue","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;

  /* 留白是轻奢最便宜也最有效的材料：段落上下从 72–148px 放到 88–190px */
  --gut:clamp(20px,5.2vw,92px);
  /* V6 收紧：上一版是 clamp(88px,12vw,190px)。
     问题不在单个数值，在于每一节都自带上下两个 --sec-y，接缝处两块一叠 = 2×。
     实测 1440 下六个接缝全是 345.6px 纯空白——那不是留白，那是一整节的高度什么都没有。
     姨说"首屏左半那一大片空白显得空"，上一版只当成首屏问题去改首屏；
     其实同一个毛病在正文里出现了六次，一次都没修。
     收到 clamp(64px,8vw,132px)：1440 下接缝 230px，仍然比常规网站宽裕得多，
     但不再读成"这里是不是没做完"。 */
  --sec-y:clamp(64px,8vw,132px);
  /* 更"贵"的缓动：起步快、尾巴长，慢下来的那一段比总时长更重要 */
  --ease:cubic-bezier(.16,.84,.24,1);

  /* ---- 影调：一律原色 ------------------------------------------------------
     店主要求照片用原色，不做任何调色。三个变量保留成 none，
     这样所有 img 规则不用改，以后想恢复调色只改这三行。

     **不要再往这三行里加 filter。** 我之前用压饱和 + sepia 去统一色温，
     确实让整页更"像一套摄影"，但那是我替店家改了她房子的颜色——
     湖水的青、床品的青绿，是这家店卖的东西，不该由我决定要不要。
     色彩上的协调改用不动颜色的手段解决：选片（最大的位置放色调最安静的原图）、
     裁切、留白、克制的排印。 */
  --grade-cover:none;
  --grade-art:none;
  --grade-doc:none;
}

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

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font:300 clamp(14.5px,1.06vw,16px)/2.05 var(--sans);
  letter-spacing:.045em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.modal-open,body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{text-wrap:pretty}

/* ---- bilingual visibility ------------------------------------------------ */
html[lang="zh-CN"] [data-lang="en"]{display:none!important}
html[lang="en"] [data-lang="zh"]{display:none!important}

/* V6：图片改 WebP 优先（JPEG 兜底），所以每张 <img> 外面多了一层 <picture>。
   <picture> 默认是 inline，会悄悄改掉一批既有规则的父盒：
     .tile img{height:100%}          → 百分比高度失去可解析的父高
     .lake-window img{margin:0 auto} → 居中需要块级父元素
     .moments img{width:100%}        → inline 父元素是收缩包裹的
   display:contents 让这层包装盒在布局上整个消失，img 仍然是原来那个父元素的子盒，
   于是上面所有选择器一条都不用改。这比逐条给 picture 补 display:block 稳妥得多——
   补 display:block 只是把问题换个地方犯。 */
picture{display:contents}

/* ---- a11y ---------------------------------------------------------------- */
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;font-size:13px;letter-spacing:.16em;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}
:focus-visible{outline:1.5px solid var(--brass);outline-offset:4px}

/* ---- paper grain --------------------------------------------------------- */
/* 关掉。既然照片要原色，就不该再有一层噪点盖在照片上——
   它虽然只有 2.8% 不透明度，但仍然是"我加在店家照片上的东西"，
   而且噪点铺在照片上会被眼睛读成发虚。 */
.grain{display:none}

/* ---- 左侧书脊 ------------------------------------------------------------- */
.folio{
  position:fixed;left:0;top:0;bottom:0;width:var(--gut);z-index:57;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
/* 不用 mix-blend-mode：它在纸上好看，一到首屏那张暗照片上就糊没了。
   中间调的黄铜不透明度拉满，恰好在暖白纸上够深、在暗照片上够亮，两边都读得出。 */
.folio span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:400 8.5px/1 var(--serif-lat);letter-spacing:.62em;text-transform:uppercase;
  color:var(--brass);opacity:.9;white-space:nowrap;
  text-shadow:0 0 18px rgba(18,24,26,.35);
}
@media (max-width:1080px){.folio{display:none}}

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:15px 32px;border:0;cursor:pointer;
  font:400 12px/1 var(--sans);letter-spacing:.24em;
  text-transform:none;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn-sm{padding:11px 22px;font-size:11px;letter-spacing:.2em}
.btn-brass{background:var(--brass);color:#12100C}
.btn-brass:hover{background:var(--brass-lt)}
.btn-line{background:transparent;color:inherit;border:1px solid currentColor;opacity:.85}
.btn-line:hover{opacity:1;background:rgba(178,146,92,.1)}
.link-btn{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:11.5px;letter-spacing:.22em;color:var(--brass-dk);
  border-bottom:1px solid rgba(140,112,66,.4);padding-bottom:4px;
  transition:color .3s,border-color .3s;
}
.link-btn:hover{color:var(--ink);border-color:var(--ink)}

/* ==========================================================================
   header
   ========================================================================== */
/* 头部改成纸色浮层、墨色字：原来是深底白字 + 一颗实心黄铜按钮，
   那颗按钮是整页最"电商"的一处，改成同样的黄铜细线文字按钮。 */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--gut);
  transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease);
  color:var(--text);
  /* 常驻纸色：首屏右半是照片，透明头部会让「影像 / 抵达」和电话号压在照片上读不出来。
     纸色浮层同时给整页收了一个安静的顶边。 */
  background:rgba(248,246,241,.93);
  /* 只做模糊，不做 saturate：头部是半透明的，加饱和会把透出来的照片也改了色 */
  backdrop-filter:blur(16px);
}
.site-head.scrolled{
  background:rgba(248,246,241,.97);
  padding:13px var(--gut);
  box-shadow:0 1px 0 var(--hair);
}
.brand{display:flex;flex-direction:column;gap:5px;line-height:1;min-width:0;flex:0 1 auto}
.brand-cn{font:400 clamp(15px,1.35vw,18px)/1 var(--serif);letter-spacing:.3em;white-space:nowrap}
.brand-en{font:400 9px/1 var(--serif-lat);letter-spacing:.34em;text-transform:uppercase;color:var(--brass);opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-desktop{display:flex;gap:clamp(18px,2.4vw,40px)}
.nav-desktop a{
  font-size:11.5px;letter-spacing:.2em;opacity:.72;
  padding-bottom:4px;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s;
}
.nav-desktop a:hover{opacity:1;border-color:var(--brass)}
.head-actions{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);flex:0 0 auto}
.lang-toggle{
  background:none;border:1px solid var(--hair);border-radius:999px;
  padding:7px 14px;cursor:pointer;font-size:10.5px;letter-spacing:.18em;
  opacity:.75;transition:opacity .3s,border-color .3s;
}
.lang-toggle:hover{opacity:1;border-color:var(--brass)}
.head-tel{font:400 12.5px/1 var(--serif-lat);letter-spacing:.14em;opacity:.8}
.head-tel:hover{opacity:1;color:var(--brass-dk)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative}
.menu-toggle span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .35s var(--ease),opacity .3s}
.menu-toggle span:nth-child(1){top:6px}
.menu-toggle span:nth-child(2){bottom:6px}
.menu-toggle.active span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.mobile-menu{
  /* fully opaque: at .98 the hero headline still ghosted through behind the links */
  position:fixed;inset:0;z-index:55;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  color:var(--paper);
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font:400 20px/1 var(--serif);letter-spacing:.2em}

/* ==========================================================================
   hero
   ========================================================================== */
/* 纸本封面 · 左右分栏：左边是纸——大留白、宋体大字距标题、一条黄铜发丝线；
   右边是一整屏高的照片，出血到右边缘。
   照片上不压任何字，所以不需要遮罩、不需要压暗，它可以一直亮着；
   "轻奢"由左边那半屏的空白和字来承担，不靠把照片调暗来假装高级。
   竖裁一张 1600×1067 的横图：只用到约 768×1067，显示 ~700×900，是缩小而非放大，锐利。 */
/* 满幅照片封面。标题竖排贴右，说明沉左下——两处字各自落在画面本来就暗的区域。 */
.hero{position:relative;min-height:100svh;background:var(--ink);overflow:hidden}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 56%;
}
/* 只压三处、不压全屏：
   ① 从右边缘往左的一条，给竖排标题垫底，到画面中部就完全透明；
   ② 底边一条，给左下角那几行小字垫底；
   ③ V6 新增：顶边一条很浅的，给顶部那行 9px 的 kicker 垫底。
   这比"整屏均匀压暗"既亮得多，也更像有人在照片上做过取舍。

   V6 重调：上一版这套数值是为 047 调的——那是一张晨雾照片，本身就暗，
   压一点就够。062 是晴天亮图（白云 + 阳光下的水面），同一套数值下
   顶部的 kicker 和底部的 hero-sub 实测几乎读不出来（截图比对过）。
   所以三条都加深了，但仍然只压边缘：画面中部（栏杆、藤椅、茶杯、对岸的山）
   一点不动，亮度保持——姨说过"首屏太昏暗"，这一条不能为了可读性再犯回去。 */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to left,rgba(18,24,26,.72) 0%,rgba(18,24,26,.42) 22%,rgba(18,24,26,.10) 42%,rgba(18,24,26,0) 58%),
    linear-gradient(to top,rgba(18,24,26,.68) 0%,rgba(18,24,26,.40) 14%,rgba(18,24,26,.16) 26%,rgba(18,24,26,0) 40%),
    linear-gradient(to bottom,rgba(18,24,26,.52) 0%,rgba(18,24,26,.30) 10%,rgba(18,24,26,.14) 20%,rgba(18,24,26,0) 32%);
}
/* 两条字带的止点是量出来的，不是估的：1440×900 下 hero-head 上内距 142px，
   kicker 落在首屏高度的 15.8%；hero-meta 的按钮底边距 64px，说明文字落在 82%。
   所以上渐变必须在 10–20% 还有分量、下渐变必须在 72–95% 还有分量。
   中段 32%–60%（云、山、湖面）一点不压——姨说过"首屏太昏暗"，那是整屏均匀压暗的后果，
   这一版只压字所在的两条边。 */
.hero-head{
  position:relative;z-index:2;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(104px,10.5vw,142px) var(--gut) clamp(40px,5vw,64px);
  color:var(--paper);
}
.hero h1{margin:0;grid-row:2;justify-self:end;align-self:start}
/* 竖排时"行高"变成列宽，字的进距 = 字号 + 字距。
   7 个字 × (字号 × 1.26) 必须放得进 100svh 减掉上下留白、上标、底部那几行，
   否则首屏会被撑高、底下的字被切掉。60px 是 900 高视口下算出来的上限。 */
.h1-vertical{
  writing-mode:vertical-rl;text-orientation:upright;
  font:400 clamp(30px,4vw,60px)/1.42 var(--serif);
  letter-spacing:.26em;color:var(--paper);
  text-shadow:0 2px 34px rgba(18,24,26,.5);
}
html[lang="en"] .hero h1{
  justify-self:end;text-align:right;
  font:400 clamp(38px,4.8vw,80px)/1.16 var(--serif);letter-spacing:.06em;color:var(--paper);
  text-shadow:0 2px 34px rgba(18,24,26,.5);
}
/* 层级要拉开：说明性小字压到 9px 并给到 .5em 字距，和 72px 的标题形成极差。
   小字越小越宽，大字才越显得大——这是排印上最省钱的"贵"。 */
.kicker{
  grid-row:1;margin:0;align-self:start;
  font-size:9px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--brass-lt);
  /* 9px 的字要在亮天空上立住，靠的是"紧"投影不是"柔"投影：
     一层大半径柔光在小字上只会糊成一团灰，先来一层 2px 的硬边把字形勒出来，
     再叠一层大半径的把周围压暗。上一版只有后者，实测在 062 的白云上读不出来。 */
  text-shadow:0 1px 2px rgba(18,24,26,.85),0 2px 22px rgba(18,24,26,.6);
}
.kicker::before{content:"";display:inline-block;width:34px;height:1px;background:rgba(201,174,114,.7);vertical-align:middle;margin-right:16px}
.hero-meta{
  grid-row:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.4vw,30px);
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid rgba(201,174,114,.45);
  max-width:29em;
}
.hero-sub{
  margin:0;
  font-size:clamp(12.5px,.92vw,13.5px);line-height:2.45;letter-spacing:.06em;
  /* 从 .84 提到 .92：这行字落在藤椅和木桌上（中间调），.84 的白在中间调上对比不够。
     同样配一层紧投影——它原来一层投影都没有，是 047 那张图底部本来就暗才没暴露。 */
  color:rgba(248,246,241,.92);
  text-shadow:0 1px 2px rgba(18,24,26,.7),0 2px 20px rgba(18,24,26,.5);
}
.hero .quiet-link{color:var(--paper)}

/* 安静的文字按钮：黄铜细下划线，hover 时线走满。
   比一个实心色块按钮克制得多，也是首屏唯一的行动点。 */
.quiet-link{
  position:relative;background:none;border:0;padding:0 0 7px;cursor:pointer;
  font:400 clamp(13px,1vw,15px)/1 var(--serif);letter-spacing:.24em;color:var(--text);
  white-space:nowrap;
}
.quiet-link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--brass);transform:scaleX(.42);transform-origin:left;
  transition:transform .55s var(--ease);
}
.quiet-link:hover::after{transform:scaleX(1)}
.head-cta{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;padding-bottom:5px}

/* ==========================================================================
   sections
   ========================================================================== */
.section{position:relative;z-index:2;padding:var(--sec-y) var(--gut)}
/* 原来 03「一日」和 06「抵达」整块铺深墨青。深底 + 亮照片 = 又暗又不协调。
   改成靠明度差极小的第二档纸色分段——轻奢的分段是"换纸"，不是"换黑白"。 */
.section-alt{background:var(--paper-2);color:var(--body)}

/* 章节号从"12px 的小铜字"改成"压在标题背后的巨大 Didot 数字"，
   颜色只比纸深一档，几乎读不出来，但它给每一节一个重量中心。
   这是印刷品里的做法（大页码 / 章节数字），不是网页里的做法——所以它有"手感"。 */
.sec-head{position:relative;max-width:52em;margin:0 0 clamp(40px,5vw,72px)}
.sec-head .num{
  position:absolute;left:-.06em;top:-.42em;z-index:0;
  font:400 clamp(70px,11vw,182px)/1 var(--serif-lat);letter-spacing:-.02em;
  color:var(--paper-3);pointer-events:none;
}
.section-alt .sec-head .num{color:rgba(28,36,38,.075)}
.sec-head h2{position:relative;z-index:1;font:400 clamp(29px,4.3vw,70px)/1.22 var(--serif);letter-spacing:.09em;color:var(--text)}
.sec-lede{position:relative;z-index:1;margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(12.5px,.92vw,13.8px);line-height:2.45;letter-spacing:.06em;max-width:40em}
.src-note{margin:clamp(26px,3vw,40px) 0 0;font-size:11.5px;line-height:1.95;letter-spacing:.06em;color:rgba(28,36,38,.42)}

/* ---- story --------------------------------------------------------------- */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,84px);align-items:start}
.story-copy p{margin:0 0 clamp(20px,2vw,28px);font-size:clamp(14px,1vw,15.5px);line-height:2.3}
/* 照片切出右边距、顶到视口边缘。"元素越过版心跑出纸外"是编辑设计里最有效的一个动作，
   一眼就能看出这一页是有人排的，而不是网格自动摆的。 */
.story-fig{margin:0 calc(var(--gut) * -1) 0 0}
.story-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:var(--grade-art)}
.story-fig figcaption{margin-top:14px;font-size:10.5px;letter-spacing:.2em;color:rgba(26,36,38,.42)}
.fact-row{
  list-style:none;margin:clamp(46px,6vw,84px) 0 0;padding:clamp(26px,3vw,38px) 0 0;
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px);
}
.fact-row li{display:flex;flex-direction:column;gap:11px}
.fact-row li > span{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(26,36,38,.45)}
.fact-row strong{font:400 clamp(14px,1.1vw,17px)/1.6 var(--serif);letter-spacing:.06em;color:var(--text)}

/* ---- full-bleed lake window --------------------------------------------- */
/* 从"满幅出血照片 + 压在照片上的白字"改成"纸上的一块图版 + 图版下面的题词"。
   题词不再压在照片上，所以不需要投影、不需要压暗，照片也就亮得起来。 */
.lake-window{
  position:relative;z-index:2;background:var(--paper);
  padding:0 var(--gut) var(--sec-y);
}
.lake-window img{
  width:min(1180px,100%);margin:0 auto;
  aspect-ratio:2/1;object-fit:cover;filter:var(--grade-art);
}
/* 图版这一处再收一档：右边那句引言本身就带了 40px 上距和 1.6 的行高，
   已经给足了呼吸，接缝不需要再来一个满额 --sec-y。这是全页最空的一处（截图见 §死白）。 */
.lake-window + .section{padding-top:clamp(40px,5vw,84px)}

.lake-window blockquote{
  width:min(1180px,100%);margin:clamp(26px,3vw,40px) auto 0;
  display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
}
.lake-window blockquote::before{
  content:"";flex:0 0 auto;width:clamp(28px,4vw,64px);height:1px;
  background:var(--brass);transform:translateY(-.5em);
}
.lake-window blockquote p{
  margin:0;font:400 clamp(19px,2.4vw,34px)/1.6 var(--serif);
  letter-spacing:.12em;color:var(--text);
}

/* ---- rooms --------------------------------------------------------------- */
/* 三列改两列：卡片小 = 信息密 = 列表感。两列意味着照片大一倍、周围有空气。
   卡片也不再有底色和悬浮阴影——纸上直接排图，靠留白和一条发丝线分隔。 */
/* align-items:start —— 卡片按自身内容高度排。之前拉伸对齐 + 「咨询这间」margin-top:auto，
   在错落布局下会在文字和链接之间撕出一大片空。 */
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,72px) clamp(24px,3.4vw,56px);align-items:start}
/* 整齐的两列网格读起来还是"列表"。让右列整体下沉一截，并给两列不同的画幅
   （左 3:2 横、右 4:5 竖），页面就从"网格"变成"版面"。 */
@media (min-width:901px){
  .room-grid > :nth-child(even){transform:translateY(clamp(40px,6vw,104px))}
  .room-grid > :nth-child(even) img{aspect-ratio:4/5}
  .room-grid{padding-bottom:clamp(40px,6vw,104px)}
}
.room-card{background:none;display:flex;flex-direction:column}
/* 房型卡用 doc 档：客人得看清床品和房间的真实颜色，这里不能为了好看骗人 */
.room-card img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:var(--grade-doc)}
.room-body{padding:clamp(18px,2vw,26px) 0 0;display:flex;flex-direction:column;gap:12px;flex:1}
.room-card h3{font:400 clamp(20px,1.9vw,29px)/1.3 var(--serif);letter-spacing:.24em;color:var(--text)}
.room-sub{margin:0;font-size:11px;letter-spacing:.2em;text-transform:none;color:var(--brass-dk)}
.room-spec{
  margin:clamp(10px,1.2vw,16px) 0 0;padding-top:clamp(12px,1.4vw,18px);
  border-top:1px solid var(--hair);
  font-size:12px;line-height:2.1;letter-spacing:.1em;color:var(--body);
}
.room-body .link-btn,.room-body .quiet-link{margin-top:clamp(6px,.8vw,12px);align-self:flex-start}
/* "还有其他房型"：不再是一张深色卡片，而是纸上的一段附注 */
.room-card-more{justify-content:center;border-left:1px solid var(--hair-brass);padding-left:clamp(22px,2.6vw,40px)}
.room-card-more .room-body{padding-top:0}
.room-card-more h3{color:var(--text);font-size:clamp(17px,1.5vw,22px);letter-spacing:.2em}
.room-card-more p{margin:0;font-size:12.5px;line-height:2.1;color:var(--body)}
.room-card-more .btn-line,.room-card-more .quiet-link{margin-top:clamp(18px,2vw,28px);align-self:flex-start}

/* ---- timeline ------------------------------------------------------------ */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,34px)}
.timeline li{padding-top:26px;border-top:1px solid var(--hair-brass);position:relative}
.timeline li::before{content:"";position:absolute;top:-3px;left:0;width:5px;height:5px;border-radius:50%;background:var(--brass)}
.timeline .t{display:block;margin-bottom:16px;font:400 15px/1 var(--serif-lat);letter-spacing:.16em;color:var(--brass-dk)}
.timeline h3{font:400 clamp(15px,1.2vw,18px)/1.5 var(--serif);letter-spacing:.16em;margin-bottom:12px;color:var(--text)}
.timeline p{margin:0;font-size:12.5px;line-height:2.05;color:var(--body)}
.moments{margin-top:clamp(48px,6vw,90px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.moments figure{margin:0;overflow:hidden}
.moments img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:var(--grade-art);transition:transform 1.1s var(--ease)}
.moments .reveal-image:hover img{transform:scale(1.05)}

/* ---- gallery mosaic ------------------------------------------------------ */
/* 格子间距从 8–16px 放到 12–26px：贴得紧的网格读起来像"图库列表"，
   留出缝隙才读起来像"图版" */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,15vw,215px);gap:clamp(12px,1.8vw,26px)}
.tile{padding:0;border:0;background:var(--paper-3);cursor:pointer;overflow:hidden;position:relative}
.tile img{width:100%;height:100%;object-fit:cover;filter:var(--grade-art);transition:transform 1s var(--ease),filter .6s}
/* 选择器要比 .reveal-image.visible img 更具体，否则揭幕规则会盖掉 hover 的缩放 */
.tile.reveal-image:hover img{transform:scale(1.045)}
.tile-lg{grid-column:span 2;grid-row:span 2}
/* full-width: with span 2 the 6-tile mosaic left a 2-cell hole in the last row */
.tile-wide{grid-column:1/-1}
.gallery-act{margin:clamp(34px,4vw,56px) 0 0}

/* ---- reviews ------------------------------------------------------------- */
.reviews{background:var(--paper-2)}
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px)}
.review-grid blockquote{
  margin:0;background:var(--paper);padding:clamp(26px,3vw,44px);
  border-top:2px solid var(--brass);
}
.review-grid blockquote::before{
  content:"\201C";display:block;font:400 46px/.6 var(--serif-lat);color:rgba(178,146,92,.6);margin-bottom:20px;
}
.review-grid p{margin:0 0 24px;font:300 clamp(13.5px,1vw,15px)/2.25 var(--serif);letter-spacing:.05em;color:var(--text)}
.review-grid footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;font-size:10.5px;letter-spacing:.18em;color:rgba(26,36,38,.45)}
.review-grid .score{font:400 16px/1 var(--serif-lat);letter-spacing:.06em;color:var(--brass)}

/* ---- place --------------------------------------------------------------- */
.place-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px)}
.routes{display:flex;flex-direction:column}
.route{padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--hair)}
.route:first-child{padding-top:0}
.r-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px}
.route h3{font:400 clamp(16px,1.35vw,21px)/1.4 var(--serif);letter-spacing:.18em;color:var(--text)}
.route .dist{font:400 13px/1 var(--serif-lat);letter-spacing:.16em;color:var(--brass-dk);white-space:nowrap}
.route p{margin:0;font-size:12.5px;line-height:2.1;color:var(--body)}
/* the distances table + map buttons live in the text column so the two columns
   end at roughly the same height; the photo column stays purely visual. */
.routes .nearby{margin-top:clamp(26px,3vw,42px)}
.routes .map-links{margin-top:clamp(22px,2.4vw,32px)}
.place-side{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.place-side figure{margin:0}
.place-side figure img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:var(--grade-art)}
.ph-box{
  border:1px dashed rgba(28,36,38,.22);
  background:repeating-linear-gradient(135deg,rgba(28,36,38,.035) 0 11px,rgba(28,36,38,.012) 11px 22px);
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;text-align:center;
  font:400 11px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;
  color:rgba(28,36,38,.45);padding:20px;
}
.nearby{list-style:none;margin:0;padding:0}
.nearby li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:12.5px;letter-spacing:.08em}
.nearby li > span{color:var(--text-2)}
.nearby em{font-style:normal;font-family:var(--serif-lat);letter-spacing:.14em;color:var(--brass-dk)}
/* 设施与服务（V6 新增）。
   刻意不复用 .nearby：那是"标签 — 短值"两栏对齐的行（980 m / 42.5 km），
   而这里的值是一串中文长句，两栏 space-between 会把它挤成两三行还右对齐，很难读；
   .nearby em 又走拉丁衬线，中文放进去字形是错的。所以另起一套：标签在上、值在下，
   值用正文字体左对齐。 */
/* 设施块整幅，不进 .place-grid 那个两栏网格。
   第一版我把它塞进了左栏，结果左栏被拉长一大截，右栏（照片 + 占位框）下面空出约 600px
   ——正是 §7 第 3 条批评过的"两栏严重不等高"。我一边引用那条，一边又造了一个。
   六项内容横排成多列，本来也比挤在半幅里竖着排一长条好读。 */
.svc-block{padding:0 var(--gut) var(--sec-y)}
.svc-block .svc-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  column-gap:clamp(24px,3vw,52px);
}
/* 多列时最后一行的下边线会参差，统一由容器收尾 */
.svc-block .svc-list li{border-bottom:1px solid var(--hair)}

.svc-head{
  margin:clamp(30px,3.4vw,48px) 0 clamp(14px,1.6vw,20px);
  font:400 clamp(15px,1.3vw,19px)/1.4 var(--serif);
  letter-spacing:.14em;color:var(--text);
}
.svc-list{list-style:none;margin:0;padding:0}
.svc-list li{
  padding:13px 0;border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column;gap:6px;
}
.svc-list li > span{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-dk);
}
.svc-list em{
  font-style:normal;font-size:12.5px;line-height:1.95;letter-spacing:.06em;
  color:var(--text-2);
}
.svc-list + .src-note{margin-top:clamp(18px,2vw,26px)}

.map-links{display:flex;gap:12px;flex-wrap:wrap}

/* ---- final CTA ----------------------------------------------------------- */
.final-cta{position:relative;z-index:2;background:var(--paper-3);color:var(--body);padding:var(--sec-y) var(--gut)}
.final-cta h2{font:400 clamp(30px,4.4vw,68px)/1.24 var(--serif);letter-spacing:.1em;margin-bottom:clamp(40px,5vw,70px);color:var(--text)}
.cta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.cta-tile{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(24px,2.6vw,34px);border:1px solid rgba(28,36,38,.11);
  background:rgba(255,255,255,.4);
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.cta-tile:hover{border-color:var(--hair-brass);background:rgba(255,255,255,.75)}
.cta-tile h3{font:400 clamp(15px,1.25vw,19px)/1.4 var(--serif);letter-spacing:.2em;color:var(--text)}
.cta-tile p{margin:0;font-size:12.5px;line-height:2.05;color:var(--body)}
.cta-tile .btn,.cta-tile a.btn,.cta-tile .quiet-link{margin-top:auto;align-self:flex-start}
.qr-box{
  margin-top:auto;width:132px;height:132px;
  border:1px dashed rgba(28,36,38,.22);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:400 10.5px/1.9 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:rgba(28,36,38,.42);
}

/* 页脚里的可点链接：其余都是纯文字，所以需要一条线把它标出来 */
.f-link{border-bottom:1px solid rgba(201,174,114,.5);padding-bottom:2px;transition:color .3s,border-color .3s}
.f-link:hover{color:var(--brass-lt);border-color:var(--brass-lt)}

/* ---- footer -------------------------------------------------------------- */
.site-foot{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding:clamp(52px,6vw,86px) var(--gut) clamp(30px,3vw,44px)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.foot-grid p{margin:0 0 9px;font-size:12px;line-height:2.05;color:rgba(246,243,236,.6)}
.f-title{font:400 16px/1 var(--serif)!important;letter-spacing:.28em;color:var(--paper)!important;margin-bottom:12px!important}
.f-sub{font:400 9.5px/1 var(--serif-lat)!important;letter-spacing:.34em;text-transform:uppercase;color:rgba(178,146,92,.85)!important}
.f-label{font-size:10px!important;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-lt)!important;margin-bottom:16px!important}
.foot-grid a:hover{color:var(--brass-lt)}
.foot-legal{margin:clamp(40px,4vw,64px) 0 0;padding-top:22px;border-top:1px solid var(--hair-lt);font-size:10.5px;letter-spacing:.16em;color:rgba(246,243,236,.35)}

/* ---- mobile sticky bar --------------------------------------------------- */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:58;grid-template-columns:1fr 1fr}
.mobile-bar a,.mobile-bar button{
  border:0;padding:17px 10px;cursor:pointer;text-align:center;
  font-size:11.5px;letter-spacing:.2em;
}
.mobile-bar a{background:var(--ink);color:var(--paper)}
.mobile-bar button{background:var(--brass);color:#12100C}

/* ==========================================================================
   modals
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:100;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.modal.open{opacity:1;visibility:visible}

/* gallery */
/* opaque: at .97 the hero copy underneath still showed through around the photo */
.gallery-modal{background:#091113;display:flex;flex-direction:column;color:var(--paper)}
.gm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gut);border-bottom:1px solid var(--hair-lt)}
.gm-filters{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chip{
  background:none;border:1px solid var(--hair-lt);border-radius:999px;
  padding:8px 17px;cursor:pointer;font-size:10.5px;letter-spacing:.18em;color:rgba(246,243,236,.65);
  transition:color .3s,border-color .3s,background .3s;
}
.chip:hover{color:var(--paper)}
.chip.active{color:#12100C;background:var(--brass);border-color:var(--brass)}
.gm-close{background:none;border:0;color:var(--paper);font-size:28px;line-height:1;cursor:pointer;opacity:.7;padding:4px 10px}
.gm-close:hover{opacity:1}
.gm-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(14px,2vw,30px);min-height:0}
.gm-stage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.gm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(14,26,28,.55);border:1px solid var(--hair-lt);color:var(--paper);
  width:46px;height:46px;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s;
}
.gm-nav:hover{background:var(--brass);border-color:var(--brass);color:#12100C}
.gm-nav.prev{left:clamp(8px,1.6vw,26px)}
.gm-nav.next{right:clamp(8px,1.6vw,26px)}
.gm-bottom{padding:14px var(--gut) clamp(16px,2vw,24px);border-top:1px solid var(--hair-lt)}
.gm-caption{margin:0 0 12px;font-size:10.5px;letter-spacing:.22em;color:rgba(246,243,236,.55)}
.gm-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.gallery-thumb{flex:0 0 auto;width:74px;height:54px;padding:0;border:1px solid transparent;background:none;cursor:pointer;opacity:.5;transition:opacity .3s,border-color .3s}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb:hover{opacity:.85}
.gallery-thumb.active{opacity:1;border-color:var(--brass)}

/* booking */
.booking-modal{background:rgba(9,17,19,.72);backdrop-filter:blur(6px);display:flex;justify-content:flex-end}
.bm-panel{
  position:relative;width:min(560px,100%);height:100%;overflow-y:auto;
  background:var(--paper);padding:clamp(30px,4vw,58px) clamp(24px,3.4vw,52px);
  transform:translateX(24px);transition:transform .5s var(--ease);
}
.modal.open .bm-panel{transform:none}
.bm-close{position:absolute;top:18px;right:20px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:rgba(26,36,38,.5)}
.bm-close:hover{color:var(--text)}
.bm-kicker{margin:0 0 14px;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}
.bm-title{font:400 clamp(24px,2.6vw,34px)/1.35 var(--serif);letter-spacing:.08em;color:var(--text);margin-bottom:14px}
.bm-lede{margin:0 0 clamp(24px,3vw,34px);font-size:12.5px;line-height:2.05;color:rgba(26,36,38,.55)}
.bm-form{display:flex;flex-direction:column;gap:20px}
.bm-form label{display:flex;flex-direction:column;gap:9px}
.bm-form label > span{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(26,36,38,.5)}
.bm-form input,.bm-form select,.bm-form textarea{
  background:none;border:0;border-bottom:1px solid var(--hair);
  padding:8px 0;font:400 14px/1.6 var(--serif);letter-spacing:.05em;color:var(--text);width:100%;
}
.bm-form textarea{resize:vertical;font-family:var(--sans);font-size:13px;line-height:1.9}
.bm-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bm-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bm-preview{background:var(--paper-2);padding:20px 22px;border-left:2px solid var(--brass)}
.bm-preview pre{
  margin:0;white-space:pre-wrap;word-break:break-word;
  font:300 12.5px/2 var(--sans);letter-spacing:.05em;color:var(--text);
}
.bm-actions{display:flex;flex-wrap:wrap;gap:12px}

/* 抽屉里的微信块（V6 新增）。用一条发丝线和上面的按钮分开，
   不加底色不加卡片——加了就变成"弹窗里的弹窗"。 */
.bm-wechat{
  margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--hair);
  display:flex;align-items:center;gap:clamp(16px,2vw,24px);
}
.qr-box-sm{margin-top:0;flex:0 0 auto;width:104px;height:104px}
.bm-wechat-txt p{
  margin:0;font-size:12px;line-height:2;letter-spacing:.05em;color:var(--text-2);
}
@media (max-width:560px){
  .bm-wechat{flex-direction:column;align-items:flex-start;gap:14px}
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:140;
  background:var(--ink);color:var(--paper);padding:14px 26px;
  font-size:11.5px;letter-spacing:.2em;opacity:0;visibility:hidden;
  transition:opacity .3s,transform .35s var(--ease),visibility .3s;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ==========================================================================
   reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.15s var(--ease),transform 1.15s var(--ease)}
.reveal.visible{opacity:1;transform:none}
/* 照片不用"淡入"，用"揭幕"：底边往上退的遮罩 + 图片本身从 1.08 缩回 1。
   淡入是所有网页都在做的事；遮罩揭幕是印刷品翻页的感觉，也是"慢而贵"的来源。 */
.reveal-image{overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.reveal-image.visible{clip-path:inset(0 0 0 0)}
.reveal-image img{transform:scale(1.08);transition:transform 1.8s var(--ease)}
.reveal-image.visible img{transform:none}
.reveal:nth-child(2){transition-delay:.09s}
.reveal:nth-child(3){transition-delay:.18s}
.reveal:nth-child(4){transition-delay:.27s}
.reveal:nth-child(5){transition-delay:.36s}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1080px){
  .room-grid{grid-template-columns:repeat(2,1fr)}
  .cta-grid{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(3,1fr);gap:26px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-desktop,.head-tel{display:none}
  .menu-toggle{display:block}
  .head-actions .head-cta{display:none}
  .mobile-bar{display:grid}
  /* 手机上满幅照片照样成立：竖排标题靠右、说明沉底 */
  .hero-head{padding:clamp(96px,22vw,128px) var(--gut) clamp(74px,14vw,96px)}
  .h1-vertical{font-size:clamp(30px,8.4vw,44px);letter-spacing:.22em}
  .hero-img{object-position:52% 56%}
  .sec-head .num{font-size:clamp(58px,17vw,96px)}
  body{padding-bottom:56px}
  .site-head{padding:16px var(--gut)}
  .brand-en{font-size:8px;letter-spacing:.2em;max-width:46vw}
  .story-grid,.place-grid{grid-template-columns:1fr}
  .booking-bar{grid-template-columns:1fr 1fr;margin-top:-30px}
  .bb-sep{display:none}
  .booking-bar .btn{grid-column:1/-1}
  .fact-row{grid-template-columns:1fr 1fr}
  .review-grid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,26vw,180px)}
  .moments{grid-template-columns:repeat(2,1fr)}
  .story-fig img{aspect-ratio:3/2}
  /* single column: the portrait crop is only there to balance the desktop grid */
  .place-side figure img{aspect-ratio:3/2}
  .place-grid{gap:clamp(30px,5vw,46px)}
}
@media (max-width:640px){
  .room-grid,.cta-grid,.timeline,.foot-grid{grid-template-columns:1fr}
  .timeline li{padding-top:20px}
  .hero-proof{gap:20px 32px}
  .booking-bar{grid-template-columns:1fr}
  .bm-panel{width:100%}
  .gm-nav{width:38px;height:38px;font-size:20px}
  .qr-box{width:118px;height:118px}
  /* five filters wrapped to a second row and left the close button stranded
     between them; scroll them sideways in one row instead. */
  .gm-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .gm-filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;white-space:nowrap;padding:8px 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-image{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
  .reveal-image img{transform:none!important;transition:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .moments img,.tile img{transition:none}
}

@media print{
  .site-head,.mobile-bar,.modal,.grain,.booking-bar{display:none!important}
  body{background:#fff;color:#000}
}