/* 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{
  /* Ramen Ryoma (BRIEF.md, from their own posters): poster red, the deeper red of the circle behind the bowl,
     the gold clouds, the paper cream of their menu posters and the charcoal of their logo stamp. */
  --red:#8E1015;         /* poster red: cream text on it 9.6:1 */
  --red-deep:#6A0B0F;
  --pop:#D7261E;         /* the red of WE ARE OPEN and the price bursts: white bold on it 4.9:1 */
  --gold:#F2B233;
  --bg:#FBF4E8;          /* poster cream */
  --surface:#FFFDF8;
  --ink:#231F1E;         /* logo charcoal */
  --muted:#5E5550;       /* 6.9:1 on --bg */
  --line:#E7DAC6;
  --accent:#8E1015;      /* main buttons on cream */
  --on-accent:#FFFFFF;
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --body:"Figtree",system-ui,sans-serif;
  --display-weight:400;
  --radius:0;            /* photos edge to edge with hard corners, like the hero (Leo, 16 Oct 2026) */
  --radius-btn:6px;      /* the first screen's red button */
  /* order.js */
  --o-accent:#8E1015;--o-on-accent:#fff;--o-ink:#231F1E;--o-muted:#5E5550;--o-bg:#FFFDF8;--o-line:#E7DAC6;--o-font:"Figtree",system-ui,sans-serif;--o-bottom:16px;
  /* 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:1200px;
}
*{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)}
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:600;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}}

/* Specials banner (every site, Leo 14 Oct 2026): the owner writes it in my.sitesbyleo.com.au and it shows straight away.
   Hidden until there's a special. One line in the shop's colour; restyle to the site, keep it quiet and above the header. */
.special{background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;line-height:1.4;padding-block:10px}
.special[hidden]{display:none}
.special p{max-width:none}

/* Gallery page (every site): their own photos, big. Restyle the grid to the site; use the owner's and the best customer photos (credited), never stock. */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:var(--s6)}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.gallery .wide{grid-column:1/-1}.gallery .wide img{aspect-ratio:3/2}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:10px}}

/* Open now: a plain line of text, not a pill or a pulsing dot. */
.open-now{font-size:15px;font-weight:600}
.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:600}
.form label small{font-weight:400;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:600}
.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}
}

/* ---- Menu kit (templates/menu/menu.css) ---- */
/* 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:none;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)}
/* groups (optional, e.g. Food and Drinks): a bigger heading over its categories */
.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:600}
.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{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}}

/* ---- Ramen Ryoma: built off the locked first screen (Leo, 16 Oct 2026: B on top, A as the menu screen) ----
   The pieces, used everywhere: the slim charcoal bar, full-bleed photos with hard edges (no wash over food),
   a huge white vertical kana on each photo, Bebas headings, the red 6px button, flat square blocks at the end of a band.
   Colours: charcoal, poster red, paper cream. Nothing else. */
h1,h2{letter-spacing:.01em;line-height:.92}
h2{font-size:clamp(44px,11vw,72px)}
h3{font-family:var(--body);font-weight:800}
.lede{font-size:clamp(17px,1.5vw,19px)}
.btn{font-weight:700}

