/* =========================================================
   SERENO226 · 優勝美地一館
   設計語言：建築編輯誌 — 暗色清水模 × 森林綠釉
   ========================================================= */

:root {
  /* 色彩 — 清水淺灰 Cool Concrete（淺色主題）*/
  --ink:        #ecebe7;   /* 底：淺水泥灰 */
  --ink-2:      #e4e3dc;   /* 次層 / hover */
  --surface:    #dbdad1;
  --surface-2:  #d0cfc4;   /* 大編號等淡色裝飾 */
  --bone:       #26271f;   /* 文字：墨黑 */
  --bone-dim:   #5a5c50;   /* 次要文字 */
  --bone-faint: #8b8c7e;   /* 更淡文字 */
  --jade:       #5a7d62;   /* 綠釉 */
  --jade-soft:  #4c6e54;   /* 綠釉（淺底可讀）*/
  --timber:     #9c7b48;   /* 暖木 */
  --line:       rgba(38, 39, 31, 0.16);
  --line-soft:  rgba(38, 39, 31, 0.08);

  /* 壓在照片上的淺色文字（深色漸層之上）*/
  --on-photo:        #f1efe8;
  --on-photo-dim:    #d9d6cb;
  --on-photo-jade:   #b7cdb6;
  --on-photo-line:   rgba(241, 239, 232, 0.22);

  /* 字體 */
  --f-display: 'Space Grotesk', 'Noto Sans TC', sans-serif;
  --f-sans:    'Noto Sans TC', 'Space Grotesk', sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'Noto Sans TC', monospace;

  /* 尺度 */
  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1480px;

  --ease: cubic-bezier(0.6, 0.01, 0.05, 0.95);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--f-sans);
  background: var(--ink);
  color: var(--bone);
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--jade); color: var(--bone); }

/* ---------- 排版 ---------- */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.12; letter-spacing: 0.01em; }

.kicker {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--jade-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.kicker::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--jade-soft);
  opacity: 0.8;
}

.display {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.cn-title {
  font-family: var(--f-sans);
  font-weight: 300;
  letter-spacing: 0.22em;
}

.lede { color: var(--bone-dim); font-weight: 300; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(80px, 12vh, 170px); position: relative; }
.divider { height: 1px; background: var(--line); border: 0; }

/* 章節編號標記 */
.sec-head { display: flex; align-items: baseline; gap: 1.4rem; margin-bottom: clamp(36px, 6vw, 72px); flex-wrap: wrap; }
.sec-no {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--bone-faint);
}

/* ---------- 導覽列 ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(20, 22, 15, 0.86);
  backdrop-filter: blur(14px);
  padding-block: 14px;
  border-bottom-color: var(--line);
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.06em; }
.brand span { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--bone-dim); margin-top: 5px; }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.nav-links a {
  font-size: 0.82rem; letter-spacing: 0.16em; color: var(--bone-dim);
  position: relative; padding-block: 4px; transition: color .35s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--jade-soft); transition: width .4s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }

.nav-cta {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  border: 1px solid var(--line); padding: 9px 18px; border-radius: 999px;
  color: var(--bone); transition: all .4s var(--ease);
}
.nav-cta:hover { background: var(--jade); border-color: var(--jade); }

.burger { display: none; width: 30px; height: 18px; position: relative; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--bone); transition: all .4s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger span:nth-child(3) { bottom: 0; }
body.menu-open .burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em;
  padding: 15px 30px; border-radius: 999px; border: 1px solid var(--bone);
  color: var(--bone); transition: all .45s var(--ease); text-transform: uppercase;
}
.btn .arr { transition: transform .45s var(--ease); }
.btn:hover { background: var(--bone); color: var(--ink); }
.btn:hover .arr { transform: translateX(6px); }
.btn--jade { border-color: var(--jade); background: var(--jade); }
.btn--jade:hover { background: var(--jade-soft); border-color: var(--jade-soft); color: var(--ink); }
.btn--ghost { border-color: var(--line); color: var(--bone-dim); }
.btn--ghost:hover { border-color: var(--bone); color: var(--ink); background: var(--bone); }

/* ---------- HERO ---------- */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__poster { position: absolute; inset: 0; opacity: 1; transition: opacity .8s ease; }
.hero__media.video-ready .hero__poster { opacity: 0; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,22,15,.55) 0%, rgba(20,22,15,.15) 35%, rgba(20,22,15,.35) 70%, rgba(20,22,15,.92) 100%);
}
.hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gut) clamp(48px, 8vh, 96px);
  max-width: var(--maxw); margin-inline: auto;
}
.hero h1 {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(3.4rem, 13vw, 12rem); letter-spacing: -0.03em; line-height: 0.86;
  text-shadow: 0 4px 40px rgba(0,0,0,.4);
}
.hero__sub { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; }
.hero__sub .cn { font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: 0.3em; font-weight: 300; }
.hero__meta { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--bone-dim); }
.hero__cta { margin-top: 2.6rem; }

