/*
 * 官網設計系統（JON-42，docs/intl-site/DESIGN.md v3「蘋果風格」）。
 *
 * ⚠️ 只由 layouts/public 載入：員工後台、預約單用的是 Tailwind（tailwind.css）＋ application.css，
 *    這份檔案的 class 名稱與全域樣式（body、a、button）不會影響員工後台。
 *    不經過 Tailwind 編譯（propshaft 直接送），改了不必 build。
 *
 * 結構：token（CSS 變數，單一來源）→ 字級與中日韓斷行 → 元件 → 頁面共用片段 → 減少動態。
 * token 與元件規格照 DESIGN.md（示意稿 cache/demos/intl-site-v3/_ui.py 是當初的來源）。
 *
 * 明暗段落：每個 <section> 寫 data-theme="light|dark"，導覽列依正下方段落切換（public_site/nav_controller.js）。
 * 不跟隨系統深色模式：段落明暗是美術設計的一部分（apple.com 同樣做法）。
 * 動態：<html class="motion"> 才會先藏起 [data-reveal]、逐字點亮、「台北的一天」黏性舞台（scroll_scene_controller.js 加；
 *       減少動態時不加）。基本樣式就是完整的靜態版——沒有 JS、模組載入失敗、減少動態時內容都完整顯示。
 *       新增任何「先藏起來、JS 再打開」的樣式，一律寫在 .motion 底下。
 */
:root{
  /* surfaces */
  --canvas:#FFFFFF; --canvas-alt:#F5F5F7; --night:#000000; --night-alt:#1D1D1F; --night-raised:#2C2C2E;
  /* ink on light */
  --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#86868B; --hairline:#D2D2D7;
  /* ink on dark */
  --snow:#F5F5F7; --snow-2:#A1A1A6; --snow-3:#86868B; --hairline-dark:#424245;
  /* brand accent — Lantern Vermilion 燈籠朱 */
  --lantern:#C93F18; --lantern-hover:#B5360F; --lantern-glow:#FF7A45; --lantern-tint:#FCEEE9;
  --line-green:#06C755;
  /* type */
  --font-latin:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-sans:var(--font-latin);
  /* layout */
  --gutter:16px; --w-text:692px; --w-content:980px; --w-wide:1240px; --nav-h:48px;
  /* radii */
  --r-field:12px; --r-thumb:18px; --r-card:28px; --r-pill:980px;
  /* motion */
  --ease:cubic-bezier(.28,.11,.32,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t-press:200ms; --t-ui:400ms; --t-reveal:900ms;
  --vh:1svh;
  color-scheme:light;
}
@media (min-width:734px){:root{--gutter:32px;--nav-h:52px}}
@media (min-width:1068px){:root{--gutter:48px}}
html:lang(ja){--font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif}
html:lang(zh-Hant){--font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
html:lang(ko){--font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.47;letter-spacing:-.022em;color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
html:lang(ja) body,html:lang(zh-Hant) body,html:lang(ko) body{letter-spacing:.01em;line-height:1.7}
html:lang(ko) body{word-break:keep-all}
img,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}
:focus-visible{outline:3px solid var(--lantern-glow);outline-offset:3px;border-radius:6px}
.on-light :focus-visible,.foot :focus-visible,.form :focus-visible{outline-color:var(--lantern)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ic{width:1em;height:1em;flex:none}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2*var(--gutter), var(--w-content));margin-inline:auto}
.wrap-wide{width:min(100% - 2*var(--gutter), var(--w-wide));margin-inline:auto}
.wrap-text{width:min(100% - 2*var(--gutter), var(--w-text));margin-inline:auto}
.sec{padding-block:88px}
@media (min-width:1068px){.sec{padding-block:140px}}
.bg-canvas{background:var(--canvas);color:var(--ink)}
.bg-canvas-alt{background:var(--canvas-alt);color:var(--ink)}
.bg-night{background:var(--night);color:var(--snow)}
.bg-night-alt{background:var(--night-alt);color:var(--snow)}
.h-stage{height:calc(var(--vh) * 100)}

/* ---------- type scale (desktop 80/64/48 · tablet 64/48/40 · mobile 48/40/32) ---------- */
.t-d1,.t-d2,.t-d3,.t-h3,.t-title{font-weight:700;margin:0;text-wrap:balance}
.t-d1{font-size:48px;line-height:1.0834;letter-spacing:-.003em}
.t-d2{font-size:40px;line-height:1.1;letter-spacing:0}
.t-d3{font-size:32px;line-height:1.125;letter-spacing:.004em}
.t-h3{font-size:24px;line-height:1.1667;letter-spacing:.009em}
.t-title{font-size:21px;line-height:1.19;letter-spacing:.011em;font-weight:600}
.t-lead{font-size:19px;line-height:1.42;letter-spacing:.012em;font-weight:600;margin:0}
.t-body{font-size:17px;line-height:1.47;margin:0}
.t-caption{font-size:14px;line-height:1.43;letter-spacing:-.016em;margin:0}
.t-micro{font-size:12px;line-height:1.33;letter-spacing:-.01em;margin:0}
.eyebrow{display:block;font-size:14px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);margin:0 0 12px}
.bg-night .eyebrow,.on-dark .eyebrow{color:var(--snow-2)}
@media (min-width:734px){
  .t-d1{font-size:64px;line-height:1.0625;letter-spacing:-.009em}
  .t-d2{font-size:48px;line-height:1.0834;letter-spacing:-.003em}
  .t-d3{font-size:40px;line-height:1.1}
  .t-h3{font-size:28px;line-height:1.1429}
  .t-lead{font-size:21px;line-height:1.381}
  .eyebrow{font-size:17px}
}
@media (min-width:1068px){
  .t-d1{font-size:80px;line-height:1.05;letter-spacing:-.015em}
  .t-d2{font-size:64px;line-height:1.0625;letter-spacing:-.009em}
  .t-d3{font-size:48px;line-height:1.0834;letter-spacing:-.003em}
  .t-h3{font-size:32px;line-height:1.125;letter-spacing:.004em}
  .t-title{font-size:28px;line-height:1.1429;letter-spacing:.007em}
}
/* CJK: no negative tracking, looser leading, phrase-aware wrapping */
html:lang(ja) :is(.t-d1,.t-d2,.t-d3,.t-h3,.t-title,.t-lead),html:lang(zh-Hant) :is(.t-d1,.t-d2,.t-d3,.t-h3,.t-title,.t-lead),html:lang(ko) :is(.t-d1,.t-d2,.t-d3,.t-h3,.t-title,.t-lead){letter-spacing:.02em;line-height:1.25}
html:lang(ja) :is(.t-d1,.t-d2,.t-d3,.t-h3,.t-title){font-feature-settings:"palt";letter-spacing:.04em}
html:lang(ja) .t-lead,html:lang(zh-Hant) .t-lead{line-height:1.6}
/* line breaking: normal CJK breaking + strict kinsoku (no line may start with ，。、）;
   headings are written as phrases (`|` in the copy -> <span class="ph">) that never split. */
html:lang(ja) :is(.t-d1,.t-d2,.t-d3,.t-h3,.t-title,.t-lead,h3),html:lang(zh-Hant) :is(.t-d1,.t-d2,.t-d3,.t-h3,.t-title,.t-lead,h3){word-break:normal;line-break:strict;overflow-wrap:normal}
html:lang(ja) :is(.t-d1,.t-d2,.t-d3,.t-h3,.t-title,.t-lead){word-break:auto-phrase}
.ph{display:inline-block;max-width:100%} .nw{white-space:nowrap}
/* emergency only: a single Japanese phrase wider than a 320px screen may wrap instead of overflowing */
html:lang(ja) :is(.ph,.lit .w){overflow-wrap:break-word}
/* Japanese display lines are long phrases (待っています。): one step smaller on very small phones so they fit 288px */
@media (max-width:359px){html:lang(ja) .t-d1{font-size:38px}html:lang(ja) .t-d2{font-size:34px}}
html:lang(ja) .lit .w,html:lang(zh-Hant) .lit .w{display:inline-block;max-width:100%}
.ink-2{color:var(--ink-2)} .snow-2{color:var(--snow-2)}
.lead-mix{color:var(--ink-2)} .lead-mix strong{color:var(--ink);font-weight:inherit}
.on-dark .lead-mix,.bg-night .lead-mix{color:var(--snow-2)} .on-dark .lead-mix strong,.bg-night .lead-mix strong{color:var(--snow)}
.num{font-variant-numeric:tabular-nums}
.measure{max-width:34em} html:lang(ja) .measure,html:lang(zh-Hant) .measure{max-width:30em}

/* ---------- buttons & links ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:var(--r-pill);
  background:var(--lantern);color:#fff;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.2;transition:background-color var(--t-press) var(--ease),transform var(--t-press) var(--ease)}
.pill:hover{background:var(--lantern-hover)} .pill:active{transform:scale(.98)}
.pill-sm{min-height:28px;padding:4px 12px;font-size:12px;font-weight:500}
.pill-ghost{background:transparent;color:var(--lantern);box-shadow:inset 0 0 0 1px currentColor}
.pill-ghost:hover{background:var(--lantern);color:#fff;box-shadow:none}
.on-dark .pill-ghost,.bg-night .pill-ghost{color:var(--snow)} .on-dark .pill-ghost:hover,.bg-night .pill-ghost:hover{background:var(--snow);color:var(--ink)}
.pill-line{background:var(--line-green);color:#fff} .pill-line:hover{background:#05b34c}
.pill-light{background:#fff;color:var(--ink)} .pill-light:hover{background:#e8e8ed}
.pill-dark{background:var(--ink);color:#fff} .pill-dark:hover{background:#000}
.more{display:inline-flex;align-items:center;gap:2px;color:var(--lantern);font-size:17px;font-weight:400}
.more .ic{width:.85em;height:.85em;transition:transform var(--t-press) var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:3px} .more:hover .ic{transform:translateX(2px)}
.on-dark .more,.bg-night .more{color:var(--lantern-glow)}
.smp{display:inline-flex;align-items:center;margin-inline-start:6px;padding:0 6px;border:1px dashed currentColor;border-radius:var(--r-pill);
  font-size:10px;line-height:15px;font-weight:600;letter-spacing:0;opacity:.75;vertical-align:2px;white-space:nowrap}
.tbd{display:inline-flex;padding:1px 8px;border:1px dashed var(--ink-3);border-radius:6px;font-size:11px;color:var(--ink-2);white-space:nowrap}


/* ---------- global nav (frosted, adapts to the section underneath) ---------- */
.gnav{position:sticky;top:0;z-index:50;height:var(--nav-h);color:var(--nav-fg);background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--nav-line);transition:background-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease)}
.gnav.static{position:relative}
.gnav,.gnav[data-tone=dark]{--nav-bg:rgba(22,22,23,.72);--nav-fg:#F5F5F7;--nav-fg-2:rgba(245,245,247,.8);--nav-line:rgba(255,255,255,.06);--nav-menu:#161617}
.gnav[data-tone=light]{--nav-bg:rgba(251,251,253,.8);--nav-fg:#1D1D1F;--nav-fg-2:rgba(29,29,31,.8);--nav-line:rgba(0,0,0,.08);--nav-menu:#fbfbfd}
.gnav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:baseline;gap:6px;font-size:17px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.brand small{font-size:12px;font-weight:500;opacity:.6;letter-spacing:0}
.gnav-links{display:none;gap:32px;font-size:12px;letter-spacing:-.01em}
.gnav-links a{color:var(--nav-fg-2);transition:color var(--t-press)} .gnav-links a:hover{color:var(--nav-fg)}
.gnav-actions{display:flex;align-items:center;gap:6px}
@media (min-width:1068px){.gnav-links{display:flex}.menu-btn{display:none!important}}
.lang{position:relative}
.lang summary{list-style:none;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;color:var(--nav-fg-2);cursor:pointer}
.lang summary::-webkit-details-marker{display:none}
.lang summary{white-space:nowrap} @media (max-width:359px){.lang summary{padding:0 6px;gap:3px} .lang summary .ic:last-child{display:none}}
.lang summary:hover{color:var(--nav-fg)} .lang summary .ic{width:15px;height:15px}
.lang[open] summary{color:var(--nav-fg);background:color-mix(in srgb,var(--nav-fg) 10%,transparent)}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;padding:8px;border-radius:16px;background:var(--nav-menu);color:var(--nav-fg);
  box-shadow:0 20px 50px rgba(0,0,0,.25);border:1px solid var(--nav-line)}
.lang-menu a,.lang-menu span{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;font-size:14px}
.lang-menu a:hover{background:color-mix(in srgb,var(--nav-fg) 8%,transparent)}
.lang-menu [aria-current]{font-weight:600} .lang-menu .ic{width:14px;height:14px}
.lang-menu .na{opacity:.45}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px}
.menu-btn .ic{width:20px;height:20px}
.gnav .pill-sm{display:none} @media (min-width:734px){.gnav .pill-sm{display:inline-flex}}
.mmenu{position:fixed;inset:var(--nav-h) 0 0 0;z-index:49;background:var(--nav-menu,#161617);color:var(--nav-fg,#F5F5F7);padding:24px var(--gutter);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease),visibility 0s linear var(--t-ui);overflow:auto}
.menu-open .mmenu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mmenu a.big{display:block;font-size:28px;font-weight:600;line-height:1.5;letter-spacing:.007em}
.mmenu .langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.mmenu .langs a,.mmenu .langs span{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--hairline-dark);font-size:14px}
.mmenu .langs [aria-current]{background:var(--snow);color:var(--ink);border-color:var(--snow)}

/* local (product) nav — house page */
.lnav{position:sticky;top:0;z-index:48;height:52px;background:rgba(251,251,253,.8);color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.lnav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lnav-title{font-size:19px;font-weight:600;letter-spacing:.012em;white-space:nowrap} @media (min-width:1068px){.lnav-title{font-size:21px}}
.lnav-links{display:none;gap:24px;font-size:12px;color:var(--ink-2)} .lnav-links a:hover{color:var(--ink)}
@media (min-width:900px){.lnav-links{display:flex}}
/* local nav CTA from 734px; on phones the sticky pill is the one booking button */
.lnav .pill-sm{display:none!important} @media (min-width:734px){.lnav .pill-sm{display:inline-flex!important}}

/* ---------- reveal ---------- */
.motion [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease-out);transition-delay:var(--d,0ms)}
.motion [data-reveal].in{opacity:1;transform:none}
.reduce [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- hero ---------- */
.hero{position:relative;height:calc(var(--vh) * 100);min-height:600px;margin-top:calc(-1 * var(--nav-h));color:#fff;background:#0b0d12;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;transform:scale(calc(1 + var(--hp,0) * .08));transform-origin:50% 40%}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-poster{animation:kenburns 24s var(--ease) infinite alternate;filter:saturate(.95)}
.video-on .hero-poster{animation:none}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1%,-1%)}}
.hero-video{opacity:0;transition:opacity 1.2s var(--ease)} .hero-video.on{opacity:1}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 36%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.8) 100%)}
.hero-copy{position:absolute;inset:auto 0 0 0;padding-bottom:calc(120px + env(safe-area-inset-bottom));text-align:center;
  opacity:calc(1 - var(--hp,0) * 1.8);transform:translateY(calc(var(--hp,0) * -64px))}
