/* Kernel's Playhouse Full D - BUS-11 - DRAFT. Bundle of version-4/styles.css + full-d/bpx-lock.css + family-nav CSS, for the Webflow draft (brand colours only). */
/* Kernel's Playhouse — VERSION 4 "Sunny Adventure Map" (DRAFT - NOT APPROVED, D-0053)
   Version 3 Adventure Map layout + Version 1D popcorn puffs, in the Version 1A daytime
   colourway (cream / white base, plum text) with a Miami-sunset accent like the BPX home page
   (flamingo pink, electric cyan, butter, midnight).
   Colours only from brand/BUS-11/brand.json. No web fonts. CSS-only motion, all of it
   switched on only when the device has NOT asked for reduced motion.
   Text on pink, orange and caramel is always plum. */
:root {
  --plum: #1E0E3E;      /* primary, midnight */
  --pink: #FF2E9A;      /* flamingo */
  --cyan: #16C9E8;      /* electric cyan */
  --cream: #FFF1D0;
  --white: #FFFFFF;
  --gold: #FFD24A;      /* butter */
  --candy: #FF2E9A;
  --caramel: #FF8A3D;
  --orange: #FF8A3D;
  --rose: #FF2E9A;
  --blush: #FFF1D0;
  --night: #130A2A;
  --dusk: #1E0E3E;
  --ink: #130A2A;        
  --indigo: #1E0E3E;
  --iris: #16C9E8;
  --violet: #FF2E9A;
  --miami: linear-gradient(100deg, var(--pink) 0%, var(--violet) 50%, var(--cyan) 100%); /* decoration only, never under text */
  --sunset: linear-gradient(100deg, var(--pink) 0%, var(--rose) 38%, var(--cyan) 100%);
  --sky: rgba(22,201,232,.16);
  --tap: 60px;          /* smallest tap target */
  --r: 26px;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--cream); color: var(--plum); font-size: 19px; line-height: 1.45; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 5.4vw, 58px); font-weight: 900; }
h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 900; }
h3 { font-size: 24px; font-weight: 900; }
p { margin: 0 0 14px; max-width: 60ch; }
:focus-visible { outline: 5px solid var(--cyan); outline-offset: 4px; border-radius: 12px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
section { padding: 72px 0; }
.lead { font-size: 22px; font-weight: 700; line-height: 1.45; }
.small { font-size: 16px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- draft banner ---------- */
.draft { background: var(--plum); color: var(--gold); text-align: center; font-weight: 900; font-size: 15px;
  letter-spacing: .04em; padding: 8px 12px; }

/* ---------- pink & white popcorn stripes: accent band only ---------- */
.stripes { height: 18px; background: repeating-linear-gradient(90deg, var(--pink) 0 26px, var(--white) 26px 52px, var(--violet) 52px 78px, var(--white) 78px 104px);
  border-block: 4px solid var(--plum); }

/* ---------- chunky toy buttons (3D press) ---------- */
.btn, .kid-nav a, .grown summary, .playhouse-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 0 28px; border-radius: 22px; border: 4px solid var(--plum);
  font-weight: 900; font-size: 20px; text-decoration: none; cursor: pointer; color: var(--plum);
  box-shadow: 0 4px 0 var(--plum); transform: translateY(0);
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s cubic-bezier(.16,1,.3,1);
}
.btn:hover, .kid-nav a:hover, .grown summary:hover, .playhouse-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--plum); }
.btn:active, .kid-nav a:active, .grown summary:active, .playhouse-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--plum); }
.btn.pink { background: var(--pink); }
.btn.gold { background: var(--gold); }
.btn.cyan { background: var(--cyan); }
.btn.sunset { background: var(--sunset); }
.btn.big { min-height: 80px; font-size: 24px; padding: 0 38px; border-radius: 28px; }

/* ---------- header: white sunny island ---------- */
.site-head { background: var(--white); padding: 16px 0 20px; position: relative; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: var(--tap); margin-right: auto; }
/* logo: Kernel alone, under a theatre spotlight (no disc, ring or badge) */
.spot { position: relative; flex: 0 0 auto; width: 92px; height: 88px; display: flex; align-items: flex-end; justify-content: center; }
.spot img { position: relative; z-index: 2; width: 66px; height: 66px; margin-bottom: 6px; }
.spot .cone { position: absolute; z-index: 0; left: 4px; right: 4px; top: -18px; bottom: 8px; transform-origin: 50% 0;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255,46,154,.35) 0%, transparent 22%, transparent 78%, rgba(22,201,232,.35) 100%),
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,241,208,.95) 30%, rgba(255,210,74,.75) 70%, rgba(255,210,74,.35) 100%);
  -webkit-mask: linear-gradient(90deg, transparent 0%, var(--plum) 24%, var(--plum) 76%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, var(--plum) 24%, var(--plum) 76%, transparent 100%); }
.spot .pool { position: absolute; z-index: 1; left: 2px; right: 2px; bottom: 0; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 40%, var(--gold) 100%);
  -webkit-mask: linear-gradient(90deg, transparent 0%, var(--plum) 22%, var(--plum) 78%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, var(--plum) 22%, var(--plum) 78%, transparent 100%);
  box-shadow: 0 2px 0 rgba(22,201,232,.25); }
.logo .word { display: block; font-weight: 900; font-size: 26px; line-height: 1.15; padding-bottom: 4px;
  border-bottom: 6px solid var(--violet); }
.logo small { display: block; font-size: 15px; font-weight: 800; color: var(--dusk); margin-top: 6px; }

/* The Playhouse: the one button that must stand out */
.playhouse-btn { position: relative; min-height: 76px; padding: 0 8px 0 14px; gap: 12px; border-radius: 26px; font-size: 22px;
  background: linear-gradient(100deg, var(--ink) 0%, var(--indigo) 55%, var(--violet) 100%); color: var(--white); border-width: 5px; box-shadow: 0 4px 0 var(--plum), 0 0 0 7px var(--gold); }
.playhouse-btn:hover { box-shadow: 0 6px 0 var(--plum), 0 0 0 7px var(--gold); }
.playhouse-btn:active { box-shadow: 0 1px 0 var(--plum), 0 0 0 7px var(--gold); }
.playhouse-btn > span:nth-child(2) { line-height: 1.1; text-align: left; }
.playhouse-btn small { display: block; font-size: 14px; font-weight: 800; }
.playhouse-btn .star { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold);
  border: 3px solid var(--plum); font-size: 24px; }
.playhouse-btn .go { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold);
  color: var(--plum); border: 3px solid var(--plum); font-size: 20px; }