.scrollcue {
  position: absolute; right: var(--gut); bottom: clamp(48px, 8vh, 96px); left: auto; z-index: 3;
  font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.3em; color: var(--bone-dim);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 14px; pointer-events: none;
}
.scrollcue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(var(--bone-dim), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- 頁首（內頁小 hero）---------- */
.pagehead { position: relative; height: clamp(48vh, 60vh, 70vh); min-height: 420px; overflow: hidden; }
.pagehead img { width: 100%; height: 100%; object-fit: cover; }
.pagehead::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,22,15,.5), rgba(20,22,15,.2) 50%, rgba(20,22,15,.95)); }
.pagehead__inner { position:absolute; inset:0; z-index:2; max-width:var(--maxw); margin-inline:auto; padding: 0 var(--gut) clamp(40px,7vh,80px); display:flex; flex-direction:column; justify-content:flex-end; }
.pagehead h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 8vw, 7rem); letter-spacing: -0.02em; }
.pagehead .cn { margin-top: .6rem; letter-spacing: .28em; color: var(--bone-dim); font-size: clamp(.95rem,2vw,1.3rem); }

/* ---------- 關於：split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.split__media { position: relative; overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.4s var(--ease); }
.split:hover .split__media img { transform: scale(1.04); }
.split h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); margin-block: 1.2rem 1.6rem; }
.split h2 .display { display:block; font-size: .42em; color: var(--bone-faint); margin-bottom: .8rem; letter-spacing: .04em; }
.split p + p { margin-top: 1.2rem; }
.sign { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .2em; color: var(--bone-faint); margin-top: 2rem; }

/* ---------- 數據條 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.stat { background: var(--ink); padding: clamp(28px,4vw,52px) clamp(18px,2.4vw,34px); position: relative; }
.stat .en { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--jade-soft); display: flex; align-items: center; gap: .7em; margin-bottom: 1.1rem; }
.stat .en::before { content: ""; width: 18px; height: 1px; background: var(--jade-soft); opacity: .7; }
.stat b { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.2rem,4.5vw,3.6rem); display:block; letter-spacing:-.02em; line-height:1; }
.stat span.lbl { font-size: .92rem; letter-spacing: .04em; color: var(--bone); margin-top: .9rem; display:block; }
.stat span.sub { font-size: .8rem; letter-spacing: .04em; color: var(--bone-dim); margin-top: .3rem; display:block; }
.stat .u { color: var(--jade-soft); font-size: .5em; margin-left: .15em; font-weight:400; }

/* ---------- 特色卡（房型 / 空間）---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.card { position: relative; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-soft); }
.card__img { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.card:hover .card__img img { transform: scale(1.06); }
.card__img::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(20,22,15,.85)); }
.card__no { position:absolute; top:18px; left:18px; z-index:2; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color: var(--bone); }
.card__body { position:absolute; inset:auto 0 0 0; z-index:2; padding: clamp(18px,2vw,28px); }
.card__body .en { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .22em; color: var(--jade-soft); }
.card__body h3 { font-size: 1.35rem; letter-spacing: .14em; margin: .5rem 0 .4rem; font-weight: 300; }
.card__body p { font-size: .86rem; color: var(--bone-dim); }
.card__body .cap { display:flex; align-items:center; gap:.6rem; margin-top:.9rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; color:var(--bone); }

/* ---------- 不對稱圖文交錯（房型細節）---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,72px); align-items: center; margin-block: clamp(60px,10vh,130px); }
.feature:nth-child(even) .feature__media { order: 2; }
.feature__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature__media img { width:100%; height:100%; object-fit: cover; aspect-ratio: 3/4; transition: transform 1.2s var(--ease); }
.feature__media img:first-child { grid-row: span 2; aspect-ratio: 3/5; }
.feature__media img:hover { transform: scale(1.03); }
.feature__txt .no { font-family: var(--f-mono); font-size: 4rem; font-weight: 300; color: var(--surface-2); line-height: 1; }
.feature__txt .en { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .24em; color: var(--jade-soft); display:block; margin: 1rem 0 .8rem; }
.feature__txt h3 { font-size: clamp(1.6rem,3.4vw,2.8rem); letter-spacing:.1em; font-weight:300; margin-bottom: 1.2rem; }
.feature__txt p { color: var(--bone-dim); }
.tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 1.6rem; }
.tag { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; color:var(--bone-dim); border:1px solid var(--line); padding:6px 14px; border-radius:999px; }

/* ---------- 圖牆 / gallery ---------- */
.masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.masonry img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; transition: opacity .4s var(--ease), transform .8s var(--ease); }
.masonry img:hover { opacity: .82; }
.masonry img.more { display: none; }
.masonry.show-all img.more { display: block; }
.masonry .vid { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.masonry .vid.more { display: none; }
.masonry.show-all .vid.more { display: block; }
.masonry .vid video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0c0d0a; }
.vid__btn {
  position: absolute; inset: 0; margin: auto;
  width: clamp(48px,6vw,66px); height: clamp(48px,6vw,66px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,21,17,.42); backdrop-filter: blur(4px);
  border: 1px solid rgba(241,239,232,.75); color: var(--on-photo); cursor: pointer;
  transition: opacity .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.vid__btn svg { width: 40%; height: 40%; fill: currentColor; pointer-events: none; }
.vid__btn:hover { background: var(--jade); border-color: var(--jade); transform: scale(1.06); }
.vid.playing .vid__btn { opacity: 0; }
.vid.playing:hover .vid__btn { opacity: 1; }
.vid.playing.controls-hidden .vid__btn,
.vid.playing.controls-hidden:hover .vid__btn,
.vid.playing.controls-hidden .vid__btn:focus,
.vid.playing.controls-hidden .vid__btn:focus-visible {
  opacity: 0;
  pointer-events: none;
}

/* 展開更多 */
.room__more-wrap { text-align: center; margin-top: clamp(20px,3vw,34px); }
.js-more {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--bone-dim); padding: 13px 28px; border-radius: 999px;
  transition: all .4s var(--ease);
}
.js-more:hover { border-color: var(--jade); color: var(--bone); background: var(--ink-2); }