.hero-copy .eyebrow{color:rgba(255,255,255,.86)}
.hero-copy p.t-lead{margin:16px auto 0;max-width:30em;color:rgba(255,255,255,.86)}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-top:28px}
.hero-ctas .more{color:#fff}
.hero-ctas .pill-light{background:rgba(255,255,255,.94)} .hero-ctas .pill-light:hover{background:#fff}
.hero-facts{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 var(--gutter) calc(22px + env(safe-area-inset-bottom));list-style:none;display:flex;justify-content:center;gap:10px 28px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.78);letter-spacing:0}
.hero-facts li{display:flex;align-items:center;gap:6px} .hero-facts strong{color:#fff;font-weight:600}
@media (max-width:733px){.hero-facts{gap:4px 14px;font-size:11px}.hero-copy{padding-bottom:132px}}
.hero-toggle{position:absolute;right:var(--gutter);bottom:calc(64px + env(safe-area-inset-bottom));width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero-toggle:hover{background:rgba(255,255,255,.28)} .hero-toggle .ic{width:14px;height:14px}
@media (min-width:734px){.hero-toggle{bottom:22px}}

/* ---------- statement (words light up on scroll) ---------- */
.statement{padding-block:112px 72px} @media (min-width:1068px){.statement{padding-block:180px 96px}}
.motion .lit .w{opacity:.16;transition:opacity .2s linear}

/* ---------- a day in Taipei: ONE sticky stage, four chapters that crossfade ---------- */
.day-intro{padding-block:0 48px;text-align:center} @media (min-width:1068px){.day-intro{padding-block:0 72px}}
/* 基本（沒有 JS、減少動態）：四個 100vh 的靜態畫面，照片、文字全部看得到 */
.day{position:relative;background:#000}
.day-stage{position:relative;background:#000}
.dch{position:relative;height:calc(var(--vh) * 100);overflow:hidden;--dp:calc((var(--i) + 1) / 4)}
.dch-media{position:absolute;inset:0;margin:0}
.dch-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.dch-scrim{position:absolute;inset:0}
.dch.dark .dch-scrim{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.74) 34%,rgba(0,0,0,.36) 56%,rgba(0,0,0,0) 76%)}
@media (min-width:1068px){.dch.dark .dch-scrim{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 66%),linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 55%)}}
.dch-inset{display:none}
@media (min-width:1068px){
  .dch-inset{display:block;position:absolute;z-index:3;right:7vw;top:calc(var(--vh) * 16);width:22vw;max-width:340px;aspect-ratio:3/4;margin:0;border-radius:22px;overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.28)}
  .dch-inset img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}}
.dch-copy{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:calc(20px + env(safe-area-inset-bottom))}
@media (min-width:734px){.dch-copy{bottom:48px;right:auto;max-width:480px}}
@media (min-width:1068px){.dch-copy{left:max(var(--gutter),calc((100vw - var(--w-wide))/2));bottom:calc(var(--vh) * 11)}}
.dch-card{padding:22px 22px 24px;border-radius:var(--r-card);background:rgba(255,255,255,.8);color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:0 10px 40px rgba(0,0,0,.08)}
@media (min-width:734px){.dch-card{padding:32px}}
.dch.dark .dch-card{padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--snow)}
.dch.dark .lead-mix{color:var(--snow-2)} .dch.dark .lead-mix strong{color:var(--snow)}
.dch-copy .t-d3{margin:0 0 12px} @media (min-width:1068px){.dch-copy .t-d3{font-size:40px;line-height:1.1}}
.dch-copy .t-lead{font-size:17px} @media (min-width:734px){.dch-copy .t-lead{font-size:19px}}
.ch-meta{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ch-time{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;padding:3px 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.07);color:var(--ink)}
.dch.dark .ch-time{background:rgba(255,255,255,.16);color:#fff}
.ch-bar{display:flex;gap:5px;margin:0;padding:0;list-style:none;width:112px}
.ch-bar li{flex:1;height:3px;border-radius:2px;background:rgba(0,0,0,.14);overflow:hidden}
.dch.dark .ch-bar li{background:rgba(255,255,255,.26)}
.ch-bar i{display:block;height:100%;background:currentColor;transform-origin:left;transform:scaleX(clamp(0,calc(var(--dp,0) * 4 - var(--s)),1))}
.day-fade{display:none}
article.dch:last-of-type .dch-scrim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(0,0,0,0),#000)}

/* 動態（html.motion，JS 加；減少動態時不加）：整段 340–360vh，單一黏性舞台、四個場景交叉淡入 */
.motion .day{height:calc(var(--vh) * 340);background:var(--canvas)}
@media (min-width:734px){.motion .day{height:calc(var(--vh) * 360)}}
.motion .day-stage{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;
  clip-path:inset(calc((1 - var(--in,1)) * 7%) calc((1 - var(--in,1)) * 4.5%) round calc((1 - var(--in,1)) * 40px))}
.motion .dch{position:absolute;inset:0;height:auto;overflow:visible;visibility:hidden;--dp:inherit}
.motion .dch.on,.motion .dch.was{visibility:visible} .motion .dch.on{z-index:2} .motion .dch.was{z-index:1}
.motion .dch-media{opacity:0;transition:opacity 600ms var(--ease)}
.motion .dch.on .dch-media{opacity:1} .motion .dch.was .dch-media{opacity:1;transition:none}
.motion .dch-media img{transform:scale(calc(1.06 - .06 * var(--k,0)));will-change:transform}
@media (min-width:1068px){
  .motion .dch-inset{opacity:0;transform:translateY(calc((.5 - var(--k,0)) * 64px));transition:opacity 600ms var(--ease)}
  .motion .dch.on .dch-inset{opacity:1;transition-delay:150ms}}
.motion .dch-copy{opacity:0;transform:translateY(16px);transition:opacity 260ms var(--ease),transform 260ms var(--ease)}
.motion .day.copy-in .dch.on .dch-copy{opacity:1;transform:none;transition:opacity 600ms var(--ease) 180ms,transform 800ms var(--ease-out) 180ms}
.motion .day-fade{display:block;position:absolute;left:0;right:0;bottom:0;height:160px;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),#000);opacity:0;transition:opacity 600ms var(--ease)}
.motion .day.last .day-fade{opacity:1}
.motion article.dch:last-of-type .dch-scrim::after{content:none}

/* ---------- bridge: night -> home (three of our own photos, never upscaled) ---------- */
.bridge{padding-block:96px 104px;text-align:center} @media (min-width:1068px){.bridge{padding-block:140px 150px}}
.mosaic{display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:40px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);scroll-padding-inline:var(--gutter);text-align:left}
.mosaic::-webkit-scrollbar{display:none}
.mosaic figure{margin:0;min-width:0;scroll-snap-align:start}
.mosaic .m-img{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#111}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figcaption{font-size:12px;line-height:1.35;color:var(--snow-2);margin-top:10px}
@media (min-width:734px){.mosaic{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:20px;margin:64px auto 0;padding:0;max-width:1000px}}
.mosaic-note{font-size:12px;color:var(--snow-3);margin:18px 0 0}

/* ---------- section heads ---------- */
.sec-head{text-align:center;margin-bottom:48px} @media (min-width:1068px){.sec-head{margin-bottom:72px}}
.sec-head .t-lead{margin:18px auto 0;max-width:34em}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.sec-head-row>div:first-child{min-width:0;flex:1}
@media (max-width:733px){.sec-head-row .gal-nav{display:none}}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:-16px 0 36px}
.chip{height:36px;padding:0 16px;border-radius:var(--r-pill);font-size:14px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline);transition:all var(--t-press) var(--ease)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink-3)} .chip[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}

/* ---------- house cards（首頁與 /listings 共用的寓所卡，public/shared/_house_card） ----------
 * 案主 2026-10-06：資訊結構回到改版前——整張卡一個連結、照片滿版在最上面（手機 4:3、734px 以上 16:10）、
 * 標記壓在照片右上角、下面一行名稱＋副名稱、一行地址，右邊空位標記（開關打開才有）。不放價格、房型、租期、年齡。
 * 首頁（.house-grid）手機橫向滑動；/listings（.house-list）手機一欄往下排。 */
