/* MamaWolf. One idea: their yellow and grey comic menu cover turned into a manga page.
   Ground = comic charcoal, fill = their yellow, one hit of the red 酒 seal. Fonts: Dela Gothic One (display) + Archivo (text), both OFL, local.
   Lift 6 Nov 2026 (craft only): one type scale (tokens below, 8 steps), one tracked-caps label voice, tighter display leading/tracking,
   easing on the feel-kit tokens (feel.css is appended by build.py). Nothing of the concept, colours, panels or layout changed. */
@font-face{font-family:"Dela Gothic One";src:url("../fonts/dela-gothic-one-latin-jp.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#1B1B1B;
  --ink2:#262626;
  --rule:#3C3C3C;
  --grey:#5E5E5E;
  --mist:#CFCFC8;
  --paper:#FAF7EA;
  --yellow:#FFD92B;
  --red:#C8372D;
  --body-dark:#2B2B2B;
  --dsp:"Dela Gothic One","Yu Gothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --txt:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:20px;
  --slant:36px;
  --lp-reveal-dur-a:.55s;
  /* the type scale: label 13 / small display 15 / body 17 (19 from 1100) / lead / d2 / d3 / h-m / h-l  (+ the 404 numeral) */
  --t-label:13px;
  --t-d1:15px;
  --t-body:17px;
  --t-lead:17px;
  --t-d2:22px;
  --t-d3:28px;
  --h-m:clamp(30px,9vw,40px);
  --h-l:clamp(44px,14vw,60px);
  --h-xl:clamp(90px,28vw,260px);
  --trk-label:.14em;
  --trk-display:-.02em;
}
@media (min-width:820px){
  :root{--gut:48px;--t-lead:21px;--h-m:clamp(38px,4vw,60px);--h-l:clamp(56px,5.6vw,84px)}
}
@media (min-width:1100px){
  :root{--t-body:19px;--t-d2:28px;--t-d3:34px}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font:400 var(--t-body)/1.5 var(--txt);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,picture{display:block;max-width:100%}
.shot picture,.mphoto picture,.vphoto picture{width:100%;height:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:20;background:var(--yellow);color:var(--ink);padding:12px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.on-yellow :focus-visible,.yel :focus-visible{outline-color:var(--ink)}
.jp{font-family:var(--dsp)}

/* one caps label voice: Archivo bold, 13 px, tracked. Everything small and capital uses it (the comic display caps stay Dela Gothic). */
.kicker,.nav a,.chips a,.msec-hd .cnt,.grp h3.gh,.dish .unit,.set .lbl,.tg li,.addr b,.stamp span{font:700 var(--t-label)/1.3 var(--txt);letter-spacing:var(--trk-label);text-transform:uppercase}

/* reveal: one fade on the first screen and on panels, on the feel-kit curve */
.rv{opacity:0;transform:translateY(14px);transition:opacity var(--lp-reveal-dur-a) var(--ease-out,cubic-bezier(.22,1,.36,1)),transform var(--lp-reveal-dur-a) var(--ease-out,cubic-bezier(.22,1,.36,1))}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------- header ---------- */
.hdr{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gut);height:68px;background:var(--ink)}
/* their own wordmark (logo file from their site) on a yellow sign, like the cover of their menu */
.brand{display:flex;align-items:center;min-height:48px;padding:6px 9px;background:var(--yellow);text-decoration:none;line-height:1;transform:rotate(-1.5deg);transition:transform var(--d-base) var(--ease-out)}
.brand:hover{transform:rotate(-.5deg)}
.brand img{width:148px;height:auto}
.brand:focus-visible{outline-color:var(--paper)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;line-height:1;text-decoration:none;color:var(--paper);transition:color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.nav a:hover{color:var(--yellow)}
.nav a[aria-current=page]{color:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow)}
.nav .vis{display:none}
.nav .lang{border:2px solid var(--paper);margin-left:6px;padding:0 10px}
.nav .lang:hover{border-color:var(--yellow)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;font:400 var(--t-body)/1 var(--dsp);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border:3px solid var(--yellow);transition:background-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out);flex:1 1 auto;text-align:center;white-space:normal}
.btn--fill{background:var(--yellow);color:var(--ink)}
.btn--fill:hover{background:var(--paper);border-color:var(--paper)}
.btn--line{background:transparent;color:var(--yellow)}
.btn--line:hover{background:var(--yellow);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.btn--ink:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn--inkline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--inkline:hover{background:var(--ink);color:var(--yellow)}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.tl{display:inline-flex;align-items:center;min-height:44px;font-weight:700;letter-spacing:.04em;text-underline-offset:5px;text-decoration-thickness:2px}

/* ---------- hero: first panel of the page ---------- */
.hero{position:relative;background:var(--ink)}
.hero .shot{position:relative;height:clamp(236px,68vw,290px);overflow:hidden}
.hero .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cap{position:absolute;z-index:3;left:12px;top:12px;margin:0;background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:6px 10px 5px;font:700 var(--t-label)/1.25 var(--txt);transform:rotate(-2deg);max-width:62%}
.cap b{display:block;font:400 var(--t-d1)/1.1 var(--dsp);text-transform:uppercase;letter-spacing:.01em}
.hero .panel{position:relative;margin-top:-34px;padding:54px var(--gut) 26px;clip-path:polygon(0 34px,100% 0,100% 100%,0 100%);
  --sun:0deg;
  background:
    radial-gradient(circle at 92% 0,rgba(255,217,43,.30),rgba(255,217,43,0) 55%),
    repeating-conic-gradient(from var(--sun) at 92% 0,rgba(255,217,43,.085) 0 5deg,rgba(255,217,43,0) 5deg 11deg),
    var(--ink)}
.hero .kicker{color:var(--mist);margin-bottom:10px}
.hero h1{font:400 var(--h-m)/1.06 var(--dsp);text-transform:uppercase;color:var(--yellow);letter-spacing:var(--trk-display);word-spacing:.1em;text-wrap:balance;margin-bottom:16px}
.bubble{position:relative;display:block;background:var(--paper);color:var(--ink);padding:12px 16px;font:700 var(--t-lead)/1.35 var(--txt);margin-bottom:18px;max-width:30em}
.bubble::before{content:"";position:absolute;top:-12px;left:28px;width:22px;height:14px;background:var(--paper);clip-path:polygon(0 100%,100% 100%,30% 0)}
.hero .cta{margin-bottom:14px}
.today{font:700 var(--t-body)/1.4 var(--txt);color:var(--paper)}
.today b{font-weight:700;color:var(--yellow);letter-spacing:.02em}
.addr-line{margin-top:2px;font:400 var(--t-body)/1.4 var(--txt);color:var(--mist)}
.stamp{position:absolute;z-index:3;right:14px;top:14px;width:104px;height:104px;border-radius:50%;background:var(--red);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-11deg);border:3px solid var(--paper);line-height:1}
.stamp b{font:400 var(--t-d1)/1 var(--dsp);letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.stamp span{margin-top:5px;letter-spacing:0;text-transform:none;line-height:1.1}

/* ---------- skyline divider ---------- */
.sky{display:block;width:100%;height:56px;margin-bottom:-1px}
.sky--yel{color:var(--yellow);background:var(--ink)}
.sky--dark{color:#2C2C2C;background:var(--ink)}
.sky svg{width:100%;height:100%}

/* ---------- rice bowls (menu preview): comic panels on yellow ---------- */
.don{position:relative;background:var(--yellow);color:var(--ink);padding:36px var(--gut) 50px;overflow:hidden}
.don::before{content:"";position:absolute;right:-30px;top:-30px;width:340px;height:300px;background:radial-gradient(circle,rgba(27,27,27,.22) 2.2px,transparent 2.7px) 0 0/15px 15px;-webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 72%);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 72%);pointer-events:none}
.don .hd{position:relative;margin-bottom:30px}
.don .kicker{color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.don .kicker i{display:inline-block;width:34px;height:4px;background:var(--ink)}
.don h2{font:400 var(--h-l)/1 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;text-transform:uppercase}
.don h2 .jp{font-size:.8em;color:var(--grey);margin-left:.15em;letter-spacing:0}
.don .lede{margin-top:10px;font-weight:700;font-size:var(--t-lead);color:var(--body-dark)}
.bowls{position:relative;display:grid;gap:20px}
.bowl{position:relative;border:3px solid var(--ink);background:var(--paper);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto}
.bowl .bn{grid-column:1;grid-row:1;background:var(--ink);color:var(--paper);padding:12px 14px 10px;font:400 var(--t-d2)/1.12 var(--dsp);text-transform:uppercase;letter-spacing:0}
.bowl .bp{grid-column:2;grid-row:1;background:var(--yellow);color:var(--ink);border-left:3px solid var(--ink);display:flex;align-items:center;padding:0 16px;font:400 var(--t-d3)/1 var(--dsp);border-bottom:0}
.bowl .bd{grid-column:1 / 3;grid-row:2;padding:12px 14px 14px;font-size:var(--t-body);line-height:1.45;color:var(--body-dark)}
.bowl .rec{position:absolute;left:14px;top:-15px;z-index:2;background:var(--red);color:var(--paper);font:400 var(--t-label)/1 var(--dsp);letter-spacing:.04em;padding:6px 10px 5px;transform:rotate(-3deg);text-transform:uppercase}
.bowl .bd .tg{margin-top:8px}
.tg{display:flex;flex-wrap:wrap;gap:6px}
.tg li{padding:5px 8px 4px;border:2px solid currentColor;letter-spacing:.08em}
.don .more{position:relative;margin-top:30px}

/* ---------- sake ---------- */
.sake{position:relative;background:var(--ink)}
.sake .shot{position:relative;height:clamp(230px,68vw,300px);overflow:hidden}
.sake .shot img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.seal{position:absolute;z-index:3;left:18px;top:18px;width:68px;height:68px;border-radius:50%;background:var(--red);color:var(--paper);border:3px solid var(--paper);display:flex;align-items:center;justify-content:center;font:400 34px/1 var(--dsp);transform:rotate(-9deg)}
.sake .panel{position:relative;margin-top:-34px;background:var(--yellow);color:var(--ink);padding:60px var(--gut) 44px;clip-path:polygon(0 0,100% 34px,100% 100%,0 100%)}
.sake .kicker{margin-bottom:12px;color:var(--ink)}
.sake h2{font:400 var(--h-m)/1.06 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;text-transform:uppercase;margin-bottom:12px;text-wrap:balance}
.dont{display:inline-block;background:var(--ink);color:var(--yellow);font:400 var(--t-d2)/1 var(--dsp);padding:9px 14px 7px;transform:rotate(-2deg);margin:4px 0 18px;text-transform:uppercase}
.sake p{max-width:34em}
.sake p+p{margin-top:12px}
.sake .set p{max-width:none;margin-top:0}
.sake .p2{font-weight:700}
.set{margin-top:26px;border:3px solid var(--ink);background:var(--paper)}
.set .sh{background:var(--ink);color:var(--paper);padding:10px 14px 8px;font:400 var(--t-body)/1.15 var(--dsp);text-transform:uppercase}
.set .sp{padding:10px 14px 0;font-size:var(--t-body);color:var(--body-dark)}
.set ul{display:grid;grid-template-columns:1fr 1fr}
.set li{padding:10px 14px 14px}
.set li+li{border-left:3px solid var(--ink)}
.set .num{display:block;font:400 var(--h-l)/1 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;color:var(--ink)}
.set .lbl{display:block;margin-top:4px}
.sake .more{margin-top:22px}

/* ---------- visit ---------- */
.visit{position:relative;background:var(--ink);padding:48px var(--gut) 44px}
.visit .kicker{color:var(--mist);margin-bottom:10px}
.visit h2{font:400 var(--h-l)/1 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:28px}
.hrs{border-top:3px solid var(--yellow)}
.hrs li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.hrs b{font:400 var(--t-body)/1.2 var(--dsp);text-transform:uppercase;letter-spacing:0}
.hrs span{font:700 var(--t-body)/1.3 var(--txt);text-align:right;font-variant-numeric:lining-nums tabular-nums}
.hrs li.now{background:var(--yellow);color:var(--ink);padding-left:12px;padding-right:12px;margin:0 -12px;border-bottom-color:var(--yellow)}
.hrs-note{margin-top:14px;font-size:var(--t-body);color:var(--mist)}
.rules{display:flex;flex-direction:column;gap:6px;margin:24px 0 8px}
.rules li{font:700 var(--t-body)/1.4 var(--txt);display:flex;gap:10px;align-items:baseline}
.rules li::before{content:"";flex:none;width:12px;height:12px;background:var(--yellow);transform:translateY(1px) skewX(-14deg)}
.addr a{display:inline-flex;align-items:center;min-height:44px}
.addr{font-style:normal;font:400 var(--t-body)/1.45 var(--txt);margin:26px 0 22px}
.addr b{display:block;color:var(--mist);margin-bottom:6px}
.vi-cta{display:flex;flex-wrap:wrap;gap:10px}
.visit .col-r{margin-top:40px}
.links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:20px}

/* ---------- footer: one strip under a skyline ---------- */
.ftr{background:var(--ink);padding:0 var(--gut) 18px}
.ftr .strip{display:flex;flex-wrap:wrap;gap:2px 22px;align-items:center;justify-content:space-between;border-top:3px solid var(--yellow);padding-top:10px}
.ftr .wm{font:400 var(--t-d2)/1 var(--dsp);color:var(--yellow);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ftr ul{display:flex;flex-wrap:wrap;gap:0 18px}
.ftr a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-body);text-underline-offset:4px}
.ftr .meta{font-size:var(--t-body);color:var(--mist);flex:1 1 220px}

