/* ==========================================================================
   Suyaki – Design tokens
   ========================================================================== */

@font-face {
  font-family: "League Spartan";
  src: url("../fonts/League_Spartan/LeagueSpartan-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/Noto_Sans_SC/NotoSansSC-subset.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — warm beige primary background, red accent, warm-black type */
  --color-accent: #C8201A;   /* Accent red — hero type, buttons, links, accents */
  --color-black: #18110A;    /* Warm black — typography, never pure #000 */
  --color-white: #FFFFFF;    /* Elevated surfaces only — nav pill, showcase plate */
  --color-warm: #ECE9E0;     /* Primary background — page, hero, large sections */
  --color-gray: #E7E7E7;
  --color-muted: #6B6B6B;

  /* Font */
  --font-brand: "League Spartan", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-zh: "Noto Sans SC", "Noto Sans JP", sans-serif; /* Simplified Chinese for zh text */

  /* Type scale */
  --step-hero: clamp(4.5rem, 18vw, 13rem);
  --step-h2: clamp(2rem, 5vw, 3.5rem);
  --step-h3: clamp(1.25rem, 2.4vw, 1.75rem);
  --step-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --step-body: 1rem;
  --step-small: 0.875rem;

  /* Layout */
  --content-max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;

  /* Motion */
  --ease-organic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-plate: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow: 900ms;
  --dur-med: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-warm);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 { margin: 0; }

.jp { font-family: var(--font-jp); }
.zh { font-family: var(--font-zh); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-small);
  letter-spacing: 0.02em;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: background-color var(--dur-med) var(--ease-organic),
              color var(--dur-med) var(--ease-organic),
              border-color var(--dur-med) var(--ease-organic);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-black); }

.btn--secondary {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn--secondary:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.btn--small {
  padding: 0.6rem 1.25rem;
}

/* ==========================================================================
   Navigation — floating pill
   ========================================================================== */

.site-nav {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--color-white);
  border-radius: 999px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding: 1.3rem clamp(1.75rem, 4.5vw, 2.75rem);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__list a:hover {
  color: var(--color-accent);
}

.site-nav__list .zh {
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0;
}

@media (max-width: 480px) {
  .site-nav__list {
    gap: clamp(0.85rem, 4vw, 1.25rem);
    padding: 0.7rem 1.25rem;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Hero — full-bleed poster
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 14vw, 8rem) var(--gutter) var(--gutter);
  background: var(--color-warm);
  /* Shared font-size for the hero H1 — also drives the sushi image's Y
     position (see .hero__image below). Single source of truth avoids the
     Safari font-metric drift that made the sushi row sit ~50–70px too low
     when its top was a percentage of the H1's line-box. */
  --hero-title-size: clamp(4.25rem, 24vw, 21.5rem);
}

.hero__kicker {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(2.5rem, 6vw, 5.75rem);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-black);
  text-align: center;
}

.hero__stage {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__title {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--hero-title-size);
  line-height: 0.82;
  letter-spacing: -0.015em;
  color: var(--color-accent);
  text-transform: uppercase;
  text-align: center;
  /* Safari fix 2026-07-06: base state matches keyframe `from` so first
     paint can never briefly show the resting position before the delayed
     animation kicks in. */
  opacity: 0;
  transform: translateY(24px);
  animation: rise var(--dur-slow) var(--ease-organic) forwards;
}

