/* ==========================================================================
   theme.css — Yugeya 湯気屋, a neighbourhood ramen counter.
   Idea: a Showa-era shop front. The header is the lintel, a red noren hangs
   from it, and the menu is a wall of meal tickets (食券) where the price is
   the loudest thing on each ticket. Flat colour, hard edges, no gradients.

   1. Variables   2. Base   3. Shared pieces   4. Sections in page order
   5. Wider screens   6. Motion and print
   ========================================================================== */

/* ---- 1. Variables -------------------------------------------------------- */

:root {
  --paper: #F4E8CF;
  --paper-hi: #FFF6E0;
  --red: #C92A12;
  --ink: #1B1511;
  --ink-soft: #4A3C31;
  --yolk: #F6B81F;

  --font-display: "Dela Gothic One", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body: "Familjen Grotesk", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;

  --gutter: 1rem;
  --page-max: 72rem;
  --band-pad: 3.25rem;
  --rule: 3px;                       /* the one line weight used everywhere */
  --rod: 6px;                        /* the header's bottom edge, the noren rod */
  --press: 4px;                      /* hard offset under buttons */
  --header-h: 3.25rem;               /* the one header row */

  /* Variables read by base.css */
  --focus-color: var(--ink);
  --focus-width: 3px;
  --scroll-offset: calc(var(--header-h) + var(--rod) + 0.75rem);
  --actionbar-height: 4.25rem;
}

/* ---- 2. Base ------------------------------------------------------------- */

/* base.css applies --scroll-offset twice (scroll-padding-top on html and
   scroll-margin-top on [id]); the two add up. Keep the scroll-padding, which
   also protects focused elements from the sticky header. */
[id] {
  scroll-margin-top: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Japanese line-height, letter-spacing and phrase breaking come from
   base.css (--ja-line-height, --ja-letter-spacing). */
html[data-lang="ja"] body {
  font-family: var(--font-ja);
  font-size: 1rem;
  line-break: strict;
  font-feature-settings: "palt";
}

html[data-lang="ja"] :is(p, dd, li) {
  text-wrap: pretty;
}

/* Running text that has its own line-height in sv/en follows the base
   Japanese rhythm instead. */
html[data-lang="ja"] :is(.notice, .hero__sub, .ticket__desc, .footer__legal) {
  line-height: var(--ja-line-height);
}

html[data-lang="sv"] :is(h1, h2, h3) {
  hyphens: manual;
}

[lang="ja"] {
  font-family: var(--font-ja);
}

a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

::selection {
  background: var(--yolk);
  color: var(--ink);
}

/* ---- 3. Shared pieces ---------------------------------------------------- */

.band {
  padding: var(--band-pad) var(--gutter);
}

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
}

.title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

