/* The homepage on the kit (2026-09-29, "Paper, Ink & Plastic": one loud thing per screen).
   Loaded right after the stamped chrome header block, so it follows chrome.css and shop.css. The kit parts
   (.btn, .tape, .toy-card, .swing-tag, .polaroid, .trust-row, .ticket, .tile, .wrap, .section, .head, .lede) come from
   assets/kit.css; this file only holds what is the homepage's own, in tokens. */

/* names the shared scripts and stylesheets still read (shop.css, land.css, mini player) */
:root{--cream:var(--paper);--yellow:var(--sun);--white:var(--card);--shadow:var(--sh-3);--shadow-sm:var(--sh-2)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
[id]{scroll-margin-top:calc(var(--ttl-head) + 16px)}
::selection{background:var(--sun);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* one arrow, drawn not typed: it never wraps alone and has Lilita's weight */
.i-arrow{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}
.ic{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.18em;flex:none}

/* =================== market band: out of the sticky header, one line, baked into the page, scrolls away =================== */
.mkt-band{background:var(--night);text-align:center;position:relative;z-index:1}
.mkt-band[hidden]{display:none}
.mkt-band a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 16px;color:var(--on-night);
  font:800 .9375rem/1.2 var(--f-body);text-decoration:none;white-space:nowrap;overflow:hidden}
.mkt-band a:hover .mb-long,.mkt-band a:hover .mb-short{text-decoration:underline 2px var(--sun);text-underline-offset:4px}
.mkt-band a:focus-visible{outline:3px dashed var(--sun);outline-offset:-5px}
.mb-chip{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:var(--ink);border-radius:var(--r-pill);padding:3px 10px 3px 8px;
  font:900 var(--fs-label)/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.05em;flex:none}
.mb-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mb-when{color:var(--sun);font-weight:900}
.mb-dot{color:var(--on-night-muted);margin:0 2px}
.mb-long,.mb-short{overflow:hidden;text-overflow:ellipsis}
.mb-short{display:none}
.mkt-band .i-arrow{color:var(--sun)}
.mkt-band.live{background:var(--coral)}
.mkt-band.live a{color:var(--ink)}
.mkt-band.live .mb-when,.mkt-band.live .i-arrow{color:var(--ink)}
@media (max-width:760px){.mb-long,.mb-time,.mb-count{display:none}.mb-short{display:inline}.mkt-band a{gap:8px}}
@media (max-width:379px){.mb-chip-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mb-chip{padding:4px 7px}.mkt-band a{gap:6px;padding:0 10px}}

/* =================== hero: tape, display H1, lede, one coral CTA beside Joseph's island =================== */
.cc-hero-home{padding:var(--s-7) 0 0}
.cc-hero-home .cc-wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
.cc-lead.has-scene{max-width:1072px;margin:0 auto;display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:0 56px;align-items:center;text-align:left}
.cc-lead-text{max-width:560px;min-width:0}
.cc-lead-text .tape{margin:0 0 20px}
.cc-lead h1{font-size:var(--fs-display);line-height:1.02;letter-spacing:.005em;margin:0 0 16px;max-width:9.5em}
.cc-lede{max-width:30em;margin:0 0 28px}
.cc-lede a{font-weight:800;white-space:nowrap}
.cc-doors{margin:0}
/* Joseph's island is the one loud thing on this screen */
.cc-welcome{position:relative;margin:12px 0 0;container-type:inline-size}
.cc-island{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.cc-joseph-fig{position:absolute;left:22%;top:7%;width:24%;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 6px 4px rgba(43,35,68,.18));
  animation:joe-hello 1.3s ease-in-out .5s 1 both,joe-bob 3.6s ease-in-out 2s 3}   /* hello, three bobs, then he rests */
@keyframes joe-hello{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-6deg) translateY(-8px)}40%{transform:rotate(4deg)}60%{transform:rotate(-4deg) translateY(-4px)}80%{transform:rotate(2deg)}}
@keyframes joe-bob{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-2deg) translateY(-4px)}}
.cc-howdy{position:absolute;left:1%;top:-5%;z-index:3;width:max-content;max-width:50%;margin:0;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);
  box-shadow:var(--sh-paper);font:400 1.0625rem/1.15 var(--f-display);padding:9px 14px}
