/* ==========================================================================
   MOSHIMO — site shell
   Tokens, chrome (header · draw · fab · footer), components, motion.
   Mobile-first. Designed at 412px; desktop is an adaptation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour — from the brand guidelines. Paper is the default ground
     everywhere; ink is emphasis only. */
  --red:        #D7202A;   /* Pantone 186 C — the signal */
  --red-deep:   #B81A23;   /* pressed state only, never a fill */
  --ink:        #16161A;
  --paper:      #F4F1EA;
  --charcoal:   #545454;   /* quiet UI, secondary labels */
  --grey:       #7D7A74;   /* captions and fine print only */
  --hairline:   rgba(22, 22, 26, 0.14);
  --scrim:      rgba(22, 22, 26, 0.50);

  /* On-ink variants */
  --paper-80:   rgba(244, 241, 234, 0.82);
  --paper-45:   rgba(244, 241, 234, 0.45);
  --paper-10:   rgba(244, 241, 234, 0.10);

  /* Type */
  --font-display: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-jp:      'Yuji Syuku', 'Hiragino Mincho ProN', serif;

  /* Layout */
  --frame:  412px;   /* the design width */
  --gutter: 24px;
  --header-h: 41px;

  /* Motion — 150–250ms, ease-out. Feedback, never entertainment. */
  --ease:      cubic-bezier(.2, .7, .3, 1);
  --dur-fast:  150ms;
  --dur:       200ms;
  --dur-slow:  250ms;
  --dur-draw:  320ms;
  --stagger:   30ms;   /* draw items */
  --belt-step: 80ms;   /* the belt turning */
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }

/* Content column. The design width is the baseline; desktop widens modestly.
   Full desktop layouts are page-level work, not shell work. */
.wrap {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :focus-visible, .draw :focus-visible { outline-color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  /* Fixed, not absolute: an ancestor without overflow:hidden would otherwise
     let this show on the page. It belongs off-viewport until tabbed to. */
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 90;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 18px; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. THE BELT STRIP
   Seven red blocks · 10px squares · 5px gaps · 2px radius. One size only.
   Seven blocks = seven plates on the belt. Never varies.
   -------------------------------------------------------------------------- */
.belt { display: flex; gap: 5px; justify-content: center; }
.belt i { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--red); }
.belt--start { justify-content: flex-start; }

/* The belt turning — once per page, on load. Signature motion. */
@media (prefers-reduced-motion: no-preference) {
  .belt--load i { opacity: 0; transform: translateY(4px); animation: belt-turn 500ms var(--ease) forwards; }
  .belt--load i:nth-child(1) { animation-delay: calc(var(--belt-step) * 0); }
  .belt--load i:nth-child(2) { animation-delay: calc(var(--belt-step) * 1); }
  .belt--load i:nth-child(3) { animation-delay: calc(var(--belt-step) * 2); }
  .belt--load i:nth-child(4) { animation-delay: calc(var(--belt-step) * 3); }
  .belt--load i:nth-child(5) { animation-delay: calc(var(--belt-step) * 4); }
  .belt--load i:nth-child(6) { animation-delay: calc(var(--belt-step) * 5); }
  .belt--load i:nth-child(7) { animation-delay: calc(var(--belt-step) * 6); }
  @keyframes belt-turn { to { opacity: 1; transform: translateY(0); } }
}

/* --------------------------------------------------------------------------
   5. HEADER
   Hamburger left · three icons right · wordmark optically centred.
   Fixed, always visible.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--paper);
}
.site-header__inner {
  position: relative;
  width: 100%; max-width: var(--frame);
  margin-inline: auto;
  padding: 11px 22px 12px;
  display: flex; align-items: center; justify-content: space-between;
}

.burger { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.burger span {
  display: block; width: 24px; height: 2.4px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger:active span { background: var(--red); }

/* Wordmark — seven red blocks. Optically centred on the frame. */
.wordmark {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; gap: 2px;
  text-decoration: none;
}
.wordmark span {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-size: 13px; line-height: 1;
}
/* Reverse lockup — white blocks, red letters. For dark or busy grounds.
   Red on red fails; never use the standard mark on a red field. */
.wordmark--reverse span { background: #fff; color: var(--red); }

.site-header__icons { display: flex; gap: 15px; align-items: center; }
.site-header__icons a { display: flex; opacity: .85; transition: opacity var(--dur-fast) var(--ease); }
.site-header__icons a:hover { opacity: 1; }
.site-header__icons a:active { color: var(--red); opacity: 1; }
.site-header__icons svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Spacer so fixed header never sits over content */
.header-space { height: var(--header-h); }

/* --------------------------------------------------------------------------
   6. THE DRAW
   Slides from the left over a scrim. Items stagger in ~30ms apart.
   Book Now is deliberately not in the list — the button is always on screen.
   -------------------------------------------------------------------------- */
.draw-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: var(--scrim);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}
.draw-scrim.is-open { opacity: 1; pointer-events: auto; }

.draw {
  position: fixed; top: 0; left: 0; z-index: 55;
  width: 320px; max-width: 86%; height: 100%;
  background: var(--ink); color: var(--paper);
  padding: 24px 24px 30px;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform var(--dur-draw) var(--ease);
  visibility: hidden;
}
.draw.is-open { transform: translateX(0); visibility: visible; }

.draw__close {
  position: absolute; top: 20px; right: 22px;
  font-size: 24px; line-height: 1; color: var(--paper);
  padding: 4px 6px;
}
.draw .belt { margin-bottom: 26px; }

.draw__group {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
  margin: 22px 0 2px;
}
.draw__group:first-of-type { margin-top: 0; }

.draw__link {
  position: relative;
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-10);
  color: var(--paper); text-decoration: none;
  font-family: var(--font-display);
}
.draw__link .jp { font-family: var(--font-jp); font-size: 15px; color: var(--red); font-weight: 400; }

.draw__link--lead { font-size: 19px; }
.draw__link--door { font-size: 17px; }
.draw__link--sub {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: rgba(244, 241, 234, .88);
  padding-left: 22px;
}
/* Left-edge marker wipes in from the leading edge */
.draw__link--sub::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px; background: var(--red);
  transform: translateY(-50%) scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.draw__link--sub:hover::before,
.draw__link--sub:focus-visible::before,
.draw__link--sub:active::before { transform: translateY(-50%) scaleX(1); }
.draw__link:active { color: var(--red); }

.draw__sig {
  margin-top: auto; padding-top: 28px;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-45); line-height: 1.6;
}

