/* Homepage: the Polka Dot Firehouse front, built from layered plates.
   Desktop (>=1100px): the whole firehouse, two working bay doors, kids on the apron.
   Phone/tablet: the gable on top, then one bay door with tabs that roll it down and up again. */

.station {
  position: relative;
  overflow: hidden;
  background: #8cc8ef url("/assets/img/backdrop.webp") center top / 100% auto no-repeat;
}
/* the concrete apron: starts exactly at the building's base and runs to the bottom of the section */
.ground {
  left: -60% !important; width: 220%; top: 94.45%; height: 400%; z-index: 1;
  background-color: #e9ddc6;
  background-image:
    linear-gradient(to bottom, rgb(70 50 30 / 0.30), rgb(70 50 30 / 0) 22px),
    linear-gradient(90deg, rgb(120 98 70 / 0.22) 0 2px, transparent 2px),
    linear-gradient(to bottom, rgb(120 98 70 / 0.20) 0 2px, transparent 2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.25 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 40px, 16% 100%, 100% 15cqw, 220px 220px;
  background-position: 0 0, 10% 0, 0 10.5cqw, 0 0;
  background-repeat: no-repeat, repeat, repeat, repeat;
}
/* the approved design's side pieces: picket fence + grass patch with curb at each corner of the building (behind the building, on the ground).
   2800x900 art (the inner 1400 px hold the curb corner, hydrant spot / Pepper's bed; the outer 1400 run off-screen) at 72% of the building width; the fence base (art y 480) sits on the building base line (97%) */
.side { width: 72%; top: 77.6%; z-index: 2; pointer-events: none; }
.side--left { left: -67.9%; }
.side--right { left: 85%; }
.shadow { z-index: 7; height: 2.2%; border-radius: 50%; background: radial-gradient(closest-side, rgb(50 35 20 / 0.42), rgb(50 35 20 / 0)); }

/* ---------- desktop firehouse ---------- */
.house {
  --hw: min(95vw, 1560px);
  position: relative; z-index: 1;
  width: var(--hw);
  aspect-ratio: 3060 / 1952;
  margin: clamp(30px, 3.4vw, 54px) auto 0;
  container-type: inline-size;
}
.house > * { position: absolute; }
.L-facade { inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

.opening { overflow: hidden; z-index: 3; }
/* each bay ends at its silver threshold line (house y 94.45%), where the exterior slab begins */
.opening--play { left: 21.2%; top: 58.4%; width: 33.8%; height: 37.4%; clip-path: inset(0 0 3.61% 0); }
.opening--print { left: 61.4%; top: 59.8%; width: 22.2%; height: 36%; clip-path: inset(0 0 3.75% 0); }
.opening__inside { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opening--print .opening__inside { transform: scaleX(-1); filter: brightness(0.82); }

.door {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 4;
  transition: transform 1.25s var(--ease-out);
  will-change: transform;
}
.door img { width: 100%; height: 100%; object-fit: fill; }
.door--play { transform: translateY(0); }
.house.is-open .door--play { transform: translateY(-93%); }
.door--print { transform: translateY(-64%); transition-duration: 0.6s; }
.door--print:hover { transform: translateY(-72%); }
/* keyboard focus lifts the door a little less than hover, so the whole focus ring stays inside the bay opening */
.door--print:focus-visible { transform: translateY(-65%); outline: none; }
/* keyboard focus: a white ring between two dark ones, so it stands out on the red door, the cream plaque and any highlight */
.door--print:focus-visible .plaque {
  box-shadow: 0 0 0 2px var(--spot), 0 0 0 6px #fff, 0 0.3cqw 0.8cqw rgb(60 20 10 / 0.35);
  outline: 2px solid var(--spot); outline-offset: 6px;
}

.plaque {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  width: 64%; left: 50%;
  padding: 0.6cqw 0.8cqw 0.7cqw;
  background: var(--paper);
  border: 0.22cqw solid var(--red-deep);
  border-radius: 1.1cqw;
  box-shadow: 0 0.3cqw 0.8cqw rgb(60 20 10 / 0.35);
  text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.95cqw; line-height: 1.05;
  color: var(--spot); text-decoration: none;
}
.plaque small { display: block; margin-top: 0.25cqw; font-family: var(--font-body); font-weight: 800; font-size: 1.2cqw; color: var(--ink-soft); }
.plaque small::after { content: " ›"; content: " ›" / ""; } /* a visual arrow only; screen readers skip it */

.engine-shadow { left: 61.4%; width: 22.2%; top: 94.7%; height: 2.2%; z-index: 3; border-radius: 50%; background: radial-gradient(closest-side, rgb(40 30 20 / 0.5), rgb(40 30 20 / 0)); }
.L-engine { left: 62.4%; width: 20.4%; bottom: 4.2%; z-index: 3; transition: transform 0.9s var(--ease-out); transform-origin: 50% 100%; }
.house.is-open .L-engine { animation: engine-nudge 1.4s 0.5s var(--ease-out) both; }
@keyframes engine-nudge { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-1.2%) scale(1.035); } 100% { transform: none; } }

/* the bell lives in the tower's arch; it swings when rung */
.bell {
  left: 47.6%; top: 16.1%; width: 4.4%; aspect-ratio: 260 / 305;
  z-index: 4; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 6%;
}
.bell img { width: 100%; height: 100%; }
.bell::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: max(100%, 48px); translate: -50% -50%; }
.bell.is-ringing { animation: bell-swing 1.3s var(--ease-out); }
/* the bell sits behind the facade's arch, which hid its focus ring: on keyboard focus it comes forward with the same
   white-between-dark ring as the Color & Print door, so it shows on the red arch, the white wall and the black spots */