.cc-howdy::after{content:"";position:absolute;right:30%;bottom:-13px;border-width:10px 8px 0 8px;border-style:solid;border-color:var(--ink) transparent transparent}
.cc-howdy::before{content:"";position:absolute;right:calc(30% + 3px);bottom:-8px;border-width:7px 5px 0 5px;border-style:solid;border-color:var(--card) transparent transparent;z-index:1}
.cc-board{position:absolute;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:4.4cqw;line-height:1;color:var(--ink);text-decoration:none;
  letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.35);white-space:nowrap;border-radius:8px;transform:rotate(var(--r))}
.cc-board.b1{left:68%;top:11%;width:24%;height:13%;--r:-3deg}
.cc-board.b2{left:70%;top:26%;width:23%;height:12%;--r:-4deg}
.cc-board.b3{left:69%;top:41%;width:22%;height:11%;--r:1deg}
/* the words sit on the flat part of each painted board, clear of the arrow tip (about 12% of the board, 2.8cqw: percentages here would be of the whole hero):
   b1 and b3 point right, b2 points left; 3.5cqw is the size at which 'Crew Country' fits (2026-09-29) */
.cc-board{font-size:3.5cqw;letter-spacing:-.01em;box-sizing:border-box}
.cc-board.b1,.cc-board.b3{padding:0 2.8cqw 0 1cqw}
.cc-board.b2{padding:0 1cqw 0 2.8cqw}
.cc-board::before{content:"";position:absolute;inset:-8px -6px}   /* a 44px finger target; the painted board stays its size */
.cc-board:hover,.cc-board:focus-visible{text-decoration:underline 3px;text-underline-offset:4px}
.cc-board:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.cc-board:hover,.cc-board.is-wiggle{animation:board-wiggle .5s ease-in-out}
@keyframes board-wiggle{0%,100%{transform:rotate(var(--r))}25%{transform:rotate(calc(var(--r) - 4deg))}50%{transform:rotate(calc(var(--r) + 3deg))}75%{transform:rotate(calc(var(--r) - 2deg))}}

/* the story sits on the island: a toy-world render, so it is a card frame (polaroids are for real photos) */
.cc-story{position:absolute;right:-8%;bottom:-12%;width:clamp(180px,19vw,240px);z-index:4;margin:0;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);
  padding:7px 7px 0;box-shadow:var(--sh-3);transform:rotate(3deg);transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
@media (hover:hover) and (pointer:fine){.cc-story:hover{transform:rotate(3deg) translate(-2px,-2px);box-shadow:var(--sh-4)}}
.cc-story-open{position:relative;display:block;width:100%;padding:0;border:0;border-radius:11px;overflow:hidden;background:var(--sand);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cc-story-open:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.cc-story-v{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sand)}
.cc-story-play{position:absolute;left:50%;top:46%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--card);border:3px solid var(--ink);
  display:grid;place-items:center;box-shadow:var(--sh-1);transition:opacity var(--t-base)}
.cc-story-play svg{width:20px;height:20px;fill:var(--ink);margin-left:3px}
.cc-story.is-playing .cc-story-play{opacity:0}
.cc-story-sound{position:absolute;left:7px;bottom:7px;display:inline-flex;align-items:center;gap:4px;background:var(--ink);color:var(--on-night);border-radius:var(--r-pill);
  padding:3px 9px 3px 6px;font:800 var(--fs-label)/1.2 var(--f-body)}
