/* HANGER. Two faces only: Instrument Serif for headings, Archivo for text and kickers. Never italic.
   Colours for now: dark grey, white and cream. */
:root{
  --ink:#171412; --ink2:#221e1b; --cream:#F1EBE1; --white:#fff;
  --c60:rgba(241,235,225,.6); --c18:rgba(241,235,225,.16); --i60:rgba(23,20,18,.62); --i15:rgba(23,20,18,.14);
  --serif:"Instrument Serif", Georgia, serif; --sans:"Archivo", system-ui, sans-serif;
  --gut:clamp(18px, 3.4vw, 52px);
  --ease:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box; margin:0; padding:0; font-style:normal}
html{-webkit-text-size-adjust:100%}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--ink); color:var(--cream); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip}
body.loading{overflow:hidden}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
ul{list-style:none}
.kick{font:500 11px/1.4 var(--sans); font-stretch:125%; letter-spacing:.2em; text-transform:uppercase}
.sec-kick{color:var(--c60); margin-bottom:clamp(22px, 3vw, 40px)}
.h-huge{font:400 clamp(60px, 10.5vw, 190px)/.88 var(--serif); letter-spacing:-.025em}
.h-big{font:400 clamp(38px, 4.6vw, 76px)/.98 var(--serif); letter-spacing:-.015em; text-wrap:balance}
.pill{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 24px; border-radius:999px; white-space:nowrap;
  font:500 11px/1 var(--sans); font-stretch:125%; letter-spacing:.16em; text-transform:uppercase; transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease)}
.pill-cream{background:var(--cream); color:var(--ink)} .pill-cream:hover{background:var(--white)}
.pill-ink{background:var(--ink); color:var(--cream)} .pill-ink:hover{background:#2c2723}
.pill-line{border:1px solid currentColor} .pill-line:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}

/* split lines and words: each line rises from behind its own edge */
.ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.ln > span{display:block; will-change:transform}
.w{display:inline-block}

/* the curtain */
.curtain{position:fixed; inset:0; z-index:100; background:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; will-change:transform}
.curtain-mark{width:min(64vw, 720px)}
.curtain-mark svg, .hero-mark svg, .foot-mark svg{display:block; width:100%; height:auto; overflow:visible}
.curtain-line{color:var(--c60)}

/* the bar */
.bar{position:fixed; z-index:50; top:0; left:0; right:0; display:flex; align-items:center; gap:30px; padding:16px var(--gut); transition:transform .6s var(--ease)}
.bar::before{content:""; position:absolute; inset:0; background:rgba(23,20,18,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:0; transition:opacity .5s var(--ease)}
.bar.solid::before{opacity:1}
.bar.away{transform:translateY(-100%)}
.bar > *{position:relative}
.bar-sym img{width:54px}
.bar-nav{display:flex; gap:30px; margin-left:auto}
.bar-nav a{font:500 11px/1 var(--sans); font-stretch:125%; letter-spacing:.2em; text-transform:uppercase; padding:14px 0; position:relative}
.bar-nav a::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.bar-nav a:hover::after{transform:scaleX(1); transform-origin:left}

/* the opening */
.hero{position:relative; height:100svh; min-height:560px; overflow:hidden}
.hero-pic{position:absolute; inset:-6% 0 0; will-change:transform}
.hero-pic img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.hero-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,18,.6) 0%, rgba(23,20,18,0) 26%, rgba(23,20,18,0) 46%, rgba(23,20,18,.86) 88%, var(--ink) 100%)}
.hero-in{position:relative; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:110px var(--gut) clamp(26px, 4vh, 44px)}
.hero-top{display:flex; justify-content:space-between; gap:20px; color:var(--c60)}
.hero-tag{font:400 clamp(26px, 3.2vw, 50px)/1 var(--serif); margin-bottom:clamp(16px, 2.4vw, 34px)}
.hero-mark{width:100%}

