/*
Theme Name: Fabel's Bergen
Theme URI: https://rankbird.com
Author: RankBird
Author URI: https://rankbird.com
Description: Thema voor Fabel's eten & drinken in Bergen (NH). Pagina's in 5 talen (NL/EN/DE/FR/中文), Ontdek Bergen toont de blogberichten, formulieren versturen via WordPress, openingstijden en sluitingsdagen beheer je onder Instellingen → Fabel's.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Alle rechten voorbehouden
Text Domain: fabels
*/

/* Lettertypes: zelf gehost (geen verbinding met Google, AVG-vriendelijk) */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Layout: bistro — vaste zijbalk links (desktop), grote foto's, smalle gecentreerde kolom in Garamond; één warme accentkleur uit het Fabel's-logo */
:root{
  --bg:#F6F4EF; --side:#F1EEE7; --ink:#1C1A17; --ink2:#4A453E; --mute:#77706A; --line:#E2DDD3;
  --tan:#B19175; --tan-d:#8A6A4E; --tan-l:#E9DFD3;
  --serif:'EB Garamond', Garamond, 'Times New Roman', 'Noto Serif SC', 'Songti SC', 'SimSun', serif; --sans:'Jost', 'Futura', 'Avenir Next', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --sw:270px; color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.65;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--tan-d)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--tan-d);outline-offset:3px}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.22em;margin:0;line-height:1.3;text-wrap:balance}
.s{font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;font-size:12px}
.caps{font-variant:all-small-caps;letter-spacing:.14em;font-size:1.05em}
.it{font-style:italic}
.mute{color:var(--mute)}