.cc-story-sound svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cc-story-sound svg path:first-child{fill:currentColor}
.cc-story-cap{margin:0;padding:5px 4px 8px;text-align:center;white-space:nowrap;font:700 var(--fs-hand)/1.1 var(--f-hand);color:var(--ink)}
/* the film, big with sound */
.cc-vidpol-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-vidpol-dlg::backdrop{background:var(--backdrop)}
.cc-vidpol-big{position:relative;background:var(--card);padding:14px 14px 0;border-radius:var(--r-card);border:3px solid var(--ink);width:min(94vw,1100px,calc((100dvh - 160px) * 16 / 9));box-shadow:var(--sh-paper)}
.cc-vidpol-bigv{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);border-radius:8px}
.cc-vidpol-bigcap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 16px;text-align:center;margin:0}
.cc-vidpol-cap{font:700 1.7rem/1.1 var(--f-hand);color:var(--ink)}
.cc-vidpol-sub{font-size:var(--fs-small);font-weight:800;color:var(--muted)}
.cc-vidpol-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.6rem/1 var(--f-body);cursor:pointer;box-shadow:var(--sh-1)}

/* =================== Crew Country: one map, the passport is the one list of places =================== */
.cc-map-head{text-align:center;max-width:680px;margin:88px auto var(--s-2)}
.cc-map-head .lede{margin:var(--s-3) auto 0;color:var(--muted)}
.cc-map-stage{position:relative;max-width:1100px;margin:0 auto}
.cc-map.is-free{margin:0 -1%}
.cc-spot,.cc-spot:hover,.cc-spot:focus-visible{background:none;outline:none}
.cc-spot span{font:400 1.0625rem/1.2 var(--f-display);color:var(--ink);background:var(--card);border:3px solid var(--ink);border-radius:var(--r-tag);padding:6px 12px;
  box-shadow:var(--sh-2);transform:translateY(62%);translate:0 0;transition:translate var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
.cc-spot:hover span,.cc-spot:focus-visible span{transform:translateY(62%);background:var(--card)}
@media (hover:hover) and (pointer:fine){.cc-spot:hover span{translate:-2px -2px;box-shadow:var(--sh-3)}}
.cc-spot:active span{translate:2px 2px;box-shadow:var(--sh-1)}
.cc-spot:focus-visible span{outline:3px dashed var(--ink);outline-offset:3px}
.cc-map-pause{position:absolute;right:4%;top:3%;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;background:var(--card);
  border:3px solid var(--ink);border-radius:var(--r-pill);box-shadow:var(--sh-2);color:var(--ink);cursor:pointer;font:800 .9375rem/1 var(--f-body);
  opacity:0;pointer-events:none;transition:opacity var(--t-base)}
.cc-map.is-live .cc-map-pause,.cc-map.is-paused .cc-map-pause{opacity:1;pointer-events:auto}
.cc-map-pause svg{width:18px;height:18px;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;fill:none}
.cc-map-pause .i-play{fill:var(--ink);stroke:none;display:none}
.cc-map-pause[aria-pressed="true"] .i-pause{display:none}
.cc-map-pause[aria-pressed="true"] .i-play{display:block}
/* the whole-set snapshot is a render: card frame, tucked beside the panhandle */
.cc-snapcard.cc-pol-home{position:absolute;left:3%;top:12%;margin:0;width:clamp(170px,19vw,230px);z-index:3;background:var(--card);border:3px solid var(--ink);
  border-radius:var(--r-card);padding:7px 7px 0;box-shadow:var(--sh-3);transform:rotate(-3deg)}
.cc-snapcard .cc-pol-open{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:11px;overflow:hidden}
.cc-snapcard img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.cc-snapcard figcaption{padding:6px 4px 8px;text-align:center}
.cc-snapcard .cc-pol-cap{font:800 .875rem/1.25 var(--f-body);color:var(--ink)}
.cc-snapcard .cc-pol-zoom{position:absolute;width:32px;height:32px;right:6px;bottom:6px;display:grid;place-items:center;border-radius:50%;background:var(--card);border:2px solid var(--ink);box-shadow:none}
/* passport: stamps that wait for you, not stamps that look switched off */
.cc-passport{margin:56px auto 0;max-width:1072px;text-align:center;background:var(--card);border:3px dashed var(--ink);border-radius:var(--r-panel);padding:24px 24px 20px}
.cc-passport h3{font:400 var(--fs-h3)/1.15 var(--f-display);margin:0 0 var(--s-2)}
.cc-passport p{font-weight:600;max-width:34em;margin:0 auto 16px}
.cc-stamps{grid-template-columns:repeat(6,minmax(0,112px));justify-content:center;gap:16px}
.cc-stamp{opacity:1;filter:grayscale(1) contrast(.85) brightness(1.1);background-color:var(--paper);border:3px dashed var(--ink)}
.cc-stamp.is-on{filter:none;border:3px solid var(--coral)}
.cc-stamps a{position:relative;display:block;border-radius:var(--r-card);transition:transform var(--t-quick) var(--ease-pop)}
@media (hover:hover) and (pointer:fine){.cc-stamps a:hover{transform:translateY(-3px)}}
.cc-stamps a:has(.cc-stamp:not(.is-on))::after{content:"?";position:absolute;right:2px;top:0;width:28px;height:28px;border-radius:50%;background:var(--coral);
  border:3px solid var(--ink);display:grid;place-items:center;font:400 1rem/1 var(--f-display);color:var(--ink)}
.cc-stamp-label{font:800 var(--fs-label)/1.15 var(--f-body);color:var(--ink);margin-top:8px}
.cc-passport .cc-btn{font-family:var(--f-display);min-height:44px}

/* =================== sections, seams and bands =================== */
.home-sec{padding:var(--section) 0}
.home-sec .head{margin-bottom:var(--s-6)}
.home-sec .head .lede{text-align:center}
.band-sand{background:var(--sand)}
.seam{line-height:0;font-size:0;background:var(--paper)}
.seam svg{width:100%;height:26px;display:block}
.seam--down{background:var(--sand)}
.more{margin:var(--s-6) 0 0;text-align:center}

/* =================== Pocket Crew shelf: five cards, the all-five tile, one way to the shop =================== */
.pc-shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4);list-style:none;margin:0;padding:0}
.pc-shelf .toy-card__well{background:var(--well-pocket)}   /* the Pocket Crew photos' own backdrop, so no seam shows */
.pc-shelf .toy-card__name a{color:var(--ink);text-decoration:none}
.pc-shelf .toy-card__name a:hover{text-decoration:underline 3px var(--coral);text-underline-offset:3px}
.pc-shelf .toy-card__body{padding:12px 12px 14px}
.pc-shelf .toy-card__foot{gap:8px}
.pc-shelf .btn{padding:0 12px;font-size:.95rem}
.pc-shelf .swing-tag{margin-left:10px}
.pc-all{margin-top:var(--s-5)}
.pc-all .toy-card__well{flex:0 0 min(46%,420px);background:var(--well-pocket);aspect-ratio:3/2}
.pc-all .toy-card__body{justify-content:center;gap:var(--s-2);padding:var(--s-5)}
.pc-all .toy-card__foot{margin-top:var(--s-2);justify-content:flex-start}
.pc-all .toy-card__name{font-size:var(--fs-h2)}
.pc-all p{max-width:30em}
.trust-row.pc-trust{margin-top:var(--s-5);color:var(--ink)}
.pc-trust svg{color:var(--ink)}
@media (max-width:900px){
  .pc-shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);padding:6px 16px 18px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .pc-shelf::-webkit-scrollbar{display:none}
  .pc-shelf > li{flex:0 0 62%;max-width:240px;scroll-snap-align:start;scroll-margin-left:16px}
  .pc-shelf > li:last-child{margin-right:24px}
}
@media (max-width:640px){
  .pc-all{flex-direction:column}
  .pc-all .toy-card__well{flex:none;border-right:0;border-bottom:3px solid var(--ink)}
  .pc-all .toy-card__body{padding:var(--s-4)}
  .pc-trust{justify-content:flex-start;padding:10px 0}
  .pc-trust li + li::before{display:none}
}

