/* Oki Poke — single stylesheet. Colours from the shopfront sign and printed menu. */
:root{
  --board:#44474c;        /* charcoal sign board */
  --board-ink:#f0ece6;    /* warm white lettering */
  --board-muted:#c6c9c4;
  --ground:#f0efec;       /* printed-menu off-white */
  --card:#ffffff;
  --ink:#26292c;
  --ink-2:#5a6065;
  --rule:#dcdcd5;
  --green:#2a7753;        /* printed-menu forest green: buttons, links */
  --green-dark:#225f43;
  --jade:#76c89a;         /* sign leaf: accents only, dark text on top */
  --jade-soft:#e3f2e9;
  --focus:#225f43;
  color-scheme:light;
}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/zen-maru-gothic-700.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.display{font-family:"Zen Maru Gothic",ui-rounded,"Hiragino Maru Gothic ProN","Arial Rounded MT Bold",system-ui,sans-serif;font-weight:700}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1060px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}

/* header */
header.site{background:var(--board);color:var(--board-ink)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:10px clamp(16px,4vw,32px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--board-ink)}
.brand img{display:block;height:50px;width:auto}
@media (min-width:760px){.brand img{height:60px}}
nav.main{display:flex;gap:clamp(10px,2.5vw,26px)}
nav.main a{color:var(--board-ink);text-decoration:none;font-weight:600;font-size:.98rem;padding:0 3px;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
@media (max-width:399px){.brand img{height:42px}nav.main{gap:8px}nav.main a{font-size:.9rem}}
nav.main a:hover{border-bottom-color:var(--jade)}
nav.main a[aria-current="page"]{border-bottom-color:var(--jade)}

/* hero (home) */
.hero{background:var(--board);color:var(--board-ink);padding:clamp(20px,4vw,48px) 0 clamp(28px,4.5vw,56px)}
.hero-grid{display:grid;gap:clamp(20px,4vw,44px);align-items:center}
@media (min-width:820px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.eyebrow{display:flex;align-items:center;gap:9px;font:600 .78rem/1.3 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--board-muted);margin:0 0 14px}
.leaf-dot{width:15px;height:9px;border-radius:50%;background:var(--jade);transform:rotate(-28deg);flex:none}
.hero h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;margin:0 0 14px;max-width:17ch;text-wrap:balance}
.hero .lede{font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.55;max-width:46ch;margin:0 0 22px;color:#e6e2db}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;
  border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:var(--green-dark)}
.btn-ghost{border-color:var(--board-muted);color:var(--board-ink)}
.btn-ghost:hover{border-color:var(--board-ink)}
.btn-ghost-dark{border-color:#b9bdb4;color:var(--ink);background:var(--card)}
.btn-ghost-dark:hover{border-color:var(--ink)}
.hero-photo{border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.facts{list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid #5c6065;display:grid;gap:14px}
@media (min-width:560px) and (max-width:819px),(min-width:1000px){.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.facts li{display:flex;align-items:center;gap:11px;font-size:.9rem;line-height:1.35;color:var(--board-muted)}
.facts svg{flex:none;color:var(--jade)}
.facts strong{display:block;color:var(--board-ink);font-weight:600;font-size:.95rem}
.hero-note{margin:8px 0 0;font-size:.9rem;color:var(--board-muted)}

/* sections */
main{display:block}
section.band{padding:clamp(30px,5vw,54px) 0}
section.band + section.band{border-top:1px solid var(--rule)}
h2{font-size:clamp(1.45rem,2.8vw,1.9rem);line-height:1.2;margin:0 0 6px;display:flex;align-items:baseline;gap:11px}
h2 .leaf-dot{transform:rotate(-28deg) translateY(-2px)}
.sec-note{margin:0 0 22px;color:var(--ink-2);max-width:60ch}
h3{font-size:1.13rem;margin:0 0 8px}
p{max-width:64ch}

/* menu rows (delivery-app style) */
.price{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;column-gap:18px}
.row{display:grid;grid-template-columns:1fr 112px;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--rule)}
.rows.tray .row{grid-template-columns:1fr 144px}
.row.nop,.rows.tray .row.nop{grid-template-columns:1fr}
.rn{font-size:1rem;line-height:1.3;margin:0 0 4px;font-weight:700}
.rd{font-size:.88rem;line-height:1.45;color:var(--ink-2);margin:0 0 8px}
.rp{margin:0;display:flex;align-items:center;gap:8px}
.rph{border-radius:10px;overflow:hidden;aspect-ratio:1/1;background:var(--jade-soft)}
.rows.tray .rph{aspect-ratio:3/2}
.rph img{width:100%;height:100%;object-fit:cover}
@media (min-width:760px){
  .rows{grid-template-columns:1fr 1fr;row-gap:14px}
  .row{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:14px;grid-template-columns:1fr 120px}
  .rows.tray .row{grid-template-columns:1fr 150px}
}
/* home tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.tile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--green)}
.tph{aspect-ratio:1/1;overflow:hidden;background:var(--jade-soft)}
.tiles.wide .tph{aspect-ratio:4/3}
.tph img{width:100%;height:100%;object-fit:cover}
.ttx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.tn{font-size:.95rem;line-height:1.3;margin:0;font-weight:700}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:600}
.drinks-list{margin:0;padding-left:1.1em;columns:2;column-gap:28px;max-width:460px}
.drinks-list li{margin:0 0 6px}
.vbadge{display:inline-block;font:700 .76rem/1 system-ui,sans-serif;background:var(--jade);color:#123423;
  padding:4px 6px;border-radius:5px;letter-spacing:.03em;vertical-align:2px}
.plus{color:var(--green);font-weight:700;white-space:nowrap}

/* build your own */
.myo-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:0 0 4px}
.myo-price{font-size:1.35rem}
.step{margin:26px 0 0}
.step-t{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.step-t h3{margin:0}
.step-lim{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--ink-2)}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--board);color:var(--board-ink);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex:none}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.home-opts{max-width:760px}
.opt{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:10px 8px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px}
.opt img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.opt .on{font-size:.82rem;line-height:1.25;font-weight:600}
.opt .on small{display:block;color:var(--green);font-weight:700;font-size:.78rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.sauces{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.sauces img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.chip{background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:7px 13px;font-size:.85rem;font-weight:600}
.extras{margin:18px 0 0;font-size:.92rem;color:var(--ink-2)}

/* simple price list (nigiri, sashimi, hosomaki when no photo) */
.plist{list-style:none;margin:0;padding:0;max-width:520px}
.plist li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--rule);font-size:.97rem}