/* sidebar */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--sw);background:var(--side);padding:calc(44px + env(safe-area-inset-top,0px)) 28px calc(28px + env(safe-area-inset-bottom,0px)) max(28px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:40px;z-index:40;overflow:auto}
.side .logo img{width:190px;height:auto}
.side .logo span{display:block;width:34px;height:2px;background:var(--ink);margin:16px 0 0 78px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a,.drawer nav a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:12px;text-decoration:none;padding-block:7px;display:inline-flex;align-items:center;gap:10px}
.side nav a.on::before{content:"";width:14px;height:1px;background:var(--ink)}
.side .meta{margin-top:auto;display:flex;flex-direction:column;gap:14px;font-size:15px}
.lang{display:flex;gap:4px;font-family:var(--sans);font-size:12px;letter-spacing:.2em}
.lang button{background:none;border:none;font:inherit;letter-spacing:inherit;color:var(--mute);padding:6px 4px;cursor:pointer;min-height:36px}
.lang button.on{color:var(--ink)}
.dot{width:7px;height:7px;border-radius:999px;display:inline-block;margin-right:8px;vertical-align:middle}
.main{margin-left:var(--sw)}
.top{display:none}
@media (max-width:960px){
  .side{display:none}.main{margin-left:0}
  .top{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(246,244,239,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);justify-content:space-between;align-items:center;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
  .top img{height:34px;width:auto}
}
.mbtn{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:12px;background:none;border:1px solid var(--ink);color:var(--ink);padding:0 16px;min-height:44px;cursor:pointer}
.drawer{position:fixed;inset:0;z-index:70;background:var(--side);padding:calc(24px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:28px;overflow:auto}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-size:15px;padding-block:10px}

/* blocks */
.hero{position:relative;height:min(78vh,780px);min-height:440px;overflow:hidden;background:#3A3129;display:flex;align-items:center;justify-content:center}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero .sh{position:absolute;inset:0;background:rgba(20,16,12,.28)}
.hero .mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding-inline:16px}
.hero .mark img{width:min(360px,70vw);height:auto}
.hero .mark span{width:40px;height:2px;background:#FFFFFF}
.col{max-width:640px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.blk{padding-block:96px 0;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.blk h1{font-size:clamp(24px,3.4vw,34px)}
.blk h2{font-size:clamp(19px,2.4vw,24px)}
.just{text-align:justify;hyphens:auto;display:flex;flex-direction:column;gap:22px}
.btn{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:12px;text-decoration:none;background:var(--tan);color:var(--ink);padding:0 28px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background .25s}
.btn:hover{background:#C2A68D;color:var(--ink)}
.btn.o{background:transparent;border:1px solid var(--ink)}
.btn.o:hover{background:var(--ink);color:var(--bg)}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wide{padding-top:96px}
.trip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:6px}
.trip a{text-decoration:none;display:flex;flex-direction:column;gap:14px;text-align:center}
.trip .im{height:min(52vw,460px);overflow:hidden;background:#D8CFC2}
.trip img,.full img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.trip a:hover img,.full:hover img{transform:scale(1.03)}
.full{height:min(70vw,640px);overflow:hidden;background:#D8CFC2}
.hours{display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.hours .t{font-weight:500}
.rule{width:40px;height:1px;background:var(--ink);border:none;margin:0}
.names{font-style:italic;font-size:clamp(22px,2.6vw,27px);line-height:1.5}
.names span{white-space:nowrap}
.q{font-style:italic;font-size:21px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
.grid4 img{aspect-ratio:1;width:100%;object-fit:cover}

/* menu */
.tabs{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.tabs button{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:12px;background:none;border:none;border-bottom:1px solid transparent;color:var(--mute);padding:8px 0;cursor:pointer;min-height:40px}
.tabs button.on{color:var(--ink);border-color:var(--ink)}
.sect{display:flex;flex-direction:column;gap:20px;width:100%}
.sect h3{font-size:14px;font-weight:500;margin-bottom:4px}
.dish{display:flex;flex-direction:column;align-items:center;gap:0}
.dish .p{color:var(--mute);font-variant-numeric:tabular-nums}
.dish .d{font-style:italic;font-size:16px;color:var(--ink2)}
.tag{font-family:var(--sans);font-size:10px;letter-spacing:.14em;border:1px solid var(--tan-d);color:var(--tan-d);padding:0 5px;margin-left:6px;vertical-align:2px}

/* forms */
form{display:flex;flex-direction:column;gap:16px;width:100%;text-align:left}
.fl{display:flex;flex-direction:column;gap:6px;min-width:0}
.fl label,.lb{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:11px}
.in{font:17px var(--serif);color:var(--ink);background:#FFFFFF;border:1px solid #CFC9BE;padding:11px 14px;min-height:48px;width:100%;border-radius:0}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:17px;min-height:40px;margin-right:14px;cursor:pointer}
.ok{background:var(--tan-l);padding:16px 18px;font-style:italic}
details{border-top:1px solid var(--line);padding:16px 0;text-align:left;width:100%}
summary{cursor:pointer;font-size:20px}
details p{margin-top:8px;color:var(--ink2)}

/* footer */
.ft{border-top:1px solid var(--line);margin-top:110px;padding:56px 20px calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.ft nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.ft nav a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:11px;text-decoration:none}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;font-family:var(--sans);font-size:13px;letter-spacing:.06em;z-index:80;max-width:calc(100% - 32px);text-align:center}
.mbar{display:none}
@media (max-width:960px){.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--side);border-top:1px solid var(--line);padding:8px max(10px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));gap:6px}.mbar a{flex:1;padding:0 8px}.ft{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}.blk{padding-top:72px}.wide{padding-top:72px}}
.fade{animation:fade .6s ease both}
@keyframes fade{from{transform:translateY(12px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.hero>img,.fade{animation:none}.trip img,.full img{transition:none}}

.just{text-align:left;hyphens:manual}
.hours{width:100%;max-width:400px;margin-inline:auto;gap:6px;text-align:left}
.hours .hr{display:flex;align-items:baseline;gap:10px}
.hours .hr .tm{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.hours .note{margin-top:12px;text-align:center;font-size:16px;line-height:1.5}
.hours.sum{max-width:340px;margin-block:8px}
.hours.sum .t{border-top:1px solid var(--line,#d8d2c8);padding-top:8px;margin-top:4px}
.lead{flex:1;min-width:16px;border-bottom:1px dotted rgba(28,26,23,.32);transform:translateY(-5px)}
.dish.m{align-items:stretch;text-align:left;width:100%;max-width:560px;margin-inline:auto;gap:2px}
.dish.m .ln{display:flex;align-items:baseline;gap:10px}
.dish.m .nm{flex:0 1 auto}
.dish.m .tag{white-space:nowrap}
.dish.m .p{white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-align:right}
.dish.m .p .sl{margin:0 .25em;color:var(--mute)}
.dish.m .d{padding-right:4.5em;line-height:1.45}
.sect h3{text-align:center}
.tabs{row-gap:4px}
@media (max-width:600px){
 .row{flex-direction:column;align-items:center}
 .row .btn{width:100%;max-width:300px}
 .dish.m .d{padding-right:0;font-size:15px}
 .dish.m .ln{gap:8px}
 body{font-size:18px}
}
.ftl{display:flex;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:0}
.ftl span{white-space:nowrap}
@media (max-width:600px){.ftl{flex-direction:column;align-items:center}.ftl .sep{display:none}}
[hidden]{display:none!important}
/* Chinees: minder letterspatiëring, geen schuine of kleinkapitaal-letters */
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) .s,:lang(zh) .btn,:lang(zh) .tabs button,:lang(zh) .side nav a,:lang(zh) .drawer nav a,:lang(zh) .ft nav a,:lang(zh) .fl label,:lang(zh) .lb{letter-spacing:.12em}
:lang(zh) .caps{letter-spacing:.06em;font-variant:normal}
:lang(zh) .it,:lang(zh) .d,:lang(zh) .q,:lang(zh) .names,:lang(zh) .ok{font-style:normal}
:lang(zh) body{line-height:1.8}
:lang(zh) .just{text-align:justify}

/* ---------- WordPress ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px}
body.admin-bar .side{top:32px}
@media (max-width:782px){body.admin-bar .top{top:46px}}
@media (min-width:783px) and (max-width:960px){body.admin-bar .top{top:32px}}
#fabels-ig[hidden]{display:none}
.entry{display:flex;flex-direction:column;gap:22px;text-align:left;width:100%}
.entry>*{margin:0}
.entry h2{font-size:16px;text-align:center;margin-top:14px}
.entry h3{font-size:14px;font-weight:500;text-align:center}
.entry blockquote{margin:0;font-style:italic;font-size:21px;text-align:center}
.entry blockquote p{margin:0}
.entry ul,.entry ol{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.entry img,.entry figure{max-width:100%;height:auto;margin:0}
.entry figcaption{font-size:15px;color:var(--mute);text-align:center;margin-top:6px}
.entry a{color:var(--tan-d)}
.entry table{border-collapse:collapse;width:100%}
.entry td,.entry th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.post-card{text-decoration:none;display:flex;flex-direction:column;gap:6px;width:100%}
.post-card .full{height:240px;margin-bottom:8px}
.post-card.big .full{height:340px}
.post-card .tt{font-size:23px;line-height:1.3}
.post-card.big .tt{font-size:26px;line-height:1.25}
.tabs a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:12px;text-decoration:none;border-bottom:1px solid transparent;color:var(--mute);padding:8px 0;min-height:40px;display:inline-flex;align-items:center}
.tabs a.on{color:var(--ink);border-color:var(--ink)}
.pager{display:flex;justify-content:space-between;gap:12px;width:100%}
button[disabled]{cursor:wait}

/* knoppen in de grote foto op de homepage */
.hero .hero-cta{margin-top:18px}
.hero .hero-cta .btn.o{border-color:#FFFFFF;color:#FFFFFF}
.hero .hero-cta .btn.o:hover{background:#FFFFFF;color:var(--ink)}

/* Versie B: warmer en losser. Gewone hoofdletters, Garamond-koppen, ronde knoppen, een tweede accent uit de menukaart. */
:root{ --blush:#F1DDD2; --rose:#B4573F; }

/* koppen en navigatie: geen brede kapitalen meer */
h1,h2,h3{font-family:var(--serif);text-transform:none;letter-spacing:0;font-weight:500;line-height:1.15}
.blk h1{font-size:clamp(34px,4.6vw,52px)}
.blk h2{font-size:clamp(26px,3.2vw,34px)}
.side nav a,.drawer nav a{text-transform:none;letter-spacing:.01em;font-size:16px;font-family:var(--serif)}
.side nav a.on{color:var(--rose)}
.side nav a.on::before{background:var(--rose)}
.btn{text-transform:none;letter-spacing:.02em;font-size:15px;border-radius:999px;padding:0 26px;min-height:46px}
.s{letter-spacing:.14em}
.just{text-align:left}

/* homepage B */
.hb-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--rose)}
.hb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:min(88vh,760px);background:var(--bg)}
.hb-hero-txt{display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:64px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:clamp(28px,4vw,64px);max-width:600px;margin-left:auto}
.hb-hero h1{font-size:clamp(44px,5.6vw,76px);line-height:1.02}
.hb-lead{font-size:22px;line-height:1.5}
.hb-status{font-size:17px}
.hb-btns{display:flex;gap:10px;flex-wrap:wrap}
.hb-small{font-size:16px;color:var(--ink2)}
.hb-hero-img{position:relative;overflow:hidden;background:#D8CFC2}
.hb-hero-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out both}
.hb-hero-img::after{content:"";position:absolute;inset:0;background:rgba(20,16,12,.28)}
.hb-hero-mark{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding-inline:16px}
.hb-hero-mark img{width:min(320px,60%);height:auto}
.hb-hero-mark span{width:40px;height:2px;background:#FFFFFF}

.hb-trip{padding-top:72px}
.hb-cap{font-family:var(--serif);font-size:21px;text-transform:capitalize}
.hb-trip a:hover .hb-cap{color:var(--rose)}

.hb-band{background:var(--blush);margin-top:96px}
.hb-band-in{max-width:860px;margin:0 auto;padding-block:clamp(64px,9vw,110px);padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px}
.hb-quote{font-style:italic;font-size:clamp(24px,3vw,34px);line-height:1.35;text-wrap:pretty}

.hb-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px);margin-top:96px;padding-right:max(24px,env(safe-area-inset-right,0px))}
.hb-row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);padding-right:0;padding-left:max(24px,env(safe-area-inset-left,0px))}
.hb-row.flip .hb-img{order:2}
.hb-img{height:min(48vw,520px);overflow:hidden;background:#D8CFC2}
.hb-img img{width:100%;height:100%;object-fit:cover}
.hb-txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:440px}
.hb-txt h2{font-size:clamp(28px,3.2vw,38px)}
.hb-link{font-family:var(--sans);font-size:15px;color:var(--rose);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.hb-link:hover{color:var(--ink)}

.hb-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(36px,6vw,80px);max-width:980px;margin:110px auto 0;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.hb-info h2{font-size:30px;margin-bottom:18px}
.hb-info .hours{margin-inline:0;max-width:none}
.hb-info .hours .note{text-align:left}
.hb-visit{display:flex;flex-direction:column;gap:14px}
.hb-visit a{text-decoration:none}
.hb-gift{grid-column:1/-1;padding:28px clamp(24px,4vw,40px);background:var(--side);display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.hb-gift>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 320px}
.hb-gift h3{font-size:22px}

.hb-rev,.hb-ig{max-width:980px;margin:110px auto 0;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.hb-rev p{max-width:560px}
.hb-ig{margin-top:72px}

@media (max-width:960px){
  .hb-hero{grid-template-columns:1fr;min-height:0}
  .hb-hero-img{order:-1;height:62vw;min-height:280px}
  .hb-hero-txt{margin:0;max-width:none;padding-block:40px 8px;padding-right:max(20px,env(safe-area-inset-right,0px));padding-left:max(20px,env(safe-area-inset-left,0px))}
  .hb-row,.hb-row.flip{grid-template-columns:1fr;padding-inline:0;margin-top:72px}
  .hb-row.flip .hb-img{order:0}
  .hb-img{height:64vw}
  .hb-txt{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));max-width:none}
}
@media (prefers-reduced-motion:reduce){.hb-hero-img>img{animation:none}}
:lang(zh) .hb-quote,:lang(zh) .hb-hero h1{font-style:normal;letter-spacing:.04em}