.house-grid{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--gutter) 24px;margin-inline:calc(-1 * var(--gutter));scroll-padding-inline:var(--gutter);scrollbar-width:none}
.house-grid::-webkit-scrollbar{display:none}
.house-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* 手機橫向滑動時卡片照自己的高度（「不確定哪間適合？」那張比較高，不把寓所卡撐出空白） */
@media (max-width:733px){.house-grid{align-items:start}}
@media (min-width:734px){
  .house-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:0;margin:0;gap:24px}
  .house-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (min-width:1068px){.house-grid,.house-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hcard{scroll-snap-align:start;min-width:0}
.hcard>a,.hcard>div{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-card);overflow:hidden;transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.hcard>a:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.09)}
/* 新寓所／開幕優惠：卡片微微浮起＋細框（不用朱色——朱色只給可以按的按鈕與連結字） */
.hcard.hl>a{box-shadow:0 0 0 1.5px var(--ink-3),0 14px 40px rgba(0,0,0,.08)}
.hcard.hl>a:hover{box-shadow:0 0 0 1.5px var(--ink-3),0 18px 50px rgba(0,0,0,.12)}
.hcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e8e8ed}
@media (min-width:734px){.hcard-media{aspect-ratio:16/10}}
.hcard-media picture{display:block;width:100%;height:100%}
.hcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.hcard>a:hover .hcard-media img{transform:scale(1.04)}
.badge{position:absolute;right:14px;top:14px;padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.88);color:var(--ink);font-size:12px;font-weight:600;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hcard-body{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:1;padding:18px 22px 20px}
.hcard-text{min-width:0;flex:1}
/* 名稱、副名稱各自不拆開：放不下時整段換到下一行（空位標記在右邊、320px 也不會把名稱壓到標記底下） */
.hcard-name-main,.hcard-name-sub{display:inline-block;max-width:100%}
.hcard-name{margin:0;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:.011em;color:var(--ink)}
@media (min-width:1068px){.hcard-name{font-size:21px}}
.hcard-loc{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.hcard-body .vac{flex:none;font-size:12px;padding:4px 10px;margin-top:2px}
.st-chip{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin-right:8px;border-radius:5px;background:var(--c);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hcard.ask>div{justify-content:space-between;padding:24px;background:#fff}
/* 三欄時最後一列只剩一張寓所卡＋這張：這張佔兩欄補滿那一列（.wide 由首頁依寓所數、篩選膠囊依篩選後的張數加上） */
@media (min-width:1068px){.hcard.ask.wide{grid-column:span 2}}
.hcard.ask .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ask-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--canvas-alt);color:var(--ink);margin-bottom:22px}.ask-ic .ic{width:22px;height:22px}
.footnote-sm{font-size:12px;color:var(--ink-2);margin:28px 0 0;text-align:center}
.footnote-sm a{text-decoration:underline;text-underline-offset:2px} .footnote-sm a:hover{color:var(--ink)}

/* ---------- bento (dark) ---------- */
.bento{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:734px){.bento{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1068px){.bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(250px,auto)}
  .b-a{grid-column:span 4;grid-row:span 2}.b-b,.b-c{grid-column:span 2}.b-d{grid-column:span 3}.b-e{grid-column:span 3}.b-f{grid-column:span 6}}
@media (min-width:734px) and (max-width:1067px){.b-a,.b-f{grid-column:span 2}}
.tile{position:relative;border-radius:var(--r-card);background:var(--night-alt);color:var(--snow);overflow:hidden;padding:30px 28px;display:flex;flex-direction:column;min-height:260px}
@media (min-width:1068px){.tile{padding:36px 36px}}
.tile .t-h3{margin-bottom:10px}
.tile p{color:var(--snow-2);margin:0} .tile p strong{color:var(--snow);font-weight:600}
.tile-photo{padding:0;justify-content:flex-end;min-height:440px}
.tile-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%)}
.tile-photo .tile-txt{position:relative;z-index:1;padding:30px 28px} @media (min-width:1068px){.tile-photo .tile-txt{padding:40px}}
.tile .big-num,.big-num{font-size:56px;line-height:1;font-weight:700;letter-spacing:-.02em;margin:auto 0 12px;color:var(--snow)}
.big-num.hl{background:linear-gradient(90deg,#FF7A45 0%,#FFB089 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:1068px){.big-num{font-size:72px}}
html:lang(ja) .big-num,html:lang(zh-Hant) .big-num{letter-spacing:0}
.tier-list{list-style:none;margin:18px 0 0;padding:0;font-size:14px}
.tier-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hairline-dark);color:var(--snow-2)}
.tier-list li b{color:var(--snow-2);font-weight:500;white-space:nowrap} .tier-list li.base b{color:var(--snow);font-weight:600}
.chk{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:14px;color:var(--snow)}
.chk li{display:flex;align-items:center;gap:8px} .chk .ic{color:var(--snow-2);width:16px;height:16px}
.tile-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--night-raised);color:var(--snow);margin-bottom:auto}
.tile-icon .ic{width:22px;height:22px}
.costs{display:grid;gap:20px;margin-top:22px} @media (min-width:734px){.costs{grid-template-columns:repeat(3,1fr);gap:28px}}
.costs div{border-top:1px solid var(--hairline-dark);padding-top:16px}
.costs b{display:block;font-size:28px;font-weight:600;color:var(--snow);letter-spacing:.007em} .costs span{font-size:14px;color:var(--snow-2)}
.vv-mock{margin-top:22px;border-radius:18px;background:#000;border:1px solid var(--hairline-dark);padding:14px;display:flex;gap:12px;align-items:center}
.vv-mock img{width:96px;height:72px;border-radius:12px;object-fit:cover}
.ex-tag{display:inline-flex;align-items:center;margin-inline-end:8px;padding:1px 7px;border-radius:6px;border:1px solid var(--hairline-dark);font-size:11px;font-weight:600;color:var(--snow-2);letter-spacing:0}

/* ---------- steps ---------- */
.steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:36px}
@media (min-width:734px){.steps{grid-template-columns:repeat(2,1fr);gap:48px 40px}}
@media (min-width:1068px){.steps{grid-template-columns:repeat(4,1fr);gap:40px;padding-top:36px}
  .steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--hairline)}
  .steps::after{background:var(--ink);transform-origin:left;transition:transform 1.6s var(--ease)}
  .motion .steps::after{transform:scaleX(0)} .motion .steps.in::after{transform:scaleX(1)}}
.step-n{display:block;font-size:48px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:16px}
.steps h3{margin:0 0 8px} .steps p{margin:0;color:var(--ink-2)}
.steps.js-in [data-reveal]{transition-delay:var(--d)}

/* ---------- horizontal gallery ---------- */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:6px max(var(--gutter),calc((100vw - var(--w-wide))/2)) 28px;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--w-wide))/2))}
.gallery::-webkit-scrollbar{display:none}
@media (min-width:1068px){.gallery{grid-auto-columns:372px;gap:20px}}
.acard{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;background:#fff;transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.acard:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.09)}
.acard-media{aspect-ratio:4/3;overflow:hidden;background:#ddd} .acard-media img{width:100%;height:100%;object-fit:cover}
.acard-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard-cat{font-size:12px;font-weight:600;color:var(--ink-2);margin:0} .acard h3{font-size:21px;line-height:1.24;font-weight:600;margin:0;letter-spacing:.011em}
.acard-meta{font-size:12px;color:var(--ink-2);margin-top:auto}
.acard.is-draft:hover{transform:none;box-shadow:none} .acard.is-draft .acard-media img{filter:saturate(.55) contrast(.98)}
.acard-media{position:relative} .acard-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
/* small labels shared by article cards (home carousel, hub, related) */
.draft-tag{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.9);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mini{display:inline-flex;align-items:center;padding:1px 8px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--hairline);font-weight:500;color:var(--ink-2);white-space:nowrap}
.gal-nav{display:flex;gap:12px}
.gal-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(210,210,215,.64);color:rgba(0,0,0,.56);transition:all var(--t-press)}
.gal-btn:hover:not(:disabled){background:rgba(223,223,227,.9);color:rgba(0,0,0,.8)} .gal-btn:disabled{opacity:.42;cursor:default}
.gal-btn .ic{width:18px;height:18px}
.on-dark .gal-btn,.bg-night .gal-btn{background:rgba(66,66,69,.72);color:rgba(255,255,255,.8)}

/* ---------- related row header (articles + neighbourhood: one component) ---------- */
.rel-head{text-align:center;margin:0 0 36px} .rel-head .eyebrow{margin-bottom:10px} @media (min-width:1068px){.rel-head{margin-bottom:48px}}

/* ---------- FAQ accordion (house, neighbourhood and article pages) ---------- */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;font-size:19px;font-weight:600;letter-spacing:.012em}
@media (min-width:1068px){.faq summary{font-size:21px;padding:28px 0}}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{position:relative;width:22px;height:22px;flex:none;color:var(--ink-2)}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.75px;margin:-1px 0 0 -8px;background:currentColor;border-radius:1px;transition:transform var(--t-ui) var(--ease)}
.faq .pm::after{transform:rotate(90deg)} .faq details[open] .pm::after{transform:rotate(0)}
.faq .ans{padding:0 48px 26px 0;color:var(--ink-2);font-size:17px;max-width:46em}
.faq .ans strong{color:var(--ink);font-weight:600}

/* ---------- click-to-load map placeholder (nothing loads from OpenStreetMap until asked) ---------- */
.mapbox{position:relative;border-radius:var(--r-card);overflow:hidden;height:420px;background:#e9edf1}
@media (min-width:1068px){.mapbox{height:520px}}
.mapbox iframe{width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(0deg,rgba(255,255,255,.55) 1px,transparent 1px) 0 0/48px 48px,#e4e9ee}
.map-ph svg.roads{position:absolute;inset:0;width:100%;height:100%}
.map-area{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:rgba(29,29,31,.08);box-shadow:inset 0 0 0 2px rgba(29,29,31,.28)}
.map-ph .pill{position:relative;z-index:1}
.map-note{position:absolute;left:16px;bottom:14px;z-index:1;font-size:12px;color:var(--ink-2);background:rgba(255,255,255,.88);padding:5px 10px;border-radius:var(--r-pill)}
.loc-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:20px;font-size:14px;color:var(--ink-2)} .loc-row>span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}