/* trust + faq + find us */
.trust{display:grid;gap:14px}
@media (min-width:760px){.trust{grid-template-columns:1fr 1fr}}
.tcard{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 20px}
.tcard .big{font-size:1.5rem;font-weight:700;margin:0 0 2px}
.tcard p{margin:0;font-size:.93rem;color:var(--ink-2)}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:10px;margin:0 0 10px;max-width:760px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-weight:700;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 16px 15px;color:var(--ink-2);font-size:.95rem;max-width:66ch}
.faq .a p{margin:0}
.find{display:grid;gap:24px}
@media (min-width:820px){.find{grid-template-columns:1fr 1fr}}
.find img{border-radius:12px}
.addr{font-style:normal}
.addr strong{display:block;font-size:1.05rem}
dl.hourly{display:grid;grid-template-columns:auto auto;gap:4px 22px;justify-content:start;margin:14px 0}
dl.hourly dt{font-weight:600}dl.hourly dd{margin:0;font-variant-numeric:tabular-nums}
.note-banner{background:var(--jade-soft);border:1px solid #bfe3cf;border-radius:10px;padding:12px 16px;font-size:.93rem;max-width:760px}

/* menu page section nav */
html{scroll-padding-top:68px}
@media (max-width:899px){html{scroll-padding-bottom:64px}}
.secbar{position:sticky;top:0;z-index:5;background:var(--ground);border-bottom:1px solid var(--rule)}
.secnav{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-top:8px;padding-bottom:8px;scrollbar-width:none}
.secnav::-webkit-scrollbar{display:none}
.secnav a{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:.88rem;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:0 15px}
.secnav a:hover{border-color:var(--green);color:var(--green)}
.secnav a[aria-current]{background:var(--green);border-color:var(--green);color:#fff}
.updated{font-size:.85rem;color:var(--ink-2)}

/* allergen table (when data lands) */
.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--card)}
table.al{border-collapse:collapse;width:100%;font-size:.85rem}
table.al th,table.al td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:center;white-space:nowrap}
table.al th:first-child,table.al td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}

/* footer */
footer.site{background:var(--board);color:var(--board-muted);margin-top:clamp(30px,5vw,54px);font-size:.92rem}
.fgrid{display:grid;gap:26px;padding:34px 0 20px}
@media (min-width:760px){.fgrid{grid-template-columns:1.2fr 1fr 1fr}}
footer.site a{color:var(--board-ink)}
.flogo{display:block;width:210px;height:auto;margin:0 0 14px}
footer.site h2{font-size:1rem;margin:0 0 10px;color:var(--board-ink)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
footer.site ul a{display:inline-block;padding:10px 0}
.legal{border-top:1px solid #5c6065;padding:16px 0 26px;font-size:.8rem;line-height:1.6;color:var(--board-muted)}
@media (max-width:899px){.legal{padding-bottom:96px}}

/* ---------- mobile-only refinements (max-width 759px). Desktop rules above are untouched. ---------- */
@media (max-width:759px){
  .m-hide{display:none !important}
  section.band{padding:38px 0 18px}
  h2{margin-bottom:8px}
  .sec-note{margin-bottom:20px;line-height:1.5}
  .hero-grid{gap:24px}
  .hero-photo{margin:4px calc(50% - 50vw) 0;border-radius:0;box-shadow:none}
  .facts{margin-top:22px;padding-top:16px;gap:12px}
  .ttx{padding:11px 12px 13px}
  .row{padding:16px 0}
  .rn{margin-bottom:5px}
  .rd{margin-bottom:9px}
  .step{margin:30px 0 0}
  .opts{gap:8px}
  .opt{border:0;background:transparent;padding:5px 2px;gap:8px}
  .opt img{width:76px;height:76px}
  .myo-head{margin-bottom:2px}
  .trust{gap:12px}
  .fgrid{gap:22px;padding:28px 0 18px}
  .flogo{width:170px}
}

/* mobile action bar */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
.actionbar a{background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;
  min-height:52px;display:flex;align-items:center;justify-content:center;gap:7px}
.actionbar a.order{background:var(--green);color:#fff}
@media (min-width:900px){.actionbar{display:none}}

/* delivery app buttons */
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:560px}
@media (max-width:399px){.cta-grid .btn-app{padding-left:10px;padding-right:10px;gap:7px}}
.cta-grid .btn-solid{grid-column:1/-1}
.btn-app{background:#fff;color:#1d1f21;border-color:#fff;gap:9px}
.btn-app:hover{border-color:var(--jade)}
section.band .btn-app{border-color:var(--rule)}
section.band .btn-app:hover{border-color:var(--green)}
.app-ico{width:22px;height:22px;flex:none}
@media (max-width:599px){.sm-hide{display:none}}

/* ---------- wide desktop screens (desktop only; phones and tablets never reach these widths) ---------- */
@media (min-width:1280px){.wrap{max-width:1240px}}
@media (min-width:1600px){.wrap{max-width:1400px}}