/* ---------- menu page ---------- */
.mhead{position:relative;background:var(--ink);padding:26px var(--gut) 26px}
.mhead .kicker{color:var(--mist);margin-bottom:10px}
.mhead h1{font:400 var(--h-l)/1 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.mhead .lede{margin-top:12px;font-size:var(--t-lead);max-width:30em;color:var(--paper)}
.chips{display:none;flex-wrap:wrap;gap:8px;margin-top:22px}  /* phone: the folded section bars are the jump list */
.chips a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border:2px solid var(--paper);text-decoration:none;transition:background-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
.chips a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.chips .jp{font-size:var(--t-body);color:var(--yellow);letter-spacing:0;transition:color var(--d-base) var(--ease-out)}
.chips a:hover .jp{color:var(--ink)}
.mphoto{position:relative;height:clamp(190px,54vw,300px);overflow:hidden;background:var(--ink2)}
.mphoto img{width:100%;height:100%;object-fit:cover;object-position:60% 62%}
.oko{background:var(--red);color:var(--paper);padding:14px var(--gut);font:700 var(--t-body)/1.4 var(--txt)}
.oko p{max-width:44em}
.fold-hint{margin:0;padding:18px var(--gut) 12px;font-size:var(--t-body);color:var(--mist);background:var(--ink)}
/* sections fold on the phone (<details>); the script opens all of them from 820 px */
.msec{position:relative;background:var(--ink);scroll-margin-top:8px}
.msec:nth-of-type(even){background:var(--ink2)}
.msec-hd{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center;background:var(--yellow);color:var(--ink);padding:20px var(--gut) 30px;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),0 100%);margin-bottom:6px;cursor:pointer;list-style:none}
.msec-hd::-webkit-details-marker{display:none}
.msec-hd:focus-visible{outline:3px solid var(--ink);outline-offset:-8px}
.msec-hd h2{grid-column:1;grid-row:1;min-width:0;font:400 var(--t-d3)/1.06 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;text-transform:uppercase}
.msec-hd .jp{font-size:.74em;color:var(--grey);margin-left:.12em;letter-spacing:0}
.msec-hd .cnt{grid-column:1;grid-row:2;margin-top:4px;color:var(--body-dark)}
.msec-hd .pm{grid-column:2;grid-row:1/3;position:relative;width:44px;height:44px;background:var(--ink);transform:rotate(-3deg)}
.msec-hd .pm::before,.msec-hd .pm::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:4px;margin:-2px 0 0 -10px;background:var(--yellow);transition:transform var(--d-base) var(--ease-out)}
.msec-hd .pm::after{transform:rotate(90deg)}
.msec[open] .msec-hd .pm::after{transform:rotate(0deg)}
.sbody{padding:0 var(--gut) 40px}
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  details.msec::details-content{block-size:0;overflow-y:clip;transition:block-size var(--d-base) var(--ease-out),content-visibility var(--d-base) allow-discrete}
  details.msec[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){details.msec::details-content{transition:none}}
