/* Science Fenns. The look that ties every K to 5 page together.
Grandpa Fenn is the host. Poppy is the helper. Oct 18 2026. */
:root{--bz-teal:#1f6f7a;--bz-teal2:#2a8a93;--bz-gold:#f0b429;--bz-paper:#fff6e4;--bz-ink:#10202e;--bz-ring:rgba(240,180,41,.9)}
/* a character speaking. */
.bz{display:flex;align-items:flex-start;gap:16px;max-width:720px;margin:18px 0 26px}
.bz .bz-f{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--bz-ring),0 10px 26px rgba(0,0,0,.25);background:#fff}
.bz .bz-b{position:relative;background:var(--bz-paper);color:var(--bz-ink);border:3px solid var(--bz-teal);border-radius:22px;padding:14px 20px 12px;font-family:Lora,Georgia,serif;box-shadow:0 10px 30px rgba(16,32,46,.12)}
.bz .bz-b:before{content:"";position:absolute;left:-14px;top:26px;border:8px solid transparent;border-right-color:var(--bz-teal);border-left:0}
.bz .bz-b:after{content:"";position:absolute;left:-9px;top:28px;border:6px solid transparent;border-right-color:var(--bz-paper);border-left:0}
.bz .bz-b b{display:block;font:700 .68rem/1 Poppins,"Segoe UI",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--bz-teal);margin:0 0 6px}
.bz .bz-b p{margin:0;font-size:1.08rem;line-height:1.5}
.bz .bz-b p+p{margin-top:8px}
.bz.zip{flex-direction:row-reverse;margin-left:auto}
.bz.zip .bz-b{border-color:var(--bz-gold);background:#fffdf5}
.bz.zip .bz-b b{color:#9a6a00}
.bz.zip .bz-b:before{left:auto;right:-14px;border:8px solid transparent;border-left-color:var(--bz-gold);border-right:0}
.bz.zip .bz-b:after{left:auto;right:-9px;border:6px solid transparent;border-left-color:#fffdf5;border-right:0}
.bz.dark .bz-b{background:rgba(5,13,25,.78);color:#fff;border-color:var(--bz-gold);backdrop-filter:blur(6px)}
.bz.dark .bz-b b{color:var(--bz-gold)}
.bz.dark .bz-b:after{border-right-color:rgba(5,13,25,.9)}
.bz.dark.zip .bz-b:after{border-left-color:rgba(5,13,25,.9)}
.bz.sm .bz-f{width:56px;height:56px}
.bz.sm .bz-b{padding:10px 16px 9px}
.bz.sm .bz-b p{font-size:.98rem}
/* Grandpa Fenn and Poppy standing in a hero picture. Added by bramble.js to any .khero or [data-bz-hero] */
.bz-stand,.khero>img.bz-stand,[data-bz-hero]>img.bz-stand{position:absolute;inset:auto;left:auto;top:auto;object-fit:contain;right:2%;bottom:0;z-index:3;height:min(86%,520px);width:auto;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.bz-fly,.khero>img.bz-fly,[data-bz-hero]>img.bz-fly{position:absolute;inset:auto;left:auto;bottom:auto;object-fit:contain;z-index:4;width:clamp(90px,11vw,150px);height:auto;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4));animation:bz-hover 5s ease-in-out infinite}
@keyframes bz-hover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.bz-fly{animation:none}}
@media (max-width:820px){.bz-stand{height:min(58%,300px);right:-4%;opacity:.95}.bz-fly{width:84px}}
@media (max-width:560px){.bz-stand{display:none}}
/* small Zip that tags a heading. Title
*/
.bz-h{position:relative;padding-left:0}
.bz-h:after{content:"";display:inline-block;width:1.4em;height:1.4em;margin-left:.35em;vertical-align:-.3em;background:url(/kids-lab/characters/zip-face.webp) center/cover no-repeat;border-radius:50%;box-shadow:0 0 0 2px var(--bz-gold)}
/* Science Fenns badge, bottom right. Says whose world this is. */
.bz-badge{position:fixed;right:12px;bottom:12px;z-index:2147482000;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(5,13,25,.84);border:1px solid var(--bz-ring);color:#fff;font:600 .72rem/1.15 Poppins,"Segoe UI",system-ui,sans-serif;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.bz-badge img{width:28px;height:28px;border-radius:50%}
.bz-badge small{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bz-gold);font-weight:700}
.bz-badge:hover{border-color:#fff}
@media (max-width:520px){.bz-badge{right:8px;bottom:8px;padding:5px 10px 5px 5px}.bz-badge span{display:none}}
@media print{.bz-badge,.bz-stand,.bz-fly{display:none}}
/* ============================================================
Science Fenns frame. Oct 19 2026.
Every K to 5 page gets , this header and this footer,
written by tools/bramble-chrome.py. No high school menu in here.
Palette: evening in the tower. Indigo sky, lantern gold, parchment, robe teal.
============================================================ */
html.bz-world,html.bz-world[data-theme]{
--bz-night:#141a3a;--bz-night2:#1d2450;--bz-wood:#5a3a1e;--bz-wood2:#8a5a2b;--bz-brass:#d9a441;
--bg:#f7ecd6;--bg2:#efe0c2;--card:#fff8e8;--ink:#2a1d12;--mute:#6f5a44;--line:#dcc9a3;
--gold:#b8791a;--goldbg:#f0b429;--accent:#1f6f7a;--nav:#141a3a;--navink:#fff;--sh:0 14px 34px rgba(60,35,10,.14);
--chem:#1f6f7a;--phys:#1f6f7a;--ipc:#1f6f7a;--rob:#1f6f7a;--k5:#1f6f7a
}
html.bz-world body{background:var(--bg);color:var(--ink);font-family:Lora,Georgia,serif}
html.bz-world .skip{background:var(--goldbg);color:#2a1a00}
/* header */
.bz-top{position:relative;z-index:30;background:linear-gradient(180deg,#1b2250,#141a3a);color:#fff;border-bottom:4px solid var(--bz-brass);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.bz-top:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 12% 50%,rgba(240,180,41,.22),transparent 60%);pointer-events:none}
.bz-top .in{position:relative;max-width:1280px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bz-top .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;margin-right:auto}
.bz-top .brand img{width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 3px var(--bz-brass),0 6px 18px rgba(0,0,0,.4);background:#fff}
.bz-top .brand b{display:block;font:600 1.45rem/1 Lora,Georgia,serif;letter-spacing:-.01em}
.bz-top .brand small{display:block;margin-top:5px;font:700 .6rem/1 Poppins,"Segoe UI",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bz-brass)}
.bz-top nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.bz-top nav a{color:#fff;text-decoration:none;font:700 .8rem/1 Poppins,"Segoe UI",sans-serif;letter-spacing:.06em;padding:11px 16px;border-radius:999px;border:1.5px solid transparent;transition:border-color .2s,background .2s}
.bz-top nav a:hover,.bz-top nav a[aria-current]{border-color:var(--bz-brass);background:rgba(240,180,41,.12)}
.bz-top nav a.go{background:var(--goldbg);color:#2a1a00;border-color:var(--goldbg)}
.bz-top nav a.go:hover{filter:brightness(1.06)}
.bz-top .zip{width:46px;height:auto;margin-left:6px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));animation:bz-hover 5s ease-in-out infinite}
@media (max-width:760px){.bz-top .in{padding:10px 14px;gap:10px}.bz-top .brand img{width:44px;height:44px}.bz-top .brand b{font-size:1.2rem}.bz-top nav{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.bz-top nav::-webkit-scrollbar{display:none}.bz-top nav a{padding:9px 12px;font-size:.74rem;white-space:nowrap}.bz-top .zip{display:none}}
/* footer */
.bz-foot{position:relative;margin-top:60px;background:linear-gradient(180deg,#141a3a,#0d1128);color:#e9e4d6;border-top:4px solid var(--bz-brass);overflow:hidden}
.bz-foot:before{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 85% 20%,rgba(240,180,41,.18),transparent 60%),radial-gradient(2px 2px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 60% 70%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 40% 15%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 75% 55%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 90% 80%,#fff 50%,transparent 51%);opacity:.9;pointer-events:none}
.bz-foot .in{position:relative;max-width:1280px;margin:0 auto;padding:46px 22px 30px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
.bz-foot .say{display:flex;gap:16px;align-items:flex-start}
.bz-foot .say img{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 3px var(--bz-brass);flex:none;background:#fff}
.bz-foot .say p{margin:0;font:italic 500 1.15rem/1.5 Lora,Georgia,serif;color:#fff}
.bz-foot .say small{display:block;margin-top:8px;font:700 .62rem/1 Poppins,"Segoe UI",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--bz-brass)}
.bz-foot h6{margin:0 0 12px;font:700 .64rem/1 Poppins,"Segoe UI",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bz-brass)}
.bz-foot .col a{display:block;color:#e9e4d6;text-decoration:none;font:500 .98rem/1.4 Lora,Georgia,serif;padding:5px 0}
.bz-foot .col a:hover{color:#fff;text-decoration:underline}
.bz-foot .cp{position:relative;border-top:1px solid rgba(255,255,255,.14);max-width:1280px;margin:0 auto;padding:16px 22px 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 .74rem/1.5 Poppins,"Segoe UI",sans-serif;color:#b9b3a4}
.bz-foot .cp a{color:#fff;text-decoration:none}
@media (max-width:820px){.bz-foot .in{grid-template-columns:1fr;gap:26px;padding:36px 16px 20px}.bz-foot .cp{padding:14px 16px 18px}}
/* the dark site bits that still show on K-5 pages pick up the tower palette */
html.bz-world .kl .khero,html.bz-world .khero{background:var(--bz-night)}
html.bz-world .kl .b{background:var(--goldbg);color:#2a1a00}
html.bz-world .kl .eyebrow,html.bz-world .eyebrow{color:var(--accent)}
html.bz-world .khero .eyebrow,html.bz-world .kl .khero .eyebrow,html.bz-world .hero .eyebrow{color:#ffd77a}
.bz-top .brand b{text-transform:none;letter-spacing:-.01em}
html.bz-world .bz-badge{display:none}
/* Hear Grandpa Fenn: the play button inside a speech bubble */
.bz-play{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 14px 7px 9px;border-radius:999px;border:2px solid var(--bz-teal);background:#fff;color:var(--bz-teal);font:700 .74rem/1 Poppins,"Segoe UI",sans-serif;letter-spacing:.06em;cursor:pointer}
.bz-play i{width:22px;height:22px;border-radius:50%;background:var(--bz-teal);position:relative}
.bz-play i:after{content:"";position:absolute;left:8px;top:6px;border-left:9px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.bz-play[aria-pressed="true"] i:after{border:0;left:7px;top:6px;width:3px;height:10px;background:#fff;box-shadow:5px 0 0 #fff}
.bz.zip .bz-play{border-color:#9a6a00;color:#9a6a00}.bz.zip .bz-play i{background:#9a6a00}
.bz-play:hover{background:var(--bz-paper)}
@media (max-width:560px){.khero .bz-fly,[data-bz-hero]>img.bz-fly{top:10px!important;right:8px!important;width:72px}}
.tile.jy{padding:16px;justify-content:center;min-height:120px}.tile.jy .jb{display:block;font-style:normal;font-size:.8rem;margin-top:6px;color:#8a5b00}
/* v3: journey tiles with pictures; stronger hero scrim on phones */
.tile.jy{overflow:hidden;padding:0;justify-content:flex-start}
.tile.jy>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:2px solid rgba(0,0,0,.08)}
.tile.jy>b,.tile.jy>small,.tile.jy>.jb{margin-left:16px;margin-right:16px}
.tile.jy>b{margin-top:12px}.tile.jy>small{margin-top:4px}.tile.jy>.jb:empty{display:none}.tile.jy>.jb{margin-bottom:12px}.tile.jy>small:last-child{margin-bottom:14px}
@media(max-width:600px){.kl .khero:after{background:linear-gradient(0deg,rgba(8,20,36,.94),rgba(8,20,36,.62))}}
/* sister-site pills, matching the Science Fenns menu */
.bz-top nav a.sib{display:inline-flex;align-items:center;margin-left:8px;padding:9px 14px;font-size:.78rem;letter-spacing:.03em;border:1px solid rgba(240,180,41,.65);background:rgba(240,180,41,.10);color:#fff}
.bz-top nav a.sib:first-of-type{margin-left:14px}
.bz-top nav a.sib-mbs{border-color:rgba(240,180,41,.65);background:rgba(240,180,41,.10)}
.bz-top nav a.sib-bl{border-color:rgba(255,140,175,.6);background:linear-gradient(135deg,rgba(255,126,179,.16),rgba(255,184,107,.14))}
.bz-top nav a.sib:hover{filter:brightness(1.12);border-color:#fff}
@media (max-width:760px){.bz-top nav a.sib{margin-left:6px;padding:8px 11px;font-size:.72rem}}
/* menu: same shape as the Science Fenns menu. Items by the brand, sister pills and search on the right. */
.bz-top .brand{margin-right:14px}
.bz-top .in{flex-wrap:nowrap}
.bz-top nav{flex:1 1 auto;flex-wrap:nowrap;gap:0;align-items:center}
.bz-top nav a.bz-item{display:flex;align-items:center;gap:7px;height:74px;margin:-10px 0;padding:0 12px;border:0;border-bottom:4px solid transparent;border-radius:0;background:none;font:700 .82rem/1 Poppins,"Segoe UI",sans-serif;letter-spacing:.03em;white-space:nowrap}
.bz-top nav a.bz-item .bz-dot{width:9px;height:9px;border-radius:50%;background:var(--dot,#f0b429);flex:0 0 auto}
.bz-top nav a.bz-item:hover,.bz-top nav a.bz-item[aria-current]{border-color:transparent;border-bottom-color:var(--dot,#f0b429);background:rgba(255,255,255,.06)}
.bz-top nav a.sib:first-of-type{margin-left:0}
.bz-top nav a.bz-item+a.sib,.bz-top nav a.sib-mbs{margin-left:auto}
.bz-top nav a.sib{margin-left:8px;white-space:nowrap}
.bz-top nav a.sib-mbs{margin-left:auto}
.bz-top .bz-srch{position:relative;display:flex;align-items:center;margin-left:2px;border:1px solid rgba(255,255,255,.3);border-radius:999px;flex:0 0 auto}
.bz-top .bz-srch:focus-within{border-color:var(--bz-brass)}
.bz-top .bz-srch input{width:110px;background:transparent;border:0;outline:0;color:#fff;font:500 .78rem/1 Poppins,"Segoe UI",sans-serif;padding:11px 16px;letter-spacing:normal;text-transform:none}
.bz-top .bz-srch input::placeholder{color:#cfe3ee}
.bz-top .bz-sres{display:none;position:absolute;right:0;top:calc(100% + 8px);width:290px;max-width:86vw;background:#141a3a;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.45);z-index:60}
.bz-top .bz-sres.on{display:block}
.bz-top .bz-sres a,.bz-top .bz-sres .bz-none{display:block;padding:10px 12px;border-radius:9px;color:#fff;text-decoration:none;font:600 .86rem/1.2 Poppins,"Segoe UI",sans-serif}
.bz-top .bz-sres a:hover,.bz-top .bz-sres a:focus{background:rgba(240,180,41,.18)}
@media (max-width:1100px){.bz-top .in{flex-wrap:wrap}.bz-top nav{flex:1 1 100%;order:3;overflow-x:auto;scrollbar-width:none}.bz-top nav a.bz-item{height:46px;margin:0}.bz-top .brand{margin-right:auto}.bz-top .bz-srch{order:2}}
@media (max-width:760px){.bz-top .bz-srch input{width:84px;padding:9px 12px}.bz-top nav a.bz-item{padding:0 9px;font-size:.76rem}}