.hero__image {
  position: absolute;
  z-index: 2;
  /* Anchor to H1 font-size directly, NOT to the stage's percentage height.
     Chrome's original `top: calc(66% - 60px)` produced ≈ 0.541 × font-size − 60px
     because stage height = 0.82 × font-size × line-height. Deriving from the
     H1 font-size variable makes the landing point identical in every browser,
     regardless of how it lays out the H1's line-box (the Safari drift). */
  top: calc(var(--hero-title-size) * 0.541 - 60px);
  left: 50%;
  width: min(47%, 660px);
  height: auto;
  object-fit: contain;
  /* Safari fix 2026-07-06: base transform combines centering + keyframe
     `from` offset in one value, so there is no discrepancy between the
     base rule and the animation start during the 150ms delay. */
  opacity: 0;
  transform: translate(-50%, 30px);
  animation: rise-image 1000ms var(--ease-organic) 150ms forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Safari-only desktop nudge for the hero sushi (2026-07-07).
   Even with the font-metric-independent `top` calc, Thomas reports Safari
   still lands the image slightly higher and slightly left of the approved
   sketch. `@supports (background: -webkit-named-image(i))` matches Safari
   (WebKit) only — Chrome and Firefox skip this block, so their landing
   position is untouched. Scoped to `min-width: 641px` so the mobile hero
   (which already has its own top override in the 640/430 media queries)
   is untouched too.
   Tuning: bump `top` and `left` offsets below if Safari still reads off.
   `translateX(-50%)` inside the keyframes stays as-is; adjusting `left`
   simply shifts the centre point. */
@media (min-width: 641px) {
  @supports (background: -webkit-named-image(i)) {
    .hero__image {
      top: calc(var(--hero-title-size) * 0.541 - 30px);
      left: calc(50% + 14px);
    }
  }
}
@keyframes rise-image {
  from { opacity: 0; transform: translate(-50%, 30px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.hero__stats {
  position: relative;
  z-index: 2;
  margin-top: clamp(3rem, 7vw, 6.5rem);
  text-align: center;
}

.hero__rating {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0 0 0.6rem;
}

.hero__address {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  letter-spacing: 0.02em;
  color: var(--color-black);
  margin: 0;
}

.hero__address a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-med) var(--ease-organic);
}

.hero__address a:hover,
.hero__address a:focus-visible {
  color: var(--color-accent);
}

/* Scroll indicator — chopsticks gently trying to pick up 料理.
   Geometry matches the approved sketch (40×57): sticks cross at the pivot
   (~y 9.3), tips hover 5px above the kanji. The kanji never moves. */

.hero__scroll {
  position: relative;
  z-index: 2;
  margin-top: clamp(2rem, 4.5vw, 3.5rem);
  width: 40px;
  color: var(--color-accent);
}

.hero__scroll-sticks {
  position: relative;
  width: 40px;
  height: 32px;
  margin-bottom: 5px;
  animation: scroll-dip 3.2s ease-in-out infinite;
}

.hero__scroll-stick {
  position: absolute;
  top: 0;
  display: block;
}

.hero__scroll-stick--diagonal {
  left: 11px;
  transform-origin: 10.5px 9.3px; /* crossing point of the two sticks */
  animation: scroll-pinch-diagonal 3.2s ease-in-out infinite;
}

.hero__scroll-stick--vertical {
  left: 20.5px;
  transform-origin: 1px 9.3px; /* crossing point of the two sticks */
  animation: scroll-pinch-vertical 3.2s ease-in-out infinite;
}

.hero__scroll-kanji {
  display: block;
}

/* Sticks drift down toward the kanji, hold while grabbing, then return. */
@keyframes scroll-dip {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(5px); }
  65%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

/* Tips close inward around the pivot while lowered — a gentle grab. */
@keyframes scroll-pinch-diagonal {
  0%, 30%       { transform: rotate(0deg); }
  50%, 60%      { transform: rotate(-6deg); }
  80%, 100%     { transform: rotate(0deg); }
}

@keyframes scroll-pinch-vertical {
  0%, 30%       { transform: rotate(0deg); }
  50%, 60%      { transform: rotate(6deg); }
  80%, 100%     { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-sticks,
  .hero__scroll-stick--diagonal,
  .hero__scroll-stick--vertical {
    animation: none; /* static indicator in its resting position */
  }
}

@media (max-width: 640px) {
  .hero {
    justify-content: center;
    gap: 0;
    padding-top: clamp(7rem, 26vw, 9rem);
    padding-bottom: clamp(3rem, 12vw, 4rem);
  }
}

/* ==========================================================================
   Section head
   ========================================================================== */

.section-head {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem;
}

.section-head__eyebrow {
  display: block;
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.section-head__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--step-h2);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Menu — category tabs + panels
   ========================================================================== */

.menu {
  position: relative;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(5rem, 10vw, 8rem);
  background: var(--color-warm);
}

.menu__panels {
  position: relative;
  z-index: 2;
}

.menu__header {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.menu__eyebrow {
  display: block;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.85rem;
}

.menu__eyebrow.zh {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  letter-spacing: 0.08em;
  text-transform: none;
}

.menu__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-black);
  margin-bottom: 0.85rem;
}

.menu__intro {
  font-size: var(--step-lead);
  color: var(--color-muted);
  max-width: 46ch;
}

/* Category dish photos — three isolated plates between intro and tabs.
   Proportions calibrated against the 1440px Figma frame:
   sushi ≈ 21.5%, dumplings ≈ 17%, wok ≈ 23.5% of the content width,
   bottom-aligned so the plates share a common baseline. */

.menu__dishes {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(1.25rem, 9vw, 8.5rem);
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2.25rem, 5vw, 4rem);
}

.menu__dish {
  height: auto;
  flex: 0 1 auto;
}

.menu__dish--sushi     { width: clamp(96px, 21.5%, 232px); }
.menu__dish--dumplings { width: clamp(76px, 17%,   184px); }
.menu__dish--wok       { width: clamp(104px, 23.5%, 254px); }

/* Sticky tab bar — horizontal scroll on mobile, wraps on desktop */

.menu__tabs-wrap {
  position: sticky;
  top: clamp(4.5rem, 9vw, 6rem);
  z-index: 40;
  margin: 0 calc(-1 * var(--gutter)) clamp(2rem, 5vw, 3rem);
  padding: 0.85rem var(--gutter);
  background: var(--color-warm);
  background: color-mix(in srgb, var(--color-warm) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-gray);
}

.menu__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding: var(--gutter);
}

.menu__tabs::-webkit-scrollbar { display: none; }

.menu__tab {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-black);
  background: transparent;
  border: 1px solid rgba(24, 17, 10, 0.28);
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-med) var(--ease-organic),
              background-color var(--dur-med) var(--ease-organic),
              border-color var(--dur-med) var(--ease-organic);
}

.menu__tab:hover {
  border-color: var(--color-black);
}

.menu__tab.is-active {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Panels — two-column dish list on desktop, single column on mobile */

.menu__panel {
  display: none;
}

.menu__panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  row-gap: 0;
  animation: menu-fade var(--dur-med) var(--ease-organic) both;
}