.playhouse-btn .star { color: var(--plum); }

.kid-nav { display: flex; flex-wrap: wrap; gap: 14px; order: 3; width: 100%; }
.kid-nav a { white-space: nowrap; font-size: 18px; padding: 0 20px; }
.kid-nav a:nth-child(1) { background: var(--gold); }
.kid-nav a:nth-child(2) { background: var(--cyan); }
.kid-nav a:nth-child(3) { background: var(--orange); }
.kid-nav a:nth-child(4) { background: var(--blush); }
.grown { position: relative; }
.grown summary { list-style: none; white-space: nowrap; background: var(--cream); font-size: 16px; padding: 0 18px; min-height: var(--tap); }
.grown summary::-webkit-details-marker { display: none; }
.grown[open] summary { background: var(--sky); }
.grown ul { position: absolute; right: 0; top: calc(100% + 16px); list-style: none; margin: 0; padding: 12px; width: 300px; z-index: 6;
  background: var(--white); color: var(--plum); border: 4px solid var(--plum); border-radius: 22px; box-shadow: 0 5px 0 var(--pink); }
.grown li a { display: flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: 14px; font-weight: 800; text-decoration: none; }
.grown li a:hover { background: var(--cream); }
.grown .note { font-size: 14px; font-weight: 900; color: var(--dusk); padding: 6px 14px; }
.soon-li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: var(--tap); padding: 0 14px; font-weight: 800; }

/* ---------- home hero: the sunny map ---------- */
.hero { position: relative; overflow: hidden; padding: 44px 0 10px;
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%); }
.hero-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: end; margin-bottom: 30px; position: relative; z-index: 2; }
.motto { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--pink);
  color: var(--plum); font-weight: 900; font-size: 20px; border: 4px solid var(--plum); box-shadow: 0 3px 0 var(--plum);
  transform: rotate(-3deg); margin-bottom: 16px; }
.hero-top .btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }

/* daytime Miami sky: cyan up top, flamingo and butter at the horizon */
.map { position: relative; overflow: hidden; border-radius: 44px; border: 6px solid var(--plum);
  box-shadow: 0 7px 0 var(--plum); padding: 40px 48px 70px; color: var(--plum);
  background:
    radial-gradient(ellipse 70% 45% at 80% 100%, rgba(255,210,74,.9), transparent 70%),
    linear-gradient(180deg, var(--cyan) 0%, var(--iris) 34%, var(--violet) 50%, var(--pink) 76%, var(--rose) 90%, var(--gold) 100%); }
.sun { position: absolute; right: 14%; top: 44%; width: 300px; height: 300px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--gold) 0 45%, var(--orange) 100%);
  -webkit-mask: linear-gradient(180deg, var(--plum) 0 52%, transparent 52% 56%, var(--plum) 56% 66%, transparent 66% 71%, var(--plum) 71% 79%, transparent 79% 85%, var(--plum) 85%);
          mask: linear-gradient(180deg, var(--plum) 0 52%, transparent 52% 56%, var(--plum) 56% 66%, transparent 66% 71%, var(--plum) 71% 79%, transparent 79% 85%, var(--plum) 85%);
  opacity: .9; }
.map-head { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-bottom: 34px; position: relative; z-index: 2; max-width: 760px; }
.guide { width: 150px; filter: drop-shadow(0 4px 0 rgba(30,14,62,.35)); }
.bubble { position: relative; background: var(--plum); color: var(--white); border: 0; border-radius: 30px;
  padding: 18px 26px; }
