/* 2026-10-06 playful pass: real photo prints, stickers, string lights, review notes, live map.
   Loaded after reference-redesign.css. Decoration never carries information. */
:root { --night: #14183a; --night-2: #1f2556; --glow: #ffd68a; --tape: rgba(245, 196, 164, .85); --print-pad: clamp(.5rem, 1vw, .75rem); --shadow: 0 1px 2px rgba(20,24,58,.18), 0 12px 28px -10px rgba(20,24,58,.35); }

/* Spacing: one vertical rhythm; fix fixed-height desktop rows that clipped captions */
.editorial { grid-auto-rows: auto !important; align-items: start; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); position: relative; }
.section-head .display { margin-bottom: 0; }
.discover, .share, .shop, .sips, .reviews, .visit { padding-block: clamp(4rem, 8vw, 7.5rem); }
.shop { padding-top: 0; }
.shop__grid { padding-top: clamp(2.5rem, 5vw, 4rem); row-gap: clamp(2rem, 4vw, 3rem); }
.fish-lane { height: clamp(4rem, 7vw, 6rem); }

/* Photos as real prints: white border, soft shadow, slight tilt, washi tape */
.tile picture, .shop__detail picture, .sips__cups picture, .sips__cake picture { display: block; background: var(--white); padding: var(--print-pad); padding-bottom: calc(var(--print-pad) * 3.5); box-shadow: var(--shadow); position: relative; }
.tile img, .tile--b img, .tile--c img { border-radius: 4px !important; aspect-ratio: 4 / 3.2; }
.tile--a picture { transform: rotate(-2deg); }
.tile--b picture { transform: rotate(1.5deg); }
.tile--c picture { transform: rotate(-1deg); }
.tile picture::before, .shop__detail picture::before, .sips__cups picture::before, .sips__cake picture::before { content: ""; position: absolute; z-index: 2; top: -.7rem; left: 50%; width: 5.5rem; height: 1.5rem; translate: -50% 0; rotate: -4deg; background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tile--b picture::before { background: rgba(255, 247, 232, .9); rotate: 5deg; }
.home .tile:hover img { transform: none; }
.home .tile picture { transition: transform .3s ease; }
.home .tile:hover picture { transform: rotate(0) translateY(-6px); }
.tile__caption { padding-top: var(--s5); }
.shop__detail picture img, .sips__cups img, .sips__cake img { border-radius: 3px; }

.sips__cups, .sips__cake { transform: none; }
.sips__cups picture { transform: rotate(-3deg); }
.sips__cake picture { transform: rotate(3deg); }
.shop__detail figcaption { margin-top: var(--s3); text-align: center; font: 600 1.0625rem/1.3 var(--serif); color: var(--blue); }

/* Hero photo: rounded print with tape, sticker, hand-drawn arrow and sparkles */
.appetite__image { border-radius: 1.75rem !important; border: var(--print-pad) solid var(--white); box-shadow: var(--shadow); rotate: 1.5deg; }
.tape { position: absolute; z-index: 3; width: 6.5rem; height: 1.6rem; background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.08); pointer-events: none; }
.tape--tl { top: -.6rem; left: 8%; rotate: -12deg; }
.tape--tr { top: -.6rem; right: 8%; rotate: 10deg; }

.sticker { position: absolute; z-index: 4; display: grid; place-items: center; width: clamp(6.5rem, 10vw, 8.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--orange); color: var(--ivory); text-align: center; font: 800 clamp(.75rem, 1vw, .875rem)/1.15 var(--font); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 0 0 4px var(--ivory), 0 0 0 6px var(--orange), var(--shadow); rotate: 12deg; pointer-events: none; }
.sticker--hero { top: -1.75rem; right: -1rem; }
.sticker--discover { top: 0; right: 0; background: var(--peach); color: var(--blue-dark); box-shadow: 0 0 0 4px var(--blue), 0 0 0 6px var(--peach); rotate: -10deg; font-size: 1rem; }
.discover .section-head { max-width: none; padding-right: 10rem; }

/* 2026-10-13: hero arrow and sparkles retired (motif consolidation); their duplicate twinkle keyframes went with them */
/* 2026-10-24: the sticker rests; the sushi rain is the one moment in the welcome */

/* Instagram: a night section that stops the scroll. Prints hang on a string, fairy lights glow behind. */

@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.motion-paused .sticker--hero { animation-play-state: paused; }