.mosaic { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.mosaic img { width:100%; height:100%; object-fit: cover; cursor: zoom-in; transition: transform .9s var(--ease), opacity .4s var(--ease); aspect-ratio: 1; }
.mosaic img:hover { opacity:.85; }
.mosaic .wide { grid-column: span 2; }
.mosaic .tall { grid-row: span 2; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }

/* ---------- 起居之處：橫向相片格（貼合 3:2 原圖，少裁切）---------- */
.space-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.space-grid figure { margin: 0; position: relative; overflow: hidden; }
.space-grid figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(0deg, rgba(8, 9, 7, .24), rgba(8, 9, 7, 0));
  pointer-events: none;
}
.space-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; cursor: zoom-in; transition: opacity .4s var(--ease), transform 1.1s var(--ease); }
.space-grid figure:hover img { opacity: .9; transform: scale(1.04); }
.space-grid figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  max-width: calc(100% - 28px);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; color: var(--bone);
  text-shadow: none;
  background: rgba(241, 239, 232, .64);
  border: 1px solid rgba(241, 239, 232, .5);
  border-radius: 4px;
  padding: 7px 10px;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  pointer-events: none;
}
@media (max-width: 860px) { .space-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .space-grid { grid-template-columns: 1fr; } }

/* ---------- 全幅圖文 ---------- */
.fullbleed { position: relative; height: clamp(60vh, 80vh, 100vh); overflow: hidden; }
.fullbleed img, .fullbleed video { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.fullbleed::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(20,22,15,.8), rgba(20,22,15,.1)); }
.fullbleed__txt { position:relative; z-index:2; height:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); display:flex; flex-direction:column; justify-content:center; max-width: min(var(--maxw), 100%); }
.fullbleed__txt .inner { max-width: 560px; }
.fullbleed__txt h2 { font-size: clamp(2rem,5vw,4rem); letter-spacing:.08em; font-weight:300; margin: 1rem 0 1.4rem; }