.grp{padding-top:26px}
.grp h3.gh{color:var(--yellow);padding-bottom:6px;border-bottom:3px solid var(--yellow);margin-bottom:2px}
.dish{display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:start;padding:16px 0 17px;border-bottom:1px solid var(--rule)}
.dish .dn{grid-column:1;grid-row:1;font:400 var(--t-d2)/1.12 var(--dsp);text-transform:uppercase;letter-spacing:0;text-wrap:balance}
.dish .price{grid-column:2;grid-row:1;font:400 var(--t-d3)/1.1 var(--dsp);color:var(--yellow);text-align:right;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.dish .jpn{grid-column:1;grid-row:2;font:400 var(--t-body)/1.3 var(--dsp);letter-spacing:.06em;color:var(--yellow);margin-top:6px}
.dish .unit{grid-column:1;grid-row:3;color:var(--mist);margin-top:6px}
.dish .dd{grid-column:1;grid-row:4;font-size:var(--t-body);line-height:1.45;color:var(--mist);margin-top:5px;max-width:34em}
.dish .tg{grid-column:1;grid-row:5;margin-top:9px;color:var(--yellow)}
.dish .rc{grid-column:1;grid-row:5;justify-self:start;margin-top:9px;background:var(--red);color:var(--paper);font:400 var(--t-label)/1 var(--dsp);padding:6px 9px 5px;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-2deg)}
.dish .tg+.rc{grid-row:6}
.snote{margin-top:22px;font-weight:700;font-size:var(--t-body);max-width:36em;padding:12px 14px;border:2px solid var(--yellow);color:var(--paper)}
.mfoot{background:var(--yellow);color:var(--ink);padding:34px var(--gut) 40px}
.mfoot .cta{max-width:640px}
.mfoot p{font-weight:700;font-size:var(--t-lead);margin-bottom:16px;max-width:34em}
.legend{display:flex;flex-direction:column;gap:2px;margin:18px 0 0;font-size:var(--t-body);color:var(--mist)}