@media (max-width: 720px) {
  .menu__panel.is-active {
    grid-template-columns: 1fr;
  }

  /* Mobile: wrap category chips to multiple rows instead of horizontal
     scroll. All 8 categories visible at once — no hidden overflow.
     Chip design, active state, colours and markup unchanged.
     Fix requested 2026-07-06 (Beirutsbrygga-style pattern). */
  .menu__tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0.5rem;
  }
}

@keyframes menu-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(24, 17, 10, 0.16);
}

.menu__item-name {
  font-weight: 600;
  font-size: var(--step-body);
  color: var(--color-black);
  margin: 0 0 0.2rem;
}

.menu__item-desc {
  margin: 0;
  font-size: var(--step-small);
  color: var(--color-muted);
  line-height: 1.5;
}

.menu__item-price {
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--step-body);
  color: var(--color-black);
  white-space: nowrap;
}

.menu__status {
  text-align: center;
  font-size: var(--step-small);
  color: var(--color-muted);
  padding: 2rem 0;
}

/* ==========================================================================
   Placeholder image blocks (generic)
   ========================================================================== */

.placeholder-image {
  background: var(--color-gray);
  display: block;
  overflow: hidden;
}

/* ==========================================================================
   Bra råvaror — static editorial composition
   ==========================================================================
   Heading + a single, static sushi row image.
   No plate animation, no split pieces — the image is one asset, unmoving.
   Only the heading fades in (subtle, once, on scroll).
   ========================================================================== */

.hero-plate {
  background: var(--color-white);
  padding: clamp(4.5rem, 12vw, 10rem) var(--gutter) clamp(3.5rem, 9vw, 7rem);
  text-align: center;
}

.hero-plate__text {
  max-width: 15.2em;
  margin: 0 auto clamp(2rem, 5.5vw, 5rem);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(2.5rem, 6.25vw, 5.625rem);
  line-height: 1.111;
  letter-spacing: 0;
  color: #79B44C; /* wasabi green */
}