.bell:focus-visible { z-index: 6; outline: 2px solid var(--spot); outline-offset: 6px; border-radius: 6px; box-shadow: 0 0 0 2px var(--spot), 0 0 0 6px #fff; }
@keyframes bell-swing { 0% { transform: rotate(0); } 15% { transform: rotate(22deg); } 35% { transform: rotate(-18deg); } 55% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }

.sign { left: 29%; top: 34.4%; width: 42%; z-index: 6; aspect-ratio: 1300 / 244; display: grid; place-items: center; }
.sign__board { position: absolute; inset: 0; width: 100%; height: 100%; }
.sign__text { position: relative; display: flex; align-items: center; gap: 1.5cqw; margin-top: -0.2cqw; text-align: left; }
.sign h1 { margin: 0; line-height: 0; }
.sign h1 img { width: 12.4cqw; height: auto; }
/* the new two-line wordmark sits left; the tagline reads beside it, split by a short red rule like a painted sign */
.sign p {
  position: relative; margin: 0; padding-left: 1.5cqw; max-width: 8.6em; text-wrap: balance;
  font-family: var(--font-display); font-weight: 600; font-size: 1.85cqw; line-height: 1.08; color: var(--spot);
}
.sign p::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 0.28cqw; border-radius: 1cqw; background: var(--red); }
.star { left: 47.4%; top: 25.0%; width: 5.2%; z-index: 7; transform-origin: 50% 50%; animation: star-twinkle 6s 2s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 90%, 100% { transform: rotate(0) scale(1); } 94% { transform: rotate(-8deg) scale(1.08); } 97% { transform: rotate(6deg) scale(1.04); } }

