/* Zaru Cafe Bistro. Colours sampled from their logo (green #203433, gold) and their printed menu (paper). */
:root{
  --ground:#203433; --deep:#182927; --lift:#2b4441;
  --gold:#c4ab72; --cream:#f2ecdc; --soft:#d5d3c2;
  --paper:#ebe3ce; --paper-2:#e0d6bc; --ink:#1f2e2d;
  --display:"Marcellus", "Times New Roman", serif;
  --text:"Jost", "Segoe UI", system-ui, sans-serif;
  --fs-body:clamp(1.0625rem, .98rem + .3vw, 1.25rem);
  --fs-small:clamp(1rem, .9rem + .3vw, 1.125rem);
  --fs-h1:clamp(2.3rem, 1.2rem + 3.6vw, 4.9rem);
  --fs-h2:clamp(2rem, 1.3rem + 2.6vw, 3.9rem);
  --fs-h3:clamp(1.35rem, 1.15rem + .7vw, 1.9rem);
  --pad:clamp(20px, 4vw, 64px);
  --sec:clamp(56px, 4.8vw, 104px);
  --gap:clamp(20px, 2.6vw, 48px);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--cream);font-family:var(--text);font-size:var(--fs-body);line-height:1.55;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.gold{color:var(--gold)}
.lede{font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem);line-height:1.45;max-width:34ch}
.say{font-family:var(--display);font-size:var(--fs-h3);line-height:1.25;color:var(--gold);max-width:26ch}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 clamp(20px,2vw,30px);background:var(--gold);color:var(--ink);font:500 var(--fs-body)/1 var(--text);text-decoration:none;border:0;cursor:pointer;transition:transform .16s var(--ease-out), background-color .2s ease}
.btn:active{transform:scale(.97)}
.link{display:inline-flex;align-items:center;min-height:48px;color:var(--cream);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px;font-weight:500}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#d6c08b}.link:hover{color:var(--gold)}}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:clamp(14px,1.6vw,26px)}
.logo{display:block;width:clamp(128px,11vw,176px);aspect-ratio:265/128;flex:none}
.top nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px)}
.top nav a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;font-size:var(--fs-small);font-weight:500}
.top nav a.btn{min-height:48px;font-size:var(--fs-small)}
@media (hover:hover) and (pointer:fine){.top nav a:not(.btn):hover{color:var(--gold)}}
@media (max-width:640px){.top nav a.opt{display:none}}

/* their gold picture frame on the green wall */
.frame{background:var(--deep);padding:clamp(8px,.9vw,14px);border:clamp(5px,.55vw,9px) solid var(--gold)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,96px);align-items:center;padding-block:clamp(20px,3vw,48px) var(--sec)}
.hero .lede{margin-top:clamp(18px,2vw,30px)}
.hero .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(18px,2vw,32px);margin-top:clamp(22px,2.4vw,36px)}
.hero .hours{margin-top:clamp(20px,2.2vw,34px);color:var(--soft);font-size:var(--fs-small)}
.hero .hours b{color:var(--cream);font-weight:500}.hero .hours span{display:inline-block;margin-right:1.2em}
.hero-pic{perspective:1200px}
.hero-pic .frame{will-change:transform}
.hero-pic .ph{aspect-ratio:1440/1489;overflow:hidden}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-pic{max-width:560px}}

/* moving strip of their menu sections */
.strip{background:var(--deep);overflow:hidden;padding-block:clamp(16px,1.8vw,30px)}
.strip-in{display:flex;width:max-content;animation:strip 60s linear infinite}
.strip ul{display:flex;flex:none}
.strip li{font-family:var(--display);font-size:clamp(1.5rem,1rem + 1.6vw,2.6rem);color:var(--gold);white-space:nowrap;padding-right:clamp(28px,3vw,56px)}
.strip li::after{content:"\00B7";padding-left:clamp(28px,3vw,56px);color:var(--cream)}
@keyframes strip{to{transform:translateX(-50%)}}

