/* Matilda's Café Bistro: olive + paper from their own logo and posters, gold only for prices and the main button */
:root{
  --paper:#f2f0e8; --paper-2:#e7e4d8; --olive:#262c1b; --olive-2:#313923; --ink:#1c2013; --gold:#d3aa5c; --gold-ink:#7a5a1c;
  --serif:"Marcellus",Georgia,"Times New Roman",serif; --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-body:clamp(1.0625rem,.96rem + .4vw,1.3125rem); --t-small:clamp(1rem,.9rem + .4vw,1.125rem);
  --t-h2:clamp(2rem,1.3rem + 2.6vw,3.75rem); --t-h3:clamp(1.5rem,1.25rem + .9vw,2.125rem);
  --pad:clamp(20px,4vw,72px); --sec:clamp(56px,7vw,120px); --gap:clamp(20px,2.6vw,48px); --max:1720px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,dl,dd,ul,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.dark{background:var(--olive);color:var(--paper)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.dark :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:12px 16px;z-index:9}
.skip:focus{left:8px;top:8px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);max-width:none}
.logo{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1;padding:6px 0;min-height:44px;justify-content:center}
.logo b{font:400 clamp(1.5rem,1.2rem + 1vw,2rem)/1 var(--serif);letter-spacing:.2em;margin-right:-.2em}
.logo span{font:500 clamp(.9375rem,.85rem + .3vw,1.0625rem)/1 var(--sans);letter-spacing:.3em;margin-right:-.3em;margin-top:7px}
.nav{display:flex;align-items:center;gap:clamp(8px,2vw,36px)}
.nav a{font-size:var(--t-small);font-weight:500;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.nav a.btn:hover{text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font:600 var(--t-small)/1.1 var(--sans);text-decoration:none;background:var(--gold);color:var(--ink);border:2px solid var(--gold);transition:background .2s,color .2s,transform .15s}
.btn:hover{background:#e2be78;border-color:#e2be78}
.btn:active{transform:translateY(1px)}
.btn.line{background:transparent;color:inherit;border-color:currentColor}
.btn.line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.ink{background:var(--olive);border-color:var(--olive);color:var(--paper)}
.btn.ink:hover{background:var(--olive-2);border-color:var(--olive-2)}
.nav .btn{min-height:46px;padding:0 20px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(calc(100svh - 82px),880px)}
.hero-text{container-type:inline-size;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,88px) var(--pad)}
.hero h1{font-size:clamp(2.6rem,17.5cqi,8.5rem);line-height:.98;letter-spacing:-.015em}
.hero h1 span{display:block}
.hero .lede{margin-top:clamp(18px,2.2vw,32px);font-size:clamp(1.125rem,1rem + .5vw,1.4375rem);line-height:1.45;max-width:30em}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,38px)}
.hero .when{margin-top:clamp(22px,2.6vw,38px);font-size:var(--t-small);display:grid;gap:2px}
.hero .when b{font-weight:600}
.hero-pic{position:relative;min-height:0}
.hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%}

/* sections */
.sec{padding-block:var(--sec)}
.sec-head{max-width:46em}
.sec-head p{margin-top:clamp(12px,1.4vw,20px)}

/* benedicts */
.bene{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) clamp(28px,5vw,96px);align-items:start}
.bene-list{margin-top:clamp(24px,3vw,44px)}
.bene-list > div{padding:clamp(14px,1.4vw,20px) 0;display:grid;grid-template-columns:1fr auto;gap:2px 20px}
.bene-list > div + div{box-shadow:0 -3px 0 var(--paper-2)}
.bene-list dt{font:400 var(--t-h3)/1.15 var(--serif)}
.bene-list .price{font-weight:600;color:var(--gold-ink);font-variant-numeric:tabular-nums;align-self:center}
.bene-list dd{grid-column:1/-1;font-size:var(--t-small)}
.bene .note{margin-top:clamp(14px,1.6vw,22px);font-size:var(--t-small)}
.bene .hard{text-wrap:balance;margin-top:clamp(18px,2vw,28px);font:400 var(--t-h3)/1.2 var(--serif)}
.bene-pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px)}
.bene-pics figure:first-child{grid-column:1/-1}
figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
figcaption{font-size:var(--t-small);margin-top:8px}

/* taste of the menu */
.taste-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px}
.taste{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,88px) clamp(24px,4vw,72px);margin-top:clamp(28px,4vw,64px)}
.taste article:nth-child(even){margin-top:clamp(0px,6vw,104px);margin-bottom:calc(-1 * clamp(0px,6vw,104px))}
.taste h3{margin-top:clamp(16px,1.6vw,24px)}
.taste .with{font-size:var(--t-small);margin-top:6px;opacity:.86}
.dish{margin-top:clamp(10px,1.2vw,16px)}
.dish li{display:grid;grid-template-columns:1fr auto;gap:0 18px;padding:9px 0}
.dish b{font-weight:600}
.dish i{font-style:normal;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.dish span{grid-column:1/-1;font-size:var(--t-small);opacity:.86}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:5px;margin-top:6px}
.also{margin-top:calc(clamp(0px,6vw,104px) + clamp(40px,5vw,80px))}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,56px);margin-top:clamp(8px,1vw,14px)}
.cats a{display:flex;align-items:center;min-height:52px;font:400 var(--t-h3)/1.15 var(--serif);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--gold);text-underline-offset:7px;padding:8px 0}
.cats a:hover{text-decoration-color:currentColor}
@media (max-width:1100px){.cats{grid-template-columns:1fr 1fr}}

