/* Sites by Leo starter kit: the plumbing, not the look.
   It sets tokens, type basics, buttons, header, hours, form, footer and the phone bar.
   It has NO section layouts (no cards, steps, galleries, review boxes, hero) on purpose: those come from the shop,
   written fresh for each site in its own CSS below these rules. See standards/design.md, "Clean, not generated". */
:root{
  /* Brand: every value comes from BRIEF.md (the sign, logo, shopfront, packaging). Nothing here is a default look. */
  --bg:#F3F2EE;          /* page background: the pale concrete counter in their Reels (v4, Leo 14 Oct: no full black) */
  --surface:#FFFFFF;     /* the rare panel (form, hours) */
  --ink:#111111;         /* main text */
  --muted:#55554F;       /* secondary text (check 4.5:1 on --bg) */
  --line:#E2E1DC;        /* hairlines */
  --accent:#111111;      /* ONE accent: the main button and little else */
  --on-accent:#FFFFFF;   /* text on accent (check 4.5:1) */
  --display:'Urbanist',system-ui,sans-serif;  /* heading font from BRIEF.md */
  --body:'Urbanist',system-ui,sans-serif;     /* body font from BRIEF.md */
  --display-weight:800;
  --radius:0px;          /* photos and panels: pick one radius for the whole site */
  --radius-btn:2px;      /* buttons: square-ish unless the brand is round */
  /* Fixed scale: don't change per client */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --max:1120px;
  --matcha:#9CC45A;--concrete:#EFEEEA;--kana:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
@media (min-width:900px){.wrap{padding-inline:40px}}

/* Type: three sizes do almost everything (h1, h2, body). Big contrast between them, few weights. */
h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,9vw,96px)}
h2{font-size:clamp(30px,5vw,56px)}
h3{font-size:clamp(19px,2vw,22px);line-height:1.25;letter-spacing:0}
p{margin:0;max-width:34em;text-wrap:pretty}
.small{font-size:14px;color:var(--muted)}
.preview-tag{display:block;margin-top:4px;font-weight:700;color:var(--ink,#111)}
section{padding-block:var(--s8)}
@media (min-width:900px){section{padding-block:var(--s9)}}

/* Buttons: one filled main button per screen. Anything else is a plain text link, not a second pill. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:var(--radius-btn);font:inherit;font-weight:700;font-size:16px;text-decoration:none;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn-main{background:var(--accent);color:var(--on-accent)}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

/* Header: brand left, two links max. */
.site-head{position:sticky;top:0;z-index:30;background:var(--bg)}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.site-head .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--display);font-weight:var(--display-weight);font-size:22px;text-decoration:none;white-space:nowrap}
.brand img{height:36px;width:auto}
.site-head nav{display:flex;gap:24px;align-items:center;font-size:15px}
.site-head nav a:not(.btn){text-decoration:none}
.site-head nav a:not(.btn):hover{text-decoration:underline}
@media (max-width:720px){.site-head .hide-sm{display:none}}

/* Open now: a plain line of text, not a pill or a pulsing dot. */
.open-now{font-size:15px;font-weight:700}
.open-now.closed{color:var(--muted)}

/* Hours */
.hours{width:100%;max-width:420px;border-collapse:collapse;font-size:15px;margin-top:var(--s4)}
.hours td{padding:8px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today td{font-weight:700}
address{font-style:normal}

/* Form: no box around it unless the design calls for one. */
.form{display:grid;gap:var(--s4);max-width:560px;margin-top:var(--s5)}
.form label{display:grid;gap:6px;font-size:15px;font-weight:700}
.form label small{font-weight:500;color:var(--muted)}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--surface);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start}
.form .btn:disabled{opacity:.6}
.form-status{margin:0;font-size:15px}
.form-status.err{color:#B3261E}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* Language toggle */
.lang{display:inline-flex;gap:2px;font-size:13px;font-weight:700}
.lang button{border:0;background:transparent;padding:6px 8px;cursor:pointer;font:inherit;color:var(--muted)}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}

