:root{--ink:#182529;--blue:#173f4a;--aqua:#6bb8b0;--red:#e6533d;--cream:#f3efe5;--paper:#fffdf8;--line:rgba(24,37,41,.16)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans TC",sans-serif;line-height:1.8;text-align:center}
a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:0;z-index:20;height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;color:white;background:var(--blue);transition:.3s}
.topbar.scrolled{height:64px;background:rgba(23,63,74,.96);box-shadow:0 5px 25px rgba(0,0,0,.12)}
.brand{display:flex;align-items:baseline;gap:10px;font-weight:900;letter-spacing:.15em}
.brand small{font-size:11px;font-weight:500;opacity:.75}
.topbar nav{display:flex;gap:26px;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.nav-gift{padding:9px 16px;border:1px solid rgba(255,255,255,.5);border-radius:99px}
.menu{display:none;background:transparent;border:0;color:white;font-size:24px}
.hero{position:relative;overflow:hidden;background:#000}
.hero-video{display:block;width:100%;height:auto;max-height:calc(100svh - 78px);aspect-ratio:16/9;object-fit:contain;background:#000}
.kicker,.section-heading>p,.gift-head>p{font-size:12px;font-weight:900;letter-spacing:.28em}
.section-pad{padding:120px max(6vw,28px)}
.intro{display:grid;grid-template-columns:100px 1.2fr .8fr;gap:5vw;align-items:start}
.intro-number{font-size:5rem;line-height:1;font-weight:900;color:transparent;-webkit-text-stroke:1px var(--aqua)}
.intro h1,.section-heading h2,.gift-head h2{font-family:"Noto Serif TC",serif;font-size:clamp(2.3rem,4.5vw,5rem);line-height:1.35;margin:10px auto 22px;text-wrap:balance;word-break:auto-phrase}
.intro h2{font-family:"Noto Serif TC",serif;font-size:clamp(1.25rem,2vw,1.9rem);font-weight:500;margin:0 0 30px;color:var(--red)}
.intro-copy>p:last-child{max-width:660px;margin-left:auto;margin-right:auto;font-size:1.05rem}
.gift-teaser{background:var(--blue);color:white;padding:36px;box-shadow:18px 18px 0 #d9e9e5}
.gift-teaser .tag{display:inline-block;color:#ffe270;font-size:11px;font-weight:900;letter-spacing:.18em;margin-bottom:20px}
.gift-teaser strong{font-family:"Noto Serif TC",serif;font-size:1.35rem;line-height:1.7}
.gift-teaser p{font-size:14px;color:rgba(255,255,255,.75)}
.gift-teaser a{font-weight:700;border-bottom:1px solid white}
.screenings{background:var(--red);color:white;padding:70px max(6vw,28px);display:grid;grid-template-columns:2fr 1fr;gap:50px;align-items:end}
.screening-title span{font-size:12px;letter-spacing:.2em}
.screening-title h2{font-family:"Noto Serif TC",serif;font-size:2.3rem;margin:8px 0}
.dates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dates>div{border-top:1px solid rgba(255,255,255,.55);padding-top:16px}
.dates time{font-size:1.55rem;font-weight:900}
.dates small{margin:0 5px}
.dates p{margin:3px 0}
.screen-note{font-family:"Noto Serif TC",serif;font-size:clamp(1.65rem,2.8vw,2.65rem);line-height:1.45;margin:0;font-weight:900;text-wrap:pretty}
.route{background:var(--cream)}
.section-heading{display:flex;justify-content:center;align-items:flex-start;border-top:1px solid var(--ink);padding-top:15px;text-align:center}
.section-heading h2{width:100%;margin-top:0;word-break:auto-phrase;text-wrap:pretty}
.section-heading>p{color:var(--red)}
blockquote{max-width:780px;margin:10px auto 70px;font-family:"Noto Serif TC",serif;font-size:1.25rem;line-height:2;border-top:3px solid var(--red);border-bottom:1px solid rgba(24,37,41,.18);padding:28px;text-align:center;text-wrap:pretty}
blockquote cite{display:block;font-family:"Noto Sans TC",sans-serif;font-size:13px;font-style:normal;font-weight:700;margin-top:10px}
.campaign-visual{margin:0 0 80px;display:grid;grid-template-columns:minmax(280px,.78fr) 1.22fr;min-height:680px;background:#fff;box-shadow:0 20px 60px rgba(20,42,48,.11);overflow:hidden}
.campaign-visual.reverse{grid-template-columns:1.22fr minmax(280px,.78fr)}
.campaign-visual.reverse img{order:2}
.campaign-visual img{display:block;width:100%;height:100%;max-height:780px;object-fit:cover}
.campaign-visual figcaption{padding:clamp(40px,7vw,100px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.campaign-visual figcaption span{font-size:11px;font-weight:900;letter-spacing:.22em;color:var(--red)}
.campaign-visual figcaption h3{font-family:"Noto Serif TC",serif;font-size:clamp(1.7rem,2.8vw,3rem);line-height:1.45;margin:20px 0 24px;word-break:auto-phrase;text-wrap:pretty}
.campaign-visual figcaption .accent-title{color:var(--red)}
.campaign-visual figcaption .single-line-title{white-space:nowrap}
.campaign-visual figcaption p{max-width:520px;font-size:1rem;text-wrap:pretty}
.shops .campaign-visual{background:#f3efe5;color:var(--ink)}
.shops .campaign-visual figcaption h3,.events .section-heading h2{color:var(--red)}
.events .campaign-visual{background:var(--blue);color:white}
.events .campaign-visual figcaption p{color:rgba(255,255,255,.75)}
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.route-card{min-height:0;padding:0;background:var(--paper);display:flex;flex-direction:column;align-items:stretch;text-align:center;position:relative;overflow:hidden;color:var(--ink)}
.route-card::before{content:"";display:block;width:100%;aspect-ratio:4/3;background-size:cover;background-position:center}
.route-card span{font-weight:900;color:var(--red);font-size:12px}
.route-card p{margin:8px 0 2px;font-size:13px;font-weight:700}
.route-card h3{font-family:"Noto Serif TC",serif;font-size:1.65rem;line-height:1.55;margin:5px auto 14px;text-wrap:balance;word-break:auto-phrase}
.route-card small{font-size:13px;line-height:1.8}
.route-card.tall{grid-row:auto;min-height:0}
.route-card.wide{grid-column:span 2}
.route-card.dark{background:var(--blue);color:white}
.photo-a::before{background-image:url('assets/route-xinzhongshan-day.jpg')}
.photo-b::before{background-image:url('assets/route-dadaocheng-new.jpg')}
.photo-c::before{background-image:url('assets/route-chifeng-street.jpg')}
.photo-d::before{background-image:url('assets/route-baoan.jpg')}
.photo-e::before{background-image:url('assets/route-xinyi-night.jpg');background-position:center}
.route-card>div{position:relative;padding:30px 28px 34px;flex:1}
.shops{background:var(--blue);color:white}
.section-heading.light{border-color:rgba(255,255,255,.45)}
.shop-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.25)}
.shop-list article{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 0 34px;overflow:hidden;border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}
.shop-list article:nth-child(3n){border-right:0}
.shop-list b{color:#7dd2c6}
.card-photo{display:block;width:100%;height:220px;object-fit:cover;object-position:center;filter:saturate(1.06) contrast(1.025) brightness(1.015);transition:transform .45s ease,filter .45s ease}
.shop-list article{overflow:hidden}
.shop-list article:hover .card-photo{transform:scale(1.025);filter:saturate(1.1) contrast(1.035) brightness(1.02)}
.shop-yaodehe,.shop-dahuahang,.shop-dumbo,.shop-r9,.shop-dintaifung,.shop-xinchao{object-position:center 48%}
.shop-aka{object-position:center 58%}
.shop-gardencity,.shop-traditional-market,.shop-yongle{object-position:center 52%}
.empty-photo{background:rgba(255,255,255,.035)}
.shop-list b{margin-top:8px}
.shop-list span{font-size:11px;color:#ffe270;letter-spacing:.14em}
.shop-list h3{font-family:"Noto Serif TC",serif;font-size:1.4rem;line-height:1.4;margin:7px auto;text-wrap:balance;word-break:auto-phrase}
.shop-list article>div{padding:0 28px}.shop-list p,.shop-list address{font-size:13px;color:rgba(255,255,255,.72);font-style:normal}
.shop-list address{color:#83c8c1}
.events{overflow:hidden}
.event-track{display:flex;gap:16px;overflow:auto;padding-bottom:25px;scroll-snap-type:x mandatory}
.event-track article{flex:0 0 min(360px,82vw);min-height:420px;padding:0 0 32px;background:var(--cream);scroll-snap-align:start;border-top:5px solid var(--red);overflow:hidden;text-align:center}
.event-track time{font-size:12px;font-weight:900;color:var(--red);letter-spacing:.18em}
.event-track time{display:block;margin:24px 20px 0;line-height:1.65;text-wrap:balance;word-break:auto-phrase}
.event-track h3{font-family:"Noto Serif TC",serif;font-size:1.55rem;margin:28px 24px 15px;text-wrap:balance;word-break:auto-phrase}
.event-track p{font-size:14px;margin:0 24px;text-wrap:pretty}
.gift{background:#f0c950;position:relative}
.gift-head{max-width:none}
.gift-head h2{font-size:clamp(1rem,4.5vw,5rem);white-space:nowrap}
.gift-head>p:last-child{max-width:680px}
.steps{display:flex;align-items:center;justify-content:space-between;margin:65px 0;padding:32px 38px;background:white}
.steps>div{display:flex;align-items:center;gap:18px;font-weight:700}
.steps b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--red);color:white}
.steps i{font-style:normal;color:var(--red)}
.locations{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.locations details{background:rgba(255,255,255,.76);padding:0 25px}
.locations summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;display:flex;justify-content:space-between;gap:15px}
.locations summary span{font-size:12px;color:#806800;white-space:nowrap}
.locations details p{border-top:1px solid rgba(0,0,0,.12);padding:15px 0;margin:0;font-size:14px}
footer{padding:70px max(6vw,28px);background:#102f37;color:white;display:flex;align-items:end;justify-content:center;text-align:center}
.footer-title{font-family:"Noto Serif TC",serif;font-size:clamp(2rem,4vw,4rem)}
footer p,footer a{font-size:12px;letter-spacing:.12em}
.credits{display:block;max-width:800px;margin:20px auto 0;color:rgba(255,255,255,.5);font-size:10px;line-height:1.6}
.credits a{text-decoration:underline;font-size:10px;letter-spacing:0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.topbar nav{display:none}
.topbar nav.open{display:flex;position:absolute;top:64px;left:0;right:0;padding:20px 6vw;background:var(--blue);flex-direction:column;align-items:flex-start}
.menu{display:block}
.intro{grid-template-columns:1fr}
.intro-number{display:none}
.screenings{grid-template-columns:1fr}
.dates{grid-template-columns:1fr}
.screen-note{grid-column:1}
.route-grid{grid-template-columns:1fr}
.campaign-visual,.campaign-visual.reverse{grid-template-columns:minmax(0,1fr);min-height:0;width:100%;max-width:100%;min-width:0;overflow:visible}
.campaign-visual>*{min-width:0;max-width:100%}
.campaign-visual.reverse img{order:0}
.campaign-visual img{width:100%;max-width:100%;height:auto;max-height:none;object-fit:contain;object-position:center}
.campaign-visual figcaption{padding:42px 22px 50px;min-width:0;max-width:100%}
.campaign-visual figcaption h3,.campaign-visual figcaption .single-line-title{white-space:normal;word-break:normal;overflow-wrap:break-word;text-wrap:pretty;font-size:clamp(1.35rem,6.4vw,1.7rem)}
.route-card.tall{grid-row:auto;min-height:0}
.route-card.wide{grid-column:auto}
.shop-list{grid-template-columns:1fr}
.shop-list article{border-right:0}
.locations{grid-template-columns:1fr}
.steps{align-items:stretch}
.steps i{display:none}
.steps>div{flex-direction:column;text-align:center}
.section-heading{display:block}
.section-heading h2{width:100%}
.section-pad{padding-top:85px;padding-bottom:85px}
}
@media(max-width:600px){.intro h1,.section-heading h2,.gift-head h2{font-size:2.2rem}
.gift-head h2{font-size:clamp(1rem,4.5vw,5rem)}
.screenings{padding-top:55px;padding-bottom:55px}
.steps{flex-direction:column;gap:22px}
.steps>div{flex-direction:row;text-align:left}
.locations summary{display:block}
.locations summary span{display:block;margin-top:4px}
footer{display:block}
.footer-title{margin-bottom:35px}
}