/* ---------- contact (dark) ---------- */
.contact{position:relative;padding-block:120px;color:#fff;text-align:center;overflow:hidden;isolation:isolate;background:#05070d}
@media (min-width:1068px){.contact{padding-block:200px 180px}}
.contact-bg{position:absolute;inset:-8% 0;z-index:-2;width:100%;height:116%;object-fit:cover;transform:translateY(calc(var(--py,0) * 1px))}
@media (max-width:733px){.contact-bg{inset:0;height:100%;transform:none}}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 35% at 50% 30%,rgba(0,0,0,.5),rgba(0,0,0,0)),linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.84) 100%)}
.contact .t-lead{margin:18px auto 0;max-width:30em;color:var(--snow)}
.c-grid{display:grid;gap:14px;margin:52px auto 0;max-width:980px;text-align:left}
@media (min-width:734px){.c-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.c-card{display:flex;flex-direction:column;gap:6px;padding:26px 24px;border-radius:24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:saturate(160%) blur(24px);backdrop-filter:saturate(160%) blur(24px);transition:background-color var(--t-ui) var(--ease),transform var(--t-ui) var(--ease)}
.c-card:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.c-card .ic{width:28px;height:28px;margin-bottom:10px}
.c-card b{font-size:19px;font-weight:600} .c-card span{font-size:14px;color:rgba(255,255,255,.75)}
.c-card.primary{background:#fff;color:var(--ink);border-color:transparent} .c-card.primary:hover{background:#f5f5f7} .c-card.primary span{color:var(--ink-2)} .c-card.primary .go{color:var(--lantern)}
.c-card .go{margin-top:auto;padding-top:14px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px}

/* ---------- sticky booking pill ---------- */
.spill{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;transform:translate(-50%,24px);opacity:0;pointer-events:none;
  transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease-out);width:max-content;max-width:calc(100% - 24px)}
.spill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.spill-in{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:var(--r-pill);background:rgba(29,29,31,.78);color:#fff;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
.spill-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.spill-txt b{font-size:14px;font-weight:600;white-space:nowrap} .spill-txt span{font-size:11px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spill .pill{min-height:40px;padding:8px 18px;font-size:15px;white-space:nowrap}
.spill-line{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--line-green);color:#fff;flex:none}
.spill-line .ic{width:22px;height:22px}
@media (max-width:420px){.spill-txt span{display:none}.spill-in{padding-left:16px}}
.spill-txt b{overflow:hidden;text-overflow:ellipsis}
/* below 360px the name would slide under the button: the page itself says which house it is */
@media (max-width:359px){.spill-txt{display:none}.spill-in{padding-left:8px}}
@media (min-width:734px){.spill{display:none}}

/* ---------- footer (Apple-style, light grey) ---------- */
.foot{background:var(--canvas-alt);color:var(--ink-2);font-size:12px;line-height:1.5;letter-spacing:-.01em;padding:28px 0 32px}
.foot a{color:var(--ink-2)} .foot a:hover{color:var(--ink);text-decoration:underline}
.foot-notes{margin:0;padding:0 0 18px 0;border-bottom:1px solid var(--hairline);list-style:none;display:grid;gap:8px}
.foot-notes li{display:flex;gap:8px;align-items:baseline} .foot-notes .fn{font-size:10px;min-width:8px}
.foot-cols{display:grid;grid-template-columns:1fr;gap:0;padding:20px 0;border-bottom:1px solid var(--hairline)}
@media (min-width:734px){.foot-cols{grid-template-columns:repeat(4,1fr);gap:28px}}
.foot-cols h3{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 8px}
.foot-cols ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.foot-legal{padding:20px 0;border-bottom:1px solid var(--hairline);display:grid;gap:18px}
@media (min-width:1068px){.foot-legal{grid-template-columns:1fr 1.6fr;gap:40px}}
.foot-legal dl{margin:0;display:grid;gap:0}
.foot-legal dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:7px 0;border-bottom:1px dotted var(--hairline)}
.foot-legal dt{color:var(--ink-2)} .foot-legal dt i{font-style:normal;color:var(--ink-3)} .foot-legal dd{margin:0;color:var(--ink)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:16px}
.foot-bottom .langs{display:flex;gap:4px;flex-wrap:wrap} .foot-bottom .langs > *+*::before{content:"|";margin-right:4px;color:var(--hairline)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =====================================================================
 * 以下為正式站補充（示意稿沒有的部分）
 * ===================================================================== */

/* ---------- skip link / nav extras ---------- */
.skip-link{position:absolute;left:var(--gutter);top:-200px;z-index:100;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:14px}
.skip-link:focus{top:8px}
.menu-btn .ic-close{display:none}
.menu-btn[aria-expanded=true] .ic-open{display:none} .menu-btn[aria-expanded=true] .ic-close{display:block}
.menu-open{overflow:hidden}
.gnav .pill-sm.pill-line{background:var(--line-green);color:#fff} .gnav .pill-sm.pill-line:hover{background:#05b34c}
.mmenu a.big.cta{color:var(--lantern-glow)} .mmenu a.big.cta.line{color:var(--line-green)}

/* ---------- language hint (front-end only, dismissible, never blocks the page) ----------
 * 手機也放在導覽列下方（不放底部：會蓋住首頁開場的按鈕、和底部的預約膠囊疊在一起）。
 * position:absolute（不是 fixed）：只在頁面最上方出現、跟著頁面捲走，不會浮在內容上（例：寓所頁的幣別切換）；
 * 也不佔版面位置，JS 打開它時下面的內容不會被往下推（不造成版面位移）。
 * 寓所頁有黏頂的在地導覽列（.lnav，52px，z-index 48）：改放在它下方（.below-lnav），不被它蓋住。 */
.lang-hint{position:absolute;z-index:46;top:calc(var(--nav-h) + 8px);left:var(--gutter);right:var(--gutter);display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 18px;border-radius:var(--r-pill);background:rgba(29,29,31,.88);color:#fff;font-size:14px;line-height:1.3;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.28)}
@media (min-width:734px){.lang-hint{top:calc(var(--nav-h) + 10px);left:auto;max-width:440px}}
.lang-hint.below-lnav{top:calc(var(--nav-h) + 52px + 8px)}
.lang-hint[hidden],.lang-hint [hidden]{display:none}
.lang-hint-option{flex:1;min-width:0;margin:0}
.lang-hint a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.lang-hint button{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.lang-hint button .ic{width:14px;height:14px}

/* ---------- page head (light pages: listings, about, 404) ---------- */
.page-head{padding-block:72px 32px} @media (min-width:1068px){.page-head{padding-block:120px 48px}}
.page-head .t-lead{margin-top:18px}
.sec-tight{padding-block:48px} @media (min-width:1068px){.sec-tight{padding-block:72px}}
.sec-title{margin:0 0 24px}

/* ---------- text links & prose ---------- */
.text-link{color:var(--lantern);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.text-link:hover{text-decoration-thickness:2px}
.on-dark .text-link,.bg-night .text-link{color:var(--lantern-glow)}
.prose-sm{font-size:17px;color:var(--ink-2)} .prose-sm p{margin:0 0 1em}
html:lang(ja) .prose-sm,html:lang(zh-Hant) .prose-sm{line-height:1.8}

/* ---------- info table (about: company & registrations) ---------- */
.info-table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5}
.info-table caption{caption-side:top;text-align:left;font-size:14px;color:var(--ink-2);padding:0 0 12px}
.info-table th,.info-table td{padding:18px 0;border-top:1px solid var(--hairline);vertical-align:top;text-align:left}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:1px solid var(--hairline)}
.info-table th{width:44%;padding-right:24px;font-weight:600;color:var(--ink)}
.info-table td{color:var(--ink);overflow-wrap:anywhere}
.info-table .zh-name{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--ink-2)}
.info-table .pre{white-space:pre-line}
html:lang(ja) .info-table th,html:lang(zh-Hant) .info-table th{word-break:normal;line-break:strict}
@media (max-width:733px){
  .info-table,.info-table tbody,.info-table tr,.info-table th,.info-table td{display:block;width:auto}
  .info-table tr{padding:14px 0;border-top:1px solid var(--hairline)}
  .info-table tr:last-child{border-bottom:1px solid var(--hairline)}
  .info-table th,.info-table td,.info-table tr:last-child th,.info-table tr:last-child td{padding:0;border:0}
  .info-table th{padding-bottom:4px;font-size:14px}
  .info-table caption{display:block}
}

/* ---------- photo credits ---------- */
.credits{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.credits li{padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.credits b{display:block;color:var(--ink);font-weight:600}
.credits a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} .credits a:hover{color:var(--lantern)}

/* ---------- 404 ---------- */
.nf{min-height:calc(var(--vh) * 70);display:grid;place-items:center;text-align:center;padding-block:96px}
.nf .t-lead{margin:18px auto 0;max-width:30em}
.nf-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:36px}

/* ---------- contact cards: LINE / Email ---------- */
.c-card.line .ic{color:var(--line-green)}
.c-grid.two{max-width:660px} @media (min-width:734px){.c-grid.two{grid-template-columns:repeat(2,1fr)}}
.contact-note{margin:28px 0 0;font-size:14px;color:var(--snow-2)}

/* ---------- footer extras ---------- */
.foot-legal .legal-zh{font-style:normal;color:var(--ink-3)}
.foot-legal dd a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.foot-cols li.plain{color:var(--ink-2)}

/* ---------- lightbox (lightbox_controller.js adds these next to the staff-app Tailwind classes) ---------- */
.lightbox-overlay{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.9)}
.lightbox-close{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1}
.lightbox-image{max-height:80vh;max-width:100%;border-radius:18px;object-fit:contain}
.lightbox-caption{margin:12px 0 0;text-align:center;font-size:12px;color:rgba(255,255,255,.7)}

.foot-legal .legal-heading{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 4px}
.foot-legal p{margin:0}
@media (min-width:734px){.foot-cols{grid-template-columns:repeat(3,1fr)}}
.c-grid.one{max-width:340px} @media (min-width:734px){.c-grid.one{grid-template-columns:1fr}}
.faq .ans p{margin:0 0 .8em} .faq .ans p:last-child{margin-bottom:0}
.map-ph .pill .ic{width:18px;height:18px}
.loc-row .ic{width:16px;height:16px}
.pre{white-space:pre-line}
.sec-title .zh-name{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--ink-2)}


/* =====================================================================
 * 首頁（v3 home）補充：示意稿 _home.py 的 HOME_CSS ＋ 正式站需要的部分
 * ===================================================================== */
.hero-toggle .ic-pause{display:none} .hero-toggle[aria-pressed=true] .ic-play{display:none} .hero-toggle[aria-pressed=true] .ic-pause{display:block}
.hero-facts sup,.kf sup,.sec-head sup{font-size:.62em;line-height:0;vertical-align:.5em;margin-left:1px}
.hcard[hidden]{display:none}
.badges{position:absolute;right:14px;top:14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100% - 28px)}
.badges .badge{position:static}
.hcard-name-sub{font-size:14px;font-weight:400;color:var(--ink-2);letter-spacing:0}
.living-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px}
.living-foot p{margin:0;max-width:52em}
.mosaic figure img[data-lightbox-src]{cursor:zoom-in}
/* our own 1024x683 activity photo: a shorter tile on phones so it is never shown larger than its pixels */
@media (max-width:733px){.tile-photo.b-d{min-height:340px}}
.tile-photo>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tile-line .tile-icon{color:var(--line-green)}
.steps-cta{text-align:center;margin:56px 0 0}

/* =====================================================================
 * 寓所列表（/listings）：寓所卡見上方 house cards；這裡是寓所頁也在用的小標籤與空位標記
 * ===================================================================== */
.lhouse{display:flex;align-items:center;gap:16px;min-width:0}
.lhouse .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag-mini{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;background:var(--canvas-alt);color:var(--ink);white-space:nowrap}
.vac{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;background:var(--canvas-alt);color:var(--ink);white-space:nowrap}
.vac::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.vac.available::before{background:#248A3D} .vac.upcoming::before{background:#B25000}
.lnote{margin:22px auto 0;max-width:52em;text-align:center;font-size:13px;color:var(--ink-2)}
.lnote a{text-decoration:underline;text-underline-offset:2px}

/* =====================================================================
 * 寓所頁（v3 house）：示意稿 _house.py 的 HOUSE_CSS ＋ 房間列（_room_row）
 * ===================================================================== */
.hhero{padding-top:64px} @media (min-width:1068px){.hhero{padding-top:72px}} /* 64px：語言提示條（在地導覽列下方）出現時不蓋到第一行 */
.hhero .t-lead{margin-top:16px;max-width:30em}
.hhero .eyebrow .zh{font-weight:500}
/* key facts sit right under the lead (phones) / in the right-hand column (desktop): above the fold */
.hh-grid{display:grid;gap:36px} @media (min-width:1068px){.hh-grid{grid-template-columns:minmax(0,1fr) 470px;gap:64px;align-items:end}}
.kf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;margin:0}
.kf>div{border-top:1px solid var(--hairline);padding-top:14px;min-width:0}
.kf dd{margin:0}
.kf b{display:block;font-size:32px;line-height:1.05;font-weight:700;letter-spacing:-.01em;white-space:nowrap} @media (min-width:734px){.kf b{font-size:40px}}
@media (max-width:359px){.kf b{font-size:28px}}
.kf .lbl{display:block;font-size:14px;color:var(--ink);margin-top:6px} .kf .sub{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.hgal{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:44px;
  padding:0 max(var(--gutter),calc((100vw - var(--w-wide))/2)) 8px;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--w-wide))/2))}
.hgal::-webkit-scrollbar{display:none}
@media (min-width:1068px){.hgal{gap:16px;margin-top:64px}}
.hgal figure{margin:0;flex:none;scroll-snap-align:start}
.hgal img{height:min(calc(var(--vh) * 62),640px,calc((100vw - 2 * var(--gutter)) * .78));width:auto;max-width:none;border-radius:var(--r-thumb);background:#e8e8ed;object-fit:cover;cursor:zoom-in}
.hgal figcaption{font-size:12px;color:var(--ink-2);margin-top:10px;max-width:40ch}
.hgal-ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.hintro{padding-top:56px} @media (min-width:1068px){.hintro{padding-top:88px}}
.hintro .prose{font-size:19px;line-height:1.6;color:var(--ink);max-width:34em} html:lang(ja) .hintro .prose,html:lang(zh-Hant) .hintro .prose{max-width:30em;line-height:1.85}
.kf-list{display:grid;gap:0 48px;padding-block:56px 96px;margin-block:0} @media (min-width:734px){.kf-list{grid-template-columns:1fr 1fr}} @media (min-width:1068px){.kf-list{padding-block:88px 120px}}
.kf-list>div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #ececf0}
.kf-list dt{color:var(--ink-2);font-size:14px;flex:none} .kf-list dd{margin:0;text-align:right;font-size:15px;min-width:0}
.kf-list .t-micro{display:block;margin-top:2px}
.seg{display:inline-flex;flex-wrap:wrap;justify-content:center;padding:3px;border-radius:var(--r-pill);background:#e3e3e8;gap:2px}
.seg button{height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;color:var(--ink);transition:background-color var(--t-press)}
.seg button[aria-checked=true]{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12);font-weight:600}
.seg-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:-24px 0 36px}
.seg-row[hidden]{display:none}
.ptable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r-card);overflow:hidden}
.ptable th,.ptable td{padding:20px 22px;text-align:right;vertical-align:middle;border-bottom:1px solid #ececf0}
.ptable thead th{font-size:12px;font-weight:600;color:var(--ink-2);background:#fff}
html:lang(zh-Hant) .ptable thead th,html:lang(ja) .ptable thead th{word-break:keep-all}
.ptable th:first-child,.ptable td:first-child{text-align:left}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable .base{background:var(--canvas-alt)} .ptable thead .base{color:var(--ink)}
.ptable .base-tag{display:block;font-size:11px;font-weight:600;color:var(--ink-2);margin-top:2px}
.ptable .price{font-size:21px;font-weight:600;letter-spacing:.01em;white-space:nowrap} .ptable td:not(.base) .price{font-weight:500;color:var(--ink-2)}
.room{display:flex;align-items:center;gap:16px} .room .noimg{width:72px;height:56px;border-radius:12px;flex:none;background:#ececf0;display:grid;place-items:center;color:var(--ink-3)}
.room .noimg .ic{width:26px;height:26px}
.room b{display:block;font-size:17px;font-weight:600} .room .meta{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.room .state{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.slot{display:inline-flex;padding:1px 8px;border-radius:var(--r-pill);font-size:11px;box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink-2);white-space:nowrap}
.slot.open{color:var(--ink);box-shadow:inset 0 0 0 1px #248A3D}
@media (max-width:733px){
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%} .ptable{background:transparent} .ptable thead{display:none}
  .ptable tr{background:#fff;border-radius:22px;margin-bottom:14px;overflow:hidden}
  .ptable td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;text-align:right}
  .ptable td:first-child{display:block;padding:16px 18px 12px}
  .ptable td:not(:first-child)::before{content:attr(data-label);font-size:13px;color:var(--ink-2);text-align:left;padding-right:12px}
}
.pnote{margin:22px auto 0;max-width:46em;text-align:center;font-size:14px;color:var(--ink-2)}
.pnote a{color:var(--lantern);text-decoration:underline;text-underline-offset:2px}
.amen{display:grid;gap:40px} @media (min-width:734px){.amen{grid-template-columns:repeat(3,1fr)}}
.amen h3{font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.amen ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.amen li{display:flex;align-items:center;gap:14px;font-size:17px} .amen .ic{width:24px;height:24px;color:var(--ink-2)}
/* neighbourhood: full-bleed photo with the headline on its darkened bottom; facts on solid black below */
.area{background:#000;color:var(--snow);padding-bottom:104px} @media (min-width:1068px){.area{padding-bottom:150px}}
.area-media{position:relative;height:min(calc(var(--vh) * 78),760px);min-height:520px;overflow:hidden;isolation:isolate;margin:0}
.area-media img.area-img{position:absolute;inset:-10% 0;z-index:-2;width:100%;height:120%;object-fit:cover;filter:saturate(.92) contrast(1.04);transform:translateY(calc(var(--py,0) * 1px))}
@media (max-width:733px){.area-media img.area-img{inset:0;height:100%;transform:none}}
.area-media::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.8) 24%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.04) 100%)}
.area-cap{position:absolute;left:0;right:0;bottom:8px}
.area-grid{display:grid;gap:40px;margin-top:40px} @media (min-width:1068px){.area-grid{grid-template-columns:1fr 440px;gap:64px;margin-top:48px}}
.area-grid .t-body{color:var(--snow-2)} .area-grid .t-body strong{color:var(--snow);font-weight:600}
.area-grid .pre{white-space:pre-line}
/* 320px：格子欄位不被內容撐寬（min-width:auto 會讓長的路線名「Songshan-Xindian Line」把整欄推出畫面）；路線名可以換行，步行分鐘不換行 */
.area-grid>*{min-width:0} .poi b{min-width:0} .poi b span{white-space:normal}
.poi{list-style:none;margin:0;padding:8px 22px;border-radius:var(--r-card);background:var(--night-alt);display:grid}
.poi li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--hairline-dark)} .poi li:last-child{border-bottom:0}
.poi .ic{width:22px;height:22px;color:var(--snow-2)} .poi b{font-weight:500;flex:1;font-size:15px} .poi span{font-size:14px;color:var(--snow-2);white-space:nowrap;text-align:right}
.poi-note{font-size:12px;line-height:1.5;color:var(--snow-3);margin:12px 4px 0}
.photo-tag{display:inline-flex;margin-top:12px;padding:2px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;color:var(--snow-2);box-shadow:inset 0 0 0 1px var(--hairline-dark)}
.updated{display:block;margin-top:28px;text-align:center;font-size:12px;color:var(--ink-2)}
.house-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-top:36px}
.house-ctas .more{color:#fff}
/* <picture> 只是換圖來源的容器：不產生自己的盒子，裡面的 <img> 直接依外層尺寸排（卡片、bento、相簿） */
picture{display:contents}

/* ==========================================================================
 * JON-43：「台北生活」文章（DESIGN.md §12，示意稿 _articles.py ART_CSS）與周邊生活頁（§13，_neighborhood.py NB_CSS）
 * ========================================================================== */
/* ---------- Living in Taipei: hub + articles ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 22px;padding:0;list-style:none;font-size:12px;line-height:1.4;color:var(--ink-2);letter-spacing:0}
.crumbs a{color:var(--ink-2)} .crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.crumbs li{display:inline-flex;align-items:center;gap:6px} .crumbs li+li::before{content:"›";color:var(--ink-3)}
.nolink{border-bottom:1px dashed var(--ink-3);cursor:help}
/* article head */
.art-head{padding-top:40px} @media (min-width:1068px){.art-head{padding-top:72px}}
.art-title{font-size:32px;line-height:1.125;font-weight:700;letter-spacing:.004em;margin:0;text-wrap:balance}
@media (min-width:734px){.art-title{font-size:40px;line-height:1.1}}
@media (min-width:1068px){.art-title{font-size:48px;line-height:1.0834;letter-spacing:-.003em}}
html:lang(zh-Hant) .art-title{letter-spacing:.02em;line-height:1.3;word-break:normal;line-break:strict;overflow-wrap:normal}
.art-dek{margin:20px 0 0;font-size:19px;line-height:1.5;font-weight:400;color:var(--ink-2)}
@media (min-width:734px){.art-dek{font-size:21px;line-height:1.48}}
html:lang(zh-Hant) .art-dek{line-height:1.75;letter-spacing:.02em;word-break:normal;line-break:strict}
.art-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--hairline);font-size:14px;color:var(--ink-2)}
.art-by b{color:var(--ink);font-weight:600} .art-by .ai{display:inline-flex;align-items:center;gap:6px}
.art-by .ai .smp{margin:0}
.art-by a{color:var(--lantern);text-decoration:underline;text-underline-offset:2px}
.disclose{display:flex;gap:12px;align-items:flex-start;margin:24px 0 0;padding:16px 18px;border-radius:18px;background:var(--canvas-alt);font-size:14px;line-height:1.6;color:var(--ink-2)}
.disclose .ic{width:20px;height:20px;color:var(--ink);margin-top:2px}
.disclose p{margin:0} .disclose strong{color:var(--ink);font-weight:600}
html:lang(zh-Hant) .disclose{line-height:1.75;letter-spacing:.02em;word-break:normal;line-break:strict}
/* hero */
.art-hero{margin:40px auto 0} @media (min-width:1068px){.art-hero{margin-top:56px}}
.art-hero img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#e8e8ed;filter:saturate(.92) contrast(1.04)}
@media (min-width:734px){.art-hero img{aspect-ratio:16/9;border-radius:var(--r-card)}}
.art-hero figcaption,.art-trip-cap{font-size:12px;line-height:1.4;color:var(--ink-2);margin-top:10px}
.art-trip{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scroll-padding-inline:var(--gutter)}
.art-trip::-webkit-scrollbar{display:none}
@media (min-width:734px){.art-trip{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:16px}}
.art-trip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#e8e8ed;scroll-snap-align:start}
/* body + sticky table of contents */
.art-grid{width:min(100% - 2 * var(--gutter), var(--w-text));margin:48px auto 0}
@media (min-width:1068px){.art-grid{width:min(100% - 2 * var(--gutter), var(--w-wide));display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,692px) minmax(0,1fr);column-gap:40px;margin-top:72px}}
.art-toc{display:none}
@media (min-width:1068px){.art-toc{display:block;grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:220px;position:sticky;top:calc(var(--nav-h) + 40px);align-self:start;
  max-height:calc(100vh - var(--nav-h) - 80px);overflow:auto}}