/* =================== how a toy is made (the mini player's own look stays; its frame joins the kit) =================== */
.mini-how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:center}
.mh-box{position:relative;border:3px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--sh-3);overflow:hidden;color:var(--on-night);
  background:radial-gradient(120% 90% at 62% 30%,#4a3a66 0%,#2c2248 42%,#171128 78%,#110c1f 100%)}
.mh-stage{position:relative;aspect-ratio:1/1;max-height:520px;width:100%;overflow:hidden;touch-action:pan-y}
.mh-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.mh-stage canvas:active{cursor:grabbing}
.mh-stage .poster{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;transition:opacity .6s}
.mh-stage .poster img{height:84%;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.mh-stage.is-live .poster{opacity:0;pointer-events:none}
.mh-stage .labels{position:absolute;inset:0;pointer-events:none}
.mh-stage .labels .leaders{position:absolute;inset:0;overflow:visible}
.mh-stage .ld{stroke-width:1.5;transition:opacity .3s}.mh-stage .ld--amber{stroke:#ffb347}.mh-stage .ld--cyan{stroke:#5ee7f2}
.mh-stage .dot{transition:opacity .3s}.mh-stage .dot--amber{fill:#ffb347}.mh-stage .dot--cyan{fill:#5ee7f2}
.mh-stage .pin{position:absolute;left:0;top:0;padding:4px 9px;border-radius:9px;background:rgba(16,11,32,.82);border:1px solid rgba(255,246,233,.18);color:var(--paper);
  font:800 var(--fs-label)/1.2 var(--f-body);white-space:nowrap;margin-top:-14px;transition:opacity .3s;will-change:transform}
.mh-stage .pin--left{translate:-100% 0}
.mh-stage .pin--amber{box-shadow:inset 3px 0 0 #ffb347}.mh-stage .pin--cyan{box-shadow:inset 3px 0 0 #5ee7f2}
.mh-stage .pin--left.pin--amber{box-shadow:inset -3px 0 0 #ffb347}.mh-stage .pin--left.pin--cyan{box-shadow:inset -3px 0 0 #5ee7f2}
.mh-bar{height:8px;background:rgba(255,246,233,.14)}
.mh-fill{display:block;height:100%;width:0;background:var(--sun)}
.mh-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mh-steps button{position:relative;display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;overflow:hidden;background:var(--card);
  border:3px solid var(--ink);border-radius:var(--r-card);padding:14px 16px 16px;box-shadow:var(--sh-2);color:var(--ink);font:inherit;
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop),background var(--t-base)}
@media (hover:hover) and (pointer:fine){.mh-steps button:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-3)}}
.mh-steps button::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:calc(var(--k,0) * 100%);background:var(--teal)}
.mh-steps button[aria-pressed="true"]{background:var(--tint-butter)}
.mh-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);font-weight:900}
.mh-steps button.is-done .mh-n{background:var(--teal)}
.mh-t{display:block;min-width:0}
.mh-t b{display:block;font:400 var(--fs-h3)/1.15 var(--f-display)}
.mh-t span{display:block;margin-top:3px;line-height:1.45;font-size:var(--fs-small);font-weight:700}
@media (max-width:820px){.mini-how{grid-template-columns:1fr;gap:18px}.mh-stage{max-height:none}.mh-steps{gap:10px}.mh-steps button{padding:11px 13px 13px}}
/* now the real thing: real photos in polaroids, the render in a card frame */
.real-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);margin:var(--s-8) auto 0;max-width:960px;align-items:start}
.real-strip-h{text-align:center;margin-top:var(--s-8)}
.real-strip-h + .real-strip{margin-top:var(--s-6)}
.real-strip .polaroid{transform:rotate(-2deg)}
.real-strip .polaroid:nth-child(2){transform:rotate(2.5deg)}
.real-strip .polaroid img{aspect-ratio:4/5}
.real-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;transform:rotate(-1.5deg)}
.real-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:var(--sand)}
.real-card figcaption{font:700 var(--fs-hand)/1.1 var(--f-hand);text-align:center;padding:8px 6px 12px;min-height:36px}
@media (max-width:760px){.real-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}.real-strip .polaroid{padding:6px 6px 0}.real-strip figcaption,.real-card figcaption{font-size:1.05rem;padding:6px 2px 8px}.real-card{padding:5px 5px 0}}
@media (max-width:480px){.real-strip{grid-template-columns:1fr 1fr}.real-strip > :last-child{grid-column:1 / -1;max-width:60%;justify-self:center}}

