/* A typographic chapter rail with a single moving point of focus. */
html{scroll-padding-top:60px}
:is(.chapter-nav,.dish-nav){isolation:isolate;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}
:is(.chapter-nav,.dish-nav)::-webkit-scrollbar{display:none}
:is(.chapter-nav,.dish-nav) a{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:58px;box-sizing:border-box;padding:18px 10px 18px 22px;border-bottom:0;font-size:12px;font-weight:500;letter-spacing:.25px;color:var(--muted);text-decoration:none;outline:none;transition:color .24s ease,opacity .24s ease}
:is(.chapter-nav,.dish-nav) a::before{content:"";position:absolute;left:4px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.25);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.75,.2,1)}
:is(.chapter-nav,.dish-nav) a.active,:is(.chapter-nav,.dish-nav) a[aria-current="location"]{color:var(--green);border-bottom:0}
:is(.chapter-nav,.dish-nav) a span{transition:opacity .24s ease}
:is(.chapter-nav,.dish-nav) a[aria-current="location"] span{opacity:1}
@media(hover:hover){:is(.chapter-nav,.dish-nav) a:hover{color:var(--green);text-decoration:none}:is(.chapter-nav,.dish-nav) a:hover::before{opacity:.3;transform:scale(.7)}:is(.chapter-nav,.dish-nav) a[aria-current="location"]:hover::before{opacity:0}}
:is(.chapter-nav,.dish-nav) a:active{opacity:.6}
:is(.chapter-nav,.dish-nav) a:focus-visible{outline:1px solid var(--green);outline-offset:-6px;border-radius:0}
.chapter-nav .chapter-indicator,.dish-nav .chapter-indicator{position:absolute;left:0;top:calc(50% - 3px);bottom:auto;display:block;height:6px;width:6px;margin:0;border-radius:50%;background:var(--green);opacity:0;pointer-events:none;transform:translate3d(var(--chapter-x,0px),0,0);transition:transform .45s cubic-bezier(.22,.8,.2,1),opacity .2s ease}
:is(.chapter-nav,.dish-nav)[data-chapters-ready="true"] .chapter-indicator{opacity:1}
:is(.chapter-nav,.dish-nav):not([data-chapters-ready]) a.active::before{opacity:1;transform:scale(1)}
@media(max-width:760px){html{scroll-padding-top:55px}:is(.chapter-nav,.dish-nav){gap:12px}:is(.chapter-nav,.dish-nav) a{min-height:53px;padding:15px 8px 15px 20px;font-size:12px;letter-spacing:.15px}}
@media(prefers-reduced-motion:reduce){:is(.chapter-nav,.dish-nav){scroll-behavior:auto}:is(.chapter-nav,.dish-nav) a,:is(.chapter-nav,.dish-nav) a span,:is(.chapter-nav,.dish-nav) a::before,:is(.chapter-nav,.dish-nav) .chapter-indicator{transition:none}}