/* Crew Country (Joseph 2026-09-28): the toy-land map of the Lab. Shared by the homepage map (and passport), the six area pages,
   crew.html (the adoption-card big view) and grown-ups.html (.cc-store tiles). Colours, type, space, radii and shadows come from
   assets/tokens.css; the area pages are built on the kit (body.kit, tools/landctl.py) and their page parts live under .cc-place. */
.cc-wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.cc-tape{display:inline-block;background:var(--sun);border:2px solid var(--ink);padding:3px 10px;font-size:.75rem;font-weight:900;letter-spacing:.08em;transform:rotate(-2deg);margin-bottom:8px}

/* ---------- the homepage map ---------- */
.cc-map{position:relative;border:4px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:7px 7px 0 var(--ink);background:#f6e7cf}
.cc-map img{display:block;width:100%;height:auto}
/* Joseph Sr 2026-09-28: the map lives on the page, not in a box. map-texas.jpg has a pure white backdrop: multiply makes the white vanish into the page */
.cc-map.is-free{border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;margin:0 -2%}
.cc-map.is-free img{mix-blend-mode:multiply}
.cc-map .cc-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity 1.1s;pointer-events:none;z-index:0;display:block}
.cc-map.is-free .cc-loop{mix-blend-mode:multiply}
.cc-map.is-live .cc-loop{opacity:1}
.cc-map > img{transition:opacity .35s}
.cc-map.is-live > img{opacity:0;transition:opacity .5s .7s}   /* the picture steps aside while the loop plays so edges never double */
@media (prefers-reduced-motion:reduce){.cc-map .cc-loop{display:none}}
@media(max-width:700px){.cc-map.is-free{margin:0 -10px}}
.cc-spot{position:absolute;display:flex;align-items:flex-end;justify-content:center;border-radius:18px;text-decoration:none;outline-offset:-4px;transition:background .2s}
.cc-spot:hover,.cc-spot:focus-visible{background:rgba(255,201,51,.18)}
.cc-spot span{font-family:var(--f-display);font-size:clamp(.72rem,1.7vw,1.05rem);color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;padding:3px 10px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;transform:translateY(40%) rotate(-1.5deg);transition:transform .2s}
.cc-spot:hover span,.cc-spot:focus-visible span{transform:translateY(40%) rotate(1deg) scale(1.06);background:var(--sun)}
.cc-spot.is-stamped span:after{content:' \2605';color:var(--error)}
.cc-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.cc-chip{font-weight:900;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:999px;padding:7px 14px;box-shadow:3px 3px 0 var(--ink);font-size:.92rem}
.cc-chip.is-here{background:var(--sun)}
.cc-chip.is-stamped:after{content:' \2605';color:var(--error)}
#cc-map{scroll-margin-top:140px}   /* the Crew Country links land on the map itself, clear of the sticky header */

/* ---------- the passport (homepage + every place; land.js renders it) ----------
   audit T18: empty slots read "waiting for you" (a ? badge, the picture in grey, full-ink ring), not "disabled"; one row of six on
   desktop; 13px labels; the finished passport's code sits on a small "For grown-ups" ticket. */
.cc-passport{margin:28px 0 0;background:#fff;border:3px dashed var(--ink);border-radius:var(--r-panel);padding:var(--s-5)}
.cc-passport h3{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:1.15;margin:0 0 4px}
.cc-passport > p{margin:0 0 var(--s-4);max-width:var(--measure)}
.cc-stamps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;justify-items:center}
.cc-stamps > a{display:flex;flex-direction:column;align-items:center;width:min(100%,120px);text-decoration:none;color:inherit;min-height:44px}
.cc-stamp{width:100%;aspect-ratio:1/1;border-radius:50%;border:3px dashed var(--ink);background:var(--paper) center/cover no-repeat;position:relative;filter:grayscale(1) contrast(.85);opacity:.85}
.cc-stamp:after{content:'?';position:absolute;right:-4px;top:-6px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid var(--ink);
  font:400 1rem/1 var(--f-display);color:var(--error)}
.cc-stamp.is-on{opacity:1;filter:none;border:3px solid var(--coral);box-shadow:0 0 0 2px var(--ink)}
.cc-stamp.is-on:after{content:'\2605';background:var(--coral);color:#fff;font-size:.8rem}
.cc-stamp-label{display:block;font:800 var(--fs-label)/1.15 var(--f-body);text-align:center;margin-top:6px}
.cc-reward{position:relative;margin-top:var(--s-5);background:var(--kraft-lite);border:3px dashed var(--ink);border-radius:var(--r-card);padding:var(--s-5) var(--s-4) var(--s-4)}
.cc-reward[hidden]{display:none}
.cc-reward-label{position:absolute;top:-15px;left:16px;font:400 .95rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;background:var(--kraft);border:3px solid var(--ink);border-radius:var(--r-tag);padding:5px 12px;transform:rotate(-1deg)}
.cc-code{font-family:var(--f-display);font-size:1.7rem;letter-spacing:.06em;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:2px 12px;display:inline-block;margin:6px 8px 6px 0}
.cc-btn{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-display);font-weight:400;font-size:1.05rem;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:var(--r-pill);padding:6px 18px;box-shadow:var(--sh-2);cursor:pointer}
.cc-btn-coral{background:var(--coral)} .cc-btn-teal{background:var(--teal)}
.cc-reward input{font:inherit;font-weight:800;min-height:44px;border:3px solid var(--ink);border-radius:10px;padding:7px 10px;max-width:220px;margin:0 8px 8px 0}
.cc-cert{display:none}
@media (max-width:640px){.cc-stamps{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}.cc-passport{padding:var(--s-4)}
  .cc-spot span{padding:2px 7px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}}