/* =================== the Idea Desk door =================== */
.idoor-form{max-width:720px;margin:0 auto;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--sh-3);padding:16px 18px}
.idoor-label{display:block;font-weight:900;margin-bottom:8px}
.idoor-row{display:flex;gap:10px;flex-wrap:wrap}
.idoor-row input{flex:1 1 260px;min-width:0;font:800 1.125rem var(--f-body);min-height:52px;padding:0 .9em;border:3px solid var(--ink);border-radius:14px;color:var(--ink);background:var(--card)}
.idoor-tiles{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px;list-style:none;padding:0}
.idoor-tile{display:flex;align-items:center;gap:10px;min-height:56px;text-decoration:none;color:var(--ink);background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);
  padding:6px 16px 6px 6px;box-shadow:var(--sh-2);transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
@media (hover:hover) and (pointer:fine){.idoor-tile:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-3)}}
.idoor-tile:active{transform:translate(2px,2px);box-shadow:var(--sh-1)}
.idoor-tile img,.idoor-ic{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;flex:none}
.idoor-ic{display:grid;place-items:center;background:var(--tint-lilac)}
.idoor-ic svg{width:28px;height:28px}
.idoor-tile b{font:400 1.0625rem var(--f-display)}

/* =================== visit: a real stall photo, the date once, two buttons =================== */
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-7);align-items:center;max-width:1000px;margin:0 auto}
.visit-grid .polaroid{max-width:480px;justify-self:center;width:100%}
.visit-grid .polaroid img{object-position:30% 40%}
.visit-ticket .ticket__stub b{font-size:2.6rem}
.visit-ticket h3{font-size:var(--fs-h3);line-height:1.15}
.visit-where{font-weight:700}
.visit-status{align-self:flex-start;font:900 var(--fs-label)/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.06em;background:var(--tint-mint);
  border:2px solid var(--ink);border-radius:var(--r-pill);padding:.2em .8em}