/* Footer */
.site-foot{padding-block:var(--s7);font-size:14px;color:var(--muted)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Phone bar: appears once the first screen's main button has scrolled away (kit.js). */
.mbar{display:none}
@media (max-width:720px){
  .mbar:not([hidden]){display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
  body{padding-bottom:76px}
}

/* ===== Katsu Cafe (v5, 14 Oct 2026): the カツ sign, the pale concrete counter, drinks on matcha ===== */
:root{--accent:#9CC45A;--on-accent:#111111}
.kana{font-family:var(--kana);font-weight:900;line-height:1;letter-spacing:-.02em}
.tracked{text-transform:uppercase;letter-spacing:.42em;font-weight:700;font-size:12px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .kana{font-size:30px}
.brand .tracked{font-size:11px}
.site-head nav{font-weight:700}
.site-head{background:var(--bg)}
body{font-size:17px;font-weight:500}
h1{font-size:clamp(40px,10.5vw,80px);letter-spacing:-.03em}
h2{font-size:clamp(32px,5vw,56px);letter-spacing:-.025em}
.nb{white-space:nowrap}
.more{display:inline-block;margin-top:var(--s5);font-weight:700}

/* v5 (Leo, 14 Oct 2026: "needs work", looked generated, photos and colours off).
   The page is the pale concrete of their counter, which is the background of nearly every photo they post, so the
   photos melt into the page instead of sitting in frames. Matcha is the one bold band. Black only for type and the
   footer. One photo rule: square corners, edge to edge on phones, 4:5 for everything except the crew (16:10).
   No drawn board: the drinks are a plain priced list like the food (Leo: anything drawn to look like a board "looks ai"). */
.bleed{margin:0}
.bleed img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:899px){.bleed{margin-inline:-20px}}

/* 1. the sando: one sharp photo edge to edge with a clean edge on the matcha, no fade over the bread (v7, 15 Oct 2026) */
.hero{position:relative;isolation:isolate;padding-block:0 var(--s7);background:var(--matcha)}
.hero-photo{display:block;position:relative}
.hero-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.hero-copy{position:relative;margin-top:var(--s6)}
.hero .credit{margin-top:var(--s5);font-size:12.5px;color:var(--ink);opacity:.7}
.hero .lede{color:var(--ink)!important}
.hero .btn-main{background:var(--ink);color:#fff}
.hero + .food{padding-top:0}
.hero .lede{margin-top:var(--s4);font-size:18px;color:var(--muted);max-width:30em}
.order-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:var(--s5)}
.order-row .ue{font-weight:700}
@media (min-width:900px){
  .hero{display:flex;align-items:center;min-height:min(88vh,780px);padding:0}
  .hero-photo{position:absolute;inset:0 0 0 52%;z-index:-1}
  .hero-photo img{height:100%;aspect-ratio:auto;object-position:72% 50%}
  .hero-copy{width:100%;margin-top:0;padding-block:var(--s8)}
  .hero-copy>*{max-width:min(500px,calc(52vw - 140px))}
  .hero h1{font-size:clamp(46px,4.8vw,68px)}
}

/* 2. the kitchen */
.food-grid{display:grid;gap:var(--s6)}
.food-photo img{object-position:50% 50%}
.food-copy > p{margin-top:var(--s4);color:var(--muted)}
.food-copy a:not(.more){font-weight:700}
.picks{list-style:none;margin:var(--s5) 0 0;padding:0;max-width:30em}
.picks a{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 0;border-bottom:1px solid rgba(17,17,17,.14);font-size:18px;text-decoration:none;color:var(--ink)}
.picks b{font-weight:700;flex:1}
.picks span{font-weight:700;font-variant-numeric:tabular-nums}
.picks i{font-style:normal;font-size:14px;font-weight:800;display:inline-flex;align-items:center;min-height:36px;padding:0 2px;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1.5px}
.picks a:hover b{text-decoration:underline}
.more{display:inline-block;margin-top:var(--s5);font-weight:700}
.swipe{list-style:none;margin:var(--s7) 0 0;padding:0 20px 8px;display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.swipe li{scroll-snap-align:start}
.swipe img{width:100%;aspect-ratio:4/5;object-fit:cover}
.swipe p{font-size:15px;margin-top:var(--s3);color:var(--muted)}
@media (min-width:900px){
  .food-grid{grid-template-columns:5fr 6fr;column-gap:var(--s8);align-items:center}
  .swipe{max-width:var(--max);margin:var(--s8) auto 0;padding:0 40px;grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;gap:16px}
}

/* 3. the drinks counter, on the matcha band */
.drinks{background:var(--matcha)}
.drinks-grid{display:grid;gap:var(--s7)}
.drinks-copy > p{margin-top:var(--s4)}
.drink-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--s5)}
.drink-photos img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:899px){.drink-photos{margin-inline:-20px}}
.drink-list h3{font-size:15px;font-weight:800;margin-top:var(--s6);letter-spacing:0}
.drink-list h3:first-child{margin-top:0}
.drink-list .picks{margin-top:var(--s2)}
.drinks .picks a{border-bottom-color:rgba(17,17,17,.2);min-height:48px;padding:4px 0;font-size:17px}
@media (min-width:900px){
  .drinks-grid{grid-template-columns:6fr 5fr;align-items:center;gap:var(--s8)}
}

/* 4. the crew: their pop-up photo full width, their words */
.crew{padding-top:0}
.crew-photo{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:62% 40%}
.crew-copy{padding-top:var(--s7)}
.crew-copy > p{margin-top:var(--s4);font-size:19px;color:var(--muted)}
.crew blockquote{margin:var(--s6) 0 0;padding-top:var(--s5);border-top:3px solid var(--ink)}
.crew blockquote p{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.3;max-width:22em}
.crew cite{display:block;margin-top:var(--s3);font-style:normal;color:var(--muted);font-weight:700}
.crew-copy > .popup{margin-top:var(--s6);font-size:17px}
.popup a{color:var(--ink);font-weight:700}
@media (min-width:900px){
  .crew{display:grid;grid-template-columns:1fr 1fr;padding-bottom:0;align-items:center}
  .crew-photo{height:100%;max-height:680px;aspect-ratio:auto;object-position:60% 40%}
  .crew-copy{padding:var(--s8) 64px}
}

/* 5. the door */
.visit{border-top:1px solid rgba(17,17,17,.12)}
.visit .open-now{margin-top:var(--s4);font-size:17px}
.visit .hours{margin-top:var(--s3)}
.visit-links{margin-top:var(--s5);font-weight:700}
.visit-grid{display:grid;gap:var(--s6)}
.visit-photo{margin:0 -20px}
.visit-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 0}
@media (min-width:900px){
  .visit-grid{grid-template-columns:1fr 1fr;align-items:center;gap:var(--s8)}
  .visit-photo{margin:0}
  .visit-photo img{width:100%;aspect-ratio:4/5;max-height:560px;object-fit:cover;object-position:50% 30%}
}