/* the certificate prints only from its own button (audit T91) */
@media print{html.print-cert body *:not(:has(.cc-cert)):not(.cc-cert):not(.cc-cert *){display:none!important}html.print-cert .cc-cert{display:block!important;padding:60px;text-align:center;font-family:var(--f-display);color:var(--ink)}}
@page{margin:12mm}

/* ---------- the stamp moment: a white stamp card, bottom left, never over Tex or the chat button (audit T18) ---------- */
.cc-toast{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:12px;max-width:320px;background:var(--card);color:var(--ink);
  border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-paper),var(--sh-2);padding:10px 14px 10px 10px;font:800 .95rem/1.3 var(--f-body);
  transform:translateY(160%);transition:transform var(--t-base) var(--ease-pop)}
.cc-toast.is-on{transform:none}
.cc-toast img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--coral);box-shadow:0 0 0 2px var(--ink);transform:rotate(-8deg)}
.cc-toast.is-on img{animation:cc-thunk 250ms var(--ease-pop) both}
.cc-toast b{display:block;font:400 1.15rem/1.1 var(--f-display)}
.cc-toast a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:3px}
@keyframes cc-thunk{from{transform:scale(1.3) rotate(-10deg)}to{transform:scale(1) rotate(-8deg)}}
@media (max-width:767px){.cc-toast{left:12px;bottom:12px;max-width:calc(100vw - 96px)}}
@media (prefers-reduced-motion:reduce){.cc-toast{transition:none}.cc-toast.is-on img{animation:none}}

/* ---------- the big view (polaroid.js): playset pictures, real photos and adoption cards ---------- */
.cc-polaroid{position:relative;margin:18px 10px 6px 0;width:clamp(210px,26vw,290px);background:#fff;padding:11px 11px 0;border-radius:3px;
  box-shadow:0 1px 2px rgba(43,35,68,.18),0 10px 24px rgba(43,35,68,.16);transform:rotate(3deg);transition:transform .25s ease}
.cc-polaroid:hover{transform:rotate(1deg) scale(1.03)}
.cc-polaroid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#eee;filter:saturate(1.04) contrast(1.02)}
.cc-polaroid figcaption{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 12px;text-align:center}
.cc-pol-cap{font:700 1.3rem/1.1 var(--f-hand);color:var(--ink)}
.cc-pol-tape{position:absolute;top:-12px;left:50%;width:92px;height:26px;margin-left:-46px;transform:rotate(-4deg);background:rgba(255,201,51,.72);box-shadow:0 1px 2px rgba(43,35,68,.12)}
@media (prefers-reduced-motion:reduce){.cc-polaroid{transition:none}.cc-polaroid:hover{transform:rotate(3deg)}}
.cc-pol-home{position:relative;z-index:3;width:clamp(200px,24vw,270px);margin:-190px 2% 0 auto;transform:rotate(4deg)}
@media (max-width:759px){.cc-pol-home{margin:10px auto 6px;width:min(70vw,270px)}}
.cc-pol-open{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
.cc-pol-zoom{position:absolute;right:8px;bottom:8px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);font:900 1rem/1 system-ui,sans-serif;box-shadow:0 1px 3px rgba(43,35,68,.25)}
.cc-pol-dlg{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;border:0;padding:0;background:none;max-width:none;max-height:none;overflow:visible}
.cc-pol-dlg::backdrop{background:var(--backdrop)}
.cc-pol-big{position:relative;background:#fff;padding:14px 14px 0;border-radius:4px;transform:rotate(-1deg);
  width:min(92vw,calc(100dvh - 150px),760px);box-shadow:0 18px 50px rgba(0,0,0,.35);animation:cc-pol-in .22s ease-out}
.cc-pol-big img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1);object-fit:cover;background:#eee}
.cc-pol-bigcap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 16px;text-align:center}
.cc-pol-bigcap .cc-pol-cap{font-size:1.7rem}
.cc-pol-x{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);
  background:var(--sun);color:var(--ink);font:900 1.1rem/1 system-ui,sans-serif;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
