/* 2026-10-09 experience pass: first visit, Find your number, drinks and sweets, platters and
   gatherings, Visit and contact, From the shop, story slot. Loaded last. Same palette and type. */

/* ---------- Owner notes (private builds only; never rendered in production) ---------- */
.pending { margin: var(--s6) 0 0; padding: var(--s4) var(--s5); background: #fffdf5; color: var(--ink); border: 2px dashed var(--orange); border-radius: 4px; max-width: 46rem; font: 500 .9375rem/1.5 var(--font); }
.pending__tag { margin: 0 0 var(--s1); color: #9e321d; font: 800 .75rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.pending__title { margin: 0 0 var(--s2); font-weight: 800; }
.pending ul { margin: 0; padding-left: 1.1rem; }
.pending li + li { margin-top: .2rem; }
/* Unconfirmed facts (non-production builds only): a small vermilion dot after the fact, read aloud,
   explained once per page by the footnote in the footer. Never inside a link or button. */
:root { --confirm-dot: var(--orange); --confirm-dot-light: #f7a58c; --confirm-dot-size: 8px; }
.footer, .visit, .hungry { --confirm-dot: var(--confirm-dot-light); }
.to-confirm { display: inline-flex; align-items: center; margin-left: .4em; vertical-align: middle; }
.to-confirm__dot { display: inline-block; flex: none; width: var(--confirm-dot-size); height: var(--confirm-dot-size); border-radius: 50%; background: var(--confirm-dot); }
.hero__actions > .to-confirm, .section-next > .to-confirm, .order__links > .to-confirm { align-self: center; margin-left: calc(var(--s2) * -1); }
.svc-list li { position: relative; }
.svc-list li > .to-confirm { position: absolute; top: .55rem; right: .6rem; margin: 0; }
.confirm-note { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); margin: 0; font: 600 .875rem/1.4 var(--font); color: inherit; }
/* Own ordering slot (non-production builds only): where Jay's Clover pickup page will go, never a button */
.order-slot { margin: var(--s3) 0; padding: var(--s3) var(--s4); border: 2px dashed currentColor; border-radius: 4px; font: 500 .9375rem/1.45 var(--font); max-width: 34rem; }
.order-slot__tag { display: block; margin-bottom: var(--s1); font: 800 .6875rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Shared: a clear next step at the end of a section ---------- */
.section-next { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0; }
.discover .section-next { justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.discover .btn--secondary { border-color: var(--ivory); color: var(--ivory); }
.discover .btn--secondary:hover { background: var(--ivory); color: var(--blue); }
.discover :focus-visible { outline-color: var(--ivory); }

.visit .lede { color: var(--ivory); margin-top: var(--s4); max-width: 26rem; }
.visit .btn--secondary { border-color: var(--ivory); color: var(--ivory); }
.visit .btn--secondary:hover { background: var(--ivory); color: var(--blue); }

/* ---------- Your first visit: headline beside a taped counter print, then a brushed path from seal 1 to 3 ---------- */
.first-visit { --seal: 3.5rem; --path-w: 14px; --path-inset: .4rem; --steps-gap: clamp(1.75rem, 3vw, 2.5rem); padding-block: clamp(2.75rem, 5.3vw, 4.75rem); background: var(--ivory); }
.first-visit .section-head .display { color: var(--blue); font-size: clamp(2.55rem, 5.525vw, 5.1rem); }
.first-visit__head { display: grid; gap: var(--s5); margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.first-visit__head .section-head { margin: 0; }
.first-visit__print { position: relative; margin: 0; max-width: 34rem; }
.first-visit__photo { display: block; width: 100%; height: auto; border-radius: 1.25rem; border: var(--print-pad) solid var(--white); box-shadow: var(--shadow); rotate: 1.5deg; }
.first-visit__print .tape--tl { left: 6%; }
.first-visit__print .tape--tr { right: 6%; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--steps-gap); }
.step { position: relative; display: flex; flex-direction: column; padding-left: calc(var(--seal) + var(--s4)); }
.step__head { display: flex; align-items: center; gap: var(--s3); min-height: var(--seal); margin-bottom: var(--s2); }
.step__num { position: absolute; z-index: 1; top: 0; left: 0; flex: none; display: grid; place-items: center; width: var(--seal); height: var(--seal); border-radius: 50%; color: var(--ivory); }
.step__title { margin: 0; font: 700 clamp(1.5rem, 2.2vw, 1.875rem)/1.15 var(--serif); color: var(--blue); }
.step p { margin: 0 0 var(--s1); max-width: 30rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
.step__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); max-width: 30rem; margin-top: auto; }
.step__go { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-weight: 800; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }
.step__go:hover { color: var(--orange); }
.step__spot { flex: none; width: 72px; height: auto; }
.step:nth-child(2) .step__spot { width: 80px; rotate: -14deg; }
@media (max-width: 63.99rem) { .step__spot { width: 64px; } .step:nth-child(2) .step__spot { width: 72px; } }
/* The path runs down from seal to seal below 64rem */
.step .step__path { position: absolute; top: calc(var(--seal) + var(--path-inset)); bottom: calc(var(--seal) / -2 - var(--steps-gap)); left: calc(var(--seal) / 2 - var(--path-w) / 2); width: var(--path-w); margin: 0; }
.step .step__path svg { width: 100%; height: 100%; }
.step .step__path-h { display: none; }
@media (min-width: 64rem) {
  .first-visit__head { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
  .first-visit__print { justify-self: end; width: 100%; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { padding-left: 0; }
  .step__foot { min-height: 4.5rem; } /* links line up across the three steps */
  .step__num { position: relative; }
  /* across: the stroke fills the rest of the title row and runs through the gap to the next seal */
  .step .step__path { position: static; flex: 1 1 2rem; width: auto; height: var(--path-w); margin-right: calc(var(--seal) / -2 - var(--steps-gap)); }
  .step .step__path-h { display: block; }
  .step .step__path-v { display: none; }
}

/* ---------- Menu: ordering block ---------- */
.order { margin-top: var(--s6); }
.order__title { margin: 0 0 var(--s3); font: 800 .75rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.menu-hero .order__title { color: inherit; }
.order__links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.order__link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem; border: 2px solid currentColor; border-radius: var(--stamp-radius, 2px); font-weight: 800; text-decoration: none; color: inherit; }
.order__link::after { content: "↗"; font-weight: 700; }
.order__link--call::after { content: none; }
.order__link:hover { background: var(--blue); border-color: var(--blue); color: var(--ivory); }
.order__ext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-hero .pending, .visit .pending { color: var(--ink); }

/* ---------- Menu: Find your number ---------- */

/* The card you jumped to gets a vermilion stamp ring for a moment */
.cards .card { scroll-margin-top: 7rem; }
.card:target { outline: 3px solid var(--orange); outline-offset: 4px; }
.motion-ready .card:target, .js-reveal .card:target { animation: found-it 1.2s ease-out 1; }
@keyframes found-it { 0% { outline-offset: 16px; outline-color: transparent; } 40% { outline-offset: 2px; outline-color: var(--orange); } 100% { outline-offset: 4px; } }
@media (prefers-reduced-motion: reduce) { .card:target { animation: none !important; } }

/* Menu legibility on phones: nothing smaller than 12px, variants a touch larger */
.tag { font-size: .75rem; padding: .2rem .45rem; }
@media (max-width: 47.99rem) {
  .card__variants { font-size: .875rem; }
  .card__pictured { font-size: .8125rem; }
}

/* ---------- Menu: drinks and sweets ---------- */
.sweets { background: #f9e7d8; }
.sweets__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sweets .eyebrow { display: flex; gap: var(--s2); }
.sweets__prints { list-style: none; margin: 0; padding: var(--s3) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.sweets__prints li { background: var(--white); padding: var(--print-pad) var(--print-pad) calc(var(--print-pad) * 3); box-shadow: var(--shadow); rotate: -2deg; }
.sweets__prints li:nth-child(2) { rotate: 2deg; margin-top: 1.5rem; } .sweets__prints li:nth-child(3) { rotate: 1deg; } .sweets__prints li:nth-child(4) { rotate: -1.5deg; margin-top: 1rem; }
.sweets__prints img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
@media (max-width: 47.99rem) { .sweets__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Platters & gatherings ---------- */
.share-page { margin: var(--s4) 0 0; min-height: 44px; }
.share-page__btn { min-height: 44px; padding: 0; background: none; border: 0; color: var(--blue); font: 800 1rem/1.4 var(--font); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; cursor: pointer; }
.share-page__btn:hover { color: var(--orange); }
.share-page__done { display: block; color: var(--ink); font-weight: 600; }

/* ---------- Visit & contact ---------- */
.visit--page { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.visit--page .display { color: var(--ivory); }
.crumbs + .visit--page { margin-top: 0; }
.know { padding-block: clamp(4rem, 8vw, 7rem); }
.know__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.know .display { color: var(--blue); }
.know .order { margin-top: var(--s6); color: var(--blue); }

.know__store { margin: 0; }
.know__store:empty { display: none; }
/* No storefront photo yet: the text column takes the section, at a readable width */
.know__grid--text { grid-template-columns: minmax(0, 1fr); }
.know__grid--text > div { max-width: 46rem; }
@media (min-width: 64rem) {
  /* wide screens: heading and directions on the left, ordering and gift cards beside them */
  .know__grid--text > div { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .know__grid--text > div > * { grid-column: 1; }
  .know__grid--text .order { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin-top: 0; }

}
.storefront-slot { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 2px dashed var(--orange); border-radius: 4px; background: repeating-linear-gradient(-45deg, #fffdf5 0 14px, #fbefe0 14px 28px); color: #9e321d; font: 800 .875rem/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: var(--s5); }
@media (max-width: 47.99rem) { .know__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- From the shop ---------- */
.media-hero { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.media-hero .display { color: var(--blue); }
.press { padding-block: clamp(3.5rem, 7vw, 6rem); }
.press__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.press__media { position: relative; margin: 0; background: var(--white); padding: var(--print-pad) var(--print-pad) calc(var(--print-pad) * 3); box-shadow: var(--shadow); rotate: -2deg; }
.press__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.press .display { color: var(--blue); }
.press__note { margin: var(--s2) 0 0; color: var(--muted); font-size: .9375rem; }
.wall { padding-block: clamp(4rem, 8vw, 7rem); background: var(--ivory); }
.wall__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5); margin-bottom: clamp(2rem, 4vw, 3rem); }
.wall .display { color: var(--blue); }
.wall__next { justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 47.99rem) { .press__grid { grid-template-columns: minmax(0, 1fr); } .press__media { rotate: -1deg; } }

/* ---------- About: story slot and onward cards ---------- */
.story { padding-block: clamp(3rem, 6vw, 5rem); }
.story--pending { padding-block: var(--s6); }
.story--pending .pending { margin: 0; }
.about-more { padding-block: clamp(3rem, 6vw, 5rem); }
.about-more__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.more-card { display: grid; gap: var(--s2); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--blue); color: var(--ivory); border-radius: 3px; text-decoration: none; box-shadow: var(--shadow); transition: translate .2s cubic-bezier(.22, 1, .36, 1); }
.more-card .eyebrow { color: var(--peach); }
.more-card__title { font: 700 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--serif); }
.more-card__go { font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.more-card:hover { translate: 0 -3px; }
.more-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
@media (max-width: 47.99rem) { .about-more__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Motion: cat greets when the shop photo arrives; chopsticks wait for their moment ---------- */
.home .welcome-cat .cat__paw { animation: none; }
.motion-ready .shop__wide.is-seen .cat__paw { animation: cat-beckon 1.6s ease-in-out 2; }
.motion-ready.motion-paused .shop__wide.is-seen .cat__paw { animation-play-state: paused; }
.motion-ready:not(.motion-paused) .share__media[data-greet]:not(.is-seen) .share__spot { opacity: 0; }

/* ---------- Calmer wave pattern behind reading on blue sections ---------- */
.home .discover::after, .home .visit::after { opacity: .05; }

/* ---------- Mobile: keep focused links and the last row clear of the action bar ---------- */
@media (max-width: 47.99rem) {
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .advisory { margin-bottom: var(--s6); }
}

@media (prefers-reduced-motion: reduce) {
  .more-card { transition: none; }
  .more-card:hover { translate: none; transform: none; }
}

.step__go { gap: .35rem; }
.step__num { font: 800 1.375rem/1 var(--font); letter-spacing: -.02em; }

/* 44px tap targets for the short standalone links the audit found */
.trust-line a, .visit__map figcaption a, .crumbs a, .seod-credit { display: inline-flex; align-items: center; min-height: 44px; }
.visit .board--visit .board__sub a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs { padding-top: .5rem; }
@media (max-width: 29.99rem) { .menu-nav a { min-height: 44px; } }
.visit__map iframe { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
.visit__map iframe:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* 2026-10-09 review pass (ChatGPT review adopted) */

.discover .section-next { align-items: center; gap: var(--s3) var(--s6); }
/* Know your number?: a native disclosure under the category bar */

/* First visit: plain step numbers so they never read as dish numbers */
.step__num { background: var(--blue); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--blue); rotate: 0deg; font: 700 1.75rem/1 var(--serif); }
.wall__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }

/* =====================================================================
   2026-10-09 ordering experience: food first, then the fastest way to get it.
   ===================================================================== */

/* Mobile action bar: Order is the vermilion centre */
@media (max-width: 47.99rem) {
  .bar .bar__item--primary { background: var(--orange); color: var(--ivory); }
  .bar .bar__item--primary:last-child { background: var(--orange); }
}

/* Buttons on vermilion */
.btn--light { background: var(--ivory); border-color: var(--ivory); color: var(--orange); }
.btn--light:hover { background: var(--white); border-color: var(--white); color: var(--blue-dark); }
.btn--ghost-light { background: transparent; border-color: var(--ivory); color: var(--ivory); }
.btn--ghost-light:hover { background: var(--ivory); color: var(--orange); }

/* ---------- Hungry right now? (homepage band) ---------- */
.hungry { background: var(--orange); color: var(--ivory); padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.hungry .eyebrow { color: var(--ivory); }
.hungry .display { color: var(--ivory); font-size: clamp(3rem, 7vw, 6rem); line-height: .92; margin: 0; }
.hungry__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.hungry__lede { margin: 0 0 var(--s4); font: 600 clamp(1.125rem, 1.6vw, 1.375rem)/1.4 var(--font); }
.hungry__btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.hungry :focus-visible { outline-color: var(--ivory); }
.hungry__note { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: .9375rem; color: var(--ivory); opacity: 1; }
.reel { list-style: none; margin: 0; padding: var(--s4) var(--gutter) var(--s5); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: clamp(1rem, 2.4vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; scrollbar-width: thin; scrollbar-color: var(--ivory) transparent; }
.reel__item { scroll-snap-align: start; }
.reel__card { position: relative; display: block; background: var(--white); padding: .6rem .6rem 3.4rem; box-shadow: 0 18px 34px -16px rgba(40, 10, 0, .6); text-decoration: none; rotate: -2deg; transition: rotate .22s cubic-bezier(.22, 1, .36, 1), translate .22s cubic-bezier(.22, 1, .36, 1); }
.reel__item:nth-child(even) .reel__card { rotate: 1.8deg; }
.reel__item:nth-child(3n) .reel__card { rotate: -.8deg; }
.reel__card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.reel__label { position: absolute; left: .9rem; bottom: .85rem; font: 700 1.375rem/1.1 var(--serif); color: var(--blue); }
.reel__cta { position: absolute; top: -.75rem; right: -.6rem; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--blue); color: var(--ivory); font: 800 .8125rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--blue); rotate: 10deg; transition: scale .2s cubic-bezier(.2, 1.5, .4, 1); }
.reel__card:hover, .reel__card:focus-visible { rotate: 0deg; translate: 0 -6px; }
.reel__card:hover .reel__cta, .reel__card:focus-visible .reel__cta { scale: 1.12; }
.reel__card:focus-visible { outline: 3px solid var(--ivory); outline-offset: 5px; }
@media (min-width: 64rem) { .reel { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding-inline: var(--gutter); } }
@media (max-width: 47.99rem) { .hungry__head { grid-template-columns: minmax(0, 1fr); } .reel { grid-auto-columns: 72vw; } }

/* ---------- Order choices (sheet and page) ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "mode go"; align-items: center; column-gap: var(--s4); min-height: 64px; padding: .8rem 1.1rem .8rem 1.25rem; background: var(--white); color: var(--ink); border: 2px solid var(--blue); border-radius: 4px; text-decoration: none; box-shadow: 4px 4px 0 var(--blue); transition: translate .14s ease, box-shadow .14s ease, background-color .14s ease; }
.svc__name { grid-area: name; font: 800 1.25rem/1.2 var(--font); color: var(--blue); }
.svc__mode { grid-area: mode; font-size: .9375rem; color: var(--muted); font-weight: 600; }
.svc__go { grid-area: go; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--blue); color: var(--ivory); font-weight: 800; }
.svc--app { border-color: var(--orange); box-shadow: 4px 4px 0 var(--orange); }
.svc--app .svc__name { color: var(--orange); }
.svc--app .svc__go { background: var(--orange); }
.svc:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--blue); }
.svc--app:hover { box-shadow: 6px 6px 0 var(--orange); }
.svc:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--blue); }
.svc:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; }
#order-sheet .svc--app .svc__name, .order-hero .svc--app .svc__name { color: #a3341d; }

.order-sheet { width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 10px; background: var(--ivory); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(10, 14, 40, .7); overflow: auto; }
.order-sheet::backdrop { background: rgba(20, 24, 58, .62); }
.order-sheet__photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; height: clamp(7rem, 22vw, 10rem); }
.order-sheet__photo { overflow: hidden; }
.order-sheet__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.order-sheet__body { position: relative; padding: var(--s5) clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem); }
.order-sheet__picked { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-left: 4px solid var(--orange); background: var(--white); color: var(--ink); font: 700 1rem/1.4 var(--font); max-width: calc(100% - 7.5rem); }
.order-sheet__eyebrow { margin: 0 0 var(--s1); color: #a3341d; font: 800 .75rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.order-sheet__title { margin: 0 0 var(--s5); font: 700 clamp(1.875rem, 5vw, 2.5rem)/1.05 var(--serif); color: var(--blue); }
.order-sheet__note { margin: var(--s5) 0 0; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.order-sheet__close { position: absolute; top: -1.4rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid var(--ivory); background: var(--blue); color: var(--ivory); font: 700 1.5rem/1 var(--font); cursor: pointer; }
.order-sheet__close:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.order-sheet[open] { animation: sheet-in .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes sheet-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 47.99rem) {
  .order-sheet { width: 100%; max-width: none; margin: auto 0 0; max-height: 92dvh; border-radius: 14px 14px 0 0; }
  .order-sheet[open] { animation-name: sheet-up; }
  @keyframes sheet-up { from { translate: 0 100%; } to { translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) { .order-sheet[open] { animation: none; } .svc, .reel__card, .reel__cta { transition: none; } .reel__card:hover, .reel__card:focus-visible, .svc:hover { translate: none; } }

/* Menu order block with live apps */
.order__links .order__link--app { background: var(--orange); border-color: var(--orange); color: var(--ivory); }
.order__links .order__link--app:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.order__note { margin: var(--s3) 0 0; font-size: .875rem; color: var(--muted); max-width: 34rem; }

/* ---------- Order page ---------- */
.order-hero { padding-block: clamp(1rem, 3vw, 2rem) clamp(3.5rem, 7vw, 6rem); }
.order-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.order-hero .display { color: var(--blue); }
.order-hero .lede { margin-bottom: var(--s6); }
.order-hero__note { margin: var(--s5) 0 0; font-size: .9375rem; color: var(--muted); max-width: 32rem; }
.svc-list--page { max-width: 30rem; }
.order-hero__media { position: relative; min-height: clamp(22rem, 42vw, 36rem); }
.stack { position: absolute; display: block; background: var(--white); padding: .6rem .6rem 2rem; box-shadow: var(--shadow); }
.stack img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.stack--1 { width: 72%; left: 4%; top: 4%; rotate: -3deg; z-index: 1; }
.stack--2 { width: 44%; right: 0; top: 0; rotate: 4deg; z-index: 2; }
.stack--3 { width: 42%; right: 6%; bottom: 0; rotate: -2deg; z-index: 3; }
.sticker--order { left: 0; bottom: 6%; z-index: 4; background: var(--blue); box-shadow: 0 0 0 4px var(--ivory), 0 0 0 6px var(--blue), var(--shadow); rotate: -12deg; }
.picks { padding-block: clamp(3.5rem, 7vw, 6rem); background: #f9e7d8; }
.picks .display { color: var(--blue); }
.picks__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s4) var(--s6); margin-bottom: clamp(2rem, 4vw, 3rem); }
.picks__note { margin: 0; max-width: 24rem; color: var(--ink); font-size: 1rem; }
.picks__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.pick__link { display: block; text-decoration: none; color: var(--ink); }
.pick__media { position: relative; display: block; background: var(--white); padding: .5rem .5rem 1.6rem; box-shadow: var(--shadow); rotate: -1.5deg; transition: rotate .2s cubic-bezier(.22, 1, .36, 1), translate .2s cubic-bezier(.22, 1, .36, 1); }
.pick:nth-child(even) .pick__media { rotate: 1.5deg; }
.pick__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.pick__name { display: block; margin-top: var(--s4); font: 700 1.0625rem/1.3 var(--font); color: var(--blue); }
.pick__price { display: block; margin-top: var(--s1); font-weight: 800; font-variant-numeric: tabular-nums; }
.pick__where { font-weight: 500; color: var(--muted); font-size: .875rem; }
.pick__link:hover .pick__media, .pick__link:focus-visible .pick__media { rotate: 0deg; translate: 0 -4px; }
.pick__link:hover .pick__name { text-decoration: underline; text-underline-offset: .2em; }
.pick__link:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; }
.group { padding-block: clamp(3.5rem, 7vw, 6rem); }
.group__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.group .display { color: var(--blue); }
.group__media picture { display: block; border-radius: 50%; overflow: hidden; outline: 2px solid var(--orange); outline-offset: 10px; aspect-ratio: 1; }
.group__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 63.99rem) { .picks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) {
  .order-hero__grid, .group__grid { grid-template-columns: minmax(0, 1fr); }
  .order-hero__media { order: -1; min-height: 20rem; }
  .group__media { max-width: 18rem; }
}
@media (prefers-reduced-motion: reduce) { .pick__media { transition: none; } .pick__link:hover .pick__media, .pick__link:focus-visible .pick__media { translate: none; } }

/* =====================================================================
   2026-10-09 Japanese elements and photo-first menu.
   Only the five verified labels appear, always beside English.
   Motifs: noren (split shop curtain), tategaki (vertical labels), hanko (seal),
   shippo (seven treasures circles) and seigaiha (waves). Decorative parts are hidden from screen readers.
   ===================================================================== */
:root { --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif; --wood: #8a5a3a; --wood-dark: #5e3b24; }

/* ---------- Noren ---------- */
.noren { position: relative; padding-top: 14px; }
.noren__rod { position: absolute; left: -1%; right: -1%; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #a87250 0%, var(--wood) 45%, var(--wood-dark) 100%); box-shadow: 0 3px 6px rgba(0,0,0,.25); z-index: 2; }
.noren__panels { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.noren__panel { position: relative; transform-origin: 50% 0; }
.noren__panel > a, .noren__panel:not(:has(a)) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; padding: 1.1rem .5rem 1.25rem; background: var(--blue); color: var(--ivory); text-decoration: none; border-radius: 0 0 3px 3px; box-shadow: inset 0 10px 10px -8px rgba(0,0,0,.35); min-height: 100%; }
.noren__ja { font: 600 clamp(1.5rem, 2.6vw, 2.25rem)/1.05 var(--mincho); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .08em; }
.noren__en { font: 800 .75rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.noren__panel:nth-child(even) > a, .noren__panel:nth-child(even):not(:has(a)) { background: var(--blue-dark); }

/* Menu noren: real navigation into the sections */
.noren--menu { margin: var(--s6) 0 var(--s2); max-width: 46rem; }
.noren--menu .noren__panel > a { min-height: 11rem; transition: translate .2s cubic-bezier(.22, 1, .36, 1), background-color .2s ease; }
.noren--menu .noren__panel > a:hover { background: var(--orange); translate: 0 4px; }
.noren--menu .noren__panel > a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (max-width: 47.99rem) { .noren--menu .noren__panel > a { min-height: 8.5rem; padding-inline: .25rem; } .noren--menu .noren__en { font-size: .6875rem; letter-spacing: .08em; } }

/* Shop noren: hangs over the counter photo like the curtain at a shop door */
.noren--shop { position: absolute; z-index: 2; top: 0; left: 50%; width: min(32rem, 70%); translate: -50% 0; pointer-events: none; }
.noren--shop .noren__panel:not(:has(a)) { min-height: clamp(7rem, 13vw, 11rem); background: rgba(36, 75, 145, .94); }
.noren--shop .noren__panel:nth-child(even):not(:has(a)) { background: rgba(24, 53, 101, .94); }
.motion-ready .noren--shop .noren__panel { animation: noren-sway 6s ease-in-out infinite; }
.motion-ready .noren--shop .noren__panel:nth-child(2) { animation-delay: -2s; }
.motion-ready .noren--shop .noren__panel:nth-child(3) { animation-delay: -4s; }
@keyframes noren-sway { 0%, 100% { rotate: -.6deg; } 50% { rotate: .6deg; } }
.motion-paused .noren--shop .noren__panel { animation-play-state: paused; }

/* Footer noren: five panels hanging from the top edge */
.footer { position: relative; padding-top: 0; }
.noren--footer { max-width: var(--max); margin: 0 auto clamp(2.5rem, 5vw, 4rem); padding-inline: var(--gutter); }
.noren--footer .noren__rod { left: 0; right: 0; }
.noren--footer .noren__panel:not(:has(a)) { min-height: clamp(7.5rem, 12vw, 10rem); background: var(--orange); }
.noren--footer .noren__panel:nth-child(even):not(:has(a)) { background: #a3341d; }
@media (max-width: 47.99rem) { .noren--footer .noren__ja { font-size: 1.25rem; } .noren--footer .noren__en { font-size: .625rem; letter-spacing: .06em; } .noren--footer .noren__panels { gap: 4px; } }
/* Faint seigaiha waves behind the footer */
.footer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%23fff7e8' stroke-opacity='.07' stroke-width='1.2'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Ccircle cx='0' cy='15' r='28'/%3E%3Ccircle cx='0' cy='15' r='20'/%3E%3Ccircle cx='0' cy='15' r='12'/%3E%3Ccircle cx='60' cy='15' r='28'/%3E%3Ccircle cx='60' cy='15' r='20'/%3E%3Ccircle cx='60' cy='15' r='12'/%3E%3C/g%3E%3C/svg%3E"); background-size: 60px 30px; }
/* Hanko: a vermilion seal stamped beside the name */
.hanko { display: inline-grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-left: .6rem; vertical-align: middle; border: 2px solid var(--orange); border-radius: 6px; color: var(--orange); background: rgba(188, 61, 36, .08); rotate: -8deg; box-shadow: inset 0 0 0 2px rgba(188, 61, 36, .25); }
.hanko span { font: 700 .875rem/1 var(--serif); letter-spacing: .02em; }
.footer .hanko { border-color: #e98a6f; color: #f4a68e; background: transparent; box-shadow: inset 0 0 0 2px rgba(233, 138, 111, .35); }

/* ---------- Tategaki: vertical label seal beside each menu section ---------- */
.menu-cat__head { position: relative; padding-left: clamp(4.25rem, 7vw, 5.5rem); }
.tate { position: absolute; left: 0; top: .25rem; margin: 0; display: flex; gap: .3rem; }
.tate span { display: block; writing-mode: vertical-rl; text-orientation: upright; padding: .7rem .45rem; background: var(--orange); color: var(--ivory); font: 600 clamp(1.25rem, 2.2vw, 1.625rem)/1 var(--mincho); letter-spacing: .12em; border-radius: 3px; box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3.5px var(--orange); }
.tate--pair span:nth-child(2) { background: var(--blue); box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3.5px var(--blue); }
.menu-cat__head .lede { max-width: 36rem; }
.tate--pair + h2 { margin-left: 2.5rem; }
.tate--pair ~ .lede, .tate--pair ~ .pending { margin-left: 2.5rem; }

/* ---------- Obi: a thin shippo sash between sections ---------- */
.obi { height: 18px; background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23fff7e8' stroke-opacity='.55' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3Ccircle cx='18' cy='0' r='9'/%3E%3Ccircle cx='0' cy='18' r='9'/%3E%3Ccircle cx='18' cy='18' r='9'/%3E%3Ccircle cx='9' cy='9' r='9'/%3E%3C/g%3E%3C/svg%3E"); background-size: 18px 18px; border-block: 3px solid var(--orange); }
.obi--footer { border-bottom: 0; }

/* ---------- Photo-first menu cards: every dish as a big taped print ---------- */
.menu-cat .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 80rem) { .menu-cat .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.menu-cat .card { display: flex; flex-direction: column; gap: 0; background: none; border: 0; padding: 0; overflow: visible; }
.menu-cat .card__media { position: relative; display: block; background: var(--white); padding: .5rem .5rem .5rem; box-shadow: var(--shadow); border-radius: 3px; aspect-ratio: auto; rotate: -1deg; transition: rotate .22s cubic-bezier(.22, 1, .36, 1), translate .22s cubic-bezier(.22, 1, .36, 1); }
.menu-cat .card:nth-child(even) .card__media { rotate: 1deg; }
.menu-cat .card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.menu-cat .card:hover .card__media, .menu-cat .card:focus-within .card__media { rotate: 0deg; translate: 0 -5px; }
.menu-cat .card:hover, .menu-cat .card:focus-within { transform: none; box-shadow: none; }
.menu-cat .card:focus-within { outline: 3px solid var(--orange); outline-offset: 8px; border-radius: 4px; }
/* The number as a hanko stamp over the corner of the print */
.menu-cat .card__num { position: absolute; z-index: 2; top: -.65rem; left: -.5rem; min-width: 0; width: auto; padding: .5rem .55rem; border-radius: 4px; background: var(--orange); color: var(--ivory); font: 800 1rem/1 var(--font); letter-spacing: 0; box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--orange), 0 4px 10px rgba(0,0,0,.25); rotate: -6deg; }
.menu-cat .card__body { padding: var(--s4) .25rem 0; gap: .35rem; }
.menu-cat .card__name { font: 700 1.125rem/1.3 var(--font); }
.menu-cat .card__price { font: 800 1.125rem/1.3 var(--font); }
.menu-cat .tag { background: transparent; border: 1.5px solid var(--orange); color: #a3341d; font-weight: 800; }
@media (max-width: 63.99rem) { .menu-cat .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) {
  .menu-cat .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
  .menu-cat .card { display: flex; padding-bottom: 0; border: 0; }
  .menu-cat .card__media { padding: .3rem; }
  .menu-cat .card__num { font-size: .875rem; padding: .4rem .45rem; }
  .menu-cat .card__name { font-size: 1rem; }
  .menu-cat .card__price { font-size: 1rem; }
  .menu-cat .card__variants li { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-cat .card__media, .noren--menu .noren__panel > a { transition: none; }
  .menu-cat .card:hover .card__media, .menu-cat .card:focus-within .card__media, .noren--menu .noren__panel > a:hover { translate: none; }
  .noren--shop .noren__panel { animation: none !important; }
}
.noren__panels { align-items: stretch; }
.noren__panel { display: flex; }
.noren__panel > a, .noren__panel:not(:has(a)) { flex: 1; }
.noren__panel:not(:has(a)) { display: flex; }
.menu-cat .card[data-img="board"] .card__num { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; box-shadow: none; }

/* 2026-10-09 fuller sections: shop prints, reviews photo fan, gift band */

@media (max-width: 47.99rem) { .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop__body { grid-column: 1 / -1; }  }
/* 2026-10-24: the Instagram strip folded into the shop section; its two actions close the gallery */
.shop__ig { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: 0; }
.shop__ig-lead { flex-basis: 100%; color: var(--muted); font-size: 1rem; }
@media (min-width: 48rem) { .shop__ig-lead { flex-basis: auto; margin-right: var(--s2); } }

.reviews__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.reviews__photos { position: relative; min-height: clamp(18rem, 30vw, 26rem); }
.rp { position: absolute; display: block; background: var(--white); padding: .5rem .5rem 1.6rem; box-shadow: var(--shadow); }
.rp img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rp--1 { width: 46%; left: 0; top: 8%; rotate: -5deg; z-index: 1; }
.rp--2 { width: 42%; left: 34%; top: 0; rotate: 3deg; z-index: 2; }
.rp--3 { width: 38%; right: 0; top: 30%; rotate: -2deg; z-index: 3; }
.rp::before { content: ""; position: absolute; top: -.6rem; left: 50%; width: 4.5rem; height: 1.3rem; translate: -50% 0; rotate: -4deg; background: var(--tape); z-index: 2; }
.rp--2::before { background: rgba(150, 172, 209, .8); rotate: 5deg; }
.reviews__photos .reviews__spot { position: absolute; z-index: 4; right: 30%; bottom: -1rem; width: clamp(7rem, 12vw, 10rem); rotate: -8deg; filter: drop-shadow(0 10px 14px rgba(23, 23, 21, .25)); }
@media (max-width: 47.99rem) { .reviews__grid { grid-template-columns: minmax(0, 1fr); } .reviews__photos { min-height: 16rem; } .reviews__photos .reviews__spot { display: block; width: 6rem; right: 4%; bottom: -1.5rem; } }

/* ===== 2026-10-11 review session =====
   1. Phones: the food photo comes straight after the wordmark, so the first screen shows food.
      Order stays one tap away in the phone action bar; the headline and buttons follow the photo.
   2. Breadcrumbs: the current page label lines up with the links (links are 44px tall). */
@media (max-width: 47.99rem) {
  .appetite__brand { font-size: clamp(4rem, 21vw, 10rem); margin-bottom: var(--s5); }
  .appetite__photo { order: -1; margin-bottom: var(--s3); }
  .appetite__image { aspect-ratio: 5 / 4; }
}
.crumbs li { display: inline-flex; align-items: center; }

/* Platter request form: labels above fields, errors under them, one column on phones */
.inquiry { padding-block: clamp(3rem, 7vw, 6rem); background: var(--ivory); color: var(--ink); }
.inquiry__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.inquiry__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); }
.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font: 800 .9375rem/1.3 var(--font); color: var(--ink); }
.field__req { font-weight: 500; color: var(--muted); }
.field__hint { margin: 0; font: 500 .8125rem/1.4 var(--font); color: var(--muted); }
.field__input { width: 100%; min-height: 2.875rem; padding: var(--s2) var(--s3); border: 2px solid var(--rule); border-radius: 3px; background: var(--white); color: var(--ink); font: 500 1rem/1.4 var(--font); }
.field__input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.field__input[aria-invalid="true"] { border-color: var(--orange); }
.field__error { margin: 0; font: 700 .875rem/1.4 var(--font); color: var(--orange); }
.field__error::before { content: "! "; }
.inquiry__errors:not(:empty) { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border-left: 4px solid var(--orange); background: var(--white); font: 700 .9375rem/1.45 var(--font); color: var(--ink); }
.inquiry__errors:focus { outline: 0; }
.inquiry__submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); }
.inquiry__status { margin: var(--s4) 0 0; font: 600 .9375rem/1.45 var(--font); color: var(--ink); }
.inquiry__status:empty { margin: 0; }
@media (max-width: 47.99rem) {
  .inquiry__grid, .inquiry__fields { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   2026-10-24 design pass, part A: the info table (Visit, Home visit, Platters pickup, About).
   No heavy box: a quiet panel, tight rows, hours in two columns, the phone as a clear tap target.
   ===================================================================== */
:root { --info-panel: var(--white); --info-rule: var(--rule-light); --info-label: 6.75rem; --tap: 48px; }
.board.board--info { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: var(--s2) var(--s5); border: 0; outline: 0; border-radius: 6px; background: var(--info-panel); color: var(--ink); box-shadow: 0 18px 40px -30px rgba(8, 16, 40, .55); --confirm-dot: var(--orange); }
.board.board--info::before, .board.board--info::after { display: none; }
.board.board--info .board__row, .board.board--info .board__row:nth-child(n) { display: grid; grid-template-columns: var(--info-label) minmax(0, 1fr); align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border: 0; border-bottom: 1px solid var(--info-rule); text-align: left; background: none; }
.board.board--info .board__row:last-child { border-bottom: 0; }
.board.board--info .tab { display: inline-flex; align-items: center; gap: 0; padding: 0; background: none; box-shadow: none; transform: none; border-radius: 0; color: #9e321d; font: 800 .75rem/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.board.board--info .tab::before { display: none; }
.board.board--info dd { margin: 0; color: var(--ink); font: 600 1.0625rem/1.45 var(--font); letter-spacing: 0; }
.board.board--info dd a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.board.board--info .board__sub, .board.board--info .board__sub a { color: var(--muted); font-size: .9375rem; font-weight: 500; }
.board.board--info .board__sub a { color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.board.board--info .hours { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s1); max-width: none; font-size: 1.0625rem; font-weight: 500; }
.board.board--info .hours li { display: contents; }
.board.board--info .hours li::after { display: none; }
.board.board--info .hours li span:first-child { font-weight: 700; white-space: nowrap; }
.board.board--info .hours li span:last-child { white-space: normal; font-variant-numeric: tabular-nums; order: 0; }
.visit .board.board--info .board__row:nth-child(n):not(.board__row--none) { border-right: 0; }
.board.board--info dd a.board__tel { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s5); border: 2px solid var(--blue); border-radius: 999px; background: var(--ivory); color: var(--blue); font: 800 1.125rem/1 var(--font); font-variant-numeric: tabular-nums; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.board.board--info dd a.board__tel:hover { background: var(--blue); color: var(--ivory); }
.board.board--info .board__row--phone dd { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.board.board--info :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.board-after { margin: var(--s3) 0 0; font-size: .9375rem; color: inherit; }
.board-after a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 700; }
@media (max-width: 29.99rem) {
  .board.board--info { padding-inline: var(--s4); }
  .board.board--info .board__row, .board.board--info .board__row:nth-child(n) { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

/* =====================================================================
   2026-10-24 design pass, part B: Platters converts. One line, Plan a tray, Call; DoorDash as a
   small text link; six sets to mix and match; the form right after; three tips; a two-button bar.
   ===================================================================== */
.share__today { margin: var(--s4) 0 0; font: 600 1rem/1.4 var(--font); }
.share__today a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.share__today a:hover { color: var(--blue); }
.platters .share-page { margin-top: 0; }

/* Mix and match from the menu */
.mix { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--ivory); }
.mix .display { color: var(--blue); }
.mix__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.mix__card { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
.mix__media { display: block; }
.mix__media img { display: block; width: 100%; height: auto; aspect-ratio: 552 / 416; object-fit: cover; }
.mix__num { justify-self: start; margin-top: var(--s2); padding: .3rem .5rem; background: var(--orange); color: var(--ivory); font: 800 .9375rem/1 var(--font); border-radius: 3px; }
.mix__name { font: 700 1.0625rem/1.35 var(--font); color: var(--blue); }
.mix__card:hover .mix__name { text-decoration: underline; text-underline-offset: .2em; }
.mix__card:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; }
@media (max-width: 47.99rem) { .mix__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); } .mix__name { font-size: .9375rem; } }

/* Headcount chips: a native radio group, the dot moves with arrow keys */
.field--chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.field--chips legend { padding: 0; margin-bottom: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; display: inline-flex; }
.chip__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip__face { display: inline-flex; align-items: center; min-height: var(--tap, 48px); padding: 0 var(--s5); border: 2px solid var(--blue); border-radius: 999px; background: var(--white); color: var(--blue); font: 800 1rem/1 var(--font); white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.chip__input:checked + .chip__face { background: var(--blue); color: var(--ivory); }
.chip__input:focus-visible + .chip__face { outline: 3px solid var(--orange); outline-offset: 3px; }
.chip__input[aria-invalid="true"] + .chip__face { border-color: var(--orange); }
.chip:hover .chip__face { background: var(--surface); }
.chip:hover .chip__input:checked + .chip__face { background: var(--blue-dark); }

/* Three things that help */
.tips { padding-block: clamp(3.5rem, 7vw, 6rem); }
.tips .display { color: var(--blue); }
.tips__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.tip-card { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.tip-card__spot { grid-row: 1 / 3; width: 4.5rem; height: auto; }
.tip-card__title { margin: 0 0 var(--s1); font: 700 1.5rem/1.15 var(--serif); color: var(--blue); }
.tip-card p { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
@media (max-width: 47.99rem) { .tips__grid { grid-template-columns: minmax(0, 1fr); } }

/* Platters action bar: two buttons, Plan a tray first */
@media (max-width: 47.99rem) { .bar.bar--two { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   2026-10-24 design pass, part C: two photo frames, code-drawn.
   Scroll print: a warm washi mat with a soft deckle edge (the mask cuts the mat only, never the
   photo), a vermilion hanko seal with the item number where there is one, a soft paper shadow.
   Bento frame: the lacquer-black of the shop's own trays with a thin gold hairline, never tilted.
   Every photo inside a frame shows at its own proportions: no frame crops food.
   ===================================================================== */
:root {
  --washi: #f3e8d3;
  --washi-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='392' height='392' fill='%23000' filter='url(%23d)'/%3E%3C/svg%3E");
  --mat: clamp(.55rem, 1.2vw, .85rem);
  --paper-shadow: 0 1px 2px rgba(60, 40, 20, .12), 0 18px 34px -20px rgba(60, 40, 20, .45);
  --paper-shadow-lift: 0 2px 4px rgba(60, 40, 20, .14), 0 28px 44px -22px rgba(60, 40, 20, .52);
  --lacquer: #1c1a17;
  --lacquer-2: #2c2723;
  --gold: #c9a24a;
  --bento-pad: .45rem;
  --bento-shadow: 0 1px 2px rgba(20, 14, 8, .2), 0 14px 26px -18px rgba(20, 14, 8, .6);
  --bento-shadow-lift: 0 2px 4px rgba(20, 14, 8, .22), 0 24px 34px -18px rgba(20, 14, 8, .62);
  --frame-lift: -3px;
}

/* ---------- Scroll print ---------- */
.frame-scroll { position: relative; isolation: isolate; display: block; margin: 0; padding: var(--mat) var(--mat) calc(var(--mat) * 1.7); border-radius: 3px; box-shadow: var(--paper-shadow); transition: translate .25s var(--ease-ink), box-shadow .25s var(--ease-ink); }
.frame-scroll::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--washi); background-image: var(--washi-noise); -webkit-mask: var(--deckle) 0 0 / 100% 100% no-repeat; mask: var(--deckle) 0 0 / 100% 100% no-repeat; }
.frame-scroll picture { display: contents; }
.frame-scroll picture > img { display: block; width: 100%; height: auto; border-radius: 1px; }
.frame-scroll:hover, .frame-scroll:focus-within { translate: 0 var(--frame-lift); box-shadow: var(--paper-shadow-lift); }
.hanko-seal { position: absolute; z-index: 3; right: calc(var(--mat) * -.7); bottom: calc(var(--mat) * -.4); display: grid; place-items: center; min-width: 3rem; height: 3rem; padding: 0 .4rem; background: var(--orange); color: var(--ivory); font: 800 1.0625rem/1 var(--font); letter-spacing: -.01em; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(255, 247, 232, .55), 0 3px 8px rgba(60, 20, 10, .25); rotate: -6deg; pointer-events: none; }

/* each photo at its own proportions inside the mat (earlier crops: 6/5, 5/4, 4/5, scale 1.22) */
.frame-scroll .appetite__image { aspect-ratio: 1600 / 1671; object-fit: cover; border: 0; border-radius: 1px !important; box-shadow: none; rotate: 0deg; }
.appetite__photo.frame-scroll { rotate: -.8deg; }
.frame-scroll .first-visit__photo { aspect-ratio: 1200 / 455; border: 0; border-radius: 1px; box-shadow: none; rotate: 0deg; }
.sips__cups.frame-scroll { transform: none; rotate: -1.5deg; }
.sips__cups.frame-scroll picture { background: none; padding: 0; box-shadow: none; transform: none; }
.sips__cups.frame-scroll picture::before { display: none; }
.sips__cups.frame-scroll img { aspect-ratio: 1400 / 1529; border-radius: 1px; }
.about-hero__media.frame-scroll img { aspect-ratio: 1600 / 1878; border-radius: 1px; }
.press__media.frame-scroll { background: none; rotate: -1deg; }
.press__media.frame-scroll img { aspect-ratio: 1600 / 1878; }
.item__media.frame-scroll picture { display: contents; overflow: visible; border-radius: 0; }
.item__media.frame-scroll .item__img { aspect-ratio: 552 / 416; transform: none; border-radius: 1px; }
.item__media .hanko-seal { top: auto; left: auto; min-width: 3.4rem; height: 3.4rem; font-size: 1.1875rem; transform: none; }
.share__media--print { aspect-ratio: auto; width: min(100%, 620px); }
.share__media--print img { aspect-ratio: 1600 / 1671; }
.home .share__media--print img { aspect-ratio: 1600 / 1596; }
.home .share__media--print .share__spot { left: -9%; bottom: -9%; width: 26%; }
@media (max-width: 47.99rem) { .home .share__media--print .share__spot { left: -.75rem; bottom: -1.75rem; width: 4.75rem; } }

/* ---------- Bento frame ---------- */
.frame-bento { position: relative; display: block; padding: var(--bento-pad); background: linear-gradient(160deg, var(--lacquer-2), var(--lacquer) 55%); border-radius: 12px; box-shadow: var(--bento-shadow); transition: translate .22s var(--ease-ink), box-shadow .22s var(--ease-ink); }
.frame-bento::after { content: ""; position: absolute; inset: calc(var(--bento-pad) / 2 - .5px); border: 1px solid var(--gold); border-radius: 9px; opacity: .9; pointer-events: none; }
.frame-bento picture > img { display: block; width: 100%; height: auto; aspect-ratio: 552 / 416; object-fit: cover; border-radius: 6px; }
.menu-cat .card__media.frame-bento, .menu-cat .card:nth-child(even) .card__media.frame-bento { padding: var(--bento-pad); background: linear-gradient(160deg, var(--lacquer-2), var(--lacquer) 55%); border-radius: 12px; box-shadow: var(--bento-shadow); rotate: 0deg; }
.menu-cat .card:hover .card__media.frame-bento, .menu-cat .card:focus-within .card__media.frame-bento,
.mix__card:hover .frame-bento, .mix__card:focus-visible .frame-bento,
.pick__link:hover .pick__media.frame-bento, .pick__link:focus-visible .pick__media.frame-bento { rotate: 0deg; translate: 0 var(--frame-lift); box-shadow: var(--bento-shadow-lift); }
.pick__media.frame-bento, .pick:nth-child(even) .pick__media.frame-bento { padding: var(--bento-pad); background: linear-gradient(160deg, var(--lacquer-2), var(--lacquer) 55%); rotate: 0deg; }
@media (max-width: 47.99rem) { :root { --bento-pad: .32rem; } .menu-cat .card__media.frame-bento { padding: var(--bento-pad); } }
@media (prefers-reduced-motion: reduce) {
  .frame-scroll, .frame-bento { transition: none; }
  .frame-scroll:hover, .frame-scroll:focus-within, .menu-cat .card:hover .card__media.frame-bento, .menu-cat .card:focus-within .card__media.frame-bento, .mix__card:hover .frame-bento, .pick__link:hover .pick__media.frame-bento { translate: none; }
}
@media (forced-colors: active) { .frame-scroll::before, .frame-bento::after { display: none; } .frame-bento { border: 1px solid CanvasText; } }

/* =====================================================================
   2026-10-24 design pass, part D: the hanging gallery (Home shop prints, From the shop).
   Two gently sagging strings on wide screens; one sideways strip on phones. Code-drawn wooden
   pegs, white prints with a thicker captioned foot, tilts within ±4°, paper lanterns that glow
   on the shared 6 s tide and warm a little after 5pm local time (ambient only). Prints settle
   with one small sway when they arrive; pointing at one lifts and straightens it.
   ===================================================================== */
:root {
  --string: #8a7a63; --sag: 1.5rem; --string-top: .3rem;
  --peg-w: min(100%, 15rem); --peg-pad: .55rem;
  --wood-a: #c99a62; --wood-b: #a8743f; --spring: #6f6a63;
  --lantern-paper: #f3d6a6; --lantern-rib: rgba(150, 90, 40, .35); --lantern-cap: #3a2c22;
  --lantern-glow: rgba(255, 196, 110, .55); --lantern-glow-max: .65; --lantern-glow-min: .3;
}
.is-evening { --lantern-paper: #ffcf86; --lantern-glow: rgba(255, 170, 70, .7); --lantern-glow-max: .9; --lantern-glow-min: .45; }
.lines { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.lines:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.line { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); }
.line__string { position: absolute; inset: 0 0 auto; height: calc(var(--sag) * 1.25); pointer-events: none; }
.line__string svg { display: block; width: 100%; height: 100%; overflow: visible; }
.line__string path { fill: none; stroke: var(--string); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.peg { position: relative; justify-self: center; width: var(--peg-w); padding-top: calc(var(--string-top) + var(--sag) * var(--u4)); }
.peg__pin { position: absolute; z-index: 2; left: 50%; top: calc(var(--string-top) + var(--sag) * var(--u4) - .55rem); width: .7rem; height: 1.6rem; translate: -50% 0; border-radius: 2px 2px 3px 3px; background: linear-gradient(90deg, var(--wood-b), var(--wood-a) 45%, var(--wood-b)); box-shadow: 0 2px 3px rgba(40, 24, 10, .35); }
.peg__pin::after { content: ""; position: absolute; left: -2px; right: -2px; top: 42%; height: 3px; border-radius: 2px; background: var(--spring); }
.peg__print { display: block; margin: 0; padding: var(--peg-pad) var(--peg-pad) 0; background: var(--white); color: var(--ink); text-decoration: none; border-radius: 2px; box-shadow: 0 1px 2px rgba(20, 24, 58, .16), 0 14px 26px -14px rgba(20, 24, 58, .42); transform: rotate(var(--tilt)); transform-origin: 50% 0; transition: transform .28s var(--ease-ink), box-shadow .28s var(--ease-ink); }
.peg__print img { display: block; width: 100%; height: auto; }
.peg__cap { display: block; padding: .6rem .2rem .85rem; text-align: center; font: 600 1rem/1.25 var(--serif); color: var(--blue); }
.peg__foot { display: block; height: 2.7rem; }
.peg__print:hover, .peg__print:focus-visible, .peg:focus-within .peg__print { transform: translateY(-4px) rotate(0deg); box-shadow: 0 2px 4px rgba(20, 24, 58, .18), 0 22px 34px -16px rgba(20, 24, 58, .5); }
a.peg__print:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
/* paper lanterns along the string */
.lantern { position: absolute; z-index: 1; left: var(--x); top: calc(var(--string-top) + var(--sag) * var(--u4)); width: .95rem; height: 1.2rem; translate: -50% 0; border-radius: 45%; background: repeating-linear-gradient(180deg, var(--lantern-paper) 0 3px, var(--lantern-rib) 3px 4px); box-shadow: inset 0 3px 0 -1px var(--lantern-cap), inset 0 -3px 0 -1px var(--lantern-cap); }
.lantern::after { content: ""; position: absolute; inset: -.9rem; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--lantern-glow), transparent 68%); opacity: var(--lantern-glow-max); }
.motion-ready .lantern::after { animation: lantern-glow var(--tide) ease-in-out infinite; animation-delay: calc(var(--j) * var(--tide) / -5); }
@keyframes lantern-glow { 0%, 100% { opacity: var(--lantern-glow-max); } 50% { opacity: var(--lantern-glow-min); } }
.motion-paused .lantern::after { animation-play-state: paused; }
/* one small sway as the prints arrive, then still */
@keyframes peg-settle { 0% { transform: rotate(calc(var(--tilt) + 4deg)); } 40% { transform: rotate(calc(var(--tilt) - 2.2deg)); } 70% { transform: rotate(calc(var(--tilt) + .9deg)); } 100% { transform: rotate(var(--tilt)); } }
.ml-on:not(.motion-paused) .line.is-up .peg__print { animation: peg-settle 1.3s var(--ease-ink) calc(var(--i) * 90ms) both; }
.ml-on:not(.motion-paused) .line.is-up .peg__print:hover, .ml-on:not(.motion-paused) .line.is-up .peg__print:focus-visible { animation: none; }
/* Home: the gallery spans the shop section under its introduction */
.shop__gallery { grid-column: 1 / -1; padding-top: var(--s4); }
.shop__body { grid-column: 1 / -1; max-width: 46rem; }
/* phones: the strings become one strip that scrolls sideways, each print snapping into place */
@media (max-width: 47.99rem) {
  :root { --peg-w: 62vw; --sag: 1.1rem; }
  .lines { display: flex; gap: 0; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
  .line { flex: none; display: flex; gap: var(--s5); padding-right: var(--s5); }
  .peg { flex: none; scroll-snap-align: center; }
  .shop__gallery { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .peg__print { transition: none; }
  .peg__print:hover, .peg__print:focus-visible, .peg:focus-within .peg__print { transform: rotate(var(--tilt)); }
  .lantern::after { animation: none !important; }
}
@media (forced-colors: active) { .lantern, .peg__pin { display: none; } }

/* =====================================================================
   2026-10-25 launch: the price line beside every price list
   ===================================================================== */
.price-note { margin: var(--s3) 0 0; font: 600 .9375rem/1.45 var(--font); color: var(--muted); }
.item__body .price-note { margin: calc(var(--s2) * -1) 0 var(--s4); }

/* =====================================================================
   2026-10-25 launch: the platter request form opens the visitor's own email to Jay's
   ===================================================================== */
.inquiry__privacy { margin: var(--s4) 0 0; font: 500 .9375rem/1.45 var(--font); color: var(--muted); }
.inquiry__status:focus { outline: 0; }
.inquiry__result { margin: var(--s5) 0 0; padding: var(--s4) var(--s5); border-left: 4px solid var(--blue); background: var(--white); font: 700 1.0625rem/1.5 var(--font); color: var(--ink); max-width: 40rem; }
.inquiry__result--error { border-left-color: var(--orange); }
.inquiry__result a { color: var(--blue); }
.inquiry__call { margin: var(--s3) 0 0; font: 600 1rem/1.45 var(--font); }
.inquiry__call a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-weight: 800; }