.bubble::before, .bubble::after { content: ""; position: absolute; top: 40%; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.bubble::before { left: -26px; width: 28px; height: 34px; background: var(--plum); }
.bubble::after { display: none; }
.bubble b { display: block; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; margin-bottom: 6px; }
.bubble span { font-size: 18px; font-weight: 700; }

/* the winding trail: row 1 goes right, turns, row 2 comes back */
.trail { --cg: 34px; --rg: 70px; position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto; column-gap: var(--cg); row-gap: var(--rg); list-style: none; margin: 0; padding: 0 20px 0 0; z-index: 1; }
.trail::before, .trail::after { content: ""; position: absolute; pointer-events: none; z-index: -1;
  left: calc((100% - 40px - 3 * var(--cg)) / 8); right: 0; border-left: 0; border-radius: 0 220px 220px 0; }
.trail::before { top: calc((100% - var(--rg)) / 4 - 22px); height: calc((100% + var(--rg)) / 2 + 44px);
  border: 44px solid var(--white); border-left: 0; }
.trail::after { top: calc((100% - var(--rg)) / 4 - 3px); height: calc((100% + var(--rg)) / 2 + 6px);
  margin-right: 19px; border: 6px dashed var(--pink); border-left: 0; }
.trail li:nth-child(5) { grid-area: 2 / 4; }
.trail li:nth-child(6) { grid-area: 2 / 3; }
.trail li:nth-child(7) { grid-area: 2 / 2; }
.trail li:nth-child(8) { grid-area: 2 / 1; }

/* ---------- door portals ---------- */
.door { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--plum); text-align: center; }
.arch { position: relative; width: 100%; max-width: 190px; aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px;
  border: 8px solid var(--white); outline: 5px solid var(--plum); box-shadow: 0 6px 0 var(--plum);
  background: var(--w, var(--cyan)); overflow: hidden; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.arch::before { content: ""; position: absolute; inset: 14% 14% 10%; border-radius: 999px 999px 10px 10px;
  background: repeating-radial-gradient(circle at 50% 60%, rgba(255,255,255,.35) 0 8px, transparent 8px 20px), var(--w2, var(--dusk)); }
.arch::after { content: ""; position: absolute; right: 18%; top: 56%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--plum); }
.num { position: absolute; left: 50%; top: -2px; transform: translateX(-50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: var(--plum); font-weight: 900; font-size: 26px; border: 4px solid var(--plum); }
.plate { margin-top: 16px; background: var(--white); border: 4px solid var(--plum); border-radius: 18px; padding: 8px 14px; min-height: var(--tap);
  display: flex; flex-direction: column; justify-content: center; box-shadow: 0 3px 0 var(--plum); }
.plate b { font-size: 20px; line-height: 1.3; }
.plate small { font-size: 14px; font-weight: 700; color: var(--dusk); }
.door:active .arch { transform: translateY(6px); }
.d1 { --w: var(--gold);   --w2: var(--caramel); }
.d2 { --w: var(--cyan);   --w2: var(--dusk); }
.d3 { --w: var(--white);  --w2: var(--cyan); }
.d4 { --w: var(--orange); --w2: var(--caramel); }
.d5 { --w: var(--blush);  --w2: var(--rose); }
.d6 { --w: var(--gold);   --w2: var(--orange); }
.d7 { --w: var(--pink);   --w2: var(--plum); }
.d8 { --w: var(--dusk);   --w2: var(--night); }

/* characters peeking from the corners */
.peek { position: absolute; width: 130px; z-index: 3; pointer-events: none; }
.peek.tr { right: -18px; top: -14px; transform: rotate(-14deg); }
.peek.bl { left: -30px; bottom: -40px; transform: rotate(12deg); }
.peek.br { right: -10px; bottom: -44px; width: 120px; transform: rotate(-8deg); }
.map-foot { position: relative; z-index: 2; margin: 60px 0 0; text-align: center; }
.map-foot p { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; margin: 0; max-width: none;
  background: var(--white); border: 4px solid var(--plum); border-radius: 999px; font-weight: 900; }

/* ---------- popcorn puffs (solid inline SVG, from Version 1D) ---------- */
.puff { position: absolute; width: 74px; height: 61px; z-index: 1; pointer-events: none; overflow: visible; }
.hero > .puff { z-index: 0; }
.puff.h1 { left: 2%; top: 22px; width: 58px; height: 48px; }
.puff.h2 { left: 46%; top: 12px; width: 50px; height: 41px; }
.puff.h3 { right: 3%; top: 150px; width: 64px; height: 53px; }
.puff.m1 { left: 46%; top: 30px; }
.puff.m2 { left: 64%; top: 70px; width: 56px; height: 46px; }
.puff.m3 { left: 3%; top: 46%; width: 60px; height: 50px; }
.puff.m4 { right: 3%; top: 50%; width: 52px; height: 43px; }
.puff.m5 { left: 30%; bottom: 18px; width: 62px; height: 51px; }
.puff.m6 { left: 62%; bottom: 26px; width: 54px; height: 44px; }

/* ---------- generic blocks ---------- */
.eyebrow { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em; font-size: 15px; background: var(--gold); color: var(--plum);
  border: 3px solid var(--plum); transform: rotate(-2deg); margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 900; font-size: 14px;
  background: var(--cream); color: var(--plum); border: 3px solid var(--plum); }
.chip.soon { background: var(--gold); }
.chip.idea { background: var(--blush); }
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.split.flip { grid-template-columns: 1.2fr 1fr; }
.blob { background: var(--white); border: 6px solid var(--plum); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; padding: 30px;
  box-shadow: 0 6px 0 var(--violet); }
.blob img { max-height: 320px; margin: auto; }
/* "Now showing" is the home page's theatre: dark stage, curtain side panels, beams from the top corners */
.band-sunset { position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(180deg, var(--ink) 0%, var(--plum) 100%); }
.band-sunset .wrap { position: relative; z-index: 3; padding-inline: max(28px, calc(clamp(44px, 9vw, 130px) + 24px)); }
.band-sunset .wrap > h2 { display: inline-block; background: var(--white); color: var(--plum); padding: 6px 18px; border-radius: 18px; border: 4px solid var(--plum); }
.beam { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform-origin: 50% 0; }
.beam.b1 { clip-path: polygon(6% 0, 16% 0, 64% 100%, 22% 100%);
  background: linear-gradient(180deg, rgba(255,241,208,.55) 0%, rgba(255,210,74,.22) 55%, rgba(255,210,74,0) 100%); transform-origin: 10% 0; }
.beam.b2 { clip-path: polygon(84% 0, 94% 0, 78% 100%, 36% 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,46,154,.22) 55%, rgba(255,46,154,0) 100%); transform-origin: 90% 0; }
.beam.b3 { clip-path: polygon(46% 0, 54% 0, 70% 100%, 30% 100%);
  background: linear-gradient(180deg, rgba(255,241,208,.4) 0%, rgba(255,241,208,.12) 60%, rgba(255,241,208,0) 100%); }
.curtain { position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(44px, 9vw, 130px); pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--plum) 14px 24px, var(--indigo) 24px 28px, var(--ink) 28px 40px);
  border-bottom: 10px solid var(--gold); }
.curtain.l { left: 0; border-radius: 0 0 70px 0; border-right: 6px solid var(--night); }
.curtain.r { right: 0; border-radius: 0 0 0 70px; border-left: 6px solid var(--night); }
.band-sunset .poster-tile { position: relative; z-index: 3; }

.band-candy { background: var(--candy); }
.band-white { background: var(--white); }

/* ---------- poster tiles ---------- */
.posters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.poster-tile { display: block; text-decoration: none; color: var(--plum); }
.poster { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; border: 6px solid var(--white); outline: 4px solid var(--plum);
  background: var(--candy); overflow: hidden;
  display: grid; place-items: center; box-shadow: 0 6px 0 var(--plum); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.poster img { width: 78%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(30,14,62,.3)); }
.poster .playbtn { position: absolute; right: 12px; bottom: 12px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--plum); border: 4px solid var(--plum); font-size: 26px; box-shadow: 0 3px 0 var(--plum); }
.poster-tile:nth-child(4n+2) .poster { background: var(--cyan); }
.poster-tile:nth-child(4n+3) .poster { background: var(--gold); }
.poster-tile:nth-child(4n+4) .poster { background: var(--blush); }
.ticket { margin-top: 18px; background: var(--white); color: var(--plum); border-radius: 16px; padding: 12px 16px; border: 4px solid var(--plum); }
.ticket h3 { font-size: 22px; line-height: 1.3; margin: 8px 0 4px; color: var(--plum); }
.ticket p { font-size: 15px; font-weight: 700; margin: 0; }
a.poster-tile:hover .poster { transform: translateY(-6px) rotate(-1deg); }

/* ---------- friend tokens ---------- */
.tokens { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 18px; }
.token { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--plum); }
.token .disc { width: 128px; height: 128px; border-radius: 50%; background: var(--white); border: 6px solid var(--plum);
  box-shadow: 0 5px 0 var(--ring, var(--pink)); display: grid; place-items: center; padding: 14px; }
.token .disc img { max-height: 92px; }
.token b { margin-top: 18px; font-size: 20px; }
.token small { font-size: 14px; font-weight: 700; color: var(--dusk); max-width: 18ch; line-height: 1.35; }
.token:nth-child(6n+1) { --ring: var(--pink); }
.token:nth-child(6n+2) { --ring: var(--cyan); }
.token:nth-child(6n+3) { --ring: var(--gold); }
.token:nth-child(6n+4) { --ring: var(--orange); }
.token:nth-child(6n+5) { --ring: var(--rose); }
.token:nth-child(6n+6) { --ring: var(--caramel); }