/* drinks */
.drinks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,40px) clamp(28px,5vw,96px);align-items:center;margin-top:clamp(28px,4vw,56px)}
.drinks .dish i{color:var(--gold-ink)}
.drinks h3 + .dish{margin-top:6px}
.drinks .txt{max-width:30em}
.drinks .txt.b{justify-self:end;width:100%}

/* find us */
.find{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) clamp(28px,5vw,96px);align-items:center}
.find address{font-style:normal;margin-top:clamp(16px,2vw,28px);font-size:clamp(1.25rem,1.05rem + .7vw,1.75rem);line-height:1.35;font-family:var(--serif)}
.hours{margin-top:clamp(18px,2vw,28px);display:grid;grid-template-columns:auto 1fr;gap:6px 28px;max-width:26em}
.hours dd{font-variant-numeric:tabular-nums}
.find .collect{margin-top:clamp(18px,2vw,28px);max-width:28em}
.find .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.2vw,32px)}
.find .fb{margin-top:clamp(16px,1.8vw,24px);font-size:var(--t-small)}
.find .fb a{display:inline-flex;min-height:44px;align-items:center;text-underline-offset:5px}

/* footer */
.foot{background:var(--olive-2);color:var(--paper);padding-block:clamp(36px,5vw,72px) clamp(28px,3vw,44px)}
.foot .big{container-type:inline-size}
.foot .big a{display:block;text-decoration:none;font:400 18.4cqi/1 var(--serif);letter-spacing:.06em;white-space:nowrap}
.foot .small{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:clamp(18px,2vw,30px);font-size:var(--t-small)}
.foot .small a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:5px}
.foot .small span{min-height:44px;display:inline-flex;align-items:center}

/* reveal: slide-up + fade only, with a settled fallback */
.js .r{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.js .r.in,.js.settled .r{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .r{opacity:1;transform:none;transition:none}.btn{transition:none}}

/* ---------- menu page ---------- */
.menu-head{padding-block:clamp(32px,4vw,64px) clamp(24px,3vw,40px)}
.menu-head h1{font-size:clamp(2.75rem,2rem + 4vw,5.5rem)}
.menu-head p{margin-top:12px;max-width:40em}
.menu-grid{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:clamp(28px,4vw,80px);align-items:start;padding-bottom:clamp(8px,1vw,16px)}
.side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding-right:6px}
.side label{display:block;font-weight:600;font-size:var(--t-small);margin-bottom:6px}
.side input[type=search],.jump select{width:100%;min-height:48px;padding:0 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--olive);border-radius:0}
.filters{display:flex;gap:8px;margin-top:10px}
.filters button{flex:1;min-height:46px;font:600 var(--t-small)/1 var(--sans);background:transparent;color:var(--ink);border:2px solid var(--olive);cursor:pointer;border-radius:0}
.filters button[aria-pressed=true]{background:var(--olive);color:var(--paper)}
.side nav{margin-top:18px}
.side nav a{display:flex;align-items:center;min-height:38px;text-decoration:none;font-size:var(--t-small);padding:2px 10px;border-left:4px solid transparent}
.side nav a:hover{text-decoration:underline;text-underline-offset:4px}
.side nav a.on{border-left-color:var(--gold);font-weight:600;background:var(--paper-2)}
.jump{display:none}
.msec{padding-bottom:clamp(36px,4.4vw,72px);scroll-margin-top:20px}
.msec h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.875rem)}
.msec .with{margin-top:8px;font-size:var(--t-small)}
.msec .pic{margin-top:clamp(16px,2vw,26px);max-width:760px}
.items{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,72px);margin-top:clamp(12px,1.6vw,22px)}
.items li{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:14px 0;align-content:start;box-shadow:0 3px 0 var(--paper-2)}
.items b{font-weight:600}
.items i{font-style:normal;font-weight:600;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.items span{grid-column:1/-1;font-size:var(--t-small)}
.items em{grid-column:1/-1;font-style:normal;font-size:var(--t-small);font-weight:600;color:#44512c}
.none{display:none;padding:20px 0;font-weight:600}
.menu-call{padding-block:clamp(40px,5vw,80px)}
.menu-call .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.menu-call p{margin-top:12px;max-width:34em}
[hidden]{display:none!important}

/* ---------- laptop and down ---------- */
/* ---------- phone: its own order, photo first ---------- */
@media (max-width:760px){
  .top{padding-block:10px}
  .nav .hide-s{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-pic{order:-1;aspect-ratio:4/3}
  .hero-pic img{object-position:30% 50%}
  .hero-text{padding-block:28px 40px}
  .hero .acts .btn{flex:1 1 100%}
  .bene,.find{grid-template-columns:1fr}
  .bene-pics{order:0}
  .taste{grid-template-columns:1fr;gap:44px}
  .taste article:nth-child(even){margin:0}
  .also{margin-top:44px}
  .cats{grid-template-columns:1fr}
  .drinks{grid-template-columns:1fr}
  .drinks .txt.b{order:1}
  .drinks .txt{margin-bottom:18px}
  .find-pic{order:-1}
  .foot .small{flex-direction:column;gap:0}
  .menu-grid{grid-template-columns:1fr;gap:12px}
  .side{display:contents}
  .side .row{position:sticky;top:0;z-index:5;background:var(--paper);padding:10px 0;box-shadow:0 3px 0 var(--paper-2)}
  .side nav,.side label.s-lab{display:none}
  .jump{display:block}
  .side .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filters{margin-top:0}
  .items{grid-template-columns:1fr}
  .msec{scroll-margin-top:84px}
  #list{margin-top:10px}
}