@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

:root{
  --black:#0d0c0a;
  --board:#141310;
  --olive:#a7a35f;
  --olive-dk:#6f6c3a;
  --amber:#e0a456;
  --cream:#f1ebdc;
  --muted:#a59f90;
  --line:#2c2a23;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Jost",system-ui,sans-serif;background:var(--black);color:var(--cream);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.big{font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:.95}
.kick{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);font-weight:500}

/* logo: NEW YORK + Deli */
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--cream);line-height:1}
.logo .ny{display:flex;flex-direction:column;font-weight:300;letter-spacing:.42em;font-size:18px}
.logo .ny small{font-size:10px;letter-spacing:.5em;color:var(--olive);border-top:1px solid #5d5a4c;padding-top:5px;margin-top:5px}
.logo .deli{font-family:"Mrs Saint Delafield",cursive;font-size:52px;margin-left:-4px;margin-top:-6px;color:#fff}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(13,12,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.scrolled{border-bottom-color:var(--line);background:rgba(13,12,10,.94)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.nav{display:flex;gap:30px;align-items:center;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.nav a{text-decoration:none;color:#ddd6c5;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--amber)}
.nav .order{border:1px solid var(--olive);padding:10px 16px;color:var(--cream)}
.nav .order::after{display:none}
.nav .order:hover{background:var(--olive);color:var(--black)}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:16px 24px;border:1px solid var(--cream);transition:background .25s,color .25s,border-color .25s}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn.solid{background:var(--olive);border-color:var(--olive);color:var(--black)}
.btn.solid:hover{background:#bbb76e;border-color:#bbb76e}
.btn.line:hover{background:var(--cream);color:var(--black)}

/* home hero */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden;margin-top:calc(-1 * var(--hh,84px))}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,10,.92) 0%,rgba(13,12,10,.7) 40%,rgba(13,12,10,.15) 75%),linear-gradient(0deg,rgba(13,12,10,.9) 0%,rgba(13,12,10,0) 35%)}
.hero .wrap{position:relative;z-index:2;padding-top:170px;padding-bottom:80px;width:100%}
.hero h1{font-size:clamp(56px,8.4vw,120px);color:var(--cream);margin-top:16px;max-width:9.5em}
.hero h1 em{font-style:normal;color:var(--olive)}
.hero p.lead{max-width:30em;margin-top:22px;font-size:19px;color:#ddd6c5;font-weight:300}

/* dual menu */
.dual{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#11100d}
.dual .wrap{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;padding-top:56px;padding-bottom:56px}
.dual img{width:260px;aspect-ratio:1/1;object-fit:cover}
.dual h2{font-size:clamp(36px,4.6vw,58px);color:var(--cream);margin-top:10px}
.dual p{margin-top:14px;color:#cfc7b5;max-width:40em}

/* favourites carousel */
.favs{padding:100px 0 90px}
.favs .top{display:flex;justify-content:space-between;align-items:end;gap:20px}
.favs h2{font-size:clamp(44px,5.4vw,72px);color:var(--cream);margin-top:10px}
.arrows{display:flex;gap:8px}
.arrows button{all:unset;cursor:pointer;width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--olive-dk);color:var(--cream);font-size:22px;transition:background .2s,border-color .2s}
.arrows button:hover{background:var(--olive);border-color:var(--olive);color:var(--black)}
.arrows button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/4);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin-top:36px;padding-bottom:10px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.dish{scroll-snap-align:start;position:relative;overflow:hidden;background:#000}
.dish img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s}
.dish:hover img{transform:scale(1.04);opacity:.85}
.dish figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 16px;background:linear-gradient(0deg,rgba(13,12,10,.92),rgba(13,12,10,0))}
.dish figcaption b{display:block;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}