/* Desktop composition (15 Oct 2026): standards/taste.md "Desktop composition", Sweetest Spot v9 as the reference.
   Fewer, closer groups inside one container instead of stacked full-width bands: the kitchen is one section,
   matcha outside the hero only means the drinks counter (one panel, not a band), and the crew and the door share
   one grid. Desktop only and scoped to .home, so phones and the other pages that share this file don't move. */
@media (min-width:900px){
  .home .food{padding-block:80px 0}
  .home .swipe{margin-top:40px}
  .home .drinks{background:none;padding:80px 40px}
  .home .drinks-grid{max-width:1040px;margin:0 auto;padding:64px 56px;background:var(--matcha)}
  .home .duo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,1fr) minmax(0,5fr);align-items:start;max-width:var(--max);margin:0 auto;padding:0 40px 96px}
  .home .duo .crew{grid-column:1;display:block;padding:0}
  .home .duo .crew-photo{height:auto;max-height:none;aspect-ratio:4/3}
  .home .duo .crew-copy{padding:28px 0 0;max-width:none}
  .home .duo .visit{grid-column:3;border-top:0;padding:0}
  .home .duo .visit-grid{display:flex;flex-direction:column;gap:28px;padding:0;max-width:none}
  .home .duo .visit-photo{order:-1}
  .home .duo .visit-photo img{aspect-ratio:7/10;max-height:none}  /* a touch taller than 4:5 so both columns end level */
}

