/* Illustrated area tiles — scenes drawn by scenes.js. Motion is small, looped and cut entirely for reduced-motion. */
.areas{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
.atile{position:relative;display:block;padding:0;min-height:0;background:var(--paper);border:var(--bw) solid var(--navy);box-shadow:var(--sh-sm);text-decoration:none;color:var(--navy);cursor:pointer;transition:transform .12s,box-shadow .12s;overflow:hidden}
@media(min-width:760px){.atile{box-shadow:var(--sh)}}
.atile:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy)}
.atile:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy)}
.atile .scene{position:relative;display:block;aspect-ratio:8/5;background:var(--cream);overflow:hidden}
.atile .scene svg.sc{position:absolute;inset:0;width:100%;height:100%;display:block}
.atile .peeker{position:absolute;right:7%;bottom:-2px;width:min(30%,120px);aspect-ratio:44/30;overflow:hidden;pointer-events:none}
.atile .peeker svg{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateY(78%);animation:peek 9s ease-in-out infinite;animation-delay:var(--pd,0s)}
.atile:hover .peeker svg{animation:none;transform:translateY(6%);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.ftile{overflow:hidden}
.ftile .fpeek{position:absolute;right:10px;bottom:-1px;width:84px;aspect-ratio:44/30;overflow:hidden;pointer-events:none}
.ftile .fpeek svg{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateY(40%);animation:peek2 11s ease-in-out infinite;animation-delay:var(--pd,0s)}
.ftile:hover .fpeek svg{animation:none;transform:translateY(6%);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.ftile .foot{padding-right:92px}
.atile .plate{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 14px 12px;background:var(--ac);color:var(--af,#fff);border-top:var(--bw) solid var(--navy);min-height:84px}
@media(min-width:760px){.atile .plate{padding:14px 18px 14px;min-height:96px}}
.atile .plate h3{font:400 clamp(26px,5.2vw,38px)/.92 var(--hand);text-transform:uppercase;margin:0;padding-right:28%;overflow-wrap:anywhere}
.atile .plate .meta{font:500 12px/1.3 var(--mono);letter-spacing:.04em;opacity:.92}
.atile .badge{position:absolute;top:10px;left:10px;z-index:2}
.atile .ic{display:none}
.band .wrap.bwrap{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.band .bscene{display:none;flex:0 0 auto;width:min(34%,280px);aspect-ratio:8/5;border:var(--bw) solid var(--navy);background:var(--cream);position:relative;overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:-2px}
.band .bscene svg{position:absolute;inset:0;width:100%;height:100%}
@media(min-width:760px){.band .bscene{display:block}}

/* ---- motion ---- */
.sc g{transform-box:fill-box;transform-origin:center}
.sc .blink{animation:blink 5s steps(1) infinite}
.sc .bob{animation:bob 2.6s ease-in-out infinite}.sc .d1{animation-delay:.6s}.sc .d2{animation-delay:1.3s}
.sc .fly{animation:fly 16s linear infinite}
.sc .wing{transform-origin:100% 50%;animation:wing .7s ease-in-out infinite alternate}
.sc .gull{animation:gullbob 3s ease-in-out infinite}
.sc .roll{animation:roll 7s ease-in-out infinite}
.sc .walk{animation:walk 8s ease-in-out infinite}
.sc .wheel{animation:wheel 1.2s linear infinite}
.sc .steam{animation:steam 2.4s ease-out infinite}.sc .steam.s2{animation-delay:1.1s}
.sc .puff{animation:puff 3.2s ease-out infinite}.sc .puff.p2{animation-delay:1.5s}
.sc .spin{animation:spin 9s linear infinite}.sc .spin.slow{animation-duration:48s}.sc .spin.rev{animation-direction:reverse;animation-duration:7s}
.sc .wave{transform-origin:100% 100%;animation:wave 1.2s ease-in-out infinite alternate}
.sc .wave-slow{transform-origin:100% 100%;animation:waveslow 2.2s ease-in-out infinite alternate}
.sc .glow{animation:glow 1.6s ease-in-out infinite alternate}
.sc .sway{transform-origin:50% 0;animation:sway 4s ease-in-out infinite alternate}
.sc .flame{transform-origin:50% 100%;animation:flame .5s ease-in-out infinite alternate}
.sc .notes{animation:notes 3s ease-out infinite}.sc .notes.n2{animation-delay:1s}.sc .notes.n3{animation-delay:2s}
.sc .tent{transform-origin:0 50%;animation:tent 1.6s ease-in-out infinite alternate}
.sc .flip{transform-origin:50% 50%;animation:flip 6s ease-in-out infinite}.sc .flip.f1{animation-delay:1.5s}.sc .flip.f2{animation-delay:3s}.sc .flip.f3{animation-delay:4.5s}
.sc .paper{animation:paper 3.4s ease-in-out infinite}
.sc .flapper{transform-origin:0 0;animation:flapper 3s ease-in-out infinite alternate}
.sc .drip{animation:drip 1.8s ease-in infinite}
.sc .turn{transform-origin:0 100%;animation:turn 1.4s ease-in-out infinite alternate}
.sc .twinkle{animation:twinkle 2.2s ease-in-out infinite}.sc .twinkle.t2{animation-delay:1.1s}
.sc .hand-s{animation:spin 12s linear infinite}.sc .hand-m{animation:spin 144s linear infinite}.sc .hand-h{animation:spin 1728s linear infinite}
.sc .pulse{animation:pulse 2.6s ease-out infinite}.sc .pulse.p2{animation-delay:1.3s}
.sc .drawer{animation:drawer 5s ease-in-out infinite}
.sc .stamp{animation:stamp 2.4s ease-in-out infinite}
.sc .swing{transform-origin:50% 0;animation:swing 2.4s ease-in-out infinite alternate}
.sc .arc{animation:bob 6s ease-in-out infinite}
.sc .claw{transform-origin:100% 100%;animation:claw 1.8s ease-in-out infinite alternate}.sc .claw.r{transform-origin:0 100%}
.sc .cloud{animation:cloud 30s linear infinite}

@keyframes peek{0%,62%{transform:translateY(78%)}70%,88%{transform:translateY(6%)}96%,100%{transform:translateY(78%)}}
@keyframes peek2{0%,58%{transform:translateY(40%)}66%,86%{transform:translateY(4%)}94%,100%{transform:translateY(40%)}}
@keyframes blink{0%,92%{transform:scaleY(1)}93%,96%{transform:scaleY(.1)}97%,100%{transform:scaleY(1)}}
@keyframes bob{from{transform:translateY(0)}50%{transform:translateY(-3px)}to{transform:translateY(0)}}
@keyframes gullbob{from{transform:translate(0,0)}50%{transform:translate(4px,-3px)}to{transform:translate(0,0)}}
@keyframes fly{from{transform:translateX(-90px)}to{transform:translateX(380px)}}
@keyframes wing{from{transform:rotate(-18deg)}to{transform:rotate(16deg)}}
@keyframes roll{0%,8%{transform:translateX(0)}46%,54%{transform:translateX(56px)}92%,100%{transform:translateX(0)}}
@keyframes walk{0%,10%{transform:translateX(0)}45%,55%{transform:translateX(36px)}90%,100%{transform:translateX(0)}}
@keyframes wheel{to{transform:rotate(360deg)}}
@keyframes steam{0%{transform:translateY(0);opacity:.6}100%{transform:translateY(-8px);opacity:0}}
@keyframes puff{0%{transform:translateY(0) scale(1);opacity:.9}100%{transform:translateY(-18px) scale(1.8);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wave{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes waveslow{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@keyframes glow{from{opacity:.25}to{opacity:1}}
@keyframes sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes flame{from{transform:scaleY(.8)}to{transform:scaleY(1.15)}}
@keyframes notes{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-34px) translateX(6px);opacity:0}}
@keyframes tent{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
@keyframes flip{0%,70%{transform:scaleY(1)}76%{transform:scaleY(.05)}82%,100%{transform:scaleY(1)}}
@keyframes paper{0%,15%{transform:translateY(0)}60%,100%{transform:translateY(22px)}}
@keyframes flapper{from{transform:rotate(-4deg)}to{transform:rotate(3deg)}}
@keyframes drip{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(52px);opacity:0}}
@keyframes turn{from{transform:rotate(-16deg)}to{transform:rotate(14deg)}}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes drawer{0%,70%{transform:translateX(0)}80%,90%{transform:translateX(10px)}100%{transform:translateX(0)}}
@keyframes stamp{0%,60%{transform:translateY(0)}68%{transform:translateY(7px)}76%,100%{transform:translateY(0)}}
@keyframes swing{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes claw{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes cloud{from{transform:translateX(0)}50%{transform:translateX(14px)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.sc *,.atile .peeker svg,.ftile .fpeek svg{animation:none!important}.atile .peeker svg,.ftile .fpeek svg{transform:translateY(30%)}}