.visit-ticket .btn-row{margin-top:var(--s-2)}
.visit-more{margin-top:var(--s-4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1)}
.visit-more > a,.claim-inline summary{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--ink);text-decoration:underline 3px var(--coral);text-underline-offset:3px;cursor:pointer}
.claim-inline summary{list-style:none}
.claim-inline summary::-webkit-details-marker{display:none}
.claim-inline summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border:2px solid var(--ink);border-radius:50%;text-decoration:none;font-weight:900;line-height:1}
.claim-inline[open] summary::before{content:"\2212"}
.claim-inline > p{font-weight:600;max-width:34em;margin:var(--s-2) 0}
.claim-form{max-width:420px}
.claim-form label{display:block;font-weight:900;font-size:.95rem;margin:12px 0 4px}
.claim-form input{width:100%;min-height:44px;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;font:700 1rem var(--f-body);background:var(--card);color:var(--ink)}
.claim-small{font-size:var(--fs-label);font-weight:700;color:var(--muted);margin-top:10px}
.claim-form .btn{margin-top:var(--s-4)}

/* =================== parties & classes: the grown-up band =================== */
.party-tiles{max-width:1000px;margin:0 auto}
.party-tiles .tile-ic{--tile-tint:var(--paper);border-width:3px}
.party-tiles .tile-go{margin-top:auto;padding-top:var(--s-3);font-style:normal;font-weight:900;color:var(--teal-ink);font-size:var(--fs-body)}
.parties-note{text-align:center;margin-top:var(--s-5);font-size:var(--fs-small);font-weight:700;color:var(--muted)}
.parties-note a{color:var(--ink)}