/* Reviews: the reviewers' own words as editorial pull quotes */
.reviews { position: relative; }
.reviews__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s6); }
.reviews__spot { width: clamp(8rem, 16vw, 13rem); height: auto; rotate: -8deg; }
.ratings { margin-top: var(--s5); }
.pulls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem); margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.pull { position: relative; margin: 0; padding: var(--s6) 0 0 clamp(2.25rem, 4vw, 3.5rem); border: 0; border-top: 1px solid var(--rule); outline: 0; background: none; }
.pull:first-child { grid-column: 1 / -1; }
.pull__mark { position: absolute; left: 0; top: var(--s4); font: 700 clamp(4rem, 7vw, 6rem)/.8 var(--serif); color: var(--orange); }
.pull blockquote { margin: 0; }
.pull blockquote p { margin: 0; max-width: 34ch; font: 600 clamp(1.5rem, 2.4vw, 2.125rem)/1.18 var(--serif); letter-spacing: -.01em; color: var(--blue); text-wrap: balance; }
.pull:first-child blockquote p { max-width: 30ch; font-size: clamp(1.875rem, 3.6vw, 3.25rem); }
.quote__by { margin: var(--s4) 0 0; font: 500 .875rem/1.5 var(--font); color: var(--muted); }
.quote__name { font-weight: 800; color: var(--ink); }
.quote__by a { color: var(--muted); text-underline-offset: .2em; }
.reviews__invite { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* Visit: the live map, framed like a print */
.visit__map { position: relative; margin: clamp(2.5rem, 5vw, 4rem) 0 0; background: var(--white); padding: var(--print-pad); padding-bottom: 0; box-shadow: 0 20px 40px -18px rgba(0,0,0,.55); }
.visit__map iframe { display: block; width: 100%; height: clamp(18rem, 40vw, 28rem); border: 0; }
.visit__map figcaption { padding: var(--s3) var(--s2); color: var(--ink); font: 500 .9375rem/1.5 var(--font); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); }
.visit__map figcaption a { color: var(--blue); font-weight: 800; }
.visit .visit__map :focus-visible { outline-color: var(--orange); }
/* The map stacks over a plain fallback card (address and a Maps link). An empty frame is
   transparent, so the card shows until the embed paints; site.js keeps its link usable until then. */
.visit__map-frame { display: grid; }
.visit__map-frame > * { grid-area: 1 / 1; }
.visit__map-frame iframe { position: relative; z-index: 1; }
.map-fallback { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s3); padding: var(--s5); background: var(--ivory); color: var(--ink); }
.map-fallback p { margin: 0; }
.map-fallback__name { font: 700 clamp(1.5rem, 3vw, 2rem)/1.1 var(--serif); color: var(--blue); }
.map-fallback__addr { font: 600 1.0625rem/1.45 var(--font); }
.map-fallback__note { font: 500 .9375rem/1.5 var(--font); color: var(--muted); max-width: 34ch; }
.map-fallback__go { margin-top: var(--s2); }
.map-fallback:focus-within, .map--waiting .map-fallback, .map--failed .map-fallback { z-index: 2; }
.map--failed iframe { visibility: hidden; }

@media (max-width: 47.99rem) {
  .discover .section-head { padding-right: 0; }
  .sticker--discover { position: relative; display: grid; margin-top: var(--s5); width: 6rem; font-size: .8125rem; }
  .sticker--hero { right: .25rem; top: -1.25rem; width: 6rem; font-size: .6875rem; }

  .editorial { gap: var(--s7); }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .reviews__spot { display: none; }
  .pulls { grid-template-columns: minmax(0, 1fr); }

  .visit__map { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker--hero { animation: none !important; }
  .home .tile:hover picture { transform: none; }
}
@media (forced-colors: active) { .tape { display: none; } }

/* Inspection fixes, 2026-10-06 evening */
.rating { outline: 0; }
.rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); background: var(--white); padding: var(--s3) var(--s5); border-radius: var(--stamp-radius); box-shadow: var(--shadow); text-decoration: none; }
.rating:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.rating__num { font: 700 2.5rem/1 var(--serif); }
.rating__go { flex-basis: 100%; font: 800 .75rem/1.4 var(--font); letter-spacing: .08em; text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 47.99rem) {
  .appetite { padding-bottom: var(--s6); }

}

/* 2026-10-09 Visit board: an ivory shop card on the blue section. Facts sit in a
   2 by 2 grid, hours stay next to their days, reviews run as a strip along the foot. */
