/* =====================================================================
   article.css — 靜態深度頁(/dish/ /spot/ /city/)專用樣式
   feat-* 規則原樣取自 index.html,確保靜態頁與 SPA 深度頁外觀一致。
   靜態頁為獨立文件:用 prefers-color-scheme 自動深色,不依賴 SPA 的 body.dark。
   ===================================================================== */
:root{
  --bg:#FAF5EC; --paper:#FFFFFF; --green:#14403A; --orange:#C24E2E;
  --ink:#221A12; --muted:#8A7B68; --line:#E7DECE; --gold:#D9A14B;
  --shadow:0 4px 24px rgba(31,24,20,.10);
  --serif:"Noto Serif TC", Georgia, serif;
  --viet:"Be Vietnam Pro", "Noto Sans TC", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#2A241D; --paper:#221C16; --green:#9DBBB2; --orange:#E8A06E;
    --ink:#F2ECE3; --muted:#A89B8C; --line:rgba(242,236,227,.14); --gold:#E6BC6A;
    --shadow:0 6px 28px rgba(0,0,0,.45);
  }
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Be Vietnam Pro", Inter, system-ui, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
a{ color:inherit; }

/* ---------- 頂部列(品牌 + 語言) ---------- */
.site-bar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 20px; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-bar .brand{ font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.04em; color:var(--green); text-decoration:none; }
.site-bar .brand span{ color:var(--orange); }
.site-bar .langs{ display:flex; gap:6px; font-size:12.5px; }
.site-bar .langs a{ padding:4px 10px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:var(--muted); }
.site-bar .langs a.on{ background:var(--green); color:var(--paper); border-color:var(--green); }

/* ---------- 麵包屑 ---------- */
.crumbs{ max-width:1200px; margin:0 auto; padding:16px 40px 0; font-size:12.5px; color:var(--muted); }
.crumbs a{ text-decoration:none; color:var(--muted); }
.crumbs a:hover{ color:var(--orange); }
.crumbs .sep{ margin:0 7px; opacity:.6; }

/* ---------- 文章主體(取自 index.html .feat-*) ---------- */
.feat-wrap{ max-width:1200px; margin:0 auto; padding:0 40px 90px; }
.feat-hero{ position:relative; height:min(58vh,500px); margin-bottom:8px; }
.feat-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 靜態頁多半無代表圖(build 期不抓 wiki) → noimg 整塊上墨綠底,標題用淺色字才讀得到 */
.feat-hero.noimg{ height:auto; background:var(--green); }
.feat-hero.noimg img{ display:none; }
.feat-hero .scrim{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(18,14,11,.86) 0%, rgba(18,14,11,.12) 52%, rgba(18,14,11,.34) 100%); }
.feat-hero.noimg .scrim{ display:none; }
.feat-hero .htext{ position:absolute; left:0; right:0; bottom:0; padding:34px 40px; max-width:1200px; margin:0 auto; color:#F5EFE6; }
.feat-hero.noimg .htext{ position:static; padding:54px 40px 40px; }
.feat-hero h1{ font-family:var(--serif); font-size:clamp(27px,5vw,42px); font-weight:700; letter-spacing:.03em; line-height:1.22; }
.feat-hero .sub{ font-size:13.5px; opacity:.82; margin-top:8px; letter-spacing:.05em; }
.feat-hero .meta{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:16px; font-size:12.5px; }
.feat-hero .meta span{ background:rgba(255,255,255,.17); padding:5px 12px; border-radius:999px; backdrop-filter:blur(4px); }
/* 圖片來源署名(2026-07-27) — 只有授權要求署名的 hero 圖才輸出這塊,見 build.mjs heroCredit()。
   放右上角避開左下的 .htext;z-index 要壓過 .scrim(scrim 在 DOM 後面,否則會蓋住它)。 */
.feat-hero .hero-credit{ position:absolute; top:0; right:0; z-index:2; padding:10px 16px;
  font-size:11px; letter-spacing:.04em; color:rgba(245,239,230,.72); text-shadow:0 1px 3px rgba(18,14,11,.7); }
.feat-hero .hero-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.feat-hero .hero-credit a:hover{ color:#F5EFE6; }
.feat-hero.noimg .hero-credit{ display:none; }

.feat-lead{ font-family:var(--serif); font-size:21px; line-height:1.9; color:var(--ink); margin:30px 0 8px; max-width:920px; }
.feat-h{ font-family:var(--serif); font-size:23px; font-weight:700; color:var(--green); letter-spacing:.05em;
  margin:44px 0 18px; padding-bottom:9px; border-bottom:2px solid var(--orange); display:inline-block; }
.feat-p{ font-size:15.5px; line-height:2; color:var(--ink); margin-bottom:15px; }
.feat-fig{ margin:10px 0 26px; }
.feat-fig img{ width:100%; border-radius:14px; display:block; box-shadow:var(--shadow); }
.feat-fig figcaption{ font-size:12px; color:var(--muted); margin-top:9px; letter-spacing:.03em; text-align:center; }

.feat-split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin:14px 0 32px; }
.feat-split.rev .feat-split-txt{ order:2; }
.feat-split-txt .feat-p:last-child{ margin-bottom:0; }
.feat-split figure{ margin:0; }
.feat-split img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); display:block; }
.feat-split figcaption{ font-size:12px; color:var(--muted); margin-top:9px; text-align:center; }

.feat-duo{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:10px 0 28px; }
.feat-duo figure{ margin:0; }
.feat-duo img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); display:block; }
.feat-duo figcaption{ font-size:12px; color:var(--muted); margin-top:8px; text-align:center; }

.feat-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:10px 0 28px; }
.feat-trio figure{ margin:0; }
.feat-trio img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); display:block; }
.feat-trio figcaption{ font-size:12px; color:var(--muted); margin-top:8px; text-align:center; }

.feat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:10px 0 28px; }
.feat-card{ padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:var(--shadow); }
.feat-card .ic{ font-size:27px; display:block; line-height:1; margin-bottom:12px; }
.feat-card .ct b{ display:block; font-size:15.5px; margin-bottom:7px; color:var(--ink); letter-spacing:.02em; }
.feat-card .ct span{ font-size:13.5px; line-height:1.85; color:var(--muted); }
.feat-tips2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; margin:8px 0 28px; }
.feat-tips2 .feat-tips{ margin:0; }
.feat-tips{ background:rgba(199,123,69,.07); border:1px solid var(--line); border-radius:14px; padding:19px 22px; margin:8px 0 26px; }
.feat-tips h4{ font-family:var(--serif); font-size:15.5px; color:var(--orange); letter-spacing:.08em; margin-bottom:12px; }
.feat-tips ul{ list-style:none; }
.feat-tips li{ position:relative; font-size:14px; line-height:1.8; color:var(--ink); margin-bottom:9px; padding-left:18px; }
.feat-tips li::before{ content:'›'; position:absolute; left:2px; color:var(--orange); font-weight:700; }
.feat-foot{ font-size:11.5px; color:var(--muted); line-height:1.9; margin-top:34px; padding-top:18px; border-top:1px solid var(--line); }

/* ---------- 文章底部交叉連結 ---------- */
.xlinks{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }
.xlinks a{
  display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:10px;
  font-size:13.5px; font-weight:600; letter-spacing:.04em; text-decoration:none;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); box-shadow:var(--shadow);
  transition:opacity .15s ease;
}
.xlinks a.primary{ background:var(--green); color:var(--paper); border-color:var(--green); }
.xlinks a:hover{ opacity:.9; }

/* ---------- 城市彙整頁 ---------- */
.city-head{ max-width:1200px; margin:0 auto; padding:30px 40px 6px; }
.city-head h1{ font-family:var(--serif); font-size:clamp(26px,4.5vw,40px); font-weight:700; color:var(--green); letter-spacing:.03em; }
.city-head .sub{ font-size:14px; color:var(--muted); margin-top:8px; letter-spacing:.05em; }
.city-head .lead{ font-family:var(--serif); font-size:18px; line-height:1.85; color:var(--ink); margin-top:18px; max-width:920px; }
.city-sec{ max-width:1200px; margin:0 auto; padding:8px 40px; }