/* the game stations inside the play bay */
.stations { position: absolute; left: 9%; top: 13.2%; width: 88%; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15cqw; margin: 0; padding: 0; list-style: none; }
.station-card {
  --c: var(--sky);
  --c-deep: var(--sky-deep);
  position: relative; display: flex; flex-direction: column; align-items: center;
  height: 18.2cqw; padding: 0.8cqw 0.7cqw 0.8cqw;
  background: var(--c);
  border: 0.24cqw solid var(--spot);
  border-radius: 1.1cqw;
  text-decoration: none; color: var(--spot);
  box-shadow: 0 0.45cqw 1cqw rgb(0 0 0 / 0.35);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.stations li:nth-child(2) .station-card { --c: #7fc449; --c-deep: var(--green-deep); }
.stations li:nth-child(3) .station-card { --c: #f7cf3e; --c-deep: var(--yellow-deep); }
.station-card h2 {
  margin: 0; width: 100%; padding: 0.35cqw 0.3cqw;
  background: #fffdf6; border-radius: 0.7cqw;
  font-size: 1.62cqw; line-height: 1.02; text-align: center; letter-spacing: -0.01em;
  min-height: 3.9cqw; display: grid; place-items: center;
}
.station-card img { flex: 1; min-height: 0; width: 92%; object-fit: contain; margin: 0.5cqw 0; }
.station-card .play {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 0.4cqw; width: 100%;
  padding: 0.35cqw 0 0.65cqw; border-radius: 0.8cqw; border: 0.2cqw solid var(--spot);
  background: var(--yellow); font-family: var(--font-display); font-weight: 700; font-size: 1.6cqw;
}
.station-card .play::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.5cqw;
  background: linear-gradient(to bottom, var(--trim-lime) 0 30%, var(--trim-silver) 30% 70%, var(--trim-lime) 70%);
}
.station-card .play svg { width: 1.1cqw; height: 1.1cqw; }
.station-card::before { /* the card's stand: two little feet and a shadow on the bay floor */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -2.1cqw; height: 2.3cqw; z-index: -1;
  background:
    linear-gradient(var(--spot), var(--spot)) 18% 0 / 0.5cqw 1.6cqw no-repeat,
    linear-gradient(var(--spot), var(--spot)) 82% 0 / 0.5cqw 1.6cqw no-repeat,
    radial-gradient(closest-side, rgb(40 25 10 / 0.45), transparent) 50% 100% / 100% 1.3cqw no-repeat;
}
.station-card:hover, .station-card:focus-visible { transform: translateY(-0.5cqw) rotate(-1deg); box-shadow: 0 1cqw 1.8cqw rgb(0 0 0 / 0.4); }
.station-card:hover .play::after, .station-card:focus-visible .play::after {
  background: linear-gradient(to bottom, var(--trim-lime) 0 30%, var(--trim-lit) 30% 70%, var(--trim-lime) 70%);
}

/* the "For Grown-ups" sign, screwed to the side door under its window: two clean lines, sized with the scene */
.sidedoor {
  left: 8.2%; top: 79.4%; z-index: 6; transform: translateX(-50%);
  display: grid; justify-items: center; width: max-content;
  padding: 0.62cqw 0.62cqw 0.7cqw;
  background: var(--paper); border: 0.18cqw solid var(--red-deep); border-radius: 0.7cqw;
  box-shadow: 0 0.25cqw 0.5cqw rgb(60 20 10 / 0.32);
  font-family: var(--font-display); font-weight: 700; font-size: 1.6cqw; line-height: 1.02; text-align: center; white-space: nowrap;
  color: var(--spot); text-decoration: none;
  transition: background-color 0.2s;
}
.sidedoor span { display: block; }
.sidedoor::before { /* two brass screws holding the sign to the door */
  content: ""; position: absolute; left: 0.32cqw; right: 0.32cqw; top: 0.32cqw; height: 0.62cqw; pointer-events: none;
  background:
    radial-gradient(circle at 40% 38%, #f3d79a 0 18%, #b98a3a 34% 52%, #6e4f1f 58% 66%, transparent 70%) left / 0.62cqw 0.62cqw no-repeat,
    radial-gradient(circle at 40% 38%, #f3d79a 0 18%, #b98a3a 34% 52%, #6e4f1f 58% 66%, transparent 70%) right / 0.62cqw 0.62cqw no-repeat;
}
.sidedoor:hover, .sidedoor:focus-visible { background: var(--yellow); color: var(--spot); }

/* the hosts and the hydrant stand on the apron, in front of the building */
.host { z-index: 8; pointer-events: none; }
.shadow--frieda { left: 13.34%; top: 106.25%; width: 13.10%; }
.shadow--freddy { left: 52.42%; top: 102.45%; width: 12.14%; }
/* the kids' contact shadows: taller and darker than the default so the soles visibly sit on the slab (Brian: Frieda looked like she floated) */
.shadow--frieda, .shadow--freddy { height: 3.2%; background: radial-gradient(closest-side, rgb(50 35 20 / 0.58), rgb(50 35 20 / 0.25) 60%, rgb(50 35 20 / 0)); }
.shadow--pepper { left: 91.38%; top: 104.05%; width: 9.01%; }
.shadow--hydrant, .shadow--pepper { background: radial-gradient(closest-side, rgb(25 40 15 / 0.78), rgb(25 40 15 / 0.35) 55%, rgb(25 40 15 / 0)); }
.shadow--hydrant { left: -8.74%; top: 101.99%; width: 5.07%; }
/* the rope Frieda pulls: tiled from the rope painted in her hands (rope-tile.webp, cut from frieda.png x600-745, one 124 px twist),
   same width and phase, so it continues her rope; its top hangs from the bottom of the (raised) door, which covers it */
/* Frieda's painted rope leans 2.27deg (0.0396 px/row). The tile (frieda.png x600-745, rows 17-150, one 134-row twist) is straightened;
   the element is sized/placed at the sprite's exact scale (measured in the browser: element bottom = sprite row 117), phase-matched, and
   tilted by the same angle about the point where it meets the sprite's row 0, so both ropes are one straight line */
.rope { position: absolute; left: calc(0.03% + 0.1525cqw); top: 0; width: 2.251cqw; height: 27.46%; z-index: 3;
  transform: rotate(-2.27deg); transform-origin: 45.9% 72.3%;
  background: url("/assets/img/rope-tile.webp") 0 calc(100% + 0.5296cqw) / 100% auto repeat-y; }
.host--frieda { left: 12.61%; top: 67.53%; width: 12.88%; transform-origin: 78% 0; }
.house.is-open .host--frieda { animation: rope-tug 1.25s var(--ease-out); }
@keyframes rope-tug { 0% { transform: translateY(-5%); } 60% { transform: translateY(1%); } 100% { transform: none; } }
.host--freddy { left: 52.98%; top: 75.60%; width: 12.40%; }
.host--pepper { left: 90.7%; top: 83.2%; width: 10.6%; pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer; }
.host--pepper img { width: 100%; }
.host--hydrant { left: -8.8%; top: 88.9%; width: 5.2%; }
.is-hopping { animation: hop 0.55s var(--ease-out); }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12%) rotate(-4deg); } }

@media (min-width: 1100px) {
  .house { --hw: min(84vw, calc((100svh - 104px) * 1.36), 1560px); margin-top: 88px; }
}

/* ---------- the apron below the building ---------- */
.apron { position: relative; z-index: 2; padding: clamp(70px, 7.5vw, 130px) 0 clamp(48px, 5vw, 80px); }
.apron h2 { text-align: center; font-size: clamp(2rem, 2.3vw + 1rem, 3.2rem); display: flex; justify-content: center; align-items: center; gap: 0.4em; }
.apron h2 em { font-style: normal; color: var(--red); }
/* phones/tablets: the sky-blue backdrop there drops engine red to 2.85:1, so use the deeper red (3.9:1, WCAG 1.4.3 large text) */
@media (max-width: 1099px) { .apron h2 em { color: var(--red-deep); } }
.apron h2::before, .apron h2::after { content: ""; width: 0.75em; height: 1.2em; background: url("/assets/img/burst-left.webp") center / contain no-repeat; }
.apron h2::after { transform: scaleX(-1); }
.tvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); width: min(100% - 2 * var(--gutter), 920px); margin: 18px auto 0; }
.tv {
  display: block; text-decoration: none; color: var(--spot); text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.tv__frame { position: relative; display: block; border-radius: 22px; overflow: hidden; border: 4px solid var(--spot); box-shadow: var(--shadow-2); background: var(--spot); aspect-ratio: 16 / 9; }
.tv__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
/* no Play button until the videos are out: a big yellow "Coming soon" sticker in the corner of each screen, clear of the faces */
.tv__soon {
  position: absolute; right: 12px; bottom: 12px; rotate: -4deg; z-index: 1;
  padding: 0.3em 0.8em 0.35em; border-radius: 14px; border: 4px solid var(--spot);
  background: var(--yellow); color: var(--spot); white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1vw + 1rem, 1.7rem); line-height: 1;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
  transition: rotate 0.35s var(--ease-bounce);
}
.tv:hover .tv__frame img { transform: scale(1.04); }
.tv:hover .tv__soon { rotate: 2deg; }
@media (prefers-reduced-motion: reduce) { .tv__soon { transition: none; } }
.tv span.t { display: block; margin-top: 12px; }
.tv span.d { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 760px) { .paws { display: none; } .tvs { grid-template-columns: 1fr; } }
.paws { position: absolute; width: clamp(48px, 5vw, 80px); opacity: 0.85; z-index: 1; }
.paws--l { left: 10%; bottom: 22%; transform: rotate(-12deg); }
.paws--r { right: 12%; bottom: 30%; transform: rotate(14deg); }