/* breakfast plates */
.plates{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:start}
.plates-pics{display:grid;grid-template-columns:repeat(6,1fr);row-gap:clamp(16px,2vw,32px)}
.plates-pics .a{grid-column:1/6;aspect-ratio:1/1;overflow:hidden}
.plates-pics .b{grid-column:3/7;aspect-ratio:1440/1443;overflow:hidden}
.plates h2+p{margin-top:clamp(12px,1.4vw,20px)}
.pick{margin-top:clamp(20px,2.4vw,36px);display:grid;gap:4px}
.pick button{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:50px;padding:6px clamp(14px,1.4vw,22px);background:transparent;border:0;color:var(--cream);font:400 var(--fs-h3)/1.15 var(--display);text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.pick button::after{content:"+";font:400 1.5rem/1 var(--text);color:var(--gold);flex:none}
.pick li.on button{background:var(--lift);color:var(--gold)}
.pick li.on button::after{content:"\2013"}
.pick .what{padding:2px clamp(14px,1.4vw,22px) 18px;background:var(--lift);max-width:none}
.js .pick li:not(.on) .what{display:none}
.js .pick li.on .what{animation:what .25s var(--ease-out)}
@keyframes what{from{opacity:0;transform:translateY(-6px)}}
@media (hover:hover) and (pointer:fine){.pick button:hover{color:var(--gold)}}
@media (min-width:1100px){.pick{grid-template-columns:1fr 1fr;column-gap:12px;align-items:start}}
.after{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2vw,32px);align-items:center;margin-top:clamp(20px,2.4vw,36px)}
@media (max-width:860px){.plates{grid-template-columns:1fr}.plates-pics{max-width:640px;column-gap:12px}.plates-pics .a{grid-column:1/4}.plates-pics .b{grid-column:4/7;margin-top:28px}}

/* pancakes */
.cakes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.cakes .txt{grid-column:1/6;grid-row:1}
.cakes .big{grid-column:7/13;grid-row:1/3;aspect-ratio:1440/1586;overflow:hidden}
.cakes .small{grid-column:3/6;grid-row:2;aspect-ratio:1/1;overflow:hidden;margin-top:clamp(24px,3vw,48px)}
.names{margin-top:clamp(18px,2vw,30px);display:grid;gap:6px}
.names li{font-family:var(--display);font-size:var(--fs-h3);line-height:1.2}
.names li span{display:block;font:400 var(--fs-small)/1.45 var(--text);color:var(--soft)}
@media (max-width:860px){.cakes{display:flex;flex-direction:column;gap:24px}.cakes .big{order:-1;width:100%}.cakes .small{width:62%;margin:0 0 0 auto}}

/* lunch */
.lunch{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,96px);align-items:center}
.lunch .ph{aspect-ratio:1440/1586;overflow:hidden}
.cats{margin-top:clamp(20px,2.4vw,36px);columns:2;column-gap:var(--gap)}
.cats a{display:flex;align-items:center;min-height:52px;font-family:var(--display);font-size:var(--fs-h3);line-height:1.15;text-decoration:none;break-inside:avoid}
.cats a::after{content:"\2192";font-family:var(--text);color:var(--gold);padding-left:.5em;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.cats a:hover{color:var(--gold)}.cats a:hover::after{transform:translateX(5px)}}
.lunch .note{margin-top:clamp(18px,2vw,28px);color:var(--soft);max-width:44ch}
@media (max-width:860px){.lunch{grid-template-columns:1fr}.lunch .ph{max-width:560px}}
@media (max-width:420px){.cats{columns:1}}

/* coffee */
.coffee{background:var(--deep)}
.coffee-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--gap) clamp(28px,5vw,96px);align-items:end}
.cups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:start;margin-top:clamp(32px,4vw,64px)}
.cups figure:nth-child(2){margin-top:clamp(24px,4vw,72px)}
.cups figure:nth-child(4){margin-top:clamp(12px,2vw,36px)}
.cups .ph{overflow:hidden}
.cups figcaption{margin-top:12px;font-size:var(--fs-small);line-height:1.45;color:var(--cream)}
@media (max-width:860px){.coffee-head{grid-template-columns:1fr}.cups{grid-template-columns:repeat(2,minmax(0,1fr))}.cups figure:nth-child(n){margin-top:0}.cups figure:nth-child(even){margin-top:28px}}

/* the place */
.place{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.place .head{grid-column:1/13;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap) clamp(28px,5vw,96px);align-items:end;margin-bottom:clamp(8px,1vw,16px)}
.place .room{grid-column:1/9;aspect-ratio:1440/1080;overflow:hidden}
.place .side{grid-column:9/13;align-self:end}
.place .monkey{grid-column:1/4;aspect-ratio:1035/1294;overflow:hidden}
.place .garden{grid-column:4/9;aspect-ratio:1440/1277;overflow:hidden}
.place .gtxt{grid-column:9/13;align-self:center}
@media (max-width:860px){.place{grid-template-columns:repeat(2,minmax(0,1fr))}.place .head{grid-column:1/-1;grid-template-columns:1fr}.place .room,.place .side,.place .garden,.place .gtxt{grid-column:1/-1}.place .monkey{grid-column:1/-1;width:62%;margin-left:auto}}