/* deals */
.feat .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:40px;padding-bottom:110px}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.card h2{font-size:clamp(40px,4.6vw,62px);color:var(--cream);margin-top:24px}
.card h2 em{font-style:normal;color:var(--amber)}
.card p{margin-top:14px;color:#cfc7b5}
.card ul{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.card li{padding:10px 0;border-bottom:1px solid var(--line)}

/* delivery band */
.deliver{background:var(--olive);color:var(--black)}
.deliver .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-top:70px;padding-bottom:70px}
.deliver h2{font-size:clamp(40px,5vw,66px)}
.deliver p{font-size:18px;margin-top:12px;max-width:34em}
.app{background:var(--black);color:var(--cream);text-decoration:none;padding:24px 26px;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:34px;text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}
.app span{font-family:"Jost",sans-serif;font-size:14px;letter-spacing:.16em;color:var(--olive);font-weight:500;transition:transform .25s}
.app:hover span{transform:translateX(5px)}
.also{font-size:16px;letter-spacing:.06em;margin-top:10px}

/* page head (inner pages) */
.phead{padding:70px 0 40px;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(60px,9vw,130px);color:var(--olive);margin-top:10px}
.phead p{margin-top:16px;color:#cfc7b5;max-width:36em;font-size:18px}

/* menu tools */
.tools{position:sticky;top:var(--hh,84px);z-index:10;background:rgba(13,12,10,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.tools .wrap{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.cats{display:flex;gap:4px 18px;flex-wrap:wrap;flex:1}
.cats a{text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#bdb6a6;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.cats a:hover{color:var(--cream)}
.cats a.on{color:var(--amber);border-bottom-color:var(--amber)}
.search{display:flex;align-items:center;gap:8px;border:1px solid #3e3c2a;padding:0 12px;background:#11100d}
.search input{all:unset;width:165px;padding:10px 0;font-size:15px;color:var(--cream)}
.search input::placeholder{color:#7d7768}
.veg{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.08em;cursor:pointer;user-select:none}
.veg input{position:absolute;opacity:0}
.veg .sw{width:42px;height:24px;border:1px solid var(--olive-dk);position:relative;transition:background .2s}
.veg .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--muted);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s}
.veg input:checked+.sw{background:var(--olive-dk)}
.veg input:checked+.sw::after{transform:translateX(18px);background:var(--cream)}
.veg input:focus-visible+.sw{outline:2px solid var(--amber);outline-offset:2px}

/* the board */
.menu{padding:56px 0 100px}
.board{position:relative;border:1px solid var(--olive-dk);padding:12px}
.board-in{border:1px solid #3e3c2a;padding:54px 54px 40px;background:var(--board);display:grid;grid-template-columns:repeat(3,1fr);gap:46px 54px}
.sec{scroll-margin-top:calc(var(--stick,150px) + 18px)}
.sec h3{font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;font-size:40px;line-height:.95;color:var(--olive);letter-spacing:.02em}
.sec h3 span{display:block;font-family:"Jost",sans-serif;font-weight:300;font-size:14px;letter-spacing:.42em;color:var(--olive)}
.sec .note{color:var(--amber);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.sec ul{list-style:none;margin-top:14px}
.sec li{padding:7px 0;border-bottom:1px dotted #3a3829;text-transform:uppercase;letter-spacing:.06em;font-size:15.5px;transition:opacity .3s,color .3s}
.sec li small{display:block;text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--muted);margin-top:1px}
.sec li.hit{color:var(--amber)}
.sec li.dim{opacity:.18}
.sec.empty{opacity:.25}
.v{color:var(--olive);font-size:12px;margin-left:4px}
.board-foot{grid-column:1 / -1;border-top:1px solid #3e3c2a;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.06em;color:#ddd6c5}
.none{display:none;text-align:center;padding:30px 0 0;color:var(--muted)}
.none.show{display:block}

/* visit page */
.visit .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;padding-top:70px;padding-bottom:100px}
.visit address{font-style:normal;font-size:21px}
.hours{margin-top:28px;border-top:1px solid var(--line)}
.hours div{display:flex;justify-content:space-between;padding:13px 12px;border-bottom:1px solid var(--line);letter-spacing:.04em;transition:background .3s}
.hours span:first-child{color:var(--muted)}
.hours div.today{background:#1b1a14;border-left:3px solid var(--amber)}
.hours div.today span:first-child{color:var(--amber)}
.hours div.today span:first-child::after{content:" · Today";font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.contact{margin-top:26px;display:grid;gap:6px}
.contact a{text-decoration:none;color:var(--amber);justify-self:start;font-size:19px}
.small{margin-top:18px;color:var(--muted);font-size:15px}
.map{position:relative;min-height:460px;border:1px solid var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.6) contrast(.95)}

footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;padding-bottom:26px}
footer a{color:var(--cream);text-decoration:none}

/* motion: slide-up + fade only */
@media (prefers-reduced-motion:no-preference){
  .motion .up{opacity:0;transform:translateY(24px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
  .motion .d1{animation-delay:.12s}.motion .d2{animation-delay:.24s}.motion .d3{animation-delay:.36s}
  .motion .rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .motion .rv.in{opacity:1;transform:none}
  .motion .board.rv .sec{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .motion .board.rv.in .sec{opacity:1;transform:none}
  .motion .board.rv.in .sec:nth-child(2){transition-delay:.08s}
  .motion .board.rv.in .sec:nth-child(3){transition-delay:.16s}
  .motion .board.rv.in .sec:nth-child(4){transition-delay:.24s}
  .motion .board.rv.in .sec:nth-child(5){transition-delay:.32s}
  .motion .board.rv.in .sec:nth-child(6){transition-delay:.4s}
  .motion .w{display:inline-block;opacity:0;transform:translateY(.35em);animation:up .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 80ms + .1s)}
}
@keyframes up{to{opacity:1;transform:none}}
.settled .up,.settled .rv,.settled .w,.settled .board .sec{opacity:1!important;transform:none!important;animation:none!important}

@media (max-width:960px){
  .nav{gap:18px;font-size:12px}
  .nav .tel{display:none}
  .board-in{grid-template-columns:1fr 1fr;padding:36px 28px 30px}
  .feat .wrap,.deliver .wrap,.visit .wrap{grid-template-columns:1fr;gap:50px}
  .dual .wrap{grid-template-columns:1fr;gap:26px}
  .dual img{width:100%;max-width:420px}
  .track{grid-auto-columns:calc((100% - 12px)/2)}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  body{font-size:16px}
  header .wrap{flex-direction:column;align-items:flex-start;gap:6px;padding-top:10px;padding-bottom:8px}
  .logo .ny{font-size:13px;letter-spacing:.3em}
  .logo .deli{font-size:38px}
  .nav{width:100%;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.12em}
  .nav .order{padding:7px 10px}
  .hero{margin-top:0;min-height:0;display:block}
  .hero>img{position:relative;height:auto;aspect-ratio:5/4;object-position:58% 50%}
  .hero::after{display:none}
  .hero .wrap{padding-top:26px;padding-bottom:56px}
  .btn{flex:1 1 100%;justify-content:center}
  .favs .top{flex-direction:column;align-items:flex-start}
  .track{grid-auto-columns:78vw;gap:3vw;padding:0 11vw 10px;margin-left:-18px;margin-right:-18px}
  .dish{scroll-snap-align:center}
  header{position:relative}
  .tools{top:0}
  .tools .wrap{gap:12px}
  .cats{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cats a{white-space:nowrap}
  .search{flex:1}
  .search input{width:100%}
  .board{padding:7px}
  .board-in{grid-template-columns:1fr;padding:30px 18px 24px;gap:34px}
  .sec h3{font-size:34px}
  .feat .wrap{padding-bottom:70px}
  .map{min-height:320px}
}