:root {
  --serif: 'EB Garamond', 'Noto Serif JP', Georgia, serif;
  --disp: 'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;
  --sans: 'Roboto', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --mono: 'Space Mono', 'Noto Sans JP', 'Courier New', monospace;
}

body { font-synthesis: none; }
html[lang="ja"] body { line-height: 1.7; line-break: strict; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { word-break: auto-phrase; }
/* body copy breaks on phrase boundaries too — measured 1440: without this the hero lede split 「15」/「時まで」
   and the pinned sentence split 「とい」/「くら丼」. */
html[lang="ja"] .hero-lede, html[lang="ja"] .mix-say, html[lang="ja"] .menu-lede, html[lang="ja"] .journal-lede,
html[lang="ja"] .rail p, html[lang="ja"] .fridays-copy p, html[lang="ja"] .post p, html[lang="ja"] .faq-item p,
html[lang="ja"] .visit-note, html[lang="ja"] .tile-kicker, html[lang="ja"] .announce p, html[lang="ja"] .foot-social,
html[lang="ja"] .menu-fine, html[lang="ja"] .foot-bottom p { word-break: auto-phrase; }
:not(html)[lang="ja"] { font-family: 'Noto Serif JP', serif; }
a[lang="ja"] { font-family: 'Noto Sans JP', sans-serif; }
a[lang="en"] { font-family: 'Roboto', sans-serif; }
.display { font-variant-numeric: lining-nums; }

html[lang="ja"] .display, html[lang="ja"] .tile-title { font-style: normal; font-weight: 700; letter-spacing: .03em; line-height: 1.32; }
html[lang="ja"] .nav a, html[lang="ja"] .head-util a, html[lang="ja"] .rows .item, html[lang="ja"] .hours th,
html[lang="ja"] .hero-kicker, html[lang="ja"] .tile-kicker, html[lang="ja"] .kicker, html[lang="ja"] .hero-cap .sans,
html[lang="ja"] .special figcaption .sans, html[lang="ja"] .tag, html[lang="ja"] .colophon, html[lang="ja"] .foot-here .here .sans,
html[lang="ja"] .visit-rating .sans, html[lang="ja"] .foot-rating, html[lang="ja"] .mix-say { text-transform: none; }
html[lang="ja"] .nav a, html[lang="ja"] .head-util a { font-family: var(--sans); font-size: 13.5px; letter-spacing: .06em; }
html[lang="ja"] .hero-title { font-size: 54px; line-height: 1.25; }
html[lang="ja"] .hero-lede { line-height: 1.7; }
html[lang="ja"] .rows .item { font-size: 14.5px; letter-spacing: .03em; }
html[lang="ja"] .btn { font-family: var(--sans); font-size: 12.5px; letter-spacing: .1em; text-transform: none; }
html[lang="ja"] .tile-title { font-size: 30px; }
html[lang="ja"] .rail h2.display.xl { font-size: 38px; }
html[lang="ja"] .mix-say { font-size: clamp(22px, 2.6vw, 38px); line-height: 1.5; letter-spacing: .04em; }
html[lang="ja"] .colophon { font-family: var(--sans); letter-spacing: .04em; font-size: 12px; }
html[lang="ja"] .journal-lede, html[lang="ja"] .menu-lede { line-height: 1.75; }

.logo { display: flex; align-items: center; }
.wm { display: inline-flex; align-items: center; gap: 7px; font-family: 'Noto Serif JP', serif; color: var(--maroon); white-space: nowrap; }
.wm__jp { font-size: 30px; font-weight: 700; letter-spacing: .05em; line-height: 1; }
.wm__city { font-size: 13px; font-weight: 700; line-height: 1; color: #fbf3e6; background: var(--brick); padding: 4px 5px 3px; letter-spacing: .08em; }
.wm--light { color: var(--cream); }
.wm--light .wm__jp { font-size: 40px; }
.wm--light .wm__city { font-size: 16px; background: var(--cream); color: var(--maroon); padding: 5px 6px 4px; }

.nav__lang { display: none; }
.head-util { position: relative; }
.head-tel { white-space: nowrap; }
.lang { position: relative; font-family: var(--sans); }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--maroon); font-size: 13px; letter-spacing: .04em;
  border: 1px solid rgba(95, 31, 26, .38); border-radius: 999px; padding: 5px 11px 5px 9px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); margin-left: 2px; }