/* find us */
.find{background:var(--deep)}
.find-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,96px);align-items:center}
.find .ph{aspect-ratio:1440/1800;overflow:hidden}
.facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,2.6vw,44px) var(--gap);margin-top:clamp(22px,2.6vw,40px)}
.facts h3{color:var(--gold);margin-bottom:8px}
.facts a{display:inline-flex;align-items:center;min-height:44px}
.hrs{display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.find .acts{display:flex;flex-wrap:wrap;gap:12px clamp(18px,2vw,32px);align-items:center;margin-top:clamp(24px,2.8vw,44px)}
.tel{font-family:var(--display);font-size:var(--fs-h3);text-decoration:none}
@media (max-width:860px){.find-in{grid-template-columns:1fr}.find-pic{max-width:520px}}
@media (max-width:480px){.facts{grid-template-columns:1fr}}

/* footer */
.foot{padding-block:clamp(36px,4vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px var(--gap)}
.foot .logo{width:clamp(150px,14vw,230px)}
.foot p{color:var(--soft);font-size:var(--fs-small);max-width:52ch}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;font-size:var(--fs-small);font-weight:500;text-decoration:none}

/* motion: arrival in layers, reveals, drift */
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes slide{from{opacity:0;transform:translateX(44px) scale(.97)}}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}}
.arr-1,.arr-2,.arr-3,.arr-4,.arr-5,.arr-p{animation:rise .9s var(--ease-out) backwards}
.arr-1{animation-name:drop;animation-duration:.7s}
.arr-2{animation-delay:.12s}.arr-3{animation-delay:.26s}.arr-4{animation-delay:.38s}.arr-5{animation-delay:.5s}
.arr-p{animation-name:slide;animation-duration:1.2s;animation-delay:.2s}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--d,0)*80ms)}
.js .rv.in,.js.settled .rv{opacity:1;transform:none}
[data-drift]{will-change:transform;height:calc(100% + 48px);margin-top:-24px}
@media (max-width:700px){[data-drift]{height:calc(100% + 28px);margin-top:-14px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-drift]{height:100%;margin-top:0}
  .arr-1,.arr-2,.arr-3,.arr-4,.arr-5,.arr-p,.strip-in,.js .pick li.on .what{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .strip{overflow-x:auto}
}

/* ---------- menu page: their printed menu's paper ---------- */
body.menu{background:var(--paper);color:var(--ink)}
.menu .band{background:var(--ground);color:var(--cream)}
.menu-head{padding-block:clamp(28px,4vw,64px) clamp(24px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap) clamp(28px,5vw,96px);align-items:end}
.menu-head p{max-width:46ch}
.tools{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2vw,28px)}
.tools input{flex:1 1 260px;min-height:52px;padding:0 16px;font:400 var(--fs-body)/1 var(--text);color:var(--ink);background:var(--cream);border:2px solid var(--cream);border-radius:0}
.tools input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tools .f{display:flex;gap:4px}
.tools .f button{min-height:52px;padding:0 18px;font:500 var(--fs-small)/1 var(--text);background:var(--lift);color:var(--cream);border:0;cursor:pointer;transition:background-color .2s ease}
.tools .f button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.jump{position:sticky;top:0;z-index:5;background:var(--deep);color:var(--cream)}
.jump ul{display:flex;gap:4px clamp(14px,1.6vw,26px);overflow-x:auto;scrollbar-width:none;padding-inline:var(--pad);max-width:1440px;margin-inline:auto}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:inline-flex;align-items:center;min-height:52px;white-space:nowrap;text-decoration:none;font-size:var(--fs-small);font-weight:500}
.jump a.now{color:var(--gold)}
.msec{padding-block:clamp(36px,4.5vw,76px) 0;scroll-margin-top:52px}
.msec:last-of-type{padding-bottom:clamp(36px,4.5vw,76px)}
.msec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin-bottom:clamp(16px,2vw,30px)}
.msec-head p{font-size:var(--fs-body)}
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px) var(--gap)}
.items li{break-inside:avoid}
.items h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem);line-height:1.15}
.items h3 i{font:500 .74em/1 var(--text);font-style:normal;letter-spacing:.02em;padding-left:.35em}
.items h3 i.hot{color:#a8321f}
.items p{margin-top:3px;font-size:var(--fs-small);line-height:1.45}
.items.tight{gap:8px var(--gap)}
.tint{background:var(--paper-2);padding:clamp(20px,2.4vw,40px)}
.none{padding-block:clamp(36px,5vw,72px);font-family:var(--display);font-size:var(--fs-h3)}
.smallprint{padding-block:clamp(28px,3vw,48px);max-width:70ch}
.js .items li.rv{transform:translateY(14px);transition-duration:.5s;transition-delay:calc(var(--d,0)*35ms)}
@media (max-width:1100px){.items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.menu-head{grid-template-columns:1fr}.items{grid-template-columns:1fr}}