@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&display=swap');
/* Shared across every HOWHAS page. Keep header dimensions identical. */
/* User-approved black symbol with a vertical wild-cursive gold place signature. */
:root{--howhas-paper:#ffffff;--howhas-ink:#111111;--howhas-gold:#be8b13}
.howhas-header{background:var(--howhas-paper);max-width:none!important;display:block!important;margin:0!important;padding:0!important;border:0!important}
.howhas-header .howhas-header-inner{height:132px;max-width:1440px;margin:0 auto;padding:18px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;box-sizing:border-box}
.brand-lockup{display:flex;align-items:center;gap:20px;color:var(--howhas-ink);text-decoration:none;flex-shrink:0;line-height:1}
.brand-lockup .location-word{display:flex;flex-direction:column;width:48px;height:90px;align-items:center;justify-content:center;gap:0;flex-shrink:0;padding-right:20px;border-right:1px solid var(--howhas-gold);box-sizing:content-box}
.brand-lockup .location-word img{width:48px;height:90px;object-fit:contain;display:block}
.brand-lockup .official-logo{width:88px;height:88px;object-fit:contain;display:block;flex-shrink:0;border-radius:0;filter:none}
.brand-lockup .brand-name{display:flex;flex-direction:column;gap:14px;width:182px;align-items:flex-start}
.brand-lockup .brand-name strong{font-family:'Noto Serif TC',Georgia,serif!important;font-size:30px!important;font-weight:600!important;letter-spacing:.14em!important;line-height:1.3!important;white-space:nowrap}
.brand-lockup .brand-name>span{font-family:Arial,sans-serif!important;font-size:14px!important;font-weight:500!important;letter-spacing:.32em!important;line-height:1!important;margin:0!important}
.brand-lockup .brand-name:after{content:"";display:block;width:38px;height:2px;background:var(--howhas-gold)}
.howhas-header .language{margin:0!important;display:flex;gap:2px;padding:4px;border:1px solid #ddd;border-radius:3px;flex-shrink:0;background:#fff;line-height:1.3}
.howhas-header .language button{margin:0;padding:8px 14px;min-height:40px;background:transparent;border:0;border-radius:1px;font:400 14px/1.3 Arial,'Noto Sans TC',sans-serif;color:var(--howhas-ink)}
.howhas-header .language button[aria-pressed=true]{background:var(--howhas-ink);color:#fff}
.site-links.howhas-nav{max-width:1440px;margin:0 auto;padding:0 5% 12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:var(--howhas-paper);box-sizing:border-box;font-family:Arial,'Noto Sans TC',sans-serif;line-height:1.4}
.site-links.howhas-nav>a{min-width:0;min-height:48px;padding:10px 4px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:400;letter-spacing:.04em;text-align:center;text-decoration:none;border-bottom:2px solid #ededed;color:var(--howhas-ink);box-sizing:border-box;white-space:nowrap}
.site-links.howhas-nav>a[aria-current=page]{border-color:var(--howhas-gold);font-weight:600;background:#fff8e8}
.site-links.howhas-nav>a:hover{background:#fff8e8}
html[data-lang=zh] span[lang=en],html[data-lang=en] span[lang=zh-Hant]{display:none!important}
.howhas-header a:focus-visible,.howhas-nav a:focus-visible,.howhas-header button:focus-visible{outline:3px solid var(--howhas-gold);outline-offset:3px}
footer{background:#fff;color:#111}footer .brand-footer-logo{display:block;width:88px;height:88px;object-fit:contain;flex-shrink:0;filter:none}
.hero-copy,.room-story,.event-body{overflow-wrap:break-word}
.event-meta dt{flex-basis:54px}.event-body h3{overflow-wrap:break-word}.summary{font-size:16px}
html[lang=en] .event-body h3{font-family:Georgia,'Noto Serif TC',serif;letter-spacing:0;line-height:1.45}
html[lang=en] .hero h1,html[lang=en] .hero h2{font-family:Georgia,'Noto Serif TC',serif;letter-spacing:0;line-height:1.35}
.event-image{height:auto;aspect-ratio:4/3}.event-image img{position:relative;width:100%;height:100%;object-fit:contain}.image-credit{font-size:12px}
.event-tags,.source-credit,.editor-note,.checked{font-size:14px}.intro,.help p:not(.eyebrow){font-size:16px}
@media(min-width:1441px){.howhas-header .howhas-header-inner{padding-left:0;padding-right:0}}
@media(max-width:700px){
 .howhas-header .howhas-header-inner{height:112px;padding:14px 16px;gap:10px}
 .brand-lockup{gap:10px}
 .brand-lockup .location-word{width:36px;height:80px;gap:0;padding-right:0;border:0}.brand-lockup .location-word img{width:36px;height:80px}
  .brand-lockup .official-logo{width:60px;height:60px}
 .brand-lockup .brand-name{width:116px;gap:9px}.brand-lockup .brand-name strong{font-size:22px!important;letter-spacing:.09em!important}.brand-lockup .brand-name>span{font-size:12px!important;letter-spacing:.26em!important}.brand-lockup .brand-name:after{width:24px}
 .howhas-header .language{flex-direction:column;padding:2px;gap:1px;border:0;background:transparent}.howhas-header .language button{padding:6px 7px;min-height:34px;font-size:14px}
 .site-links.howhas-nav{padding:0 16px 12px}.site-links.howhas-nav>a{height:48px;font-size:14px;padding:10px 2px;letter-spacing:0}
 footer .brand-footer-logo{width:76px;height:76px}footer{flex-wrap:wrap}
 .event-meta dt{flex-basis:52px}.hero-copy .intro{font-size:16px}
}
@media(max-width:359px){.howhas-header .howhas-header-inner{padding:12px;gap:8px}.brand-lockup{gap:8px}.brand-lockup .location-word,.brand-lockup .location-word img{width:32px}.brand-lockup .official-logo{width:54px;height:54px}.brand-lockup .brand-name{width:100px}.brand-lockup .brand-name strong{font-size:20px!important;letter-spacing:.06em!important}.brand-lockup .brand-name>span{letter-spacing:.18em!important}.site-links.howhas-nav{padding-left:10px;padding-right:10px}}
/* Larger browser text uses two rows rather than clipping the brand. */
@media(max-width:300px){.howhas-header .howhas-header-inner{height:auto;min-height:112px;flex-wrap:wrap}.howhas-header .language{flex-direction:row}.site-links.howhas-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.site-links.howhas-nav>a{white-space:normal}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Exact user-supplied complete logo, 2026-10-07. No crop, recolor or redraw. */
.howhas-header .howhas-header-inner{height:164px;padding-top:4px;padding-bottom:4px}
.brand-lockup{gap:0}
.brand-lockup .official-logo{width:220px;height:auto;max-height:156px;object-fit:contain;filter:none;clip-path:none;transform:none}
@media(max-width:700px){.howhas-header .howhas-header-inner{height:132px;padding-top:2px;padding-bottom:2px}.brand-lockup .official-logo{width:180px;height:auto;max-height:128px}}
@media(max-width:359px){.brand-lockup .official-logo{width:168px;height:auto}}
@media(max-width:300px){.howhas-header .howhas-header-inner{height:auto;min-height:132px}}

/* Protected complete original supplied 2026-10-07 20:08. Proportional, uncropped. */
.howhas-header .howhas-header-inner{max-width:none;height:176px;padding:0 5% 0 12px;gap:16px}
.brand-lockup .official-logo{width:176px;height:176px;max-height:none;object-fit:contain;object-position:center;filter:none;clip-path:none;transform:none;border:0;border-radius:0}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 5% 32px!important;background:#fff!important;color:#111!important;flex-wrap:wrap}
footer .brand-footer-logo{width:148px;height:148px;object-fit:contain;filter:none;border-radius:0;clip-path:none;transform:none}
footer p{margin:0;flex:1;min-width:160px}footer>a{min-height:44px;display:inline-flex;align-items:center}
a.howhas-call-button,.contact a.howhas-call-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border:1px solid #20372c;border-radius:999px;background:#20372c;color:#fff;font:500 16px/1.4 Arial,'Noto Sans TC',sans-serif;text-decoration:none;letter-spacing:.04em;box-sizing:border-box}
a.howhas-call-button:hover{background:#111}a.howhas-call-button:focus-visible{outline:3px solid #be8b13;outline-offset:4px}
@media(max-width:700px){.howhas-header .howhas-header-inner{height:140px;padding:0 16px 0 0}.brand-lockup .official-logo{width:140px;height:140px;max-height:none}footer{gap:12px;padding:16px 16px 90px!important}footer .brand-footer-logo{width:120px;height:120px}footer p{font-size:14px}}
@media(max-width:300px){.howhas-header .howhas-header-inner{height:auto;min-height:140px}}

/* One original logo, one quiet closing line, one return link. */
footer.howhas-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center}
footer.howhas-footer .brand-footer-logo{grid-column:1;grid-row:1}
footer.howhas-footer>p{grid-column:1/-1;grid-row:2;min-width:0;font-size:15px;color:#72776a;margin:0}
footer.howhas-footer>a{grid-column:2;grid-row:1;justify-self:end;font-size:14px;white-space:nowrap}

/* Five shared destinations; scroll instead of compressing labels on small screens. */
@media(max-width:700px){.site-links.howhas-nav{display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.site-links.howhas-nav>a{font-size:14px;min-height:48px;padding:10px 8px;white-space:nowrap}}

/* Useful actions beside the shared five-destination navigation. */
.howhas-quick-links{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:calc(100% - 40px);max-width:760px;margin:18px auto 24px;padding:0}.howhas-quick-links a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:10px 14px;border:1px solid #afbeaf;border-radius:25px;background:#fffdf7;color:#365744;font:500 14px/1.5 'Noto Sans TC',sans-serif;text-decoration:none;text-align:center}.howhas-quick-links .quick-book{background:#365744;color:#fff;border-color:#365744}.howhas-quick-links a:focus-visible{outline:3px solid #be8b13;outline-offset:3px}.howhas-quick-links a:hover{box-shadow:0 2px 8px #36574422}@media(max-width:480px){.howhas-quick-links{gap:8px;margin:14px auto 20px}.howhas-quick-links a{padding:10px 7px;font-size:13px;min-height:46px}}
