/* C 案｜時尚旅行誌 —— 大圖面、黑體、林鐵紅 */
:root {
  --paper: #FFFFFF;
  --ink: #0E0E0E;
  --grey: #F0EFEC;
  --mid: #6B675F;
  --line: #DDD9D2;
  --red: #B5121B;
  --red-d: #8F0D15;
  --w: 1200px;
  --g: max(clamp(40px, 5vw, 64px), calc((100vw - var(--w)) / 2));
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", system-ui, sans-serif;
  --geo: "Jost", "Futura", "Avenir Next", "Noto Sans TC", sans-serif;
  --didone: "Abril Fatface", "Didot", "Bodoni 72", "Noto Sans TC", serif;
  --ital: "Playfair Display", "Didot", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { font-variant-numeric: lining-nums; margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.8 var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2 { font-weight: 900; letter-spacing: -.02em; line-height: 1.16; text-wrap: balance; }
h3 { font-weight: 700; line-height: 1.4; }
.sr { position: absolute; left: -9999px; top: 8px; z-index: 99; background: var(--ink); color: #fff; padding: 8px 14px; }
.sr:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.wrap { width: min(var(--w), 100% - var(--g) * 2); margin-inline: auto; }
.it { font-family: var(--ital); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.3; letter-spacing: 0; }
.bn { font-family: var(--didone); font-weight: 400; font-synthesis: none; letter-spacing: -.02em; line-height: .86; font-variant-numeric: lining-nums; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 0; background: var(--red); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .04em; text-decoration: none; transition: background .2s, color .2s, transform .15s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--red-d); }
.btn:active { transform: scale(.97); }
.btn-w { background: #fff; color: var(--ink); }
.btn-w:hover { background: var(--grey); }
.btn-k { background: var(--ink); color: #fff; }
.btn-k:hover { background: #2A2A2A; }
.btn-s { background: var(--grey); color: var(--ink); }
.btn-s:hover { background: var(--line); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.btn span[aria-hidden] { transition: transform .2s var(--ease); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 32px; height: 72px; padding: 0 var(--g); color: #fff; transition: background .3s, color .3s, transform .35s var(--ease); }
.nav::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0)); transition: opacity .3s; } /* taste-skill-ignore: photo scrim behind nav */
.nav.solid { background: #fff; color: var(--ink); border-color: var(--line); }
.nav.solid::before { opacity: 0; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand .logo { display: block; height: 44px; width: auto; }
.brand .logo .t, .brand .logo .k { fill: currentColor; transition: fill .3s; }
.nav.solid .brand .logo .t, .nav.open .brand .logo .t { fill: #009684; }
.nav.solid .brand .logo .k, .nav.open .brand .logo .k { fill: #231815; }
.brand i { font-family: var(--didone); font-weight: 400; font-synthesis: none; font-style: normal; font-size: 19px; letter-spacing: .14em; text-transform: uppercase; }
.links { display: flex; gap: 28px; margin-left: auto; }
.links a { white-space: nowrap; font-size: 15px; font-weight: 500; text-decoration: none; letter-spacing: .06em; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); } /* taste-skill-ignore: underline grow */
.links a:hover { background-size: 100% 1px; }
.right { display: flex; align-items: center; gap: 18px; }
.wallet, .lb, .menu-btn { white-space: nowrap; border: 0; background: none; padding: 8px 0; font-size: 15px; font-weight: 500; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; }
.wallet .n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; border-radius: 12px; transition: transform .3s var(--ease); }
.wallet.bump .n { transform: scale(1.35); }
.lang { position: relative; }
.lb .globe { flex: none; margin-right: -2px; }
.lang-m { display: none; }
.lang-list { position: absolute; right: 0; top: 44px; background: var(--grey); color: var(--ink); min-width: 140px; padding: 6px 0; }
.lang-list button { display: block; width: 100%; text-align: left; padding: 10px 16px; background: none; border: 0; font-size: 15px; }
.lang-list button:hover { background: var(--line); }
.lang-list [aria-current="true"], .lang-list [aria-current="true"]:hover { font-weight: 700; background: var(--red); color: #fff; }
.menu-btn { display: none; }

/* photos & openers */
.ph { position: relative; overflow: hidden; background: #222; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.op .ph img { transform: scale(1.06); transition: transform 1.6s var(--ease); will-change: transform; }
.op.in .ph img { transform: scale(1) translate3d(0, var(--py, 0), 0); }
.lines > span { display: block; }
.cover .ph.par, .opener .ph.par, .r-hero .ph.par { inset: -6% 0; }
.js .lines > span { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .lines.in > span { opacity: 1; transform: none; }
.lines > span:nth-child(2) { transition-delay: .12s; }
.lines > span:nth-child(3) { transition-delay: .24s; }
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.js [data-rise].in { opacity: 1; transform: none; }

/* C1 cover */
.cover { position: relative; height: clamp(640px, 100svh, 1000px); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.cover .ph { position: absolute; inset: 0; }
.cover .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.18) 40%, rgba(0,0,0,.08) 56%, rgba(0,0,0,.66)); } /* taste-skill-ignore: photo scrim */
.mast { position: absolute; left: 0; right: 0; top: 92px; z-index: 2; text-align: center; font-size: clamp(15px, 1.4vw, 20px); font-weight: 700; letter-spacing: .32em; text-indent: .32em; color: #fff; }
.kv { position: absolute; left: 0; right: 0; top: clamp(112px, 14svh, 160px); z-index: 2; text-align: center; padding: 0 20px; }
.kv h1 { --kvw: clamp(248px, 41.6vw, 608px); margin: calc(var(--kvw) * .131) auto 0; width: var(--kvw); font-size: 96px; line-height: 1; }
.mark100 { position: absolute; z-index: 2; top: 92px; right: var(--g); width: auto; height: clamp(76px, 8vw, 120px); }
.kv h1 img { width: 100%; height: auto; }
.in-cover { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: end; padding-bottom: 64px; }
.date { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; }
.date .d { font-family: var(--geo); font-weight: 300; font-size: clamp(52px, 6vw, 88px); line-height: 1; letter-spacing: -.01em; }
.date .d i { font-style: normal; margin: 0 .12em; }
.date b { font-size: clamp(22px, 2vw, 28px); font-weight: 900; letter-spacing: .12em; }
.cover .dek { max-width: 560px; margin: 18px 0 28px; font-size: 18px; line-height: 1.75; }
.lines-r { }
.lines-r li { padding: 2px 0; }
.lines-r a { display: block; padding: 16px 0; text-decoration: none; }
.lines-r b { display: block; font-size: 19px; font-weight: 700; line-height: 1.4; }
.lines-r span { font-size: 14px; opacity: .9; }
.lines-r a:hover b { text-decoration: underline; text-underline-offset: 5px; }
.credit { position: absolute; z-index: 2; right: var(--g); bottom: 24px; font-size: 13px; opacity: .85; }

/* C2 desk */
.desk { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; padding: 120px 0; }
.desk h2 { display: flex; align-items: flex-end; gap: 18px; }
.desk h2 .bn { font-size: clamp(180px, 22vw, 300px); color: var(--red); }
.desk h2 .t { font-size: clamp(32px, 3.4vw, 48px); padding-bottom: 14px; }
.desk .l p { margin-top: 32px; max-width: 440px; }
.toc-tabs { display: flex; gap: 4px; margin-bottom: 0; }
.toc-tabs button { flex: 1; min-height: 56px; border: 0; background: var(--grey); font-size: 17px; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, color .2s; }
.toc-tabs button small { font-size: 15px; font-weight: 500; opacity: .75; margin-left: -2px; }
.toc-tabs button:hover { background: var(--line); }
.toc-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.toc { border-top: 2px solid var(--ink); margin-bottom: 32px; min-height: 388px; }
.toc .swapin { animation: tocIn .45s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes tocIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toc li { }
.toc a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 18px 0; text-decoration: none; align-items: center; }
.toc b { font-size: 24px; font-weight: 900; line-height: 1.35; letter-spacing: -.01em; }
.toc span { grid-column: 1; font-size: 16px; color: var(--mid); line-height: 1.6; }
.toc i { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: 24px; color: var(--red); transition: transform .25s var(--ease); }
.toc a:hover b { color: var(--red); }
.toc a:hover i { transform: translateX(6px); }

/* C3 opener */
.opener { position: relative; min-height: clamp(620px, 92svh, 900px); color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.opener .ph { position: absolute; inset: 0; }
.opener .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,.7)); } /* taste-skill-ignore: photo scrim */
.opener .wrap { position: relative; padding: 0 0 88px; }
.big { font-size: clamp(46px, 7.8vw, 112px); line-height: 1.08; }
.opener .dek { max-width: 640px; margin: 28px 0 32px; font-size: 19px; }

/* C4/C5 spreads */
.spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; }
.spread.alt { background: var(--grey); }
.spread.alt > .ph { order: 2; }
.spread > .ph { min-height: 560px; }
.spread .tx { padding: 112px calc(var(--g)) 112px 72px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.spread.alt .tx { padding: 112px 72px 112px var(--g); }
.spread h2 { font-size: clamp(36px, 3.6vw, 52px); }
.spread .meta { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--red); letter-spacing: .06em; }
.spread .dek { margin-top: 24px; max-width: 520px; }
.spread .stops { margin: 28px 0 36px; max-width: 520px; }
.spread .stops li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 17px; }
.spread .stops li span { color: var(--mid); font-size: 15px; white-space: nowrap; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }
.spread .mini { margin-top: 40px; width: 180px; }
.spread .mini .ph { aspect-ratio: 4 / 5; }
.spread .mini figcaption { margin-top: 8px; font-size: 13px; color: var(--mid); }

/* C6 issue cards */
.issue { padding: 120px 0 48px; }
.hd h2 { font-size: clamp(40px, 4.6vw, 64px); }
.hd .it { margin-top: 6px; color: var(--mid); }
.hd > p:not(.it) { margin-top: 20px; max-width: 640px; }
.issue .hd, .index .hd { margin-bottom: 48px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; }
.card { display: flex; flex-direction: column; min-width: 0; }
.card .ph { aspect-ratio: 4 / 5; }
.card .ph img { transition: transform .7s var(--ease); }
.card:hover .ph img { transform: scale(1.04); }
.card .lab { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--red); letter-spacing: .08em; }
.card h3 { margin-top: 6px; font-size: 26px; font-weight: 900; letter-spacing: -.01em; line-height: 1.3; }
.card h3 a { text-decoration: none; }
.card p { margin: 10px 0 20px; font-size: 16px; line-height: 1.7; color: var(--mid); flex: 1; }
.card .btn { width: 100%; }

/* index */
.index { padding: 72px 0 120px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button { min-height: 48px; padding: 0 22px; border: 0; background: var(--grey); font-size: 16px; font-weight: 500; transition: background .2s, color .2s; }
.seg button + button { }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 700; }
.zonebar { margin-top: 16px; font-size: 15px; color: var(--mid); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zonebar button { border: 0; background: none; padding: 0; text-decoration: underline; text-underline-offset: 4px; font-size: 15px; color: var(--ink); }
.rows { margin-top: 32px; border-top: 2px solid var(--ink); }
.rows li { }
.rows a { display: grid; grid-template-columns: 96px 1fr 200px 48px; gap: 24px; align-items: center; padding: 16px 0; text-decoration: none; }
.rows .th { width: 96px; height: 72px; }
.rows .th img { transition: transform .6s var(--ease); }
.rows a:hover .th img { transform: scale(1.06); }
.rows b { display: block; font-size: 21px; font-weight: 900; line-height: 1.4; }
.rows .s { display: block; font-size: 15px; color: var(--mid); line-height: 1.6; }
.rows .z { font-size: 15px; font-weight: 500; }
.rows i { font-style: normal; font-size: 22px; color: var(--red); justify-self: end; transition: transform .25s var(--ease); }
.rows a:hover b { color: var(--red); }
.rows a:hover i { transform: translateX(6px); }
.rows .more { padding: 24px 0 0; border: 0; }

/* C7 rail */
.rail { background: var(--ink); color: #fff; padding-bottom: 120px; }
.band { height: clamp(320px, 42vw, 560px); position: relative; overflow: hidden; }
.band .ph { position: absolute; inset: -6% 0; }
.rail .hd { padding: 88px 0 56px; max-width: 760px; }
.rail .hd h2 { font-size: clamp(44px, 5.6vw, 80px); }
.rail .hd .it { color: #CFCAC2; }
.rail .hd > p:not(.it) { color: #E6E2DB; }
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tk { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 0 #C9C3BA, 0 2px 0 #B3ADA4, 0 3px 0 #9E988F, 0 12px 22px rgba(0,0,0,.5); position: relative; background: #E6E2DC url(img/paper-light.jpg) center / 900px auto repeat; color: var(--ink); padding: 28px 28px 24px; display: flex; flex-direction: column; min-width: 0; } /* taste-skill-ignore: card thickness */
.tkh { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tk .alt { font-family: var(--didone); font-weight: 400; font-synthesis: none; color: var(--red); font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.tk .alt small { font-size: 26px; margin-left: 4px; }
.tk h3 { font-size: 26px; font-weight: 900; text-align: right; white-space: nowrap; }
.tk .perf { position: relative; margin: 22px -28px 18px; border-top: 2px dotted #8E887F; }
.tk .perf::before, .tk .perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.tk .perf::before { left: -11px; } .tk .perf::after { right: -11px; }
.tk p { font-size: 16px; line-height: 1.7; color: #34312C; flex: 1; }
.tk .to { margin: 16px 0 14px; font-size: 15px; font-weight: 700; }
.tk .to span { color: var(--red); }
.tk .btn { width: 100%; }
.trains { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 36px; font-size: 16px; color: #E6E2DB; }
.trains b { color: #fff; margin-right: 8px; }
.trains a { text-underline-offset: 4px; }

/* C8 zou */
.zou { display: grid; grid-template-columns: 1fr 1fr; min-height: 820px; }
.zou > .ph { min-height: 560px; }
.zou .tx { padding: 112px var(--g) 112px 72px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.zou h2 { font-size: clamp(40px, 4.6vw, 64px); }
.zou .it { margin-top: 6px; color: var(--mid); }
.zou .tx > p:not(.it) { margin-top: 20px; max-width: 540px; }
.zones { margin-top: 36px; display: grid; gap: 12px; }
.zones li { background: var(--grey); padding: 20px 24px; display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 20px; align-items: center; }
.zones .bn { font-size: 52px; color: var(--red); grid-row: 1 / 3; grid-column: 1; }
.zones b { grid-column: 2; font-size: 21px; font-weight: 900; line-height: 1.4; }
.zones span { grid-column: 2; font-size: 15px; color: var(--mid); }
.zones .btn { grid-row: 1 / 3; grid-column: 3; }

/* C9 prep */
.prep { background: var(--grey); padding: 120px 0; }
.prep .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px 72px; }
.prep .hd > p:not(.it) { margin: 20px 0 32px; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-self: end; }
.ways > div { border-top: 2px solid var(--ink); padding-top: 18px; min-width: 0; }
.ways h3 { font-size: 22px; font-weight: 900; }
.ways p { margin-top: 10px; font-size: 16px; line-height: 1.75; }
.units { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; padding-top: 24px; }
.units a { text-underline-offset: 4px; }

/* footer */
.foot { background: var(--ink); color: #fff; padding: 88px 0 40px; }
.mast-w { display: table; margin: 0 auto 72px; }
.mast-f { font-family: var(--didone); font-weight: 400; font-synthesis: none; font-size: clamp(88px, 19.4vw, 280px); line-height: .82; letter-spacing: .01em; text-align: center; }
.issue-f { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-top: 24px; color: #F0605A; }
.issue-f span { font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.issue-f b { font-size: clamp(20px, 2.4vw, 34px); font-weight: 700; letter-spacing: .02em; }
.colo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 28px; }
.colo dt { font-size: 14px; color: #B8B3AB; }
.colo dd { font-size: 17px; font-weight: 700; margin-top: 4px; }
.org { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 40px; }
.svc { margin-left: auto; }
.svc dt { font-size: 14px; color: #B8B3AB; }
.svc dd { font-size: 17px; font-weight: 700; margin-top: 4px; }
.org img { height: 36px; width: auto; }
.org p { font-size: 14px; line-height: 1.7; color: #C9C4BC; }
.foot .row { margin-top: 40px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 15px; }
.foot .soc, .foot .langs { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot .langs { color: #B8B3AB; }
.foot .langs span { cursor: pointer; }
.foot .langs span:hover, .foot .langs [aria-current="true"] { color: #fff; }
.l-en .it[lang="en"] { display: none; }
.foot a { text-underline-offset: 4px; }

/* dialog & toast */
dialog { border: 0; padding: 0; width: min(560px, 100% - 32px); max-height: 82vh; background: #fff; color: var(--ink); }
dialog::backdrop { background: rgba(14,14,14,.6); }
.dbody { padding: 40px 36px 36px; overflow: auto; max-height: 82vh; }
.dbody h3 { font-size: 32px; font-weight: 900; letter-spacing: -.01em; }
.dbody > div > p { margin-top: 16px; font-size: 16px; color: var(--mid); }
.dbody ul { margin-top: 20px; border-top: 2px solid var(--ink); }
.dbody li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; }
.dbody li a { text-decoration: none; min-width: 0; }
.dbody li b { display: block; font-size: 19px; font-weight: 900; line-height: 1.4; }
.dbody li span { font-size: 14px; color: var(--mid); }
.dbody li button { border: 0; background: none; padding: 8px 0; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
dialog .x { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; padding: 14px 22px; font-size: 15px; max-width: calc(100% - 32px); visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s; }
.toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .3s var(--ease); }
.flyer { position: fixed; z-index: 70; pointer-events: none; background: #fff; color: var(--ink); border: 2px solid var(--red); padding: 10px 16px; font-size: 15px; font-weight: 900; white-space: nowrap; }

/* ═════════ ROUTE (feature article) ═════════ */
.r-hero { position: relative; height: clamp(640px, 100svh, 1000px); color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.r-hero .ph { position: absolute; inset: 0; }
.r-hero .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0) 30%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.72)); } /* taste-skill-ignore: photo scrim */
.r-hero .wrap { position: relative; padding-bottom: 80px; }
.r-hero h1 { font-size: clamp(40px, 8.3vw, 120px); line-height: 1.06; }
.r-hero .dek { margin: 24px 0 32px; max-width: 720px; font-size: 19px; font-weight: 500; line-height: 1.7; }
.r-hero .by { margin: 10px 0 32px; font-size: 15px; opacity: .9; }
.r-intro { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; padding: 112px 0 96px; }
.r-intro h2 { font-size: clamp(34px, 3.4vw, 48px); }
.r-intro .series { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--red); letter-spacing: .06em; }
.facts { display: flex; margin-top: 40px; }
.facts div { min-width: 0; padding: 0 44px; }
.facts div:first-child { padding-left: 0; }
.facts div + div { border-left: 1px solid #DDD9D2; } /* taste-skill-ignore: divider between figures, requested by client */
.facts .bn { display: block; font-size: clamp(64px, 6.6vw, 96px); }
.facts span { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.stand { font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.7; letter-spacing: 0; }
.stand + .tagline { margin-top: 28px; font-size: 15px; color: var(--mid); }
.day-op { position: relative; height: clamp(440px, 72svh, 760px); color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.day-op .ph { position: absolute; inset: -6% 0; }
.day-op .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,.64)); } /* taste-skill-ignore: photo scrim */
.day-op .wrap { position: relative; padding-bottom: 64px; }
.day-op h2 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.08; }
.day-op .it { margin-top: 10px; font-size: 30px; }
.body { display: grid; grid-template-columns: 7fr 4fr; gap: 96px; padding: 96px 0 120px; align-items: start; }
.body .col { min-width: 0; }
.stop + .stop { margin-top: 88px; }
.stop figure { margin-bottom: 28px; aspect-ratio: 3 / 2; }
.stop figure img { transition: opacity .4s; }
.stop h3 { font-size: clamp(28px, 2.6vw, 36px); font-weight: 900; letter-spacing: -.01em; line-height: 1.3; }
.stop .slot { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--red); letter-spacing: .06em; }
.stop .p { margin-top: 18px; font-size: 19px; line-height: 1.85; }
.pick { display: inline-flex; gap: 4px; margin-bottom: 24px; max-width: 100%; }
.pick button { min-height: 48px; padding: 0 20px; border: 0; background: var(--grey); font-size: 16px; font-weight: 500; transition: background .2s, color .2s; min-width: 0; }
.pick button + button { }
.pick button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 700; }
.pick-why { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; }
.swap { transition: opacity .35s var(--ease); }
.swap.fade { opacity: 0; }
.info { margin-top: 28px; background: var(--grey); padding: 24px 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.info dt { font-size: 13px; color: var(--mid); letter-spacing: .06em; }
.info dd { font-size: 16px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.info .acts { grid-column: 1 / -1; margin-top: 6px; }
.quote { margin: 88px 0; font-size: clamp(28px, 3.6vw, 52px); font-weight: 900; line-height: 1.3; letter-spacing: -.02em; color: var(--red); border-top: 2px solid var(--red); padding-top: 28px; }
.quote span { display: block; }
.cheat { border-top: 2px solid var(--ink); padding-top: 20px; }
.side { position: relative; align-self: stretch; }
.side .cheat.float { position: fixed; z-index: 30; background: #fff; padding: 20px 24px 24px; margin-left: -24px; box-shadow: 0 18px 48px rgba(0,0,0,.16); } /* taste-skill-ignore: floating panel needs separation over photos */
.cheat h3 { font-size: 22px; font-weight: 900; }
.cheat ol { margin: 16px 0 24px; }
.cheat .dl { font-size: 13px; font-weight: 700; color: var(--mid); letter-spacing: .08em; margin: 16px 0 4px; }
.cheat li { }
.cheat li a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 11px 0; text-decoration: none; font-size: 16px; line-height: 1.5; transition: color .25s; }
.cheat li a span { font-size: 13px; color: var(--mid); padding-top: 2px; }
.cheat li.on a { color: var(--red); font-weight: 700; }
.cheat li.on a span { color: var(--red); }
.cheat .btn { width: 100%; }
.night { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; color: #fff; }
.night .ph { position: absolute; inset: -6% 0; }
.night .ph::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); } /* taste-skill-ignore: photo scrim */
.night .box { position: relative; background: #fff; color: var(--ink); padding: 44px 44px 40px; width: min(480px, 100%); }
.night h2 { font-size: 36px; }
.night p { margin: 14px 0 28px; font-size: 17px; }
.trip { padding: 96px 0 120px; }
.trip .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
.trip .stop + .stop { margin-top: 0; }
.trip .stop { display: flex; flex-direction: column; }
.trip .stop figure { aspect-ratio: 3 / 4; margin-bottom: 22px; }
.trip .stop h3 { font-size: 26px; }
.trip .stop .p { font-size: 16px; line-height: 1.75; color: #3A3833; flex: 1; }
.trip .stop .info { padding: 18px 20px; }
.info > .w { grid-column: 1 / -1; }
.info dd a { color: inherit; text-underline-offset: 3px; }
.flist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.flist li { display: grid; gap: 4px; align-content: start; }
.flist b { font-size: 17px; }
.flist span { font-size: 15px; color: var(--mid); line-height: 1.6; }
.flist small { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.flist small em { font-style: normal; color: var(--mid); margin-right: 8px; }
.flist small a { color: inherit; text-underline-offset: 3px; }
.trip .flist { grid-template-columns: 1fr; }
.trip .stop .info .acts .btn { width: 100%; }
.trip .pick button { padding: 0 14px; font-size: 15px; }
.keep { background: var(--ink); color: #fff; padding: 120px 0; }
.keep .wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: center; }
.keep h2 { font-size: clamp(40px, 4.4vw, 60px); }
.keep .it { margin-top: 6px; color: #CFCAC2; }
.keep .hd > p:not(.it) { margin-top: 20px; color: #E6E2DB; }
.ticket { display: grid; grid-template-columns: 1fr 220px; background: transparent; color: var(--ink); position: relative; min-width: 0; }
.ticket .main { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 0 #C9C3BA, 0 2px 0 #B3ADA4, 0 3px 0 #9E988F, 0 12px 22px rgba(0,0,0,.5); background: #E6E2DC url(img/paper-light.jpg) center / 900px auto repeat; padding: 36px 40px; min-width: 0; } /* taste-skill-ignore: card thickness */
.ticket .main .z { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--red); letter-spacing: .08em; }
.ticket .main h3 { font-size: 32px; font-weight: 900; line-height: 1.3; letter-spacing: -.01em; }
.ticket .main ol { margin-top: 18px; }
.ticket .main li { font-size: 15px; line-height: 1.6; padding: 6px 0; }
.ticket .main li b { margin-right: 10px; }
.ticket .stub { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 0 #C9C3BA, 0 2px 0 #B3ADA4, 0 3px 0 #9E988F, 0 12px 22px rgba(0,0,0,.5); background: #E6E2DC url(img/paper-light.jpg) center / 900px auto repeat; position: relative; border-left: 2px dotted #8E887F; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: transform .7s var(--ease), opacity .7s; transform-origin: 0 100%; } /* taste-skill-ignore: card thickness */
.ticket .stub::before, .ticket .stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.ticket .stub::before { top: -11px; } .ticket .stub::after { bottom: -11px; }
.ticket .stub .bn { font-size: 120px; color: var(--red); }
.ticket .stub small { font-family: var(--didone); font-weight: 400; font-synthesis: none; font-size: 20px; letter-spacing: .2em; margin-top: 8px; }
.ticket .stub em { font-style: normal; font-size: 13px; color: #45413B; margin-top: 14px; }
.keep .acts { margin-top: 24px; grid-column: 2; }
.keep .acts .btn-s { background: #2A2A2A; color: #fff; }
.keep .acts .btn-s:hover { background: #3A3A3A; }
.after { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; padding: 112px 0 120px; }
.after h2 { font-size: clamp(34px, 3.4vw, 48px); }
.after ul.how { margin-top: 24px; border-top: 2px solid var(--ink); }
.after ul.how li { padding: 16px 0; font-size: 17px; line-height: 1.75; }
.after .shops { margin-top: 32px; }
.after .shops h3 { font-size: 20px; font-weight: 900; }
.after .shops p { margin-top: 8px; font-size: 16px; color: var(--mid); }
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.rel .card h3 { font-size: 21px; }
.rel .card .ph { aspect-ratio: 3 / 4; }
.rel .card .lab { margin-top: 14px; }
.mbar { display: none; }

/* frame (artifact) */
.frame [data-noframe] { display: none !important; }

/* ═════════ responsive ═════════ */
@media (max-width: 1100px) {
  .links { gap: 20px; }
  .in-cover { grid-template-columns: 1fr; }
  .lines-r { display: none; }
  .desk, .prep .wrap, .r-intro, .after { grid-template-columns: 1fr; gap: 48px; }
  .after { gap: 96px; }
  .desk .l p { max-width: 640px; }
  .spread, .zou { grid-template-columns: 1fr; min-height: 0; }
  .spread > .ph, .zou > .ph { min-height: 0; aspect-ratio: 4 / 3; }
  .spread.alt > .ph { order: 0; }
  .spread .tx, .spread.alt .tx, .zou .tx { padding: 64px 40px 88px; }
  .tickets { grid-template-columns: repeat(2, 1fr); }
  .body { grid-template-columns: 1fr; gap: 0; padding-bottom: 96px; }
  .body .side { display: none; }
  .keep .wrap { grid-template-columns: 1fr; gap: 40px; }
  .keep .acts { grid-column: 1; }
  .rows a { grid-template-columns: 80px 1fr 40px; }
  .rows .th { width: 80px; height: 64px; }
  .rows .z { display: none; }
  .mbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--grey); transform: translateY(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
  .mbar.on { transform: none; visibility: visible; transition: transform .35s var(--ease); }
  .mbar .bar { display: flex; align-items: stretch; height: 64px; }
  .mbar .bar button { flex: 1; border: 0; background: var(--grey); text-align: left; padding: 0 20px; font-size: 15px; min-width: 0; }
  .mbar .bar button b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbar .bar button span { font-size: 13px; color: var(--mid); }
  .mbar .bar a { flex: 0 0 auto; min-height: 64px; }
  .mbar .sheet { max-height: 60vh; overflow: auto; padding: 8px 20px 16px; }
  .mbar .sheet[hidden] { display: none; }
  .mbar .cheat { position: static; border: 0; padding: 0; }
  .route .foot { padding-bottom: 104px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .kv h1 { --kvw: min(66vw, 660px); }
}
@media (max-width: 1020px) {
  .nav { gap: 16px; }
  .links { position: fixed; inset: 72px 0 auto; flex-direction: column; gap: 0; background: var(--grey); color: var(--ink); padding: 8px 20px 20px; display: none; }
  .nav.open .links { display: flex; }
  .nav.open { background: #fff; color: var(--ink); }
  .nav.open::before { opacity: 0; }
  .links a { display: block; padding: 14px 0; font-size: 18px; background: none; }
  .menu-btn { display: inline-flex; }
  .right { margin-left: auto; }
  .brand i { display: none; }
}
@media (min-width: 1021px) and (max-width: 1240px) {
  :is(.l-en, .l-th) .nav { gap: 16px; }
  :is(.l-en, .l-th) .links { position: fixed; inset: 72px 0 auto; flex-direction: column; gap: 0; background: var(--grey); color: var(--ink); padding: 8px 20px 20px; display: none; }
  :is(.l-en, .l-th) .nav.open .links { display: flex; }
  :is(.l-en, .l-th) .nav.open { background: #fff; color: var(--ink); }
  :is(.l-en, .l-th) .nav.open::before { opacity: 0; }
  :is(.l-en, .l-th) .links a { display: block; padding: 14px 0; font-size: 18px; background: none; }
  :is(.l-en, .l-th) .menu-btn { display: inline-flex; }
  :is(.l-en, .l-th) .right { margin-left: auto; }
  :is(.l-en, .l-th) .brand i { display: none; }
}
@media (max-width: 860px) {
  .lang-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 16px 0 4px; }
  .lang-m .globe { width: 20px; height: 20px; }
  .lang-m button { border: 0; background: none; padding: 6px 0; font-size: 16px; }
  .lang-m button[aria-current="true"] { font-weight: 700; background: var(--red); color: #fff; padding: 6px 10px; }
  .cards, .rel { grid-template-columns: repeat(2, 1fr); }
  .trip .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways { grid-template-columns: 1fr; }
  .colo { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .flist { grid-template-columns: 1fr; }
  body { font-size: 17px; }
  :root { --g: 36px; }
  .wrap { width: calc(100% - var(--g) * 2); }
  .nav { height: 64px; padding: 0 var(--g); }
  .kv { padding: 0 var(--g); }
  .links { padding: 8px var(--g) 20px; }
  .mbar .bar button { padding: 0 var(--g); }
  .mbar .sheet { padding: 8px var(--g) 16px; }
  .brand .logo { height: 36px; }
  .links { inset: 64px 0 auto; }
  .right { gap: 14px; }
  .lang { display: none; }
  html { scroll-padding-top: 64px; }
  .kv { top: 112px; }
  .kv h1 { --kvw: 100%; }
  .mark100 { top: 76px; height: 56px; }
    .in-cover { padding-bottom: 44px; }
  .cover .dek { margin: 12px 0 22px; }
  .opener .dek { font-size: 18px; }
  .desk { padding: 128px 0 80px; }
  .desk h2 .bn { font-size: 168px; }
  .desk h2 .t { font-size: 30px; padding-bottom: 8px; }
  .toc b { font-size: 21px; }
  .toc { min-height: 0; }
  .spread .tx, .spread.alt .tx, .zou .tx { padding: 48px var(--g) 72px; }
  .spread .mini { display: none; }
  .acts .btn { flex: 1 1 100%; }
  .issue { padding: 80px 0 32px; }
  .cards, .rel { grid-template-columns: 1fr; gap: 48px; }
  .card .ph { aspect-ratio: 4 / 3; }
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .seg button { padding: 0 8px;  }
  .seg button + button { border-left: 0; }
  .seg button:not(:nth-child(3n+1)) { }
  .rows a { grid-template-columns: 64px 1fr 24px; gap: 14px; }
  .rows .th { width: 64px; height: 64px; }
  .rows b { font-size: 18px; }
  .rows .s { font-size: 14px; }
  .tickets { grid-template-columns: 1fr; gap: 56px; }
  .tk { padding: 22px 22px 20px; }
  .tk .alt { font-size: 52px; }
  .tk .perf { margin: 18px -22px 14px; }
  .zones li { grid-template-columns: 44px 1fr; padding: 18px; }
  .zones .bn { font-size: 44px; grid-row: 1 / 3; }
  .zones .btn { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; }
  .prep { padding: 80px 0; }
  .foot { padding-top: 64px; }
  .mast-w { margin-bottom: 48px; }
  .svc { margin-left: 0; width: 100%; }
  .colo { grid-template-columns: 1fr; gap: 16px; }
  .org img { height: 26px; }
  .r-hero .wrap { padding-bottom: 48px; }
  .r-intro { padding: 72px 0 64px; gap: 32px; }
  .facts div { padding: 0 14px; }
  .facts span { font-size: 14px; }
  .facts .bn { font-size: 52px; }
  .body { padding: 64px 0 72px; }
  .stop + .stop { margin-top: 64px; }
  .stop .p { font-size: 17px; }
  .info { padding: 20px; gap: 12px 20px; }
  .quote { margin: 64px 0; }
  .pick { display: flex; width: 100%; }
  .pick button { flex: 1; padding: 0 10px; font-size: 15px; }
  .trip { padding: 64px 0 80px; }
  .trip .grid { grid-template-columns: 1fr; gap: 56px; }
  .trip .stop figure { aspect-ratio: 4 / 3; }
  .night { min-height: 520px; }
  .night .box { padding: 32px 24px; }
  .keep { padding: 80px 0; }
  .ticket { grid-template-columns: 1fr; }
  .ticket .main { padding: 28px 24px 44px; }
  .ticket .main h3 { font-size: 26px; }
  .ticket .stub { border-left: 0; border-top: 2px dotted #8E887F; flex-direction: row; gap: 16px; padding: 36px 24px 24px; justify-content: flex-start; }
  .ticket .stub::before { top: -12px; left: -11px; } .ticket .stub::after { top: -12px; bottom: auto; left: auto; right: -11px; }
  .ticket .stub .bn { font-size: 56px; }
  .ticket .stub em { margin-top: 0; text-align: left; }
  .after { padding: 72px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .op .ph img { transform: none !important; }
  .js [data-rise], .js .lines > span { opacity: 1; transform: none; }
}
/* ═════════ PRINT / PDF（A4 直式） ═════════ */
.print-only { display: none; }
@page { size: A4 portrait; margin: 14mm 14mm 16mm; }
@media print {
  html, body { background: #fff !important; font-size: 10.5pt; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .mbar, .toast, .cheat, .side, .acts, .pick, .pick-why, .foot .row, .foot .soc, .foot .langs, dialog, .flyer { display: none !important; }
  .js [data-rise], .js .lines > span, .op .ph img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ph, .ph.par { transform: none !important; }
  .wrap { width: 100% !important; }
  .print-only { display: block; }

  /* 封面：整頁滿版照片，保留標題與導言 */
  /* Safari 不列印絕對定位的照片：改成同一格疊放 */
  .r-hero, .day-op, .night { display: grid !important; grid-template: 1fr / 1fr; align-items: end; overflow: hidden; }
  .r-hero > *, .day-op > *, .night > * { grid-area: 1 / 1; }
  .r-hero .ph, .day-op .ph, .night .ph { position: relative !important; inset: auto !important; height: 100%; background-color: #222; background-position: center; background-size: cover; background-repeat: no-repeat; }
  .r-hero .ph img, .day-op .ph img, .night .ph img { display: none !important; } /* Safari：照片改由背景圖列印 */
  /* Safari 存成 PDF 時，半透明漸層遮罩會被壓成全黑：列印時拿掉遮罩，改用文字陰影維持可讀 */
  .r-hero .ph::after, .day-op .ph::after, .night .ph::after { display: none !important; }
  .r-hero h1, .r-hero .dek, .r-hero .print-brand, .day-op h2, .day-op .it { text-shadow: 0 0 2px #000, 0 1px 10px #000, 0 0 24px #000; }
  .r-hero .wrap, .day-op .wrap, .night .wrap { position: relative; z-index: 1; }
  .r-hero .print-brand { grid-area: 1 / 1; align-self: start; }
  .r-hero { height: 232mm; min-height: 0; break-after: page; color: #fff; }
  .r-hero .wrap { padding: 0 12mm 16mm !important; width: 100% !important; }
  .r-hero h1 { font-size: 46pt; }
  .r-hero .dek { font-size: 12pt; max-width: 150mm; }
  .r-hero .print-brand { position: relative; margin: 10mm 12mm 0; z-index: 2; font-size: 12pt; font-weight: 900; letter-spacing: .08em; color: #fff; }

  /* 內頁 */
  .r-intro { display: block; padding: 0 0 8mm; }
  .body .col, .r-intro > div { display: block; }
  .r-intro > div + div { margin-top: 8mm; }
  .r-intro h2 { font-size: 24pt; }
  .facts { margin-top: 6mm; }
  .facts .bn { font-size: 40pt; }
  .stand { font-size: 12.5pt; }
  .day-op { height: 62mm; min-height: 0; break-inside: avoid; margin-top: 4mm; }
  .day-op .wrap { padding: 0 8mm 7mm !important; }
  .day-op h2 { font-size: 26pt; }
  .day-op h2 > span { display: inline; }
  .day-op h2 > span + span::before { content: "　"; }
  .day-op .it { font-size: 13pt; }
  .body { display: block; padding: 8mm 0 4mm; }
  .stop { break-inside: avoid; }
  .stop + .stop { margin-top: 8mm; }
  .stop figure { aspect-ratio: 16 / 6; margin-bottom: 4mm; }
  .stop h3 { font-size: 15pt; }
  .stop .p { font-size: 10.5pt; margin-top: 2mm; }
  .info { margin-top: 3mm; padding: 3mm 4mm; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2mm 5mm; }
  .info > .w { grid-column: 1 / -1; }
  .flist { gap: 0 5mm; } .flist li { padding: 2mm 0; break-inside: avoid; }
  .info dt { font-size: 8pt; } .info dd { font-size: 9.5pt; }
  .quote { margin: 8mm 0; font-size: 18pt; break-inside: avoid; }
  .trip { padding: 8mm 0 4mm; }
  .trip .grid { display: block; font-size: 0; }
  .trip .grid > .stop { display: inline-block !important; vertical-align: top; width: 31.5%; margin: 0 2.7% 6mm 0 !important; font-size: 10.5pt; }
  .trip .grid > .stop:nth-child(3n) { margin-right: 0 !important; }
  .trip .stop figure { aspect-ratio: 4 / 3; }
  .trip .stop h3 { font-size: 12.5pt; }
  .trip .stop .p { font-size: 9pt; }
  .trip .stop .info { grid-template-columns: 1fr; padding: 3mm; margin-top: 3mm !important; }
  .trip .stop .info .acts { margin-top: 0 !important; }
  .trip .grid > .stop { padding-top: 0 !important; }
  .night { min-height: 0; height: auto; padding: 0; break-inside: avoid; }
  .night .wrap { padding: 6mm 6mm !important; }
  .night .box { padding: 5mm 6mm; width: 100%; }
  .night h2 { font-size: 15pt; }

  /* 行程票：白底，省墨 */
  .keep { background: #fff; color: var(--ink); padding: 8mm 0; break-inside: avoid; break-before: page; }
  .keep .wrap { display: block; }
  .keep .hd { margin-bottom: 6mm; }
  .keep h2 { font-size: 22pt; } .keep .it, .keep .hd > p:not(.it) { color: var(--mid); }
  .ticket { grid-template-columns: 1fr 48mm; border: 1.5pt solid var(--ink); }
  .ticket .stub::before, .ticket .stub::after { display: none; }
  .ticket .stub .bn { font-size: 54pt; }
  .after { display: block; padding: 8mm 0 0; }
  .after > div + div { margin-top: 8mm; }
  .after h2 { font-size: 18pt; }
  .rel { display: block; font-size: 0; }
  .rel > .card { display: inline-block; vertical-align: top; width: 31.5%; margin-right: 2.7%; font-size: 10.5pt; }
  .rel > .card:nth-child(3n) { margin-right: 0; }
  .rel .card .ph { aspect-ratio: 4 / 3; display: block; }
  .card { break-inside: avoid; }

  /* 頁尾：白底，大字與 logo 依紙張寬度縮放 */
  .foot { background: #fff; color: var(--ink); padding: 8mm 0 0; break-inside: avoid; }
  .mast-w { display: block; margin: 0 0 6mm; }
  .mast-f { font-size: 96pt; text-align: left; }
  .issue-f { justify-content: flex-start; color: var(--red); margin-top: 3mm; }
  .svc dt { color: var(--mid); } .svc dd { color: var(--ink); }
  .colo { padding-top: 0; grid-template-columns: repeat(3, 1fr); }
  .night .btn { display: none; }
  .after h2, .keep h2, .r-intro h2 { break-after: avoid; }
  .colo dt { color: var(--mid); }
  .org { margin-top: 6mm; }
  .org img { height: 9mm !important; filter: invert(1); }
  .org p { color: var(--ink); }
}
@media (min-width: 601px) { .lang-m { display: none !important; } }

.ticket .main li { border-color: rgba(14,14,14,.12); }
@media (max-width: 400px) { .brand .logo { height: 30px; } .nav .right { gap: 14px; } }

/* ═════════ V2.1 修正（2026-11-03）═════════ */

/* #13 封面重新編排：主視覺與文字改為上下排列，不再用絕對定位疊在一起。
   主視覺寬度同時受視窗寬與視窗高限制，矮視窗會自動縮小；空間真的不夠時封面往下長，不會重疊。 */
.cover { height: auto; min-height: clamp(560px, 100svh, 1000px); display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); justify-content: stretch; padding-top: 96px; }
.kv { position: relative; top: auto; left: auto; right: auto; align-self: center; padding: 24px 20px; }
.kv h1 { --kvw: clamp(200px, min(41.6vw, (100svh - 470px) * 2), 608px); margin: 0 auto; }
.mark100 { top: 92px; }
.in-cover { display: block; padding-bottom: 56px; }
.date .d { font-size: clamp(44px, min(6vw, 9svh), 88px); }
.cover .dek { margin: 14px 0 24px; }
@media (min-width: 601px) and (max-width: 1100px) {
  .kv h1 { --kvw: clamp(200px, min(66vw, (100svh - 470px) * 2), 660px); }
  .kv { padding-inline: 96px; }
}
@media (max-width: 600px) {
  .cover { padding-top: 148px; }
  .kv { padding: 8px var(--g) 20px; }
  .kv h1 { --kvw: min(100%, max(220px, (100svh - 440px) * 2.2)); }
}
/* 路線頁開頁同樣改成最小高度，標題過長或視窗太矮時往下長 */
.r-hero { height: auto; min-height: clamp(560px, 100svh, 1000px); padding-top: 120px; }
.r-hero h1 { font-size: clamp(40px, min(8.3vw, 13svh), 120px); }

/* #14 錨點不被固定選單蓋住 */
main [id], .stop { scroll-margin-top: 88px; }
@media (max-width: 600px) { main [id], .stop { scroll-margin-top: 76px; } }

/* 標題斷行平衡，避免單字落行 */
h3, .toc b, .rows b, .zones b, .spread .dek { text-wrap: balance; }

/* #3 午餐建議：不是停留點，不提供導航 */
.stop.meal { background: var(--grey); padding: 28px 32px 32px; }
.stop.meal .meal-lab { font-size: 15px; font-weight: 700; color: var(--red); letter-spacing: .06em; }
.stop.meal h3 { margin-top: 6px; font-size: clamp(24px, 2.2vw, 30px); }
.stop.meal .p { margin-top: 12px; font-size: 17px; }
.trip .stop.meal { padding: 24px; align-self: start; }
.cheat li.meal a { color: var(--mid); }
@media (max-width: 600px) { .stop.meal { padding: 24px var(--g); margin-inline: calc(var(--g) * -1); } }

/* #21 頁尾服務電話可點撥 */
.svc dd a { text-decoration: none; }
.svc dd a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 鄒遊季：交通提示 */
.zones-note { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--mid); }

/* 封面：按鈕移到右側，主副標貼齊底部，主視覺可再放大 */
.in-cover { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; padding-bottom: 48px; }
.cover .dek { margin-bottom: 0; }
.cover-cta { margin-bottom: 4px; }
.kv h1 { --kvw: clamp(200px, min(41.6vw, (100svh - 390px) * 2), 608px); }
@media (min-width: 601px) and (max-width: 1100px) {
  .kv h1 { --kvw: clamp(200px, min(66vw, (100svh - 390px) * 2), 660px); }
}
@media (max-width: 600px) {
  .in-cover { grid-template-columns: 1fr; gap: 22px; padding-bottom: 40px; }
  .cover-cta { justify-self: start; }
  .kv h1 { --kvw: min(100%, max(220px, (100svh - 400px) * 2.2)); }
}