/* events: one line on the home page, the form on contact.html */
.events-line{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-size:15px}
.events{background:var(--concrete)}
.events h1{font-size:clamp(34px,5.4vw,56px)}
.events > .wrap > p{margin-top:var(--s4)}
.form input:not([type=checkbox]):not([type=radio]),.form textarea{background:#fff}

/* black kept as the accent: the footer is the shopfront under the sign */
.site-foot{background:var(--ink);color:#C9C8C2;border-top:0}
.site-foot a{color:#fff}
.site-foot :focus-visible{outline-color:#fff}
.site-foot .wrap{align-items:center}
.foot-sign .kana{font-size:44px;color:#fff}

/* ===== Menu (templates/menu/menu.css), restyled below ===== */
/* Sites by Leo menu: starting styles, built on the starter kit tokens (--bg, --surface, --ink, --muted,
   --line, --accent, --display, --body, --radius). Append to the client's kit.css, then restyle to their
   brand (headings, price font, dotted leaders, bar colour). Keep the structure: sticky bar, search, count,
   photo per category, name + description left, price right. */
.menu-head .lede{margin-top:12px}
.jump-bar{position:sticky;top:var(--head-h,64px);z-index:15;background:var(--ink);padding-block:10px}
.jump{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;text-decoration:none;font-weight:700;font-size:14.5px;padding:9px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);color:#fff}
.jump a:hover{border-color:var(--accent)}
.menu .wrap{max-width:820px;display:grid;gap:44px}
.msearch input{width:100%;min-height:50px;border:2px solid var(--ink);border-radius:999px;padding:12px 20px;font:500 16px var(--body);background:var(--surface);color:var(--ink)}
.msearch input:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#mcount{margin-top:-30px;font-size:14px;color:var(--muted)}
#menu{display:grid;gap:44px}
.mcat{scroll-margin-top:130px}
.mcat h2,.mcat h3{font-family:var(--display);font-size:clamp(32px,5vw,44px);margin:0;padding-bottom:10px;border-bottom:3px solid var(--ink)}
.mgroup{scroll-margin-top:130px;padding-top:12px}
.mgroup h2{font-family:var(--display);font-size:clamp(44px,8vw,72px);line-height:1}
.mgroup p{color:var(--muted);font-size:15px;margin-top:6px}
.jump a.jg{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.mph{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius);margin-top:14px}
.mnote{color:var(--muted);font-size:15.5px;margin:10px 0 0}
.mlist{list-style:none;margin:8px 0 0;padding:0}
.mlist li{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.mlist li div{min-width:0;flex:0 1 auto;max-width:78%}
.mlist b{font-weight:700;font-size:17.5px}
.idesc{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:3px}
.sz{font-size:13px;color:var(--muted);font-weight:700}
.diet{margin-left:6px;font-size:11px;font-weight:700;text-decoration:none;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--muted);vertical-align:2px}
.liked{display:block;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:20px}
.mlist .p{font:700 22px/1 var(--body);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.mlist .p.ask{text-decoration:underline;text-underline-offset:.25em;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mnone{padding:24px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);text-align:center}
@media (max-width:520px){.mlist li div{max-width:72%}.idesc{font-size:13.5px}}
/* Katsu menu: Food on black, Drinks on matcha, board-style tracked caps for each category */
.page-head{padding-block:var(--s6) var(--s5)}
.page-head h1{font-size:clamp(34px,5.4vw,56px)}
.page-head p{margin-top:var(--s3)}
.halves{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s5)}
.halves a{display:flex;flex-direction:column;justify-content:flex-end;min-height:120px;padding:var(--s4);text-decoration:none;font:800 30px/1 var(--display)}
.halves a small{font:700 13px/1.3 var(--body);margin-top:6px;opacity:.85}
.halves a{min-height:0;padding:0 var(--s4) var(--s4)}
.halves img{width:calc(100% + 32px);max-width:none;margin:0 -16px 14px;aspect-ratio:4/3;object-fit:cover}
.halves .h-food{color:#fff;background:var(--ink)}
.halves .h-drinks{color:var(--ink);background:var(--matcha)}
.jump a{border-radius:2px}
.jump a.jg{background:transparent;color:#fff;border-color:transparent;text-decoration:underline;text-underline-offset:.3em}
.jump a.on{background:var(--matcha);color:var(--ink);border-color:var(--matcha)}
:root{--head-h:64px}
.site-head{top:0}
.jump a:hover,.jump a:focus-visible{border-color:var(--matcha)}
.msearch input{border-radius:2px;border-width:1.5px}
.msearch input:focus{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--matcha) 60%,transparent)}
.mgroup{padding:var(--s5) 0 var(--s3);border-bottom:4px solid var(--matcha)}
.mgroup h2{font-size:clamp(40px,8vw,64px);line-height:1}
.mgroup p{color:var(--muted)}
#drinks ~ .mcat h3{border-bottom-color:var(--matcha)}
.mlist .o-add,.mlist .o-q,.o-lines .o-q{border-radius:2px}
.mlist .o-add{min-height:44px}
.mlist .o-q{width:44px;height:44px}
body .o-bar>button,body .o-bar-b,body .o-pay{border-radius:4px}
.mcat h2,.mcat h3{font-family:var(--body);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.42em;border-bottom:10px solid var(--ink);padding-bottom:14px}
/* Category photos (v7, 15 Oct 2026): only where the photo shows that category's drinks or food; one shape, square.
   Phone: full width under the heading. Desktop: beside the list, so the photo isn't cut into a thin strip. */
.mfig{margin:var(--s4) 0 0}
.mph{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:0;border-radius:0;margin:0}
@media (min-width:900px){
  .mcat:has(.mfig){display:grid;grid-template-columns:minmax(0,1fr) 240px;column-gap:var(--s6);align-content:start}
  .mcat:has(.mfig)>h3,.mcat:has(.mfig)>h2{grid-column:1/-1}
  .mcat>.mfig{grid-column:2;grid-row:2/span 2;align-self:start;margin-top:var(--s5)}
  .mcat:has(.mfig)>.mnote,.mcat:has(.mfig)>.mlist{grid-column:1}
}
/* Credit for a customer's photo, right under it (standards/build.md, Photos) */
.iopts{display:block;font-size:12.5px;font-weight:700;color:var(--ink);opacity:.62;margin-top:4px}
.mcredit{margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.price-note{font-weight:700;border-left:4px solid var(--matcha);padding-left:12px}
.mlist .p{color:var(--ink);font-size:20px}
.mlist b{text-transform:uppercase;letter-spacing:.05em;font-size:15.5px}
.liked{color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px}
.dots{border-bottom-color:#CFCEC8}
.elsewhere{background:var(--matcha)}
.elsewhere p{margin-top:var(--s4)}
:root{--o-accent:var(--ink);--o-on-accent:#fff;--o-ink:var(--ink);--o-muted:var(--muted);--o-bg:#fff;--o-line:var(--line);--o-font:var(--body)}
@media (max-width:720px){:root{--o-bottom:82px}body.o-has{padding-bottom:170px}}
.menu{padding-top:var(--s6)}

/* Specials banner: the owner sets it in my.sitesbyleo.com.au; hidden until they do (Leo, 14 Oct 2026). */
.special{background:var(--ink);color:#fff;font-size:15px;font-weight:700;line-height:1.4;padding:10px 0;text-align:center}
.special[hidden]{display:none}.special .wrap{max-width:1120px;margin:0 auto;padding-inline:20px}.special p{margin:0;max-width:none}

/* Gallery page: on black like the kitchen and the crew, photos edge to edge with a hairline gap */
.shots .lede{margin-top:var(--s4);font-size:18px;color:var(--muted)}
.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin:var(--s6) -20px 0}
.shot-grid figure{margin:0;position:relative}
.shot-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;font-size:12px;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.shot-grid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.shot-grid .wide{grid-column:1/-1}
.shot-grid .wide img{aspect-ratio:16/9}
.shots .order-row{margin-top:var(--s7)}
@media (min-width:900px){.shot-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin-inline:0}}
.crew .more{color:var(--accent)}

.hours tr.sum.today td{font-weight:700}
.halves .h-food img{object-position:45% 40%}

/* phone length (<=6 screens): the hero is already the sando, so the kitchen photo shows from desktop up; the swipe row carries the kitchen on phones */
@media (max-width:899px){.food-photo{display:none}.hero + .food{padding-top:var(--s7)}}
.o-opt{border-radius:2px}