/* ---------- phone / tablet firehouse ---------- */
/* one firehouse in the markup: on desktop the phone wrappers are transparent and the phone's door bay is hidden */
.mhouse, .gable { display: contents; }
.mhouse > .bay { display: none; }

@media (max-width: 1099px) {
  .mhouse { display: block; position: relative; z-index: 1; padding-top: 86px; }
  .mhouse > .bay { display: block; }
  .station::after { height: var(--apron-h-m, 38%); }

  .gable { display: block; --gw: 152vw; position: relative; width: 100%; height: calc(var(--gw) / 1.5676 * 1.14 + 16px); overflow: hidden; }
  .gable .house .door--play, .gable .house.is-open .door--play { transform: translateY(-79%); }  /* door edge meets the top of the rope in Frieda's hands */
  .gable .house .door--print, .gable .house .door--print:hover, .gable .house .door--print:focus-visible { transform: translateY(-64%); }
  .gable .house .L-engine, .gable .house.is-open .L-engine, .gable .house.is-open .host--frieda { animation: none; }
  /* desktop-only pieces of the firehouse */
  .gable .house .stations, .gable .house .sidedoor, .gable .house .plaque, .gable .house .host--hydrant, .gable .house .shadow--hydrant { display: none; }
  .gable .house { display: block; position: absolute; left: -26%; top: 0; width: var(--gw); margin: 0; aspect-ratio: 3060 / 1952; container-type: inline-size; }
  /* phones/tablets: the ground starts slightly higher so no sky shows under the building base, and fades into the page colour where
     the gable crops the scene (--gv = height of ground left visible) instead of ending in a hard line */
  .gable .house .ground { --gv: calc(16px + 11.86cqw); left: -40% !important; width: 180%; top: 94.45%; }
  .gable .house .ground::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgb(255 250 240 / 0) calc(var(--gv) - 30px), var(--paper) var(--gv)); }
  .gable .host--frieda { left: 22.50%; top: 66.00%; width: 14.50%; }
  .gable .host--freddy { left: 36.42%; top: 74.87%; width: 14.16%; }
  .gable .host--pepper { left: 63%; top: 79%; width: 13.5%; }
  .gable .shadow--frieda { left: 23.32%; top: 109.47%; width: 14.78%; }
  .gable .shadow--freddy { left: 35.96%; top: 105.45%; width: 13.51%; }
  .gable .shadow--frieda, .gable .shadow--freddy { height: 3.2%; background: radial-gradient(closest-side, rgb(50 35 20 / 0.58), rgb(50 35 20 / 0.25) 60%, rgb(50 35 20 / 0)); }
  .gable .shadow--pepper { left: 64.04%; top: 105.96%; width: 11.14%; background: radial-gradient(closest-side, rgb(50 35 20 / 0.42), rgb(50 35 20 / 0)); }
  .gable .rope, .gable .side { display: none; }
  .gable .house > * { position: absolute; }
  .gable .house .L-facade { inset: 0; width: 100%; height: 100%; }
  .gable .house .sign { left: 25%; width: 50%; top: 33.2%; }
  .gable .house .sign h1 img { width: 14.6cqw; }
  .gable .house .sign p { font-size: 2.3cqw; }
  .gable .house .star { left: 47.1%; width: 5.8%; top: 24.6%; }

  .bay { position: relative; background: var(--wall) url("/assets/img/spot-wall.svg") 0 0 / 240px 240px; padding: 0 5vw 0; margin-top: -1px; }
  .bay__tabs { display: flex; gap: 8px; justify-content: center; padding: 6px 0 14px; }
  .bay__tabs button {
    flex: 1 1 0; max-width: 170px; min-width: 0; min-height: 52px; padding: 6px 6px 8px; border-radius: 18px; border: 3px solid var(--spot);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    background: #fff; color: var(--spot); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.05; cursor: pointer;
  }
  .bay__tabs button[aria-selected="true"] { background: var(--red); color: #fff; border-color: var(--red-dark); }
  /* a little picture in every tab, so a child who can't read yet can still choose */
  .tabpic { display: grid; place-items: center; width: 60px; height: 42px; flex: none; border-radius: 10px; background: #fffdf6; box-shadow: inset 0 0 0 2px rgb(30 28 28 / 0.18); }
  .tabpic img { width: 52px; height: 36px; object-fit: contain; }
  .tabpic--tv { /* a tiny TV: dark bezel, two antennas */
    position: relative; margin-top: 7px; height: 36px; width: 54px; padding: 3px; background: var(--spot); box-shadow: none; border-radius: 8px;
  }
  .tabpic--tv::before { content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 10px; translate: -50% 0;
    background: linear-gradient(60deg, transparent 44%, var(--spot) 44% 60%, transparent 60%) left / 50% 100% no-repeat,
                linear-gradient(-60deg, transparent 44%, var(--spot) 44% 60%, transparent 60%) right / 50% 100% no-repeat; }
  .bay__tabs button[aria-selected="true"] .tabpic--tv::before {
    background: linear-gradient(60deg, transparent 44%, #fff 44% 60%, transparent 60%) left / 50% 100% no-repeat,
                linear-gradient(-60deg, transparent 44%, #fff 44% 60%, transparent 60%) right / 50% 100% no-repeat; }
  .bay__tabs button[aria-selected="true"] .tabpic--tv { background: #fff; }
  .tabpic--tv img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
  .tablabel { display: block; text-align: center; }
  .bay__frame {
    position: relative; border: 12px solid var(--red); border-bottom: 0; border-radius: 22px 22px 0 0;
    box-shadow: inset 0 0 0 3px var(--red-dark), 0 0 0 3px var(--red-dark);
    background: #3a2f27 url("/assets/img/bay-left.webp") center / cover;
    min-height: 420px; overflow: hidden;
  }
  .bay__frame::before { /* keystone */
    content: ""; position: absolute; left: 50%; top: -12px; width: 46px; height: 24px; margin-left: -23px; z-index: 6;
    background: #efe0bd; border: 3px solid var(--red-dark); border-top: 0; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  }
  /* the cards hang on a steel rack: two slotted rails that stand on the bay floor, with a bolted clamp on each side of every card */
  .bay__panel { --rail: 12px; --reach: 12px; position: relative; z-index: 2; padding: 18px calc(var(--rail) / 2 + 3px + var(--reach)) 120px; display: grid; gap: 12px; }
  .bay__panel::before { /* the rails */
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 46px; left: 3px; right: 3px; pointer-events: none;
    --steel: linear-gradient(90deg, #3d4246 0 2px, #9aa1a6 2px, #e3e7ea 45%, #a9b0b5 70%, #5d6469 calc(100% - 2px), #3d4246 calc(100% - 2px));
    --slots: repeating-linear-gradient(to bottom, transparent 0 9px, rgb(30 30 30 / 0.75) 9px 17px, transparent 17px 26px);
    background:
      var(--slots) left calc(var(--rail) / 2 - 2px) top 0 / 4px 100% no-repeat,
      var(--slots) right calc(var(--rail) / 2 - 2px) top 0 / 4px 100% no-repeat,
      var(--steel) left 0 top 0 / var(--rail) 100% no-repeat,
      var(--steel) right 0 top 0 / var(--rail) 100% no-repeat;
    filter: drop-shadow(3px 0 3px rgb(0 0 0 / 0.35));
  }
  .bay__panel::after { /* foot plates bolted to the floor, with a contact shadow */
    content: ""; position: absolute; z-index: -1; left: -6px; right: -6px; bottom: 30px; height: 26px; pointer-events: none;
    background:
      linear-gradient(#cfd4d8, #7b8287) left 3px top 6px / 30px 9px no-repeat,
      linear-gradient(#cfd4d8, #7b8287) right 3px top 6px / 30px 9px no-repeat,
      radial-gradient(closest-side, rgb(25 18 10 / 0.6), transparent) left -8px bottom 0 / 60px 14px no-repeat,
      radial-gradient(closest-side, rgb(25 18 10 / 0.6), transparent) right -8px bottom 0 / 60px 14px no-repeat;
  }
  .mcard, .bay__panel .grownup-link { position: relative; }
  .mcard::before, .mcard::after,
  .bay__panel .grownup-link::before, .bay__panel .grownup-link::after { /* the clamps: steel plate, two bolts, reaching back to the rail */
    content: ""; position: absolute; z-index: 1; top: 50%; width: calc(var(--reach) + var(--rail) / 2 + 9px); height: 24px; margin-top: -12px;
    border: 2px solid #2a2d30; border-radius: 5px; pointer-events: none;
    background:
      radial-gradient(circle at 50% 45%, #f4f6f7 0 1.5px, #555b60 2px 3.5px, transparent 4px) 0 0 / 50% 100% repeat-x,
      linear-gradient(#e8ecee, #a3aaaf);
    box-shadow: 0 2px 3px rgb(0 0 0 / 0.4);
  }
  .mcard::before, .bay__panel .grownup-link::before { left: calc(-1 * (var(--reach) + var(--rail) / 2 + 3px)); }
  .mcard::after, .bay__panel .grownup-link::after { right: calc(-1 * (var(--reach) + var(--rail) / 2 + 3px)); }
  .bay__panel[hidden] { display: none; }
  /* the newly chosen shelf waits, invisible, behind the old one's look-alike until the door is down (home.js) */
  .bay__panel.is-veiled { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; }
  .mdoor { position: absolute; inset: 0; z-index: 5; transform: translateY(-100%); transition: transform 0.5s var(--ease-out); pointer-events: none; }
  .mdoor img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .bay.is-closing .mdoor { transform: translateY(0); transition-timing-function: cubic-bezier(0.55, 0, 0.75, 0.25); }

  .mcard {
    display: grid; grid-template-columns: 30% 1fr auto; align-items: center; gap: 12px;
    min-height: 88px; padding: 8px 14px 8px 8px;
    background: var(--c, var(--sky)); border: 3px solid var(--spot); border-radius: 18px;
    color: var(--spot); text-decoration: none; box-shadow: 0 5px 12px rgb(0 0 0 / 0.35);
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.05;
  }
  .mcard img { width: 100%; height: 70px; object-fit: contain; background: #fffdf6; border-radius: 12px; padding: 4px; }
  .mcard .go { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--spot); display: grid; place-items: center; }
  .mcard .go svg { width: 20px; height: 20px; }
  .mcard:nth-child(2) { --c: #7fc449; }
  .mcard:nth-child(3) { --c: #f7cf3e; }
  .mcard:nth-child(4) { --c: #f39a7c; }
  .mcard small { display: block; font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; margin-top: 3px; color: rgb(30 28 28 / 0.82); }
  .bay__panel .grownup-link { grid-column: 1 / -1; }
  .bay__more { justify-self: center; color: #fff; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; padding: 8px 4px; }
  .bay__more:hover { color: var(--yellow); }
  .grownup-link {
    display: block; margin: 4px 0 0; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--spot);
    background: rgb(255 253 246 / 0.95); color: var(--red-deep); font-weight: 800; text-align: center; text-decoration: none;
  }

}
@media (max-width: 400px) {
  /* narrow phones: a slightly smaller gable (whole house, hosts, feet and shadows kept) so two games show in the first screen */
  .gable { --gw: 126vw; }
  .gable .house { left: -13%; }
  .bay__tabs { padding: 4px 0 10px; }
  .bay__panel { padding-top: 12px; }
  .bay__tabs { gap: 6px; }
  .bay__tabs button { padding: 6px 4px 8px; font-size: 0.98rem; }
}
@media (max-width: 1099px) and (min-width: 700px) {
  .gable { --gw: 102vw; }
  .gable .house { left: -1%; }
  /* the fence/grass strips fill the building's outer corners (otherwise the sky shows under the eaves at the frame edges) */
  .gable .side { display: block; }
  /* the backdrop (2400x1600) must reach below the building base: ground line = 86px + 62.2vw, backdrop height = width / 1.5 */
  .station { background-size: max(100%, calc(150px + 96vw)) auto; }
  .bay { padding: 0 12vw; }
  .bay__panel { grid-template-columns: 1fr 1fr; column-gap: calc(2 * var(--reach)); }
  /* side-by-side cards share one clamp on the middle rail */
  .mcard:nth-child(odd):not(:nth-last-child(2))::after { display: none; }
  .mcard:nth-child(even)::before { left: calc(-2 * var(--reach) - 12px); width: calc(2 * var(--reach) + 18px); }
  .bay__panel::before { /* a third rail down the middle, between the two columns */
    background:
      var(--slots) left calc(var(--rail) / 2 - 2px) top 0 / 4px 100% no-repeat,
      var(--slots) right calc(var(--rail) / 2 - 2px) top 0 / 4px 100% no-repeat,
      var(--slots) center top 0 / 4px 100% no-repeat,
      var(--steel) left 0 top 0 / var(--rail) 100% no-repeat,
      var(--steel) right 0 top 0 / var(--rail) 100% no-repeat,
      var(--steel) center top 0 / var(--rail) 100% no-repeat;
  }
  .bay__panel::after {
    background:
      linear-gradient(#cfd4d8, #7b8287) left 3px top 6px / 30px 9px no-repeat,
      linear-gradient(#cfd4d8, #7b8287) right 3px top 6px / 30px 9px no-repeat,
      linear-gradient(#cfd4d8, #7b8287) center top 6px / 30px 9px no-repeat,
      radial-gradient(closest-side, rgb(25 18 10 / 0.6), transparent) left -8px bottom 0 / 60px 14px no-repeat,
      radial-gradient(closest-side, rgb(25 18 10 / 0.6), transparent) right -8px bottom 0 / 60px 14px no-repeat,
      radial-gradient(closest-side, rgb(25 18 10 / 0.6), transparent) center bottom 0 / 60px 14px no-repeat;
  }
}

/* ---------- below the first viewport ---------- */
.rack { padding: clamp(64px, 7vw, 110px) 0; }
.rack__head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px 40px; align-items: center; margin-bottom: 30px; padding: clamp(22px, 3vw, 40px); }
.rack__head h2 { margin: 0; }
.rack__head p { margin: 0; }
.cubbies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0;
  background: var(--red); border: 8px solid var(--red); border-radius: 20px; box-shadow: var(--shadow-2); }
.cubby {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 300px; padding: 46px 12px 0; text-decoration: none; color: var(--spot);
  background: linear-gradient(#5b4532, #43321f);
  height: 100%;
}
.cubby::before { /* the name plate */
  content: attr(data-word); content: attr(data-word) / ""; /* the picture's alt already names it for screen readers */
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px; background: #f4ead3; border: 2px solid var(--spot); border-radius: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; white-space: nowrap;
}
.cubby img { width: 86%; height: 150px; object-fit: contain; object-position: 50% 100%; margin-bottom: -2px;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.55)) drop-shadow(0 6px 6px rgb(0 0 0 / 0.25)); transition: transform 0.4s var(--ease-out); position: relative; z-index: 1; }
/* the wooden shelf board each piece of gear stands on */
.cubby span::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
  background: linear-gradient(#d39c63 0 5px, #a8703e 5px 13px, #7a4b24 13px); box-shadow: 0 -1px 0 rgb(255 255 255 / 0.25) inset; }
.cubby span { margin-top: 16px; min-height: calc(2 * 1.3em + 26px); display: flex; align-items: center; justify-content: center; }
.cubby span { display: block; width: calc(100% + 24px); margin-top: 12px; padding: 10px 6px 16px; background: #fffaf0; text-align: center; font-weight: 700; font-size: 0.98rem; line-height: 1.3; position: relative; }
.cubby span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: linear-gradient(var(--trim-lime) 0 2px, var(--trim-silver) 2px 5px, var(--trim-lime) 5px); }
.cubby:hover img, .cubby:focus-visible img { transform: translateY(-3px) rotate(-2deg); }
.cubby:hover span::after, .cubby:focus-visible span::after { background: linear-gradient(var(--trim-lime) 0 2px, #fff 2px 5px, var(--trim-lime) 5px); }
@media (max-width: 900px) {
  .rack__head { grid-template-columns: 1fr; }
  .cubbies { grid-template-columns: repeat(5, 70%); overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 20px; }
  .cubbies li { scroll-snap-align: start; }
  .cubby { min-height: 280px; }
}

.shelf { padding: clamp(64px, 7vw, 110px) 0 clamp(72px, 8vw, 120px); background: var(--cream); }
.shelf__row { --gap: clamp(16px, 2.5vw, 36px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gap); align-items: start; margin-top: 30px; }
.book { position: relative; z-index: 1; text-decoration: none; color: var(--spot); }
/* each cover stands on a shelf board; the boards reach half the gap each way so a row reads as one shelf */
.book__stage { position: relative; display: block; padding: 0 7% 20px; isolation: isolate; }
.book__stage::before { /* the board: lit top face + front edge */
  /* the soft shadow under the board is part of the gradient, so neighbouring boards join without seams */
  content: ""; position: absolute; z-index: -2; left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); bottom: -12px; height: 38px;
  /* top face 0-12px (the covers stand 6px back on it), a lit lip, then the front edge */
  background: linear-gradient(#c98d57, #d9a56e 12px, #e7b987 12px, #a86b3c 14px, #8f5730 19px, #7a4523 26px, rgb(80 40 10 / 0.3) 26px, rgb(80 40 10 / 0.1) 31px, transparent 38px);
}
.book__stage::after { /* contact shadow where the book meets the board */
  content: ""; position: absolute; z-index: -1; left: 9%; right: 6%; bottom: 15px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(30 12 0 / 0.6), rgb(30 12 0 / 0.25) 60%, transparent);
}
.book img { display: block; width: 100%; aspect-ratio: 8 / 10; object-fit: cover; border-radius: 3px 9px 9px 3px;
  box-shadow: inset 6px 0 0 rgb(0 0 0 / 0.18), -3px 0 0 rgb(0 0 0 / 0.22), 0 2px 4px rgb(0 0 0 / 0.3), 8px 0 16px -6px rgb(0 0 0 / 0.35);
  transform-origin: 0 100%; transition: transform 0.35s var(--ease-out); }
/* the cover tips back on its bottom-left corner, so no corner ever dips over the front of the board */
.book:hover img { transform: rotate(-2deg); }
.book b { display: block; margin-top: 20px; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.15; }
.book small { display: block; color: var(--ink-soft); font-weight: 700; }
@media (max-width: 760px) { .shelf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .book__stage { padding-bottom: 18px; } .book__stage::before { height: 34px; background: linear-gradient(#c98d57, #d9a56e 9px, #e7b987 9px, #a86b3c 11px, #8f5730 15px, #7a4523 22px, rgb(80 40 10 / 0.3) 22px, rgb(80 40 10 / 0.1) 27px, transparent 34px); } .book__stage::after { bottom: 13px; } }

.grownups { position: relative; padding: clamp(64px, 7vw, 110px) 0; background: var(--red); color: #fff; overflow: hidden; }
.grownups h2, .grownups h3 { color: #fff; }
.grownups .lede { color: #fff; }
.grownups__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 28px; }
.grownups__card { background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(22px, 2.6vw, 36px); box-shadow: 0 10px 28px rgb(60 0 0 / 0.3); }
.grownups__card h3 { color: var(--spot); }
.grownups__card ul { padding-left: 1.1em; margin: 0 0 22px; }
.grownups__card li { margin: 6px 0; }
.grownups__card li::marker { content: "● "; color: var(--red); font-size: 0.8em; }
.grownups__note { margin-top: 28px; display: flex; gap: 14px; align-items: center; color: #fff; font-weight: 700; }
.grownups__note img { width: 72px; flex: none; }
@media (max-width: 760px) { .grownups__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .house .door--play { transform: translateY(-93%); }
  .star { animation: none; }
}

.grownup-link .nowrap { white-space: nowrap; }