html[data-lang="ja"] .title {
  font-size: clamp(1.7rem, 6.6vw, 2.6rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.subtitle {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.25;
}

/* Dela Gothic One clogs in kanji below ~1.5rem: small Japanese headings use
   the black weight of the text face instead. */
html[data-lang="ja"] :is(.subtitle, .point__label, .ticket__name, .details dt, .visit__area, .navmenu__link) {
  font-family: var(--font-ja);
  font-weight: 900;
  letter-spacing: 0.02em;
}

html[data-lang="ja"] .subtitle { font-size: 1.25rem; }

/* Buttons: flat, outlined, with a hard offset like a ticket-machine key. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.6rem 1.15rem;
  border: var(--rule) solid var(--ink);
  border-radius: 0.5rem;
  background: var(--paper-hi);
  box-shadow: var(--press) var(--press) 0 var(--ink);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

.button:hover {
  transform: translate(1px, 1px);
  box-shadow: calc(var(--press) - 1px) calc(var(--press) - 1px) 0 var(--ink);
}

.button:active {
  transform: translate(var(--press), var(--press));
  box-shadow: 0 0 0 var(--ink);
}

.button--primary {
  background: var(--red);
  color: var(--paper-hi);
}

/* Small icons, drawn as masks so they take the text colour. The icon follows
   the action type from content.json, not the button's position. */
.button:is([data-action="call"], [data-action="directions"])::before,
.channel::before,
.actionbar__item::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.actionbar__item {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5h20v4.500a2.500 2.500 0 0 0 0 5V19H2v-4.500a2.500 2.500 0 0 0 0-5zm13 2v2h1.500V7zm0 4v2h1.500v-2zm0 4v2h1.500v-2zM6 9v1.800h6V9zm0 3.800v1.800h4v-1.800z'/%3E%3C/svg%3E");
}

[data-action="call"],
.channel[data-channel="phone"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.5 9.7 2l2 5-2.3 1.7c.9 2.300 2.600 4 4.900 4.900L16 11.300l5 2-.5 3.100c-.3 1.700-1.700 3-3.500 2.900C9.600 18.900 3.100 12.400 2.700 5c-.1-1.800 1.200-3.200 2.900-3.500z'/%3E%3C/svg%3E");
}

[data-action="directions"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.500c4.400 0 8 3.500 8 7.900 0 5.300-6.200 11.700-8 13.100-1.800-1.400-8-7.800-8-13.100 0-4.400 3.600-7.900 8-7.900zm0 4.700a3.200 3.200 0 1 0 0 6.400 3.200 3.200 0 0 0 0-6.400z'/%3E%3C/svg%3E");
}

.channel[data-channel="email"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v2.200l-10 6.300L2 7.200zm0 4.600 10 6.300 10-6.300V19H2z'/%3E%3C/svg%3E");
}

/* The open/closed sign, like the wooden 営業中 plaque by a shop door. */
.plaque {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.6rem;
  padding: 0.4rem 0.8rem 0.45rem;
  border: var(--rule) solid var(--ink);
  border-radius: 0.3rem;
  background: var(--yolk);
  color: var(--ink);
  line-height: 1.25;
}

.plaque__label {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

html[data-lang="ja"] .plaque__label {
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 700;
}

.plaque__detail {
  font-size: 0.95rem;
  font-weight: 700;
}

.plaque[data-state="closed"] {
  background: var(--ink);
  color: var(--paper-hi);
}

.plaque--small {
  padding: 0.25rem 0.6rem 0.3rem;
}

.plaque--small .plaque__label {
  font-size: 0.9rem;
}

.plaque--small .plaque__detail {
  font-size: 0.875rem;
}

/* ---- 4. Sections --------------------------------------------------------- */

/* 0 · notice */
.notice {
  padding: 0.4rem var(--gutter);
  background: var(--yolk);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

/* 1 · header — the lintel. Its thick bottom edge is the rod the noren hangs
   from. One compact row on phones: brand · language · menu button. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: calc(var(--header-h) + var(--rod));
  padding-inline: var(--gutter) calc(var(--gutter) - 0.375rem);
  border-bottom: var(--rod) solid var(--ink);
  background: var(--paper);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.brand__ja {
  display: none;                     /* on phones the noren below says it big */
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--red);
  white-space: nowrap;
}

/* Language switch (header): a small segmented sign, 30px tall to the eye.
   Each button is still a full 44×44 target; the frame is drawn inside it. */
.header .lang {
  position: relative;
  display: flex;
  flex: none;
}

.header .lang::before {
  content: "";
  position: absolute;
  inset: 0.4375rem 0;
  border: 2px solid var(--ink);
  border-radius: 0.4rem;
  background: var(--paper-hi);
}

.header .lang__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.55rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.header .lang__button + .lang__button::before {      /* divider */
  content: "";
  position: absolute;
  left: -1px;
  top: 0.5625rem;
  bottom: 0.5625rem;
  width: 2px;
  background: var(--ink);
}

.header .lang__button[aria-pressed="true"] {
  color: var(--paper-hi);
}

.header .lang__button[aria-pressed="true"]::after {  /* current language */
  content: "";
  position: absolute;
  inset: 0.5625rem 2px;
  z-index: -1;
  border-radius: 0.25rem;
  background: var(--ink);
}

.header .lang__button:focus-visible {
  outline-offset: -2px;
}

/* SV / EN stay short; Japanese readers look for 日本語, not "JA". */
.lang__full,
.lang__button[lang="ja"] .lang__short {
  display: none;
}

.lang__button[lang="ja"] .lang__full {
  display: inline;
}

/* Inline section nav: wide screens only. */
.nav {
  display: none;
}

.nav__list {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

html[data-lang="ja"] .nav__link {
  font-size: 0.875rem;
}

.nav__link:hover {
  color: var(--red);
}

.nav__link:focus-visible {
  outline-offset: -4px;
}

/* Menu button (phones). A native <details>: no script needed. */
.navmenu {
  flex: none;
}

.navmenu__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  list-style: none;
  cursor: pointer;
}

.navmenu__toggle::-webkit-details-marker {
  display: none;
}

.navmenu__toggle::before {           /* the visible 32px key */
  content: "";
  position: absolute;
  inset: 0.375rem;
  border: 2px solid var(--ink);
  border-radius: 0.4rem;
  background: var(--paper-hi);
}

.navmenu__toggle:focus-visible {
  outline-offset: -2px;
}

.navmenu__icon {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
}

.navmenu__cross,
.navmenu[open] .navmenu__bars {
  display: none;
}

.navmenu[open] .navmenu__cross {
  display: inline;
}

.navmenu[open] .navmenu__toggle {
  color: var(--paper-hi);
}

.navmenu[open] .navmenu__toggle::before {
  background: var(--ink);
}

/* The panel drops from the rod like a second curtain. */
.navmenu__panel {
  --focus-color: var(--paper-hi);
  position: absolute;
  top: calc(100% + var(--rod));   /* hangs below the rod */
  left: 0;
  right: 0;
  max-height: calc(100svh - var(--header-h) - 2 * var(--rod));
  overflow-y: auto;
  padding: 0.25rem var(--gutter) 0.75rem;
  border-bottom: var(--rod) solid var(--ink);
  background: var(--red);
  color: var(--paper-hi);
}

.navmenu[open] .navmenu__panel {
  animation: navmenu-drop 0.18s ease-out;
}

@keyframes navmenu-drop {
  from { transform: translateY(-0.5rem); opacity: 0; }
}

.navmenu__list li + li {
  border-top: var(--rule) dashed var(--paper-hi);
}

.navmenu__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  text-decoration: none;
}

html[data-lang="ja"] .navmenu__link {
  font-size: 1.25rem;
}

.navmenu__link:focus-visible {
  outline-offset: -3px;
}

/* 2 · hero */
.hero {
  overflow: hidden;                  /* the swaying noren must not cause scroll */
}

/* The noren. One panel per character of restaurant.noren.main (湯 気 屋);
   from 600px the two narrow side panels join, and on desktop it grows tall.
   Panels share the width, so a 2- or 5-character name also fits. */
.noren {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 5px;
  height: 4.25rem;
  padding-inline: var(--gutter);
}

.noren::before {                     /* the uncut top strip joining the panels */
  content: "";
  position: absolute;
  inset: 0 var(--gutter) auto;
  height: 0.75rem;
  background: var(--red);
}

.noren__panel {
  flex: 1 1 0;
  min-width: 0;
  container-type: inline-size;
  display: grid;
  place-items: center;
  padding-top: 0.45rem;
  background: var(--red);
  color: var(--paper-hi);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 11vw, 2.75rem);
  line-height: 1;
  transform-origin: 50% 0;
}