.art-toc p{font-size:12px;font-weight:600;color:var(--ink-2);margin:0 0 10px;letter-spacing:0}
.art-toc ol,.toc-m ol{list-style:none;margin:0;padding:0}
.art-toc ol{border-left:1px solid var(--hairline)}
.art-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:13px;line-height:1.4;color:var(--ink-2);transition:color var(--t-press)}
.art-toc a:hover{color:var(--ink)} .art-toc a[aria-current=true]{color:var(--ink);border-left-color:var(--ink);font-weight:600}
html:lang(zh-Hant) .art-toc a{letter-spacing:.02em}
.toc-m{margin:0 0 36px;border-radius:18px;background:var(--canvas-alt);padding:0 18px}
.toc-m summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;font-size:15px;font-weight:600;cursor:pointer}
.toc-m summary::-webkit-details-marker{display:none} .toc-m summary .ic{width:16px;height:16px;transition:transform var(--t-ui) var(--ease)}
.toc-m[open] summary .ic{transform:rotate(180deg)}
.toc-m ol{padding:0 0 14px} .toc-m a{display:block;padding:8px 0;font-size:15px;color:var(--ink);border-top:1px solid #e3e3e8}
/* .prose a / .prose ol come later and are as specific: pin the mobile TOC to ink, no numbers, no underline */
.prose .toc-m ol.toc-list{list-style:none;margin:0;padding:0 0 14px} .prose .toc-m li{margin:0}
.prose .toc-m a{color:var(--ink);text-decoration:none} .prose .toc-m a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline)}
html:lang(zh-Hant) :is(.art-toc,.toc-m) a{word-break:normal;line-break:strict}
@media (min-width:1068px){.toc-m{display:none}}
.prose{grid-column:2;grid-row:1;min-width:0;font-size:17px;line-height:1.65;color:var(--ink)}
@media (min-width:1068px){.prose{font-size:19px;line-height:1.6}}
html:lang(zh-Hant) .prose{line-height:1.85;letter-spacing:.02em;word-break:normal;line-break:strict;overflow-wrap:normal}
@media (min-width:1068px){html:lang(zh-Hant) .prose{font-size:18px}}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:28px;line-height:1.2;font-weight:700;letter-spacing:.004em;margin:2.1em 0 .7em;scroll-margin-top:24px;text-wrap:balance}
.prose>h2:first-child,.toc-m+h2,.prose>.lede+h2{margin-top:0}
@media (min-width:1068px){.prose h2{font-size:32px}}
html:lang(zh-Hant) .prose h2{letter-spacing:.02em;line-height:1.35}
.prose h3{font-size:21px;line-height:1.3;font-weight:600;margin:1.6em 0 .5em}
.prose a{color:var(--lantern);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:600}
.prose ul,.prose ol:not([class]){margin:0 0 1.2em;padding-left:1.3em} .prose ul{list-style:disc} .prose ol:not([class]){list-style:decimal}
.prose li{margin:.45em 0} .prose li::marker{color:var(--ink-3)}
.prose p,.prose li{text-wrap:pretty}
.prose blockquote{margin:1.5em 0;padding:2px 0 2px 20px;border-left:3px solid var(--hairline);color:var(--ink-2)}
.prose .lede{font-size:1.06em}
.cite{font-size:.68em;line-height:0;font-weight:600;margin-left:1px;letter-spacing:0} .cite a{text-decoration:none!important}
.fnref{font-size:.68em;line-height:0;font-weight:600;letter-spacing:0} .fnref a{text-decoration:none!important}
.osm{font-size:13px;color:var(--ink-2)} .osm a{color:var(--ink-2)!important}
/* tables: scroll inside their own box on small screens */
.tbl{margin:28px 0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:18px;border:1px solid #e3e3e8;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/48px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/48px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),transparent) left/18px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent) right/18px 100% no-repeat scroll,#fff}
.tbl:focus-visible{outline:3px solid var(--lantern);outline-offset:2px}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;letter-spacing:0}
.tbl table.cols-4{min-width:600px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid #ececf0}
.tbl thead th{border-top:0;background:var(--canvas-alt);font-size:12px;line-height:1.35;font-weight:600;color:var(--ink-2)}
.tbl tbody th{font-weight:600}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .tbl .nw,html:lang(zh-Hant) .tbl .cols-4 tbody th{white-space:nowrap}
.tbl .cols-4 td:not(.n){min-width:12em}
.tbl tbody th{min-width:8em} .tbl .n .sub{white-space:normal}
@media (max-width:733px){.tbl th,.tbl td{padding:12px}}
/* narrow phones: the 3-column cost table fits 288px without scrolling */
@media (max-width:359px){.tbl tbody th{min-width:0}.tbl th,.tbl td{padding:10px}.tbl table{font-size:14px}}
/* CJK table headers never split a word (房型與基本|價); breaks only at spaces, punctuation and around number+unit */
html:lang(zh-Hant) .tbl th{word-break:keep-all}
/* house list (why-seal): one room type per line; under 734px one card per house */
.prose .rooms{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.prose .rooms li{display:flex;justify-content:space-between;gap:16px;margin:0} .rooms b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.houses .dist-m{display:none}
@media (min-width:734px){.houses .rooms{max-width:320px}}
@media (max-width:733px){
  .tbl-houses{overflow:visible;border:0;border-radius:0;background:none}
  .houses,.houses tbody,.houses tr,.houses th,.houses td{display:block;width:100%} .houses thead{display:none}
  .houses tr{border:1px solid #e3e3e8;border-radius:18px;padding:16px 18px;margin:0 0 12px;background:#fff}
  .houses tbody th,.houses td{padding:0;border:0;min-width:0}
  .houses tbody th{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:17px;margin-bottom:10px}
  .houses .dist-m{display:inline;font-size:13px;font-weight:400;color:var(--ink-2);white-space:nowrap}
  .houses td.dist{display:none}
  .houses .rooms li{padding:7px 0;border-top:1px solid #ececf0} .houses .rooms li:first-child{border-top:0}
}
.tbl tr.sum th,.tbl tr.sum td{background:var(--canvas-alt);font-weight:700;border-top:1px solid var(--hairline)}
.tbl .sub{display:block;font-size:12px;font-weight:400;color:var(--ink-2)}
.tbl .base{background:var(--canvas-alt);font-weight:700} .tbl thead .base{color:var(--ink)}
.tiers tbody tr:first-child th,.tiers tbody tr:first-child td{background:var(--canvas-alt);font-weight:700}
html:lang(zh-Hant) .tbl table{letter-spacing:.01em;line-height:1.6}
.tbl-note{font-size:14px;line-height:1.6;color:var(--ink-2)}
/* itinerary timeline */
.tl{list-style:none;margin:32px 0 36px;padding:0}
.tl li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;margin:0}
@media (min-width:734px){.tl li{grid-template-columns:88px minmax(0,1fr);column-gap:22px}}
.tl-when{margin:0!important;text-align:right;padding-top:1px}
.tl-period{display:block;font-size:12px;line-height:1.3;font-weight:600;color:var(--ink-2);letter-spacing:0}
.tl-clock{display:block;font-size:21px;line-height:1.2;font-weight:600;letter-spacing:0;color:var(--ink)}
.tl-body{position:relative;padding:0 0 30px 22px;border-left:2px solid var(--hairline)}
.tl li:last-child .tl-body{border-left-color:transparent;padding-bottom:4px}
.tl-body::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--ink)}
.tl-title{font-size:19px!important;line-height:1.35!important;font-weight:600;margin:0 0 6px!important;letter-spacing:.01em}
html:lang(zh-Hant) .tl-title{letter-spacing:.02em}
.tl-body p{margin:0}
@media (max-width:733px){
  .tl li{display:block}
  .tl-when{position:relative;display:flex;align-items:baseline;gap:8px;text-align:left;padding:0 0 4px 22px;border-left:2px solid var(--hairline)}
  .tl-when::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--ink)}
  .tl li:first-child .tl-when{border-left-color:transparent}
  .tl-clock{font-size:19px} .tl-period{font-size:13px}
  .tl-body::before{display:none} .tl-body{padding-bottom:26px}
}
/* inline photos in the timeline (stock, registered in _stock_articles.json) */
.tl-figs{display:grid;gap:12px;margin:18px 0 4px} @media (min-width:560px){.tl-figs.two{grid-template-columns:1fr 1fr}}
.tl-figs figure{margin:0} @media (min-width:560px){.tl-figs:not(.two) figure{max-width:440px}}
.tl-figs img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#e8e8ed;filter:saturate(.92) contrast(1.04)}
.tl-figs figcaption{font-size:12px;line-height:1.4;color:var(--ink-2);margin-top:8px;letter-spacing:0}
/* callout + Q&A */
.callout{margin:28px 0;padding:20px 22px;border-radius:22px;background:var(--canvas-alt)}
.callout-label{margin:0 0 6px!important;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:0}
.callout p{margin:0} .callout p+p{margin-top:.8em}
.callout .acts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px}
.callout .acts a{display:inline-flex;align-items:center;gap:2px;text-decoration:none} .callout .acts a:hover{text-decoration:underline}
.callout .acts .ic{width:.8em;height:.8em}
/* article Q&A uses the shared FAQ accordion (_ui.py), sized for the reading column; no FAQPage markup */
.prose .faq{margin:8px 0 1.6em} .prose .faq summary{font-size:19px;line-height:1.4;padding:20px 0}
@media (min-width:1068px){.prose .faq summary{font-size:21px;padding:24px 0}}
.prose .faq .ans{margin:0;padding:0 0 22px;font-size:inherit} @media (max-width:733px){.prose .faq .ans{padding-right:0}}
html:lang(zh-Hant) .prose .faq summary{letter-spacing:.02em}
/* sources + notes */
.srcs{margin-top:64px;padding-top:28px;border-top:1px solid var(--hairline)}
.srcs h2{font-size:21px!important;margin:0 0 12px!important;line-height:1.3}
.srcs ol{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.55;color:var(--ink-2);letter-spacing:0}
.srcs li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 4px;padding:11px 0;border-top:1px solid #ececf0;margin:0}
.srcs li:first-child{border-top:0}
.srcs .no{color:var(--ink-2);font-variant-numeric:tabular-nums}
.srcs .t{display:block;color:var(--ink)}
/* the source title is the link (ink, hairline underline; lantern on hover); the address is a grey, one-line hint */
.prose .srcs a.st{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline);text-decoration-thickness:1px;text-underline-offset:3px}
/* guard: a source name that is one long unbroken string (URL-like) must wrap instead of widening the page */
.srcs a.st{overflow-wrap:anywhere}
.prose .srcs a.st:hover{color:var(--lantern);text-decoration-color:currentColor}
.srcs .host{display:block;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* a bare URL in running text (footnotes): the only place where breaking anywhere is allowed */
.prose a.u{overflow-wrap:anywhere;word-break:normal}
.srcs .d{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.srcs .d .smp{margin-inline-start:8px}
.srcs.fns{margin-top:32px}
.author{display:flex;gap:16px;align-items:flex-start;margin-top:40px;padding:20px 22px;border-radius:22px;background:var(--canvas-alt);font-size:14px;line-height:1.55;color:var(--ink-2)}
.author b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.author .seal{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--ink);flex:none} .author .seal .ic{width:22px;height:22px}
/* related row (header: shared .rel-head in _ui.py) */
.rel{margin-top:88px;padding-block:64px 80px} @media (min-width:1068px){.rel{margin-top:120px;padding-block:88px 112px}}
.rel-grid{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 8px;scroll-padding-inline:var(--gutter)}
.rel-grid::-webkit-scrollbar{display:none}
@media (min-width:734px){.rel-grid{grid-auto-columns:46%}}
@media (min-width:1068px){.rel-grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:24px}}
/* story cards (hub grid + related) */
.scard{min-width:0;scroll-snap-align:start}
.scard>a,.scard>div{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r-card);overflow:hidden;
  transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.scard>a:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.09)}