/* the line that runs */
.marquee{overflow:hidden; border-top:1px solid var(--c18); border-bottom:1px solid var(--c18); padding:20px 0}
.marquee-track{display:flex; width:max-content; will-change:transform}
.marquee-track span{font:400 clamp(30px, 3.6vw, 56px)/1 var(--serif); white-space:nowrap; display:flex; align-items:center}
.marquee-track img{width:clamp(46px, 4.6vw, 70px); margin:0 clamp(26px, 3vw, 46px)}

/* the story, read in as you scroll */
.story{padding:clamp(100px, 14vw, 210px) var(--gut) clamp(80px, 10vw, 150px)}
.story-text{font:400 clamp(34px, 4.6vw, 78px)/1.06 var(--serif); letter-spacing:-.012em; max-width:16.5em; text-wrap:pretty}
.story-text .w{opacity:.16}
.story-pics{display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gut); margin-top:clamp(70px, 10vw, 150px)}
.sp-a{grid-column:1 / span 5}
.sp-b{grid-column:7 / span 6; margin-top:clamp(80px, 14vw, 220px)}
.frame{overflow:hidden; border-radius:3px; aspect-ratio:4/5}
.frame img{width:100%; height:116%; object-fit:cover; margin-top:-8%; will-change:transform}
figcaption.kick{color:var(--c60); margin-top:14px}

/* the steak, held on screen while its three steps pass */
.steak{display:grid; grid-template-columns:1fr 1fr; gap:var(--gut); padding:0 var(--gut); background:var(--cream); color:var(--ink)}
.steak-pics{position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; padding:90px 0 40px}
.steak-frame{position:relative; flex:1; border-radius:3px; overflow:hidden}
.sx{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1s var(--ease), transform 1.6s var(--ease)}
.sx.on{opacity:1; transform:none}
.steak-count{margin-top:16px; color:var(--i60)}
.sstep{min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:26px; padding:90px 0}
.sstep .kick{color:var(--i60)}
.sizes{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.sizes div{border-top:1px solid var(--ink); padding-top:14px}
.sizes b{display:block; font:400 clamp(80px, 10vw, 180px)/.86 var(--serif); letter-spacing:-.04em; font-weight:400}
.sizes .kick{display:block; margin-top:12px}
.sline{font:400 clamp(28px, 2.6vw, 40px)/1.1 var(--serif)}

/* the plates, sideways */
.plates{padding-top:clamp(100px, 13vw, 190px)}
@media (min-width:901px){ .plates{padding-top:clamp(90px, 9vh, 120px); min-height:100svh} }
.plates-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:0 var(--gut) clamp(30px, 4vw, 60px); flex-wrap:wrap}
.plates-head .kick{color:var(--c60)}
.plates-title{font:400 clamp(34px, 4vw, 64px)/1 var(--serif); max-width:12em; text-align:right}
.plates-pin{overflow:hidden}
.plates-track{display:flex; align-items:flex-end; gap:clamp(14px, 2vw, 30px); padding:0 var(--gut) clamp(60px, 8vw, 110px); width:max-content; will-change:transform}
.pl{width:clamp(260px, 30vw, 460px)}
.pl img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:3px; display:block}
.pl-tall img{aspect-ratio:4/5}
.pl figcaption{display:flex; justify-content:space-between; margin-top:14px; color:var(--c60)}