.noren__panel:nth-child(even) {
  height: calc(100% - 0.3rem);
}

/* A character never grows wider than its panel. */
.noren__char {
  font-size: min(1em, 76cqi);
}

.noren__panel--side {
  flex-grow: 0.5;
  display: none;
  font-family: var(--font-ja);
  font-weight: 700;
}

.noren__panel--side span {
  writing-mode: vertical-rl;
}

html[data-ready] .noren__panel {
  animation: noren-sway 2.2s cubic-bezier(0.3, 0, 0.3, 1) both;
}

html[data-ready] .noren__panel:nth-child(2) { animation-delay: 0.06s; }
html[data-ready] .noren__panel:nth-child(3) { animation-delay: 0.14s; }
html[data-ready] .noren__panel:nth-child(4) { animation-delay: 0.08s; }
html[data-ready] .noren__panel:nth-child(5) { animation-delay: 0.18s; }
html[data-ready] .noren__panel:nth-child(6) { animation-delay: 0.1s; }
html[data-ready] .noren__panel:nth-child(7) { animation-delay: 0.16s; }

@keyframes noren-sway {
  0%   { transform: skewX(0) scaleY(1); }
  18%  { transform: skewX(-7deg) scaleY(0.97); }
  42%  { transform: skewX(4.5deg) scaleY(1); }
  64%  { transform: skewX(-2.5deg); }
  82%  { transform: skewX(1deg); }
  100% { transform: skewX(0) scaleY(1); }
}