/* ---------- 相關內鏈(每深度頁底,SEO 內鏈 + 探索) ---------- */
.related-links{
  margin:54px 0 12px; padding:32px 0 0;
  border-top:1px solid var(--line, #E5DFD3);
}
.related-links .rel-head{
  font-family:"Noto Serif TC", Georgia, serif;
  font-size:11px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--orange, #C75B39); margin-bottom:28px;
  display:inline-flex; align-items:center; gap:12px;
}
.related-links .rel-head::after{
  content:''; width:48px; height:1px;
  background:var(--orange, #C75B39);
}
.rel-block{ margin-bottom:36px; }
.rel-block:last-child{ margin-bottom:0; }
.rel-title{
  font-family:"Noto Serif TC", Georgia, serif;
  font-size:17px; font-weight:700;
  color:var(--green, #1A3D3A); margin:0 0 16px;
  letter-spacing:.02em;
}
.rel-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}
.rel-card{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px; border:1px solid var(--line, #E5DFD3);
  border-radius:10px; background:var(--paper, #FFFFFF);
  text-decoration:none; color:var(--ink, #1F1814);
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rel-card:hover{
  transform:translateY(-2px);
  border-color:var(--orange, #C75B39);
  box-shadow:0 4px 14px rgba(31,24,20,.08);
}
.rel-card:active{ transform:scale(.985); transition:transform .08s ease; }
.rel-card .rl-ic{
  flex:none; width:38px; height:38px; font-size:22px;
  background:var(--bg, #FAF8F4); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.rel-card .rl-bd{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rel-card .rl-nm{
  font-family:"Noto Serif TC", Georgia, serif;
  font-size:14px; font-weight:600; color:var(--ink, #1F1814);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rel-card .rl-ar{
  font-size:11px; color:var(--muted, #8A7E6F);
  letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:767px){
  .related-links{ margin:36px 0 8px; padding:24px 0 0; }
  .rel-grid{ grid-template-columns:1fr; gap:8px; }
}
.city-sec h2{ font-family:var(--serif); font-size:21px; font-weight:700; color:var(--green); letter-spacing:.05em;
  margin:34px 0 16px; padding-bottom:8px; border-bottom:2px solid var(--orange); display:inline-block; }
.item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.item-card{
  display:block; padding:18px 20px; border:1px solid var(--line); border-radius:14px;
  background:var(--paper); box-shadow:var(--shadow); text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.item-card:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(31,24,20,.16); }
.item-card .ic{ font-size:22px; }
.item-card .nm{ font-family:var(--serif); font-size:17px; font-weight:700; margin:8px 0 4px; color:var(--ink); }
.item-card .nm small{ display:block; font-family:inherit; font-weight:500; font-size:12px; color:var(--muted); margin-top:3px; letter-spacing:.02em; }
.item-card .ar{ font-size:12.5px; color:var(--muted); }
.item-card .nt{ font-size:13px; color:var(--muted); line-height:1.7; margin-top:8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.page-foot{ max-width:1200px; margin:0 auto; padding:40px; font-size:11.5px; color:var(--muted); line-height:1.9; border-top:1px solid var(--line); }
.page-foot a{ color:var(--muted); }

/* ---------- 響應式 ---------- */
@media (max-width:767px){
  .crumbs{ padding:14px 18px 0; }
  .feat-wrap{ padding:0 18px 70px; }
  .feat-hero{ height:min(48vh,360px); }
  .feat-hero .htext{ padding:24px 18px; }
  .feat-lead{ font-size:18px; }
  .feat-split{ grid-template-columns:1fr; gap:18px; }
  .feat-split.rev .feat-split-txt{ order:0; }
  .feat-trio{ grid-template-columns:1fr 1fr; }
  .feat-tips2{ grid-template-columns:1fr; }
  .city-head, .city-sec{ padding-left:18px; padding-right:18px; }
  .page-foot{ padding:30px 18px; }
}

/* ---------- 主題策展頁(W3 F2) ---------- */
.theme-head{ max-width:1200px; margin:0 auto; padding:48px 40px 28px; }
.theme-tagline{
  font-family:var(--serif); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange); margin-bottom:10px;
}
.theme-head h1{
  font-family:var(--serif); font-size:clamp(28px,4.6vw,42px);
  font-weight:700; line-height:1.22; letter-spacing:.02em;
  color:var(--ink); margin-bottom:14px;
}
.theme-desc{
  font-family:var(--serif); font-size:17px; line-height:1.85;
  color:var(--ink); max-width:780px; margin-bottom:18px;
}
.theme-count{
  display:inline-block; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  padding:6px 14px; border:1px solid var(--line); border-radius:999px;
}
.theme-grid{
  max-width:1200px; margin:30px auto; padding:0 40px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
.theme-card{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.theme-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(31,24,20,.10);
  border-color:var(--muted);
}
.theme-card .tc-ic{
  flex:none; font-size:26px; line-height:1;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border-radius:10px;
}
.theme-card .tc-bd{ min-width:0; flex:1; }
.theme-card .tc-nm{
  font-family:var(--serif); font-size:15.5px; font-weight:600;
  color:var(--ink); margin-bottom:4px; line-height:1.4;
  display:flex; align-items:center; gap:6px;
}
.theme-card .tc-sub{
  font-size:12px; color:var(--muted); letter-spacing:.02em;
}
.theme-card .tm{
  flex:none; font-size:11px;
  width:20px; height:20px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#1F1814;
}
.theme-card .tm-shrine{ background:linear-gradient(135deg,#E6BC6A,#B07F2D); color:#1F1814; }
.theme-card .tm-signature{ background:color-mix(in srgb, var(--orange) 22%, transparent); color:var(--orange); }
.theme-card .tm-collect{ background:var(--bg); color:var(--muted); }
/* 深色模式 tm-shrine:漸層更深、字色提升至接近白,確保對比 >4.5:1 */
html[data-theme="dark"] .theme-card .tm-shrine{
  background:linear-gradient(135deg,#8C6420,#5A3F12);
  color:#FFF4DC;
}

.theme-cta{
  max-width:1200px; margin:30px auto 60px; padding:0 40px;
  text-align:center;
}
.theme-cta a.primary{
  display:inline-block; padding:14px 28px; border-radius:10px;
  background:var(--green); color:var(--paper); text-decoration:none;
  font-weight:600; letter-spacing:.05em;
  transition:opacity .15s ease;
}
.theme-cta a.primary:hover{ opacity:.92; }

/* 主題索引頁 */
.themes-index-head{ max-width:1200px; margin:0 auto; padding:60px 40px 30px; text-align:center; }
.themes-index-head h1{
  font-family:var(--serif); font-size:clamp(32px,5vw,46px);
  font-weight:700; letter-spacing:.04em; color:var(--green);
  margin-bottom:14px;
}
.themes-index-sub{
  font-family:var(--serif); font-size:17px; color:var(--muted);
  line-height:1.85; max-width:680px; margin:0 auto;
}
.themes-index-grid{
  max-width:1200px; margin:40px auto 80px; padding:0 40px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:18px;
}
.theme-index-card{
  display:block; padding:28px 26px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--paper); text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.theme-index-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(31,24,20,.12);
  border-color:var(--orange);
}
.theme-index-card .tic-tagline{
  font-family:var(--serif); font-size:10.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange); margin-bottom:10px;
}
.theme-index-card .tic-title{
  font-family:var(--serif); font-size:21px; font-weight:700;
  line-height:1.35; color:var(--ink); margin-bottom:14px;
}
.theme-index-card .tic-count{
  font-size:12px; color:var(--muted); letter-spacing:.05em;
}

@media (max-width:767px){
  .theme-head, .theme-grid, .theme-cta,
  .themes-index-head, .themes-index-grid{
    padding-left:18px; padding-right:18px;
  }
  .themes-index-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   Editorial Luxury v3 (taste-skill + bencium + mercury + soft-skill)
   cream canvas + warm-gray ink + 單一暖橘強調 + massive serif +
   tabular numbers as hero + film grain + hairline 排版 + 反 AI-slop
   ============================================================ */

:root{
  --ed-paper: #FAF5EC;
  --ed-paper-2: #F1E9D8;
  --ed-ink: #221A12;
  --ed-warm: #5A5041;
  --ed-muted: #8A7B68;
  --ed-line: #E7DECE;
  --ed-line-2: #D6CAB0;
  --ed-accent: #C24E2E;
  --ed-accent-2: #14403A;
  --ed-gold: #B07F2D;
  --ed-serif: "Noto Serif TC", "Tiempos Headline", "Iowan Old Style", Georgia, serif;
  --ed-viet: "Be Vietnam Pro", "Noto Sans TC", sans-serif;
}

body:has(.ed-hero){
  background: var(--ed-paper);
  color: var(--ed-ink);
  font-variant-numeric: tabular-nums;
  /* Mobile app-like baseline:去 iOS 灰底點擊、防字級自動放大、阻 overscroll bounce */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
body:has(.ed-hero) a, body:has(.ed-hero) button{
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}

/* hover-only 在手機 sticky:no-hover 環境砍 hover 視覺,讓 :active 接管 */
@media (hover:none){
  .city-row:hover{ background:transparent !important; }
  .theme-row:hover{ background:transparent !important; }
  .aff-cta-card:hover{
    transform:none !important;
    box-shadow:none !important;
    border-color:var(--line, #E5DFD3) !important;
  }
  .ed-cta-primary:hover{ transform:none !important; }
  .ed-mast-nav a:hover{ color:var(--ed-warm) !important; }
  .city-row:hover .cr-photo{ transform:none !important; filter:saturate(.85) contrast(1.02) !important; }
  .theme-row:hover .tr-cta em{ transform:none !important; }
}

/* :active 觸控反饋(全 interactive 元素統一壓深) */
.city-row:active{
  background: color-mix(in srgb, var(--ed-accent) 6%, transparent);
  transform: scale(.997);
  transition: transform .08s ease, background .08s ease;
}
.theme-row:active{
  background: color-mix(in srgb, var(--ed-accent) 6%, transparent);
  transform: scale(.996);
  transition: transform .08s ease, background .08s ease;
}
.aff-cta-card:active{
  transform: scale(.985);
  transition: transform .08s ease;
}
.ed-cta-primary:active{
  transform: translateY(1px) scale(.985);
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(31,24,20,.06));
  transition: transform .08s ease, box-shadow .08s ease;
}
.theme-index-card:active{ transform: scale(.99); transition: transform .08s ease; }
.item-card:active{ transform: scale(.995); transition: transform .08s ease; }

.paper-grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>");
  mix-blend-mode: multiply;
}

.ed-masthead{
  position:sticky; top:0; z-index:10;
  background: color-mix(in srgb, var(--ed-paper) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ed-line);
}
.ed-masthead-inner{
  max-width:1240px; margin:0 auto; padding:18px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.ed-mast-brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--ed-serif);
  font-size:16px; font-weight:600; letter-spacing:.03em;
  color: var(--ed-accent-2); text-decoration:none;
}
.ed-mast-brand .emb-mark{
  display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center;
  background: var(--ed-accent-2); color: #FBF8F1; border-radius:6px;
  font-size:14px;
}
.ed-mast-brand:hover .emb-mark{ background: var(--ed-accent); }
.ed-mast-nav{ display:flex; align-items:center; gap:28px; }
.ed-mast-nav a{
  font-size:12.5px; color: var(--ed-warm);
  text-decoration:none; letter-spacing:.08em;
  text-transform:uppercase; font-weight:500;
  transition: color .15s ease;
}
.ed-mast-nav a:hover{ color: var(--ed-accent); }
.ed-mast-nav a.ed-mast-cta{
  color: var(--ed-ink); border-bottom:1.5px solid var(--ed-accent);
  padding-bottom:2px;
}
.ed-mast-cta em{ font-style:normal; margin-left:4px; color: var(--ed-accent); }
.ed-mast-lang{ display:inline-flex; align-items:center; gap:6px; padding-left:12px; border-left:1px solid var(--ed-line); }
.ed-mast-lang a{ font-size:12px; letter-spacing:.1em; color:var(--ed-muted); padding:0; }
.ed-mast-lang a.on{ color:var(--ed-ink); border-bottom:1.5px solid var(--ed-accent); padding-bottom:1px; }
.ed-mast-lang .ed-lang-sep{ color:var(--ed-line-2); font-size:12px; }
.ed-hero-title .ed-hero-ta, .ed-hero-title .ed-hero-tb{ display:inline; }

/* ============================================================
   Real Photos + Reveal Animation + Mask 去背排版
   ============================================================ */

/* Hero mosaic:20 城 wiki 縮圖拼成 5×4 背景方陣,去背 radial mask + scrim */
.ed-hero{ overflow:hidden; }
.ed-hero-mosaic{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr);
  gap:0; z-index:0;
  /* 整塊 mask 從中心向外漸層淡化(讓中央文字可讀) */
  mask-image: radial-gradient(ellipse 80% 70% at center, transparent 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.95) 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, transparent 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.95) 100%);
  opacity:.32;
}
.ehm-tile{
  background-size: cover; background-position:center;
  filter: saturate(.65) sepia(.18) brightness(.95);
}
.ed-hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, var(--ed-paper) 92%);
  pointer-events:none;
}
.ed-hero-inner{ position:relative; z-index:2; }

/* City row 真實縮圖去背(radial mask + 圓形遮罩) */
.cr-photo{
  width:48px; height:48px;
  background-size: cover; background-position:center;
  border-radius:50%;
  /* 圓形 mask 從中心向外淡化,模擬去背攝影感 */
  mask-image: radial-gradient(circle at center, black 55%, transparent 96%);
  -webkit-mask-image: radial-gradient(circle at center, black 55%, transparent 96%);
  filter: saturate(.85) contrast(1.02);
  transition: transform .25s cubic-bezier(.32,.72,0,1), filter .25s ease;
}
.city-row:hover .cr-photo{
  transform: scale(1.08);
  filter: saturate(1) contrast(1.05);
}

/* Theme row hero photo:左 1/3 寬度 + radial mask 去背 + scrim 漸變 */
.theme-row{ display:flex; gap:24px; padding:0; overflow:hidden; }
.theme-row .tr-photo{
  flex: 0 0 200px;
  align-self:stretch;
  background-size:cover; background-position:center;
  /* 右側用 linear-gradient mask 漸變到透明,讓圖無痕融入卡片 */
  mask-image: linear-gradient(90deg, black 0%, black 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 65%, transparent 100%);
  filter: saturate(.85);
}
.theme-row .tr-body{ flex:1; padding:36px 32px 40px 8px; min-width:0; }
.theme-row:not(:has(.tr-photo)) .tr-body{ padding:36px 32px 40px; }
@media (max-width:900px){
  .theme-row{ flex-direction:column; gap:0; }
  .theme-row .tr-photo{
    flex: 0 0 160px; width:100%;
    mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
  }
  .theme-row .tr-body{ padding:0 32px 40px; }
}

/* Reveal 進場動畫(IntersectionObserver 觸發 .in) */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* city-row stagger 延遲:每行依 nth-child 漸進 */
.city-row.reveal{ transition-delay: calc((var(--i, 0) * 20ms)); }
.ed-city-list .city-row:nth-child(1).reveal{ transition-delay:0ms; }
.ed-city-list .city-row:nth-child(2).reveal{ transition-delay:40ms; }
.ed-city-list .city-row:nth-child(3).reveal{ transition-delay:80ms; }
.ed-city-list .city-row:nth-child(4).reveal{ transition-delay:120ms; }

/* prefers-reduced-motion:reveal 一律 visible,不做動畫 */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* mobile hero mosaic 可見性降低,文字壓住 */
@media (max-width:767px){
  .ed-hero-mosaic{ opacity:.22; }
  .cr-photo{ width:36px; height:36px; }
}
@media (max-width:767px){
  .ed-masthead-inner{ padding:14px 18px; }
  .ed-mast-nav{ gap:14px; }
  .ed-mast-nav a:not(.ed-mast-cta){ display:none; }
}

.ed-hero{
  position:relative; z-index:2;
  max-width:none; margin:0;
  padding:120px 0 80px;
  overflow:hidden;
}
.ed-hero-inner{
  position:relative; z-index:2;
  max-width:1240px; margin:0 auto; padding:0 36px;
}
.ed-hero-eyebrow{
  font-family: var(--ed-serif);
  font-size:11.5px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color: var(--ed-accent);
  margin-bottom:34px;
  display:inline-flex; align-items:center; gap:14px;
}
.ed-hero-eyebrow::before, .ed-hero-eyebrow::after{
  content:''; width:36px; height:1px; background: var(--ed-accent);
}
.ed-hero-title{
  font-family: var(--ed-serif);
  font-size: clamp(48px, 8vw, 112px);
  font-weight:700; line-height:1;
  letter-spacing:-.02em;
  color: var(--ed-ink); margin:0;
  text-wrap: balance;
  /* keep-all 防中文漢字間斷在不該斷的位置(「越南美 / 食圖鑑」變漂亮的「越南 / 美食圖鑑」) */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ed-hero-title .ed-hero-ta{ display:block; }
.ed-hero-title .ed-hero-tb{
  display:block;
  color: var(--ed-accent-2);
  font-style:italic; font-weight:400;
}
.ed-hero-lead{
  font-family: var(--ed-serif);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height:1.65; color: var(--ed-warm);
  max-width:680px; margin: 36px 0 44px;
}
.ed-hero-cta-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }

.ed-cta{
  display:inline-flex; align-items:center; gap:14px;
  text-decoration:none;
  transition: all .2s cubic-bezier(.32,.72,0,1);
}
.ed-cta-primary{
  padding:14px 16px 14px 28px;
  background: var(--ed-accent-2); color: #FBF8F1;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 600; letter-spacing:.04em;
}
.ed-cta-primary:hover{ background: var(--ed-ink); transform: translateY(-1px); }
.ed-cta-arrow{
  width:32px; height:32px; border-radius:50%;
  background: color-mix(in srgb, #FBF8F1 22%, transparent);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.ed-cta-arrow em{ font-style:normal; font-size:14px; }
.ed-cta-primary:hover .ed-cta-arrow{
  transform: translateX(3px);
  background: color-mix(in srgb, #FBF8F1 32%, transparent);
}
.ed-cta-link{
  color: var(--ed-ink);
  font-size:14px; font-weight:600; letter-spacing:.04em;
  border-bottom: 1.5px solid var(--ed-ink); padding-bottom:3px;
}
.ed-cta-link:hover{ color: var(--ed-accent); border-color: var(--ed-accent); }
.ed-cta-large{ padding:18px 18px 18px 36px; font-size:16px; }
.ed-cta-large .ed-cta-arrow{ width:38px; height:38px; }

.ed-numbers{
  margin-top:90px; padding-top:36px;
  border-top: 1px solid var(--ed-line);
  display:grid; grid-template-columns: repeat(4, 1fr); gap:24px;
}
.ed-num{ position:relative; padding-right:24px; }
.ed-num:not(:last-child)::after{
  content:''; position:absolute; right:0; top:8px; bottom:8px;
  width:1px; background: var(--ed-line);
}
.ed-num b{
  display:block;
  font-family: var(--ed-serif);
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight:700; line-height:1;
  letter-spacing:-.02em;
  color: var(--ed-ink);
  font-variant-numeric: tabular-nums;
}
.ed-num-lab{
  display:block; margin-top:14px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ed-warm); font-weight:500;
}
@media (max-width:900px){
  .ed-numbers{ grid-template-columns: repeat(2, 1fr); gap:36px 24px; }
  .ed-num:nth-child(2)::after{ display:none; }
}
@media (max-width:767px){
  .ed-hero{ padding:48px 22px 40px; }
  .ed-hero-eyebrow{ font-size:10px; letter-spacing:.22em; margin-bottom:22px; }
  .ed-hero-eyebrow::before, .ed-hero-eyebrow::after{ width:20px; }
  /* 手機 hero title 縮到單行能放下「越南美食圖鑑」6 字(11vw≈41px × 6 = 246px,375vw 安全) */
  .ed-hero-title{ font-size: clamp(38px, 10.5vw, 56px); }
  .ed-hero-lead{ font-size:16px; line-height:1.65; margin:24px 0 32px; }
  .ed-numbers{ margin-top:42px; padding-top:22px; }
}

/* ============================================================
   Full-bleed 食物 hero 變體(視覺改版:食物照當主角,呼應 home-demo)
   masthead 維持 sticky 米色頂欄,僅其下方 hero 翻深色滿版
   ============================================================ */
.ed-hero.ed-hero--photo{
  min-height: min(88vh, 760px);
  display:flex; align-items:flex-end;
  padding:0;
}
.ed-hero-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 42%;
  transform:scale(1.02);
}
.ed-hero-veil{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg,
    rgba(13,42,38,.34) 0%, rgba(13,42,38,.04) 30%,
    rgba(13,42,38,.55) 72%, rgba(11,36,33,.90) 100%);
}
.ed-hero--photo .ed-hero-inner{ z-index:3; width:100%; padding:0 36px 76px; }
.ed-hero--photo .ed-hero-eyebrow{ color:#EAC15C; }
.ed-hero--photo .ed-hero-eyebrow::before,
.ed-hero--photo .ed-hero-eyebrow::after{ background:#EAC15C; }
.ed-hero--photo .ed-hero-title{ color:#FCF7EC; text-shadow:0 2px 30px rgba(11,36,33,.5); }
.ed-hero--photo .ed-hero-lead{ color:rgba(252,247,236,.9); }
.ed-hero--photo .ed-numbers{ margin-top:52px; border-top-color:rgba(252,247,236,.24); }
.ed-hero--photo .ed-num:not(:last-child)::after{ background:rgba(252,247,236,.24); }
.ed-hero--photo .ed-num b{ color:#FCF7EC; }
.ed-hero--photo .ed-num-lab{ color:rgba(252,247,236,.78); }
.ed-hero--photo .ed-cta-link{ color:#FCF7EC; border-color:#FCF7EC; }
.ed-hero--photo .ed-cta-link:hover{ color:#EAC15C; border-color:#EAC15C; }
.ed-hero-steam{ position:absolute; z-index:2; left:18%; top:24%; pointer-events:none; }
.ed-hero-steam i{
  position:absolute; width:16px; height:70px; border-radius:50%;
  background:rgba(255,255,255,.42); filter:blur(11px); opacity:0;
  animation: edSteam 4.4s ease-in-out infinite;
}
.ed-hero-steam i:nth-child(2){ left:26px; height:56px; animation-delay:1.5s; }
.ed-hero-steam i:nth-child(3){ left:-22px; height:62px; animation-delay:2.8s; }
@keyframes edSteam{
  0%{ transform:translateY(0) scaleX(1); opacity:0; }
  22%{ opacity:.7; }
  100%{ transform:translateY(-140px) scaleX(1.9); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .ed-hero-steam{ display:none; }
  .ed-hero-photo{ transform:none; }
}
@media (max-width:767px){
  .ed-hero.ed-hero--photo{ min-height: min(82vh, 620px); }
  .ed-hero--photo .ed-hero-inner{ padding:0 22px 46px; }
  .ed-hero--photo .ed-numbers{ margin-top:34px; }
  .ed-hero-steam{ left:8%; top:20%; }
}

.ed-section{
  position:relative; z-index:2;
  max-width:1240px; margin:0 auto;
  padding:96px 36px;
  border-top: 1px solid var(--ed-line);
}
.ed-section-head{ margin-bottom:48px; max-width:760px; }
.ed-sec-label{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ed-sec-label::before{
  content:''; width:36px; height:1px; background: var(--ed-accent);
}
.ed-sec-tag{
  font-family: var(--ed-serif);
  font-size:11.5px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color: var(--ed-accent);
}
.ed-sec-title{
  font-family: var(--ed-serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight:700; line-height:1.08; letter-spacing:-.015em;
  color: var(--ed-accent-2);
  margin:0 0 16px;
}
.ed-sec-sub{
  font-family: var(--ed-serif);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height:1.7; color: var(--ed-warm); margin:0;
}
.ed-section-cta{
  margin-top:40px; padding-top:28px;
  border-top:1px solid var(--ed-line);
  text-align:right;
}
.ed-section-cta a{
  color: var(--ed-ink); text-decoration:none;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  border-bottom:1.5px solid var(--ed-accent); padding-bottom:3px;
  transition: color .15s ease;
}
.ed-section-cta a em{ font-style:normal; color: var(--ed-accent); margin-left:4px; }
.ed-section-cta a:hover{ color: var(--ed-accent); }
@media (max-width:767px){ .ed-section{ padding:60px 22px; } }

.ed-city-list{
  display:grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ed-line);
}
.city-row{
  display:grid;
  grid-template-columns: 32px 48px 1fr auto 28px;
  align-items:center; gap:18px;
  padding:22px 8px;
  border-bottom: 1px solid var(--ed-line);
  text-decoration:none; color: var(--ed-ink);
  transition: background .15s ease;
}
.ed-city-list .city-row:nth-child(odd){ border-right: 1px solid var(--ed-line); padding-right:24px; }
.ed-city-list .city-row:nth-child(even){ padding-left:24px; }
.city-row:hover{ background: color-mix(in srgb, var(--ed-accent) 4%, transparent); }
.cr-num{
  font-family: var(--ed-serif);
  font-size:13px; font-style:italic;
  color: var(--ed-muted); letter-spacing:.04em;
}
.cr-ic{ font-size:30px; line-height:1; }
.cr-nm{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cr-name{
  font-family: var(--ed-serif);
  font-size:21px; font-weight:600; letter-spacing:.01em;
  color: var(--ed-ink); line-height:1.2;
}
.cr-sub{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ed-muted); font-weight:500;
}
.cr-stat{
  font-size:12.5px; color: var(--ed-warm);
  font-variant-numeric: tabular-nums;
  display:inline-flex; align-items:baseline; gap:5px;
}
.cr-stat b{ font-weight:700; color: var(--ed-ink); font-size:14px; }
.cr-stat i{
  font-style:normal; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--ed-muted); margin-right:4px;
}
.cr-stat em{ font-style:normal; color: var(--ed-line-2); margin:0 4px; }
.cr-arrow{
  font-size:18px; color: var(--ed-muted);
  transition: transform .2s cubic-bezier(.32,.72,0,1), color .15s ease;
}
.city-row:hover .cr-arrow{ transform: translateX(4px); color: var(--ed-accent); }
@media (max-width:767px){
  .ed-city-list{ grid-template-columns: 1fr; }
  .ed-city-list .city-row{ border-right:none !important; padding:18px 8px !important; }
  .city-row{ grid-template-columns: 24px 36px 1fr 22px; }
  .cr-stat{ display:none; }
  .cr-name{ font-size:18px; }
}

.ed-theme-list{
  display:grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ed-line);
}
.theme-row{
  display:block; padding:36px 32px 40px;
  border-bottom: 1px solid var(--ed-line);
  text-decoration:none; color: var(--ed-ink);
  transition: background .15s ease;
}
.ed-theme-list .theme-row:nth-child(odd){ border-right: 1px solid var(--ed-line); }
.theme-row:hover{ background: color-mix(in srgb, var(--ed-accent) 4%, transparent); }
.tr-meta{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:18px; font-family: var(--ed-serif);
}
.tr-num{ font-style:italic; font-size:13px; color: var(--ed-accent); }
.tr-id{
  font-size:10.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--ed-warm); flex:1;
}
.tr-count{
  font-size:11px; color: var(--ed-muted);
  letter-spacing:.05em; font-variant-numeric: tabular-nums;
}
.tr-title{
  font-family: var(--ed-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight:700; line-height:1.22; letter-spacing:-.005em;
  color: var(--ed-accent-2); margin:0 0 12px;
}
.tr-tag{
  font-family: var(--ed-serif);
  font-size:14.5px; font-style:italic;
  color: var(--ed-warm); margin:0 0 14px;
}
.tr-desc{
  font-size:13.5px; line-height:1.75;
  color: var(--ed-warm); margin:0 0 22px;
}
.tr-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  color: var(--ed-ink);
  border-bottom:1.5px solid var(--ed-accent); padding-bottom:3px;
}
.tr-cta em{ font-style:normal; color: var(--ed-accent); transition: transform .2s ease; }
.theme-row:hover .tr-cta em{ transform: translateX(4px); }
.ed-swipe-hint{ display:none; }
@media (max-width:767px){
  /* Hint「← 滑動瀏覽 →」桌機隱藏,手機顯示在 list 之上 */
  .ed-swipe-hint{
    display:block; text-align:center;
    margin-bottom:14px;
    font-family: var(--ed-serif);
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color: var(--ed-muted);
  }
  /* Theme list 手機改 horizontal scroll snap(6 主題垂直排 ~2400px 太長,改一張一張橫滑)
     overflow 外擴吃滿 viewport;每張卡 80vw 留 peek,加 snap-align start swipe 一目一張 */
  .ed-theme-list{
    display:flex; gap:14px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding:18px 22px 8px;
    margin:0 -22px;
    border-top:1px solid var(--ed-line);
    scrollbar-width:none;
  }
  .ed-theme-list::-webkit-scrollbar{ display:none; }
  /* 80vw 留 20% 給「下一張卡 peek」露邊提示可橫滑 */
  .ed-theme-list .theme-row{
    flex: 0 0 80vw; max-width:340px;
    scroll-snap-align: start;
    border: 1px solid var(--ed-line); border-radius:14px;
    overflow:hidden;
    flex-direction:column; gap:0;
  }
  .ed-theme-list .theme-row:nth-child(odd){ border-right: 1px solid var(--ed-line); }
  .theme-row{ padding:0; }
  .theme-row .tr-body{ padding:24px 22px 26px; }
}

.ed-tier-list{
  display:grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ed-line);
}
.ed-tier{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:48px 28px;
  border-bottom: 1px solid var(--ed-line);
}
.ed-tier-list .ed-tier:not(:last-child){ border-right: 1px solid var(--ed-line); }
.et-medal{
  width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; color: var(--ed-paper);
  margin-bottom:24px;
  box-shadow: 0 4px 18px rgba(31,24,20,.10);
}
.ed-tier.tier-shrine .et-medal{
  background: linear-gradient(135deg, #E6BC6A 0%, #B07F2D 100%);
  color: #1F1814;
}
.ed-tier.tier-signature .et-medal{ background: var(--ed-accent); }
.ed-tier.tier-collect .et-medal{ background: var(--ed-warm); }
.et-name{
  font-family: var(--ed-serif);
  font-size:24px; font-weight:700;
  color: var(--ed-ink); margin-bottom:8px;
}
.et-count{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ed-warm); font-weight:500; margin-bottom:14px;
  font-variant-numeric: tabular-nums;
}
.et-count b{ font-weight:700; color: var(--ed-accent); font-size:16px; letter-spacing:0; }
.et-sub{
  font-family: var(--ed-serif);
  font-size:14px; line-height:1.7; color: var(--ed-warm);
  max-width:240px;
}
@media (max-width:767px){
  .ed-tier-list{ grid-template-columns: 1fr; }
  .ed-tier-list .ed-tier:not(:last-child){ border-right:none; }
  .ed-tier{ padding:36px 22px; }
}

.ed-final{
  position:relative; z-index:2;
  max-width:880px; margin:0 auto;
  padding:120px 36px 130px;
  text-align:center;
  border-top: 1px solid var(--ed-line);
}
.ed-final-eyebrow{
  font-family: var(--ed-serif);
  font-size:11.5px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color: var(--ed-accent); margin-bottom:24px;
}
.ed-final-title{
  font-family: var(--ed-serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight:700; line-height:1.08; letter-spacing:-.02em;
  color: var(--ed-accent-2);
  margin:0 0 22px;
}
.ed-final-sub{
  font-family: var(--ed-serif);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height:1.7; color: var(--ed-warm);
  margin:0 0 44px;
}
@media (max-width:767px){
  .ed-final{ padding:80px 22px 90px; }
}

/* ============================================================
   招牌菜卡片牆(首頁,視覺改版新增)——真實照片+tier 印章徽章
   ============================================================ */
.dish-wall{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  border-top:1px solid var(--ed-line); padding-top:40px;
}
.dish-wall-card{
  position:relative; display:block; text-decoration:none; color:var(--ed-ink);
  background:var(--paper); border:1px solid var(--ed-line); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.dish-wall-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(31,24,20,.14); }
.dw-photo{
  aspect-ratio:4/3; background-size:cover; background-position:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.dish-wall-card:hover .dw-photo{ transform:scale(1.05); }
.dw-photo.dw-noimg{
  display:flex; align-items:center; justify-content:center; font-size:34px;
  background:var(--ed-paper-2);
}
/* tier 印章徽章:斜角+虛線內圈,呼應街頭點綴語彙 */
.dw-tier{
  position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  color:#fff; box-shadow:0 2px 10px rgba(20,15,10,.25);
  transform:rotate(7deg); border:2px solid rgba(255,255,255,.85);
}
.dw-tier::before{
  content:''; position:absolute; inset:3px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.7);
}
.dw-tier-shrine{ background:linear-gradient(135deg,#E6BC6A,#B07F2D); color:#221A12; }
.dw-tier-signature{ background:var(--ed-accent); }
.dw-tier-collect{ background:var(--ed-warm); }
.dw-body{ padding:16px 18px 18px; }
.dw-vi{ font-family:var(--ed-viet, var(--viet)); font-weight:800; font-size:18px; letter-spacing:.005em; line-height:1.3; color:var(--ed-ink); }
.dw-name{ font-family:var(--ed-serif); font-weight:600; color:var(--ed-warm); font-size:13px; margin-top:2px; }
.dw-city{
  display:inline-block; margin-top:10px; font-size:11px; font-weight:600; letter-spacing:.06em;
  padding:3px 10px; border-radius:999px; background:var(--ed-paper-2); color:var(--ed-accent);
}
@media (max-width:900px){
  .dish-wall{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .dish-wall{ grid-template-columns:1fr; gap:14px; }
}

/* ============================================================
   三城入口:滿版照片磚格(呼應 home-demo,取代 .city-row 清單)
   ============================================================ */
.ed-city-grid{
  display:grid; grid-template-columns:1.25fr 1fr;
  grid-template-rows:repeat(2, minmax(228px, 1fr));
  gap:16px; margin-top:40px;
}
.ec-tile{
  position:relative; display:flex; align-items:flex-end;
  border-radius:14px; overflow:hidden; min-height:228px;
  text-decoration:none; box-shadow:var(--shadow);
  transition:box-shadow .3s ease;
}
.ec-tile:hover{ box-shadow:0 18px 46px rgba(31,24,20,.18); }
.ec-tile.ec-big{ grid-row:1 / 3; }
.ec-photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.ec-tile:hover .ec-photo{ transform:scale(1.045); }
.ec-veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,14,10,0) 32%, rgba(18,14,10,.74) 100%); }
/* 查無該城實拍照時的替代磚(2026-07-27):走風土 accent 實色底,不塞不相干的照片。
   .ec-body 是白字,沒有底色會直接落在米色紙底上讀不到,故此類必須自帶深色底。 */
.ec-tile.ec-noimg{ background:linear-gradient(150deg, var(--ec-accent, var(--ed-accent)) 0%, rgba(18,14,10,.9) 128%); }
.ec-accent{ position:absolute; top:0; left:0; right:0; height:5px; background:var(--ec-accent, var(--ed-accent)); }
.ec-body{ position:relative; z-index:2; padding:26px; color:#fff;
  display:flex; flex-direction:column; }
.ec-vi{ font-family:var(--ed-viet); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; opacity:.9; }
.ec-name{ font-family:var(--ed-serif); font-weight:700; font-size:29px;
  margin:4px 0 8px; color:#fff; }
.ec-big .ec-name{ font-size:34px; }
.ec-lore{ font-size:14px; line-height:1.65; opacity:.93; max-width:34ch; }
.ec-count{ align-self:flex-start; margin-top:14px; font-size:12.5px; font-weight:600;
  padding:5px 13px; border-radius:999px; background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.ec-count em{ font-style:normal; margin-left:2px; }
@media (prefers-reduced-motion: reduce){ .ec-photo{ transition:none; } }
@media (max-width:767px){
  .ed-city-grid{ grid-template-columns:1fr; grid-template-rows:auto; }
  .ec-tile.ec-big{ grid-row:auto; }
  .ec-tile{ min-height:240px; }
  .ec-big .ec-name{ font-size:30px; }
}

/* ============================================================
   卡片牆:lead 大卡 + 一句文案 + 湯粉 hover 蒸氣(呼應 home-demo 敘事)
   ============================================================ */
.dish-wall-card.dw-lead{ grid-column:span 2; }
.dw-lead .dw-photo{ aspect-ratio:16 / 8.6; }
.dw-lead .dw-vi{ font-size:25px; }
.dw-lead .dw-body{ padding:20px 22px 22px; }
.dw-sub{
  font-family:var(--ed-serif); font-size:13.5px; line-height:1.6;
  color:var(--ed-warm); margin-top:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dw-lead .dw-sub{ font-size:15px; -webkit-line-clamp:3; max-width:54ch; }
.dw-photo{ position:relative; }
.dw-steam{ position:absolute; top:8%; left:50%; pointer-events:none; opacity:0; transition:opacity .3s ease; z-index:2; }
.dish-wall-card:hover .dw-steam{ opacity:1; }
.dw-steam i{
  position:absolute; width:9px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.6); filter:blur(7px); opacity:0;
  animation:edSteam 3.2s ease-in-out infinite;
}
.dw-steam i:nth-child(2){ left:14px; animation-delay:1.1s; }
@media (prefers-reduced-motion: reduce){ .dw-steam{ display:none; } }
@media (max-width:900px){
  .dish-wall-card.dw-lead{ grid-column:span 2; }
  .dw-lead .dw-photo{ aspect-ratio:16 / 9; }
}
@media (max-width:600px){
  .dish-wall-card.dw-lead{ grid-column:span 1; }
  .dw-lead .dw-photo{ aspect-ratio:4 / 3; }
  .dw-lead .dw-vi{ font-size:20px; }
}

/* ============================================================
   F3 變現入口卡(深度頁 + 城市頁文末)
   ============================================================ */
.aff-cta-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  margin:48px 0 12px;
  padding:24px 0 0;
  border-top:1px solid var(--line, #E5DFD3);
}
.aff-cta-card{
  display:flex; flex-direction:column;
  padding:22px 22px 24px;
  border:1px solid var(--line, #E5DFD3); border-radius:12px;
  background:var(--paper, #FFFFFF);
  text-decoration:none; color:var(--ink, #1F1814);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.aff-cta-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(31,24,20,.08);
  border-color:var(--orange, #C75B39);
}
.aff-cta-card .ac-h{
  font-family:"Noto Serif TC", Georgia, serif;
  font-size:15.5px; font-weight:700;
  color:var(--green, #1A3D3A); margin-bottom:8px;
  letter-spacing:.02em;
}
.aff-cta-card .ac-p{
  font-size:13px; line-height:1.7;
  color:var(--muted, #8A7E6F); margin:0 0 14px;
  flex:1;
}
.aff-cta-card .ac-b{
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--orange, #C75B39);
  border-bottom:1.5px solid var(--orange, #C75B39);
  padding-bottom:2px; align-self:flex-start;
}
@media (max-width:767px){
  .aff-cta-row{ grid-template-columns:1fr; gap:10px; margin:36px 0 8px; padding-top:18px; }
  .aff-cta-card{ padding:18px 18px 20px; }
}

/* ===================================================================
   2026-07-28 全站視覺重構 P0 — 首頁動效
   (hero 食物流 / 城市 coverflow / 卡片牆 stagger / 分級動效)
   =================================================================== */

/* ---- Hero 食物流:兩排斜置照片牆無限橫流,取代單張靜態圖 ---- */
.hero-food-flow{
  position:absolute; inset:-14% -8%; z-index:0;
  transform:rotate(-4deg);
  display:flex; flex-direction:column; justify-content:center; gap:20px;
  pointer-events:none; overflow:hidden;
  background:#0D2A26;
}
.hf-row{
  display:flex; gap:20px; width:max-content;
  animation: hfScroll 75s linear infinite;
}
.hf-row--rev{ animation-direction:reverse; animation-duration:92s; }
@keyframes hfScroll{ to{ transform:translateX(-50%); } }
.hf-card{
  flex:0 0 auto; width:224px; height:280px; margin:0;
  border-radius:10px; overflow:hidden;
  box-shadow:0 12px 32px rgba(6,18,16,.45);
}
.hf-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-hero--photo .ed-hero-veil{
  background: linear-gradient(180deg,
    rgba(13,42,38,.46) 0%, rgba(13,42,38,.30) 30%,
    rgba(13,42,38,.62) 72%, rgba(11,36,33,.92) 100%);
}
@media (max-width:767px){
  .hero-food-flow{ gap:12px; transform:rotate(-3deg); }
  .hf-row{ gap:12px; }
  .hf-card{ width:150px; height:190px; border-radius:8px; }
}
@media (prefers-reduced-motion: reduce){
  .hf-row{ animation:none; }
}

/* ---- 城市 coverflow:active 展開成大卡,其餘收成 accent 直排色條 ----
   伸縮邏輯只活在桌機 media(768px+);手機退化成 scroll-snap 滑軌,
   .is-active 在手機不得有任何寬度特權(2026-07-28 實測:特異性洩漏會把滑軌卡寬打壞)。 */
/* ---- 國土脊線索引 + 區 chip(2026-08-05,地理分區兩層 coverflow 第一層) ----
   脊線是裝飾性 S 形貝茲曲線(見 build.mjs SPINE_PTS 註解,非精確地理外形),25 城 dot 依緯度落點,
   dot 本身是真 <a> 直連城市頁。chip 列是兩層切換的實際互動主力(鍵盤/觸控皆可達,脊線 dot 是加值)。 */
.cf-index{ margin-bottom:18px; }
.cf-spine{ display:block; width:100%; height:64px; }
.cf-spine-line{
  fill:none; stroke:url(#cf-spine-grad); stroke-width:3; stroke-linecap:round;
}
.cf-spine-dot{ cursor:pointer; }
.cf-spine-hit{ fill:transparent; }
.cf-spine-pt{
  fill:var(--dot, var(--ed-accent)); stroke:rgba(13,42,38,.9); stroke-width:1.5;
  transition:r .3s ease, filter .3s ease;
}
.cf-spine-dot:hover .cf-spine-pt{ r:6.5; }
.cf-spine-dot.is-active .cf-spine-pt{
  r:7.5; filter:drop-shadow(0 0 6px var(--dot, var(--ed-accent)));
}
.cf-regions{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.cf-region-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px; border:1.5px solid rgba(31,24,20,.14);
  background:transparent; cursor:pointer;
  font-family:var(--ed-serif); font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--muted, #8A7E6F);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.cf-region-chip:hover{ border-color:var(--ed-accent); color:var(--ed-ink); }
.cf-region-chip.is-active{
  background:var(--ed-accent); border-color:var(--ed-accent); color:#FCF7EC;
}
.cf-rc-count{
  font-size:11px; font-weight:700; opacity:.75;
  padding:1px 6px; border-radius:999px; background:rgba(0,0,0,.12);
}
.cf-region-chip.is-active .cf-rc-count{ background:rgba(255,255,255,.22); }

.city-flow-wrap{ position:relative; }
.city-flow{ display:flex; gap:6px; outline:none; }
.cf-card{
  position:relative; display:block; text-decoration:none;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(165deg, var(--cf-accent, var(--ed-accent)) 0%, rgba(18,14,10,.92) 130%);
}
.cf-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.cf-card.cf-noimg .cf-photo{ display:none; }
.cf-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,8,6,.05) 34%, rgba(10,8,6,.46) 68%, rgba(10,8,6,.88) 100%);
}
.cf-vert{
  position:absolute; z-index:2; left:50%; top:26px; transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:var(--ed-serif); font-weight:600; font-size:15px; letter-spacing:.14em;
  color:rgba(252,247,236,.94); white-space:nowrap;
}
.cf-body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:0 34px 30px;
  display:flex; flex-direction:column; gap:6px;
}
@media (min-width:768px){
  .city-flow{ height:500px; }
  .city-flow:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--ed-accent) 45%, transparent); border-radius:16px; }
  .cf-card{
    flex:1 1 0; min-width:0;
    transition: flex-grow .7s cubic-bezier(.22,1,.36,1), flex-basis .7s cubic-bezier(.22,1,.36,1);
  }
  .cf-card.is-active{ flex:0 0 min(54%, 600px); }
  .cf-photo{
    opacity:.30; filter:saturate(.55);
    transition: opacity .6s ease, filter .6s ease, transform 6s ease;
  }
  .cf-card.is-active .cf-photo{ opacity:1; filter:none; transform:scale(1.04); }
  .cf-veil{ opacity:0; transition:opacity .6s ease; }
  .cf-card.is-active .cf-veil{ opacity:1; }
  .cf-vert{ opacity:1; transition:opacity .35s ease; }
  .cf-card.is-active .cf-vert{ opacity:0; }
  .cf-body{
    opacity:0; transform:translateY(14px);
    transition:opacity .55s ease .18s, transform .55s cubic-bezier(.22,1,.36,1) .18s;
  }
  .cf-card.is-active .cf-body{ opacity:1; transform:none; }
  /* 兩層 coverflow:非當前區的卡收起(桌機專屬——手機沿用整條 82vw scroll-snap 滑軌,
     不受區分組影響,務必只包在本 media 內,勿讓特異性洩漏進手機,見既有踩坑教訓) */
  .cf-card--hidden{ display:none; }
}
.cf-vi{
  font-family:var(--ed-serif); font-size:12.5px; font-weight:600;
  letter-spacing:.30em; text-transform:uppercase; color:#EAC15C;
}
.cf-name{
  font-family:var(--ed-serif); font-size:clamp(26px, 3vw, 38px); font-weight:700;
  color:#FCF7EC; line-height:1.15;
}
.cf-lore{
  font-size:14px; line-height:1.75; color:rgba(252,247,236,.88);
  max-width:46ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cf-count{
  margin-top:8px; font-size:13px; font-weight:600; letter-spacing:.05em;
  color:#FCF7EC; border-bottom:1.5px solid #EAC15C; align-self:flex-start; padding-bottom:3px;
}
.cf-count em{ font-style:normal; transition:transform .3s ease; display:inline-block; }
.cf-card.is-active:hover .cf-count em{ transform:translateX(5px); }
.cf-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(250,245,236,.94); color:var(--ed-ink);
  font-size:19px; line-height:1;
  box-shadow:0 8px 26px rgba(31,24,20,.28);
  transition:transform .25s ease, background .25s ease;
  display:flex; align-items:center; justify-content:center;
}
.cf-nav:hover{ transform:translateY(-50%) scale(1.08); background:#fff; }
.cf-nav-prev{ left:-10px; }
.cf-nav-next{ right:-10px; }
.city-flow-hint{ display:none; }
@media (max-width:767px){
  .city-flow{
    height:auto; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px; scrollbar-width:none;
  }
  .city-flow::-webkit-scrollbar{ display:none; }
  .cf-card{ flex:0 0 82vw; height:430px; scroll-snap-align:center; }
  .cf-photo{ opacity:1; filter:none; }
  .cf-veil{ opacity:1; }
  .cf-vert{ display:none; }
  .cf-body{ opacity:1; transform:none; padding:0 24px 24px; }
  .cf-nav{ display:none; }
  .city-flow-hint{
    display:block; text-align:center; margin-top:4px;
    font-size:12px; letter-spacing:.14em; color:var(--muted, #8A7E6F);
  }
  /* 手機索引退化(task-spec 手機備案):脊線 SVG 藏起,只留區 chip 橫列當快捷跳轉;
     滑軌本身維持現行 82vw scroll-snap 邏輯、不套用 .cf-card--hidden,25 城全可滑到。 */
  .cf-spine{ display:none; }
  .cf-regions{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin:0 -22px 4px; padding:0 22px 4px;
  }
  .cf-regions::-webkit-scrollbar{ display:none; }
  .cf-region-chip{ flex:0 0 auto; }
}
@media (prefers-reduced-motion: reduce){
  .cf-card, .cf-photo, .cf-veil, .cf-body, .cf-vert{ transition:none; }
  .cf-spine-pt, .cf-region-chip{ transition:none; }
}

/* ---- 卡片牆 v2:滿版照片磚牆(照片即卡片,文字疊底部漸層) ----
   尺寸節奏:w2-big 2×2 / w2-wide 2×1 / 標準 1×1;15 卡=20 格=4 欄×5 列滿版無洞。
   舊 .dish-wall-card 版型已棄用(DOM 不再輸出,樣式留檔備查)。 */
.dish-wall2{
  display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:214px; grid-auto-flow:dense; gap:14px;
}
.w2-card{
  position:relative; display:block; text-decoration:none;
  border-radius:12px; overflow:hidden;
  background:#221A12;
  box-shadow:0 6px 22px rgba(31,24,20,.12);
}
.w2-card.reveal{ transition-delay: calc(var(--i, 0) * 55ms); }
.w2-card.w2-big{ grid-column:span 2; grid-row:span 2; }
.w2-card.w2-wide{ grid-column:span 2; }
.w2-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition: transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.w2-card:hover .w2-photo{ transform:scale(1.07); filter:saturate(1.12); }
.w2-photo.w2-noimg{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, #6B3A2A 0%, #221A12 120%);
}
.w2-emoji{ font-style:normal; font-size:64px; opacity:.9; }
.w2-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,8,6,0) 38%, rgba(10,8,6,.38) 66%, rgba(10,8,6,.86) 100%);
  transition:opacity .4s ease;
}
.w2-tier{
  position:absolute; z-index:3; top:12px; right:12px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  background:rgba(250,245,236,.92);
  box-shadow:0 4px 14px rgba(10,8,6,.3);
}
.w2-body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:16px 18px 16px;
  display:flex; flex-direction:column; gap:3px;
}
.w2-vi{
  font-family:var(--ed-serif); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:#EAC15C;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w2-name{
  font-family:var(--ed-serif); font-size:19px; font-weight:700;
  color:#FCF7EC; line-height:1.25;
}
.w2-big .w2-vi{ font-size:12.5px; }
.w2-big .w2-name{ font-size:30px; }
.w2-wide .w2-name{ font-size:23px; }
.w2-hook{
  font-size:12.5px; line-height:1.6; color:rgba(252,247,236,.9);
  max-height:0; opacity:0; overflow:hidden; transform:translateY(6px);
  transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.w2-card:hover .w2-hook{ max-height:3.4em; opacity:1; transform:none; }
.w2-big .w2-hook{ max-height:none; opacity:1; transform:none; font-size:13.5px; }  /* 大卡 hook 常駐 */
.w2-city{
  margin-top:3px;
  font-size:11.5px; font-weight:600; letter-spacing:.08em;
  color:rgba(252,247,236,.72);
}
.w2-card .dw-steam{ opacity:0; }
.w2-card:hover .dw-steam{ opacity:1; }
@media (max-width:900px){
  .dish-wall2{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:170px; gap:10px; }
  .w2-big .w2-name{ font-size:24px; }
  .w2-hook{ display:none; }
  .w2-big .w2-hook{ display:-webkit-box; }
}
@media (prefers-reduced-motion: reduce){
  .w2-photo, .w2-hook{ transition:none; }
}

/* ---- 分級區:三卡 stagger + 徽章動效 + count-up ---- */
.ed-tier-list .ed-tier.reveal{ transition-delay: calc(var(--i, 0) * 120ms); }
.ed-tier .et-medal{ transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.ed-tier:hover .et-medal{ transform:translateY(-6px) rotate(-8deg) scale(1.12); }

/* ===================================================================
   2026-07-28 視覺重構 P1 — 城市頁(全幅視差 hero + 菜色照片滑軌)
   =================================================================== */

/* ---- 城市 hero ---- */
.city-hero{
  position:relative; overflow:hidden;
  min-height:min(62vh, 560px);
  display:flex; align-items:flex-end;
  background:linear-gradient(160deg, var(--ch-accent, var(--ed-accent)) 0%, #14100B 135%);
}
.ch-photo{
  position:absolute; left:0; right:0; top:-18%; bottom:-18%; z-index:0;
  background-size:cover; background-position:center 40%;
  will-change:transform;
}
.ch-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(10,8,6,.42) 0%, rgba(10,8,6,.12) 34%,
    rgba(10,8,6,.50) 70%, rgba(10,8,6,.88) 100%);
}
.city-hero--noimg .ch-veil{
  background:linear-gradient(180deg, rgba(10,8,6,.14) 0%, rgba(10,8,6,.42) 70%, rgba(10,8,6,.78) 100%);
}
.ch-inner{
  position:relative; z-index:2;
  width:100%; max-width:1240px; margin:0 auto;
  padding:96px 36px 44px;
}
/* 城市照署名(2026-08-06) — 只有 CC BY-SA 這類「授權要求署名」的城市照才會輸出這塊，
   見 build.mjs cityPhotoCredit()；既有 Pexels 圖免署名、不輸出，版面不變。
   規格對齊菜色頁的 .feat-hero .hero-credit：右上角、壓在 .ch-veil 之上。 */
.city-hero .hero-credit{ position:absolute; top:0; right:0; z-index:3; padding:10px 16px;
  font-size:11px; letter-spacing:.04em; color:rgba(252,247,236,.66); text-shadow:0 1px 3px rgba(18,14,11,.7); }
.city-hero .hero-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.city-hero .hero-credit a:hover{ color:#F5EFE6; }
.city-hero--noimg .hero-credit{ display:none; }
@media (max-width:767px){
  .city-hero .hero-credit{ font-size:10px; padding:7px 12px; }
}

.city-hero .crumbs{
  margin:0 0 26px; font-size:12.5px;
}
.city-hero .crumbs a{ color:rgba(252,247,236,.82); }
.city-hero .crumbs a:hover{ color:#EAC15C; }
.city-hero .crumbs span{ color:rgba(252,247,236,.65); }
.city-hero .crumbs .sep{ margin:0 8px; color:rgba(252,247,236,.4); }
.ch-eyebrow{
  font-family:var(--ed-serif); font-size:12px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:#EAC15C;
  margin-bottom:10px;
}
.ch-name{
  font-family:var(--ed-serif); font-weight:700;
  font-size:clamp(40px, 6vw, 68px); line-height:1.08;
  color:#FCF7EC; margin:0 0 6px;
  text-shadow:0 2px 30px rgba(10,8,6,.5);
}
.ch-sub{
  font-size:14px; font-weight:600; letter-spacing:.12em;
  color:rgba(252,247,236,.75); margin-bottom:16px;
}
.ch-region8{
  font-family:var(--ed-serif); font-size:11px; letter-spacing:.2em;
  color:rgba(252,247,236,.58); margin:-10px 0 16px;
}
.ch-lore{
  font-size:16px; line-height:1.85;
  color:rgba(252,247,236,.92);
  max-width:56ch; margin:0 0 22px;
}
.ch-stats{
  display:flex; gap:26px; align-items:baseline;
  border-top:1px solid rgba(252,247,236,.24); padding-top:16px;
}
.ch-stat{ font-size:13px; color:rgba(252,247,236,.78); }
.ch-stat b{
  font-family:var(--ed-serif); font-size:30px; font-weight:700;
  color:#FCF7EC; margin-right:8px;
}
@media (max-width:767px){
  .city-hero{ min-height:56vh; }
  .ch-inner{ padding:76px 20px 30px; }
  .ch-lore{ font-size:14.5px; }
}
@media (prefers-reduced-motion: reduce){
  .ch-photo{ transform:none !important; }
}

/* ---- 菜色照片滑軌 ---- */
.rail-sec{ max-width:1240px; margin:0 auto; }
.rail-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:14px;
}
.rail-head h2{ margin:0; }
.rail-btns{ display:flex; gap:8px; }
.rail-btn{
  width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(34,26,18,.22);
  background:transparent; color:var(--ed-ink);
  font-size:15px; line-height:1; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .2s ease;
  display:flex; align-items:center; justify-content:center;
}
.rail-btn:hover{ background:var(--ed-ink); color:#FBF8F1; border-color:var(--ed-ink); transform:scale(1.06); }
.dish-rail{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 14px; scrollbar-width:none;
}
.dish-rail::-webkit-scrollbar{ display:none; }
.rail-card{
  position:relative; display:block; text-decoration:none;
  flex:0 0 292px; height:360px;
  border-radius:12px; overflow:hidden;
  scroll-snap-align:start;
  background:#221A12;
  box-shadow:0 6px 22px rgba(31,24,20,.12);
}
.rail-card.reveal{ transition-delay: calc(var(--i, 0) * 45ms); }
.rc-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.rail-card:hover .rc-photo{ transform:scale(1.07); filter:saturate(1.12); }
.rc-photo.rc-noimg{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, #6B3A2A 0%, #221A12 120%);
}
.rc-emoji{ font-style:normal; font-size:56px; opacity:.9; }
.rc-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,8,6,0) 30%, rgba(10,8,6,.42) 62%, rgba(10,8,6,.9) 100%);
}
.rc-tier{
  position:absolute; z-index:3; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  background:rgba(250,245,236,.92);
  box-shadow:0 4px 14px rgba(10,8,6,.3);
}
.rc-body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:14px 16px;
  display:flex; flex-direction:column; gap:3px;
}
.rc-vi{
  font-family:var(--ed-serif); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:#EAC15C;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rc-name{
  font-family:var(--ed-serif); font-size:19px; font-weight:700;
  color:#FCF7EC; line-height:1.25;
}
.rc-area{
  font-size:11.5px; color:rgba(252,247,236,.75);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rc-note{
  margin-top:4px;
  font-size:12px; line-height:1.6; color:rgba(252,247,236,.86);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rail-card .dw-steam{ opacity:0; }
.rail-card:hover .dw-steam{ opacity:1; }
@media (max-width:767px){
  .rail-btns{ display:none; }
  .rail-card{ flex:0 0 74vw; height:330px; }
}
@media (prefers-reduced-motion: reduce){
  .rc-photo{ transition:none; }
}

/* ===================================================================
   2026-07-28 視覺重構 P2 — 深度頁(hero 視差 + 閱讀進度條 + 內文 reveal + 延伸閱讀縮圖)
   =================================================================== */

/* ---- hero 升級:更高更沉浸,img 絕對定位留視差位移餘量(motion.js data-parallax ×0.3) ---- */
.feat-hero{ height:min(66vh, 580px); overflow:hidden; }
.feat-hero img{
  position:absolute; left:0; right:0; top:-18%;
  width:100%; height:136%; object-fit:cover;
  will-change:transform;
}
.feat-hero .scrim{
  background:linear-gradient(180deg,
    rgba(10,8,6,.30) 0%, rgba(10,8,6,.06) 34%,
    rgba(10,8,6,.44) 70%, rgba(10,8,6,.82) 100%);
}
.feat-hero.noimg img{ display:none; }
@media (max-width:767px){
  .feat-hero{ height:min(52vh, 420px); }
}
@media (prefers-reduced-motion: reduce){
  .feat-hero img{ transform:none !important; }
}

/* ---- 閱讀進度條(深度頁頂部,motion.js 控制 scaleX) ---- */
.read-progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:60; pointer-events:none;
}
.read-progress i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--ed-accent, #C24E2E) 0%, #EAC15C 100%);
  transform:scaleX(0); transform-origin:0 50%;
}
@media (prefers-reduced-motion: reduce){
  .read-progress{ display:none; }
}

/* ---- 延伸閱讀縮圖卡(有真實照片的菜用照片,無照片保留 emoji 底) ---- */
.rel-card .rl-ic.rl-ph{
  width:44px; height:44px;
  background-size:cover; background-position:center;
}