/* =================== Ask Tex (unchanged look; tokens only) =================== */
.chat-fab{position:fixed;left:18px;bottom:18px;z-index:70;display:flex;align-items:center;gap:8px;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-pill);
  padding:8px 16px 8px 10px;cursor:pointer;box-shadow:var(--sh-2);font-family:var(--f-display)}
.chat-fab:hover{transform:translateY(-2px)}
.reachy-head{transform-origin:60px 82px}
.chat-fab-label{font-size:1rem;color:var(--ink)}
.chat-panel{position:fixed;left:18px;bottom:84px;z-index:71;width:min(340px,calc(100vw - 36px));background:var(--paper);border:3px solid var(--ink);border-radius:20px;
  box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden}
.chat-panel[hidden]{display:none}
.chat-head{background:var(--ink);color:var(--paper);padding:10px 14px;display:flex;align-items:center;gap:10px}
.chat-head strong{font-family:var(--f-display);font-weight:400;font-size:1.05rem}
.chat-sub{font-family:var(--f-mono);font-size:.7rem;color:var(--sun);flex:1}
.chat-close{background:none;border:none;color:var(--paper);font-size:1rem;cursor:pointer;font-weight:900;min-width:44px;min-height:44px}
.chat-msgs{padding:12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:300px;min-height:120px}
.msg{max-width:85%;padding:8px 12px;border:2px solid var(--ink);border-radius:14px;font-weight:700;font-size:.9rem;line-height:1.35}
.msg.bot{background:var(--card);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--sun);align-self:flex-end;border-bottom-right-radius:4px}
.msg.think{color:var(--muted);font-style:italic}
.chat-chips{display:flex;gap:6px;padding:0 12px 8px;flex-wrap:wrap}
.chat-chips button{background:var(--teal);border:2px solid var(--ink);border-radius:var(--r-pill);padding:4px 10px;font-weight:800;font-size:.8125rem;cursor:pointer;color:var(--ink)}
.chat-form{display:flex;gap:8px;padding:10px 12px;border-top:2px solid var(--ink);background:var(--card)}
.chat-form input{flex:1;border:2px solid var(--ink);border-radius:10px;padding:8px 10px;font-weight:700;font-size:1rem}
.chat-send{background:var(--teal);border:2px solid var(--ink);border-radius:10px;width:44px;font-weight:900;cursor:pointer;font-size:1.1rem;color:var(--ink)}
.chat-alt{background:var(--paper);border-top:2px solid var(--ink);font-size:var(--fs-label);font-weight:800;text-align:center;padding:7px 10px}
.chat-alt a{color:var(--ink)}
@media(max-width:760px){.chat-fab-label{display:none}.chat-fab{padding:8px 10px}}
@media(max-width:760px){
  body.shop-in-view .chat-fab{opacity:0;pointer-events:none;transition:opacity .15s ease}
  .chat-fab{left:auto;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:5px;box-shadow:var(--sh-1);border-width:2px;transition:transform var(--t-base) ease,opacity var(--t-base) ease}
  .chat-fab svg{width:36px;height:39px}
  body.fab-away .chat-fab{transform:translateY(90px);opacity:0;pointer-events:none}
}