.hero-plate__image {
  display: block;
  max-width: min(100%, 78.75rem); /* ≈1260px cap, matches asset native size */
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/*
 * Heading reveal is now handled by the generalized `.reveal` /
 * `.is-visible` mechanism at the end of this stylesheet — same
 * transition-based recipe used across Menu, About, Order and Footer,
 * so the hero-plate heading behaves identically to the other
 * editorial texts. The old dedicated `.hero-plate.is-ready` /
 * `.hero-plate.is-visible` keyframe animation was removed 2026-07-07
 * because it could miss on smooth-scroll passes (both classes were
 * added on the same tick, so no perceptible fade played).
 */

/* ==========================================================================
   Editorial statement — 料理 + Swedish
   ========================================================================== */

.statement {
  background: var(--color-warm);
  padding: clamp(4.5rem, 11vw, 8rem) var(--gutter) clamp(8rem, 21vw, 19rem); /* Bottom padding restored 2026-07-05 to preserve the vertical air the removed scroll arrow used to occupy */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.statement__zh {
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: clamp(4.5rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #D73A1E;
  margin: 0;
}

.statement__nigiri {
  display: block;
  width: min(66%, 440px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  margin-top: clamp(-2.5rem, -3vw, -1rem);
}

/* ==========================================================================
   Chinese section
   ========================================================================== */

.chinese {
  position: relative;
  overflow: hidden;
  background: #C21B21;
  color: #FFE1A3;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}

/* Seigaiha wave pattern — tone-on-tone red, tiled across the full section */
.chinese::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/seigaiha-red-pattern-bg.svg");
  background-size: 500px 250px;
  background-repeat: repeat;
  opacity: 0.55;
  pointer-events: none;
}

.chinese__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.chinese__head {
  margin-bottom: clamp(3rem, 8vw, 5.5rem);
}

.chinese__heading {
  display: block;
  font-family: var(--font-zh);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: #FFE1A3;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.chinese__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.02em;
  color: #FFE1A3;
  margin: 0 0 0.4rem;
}

.chinese__lead {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  color: #FFE1A3;
  max-width: 48ch;
  margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
}

.chinese__note {
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  letter-spacing: 0.04em;
  color: #FFE1A3;
  margin: 0;
}

.chinese__dishes {
  list-style: none;
  margin: 0 0 clamp(3rem, 8vw, 6rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.75rem, 6vw, 4.75rem) clamp(1.5rem, 4vw, 3rem);
  justify-items: center;
}

.chinese__dish {
  text-align: center;
}

.chinese__dish-zh {
  display: block;
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #FFE1A3;
}

.chinese__dish-sv {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.875rem, 1.3vw, 1rem);
  letter-spacing: 0.01em;
  color: #FFE1A3;
  margin-top: 0.5rem;
}

.chinese__dish-photo {
  display: block;
  width: min(66%, 620px);
  height: auto;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .chinese__dishes {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .chinese__dish-zh {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
  }

  .chinese__dish-photo {
    width: min(88%, 460px);
  }
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  position: relative;
  background: var(--color-warm);
  padding: clamp(4.5rem, 14.5vw, 13.5rem) var(--gutter);
  overflow: hidden;
}

/* Seigaiha pattern — tiled, behind all content, kept subtle */
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/seigaiha-beige.svg") repeat;
  background-size: 500px 250px;
  opacity: 0.55;
  pointer-events: none;
}

.about__inner {
  position: relative;
  z-index: 1;
  /* Column tracks the heading width (heading ≈ 7.65 × its font-size,
     font-size = clamp(2.1rem, 6.3vw, 5.65rem)) so the body never
     renders wider than the heading on tablet/mobile. */
  max-width: min(100%, clamp(16rem, 48.2vw, 40.5rem));
  margin: 0 auto;
}

.about__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.25vw, 5.625rem); /* 90px at 1440 — approved Suyaki display H2 style */
  line-height: 1.111; /* 100px at 90px */
  letter-spacing: -0.02em;
  color: var(--color-accent);
  text-align: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(2rem, 4.5vw, 4.25rem);
}

.about__text {
  font-size: clamp(1.05rem, 1.8vw, 1.625rem);
  line-height: 1.45;
  color: var(--color-black);
  margin: 0 0 1.35em;
}

.about__text:last-child { margin-bottom: 0; }

/* ==========================================================================
   Order
   ========================================================================== */

.order {
  position: relative;
  background: var(--color-white);
  padding: clamp(3.5rem, 6.5vw, 6rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  overflow: hidden;
}

.order__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
}

.order__title {
  font-family: var(--font-body); /* Manrope */
  font-weight: 400; /* Regular */
  font-size: clamp(2.5rem, 6.25vw, 5.625rem); /* 90px at 1440 */
  line-height: 1.111; /* 100px at 90px */
  letter-spacing: -0.02em; /* -2% */
  color: var(--color-accent); /* unchanged */
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.order__call {
  margin-bottom: clamp(4rem, 9vw, 8rem);
}

.order__lead {
  font-size: var(--step-lead);
  margin-bottom: 0.25rem;
}

.order__phone {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  margin: 0;
}

.order__phone a {
  color: var(--color-black);
  text-decoration: none;
}

.order__phone a:hover,
.order__phone a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.order__delivery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}

.order__uber-logo {
  width: clamp(10rem, 17vw, 15.5rem);
  height: auto;
}

.order__uber:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.order__delivery-link {
  font-size: var(--step-lead);
  margin: 0;
}

.order__delivery-link a {
  color: var(--color-black);
  text-decoration: none;
}

.order__delivery-link a:hover,
.order__delivery-link a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.order__bowl {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(13rem, 29vw, 27rem);
  height: auto;
}

.order__note {
  position: relative;
  z-index: 1;
  font-size: var(--step-small);
  color: var(--color-muted);
  margin-top: clamp(6rem, 12vw, 11rem);
}

@media (max-width: 820px) {
  .order__bowl {
    position: static;
    transform: none;
    display: block;
    width: min(60vw, 20rem);
    margin: clamp(2.5rem, 6vw, 4rem) calc(-1 * var(--gutter)) 0 auto;
  }

  .order__note {
    margin-top: clamp(2.5rem, 6vw, 4rem);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-warm);
  padding: clamp(4rem, 9vw, 7.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  overflow: hidden;
}

/* Main visual — 料理 with sushi overlapping the lower part of the letters */

.site-footer__visual {
  --footer-sushi-w: min(72vw, 35rem);
}

.site-footer__zh {
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: clamp(6rem, 26vw, 23.5rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 0;
}

.site-footer__sushi {
  display: block;
  width: var(--footer-sushi-w);
  height: auto;
  margin: calc(var(--footer-sushi-w) * -0.105) auto 0;
  position: relative;
  z-index: 1;
}

/* Contact */

.site-footer__contact {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.site-footer__phone {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  letter-spacing: 0.01em;
  color: var(--color-black);
  text-decoration: none;
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
  color: var(--color-accent);
}

.site-footer__address {
  margin-top: clamp(0.85rem, 1.5vw, 1.25rem);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4C463D;
}

.site-footer__address-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}

.site-footer__address-link:hover,
.site-footer__address-link:focus-visible {
  color: var(--color-accent);
}

/* Bottom legal bar */

.site-footer__legal {
  margin-top: clamp(5.5rem, 10vw, 9rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  text-align: left;
}

.site-footer__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__meta li + li::before {
  content: "\00B7";
  margin-right: 0.75rem;
  color: var(--color-muted);
}

.site-footer__legal a {
  color: inherit;
  text-decoration: none;
}

.site-footer__meta a[href="integritetspolicy.html"],
.site-footer__credit a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--color-accent);
}

.site-footer__credit {
  margin: 0;
}

@media (max-width: 640px) {
  .site-footer__legal {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .site-footer__meta {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================================================
   Cookie banner + Anpassa modal
   Built 2026-07-06 to Thomas's Figma sketch (Cookie-banner.png, Suyaki_FOOTER_Cookie.png)
   - Banner: elevated white card, fixed bottom, slides up on first visit,
     fortune-cookie image bleeds off the left; click cookie = swap text for
     a random fortune from the JS FORTUNES list.
   - Buttons: beige #D5CAA0 sampled from sketch; primary uses accent red.
   - Modal: "Anpassa" opens two-row toggle panel (Nödvändiga locked / Analys
     togglable). Save = persist to localStorage + hide banner.
   ========================================================================== */

:root {
  --cookie-beige: #D5CAA0;         /* sampled from Thomas's sketch */
  --cookie-beige-hover: #C7BB8C;
  --cookie-card: #FFFFFF;
  --cookie-radius: 16px;
  --cookie-shadow: 0 20px 60px rgba(24, 17, 10, 0.15);
}

/* -------- Banner ---------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 1.5vw, 1.5rem);
  transform: translate(-50%, 120%);
  width: min(calc(100vw - 2rem), 1160px);
  z-index: 1000;
  background: var(--cookie-card);
  border-radius: var(--cookie-radius);
  box-shadow: var(--cookie-shadow);
  opacity: 0;
  transition: transform 320ms var(--ease-organic), opacity 220ms ease-out;
}
.cookie-banner.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-left: clamp(6rem, 12vw, 10rem); /* room for the cookie that bleeds left */
}

/* Fortune cookie image, bleeds off the left edge of the card */
.cookie-banner__cookie {
  position: absolute;
  left: clamp(-2.5rem, -3vw, -1.5rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(7rem, 12vw, 11rem);
  height: auto;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform 250ms var(--ease-organic);
}
.cookie-banner__cookie:hover { transform: translateY(-50%) rotate(-4deg) scale(1.03); }
.cookie-banner__cookie:active { transform: translateY(-50%) rotate(-6deg) scale(0.98); }
.cookie-banner__cookie:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: 8px;
}
.cookie-banner__cookie.is-cracked { transform: translateY(-50%) rotate(-8deg); }
.cookie-banner__cookie-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.cookie-banner__text {
  width: 420px;
  min-width: 420px;
  max-width: 420px;
}

/* Text zone */
.cookie-banner__text { min-width: 0; }
.cookie-banner__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin: 0 0 0.5rem;
}
.cookie-banner__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.55;
  color: rgba(24, 17, 10, 0.72);
  margin: 0;
}

/* Fortune state — replaces default text */
.cookie-banner__fortune {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.35;
  color: var(--color-accent);
  margin: 0 0 0.6rem;
}
.cookie-banner__fortune-again {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: color 0.15s ease;
}
.cookie-banner__fortune-again:hover,
.cookie-banner__fortune-again:focus-visible { color: var(--color-accent); }

/* Actions column */
.cookie-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 12rem;
}

/* -------- Buttons -------------------------------------------------------- */

.cookie-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--color-black);
  background: var(--cookie-beige);
  border: 0;
  border-radius: 8px;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  min-height: 44px; /* touch target */
  text-align: center;
}
.cookie-btn:hover { background: var(--cookie-beige-hover); }
.cookie-btn:active { transform: translateY(1px); }
.cookie-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Primary variant — accent red */
.cookie-btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.cookie-btn--primary:hover { background: #A81915; }

/* -------- Modal ---------------------------------------------------------- */

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.cookie-modal.is-visible { opacity: 1; }
.cookie-modal[hidden] { display: none; }

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 17, 10, 0.5);
}