.lang[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.lang__ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lang__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 152px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 10px 24px rgba(42, 35, 32, .12); z-index: 60; padding: 6px 0; }
.head-util .lang__list a { display: block; padding: 10px 16px; font-size: 14px; color: var(--maroon); letter-spacing: .03em; text-transform: none; min-height: 0; }
.lang__list a[aria-current="page"] { background: var(--maroon); color: #fbf3e6; }
.lang__list a:hover { background: rgba(95, 31, 26, .08); }
.head-util .lang__list a[aria-current="page"]:hover { background: var(--maroon); }

.tile, .fridays, .feature-fig, .post-img { position: relative; }
.post-img { display: block; }

.draw { display: block; fill: none; stroke: var(--brick); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.draw circle { fill: var(--brick); stroke: none; }
.rail-draw .draw { width: 150px; }
.menu-draw { margin-top: 30px; display: flex; justify-content: flex-end; }
.menu-draw .draw { width: 96px; }
.reveal .draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.4, .1, .2, 1) .25s; }
.reveal .draw path:nth-child(2n) { transition-delay: .45s; }
.reveal .draw path:nth-child(3n) { transition-delay: .65s; }
.reveal.in .draw path { stroke-dashoffset: 0; }
.draw--bowl path:nth-child(7), .draw--bowl path:nth-child(8) { animation: steam 3.2s ease-in-out infinite; }
.draw--bowl path:nth-child(8) { animation-delay: 1.1s; }
@keyframes steam { 0%, 100% { opacity: .25; transform: translateY(3px); } 50% { opacity: 1; transform: translateY(-3px); } }

.rows li.is-short .price, .hours tr.is-short td { color: var(--maroon); font-weight: 700; }
.board .rows .price { white-space: nowrap; }
.visit-rating b { color: var(--maroon); }
.visit-addr { margin-bottom: 18px; }
/* the gap after the postal code is set here, not typed as a space between a half-width and a full-width run */
.zip { margin-inline-end: .45em; }

.faq { padding-bottom: 28px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; align-items: start; }
.faq-item { margin-bottom: 32px; }
.faq-item h3.display { font-size: 21px; margin-bottom: 9px; max-width: 22ch; }
.faq-item p { max-width: 44ch; }