.hero__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0.85rem var(--gutter) 0;
}

.hero__text .plaque {
  margin-bottom: 0.6rem;
  padding-block: 0.25rem 0.3rem;
  transform: rotate(-1.5deg);
}

.hero__eyebrow {
  margin-bottom: 0.2rem;
  color: var(--red);
  font-weight: 700;
  line-height: 1.3;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 10vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

html[data-lang="ja"] .hero__headline {
  font-size: clamp(1.8rem, 8.6vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hero__sub {
  max-width: 34rem;
  margin-top: 0.55rem;
  font-size: 1rem;
  line-height: 1.45;
}

/* Full width in Japanese. Balanced lines put the break between the two
   sentences; Chromium's own phrases would allow お持ち|帰り. */
html[data-lang="ja"] .hero__sub {
  max-width: none;
  font-size: 0.9375rem;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.95rem;
}

.hero__actions .button {
  flex: 1 1 auto;
  min-height: 3rem;
  padding-inline: 0.9rem;
}

html[data-lang="ja"] .hero__actions .button {
  gap: 0.35rem;
  padding-inline: 0.75rem;
  font-size: 0.9375rem;
}

.hero__art {
  position: relative;
  max-width: 30rem;
  margin: 0.75rem auto 0;
}

.hero__image {
  width: 100%;
}

.steam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.steam__line {
  fill: none;
  stroke: var(--paper-hi);
  stroke-width: 20;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: steam 4.8s ease-in-out infinite;
}

.steam__line:nth-child(2) { animation-delay: -1.6s; }
.steam__line:nth-child(3) { animation-delay: -3.2s; }

@keyframes steam {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 1; }
  50%      { transform: translateY(-18px) scaleX(0.92); opacity: 0.82; }
}

.hero[data-paused] .steam__line {
  animation-play-state: paused;
}

/* 3 · concept */
.concept__grid {
  display: grid;
  gap: 1.75rem;
}

.concept__body {
  display: grid;
  gap: 0.9rem;
  max-width: 36rem;
  margin-top: 1rem;
}

.concept__image {
  width: 100%;
  max-width: 26rem;
  border: var(--rule) solid var(--ink);
}

.points {
  display: grid;
  border-top: var(--rule) solid var(--ink);
}

.point {
  padding: 1rem 0;
  border-bottom: var(--rule) solid var(--ink);
}

.point__label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--red);
}

html[data-lang="ja"] .point__label { font-size: 1.3rem; }

.point__text {
  margin-top: 0.3rem;
}

/* 4 · menu — the ticket wall */
.menu {
  --focus-color: var(--paper-hi);
  background: var(--red);
  color: var(--paper-hi);
}

.menu__head {
  display: grid;
  gap: 0.75rem;
}

.menu .title,
html[data-lang="ja"] .menu .title {
  font-size: clamp(2.4rem, 11vw, 4rem);
}

.menu__intro {
  max-width: 34rem;
}

.cat {
  margin-top: 2.5rem;
}

.cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: var(--rule) dashed var(--paper-hi);
}

.cat__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

html[data-lang="ja"] .cat__name { font-size: 1.6rem; }

.cat__note {
  font-size: 0.9375rem;
  font-weight: 700;
}

.tickets {
  display: grid;
  gap: 0.7rem;
}

/* One ticket: body + tear-off stub. The two bites at the perforation are cut
   out with a mask so the section colour shows through. */
