/* 英文版（2026-10-31）：只在 /en/ 的頁面載入，接在 site.css 後面。
   site.css 的字距、字體、字級都是照中文調的（字距 .2–.6em、Noto 襯線）；英文照那樣排會散開、變細。
   這裡只改「字」：標題換 Cormorant Garamond、內文換 Jost，字距收回來，字級補大一點；版面、顏色、間距都沿用中文版。 */
html:lang(en) {
  --display: 'Cormorant Garamond', 'Noto Serif TC', 'Times New Roman', serif;
  --body: 'Jost', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
}
html:lang(en) body { font-size: 16px; line-height: 1.8; letter-spacing: .01em; }

/* 字距：中文版每個地方都加了很寬的字距，英文一律收回來；只有全大寫的小字（按鈕、連結、標籤）保留一點字距 */
html:lang(en) body * { letter-spacing: .01em !important; }
html:lang(en) .cta, html:lang(en) .btn, html:lang(en) .header-book, html:lang(en) .menu-label, html:lang(en) .header-line,
html:lang(en) .pager-dir, html:lang(en) .room-type, html:lang(en) .exp-sound,
html:lang(en) .note-caps, html:lang(en) .hero-kicker, html:lang(en) .num { letter-spacing: .16em !important; }
html:lang(en) .cta, html:lang(en) .btn, html:lang(en) .header-book, html:lang(en) .pager-dir, html:lang(en) .room-type { text-transform: uppercase; font-size: 12px; }
/* 中文版置中文字用 padding-left 補字距，英文不需要 */
html:lang(en) .brand, html:lang(en) .footer-brand, html:lang(en) .hero h1, html:lang(en) .hero-sub, html:lang(en) .menu-label,
html:lang(en) .header-line-label, html:lang(en) .h-lg, html:lang(en) .tile-name, html:lang(en) .pager-name { padding-left: 0 !important; }

/* 頁首 */
html:lang(en) .brand { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: .04em !important; }
html:lang(en) .header-line { font-size: 11px; }
html:lang(en) .menu-btn { font-size: 12px; text-transform: uppercase; letter-spacing: .16em !important; }
@media (max-width: 860px) {
  html:lang(en) .brand { font-size: 18px; }
  html:lang(en) .menu-label { font-size: 9px; }
  html:lang(en) .header-line { font-size: 9px; }
  html:lang(en) .header-end .header-lang { display: none; }  /* 手機頁首太窄：英文頁切回中文放在選單與頁尾 */
  html:lang(en) .header-book { font-size: 11px; }
}

/* 選單 */
html:lang(en) .menu-zh { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; }
html:lang(en) .menu-subs { font-size: 14px; }
html:lang(en) .menu-foot { font-size: 13px; }
@media (max-width: 860px) { html:lang(en) .menu-zh { font-size: 28px; } }

/* 標題：Cormorant 的字身比中文小，同樣的字級看起來小一號 → 放大，字重用 400／500 */
html:lang(en) h1, html:lang(en) h2, html:lang(en) h3 { font-weight: 400; }
html:lang(en) .hero h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: 1.1; }
html:lang(en) .hero h1.h1-long { font-size: clamp(36px, 4.4vw, 64px); }
html:lang(en) .hero-sub { font-size: clamp(19px, 1.7vw, 24px); font-style: italic; }
html:lang(en) .h-lg { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.15; }
html:lang(en) .h-md { font-size: clamp(30px, 3vw, 42px); line-height: 1.2; }
html:lang(en) .h-sm { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.25; }
html:lang(en) .lead { font-size: 18px; line-height: 1.75; }
html:lang(en) .verse { font-size: clamp(21px, 2vw, 27px); line-height: 1.75; }
html:lang(en) .verse .gap { height: .9em; }
html:lang(en) .tagline, html:lang(en) .room-text .tagline { font-size: 21px; font-style: italic; line-height: 1.5; }
html:lang(en) .place-body { font-size: 17px; line-height: 1.8; max-width: 34em; }
html:lang(en) .note { font-size: 14px; line-height: 1.75; }
html:lang(en) .tile-name { font-size: 22px; line-height: 1.3; }
html:lang(en) .pager-name { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.2; }
html:lang(en) .room-text h2 { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.1; }
html:lang(en) .rule-list dt { font-family: var(--display); font-size: 18px; font-weight: 500; }
html:lang(en) .rule-list dd { line-height: 1.75; }

/* 房名旁邊的中文名稱（向陽、望林、山間）：客人到現場跟人員講同一個名字 */
.zh-name { font-family: 'Noto Serif TC', serif; text-transform: none; letter-spacing: .2em !important; margin-left: .9em; padding-left: .9em; border-left: 1px solid currentColor; opacity: .85; }

/* 首頁 */
html:lang(en) .hv-h { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.1; }
html:lang(en) .hv-verse { font-size: clamp(21px, 2vw, 27px); }
html:lang(en) .hv-card-name { font-family: var(--display); font-size: 28px; line-height: 1.2; }
html:lang(en) .hv-card-line { font-size: 15px; line-height: 1.6; }
html:lang(en) .closing-copy h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.15; }
html:lang(en) .hv-closing-sub { font-family: var(--display); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); }
html:lang(en) .hv-group-h { font-size: clamp(30px, 3vw, 42px); }

/* 頁尾 */
html:lang(en) .site-footer { font-size: 15px; }
html:lang(en) .footer-top p { font-size: 14px; }

/* 表單：輸入框的提示字也收字距 */
html:lang(en) input, html:lang(en) input::placeholder, html:lang(en) textarea::placeholder { letter-spacing: .01em !important; }

/* 預訂元件 */
html:lang(en) .bf-h { font-size: clamp(26px, 2.4vw, 32px); }

/* 品牌故事 */
html:lang(en) .story-h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.2; margin-top: 14px; }
html:lang(en) .story-text blockquote { font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.5; }
html:lang(en) .story-h1 span { display: inline; }

/* 手機：詩句一行約 40 個字母，字級收一點，長句才不會斷在奇怪的地方 */
@media (max-width: 640px) {
  html:lang(en) .verse, html:lang(en) .hv-verse { font-size: 19px; line-height: 1.7; }
  html:lang(en) .hero h1 { font-size: clamp(38px, 11vw, 52px); }
  html:lang(en) .lead { font-size: 17px; }
}
html:lang(en) .story-text p { font-size: 16px; line-height: 1.8; }

/* 手機底部「Continue on LINE」列：英文按鈕字比較長，收窄內距與字距，左邊的日期才不會被蓋住 */
html:lang(en) .bf-bar .btn { padding: 0 16px; letter-spacing: .06em !important; font-size: 11px; white-space: nowrap; flex: none; }
html:lang(en) .bf-bar-sum { min-width: 0; }