/* the menu */
.menu{padding:clamp(100px, 13vw, 190px) var(--gut); background:var(--cream); color:var(--ink); position:relative}
.menu .sec-kick{color:var(--i60)}
.menu-lede{max-width:430px; font-size:17px; color:var(--i60); margin-top:30px}
.bowls{margin-top:clamp(50px, 7vw, 100px); border-top:1px solid var(--ink)}
.bowls li{display:grid; grid-template-columns:70px 1fr minmax(200px, 340px) clamp(130px, 14vw, 220px); align-items:center; gap:20px; padding:clamp(14px, 1.6vw, 22px) 0; border-bottom:1px solid var(--i15); cursor:default}
.bowls .n{color:var(--i60)}
.bowls b{font:400 clamp(38px, 5.4vw, 92px)/1 var(--serif); font-weight:400; letter-spacing:-.015em; transition:transform .7s var(--ease)}
.bowls .what{font-size:14px; color:var(--i60)}
.bowls li:hover b{transform:translateX(clamp(10px, 2vw, 30px))}
/* the bowls are packshots cut out of their background: shown whole, never cropped, standing on the paper; pointed at, the bowl lifts a little */
.bowls .thumb{width:100%; height:auto; aspect-ratio:1000/805; object-fit:contain; transition:transform .8s var(--ease)}
.bowls li:hover .thumb{transform:translateY(-6px) scale(1.05)}
.carte{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(24px, 3vw, 50px); margin-top:clamp(70px, 10vw, 140px)}
.carte h3{font:400 30px/1 var(--serif); padding-bottom:14px; border-bottom:1px solid var(--ink); margin-bottom:6px}
.carte h3.gap{margin-top:40px}
.carte li{padding:9px 0; border-bottom:1px solid var(--i15); font-size:15px}
.carte li small{display:block; font-size:13px; color:var(--i60); margin-top:2px}
.carte .small{font-size:13px; color:var(--i60); margin-top:10px}
.fine{font-size:12px; color:var(--i60); margin-top:60px}

/* happy hours */
.happy{padding:clamp(100px, 13vw, 190px) var(--gut); text-align:center; border-bottom:1px solid var(--c18)}
.happy .kick{color:var(--c60); margin-bottom:28px}
.happy-big{font:400 clamp(44px, 6.4vw, 112px)/.96 var(--serif); letter-spacing:-.02em; max-width:13em; margin:0 auto}

/* visit */
.visit{padding:clamp(100px, 13vw, 190px) var(--gut)}
.places{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 2vw, 26px)}
.place{background:var(--cream); color:var(--ink); border-radius:3px; padding:clamp(28px, 3.6vw, 56px); display:flex; flex-direction:column; min-height:520px}
.place h3{font:400 clamp(40px, 4.6vw, 76px)/.95 var(--serif); margin-top:18px}
.place .where{color:var(--i60); margin-top:10px}
.place .hours{font:400 clamp(30px, 3vw, 46px)/1 var(--serif); margin-top:auto; padding-top:50px}
.place .acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.status{display:inline-flex; align-self:flex-start; padding:9px 14px; border-radius:999px; border:1px solid var(--i15)}
.book{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-top:clamp(14px, 2vw, 26px); border:1px solid var(--c18); border-radius:3px; padding:clamp(28px, 3.6vw, 56px)}
.book-big{font:400 clamp(36px, 4vw, 66px)/1 var(--serif)}
.book .acts{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.book .kick{color:var(--c60)}

/* delivery */
.deliver{position:relative; height:110svh; min-height:640px; overflow:hidden; display:flex; align-items:flex-end}
.deliver-pic{position:absolute; inset:0}
.deliver-pic img{width:100%; height:120%; object-fit:cover; margin-top:-10%}
.deliver::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--ink) 0%, rgba(23,20,18,0) 26%, rgba(23,20,18,.2) 55%, rgba(23,20,18,.9) 100%)}
.deliver-in{position:relative; z-index:1; padding:0 var(--gut) clamp(50px, 8vw, 110px)}
.deliver-in .kick{color:var(--c60); margin-bottom:24px}
.deliver-in .pill{margin-top:36px}

/* the foot: the word runs edge to edge */
.foot{padding:clamp(80px, 10vw, 140px) var(--gut) var(--gut); background:var(--ink)}
.foot-row{display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding-bottom:clamp(40px, 6vw, 80px)}
.foot-sym{width:70px}
.foot-tag{font:400 clamp(24px, 2.4vw, 36px)/1 var(--serif); flex:1}
.foot-ig{color:var(--c60); padding:14px 0}
.foot-ig:hover{color:var(--cream)}

