/* One image-first introduction; the resting layout remains the same height. */
.hero-art{background:var(--paper);overflow:hidden}
.hero-picture{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 62%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 98%,transparent),color-mix(in srgb,var(--paper) 84%,transparent) 38%,transparent 76%);opacity:1;transition:opacity .45s ease}
.hero-main h1 .hero-title-word{display:block;width:fit-content;max-width:100%;padding:.08em .12em;font:inherit;letter-spacing:inherit;line-height:1.2;overflow-wrap:normal;color:var(--red)}
@supports ((background-clip:text) or (-webkit-background-clip:text)) and (color:color-mix(in srgb,red,white)){
 .ruth-motion-on .ruth-shimmer{background-image:linear-gradient(110deg,var(--red) 38%,color-mix(in srgb,var(--red) 72%,var(--paper)) 46%,var(--red) 53%);background-size:250% 100%;background-position:140% 0;background-clip:text;-webkit-background-clip:text;color:transparent!important;text-shadow:none;animation:ruth-shimmer 6.8s linear infinite}
}
@keyframes ruth-shimmer{0%,68%{background-position:140% 0}100%{background-position:-140% 0}}
.ruth-tab-hidden .ruth-shimmer{animation-play-state:paused}
.ruth-motion-paused{scroll-behavior:auto}
.ruth-motion-paused *, .ruth-motion-paused *::before, .ruth-motion-paused *::after{animation:none!important;transition:none!important}

/* A single yellow rectangle travels between the three navigation links. */
.site-header .ruth-nav{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;margin-left:auto}
.ruth-nav a{position:relative;z-index:1;display:block;padding:11px 18px;border:1px solid transparent;border-radius:6px;white-space:nowrap;font-size:16px;font-weight:700;text-decoration:none}
.ruth-nav .header-ticket{border-color:var(--ink)}
.ruth-nav .header-ticket:hover{transform:none}
.ruth-nav.ruth-nav-ready .header-ticket,.ruth-nav.ruth-nav-ready a:hover{background:transparent;color:var(--ink);border-color:transparent;transform:none}
.nav-marker{position:absolute;left:0;top:0;z-index:0;background:var(--mustard);border:1px solid var(--ink);border-radius:6px;pointer-events:none}
.ruth-motion-on .nav-marker{transition:transform .38s cubic-bezier(.2,.7,.2,1),width .38s ease,height .2s ease}
.motion-toggle{font:inherit;font-size:12px;color:inherit;background:transparent;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
footer>div{flex-wrap:wrap;align-items:center;row-gap:8px}

/* The payment result and its tickets arrive without delaying status updates. */
.payment-card .brand{font-family:'Shrikhand',Georgia,serif;font-weight:400;line-height:1.1;color:var(--red)}
.payment-card .status{position:relative}
.payment-checking .status::after{content:"";display:inline-block;width:10px;height:10px;margin-left:12px;border-radius:50%;background:var(--petrol)}
.ruth-motion-on .payment-checking .status::after{animation:ruth-check 1.4s ease-in-out infinite}
@keyframes ruth-check{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.ruth-tab-hidden .payment-checking .status::after{animation-play-state:paused}
.payment-card .ticket{color:inherit;text-decoration:none;transition:transform .2s ease,background-color .2s ease}
.payment-card .ticket:focus-visible,.payment-card a:focus-visible,.payment-card button:focus-visible{outline:3px solid var(--petrol);outline-offset:4px}
.payment-card .payment-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px;font-size:14px}
.payment-card .payment-footer p{margin:0}
@media(hover:hover){.ruth-motion-on .payment-card .ticket:hover{transform:translateX(4px)}}
@media(max-width:720px){
 .hero-main h1 .hero-title-word{margin-inline:auto}
 .hero-picture{object-position:58% bottom}
 .hero-art::after{background:linear-gradient(color-mix(in srgb,var(--paper) 35%,transparent),color-mix(in srgb,var(--paper) 10%,transparent) 55%,transparent)}
 .site-header{gap:10px}
 .site-header .ruth-nav{gap:2px}
 .ruth-nav a{font-size:12px;padding:10px 8px;margin-left:0}
 .ruth-nav .header-ticket span{display:none}
 .ruth-payment{padding:20px}
 .ruth-payment .card{padding:24px;box-shadow:8px 8px 0 var(--b)}
 .ruth-payment .brand{font-size:56px}
 .ruth-payment .status{font-size:22px}
}
@media(max-width:360px){.site-header{padding-inline:12px;gap:8px}.ruth-nav a{font-size:11px;padding-inline:6px}.site-header .brand{font-size:27px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .ruth-intro-pending [data-hero-enter]{opacity:1;pointer-events:auto}
 .ruth-intro-pending .hero-art::after{opacity:1}
 .ruth-intro-pending .hero-picture{object-fit:cover}
 *,*::before,*::after{animation:none!important;transition:none!important}
}