/* HUS London — bilingual site. Quiet, feed-like layout inspired by kilnsoho.com */
:root{
  --paper:#f8f7f3; --paper-2:#efede7; --ink:#141414; --text:#4a4a46; --muted:#8a877f; --line:#dcd8cf;
  --seal:#b3261e; --veg:#3f7d4e;
  --sans:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Libre Baskerville",Baskerville,Georgia,"Times New Roman",serif;
  --cn:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --side:232px;
}
[data-lang=zh] .l-en{display:none!important}
:root:not([data-lang=zh]) .l-zh{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.75 var(--serif);-webkit-font-smoothing:antialiased}
[data-lang=zh] body{font-family:var(--cn);line-height:1.9}
.l-zh{font-family:var(--cn)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p a,.link,.faq a,.info a{border-bottom:1px solid var(--line);transition:border-color .2s}
p a:hover,.link:hover{border-color:var(--ink)}
.label{font:700 10.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.label .l-zh{font:600 13px/1.6 var(--cn);letter-spacing:.12em}
h1,h2,h3{color:var(--ink);font-weight:400;margin:0}
h1{font:400 30px/1.3 var(--serif)}
h2{font:400 24px/1.35 var(--serif)}
h3{font:400 19px/1.45 var(--serif)}
h1 .l-zh,h2 .l-zh,h3 .l-zh{font-family:var(--cn);font-weight:600;letter-spacing:.04em}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}

/* ---------- side column ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);padding:150px 0 32px 40px;display:flex;flex-direction:column;gap:30px;z-index:20}
.nav{display:flex;flex-direction:column;gap:7px}
.nav a{font:700 11px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.nav a .l-zh{font:600 14px/1.7 var(--cn);letter-spacing:.2em}
.nav a:hover{opacity:.55}
.nav a[aria-current=page]{color:var(--seal)}
.addr{font:600 10px/1.8 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.addr a:hover,.social a:hover{opacity:.55}
.lc{text-transform:none;letter-spacing:.04em}
.social{display:flex;gap:14px;align-items:center}
.social a{font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.social a .l-zh{font:600 12px var(--cn);letter-spacing:.06em}
.side-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.book-btn{display:inline-block;font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:13px 16px;transition:background .2s}
.book-btn .l-zh{font:600 13px/1 var(--cn);letter-spacing:.2em}
.book-btn:hover{background:var(--seal)}
.lang{background:none;border:1px solid var(--ink);color:var(--ink);font:600 12px/1 var(--cn);letter-spacing:.08em;padding:9px 11px;cursor:pointer}
.lang .l-zh{font:700 10px/1 var(--sans);letter-spacing:.18em}
.lang:hover{background:var(--ink);color:var(--paper)}
.wordmark{position:absolute;top:36px;right:48px;width:92px;z-index:5}
.lang-desk{position:fixed;top:40px;left:40px;z-index:25}
.topbar{display:none}

/* ---------- main ---------- */
main{margin-left:var(--side);padding:150px 48px 40px;min-height:100vh}
.col{max-width:660px;margin:0 auto}
.hours{display:grid;grid-template-columns:auto auto;gap:3px 28px;font:600 10.5px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);width:max-content;margin:0}
.hours dt{font-weight:700}
.hours dd{margin:0;color:var(--text)}
.hours .l-zh{font:400 14px/1.9 var(--cn);letter-spacing:.06em;text-transform:none}
.hours dt .l-zh{font-weight:600}