/* The charcoal bar (every page) */
.site-head{background:var(--ink);color:#FBF4E8}
.site-head.scrolled{box-shadow:none}
.site-head .wrap{height:64px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:20px;letter-spacing:.24em;color:#FBF4E8;text-transform:uppercase}
.brand img{display:none}
.site-head nav a:not(.btn){color:#FBF4E8}
.site-head .btn-main{background:#FBF4E8;color:var(--ink);min-height:42px;padding:8px 18px}
.site-head :focus-visible{outline-color:#FBF4E8}
.ue{color:#FBF4E8;font-weight:600}

/* The huge vertical kana on a photo (Dela Gothic One, only the letters used) */
.kana{position:absolute;top:18px;left:14px;margin:0;writing-mode:vertical-rl;font-family:"Dela Gothic One",var(--display);font-size:clamp(56px,15vw,112px);line-height:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.28);pointer-events:none}

/* First screen B, after Rising Sun Workshop: the empty room edge to edge, the logo stamp big, one line, one red button.
   Room photo, so a light wash on the dark ceiling only, where the words sit (standards/layouts.md, The room). */
.hero-room{position:relative;min-height:calc(100svh - 64px);padding-block:0;color:#FBF4E8;text-align:center;overflow:hidden;background:var(--ink)}
.hero-room picture,.room-photo{position:absolute;inset:0;width:100%;height:100%}
.room-photo{object-fit:cover;object-position:50% 40%}
@media (min-width:900px){.room-photo{object-position:50% 30%}}
body.home{background:var(--ink)}
.hero-room::before{content:"";position:absolute;inset:0 0 50% 0;background:linear-gradient(rgba(20,16,15,.72),rgba(20,16,15,0));z-index:1}
.room-mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:28px 28px 0}
.room-mid > *{max-width:none}
.room-logo{width:128px;height:128px;border-radius:50%;box-shadow:0 4px 22px rgba(0,0,0,.35)}
.hero-room h1{font-family:var(--body);font-weight:500;font-size:23px;line-height:1.3;letter-spacing:0;max-width:17em;margin-top:22px;color:#FBF4E8}
.room-sub{font-family:var(--display);font-size:19px;letter-spacing:.34em;margin-top:12px;text-transform:uppercase;opacity:.92}
.room-cta{position:absolute;left:0;right:0;max-width:none;bottom:40px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;margin:0}
.room-cta .btn-main{font-size:17px;min-height:54px;padding:14px 34px}
.room-cta .ue{text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* Every band below: one full-bleed shot with its kana, a panel, and flat blocks where there's an action */
.band{padding-block:0;background:var(--ink);color:#FBF4E8}
.shot{position:relative;margin:0}
.shot img{display:block;width:100%;height:auto;object-fit:cover}
.panel{padding:var(--s6) 20px}
.panel p{max-width:34em}
.panel > p:not(.label){margin-top:var(--s3)}
.label{font-family:var(--display);font-size:18px;letter-spacing:.3em;text-transform:uppercase;margin:0 0 6px;opacity:.85}
.band h2{color:inherit}
.big{display:block;font-size:1.6em;line-height:.85}
.blocks{display:grid;grid-template-columns:1fr 1fr}
.blocks-one{grid-template-columns:1fr}
.blocks a{display:flex;align-items:center;justify-content:center;min-height:64px;font-family:var(--display);font-size:24px;letter-spacing:.12em;color:#fff;text-decoration:none;text-transform:uppercase}
.b-red{background:var(--red)}.b-dark{background:#2E2927}
.blocks a:hover{filter:brightness(1.12)}
.blocks a:focus-visible{outline:2px solid #FBF4E8;outline-offset:-4px}

/* Menu index inside the A band */
.cats{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(251,244,232,.18)}
.cats a{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;border-bottom:1px solid rgba(251,244,232,.18);font-weight:700;font-size:15.5px;text-decoration:none;color:#FBF4E8}
.cats a::after{content:"\2192";opacity:.6}
.cats li:nth-child(odd) a{margin-right:16px}
.cats a:hover{opacity:.8}

/* The menu band on paper cream, like their printed menus (Leo, 16 Oct 2026: "the background for first two sections are
   the same"): charcoal first screen, cream menu, red lunch, cream reviews, charcoal visit. */
.band-menu{background:var(--bg);color:var(--ink)}
.band-menu .cats{border-top-color:var(--line)}
.band-menu .cats a{color:var(--ink);border-bottom-color:var(--line)}
.band-menu .cats a::after{color:var(--red);opacity:1}
.band-menu .blocks a.b-dark{background:var(--ink)}
.band-menu .blocks a:focus-visible{outline-color:var(--ink)}

/* Lunch on poster red (Leo, 16 Oct 2026: "the background color is the same for 3 sections"): charcoal for the menu and the
   visit, red for the deal, cream for what people say. The block on red turns cream. */
.band-flip{background:var(--red)}
.band-flip .blocks a.b-red{background:#FBF4E8;color:var(--red)}
.band-flip .blocks a:focus-visible{outline-color:#231F1E}

/* What people say: the one light band (cream), quotes as hairline rows */
.band-light{background:var(--bg);color:var(--ink)}
.band-light blockquote{margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);font-size:18px;line-height:1.45}
.band-light blockquote p{margin:0}
.band-light cite{display:block;margin-top:8px;font-style:normal;font-family:var(--display);font-size:17px;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.band-light .label{color:var(--red);opacity:1}

/* Come in: hours, address and map with the table shot */
.visit address{font-style:normal;margin-top:var(--s4)}
.visit .links a{color:#FBF4E8;font-weight:700}
.visit .open-now{color:#FBF4E8;font-weight:700;margin-top:var(--s3)}
.visit .hours td{border-bottom-color:rgba(251,244,232,.18)}
.visit .hours tr.today td{color:#fff}
.visit .small{color:#D9CFC4}
.visit .small a{color:#FBF4E8}
.map-box{position:relative;background:#2E2927;min-height:220px}
.map-card{position:absolute;left:20px;bottom:20px;margin:0;font-size:14px;color:#FBF4E8}
.map{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35)}

/* Footer: charcoal like the bar */
.site-foot{background:var(--ink);color:#D9CFC4;border-top:1px solid rgba(251,244,232,.12)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.site-foot img{width:48px;height:48px;border-radius:50%}
.site-foot a{color:#FBF4E8}
.tagline{font-family:var(--display);font-size:22px;letter-spacing:.14em;color:#FBF4E8}

/* Phone bar: the same flat blocks, only on phones and only once kit.js shows it */
.mbar.blocks[hidden]{display:none}
@media (min-width:721px){.mbar.blocks{display:none}}
@media (max-width:720px){.mbar.blocks:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0 0 env(safe-area-inset-bottom);background:var(--ink);box-shadow:none}}

/* ---- Desktop pass (standards/build.md 5b; Leo, 16 Oct 2026: "the desktop layout is terrible") ----
   Katsu's approved desktop as the model: only the first screen is full width. Everything under it sits in one centred
   column (.wrap edges, 80px between sections), photos about 5 of 12 columns in boxes close to their own shape (well under
   a screen tall), text beside its photo with the actions under it, and hours, address and a square map in one row.
   Phones are untouched: every rule here is behind min-width:900px. */
@media (min-width:900px){
  /* Leo, 16 Oct 2026: "it looks way too high make it show the actual chairs and stuff". The desktop crop is the room
     itself (tables, chairs, counter); the words sit in a charcoal column on the left instead of on the ceiling. */
  /* Leo, 16 Oct 2026: "wayy to much space on the left of the hero maybe extend the image": the photo takes 8 of 12 columns and
     the words sit near the screen edge. Zoomed out ("the picture gets messed up badly"): capped at 1920px and centred, and
     the photo keeps its own shape (no cover crop), so at any width it shows the whole room and is never stretched past its size. */
  .hero-room{--edge:clamp(40px,4vw,72px);display:grid;grid-template-columns:minmax(380px,4fr) 8fr;
    min-height:0;max-width:1920px;margin-inline:auto;text-align:left;align-items:center}
  .hero-room::before{display:none}
  .hero-room picture{position:relative;grid-column:2;grid-row:1/3;inset:auto;height:auto;align-self:stretch;display:block}
  .room-photo{position:static;display:block;width:100%;height:100%;max-height:calc(100vh - 64px);aspect-ratio:1600/1238;object-fit:cover;object-position:50% 70%}
  .room-mid{grid-column:1;grid-row:1;align-items:flex-start;align-self:end;padding:48px 48px 0 var(--edge)}
  .room-logo{width:132px;height:132px}
  .hero-room h1{font-size:32px;max-width:13em}
  .room-cta{position:static;grid-column:1;grid-row:2;flex-direction:row;justify-content:flex-start;gap:24px;padding:36px 48px 56px var(--edge);flex-wrap:wrap;align-self:start}
  .room-cta .ue{text-shadow:none}
  .room-cta a{white-space:nowrap}
  .room-mid > *{max-width:100%}
  .band{--edge:max(40px,calc((100vw - var(--max))/2 + 40px));display:grid;grid-template-columns:5fr 7fr;
    grid-template-areas:"shot panel" "shot blocks";grid-template-rows:1fr auto;column-gap:72px;
    padding:80px var(--edge);align-items:start}
  .band .shot{grid-area:shot}
  .band .panel{grid-area:panel;align-self:end;padding:0}
  .band .blocks{grid-area:blocks;margin-top:28px;max-width:560px}
  .band .shot img{height:auto}
  .band .blocks a{min-height:56px;font-size:21px}
  /* every photo keeps its own shape; the kana is sized to the photo so four letters fit in one column */
  .band .shot,.menu-top .shot{container-type:inline-size}
  .kana{top:20px;left:20px;font-size:min(72px,15cqw)}

  /* the menu screen: the close-up, then the whole menu beside it */
  .band h2{font-size:clamp(52px,5vw,72px)}
  .cats{max-width:560px}

  /* lunch: text first, photo on the right */
  .band-flip{grid-template-columns:7fr 5fr;grid-template-areas:"panel shot" "blocks shot"}

  /* what people say: cream, the detail shot beside two quotes */
  .band-light{grid-template-columns:5fr 7fr;grid-template-areas:"shot panel";grid-template-rows:auto;align-items:center}
  .band-light .panel{align-self:center}
  .band-light .quotes{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}

  /* come in: the photo, the hours and a square map in one row */
  .visit{grid-template-columns:4fr 5fr 4fr;grid-template-areas:"shot panel map";grid-template-rows:auto;align-items:center;column-gap:48px}
  .visit .panel{align-self:center}
  .map-box{grid-area:map;min-height:0;aspect-ratio:1/1;width:100%}
}

/* ---- Menu page: the same bar, a full-bleed shot with メニュー, the menu kit on cream ---- */
.menu-top{padding-block:0;background:var(--ink);color:#FBF4E8}
.menu-top .shot img{aspect-ratio:780/560}
.menu-top .panel h1{font-size:clamp(64px,16vw,120px);line-height:.86;color:#FBF4E8}
.menu-top .lede{margin-top:var(--s3);color:#FBF4E8;max-width:34em}
@media (min-width:900px){
  .menu-top{--edge:max(40px,calc((100vw - var(--max))/2 + 40px));display:grid;grid-template-columns:5fr 7fr;column-gap:72px;align-items:end;padding:56px var(--edge)}
  .menu-top .shot img{aspect-ratio:780/560;height:auto}
  .menu-top .panel{padding:0 0 8px}
  /* each category photo sits beside its list in its own wide shape, so nothing is zoomed (Katsu's menu, taste.md) */
  .mcat:has(>.mph){display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:40px;align-content:start}
  .mcat:has(>.mph)>h2,.mcat:has(>.mph)>h3{grid-column:1/-1}
  .mcat>.mph{grid-column:2;grid-row:2/span 2;align-self:start;aspect-ratio:16/7;margin-top:24px}
  .mcat:has(>.mph)>.mnote,.mcat:has(>.mph)>.mlist{grid-column:1}
}
.jump-bar{background:var(--ink)}
.jump a{border-color:rgba(251,244,232,.3);border-radius:0}
.jump a:hover,.jump a.on{border-color:#FBF4E8;color:#FBF4E8}
.menu{padding-top:var(--s6)}
.msearch input{border-radius:6px}
.mcat h2,.mcat h3{font-size:clamp(40px,6vw,60px);line-height:.95;border-bottom:2px solid var(--ink)}
.mlist .p{font:400 26px/1 var(--display);letter-spacing:.02em;color:var(--red)}
.mlist .p.ask{font:700 13px/1 var(--body);color:var(--red)}
.o-add{border-color:var(--red);color:var(--red);font-weight:800;border-radius:6px}
.o-add:hover{background:var(--red);color:#fff}
.o-q{border-color:var(--red);color:var(--red)}
.o-bar>button{background:var(--ink);border-radius:0}
.o-bar-b{color:var(--ink);border-radius:0;font-family:var(--display);font-size:20px;letter-spacing:.1em;font-weight:400}
.o-pay{border-radius:6px}
.o-head h3{font:400 34px/1 var(--display);letter-spacing:.02em}