.visit-map .map { display: block; width: 100%; height: auto; }
.map__bg { fill: rgba(255, 255, 255, .38); stroke: var(--rule); }
.map text { font-family: var(--sans); font-size: 13px; fill: #3b2a22; }
.map__n path, .map__scale path { fill: none; stroke: #3b2a22; stroke-width: 1.2; stroke-linejoin: round; }
.map__n text, .map__scale text { font-family: var(--mono); font-size: 11.5px; fill: #5b463a; }
.pt__line { stroke: var(--maroon); stroke-width: 1.3; stroke-dasharray: 4 5; opacity: .6; }
.pt__dot { fill: var(--paper); stroke: var(--maroon); stroke-width: 2; }
.pt__m { font-family: var(--mono); font-size: 12px; fill: var(--maroon); }
.shop__dot { fill: var(--brick); }
.shop__ring { fill: none; stroke: var(--brick); stroke-width: 1.2; opacity: .45; }
.map .shop__name { font-family: 'Noto Serif JP', serif; font-weight: 700; font-size: 15px; fill: var(--maroon); }
html[lang="en"] .map .shop__name { font-family: var(--serif); font-size: 16px; }

.foot-social { font-size: 13px; opacity: .9; }
.colophon a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal .draw path { stroke-dashoffset: 0; transition: none; }
  .draw--bowl path { animation: none; }
  .mix-say { opacity: 1 !important; }
}

@media (max-width: 1200px) {
  .nav { margin-left: 28px; gap: 20px; }
  html[lang="ja"] .hero-title { font-size: 46px; }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .head { flex-wrap: wrap; gap: 10px 20px; }
  .nav { order: 3; width: 100%; margin: 0; gap: 6px 22px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid rgba(176, 154, 134, .5); }
  .head-util { margin-left: auto; }
}

@media (max-width: 960px) {
  .hero-cap { display: block; top: 14px; bottom: auto; right: 14px; font-size: 11px; background: rgba(30, 18, 12, .72); padding: 5px 8px 4px; }
  .hero-cap .sans { font-size: 11.5px; }
  html[lang="ja"] .hero-title { font-size: 40px; }
  .rail-draw .draw { width: 112px; }
  .faq-list { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .nav { margin: 14px 0 0; }
  .nav.open .nav__lang { display: flex; flex-wrap: wrap; gap: 8px 10px; padding-top: 10px; border-top: 1px solid rgba(95, 31, 26, .2); margin-top: 4px; }
  .nav__lang a { border: 1px solid rgba(95, 31, 26, .35); border-radius: 999px; padding: 0 12px; font-size: 13px; text-transform: none; letter-spacing: .02em; min-height: 40px !important; }
  .nav__lang a[aria-current="page"] { background: var(--maroon); color: #fbf3e6; }
  .wm__jp { font-size: 24px; }
  .wm__city { font-size: 11px; padding: 3px 4px 2px; }
  .head-util { gap: 12px; }
  .lang summary { min-height: 40px; min-width: 44px; justify-content: center; padding: 5px 9px 5px 8px; }
  .head-util .lang__list a { min-height: 0; display: block; padding: 11px 16px; }
  html[lang="ja"] .hero-title { font-size: 32px; }
  html[lang="ja"] .tile-title { font-size: 26px; }
  html[lang="ja"] .rail h2.display.xl { font-size: 30px; }
  .wm--light .wm__jp { font-size: 30px; }
  .visit-map .map { min-width: 0; }
  .logo { width: auto; overflow: visible; }
  .faq-item h3.display { font-size: 19px; }
}

@media (max-width: 420px) {
  .lang__cur { display: none; }
  .lang summary::after { display: none; }
  .wm__jp { font-size: 20px; }
  .wm__city { font-size: 10px; padding: 3px 3px 2px; }
  .wm { gap: 5px; }
  html[lang="ja"] .head-util a { font-size: 12.5px; letter-spacing: .02em; }
}
@media (max-width: 380px) {
  .wm__jp { font-size: 18px; letter-spacing: .03em; }
  .wm__city { font-size: 9.5px; }
  .head-util { gap: 6px; }
  .lang summary { min-width: 40px; padding: 4px 6px; }
  html[lang="ja"] .head-util a, .head-util a { font-size: 12px; letter-spacing: 0; }
  .burger { width: 40px; }
}
@media (max-width: 350px) {
  .wm__city { display: none; }
  .wm__jp { font-size: 17px; }
  .head { padding-left: 16px; padding-right: 16px; }
}

.visit-map .map--tall { display: none; }
@media (max-width: 700px) {
  .visit-map .map--wide { display: none; }
  .visit-map .map--tall { display: block; max-width: 420px; margin: 0 auto; }
}

.hero-full::after { height: 70%; background: linear-gradient(to top, rgba(30, 18, 12, .88) 0%, rgba(30, 18, 12, .6) 42%, rgba(30, 18, 12, 0) 100%); }
.hero-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(30, 18, 12, .55) 0%, rgba(30, 18, 12, .25) 38%, rgba(30, 18, 12, 0) 62%); pointer-events: none; }