/* home (Kiln-like first screen) */
.home main{padding-top:0}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 0 80px}
.hero img{width:min(820px,94%);height:auto}
.poster{margin:28px 0 10px}.poster img{width:100%;height:auto;cursor:zoom-in}
.heroes.n4{grid-template-columns:1fr 1fr}
.home-col{padding-top:24px}
.lede{font:400 21px/1.6 var(--serif);color:var(--ink);margin:0 0 36px}
.lede.l-zh{font:600 20px/1.7 var(--cn);letter-spacing:.06em}
.home-cta{margin:32px 0 0}
.feed{margin-top:40px}
.post{padding:110px 0 0}
.post .label{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.post .label .dot{width:6px;height:6px;border-radius:50%;background:var(--seal)}
.pimg{display:block}
.post img{width:100%;height:auto;background:var(--paper-2)}
.post h3{margin:22px 0 6px}
.post p{margin:0 0 12px;color:var(--text)}
.more{font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;display:inline-block;margin-top:4px}
.more .l-zh{font:600 13px/1 var(--cn);letter-spacing:.14em}
.more:hover{color:var(--seal);border-color:var(--seal)}
.sketch{mix-blend-mode:multiply}

.page-head{margin-bottom:48px}
.page-head .label{margin-bottom:12px;color:var(--seal)}
.page-head p{max-width:580px}

/* ---------- menu ---------- */
.subnav{position:sticky;top:0;z-index:10;background:var(--paper);margin:0 -16px 8px;padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px}
.subnav a{flex:none;font:700 10px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.subnav a .l-zh{font:600 13px/1.6 var(--cn);letter-spacing:.08em}
.subnav a:hover,.subnav a.on{color:var(--ink)}
.msec{padding-top:72px}
.msec-head{display:flex;align-items:baseline;gap:14px}
.msec-head .badge{margin-left:auto;font:700 11px/1 var(--sans);letter-spacing:.14em;color:var(--paper);background:var(--seal);padding:8px 10px}
.intro{margin:18px 0 0}
.intro p{margin:0 0 10px}
.heroes{display:grid;gap:10px;margin:28px 0 8px}
.heroes.n1{grid-template-columns:1fr}
.heroes.n1 img{aspect-ratio:4/3}
.heroes.n3{grid-template-columns:1.4fr 1fr 1fr}
.heroes img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;cursor:zoom-in}
.mgroup{margin-top:36px}
.mgroup>.label{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:4px}
.cols span{margin-left:28px;color:var(--muted)}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:16px 0;border-bottom:1px solid var(--line)}
.has-thumbs .item{grid-template-columns:60px 1fr auto}
.thumb{width:60px;height:60px;padding:0;border:0;background:var(--paper-2);cursor:zoom-in;overflow:hidden;align-self:start}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.thumb:hover img{transform:scale(1.08)}
.nothumb{width:60px}
.item .name{color:var(--ink);font-size:16.5px;line-height:1.45}
.item .name.zh{font:600 17px/1.5 var(--cn);letter-spacing:.04em}
.item .sub{color:var(--text);font-size:14.5px;margin-top:2px}
.item .ing{font:600 10px/1.75 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.item .l-zh .ing{font:400 13px/1.8 var(--cn);letter-spacing:.04em;text-transform:none}
.item .note{font-size:14px;color:var(--text);margin-top:4px}
.price{font:400 15.5px/1.45 var(--serif);color:var(--ink);text-align:right;white-space:nowrap}
.price .l-zh{font-family:var(--cn)}
.price.two{display:flex;gap:28px}
.price.two span{min-width:34px;text-align:right}
.tag{display:inline-block;font:700 9px/1 var(--sans);letter-spacing:.1em;vertical-align:2px;margin-left:7px}
.tag.v{color:var(--veg);border:1px solid var(--veg);border-radius:50%;width:16px;height:16px;line-height:14px;text-align:center}
.tag.hot{color:var(--seal);letter-spacing:0}
.menu-notes{margin-top:72px;padding-top:24px;border-top:1px solid var(--ink);font-size:14px;color:var(--muted)}
.menu-notes p{margin:0 0 6px}

dialog.lb{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92vh}
dialog.lb::backdrop{background:rgba(20,18,14,.85)}
dialog.lb img{max-height:84vh;width:auto;margin:0 auto}
dialog.lb p{color:#eee;text-align:center;font-size:15px;margin:12px 0 0}
dialog.lb button{position:fixed;top:18px;right:22px;background:none;border:0;color:#fff;font:700 12px var(--sans);letter-spacing:.2em;cursor:pointer;padding:10px}

/* ---------- home dining ---------- */
.wide-fig{margin:0}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px}
.tabs button{background:none;border:1px solid var(--line);color:var(--muted);font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:11px 14px;cursor:pointer}
.tabs button .l-zh{font:600 14px/1 var(--cn);letter-spacing:.1em}
.tabs button[aria-selected=true]{border-color:var(--ink);color:var(--paper);background:var(--ink)}
.hm-card{background:#fbfaf7;border:1px solid var(--line);padding:48px 32px 40px;text-align:center;position:relative;overflow:hidden}
.hm-card::before{content:"";position:absolute;right:-60px;top:40px;width:300px;height:380px;background:url(/img/logo-hu.png) no-repeat center/contain;opacity:.05}
.hm-hu{width:54px;margin:0 auto 14px}
.hm-title{font:700 11px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.hm-title .l-zh{font:600 17px/1.6 var(--cn);letter-spacing:.3em}
.hm-note{font-size:13px;color:var(--seal);margin-top:4px;letter-spacing:.06em}
.hm-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:22px;position:relative}
.hm-list b{display:block;font-weight:400;font-size:17px;color:var(--ink)}
.hm-list .l-zh b{font:600 17px/1.6 var(--cn);letter-spacing:.2em}
.hm-list span span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.hm-list .l-zh span{display:block;font-size:14px;color:var(--muted);letter-spacing:.06em}
.gallery{columns:3;column-gap:10px}
.gallery img{width:100%;margin-bottom:10px;break-inside:avoid;cursor:zoom-in}

/* ---------- forms ---------- */
form.f{display:grid;gap:20px;margin-top:28px}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f label{display:grid;gap:6px;font:700 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.f label .l-zh{font:600 13px/1.4 var(--cn);letter-spacing:.08em}
.f input,.f select,.f textarea{font:16px/1.5 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--muted);padding:8px 0;border-radius:0;width:100%}
.f textarea{min-height:120px;resize:vertical;border:1px solid var(--line);padding:10px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink)}
.f input[type=file]{border:0;font-size:14px}
.f button{justify-self:start;font:700 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--paper);background:var(--ink);border:0;padding:15px 26px;cursor:pointer;transition:background .2s}
.f button .l-zh{font:600 14px/1 var(--cn);letter-spacing:.2em}
.f button:hover{background:var(--seal)}
.hp{display:none}
.rate{border:0;padding:0;margin:0}
.rate legend{font:700 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.rate legend .l-zh{font:600 13px var(--cn)}
.rating{display:flex;gap:14px}
.rating label{display:flex;align-items:center;gap:5px;font-weight:600}
.rating input{width:auto}

/* blocks */
.block{margin-top:72px}
.block>.label{display:block;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:20px}
.info{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.info p{margin:0}
.info .label{display:block;margin-bottom:6px;color:var(--muted)}
.map{width:100%;aspect-ratio:16/10;border:0;filter:grayscale(1) contrast(1.05) sepia(.12);margin-top:28px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0}
.roles .role{padding:18px 0;border-bottom:1px solid var(--line)}
.careers-sketch{max-width:300px;margin:72px auto 0}
.tock-wrap{min-height:120px;margin:28px 0 8px}
.note{font-size:14px;color:var(--muted)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px}
.duo img{aspect-ratio:4/5;object-fit:cover;width:100%}

footer.site{margin:140px 0 0;padding:40px 0 10px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end}
footer.site .sketch{max-width:340px;opacity:.9}
footer.site .fi{font:600 10px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
footer.site .fi .l-zh{font:600 12px var(--cn);letter-spacing:.06em}
footer.site .fi a:hover{opacity:.55}
footer.site small{display:block;margin-top:14px;font:400 11px var(--serif);letter-spacing:0;text-transform:none;color:var(--muted)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  :root{--side:0px}
  body{font-size:16px}
  .wordmark{display:none}
  .topbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:40;align-items:center;justify-content:space-between;height:64px;padding:0 24px;background:var(--paper)}
  .burger{background:none;border:0;padding:12px 10px 12px 0;cursor:pointer;width:40px;height:40px;position:relative}
  .burger i{position:absolute;left:0;width:26px;height:2.4px;background:var(--ink);transition:transform .3s,top .3s}
  .burger i:first-child{top:13px}.burger i:last-child{top:25px}
  body.nav-open .burger i:first-child{top:19px;transform:rotate(45deg)}
  body.nav-open .burger i:last-child{top:19px;transform:rotate(-45deg)}
  .lang-desk{display:none}
  .tb-left{display:flex;align-items:center;gap:12px}
  .tb-mark{display:flex;align-items:center;gap:10px}
  .tb-hu{height:38px;width:auto}
  .tb-text{height:11px;width:auto}
  .topbar .lang{padding:8px 10px}
  .side{position:fixed;inset:0;width:auto;padding:110px 28px 32px;background:var(--paper);transform:translateX(-100%);transition:transform .35s ease;gap:30px;overflow:auto;z-index:35}
  body.nav-open .side{transform:none}
  body.nav-open{overflow:hidden}
  .nav{gap:4px}
  .nav a{font-size:15px;letter-spacing:.18em;line-height:2.3}
  .nav a .l-zh{font-size:19px;line-height:2.1}
  main{padding:100px 22px 24px}
  .home main{padding-top:0}
  .hero{min-height:100svh;padding:90px 0 40px}
  .hero img{width:100%}
  .subnav{top:64px;margin:0 -22px 8px;padding:12px 22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  h1{font-size:26px}
  .lede{font-size:19px}
  .post{padding-top:88px}
  .heroes.n3{grid-template-columns:1fr 1fr}
  .heroes.n3 img:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .has-thumbs .item{grid-template-columns:54px 1fr auto;gap:4px 14px}
  .thumb,.nothumb{width:54px}.thumb{height:54px}
  .price.two{gap:14px}
  .cols span{margin-left:14px}
  .f .row,.info{grid-template-columns:1fr}
  .gallery{columns:2}
  .hm-card{padding:40px 18px 34px}
  footer.site{grid-template-columns:1fr;margin-top:96px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}