/* Staggered entry, ~30ms apart */
@media (prefers-reduced-motion: no-preference) {
  .draw__group, .draw__link, .draw__sig {
    opacity: 0; transform: translateX(-10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .draw.is-open .draw__group,
  .draw.is-open .draw__link,
  .draw.is-open .draw__sig {
    opacity: 1; transform: translateX(0);
    transition-delay: calc(var(--stagger) * var(--i, 0) + 60ms);
  }
}

/* --------------------------------------------------------------------------
   7. PERSISTENT BOOK NOW
   Red pill, low-centre in thumb reach. Appears once the portal scrolls away,
   hands over to the footer button rather than doubling up.
   -------------------------------------------------------------------------- */
.book-fab {
  position: fixed; left: 50%; bottom: 20px; z-index: 45;
  transform: translate(-50%, 26px);
  background: var(--red); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .12em;
  padding: 9px 22px; border-radius: 40px;
  box-shadow: 0 6px 18px rgba(215, 32, 42, .32);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
/* The sentinel needs real area, or IntersectionObserver never reports a crossing. */
[data-fab-after] { height: 1px; }

.book-fab.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.book-fab:active { transform: translate(-50%, 0) scale(.97); background: var(--red-deep); }

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 34px var(--gutter) 40px;
  text-align: center;
  max-width: var(--frame); margin-inline: auto;
}
.site-footer .belt { margin-bottom: 20px; }
.site-footer__sig {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.7;
}
.site-footer__addr {
  font-size: 11.5px; color: var(--grey); line-height: 1.6; margin-top: 14px;
}
.site-footer__addr a { color: var(--grey); text-decoration: none; }
.site-footer__addr a:hover { color: var(--ink); }

.book-static {
  display: inline-block; margin-top: 30px;
  background: var(--red); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .12em;
  padding: 9px 22px; border-radius: 40px;
  box-shadow: 0 6px 18px rgba(215, 32, 42, .32);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.book-static:active { transform: scale(.97); background: var(--red-deep); }

/* --------------------------------------------------------------------------
   9. COMPONENTS
   -------------------------------------------------------------------------- */

/* Page title */
.ptitle { padding: 26px var(--gutter) 6px; max-width: var(--frame); margin-inline: auto; }
.ptitle__kicker {
  font-family: var(--font-display); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.ptitle h1 {
  font-family: var(--font-display); font-size: 34px; line-height: 1.02;
  margin-top: 8px; display: flex; align-items: baseline; gap: 11px;
}
.ptitle h1 .jp { font-family: var(--font-jp); color: var(--red); font-size: 28px; font-weight: 400; }

/* Text blocks */
.blk { padding: 16px var(--gutter); max-width: var(--frame); margin-inline: auto; }
.lead { font-size: 14.5px; line-height: 1.62; }
.lead--big { font-size: 16px; line-height: 1.55; }
.body-copy { font-size: 13.5px; line-height: 1.68; margin-top: 12px; color: #26262B; }
.body-copy b { font-weight: 700; }
.eyebrow {
  font-family: var(--font-display); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 22px 0 8px;
}
.small { font-size: 11.5px; color: var(--grey); line-height: 1.55; }

/* Emphasis ground — ink. Hero moments only. */
.dark-blk {
  background: var(--ink); color: var(--paper);
  padding: 30px var(--gutter); text-align: center;
  max-width: var(--frame); margin-inline: auto;
}
.dark-blk h2 { font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.dark-blk h2 em { font-style: normal; color: var(--red); }
.dark-blk p { font-size: 13px; line-height: 1.6; color: var(--paper-80); margin-top: 12px; }

/* Buttons — press-down to .97, red deepens. Physical, not floaty. */
.btn {
  display: flex; align-items: center; justify-content: space-between;
  border: 2px solid var(--ink); padding: 14px 18px; margin-bottom: 10px;
  color: var(--ink); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn__label { font-family: var(--font-display); font-size: 14.5px; }
.btn__sub { font-size: 11px; color: var(--grey); margin-top: 2px; }
.btn__arrow { font-family: var(--font-display); font-size: 19px; color: var(--red); }
.btn:active { transform: scale(.97); }

.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red .btn__sub { color: rgba(255, 255, 255, .8); }
.btn--red .btn__arrow { color: #fff; }
.btn--red:active { background: var(--red-deep); border-color: var(--red-deep); }

.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid .btn__sub { color: rgba(244, 241, 234, .6); }

/* Door cards — the label shifts red and the rule expands from centre.
   It should feel like the door opening. */
.door-card {
  position: relative; display: block;
  border-top: 2px solid var(--ink);
  padding: 20px 2px 22px;
  color: var(--ink); text-decoration: none;
}
.door-card:last-of-type { border-bottom: 2px solid var(--ink); }
.door-card__row { display: flex; align-items: baseline; gap: 12px; }
.door-card .jp { font-family: var(--font-jp); font-size: 30px; color: var(--red); line-height: 1; font-weight: 400; }
.door-card__en { font-family: var(--font-display); font-size: 26px; transition: color var(--dur-fast) var(--ease); }
.door-card__arrow { margin-left: auto; font-family: var(--font-display); font-size: 24px; color: var(--red); line-height: 1; }
.door-card__sub { font-size: 13px; line-height: 1.55; color: var(--grey); margin-top: 9px; padding-right: 20px; }
.door-card__rule {
  position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px; background: var(--red);
  transform: translateX(-50%);
  transition: width var(--dur-slow) var(--ease);
}
.door-card:active .door-card__en,
.door-card.is-opening .door-card__en { color: var(--red); }
.door-card.is-opening .door-card__rule { width: 100%; }

/* List rows — red underline wipes in from the leading edge */
.row-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
  color: var(--ink); text-decoration: none; font-size: 13px;
}
.row-link::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.row-link:hover::after, .row-link:focus-visible::after, .row-link:active::after { transform: scaleX(1); }

/* Nugget — the brush character callout */
.nugget {
  border-top: 2px solid var(--red);
  padding: 11px 2px 12px; margin: 18px 0 4px;
  display: flex; gap: 11px; align-items: flex-start;
  background: linear-gradient(rgba(215, 32, 42, .035), rgba(215, 32, 42, 0));
}
.nugget .jp { font-family: var(--font-jp); font-size: 24px; line-height: 1; color: var(--red); padding-top: 2px; flex: 0 0 auto; font-weight: 400; }
.nugget__label {
  font-family: var(--font-display); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  margin-bottom: 4px;
}
.nugget__text { font-size: 12px; line-height: 1.5; }

/* Plate rows — colour-coded belt pricing */
.plate {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.plate:last-child { border-bottom: none; }
.plate__dot { width: 15px; height: 15px; border-radius: 3px; flex: 0 0 15px; border: 1px solid rgba(0, 0, 0, .12); }
.plate__price { margin-left: auto; font-family: var(--font-display); font-size: 13px; }

/* Media placeholders — every image is a labelled slot. Labels are the shot list. */
.ph {
  border: 1px solid var(--hairline);
  background: repeating-linear-gradient(45deg,
    rgba(22, 22, 26, .02) 0 10px,
    rgba(22, 22, 26, .05) 10px 20px);
  display: flex; align-items: center; justify-content: center;
  color: var(--grey); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; text-align: center; padding: 6px;
}
.ph--wide  { width: 100%; height: 132px; margin: 14px 0 2px; }
.ph--strip { width: 100%; height: 96px;  margin: 12px 0 2px; }
.ph--half  { height: 104px; }
.ph--169   { width: 100%; aspect-ratio: 16 / 9; margin: 14px 0 2px; }
.ph-pair { display: flex; gap: 8px; margin: 14px 0 2px; }
.ph-pair .ph { flex: 1; }
.caption { font-size: 10px; color: var(--grey); margin-top: 5px; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   10. MOTION
   Section reveals fade up 12–16px, staggered. Page transitions cross-fade.
   Nothing here may delay content appearing.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  [data-reveal].is-in { opacity: 1; transform: translateY(0); }

  body { animation: page-in var(--dur-slow) var(--ease) both; }
  body.is-leaving { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
  @keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Reduced motion — instant state changes throughout, never a broken layout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11. DESKTOP ADAPTATION
   Mobile-first: everything was designed at 412px. This widens the shell
   sensibly; page-level desktop layouts are still to be designed.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   12. PAGE COMPONENTS
   Layer one and layer two. Proportions from the approved layouts.
   -------------------------------------------------------------------------- */

/* Portal — the first screen of Home. Geisha, wordmark, three doors, Book Now.
   No scroll cue: the fold is the point. */
.portal {
  position: relative;
  height: min(calc(100vh - var(--header-h)), 682px);
  min-height: 600px;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--gutter); text-align: center;
  max-width: var(--frame); margin-inline: auto;
}
.portal__mark { width: 112px; height: 112px; margin-top: auto; display: block; }
.portal__wordmark { display: inline-flex; gap: 4px; margin-top: 132px; }
.portal__wordmark span {
  width: 34px; height: 37px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-size: 26px; line-height: 1;
}
.portal__doors {
  display: flex; justify-content: space-between;
  width: 100%; max-width: 277px; margin-top: 45px; margin-bottom: auto;
}
.portal__door {
  position: relative; flex: 1;
  text-decoration: none; color: var(--charcoal);
  padding-bottom: 10px;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 400ms var(--ease);
}
.portal__door .en {
  display: block;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--dur) var(--ease), letter-spacing var(--dur-slow) var(--ease);
}

/* The brush character sits behind the label and surfaces on approach.
   It is the door's own name, so it belongs to the door, not to the hover. */
.portal__door .jp {
  position: absolute; left: 50%; top: -26px;
  transform: translate(-50%, 5px);
  font-family: var(--font-jp); font-size: 21px; font-weight: 400;
  color: var(--red);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

/* The rule beneath — the same gesture as the door cards, at portal scale.
   Half width on approach, full width on select: the door coming open. */
.portal__door::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px; background: var(--red);
  transform: translateX(-50%);
  transition: width var(--dur-slow) var(--ease);
}

.portal__door:hover .en,
.portal__door:focus-visible .en { color: var(--red); letter-spacing: .085em; }
.portal__door:hover .jp,
.portal__door:focus-visible .jp { opacity: 1; transform: translate(-50%, 0); }
.portal__door:hover::after,
.portal__door:focus-visible::after { width: 46%; }

/* Selected: the rule completes, the character settles, everything else
   steps back so the chosen door is the only thing left lit. */
.portal__door.is-opening::after { width: 100%; }
.portal__door.is-opening .en { color: var(--red); }
.portal__door.is-opening .jp { opacity: 1; transform: translate(-50%, -2px); }
.portal__doors.is-choosing .portal__door:not(.is-opening) { opacity: .25; }
.portal__doors.is-choosing .portal__door { transition: opacity var(--dur-slow) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .portal__door { transform: none; }
  .portal__doors.is-choosing .portal__door:not(.is-opening) { opacity: 1; }
}
.portal__book { margin-top: 180px; text-decoration: none; }
.portal__book .pill {
  display: inline-block;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; line-height: 1;
  padding: 9px 22px; border-radius: 40px;
  box-shadow: 0 5px 16px rgba(22, 22, 26, .22);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.portal__book:active .pill { background: var(--red-deep); transform: scale(.97); }

/* Hero — landscape frame, then the copy in its own ink box */
.hero-frame {
  position: relative; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter); text-align: center;
  color: #fff; background: #1C1C20;
  overflow: hidden;
}
.hero-frame__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* A scrim through the middle band only. The deck is sunlit and the headline
   is white — without it the type sits on whatever the weather was doing. */
.hero-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(22,22,26,.10) 0%, rgba(22,22,26,.52) 42%,
    rgba(22,22,26,.52) 62%, rgba(22,22,26,.14) 100%);
}
.hero-frame > h2 { position: relative; z-index: 1; }
.hero-frame--tall { aspect-ratio: auto; height: 420px; align-items: flex-start; padding-top: 44px; }
.hero-frame h2 {
  font-family: var(--font-display); font-size: 30px; line-height: 1.06;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.hero-frame__ghost {
  position: absolute; left: 0; right: 0; bottom: 10px;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244, 241, 234, .4);
}
.hero-copy {
  background: var(--ink); color: var(--paper);
  padding: 28px var(--gutter) 32px; text-align: center;
  max-width: var(--frame); margin-inline: auto;
}
.hero-copy .belt { margin-bottom: 18px; }
.hero-copy p { font-size: 13px; line-height: 1.6; color: var(--paper-80); max-width: 300px; margin-inline: auto; }

/* Section heading above door cards */
.cards { padding: 44px 26px 20px; max-width: var(--frame); margin-inline: auto; }
.cards > h2 {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); text-align: center; margin-bottom: 24px;
}

/* Dish rows — Kitchen */
.dish { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.dish:last-child { border-bottom: none; }
.dish .ph, .dish__img { flex: 0 0 78px; width: 78px; height: 78px; margin: 0; object-fit: cover; border-radius: 2px; }
.dish__name { font-family: var(--font-display); font-size: 17px; }
.dish__desc { font-size: 11.5px; color: var(--grey); line-height: 1.45; margin-top: 4px; }

/* Red offer block — Club. Red as a field, used once, never behind fine print. */
.offer {
  background: var(--red); color: #fff; padding: 24px 22px; text-align: center;
  max-width: var(--frame); margin-inline: auto;
}
.offer__big { font-family: var(--font-display); font-size: 30px; line-height: 1.05; }
.offer__sub { font-size: 12.5px; margin-top: 6px; opacity: .92; }
.offer__rule { height: 1px; background: rgba(255, 255, 255, .4); margin: 16px 0; }

/* Membership card */
.member-card {
  width: 100%; aspect-ratio: 1.586 / 1;
  background: var(--ink); color: var(--paper);
  border-radius: 14px; padding: 20px 22px; position: relative;
}
.member-card__qr { position: absolute; top: 18px; right: 20px; width: 56px; height: 56px; background: #fff; border-radius: 10px; }
.member-card__jp { position: absolute; top: 20px; right: 86px; font-family: var(--font-jp); color: var(--red); font-size: 18px; font-weight: 400; }
.member-card__mark { display: inline-flex; gap: 2px; }
.member-card__mark span {
  width: 17px; height: 17px; display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font-family: var(--font-display); font-size: 12px; line-height: 1;
}
.member-card__label { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 241, 234, .55); margin-top: 14px; }
.member-card__no { font-family: var(--font-display); font-size: 30px; margin-top: 2px; }
.member-card__foot { position: absolute; left: 22px; bottom: 13px; font-size: 8px; letter-spacing: .07em; line-height: 1.5; color: rgba(244, 241, 234, .6); }
.member-card__foot b { color: #fff; font-family: var(--font-display); }
.member-card__foot .sep { color: var(--red); }

/* Occasion rows — Venue */
.occ { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--hairline); }
.occ:last-of-type { border-bottom: 1px solid var(--hairline); }
.occ .jp { font-family: var(--font-jp); color: var(--red); font-size: 18px; flex: 0 0 24px; font-weight: 400; }
.occ__name { font-family: var(--font-display); font-size: 15px; }

/* Enquiry form */
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: 6px;
  padding: 13px 14px;
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--red); outline-offset: 1px; }
.form-submit {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: var(--red); color: #fff; border: 2px solid var(--red);
  padding: 15px 18px; margin-top: 4px;
  font-family: var(--font-display); font-size: 15px;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.form-submit:active { transform: scale(.97); background: var(--red-deep); }

/* Address / info blocks — Visit */
.info { margin-bottom: 22px; }
.info__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 6px; }
.info__value { font-size: 14px; line-height: 1.6; }
.info__value a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.info__value a:hover { border-color: var(--red); }

/* Extra placeholder shapes */
.ph--square { aspect-ratio: 1; width: 100%; }
.ph--map { width: 100%; height: 180px; margin-bottom: 22px; }
.ph--round { border-radius: 50%; }
.ph--geisha { width: 112px; height: 112px; border-radius: 50%; }


/* --------------------------------------------------------------------------
   13. CONTINUOUS SCROLL
   Layer one read as one page: portal, hero, then Kitchen · Club · Venue ·
   Us · Visit in order. The doors become jumps rather than page changes.
   -------------------------------------------------------------------------- */
.chapter { /* offset handled by scroll-padding-top on the root */ }

/* Chapter divider — the belt marks the seam between one door and the next.
   It is the only thing separating them, so it has to read as a boundary. */
.chapter__rule {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--frame); margin: 46px auto 0; padding: 0 var(--gutter);
}
.chapter__rule .belt { flex: 0 0 auto; }
.chapter__rule .ln { flex: 1; height: 1px; background: var(--hairline); }

/* In continuous scroll the page titles become chapter headings — same
   treatment, one step down in the document outline. */
.chapter .ptitle h2 {
  font-family: var(--font-display); font-size: 34px; line-height: 1.02;
  margin-top: 8px; display: flex; align-items: baseline; gap: 11px;
}
.chapter .ptitle h2 .jp { font-family: var(--font-jp); color: var(--red); font-size: 28px; font-weight: 400; }

/* Back to top — appears once you're deep in the scroll. */
.to-top {
  position: fixed; right: 16px; bottom: 20px; z-index: 44;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.to-top.is-visible { opacity: .9; pointer-events: auto; transform: translateY(0); }
.to-top:hover { opacity: 1; }


/* --------------------------------------------------------------------------
   14. NAVIGATION PROMPTS
   Two jobs: say the page continues, and say which way. Both prompt once and
   then stop — a cue that never settles reads as decoration, not direction.
   -------------------------------------------------------------------------- */

/* Portal cue — the long scroll needs to declare itself, or the fold looks
   like the end of the site. Bobs three times, then rests. Gone once you move. */
.scroll-cue {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  color: var(--red); opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.scroll-cue svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-cue.is-on { opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue.is-on { animation: cue-bob 2.4s var(--ease) 3; }
  @keyframes cue-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
  }
}

/* Seam arrow — sits in the belt divider between chapters and nudges twice as
   the seam comes into view: keep going, there's another door below. */
.chapter__next {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--red); text-decoration: none;
  border: 1px solid var(--hairline);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chapter__next svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chapter__next:hover { background: rgba(215, 32, 42, .07); border-color: var(--red); transform: translateY(2px); }
@media (prefers-reduced-motion: no-preference) {
  .chapter__next.nudge { animation: seam-nudge .9s var(--ease) 2; }
  @keyframes seam-nudge {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(5px); }
  }
}

/* --------------------------------------------------------------------------
   15. HOVER
   Desktop had press states but nothing on approach. A small lift, matching
   the weight of everything else here.
   -------------------------------------------------------------------------- */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.book-static:hover, .book-fab:hover { transform: translate(-50%, 0) translateY(-2px); }
.book-static:hover { transform: translateY(-2px); }
.book-fab.is-visible:hover { transform: translate(-50%, -2px); }
.book-static:active { transform: scale(.97); background: var(--red-deep); }
.book-fab:active { transform: translate(-50%, 0) scale(.97); background: var(--red-deep); }
.to-top:hover { transform: translateY(-2px); opacity: 1; }


/* --------------------------------------------------------------------------
   17. CHAPTER SETTLE
   Snapping is done in JS (see moshimo.js) rather than with scroll-snap-type:
   proximity snap was too weak to feel like anything, and mandatory snap fought
   you halfway down a chapter. The JS version settles onto a door only once
   you've stopped scrolling near one.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18. THE MENU
   112 items. Long by nature, so it's built to be navigated rather than read:
   a sticky section jump bar, then generous sections with sketch slots.
   -------------------------------------------------------------------------- */

/* Jump bar — sticks under the header, scrolls horizontally on a phone. */
.menu-jump {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.menu-jump__inner {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 9px var(--gutter);
  max-width: var(--frame); margin-inline: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.menu-jump__inner::-webkit-scrollbar { display: none; }
.menu-jump a {
  flex: 0 0 auto;
  font-family: var(--font-display); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none;
  padding: 6px 11px; border: 1px solid var(--hairline); border-radius: 40px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.menu-jump a:hover, .menu-jump a.is-here { color: var(--red); border-color: var(--red); }

/* Course — a menu section */
.course { padding: 26px var(--gutter) 4px; max-width: var(--frame); margin-inline: auto; scroll-margin-top: 92px; }
.course__head { display: flex; align-items: baseline; gap: 10px; }
.course__jp { font-family: var(--font-jp); font-size: 21px; color: var(--red); font-weight: 400; }
.course__en { font-family: var(--font-display); font-size: 21px; line-height: 1.1; }
.course__note { font-size: 12px; color: var(--grey); line-height: 1.5; margin-top: 6px; }
/* Menu artwork. The illustrations are watercolour on a warm paper ground
   that already matches --paper, so they sit on the page without a frame.
   Portrait pieces are capped by height, or a phone would show one drawing
   and nothing else. */
.course__art { margin: 16px auto 6px; text-align: center; max-width: var(--frame); }
.course__art img {
  width: 100%; height: auto;
  margin-inline: auto; border-radius: 2px;
}
/* Portrait pieces are capped so one drawing never fills the screen. Capping
   by width (not viewport height) keeps every illustration the same measure. */
.course__art img[width="1122"], .course__art img[width="1123"],
.course__art img[width="1086"] { max-width: 74%; }
@media (min-width: 768px) {
  .course__art img[width="1122"], .course__art img[width="1123"],
  .course__art img[width="1086"] { max-width: 56%; }
}

/* Group label — "Nigiri (2 pieces)" and the like */
.course__group {
  font-family: var(--font-display); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  margin: 20px 0 2px;
}

/* Item row — leaders between name and price, as on the printed menu. */
.item { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.item:last-child { border-bottom: none; }
.item__line { display: flex; align-items: baseline; gap: 6px; }
.item__name { font-size: 13.5px; font-weight: 600; }
.item__leader { flex: 1 1 auto; border-bottom: 1px dotted var(--hairline); transform: translateY(-3px); min-width: 12px; }
.item__price { font-family: var(--font-display); font-size: 13px; white-space: nowrap; }
.item__desc { font-size: 11.5px; line-height: 1.5; color: var(--grey); margin-top: 3px; padding-right: 46px; }

/* Vegan mark — the orange plate is always vegan, so the belt already
   teaches this colour. Reuse it rather than inventing a new signal. */
.vgn {
  display: inline-block; margin-left: 6px;
  font-family: var(--font-display); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #B85E18; border: 1px solid rgba(184, 94, 24, .45);
  border-radius: 3px; padding: 1px 4px; vertical-align: 1px;
}

/* Belt plate key */
.plate-key { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin-top: 12px; }
@media (max-width: 420px) { .plate-key { grid-template-columns: 1fr; } }

@media (min-width: 768px) {
  .course__jp, .course__en { font-size: 26px; }
  .item__name { font-size: 15px; }
  .item__desc { font-size: 12.5px; }
  .item__price { font-size: 14px; }
  .course { scroll-margin-top: 104px; }
}


/* Photographs in page slots. Same footprint the placeholders had, so the
   layout is unchanged as real images replace labelled boxes. */
.photo { margin: 14px auto 2px; max-width: var(--frame); }
/* Only pad when the photo sits on its own; inside a text block the block
   already provides the gutter, and doubling it misaligns image and text. */
.chapter > .photo, main > .photo, .route > .photo { padding-inline: var(--gutter); }
.photo img { width: 100%; height: auto; border-radius: 2px; display: block; }


/* --------------------------------------------------------------------------
   19. MEMBERSHIP CARD
   Both faces, side by side where there's room, stacked on a phone.
   -------------------------------------------------------------------------- */
.cards-pair { display: grid; gap: 12px; margin: 16px 0 4px; }
.card-face img {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(22, 22, 26, .13);
}
@media (min-width: 700px) {
  .cards-pair { grid-template-columns: 1fr 1fr; gap: 16px; }
}


/* --------------------------------------------------------------------------
   20. THE DOOR OPENING
   On a phone your finger covers the label, so the old red-underline had
   nothing left to show. Instead the whole screen answers: the brush character
   blooms from the centre over a red wash, then the page changes.
   -------------------------------------------------------------------------- */
.door-bloom {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--red);
  opacity: 0; pointer-events: none;
  clip-path: circle(0% at var(--bx, 50%) var(--by, 50%));
  transition: clip-path 420ms var(--ease), opacity 200ms var(--ease);
}
.door-bloom.is-open {
  opacity: 1;
  clip-path: circle(150% at var(--bx, 50%) var(--by, 50%));
}
.door-bloom__jp {
  font-family: var(--font-jp); font-weight: 400;
  font-size: clamp(96px, 34vw, 200px); line-height: 1;
  color: #fff;
  transform: scale(.72); opacity: 0;
  transition: transform 380ms var(--ease), opacity 260ms var(--ease);
  transition-delay: 90ms;
}
.door-bloom.is-open .door-bloom__jp { transform: scale(1); opacity: 1; }
/* The word sits directly under the character, as one unit, rather than
   floating near the foot of the screen. */
.door-bloom { flex-direction: column; gap: 10px; }
.door-bloom__en {
  font-family: var(--font-display); font-size: 15px;
  letter-spacing: .22em; text-transform: uppercase; color: #fff;
  opacity: 0; transition: opacity 240ms var(--ease); transition-delay: 200ms;
}
.door-bloom.is-open .door-bloom__en { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .door-bloom, .door-bloom__jp, .door-bloom__en { transition: none; }
}

/* ==========================================================================
   RESPONSIVE — last in the file so it wins over the base sizes above.
   Mobile-first: 412px is the designed width; these widen it for tablet
   and desktop rather than redesigning the layout.
   ========================================================================== */

/* iPad portrait and up */
@media (min-width: 768px) {
  :root { --frame: 600px; --gutter: 32px; --header-h: 47px; }
  body { font-size: 15px; }

  .site-header__inner { padding: 14px 26px 15px; }
  .wordmark span { width: 21px; height: 21px; font-size: 15px; }
  .site-header__icons svg { width: 20px; height: 20px; }
  .burger span { width: 27px; }

  .portal { height: min(calc(100vh - var(--header-h)), 760px); }
  .portal__mark { width: 140px; height: 140px; }
  .portal__wordmark { gap: 5px; }
  .portal__wordmark span { width: 42px; height: 46px; font-size: 32px; }
  .portal__doors { max-width: 360px; margin-top: 52px; }
  .portal__door .en { font-size: 15px; }
  .portal__door .jp { font-size: 25px; top: -30px; }

  .hero-frame h2 { font-size: 40px; }
  .hero-copy { padding: 36px var(--gutter) 40px; }
  .hero-copy p { font-size: 14.5px; max-width: 400px; }

  .ptitle h1, .chapter .ptitle h2 { font-size: 46px; }
  .ptitle h1 .jp, .chapter .ptitle h2 .jp { font-size: 38px; }
  .lead { font-size: 16px; }
  .lead--big { font-size: 19px; }
  .body-copy { font-size: 15px; }
  .eyebrow { font-size: 13px; }

  .door-card__en { font-size: 32px; }
  .door-card .jp { font-size: 36px; }
  .door-card__sub { font-size: 14.5px; }
  .btn { padding: 17px 22px; }
  .btn__label { font-size: 16.5px; }
  .dish .ph, .dish__img { flex: 0 0 104px; width: 104px; height: 104px; }
  .dish__name { font-size: 19px; }

  .ph--wide  { height: 200px; }
  .ph--strip { height: 150px; }
  .ph--half  { height: 150px; }
  .ph--map   { height: 260px; }
  .ph--geisha { width: 140px; height: 140px; }
  .ph { font-size: 10px; }

  .offer__big { font-size: 38px; }
  .draw { width: 380px; padding: 30px 30px 34px; }
  .draw__link--lead { font-size: 22px; }
  .draw__link--door { font-size: 19px; }
  .draw__link--sub  { font-size: 15px; }
  .book-fab, .book-static { font-size: 12px; padding: 11px 26px; }

  .course__jp, .course__en { font-size: 26px; }
  .item__name { font-size: 15px; }
  .item__desc { font-size: 12.5px; }
  .item__price { font-size: 14px; }
  .course { scroll-margin-top: 104px; }
}

/* Desktop */
@media (min-width: 1100px) {
  :root { --frame: 720px; --gutter: 40px; }
  body { font-size: 16px; }

  .portal { height: min(calc(100vh - var(--header-h)), 820px); }
  .portal__mark { width: 160px; height: 160px; }
  .portal__wordmark span { width: 50px; height: 54px; font-size: 38px; }
  .portal__doors { max-width: 420px; }
  .portal__door .en { font-size: 16px; }

  .hero-frame h2 { font-size: 52px; }
  .ptitle h1, .chapter .ptitle h2 { font-size: 56px; }
  .ptitle h1 .jp, .chapter .ptitle h2 .jp { font-size: 46px; }
  .lead--big { font-size: 21px; }
  .body-copy { font-size: 15.5px; }
  .door-card__en { font-size: 38px; }
  .door-card .jp { font-size: 42px; }

  .ph--wide  { height: 250px; }
  .ph--strip { height: 190px; }
  .ph--half  { height: 190px; }
  .ph--map   { height: 320px; }
  .ph-pair { gap: 12px; }
  .offer__big { font-size: 46px; }
}


/* --------------------------------------------------------------------------
   21. STACKED HERO
   Two frames: the deck, then the belt with the line across the top of it.
   The belt photograph is used exactly as supplied — no scrim, no darkening.
   The caption band measures a mean luminance of 49, so white type reads
   cleanly; a shadow on the text handles the few bright bokeh spots without
   touching the image itself.
   -------------------------------------------------------------------------- */
/* The hero sits in the content column like everything else — never wider
   than the measure, so desktop reads as a page rather than a billboard. */
.hero-stack { display: block; max-width: var(--frame); margin-inline: auto; padding: 0 var(--gutter); }
.hero-pane { position: relative; display: block; }
.hero-pane img {
  width: 100%; height: auto; display: block;
  /* Pinned, so nothing downstream can stretch the frame. */
  aspect-ratio: 16 / 9; object-fit: cover;
}
/* A gradient only across the band the line sits in — the rest of the
   photograph is untouched. */
.hero-pane--caption::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(22,22,26,.62) 0%, rgba(22,22,26,.42) 60%, rgba(22,22,26,0) 100%);
  pointer-events: none;
}
.hero-pane--caption figcaption {
  z-index: 1;
  position: absolute; left: 0; right: 0; top: 6%;
  padding: 0 var(--gutter); text-align: center;
  font-family: var(--font-display); color: #fff;
  font-size: 26px; line-height: 1.12;
  text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}
@media (min-width: 768px) { /* A gradient only across the band the line sits in — the rest of the
   photograph is untouched. */
.hero-pane--caption::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(22,22,26,.62) 0%, rgba(22,22,26,.42) 60%, rgba(22,22,26,0) 100%);
  pointer-events: none;
}
.hero-pane--caption figcaption {
  z-index: 1; font-size: 38px; top: 7%; } }
@media (min-width: 1100px) { /* A gradient only across the band the line sits in — the rest of the
   photograph is untouched. */
.hero-pane--caption::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(22,22,26,.62) 0%, rgba(22,22,26,.42) 60%, rgba(22,22,26,0) 100%);
  pointer-events: none;
}
.hero-pane--caption figcaption {
  z-index: 1; font-size: 50px; } }