/* ---------- 最新消息 ---------- */
.news { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,24px); }
.news a { background: var(--ink); border:1px solid var(--line); padding: clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:1rem; transition: background .45s var(--ease); min-height: 230px; }
.news a:hover { background: var(--ink-2); }
.news .meta { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; color:var(--jade-soft); display:flex; gap:1rem; }
.news h4 { font-size: 1.18rem; font-weight:300; letter-spacing:.06em; line-height:1.5; }
.news p { font-size:.86rem; color:var(--bone-dim); margin-top:auto; }

/* ---------- 訂房 / 資訊表 ---------- */
.info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); }
.info-cell { background: var(--ink); padding: clamp(26px,3vw,44px); }
.info-cell .en { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; color:var(--jade-soft); }
.info-cell h4 { font-size:1.2rem; font-weight:300; letter-spacing:.12em; margin:.6rem 0 1rem; }
.info-cell ul li { padding: .5rem 0; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; color:var(--bone-dim); }
.info-cell ul li:last-child { border-bottom:0; }
.info-cell ul li b { color: var(--bone); font-weight:400; }

.price-row { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); gap: 14px; }
.price-card { border:1px solid var(--line); padding: clamp(26px,3vw,40px); position:relative; transition: border-color .4s var(--ease), background .4s var(--ease); }
.price-card:hover { border-color: var(--jade); background: var(--ink-2); }
.price-card .en { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; color:var(--jade-soft); }
.price-card h4 { font-size:1.4rem; font-weight:300; letter-spacing:.14em; margin:.5rem 0; }
.price-card .ppl { font-family:var(--f-mono); font-size:.8rem; color:var(--bone-dim); letter-spacing:.1em; }
.price-card .price { font-family:var(--f-display); font-size: 2.2rem; font-weight:500; margin-top:1.2rem; letter-spacing:-.02em; }
.price-card .price small { font-size:.42em; color:var(--bone-dim); letter-spacing:.1em; font-family:var(--f-mono); }

.steps { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: clamp(20px,3vw,40px); }
.step .no { font-family:var(--f-mono); color:var(--jade-soft); font-size:.78rem; letter-spacing:.2em; }
.step h4 { font-size:1.15rem; font-weight:300; letter-spacing:.1em; margin:.8rem 0 .6rem; }
.step p { font-size:.88rem; color:var(--bone-dim); }
.step { padding-top:1.4rem; border-top:1px solid var(--line); }

.notice { border:1px solid var(--line); padding: clamp(24px,3vw,44px); display:grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: clamp(20px,3vw,44px); }
.notice h4 { font-size:1.05rem; font-weight:400; letter-spacing:.1em; margin-bottom: 1rem; color:var(--jade-soft); }
.notice li { font-size:.88rem; color:var(--bone-dim); padding:.35rem 0; padding-left:1.2rem; position:relative; }
.notice li::before { content:"—"; position:absolute; left:0; color:var(--bone-faint); }