.scard-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e8e8ed}
.scard-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04);transition:transform 1s var(--ease)}
.scard>a:hover .scard-media img{transform:scale(1.04)}
.scard.is-draft .scard-media img{filter:saturate(.55) contrast(.98)}
.scard-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px 22px 24px}
.scard-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:12px;line-height:1.4;font-weight:600;color:var(--ink-2);letter-spacing:0}
/* .draft-tag, .mini and the language-button fix are shared: _ui.py */
.scard-title{font-size:21px;line-height:1.24;font-weight:600;margin:0;letter-spacing:.011em;text-wrap:pretty}
html:lang(zh-Hant) .scard-title{font-size:19px;line-height:1.45;letter-spacing:.02em}
.scard-sum{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html:lang(zh-Hant) .scard-sum{line-height:1.65;word-break:normal;line-break:strict}
.scard-foot{margin:auto 0 0;padding-top:6px;font-size:12px;color:var(--ink-2)}
/* hub */
.hub{padding-bottom:104px} @media (min-width:1068px){.hub{padding-bottom:140px}}
.hub-head{padding-block:48px 40px} @media (min-width:1068px){.hub-head{padding-block:96px 56px}}
.hub-head .t-lead{margin-top:18px;max-width:34em} html:lang(zh-Hant) .hub-head .t-lead{max-width:28em}
.feat>a{display:grid;background:#fff;border-radius:var(--r-card);overflow:hidden;transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.feat>a:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.09)}
@media (min-width:1068px){.feat>a{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.feat-media{aspect-ratio:16/10;overflow:hidden;background:#e8e8ed} @media (min-width:1068px){.feat-media{aspect-ratio:auto;min-height:440px}}
.feat-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04);transition:transform 1s var(--ease)}
.feat>a:hover .feat-media img{transform:scale(1.03)}
.feat-body{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px 24px 30px} @media (min-width:1068px){.feat-body{padding:48px 44px}}
.feat-title{font-size:28px;line-height:1.18;font-weight:700;margin:0;letter-spacing:.007em;text-wrap:balance}
@media (min-width:1068px){.feat-title{font-size:36px;line-height:1.14}}
html:lang(zh-Hant) .feat-title{letter-spacing:.02em;line-height:1.35;word-break:normal;line-break:strict}
.feat-sum{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)} html:lang(zh-Hant) .feat-sum{line-height:1.75;word-break:normal;line-break:strict}
.feat .more{margin-top:8px}
.hub-list{margin-top:72px} @media (min-width:1068px){.hub-list{margin-top:104px}}
.hub-list h2{margin:0 0 20px}
.hub .chips{justify-content:flex-start;margin:0 0 28px}
.chip .cnt{margin-left:6px;opacity:.6;font-variant-numeric:tabular-nums}
.sgrid{display:grid;gap:20px} @media (min-width:734px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1068px){.sgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (max-width:733px){
  .sgrid{gap:12px}
  .sgrid .scard>a,.sgrid .scard>div{flex-direction:row;border-radius:22px}
  .sgrid .scard-media{flex:none;width:112px;aspect-ratio:auto;min-height:140px}
  .sgrid .scard-body{padding:14px 16px 16px;gap:5px}
  .sgrid .scard-title{font-size:17px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  html:lang(zh-Hant) .sgrid .scard-title{font-size:16px;line-height:1.5}
  .sgrid .scard-sum{font-size:13px}
  .sgrid .scard-top{font-size:11px;gap:4px 8px}
  .sgrid .draft-tag{left:8px;top:8px;padding:3px 8px;font-size:11px}
}
.hub-note{margin:28px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)} .hub-note .smp{margin-inline-start:0;margin-inline-end:6px}
.hub-anchor{display:block;position:relative;top:calc(-1 * (var(--nav-h) + 24px));visibility:hidden;height:0}
.sgrid .scard[hidden]{display:none}
/* coming soon: drafts, separate from the live stories */
.soon{margin-top:64px;padding-top:32px;border-top:1px solid var(--hairline)} @media (min-width:1068px){.soon{margin-top:88px}}
.soon h3{margin:0 0 6px} .soon-note{margin:0 0 24px;font-size:14px;color:var(--ink-2)}
.soon-grid{display:grid;gap:12px} @media (min-width:734px){.soon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1068px){.soon-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.soon .scard>div{flex-direction:row;border-radius:18px;background:rgba(255,255,255,.7)}
.soon .scard-media{flex:none;width:88px;aspect-ratio:auto;min-height:100%}
.soon .scard-body{padding:12px 14px 14px;gap:4px}
.soon .scard-title{font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html:lang(zh-Hant) .soon .scard-title{font-size:15px;line-height:1.5}
.soon .scard-top{font-size:11px} .soon .scard-sum{display:none} .soon .scard-foot{padding-top:2px}
.soon .draft-tag{left:6px;top:6px;padding:2px 7px;font-size:10px}
/* closing band */
.band{padding-block:104px} @media (min-width:1068px){.band{padding-block:160px 150px}}
.band .hero-ctas{margin-top:36px}
.band sup{font-size:.62em;line-height:0;vertical-align:.5em;margin-left:1px} .band sup a.fn-ref{color:inherit;text-decoration:none}
.band sup a.fn-ref:hover{text-decoration:underline;text-underline-offset:2px}
@media (max-width:479px){.band .hero-ctas{flex-direction:column;align-items:center}.band .hero-ctas .pill{width:min(100%,280px)}}
/* local nav follows the section underneath (dark hero -> light sections). Both navs sit over the hero photo (it is
   pulled up under them) and carry .86 charcoal glass: AA for snow-2 text even over a white backdrop (≥ 4.5:1). */
.lnav{transition:background-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease)}
.lnav[data-tone=dark]{background:rgba(22,22,23,.86);color:var(--snow);border-bottom-color:rgba(255,255,255,.08)}
.gnav.static[data-tone=dark]{--nav-bg:rgba(22,22,23,.86);--nav-line:rgba(255,255,255,.08)}
.lnav[data-tone=dark] .lnav-links{color:var(--snow-2)} .lnav[data-tone=dark] .lnav-links a:hover{color:#fff}
.lnav[data-tone=dark] .lnav-sub{color:var(--snow-2)} .lnav[data-tone=dark] :focus-visible{outline-color:var(--lantern-glow)}
.lnav-crumb{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.lnav-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.lnav-sub{font-size:14px;font-weight:500;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.lnav-sub .sep{margin-right:6px;font-weight:400}
.lnav-links a[aria-current]{color:inherit}
html:lang(zh-Hant) main{line-break:strict}

/* hero: full-bleed lane photo, headline on its darkened bottom */
.nbhero{--navs:calc(var(--nav-h) + 52px);position:relative;margin-top:calc(-1 * var(--navs));
  height:calc(var(--vh) * 100);min-height:calc(540px + var(--navs));max-height:calc(980px + var(--navs));
  color:#fff;background:#0b0d12;overflow:hidden;isolation:isolate}
.nbhero picture{position:absolute;inset:0;z-index:-2}
.nbhero img{width:100%;height:100%;object-fit:cover;object-position:44% 50%;filter:saturate(.92) contrast(1.04)}
.motion .nbhero img{animation:nbzoom 2.4s var(--ease-out) both}
@keyframes nbzoom{from{transform:scale(1.06)}to{transform:none}}
.nbhero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,.42) var(--navs),rgba(0,0,0,0) calc(var(--navs) + 180px)),
    linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 26%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.06) 78%,rgba(0,0,0,0) 100%)}
.nbhero-copy{position:absolute;left:0;right:0;bottom:0;padding-bottom:44px}
@media (min-width:1068px){.nbhero-copy{padding-bottom:76px}}
.nbhero .eyebrow{color:rgba(255,255,255,.86)}
.nbhero .t-lead{margin-top:16px;max-width:30em;color:rgba(255,255,255,.88)}
.nbhero-cap{background:#000;color:var(--snow-3);font-size:12px;line-height:1.5;letter-spacing:0}
.nbhero-cap .wrap-wide{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:14px 0 18px}
.nbhero-cap b{color:var(--snow-2);font-weight:500}

/* at a glance: four big numbers */
.g4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px;margin:0}
@media (min-width:1068px){.g4{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}}
.g4>div{border-top:1px solid var(--hairline);padding-top:18px;min-width:0}
.g4 dd{margin:0}
.g4 .big{display:block;font-size:48px;line-height:1;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
@media (min-width:734px){.g4 .big{font-size:64px}} @media (min-width:1068px){.g4 .big{font-size:72px}}
.g4 .big small{font-size:.42em;font-weight:600;letter-spacing:0;margin-left:4px}
html:lang(zh-Hant) .g4 .big{letter-spacing:0}
.g4 dt{display:block;font-size:17px;line-height:1.35;font-weight:600;color:var(--ink);margin-top:14px}
.g4 .sub{display:block;font-size:14px;color:var(--ink-2);margin-top:4px}

/* walking rings (dark) */
.rg-grid{display:grid;gap:44px;align-items:center}
@media (min-width:1068px){.rg-grid{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:80px}}
.rg-grid .t-lead{margin-top:18px}
.viz{--s1:#3987e5;--s2:#c98500;--s3:#199e70;--surface:#000}
.rg-fig{position:relative;margin:0 auto;width:100%;max-width:560px}
.rg-fig svg{display:block;width:100%;height:auto;overflow:visible}
.rg-out{fill:#0b0b0c;stroke:var(--hairline-dark);stroke-width:1}
.rg{fill:none;stroke:#5a5a5e;stroke-width:1;stroke-dasharray:3 4}
.s1{fill:var(--s1)} .s2{fill:var(--s2)} .s3{fill:var(--s3)}
.rg-fig .s1,.rg-fig .s2,.rg-fig .s3{stroke:var(--surface);stroke-width:1.4}
.rg-fig .lm,.legend .lm{fill:none;stroke:var(--snow);stroke-width:1.5}
.hit{fill:transparent} .mk{cursor:pointer} .mk:hover .s1,.mk:hover .s2,.mk:hover .s3{stroke:#fff}
.ctr-a{fill:rgba(245,245,247,.06);stroke:var(--snow);stroke-width:1;stroke-dasharray:2 2} .ctr{fill:var(--snow)}
.north path{fill:var(--snow-2)}
.rg-ring,.rg-tag,.rg-ctr,.rg-n{position:absolute;pointer-events:none;font-size:12px;line-height:1.2;white-space:nowrap;letter-spacing:0}
.rg-ring{transform:translate(-50%,-50%);padding:1px 7px;border-radius:var(--r-pill);background:#000;color:var(--snow-2);font-variant-numeric:tabular-nums}
.rg-tag{color:var(--snow);font-weight:600;text-shadow:0 0 3px #000,0 0 3px #000,0 0 6px #000}
.rg-tag.r{transform:translate(8px,-50%)} .rg-tag.l{transform:translate(calc(-100% - 8px),-50%)} .rg-tag.t{transform:translate(-50%,calc(-100% - 7px))}
.rg-ctr{transform:translate(calc(-100% - 6px),-50%);padding:1px 7px;border-radius:var(--r-pill);background:rgba(0,0,0,.82);color:var(--snow-2)}
.rg-n{transform:translate(-50%,0);color:var(--snow-2);font-weight:600}

.tip{position:absolute;z-index:2;left:0;top:0;pointer-events:none;padding:6px 10px;border-radius:10px;background:rgba(245,245,247,.97);color:var(--ink);
  font-size:13px;line-height:1.3;white-space:nowrap;transform:translate(-50%,calc(-100% - 10px));opacity:0;transition:opacity .15s var(--ease);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.tip.on{opacity:1}
.legend{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;max-width:420px}
.legend li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--snow)}
.legend svg{width:14px;height:14px;flex:none} .legend .n{margin-left:auto;color:var(--snow-2);font-variant-numeric:tabular-nums}
.rg-note{font-size:12px;line-height:1.5;color:var(--snow-3);margin:20px auto 0;max-width:560px}
.rg-note a{color:var(--snow-2);text-decoration:underline;text-underline-offset:2px}

/* map placeholder + .loc-row are shared (_ui.py); here a shorter box and a note that may wrap */
.mapbox{height:380px} @media (min-width:1068px){.mapbox{height:520px}}
.map-note{right:16px;width:max-content;max-width:calc(100% - 32px);border-radius:12px}
.osm-c{font-size:12px;color:var(--ink-2);margin-top:8px} .osm-c a,.method a{color:var(--lantern);text-decoration:underline;text-underline-offset:2px}

/* nearby, by category */
.chipnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) 16px;padding:2px var(--gutter) 6px}
.chipnav::-webkit-scrollbar{display:none}
@media (min-width:734px){.chipnav{flex-wrap:wrap;justify-content:center;overflow:visible;margin:0 0 24px;padding:0}}
.chipnav a{display:inline-flex;align-items:center;flex:none}
.cat{display:grid;gap:22px;padding:44px 0;border-top:1px solid var(--hairline);scroll-margin-top:72px}
@media (min-width:1068px){.cat{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:72px;padding:64px 0}
  .cat>div:first-child{position:sticky;top:calc(52px + 32px);align-self:start}}
.cat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--canvas-alt);color:var(--ink);margin-bottom:18px}
.cat-ic .ic{width:22px;height:22px}
.cat-sum{margin:12px 0 0;color:var(--ink-2);font-size:17px;line-height:1.5} .cat-sum strong{color:var(--ink);font-weight:600}
html:lang(zh-Hant) .cat-sum{line-height:1.75}
.pl{width:100%;border-collapse:collapse;table-layout:fixed} .pl col.wc{width:8.5em} html:lang(zh-Hant) .pl col.wc{width:7.5em}
.more-rows summary{list-style:none;display:inline-flex;align-items:center;gap:4px;padding:14px 0 2px;color:var(--lantern);font-size:15px;cursor:pointer}
.more-rows summary::-webkit-details-marker{display:none} .more-rows summary .ic{width:.85em;height:.85em;transition:transform var(--t-ui) var(--ease)}
.more-rows summary:hover{text-decoration:underline;text-underline-offset:3px} .more-rows[open] summary .ic{transform:rotate(180deg)}
.more-rows[open] summary{display:none} .more-rows .pl thead{display:none}
.pl th{font-size:12px;font-weight:600;color:var(--ink-2);text-align:right;padding:0 0 10px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.pl th:first-child{text-align:left}
.pl td{padding:15px 0;border-bottom:1px solid #ececf0;vertical-align:top}
.pl td:first-child{padding-right:16px}
.pl td:last-child{text-align:right;white-space:nowrap}
.pl b{display:block;font-size:17px;line-height:1.35;font-weight:500;color:var(--ink)}
.pl small{display:block;font-size:13px;line-height:1.45;color:var(--ink-2);margin-top:3px}
.pl .w{display:block;font-size:17px;font-weight:600;color:var(--ink)} .pl .dd{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.pl .w.na{color:var(--ink-2);font-weight:500}
/* universities: "3.1 km · by bus or MRT" may wrap inside the 7.5em column instead of sticking out of the table */
.pl td:last-child .dd.tr{white-space:normal}
.cat-note{font-size:12px;line-height:1.5;color:var(--ink-2);margin:12px 0 0}

/* FAQ accordion is shared (_ui.py); answers here have no paragraph margin */
.faq .ans{margin:0}
@media (max-width:733px){.faq .ans{padding-right:0}}
html:lang(zh-Hant) .faq summary{line-break:strict}

/* keep reading: two cards (own photo never shown wider than half its pixel width) */
.next{display:grid;gap:20px} @media (min-width:1068px){.next{grid-template-columns:1fr 1fr;gap:24px}}
.ncard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-card);overflow:hidden;transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.ncard:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.09)}
.ncard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e8e8ed;width:100%}
.ncard-media img{width:100%;height:100%;object-fit:cover}
.ncard-tag{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.9);color:var(--ink);font-size:12px;font-weight:600}
.ncard-body{display:flex;flex-direction:column;gap:6px;padding:24px 26px 28px;flex:1;min-width:0}
.ncard-body .eyebrow{margin:0}
.ncard-body p{margin:0;color:var(--ink-2)} .ncard-meta{font-size:14px}
.ncard .more{margin-top:auto;padding-top:14px;font-size:17px}
@media (min-width:560px){.ncard{flex-direction:row}.ncard-media{flex:0 0 260px;aspect-ratio:auto;min-height:280px}}
@media (min-width:1068px){.ncard-media{flex-basis:280px;min-height:300px}}

/* how we made this page */
.method{max-width:820px}
.method p{color:var(--ink-2);font-size:14px;line-height:1.6;margin:12px 0 0}
html:lang(zh-Hant) .method p{line-height:1.8}
.method .t-h3{margin:0}

/* ---------- JON-43 additions (production markup) ---------- */
/* article: disclosure box content, translated-from link, footnotes (commonmarker), sources note */
.disclose>div p+p{margin-top:.5em}
.art-by .ai a{margin-inline-start:4px}
.srcs-note{font-size:14px!important;line-height:1.55;color:var(--ink-2);margin:0 0 6px!important}
.srcs.fns ol{list-style:decimal;padding-left:1.4em}
.srcs.fns li{display:list-item;padding:9px 0 9px 4px;border-top:1px solid #ececf0}
.srcs.fns li:first-child{border-top:0} .srcs.fns li p{margin:0}
.prose .srcs.fns a{color:var(--ink-2)} .prose .srcs.fns a.footnote-backref{text-decoration:none;margin-inline-start:4px}
.prose sup.footnote-ref{font-size:.68em;line-height:0;font-weight:600} .prose sup.footnote-ref a{text-decoration:none}
.prose .faq summary span:first-child{min-width:0}
.prose .faq .ans p{margin:0}
.prose input[type=checkbox]{margin:0 8px 0 0;accent-color:var(--ink)}
.prose li:has(>input[type=checkbox]){list-style:none;margin-left:-1.3em}
.prose .tbl td,.prose .tbl th{font-size:15px}
.prose .tbl a{text-underline-offset:2px}
.start-house{margin-top:40px}
.callout .acts{margin:14px 0 0} .callout .acts a{margin-inline-end:24px}
.scard-title[lang=zh-Hant],.scard-sum[lang=zh-Hant]{word-break:normal;line-break:strict;letter-spacing:.02em}
.scard>a:focus-visible,.feat>a:focus-visible{outline-offset:4px;border-radius:var(--r-card)}
/* hub filter: cards hidden by the filter */
.soon[hidden]{display:none}
.sgrid .scard[hidden],.soon-grid .scard[hidden]{display:none}
/* neighbourhood */
.nb-lnav{position:sticky;top:0}
.nb-intro{margin-top:18px;max-width:34em}
html:lang(zh-Hant) .nb-intro{max-width:30em}
.nb-data-line{border-top:1px solid var(--hairline);padding-top:16px;margin-top:0}
.nb-method-sec{padding-block:72px 88px}
.ncard-sub{font-size:.7em;font-weight:500;color:var(--ink-2)}
.ncard-media picture,.ncard-media picture img{display:block;width:100%;height:100%;object-fit:cover}
.g4>div{display:flex;flex-direction:column}
.g4 dt{order:2} .g4 dd.g4-big{order:1} .g4 dd.g4-sub{order:3}
.osm-c a{color:var(--lantern);text-decoration:underline;text-underline-offset:2px}
.on-dark .osm-c a,.rg-note a{color:var(--snow-2)}
/* house page: neighbourhood teaser under the area section */
.nb-teaser{padding-bottom:72px} .nb-teaser .t-body{color:var(--snow-2);margin:0 0 12px;max-width:40em}
.nb-teaser .more{color:var(--lantern-glow)} .nb-teaser .poi-note a{color:var(--snow-2);text-decoration:underline}

/* ==========================================================================
   JON-43 預約看房表單（DESIGN.md、示意稿 booking-en.html）：六段 fieldset（第一段是寓所照片卡）、
   跟著捲動的進度條、整頁唯一的朱色按鈕是送出鈕（導覽列不放預約膠囊）、頁面最下面一行打開個資告知視窗
   （2026-10-06 案主決定）。class 一律 bk- 開頭（.next、.sum 已被別頁用掉）。
   ========================================================================== */
.bk-hero{padding-block:64px 40px;text-align:center} @media (min-width:1068px){.bk-hero{padding-block:104px 56px}}
.bk-hero .t-lead{margin:18px auto 0;max-width:30em}
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:120px} #bkwrap{min-width:0}
@media (min-width:1068px){.bk-grid{grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}}
/* privacy notice summary — before the first field */
/* 個資告知：頁面最下面一行（.bk-pline）→ 跳出視窗（原生 <dialog>，privacy_dialog_controller.js）。
   ⚠️ .bk-pdialog 不寫 display：瀏覽器內建的 dialog:not([open]){display:none} 才會生效（作者樣式一律蓋過內建樣式）。
   沒有 JS、/privacy 還沒發布時連結是 #bk-privacy-dialog：:target 把摘要攤開在頁面上。 */
.bk-pline{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--hairline);text-align:center;font-size:14px}
.bk-pline a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline)}
.bk-pline a:hover{color:var(--ink);text-decoration-color:currentColor}
.bk-pline .ic{width:16px;height:16px}
.bk-pdialog{width:min(100% - 32px,560px);max-width:none;max-height:calc(100% - 32px);margin:auto;padding:0;border:0;border-radius:var(--r-card);background:#fff;color:var(--ink);
  box-shadow:0 24px 64px rgba(0,0,0,.24);overflow:auto;overscroll-behavior:contain}