@media (max-width:759px){.cc-pol-x{top:-12px;right:-6px}}
@keyframes cc-pol-in{from{opacity:0;transform:rotate(3deg) scale(.85)}to{opacity:1;transform:rotate(-1deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.cc-pol-big{animation:none}}
.cc-pol-nav{position:absolute;top:calc(50% - 40px);width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:#fff;color:var(--ink);
  font:900 1.3rem/1 system-ui,sans-serif;cursor:pointer;box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center}
.cc-pol-prev{left:-26px}.cc-pol-next{right:-26px}
.cc-pol-nav:hover{background:var(--sun)}
.cc-pol-count{font:800 var(--fs-label)/1 var(--f-body);color:var(--muted)}
@media (max-width:759px){.cc-pol-prev{left:-8px}.cc-pol-next{right:-8px}.cc-pol-nav{width:44px;height:44px;top:calc(50% - 60px)}}
.cc-pol-big.is-tall{width:min(88vw,calc((100dvh - 130px) * .714),520px)}   /* adoption cards keep their portrait shape */
.cc-pol-big.is-tall img{object-fit:contain;background:none}
.cc-cardfig{margin:0}

/* ---------- grown-ups.html: tiles (shared) ---------- */
.cc-store{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.cc-tile{display:block;text-decoration:none;color:var(--ink);background:#fff;border:4px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 var(--ink)}
.cc-tile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-bottom:3px solid var(--ink)}
.cc-tile b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.15rem;padding:10px 12px 0}
.cc-tile span{display:block;padding:2px 12px 12px;font-size:.88rem}

/* ---------- the playset piece popup (pieces.js, shop.css .ts-dlg shell) ---------- */
.cc-pv .cc-pv-stage{position:relative;aspect-ratio:1/1;border-radius:16px;border:3px solid var(--ink);background:#fff;overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.cc-pv .cc-pv-stage img,.cc-pv .cc-pv-stage model-viewer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.cc-pv .cc-pv-chip{position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;border-radius:999px;font:800 var(--fs-label) var(--f-body);padding:4px 10px;z-index:2}
.cc-pv .cc-pv-drag{left:auto;right:10px;top:auto;bottom:10px;background:#fff;color:var(--ink);border:2px solid var(--ink);font:700 1.2rem/1 var(--f-hand);transition:opacity var(--t-base)}
.cc-pv .cc-pv-drag.is-gone{opacity:0}
.cc-pv .cc-pv-tabs{display:flex;gap:8px;margin-top:12px}
.cc-pv .cc-pv-tabs button{flex:1;min-height:44px;border:3px solid var(--ink);border-radius:999px;background:#fff;font:800 .95rem var(--f-body);color:var(--ink);cursor:pointer}
.cc-pv .cc-pv-tabs button[aria-pressed="true"]{background:var(--sun)}
.cc-pv .cc-pv-set{font:700 var(--fs-hand)/1.1 var(--f-hand);color:var(--teal-ink);margin:0}
.cc-pv .cc-pv-blurb{font-weight:700;margin:0 0 12px}
.cc-pv .cc-pv-more-h{font-weight:800;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px}
.cc-pv .cc-pv-more{display:flex;gap:8px;flex-wrap:wrap}
.cc-pv .cc-pv-more button{width:58px;height:58px;border-radius:12px;border:2.5px solid var(--ink);background:#fff;padding:0;overflow:hidden;cursor:pointer}
.cc-pv .cc-pv-more img{width:100%;height:100%;object-fit:cover}
.cc-pv .cc-pv-more button[aria-current="true"]{outline:3px solid var(--sun);outline-offset:2px}
.cc-pv .ts-price small{font-family:var(--f-body);font-size:.8125rem;font-weight:800;color:var(--muted)}
@media(max-width:700px){.cc-pv .cc-pv-stage{aspect-ratio:auto;height:min(40vh,300px)}.cc-pv .cc-pv-tabs{margin-top:8px}.cc-pv .ts-qv{gap:14px}}

/* ---------- the crew's moves: only the planned move, never a mechanism the print has not proved ---------- */
@keyframes cc-hop{0%,100%{transform:none}40%{transform:translateY(-10px)}}
@keyframes cc-wiggle{0%,100%{transform:none}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@keyframes cc-nod{0%,100%{transform:none}30%{transform:translateY(6px) rotate(2deg)}60%{transform:translateY(-3px)}}
@keyframes cc-tilt{0%,100%{transform:none}35%,65%{transform:rotate(-9deg)}}
@keyframes cc-twist{0%,100%{transform:none}30%{transform:rotate(10deg) scale(1.03)}65%{transform:rotate(-8deg)}}
@keyframes cc-curl{0%,100%{transform:none}40%,60%{transform:scale(.9,.94) rotate(-6deg)}}
@keyframes cc-hug{0%,100%{transform:none}40%,60%{transform:scale(1.07,.95)}}
@keyframes cc-shuffle{0%,100%{transform:none}25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-5px)}}
@keyframes cc-wobble{0%,100%{transform:none}25%{transform:scale(1.05,.95)}50%{transform:scale(.96,1.04)}75%{transform:scale(1.03,.97)}}
@keyframes cc-howdy{0%,100%{transform:none}30%{transform:rotate(-6deg) translateY(-6px)}60%{transform:rotate(4deg)}}
.cc-go-wiggle{animation:cc-wiggle .8s ease}.cc-go-nod{animation:cc-nod .7s ease}.cc-go-tilt{animation:cc-tilt .9s ease}.cc-go-twist{animation:cc-twist .8s ease}
.cc-go-curl{animation:cc-curl .9s ease}.cc-go-hug{animation:cc-hug .8s ease}.cc-go-shuffle{animation:cc-shuffle .7s ease}.cc-go-wobble{animation:cc-wobble .8s ease}.cc-go-howdy{animation:cc-howdy .8s ease}
@media (prefers-reduced-motion:reduce){[class*="cc-go-"],.cc-card.is-buddy{animation:none!important}}
html.calm [class*="cc-go-"],html.calm .cc-card.is-buddy{animation:none!important}

/* ---------- the living loops (map + banners) ---------- */
/* the loop videos decode their paper ~2% darker than the page, so multiply left a faint grey box; lift the paper back to white */
.cc-map.is-free .cc-loop,.cc-banner.is-free .cc-scene .cc-loop{filter:brightness(1.025)}
.cc-map.is-free .cc-loop{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
/* forced colours (audit G18): multiply on a black page hides every picture, so show them plainly */
@media (forced-colors:active){.cc-map.is-free img,.cc-map.is-free .cc-loop,.cc-banner.is-free img,.cc-banner.is-free .cc-scene .cc-loop{mix-blend-mode:normal;forced-color-adjust:none}
  .cc-place .h-printed{filter:none;background:none;color:CanvasText}}
@media (prefers-contrast:more){.cc-place .h-printed{filter:none;background:none;color:var(--ink)}}

/* ---------- the map grows into the place (audit T92): a cross-page view transition, off under reduced motion and Calm ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
:root.calm::view-transition-group(*),:root.calm::view-transition-old(*),:root.calm::view-transition-new(*){animation:none!important}

/* =====================================================================================================================
   The six places (tools/landctl.py): main.cc-place on body.kit.look-printed
   ===================================================================================================================== */
.cc-place{padding-bottom:var(--s-7)}
.cc-place .cc-sec{margin-top:var(--s-8)}
.cc-place .sec-head{margin-bottom:var(--s-5)}
.cc-place .sec-head .lede{margin-top:var(--s-2)}
.cc-place .h2{width:fit-content}
.say-click{display:none}
@media (hover:hover) and (pointer:fine){.say-tap{display:none}.say-click{display:inline}}

/* the place band: the place's own ground on the first band only, ending in a torn paper edge */
.place-band{position:relative;background:var(--place,var(--sand));padding:var(--s-4) 0 var(--s-5);margin-bottom:var(--s-7)}
.place-band::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:16px;background:var(--place,var(--sand));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v6l-7 5-9-4-8 7-11-5-6 4-10-6-9 7-8-3-12 5-7-6-10 4-6-2-11 6-8-5-9 3-6-4-12 7-9-6-7 3-10-4-8 6-11-5-6 2-9 5-7-4-11 3-6-5-9 6-8-3V0z'/%3E%3C/svg%3E") 0 0/240px 16px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v6l-7 5-9-4-8 7-11-5-6 4-10-6-9 7-8-3-12 5-7-6-10 4-6-2-11 6-8-5-9 3-6-4-12 7-9-6-7 3-10-4-8 6-11-5-6 2-9 5-7-4-11 3-6-5-9 6-8-3V0z'/%3E%3C/svg%3E") 0 0/240px 16px repeat-x;
  filter:drop-shadow(0 2px 0 rgba(60,38,20,.10))}
/* the place sign (the one sign at the top of a place; the frame stamps no crumb here) */
.place-sign{flex-wrap:nowrap;white-space:nowrap}
.place-sign svg{width:18px;height:18px}
@media (max-width:480px){.place-sign{font-size:12px;gap:4px;padding:4px 10px 4px 8px}.place-sign__long{display:none}}
.place-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:end;gap:var(--s-5);margin:var(--s-4) 0 var(--s-3)}
.place-title{min-width:0}
.place-tag{margin:var(--s-1) 0 0 4px;transform:rotate(-1.5deg);transform-origin:left}
.cc-host{display:flex;gap:var(--s-3);align-items:center;margin:0}
.cc-host img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;background:#fff;border:3px solid var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.cc-say{position:relative;margin:0 0 0 6px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 14px;box-shadow:var(--sh-paper);font-size:1rem;font-weight:700;line-height:1.45}
.cc-say:before{content:'';position:absolute;left:-13px;top:50%;margin-top:-9px;border:9px solid transparent;border-right-color:var(--ink);border-left:0}

/* the banner: cut out of its white backdrop (multiply) so it stands on the place ground; space reserved by --ar (no jump) */
.cc-banner.is-free{position:relative}
.cc-scene{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto}
.cc-scene > img{display:block;width:auto;max-width:100%;height:auto;mix-blend-mode:multiply;transition:opacity .35s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.cc-banner.is-free .cc-scene[style*="--ar"]{width:min(100%, calc(430px * var(--ar)));aspect-ratio:var(--ar)}
.cc-banner.is-free .cc-scene[style*="--ar"] > img{width:100%;height:auto}
.cc-scene .cc-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity 1.1s;pointer-events:none;z-index:1;display:block;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.cc-scene.is-live .cc-loop{opacity:1}
.cc-scene.is-live > img{opacity:0;transition:opacity .5s .7s}   /* the still steps aside once the loop is up, or every edge doubles */
@media (prefers-reduced-motion:reduce){.cc-scene .cc-loop,.loop-pause{display:none!important}}
html.calm .cc-scene .cc-loop,html.calm .loop-pause{display:none!important}
.loop-pause{position:absolute;right:6px;bottom:6px;z-index:4;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;
  border-radius:var(--r-pill);border:2px solid var(--ink);background:#fff;box-shadow:var(--sh-1);font:800 var(--fs-label) var(--f-body);color:var(--ink);cursor:pointer}
.loop-pause svg{width:18px;height:18px}
.loop-pause[hidden]{display:none}
.banner-hint{text-align:center;margin:var(--s-2) 0 0;font-size:var(--fs-small);font-weight:700;color:var(--muted)}
.banner-hint .dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);font-size:.8125rem;line-height:1;vertical-align:-5px;margin:0 2px}
.banner-hint .dot--star{background:var(--coral);color:#fff}
.banner-hint .dot--plus{background:#fff;color:var(--ink);font-weight:900}

/* banner pins: + for a playset piece, a coral star for a resident. Each pin keeps a 44px hit area; stars ride above the head. */
.cc-piece{position:absolute;display:grid;place-items:center;min-width:44px;min-height:44px;background:none;border:0;padding:0;cursor:pointer;border-radius:16px;z-index:2;color:var(--ink)}
.cc-piece:hover,.cc-piece:focus-visible{background:rgba(255,201,51,.16);outline:3px dashed var(--ink);outline-offset:-3px}
.cc-piece-dot{width:26px;height:26px;border-radius:50%;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-1);
  font:900 1rem/1 var(--f-body);color:var(--ink);display:grid;place-items:center;animation:cc-dot 2.4s ease-in-out 3}
.cc-piece:nth-of-type(3n+2) .cc-piece-dot{animation-delay:.8s}
.cc-piece:nth-of-type(3n) .cc-piece-dot{animation-delay:1.6s}
.cc-piece:hover .cc-piece-dot,.cc-piece:focus-visible .cc-piece-dot{background:var(--sun);animation:none}
.cc-piece-tip{position:absolute;left:50%;top:calc(50% + 20px);transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;
  font:800 .875rem/1.2 var(--f-body);border-radius:10px;padding:6px 10px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
.cc-piece-tip b{display:block;font-weight:700;color:var(--on-night-muted);font-size:var(--fs-label)}
.cc-piece:hover .cc-piece-tip,.cc-piece:focus-visible .cc-piece-tip{opacity:1}
@keyframes cc-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.cc-crew-spot{place-items:start center}
.cc-crew-spot .cc-piece-dot{translate:0 -55%;background:var(--coral);color:#fff;font-size:.95rem}
.cc-crew-spot .cc-piece-tip{top:22px}
.cc-crew-spot:hover,.cc-crew-spot:focus-visible{background:none;outline:none}
.cc-crew-spot:hover .cc-piece-dot{scale:1.15;background:var(--sun);color:var(--ink)}
.cc-crew-spot:focus-visible .cc-piece-dot{outline:3px dashed var(--ink);outline-offset:3px;background:var(--sun);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.cc-piece-dot{animation:none}}
html.calm .cc-piece-dot{animation:none}
.lp-armed .look-printed .cc-banner:not(.is-printed) .cc-piece{visibility:hidden}   /* the pins appear once the banner has printed (printed.js) */
.lp-armed .look-printed .cc-banner.is-printed .cc-piece{animation:cc-piece-in .4s both}
@keyframes cc-piece-in{from{opacity:0}to{opacity:1}}

/* the playset slip: information on a flat butter slip, one coral action */
.playset-slip{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-5);flex-wrap:wrap;padding:var(--s-4) var(--s-5)}
.slip-pieces{min-width:0}
.slip-label{margin:0 0 var(--s-2);font-size:var(--fs-label);font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.slip-chips{display:flex;gap:var(--s-3);flex-wrap:wrap}
.piece-chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:3px 16px 3px 4px;background:#fff;border:2px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:var(--sh-1);font:800 1rem/1 var(--f-body);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
.piece-chip img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);background:#fff}
@media (hover:hover) and (pointer:fine){.piece-chip:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}}
.piece-chip:active{transform:translate(1px,1px);box-shadow:none}
.slip-buy{display:flex;align-items:center;gap:var(--s-4)}
.swing-tag--lg{height:40px;font-size:1.5rem;padding:0 14px 0 10px}
.swing-tag--lg::before{width:27px;height:27px;left:-14px;top:4.5px}

/* resident cards: .toy-card--flip. Front = toy, name, role, their own words, swing tag, Adopt me. Back = the story as text. */
.toy-grid{margin-top:var(--s-2)}
.toy-card--flip{overflow:visible;scroll-margin-top:calc(var(--ttl-head) + 110px)}
.toy-card--flip .toy-card__well{border-radius:15px 15px 0 0;background:var(--paper)}
.toy-card--flip .cc-face{position:absolute;inset:0;overflow:hidden;border-radius:15px 15px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.toy-card--flip .cc-face img{width:100%;height:100%;object-fit:cover;display:block}
.toy-card--flip .cc-face:focus-visible{outline-offset:-6px}
.cc-tap{position:absolute;left:10px;bottom:10px;z-index:2;pointer-events:none;background:var(--ink);color:#fff;font:800 var(--fs-label)/1 var(--f-body);letter-spacing:.02em;padding:7px 11px;border-radius:var(--r-pill)}
.toy-tag{position:absolute;top:12px;right:12px;z-index:2}
.flip-pill{position:absolute;right:6px;bottom:6px;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:0 4px;
  background:none;border:0;cursor:pointer;color:var(--ink);font:800 var(--fs-label)/1 var(--f-body);text-transform:uppercase;letter-spacing:.04em}
.flip-pill::before{content:"";position:absolute;inset:7px 0;border-radius:var(--r-pill);background:#fff;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);z-index:-1;
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
.flip-pill{padding:0 12px}
.flip-pill svg{width:15px;height:15px;flex:none}
@media (hover:hover) and (pointer:fine){.flip-pill:hover::before{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}}
.flip-pill:active::before{transform:translate(1px,1px);box-shadow:none}
.toy-card--flip .toy-card__body{padding:var(--s-4) var(--s-4) var(--s-4)}
.toy-card--flip .toy-card__role{margin-bottom:var(--s-2)}
.toy-hook{font-size:1rem;font-weight:700;line-height:1.45;margin:0}
.toy-card--flip .toy-card__foot{padding-top:var(--s-4)}
.toy-card--flip .toy-card__foot:empty{display:none}
/* the back: an HTML story panel that swings in over the card, left-aligned at 16-17px */
.toy-back{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;background:var(--card);border-radius:15px;padding:var(--s-4) var(--s-4) var(--s-3);
  overflow:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:perspective(900px) rotateY(-70deg);transform-origin:left center;
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),visibility 0s var(--t-base)}
.toy-card.is-flipped .toy-back{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.toy-back__h{font:400 var(--fs-h3)/1.15 var(--f-display);margin:0 0 var(--s-2)}
.toy-back__tale{margin:0 0 var(--s-3);font-size:1.0625rem;line-height:26px;font-weight:600;
  background:repeating-linear-gradient(180deg,transparent 0 24px,rgba(43,35,68,.10) 24px 25px,transparent 25px 26px)}
.toy-back__facts{margin:0 0 var(--s-3);font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--ink)}
.toy-back__facts b{font-weight:800}
.toy-back__foot{position:sticky;bottom:calc(-1 * var(--s-3));margin:auto calc(-1 * var(--s-4)) calc(-1 * var(--s-3));padding:var(--s-2) var(--s-4) var(--s-3);background:var(--card);
  border-top:2px dashed rgba(43,35,68,.2);display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}   /* the way back is always in view */
.toy-back .flip-pill{position:relative;right:auto;bottom:auto}
.card-chip{display:inline-flex;align-items:center;gap:10px;min-height:56px;width:auto;padding:4px 14px 4px 6px;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-tag);
  box-shadow:3px 3px 0 var(--ink);font:800 var(--fs-small)/1.2 var(--f-body);text-align:left;cursor:zoom-in;
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
.card-chip img{flex:none;width:32px;height:auto;aspect-ratio:96/134;border-radius:3px;border:1.5px solid var(--ink);transform:rotate(-4deg)}
@media (hover:hover) and (pointer:fine){.card-chip:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}}
.card-chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.toy-back{transition:opacity 120ms linear,visibility 0s;transform:none}}
html.calm .toy-back{transition:opacity 120ms linear,visibility 0s;transform:none}
/* the talking crew: a bubble above the toy, clamped under the header (land.js), up for as long as it takes to read */
.cc-bubble{position:absolute;left:10px;right:10px;top:-14px;transform:translateY(-100%);transform-origin:40% 100%;background:#fff;border:3px solid var(--ink);border-radius:14px;
  padding:9px 12px;font:700 1rem/1.35 var(--f-body);box-shadow:var(--sh-paper);opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
.cc-bubble:after{content:'';position:absolute;left:calc(40% - 6px);bottom:-12px;border:6px solid transparent;border-top-color:var(--ink)}
.cc-bubble.is-on{opacity:1;pointer-events:auto;cursor:pointer}
.cc-bubble.is-pop{animation:cc-pop .22s var(--ease-pop)}
@keyframes cc-pop{0%{transform:translateY(-100%) scale(.92)}100%{transform:translateY(-100%) scale(1)}}
.cc-reply{display:block;margin-top:7px;padding-top:7px;border-top:2px dashed rgba(43,35,68,.22);font-size:.95rem}
.cc-reply img{display:inline-block;vertical-align:middle;width:28px;height:28px;margin-right:6px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--ink);background:var(--paper)}
.cc-reply b{font-weight:900}
@media (prefers-reduced-motion:reduce){.cc-bubble.is-pop{animation:none}}
.cc-card.is-buddy{animation:cc-hop .5s ease}
/* two residents: a horizontal pair on wide screens (audit T16) */
@media (min-width:768px){
  .toy-grid[data-n="2"] .toy-card{flex-direction:row}
  .toy-grid[data-n="2"] .toy-card__well{flex:0 0 46%;aspect-ratio:auto;min-height:260px;border-bottom:0;border-right:3px solid var(--ink);border-radius:15px 0 0 15px}
  .toy-grid[data-n="2"] .cc-face{border-radius:15px 0 0 15px}
  .toy-grid[data-n="2"] .toy-card__body{justify-content:center;padding:var(--s-5)}
  .toy-grid[data-n="2"] .toy-card__foot{margin-top:0}
}
@media (min-width:768px) and (max-width:900px){.toy-grid.grid-4,.toy-grid.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:901px){.toy-grid.grid-5{gap:var(--s-4)}.toy-grid.grid-5 .toy-card__body{padding:var(--s-3) var(--s-3) var(--s-4)}.toy-grid.grid-5 .toy-hook{font-size:.95rem}}
/* phones: a two-up album; an odd last card lies on its side across both columns */
@media (max-width:767px){
  .toy-grid.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) 12px}
  .toy-card--flip .toy-card__body{padding:var(--s-3) var(--s-3) var(--s-3)}
  .toy-card--flip .toy-card__name{font-size:1.15rem}
  .toy-card--flip .toy-card__role{font-size:1.15rem}
  .toy-hook{font-size:.9375rem;line-height:1.4}
  .toy-card--flip .btn{width:100%;padding:0 10px}
  .toy-tag{top:8px;right:8px;font-size:1.05rem;height:28px}
  .cc-tap{left:6px;bottom:8px;padding:7px 9px}
  .flip-pill{right:2px;bottom:2px;padding:0 10px}
  .toy-back{padding:var(--s-3)}
  .toy-back__foot{margin:auto calc(-1 * var(--s-3)) calc(-1 * var(--s-3));padding:var(--s-2) var(--s-3) var(--s-3)}
  .toy-back__tale{font-size:1rem;line-height:24px;background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(43,35,68,.10) 22px 23px,transparent 23px 24px)}
  .card-chip{min-height:48px;padding:3px 10px 3px 5px;font-size:var(--fs-label)}
  .toy-grid > .toy-card:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row}
  .toy-grid > .toy-card:last-child:nth-child(odd) .toy-card__well{flex:0 0 46%;aspect-ratio:auto;min-height:170px;border-bottom:0;border-right:3px solid var(--ink);border-radius:15px 0 0 15px}
  .toy-grid > .toy-card:last-child:nth-child(odd) .cc-face{border-radius:15px 0 0 15px}
}

/* Meet the herd (Printer Ranch): real photos in polaroids, then each printer's name tape (information, so no tap shadow) */
.herd-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-7);align-items:center}
.herd-pols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);padding:var(--s-4) var(--s-2)}
.herd-pols .polaroid img{aspect-ratio:4/5;object-position:50% 30%}
.herd-pols .polaroid figcaption .cc-pol-cap{font-size:var(--fs-hand)}
.herd-pols .cc-pol-open{cursor:zoom-in}
.herd-names{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.herd-tag{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s-3);align-items:baseline;background:var(--tint-butter);border-radius:var(--r-card);padding:var(--s-3) var(--s-4)}
.herd-name{font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.1;background:var(--sun);border:2px solid var(--ink);border-radius:6px;padding:3px 10px;transform:rotate(-1.5deg);width:fit-content}
.herd-tag .mono{color:var(--muted)}
.herd-say{grid-column:1 / -1;font-size:var(--fs-small);font-weight:700;line-height:1.45}
@media (max-width:767px){.herd-row{grid-template-columns:1fr;gap:var(--s-5)}.herd-pols{gap:var(--s-4);padding:var(--s-3) 0}}