/* Drink pairing line on the deck menu */
.item__pair {
  font-size: 11.5px; line-height: 1.5; color: var(--charcoal);
  margin-top: 4px; padding-left: 0;
}
.item__pair span {
  font-family: var(--font-display); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
  margin-right: 6px;
}
@media (min-width: 768px) { .item__pair { font-size: 12.5px; } }


/* Any image or block dropped straight into a chapter still respects the column. */
.chapter > .ph, .chapter > figure, .chapter > .cards-pair {
  max-width: var(--frame); margin-inline: auto;
}

/* --------------------------------------------------------------------------
   PORTAL LAYOUT — revision 12 Oct
   Wordmark 10% smaller and centred on the screen, the three doors following
   at their usual distance below it. The geisha lifted 1cm from where she sat.
   The small header wordmark is removed on Home only (index.html).
   -------------------------------------------------------------------------- */
.portal {
  --pw-h: 33px;          /* wordmark block height (was 37) */
  --pw-gap: 45px;        /* wordmark to doors, unchanged */
  --pm: 112px;           /* geisha size, unchanged */
  --pg: 357px;           /* the old stack height, to find where she sat */
  --ph: max(600px, min(100vh - var(--header-h), 682px));
}
.portal__mark {
  position: absolute; left: 50%; margin: 0;
  width: var(--pm); height: var(--pm);
  top: calc((var(--ph) - var(--pg)) / 2 - 1cm);
  transform: translateX(-50%);
}
.portal__wordmark {
  position: absolute; left: 50%; margin: 0; gap: 3.6px;
  top: calc(50vh - var(--header-h));
  top: calc(50svh - var(--header-h));
  transform: translate(-50%, -50%);
}
.portal__wordmark span { width: 30.6px; height: var(--pw-h); font-size: 23.4px; }
.portal__doors {
  position: absolute; left: 50%; margin: 0;
  width: calc(100% - 2 * var(--gutter));
  top: calc(50vh - var(--header-h) + var(--pw-h) / 2 + var(--pw-gap));
  top: calc(50svh - var(--header-h) + var(--pw-h) / 2 + var(--pw-gap));
  transform: translateX(-50%);
}
.portal__doors.is-choosing, .portal__doors { transform: translateX(-50%); }

@media (min-width: 768px) {
  .portal { --pw-h: 41.4px; --pw-gap: 52px; --pm: 140px; --pg: 404px;
            --ph: max(600px, min(100vh - var(--header-h), 760px)); }
  .portal__wordmark { gap: 4.5px; }
  .portal__wordmark span { width: 37.8px; font-size: 28.8px; }
}
@media (min-width: 1100px) {
  .portal { --pw-h: 48.6px; --pm: 160px; --pg: 434px;
            --ph: max(600px, min(100vh - var(--header-h), 820px)); }
  .portal__wordmark span { width: 45px; font-size: 34.2px; }
}

/* Geisha centred in the space between the top of the screen and the
   wordmark: equal gap above and below her. */
.portal__mark {
  top: calc((50vh - var(--pw-h) / 2 - var(--pm)) / 2 - var(--header-h));
  top: calc((50svh - var(--pw-h) / 2 - var(--pm)) / 2 - var(--header-h));
}

/* The portal fills the screen exactly, so the photo below never peeks in. */
.portal { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); max-height: none; }
@media (min-width: 768px)  { .portal { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); } }
@media (min-width: 1100px) { .portal { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); } }

/* The photo runs the same width as the dark band beneath it: edge to edge on
   a phone, the full frame on desktop. */
.hero-stack { padding: 0; }

/* Membership — a fourth door, centred under the three, same type. Links to
   the Moshimo Club chapter. "Four ways in" heading removed (index.html). */
.portal__doors { flex-wrap: wrap; }
.portal__break { flex: 0 0 100%; height: 0; }
.portal__door--member { flex: 0 0 auto; margin: 34px auto 0; }
@media (min-width: 768px) { .portal__door--member { margin-top: 40px; } }
/* Membership gap matched to the MOSHIMO-to-doors gap, measured letter to letter. */
.portal__door--member { margin-top: 32px; }
@media (min-width: 768px)  { .portal__door--member { margin-top: 38.7px; } }
@media (min-width: 1100px) { .portal__door--member { margin-top: 38.1px; } }

/* Door labels zoom instead of wobbling. The letter-spacing change and the
   lean toward the pointer are gone; the word scales up from its centre,
   so nothing around it moves. Colour, brush character and rule unchanged. */
.portal__door { transform: none; }
.portal__door .en {
  letter-spacing: .06em;
  transform: scale(1); transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: color var(--dur) var(--ease), transform 320ms var(--ease);
}
.portal__door:hover .en,
.portal__door:focus-visible .en,
.portal__door.is-opening .en { letter-spacing: .06em; transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .portal__door .en { transform: none !important; }
}

/* Membership set like the "MOSHIMO CLUB ·" label: Archivo Black, brand red,
   capitals, open tracking. Zooms on hover like the other doors. */
.portal__door--member .en,
.portal__door--member:hover .en,
.portal__door--member:focus-visible .en,
.portal__door--member.is-opening .en {
  font-family: var(--font-display); color: var(--red);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ==========================================================================
   HOME AS PAGES — revision 12 Oct
   Every screen of Home is its own page and snaps into place. The browser
   does the snapping natively, so it moves with your finger and lands clean.
   ========================================================================== */
html.home-pages { scroll-snap-type: y mandatory; scroll-padding-top: var(--header-h); }
html.home-pages .portal { scroll-snap-align: start; scroll-snap-stop: always; }
html.home-pages .site-footer { scroll-snap-align: end; }

.pg {
  --pg-top: 20px; --pg-bot: 76px;           /* bottom clears the Book Now pill */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pg-top) 0 var(--pg-bot);
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden;
}
@media (min-width: 768px) { .pg { --pg-top: 28px; --pg-bot: 88px; } }
.pg__in { width: 100%; padding-top: 0; padding-bottom: 0; }
.atom { display: flow-root; }
.pg .ptitle { padding: 0 0 6px; }
.pg .photo { margin-top: 10px; }

/* The banner page: photo, the dark band, and room for the pictures to come */
.pg--banner { justify-content: flex-start; padding: 0; }
.pg--banner .hero-stack, .pg--banner .hero-copy { width: 100%; }
.banner-slots { flex: 1; display: flex; gap: 8px; padding: 8px var(--gutter) var(--pg-bot); max-width: var(--frame); width: 100%; margin-inline: auto; }
.banner-slots .ph { flex: 1; height: auto; min-height: 120px; margin: 0; }

/* --------------------------------------------------------------------------
   PAGES SETTLING IN — each kind of thing arrives its own way, staggered
   down the page. Only with JS running and motion allowed.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg {
    --land: cubic-bezier(.16, 1, .3, 1);      /* long, quiet settle */
    --stamp: cubic-bezier(.34, 1.4, .64, 1);  /* a brush stamp, one small overshoot */
    --d: calc(var(--k, 0) * 90ms + 60ms);     /* stagger by position on the page */
  }
  /* Resting state off-page: no transition, so the reset is invisible */

  /* Titles: the brush character stamps down, the word rises out of a mask */
  .js-pages .pg .ptitle h2 .jp { display: inline-block; transition: transform 700ms var(--stamp) var(--d), opacity 300ms ease var(--d); }
  .js-pages .pg:not(.is-on) .ptitle h2 .jp { transform: scale(.4) rotate(-10deg); opacity: 0; }
  .js-pages .pg .ptitle h2 { transition: clip-path 800ms var(--land) calc(var(--d) + 120ms), transform 800ms var(--land) calc(var(--d) + 120ms); clip-path: inset(-20% -10% -20% -10%); }
  .js-pages .pg:not(.is-on) .ptitle h2 { clip-path: inset(-20% -10% 100% -10%); transform: translateY(40%); }

  /* Kickers and eyebrows: drawn on left to right, like a brush line.
     (Layout never changes while things animate, so the snap stays exact.) */
  .js-pages .pg .ptitle__kicker, .js-pages .pg .eyebrow { transition: clip-path 900ms var(--land) var(--d), transform 900ms var(--land) var(--d); clip-path: inset(-20% -5% -20% 0); }
  .js-pages .pg:not(.is-on) .ptitle__kicker, .js-pages .pg:not(.is-on) .eyebrow { clip-path: inset(-20% 100% -20% 0); transform: translateX(-10px); }

  /* Leads lift; body copy comes up out of a soft focus */
  .js-pages .pg .lead { transition: transform 800ms var(--land) var(--d), opacity 600ms ease var(--d); }
  .js-pages .pg:not(.is-on) .lead { transform: translateY(26px); opacity: 0; }
  .js-pages .pg .body-copy, .js-pages .pg .small, .js-pages .pg .info__value { transition: transform 700ms var(--land) var(--d), opacity 600ms ease var(--d), filter 600ms ease var(--d); }
  .js-pages .pg:not(.is-on) .body-copy, .js-pages .pg:not(.is-on) .small, .js-pages .pg:not(.is-on) .info__value { transform: translateY(12px); opacity: 0; filter: blur(4px); }

  /* Pictures open from the centre while the image eases back */
  .js-pages .pg .photo, .js-pages .pg .course__art, .js-pages .pg .ph, .js-pages .pg .cards-pair { transition: clip-path 1000ms var(--land) var(--d), opacity 300ms ease var(--d); clip-path: inset(0 0 0 0); }
  .js-pages .pg:not(.is-on) .photo, .js-pages .pg:not(.is-on) .course__art, .js-pages .pg:not(.is-on) .ph, .js-pages .pg:not(.is-on) .cards-pair { clip-path: inset(10% 14% 10% 14%); opacity: 0; }
  .js-pages .pg .photo img, .js-pages .pg .course__art img { transition: transform 1400ms var(--land) var(--d); }
  .js-pages .pg:not(.is-on) .photo img, .js-pages .pg:not(.is-on) .course__art img { transform: scale(1.14); }

  /* Nuggets slide in from the left, their character stamps */
  .js-pages .pg .nugget { transition: transform 800ms var(--land) var(--d), opacity 500ms ease var(--d); }
  .js-pages .pg:not(.is-on) .nugget { transform: translateX(-28px); opacity: 0; }
  .js-pages .pg .nugget .jp { display: inline-block; transition: transform 700ms var(--stamp) calc(var(--d) + 160ms), opacity 300ms ease calc(var(--d) + 160ms); }
  .js-pages .pg:not(.is-on) .nugget .jp { transform: scale(.5); opacity: 0; }

  /* Lists: buttons slide in from the right, rows fall into line, one by one */
  .js-pages .pg .btn { transition: transform 700ms var(--land) calc(var(--d) + var(--j, 0) * 80ms), opacity 500ms ease calc(var(--d) + var(--j, 0) * 80ms), background var(--dur-fast) var(--ease); }
  .js-pages .pg:not(.is-on) .btn { transform: translateX(40px); opacity: 0; }
  .js-pages .pg .occ, .js-pages .pg .info { transition: transform 600ms var(--land) calc(var(--d) + var(--j, 0) * 70ms), opacity 500ms ease calc(var(--d) + var(--j, 0) * 70ms); }
  .js-pages .pg:not(.is-on) .occ, .js-pages .pg:not(.is-on) .info { transform: translateY(14px); opacity: 0; }
  .js-pages .pg .dish { transition: transform 700ms var(--land) calc(var(--d) + var(--j, 0) * 90ms), opacity 500ms ease calc(var(--d) + var(--j, 0) * 90ms); }
  .js-pages .pg:not(.is-on) .dish { transform: translateX(-30px); opacity: 0; }

  /* The red offer: the price drops in and the line follows */
  .js-pages .pg .offer__big { transition: transform 800ms var(--stamp) var(--d), opacity 400ms ease var(--d); }
  .js-pages .pg:not(.is-on) .offer__big { transform: translateY(-18px) scale(1.08); opacity: 0; }
  .js-pages .pg .offer__sub { transition: opacity 600ms ease calc(var(--d) + 250ms); }
  .js-pages .pg:not(.is-on) .offer__sub { opacity: 0; }

  /* The banner page: photo opens, the band's words come up, slots follow */
  .js-pages .pg--banner .hero-pane img { transition: clip-path 1100ms var(--land) 60ms, transform 1500ms var(--land) 60ms; clip-path: inset(0); }
  .js-pages .pg--banner:not(.is-on) .hero-pane img { clip-path: inset(0 0 100% 0); transform: scale(1.1); }
  .js-pages .pg--banner .hero-copy p { transition: transform 800ms var(--land) 420ms, opacity 600ms ease 420ms; }
  .js-pages .pg--banner:not(.is-on) .hero-copy p { transform: translateY(16px); opacity: 0; }
  .js-pages .pg--banner .banner-slots .ph { transition: opacity 700ms ease 600ms, transform 800ms var(--land) 600ms; }
  .js-pages .pg--banner:not(.is-on) .banner-slots .ph { opacity: 0; transform: translateY(20px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg--banner:not(.is-on) .belt--load i { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   STRAPLINE — "BRIGHTON · SINCE 2000" under the wordmark, set to the
   wordmark's width. Libre Franklin 700, 0.09em tracking, ink, red interpunct.
   The doors move down to make room, keeping their usual gap below it.
   -------------------------------------------------------------------------- */
.portal { --sg: 14px; --sf: 13px; --sh: var(--sf); }
.portal__strap {
  position: absolute; left: 50%; margin: 0;
  top: calc(50vh - var(--header-h) + var(--pw-h) / 2 + var(--sg));
  top: calc(50svh - var(--header-h) + var(--pw-h) / 2 + var(--sg));
  transform: translateX(-50%);
  font-family: var(--font-body); font-weight: 700; font-size: var(--sf); line-height: 1;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; display: flex; align-items: center;
}
.portal__strap-dot { color: var(--red); margin: 0 .5em 0 .4em; }
.portal__doors {
  top: calc(50vh - var(--header-h) + var(--pw-h) / 2 + var(--sg) + var(--sh) + var(--pw-gap));
  top: calc(50svh - var(--header-h) + var(--pw-h) / 2 + var(--sg) + var(--sh) + var(--pw-gap));
}
@media (min-width: 768px)  { .portal { --sg: 16px; --sf: 16px; } }
@media (min-width: 1100px) { .portal { --sg: 18px; --sf: 19px; } }

/* Tiles: each letter sits in its own inner element so it can flip */
.portal__wordmark span { overflow: hidden; }
.portal__wordmark span i { display: block; font-style: normal; line-height: 1; }
/* Sized so the strapline runs exactly the width of the tiles */
.portal { --sf: 16.4px; }
.portal__strap-w:last-child { margin-right: -.09em; }   /* trailing tracking off, so it centres true */
@media (min-width: 768px)  { .portal { --sf: 20.3px; } }
@media (min-width: 1100px) { .portal { --sf: 23.8px; } }
.portal__door--member { margin-top: 31px; }
@media (min-width: 768px)  { .portal__door--member { margin-top: 37.7px; } }
@media (min-width: 1100px) { .portal__door--member { margin-top: 37.1px; } }

/* Strapline 30% smaller, static under the wordmark (board animation parked) */
.portal { --sf: 11.5px; }
@media (min-width: 768px)  { .portal { --sf: 14.2px; } }
@media (min-width: 1100px) { .portal { --sf: 16.7px; } }

/* --------------------------------------------------------------------------
   PAGE 2 — the band below the photo goes onto paper, not black.
   BRIGHTON · SINCE 2000 sits centred under the belt blocks, then the
   independent / family-run lines, lifted from the menus.
   The strapline has moved here from the portal.
   -------------------------------------------------------------------------- */
.portal { --sg: 0px; --sh: 0px; }
.hero-copy { background: var(--paper); color: var(--ink); }
.hero-copy p { color: #26262B; }
.hero-copy .belt { margin-bottom: 14px; }
.strap {
  display: flex; justify-content: center; align-items: center;
  font-family: var(--font-body); font-weight: 700; font-size: 11.5px; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 18px;
}
.strap__dot { color: var(--red); margin: 0 .5em 0 .4em; }
.strap__w:last-child { margin-right: -.09em; }
.hero-copy__lead { font-weight: 600; }
.hero-copy p + p { margin-top: 8px; }
@media (min-width: 768px)  { .strap { font-size: 14.2px; margin-bottom: 22px; } }
@media (min-width: 1100px) { .strap { font-size: 16.7px; } }

@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg--banner .strap { transition: clip-path 900ms cubic-bezier(.16, 1, .3, 1) 300ms; clip-path: inset(-30% -5% -30% -5%); }
  .js-pages .pg--banner:not(.is-on) .strap { clip-path: inset(-30% 105% -30% -5%); }
  .js-pages .pg--banner .hero-copy p + p { transition-delay: 560ms; }
}
.banner-slots .ph { min-height: 60px; }
@media (min-width: 768px) { .pg--banner .hero-copy { padding: 28px var(--gutter) 26px; } }

/* --------------------------------------------------------------------------
   PAGE 2 — the membership advert from the menu, red ground, white type.
   Whole panel links to the Moshimo Club page section.
   -------------------------------------------------------------------------- */
.member-wrap { width: 100%; max-width: var(--frame); margin-inline: auto; padding: 0 var(--gutter) var(--pg-bot); }
.member-ad {
  display: block; text-decoration: none;
  background: var(--red); color: #fff;
  padding: 16px 18px 14px; border-radius: 2px;
}
.member-ad__head { font-family: var(--font-display); font-size: 17px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.member-ad__intro { font-size: 12.5px; line-height: 1.45; margin-top: 7px; }
.member-ad__intro b { font-weight: 700; }
.member-ad__offers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.4); }
.member-ad__big { font-family: var(--font-display); font-size: 17px; line-height: 1.08; }
.member-ad__when { font-size: 12px; margin-top: 4px; }
.member-ad__note { font-size: 9.5px; line-height: 1.4; margin-top: 10px; opacity: .9; }
.member-ad:active { background: var(--red-deep); }
@media (min-width: 768px) {
  .member-ad { padding: 22px 26px 18px; }
  .member-ad__head { font-size: 22px; }
  .member-ad__intro { font-size: 14px; }
  .member-ad__big { font-size: 26px; }
  .member-ad__when { font-size: 13.5px; }
  .member-ad__note { font-size: 11px; }
}
/* the band is a little tighter on a phone, so the advert fits the page */
.pg--banner .hero-copy { padding: 22px var(--gutter) 16px; }
@media (min-width: 768px) { .pg--banner .hero-copy { padding: 26px var(--gutter) 20px; } }

@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg--banner .member-ad { transition: transform 900ms cubic-bezier(.16, 1, .3, 1) 650ms, opacity 500ms ease 650ms; }
  .js-pages .pg--banner:not(.is-on) .member-ad { transform: translateY(30px); opacity: 0; }
  .js-pages .pg--banner .member-ad__big { transition: transform 700ms cubic-bezier(.34, 1.4, .64, 1) 900ms, opacity 400ms ease 900ms; }
  .js-pages .pg--banner .member-ad__offer + .member-ad__offer .member-ad__big { transition-delay: 1000ms; }
  .js-pages .pg--banner:not(.is-on) .member-ad__big { transform: translateY(-10px) scale(1.06); opacity: 0; }
}
/* Page 2 always fits one screen: the photo takes whatever height is left */
.pg--banner { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 0; }
.pg--banner .hero-stack { flex: 1 1 auto; min-height: 110px; position: relative; width: 100%; }
.pg--banner .hero-pane { position: absolute; inset: 0; }
.pg--banner .hero-pane img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 60%; }
.pg--banner .hero-copy, .pg--banner .member-wrap { flex: 0 0 auto; }

