/* JONGWE / editorial motion layer – agency art direction, 2026.
   Progressive enhancement only: all content visible without JS, CSS or animation support. */
:root{--charcoal:#1b251e;--charcoal-2:#111b15;--ivory:#f8f6f0;--ivory-2:#eee9df;--gold:#c2a47b;--gold-soft:#eee0c8;--bronze:#82623f;--ease:cubic-bezier(.18,1,.29,1)}
html{scroll-padding-top:104px}
body{font-size:16px;letter-spacing:.003em}
.wrap{max-width:1440px;padding-inline:clamp(23px,5vw,86px)}
.eyebrow{letter-spacing:.23em}
.h2{letter-spacing:-.035em;line-height:.97}
.btn{position:relative;isolation:isolate;overflow:hidden;transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.17);transform:translateX(-105%);transition:transform .5s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
.btn:hover{transform:translateY(-2px)}
.link-arrow{transition:gap .32s var(--ease),color .32s var(--ease)}
.link-arrow:hover,.link-arrow:focus-visible{color:var(--bronze)}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;pointer-events:none;will-change:transform}
.nav{background:linear-gradient(180deg,rgba(11,22,14,.68),rgba(11,22,14,.24))}
.nav.is-scrolled,.menu-open .nav{background:rgba(17,27,21,.96);backdrop-filter:blur(20px)}
.nav__inner{min-height:80px}.nav__brand img{width:48px;height:48px}
.nav__word{font-size:28px;letter-spacing:.12em}
.nav__links a::after{transition:width .35s var(--ease)}
/* A bespoke food-led cover – photographs are menu-related, not venue claims. */
.hero--editorial{min-height:780px;min-height:min(910px,100svh);padding:145px 0 54px;display:flex;align-items:center;background:#19231c;overflow:hidden}
.hero--editorial::before{content:"";position:absolute;inset:-20% -10% -20% 38%;background:radial-gradient(ellipse at 50% 55%,rgba(175,139,93,.21),transparent 66%);pointer-events:none}
.hero--editorial::after{content:"";position:absolute;right:0;bottom:-1px;width:58%;height:1px;background:rgba(255,255,255,.12)}
.hero--editorial .hero__inner{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,5vw,90px);align-items:center}
.hero--editorial .hero__copy{max-width:none;position:relative;z-index:2;padding-top:40px}
.hero--editorial .hero__kicker{letter-spacing:.25em;margin:0 0 32px}
.hero--editorial .hero__title{font-size:clamp(78px,7.4vw,124px);line-height:.82;letter-spacing:-.058em;margin-bottom:38px;text-wrap:unset}
.hero--editorial .hero__title em{color:var(--gold-soft);white-space:nowrap}
.hero__title-tail{display:block;font:500 clamp(32px,3vw,50px)/1.12 var(--serif);letter-spacing:-.024em;margin-top:22px;color:var(--ivory)}
.hero--editorial .hero__lede{max-width:480px;color:rgba(246,244,235,.8);font-size:17px;line-height:1.76}
.hero--editorial .hero__facts{margin-top:clamp(42px,6vw,86px);padding-top:23px;max-width:620px}
.hero--editorial .hero__facts strong{font-size:22px}
.hero__visual{height:min(665px,71vh);min-height:500px;position:relative;isolation:isolate}
.hero__visual::before{content:"";position:absolute;inset:5% 7% 5% 12%;border:1px solid rgba(238,224,200,.25);pointer-events:none;z-index:3}
.hero__photo{position:absolute;overflow:hidden;background:#3c3429}
.hero__photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.65s var(--ease)}
.hero__photo--main{top:0;right:0;width:84%;height:82%;clip-path:inset(0 0 0 0)}
.hero__photo--main img{object-position:50% 42%}
.hero__photo--inset{bottom:0;left:0;width:48%;height:41%;border:8px solid var(--charcoal);z-index:2}
.hero__photo--inset img{object-position:center}
.hero__visual:hover .hero__photo img{transform:scale(1.05)}
.hero__photo-tag{position:absolute;right:-2%;bottom:2%;z-index:4;width:min(49%,240px);padding:23px 22px;background:var(--gold-soft);color:var(--charcoal);box-shadow:0 18px 58px rgba(0,0,0,.13)}
.hero__photo-tag span{font:600 10px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.2em;color:var(--bronze);display:block;margin-bottom:8px}
.hero__photo-tag strong{font:500 clamp(19px,2.2vw,30px)/.98 var(--serif);display:block}
.hero__vertical{position:absolute;left:-34px;top:14%;font:600 9px/1 var(--sans);letter-spacing:.24em;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--gold-soft)}
.hero--editorial .hero__scroll{bottom:20px;right:clamp(18px,3vw,50px)}
/* Image led entrance, triggered only after JS loads. */
.js-ready .hero__photo--main{clip-path:inset(0 0 100% 0);animation:heroCurtain 1.35s .18s var(--ease) forwards}
.js-ready .hero__photo--main img{transform:scale(1.16);animation:heroScale 1.8s .2s var(--ease) forwards}
.js-ready .hero__photo--inset{opacity:0;transform:translateY(34px);animation:heroInset .9s .7s var(--ease) forwards}
.js-ready .hero__photo-tag{opacity:0;transform:translateY(18px);animation:heroInset .8s 1s var(--ease) forwards}
.js-ready .hero--editorial .hero__kicker,.js-ready .hero--editorial .hero__title,.js-ready .hero--editorial .hero__lede,.js-ready .hero--editorial .hero__actions,.js-ready .hero--editorial .hero__facts{animation:heroText .9s var(--ease) backwards}
.js-ready .hero--editorial .hero__kicker{animation-delay:.08s}.js-ready .hero--editorial .hero__title{animation-delay:.17s}.js-ready .hero--editorial .hero__lede{animation-delay:.34s}.js-ready .hero--editorial .hero__actions{animation-delay:.46s}.js-ready .hero--editorial .hero__facts{animation-delay:.6s}
@keyframes heroCurtain{to{clip-path:inset(0 0 0 0)}}
@keyframes heroScale{to{transform:scale(1)}}
@keyframes heroInset{to{opacity:1;transform:translateY(0)}}
@keyframes heroText{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
/* Hero-inspired inner pages: restrained color, oversized expressive type. */
.phero{min-height:510px;padding-bottom:96px}
.phero::before{opacity:.35;transform:scale(1.045)}
.phero::after{background:linear-gradient(90deg,rgba(17,28,20,.97),rgba(17,28,20,.59) 53%,rgba(17,28,20,.21))}
.phero__title{letter-spacing:-.049em;line-height:.91;max-width:950px}
.phero__inner{position:relative;z-index:1}
.phero__inner::after{content:"JONGWE  /  STRAND";position:absolute;right:clamp(25px,5vw,86px);bottom:-41px;font:600 10px/1 var(--sans);letter-spacing:.22em;color:rgba(255,255,255,.65)}
/* Editorial intro instead of a centered template statement. */
.manifesto{padding-block:clamp(105px,12vw,185px);background:#f8f6f0}
.manifesto__inner{max-width:1180px;text-align:center}
.manifesto__title{max-width:1050px;font-size:clamp(58px,7vw,108px);line-height:.91}
.manifesto__title em{color:var(--bronze)}
.manifesto__copy{font-size:clamp(17px,1.45vw,20px);max-width:660px}
/* Gallery contact-sheet edited to a photographic editorial rather than catalog tiles. */
.gal{background:#eee9df}
.gal__grid{display:grid;grid-template-columns:1.2fr .76fr 1fr;grid-template-rows:repeat(2,minmax(220px,23vw));gap:clamp(10px,1.5vw,24px)}
.gal__item{aspect-ratio:auto;height:100%;min-width:0;min-height:0;background:#d4c9ba}
.gal__item--1{grid-row:1/span 2;grid-column:1}
.gal__item--2{grid-column:2;grid-row:1}
.gal__item--3{grid-column:3;grid-row:1}
.gal__item--4{grid-column:2;grid-row:2}
.gal__item--5{grid-column:3;grid-row:2}
.gal__item--6{display:none}
.gal__item img{object-fit:cover;filter:saturate(.86);transition:transform 1.1s var(--ease),filter .7s}
.gal__item:hover img{transform:scale(1.065);filter:saturate(1.03)}
.gal__item figcaption{font-size:clamp(22px,2.1vw,35px);padding:55px 23px 21px}
.gal__item--1 figcaption{font-size:clamp(31px,3.7vw,60px);padding:75px 35px 37px}
.gal__caption{text-align:center;color:var(--muted);font-size:12px;margin:26px auto 0;letter-spacing:.025em}
/* Gallery photography is always visible: no JS/observer-triggered clipping.
   Only the image hover/focus transition above changes its presentation. */
.gal__item{opacity:1;clip-path:none;visibility:visible}
.gal__item img{display:block;opacity:1;visibility:visible}
/* Refined menu treatment + more obvious interactive states */
.menu.section--dark{background:#1d2921}
.dish__img{overflow:hidden;aspect-ratio:4/3}
.dish__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .7s}
.dish:hover .dish__img img{transform:scale(1.045)}
.dish__top{gap:16px}
.dish__order{transition:letter-spacing .25s,color .25s}
.dish__order:hover{letter-spacing:.12em}
.chips{top:80px;box-shadow:0 12px 26px rgba(23,29,23,.045)}
.chip{border-radius:0;transition:background .25s,color .25s,transform .25s}
.chip:hover{transform:translateY(-1px)}
.mi__name{letter-spacing:-.01em}
.mi__price{font-variant-numeric:tabular-nums}
.mi__dots{border-bottom:1px dashed rgba(34,43,36,.29)}
/* Desktop cover elements; tighten whitespace and give each editorial region a rhythm. */
.section{padding-block:clamp(100px,10vw,155px)}
.cards3,.perks,.areas__row{border-color:var(--line)}
.card3{transition:background .3s var(--ease),transform .45s var(--ease)}
.card3:hover{transform:translateY(-3px)}
.foot{padding-top:112px}
.foot__brand p{font-size:29px}
.mbar a:focus-visible,.mnav a:focus-visible{outline-color:var(--gold-soft)}
@media(max-width:1180px){
 .hero--editorial .hero__title{font-size:clamp(69px,8vw,104px)}
 .hero__photo-tag{right:-1%;width:51%}
}
@media(max-width:900px){
 .hero--editorial{min-height:0;padding:150px 0 85px}
 .hero--editorial .hero__inner{grid-template-columns:1fr;gap:60px}
 .hero--editorial .hero__copy{padding-top:0}
 .hero--editorial .hero__title{font-size:clamp(70px,10vw,104px)}
 .hero--editorial .hero__facts{margin-top:46px}
 .hero__visual{height:590px;min-height:0;width:min(650px,96%);margin-inline:auto}
 .hero--editorial .hero__scroll{display:none}
 .gal__grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,280px)}
 .gal__item--1{grid-row:1/span 2;grid-column:1}
 .gal__item--2{grid-row:1;grid-column:2}
 .gal__item--3{grid-row:2;grid-column:2}
 .gal__item--4{grid-row:3;grid-column:1}
 .gal__item--5{grid-row:3;grid-column:2}
}
@media(max-width:600px){
 .hero--editorial{padding:122px 0 92px}
 .hero--editorial .hero__inner{gap:44px}
 .hero--editorial .hero__title{font-size:clamp(62px,14.6vw,87px);line-height:.85;letter-spacing:-.055em;margin-bottom:24px}
 .hero__title-tail{font-size:clamp(31px,8.7vw,45px);margin-top:15px}
 .hero--editorial .hero__kicker{font-size:9px;margin-bottom:25px}
 .hero--editorial .hero__lede{font-size:15.5px;line-height:1.7}
 .hero--editorial .hero__facts{margin-top:37px;gap:12px;padding-top:19px}
 .hero--editorial .hero__facts strong{font-size:18px}
 .hero--editorial .hero__facts span{font-size:10px}
 .hero__visual{height:400px;width:100%;margin:0 auto}
 .hero__photo--main{width:86%;height:85%}
 .hero__photo--inset{width:48%;height:43%;border:5px solid var(--charcoal)}
 .hero__photo-tag{width:54%;padding:13px 15px;bottom:1%;right:-1%}
 .hero__photo-tag strong{font-size:20px}
 .hero__photo-tag span{font-size:8px;margin-bottom:5px}
 .hero__vertical{font-size:8px;left:-14px;top:8%}
 .hero__visual::before{inset:4% 5% 8% 11%}
 .manifesto{padding-block:90px}
 .manifesto__title{font-size:clamp(52px,12vw,75px)}
 .gal__grid{grid-template-columns:1fr 1fr;grid-template-rows:250px 180px 180px;gap:9px}
 .gal__item--1{grid-row:1/span 2;grid-column:1}
 .gal__item--2{grid-row:1;grid-column:2}
 .gal__item--3{grid-row:2;grid-column:2}
 .gal__item--4{grid-row:3;grid-column:1}
 .gal__item--5{grid-row:3;grid-column:2}
 .gal__item figcaption{font-size:20px;padding:25px 10px 13px}
 .gal__item--1 figcaption{font-size:32px;padding:40px 14px 18px}
 .phero{min-height:460px;padding:145px 0 65px}
 .phero__inner::after{display:none}
 .chips__row{justify-content:flex-start}
 .foot{padding-top:79px}
}
@media(max-width:380px){
 .hero--editorial .hero__title{font-size:56px}
 .hero__visual{height:320px}
 .gal__grid{grid-template-rows:220px 160px 160px}
}
@media(prefers-reduced-motion:reduce){
 .js-ready .hero__photo--main{clip-path:none;animation:none}
 .js-ready .hero__photo--main img{transform:none;animation:none}
 .js-ready .hero__photo--inset,.js-ready .hero__photo-tag{opacity:1;transform:none;animation:none}
 .js-ready .hero--editorial .hero__kicker,.js-ready .hero--editorial .hero__title,.js-ready .hero--editorial .hero__lede,.js-ready .hero--editorial .hero__actions,.js-ready .hero--editorial .hero__facts{animation:none}
 .js-ready .gal__item.reveal{clip-path:none;opacity:1;transform:none;transition:none}
 .js-ready .gal__item.reveal img{transform:none}
 .btn:hover,.card3:hover,.chip:hover{transform:none}
 .scroll-progress{will-change:auto}
}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.hero--editorial .hero__visual{transform:translate3d(0,var(--hero-parallax,0px),0);transition:transform .15s linear}}
/* The countryside image is an illustrative landscape, not the restaurant.
   Use the actual dish photography for the story visual instead. */
.story__mark{background-image:url('../img/food/beef-stew-roast.webp');background-position:center 45%}
.page--about .phero::before{background-image:url('../img/food/roasted-chicken.webp');background-position:center 45%}
@media(max-width:600px){
 .hero--editorial{padding:120px 0 78px}
 .hero--editorial .hero__inner{gap:0;display:grid;grid-template-columns:1fr;align-items:start}
 .hero--editorial .hero__copy{display:contents}
 .hero--editorial .hero__title{grid-row:1;margin-bottom:20px}
 .hero--editorial .hero__lede{grid-row:2;margin:0 0 24px}
 .hero--editorial .hero__actions{grid-row:3;margin-bottom:26px}
 .hero--editorial .hero__visual{grid-row:4;height:390px}
 .hero--editorial .hero__facts{grid-row:5;margin-top:35px}
}
@media(max-width:380px){.hero--editorial .hero__visual{height:330px}}