/* ---------- visit page ---------- */
.vpage .visit{padding-top:34px}
.vtop .kicker{color:var(--mist);margin-bottom:10px}
.visit h1.vh1{font:400 var(--h-l)/1 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:26px}
.vphoto{position:relative;margin:0 calc(-1 * var(--gut)) 26px;height:clamp(220px,66vw,300px);overflow:hidden;clip-path:polygon(0 0,100% 18px,100% 100%,0 100%)}
.vphoto img{width:100%;height:100%;object-fit:cover;object-position:20% 60%}

/* ---------- 404 ---------- */
.nf{position:relative;background:var(--ink);padding:56px var(--gut) 70px;min-height:64vh;
  background:
    radial-gradient(circle at 80% 0,rgba(255,217,43,.30),rgba(255,217,43,0) 55%),
    repeating-conic-gradient(from 0deg at 80% 0,rgba(255,217,43,.10) 0 5deg,rgba(255,217,43,0) 5deg 11deg),
    var(--ink)}
.nf h1{font:400 var(--h-m)/1.06 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px;text-wrap:balance}
.nf p{font-size:var(--t-lead);max-width:28em;margin-bottom:26px}
.nf .cta{max-width:640px}
.nf .big{font:400 var(--h-xl)/.9 var(--dsp);letter-spacing:var(--trk-display);word-spacing:.1em;color:var(--paper);margin-bottom:10px}