.cookie-modal__card {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--cookie-card);
  border-radius: var(--cookie-radius);
  box-shadow: var(--cookie-shadow);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transform: translateY(12px);
  transition: transform 220ms var(--ease-organic);
}
.cookie-modal.is-visible .cookie-modal__card { transform: translateY(0); }

.cookie-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1.1rem;
  border-radius: 50%;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cookie-modal__close:hover { background: rgba(24, 17, 10, 0.06); color: var(--color-black); }
.cookie-modal__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.cookie-modal__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin: 0 2.5rem 0.5rem 0;
}
.cookie-modal__intro {
  font-family: var(--font-body);
  font-size: 0.925rem;
  line-height: 1.55;
  color: rgba(24, 17, 10, 0.72);
  margin: 0 0 1.75rem;
}

.cookie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(24, 17, 10, 0.1);
}
.cookie-row__text { flex: 1; min-width: 0; }
.cookie-row__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-black);
  margin: 0 0 0.25rem;
}
.cookie-row__body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(24, 17, 10, 0.72);
  margin: 0;
}

/* Switch */
.cookie-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
}
.cookie-switch--locked { cursor: default; }
.cookie-switch__track {
  width: 44px;
  height: 24px;
  background: rgba(24, 17, 10, 0.18);
  border-radius: 999px;
  position: relative;
  transition: background-color 0.2s ease;
  display: inline-block;
}
.cookie-switch__track.is-on { background: var(--color-accent); }
.cookie-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.cookie-switch__track.is-on .cookie-switch__thumb { transform: translateX(20px); }
.cookie-switch__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cookie-switch:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 999px;
}

.cookie-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(24, 17, 10, 0.1);
}

/* -------- Mobile -------------------------------------------------------- */