/* =================== tablets and phones =================== */
@media (max-width:900px){
  .cc-lead.has-scene{grid-template-columns:1fr;gap:0;text-align:center;justify-items:center}
  .cc-lead.has-scene .cc-lead-text{order:-1;max-width:620px}   /* phones read what the site is before the scene */
  .cc-lead h1{margin:0 auto 12px;max-width:none}
  .cc-lede{margin:0 auto 20px;max-width:24em}
  .cc-welcome{width:min(100%,460px);margin:48px auto 0}
  .visit-grid{grid-template-columns:1fr;gap:var(--s-6)}
}
@media (max-width:760px){
  .cc-hero-home{padding:var(--s-5) 0 0}
  .cc-lead-text .tape{font-size:var(--fs-label);margin-bottom:14px}
  .cc-lede{max-width:22em}
  .cc-welcome{width:min(100%,380px);margin-top:44px}
  .cc-howdy{font-size:.875rem;padding:7px 11px;top:-9%;left:0;max-width:56%}
  .cc-story{width:44%;right:-2%;bottom:-12%;padding:5px 5px 0}
  .cc-story-play{width:44px;height:44px;margin:-22px 0 0 -22px}
  .cc-story-sound{display:none}
  .cc-story-cap{font-size:1.1875rem;padding:3px 2px 6px}
  .cc-vidpol-x{top:-12px;right:-6px}
  .cc-map-head{margin-top:72px}
  .cc-map.is-free{margin:0 -8px}
  .cc-spot span{font-size:var(--fs-label);padding:3px 7px;border-width:2px;box-shadow:var(--sh-1);transform:translateY(55%)}
  .cc-spot:hover span,.cc-spot:focus-visible span{transform:translateY(55%)}
  .cc-map-pause{top:0;right:0;padding:0 12px 0 10px;font-size:var(--fs-label)}
  .cc-snapcard.cc-pol-home{width:24%;left:0;top:-7%;padding:4px 4px 0}
  .cc-snapcard figcaption{display:none}
  .cc-snapcard .cc-pol-zoom{width:26px;height:26px;font-size:.8rem}
  .cc-passport{margin-top:48px;padding:20px 14px 16px}
  .cc-stamps{grid-template-columns:repeat(3,minmax(0,96px));gap:14px 18px}
  .visit-ticket{grid-template-columns:1fr}
  .visit-ticket .ticket__stub{flex-direction:row;gap:10px;min-width:0;border-right:0;border-bottom:3px dashed var(--ink);padding:10px}
  .visit-ticket .ticket__stub b{font-size:2rem}
  .visit-ticket .btn-row .btn{flex:1 1 auto}
}

/* =================== Calm and reduced motion: nothing moves on its own =================== */
@media (prefers-reduced-motion:reduce){
  .cc-joseph-fig,.cc-board:hover,.cc-board.is-wiggle{animation:none}
  .cc-map-pause{display:none}
  .cc-story,.cc-spot span,.idoor-tile,.mh-steps button,.cc-stamps a,.mh-stage .poster{transition:none}
}
html.calm .cc-joseph-fig,html.calm .cc-board:hover,html.calm .cc-board.is-wiggle{animation:none}
html.calm main *,html.calm main *::before,html.calm main *::after{animation-play-state:paused!important}
html.calm :is(.cc-story,.cc-spot span,.idoor-tile,.mh-steps button,.cc-stamps a){transition:none}
/* the whole page pauses its CSS loops while a section is off screen */
.anim-off,.anim-off *{animation-play-state:paused!important}
@media print{.mkt-band,.cc-story,.cc-map-pause,.chat-fab{display:none}}
@media (forced-colors:active){.cc-island,.cc-map.is-free img,.cc-map.is-free .cc-loop{mix-blend-mode:normal}}

/* "It started with an idea": shown only once creations.json holds 3+ real Imaginator runs */
.creations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:var(--s-5);justify-content:center}
.creation-card{position:relative;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-3);padding:var(--s-4)}
.creation-card h3{font-size:var(--fs-h3);margin:0 90px var(--s-3) 0}
.hc-stamp{position:absolute;top:14px;right:14px;font-family:var(--f-mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.1em;border:2px solid var(--ink);border-radius:6px;padding:2px 9px;background:var(--sun)}
.hc-stamp.printed{background:var(--tint-mint)}

/* rhythm and small-text floor fixes */
#visit{padding-top:var(--s-7)}
.visit-ticket .ticket__stub span{font-size:var(--fs-label)}
@media (max-width:480px){.mkt-band a{font-size:.875rem;gap:6px;padding:0 12px}.mb-chip{padding:3px 8px 3px 6px;letter-spacing:.03em}}
@media (max-width:380px){.cc-story-cap{white-space:normal;font-size:1.05rem}}