/* 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:#FFFFFF;          /* page background */
  --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)}
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}}

/* 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}
}

/* ===== Katsu Cafe v2 (13 Oct 2026): the カツ sign over the black shopfront, food on black, 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:600}
.home .site-head:not(.scrolled) .brand{visibility:hidden}
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}
.label{font-size:13px;letter-spacing:.5em;margin-bottom:var(--s4)}
.more{display:inline-block;margin-top:var(--s5);font-weight:700}

/* 1. the sign: their own photo of the shopfront, edge to edge, then the headline on black */
.hero{padding:0;background:var(--ink);color:#fff}
.hero-photo{width:100%;height:min(46vh,440px);object-fit:cover;object-position:50% 18%}
.hero-copy{padding-block:var(--s6) var(--s7)}
.hero .lede{margin-top:var(--s4);font-size:18px;color:#DADAD5}
.hero .btn{font-weight:700}
.order-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:var(--s5)}
.order-row .ue{font-weight:600}
.hero :focus-visible{outline-color:#fff}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .hero-photo{height:calc(100vh - 64px);max-height:860px;object-position:50% 30%}
  .hero-copy .wrap{padding-inline:64px}
}

/* 2. food, on black like the shopfront and the crew tees */
.food{background:var(--ink);color:#fff;padding-top:0}
.food-grid{display:grid;gap:var(--s6)}
.food-photo{margin:0 -20px}
.food-photo img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 50%}
.food-copy > p:not(.label){margin-top:var(--s4);color:#DADAD5}
.label{color:var(--accent)}
.picks{list-style:none;margin:var(--s6) 0 0;padding:0;max-width:30em}
.picks li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:18px}
.picks b{font-weight:700}
.picks span{font-weight:700;font-variant-numeric:tabular-nums}
.food .more{color:var(--accent)}
.fries{width:calc(100% + 40px);max-width:none;margin:0 -20px;aspect-ratio:16/9;object-fit:cover}
.food :focus-visible{outline-color:#fff}
@media (min-width:900px){
  .food{padding-top:var(--s9)}
  .food-grid{grid-template-columns:5fr 6fr;column-gap:var(--s8);align-items:center}
  .food-photo{margin:0;grid-row:span 2}
  .food-photo img{aspect-ratio:4/5}
  .fries{width:100%;margin:0;aspect-ratio:16/8}
}

/* 3. drinks, on the matcha band, with their window board in white */
.drinks{background:var(--matcha)}
.drinks .label{color:var(--ink)}
.drinks-grid{display:grid;gap:var(--s7)}
.drinks-copy > p:not(.label){margin-top:var(--s4)}
.drinks-copy img{margin:var(--s5) -20px 0;width:calc(100% + 40px);max-width:none;aspect-ratio:16/10;object-fit:cover}
.board{background:#fff;padding:var(--s6) var(--s5) var(--s6);text-align:center}
.board-top{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.board-top .kana{font-size:40px}
.board-top .tracked{font-size:11px;padding-left:.42em}
.board-cols{display:grid;gap:var(--s5);margin-top:var(--s6)}
.board h3.tracked{font-size:13px;letter-spacing:.5em;padding-left:.5em;margin-bottom:var(--s3);font-family:var(--body)}
.board-cols p{margin:0 auto var(--s2);font-size:15px;max-width:none;font-variant-numeric:tabular-nums}
.board-cols b{text-transform:uppercase;letter-spacing:.06em;font-size:14px;margin-right:6px}
.board .more{margin-top:var(--s4)}
@media (min-width:900px){
  .drinks-grid{grid-template-columns:5fr 7fr;align-items:center;gap:var(--s8)}
  .drinks-copy img{margin:var(--s6) 0 0;width:100%}
  .board-cols{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .board{padding-inline:var(--s5)}
  .board-cols b{display:block;margin:0 0 2px;font-size:13px}
}

/* 4. the crew: their photo full width, their words under it */
.crew{background:var(--ink);color:#fff;padding-top:0}
.crew > img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:50% 12%}
.crew-copy{padding-top:var(--s7)}
.crew-copy > p{margin-top:var(--s4);font-size:19px;color:#DADAD5}
.crew blockquote{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.25)}
.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(--matcha);font-weight:700}
.crew :focus-visible{outline-color:#fff}
@media (min-width:900px){.crew{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0}.crew > img{height:100%;max-height:600px;aspect-ratio:auto;object-position:50% 0}.crew-copy{padding:var(--s8) 64px}}

/* 5. the door */
.visit-grid{display:grid;gap:var(--s6)}
.hours-line{margin-top:var(--s4);font-size:19px;font-weight:600;max-width:24em}
.visit .map iframe{height:340px}
.visit-grid > img{width:calc(100% + 40px);max-width:none;margin:0 -20px;aspect-ratio:16/10;object-fit:cover}
.visit .open-now{margin-top:var(--s4)}
.visit-links{margin-top:var(--s5);font-weight:600}
@media (min-width:900px){.visit-grid{grid-template-columns:1fr 1fr;align-items:stretch;gap:var(--s8)}.visit .map iframe{height:100%;min-height:440px}}

/* 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}

.site-foot{border-top:10px solid var(--ink);color:var(--muted)}
.site-foot .wrap{align-items:center}
.foot-sign .kana{font-size:44px;color:var(--ink)}

/* ===== 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: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)}
.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{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:600 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:var(--matcha);color:var(--ink);border-color:var(--matcha)}
.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{margin-inline:-20px;padding:var(--s6) 20px var(--s5);background:var(--ink);color:#fff}
.mgroup h2{font-size:clamp(48px,12vw,88px);line-height:.95}
.mgroup p{color:#C9C9C3}
#drinks.mgroup{background:var(--matcha);color:var(--ink)}
#drinks.mgroup p{color:#2F3A1E}
#drinks ~ .mcat h3{border-bottom-color:var(--matcha)}
.mlist .o-add,.mlist .o-q,.o-lines .o-q{border-radius:2px}
body .o-bar>button,body .o-bar-b,body .o-pay{border-radius:4px}
@media (min-width:860px){.mgroup{margin-inline:0;padding-inline:var(--s6)}}
.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}
.mph{width:100%;aspect-ratio:16/7;object-fit:cover;margin-top:var(--s4)}
.mlist .p{color:var(--ink);font-size:20px}
.mlist b{text-transform:uppercase;letter-spacing:.05em;font-size:15.5px}
.liked{color:var(--ink)}
.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)}
.map iframe{display:block;width:100%;height:320px;border:0;filter:grayscale(1) contrast(1.05)}
@media (min-width:900px){.map iframe{height:380px}}