/* ---------- 常見問題 FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: clamp(18px,2.4vw,26px) 0; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; font-size: clamp(1rem,2vw,1.18rem); font-weight: 300; letter-spacing: .04em; transition: color .3s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; font-family: var(--f-mono); font-size: 1.1rem; color: var(--jade-soft); flex: none; }
.faq details[open] summary { color: var(--jade-soft); }
.faq details[open] summary::after { content: "－"; }
.faq summary:hover { color: var(--bone); }
.faq .a { padding: 0 0 clamp(20px,2.6vw,30px); color: var(--bone-dim); max-width: 84ch; }
.faq .a + .a { padding-top: 0; }

/* 房價備註 */
.price-note { margin-top: clamp(18px,2.4vw,30px); }
.price-note li { font-size: .86rem; color: var(--bone-dim); padding: .35rem 0 .35rem 1.2rem; position: relative; }
.price-note li::before { content: "—"; position: absolute; left: 0; color: var(--bone-faint); }
.price-flag { display:inline-block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--jade-soft); border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:1.2rem; }

/* ---------- 位置 ---------- */
.map-wrap { position:relative; aspect-ratio: 16/8; border:1px solid var(--line); overflow:hidden; }
.map-wrap iframe { width:100%; height:100%; border:0; }
.routes { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); gap: clamp(20px,3vw,40px); }
.route .en { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--jade-soft); }
.route h4 { font-size:1.15rem; font-weight:300; letter-spacing:.1em; margin:.7rem 0; }
.route p { font-size:.9rem; color:var(--bone-dim); }
.route { border-top:1px solid var(--line); padding-top:1.4rem; }

/* ---------- CTA 區塊 ---------- */
.cta-band { text-align:center; padding-block: clamp(90px,15vh,180px); position:relative; }
.cta-band .kicker { justify-content:center; }
.cta-band h2 { font-size: clamp(2.2rem,6vw,5rem); letter-spacing:.1em; font-weight:300; margin: 1.4rem 0 2.4rem; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--line); padding-block: clamp(50px,7vw,90px); }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px,4vw,60px); }
.footer__brand b { font-family:var(--f-display); font-weight:600; font-size:1.5rem; letter-spacing:.05em; }
.footer__brand p { color:var(--bone-dim); font-size:.86rem; margin-top:1rem; line-height:1.9; }
.footer h5 { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--bone-faint); margin-bottom:1.2rem; text-transform:uppercase; }
.footer__col a, .footer__col li { display:block; color:var(--bone-dim); font-size:.88rem; padding:.4rem 0; transition: color .35s var(--ease); }
.footer__col a:hover { color:var(--bone); }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; margin-top: clamp(40px,6vw,72px); padding-top:1.6rem; border-top:1px solid var(--line-soft); flex-wrap:wrap; gap:1rem; }
.footer__bottom span { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; color:var(--bone-faint); }