@media (max-width:900px){
  .bar-nav{display:none} .bar .pill{margin-left:auto}
  .hero-top{flex-direction:column; gap:6px}
  .story-pics{grid-template-columns:1fr 1fr; gap:14px} .sp-a{grid-column:1} .sp-b{grid-column:2; margin-top:80px}
  .steak{grid-template-columns:1fr; gap:0} .steak-pics{top:64px; height:48svh; padding:18px 0 0; z-index:2; background:var(--cream)} .steak-count{display:none}
  .sstep{min-height:62svh; padding:40px 0}
  .plates-title{text-align:left}
  .plates-pin{overflow-x:auto; scrollbar-width:none} .plates-pin::-webkit-scrollbar{display:none}
  .pl{width:72vw}
  .bowls li{grid-template-columns:40px 1fr} .bowls .what{grid-column:2; margin-top:-6px}
  .carte{grid-template-columns:1fr 1fr}
  .places{grid-template-columns:1fr} .place{min-height:0}
}
@media (max-width:560px){ .carte{grid-template-columns:1fr} .sizes b{font-size:68px} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} .story-text .w{opacity:1} }

/* ================= the finishing pass ================= */
::selection{background:var(--cream); color:var(--ink)}
.menu ::selection, .steak ::selection, .place ::selection{background:var(--ink); color:var(--cream)}
:focus-visible{outline:1px solid currentColor; outline-offset:4px; border-radius:4px}

/* a fine film grain over everything, so the dark reads as a room rather than a screen */
.grain{position:fixed; inset:-60%; z-index:90; pointer-events:none; opacity:.065; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}12%{transform:translate(-3%,2%)}25%{transform:translate(2%,-4%)}37%{transform:translate(-4%,-1%)}50%{transform:translate(3%,3%)}62%{transform:translate(-1%,4%)}75%{transform:translate(4%,-2%)}87%{transform:translate(-2%,-3%)}100%{transform:translate(1%,1%)}}