/* the General Store (Front Porch): door cards into the rest of the shop */
.store-card{display:flex;flex-direction:column;height:100%;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-3);overflow:hidden;
  color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
.store-card__well{display:block;aspect-ratio:4/3;background:var(--sand);border-bottom:3px solid var(--ink);overflow:hidden}
.store-card__well img{width:100%;height:100%;object-fit:cover;display:block}
.store-card b{font:400 var(--fs-h3)/1.15 var(--f-display);padding:var(--s-3) var(--s-4) 0}
.store-card > span:last-child{padding:2px var(--s-4) var(--s-4);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.store-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-4)}}
.store-card:active{transform:translate(3px,3px);box-shadow:var(--sh-1)}
@media (max-width:767px){.store-grid > :last-child:nth-child(odd){grid-column:1 / -1}.store-grid > :last-child:nth-child(odd) .store-card__well{aspect-ratio:21/9}}

/* Take the whole trail home (Back Forty): one wide promo band, the real photo on the left */
.pack-band{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-7);align-items:center;background:var(--tint-butter);border-radius:var(--r-panel);padding:var(--s-6) var(--s-6) var(--s-6) var(--s-7)}
.pack-pol img{aspect-ratio:4/3}
.pack-text .lede{margin:var(--s-3) 0 var(--s-5)}
.pack-buy{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
@media (max-width:767px){.pack-band{grid-template-columns:1fr;gap:var(--s-5);padding:var(--s-6) var(--s-4) var(--s-5)}.pack-pol{width:min(100%,330px);margin:0 auto}
  .pack-buy .btn{flex:1}}

/* Playset snapshots: renders in the chunky card frame (the polaroid is kept for real photos) */
.snap-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5)}
.snap-row[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.snap-row > .polaroid{align-self:start}
.snap-card{margin:0;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-3);padding:8px 8px 0;display:flex;flex-direction:column;
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
@media (hover:hover) and (pointer:fine){.snap-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-4)}}
.snap-card:active{transform:translate(2px,2px);box-shadow:var(--sh-1)}
.snap-card .cc-pol-open{border-radius:11px;overflow:hidden}
.snap-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.snap-card figcaption{padding:10px 6px 12px;text-align:left}
.snap-card .cc-pol-cap{font:800 .95rem/1.3 var(--f-body);color:var(--ink)}
.snap-zoom{position:absolute;right:8px;bottom:8px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid var(--ink);color:var(--ink)}
.snap-zoom svg{width:18px;height:18px}
@media (max-width:767px){
  .snap-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-4);margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .snap-row::-webkit-scrollbar{display:none}
  .snap-card{flex:none;width:min(58vw,230px);scroll-snap-align:start}}