/* full cast: each group is its own zone on the map */
.cast-group { margin-top: 34px; padding: 30px 26px 34px; border-radius: 34px; border: 5px solid var(--plum); background: var(--white); }
.cast-group.g2 { background: linear-gradient(160deg, var(--cyan), var(--candy)); }
.cast-group.g3 { background: var(--blush); }
.cast-group.g4 { background: var(--gold); }
.cast-group.g5 { background: var(--sky); }
.cast-group.g6 { background: var(--candy); }
.cast-title { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; margin: 0 0 24px; border-radius: 16px;
  background: var(--plum); color: var(--gold); font-size: 22px; transform: rotate(-1.5deg); }

/* ---------- play & make toy box ---------- */
.toybox { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 22px; }
.toy { background: var(--white); border: 5px solid var(--plum); border-radius: var(--r); padding: 24px; box-shadow: 0 5px 0 var(--plum); }
.toy:first-child { grid-row: span 2; background: var(--gold); display: flex; flex-direction: column; justify-content: space-between; }
.toy:first-child h3 { font-size: 30px; }
.toy:first-child img { max-height: 180px; margin: 18px auto; }

/* ---------- story beats: a mini level path ---------- */
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; position: relative; }
.levels::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; border-top: 8px dotted var(--violet); z-index: 0; }
.levels li { position: relative; z-index: 1; text-align: center; }
.levels .stop { width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  font-size: 34px; font-weight: 900; border: 5px solid var(--plum); box-shadow: 0 4px 0 var(--plum); background: var(--white); }
.levels li:nth-child(2) .stop { background: var(--cyan); }
.levels li:nth-child(3) .stop { background: var(--gold); }
.levels li:nth-child(4) .stop { background: var(--sunset); }
.levels p { margin: 0 auto; font-size: 17px; }

/* ---------- grown-up / promise / parents ---------- */
.shelf { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr; gap: 18px; }
.shelf > div { background: var(--cream); border: 4px solid var(--plum); border-radius: 20px; padding: 18px; }
.never { background: var(--plum); color: var(--white); }
.never h2, .never li, .bubble b, .bubble span { color: var(--white); } /* explicit: the BPX copy resets inherited colour */
.never ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.never li { display: flex; align-items: center; gap: 14px; min-height: var(--tap); background: var(--dusk); border-radius: 18px; padding: 10px 18px; font-weight: 800; }
.never li::before { content: ""; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--cyan); border: 4px solid var(--cream); }
.parents { background: var(--blush); }
.card { background: var(--white); border: 4px solid var(--plum); border-radius: 22px; padding: 22px; box-shadow: 0 4px 0 var(--plum); }

/* ---------- footer ---------- */
.site-foot { background: var(--plum); color: var(--cream); padding: 50px 0 34px; }
.site-foot .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.site-foot h4 { color: var(--gold); margin: 0 0 8px; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 800; }
.site-foot li { font-size: 16px; }
.site-foot .soon-li { padding: 0; }
.site-foot .promise li { min-height: 40px; display: flex; align-items: center; }
.family { margin-top: 28px; font-size: 15px; color: var(--candy); max-width: none; }
.family a { color: var(--gold); display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 800; }

/* shared with The Playhouse pages (kept from Version 3 so theplayhouse/ can reuse it) */
.pills a { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 28px; border-radius: 22px; border: 4px solid var(--plum); font-weight: 900; text-decoration: none; }
button.btn { font-family: inherit; }
.btn.cream { background: var(--cream); }
.ticket .tt { font-size: 22px; line-height: 1.3; margin: 8px 0 4px; color: var(--plum); }
.talk .tt { font-size: 26px; }

/* =========================================================
   THE PLAYHOUSE: cosy cinema
   ========================================================= */
body.tp { background: var(--night); color: var(--white); }
.cinema { position: relative; padding: 46px 0 0; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,46,154,.3), transparent 70%), var(--plum); }
.cinema::before, .cinema::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9vw; max-width: 120px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--pink) 0 18px, var(--rose) 18px 26px, var(--pink) 26px 40px); }
.cinema::before { left: 0; border-radius: 0 0 90px 0; }
.cinema::after { right: 0; border-radius: 0 0 0 90px; }
.cinema .wrap { position: relative; z-index: 1; padding-left: max(28px, 12vw); padding-right: max(28px, 12vw); max-width: none; }
.sign { position: relative; max-width: 880px; margin: 0 auto; padding: 24px; border-radius: 34px; border: 5px solid var(--plum);
  box-shadow: 0 7px 0 var(--night);
  background: radial-gradient(circle, var(--cream) 0 5px, var(--gold) 6px 8px, transparent 9px) 0 0 / 30px 30px, var(--caramel); }
.sign::after { content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--white) 0 6px, rgba(255,210,74,.6) 7px 10px, transparent 11px) 15px 15px / 30px 30px; }
.board { position: relative; z-index: 1; background: var(--plum); border-radius: 18px; border: 5px solid var(--night); padding: 26px 30px; text-align: center; }
.board .top { display: inline-flex; min-height: 44px; align-items: center; padding: 0 20px; border-radius: 999px; background: var(--pink);
  color: var(--plum); font-weight: 900; letter-spacing: .14em; font-size: 16px; }
.board h1 { margin: 14px 0 8px; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(40px, 7vw, 76px); }
.board p { margin: 0 auto; color: var(--cream); font-weight: 700; }
.cinema-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 44px 0 30px; }
.cinema-row .feature { max-width: 300px; justify-self: center; width: 100%; }
.addr { font-size: 14px; color: var(--candy); }
.seats { height: 70px; margin-top: 20px; position: relative; z-index: 1;
  background: radial-gradient(ellipse 30px 34px at 50% 100%, var(--dusk) 0 96%, transparent 100%) 0 0 / 76px 70px repeat-x,
              linear-gradient(transparent 60%, var(--night) 60%); }