/* Membership advert: edge to edge on a phone, frame width on desktop.
   The intro line is gone; the small print is now the link to the full
   membership details on the Club page. */
.member-wrap { padding: 0 0 var(--pg-bot); }
.member-ad { border-radius: 0; padding: 16px var(--gutter) 14px; }
.member-ad__offers { margin-top: 10px; }
.member-ad__more {
  display: inline-block; margin-top: 11px;
  color: #fff; font-size: 11px; line-height: 1.4; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 1px;
}
.member-ad__more:hover { border-bottom-color: #fff; }
.member-ad__more span { display: inline-block; transition: transform var(--dur) var(--ease); }
.member-ad__more:hover span { transform: translateX(3px); }
@media (min-width: 768px) { .member-ad { padding: 22px 26px 18px; } .member-ad__more { font-size: 12.5px; } }

/* --------------------------------------------------------------------------
   LEAVING A PAGE — everything animates off as well as on. As a page moves
   more than half out of view its contents draw back quickly, all together,
   then come back in their own ways when you return.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg:not(.is-on) *, .js-pages .pg:not(.is-on) {
    transition-duration: 380ms !important;
    transition-delay: 0ms !important;
    transition-timing-function: cubic-bezier(.55, 0, .75, .2) !important;
  }
  /* until a page has been seen once, it waits hidden with no movement */
  .js-pages .pg:not(.was-on) *, .js-pages .pg:not(.was-on) { transition: none !important; }
}

/* Membership advert: one clickable block, everything centred.
   Phone: inset from the edges and squarer, offers stacked. */
.member-ad { text-align: center; transition: background var(--dur-fast) var(--ease), transform var(--dur) var(--ease); }
.member-ad:hover { background: var(--red-deep); }
.member-ad:hover .member-ad__more span { transform: translateX(3px); }
.member-wrap { padding: 0 var(--gutter) var(--pg-bot); }
.member-ad { border-radius: 3px; padding: 20px 18px 16px; }
.member-ad__offers { grid-template-columns: 1fr; gap: 10px; }
.member-ad__big { font-size: 19px; }
.member-ad__more { border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.55); }
@media (min-width: 768px) {
  .member-wrap { padding: 0 0 var(--pg-bot); }
  .member-ad { padding: 22px 26px 18px; }
  .member-ad__offers { grid-template-columns: 1fr 1fr; gap: 14px; }
  .member-ad__big { font-size: 26px; }
}

/* 50% off food runs the full width of the block, whatever the screen.
   Offers stacked on every size; T&Cs line removed. */
.member-ad { container-type: inline-size; }
.member-ad__offers { grid-template-columns: 1fr !important; gap: 10px; }
.member-ad__offer--hero .member-ad__big { font-size: 14.2cqi; line-height: 1; white-space: nowrap; }
.member-ad__offer--hero .member-ad__when { margin-top: 6px; }
.member-ad__offer--hero .member-ad__big { font-size: min(13.6cqi, 72px); }
.pg--banner .hero-stack { min-height: 70px; }

/* Membership block: zooms on hover instead of changing colour.
   Uses the separate `scale` property so it never fights the page animation.
   No rule under the title. */
.member-ad, .member-ad:hover, .member-ad:active { background: var(--red); }
.member-ad { transition: scale 450ms cubic-bezier(.16, 1, .3, 1); will-change: scale; }
.member-ad:hover, .member-ad:focus-visible { scale: 1.035; }
.member-ad:active { scale: 1.015; }
.member-ad__offers { border-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg--banner .member-ad { transition: transform 900ms cubic-bezier(.16, 1, .3, 1) 650ms, opacity 500ms ease 650ms, scale 450ms cubic-bezier(.16, 1, .3, 1) 0ms; }
}

/* Membership block hover: back to the colour change (deepens), no zoom.
   Door words: back to the single-word zoom on hover. */
.member-ad { cursor: pointer; scale: none; transition: background var(--dur-fast) var(--ease); }
.member-ad:hover, .member-ad:focus-visible { background: var(--red-deep); scale: none; }
.member-ad:active { background: var(--red-deep); scale: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg--banner .member-ad { transition: transform 900ms cubic-bezier(.16, 1, .3, 1) 650ms, opacity 500ms ease 650ms, background var(--dur-fast) var(--ease) 0ms; }
}

/* Membership block leads with JOIN THE CLUB; the rest packed in tighter */
.member-ad__head { font-size: 24px; letter-spacing: .03em; }
.member-ad__offers { margin-top: 6px; gap: 6px; }
.member-ad__offer--hero .member-ad__when { margin-top: 3px; }
.member-ad__when { margin-top: 2px; }
.member-ad { padding: 16px 18px 14px; }
@media (min-width: 768px) {
  .member-ad__head { font-size: 32px; }
  .member-ad { padding: 20px 26px 16px; }
}
.lead--title { font-family: var(--font-display); font-size: 21px; line-height: 1.15; color: var(--ink); }
@media (min-width: 768px) { .lead--title { font-size: 26px; } }

/* Pages start at the top, straight under the header, the same as page 2,
   rather than floating in the middle of the screen. */
.pg { justify-content: flex-start; --pg-top: 22px; }
@media (min-width: 768px) { .pg { --pg-top: 30px; } }

/* Sushi page 1 strapline — menu masthead style, left aligned.
   Desktop: one line, sized to the column. Phone: two lines, the date
   dropping under (the interpunct only shows when it's all on one line). */
.atom--strap { container-type: inline-size; }
.strap--line { justify-content: flex-start; flex-wrap: wrap; margin: 2px 0 12px; font-size: 13px; line-height: 1.35; }
.strap--line .strap__w:first-child { flex-basis: 100%; }
.strap--line .strap__dot { display: none; }
@media (min-width: 768px) {
  .strap--line { font-size: min(2.8cqi, 16.7px); flex-wrap: nowrap; white-space: nowrap; margin: 4px 0 14px; }
  .strap--line .strap__w:first-child { flex-basis: auto; }
  .strap--line .strap__dot { display: inline; }
}
.strap--line { font-size: min(3.5cqi, 13px); }
@media (min-width: 768px) { .strap--line { font-size: min(2.8cqi, 16.7px); } }
.strap--line .strap__w:first-child { margin-right: -.09em; }

/* --------------------------------------------------------------------------
   SUSHI PAGE 2 — the two photos side by side, then Know Your Sushi from
   the menu: five watercolours, name and one line each.
   -------------------------------------------------------------------------- */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-pair .photo { margin: 0; }
.photo-pair .photo img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.kys__head { color: var(--red); margin-top: 18px; }
.kys { margin-top: 6px; }
.kys__row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 3px 0; }
.kys__img { width: 92px; height: auto; display: block; mix-blend-mode: multiply; }
.kys__name { font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--ink); }
.kys__desc { font-size: 12.5px; line-height: 1.3; color: var(--grey); }
@media (min-width: 768px) {
  .kys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 10px; }
  .kys__row { grid-template-columns: 1fr; gap: 6px; text-align: center; padding: 0; }
  .kys__img { width: 100%; }
  .kys__name { font-size: 15px; }
  .kys__desc { font-size: 12.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg .kys__row { transition: transform 700ms var(--land) calc(var(--d) + var(--j, 0) * 80ms), opacity 500ms ease calc(var(--d) + var(--j, 0) * 80ms); }
  .js-pages .pg:not(.is-on) .kys__row { transform: translateY(14px); opacity: 0; }
}
.kys__img { -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 60%, transparent 100%); }
@media (min-width: 768px) { .kys { align-items: start; } .kys__row { align-items: start; } }
/* Sushi page 1: our own line under the Craft panel, a step up from body copy */
.lead--fresh { font-size: 17px; line-height: 1.5; color: var(--ink); margin-top: 16px; }
@media (min-width: 768px) { .lead--fresh { font-size: 20px; } }
/* Sushi page 1 Craft panel: label and text up 2 points */
.pg--hero .nugget__label { font-size: 11.5px; }
.pg--hero .nugget__text { font-size: 14px; line-height: 1.5; }
.pg--hero .nugget__label { font-size: 10.5px; }
.pg--hero .nugget__text { font-size: 13px; }

/* Homepage section headings (Sushi, Kitchen, Venue…) 20% smaller */
.home-pages .chapter .ptitle h2 { font-size: 27.2px; }
.home-pages .chapter .ptitle h2 .jp { font-size: 22.4px; }
@media (min-width: 768px) {
  .home-pages .chapter .ptitle h2 { font-size: 36.8px; }
  .home-pages .chapter .ptitle h2 .jp { font-size: 30.4px; }
}
@media (min-width: 1100px) {
  .home-pages .chapter .ptitle h2 { font-size: 44.8px; }
  .home-pages .chapter .ptitle h2 .jp { font-size: 36.8px; }
}
/* Sushi masthead line set exactly as the menu masthead strap:
   Libre Franklin 600 (lighter than before), 0.13em tracking */
.strap--line { font-weight: 600; letter-spacing: .13em; font-size: min(3.3cqi, 12.5px); }
.strap--line .strap__w:first-child { margin-right: -.13em; }
@media (min-width: 768px) { .strap--line { font-size: min(2.6cqi, 16px); } }

/* Know Your Sushi — formatted as on the menu: Libre Franklin red label,
   wide 1.6:1 thumbnails with a 2px corner, bold name, grey line beneath.
   Images are the menu's own PNGs. */
.kys__head { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .12em; color: var(--red); margin-top: 16px; }
.kys__row { grid-template-columns: 112px 1fr; gap: 14px; padding: 0; margin-bottom: 8px; }
.kys__img { width: 112px; height: 70px; object-fit: cover; border-radius: 2px; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
.kys__name { font-family: var(--font-body); font-weight: 700; font-size: 15.5px; }
.kys__desc { font-size: 13.5px; line-height: 1.3; color: var(--grey); }
.photo-pair .photo img { aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .kys__head { font-size: 14px; }
  .kys__row { grid-template-columns: 1fr; gap: 8px; margin: 0; }
  .kys__img { width: 100%; height: auto; aspect-ratio: 1.6; }
  .kys__name { font-size: 15px; }
  .kys__desc { font-size: 13px; }
}
.photo-pair .photo img { aspect-ratio: 2 / 1; }
@media (min-width: 768px) { .photo-pair .photo img { aspect-ratio: 16 / 9; } }

/* Know Your Sushi sits small at the foot of Sushi page 1: five across,
   picture and name (the one-liners join on desktop) */
.pg--hero .pg__in { display: flex; flex-direction: column; flex: 1; }
.atom--kys { margin-top: auto; padding-top: 14px; }
.atom--kys .kys__head { font-size: 10.5px; margin: 0 0 6px; }
.atom--kys .kys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; }
.atom--kys .kys__row { grid-template-columns: 1fr; gap: 3px; margin: 0; text-align: center; align-items: start; }
.atom--kys .kys__img { width: 100%; height: auto; aspect-ratio: 1.6; }
.atom--kys .kys__name { font-size: 10.5px; }
.atom--kys .kys__desc { display: none; }
@media (min-width: 768px) {
  .atom--kys { padding-top: 18px; }
  .atom--kys .kys__head { font-size: 12px; margin-bottom: 8px; }
  .atom--kys .kys { gap: 10px; }
  .atom--kys .kys__name { font-size: 12.5px; }
  .atom--kys .kys__desc { display: block; font-size: 11px; }
}
/* Sushi page 1 always fits one screen: the photo takes the height that's left */
.pg--hero { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 0; }
.pg--hero .pg__in { min-height: 0; }
.pg--hero .atom { flex: 0 0 auto; }
.pg--hero .atom:has(> figure.photo) { flex: 1 1 0; min-height: 110px; display: flex; }
.pg--hero figure.photo { flex: 1; display: flex; margin-top: 4px; }
.pg--hero figure.photo img { height: 100%; width: 100%; object-fit: cover; }
.pg--hero .atom--kys { margin-top: 0; }
/* KNOW YOUR SUSHI matches the page's other labels (THE BELT, CRAFT):
   Archivo Black, 10.5px, red, 0.16em tracking */