@media (max-width: 640px) {
  .cookie-banner {
    width: calc(100vw - 1rem);
    bottom: 0.5rem;
  }
  .cookie-banner__inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    padding-top: 4.5rem; /* room for the cookie tucked at top-left */
  }
  .cookie-banner__cookie {
    left: 0.5rem;
    top: 0.25rem;
    transform: none;
    width: 4.5rem;
  }
  .cookie-banner__cookie:hover { transform: rotate(-4deg) scale(1.03); }
  .cookie-banner__cookie:active { transform: rotate(-6deg) scale(0.98); }
  .cookie-banner__cookie.is-cracked { transform: rotate(-8deg); }
  .cookie-banner__actions { min-width: 0; }
  /* Mobile overflow fix (2026-07-07): the desktop rule locks
     .cookie-banner__text to a fixed 420px (width + min-width +
     max-width). On mobile the grid switches to a single column,
     but that fixed width forces the text container to bleed out
     the right edge of the white panel. Release the lock and let
     the container fill the parent grid cell. box-sizing is
     enforced defensively so any inherited padding/border can't
     push it over the edge. */
  .cookie-banner__text {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cookie-modal__actions { flex-direction: column-reverse; }
  .cookie-modal__actions .cookie-btn { width: 100%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-modal,
  .cookie-modal__card,
  .cookie-banner__cookie,
  .cookie-switch__thumb,
  .cookie-switch__track { transition: none !important; }
}

/* ==========================================================================
   Mobile polish (2026-07-07) — align implementation with the mobile
   Figma sketches (iPhone 14/15 Pro Max, 430px, transcribed).
   Desktop (>640px) is intentionally untouched by every rule in this block.
   All rules are additive overrides scoped to max-width media queries.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- Navigation pill: wider, more generous spacing on mobile ---------- */
  .site-nav {
    top: clamp(0.75rem, 3vw, 1.25rem);
    width: calc(100% - 2rem);
    max-width: 26rem;
  }
  .site-nav__list {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.05rem 1.75rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
  }

  /* --- Hero mobile polish (2026-07-08) — typography + stacking order
         re-tuned against the iPhone 14/15 Pro Max Figma sketch. Sizes and
         colours are exact per Thomas's brief; visual hierarchy is:
         kicker → SUYAKI → sushi → phone → rating → address → hours →
         chopsticks. Order is achieved via `display: contents` on
         `.hero__address` so its children become flex items of
         `.hero__stats`, then reordered with `order`. No HTML changes;
         desktop layout entirely untouched (all rules live inside this
         `max-width: 640px` block). --------------------------------------- */

  /* Kicker: "Sushi · Wok · Dumplings" — Regular 20px, warm black. */
  .hero__kicker {
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    color: #18110A;
  }

  /* Sushi row sits ~10px lower than the previous mobile calibration so it
     rests visually on the lower part of the SUYAKI letters per the sketch.
     Previous: `calc(... - 8px)`. New: `calc(... + 2px)` = +10px shift. */
  .hero__image {
    top: calc(var(--hero-title-size) * 0.541 + 2px);
  }

  /* Stats becomes an ordered column. `display: contents` on the address
     paragraph lifts its children (addr, hours, tel) into this flex layout
     so we can position the phone above the rating without touching the
     DOM. Screen-reader order is unchanged. */
  .hero__stats {
    margin-top: clamp(4rem, 14vw, 5.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 6vw, 2.5rem);
  }
  .hero__address {
    display: contents;
  }

  /* Order per sketch: phone → rating → address → hours. */
  .hero__address .hero__tel { order: 1; }
  .hero__rating             { order: 2; }
  .hero__addr               { order: 3; }
  .hero__hours              { order: 4; }

  /* Phone — Manrope Bold 30px, warm black. */
  .hero__address .hero__tel {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.875rem;
    letter-spacing: 0.01em;
    color: #18110A;
    text-decoration: none;
    text-align: center;
  }
  .hero__address .hero__tel:hover,
  .hero__address .hero__tel:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Uber Eats rating — Manrope SemiBold 28px, wasabi green #417A15. */
  .hero__rating {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #417A15;
    margin: 0;
    text-align: center;
  }

  /* Address + opening hours — Manrope Regular 20px, warm black,
     uppercase, tight centred line-height for two-line stacking. */
  .hero__addr,
  .hero__hours {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #18110A;
    text-align: center;
    line-height: 1.25;
    max-width: 20ch;
  }

  /* Separators + "Telefon" label stay hidden on mobile (desktop-only chrome). */
  .hero__sep,
  .hero__tel-label { display: none; }

  /* Scroll indicator sits a touch closer to the stats on mobile */
  .hero__scroll { margin-top: clamp(2.5rem, 8vw, 3.5rem); }

  /* --- 料理 statement: less runaway bottom padding on mobile ------------ */
  .statement {
    padding-bottom: clamp(4rem, 14vw, 7rem);
  }

  /* --- Bra råvaror: keep the sushi row from bleeding wider than viewport */
  .hero-plate { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* --- Menu title larger on mobile per sketch ---------------------------- */
  .menu__title {
    font-size: clamp(3.75rem, 15vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
  }
  .menu__eyebrow.zh {
    font-size: 1.5rem;
  }
  .menu__intro {
    font-size: 1.0625rem;
    color: var(--color-muted);
  }

  /* Category dish photos: keep proportions but avoid overflow at 390 */
  .menu__dishes {
    gap: clamp(0.75rem, 4vw, 1.5rem);
    margin: clamp(1.5rem, 5vw, 2rem) 0 clamp(1.75rem, 5vw, 2.5rem);
  }

  /* --- Chinese specialties: title/lead breathe more on mobile ----------- */
  .chinese__heading { font-size: clamp(2.75rem, 11vw, 3.5rem); }
  .chinese__title { font-size: 1.125rem; }
  .chinese__lead {
    font-size: 1.0625rem;
    line-height: 1.4;
    max-width: 22ch;
  }

  /* --- About H2: allow natural 3-line wrap on mobile per sketch --------- */
  .about__title {
    width: auto;
    max-width: 100%;
    font-size: clamp(3rem, 12vw, 4rem);
    line-height: 1.08;
    text-wrap: balance;
  }
  /* Hard <br> in HTML would land on line 2; on mobile we prefer natural
     3-line balance ("Sushi, wok / och kinesiska / smaker"). Neutralize
     the <br> only on narrow viewports. */
  .about__title br { display: none; }
  .about__inner {
    max-width: 100%;
  }
  .about__text {
    font-size: 1.125rem;
    line-height: 1.5;
  }

  /* --- Order H2: bump up so it lands closer to the sketch scale --------- */
  .order__title {
    font-size: clamp(3rem, 12vw, 4.25rem);
    line-height: 1.08;
    margin-bottom: clamp(2rem, 6vw, 3rem);
  }
  .order__lead {
    font-size: 1.125rem;
  }
  .order__phone {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    margin-top: 0.25rem;
  }
  .order__uber-logo { width: clamp(11rem, 40vw, 14rem); }
  .order__delivery-link { font-size: 1.0625rem; }

  /* --- Footer: separate address block from opening hours per sketch ----- */
  .site-footer {
    padding-top: clamp(3rem, 10vw, 5rem);
  }
  .site-footer__phone {
    font-size: clamp(1.65rem, 7vw, 2rem);
  }
  .site-footer__address {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 1.75rem);
    line-height: 1.25;
  }
  .site-footer__addr-sep { display: none; }
  .site-footer__addr,
  .site-footer__hours {
    display: block;
  }

  /* Legal bar: stack each item on its own centered line, drop dot seps.
     The base rule at ≤640 already flex-wraps; we harden that here. */
  .site-footer__legal {
    margin-top: clamp(4rem, 12vw, 6rem);
    gap: 1.25rem;
  }
  .site-footer__meta {
    flex-direction: column;
    gap: 0.65rem;
  }
  .site-footer__meta li + li::before { content: none; margin: 0; }
  .site-footer__credit {
    max-width: 20ch;
    line-height: 1.5;
  }
}

/* Extra-narrow (≤430px, iPhone Pro Max width) — a light second pass ----- */
@media (max-width: 430px) {
  .site-nav__list {
    padding: 0.95rem 1.35rem;
    gap: 0.55rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
  }
  .about__title  { font-size: clamp(2.75rem, 12.5vw, 3.75rem); }
  .order__title  { font-size: clamp(2.75rem, 12.5vw, 3.75rem); }
  .menu__title   { font-size: clamp(3.5rem, 15.5vw, 4.5rem); }
}

/* ==========================================================================
   Text reveal — subtle premium fade + upward drift
   Scoped to selected headings and short intro texts. One-time, on scroll.
   Layout is never affected (base state has no transform), only visibility.
   Reduced-motion users see everything immediately (initial state is gated).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================================
   Desktop Hero refinement — 2026-07-08
   --------------------------------------------------------------------
   Typography, hierarchy and optical spacing per the approved desktop
   Figma sketch. Reorders the existing HTML (no DOM changes) via
   `display: contents` on `.hero__address` plus `flex-wrap: wrap` and
   `order` on `.hero__stats`, promoting the phone above the rating as
   the primary CTA.

   Row 1  Phone       Manrope 700 34px  #18110A   (primary CTA)
   Row 2  Rating      Manrope 600 28px  #417A15
   Row 3  Address     Manrope 400 16px  #18110A   (single inline line)

   All rules are scoped to `min-width: 641px` so the approved mobile
   Hero (`max-width: 640px` block, ~line 1600) is entirely untouched.
   Zero HTML changes; zero mobile CSS changes.
   ==================================================================== */

@media (min-width: 641px) {

  /* Stats — flex row that wraps into three stacked rows via
     `flex-basis: 100%` on the phone and rating. The visible address
     children (addr, sep, hours) all share the last row inline.
     Vertical rhythm tightened 2026-07-08 (final polish) so the whole
     Hero — including the chopstick scroll indicator — fits above the
     fold at 1440×900 while keeping the "premium" feeling. */
  .hero__stats {
    margin-top: clamp(3rem, 4.5vw, 4.5rem);   /* logo→phone: ~65px @1440 (was 88) */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: 0;
    row-gap: clamp(1.25rem, 2.2vw, 2rem);     /* tighter rhythm: reduces competition and keeps scroll visible */
  }

  /* Lift address children into `.hero__stats` so `order` can reorder
     phone above rating without touching the DOM. */
  .hero__address {
    display: contents;
  }

  /* Row 1 — Phone. Manrope Bold 34px, warm black. Primary CTA. */
  .hero__address .hero__tel {
    order: 1;
    flex-basis: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.75rem, 2.4vw, 2.125rem); /* 28→34px */
    letter-spacing: 0.005em;
    color: var(--color-black);
    text-align: center;
    text-decoration: none;
    transition: color var(--dur-med) var(--ease-organic);
  }
  .hero__address .hero__tel:hover,
  .hero__address .hero__tel:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }

  /* Row 2 — Uber Eats rating. Manrope SemiBold 28px, wasabi green. */
  .hero__rating {
    order: 2;
    flex-basis: 100%;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.375rem, 2vw, 1.75rem);   /* 22→28px */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #417A15;
    margin: 0;
    text-align: center;
  }

  /* Row 3 — Address group inline. Manrope Regular 16px uppercase, warm
     black. Addr, first sep, and hours share the row centered by the
     container's `justify-content: center`. `margin-top` adds a small
     optical increment on top of the base row-gap so the rating→address
     step reads slightly larger than phone→rating — hierarchy step down
     to the smaller supporting text. */
  .hero__addr,
  .hero__hours {
    order: 3;
    margin-top: clamp(0.125rem, 0.15vw, 0.25rem); /* +~2px optical @1440 */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.875rem, 1vw, 0.9375rem);  /* 14→15px; supporting info, less visual competition */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-black);
    line-height: 1.4;
  }

  /* Visible sep — the one between addr and hours. Optical padding
     around the middle dot for a calmer rhythm; matches the address
     type styles so vertical alignment holds. */
  .hero__addr + .hero__sep {
    order: 3;
    margin-top: clamp(0.125rem, 0.15vw, 0.25rem); /* match addr/hours */
    padding: 0 0.35em;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.875rem, 1vw, 0.9375rem);
    letter-spacing: 0.06em;
    color: var(--color-black);
    line-height: 1.4;
  }

  /* Hide the "Telefon " label + the sep that used to precede it —
     both are inline-layout chrome no longer needed with phone on
     its own row. */
  .hero__tel-label {
    display: none;
  }
  .hero__hours + .hero__sep {
    display: none;
  }

  /* Kicker — increase word-spacing so the middle dots in
     "SUSHI · WOK · DUMPLINGS" sit with a hair more optical air
     without touching letter-spacing on the letterforms themselves. */
  .hero__kicker {
    word-spacing: 0.3em;
  }

  /* Chopstick scroll indicator — tighter margin so the full Hero
     (including the chopstick + 料理 mark) fits above the fold at
     1440×900. Was base `clamp(2rem, 4.5vw, 3.5rem)` (~56px @1440),
     now ~28px @1440. Mobile keeps its own margin in the
     `max-width: 640px` block below. */
  .hero__scroll {
    margin-top: clamp(1rem, 2vw, 1.75rem);
  }
}