.visit .board--visit { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border: 0; outline: 0; background: var(--ivory); color: var(--ink); box-shadow: 0 28px 50px -24px rgba(8, 16, 40, .7); }
.visit .board--visit::before { content: ""; display: block; position: absolute; inset: .5rem; border: 1px solid var(--blue); opacity: .3; pointer-events: none; }
.visit .board--visit::after { display: none; }
.visit .board--visit .board__row { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--s3); text-align: left; padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 0; border-bottom: 1px solid var(--rule-light); }
.visit .board--visit .board__row:nth-child(odd):not(.board__row--wide) { border-right: 1px solid var(--rule-light); }
.visit .board--visit .board__row--wide { grid-column: 1 / -1; }
.visit .board--visit .board__row:last-child { border-bottom: 0; }
.visit .board--visit .tab { display: inline-flex; align-items: center; gap: .6rem; background: none; color: var(--orange); padding: 0; box-shadow: none; transform: none; border-radius: 0; font: 800 .75rem/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.visit .board--visit .tab::before { content: ""; width: .5rem; height: .5rem; background: currentColor; rotate: 45deg; flex: none; }
.visit .board--visit dd { margin: 0; color: var(--ink); font: 700 clamp(1.25rem, 1.9vw, 1.5rem)/1.3 var(--font); letter-spacing: -.01em; }
.visit .board--visit dd a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.visit .board--visit dd a:hover { color: var(--orange); }
.visit .board--visit .board__sub, .visit .board--visit .board__sub a { color: var(--muted); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.visit .board--visit .board__sub a { color: var(--blue); font-weight: 700; text-decoration-thickness: 1px; }
.visit .board--visit .board__row--phone dd { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-variant-numeric: tabular-nums; }
.visit .board--visit .hours { max-width: 19rem; font-size: 1.0625rem; font-weight: 500; }
.visit .board--visit .hours li { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; border: 0; }
.visit .board--visit .hours li span:first-child { font-weight: 800; white-space: nowrap; }
.visit .board--visit .hours li::after { content: ""; flex: 1; order: 1; min-width: 1rem; border-bottom: 2px dotted var(--rule); translate: 0 -.3em; }
.visit .board--visit .hours li span:last-child { order: 2; }

.visit .board--visit :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (max-width: 35.99rem) {
  .visit .board--visit { grid-template-columns: minmax(0, 1fr); }
  .visit .board--visit .board__row:nth-child(odd):not(.board__row--wide) { border-right: 0; }

}

/* 2026-10-09 Fish: each lane swims in its own colors. Decorative only. */
.fish-lane { --fish-a: var(--orange); --fin-a: var(--peach); --fish-b: var(--blue); --fin-b: var(--peach); --gill: var(--ivory); --eye: var(--ivory); --dots: var(--blue); }
.fish-lane .swimmer--one { color: var(--fish-a); --fin: var(--fin-a); }
.fish-lane .swimmer--two { color: var(--fish-b); --fin: var(--fin-b); }
.fish-lane .fish__fin { fill: var(--fin); }
.fish-lane .fish__gill { stroke: var(--gill); }
.fish-lane .fish__eye { fill: var(--eye); }
.fish-lane .fish-lane__dots { color: var(--dots); }
/* After the hero: vermilion and navy, the house colors */
.fish-lane--sunrise { }
/* Before Instagram: golden koi and a black koi with gold fins */
.fish-lane--koi { --fish-a: #d9961f; --fin-a: var(--orange); --fish-b: var(--ink); --fin-b: #e9b450; --dots: var(--orange); }
/* Before Visit: sea green and coral, heading toward the blue section */
.fish-lane--lagoon { --fish-a: #1f7a70; --fin-a: #a8dbd1; --fish-b: #e2735a; --fin-b: var(--blue); --dots: #1f7a70; }

/* 2026-10-09 lively pass (after the ChatGPT review). Every effect is decorative,
   pauses with the Pause control and is still under reduced motion. */

/* Fish: tails wag while they swim */
.fish-lane .fish__tail { fill: currentColor; transform-box: view-box; transform-origin: 32px 32px; }
.motion-ready .fish-lane .fish__tail { animation: tail-wag .7s ease-in-out infinite alternate; }
.motion-ready .fish-lane .swimmer--two .fish__tail { animation-duration: .55s; }
@keyframes tail-wag { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* Platters: the chopsticks roll into place when the section arrives */
.motion-ready .share__media.is-seen .share__spot { animation: chop-settle .7s cubic-bezier(.2, 1.3, .4, 1) .15s both; }
@keyframes chop-settle { from { opacity: 0; translate: -2.5rem .5rem; rotate: -14deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* Get directions: a small arrow that leans forward on hover and focus */
.btn--go { gap: .5rem; }
.btn__arrow { display: inline-block; transition: translate .16s cubic-bezier(.22, 1, .36, 1); }
.btn--go:hover .btn__arrow, .btn--go:focus-visible .btn__arrow { translate: 4px 0; }

/* Instagram at night: smaller, softer glows so the prints and bulbs lead */

.motion-paused .fish__tail { animation-play-state: paused; }
/* One-time entrances jump to their resting state when paused, so nothing is left invisible */
.motion-paused .sticker--hero, .motion-paused .share__spot { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fish__tail, .sticker--hero, .share__spot { animation: none !important; }
  .btn__arrow { transition: none; }
  .btn--go:hover .btn__arrow, .btn--go:focus-visible .btn__arrow { translate: none; }
}