/* Palette inspired by the supplied JUAN food photograph and red seal logo.
   These are design selections, not claimed brand-standard colour values. */
:root,body[data-city]{
  --juan-charcoal:#202422;
  --juan-porcelain:#faf9f6;
  --juan-paper:#f1efe9;
  --juan-wood:#826448;
  --juan-stone:#d8d2c7;
  --juan-red:#b51f32;
  --juan-red-dark:#92182a;
  --juan-olive:#77794f;
  --paper:var(--juan-paper);
  --ink:var(--juan-charcoal);
  --muted:#68665e;
  --dark:var(--juan-charcoal);
  --line:var(--juan-stone);
  --warm:var(--juan-porcelain);
}
body[data-city]{background:var(--paper);color:var(--ink)}
::selection{background:var(--juan-red);color:var(--juan-porcelain)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--juan-red)}
body[data-city] .site-header{background:var(--juan-porcelain);border-bottom-color:var(--line)}
.site-header .city-switch a{color:var(--muted)}
.site-header .city-switch a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px var(--juan-red)}
.site-header .main-nav>a:first-child{border-color:var(--juan-stone);color:var(--ink)}
.site-header .main-nav>a:first-child:hover{background:var(--juan-charcoal);border-color:var(--juan-charcoal);color:var(--juan-porcelain)}
.site-header .motion-toggle{border-color:var(--line)}
.site-header .hamburger>span{background:var(--ink)}
body[data-city] .hero{background:var(--dark);color:var(--juan-porcelain)}
.hero h1,html[lang=ja] .hero h1,html[lang=zh-CN] .hero h1{color:var(--juan-porcelain)}
.hero .eyebrow{color:#e1d6c5}.hero-intro,.hero-booking,.hero-booking a{color:var(--juan-porcelain)}
.hero .hero-photo:after{background:linear-gradient(0deg,#151a18e3 0%,#151a1848 60%,#151a1808 100%)}
.hero-actions .button{background:var(--juan-porcelain);border-color:var(--juan-porcelain);color:var(--ink)}
.hero-actions .button:hover{background:var(--juan-paper);color:var(--ink)}
.hero-actions .hero-visit{background:var(--juan-red);border-color:var(--juan-red);color:var(--juan-porcelain)}
.hero-actions .hero-visit:hover{background:var(--juan-red-dark);border-color:var(--juan-red-dark);color:var(--juan-porcelain)}
.kinetic-ribbon{background:var(--juan-charcoal);color:var(--juan-porcelain);border-color:#ffffff26}
.kinetic-ribbon i{color:#c7b49a}
.official-about{background:#e7e1d7;color:var(--ink)}
.signatures .section-head .eyebrow,.dish-number,.citation-site,.citation-arrow{color:var(--juan-wood)}
.signatures .section-head .text-link,.signature-grid .dish-card,.restaurant-links>a{border-color:var(--line)}
.dish-card>img,.signature-grid .dish-card>img,.menu-thumb{background:#e7e3da}
.dish-detail-button{border-color:var(--juan-wood)}
.dish-detail-button:hover,.text-link:hover{color:var(--juan-red);border-color:var(--juan-red)}
.location-selection,.site-footer{background:var(--juan-charcoal);color:var(--juan-porcelain)}
.location-selection .eyebrow{color:#c7b49a}.restaurant-links>a{background:var(--dark);border-color:#ffffff30}
.visit-section{background:#e7e1d7}
.button-dark,.mobile-actions>a:last-child{background:var(--juan-red);color:var(--juan-porcelain)}
.button-dark:hover,.mobile-actions>a:last-child:hover{background:var(--juan-red-dark)}
.mobile-actions{background:var(--juan-porcelain);border-color:var(--line)}
.mobile-actions>a:first-child{background:var(--juan-porcelain);color:var(--ink)}
body[data-page=menu] .menu-item{background:var(--juan-porcelain);border-color:var(--line)}
body[data-page=menu] .menu-thumb{background:var(--juan-paper)}
.menu-tools input,.menu-tools select,.dialog-close{border-color:var(--line)}
.menu-tools input:focus,.menu-tools select:focus{border-color:var(--juan-red)}
.menu-group summary small,.group-number,.external-menu-notice p{color:var(--muted)}
.snapshot-stock{color:var(--juan-red-dark)}
.archive-note,.empty-state{background:#e7e1d7}
.social-profile-grid>a,.citation-source,.instagram-video{background:var(--juan-porcelain);border-color:var(--line)}
.social-profile-grid>a:hover,.citation-source:hover{background:var(--juan-paper);border-color:var(--juan-wood)}
.citation-icon{color:var(--juan-red);border-color:var(--line)}
.instagram-video .text-link:hover{background:var(--juan-paper)}
.navigation-drawer,.dish-dialog,.dialog-close{background:var(--juan-porcelain);color:var(--ink)}
.navigation-drawer::backdrop,.dish-dialog::backdrop{background:#151a18b3}
.drawer-cities,.drawer-languages,.detail-context,.breadcrumbs{border-color:var(--line)}
.drawer-languages a[aria-current],.breadcrumbs [aria-current]{color:var(--juan-red)}
.totio-trigger,.totio-panel{border-color:var(--line);background:var(--juan-porcelain)}
.totio-options a:hover,.totio-options a:focus-visible{background:var(--juan-paper);color:var(--ink)}
.chart-measure{background:var(--line)}.chart-row:nth-child(1) .chart-measure>span{background:var(--juan-charcoal)}.chart-row:nth-child(2) .chart-measure>span{background:var(--juan-wood)}.chart-row:nth-child(3) .chart-measure>span{background:var(--juan-red)}.chart-row:nth-child(4) .chart-measure>span{background:var(--juan-olive)}

/* Visit information stays stationary and readable throughout scrolling. */
.visit-section,.visit-section *{animation:none!important;transition:none!important}
.visit-section .visit-heading,.visit-section .motion-scene,.visit-section .motion-scene.is-revealed{opacity:1!important;transform:none!important;filter:none!important}
/* Page hierarchy; current page is text, separators are hidden from assistive technology. */
.page-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5em 1em;list-style:none;margin:0;padding:0;line-height:1.8;font-size:.875rem}
.page-breadcrumb li{display:flex;align-items:baseline;gap:1em;min-width:0;overflow-wrap:anywhere}
.page-breadcrumb .breadcrumb-separator{opacity:.5}
.page-breadcrumb [aria-current=page]{color:var(--ink,#202723)}
main>.page-breadcrumb{padding:1rem 4.5%;border-bottom:1px solid var(--line,#d8d2c7)}
.page-breadcrumb a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Keep both restaurant links and the menu button within narrow screens. */
@media(max-width:760px){body[data-city] .site-header{grid-template-columns:minmax(50px,1fr) auto 44px;gap:8px!important}.site-header .hamburger{grid-column:3}.has-enhancements .site-header .city-switch{gap:10px}}
@media(max-width:420px){body[data-city] .site-header{padding-left:12px;padding-right:12px}.has-enhancements .site-header .city-switch{gap:7px}.site-header .city-switch a{font-size:12px;white-space:nowrap}}
@media(max-width:420px){.visit-information>*{min-width:0;overflow-wrap:anywhere}}