/* ==========================================================================
   Ticker — informational announcement bar (2026-07-26, v3)
   --------------------------------------------------------------------------
   Fixed strip at the top of the page. Present only when /api/ticker says
   the ticker is active AND expiresAt lies in the future AND the message is
   non-empty. Layout details:

     .ticker              full-width fixed strip, height var(--ticker-h)
       .ticker__sr        the ONE semantic copy, off-screen, focusable
       .ticker__track     the animated element, translateX(-50%) loop
         .ticker__half    aria-hidden wrapper, viewport+margin wide
           .ticker__lane  a single copy of the message; JS decides how
                          many of these each half contains so that each
                          half is always at least viewport+margin wide
         .ticker__half    byte-identical duplicate → seamless loop point

   Ticker height is exposed as --ticker-h (40 px desktop, 36 px mobile) so
   the same variable feeds body padding, nav offset, hero min-height and
   html.scroll-padding-top. See below.
   ========================================================================== */

:root {
  --ticker-h: 40px;
}
@media (max-width: 640px) {
  :root { --ticker-h: 36px; }
}

/* When the ticker is active, reserve height + shift nav + adjust hero +
   compensate anchor-link scroll landing. */
html.has-ticker body {
  padding-top: var(--ticker-h);
}
html.has-ticker .site-nav {
  top: calc(var(--ticker-h) + clamp(0.75rem, 2vw, 1.75rem));
}
html.has-ticker .hero {
  min-height: calc(100svh - var(--ticker-h));
  min-height: calc(100vh  - var(--ticker-h));
}
html.has-ticker {
  scroll-padding-top: calc(var(--ticker-h) + 0.5rem);
}

.ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ticker-h);
  z-index: 200; /* above .site-nav (100), below cookie banner/modal (1000/1100) */
  background: var(--color-accent);
  color: var(--color-warm);
  overflow: hidden;
  display: flex;
  align-items: center;
  contain: layout paint;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.ticker__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: suyaki-ticker-slide var(--ticker-dur, 40s) linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}

.ticker__half {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
}

.ticker__lane {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  flex-shrink: 0;
  padding-right: clamp(2.5rem, 6vw, 5rem);
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1;
}
.ticker__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* The single accessible copy — screen readers read this once, keyboard
   users can tab to its link. Made visible only on focus so the link can
   be operated. */
.ticker__sr {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.5rem 1rem;
  margin: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  font: inherit;
  color: inherit;
}
.ticker__sr:focus-within {
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  white-space: normal;
  background: var(--color-accent);
  z-index: 1;
}

@media (max-width: 640px) {
  .ticker__lane {
    font-size: 0.8125rem;
    padding-right: clamp(2rem, 8vw, 3rem);
  }
}

@keyframes suyaki-ticker-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion: text is centred, static, single copy — the JS builds
   a single lane per half, and CSS hides the second half + collapses the
   remaining half to a centred, wrap-allowed line. */
@media (prefers-reduced-motion: reduce) {
  .ticker { justify-content: center; }
  .ticker__track {
    animation: none;
    transform: none;
    width: 100%;
    justify-content: center;
    padding: 0 var(--gutter);
  }
  .ticker__half + .ticker__half { display: none; }
  .ticker__half {
    width: 100%;
    justify-content: center;
  }
  .ticker__lane {
    white-space: normal;
    padding-right: 0;
    text-align: center;
  }
}