/* ---------- desktop ---------- */
@media (min-width:600px){
  .nav .vis{display:inline-flex}
}
@media (min-width:820px){
  .hdr{height:84px;padding:0 max(var(--gut),calc((100vw - 1312px)/2))}
  .brand{padding:8px 12px}
  .brand img{width:200px}
  .nav a{padding:0 18px}
  .nav .lang{margin-left:12px;padding:0 18px}
  .hero .shot{height:clamp(380px,46vw,470px)}
  .hero .shot img{object-position:50% 62%}
  .cap{left:var(--gut);top:28px;padding:8px 14px 7px;max-width:none}
  .hero .panel{margin-top:-44px;padding:84px var(--gut) 44px;clip-path:polygon(0 44px,100% 0,100% 100%,0 100%)}
  .hero .panel>*{max-width:640px}
  .hero .kicker{margin-bottom:16px}
  .hero h1{margin-bottom:24px}
  .bubble{padding:14px 20px;margin-bottom:28px}
  .btn{min-height:58px}
  .stamp{right:var(--gut);top:24px;width:116px;height:116px}
  .stamp b{font-size:var(--t-body)}
  .sky{height:96px}
  .don{padding:56px var(--gut) 110px}
  .don .wrap{max-width:1312px;margin:0 auto}
  .don .hd{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:40px;margin-bottom:56px}
  .don h2{flex-wrap:nowrap}
  .don .lede{margin-top:0;justify-self:end;max-width:16em;text-align:right}
  .bowls{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:34px;align-items:start}
  .bowl:nth-child(even){margin-top:36px}
  .bowl .bn{padding:16px 20px 13px}
  .bowl .bp{padding:0 24px}
  .bowl .bd{padding:16px 20px 18px}
  .bowl .rec{left:20px;top:-16px;padding:7px 12px 6px}
  .sake .shot{height:clamp(320px,44vw,440px)}
  .sake .panel{margin-top:-44px;padding:84px var(--gut) 56px;clip-path:polygon(0 0,100% 44px,100% 100%,0 100%)}
  .sake .panel>*{max-width:680px}
  .sake .seal{left:var(--gut);top:24px;width:96px;height:96px;font-size:48px}
  .visit{padding:96px var(--gut) 84px}
  .visit .wrap{max-width:1312px;margin:0 auto;display:grid;grid-template-columns:5fr 6fr;column-gap:88px;align-items:start}
  .visit h2{margin-bottom:0;font-size:var(--h-m)}
  .visit .col-l{grid-column:1}
  .visit .col-r{grid-column:2;padding-top:8px;margin-top:0}
  .addr{margin-top:34px;font-size:var(--t-lead)}
  .ftr{padding:0 var(--gut) 22px}
  .ftr .strip{max-width:1312px;margin:0 auto}
  .mhead{padding:56px var(--gut) 44px}
  .mhead .wrap{max-width:1312px;margin:0 auto;display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end}
  .mhead .chips{display:flex;margin-top:0;justify-content:flex-start}
  .mphoto{height:340px}
  .oko{padding:16px var(--gut)}
  .oko p{max-width:1312px;margin:0 auto}
  .fold-hint{display:none}
  .msec-hd{cursor:default;grid-template-columns:auto 1fr;column-gap:28px;align-items:baseline;padding:40px max(var(--gut),calc((100vw - 1312px)/2)) 52px;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%)}
  .msec-hd h2{font-size:var(--h-l)}
  .msec-hd .cnt{grid-column:2;grid-row:1;margin:0}
  .msec-hd .pm{display:none}
  .sbody{max-width:calc(1312px + 2 * var(--gut));margin:0 auto;padding:0 var(--gut) 70px}
  .grp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;padding-top:38px}
  .grp .gh{grid-column:1 / 3}
  .dish{padding:20px 0 21px}
  .mfoot{padding:56px var(--gut) 64px}
  .mfoot .wrap{max-width:1312px;margin:0 auto}
  .vphoto{grid-column:1 / 3;margin:0 0 56px;height:auto;aspect-ratio:1800/659;clip-path:polygon(0 0,100% 0,calc(100% - 44px) 100%,0 100%)}
  .vphoto img{object-position:50% 50%}
  .visit .vtop{grid-column:1 / 3;margin-bottom:44px}
  .visit h1.vh1{margin-bottom:0}
  .vpage .visit{padding-top:60px}
}
@media (min-width:1200px){
  .don .hd{gap:64px}
  .mhead .wrap{gap:80px}
}
@media (hover:none){.btn--fill:hover{background:var(--yellow);border-color:var(--yellow)}}
@media (min-width:1100px){
  .dish{padding:24px 0 25px}
  .dish .dd{line-height:1.5}
  .visit .addr a{font-size:var(--t-lead)}
}
@media (min-width:1000px){
  /* a split from 1000 px (so 1024 x 768 keeps the buttons on the first screen).
     The ink panel does not cover the photo; the photo starts where the panel's slant starts. */
  .hero{--pw:calc(max(var(--gut),(100vw - 1312px)/2) + 600px);min-height:clamp(620px,calc(100svh - 84px),800px);display:grid}
  .hero .shot{position:absolute;top:0;bottom:0;right:0;left:calc(var(--pw) - var(--slant) - 2px);height:auto}
  .hero .shot img{object-position:50% 55%}
  .cap{top:auto;bottom:36px;left:calc(var(--pw) + 8px)}
  .hero .panel{position:relative;z-index:2;align-self:stretch;margin:0;width:var(--pw);padding:0 calc(var(--slant) + 28px) 0 max(var(--gut),calc((100vw - 1312px)/2));
    clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);display:flex;flex-direction:column;justify-content:center;
    background:
      radial-gradient(circle at 100% 0,rgba(255,217,43,.26),rgba(255,217,43,0) 60%),
      repeating-conic-gradient(from var(--sun) at 100% 0,rgba(255,217,43,.085) 0 5deg,rgba(255,217,43,0) 5deg 11deg),
      var(--ink)}
  .hero .panel>*{max-width:none}
  .hero .kicker{margin-bottom:18px}
  .hero h1{margin-bottom:26px}
  .hero .cta{margin-bottom:22px;max-width:520px}
  .stamp{right:max(28px,calc((100vw - 1312px)/2));top:36px;width:128px;height:128px}
}
@media (min-width:1100px){
  .bowls{grid-template-columns:repeat(12,1fr);align-items:start}
  .bowl:nth-child(even){margin-top:0}
  .bowl:nth-child(1){grid-column:1 / 8}
  .bowl:nth-child(2){grid-column:8 / 13;margin-top:48px}
  .bowl:nth-child(3){grid-column:1 / 6}
  .bowl:nth-child(4){grid-column:6 / 13;margin-top:36px}
  .bowl:nth-child(5){grid-column:1 / 8}
  .bowl:nth-child(6){grid-column:8 / 13;margin-top:48px}
  .sake{display:grid;min-height:680px}
  .sake .shot{position:absolute;inset:0;height:auto}
  .sake .shot img{object-position:30% 50%}
  .sake .panel{position:relative;z-index:2;margin:0 0 0 auto;width:calc(max(var(--gut),(100vw - 1312px)/2) + 660px);padding:70px max(var(--gut),calc((100vw - 1312px)/2)) 70px calc(var(--slant) + 40px);
    clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%);display:flex;flex-direction:column;justify-content:center}
  .sake .panel>*{max-width:none}
  .sake .seal{left:max(28px,calc((100vw - 1312px)/2));top:36px}
}