.pills { display: flex; flex-wrap: wrap; gap: 14px; padding: 34px 0 6px; }
.pills a { background: var(--cream); color: var(--plum); border-color: var(--cream); box-shadow: 0 4px 0 var(--caramel); font-size: 18px; }
.pills a:hover { box-shadow: 0 6px 0 var(--caramel); }
.pills a:active { box-shadow: 0 1px 0 var(--caramel); }
.row { padding: 46px 0; }
.row h2 { color: var(--white); }
body.tp .door { color: var(--plum); }
.doorgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.doorgrid .arch { max-width: 150px; }
.friends-circles .token { color: var(--white); }
.friends-circles .token small { color: var(--candy); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 26px; overflow-x: auto; padding: 8px 4px 26px; scroll-snap-type: x mandatory; }
.rail > * { scroll-snap-align: start; }
.strip { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.strip > div { border-radius: 24px; padding: 26px; border: 4px solid var(--gold); background: var(--dusk); }
.strip > div + div { border-color: var(--cyan); }
.strip h3 { color: var(--gold); }

/* episode page: the screen with curtains */
.screen-wrap { position: relative; border-radius: 30px; padding: 26px 13% 34px; margin-top: 20px; border: 5px solid var(--plum);
  background: var(--plum); box-shadow: 0 7px 0 var(--night); overflow: hidden; }
.screen-wrap::before, .screen-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%;
  background: repeating-linear-gradient(90deg, var(--pink) 0 14px, var(--rose) 14px 20px, var(--pink) 20px 30px); }
.screen-wrap::before { left: 0; border-radius: 0 0 60px 0; }
.screen-wrap::after { right: 0; border-radius: 0 0 0 60px; }
.player { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 18px; border: 6px solid var(--cream);
  background: radial-gradient(circle at 50% 40%, var(--dusk), var(--night) 80%); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 20px; text-align: center; }
