@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=DM+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

:root { --gold:#966324; --gold-light:#c38a43; --cocoa:#3e2119; --deep:#2a1710; --paper:#e7decf; --paper-light:#f5efe4; --white:#fdfcfa; --muted:#7c6858; --line:#d3c3ac; --serif:'Cormorant Garamond','Noto Sans TC',serif; --sans:'Noto Sans TC','DM Sans',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--cocoa); background:var(--paper); font-family:var(--sans); line-height:1.8; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { position:fixed; inset:0 0 auto; z-index:50; display:flex; align-items:center; justify-content:space-between; min-height:74px; padding:10px max(4vw,24px); color:var(--paper); background:rgba(42,23,16,.93); border-bottom:1px solid rgba(195,138,67,.18); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:13px; color:var(--gold-light); font-family:'DM Sans',sans-serif; font-size:.83rem; font-weight:600; letter-spacing:.2em; }
.brand-g { display:grid; width:39px; height:39px; place-items:center; color:var(--deep); background:var(--gold-light); border-radius:45% 45% 45% 45% / 42% 42% 50% 50%; font-family:var(--serif); font-size:1.6rem; font-weight:600; letter-spacing:0; }
.brand small { display:block; margin-top:1px; color:#8f7968; font-size:.48rem; letter-spacing:.28em; }
.site-header nav { display:flex; align-items:center; gap:27px; color:#b5a18e; font-size:.75rem; letter-spacing:.08em; }
.site-header nav a:hover { color:var(--gold-light); }
.nav-cta { padding:8px 14px; color:var(--paper)!important; border:1px solid rgba(195,138,67,.45); }
.menu-toggle { display:none; padding:7px 10px; color:var(--paper); background:none; border:1px solid rgba(255,255,255,.2); }
.eyebrow { margin:0 0 17px; color:var(--gold-light); font-family:'DM Sans',sans-serif; font-size:.67rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.72fr); align-items:center; min-height:100vh; padding:125px max(7vw,32px) 115px; overflow:hidden; color:var(--paper); background:var(--deep); }
.hero::after { content:''; position:absolute; inset:auto 0 0; height:38%; background:linear-gradient(180deg,transparent,rgba(150,99,36,.07)); pointer-events:none; }
.hero-copy { position:relative; z-index:3; max-width:780px; }
.hero h1 { margin:0 0 27px; font-family:var(--serif); font-size:clamp(3.6rem,7vw,7.2rem); font-weight:500; line-height:.98; letter-spacing:-.025em; }
.hero h1 em,.belief h2 em { color:var(--gold-light); font-style:italic; }
.hero-lead { max-width:680px; margin:0 0 34px; color:#c6b7aa; font-size:clamp(.98rem,1.3vw,1.15rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; min-height:49px; align-items:center; justify-content:center; padding:11px 21px; font-size:.82rem; font-weight:600; }
.button-gold { color:var(--deep); background:var(--gold-light); }
.button-line { color:var(--paper); border:1px solid rgba(231,222,207,.32); }
.hero-word { position:relative; z-index:2; color:rgba(231,222,207,.06); font-family:'DM Sans',sans-serif; font-size:clamp(4rem,9vw,9rem); font-weight:600; line-height:.78; letter-spacing:-.07em; text-align:right; }
.hero-word span,.hero-word b { display:block; }
.hero-word b { color:rgba(195,138,67,.16); }
.hero-word small { display:block; margin-top:28px; color:#725743; font-size:.55rem; letter-spacing:.28em; }
.hero-orbit { position:absolute; top:50%; right:-18vw; width:62vw; aspect-ratio:1; transform:translateY(-50%); border:1px solid rgba(195,138,67,.12); border-radius:50%; }
.hero-orbit span { position:absolute; inset:14%; border:1px solid rgba(231,222,207,.04); border-radius:50%; }
.hero-orbit span:nth-child(2) { inset:28%; }
.hero-orbit span:nth-child(3) { inset:42%; background:rgba(150,99,36,.07); }
.hero-times { position:absolute; z-index:4; right:max(7vw,32px); bottom:0; left:max(7vw,32px); display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(195,138,67,.22); }
.hero-times span { display:flex; gap:13px; align-items:center; padding:20px 2vw; color:#8f7968; border-right:1px solid rgba(195,138,67,.16); font-size:.72rem; }
.hero-times span:last-child { border-right:0; }
.hero-times b { color:var(--gold-light); font-family:'DM Sans',sans-serif; font-size:1rem; }
.belief { display:grid; grid-template-columns:minmax(210px,.45fr) minmax(0,1.55fr); gap:6vw; padding:120px max(7vw,32px); background:var(--paper); }
.belief>.eyebrow { padding-top:12px; border-top:2px solid var(--gold); }
.belief h2 { grid-column:2; max-width:850px; margin:-56px 0 42px; font-family:var(--serif); font-size:clamp(2.8rem,5vw,5.3rem); font-weight:500; line-height:1.05; }
.belief-copy { grid-column:2; display:grid; grid-template-columns:1fr 1fr; gap:34px; max-width:920px; color:var(--muted); }
.belief-copy p { margin:0; }
.section-intro { max-width:940px; margin-bottom:58px; }
.section-intro h2,.why-heading h2,.mood-copy h2,.visit h2 { margin:0 0 20px; font-family:var(--serif); font-size:clamp(3rem,5.5vw,5.7rem); font-weight:500; line-height:1.02; }
.section-intro>p:last-child,.split>p { max-width:680px; color:var(--muted); }
.moments { padding:120px max(7vw,32px); background:var(--paper-light); }
.moment-list { display:grid; gap:20px; }
.moment-card { position:relative; display:grid; grid-template-columns:90px minmax(0,1fr) minmax(180px,.55fr); min-height:430px; padding:52px; overflow:hidden; border:1px solid var(--line); }
.moment-number { color:var(--gold); font-family:var(--serif); font-size:1.5rem; }
.moment-copy { position:relative; z-index:2; max-width:670px; }
.moment-time { margin:0 0 18px; color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase; }
.moment-card h3 { margin:0 0 24px; font-family:var(--serif); font-size:clamp(2.5rem,4vw,4.5rem); font-weight:500; line-height:1.05; }
.moment-card p:not(.moment-time) { max-width:560px; color:var(--muted); }
.moment-pair { display:inline-block; margin-top:28px; padding:9px 14px; color:var(--cocoa); background:rgba(255,255,255,.45); border:1px solid var(--line); font-size:.78rem; }
.moment-card.morning { background:#f8f1e4; }
.moment-card.afternoon { background:#e9decc; }
.moment-card.night { color:var(--paper); background:var(--deep); border-color:#4c3025; }
.moment-card.night p:not(.moment-time) { color:#bca997; }
.moment-card.night .moment-pair { color:var(--paper); background:rgba(255,255,255,.05); border-color:rgba(195,138,67,.28); }
.moment-sun,.moment-ring,.moment-moon { place-self:center; width:min(22vw,260px); aspect-ratio:1; border-radius:50%; }
.moment-sun { background:radial-gradient(circle at 38% 35%,#f6dfb6,var(--gold-light) 50%,#966324); box-shadow:0 25px 80px rgba(150,99,36,.22); }
.moment-ring { border:42px solid rgba(150,99,36,.24); box-shadow:inset 0 0 0 1px rgba(150,99,36,.22); }
.moment-moon { position:relative; background:var(--gold-light); box-shadow:0 0 80px rgba(195,138,67,.18); }
.moment-moon::after { content:''; position:absolute; top:-9%; right:-9%; width:100%; height:100%; background:var(--deep); border-radius:50%; }
.why-section { padding:120px max(7vw,32px); background:var(--cocoa); color:var(--paper); }
.why-heading { display:grid; grid-template-columns:.7fr 1.3fr; gap:6vw; align-items:end; }
.why-heading .eyebrow { align-self:start; }
.why-heading h2 { grid-column:2; margin-top:-44px; }
.why-flow { display:grid; grid-template-columns:1fr 50px 1fr 50px 1fr; align-items:stretch; margin-top:60px; border-top:1px solid rgba(195,138,67,.24); border-bottom:1px solid rgba(195,138,67,.24); }
.why-flow article { padding:42px 25px; }
.why-flow article span { color:var(--gold-light); font-size:.67rem; letter-spacing:.2em; }
.why-flow h3 { margin:40px 0 12px; font-family:var(--serif); font-size:2.2rem; font-weight:500; }
.why-flow p { color:#bca997; font-size:.88rem; }
.why-flow i { display:grid; place-items:center; color:var(--gold-light); font-style:normal; }
.commitment { padding:120px max(7vw,32px); background:var(--white); }
.commitment-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.commitment-grid article { min-height:310px; padding:34px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.commitment-grid b { color:var(--gold); font-family:var(--serif); font-size:1.5rem; }
.commitment-grid h3 { margin:58px 0 14px; font-size:1.1rem; }
.commitment-grid p { color:var(--muted); font-size:.88rem; }
.mood-tool { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:7vw; padding:110px max(7vw,32px); color:var(--paper); background:var(--deep); }
.mood-copy p:last-child { color:#bca997; }
.mood-panel { align-self:center; }
.mood-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.mood-tabs button { padding:10px 14px; color:#ac9885; background:transparent; border:1px solid rgba(231,222,207,.2); cursor:pointer; }
.mood-tabs button.active { color:var(--deep); background:var(--gold-light); border-color:var(--gold-light); }
.mood-result { min-height:300px; padding:40px; background:var(--paper); color:var(--cocoa); }
.mood-label { color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.22em; }
.mood-result h3 { margin:36px 0 12px; font-family:var(--serif); font-size:clamp(2.3rem,4vw,4rem); font-weight:500; line-height:1.1; }
.mood-result p:not(.mood-label) { max-width:580px; color:var(--muted); }
.mood-result span { display:block; margin-top:32px; color:var(--gold); font-family:'DM Sans',sans-serif; font-size:1.1rem; font-weight:600; }
.menu-section { padding:120px max(7vw,32px); background:var(--paper-light); }
.section-intro.split { display:grid; grid-template-columns:1.15fr .85fr; gap:6vw; align-items:end; max-width:none; }
.donut-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.donut-grid article { position:relative; min-height:230px; padding:28px 24px; background:rgba(255,255,255,.25); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.donut-index { color:var(--gold); font-family:var(--serif); font-size:1.35rem; }
.donut-grid h3 { margin:55px 0 3px; font-size:1rem; }
.donut-grid p { margin:0; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.7rem; }
.donut-grid b { position:absolute; right:24px; bottom:25px; color:var(--gold); font-family:var(--serif); font-size:1.5rem; }
.box-row { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; background:var(--cocoa); color:var(--paper); }
.box-row span { padding:16px 20px; border-right:1px solid rgba(255,255,255,.12); font-size:.78rem; text-align:center; }
.drink-band { display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:center; margin-top:70px; padding:50px; color:var(--paper); background:var(--deep); }
.drink-band h3 { margin:0; font-family:var(--serif); font-size:clamp(2rem,3vw,3.2rem); font-weight:500; }
.drink-band ul { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; list-style:none; color:#bca997; font-size:.82rem; }
.drink-band li { padding-bottom:8px; border-bottom:1px solid rgba(195,138,67,.18); }
.visit { display:grid; grid-template-columns:.75fr 1.25fr; gap:7vw; align-items:center; padding:120px max(7vw,32px); color:var(--paper); background:var(--cocoa); }
.visit-time { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:13px; }
.visit-time span { color:var(--gold-light); font-family:var(--serif); font-size:3.2rem; }
.visit-time i { height:1px; background:rgba(195,138,67,.3); }
.visit-time p { grid-column:1/-1; margin:22px 0 0; color:#9c8876; font-size:.8rem; text-align:center; }
.visit address { margin:25px 0 30px; color:#bca997; font-style:normal; }
.visit-actions { display:flex; flex-wrap:wrap; gap:12px; }
footer { display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:center; padding:42px max(7vw,32px); color:#6f5947; background:var(--deep); }
footer>p { margin:0; color:var(--gold); font-family:var(--serif); font-size:1.25rem; font-style:italic; text-align:center; }
footer>small { font-family:'DM Sans',sans-serif; font-size:.62rem; letter-spacing:.18em; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
@media(max-width:900px){.moment-card{grid-template-columns:60px 1fr}.moment-card>div:last-child{display:none}.donut-grid{grid-template-columns:repeat(2,1fr)}.mood-tool{grid-template-columns:1fr}.visit{grid-template-columns:1fr}.why-flow{grid-template-columns:1fr}.why-flow i{display:none}.why-flow article{border-bottom:1px solid rgba(195,138,67,.18)}}
@media(max-width:760px){ .site-header { min-height:64px; } .brand small{display:none}.menu-toggle{display:block}.site-header nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;padding:22px;background:var(--deep)}.site-header nav.open{display:flex}.nav-cta{text-align:center}.hero{grid-template-columns:1fr;min-height:0;padding:110px 22px 115px}.hero h1{font-size:3.8rem}.hero-word{display:none}.hero-times{right:22px;left:22px}.hero-times span{flex-direction:column;gap:2px;align-items:flex-start;padding:14px 10px}.belief{grid-template-columns:1fr;padding:80px 22px}.belief h2,.belief-copy{grid-column:1}.belief h2{margin:0 0 28px}.belief-copy{grid-template-columns:1fr;gap:18px}.moments,.why-section,.commitment,.mood-tool,.menu-section,.visit{padding:80px 22px}.moment-card{grid-template-columns:1fr;min-height:0;padding:32px 24px}.moment-number{margin-bottom:35px}.why-heading{grid-template-columns:1fr}.why-heading h2{grid-column:1;margin-top:0}.commitment-grid,.section-intro.split,.drink-band{grid-template-columns:1fr}.commitment-grid article{min-height:0}.commitment-grid h3{margin-top:25px}.mood-result{padding:30px 22px}.box-row{grid-template-columns:1fr}.box-row span{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.drink-band{padding:32px 24px}.visit-time span{font-size:2.4rem}footer{grid-template-columns:1fr;text-align:center}footer .brand{justify-content:center} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}