/* Artwork moves; text, controls, calendar and focus targets keep their layout. */
html[data-motion=full] .hero-photo>img{scale:1.12}
.hero-photo figcaption{position:relative;z-index:1}
.motion-ribbon{overflow:hidden;padding:25px 0 29px;margin:40px 0 20px;background:var(--yellow);color:var(--forest);contain:paint}
.motion-ribbon-track{display:flex;align-items:center;gap:30px;white-space:nowrap;width:max-content;position:relative;left:-170px;font-family:var(--display);font-size:clamp(2rem,4vw,3.5rem);font-weight:700;line-height:1.35;letter-spacing:-.025em}
.motion-ribbon-track span{flex-shrink:0}
.motion-ribbon-track>svg{width:48px;height:28px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.motion-ribbon-track>svg:nth-of-type(even){width:30px;fill:currentColor;stroke-width:0}
.motion-ribbon-back{margin-top:4px;left:-330px;font-size:clamp(1.5rem,3vw,2.5rem);color:var(--green)}
[data-version=journal] .motion-ribbon{background:var(--blue)}
html[lang=th] .motion-ribbon-track{font-family:DinoThai,Arial,sans-serif;letter-spacing:normal;line-height:1.6}
.runner-teaser-art{overflow:hidden}
.runner-teaser-art>img{position:relative;z-index:1}
.runner-teaser-art>img:nth-child(2){transform:scaleX(-1)}
.runner-friendship{position:absolute;left:calc(50% - 19px);top:26px;width:38px;height:38px;display:grid;place-items:center;color:var(--forest);transform-origin:center;z-index:0}
.runner-friendship>svg{width:28px;height:28px;fill:var(--forest);stroke-width:0}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;font-size:16px;line-height:1.5;gap:10px}
.motion-toggle:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--green);flex-shrink:0}
.motion-toggle[aria-pressed=false]:before{background:var(--orange)}
.motion-toggle:disabled{opacity:1;cursor:default;text-decoration:none}
[data-version=journal] .motion-toggle:before{background:var(--yellow)}
[data-version=journal] .motion-toggle[aria-pressed=false]:before{background:var(--pink)}
html[data-motion=reduced] [data-motion],html[data-motion=reduced] .hero-dino,html[data-motion=reduced] .dino-parade>img,html[data-motion=reduced] .runner-teaser-art>img,html[data-motion=reduced] .runner-friendship{translate:none!important;rotate:none!important;scale:none!important;opacity:1!important}
@media(max-width:700px){
 .motion-ribbon{margin:24px 0 8px;padding:20px 0 24px}
 .motion-ribbon-track{gap:22px;left:-100px;font-size:32px}
 .motion-ribbon-back{left:-220px;font-size:25px}
 .motion-ribbon-track>svg{width:40px;height:24px}
 .runner-friendship{top:20px}
 .site-footer nav .motion-toggle{justify-content:flex-start;text-align:left}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-photo>img{scale:1!important}
 [data-motion],.hero-dino,.dino-parade>img,.runner-teaser-art>img,.runner-friendship{translate:none!important;rotate:none!important;scale:none!important;opacity:1!important}
}