/* the hero: a quiet line that keeps falling, asking you down */
.hero-in{position:relative}
.cue{position:absolute; right:var(--gut); bottom:clamp(26px, 4vh, 44px); width:1px; height:64px; overflow:hidden; background:var(--c18)}
.cue i{position:absolute; inset:0; background:var(--cream); transform:translateY(-100%); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
.hero-mark{padding-right:clamp(24px, 3vw, 50px)}

/* cream rooms slide over the dark ones with soft shoulders */
.steak, .menu{border-radius:clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0 0; position:relative; z-index:2; margin-top:calc(clamp(18px, 2.4vw, 34px) * -1)}
.menu{border-radius:clamp(18px, 2.4vw, 34px)}
.happy{padding-top:calc(clamp(100px, 13vw, 190px) + 20px)}

/* photos are uncovered, not just faded: a curtain of the ground colour draws up and the picture settles */
.rv{position:relative; overflow:hidden}
.rv::after{content:""; position:absolute; inset:0; background:var(--ink); transform-origin:50% 0; transform:scaleY(var(--cover, 0)); pointer-events:none}
.pl.rv{overflow:visible}
.pl.rv::after{bottom:auto; aspect-ratio:1}
.pl-tall.rv::after{aspect-ratio:4/5}

/* the steak's progress */
.steak-foot{display:flex; align-items:center; gap:18px; margin-top:16px}
.steak-foot .steak-count{margin:0}
.sbar{flex:1; height:1px; background:var(--i15); position:relative; overflow:hidden}
.sbar i{position:absolute; inset:0; background:var(--ink); transform-origin:0 50%; transform:scaleX(0)}
.sizes b{display:block; overflow:hidden}

/* the plates' progress, under the moving row */
.plates-prog{margin:0 var(--gut); height:1px; background:var(--c18); position:relative; overflow:hidden; transform:translateY(calc(clamp(60px, 8vw, 110px) * -.5))}
.plates-prog i{position:absolute; inset:0; background:var(--cream); transform-origin:0 50%; transform:scaleX(0)}

/* nav: the room you are in keeps its line */
.bar-nav a.here::after{transform:scaleX(1)}

/* buttons lean towards the pointer a little */
.pill{will-change:transform}



/* visit: the cards answer the pointer */
.place{transition:transform .8s var(--ease)}
.place:hover{transform:translateY(-6px)}
.place .hours{font-variant-numeric:lining-nums}

/* the foot: the word runs edge to edge */
.foot-mark{width:100%}

@media (max-width:900px){
  .cue{display:none}
  .plates-prog{display:none}
  .bowls li{grid-template-columns:1fr clamp(84px, 17vw, 150px); align-items:center; column-gap:14px}
  .bowls .n{display:none}
  .bowls .thumb{grid-column:2; grid-row:1 / span 2; width:100%}
  .bowls b, .bowls .what{grid-column:1} .bowls .what{margin-top:0}
  .place:hover{transform:none}
}
@media (prefers-reduced-motion: reduce){ .grain{display:none} .cue{display:none} }

/* ================= films, and every screen it lands on ================= */
.hero-vid{width:100%; height:100%; object-fit:cover; display:block; background:var(--ink)}
.sx{display:block}
.pl video{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; display:block; background:var(--ink2); transition:transform 1.2s var(--ease)}


/* the notch, the Duo's camera strip and rounded corners: the page keeps clear of them, the dark ground runs behind */
html{background:var(--ink); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
.bar{left:env(safe-area-inset-left); right:env(safe-area-inset-right); padding-top:max(16px, env(safe-area-inset-top))}
.foot{padding-bottom:max(var(--gut), env(safe-area-inset-bottom))}

/* where there is no mouse: no hover effects, no frosted glass over moving film, no animated grain */
@media (hover:none), (pointer:coarse){
  .grain{display:none}
  .bar::before{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(23,20,18,.96)}
  .pl:hover img, .pl:hover video, .place:hover{transform:none}
  .bowls li:hover b, .bowls li:hover .thumb{transform:none}
}
/* wide but touch (an iPad on its side): the plates scroll under the finger instead of being held */
html:not(.pin-ok) .plates-pin{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
html:not(.pin-ok) .plates-pin::-webkit-scrollbar{display:none}
html:not(.pin-ok) .pl{scroll-snap-align:start; scroll-margin-left:var(--gut)}
html:not(.pin-ok) .plates-prog{display:none}

/* short screens (the Duo held open, a laptop with its bars): the type and the held parts give way */
@media (max-height:700px) and (min-width:700px){
  .hero-in{padding-top:84px}
  .steak-pics{padding:76px 0 24px}
  .sstep{min-height:86svh}
  .sizes b{font-size:clamp(70px, 8vw, 130px)}
  .h-big{font-size:clamp(34px, 4vw, 60px)}
}
/* narrow (a phone, the Duo's front screen) */
@media (max-width:520px){
  .hero-tag{font-size:28px}
  .story-text{font-size:clamp(30px, 8.4vw, 40px)}
  .h-huge{font-size:clamp(54px, 15vw, 80px)}
  .bar{gap:14px; padding-left:16px; padding-right:16px}
  .bar-sym img{width:46px}
  .pill{min-height:44px; padding:0 18px}
  .place{padding:26px 22px}
  .book{padding:26px 22px}
}
@media (prefers-reduced-motion: reduce){ .hero-vid, .lazyv{animation:none} }
@media (max-width:900px){
  .sstep{min-height:52svh; justify-content:flex-start; padding:34px 0 40px; gap:18px}
  .sstep:last-child{min-height:60svh}
}
/* wide but short (the Duo held open, a phone on its side, an iPad mini): the steak keeps its two columns,
   the picture held beside the words instead of squeezed into a band above them */
@media (min-width:640px) and (max-width:900px) and (orientation:landscape){
  .steak{grid-template-columns:1fr 1fr; gap:var(--gut)}
  .steak-pics{position:sticky; top:0; height:100svh; padding:70px 0 20px; z-index:auto; background:none}
  .steak-frame{flex:1; aspect-ratio:auto}
  .steak-count{display:block}
  .sstep{min-height:100svh; justify-content:center; padding:70px 0}
  .sstep:last-child{min-height:100svh}
  .sizes b{font-size:clamp(56px, 9vw, 96px)}
  /* a plate is sized by the height too, so the tall ones and their captions fit the short screen */
  .pl{width:min(46vw, 50svh)}
}

/* a tablet or the Duo held open: the two places side by side */
@media (min-width:640px) and (max-width:900px){ .places{grid-template-columns:1fr 1fr} }

/* words for search engines and screen readers, not drawn */
.vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}