.bk-pdialog::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bk-pdialog-in{padding:22px 24px 24px;font-size:14px}
/* 標題列（含關閉鈕）黏在視窗頂：矮螢幕（例如 LINE／IG 內建瀏覽器 375×600）捲到摘要最後面也按得到關閉（手機沒有 Esc） */
.bk-pdialog-hd{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:12px;margin:-22px -24px 14px;padding:22px 24px 12px;background:#fff;
  border-bottom:1px solid var(--hairline)}
.bk-pdialog h2{flex:1;display:flex;align-items:center;gap:8px;margin:0;padding-top:4px;font-size:19px;font-weight:600;line-height:1.3}
.bk-pdialog h2 .ic{width:22px;height:22px}
.bk-pdialog .x{flex:none;width:36px;height:36px;margin:0 -8px 0 0;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--canvas-alt)}
.bk-pdialog .x:hover{color:var(--ink)} .bk-pdialog .x .ic{width:18px;height:18px}
.bk-pdialog :focus-visible{outline-color:var(--lantern)}
.bk-pdialog dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}
.bk-pdialog dt{font-weight:600} .bk-pdialog dd{margin:0;color:var(--ink-2)}
.bk-pdialog .fine{font-size:13px;color:var(--ink-2);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hairline)}
.bk-pdialog .fine a{color:var(--lantern);text-decoration:underline;text-underline-offset:2px}
@media (max-width:420px){.bk-pdialog dl{grid-template-columns:minmax(0,1fr);gap:2px}.bk-pdialog dd{margin-bottom:10px}}
.bk-pdialog:not([open]) .x{display:none}
.bk-pdialog:target:not([open]){display:block;position:static;width:auto;max-height:none;margin:24px 0 0;box-shadow:none;background:var(--canvas-alt);
  scroll-margin-top:calc(var(--nav-h) + 72px)}