.ticket {
  --stub: 6.75rem;
  --bite: 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  background: var(--paper-hi);
  color: var(--ink);
  -webkit-mask:
    radial-gradient(circle at calc(100% - var(--stub)) 0, #0000 var(--bite), #000 calc(var(--bite) + 0.5px)),
    radial-gradient(circle at calc(100% - var(--stub)) 100%, #0000 var(--bite), #000 calc(var(--bite) + 0.5px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at calc(100% - var(--stub)) 0, #0000 var(--bite), #000 calc(var(--bite) + 0.5px)),
    radial-gradient(circle at calc(100% - var(--stub)) 100%, #0000 var(--bite), #000 calc(var(--bite) + 0.5px));
  mask-composite: intersect;
}

.ticket__body {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.9rem 0.9rem 0.95rem 1rem;
}

.ticket__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
  text-wrap: balance;
}

html[data-lang="ja"] .ticket__name {
  font-size: 1.2rem;
  line-height: 1.4;
}

.ticket__desc {
  flex: 1 0 100%;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

html[data-lang="ja"] .ticket__desc {
  font-size: 0.875rem;
}

.ticket__stub {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.6rem 0.4rem;
  border-left: var(--rule) dashed var(--ink);
  text-align: center;
}

.ticket__price {
  display: grid;
  justify-items: center;
}

.ticket__amount {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ticket__kr {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.ticket__price-note {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Ramen: the main tickets. Yellow stub. */
[data-category="ramen"] .ticket__stub {
  background: var(--yolk);
}

[data-category="ramen"] .ticket__name {
  font-size: 1.4rem;
}

html[data-lang="ja"] [data-category="ramen"] .ticket__name {
  font-size: 1.45rem;
}

[data-category="ramen"] .ticket__amount {
  font-size: 2.4rem;
}

/* Lunch: the deal. Black ticket, yellow price. */
[data-category="lunch"] .ticket {
  background: var(--ink);
  color: var(--paper-hi);
}

[data-category="lunch"] .ticket__desc {
  color: var(--paper-hi);
}

[data-category="lunch"] .ticket__stub {
  border-left-color: var(--paper-hi);
  color: var(--yolk);
}

/* Toppings and drinks: slim tickets, price on one line. */
:is([data-category="toppings"], [data-category="drinks"]) .ticket {
  --stub: 4.75rem;
  --bite: 0.4rem;
}

:is([data-category="toppings"], [data-category="drinks"]) .ticket__body {
  padding-block: 0.65rem 0.7rem;
}

:is([data-category="toppings"], [data-category="drinks"]) .ticket__name {
  font-size: 1.05rem;
}

html[data-lang="ja"] :is([data-category="toppings"], [data-category="drinks"]) .ticket__name {
  font-size: 1.1rem;
}

:is([data-category="toppings"], [data-category="drinks"]) :is(.ticket__stub, .ticket__price) {
  grid-auto-flow: column;
  align-items: baseline;
  gap: 0.2rem;
}

:is([data-category="toppings"], [data-category="drinks"]) .ticket__amount {
  font-size: 1.45rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tag {
  padding: 0.12rem 0.45rem 0.16rem;
  border: 2px solid var(--ink);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.tag[data-tag="signature"] {
  background: var(--ink);
  color: var(--paper-hi);
}

.tag[data-tag="spicy"] {
  border-color: var(--red);
  background: var(--red);
  color: var(--paper-hi);
}

.menu__note {
  max-width: 44rem;
  margin-top: 2.25rem;
  padding: 0.9rem 1rem;
  border: var(--rule) solid var(--paper-hi);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* 5 · gallery */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.gallery__item {
  border: var(--rule) solid var(--ink);
}

.gallery__item:first-child {
  grid-column: 1 / -1;
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* 6 · visit */
.visit {
  padding-top: 0.5rem;
}

.visit__grid {
  display: grid;
  gap: 2.25rem;
  margin-top: 1.5rem;
}

.visit__hours-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.hours {
  border-top: var(--rule) solid var(--ink);
}

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem;
  border-bottom: var(--rule) solid var(--ink);
}

.hours__row[data-today] {
  background: var(--yolk);
}

.hours__row[data-closed] .hours__time {
  color: var(--red);
}

html[data-lang="ja"] .hours__row[data-closed] .hours__time {
  font-family: var(--font-ja);
  font-weight: 900;
}

.hours__days {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  font-weight: 700;
}

.hours__today {
  padding: 0.05rem 0.4rem 0.1rem;
  border-radius: 0.25rem;
  background: var(--ink);
  color: var(--paper-hi);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
}

html[data-lang="ja"] .hours__today {
  font-family: var(--font-ja);
  font-weight: 700;
}

.hours__time {
  display: grid;
  justify-items: end;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.45;
  white-space: nowrap;
}

.visit__note {
  margin-top: 0.8rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.visit__address {
  display: grid;
  margin-top: 0.6rem;
}

.visit__street {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.2;
}

.visit__area {
  color: var(--red);
  font-weight: 700;
}

.visit__directions {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0 1.4rem;
}

.visit__directions li {
  position: relative;
  padding-left: 1.3rem;
}

.visit__directions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--red);
}

html[data-lang="ja"] .visit__directions li::before {
  top: 0.7em;
}

/* 7 · booking — the house rules, on black */
.booking {
  --focus-color: var(--yolk);
  background: var(--ink);
  color: var(--paper-hi);
}

.booking__grid {
  display: grid;
  gap: 2rem;
}

.booking__body {
  max-width: 34rem;
  margin-top: 0.9rem;
}

.channels {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.channel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.7rem 1rem;
  border: var(--rule) solid var(--paper-hi);
  border-radius: 0.5rem;
  color: var(--paper-hi);
  text-decoration: none;
}

.channel::before {
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
}

.channel__label {
  grid-column: 2;
  font-weight: 700;
  line-height: 1.3;
}

.channel__value {
  grid-column: 2;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.channel[data-channel="phone"] {
  border-color: var(--yolk);
  background: var(--yolk);
  color: var(--ink);
}

.channel[data-channel="phone"] .channel__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

.channel:hover {
  background: var(--paper-hi);
  border-color: var(--paper-hi);
  color: var(--ink);
}

.details {
  border-top: var(--rule) dashed var(--paper-hi);
}

.details__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: var(--rule) dashed var(--paper-hi);
}

.details dt {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--yolk);
}

html[data-lang="ja"] .details dt { font-size: 1.1rem; }

/* 8 · footer */
.footer {
  --focus-color: var(--paper-hi);
  padding: 2.5rem var(--gutter) 2rem;
  background: var(--red);
  color: var(--paper-hi);
}

.footer__grid {
  display: grid;
  gap: 1.5rem;
}

.footer__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  font-family: var(--font-display);
  line-height: 1;
}

.footer__ja {
  font-family: var(--font-display);
  font-size: 3.5rem;
}

.footer__latin {
  font-size: 1.4rem;
}

.footer__tagline {
  margin-top: 0.75rem;
  font-weight: 700;
}

.footer__contact {
  display: grid;
  gap: 0.1rem;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
}

.lang--footer {
  display: flex;
  justify-self: start;
  border: var(--rule) solid var(--paper-hi);
  border-radius: 0.5rem;
  overflow: hidden;
}

.lang--footer .lang__button {
  min-height: 2.75rem;
  padding-inline: 0.85rem;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.lang--footer .lang__button + .lang__button {
  border-left: var(--rule) solid var(--paper-hi);
}

.lang--footer .lang__button[aria-pressed="true"] {
  background: var(--paper-hi);
  color: var(--red);
}

.lang--footer .lang__button:focus-visible {
  outline-offset: -5px;
}

.lang--footer .lang__button[aria-pressed="true"]:focus-visible {
  outline-color: var(--ink);
}

.footer__legal {
  padding-top: 1.1rem;
  border-top: var(--rule) dashed var(--paper-hi);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* – · actionbar: keys on the ticket machine. The main key (the primary
   action) is yellow and gets the room; the others are compact keys with the
   icon above a short label, so three fit at 360px in every language. */
.actionbar {
  --focus-color: var(--paper-hi);
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  background: var(--ink);
}

/* base.css pads #actionbar for the safe areas only; keep those, add the gap. */
#actionbar.actionbar {
  padding: 0.5rem max(0.5rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
}

.actionbar__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.25rem;
  padding: 0.25rem 0.3rem;
  border: 2px solid var(--paper-hi);
  border-radius: 0.5rem;
  color: var(--paper-hi);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.actionbar__item::before {
  width: 1.15rem;
  height: 1.15rem;
}

.actionbar__item:active {
  background: var(--paper-hi);
  color: var(--ink);
}

.actionbar__item[data-primary] {
  flex: 2 1 0;
  flex-direction: row;
  gap: 0.5rem;
  padding-inline: 0.6rem;
  border-color: var(--yolk);
  background: var(--yolk);
  color: var(--ink);
  font-size: 1rem;
}

html[data-lang="ja"] .actionbar__item[data-primary] {
  gap: 0.35rem;
  font-size: 0.9375rem;
}

.actionbar__item[data-primary]::before {
  width: 1.3rem;
  height: 1.3rem;
}

.actionbar__item:focus-visible {
  outline-offset: -5px;
}

/* The extra menu key only when it really points at the menu, and never as a
   fourth key. */
.actionbar__item--menu:not([href="#menu"]),
.actionbar:has(> .actionbar__item:not([hidden]) ~ .actionbar__item:not([hidden]) ~ .actionbar__item:not([hidden]) ~ .actionbar__item:not([hidden])) .actionbar__item--menu {
  display: none;
}

/* ---- 5. Wider screens ---------------------------------------------------- */

@media (min-width: 30em) {
  .brand__ja {
    display: inline;
  }

  :is([data-category="toppings"], [data-category="drinks"]) .tickets {
    grid-template-columns: 1fr 1fr;
  }
}

/* From 600px the noren gets its two narrow side panels. */
@media (min-width: 37.5em) {
  .noren {
    height: 5.5rem;
    padding-inline: 0.5rem;
  }

  .noren::before {
    inset-inline: 0.5rem;
  }

  .noren__panel {
    padding-top: 0.5rem;
    font-size: 3.2rem;
  }

  .noren__panel--side {
    display: grid;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
  }
}

@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
    --band-pad: 4.5rem;
    --header-h: 4.25rem;
  }

  .brand__name {
    font-size: 1.45rem;
  }

  .notice {
    padding-block: 0.55rem;
    font-size: 0.9375rem;
  }

  .noren {
    height: 10rem;
    gap: 7px;
    padding-inline: var(--gutter);
  }

  .noren::before {
    inset-inline: var(--gutter);
    height: 1.5rem;
  }

  .noren__panel {
    padding-top: 0.8rem;
    font-size: 6.75rem;
  }

  .noren__panel:nth-child(even) {
    height: calc(100% - 0.4rem);
  }

  .noren__panel--side {
    font-size: 1.3rem;
    letter-spacing: 0.14em;
  }

  .hero__inner {
    padding-top: 1.25rem;
  }

  .hero__text .plaque {
    margin-bottom: 1rem;
    padding-block: 0.4rem 0.45rem;
  }

  .hero__headline {
    font-size: clamp(2.6rem, 6.4vw, 4.5rem);
  }

  html[data-lang="ja"] .hero__headline {
    font-size: clamp(2.4rem, 5.4vw, 3.4rem);
  }

  .hero__sub {
    margin-top: 0.8rem;
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .hero__actions {
    gap: 0.85rem;
    margin-top: 1.4rem;
  }

  .hero__actions .button {
    flex: 0 1 auto;
    min-height: 3.25rem;
    padding-inline: 1.15rem;
  }

  html[data-lang="ja"] .hero__sub {
    font-size: 1.0625rem;
  }

  html[data-lang="ja"] .hero__actions .button {
    padding-inline: 1.05rem;
    font-size: 1rem;
  }

  .hero__art {
    margin-top: 1.5rem;
  }

  .tickets {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    grid-auto-flow: dense;
  }

  /* No orphan tickets, driven by tags and counts, never by item names:
     the ticket tagged "signature" becomes a full-row feature, and a ticket
     left alone on the last row of a two-column group spans the row. */
  .ticket:has(.tag[data-tag="signature"]) {
    --stub: 10rem;
    --bite: 0.65rem;
    grid-column: 1 / -1;
  }

  .ticket:has(.tag[data-tag="signature"]) .ticket__body { padding: 1.4rem 1.5rem 1.5rem; gap: 0.5rem 0.9rem; }
  .ticket:has(.tag[data-tag="signature"]) .ticket__name { font-size: 2.1rem; }
  html[data-lang="ja"] .ticket:has(.tag[data-tag="signature"]) .ticket__name { font-size: 2rem; }
  .ticket:has(.tag[data-tag="signature"]) .ticket__desc { max-width: 38rem; font-size: 1.0625rem; }
  .ticket:has(.tag[data-tag="signature"]) .ticket__amount { font-size: 3.4rem; }
  .ticket:has(.tag[data-tag="signature"]) .ticket__kr { font-size: 1rem; }
  .ticket:has(.tag[data-tag="signature"]) .tag { font-size: 0.875rem; }

  .tickets:not(:has(.tag[data-tag="signature"])) > .ticket:last-child:nth-child(odd),
  .tickets:has(.tag[data-tag="signature"]) > .ticket:last-child:nth-child(even):not(:has(.tag[data-tag="signature"])) {
    grid-column: 1 / -1;
  }

  .points {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    border-top: 0;
  }

  .point {
    border-top: var(--rule) solid var(--ink);
    border-bottom: 0;
  }

  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
  }

  .gallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery__item img {
    height: 100%;
  }

  .visit__grid,
  .booking__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }

  .footer__grid {
    grid-template-columns: 1.2fr 1fr;
    column-gap: 3rem;
  }

  .footer__legal {
    grid-column: 1 / -1;
  }
}

/* The inline nav needs about 960px in the longest language; below that the
   menu button stays (tablets included). */
@media (min-width: 60em) {
  .header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 1.5rem;
    padding-inline: var(--gutter);
  }

  .brand {
    margin-right: 0;
  }

  .nav {
    display: block;
  }

  .navmenu {
    display: none;
  }
}

@media (min-width: 64em) {
  body {
    font-size: 1.125rem;
  }

  html[data-lang="ja"] body {
    font-size: 1.0625rem;
  }

  .brand__name { font-size: 1.6rem; }
  .brand__ja { font-size: 1.1rem; }

  /* Hero: words on the left, the bowl on the right, tucked under the noren. */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    column-gap: 3rem;
    padding-top: 2.25rem;
    padding-bottom: 1rem;
  }

  .hero__sub {
    font-size: 1.25rem;
  }

  html[data-lang="ja"] .hero__sub {
    font-size: 1.125rem;
  }

  html[data-lang="ja"] .hero__headline {
    font-size: clamp(2.6rem, 3.8vw, 3.6rem);
  }

  .hero__art {
    max-width: none;
    margin: -1rem 0 0;
  }

  .concept__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    column-gap: 4rem;
    row-gap: 3rem;
  }

  .concept__body {
    margin-top: 1.5rem;
  }

  .concept__image {
    justify-self: end;
  }

  .points {
    grid-column: 1 / -1;
  }

  /* Menu: category name in a left rail, tickets to the right. */
  .menu__head {
    grid-template-columns: minmax(15rem, auto) 1fr;
    align-items: end;
    gap: 2rem;
  }

  .menu .title {
    white-space: nowrap;
  }

  .cat {
    display: grid;
    grid-template-columns: 15rem 1fr;
    column-gap: 2rem;
    margin-top: 0;
    padding-top: 2.5rem;
  }

  .cat__head {
    display: block;
    align-self: start;
    position: sticky;
    top: 6.5rem;
    padding: 0.9rem 0 0;
    margin: 0;
    border-bottom: 0;
    border-top: var(--rule) dashed var(--paper-hi);
  }

  .cat__name {
    font-size: 1.9rem;
  }

  .cat__note {
    margin-top: 0.4rem;
  }

  .menu__note {
    margin-left: 17rem;
    margin-top: 2.5rem;
  }

  .visit__street {
    font-size: 2rem;
  }

  /* Booking: narrower lead, the house rules in two columns beside it. */
  .booking__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    column-gap: 4rem;
  }

  .details {
    columns: 2;
    column-gap: 2.5rem;
    border-top: 0;
  }

  .details__row {
    break-inside: avoid;
    padding: 0.85rem 0 1.1rem;
    border-top: var(--rule) dashed var(--paper-hi);
    border-bottom: 0;
  }

  .footer__ja {
    font-size: 5rem;
  }
}

/* Slim groups in three columns once the tickets are wide enough for their
   descriptions (below this, two columns); the last row is stretched shut. */
@media (min-width: 75em) {
  :is([data-category="toppings"], [data-category="drinks"]) .tickets {
    grid-template-columns: repeat(3, 1fr);
  }

  :is([data-category="toppings"], [data-category="drinks"]) .tickets > .ticket.ticket:last-child:nth-child(n) { grid-column: auto; }
  :is([data-category="toppings"], [data-category="drinks"]) .tickets > .ticket.ticket:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  :is([data-category="toppings"], [data-category="drinks"]) .tickets > .ticket.ticket:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* ---- 6. Motion and print ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .steam__line,
  html[data-ready] .noren__panel,
  .navmenu[open] .navmenu__panel {
    animation: none;
  }
}

@media print {
  .header {
    position: static;
  }

  .navmenu {
    display: none;
  }
}