/* Physical sign, paper and road details. Content never waits for an entrance. */
.route-line{display:block;width:min(100%,310px);height:auto;margin:24px 0 8px;overflow:visible}
.route-line .road-edge{fill:none;stroke:var(--ink);stroke-width:16;stroke-linecap:round}
.route-line .road-center{fill:none;stroke:var(--paper);stroke-width:2;stroke-dasharray:7 9}
.route-line .road-sign{fill:var(--gold);stroke:var(--ink);stroke-width:2}
.route-line text{font:20px Rotulo,sans-serif;fill:var(--ink);text-anchor:middle}
.category-nav a[aria-current="location"]{background:var(--green);color:var(--paper);border-color:var(--green)}
.category-nav a{transition:background-color .18s,color .18s,border-color .18s}
@media(prefers-reduced-motion:no-preference){
 .hero-photo:before{animation:stamp-seat .42s cubic-bezier(.2,.65,.2,1) .18s both}
 @keyframes stamp-seat{0%{transform:rotate(11deg) scale(1.09);box-shadow:7px 9px 0 #25282133}65%{transform:rotate(7deg) scale(.99);box-shadow:1px 1px 0 var(--ink)}100%{transform:rotate(8deg) scale(1);box-shadow:3px 3px 0 var(--ink)}}
 .route-line.is-traveling .road-center{animation:road-pass .9s linear 2}
 @keyframes road-pass{from{stroke-dashoffset:32}to{stroke-dashoffset:0}}
 .navlinks>a:not(.button),.footer-links a{background-image:linear-gradient(var(--red),var(--red));background-position:left bottom;background-size:0 3px;background-repeat:no-repeat;transition:background-size .18s ease-out,color .18s}
 .footer-links a{background-image:linear-gradient(var(--gold),var(--gold))}
 .navlinks>a:not(.button):is(:hover,:focus-visible),.footer-links a:is(:hover,:focus-visible){background-size:100% 3px}
 .textlink,.story .line-link{background-image:linear-gradient(var(--gold),var(--gold));background-size:0 35%;background-position:left 85%;background-repeat:no-repeat;transition:background-size .18s ease-out}
 .textlink:is(:hover,:focus-visible),.story .line-link:is(:hover,:focus-visible){background-size:100% 35%}
 .story .line-link:is(:hover,:focus-visible){color:var(--ink)}
 .button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
 .button .arrow{transition:transform .18s ease-out}
 .button:is(:hover,:focus-visible) .arrow{transform:translate(2px,-2px)}
 .faq summary:after{transition:transform .18s}
 .faq details[open] summary:after{transform:rotate(180deg)}
 .gallery-dialog[open]{animation:photo-unfold .2s ease-out}
 @keyframes photo-unfold{from{transform:rotate(-.7deg) scale(.985)}to{transform:rotate(0) scale(1)}}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-photo>img,.story-img img,.visit img{transition:transform .24s ease-out,box-shadow .24s ease-out}
 .hero-photo:hover>img{transform:rotate(.5deg)}
 .photo-button:hover img,.photo-button:focus-visible img{transform:rotate(-.5deg)}
 .visit img:hover{transform:rotate(0deg)}
 /* Photos stay at their true crop instead of the earlier generic zoom. */
 .dish:hover img{transform:none}
 .dish-image{transition:box-shadow .2s ease-out}
 .dish-image:is(:hover,:focus-visible){box-shadow:4px 4px 0 var(--ink)}
}

.cursor-road{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1000;contain:strict}
@media(prefers-reduced-motion:reduce),(forced-colors:active),(hover:none),(pointer:coarse){.cursor-road{display:none}}