.bk-pdialog:target:not([open]) .bk-pdialog-hd{position:static;background:none}
/* 打開視窗時背景不捲動；先保留捲軸的位置（Windows／Linux 等會佔寬度的捲軸），拿掉捲軸時版面才不會左右跳一下 */
html:has(#bk-privacy-dialog){scrollbar-gutter:stable}
html:has(.bk-pdialog[open]){overflow:hidden}
/* progress */
.bk-stepper{position:sticky;top:var(--nav-h);z-index:20;margin:28px calc(-1 * var(--gutter)) 0;padding:12px var(--gutter);background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
@media (min-width:1068px){.bk-stepper{margin-inline:0;padding-inline:0}}
.bk-stepper ol{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.bk-stepper li{flex:1 1 0;font-size:12px;color:var(--ink-3);display:flex;flex-direction:column;gap:7px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;
  transition:flex-grow var(--t-ui) var(--ease)}
.bk-stepper li::before{content:"";height:4px;border-radius:2px;background:#e3e3e8;transition:background-color var(--t-ui) var(--ease)}
.bk-stepper li.done::before,.bk-stepper li.on::before{background:var(--ink)} .bk-stepper li.on{color:var(--ink);font-weight:600} .bk-stepper li.done{color:var(--ink-2)}
.bk-stepper li i{font-style:normal}
/* 手機：六格只有目前那一格寫字，那一格比較寬 */
@media (max-width:733px){.bk-stepper li i{display:none}.bk-stepper li.on{flex-grow:3}.bk-stepper li.on i{display:inline}}
@media (max-width:359px){.bk-stepper li.on i{display:none}}
/* form */
.bk-form{margin-top:8px}
.bk-form :focus-visible{outline-color:var(--lantern)}
.bk-form fieldset{border:0;margin:64px 0 0;padding:0;min-width:0;scroll-margin-top:calc(var(--nav-h) + 72px)}
.bk-form legend{float:left;width:100%;padding:0;margin:0 0 6px;font-size:28px;font-weight:700;letter-spacing:.007em;line-height:1.14}
html:lang(ja) .bk-form legend,html:lang(zh-Hant) .bk-form legend{letter-spacing:.02em}
.bk-form .leg-sub{clear:both;margin:0 0 26px;color:var(--ink-2);font-size:15px}
.bk-req{margin:28px 0 -24px;font-size:14px;color:var(--ink-2)}
.bk-fgrid{display:grid;gap:18px;min-width:0} @media (min-width:734px){.bk-fgrid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.bk-fld{min-width:0;scroll-margin-top:calc(var(--nav-h) + 72px)}
.bk-fld label,.bk-fld .lbl{display:block;font-size:14px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.bk-fld .opt{font-weight:400;color:var(--ink-2)}
.bk-inp{display:block;width:100%;min-width:0;height:52px;padding:0 16px;border-radius:var(--r-field);border:1px solid var(--hairline);background:#fff;font:inherit;font-size:17px;color:var(--ink);
  transition:border-color var(--t-press),box-shadow var(--t-press);-webkit-appearance:none;appearance:none}
textarea.bk-inp{height:auto;min-height:112px;padding:14px 16px;line-height:1.47;resize:vertical}
select.bk-inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
input[type=date].bk-inp{line-height:52px}
.bk-inp::placeholder{color:#a1a1a6}
.bk-inp:hover{border-color:#b8b8bd}
.bk-inp:focus{outline:none;border-color:var(--lantern);box-shadow:0 0 0 4px rgba(201,63,24,.16)}
.bk-inp:user-invalid,.bk-inp[aria-invalid=true]{border-color:#D70015;box-shadow:0 0 0 4px rgba(215,0,21,.1)}
.bk-help{font-size:13px;color:var(--ink-2);margin:8px 0 0;display:flex;gap:6px;align-items:flex-start}
.bk-help .ic{width:15px;height:15px;margin-top:2px;flex:none}
.bk-help.err{color:#D70015}
.bk-phone{display:grid;grid-template-columns:minmax(112px,42%) minmax(0,1fr);gap:10px} .bk-phone select{font-size:15px;text-overflow:ellipsis}
.bk-segr{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px}
.bk-segr label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:6px 8px;margin:0;border-radius:var(--r-field);border:1px solid var(--hairline);
  background:#fff;font-size:16px;font-weight:400;line-height:1.25;cursor:pointer;transition:all var(--t-press)}
.bk-segr input,.bk-houses input,.bk-cks input,.bk-modes input{position:absolute;opacity:0;pointer-events:none}
.bk-segr label:has(input:checked){border-color:var(--lantern);box-shadow:inset 0 0 0 1px var(--lantern);color:var(--lantern);font-weight:600}
.bk-segr label:has(input:focus-visible),.bk-houses label:has(input:focus-visible),.bk-cks label:has(input:focus-visible),.bk-modes label:has(input:focus-visible){outline:3px solid var(--lantern);outline-offset:2px}
.bk-segr small{display:block;font-size:12px;font-weight:400;color:var(--ink-2)}
/* 寓所照片卡（第一段，可複選）：手機 2 欄、平板與桌機 3 欄、寬桌機 4 欄；照片 4:3、名稱、行政區；不顯示價格（2026-10-06 案主決定） */
.bk-houses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:734px){.bk-houses{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1280px){.bk-houses{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bk-houses label{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;border-radius:var(--r-thumb);border:1px solid var(--hairline);background:#fff;overflow:hidden;
  cursor:pointer;font-weight:400;transition:border-color var(--t-press),box-shadow var(--t-press)}
.bk-houses label:hover{border-color:#b8b8bd}
.bk-houses picture{display:block}
.bk-houses img,.bk-houses .bk-ph{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--canvas-alt)}
.bk-houses .bk-ph{display:grid;place-items:center;color:var(--ink-3)} .bk-houses .bk-ph .ic{width:32px;height:32px}
.bk-houses .txt{display:block;min-width:0;padding:10px 12px 12px}
.bk-houses b{display:block;font-size:15px;font-weight:600;line-height:1.3;transition:color var(--t-press)}
.bk-houses small{display:block;margin-top:2px;font-size:12px;color:var(--ink-2)}
.bk-houses .tick{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(29,29,31,.4);background:rgba(255,255,255,.92);
  display:grid;place-items:center;color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.18);transition:background-color var(--t-press),border-color var(--t-press)}
.bk-houses .tick .ic{width:16px;height:16px;opacity:0;stroke-width:2.4}
.bk-houses label:has(input:checked){border-color:var(--lantern);box-shadow:0 0 0 2px var(--lantern)}
.bk-houses label:has(input:checked) b{color:var(--lantern)}
.bk-houses label:has(input:checked) .tick{background:var(--lantern);border-color:var(--lantern)} .bk-houses label:has(input:checked) .tick .ic{opacity:1}
.bk-houses label:has(input:focus-visible){outline-offset:4px}
.bk-cks{display:flex;flex-wrap:wrap;gap:8px}
.bk-cks label{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;margin:0;border-radius:var(--r-pill);border:1px solid var(--hairline);background:#fff;font-size:15px;font-weight:400;cursor:pointer}
.bk-cks label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.bk-modes{display:grid;gap:12px} @media (min-width:734px){.bk-modes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.bk-modes label{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;margin:0;border-radius:20px;border:1px solid var(--hairline);background:#fff;cursor:pointer;font-weight:400;transition:all var(--t-press)}
.bk-modes .ic{width:30px;height:30px;color:var(--ink-2);margin-bottom:8px}
.bk-modes b{font-size:19px;font-weight:600} .bk-modes small{font-size:14px;color:var(--ink-2)}
.bk-modes label:has(input:checked){border-color:var(--lantern);box-shadow:inset 0 0 0 1px var(--lantern)} .bk-modes label:has(input:checked) .ic{color:var(--lantern)}
.bk-tz{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:8px 14px;border-radius:var(--r-pill);background:var(--canvas-alt);font-size:13px;color:var(--ink)}
.bk-tz .ic{width:15px;height:15px;color:var(--ink-2)}
.bk-consent{display:flex;gap:14px;align-items:flex-start;padding:22px;margin:48px 0 0;border-radius:20px;background:var(--canvas-alt);font-size:15px;font-weight:400;cursor:pointer}
.bk-consent input{width:22px;height:22px;accent-color:var(--lantern);margin:1px 0 0;flex:none}
.bk-consent a{color:var(--lantern);text-decoration:underline;text-underline-offset:2px}
.bk-consent.invalid{box-shadow:inset 0 0 0 1px #D70015}
.bk-submit{width:100%;min-height:56px;margin-top:20px;font-size:17px;font-weight:600;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.bk-status{min-height:1.2em;margin:10px 0 0;text-align:center;font-size:13px;color:var(--ink-2)}
.bk-alt{margin:16px 0 0;text-align:center;font-size:14px;color:var(--ink-2)} .bk-alt a{color:var(--lantern)}
.bk-restored{display:flex;gap:10px;align-items:center;margin:28px 0 0;padding:14px 18px;border-radius:16px;background:var(--lantern-tint);font-size:15px;color:var(--ink)}
.bk-restored[hidden]{display:none}
.bk-restored p{margin:0}
.bk-errors{margin:28px 0 0;padding:18px 22px;border-radius:16px;background:#FFF2F2;color:#A1000F;font-size:15px}
.bk-errors p{margin:0 0 8px;font-weight:600} .bk-errors ul{margin:0;padding-left:1.2em} .bk-errors a{color:inherit;text-decoration:underline}
/* summary (desktop) */
.bk-side{display:none} @media (min-width:1068px){.bk-side{display:block;position:sticky;top:calc(var(--nav-h) + 24px)}}
.bk-sum{border-radius:var(--r-card);overflow:hidden;background:var(--canvas-alt)}
.bk-sum img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bk-sum-b{padding:22px 24px 24px}
.bk-sum-b h3{font-size:21px;font-weight:600;margin:0} .bk-sum-b .d{font-size:13px;color:var(--ink-2);margin:2px 0 14px}
.bk-next{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--hairline);display:grid;gap:12px;font-size:14px;color:var(--ink-2);counter-reset:n}
.bk-sum-b>.bk-next:first-child{margin-top:0;padding-top:0;border-top:0}
.bk-next li{display:flex;gap:10px;counter-increment:n}
.bk-next li::before{content:counter(n);flex:none;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink);font-size:12px;font-weight:600;display:grid;place-items:center}
/* thanks */
.bk-done{text-align:center;padding-block:96px 120px}
.bk-done .bk-ok{display:block;width:56px;height:56px;color:#fff;background:var(--ink);border-radius:50%;padding:14px;margin:0 auto 24px}
.bk-done .t-lead{margin:18px auto 0;max-width:30em}
.bk-done .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
/* in-app browser banner (LINE／Instagram／Facebook webview): front-end only, dismissible */
.bk-inapp{position:fixed;inset:0 0 auto 0;z-index:60;padding:14px var(--gutter);background:rgba(255,248,230,.97);border-bottom:1px solid #F0D58A;
  box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:14px;color:var(--ink)}
.bk-inapp[hidden]{display:none}
.bk-inapp-in{display:flex;gap:12px;align-items:flex-start;max-width:var(--w-content);margin-inline:auto}
.bk-inapp-txt{flex:1;min-width:0} .bk-inapp-txt p{margin:0 0 4px} .bk-inapp-txt .t{font-weight:600}
.bk-inapp-txt .bk-steps{font-size:12px;color:var(--ink-2)}
.bk-inapp .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bk-inapp .acts .pill{min-height:36px;padding:6px 14px;font-size:13px}
.bk-inapp .x{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2)}
.bk-inapp-spacer{height:150px} .bk-inapp-spacer[hidden]{display:none}
/* privacy notice page */
.privacy-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 0;font-size:14px;color:var(--ink-2)}
.privacy-meta a{color:var(--lantern);text-decoration:underline;text-underline-offset:2px}
.privacy-body{padding-bottom:48px}
.bk-inapp.hidden,.bk-inapp-spacer.hidden,.bk-inapp .hidden{display:none}
/* 瀏覽器跳到沒填的欄位時，別躲在黏頂的導覽列＋進度條底下 */
.bk-form :is(input,select,textarea,.bk-consent){scroll-margin-top:calc(var(--nav-h) + 96px)}