.atom--kys .kys__head { font-family: var(--font-display); font-weight: 400; font-size: 10.5px; letter-spacing: .16em; }
@media (min-width: 768px) { .atom--kys .kys__head { font-size: 10.5px; } }

/* Sushi page 1 Craft panel: 職人 and CRAFT share the top line, sitting on
   the same baseline; the Shokunin copy runs full width underneath. */
.pg--hero .nugget { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 6px; align-items: end; }
.pg--hero .nugget > div { display: contents; }
.pg--hero .nugget .jp { grid-column: 1; grid-row: 1; line-height: 1; }
.pg--hero .nugget__label { grid-column: 2; grid-row: 1; margin: 0 0 2px; line-height: 1; }
.pg--hero .nugget__text { grid-column: 1 / -1; grid-row: 2; }
.pg--hero .nugget__label { font-size: 12.5px; }
.pg--hero .ptitle__kicker { font-size: 12.5px; }
/* Phone: Sushi page 1 photo runs edge to edge */
@media (max-width: 767px) {
  .pg--hero figure.photo { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .pg--hero figure.photo img { border-radius: 0; }
}
@media (max-width: 767px) {
  .pg--hero figure.photo { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; flex: 0 0 auto; }
  .pg--hero .atom:has(> figure.photo) { justify-content: flex-start; }
}
/* Phone: photo back inside the margins, in a wider (16:9) landscape frame
   rather than filling the height; Know Your Sushi stays at the foot. */
@media (max-width: 767px) {
  .pg--hero figure.photo { width: auto; margin-left: 0; margin-right: 0; flex: 1; }
  .pg--hero figure.photo img { border-radius: 2px; }
  .pg--hero .atom:has(> figure.photo) { flex: 0 0 auto; min-height: 0; }
  .pg--hero figure.photo img { height: auto; aspect-ratio: 16 / 9; }
  .pg--hero .atom--kys { margin-top: auto; }
}

/* --------------------------------------------------------------------------
   KNOW YOUR SUSHI — sits up under the Craft panel. Each piece grows when
   you hover; tap or click one to open its details beneath the row.
   -------------------------------------------------------------------------- */
.pg--hero .atom--kys { margin-top: 0; padding-top: 16px; }
@media (max-width: 767px) { .pg--hero .atom--kys { margin-top: 0; } }
button.kys__row { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: grid; -webkit-tap-highlight-color: transparent; }
button.kys__row span { display: block; }
.kys__img { transition: transform 420ms cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 70%; }
button.kys__row:hover .kys__img, button.kys__row:focus-visible .kys__img { transform: scale(1.18); }
button.kys__row[aria-expanded="true"] .kys__img { transform: scale(1.18); }
button.kys__row[aria-expanded="true"] .kys__name { color: var(--red); }
button.kys__row:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.kys__name { transition: color var(--dur-fast) var(--ease); }

.kys__info { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms cubic-bezier(.16, 1, .3, 1); }
.kys__info.is-open { grid-template-rows: 1fr; }
.kys__info-in { overflow: hidden; display: block; }
.kys__info-in > span { display: block; }
.kys__info-name { font-family: var(--font-display); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); padding-top: 12px; }
.kys__info-text { font-size: 13px; line-height: 1.5; color: #26262B; padding-top: 3px; }
.kys__info.is-open .kys__info-in > span { animation: kys-in 420ms cubic-bezier(.16, 1, .3, 1) both; }
.kys__info.is-open .kys__info-text { animation-delay: 60ms; }
@keyframes kys-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) { .kys__info-text { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .kys__img, .kys__info { transition: none; }
  .kys__info.is-open .kys__info-in > span { animation: none; }
}
/* When a sushi is opened the photo gives up height so everything still fits */
@media (max-width: 767px) {
  .pg--hero .atom:has(> figure.photo) { flex: 0 1 auto; min-height: 96px; overflow: hidden; display: flex; }
  .pg--hero figure.photo { display: flex; min-height: 0; }
  .pg--hero figure.photo img { aspect-ratio: auto; height: 100%; max-height: calc((100vw - 2 * var(--gutter)) * 9 / 16); object-fit: cover; }
  .pg--hero .pg__in { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   HERO TEMPLATE (Sushi, Kitchen, Venue) — shared extras
   -------------------------------------------------------------------------- */
.atom--kys .kys { grid-template-columns: repeat(var(--n, 5), 1fr); }
.kys__bar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.atom--kys .kys__bar .kys__head { margin: 0; }
.kys__link {
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.kys__link span { display: inline-block; color: var(--red); transition: transform var(--dur) var(--ease); }
.kys__link:hover span { transform: translateX(3px); }

/* the details: title the same size as the label, a close button, and
   it folds itself away after five seconds */
.kys__info-in { position: relative; }
.kys__info-name { font-size: 10.5px; letter-spacing: .16em; padding-top: 12px; padding-right: 32px; }
.kys__close {
  position: absolute; top: 6px; right: -6px; width: 30px; height: 30px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-size: 20px; line-height: 1; opacity: .6; transition: opacity var(--dur-fast) var(--ease);
}
.kys__close:hover { opacity: 1; }
.kys__info:not(.is-open) .kys__info-in > * { opacity: 0; transition: opacity 200ms ease; }

/* --------------------------------------------------------------------------
   SANDPIT — everything not on a hero page, parked after it to choose from.
   Not snapped to one screen; scroll through it.
   -------------------------------------------------------------------------- */
.pg--sandpit {
  justify-content: flex-start; padding-top: 0;
  background: repeating-linear-gradient(135deg, rgba(22,22,26,.025) 0 12px, transparent 12px 24px), var(--paper);
  border-top: 2px dashed rgba(215, 32, 42, .5);
}
.sandpit__tag {
  position: sticky; top: var(--header-h); z-index: 2;
  background: var(--red); color: #fff; text-align: center;
  font-family: var(--font-display); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px var(--gutter); margin-bottom: 14px;
}
/* Venue's strap line is longer, so it sets a touch smaller to stay on one line */
#venue .strap--line { font-size: min(2.75cqi, 12.5px); }
@media (min-width: 768px) { #venue .strap--line { font-size: min(2.2cqi, 16px); } }
/* KNOW YOUR … → MENU, all on the left: label, arrow, then the link word */
.kys__bar { justify-content: flex-start; gap: 10px; }
.kys__link span { margin-right: 4px; }

/* Under the sushi row: two links out, black, turning red and zooming on hover */
.kys__more { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.kys__more-link {
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.kys__more-link span { display: inline-block; transform-origin: 0 50%; transition: transform 380ms cubic-bezier(.16, 1, .3, 1), color var(--dur-fast) var(--ease); }
.kys__more-link:hover span, .kys__more-link:focus-visible span { color: var(--red); transform: scale(1.12); }
@media (min-width: 768px) { .kys__more-link { font-size: 12.5px; } }
.kys__more { gap: 18px; margin-top: 12px; flex-wrap: nowrap; }
.kys__more-link { font-size: 10.5px; white-space: nowrap; }
@media (min-width: 768px) { .kys__more-link { font-size: 12.5px; } .kys__more { gap: 28px; } }
/* while a sushi's details are open, they take the links' place */
.atom--kys:has(.kys__info.is-open) .kys__more { display: none; }

/* WHAT'S ON — a fifth door under Membership, styled like Sushi/Kitchen/Venue,
   the same gap below Membership as Membership sits below Kitchen */
.portal__door--whatson { flex: 0 0 auto; margin: 31px auto 0; }
@media (min-width: 768px)  { .portal__door--whatson { margin-top: 37.7px; } }
@media (min-width: 1100px) { .portal__door--whatson { margin-top: 37.1px; } }
/* WHAT'S ON sits down by the Book Now pill, centred */
.portal > .portal__door--whatson {
  position: absolute; left: 0; right: 0; bottom: 82px; margin: 0 auto;
  width: max-content; flex: none; text-align: center;
}
@media (min-width: 768px) { .portal > .portal__door--whatson { bottom: 90px; } }
.portal__door--whatson .en { line-height: 1.25; }
/* WHAT'S ON: lift the brush character clear of the zoomed word */
.portal > .portal__door--whatson .jp { top: -38px; }
@media (min-width: 768px) { .portal > .portal__door--whatson .jp { top: -46px; } }

/* Sushi page links set as the home-screen doors: two lines, grey, red on
   hover with the zoom, the brush character above and the rule beneath */
.kys__more { justify-content: center; gap: 44px; margin-top: 30px; }
.kys__door { flex: 0 0 auto; text-align: center; padding-bottom: 8px; }
.kys__door .en { line-height: 1.25; font-size: 11.5px; }
.kys__door .jp { top: -30px; }
@media (min-width: 768px) { .kys__door .en { font-size: 13px; } .kys__more { gap: 64px; margin-top: 34px; } .kys__door .jp { top: -36px; } }
.pg--hero .atom:has(> figure.photo) { min-height: 76px; }
/* Sushi page links match the KNOW YOUR SUSHI label: 10.5px, 0.16em */
.kys__door .en, .kys__door:hover .en, .kys__door:focus-visible .en { font-size: 10.5px; letter-spacing: .16em; }
@media (min-width: 768px) { .kys__door .en, .kys__door:hover .en { font-size: 10.5px; } }
/* Sushi page links: each centred in its half of the column (left edge to
   centre line, centre line to right edge); hover just turns them red */
.kys__more { display: grid; grid-template-columns: 1fr 1fr; gap: 0; justify-items: center; margin-top: 16px; }
.kys__door .jp, .kys__door::after { display: none; }
.kys__door:hover .en, .kys__door:focus-visible .en, .kys__door.is-opening .en { transform: none; color: var(--red); }
.kys__door { padding-bottom: 0; }
@media (min-width: 768px) { .kys__more { margin-top: 18px; } }
/* lowered 3mm */
.kys__more { margin-top: calc(16px + 3mm); }
@media (min-width: 768px) { .kys__more { margin-top: calc(18px + 3mm); } }
/* Desktop: Know Your … row lifted 3mm (everything under it follows) */
@media (min-width: 768px) { .pg--hero .atom--kys { padding-top: calc(18px - 3mm); } }
/* Desktop: each link centred between the photo's edge and the Book Now
   pill's edge (the pill is 130px wide and sits on the centre line) */
@media (min-width: 768px) {
  .kys__more { grid-template-columns: 1fr 130px 1fr; }
  .kys__more .kys__door:last-child { grid-column: 3; }
}
/* Know Your … tiles are one size on every page (a fifth of the column),
   so three or four pictures match Sushi's five */
.atom--kys .kys { grid-template-columns: repeat(var(--n, 5), calc((100% - 4 * 6px) / 5)); justify-content: start; }
@media (min-width: 768px) { .atom--kys .kys { grid-template-columns: repeat(var(--n, 5), calc((100% - 4 * 10px) / 5)); } }

/* Sandpit page (separate, not linked): sections stacked, each tagged */
.sandpit { background: repeating-linear-gradient(135deg, rgba(22,22,26,.025) 0 12px, transparent 12px 24px), var(--paper); border-top: 2px dashed rgba(215,32,42,.5); padding-bottom: 40px; }
.sandpit__intro { padding-top: 24px; }
/* Kitchen: the four dishes sit straight under the panel, no label row */
.atom--dishes { padding-top: 16px; }
@media (min-width: 768px) { .pg--hero .atom--dishes { padding-top: calc(18px - 3mm); } }

/* --------------------------------------------------------------------------
   KITCHEN DISH RAIL — a row you swipe sideways along the foot of the page.
   Tap a dish and it grows out of the row into a full-screen lightbox.
   -------------------------------------------------------------------------- */
.atom--dishes { padding-top: 14px; }
.dish-rail {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px;
  scroll-padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.dish-rail::-webkit-scrollbar { display: none; }
.dish-card {
  flex: 0 0 104px; scroll-snap-align: start;
  appearance: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
}
.dish-card__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), filter 300ms ease;
}
.dish-card__name { display: block; margin-top: 6px; font-weight: 700; font-size: 11.5px; line-height: 1.2; color: var(--ink); }
.dish-card:hover .dish-card__img, .dish-card:focus-visible .dish-card__img { transform: scale(1.04); }
.dish-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.dish-card.is-source .dish-card__img { visibility: hidden; }
@media (min-width: 768px) {
  .dish-rail { margin: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .dish-card { flex-basis: 132px; }
  .dish-card__name { font-size: 12.5px; }
}

/* the lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; display: none; }
.lightbox.is-open { display: block; }
.lightbox__scrim { position: absolute; inset: 0; background: #121215; opacity: 0; }
.lightbox__stage { position: absolute; margin: 0; overflow: hidden; border-radius: 2px; }
.lightbox__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 24px calc(28px + env(safe-area-inset-bottom, 0px));
  color: var(--paper); text-align: center;
}
.lightbox__jp { display: block; font-family: var(--font-jp); color: var(--red); font-size: 30px; line-height: 1; }
.lightbox__name { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.1; margin: 8px 0 0; }
.lightbox__text { font-size: 14.5px; line-height: 1.5; color: var(--paper-80); max-width: 34ch; margin: 10px auto 0; }
.lightbox__count { display: block; margin-top: 14px; font-family: var(--font-display); font-size: 10px; letter-spacing: .2em; color: var(--paper-45); }
.lightbox__cap > * { opacity: 0; transform: translateY(14px); }
.lightbox.is-shown .lightbox__cap > * { opacity: 1; transform: none; transition: opacity 420ms ease, transform 620ms cubic-bezier(.16, 1, .3, 1); }
.lightbox.is-shown .lightbox__cap > :nth-child(2) { transition-delay: 60ms; }
.lightbox.is-shown .lightbox__cap > :nth-child(3) { transition-delay: 120ms; }
.lightbox.is-shown .lightbox__cap > :nth-child(4) { transition-delay: 180ms; }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2; background: none; border: 0; cursor: pointer; color: var(--paper);
  width: 44px; height: 44px; font-size: 22px; line-height: 1; opacity: 0; transition: opacity 300ms ease, color var(--dur-fast) var(--ease);
}
.lightbox.is-shown .lightbox__close, .lightbox.is-shown .lightbox__nav { opacity: .85; }
.lightbox__close:hover, .lightbox__nav:hover { color: var(--red); opacity: 1; }
.lightbox__close { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; font-size: 30px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 6px; } .lightbox__nav--next { right: 6px; }
@media (min-width: 768px) {
  .lightbox__name { font-size: 32px; }
  .lightbox__text { font-size: 16px; }
  .lightbox__nav { font-size: 28px; }
  .lightbox__nav--prev { left: 24px; } .lightbox__nav--next { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-shown .lightbox__cap > * { transition: none; }
}

/* dish rail tidy: photos sit on one top line whatever the name length */
.dish-rail { align-items: flex-start; }
.dish-card { display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; }
.dish-card__name { min-height: 2.4em; }
/* seven dishes: free gliding row with an elastic feel (snap off so it never jerks) */
.dish-rail { scroll-snap-type: none; cursor: grab; touch-action: pan-x pan-y; }
.dish-rail.is-dragging { cursor: grabbing; }
.dish-rail.is-dragging .dish-card { pointer-events: none; }
.dish-rail__track { display: contents; }
.dish-card { flex-basis: 76px; will-change: transform; }
.dish-card__name { font-size: 11px; margin-top: 5px; }
.dish-card__name { min-height: 0; white-space: nowrap; }
.dish-card__img { -webkit-user-drag: none; user-select: none; }
@media (min-width: 768px) {
  .dish-rail { margin: 0 -2px; padding-inline: 2px; }
  .dish-card { flex-basis: 152px; }
  .dish-card__name { font-size: 12.5px; }
}

/* soft fade on whichever edge has more dishes hiding behind it */
.dish-rail.is-mid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 85%, transparent); }
.dish-rail.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }

/* Kitchen: strap tucked up under the heading; Made Here band 2mm closer to the photo */
.pg--kitchen .atom--strap { margin-top: -5px; }
.pg--kitchen .atom:has(> .nugget) { margin-top: -2mm; }
.pg--kitchen .atom--dishes { margin-top: 2mm; }
/* every dish card the same width, whatever the length of its name */
.dish-card { min-width: 0; width: 76px; }
.dish-card__name { overflow: visible; }
@media (max-width: 767px) { .dish-rail { gap: 14px; } .dish-card__name { font-size: 10.5px; } }
@media (min-width: 768px) { .dish-card { width: 152px; } }
/* no soft fade on the dish row; more air between dishes on desktop */
.dish-rail, .dish-rail.is-mid, .dish-rail.is-end { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 768px) { .dish-rail { gap: 22px; } }
@media (min-width: 768px) { .dish-rail { margin: 0; padding-inline: 0; } }

/* Kitchen dish title styled exactly like Know your sushi */
.atom--dishes .kys__head { font-family: var(--font-display); font-weight: 400; font-size: 10.5px; letter-spacing: .16em; color: var(--red); margin: 0; }
.atom--dishes .kys__bar { margin-bottom: 6px; }
.pg--kitchen .atom--dishes { margin-top: 0; padding-top: 16px; }
@media (min-width: 768px) { .pg--kitchen .atom--dishes { padding-top: calc(18px - 3mm); } }

/* Venue: the same row and lightbox, four spaces sized to fill the width exactly */
.atom--rooms .dish-card { flex: 0 0 auto; width: calc((100% - 3 * 14px) / 4); }
@media (min-width: 768px) { .atom--rooms .dish-card { width: calc((100% - 3 * 22px) / 4); } }

/* Drinks: same build as Kitchen */
#drinks .strap--line { font-size: min(2.6cqi, 12.5px); }
@media (min-width: 768px) { #drinks .strap--line { font-size: min(2.1cqi, 16px); } }
.pg--drinks .atom--strap { margin-top: -5px; }
.pg--drinks .atom:has(> .nugget) { margin-top: -2mm; }
.pg--drinks .atom--dishes { margin-top: 0; padding-top: 16px; }
@media (min-width: 768px) { .pg--drinks .atom--dishes { padding-top: calc(18px - 3mm); } }

/* Venue: its own door, centred in the space between the geisha and MOSHIMO */
.portal > .portal__door--venue {
  position: absolute; left: 50%; margin: 0; z-index: 2;
  top: calc(((50vh - var(--pw-h) / 2 + var(--pm)) / 2 + 50vh - var(--pw-h) / 2) / 2 - var(--header-h));
  top: calc(((50svh - var(--pw-h) / 2 + var(--pm)) / 2 + 50svh - var(--pw-h) / 2) / 2 - var(--header-h));
  transform: translate(-50%, -50%);
}
.portal > .portal__door--venue { margin-top: 5px; }

/* Venue lifted to sit just under the geisha; its kanji now appears beside
   the word on hover (there is no room above it without touching her). */
.portal > .portal__door--venue {
  margin-top: 0; transform: translateX(-50%);
  top: calc((50vh - var(--pw-h) / 2 + var(--pm)) / 2 - var(--header-h) + 20px);
  top: calc((50svh - var(--pw-h) / 2 + var(--pm)) / 2 - var(--header-h) + 20px);
}
@media (min-width: 768px) {
  .portal > .portal__door--venue {
    top: calc((50vh - var(--pw-h) / 2 + var(--pm)) / 2 - var(--header-h) + 24px);
    top: calc((50svh - var(--pw-h) / 2 + var(--pm)) / 2 - var(--header-h) + 24px);
  }
}
.portal > .portal__door--venue .jp { left: auto; right: 100%; top: 50%; margin: -7px 10px 0 0; transform: translate(6px, -50%); }
.portal > .portal__door--venue:hover .jp,
.portal > .portal__door--venue:focus-visible .jp,
.portal > .portal__door--venue.is-opening .jp { transform: translate(0, -50%); }
.nugget__link { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nugget__link:hover { text-decoration-thickness: 2px; }

/* Drinks hero: a photo you can swipe through, with dots */
.photo--slides { position: relative; }
.photo--slides .slides {
  display: flex; width: 100%; height: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 2px; cursor: grab;
}
.photo--slides .slides::-webkit-scrollbar { display: none; }
.photo--slides .slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; border-radius: 0; -webkit-user-drag: none; user-select: none; }
.slides__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.slides__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 241, 234, .55); transition: background 300ms ease, transform 300ms ease; }
.slides__dots i.is-on { background: var(--paper, #F4F1EA); transform: scale(1.25); }
@media (max-width: 767px) { .photo--slides .slides { border-radius: 0; } }

/* Kitchen hero: frame from near the top so the chef's head is never cut */
.pg--kitchen figure.photo img { object-position: 50% 0%; }

/* Club: same build as Kitchen */
#club .strap--line { font-size: min(2.9cqi, 12.5px); }
@media (min-width: 768px) { #club .strap--line { font-size: min(2.3cqi, 16px); } }
.pg--club.pg--hero .atom--strap { margin-top: -5px; }
.pg--club.pg--hero .atom:has(> .nugget) { margin-top: -2mm; }
.pg--club.pg--hero .atom--dishes { margin-top: 0; padding-top: 16px; }
@media (min-width: 768px) { .pg--club.pg--hero .atom--dishes { padding-top: calc(18px - 3mm); } }

/* Club: red join banner and the two cards, small, at the foot */
.pg--club .atom--join { padding-top: 14px; }
.offer--join { display: block; text-align: center; text-decoration: none; color: #fff; padding: 14px 16px 13px; transition: background 300ms ease; }
.offer--join .offer__big { font-size: 26px; }
.offer--join .offer__sub { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 7px; opacity: 1; }
.offer--join .offer__sub span[aria-hidden] { display: inline-block; transition: transform 300ms ease; }
.offer--join:hover .offer__sub span[aria-hidden] { transform: translateX(5px); }
.pg--club .atom--cards { padding-top: 12px; }
.cards-pair--small { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 auto; max-width: 300px; }
@media (min-width: 768px) {
  .offer--join .offer__big { font-size: 34px; }
  .cards-pair--small { max-width: 340px; gap: 16px; }
}
.nugget__link, .nugget__link:hover { text-decoration: none; }
/* Club: join banner sits tight under the photo, the maths follows */
.pg--club .atom--join { padding-top: 0; margin-top: 2px; }
.pg--club .atom--join + .atom:has(> .nugget) { margin-top: 10px; }
/* Join: arrows point in at the words from both sides, and close in on hover */
.offer--join .offer__sub .arr { display: inline-block; transition: transform 300ms ease; }
.offer--join:hover .offer__sub .arr--l { transform: translateX(4px); }
.offer--join:hover .offer__sub .arr--r { transform: translateX(-4px); }
.pg--club .atom--join + .atom:has(> .nugget) { margin-top: calc(10px - 2mm); }

/* --------------------------------------------------------------------------
   KITCHEN SETTLES IN ITS OWN WAY — heat and the pass, where Sushi is calm.
   The photo rises up through steam and sharpens, the title slides onto the
   pass from the right like a ticket, the kanji flares and settles, the
   Made Here band drops into place and the dishes are dealt across one by one.
   Transforms, clip and filter only, so the page never shifts or breaks the snap.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* photo: wipes up from the bottom, steam clearing as it comes */
  .js-pages .pg--kitchen .photo { transition: clip-path 1100ms var(--land) var(--d), opacity 300ms ease var(--d); clip-path: inset(0); }
  .js-pages .pg--kitchen:not(.is-on) .photo { clip-path: inset(100% 0 0 0); opacity: 1; }
  .js-pages .pg--kitchen .photo img { transition: transform 1600ms var(--land) var(--d), filter 1300ms ease calc(var(--d) + 150ms); }
  .js-pages .pg--kitchen:not(.is-on) .photo img { transform: translateY(14%) scale(1.12); filter: blur(12px) brightness(1.35); }

  /* title: slides onto the pass from the right */
  .js-pages .pg--kitchen .ptitle h2 { transition: transform 900ms var(--land) calc(var(--d) + 80ms), opacity 500ms ease calc(var(--d) + 80ms); clip-path: none; }
  .js-pages .pg--kitchen:not(.is-on) .ptitle h2 { transform: translateX(60px); opacity: 0; clip-path: none; }
  /* kanji flares up hot, then settles */
  .js-pages .pg--kitchen .ptitle h2 .jp { transition: transform 800ms var(--stamp) calc(var(--d) + 260ms), opacity 400ms ease calc(var(--d) + 260ms), filter 900ms ease calc(var(--d) + 260ms); }
  .js-pages .pg--kitchen:not(.is-on) .ptitle h2 .jp { transform: scale(1.9) translateY(-6px); opacity: 0; filter: blur(6px); }
  /* kicker wipes in from the right */
  .js-pages .pg--kitchen .ptitle__kicker { transition: clip-path 800ms var(--land) var(--d); clip-path: inset(-20% -5% -20% 0); transform: none; }
  .js-pages .pg--kitchen:not(.is-on) .ptitle__kicker { clip-path: inset(-20% -5% -20% 100%); transform: none; }

  /* strap: wipes in right to left */
  .js-pages .pg--kitchen .strap--line { transition: clip-path 900ms var(--land) calc(var(--d) + 200ms); clip-path: inset(-30% -5% -30% -5%); }
  .js-pages .pg--kitchen:not(.is-on) .strap--line { clip-path: inset(-30% -5% -30% 105%); }

  /* Made Here band drops into place from above */
  .js-pages .pg--kitchen .nugget { transition: transform 800ms var(--stamp) var(--d), opacity 450ms ease var(--d); }
  .js-pages .pg--kitchen:not(.is-on) .nugget { transform: translateY(-22px); opacity: 0; }
  .js-pages .pg--kitchen .nugget .jp { transition: transform 700ms var(--stamp) calc(var(--d) + 260ms), opacity 300ms ease calc(var(--d) + 260ms); }
  .js-pages .pg--kitchen:not(.is-on) .nugget .jp { transform: rotate(-14deg) scale(.6); opacity: 0; }

  /* dishes dealt across the pass, one after another */
  .js-pages .pg--kitchen .dish-card { transition: transform 750ms var(--land) calc(var(--d) + var(--j, 0) * 85ms), opacity 450ms ease calc(var(--d) + var(--j, 0) * 85ms); }
  .js-pages .pg--kitchen:not(.is-on) .dish-card { transform: translateX(70px) rotate(4deg); opacity: 0; }
  .pg--kitchen .dish-card:nth-child(2) { --j: 1; } .pg--kitchen .dish-card:nth-child(3) { --j: 2; }
  .pg--kitchen .dish-card:nth-child(4) { --j: 3; } .pg--kitchen .dish-card:nth-child(5) { --j: 4; }
  .pg--kitchen .dish-card:nth-child(6) { --j: 5; }
}

/* Kitchen direction: everything arrives from the LEFT and leaves to the RIGHT.
   :not(.is-on) is the leaving state (off to the right); .k-left parks it on the
   left, out of sight and without animating, ready for the next arrival. */
@media (prefers-reduced-motion: no-preference) {
  /* leaving: off to the right */
  .js-pages .pg--kitchen:not(.is-on) .photo { clip-path: inset(0 0 0 100%); }
  .js-pages .pg--kitchen:not(.is-on) .photo img { transform: translateX(10%) scale(1.12); filter: blur(12px) brightness(1.35); }
  .js-pages .pg--kitchen:not(.is-on) .ptitle h2 { transform: translateX(60px); }
  .js-pages .pg--kitchen:not(.is-on) .ptitle__kicker { clip-path: inset(-20% -5% -20% 100%); }
  .js-pages .pg--kitchen:not(.is-on) .strap--line { clip-path: inset(-30% -5% -30% 105%); }
  .js-pages .pg--kitchen:not(.is-on) .nugget { transform: translateX(40px); }
  .js-pages .pg--kitchen:not(.is-on) .dish-card { transform: translateX(70px) rotate(4deg); }

  /* parked on the left, waiting to come in */
  .js-pages .pg--kitchen.k-left:not(.is-on) .photo { clip-path: inset(0 100% 0 0); }
  .js-pages .pg--kitchen.k-left:not(.is-on) .photo img { transform: translateX(-10%) scale(1.12); }
  .js-pages .pg--kitchen.k-left:not(.is-on) .ptitle h2 { transform: translateX(-60px); }
  .js-pages .pg--kitchen.k-left:not(.is-on) .ptitle__kicker { clip-path: inset(-20% 100% -20% 0); }
  .js-pages .pg--kitchen.k-left:not(.is-on) .strap--line { clip-path: inset(-30% 105% -30% -5%); }
  .js-pages .pg--kitchen.k-left:not(.is-on) .nugget { transform: translateX(-40px); }
  .js-pages .pg--kitchen.k-left:not(.is-on) .dish-card { transform: translateX(-70px) rotate(-4deg); }
  .js-pages .pg--kitchen.k-left:not(.is-on), .js-pages .pg--kitchen.k-left:not(.is-on) * { transition: none !important; }

  /* coming in from the left: the strap and kicker wipe left to right */
  .js-pages .pg--kitchen .ptitle__kicker, .js-pages .pg--kitchen .strap--line { clip-path: inset(-30% -5% -30% -5%); }
}

/* Visit: same build as the other heroes, details in a tidy grid */
#visit .strap--line { font-size: min(2.7cqi, 12.5px); }
@media (min-width: 768px) { #visit .strap--line { font-size: min(2.2cqi, 16px); } }
.pg--visit.pg--hero .atom--strap { margin-top: -5px; }
.pg--visit.pg--hero .atom:has(> .nugget) { margin-top: -2mm; }
.pg--visit .atom--visit { padding-top: 14px; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.visit-grid .info { margin: 0; }
.visit-grid .info__label { font-family: var(--font-display); font-weight: 400; font-size: 10.5px; letter-spacing: .16em; margin-bottom: 4px; }
.visit-grid .info__value { font-size: 13px; line-height: 1.5; }
.visit-grid .info--wide { grid-column: 1 / -1; }
.visit__dir { display: inline-block; margin-top: 4px; }
@media (min-width: 768px) {
  .visit-grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px 28px; }
  .visit-grid .info--wide { grid-column: auto; }
  .visit-grid .info__value { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   VENUE SETTLES IN LIKE THE HOME PAGE: the photo draws down from the top as
   it eases back from a slight zoom, the strap wipes across, the words and
   the room tiles rise gently into place.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg--venue .photo { transition: clip-path 1100ms var(--land) var(--d), opacity 200ms ease var(--d); clip-path: inset(0); }
  .js-pages .pg--venue:not(.is-on) .photo { clip-path: inset(0 0 100% 0); opacity: 1; }
  .js-pages .pg--venue .photo img { transition: transform 1500ms var(--land) var(--d); }
  .js-pages .pg--venue:not(.is-on) .photo img { transform: scale(1.1); }
  .js-pages .pg--venue .strap--line { transition: clip-path 900ms var(--land) calc(var(--d) + 240ms); clip-path: inset(-30% -5% -30% -5%); }
  .js-pages .pg--venue:not(.is-on) .strap--line { clip-path: inset(-30% 105% -30% -5%); }
  .js-pages .pg--venue .nugget { transition: transform 800ms var(--land) calc(var(--d) + 120ms), opacity 600ms ease calc(var(--d) + 120ms); }
  .js-pages .pg--venue:not(.is-on) .nugget { transform: translateY(16px); opacity: 0; }
  .js-pages .pg--venue .nugget .jp { transition: opacity 600ms ease calc(var(--d) + 260ms); transform: none; }
  .js-pages .pg--venue:not(.is-on) .nugget .jp { transform: none; opacity: 0; }
  .js-pages .pg--venue .dish-card { transition: transform 900ms var(--land) calc(var(--d) + 200ms + var(--j, 0) * 90ms), opacity 500ms ease calc(var(--d) + 200ms + var(--j, 0) * 90ms); }
  .js-pages .pg--venue:not(.is-on) .dish-card { transform: translateY(30px); opacity: 0; }
  .pg--venue .dish-card:nth-child(2) { --j: 1; } .pg--venue .dish-card:nth-child(3) { --j: 2; } .pg--venue .dish-card:nth-child(4) { --j: 3; }
  /* visit details rise in one after another */
  .pg--visit .visit-grid .info:nth-child(2) { --j: 1; } .pg--visit .visit-grid .info:nth-child(3) { --j: 2; }
}

/* real photo in a placeholder slot */
.ph--img { padding: 0; overflow: hidden; background: none; border: 0; }
.ph--img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* Visit: top half matches the other pages; the details below Good to know are centred */
.pg--visit .visit-grid .info { text-align: center; }
.ph-pair .ph { flex: 1 1 0; min-width: 0; margin: 0; }

/* Visit closes the site: the sign-off sits at the foot of the page */
.pg--visit .atom--sign { padding-top: 18px; }
.visit-sign { text-align: center; }
.visit-sign .belt { margin: 0 auto 14px; justify-content: center; }
.visit-sign .site-footer__addr { margin-top: 10px; }

/* Visit: no settle animation, it is simply there */
.js-pages .pg--visit, .js-pages .pg--visit * { transition: none !important; }
.js-pages .pg--visit:not(.is-on) *, .js-pages .pg--visit:not(.is-on) { transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important; }

/* --------------------------------------------------------------------------
   MENU SHEETS — the printed menus themselves, side by side as tabs.
   Tap to open full size and pinch or scroll around it.
   -------------------------------------------------------------------------- */
.sheets { max-width: 1100px; margin: 14px auto 0; padding: 0 var(--gutter); }
.sheets--portrait { max-width: 560px; }
.sheets__tabs { display: flex; gap: 22px; justify-content: center; margin-bottom: 14px; }
.sheets__tab { appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer; position: relative;
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); opacity: .45; transition: opacity 250ms ease, color 250ms ease; }
.sheets__tab::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px; background: var(--red); transform: translateX(-50%); transition: width 300ms ease; }
.sheets__tab:hover { opacity: .8; }
.sheets__tab.is-on { opacity: 1; color: var(--red); }
.sheets__tab.is-on::after { width: 100%; }
.sheets__stage { position: relative; }
.sheet { margin: 0; display: none; }
.sheet.is-on { display: block; animation: sheetIn 450ms cubic-bezier(.16,1,.3,1); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sheet__zoom { appearance: none; border: 0; padding: 0; background: none; display: block; width: 100%; cursor: zoom-in; }
.sheet img { width: 100%; height: auto; display: block; box-shadow: 0 10px 34px rgba(22,22,26,.16); }
.sheets__hint { text-align: center; font-size: 11.5px; color: var(--grey); margin: 12px 0 0; }
.menu-text { max-width: var(--frame); margin: 26px auto 10px; padding: 0 var(--gutter); }
.menu-text > summary { cursor: pointer; list-style: none; text-align: center; font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 8px 0; }
.menu-text > summary::-webkit-details-marker { display: none; }
.menu-text > summary::after { content: ' ↓'; color: var(--red); }
.menu-text[open] > summary::after { content: ' ↑'; }

.sheet-view { position: fixed; inset: 0; z-index: 90; background: #121215; display: none; }
.sheet-view.is-open { display: block; }
.sheet-view__scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.sheet-view__scroll img { display: block; width: max(100%, 1400px); height: auto; margin: 0 auto; }
.sheet-view--portrait .sheet-view__scroll img { width: max(100%, 900px); }
.sheet-view__close { position: fixed; top: 12px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* --------------------------------------------------------------------------
   WEB MENU (mobile first) — the Sushi Bar as a scrolling menu: a sticky row
   of sections, the belt colours in a drop-down, the watercolours from the
   printed menu and the Know Your Sushi drawings to show what's what.
   -------------------------------------------------------------------------- */
.sheets:has(.wm.is-on) { max-width: 720px; padding: 0; }
.sheets:has(.wm.is-on) .sheets__hint { display: none; }
.sheets__tabs { position: sticky; top: var(--header-h); z-index: 6; background: var(--paper); margin: 0; padding: 8px 0 6px; }
.wm { padding: 0 var(--gutter) 10px; animation: none; }
.wm-nav { position: sticky; top: calc(var(--header-h) + 38px); z-index: 5; background: var(--paper); margin: 0 calc(-1 * var(--gutter)); border-bottom: 1px solid var(--hairline); }
.wm-nav__in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--gutter); scroll-padding-inline: var(--gutter); }
.wm-nav__in::-webkit-scrollbar { display: none; }
.wm-nav a { flex: 0 0 auto; text-decoration: none; color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 40px; transition: background 250ms ease, color 250ms ease, border-color 250ms ease; }
.wm-nav a.is-here { background: var(--red); border-color: var(--red); color: #fff; }

.wm-belt { margin: 16px 0 6px; border: 1px solid var(--hairline); border-top: 2px solid var(--red); background: rgba(215,32,42,.035); scroll-margin-top: calc(var(--header-h) + 96px); }
.wm-belt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 12px; }
.wm-belt > summary::-webkit-details-marker { display: none; }
.wm-belt__jp { font-family: var(--font-jp); color: var(--red); font-size: 22px; line-height: 1; }
.wm-belt__t { flex: 1; min-width: 0; }
.wm-belt__title { display: block; font-family: var(--font-display); font-size: 13px; letter-spacing: .02em; }
.wm-belt__dots { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.wm-belt__dots i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.55); }
.wm-belt__from { font-size: 11.5px; color: var(--grey); white-space: nowrap; }
.wm-belt__chev { color: var(--red); transition: transform 300ms ease; }
.wm-belt[open] .wm-belt__chev { transform: rotate(180deg); }
.wm-belt .wm-note { padding: 0 12px; margin-top: 0; }
.wm-plates { list-style: none; margin: 4px 0 0; padding: 0 12px 10px; }
.wm-plate { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.wm-plate:last-child { border-bottom: 0; }
.wm-plate__dot { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 5px rgba(255,255,255,.6), 0 2px 5px rgba(22,22,26,.18); }
.wm-plate__name { flex: 1; font-size: 13.5px; font-weight: 600; }
.wm-plate__sub { font-weight: 400; color: var(--grey); font-size: 11.5px; }
.wm-plate__price { font-family: var(--font-display); font-size: 13px; }
.wm-belt[open] .wm-plate { animation: plateIn 420ms cubic-bezier(.16,1,.3,1) both; }
.wm-belt[open] .wm-plate:nth-child(2){animation-delay:30ms}.wm-belt[open] .wm-plate:nth-child(3){animation-delay:60ms}.wm-belt[open] .wm-plate:nth-child(4){animation-delay:90ms}.wm-belt[open] .wm-plate:nth-child(5){animation-delay:120ms}.wm-belt[open] .wm-plate:nth-child(6){animation-delay:150ms}.wm-belt[open] .wm-plate:nth-child(7){animation-delay:180ms}.wm-belt[open] .wm-plate:nth-child(8){animation-delay:210ms}.wm-belt[open] .wm-plate:nth-child(9){animation-delay:240ms}.wm-belt[open] .wm-plate:nth-child(10){animation-delay:270ms}
@keyframes plateIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.wm-sec { padding: 22px 0 6px; scroll-margin-top: calc(var(--header-h) + 90px); }
.wm-art { margin: 0 0 6px; text-align: center; }
.wm-art img { max-width: 100%; max-height: 190px; width: auto; height: auto; display: inline-block; mix-blend-mode: multiply; }
.wm-head { display: flex; align-items: baseline; gap: 10px; }
.wm-head__jp { font-family: var(--font-jp); color: var(--red); font-size: 22px; line-height: 1; }
.wm-head__en { font-family: var(--font-display); font-size: 21px; line-height: 1.1; margin: 0; }
.wm-note { font-size: 12.5px; color: var(--grey); line-height: 1.5; margin: 6px 0 0; font-style: italic; }
.wm-group { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px; padding-top: 10px; border-top: 2px solid var(--ink); scroll-margin-top: calc(var(--header-h) + 90px); }
.wm-group__ic { width: 62px; height: auto; flex: 0 0 auto; margin: -6px 0 -4px; }
.wm-group__name { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.wm-group__sub { font-size: 11.5px; color: var(--grey); margin-top: 2px; }
.wm-items .item { padding: 10px 0; }
.wm-items .item__name { font-size: 14px; }
.wm-items .item__price { font-size: 13.5px; }
.wm-items .item__desc { font-size: 12px; padding-right: 0; }
.wm-feat { display: flex; gap: 12px; margin: 14px 0 4px; padding: 12px; background: #ebe5d8; border-top: 2px solid var(--red); }
.wm-feat__jp { font-family: var(--font-jp); color: var(--red); font-size: 20px; line-height: 1.1; flex: 0 0 auto; }
.wm-feat > div { flex: 1; min-width: 0; }
.wm-feat .item__name { font-size: 14px; font-weight: 700; }
.wm-feat .item__desc { padding-right: 0; font-size: 12px; }
.wm-cta { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px; background: var(--red); color: #fff; text-decoration: none; font-size: 12.5px; line-height: 1.45; }
.wm-cta__jp { font-family: var(--font-jp); font-size: 24px; }
.wm-cta__arr { margin-left: auto; font-size: 18px; transition: transform 250ms ease; }
.wm-cta:hover .wm-cta__arr { transform: translateX(4px); }
.wm-sec--small .wm-group { display: none; }
.wm-foot { text-align: center; padding: 22px 0 6px; border-top: 1px solid var(--hairline); margin-top: 18px; }
.wm-key { font-size: 11.5px; color: var(--grey); margin: 0 0 12px; }
.wm-print { width: auto; display: inline-flex; gap: 8px; font-family: var(--font-display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; padding: 8px 0; }
.wm-print span { color: var(--red); }
@media (min-width: 768px) {
  .wm-art img { max-height: 230px; }
  .wm-head__en { font-size: 26px; }
}
/* the web menu is not a picture of a sheet: no sheet shadow or full-width images */
.wm img { box-shadow: none; }
.wm .wm-group__ic { width: 62px; }
.wm .wm-art img { width: auto; }
.wm-head__jp, .wm-feat__jp { white-space: nowrap; }
/* section heads styled like the printed menu: kanji and title over a red rule */
.wm-sec { padding-top: 26px; }
.wm-head { padding-bottom: 8px; border-bottom: 2px solid var(--red); }
.wm-sec .wm-head + .wm-group, .wm-sec .wm-note + .wm-group { border-top: 0; margin-top: 8px; }

/* Close button on the inner pages: back to where you came from */
.page-close { position: fixed; z-index: 40; top: calc(var(--header-h) + 10px); right: max(14px, calc(50% - var(--frame) / 2 - 8px));
  width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; text-decoration: none;
  display: grid; place-items: center; font-size: 22px; line-height: 1; box-shadow: 0 6px 18px rgba(215,32,42,.32);
  transition: transform 250ms cubic-bezier(.34,1.4,.64,1), background 200ms ease; }
.page-close:hover { transform: rotate(90deg); }
.page-close:active { transform: scale(.94); background: var(--red-deep); }
@media (min-width: 768px) { .page-close { width: 42px; height: 42px; font-size: 24px; } }
/* Kitchen web menu bits */
.wm-new { display: inline-block; margin-left: 6px; font-family: var(--font-display); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 2px 5px 1px; border-radius: 2px; vertical-align: 2px; }
.wm-feat--note { margin-top: 12px; }
.wm-feat__label { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
.wm-feat--note .item__desc { color: var(--ink); font-size: 12.5px; margin-top: 0; }
.wm-foot .wm-key + .wm-key { max-width: 420px; margin-inline: auto; }
/* wines: the glass, large glass and bottle prices sit on their own line */
.item--multi .item__line { flex-wrap: wrap; }
.item--multi .item__leader { display: none; }
.item--multi .item__name { flex: 1 1 100%; }
.item--multi .item__price { margin-top: 3px; color: var(--red); }
/* on the menu pages the × sits in the tab row, clear of the section buttons */
body:has(.sheets__tabs) .page-close { top: calc(var(--header-h) + 5px); width: 32px; height: 32px; font-size: 19px; }

/* ==========================================================================
   STILL PHOTOS AFTER SUSHI (v3.4) — on Kitchen, Drinks, Venue and Club the
   main photo is simply there; everything else on those pages still settles
   in as before. To bring the photo animations back, delete this block.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js-pages .pg--kitchen .photo, .js-pages .pg--kitchen:not(.is-on) .photo,
  .js-pages .pg--drinks .photo, .js-pages .pg--drinks:not(.is-on) .photo,
  .js-pages .pg--venue .photo, .js-pages .pg--venue:not(.is-on) .photo,
  .js-pages .pg--club .photo, .js-pages .pg--club:not(.is-on) .photo,
  .js-pages .pg--kitchen.k-left:not(.is-on) .photo {
    transition: none !important; clip-path: none !important; opacity: 1 !important;
  }
  .js-pages .pg--kitchen .photo img, .js-pages .pg--kitchen:not(.is-on) .photo img,
  .js-pages .pg--drinks .photo img, .js-pages .pg--drinks:not(.is-on) .photo img,
  .js-pages .pg--venue .photo img, .js-pages .pg--venue:not(.is-on) .photo img,
  .js-pages .pg--club .photo img, .js-pages .pg--club:not(.is-on) .photo img,
  .js-pages .pg--kitchen.k-left:not(.is-on) .photo img {
    transition: none !important; transform: none !important; filter: none !important;
  }
}
/* end of STILL PHOTOS AFTER SUSHI */

/* Know Your Sushi in the lightbox: the drawing sits on paper, whole */
.kys__row.is-source .kys__img { visibility: hidden; }
.lightbox--drawing .lightbox__stage { background: #F7F3EC; }
.lightbox--drawing .lightbox__img { object-fit: contain; }

/* Club: photo, the maths, then the £2 a month banner */
.pg--club .atom:has(> .nugget) { margin-top: 0; }
.pg--club .atom--join { padding-top: 12px; margin-top: 0; }

/* Visit is the last page: on iPhone the page can be taller than the "small"
   screen height once Safari's bars tuck away, which left Find Us sitting low.
   Size it to the large screen height so the title sits at the top; the photo
   takes up the difference and the sign-off stays at the foot. */
.pg--visit.pg--hero { height: calc(100lvh - var(--header-h)); }
@supports not (height: 100lvh) { .pg--visit.pg--hero { height: calc(100vh - var(--header-h)); } }

/* the red squares on Visit come on one after another */
@media (prefers-reduced-motion: no-preference) {
  .pg--visit .belt--visit i { opacity: 0; transform: translateY(5px) scale(.6); }
  .pg--visit.is-on .belt--visit i { animation: belt-turn 520ms cubic-bezier(.34, 1.4, .64, 1) forwards !important; }
  .pg--visit.is-on .belt--visit i:nth-child(2) { animation-delay: 90ms !important; }
  .pg--visit.is-on .belt--visit i:nth-child(3) { animation-delay: 180ms !important; }
  .pg--visit.is-on .belt--visit i:nth-child(4) { animation-delay: 270ms !important; }
  .pg--visit.is-on .belt--visit i:nth-child(5) { animation-delay: 360ms !important; }
  .pg--visit.is-on .belt--visit i:nth-child(6) { animation-delay: 450ms !important; }
  .pg--visit.is-on .belt--visit i:nth-child(7) { animation-delay: 540ms !important; }
}

/* ==========================================================================
   STILL PAGES FROM KITCHEN ON (v3.6) — Kitchen, Drinks, Venue and Club are
   simply there, no settle-in or leave animations. Sushi keeps its motion,
   and the red squares on Visit still play. Delete this block to bring the
   animations back.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js-pages :is(.pg--kitchen, .pg--drinks, .pg--venue, .pg--club),
  .js-pages :is(.pg--kitchen, .pg--drinks, .pg--venue, .pg--club) * {
    transition: none !important;
  }
  .js-pages :is(.pg--kitchen, .pg--drinks, .pg--venue, .pg--club):not(.is-on) *,
  .js-pages .pg--kitchen.k-left:not(.is-on) * {
    transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important;
  }
  .js-pages :is(.pg--kitchen, .pg--drinks, .pg--venue, .pg--club) :is(.ptitle h2, .ptitle__kicker, .strap--line, .photo, .nugget, .nugget .jp, .ptitle h2 .jp, .dish-card, .offer__big, .offer__sub) {
    transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important;
  }
}
/* end of STILL PAGES FROM KITCHEN ON */
.pg--visit .atom--sign { margin-top: auto; }

/* A single hero page standing on its own (Craft): fills one screen like the
   homepage pages, with the same strap, photo and red band */
.pg--solo { min-height: 0; }
.pg--solo .ptitle h1 { margin: 0; }
.pg--craft .atom--strap { margin-top: -5px; }
.pg--craft .atom--craft-body { padding-top: 12px; }
.pg--craft .atom--craft-body .body-copy { margin: 0; font-size: 14px; line-height: 1.55; }
.pg--craft .atom:has(> .nugget) { margin-top: 2px; }
@media (min-width: 768px) { .pg--craft .atom--craft-body .body-copy { font-size: 15px; } }
body:has(.pg--solo) .page-close { top: calc(var(--header-h) + 5px); width: 32px; height: 32px; font-size: 19px; }
.sheets__tab:focus:not(:focus-visible) { outline: none; }

/* ONE HEADING SIZE across the whole site: every page title, its kanji and
   its red kicker match the homepage pages (Sushi set the standard). */
.ptitle h1, .chapter .ptitle h2 { font-size: 27.2px; }
.ptitle h1 .jp, .chapter .ptitle h2 .jp { font-size: 22.4px; }
.ptitle__kicker { font-size: 12.5px; }
@media (min-width: 768px) {
  .ptitle h1, .chapter .ptitle h2 { font-size: 36.8px; }
  .ptitle h1 .jp, .chapter .ptitle h2 .jp { font-size: 30.4px; }
}
@media (min-width: 1100px) {
  .ptitle h1, .chapter .ptitle h2 { font-size: 44.8px; }
  .ptitle h1 .jp, .chapter .ptitle h2 .jp { font-size: 36.8px; }
}

/* every strap line the same size as Sushi's */
:is(#drinks, #venue, #club, #visit) .strap--line { font-size: min(3.3cqi, 12.5px); }
@media (min-width: 768px) { :is(#drinks, #venue, #club, #visit) .strap--line { font-size: min(2.6cqi, 16px); } }
/* two-page inner pages: each page a full screen, the second a little apart */
.pg--solo + .pg--solo { border-top: 1px solid var(--hairline); }
.pg--clubp .atom--join { padding-top: 14px; }
.atom--cards-big { padding-top: 6px; }
.atom--cards-big .cards-pair--small { max-width: 100%; }
@media (min-width: 768px) { .atom--cards-big .cards-pair--small { max-width: 560px; } }
/* second pages on inner pages use an h2 title: style it exactly like the h1 */
.pg--solo .ptitle h2 { font-family: var(--font-display); font-weight: 400; line-height: 1; display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 27.2px; color: var(--ink); }
.pg--solo .ptitle h2 .jp { font-family: var(--font-jp); color: var(--red); font-weight: 400; font-size: 22.4px; }
@media (min-width: 768px) { .pg--solo .ptitle h2 { font-size: 36.8px; } .pg--solo .ptitle h2 .jp { font-size: 30.4px; } }
@media (min-width: 1100px) { .pg--solo .ptitle h2 { font-size: 44.8px; } .pg--solo .ptitle h2 .jp { font-size: 36.8px; } }

/* The three Cs: Craft, Conscience and Community on one page you scroll through,
   snapping page to page like the homepage. The kicker shows where you are. */
.trio-pages .pg--solo { scroll-snap-align: start; }
.trio-pages .pg--solo + .pg--solo, .trio-pages .chapter + .chapter .pg--solo { border-top: 0; }
.ptitle__kicker.trio span { color: #b9b2a6; }
.ptitle__kicker.trio span.is-here { color: var(--red); }
/* these pages stay still, like Kitchen onwards */
@media (prefers-reduced-motion: no-preference) {
  .js-pages .trio-pages .pg, .js-pages .trio-pages .pg *, .trio-pages .js-pages .pg, .trio-pages .js-pages .pg * { transition: none !important; }
  .trio-pages .pg:not(.is-on) * { transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js-pages.trio-pages .pg, html.js-pages.trio-pages .pg * { transition: none !important; }
  html.js-pages.trio-pages .pg:not(.is-on) *, html.js-pages.trio-pages .pg:not(.is-on) { transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important; }
}
.ptitle__kicker.trio { letter-spacing: .12em; padding-right: 40px; }
@media (min-width: 768px) { .ptitle__kicker.trio { letter-spacing: .2em; padding-right: 0; } }
.ptitle__kicker.trio { white-space: nowrap; letter-spacing: .1em; font-size: 11px; padding-right: 0; }
@media (min-width: 768px) { .ptitle__kicker.trio { font-size: 12.5px; letter-spacing: .2em; } }

/* Book: the live ResDiary booking, framed in the site's style */
.book { max-width: var(--frame); margin: 0 auto; padding: 22px var(--gutter) 110px; }
.book__strap { margin: 4px 0 14px; }
.book__frame { background: #fff; border-top: 2px solid var(--red); box-shadow: 0 8px 28px rgba(22,22,26,.08); }
.book__widget { display: block; width: 100%; height: 1000px; border: 0; }
@media (min-width: 768px) { .book__widget { height: 960px; } }
.book__fallback { font-size: 12px; color: var(--grey); text-align: center; margin: 10px 0 0; }
.book .nugget { margin-top: 18px; }
.book .ptitle { padding: 0; margin: 0; max-width: none; }

/* Sign-off lockup: BRIGHTON · SINCE 2000 / CRAFT · CONSCIENCE · COMMUNITY (v3.27, matched to Gaz's grab) */
.sig-lockup { text-transform: uppercase; text-align: center; line-height: 1; }
.sig-lockup__main, .sig-lockup__sub { display: block; font-family: var(--font-body); font-weight: 800; white-space: nowrap; }
.sig-lockup__main { font-size: 20px; letter-spacing: .155em; color: var(--ink); margin-right: -.155em; }
.sig-lockup__sub { font-size: 11.1px; letter-spacing: .2em; color: #4a4843; margin-top: 9px; margin-right: -.2em; }
.sig-lockup i { font-style: normal; font-weight: 900; color: var(--red); }
.sig-lockup__main i { margin: 0 .32em; }
.sig-lockup__sub i { margin: 0 .4em; }
@media (min-width: 768px) {
  .sig-lockup__main { font-size: 27px; }
  .sig-lockup__sub { font-size: 15px; margin-top: 12px; }
}
.draw__sig.sig-lockup { text-align: left; }
.draw__sig.sig-lockup .sig-lockup__main { color: #fff; font-size: 15px; }
.draw__sig.sig-lockup .sig-lockup__sub { color: var(--paper-45); font-size: 8.3px; margin-top: 7px; }

/* Visit: tighter photo crop + clear find/contact row above the belt (v3.28) */
.pg--visit .atom:has(> figure.photo) { flex: 0 0 auto !important; min-height: 0 !important; }
.pg--visit figure.photo { flex: 1 1 auto; }
.pg--visit figure.photo img { aspect-ratio: 21 / 9 !important; height: auto !important; max-height: none !important; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 768px) { .pg--visit figure.photo img { aspect-ratio: 3 / 1 !important; } }
.find-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; margin: 0 auto 18px; }
.find-row__btn { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.find-row__ic { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.find-row__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.find-row__ic--w3w { font-family: var(--font-display); font-size: 15px; letter-spacing: -.02em; color: var(--red); }
.find-row__lbl { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.find-row__btn:hover .find-row__ic, .find-row__btn:active .find-row__ic { background: var(--red); border-color: var(--red); color: #fff; }
.find-row__btn:hover .find-row__ic--w3w, .find-row__btn:active .find-row__ic--w3w { color: #fff; }
@media (min-width: 768px) { .find-row__ic { width: 58px; height: 58px; } .find-row__lbl { font-size: 10.5px; } }
.pg--visit figure.photo img { aspect-ratio: 5 / 2 !important; }
@media (min-width: 768px) { .pg--visit figure.photo img { aspect-ratio: 4 / 1 !important; } }
.find-row { margin-bottom: 14px; }
.find-row__ic { width: 46px; height: 46px; }
.find-row__ic svg { width: 20px; height: 20px; }
.find-row__btn { gap: 6px; }
@media (min-width: 768px) { .find-row__ic { width: 50px; height: 50px; } .find-row { margin-bottom: 14px; } }
.pg--visit .atom--sign { padding-top: 14px; }
/* v3.29: Visit photo is a 15% crop of the 16:9 frame; lockup 30% smaller */
.pg--visit figure.photo img { aspect-ratio: 2.1 / 1 !important; }
@media (min-width: 768px) { .pg--visit figure.photo img { aspect-ratio: 2.1 / 1 !important; } }
.sig-lockup__main { font-size: 14px; }
.sig-lockup__sub { font-size: 8.5px; margin-top: 7px; }
@media (min-width: 768px) {
  .sig-lockup__main { font-size: 19px; }
  .sig-lockup__sub { font-size: 10.5px; margin-top: 8px; }
}
/* Desktop/laptop: photo is up to the 15% crop, giving up height on short screens so the page still fits */
@media (min-width: 768px) {
  .pg--visit .atom:has(> figure.photo) { flex: 1 1 0 !important; min-height: 90px !important; display: flex; justify-content: center; align-items: flex-start; }
  .pg--visit figure.photo { flex: 1 1 auto; height: 100%; max-height: calc(min(100vw - 2 * var(--gutter), var(--frame)) / 2.1); }
  .pg--visit figure.photo img { aspect-ratio: auto !important; height: 100% !important; }
}

/* v3.30: contact row is its own block; on phone it sits centred between Good to know and the belt */
.pg--visit .atom--find { margin-top: auto; padding-top: 14px; }
.pg--visit .atom--find .find-row { margin-bottom: 0; }
.pg--visit .atom--sign { margin-top: 0 !important; padding-top: 14px; }
@media (max-width: 767px) {
  .pg--visit .atom--find { margin-top: auto; margin-bottom: auto; padding-top: 0; }
}
@media (max-width: 767px) {
  .pg--visit .atom--find { padding-top: 12px; }
  .pg--visit .atom--sign { padding-top: 12px; }
}
@media (max-width: 767px) { .pg--visit .atom--find { padding-top: 8px; } }

.w3w-line b { color: var(--red); font-weight: 700; }

/* v3.32 Club page 2: cards stacked small on the left, words on the right */
.cards-split { display: grid; grid-template-columns: 40% 1fr; gap: 16px; align-items: center; margin-top: 6px; }
.cards-stack { display: grid; gap: 10px; }
.cards-stack .card-face { margin: 0; }
.cards-stack .card-face img { width: 100%; height: auto; display: block; }
.cards-words__big { font-family: var(--font-display); font-size: 17px; line-height: 1.15; margin: 0 0 10px; }
.cards-words__txt { font-size: 14px; line-height: 1.5; margin: 0; }
@media (min-width: 768px) {
  .cards-split { grid-template-columns: 38% 1fr; gap: 28px; }
  .cards-stack { gap: 14px; }
  .cards-words__big { font-size: 24px; }
  .cards-words__txt { font-size: 16px; }
}
@media (max-width: 767px) {
  .cards-words__big { font-size: 15.5px; margin-bottom: 8px; }
  .cards-words__txt { font-size: 13px; line-height: 1.45; }
}
@media (max-width: 767px) and (max-height: 620px) {
  .cards-split { grid-template-columns: 34% 1fr; gap: 12px; }
}

/* v3.38 What's On page */
.ev-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.ev { display: grid; grid-template-columns: 40% 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); }
.ev__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--ink); }
.ev__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.ev:hover .ev__pic img { transform: scale(1.05); }
.ev__pic--tile { background: var(--red); display: grid; place-items: center; }
.ev__pic--tile .jp { font-family: var(--font-jp); color: #fff; font-size: 44px; line-height: 1; }
.ev__txt { display: grid; gap: 4px; }
.ev__kick { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.ev__name { font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
.ev__line { font-size: 13px; line-height: 1.45; }
.ev__go { font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-top: 2px; }
@media (min-width: 768px) {
  .ev-list { gap: 20px; }
  .ev { gap: 24px; }
  .ev__pic--tile .jp { font-size: 64px; }
  .ev__name { font-size: 24px; }
  .ev__line { font-size: 15px; }
  .ev__kick { font-size: 10.5px; }
}
/* Homepage What's On banner, top of the portal */
.portal { position: relative; }
.whatson-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  background: var(--red); color: #fff; text-decoration: none; border-radius: 40px; padding: 8px 16px; box-shadow: 0 6px 18px rgba(215,32,42,.28); }
.whatson-bar__k { font-family: var(--font-display); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.whatson-bar__t { font-family: var(--font-body); font-weight: 600; font-size: 12px; }
.whatson-bar__t i { font-style: normal; opacity: .7; margin: 0 .2em; }
.whatson-bar__a { font-family: var(--font-display); font-size: 13px; }
.whatson-bar:active { transform: translateX(-50%) scale(.97); }
@media (min-width: 768px) { .whatson-bar { top: 16px; padding: 9px 20px; } .whatson-bar__t { font-size: 13px; } }

.whatson-bar { position: relative; top: auto; left: auto; transform: none; margin: 26px auto 0; align-self: center; }
.whatson-bar:active { transform: scale(.97); }
@media (min-width: 768px) { .whatson-bar { top: auto; margin-top: 30px; } }
.ev__pic--tile .jp { font-size: 40px; }
@media (min-width: 768px) {
  .ev { grid-template-columns: 30% 1fr; }
  .ev-list { gap: 14px; }
  .ev__pic--tile .jp { font-size: 52px; }
}
.whatson-bar { position: absolute !important; left: 50% !important; top: auto !important; bottom: 96px; transform: translateX(-50%) !important; margin: 0 !important; }
.whatson-bar:active { transform: translateX(-50%) scale(.97) !important; }
@media (min-width: 768px) { .whatson-bar { bottom: 92px; } }
@media (max-width: 767px) and (max-height: 620px) { .whatson-bar { bottom: 106px; } }

/* v3.39 What's On replaces Venue under the geisha: black outline pill */
.portal > .portal__door--whatson { border: 1.5px solid var(--ink); border-radius: 40px; padding: 7px 16px 6px; line-height: 1; white-space: nowrap; }
.portal > .portal__door--whatson::before, .portal > .portal__door--whatson::after { display: none !important; }
.portal > .portal__door--whatson .en { color: var(--ink); }
.portal > .portal__door--whatson:hover, .portal > .portal__door--whatson:active { background: var(--ink); }
.portal > .portal__door--whatson:hover .en, .portal > .portal__door--whatson:active .en { color: #fff; }
.portal > .portal__door--whatson { bottom: auto !important; height: auto !important; min-height: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; flex: none !important; }

/* v3.40 Whisky Night */
.ev__pic--light { background: #F3F0EA; border: 1px solid rgba(22,22,26,.12); }
.pairing { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--ink); color: #F3F0EA; padding: 16px; border-radius: 2px; margin-top: 4px; }
.pairing__head { font-family: var(--font-display); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.pairing__head .jp { font-family: var(--font-jp); color: var(--red); font-size: 13px; margin-left: 4px; letter-spacing: 0; }
.pairing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.35; }
.pairing i { font-style: normal; opacity: .55; }
.whisky-poster { margin: 10px 0 0; }
.whisky-poster a { font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); text-decoration: none; }
@media (min-width: 768px) {
  .pairing { padding: 22px 26px; gap: 28px; }
  .pairing__head { font-size: 13px; }
  .pairing ul { font-size: 15px; gap: 8px; }
}
/* v3.41 What's On pill moves under Membership */
.portal > .portal__door--whatson { top: auto !important; bottom: 104px; transform: translateX(-50%) !important; }
@media (min-width: 768px) { .portal > .portal__door--whatson { bottom: 100px; } }
@media (max-width: 767px) and (max-height: 620px) { .portal > .portal__door--whatson { bottom: 110px; } }
.portal > .portal__door--whatson { bottom: 104px !important; }
@media (min-width: 768px) { .portal > .portal__door--whatson { bottom: 100px !important; } }
@media (max-width: 767px) and (max-height: 620px) { .portal > .portal__door--whatson { bottom: 110px !important; } }
@media (min-width: 768px) and (min-height: 860px) { .portal > .portal__door--whatson { bottom: 150px !important; } }
/* v3.42 What's On pill in light grey */
.portal > .portal__door--whatson { border-color: #B5B1A9; }
.portal > .portal__door--whatson .en { color: #A8A49C; }
.portal > .portal__door--whatson:hover, .portal > .portal__door--whatson:active { background: #A8A49C; border-color: #A8A49C; }
.portal > .portal__door--whatson:hover .en, .portal > .portal__door--whatson:active .en { color: #fff; }
/* v3.43 What's On pill matches the Sushi / Kitchen / Drinks grey */
.portal > .portal__door--whatson { border-color: rgb(84, 84, 84); }
.portal > .portal__door--whatson .en { color: rgb(84, 84, 84); }
.portal > .portal__door--whatson:hover, .portal > .portal__door--whatson:active { background: rgb(84, 84, 84); border-color: rgb(84, 84, 84); }
.portal > .portal__door--whatson:hover .en, .portal > .portal__door--whatson:active .en { color: #fff; }

/* v3.45 Vegan Challenge dates, three event cards */
.vc-dates { list-style: none; margin: 6px 0 14px; padding: 0; border-top: 1px solid rgba(22,22,26,.15); }
.vc-dates li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(22,22,26,.15); }
.vc-dates__k { font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); min-width: 64px; }
.vc-dates__d { font-family: var(--font-display); font-size: 17px; }
.ev-list { gap: 12px; }
.ev { grid-template-columns: 34% 1fr; gap: 12px; }
.ev__name { font-size: 16px; }
.ev__line { font-size: 12.5px; }
@media (min-width: 768px) { .ev { grid-template-columns: 26% 1fr; } .ev__name { font-size: 21px; } .ev__line { font-size: 14px; } .ev-list { gap: 12px; } }

@media (min-width: 768px) and (max-height: 800px) { .pg--whatson .ev { grid-template-columns: 19% 1fr; } .pg--whatson .ev-list { gap: 10px; } .pg--whatson .ev__name { font-size: 19px; } }
@media (max-width: 767px) and (max-height: 620px) { .pg--whatson .ev { grid-template-columns: 28% 1fr; } .pg--whatson .ev-list { gap: 8px; } .pg--whatson .ev__line { font-size: 12px; } }

/* v3.46 Whisky Night booking */
.whisky-book { padding-top: 28px; padding-bottom: 90px; scroll-margin-top: var(--header-h); }
.whisky-book .ptitle { padding-inline: 0; }
.whisky-book .ptitle h2 { font-family: var(--font-display); font-weight: 400; line-height: 1; display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: 27.2px; color: var(--ink); }
.whisky-book .ptitle h2 .jp { font-family: var(--font-jp); color: var(--red); font-weight: 400; font-size: 22.4px; }
@media (min-width: 768px) { .whisky-book .ptitle h2 { font-size: 36.8px; } .whisky-book .ptitle h2 .jp { font-size: 30.4px; } }
@media (min-width: 1100px) { .whisky-book .ptitle h2 { font-size: 44.8px; } .whisky-book .ptitle h2 .jp { font-size: 36.8px; } }

.visit-hours b { color: var(--ink); font-weight: 600; }