/* ---------- lightbox ---------- */
.lb { position:fixed; inset:0; z-index:300; background:rgba(10,11,8,.96); display:none; align-items:center; justify-content:center; padding: 4vw; opacity:0; transition: opacity .4s var(--ease); }
.lb.open { display:flex; opacity:1; }
.lb img, .lb video { max-width:100%; max-height:90vh; object-fit:contain; }
.lb__video { display:none; width:min(1200px, 92vw); background:#000; cursor:pointer; }
.lb__play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:clamp(60px,9vw,84px); height:clamp(60px,9vw,84px); border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:rgba(20,21,17,.42); backdrop-filter:blur(5px);
  border:1px solid rgba(241,239,232,.8); color:var(--on-photo); cursor:pointer;
  transition:opacity .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.lb__play svg { width:38%; height:38%; fill:currentColor; pointer-events:none; }
.lb__play:hover { background:var(--jade); border-color:var(--jade); transform:translate(-50%,-50%) scale(1.06); }
.lb.has-video .lb__play { display:flex; }
.lb.has-video.controls-hidden .lb__play { opacity:0; pointer-events:none; }
.lb.has-video.controls-hidden { cursor:none; }
.lb__close { position:absolute; top:24px; right:30px; z-index:5; font-family:var(--f-mono); font-size:.8rem; letter-spacing:.2em; color:var(--on-photo-dim); }
.lb__close:hover { color:var(--on-photo); }
.lb__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:clamp(42px,8vw,54px); height:clamp(42px,8vw,54px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; line-height:1; color:var(--on-photo);
  background:rgba(20,21,17,.4); backdrop-filter:blur(4px);
  border:1px solid rgba(241,239,232,.5); transition:background .3s var(--ease);
}
.lb__nav:hover { background:var(--jade); border-color:var(--jade); }
.lb__prev { left: clamp(10px,2vw,24px); } .lb__next { right: clamp(10px,2vw,24px); }

/* ---------- 滾動揭示 ---------- */
.reveal { opacity:0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- 行動選單 ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  padding: var(--gut); transform: translateY(-100%); transition: transform .6s var(--ease);
}
body.menu-open .mobile-menu { transform: translateY(0); }
.mobile-menu a { font-family: var(--f-display); font-size: clamp(2rem,9vw,3.4rem); font-weight: 400; letter-spacing:.02em; color: var(--bone-dim); }
.mobile-menu a span { font-family:var(--f-mono); font-size:.8rem; letter-spacing:.2em; color:var(--bone-faint); display:inline-block; margin-right:1rem; }
.mobile-menu a:active { color: var(--jade-soft); }

/* ---------- 響應式 ---------- */
@media (max-width: 980px) {
  .split, .feature, .feature:nth-child(even) .feature__media { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .masonry { grid-template-columns: repeat(2, 1fr); }
  .news { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .news { grid-template-columns: 1fr; }
  .nav .nav-cta { display: none; }
  .burger { display: block; }
  .scrollcue { display: none; }
  .mosaic { grid-template-columns: repeat(2,1fr); }
  .mosaic .big, .mosaic .wide { grid-column: span 2; }
  .mosaic .tall { grid-row: span 1; }
  .footer__top { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .feature__media { grid-template-columns: 1fr 1fr; }
  .room__table { overflow-x: auto; }
  .hero__sub { gap: .6rem 1.4rem; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: clamp(22px,6vw,30px) clamp(16px,4vw,22px); }
  .feature__media img:first-child { grid-row: auto; aspect-ratio: 3/4; }
  .hero h1 { font-size: clamp(3rem, 18vw, 5rem); }
  .price-card .price, .stat b { font-size: 2rem; }
}

/* ---------- 房型（依實際房間）---------- */
.room { scroll-margin-top: 90px; }
.room__no {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; color: var(--jade-soft);
  display: inline-flex; align-items: center; gap: .8em;
}
.room__no b { font-family: var(--f-display); font-weight: 600; font-size: 2.6rem; color: var(--bone); letter-spacing: -.02em; }
.room__name { font-size: clamp(1.7rem, 3.6vw, 2.8rem); font-weight: 300; letter-spacing: .14em; margin: .8rem 0 .4rem; }
.room__en { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .22em; color: var(--bone-faint); }
.room__spec { display: flex; flex-wrap: wrap; gap: 0 clamp(20px,3vw,40px); margin: 1.6rem 0; }
.room__spec div { padding: .4rem 0; }
.room__spec .l { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .2em; color: var(--bone-faint); display: block; text-transform: uppercase; }
.room__spec .v { font-size: 1.05rem; font-weight: 300; letter-spacing: .06em; }
.room__spec .v small { font-size: .7em; color: var(--bone-dim); }

/* 房間：資訊標頭 + 完整相片牆 */
.rooms-list .room { padding-block: clamp(48px,7vw,104px); border-top: 1px solid var(--line); }
.rooms-list .room:first-child { border-top: 0; padding-top: clamp(24px,3vw,40px); }
.room__head { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(18px,3vw,56px); align-items: end; margin-bottom: clamp(26px,3.5vw,46px); }
.room__head .desc { color: var(--bone-dim); font-weight: 300; }
.room__head .btn { margin-top: 1.4rem; }
@media (max-width: 860px) { .room__head { grid-template-columns: 1fr; align-items: start; } }

/* 全棟房型總表 */
.room__table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.room__table th, .room__table td { text-align: left; padding: 16px clamp(12px,1.6vw,22px); border-bottom: 1px solid var(--line-soft); font-size: .9rem; letter-spacing: .04em; white-space: nowrap; }
.room__table th { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em; color: var(--jade-soft); text-transform: uppercase; font-weight: 400; }
.room__table td:first-child { font-family: var(--f-mono); color: var(--bone-dim); }
.room__table td.nm { font-weight: 400; color: var(--bone); white-space: normal; }
.room__table tbody tr:hover { background: var(--ink-2); }
.room__table tbody tr:last-child td { border-bottom: 0; }
.room__table .code { font-family: var(--f-mono); color: var(--timber); letter-spacing: .12em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity:1; transform:none; }
}

/* =========================================================
   淺色主題覆寫：壓在照片(深色漸層)上的元件維持淺色文字
   ========================================================= */

/* 導覽 — 透明覆於 Hero 時用淺色字 */
.nav .brand b { color: var(--on-photo); }
.nav .brand span { color: var(--on-photo-dim); }
.nav-links a { color: var(--on-photo-dim); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--on-photo); }
.nav-cta { color: var(--on-photo); border-color: var(--on-photo-line); }
.burger span { background: var(--on-photo); }

/* 導覽 — 捲動後改淺底深字 */
.nav.scrolled { background: rgba(236, 235, 231, 0.9); border-bottom-color: var(--line); }
.nav.scrolled .brand b { color: var(--bone); }
.nav.scrolled .brand span { color: var(--bone-dim); }
.nav.scrolled .nav-links a { color: var(--bone-dim); }
.nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a[aria-current="page"] { color: var(--bone); }
.nav.scrolled .nav-cta { color: var(--bone); border-color: var(--line); }
.nav.scrolled .nav-cta:hover { color: var(--on-photo); border-color: var(--jade); }
.nav.scrolled .burger span { background: var(--bone); }

/* Hero */
.hero .kicker { color: var(--on-photo-jade); }
.hero .kicker::before { background: var(--on-photo-jade); }
.hero h1 { color: var(--on-photo); }
.hero__sub .cn { color: var(--on-photo); }
.hero__meta { color: var(--on-photo-dim); }
.scrollcue { color: var(--on-photo-dim); }
.scrollcue::after { background: linear-gradient(var(--on-photo-dim), transparent); }

/* 內頁頁首 */
.pagehead .kicker { color: var(--on-photo-jade); }
.pagehead .kicker::before { background: var(--on-photo-jade); }
.pagehead h1 { color: var(--on-photo); }
.pagehead .cn { color: var(--on-photo-dim); }

/* 滿版圖文 */
.fullbleed .kicker { color: var(--on-photo-jade); }
.fullbleed .kicker::before { background: var(--on-photo-jade); }
.fullbleed__txt h2 { color: var(--on-photo); }
.fullbleed__txt .lede { color: var(--on-photo-dim); }

/* 房型 / 特色卡（文字壓在照片暗角）*/
.card__no, .card__body h3, .card__body .cap { color: var(--on-photo); }
.card__body .en { color: var(--on-photo-jade); }
.card__body p { color: var(--on-photo-dim); }

/* 燈箱：維持深色看圖、淺色介面 */
.lb { background: rgba(20, 21, 17, 0.96); }
.lb__close, .lb__nav { color: var(--on-photo-dim); }
.lb__nav:hover { color: var(--on-photo); }