/* about + door */
.place-about{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);flex-wrap:wrap;margin-top:var(--s-8)}
.place-about .prose{font-size:var(--fs-lede);font-weight:700;line-height:1.5}
.place-doors{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.class-door{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:4px;text-underline-offset:4px}
@media (max-width:560px){.place-about .btn{white-space:normal;text-align:center;line-height:1.15;padding:10px 20px;width:100%}}

/* the end of a place: passport, one Next-stop card, two quiet links (under ~450px on a phone) */
.cc-end{margin-top:var(--s-7);display:grid;gap:var(--s-5)}
.cc-end .cc-passport{margin:0}
.look-printed .cc-place .cc-passport{box-shadow:none}
.next-stop{grid-template-columns:200px 1fr auto;transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
.next-stop img{aspect-ratio:640/272;object-fit:cover;background:var(--sand)}
.next-stop__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.next-stop__text .mono{color:var(--muted);text-transform:uppercase}
.next-stop__tag{font-weight:700;color:var(--muted)}
.next-stop__go{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--card);border:3px solid var(--ink);box-shadow:var(--sh-2);margin-right:var(--s-2)}
.next-stop__go svg{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){.next-stop:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-4)}}
.next-stop:active{transform:translate(3px,3px);box-shadow:var(--sh-1)}
@media (max-width:560px){.next-stop{grid-template-columns:112px 1fr;gap:var(--s-3);padding:var(--s-3)}.next-stop__go{display:none}.next-stop .h3{font-size:1.2rem}}
.quiet-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--s-2);margin:0;font-size:15px;font-weight:800}
.quiet-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:3px}
.quiet-links svg{width:16px;height:16px}
/* stop 6: the Explorer finale */
.finale{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:center;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-paper);padding:var(--s-5)}
.finale__stamp .stamp__ring{width:84px;height:84px;font-size:2.4rem;color:var(--coral);background:var(--tint-butter)}
.finale.is-done .finale__stamp .stamp__ring{border:3px solid var(--coral);background:#fff}
.finale .h2{font-size:var(--fs-h2-doc)}
.finale__kick{color:var(--muted);text-transform:uppercase;margin:0 0 var(--s-1)}
.finale p{margin:var(--s-2) 0 0;max-width:var(--measure)}
.finale a{font-weight:800}
@media (max-width:560px){.finale{grid-template-columns:1fr;justify-items:start;gap:var(--s-3);padding:var(--s-4)}.finale__stamp .stamp__ring{width:64px;height:64px;font-size:1.8rem}}

/* phones */
@media (max-width:767px){
  .place-band{padding-top:var(--s-3);margin-bottom:var(--s-6)}
  .place-band .wrap{display:flex;flex-direction:column}
  .place-band .place-head{display:contents}
  .place-sign{order:0;align-self:flex-start}
  .place-title{order:1;margin-top:var(--s-3)}
  .place-band .cc-banner{order:2;margin:var(--s-2) calc(-1 * var(--gutter)) 0}
  .banner-hint{order:3;font-size:var(--fs-label)}
  .place-band .cc-host{order:4;margin-top:var(--s-4)}
  .cc-host img{width:56px;height:56px}
  .playset-slip{padding:var(--s-4);gap:var(--s-4)}
  .slip-pieces{width:100%}
  .slip-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--s-4));padding:2px var(--s-4) 6px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  .slip-chips::-webkit-scrollbar{display:none}
  .piece-chip{flex:none}
  .slip-buy{width:100%;justify-content:space-between}
  .slip-buy .btn{flex:1}
  .cc-place .cc-sec{margin-top:var(--s-7)}
  .place-about{margin-top:var(--s-7)}
  .cc-piece--wide{display:none}   /* at most six pins on a phone; every piece still has its chip in the slip */
  .cc-piece-tip{display:none}
  .cc-piece-dot{width:24px;height:24px;font-size:.9rem}
}
.cc-map .loop-pause{right:auto;left:8%;bottom:8%}