/* ---- engine feel kit (5 Nov 2026, from runs/2026-11-05-quality-bar.md: the "smoother" layer) ----
   On when site/design.py says FEEL = True (default from the engine version that turns it on for all).
   - expo easing tokens for every state change (no plain "ease", no .2 s colour flips)
   - page transitions between our own pages (cross-document View Transitions; browsers without them just navigate)
   - text links draw their underline away and back; buttons fill on the same slow curve
   - the glide on wheel scroll lives in feel.js; this file only hands scroll-behavior over to it
   Patterns may read html.lp-scrolled (page moved past 80 px) and html.lp-down (scrolling down) for a header that behaves. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.625,.05,0,1);--d-fast:.25s;--d-base:.55s;--d-slow:1.1s;
 --rv-ease:var(--ease-out)}
html.lp-smooth{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:lp-vt-out .32s var(--ease-io) both}
 ::view-transition-new(root){animation:lp-vt-in .6s var(--ease-out) both}
 .btn{transition:background-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
 .tl{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/100% 1px no-repeat;
  transition:background-size var(--d-base) var(--ease-io),color var(--d-base) var(--ease-out)}
 .tl:hover{background-size:0 1px;background-position:100% calc(100% - 10px)}
 .fold>summary::after{transition:transform var(--d-base) var(--ease-out)}
}
@keyframes lp-vt-out{to{opacity:0;transform:translate3d(0,-10px,0)}}
@keyframes lp-vt-in{from{opacity:0;transform:translate3d(0,18px,0)}}