.player img { max-height: 42%; }
.player small { color: var(--cream); font-size: 15px; max-width: 46ch; }
.back { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 900; text-decoration: none; color: var(--gold); font-size: 20px; }
.talk { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.talk .card { background: var(--dusk); color: var(--white); border-color: var(--gold); box-shadow: 0 4px 0 var(--night); }
.talk .card + .card { border-color: var(--cyan); }

/* =========================================================
   motion — only when reduced motion is NOT requested
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes puffbob { 0%,100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -9px; rotate: 4deg; } }
  @keyframes pop { 0% { transform: scale(.85); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
  @keyframes twinkle { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
  @keyframes peek { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
  @keyframes glow { 0%,100% { box-shadow: 0 4px 0 var(--plum), 0 0 0 7px var(--gold); } 50% { box-shadow: 0 4px 0 var(--plum), 0 0 0 7px var(--gold), 0 0 0 13px rgba(22,201,232,.45); } }
  .door:hover .arch, .door:focus-visible .arch { animation: wiggle .5s cubic-bezier(.36,.07,.19,.97) 2; }
  .guide { animation: bob 3.2s ease-in-out infinite; }
  .bubble { animation: pop .6s cubic-bezier(.16,1,.3,1) .2s both; }
  .peek { animation: peek 4s ease-in-out infinite; }
  .peek.bl { animation-delay: 1.3s; }
  .peek.br { animation-delay: 2.4s; }
  .puff { animation: puffbob 3.4s ease-in-out infinite; }
  .puff.h2, .puff.m2, .puff.m5 { animation-delay: .7s; }
  .puff.h3, .puff.m3, .puff.m6 { animation-delay: 1.4s; }
  .puff.m4 { animation-delay: 2.1s; }
  .playhouse-btn { animation: glow 2.4s ease-in-out infinite; }
  .playhouse-btn:hover, .playhouse-btn:active { animation: none; }
  @keyframes sway { 0%,100% { rotate: -4deg; } 50% { rotate: 4deg; } }
  @keyframes beamsway { 0%,100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
  .spot .cone { animation: sway 9s ease-in-out infinite; }
  .beam.b1 { animation: beamsway 12s ease-in-out infinite; }
  .beam.b2 { animation: beamsway 12s ease-in-out -6s infinite; }
  .sign::after { animation: twinkle 1.6s steps(2, jump-none) infinite; }
  .board .top { animation: bob 2.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   mobile: one clean column
   ========================================================= */
@media (max-width: 960px) {
  .tokens { grid-template-columns: repeat(4, 1fr); }
  .posters, .doorgrid { grid-template-columns: repeat(2, 1fr); }
  .shelf { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  body { font-size: 18px; }
  .wrap { padding: 0 16px; }
  section { padding: 48px 0; }
  .hero-top, .split, .split.flip, .cinema-row, .toybox, .strip, .talk, .site-foot .cols, .never ul { grid-template-columns: 1fr; }
  .hero-top .btns { justify-content: flex-start; }
  .toy:first-child { grid-row: auto; }
  .logo { margin-right: 0; flex: 1 1 100%; }
  .logo .word { font-size: 22px; }
  .playhouse-btn { flex: 1 1 100%; justify-content: space-between; }
  .curtain { width: 26px; }
  .curtain.l { border-radius: 0 0 26px 0; } .curtain.r { border-radius: 0 0 0 26px; }
  .band-sunset .wrap { padding-inline: 44px; }
  .posters { grid-template-columns: 1fr; }
  .grown { flex: 1 1 100%; }
  .grown summary { width: 100%; }
  .kid-nav a { flex: 1 1 44%; }
  .grown ul { right: auto; left: 0; width: 100%; }
  .map { padding: 26px 16px 60px; border-radius: 30px; }
  .map-head { grid-template-columns: 1fr; }
  .guide { width: 110px; }
  .bubble::before, .bubble::after { display: none; }
  .sun { width: 200px; height: 200px; right: -40px; top: 30%; }
  .trail { grid-template-columns: repeat(2, 1fr); padding: 0; row-gap: 34px; column-gap: 18px; }
  .trail::before, .trail::after { display: none; }
  .trail li:nth-child(n) { grid-area: auto; }
  .puff.m3, .puff.m4, .puff.h2 { display: none; }
  .tokens { grid-template-columns: repeat(2, 1fr); }
  .token .disc { width: 112px; height: 112px; }
  .levels { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .levels::before { display: none; }
  .shelf { grid-template-columns: 1fr; }
  .peek { width: 90px; }
  .cinema::before, .cinema::after { display: none; }
  .cinema .wrap { padding-left: 16px; padding-right: 16px; }
  .screen-wrap { padding: 16px; }
  .screen-wrap::before, .screen-wrap::after { display: none; }
  .player { aspect-ratio: auto; min-height: 320px; }
}

/* CORN:START - copied from reach/sites/popcorn.css (shared with BPX and The Playhouse) */
/* Shared popcorn for the BPX family sites (BPX, KPH, The Playhouse) - DRAFT, D-0053 / D-0056.
   Source of truth: reach/sites/popcorn.svg (sprite) + this file. Copy both into a site; paste the sprite once in <body>.
   Markup:  <svg class="corn c1" aria-hidden="true" focusable="false"><use href="#corn-1"/></svg>   (corn-1, corn-2, corn-3)
            <svg class="corn corn-box" aria-hidden="true" focusable="false"><use href="#corn-box"/></svg>
   Rules: decoration only (aria-hidden), never behind text - place pieces in corners and gutters;
   the parent gets .corn-host; .wide-only pieces hide on phones; motion only under no-preference.
   Colours live in the sprite: #1E0E3E #FFF1D0 #FFD24A #FF2E9A #FFFFFF. */
.corn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.corn-host { position: relative; overflow: clip; }
.corn { position: absolute; z-index: 0; width: var(--corn, 38px); height: var(--corn, 38px);
  pointer-events: none; rotate: var(--r, 0deg); }
.corn.sm { --corn: 26px; }
.corn.lg { --corn: 52px; }
.corn.corn-box { width: var(--corn, 112px); height: calc(var(--corn, 112px) * 1.25); }
.corn.inline { position: static; flex: none; }
/* keep the host's content above the pieces, e.g. .corn-host > .wrap { position: relative; z-index: 1; } */
@media (max-width: 767px) {
  .corn.wide-only { display: none; }
  .corn { --corn: 28px; }
  .corn.corn-box { --corn: 84px; }
}
@media (prefers-reduced-motion: no-preference) {
  .corn:not(.corn-box) { animation: corn-bob 4.8s cubic-bezier(.45,0,.55,1) infinite alternate; }
  .corn.c2 { animation-duration: 5.6s; animation-delay: -1.2s; }
  .corn.c3 { animation-duration: 6.4s; animation-delay: -2.4s; }
  @keyframes corn-bob { from { translate: 0 0; } to { translate: 0 -7px; } }
}

/* KPH placements: corners, gutters and the stage floor only - never behind text */
.corn-host > .wrap { position: relative; z-index: 1; }
.spot .corn { z-index: 3; }
.spot .corn.spot-l { left: -8px; bottom: -4px; --r: -14deg; }
.spot .corn.spot-r { right: -8px; bottom: -2px; --r: 18deg; }
.hero > .corn { z-index: 1; }
.hero > .corn.h-a { top: 10px; right: 18px; --r: 12deg; }
.hero > .corn.h-b { top: 6px; left: 32%; --r: -20deg; }
.spill { display: inline-flex; align-items: flex-end; gap: 0; align-self: flex-end; margin-right: -6px; }
.spill .corn.corn-box { --corn: 66px; }
.spill .corn.sm { --corn: 24px; margin-left: -8px; }
.spill .corn.c1 { margin-bottom: 2px; --r: 24deg; }
.theatre > .corn { z-index: 3; bottom: 16px; }
.theatre > .corn.t-l1 { left: 8px; --r: -10deg; }
.theatre > .corn.t-l2 { left: 40px; bottom: 40px; --r: 20deg; }
.theatre > .corn.t-r1 { right: 10px; --r: 14deg; }
.theatre > .corn.t-r2 { right: 44px; bottom: 42px; --r: -18deg; }
.corn-host > .corn.s-tr { top: 22px; right: 4%; --r: 10deg; }
.corn-host > .corn.s-tr2 { top: 30px; right: calc(4% + 46px); --r: -16deg; }
@media (max-width: 767px) {
  .spill .corn.corn-box { --corn: 56px; }
  .theatre > .corn.t-l2 { left: 18px; bottom: 44px; }
  .corn-host > .corn.s-tr { top: 18px; right: 14px; }
}
/* CORN:END */

/* MEET:START - meet-kernel.html (flat fills; the spotlight reuses .spot) */
[aria-current="page"] { outline: 4px solid var(--plum); outline-offset: 3px; }
.stage-row { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.spot.star { width: 300px; height: 330px; }
.spot.star img { width: 230px; height: 230px; margin-bottom: 22px; }
.spot.star .cone { top: -72px; bottom: 30px; left: 0; right: 0; }
.spot.star .pool { height: 54px; }
.stage-copy h1 { display: inline-block; background: var(--white); color: var(--plum); padding: 6px 20px; border-radius: 20px; }
.stage-copy .lead { color: var(--white); max-width: 34ch; }
.bubble.say { background: var(--white); margin: 22px 0 0 26px; padding: 22px 26px; }
.bubble.say::before { background: var(--white); }
.bubble.say b, .bubble.say span { color: var(--plum); }
.chip.tbd { background: var(--blush); color: var(--plum); }
.facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.facts li { border-radius: 22px; padding: 22px; background: var(--candy); }
.facts li:nth-child(2) { background: var(--cyan); } .facts li:nth-child(3) { background: var(--gold); } .facts li:nth-child(4) { background: var(--blush); }
.facts p { margin: 0 0 8px; }
.loves { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.loves li { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 22px; background: var(--cream); }
.loves b { font-size: 22px; }
.pals { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }
.pal { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pal .disc { width: 128px; height: 128px; border-radius: 50%; background: var(--white); border: 6px solid var(--plum); display: grid; place-items: center; }
.pal .disc img { max-height: 92px; }
.pal h3 { margin: 14px 0 4px; }
.pal p { margin: 0; font-size: 16px; font-weight: 700; color: var(--dusk); max-width: 22ch; }
.tries { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tries li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tries .stop { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 900; background: var(--gold); border: 4px solid var(--plum); }
.tries .bubble { margin: 0; padding: 20px 24px; }
.tries .bubble::before { display: none; }
@media (max-width: 960px) {
  .facts, .pals { grid-template-columns: repeat(2, 1fr); }
  .tries { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .stage-row { grid-template-columns: 1fr; justify-items: center; gap: 24px; text-align: center; }
  .spot.star { width: 210px; height: 236px; }
  .spot.star img { width: 160px; height: 160px; margin-bottom: 16px; }
  .stage-copy .lead { margin-inline: auto; }
  .bubble.say { margin: 18px 0 0; text-align: left; }
  .bubble.say::before { display: none; }
  .loves, .facts { grid-template-columns: 1fr; }
  .pal .disc { width: 112px; height: 112px; }
}
/* MEET:END */

/* ---- full-d/bpx-lock.css ---- */
/* BUS-11 — Full D colour lock (copy of the Full C lock, D-0061). Loaded after ../styles.css on the full-d pages only.
   Full D has NO purples anywhere and uses ONLY the logo colours:
   Flamingo #FF2E9A, Electric #16C9E8, Butter #FFD24A, Sunset #FF8A3D, Kernel cream #FFF1D0,
   Midnight #1E0E3E, Night #130A2A, White #FFFFFF. Fonts are unchanged.
   The spotlight (.spot) and the curtain bands (.theatre) keep their own tokens below, mapped to the logo set:
   violet->Flamingo, iris->Electric, indigo/dusk->Midnight, ink->Night, candy/rose->Flamingo, blush->cream,
   caramel->Sunset. Kernel's own art (cotton candy, caramel stick, lilac outline) lives in the SVG files and is unchanged. */

/* 1. outside: every off-palette token points at a palette colour */
:root {
  --violet: #16C9E8; --iris: #16C9E8; --indigo: #1E0E3E; --ink: #130A2A; --dusk: #1E0E3E;
  --candy: #FFD24A; --rose: #FF2E9A; --blush: #16C9E8; --caramel: #FF8A3D;
  --sky: #FFFFFF; --sunset: #FF2E9A; --miami: #FF2E9A;
}

/* 2. inside the spotlight and curtain areas: version-4 token names, logo colours only (Full D) */
.spot, .theatre {
  --violet: #FF2E9A; --iris: #16C9E8; --indigo: #1E0E3E; --ink: #130A2A; --dusk: #1E0E3E;
  --candy: #FF2E9A; --rose: #FF2E9A; --blush: #FFF1D0; --caramel: #FF8A3D;
  --sky: rgba(22,201,232,.16);
  --sunset: linear-gradient(100deg, #FF2E9A 0%, #FF8A3D 38%, #16C9E8 100%);
  --miami: linear-gradient(100deg, #FF2E9A 0%, #FF8A3D 50%, #FFD24A 100%);
}
/* 2b. Full D: rules in ../styles.css that write purple or light pink directly (that file is shared and never edited) */
.spot .cone { background:
    linear-gradient(90deg, rgba(255,46,154,.35) 0%, transparent 22%, transparent 78%, rgba(22,201,232,.35) 100%),
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,241,208,.95) 30%, rgba(255,210,74,.75) 70%, rgba(255,210,74,.35) 100%); }
.spot .pool { box-shadow: 0 2px 0 rgba(255,46,154,.25); }
.beam.b2 { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,46,154,.22) 55%, rgba(255,46,154,0) 100%); }

/* 3. outside rules that mixed colours in a gradient: flat palette fills instead */
.playhouse-btn { background: var(--plum); }
.map { background: var(--cyan); }
.map .sun { opacity: 1; }
.arch::before { background: repeating-radial-gradient(circle at 50% 60%, #FFF1D0 0 4px, transparent 4px 16px), var(--w2, var(--dusk)); }
.guide { filter: drop-shadow(0 4px 0 #1E0E3E); }
.cast-group.g2 { background: var(--cyan); }
.kid-nav a:nth-child(4) { background: var(--pink); }
.kid-nav a:nth-child(5) { background: var(--white); }
.facts li:nth-child(1) { background: var(--pink); } .facts li:nth-child(2) { background: var(--cyan); }
.facts li:nth-child(3) { background: var(--gold); } .facts li:nth-child(4) { background: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes glow { 0%,100% { box-shadow: 0 4px 0 #1E0E3E, 0 0 0 7px #FFD24A; } 50% { box-shadow: 0 4px 0 #1E0E3E, 0 0 0 7px #FFD24A, 0 0 0 13px #16C9E8; } }
}

/* 4. books.html */
.books-hero { padding: 56px 0 40px; background: var(--white); }
.books-hero > .corn.h-a { top: 18px; right: 18px; --r: 12deg; }
.jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.jump a { display: inline-flex; align-items: center; min-height: 60px; padding: 0 20px; border-radius: 22px; border: 4px solid var(--plum);
  background: var(--cream); color: var(--plum); font-weight: 900; text-decoration: none; }
.jump a:hover { background: var(--gold); }
.shelf-sec { padding: 60px 0; }
.shelf-sec:nth-of-type(even) { background: var(--white); }
.shelf-head { margin-bottom: 26px; }
.shelf-head .lead { margin: 0 0 12px; }
.chip.age { background: var(--cyan); }
.books { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.book { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border-radius: 22px;
  background: var(--cream); border: 4px solid var(--plum); }
.shelf-sec:nth-of-type(odd) .book { background: var(--white); }
.book .disc { width: 84px; height: 84px; border-radius: 50%; background: var(--white); border: 4px solid var(--plum); display: grid; place-items: center; }
.book .disc img { max-height: 60px; }
.book .code { font-size: 14px; font-weight: 900; }
.book h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.book p { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.book .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.s-af .book .disc { background: var(--gold); } .s-va .book .disc { background: var(--cyan); }
.s-cl .book .disc { background: var(--cream); } .s-dr .book .disc { background: var(--plum); }
.s-le .book .disc { background: var(--pink); } .s-lf .book .disc { background: var(--orange); }
@media (max-width: 960px) { .books { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .books { grid-template-columns: 1fr; }
  .jump a { min-height: 60px; font-size: 17px; }
}

/* owner 2026-11-07: social links in every footer */
.site-foot .follow { margin: 30px 0 6px; }
.site-foot .follow .small { color: var(--cream); text-transform: none; letter-spacing: 0; font-weight: 700; }
.site-foot .social { display: flex; flex-wrap: wrap; gap: 10px; }
.site-foot .social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 2px solid #FFD24A; color: #FFF1D0; font-weight: 800; text-decoration: none; }
.site-foot .social a:hover, .site-foot .social a:focus-visible { background: #FFD24A; color: #1E0E3E; }
/* owner 2026-11-07: colouring book shelf; outline look so it reads as "to colour" */
.colour-blob img { filter: grayscale(1) contrast(3) brightness(1.6); }

/* 5. D-0066 theatre bands (.theatre: the "Now showing" band and the Meet Kernel stage) take the T3 look:
   pink fold curtains, a cyan rim, a sunset strip across the top, a popcorn bucket and two cotton-candy puffs.
   All CSS (pseudo-elements), decorative only, pointer-events none, kept on the curtains so nothing sits on the content. */
.theatre .curtain {
  background: repeating-linear-gradient(90deg, #FF2E9A 0 13px, rgba(30,14,62,.34) 13px 17px), #FF2E9A;
  border-bottom-color: #FFD24A;
}
.theatre .curtain.l { border-right-color: #1E0E3E; }
.theatre .curtain.r { border-left-color: #1E0E3E; }
.theatre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #FF2E9A 0 34%, #FF8A3D 34% 67%, #FFD24A 67% 100%); }
.theatre::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 5px solid #16C9E8; }
.theatre .curtain::before, .theatre .curtain::after { content: ""; position: absolute; left: 50%; pointer-events: none;
  background: center / contain no-repeat; transform: translateX(-50%); }
.theatre .curtain::before { top: 22%; width: 62%; aspect-ratio: 64 / 100; }
.theatre .curtain.l::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 100'%3E%3Crect x='28' y='52' width='8' height='46' rx='4' fill='%231E0E3E'/%3E%3Crect x='30.5' y='54' width='3' height='41' rx='1.5' fill='%23FFF1D0'/%3E%3Cg fill='%231E0E3E'%3E%3Ccircle cx='19' cy='32' r='17'/%3E%3Ccircle cx='33' cy='21' r='19'/%3E%3Ccircle cx='46' cy='34' r='16'/%3E%3Ccircle cx='31' cy='45' r='15'/%3E%3C/g%3E%3Cg fill='%2316C9E8'%3E%3Ccircle cx='19' cy='32' r='13.5'/%3E%3Ccircle cx='33' cy='21' r='15.5'/%3E%3Ccircle cx='46' cy='34' r='12.5'/%3E%3Ccircle cx='31' cy='45' r='11.5'/%3E%3C/g%3E%3Cpath d='M22 30c4-7 13-9 19-3m-21 13c5 3 12 3 17-1' fill='none' stroke='%23FF2E9A' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.theatre .curtain.r::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 100'%3E%3Crect x='28' y='52' width='8' height='46' rx='4' fill='%231E0E3E'/%3E%3Crect x='30.5' y='54' width='3' height='41' rx='1.5' fill='%23FFF1D0'/%3E%3Cg fill='%231E0E3E'%3E%3Ccircle cx='19' cy='32' r='17'/%3E%3Ccircle cx='33' cy='21' r='19'/%3E%3Ccircle cx='46' cy='34' r='16'/%3E%3Ccircle cx='31' cy='45' r='15'/%3E%3C/g%3E%3Cg fill='%23FFF1D0'%3E%3Ccircle cx='19' cy='32' r='13.5'/%3E%3Ccircle cx='33' cy='21' r='15.5'/%3E%3Ccircle cx='46' cy='34' r='12.5'/%3E%3Ccircle cx='31' cy='45' r='11.5'/%3E%3C/g%3E%3Cpath d='M22 30c4-7 13-9 19-3m-21 13c5 3 12 3 17-1' fill='none' stroke='%2316C9E8' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.theatre .curtain.l::after { top: 52%; width: 70%; aspect-ratio: 70 / 88; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 88'%3E%3Cg fill='%231E0E3E'%3E%3Ccircle cx='14' cy='24' r='12'/%3E%3Ccircle cx='24' cy='16' r='13'/%3E%3Ccircle cx='36' cy='12' r='13'/%3E%3Ccircle cx='48' cy='16' r='13'/%3E%3Ccircle cx='56' cy='24' r='11'/%3E%3Ccircle cx='30' cy='26' r='11'/%3E%3Ccircle cx='42' cy='26' r='11'/%3E%3C/g%3E%3Cg fill='%23FFF1D0'%3E%3Ccircle cx='14' cy='24' r='9'/%3E%3Ccircle cx='24' cy='16' r='10'/%3E%3Ccircle cx='36' cy='12' r='10'/%3E%3Ccircle cx='48' cy='16' r='10'/%3E%3Ccircle cx='56' cy='24' r='8'/%3E%3Ccircle cx='30' cy='26' r='8'/%3E%3Ccircle cx='42' cy='26' r='8'/%3E%3C/g%3E%3Cpath d='M6 30H64L57 84H13Z' fill='%23FFFFFF' stroke='%231E0E3E' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M11 32H19L22 82H16Z M31 32H39L38.5 82H31.5Z M51 32H59L54 82H48Z' fill='%23FF2E9A'/%3E%3Cpath d='M6 30H64L57 84H13Z' fill='none' stroke='%231E0E3E' stroke-width='4' stroke-linejoin='round'/%3E%3Crect x='3' y='26' width='64' height='8' rx='3' fill='%23FFD24A' stroke='%231E0E3E' stroke-width='3'/%3E%3C/svg%3E"); }
@media (max-width: 767px) {
  .theatre::before { height: 10px; }
  .theatre::after { border-width: 4px; }
  .theatre .curtain::before { width: 80%; top: 18%; }
  .theatre .curtain.l::after { width: 84%; top: 46%; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes band-bob { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-6px); } }
  .theatre .curtain::before { animation: band-bob 5s ease-in-out infinite alternate; }
}
/* theatre-h2-pad: the band headings get room inside their white tag (longer "Kernel's Showtime" titles wrap on phones) */
.theatre .wrap > h2, .theatre .stage-copy h1 { padding: 12px 24px; }

/* WIRING-CSS (2026-11-07, wire-downloads-d.py): grown-up downloads list + real video thumbnails */
.dl { margin-top: 28px; text-align: left; }
.dl h3 { margin: 0 0 4px; }
.dl-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dl-list a, a.dl-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid #1E0E3E; background: #FFFFFF; color: #1E0E3E; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; }
.dl-list a:hover, a.dl-link:hover { background: #FFD24A; }
.dl-list a:focus-visible, a.dl-link:focus-visible { outline: 3px solid #16C9E8; outline-offset: 2px; }
.dl-k { font-size: 12px; font-weight: 800; letter-spacing: .04em; background: #1E0E3E; color: #FFFFFF; border-radius: 999px; padding: 2px 8px; }
.dl-note, .dl-read { margin-top: 12px; }
.on-dark .dl-list a, .on-dark a.dl-link { border-color: #FFFFFF; }
.poster img.thumb { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }
.t3-t-pic img.thumb { object-fit: cover; }
.art img.art-img { width: 100%; height: 100%; object-fit: contain; }

/* ---- family nav ---- */

.fam-nav { background: #130A2A; color: #FFF1D0; padding: 16px 20px 20px; text-align: center; font-family: inherit; }
.fam-nav .fam-t { display: block; margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #FFF1D0; }
.fam-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fam-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid #FFD24A;
  color: #FFF1D0; background: #130A2A; font-size: 16px; font-weight: 800; text-decoration: none; }
.fam-nav a:hover { background: #FFD24A; color: #1E0E3E; }
.fam-nav a:focus-visible { outline: 3px solid #16C9E8; outline-offset: 3px; }
.fam-nav a[aria-current] { background: #FFD24A; color: #1E0E3E; }