/* Tosbi's Fact Cards: picture cards that open into one fact and one small thing to try. */
.kf{position:relative}
.kf .kf-back{margin-bottom:12px}
.kf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Hero ---------- */
.kf-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(92px,22vw,230px);grid-template-areas:"head art" "lede art" "count art";column-gap:clamp(14px,3vw,36px);align-items:center;margin:0 0 26px;padding:clamp(18px,3vw,30px);border-radius:28px;background:linear-gradient(135deg,#123b5c,#17275f 62%,#221b57);border:2px solid #2d4a86;box-shadow:var(--k-shadow)}
.kf-head{grid-area:head}
.kp-main .kf-hero h1{margin:.1em 0 .3em;color:var(--k-ink);font-size:clamp(2rem,5vw,3.2rem)}
.kp-main .kf-lede{grid-area:lede;font-size:1.15rem;color:var(--k-ink-2);margin:0 0 6px;max-width:36em}
.kf-hero-art{grid-area:art;align-self:end;justify-self:center;width:100%}
.kf-hero-art img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(2,5,26,.45))}
.kf-count{grid-area:count;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px}
.kp-main .kf-count p{margin:0;color:var(--k-ink);font-weight:700}
.kf-count strong{color:var(--k-gold);font-size:1.25rem}
.kf-bar{flex:1 1 140px;max-width:260px;height:12px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.kf-bar>span{display:block;height:100%;width:0;border-radius:inherit;background:var(--k-gold);transition:width .3s}

/* ---------- Topic filter ---------- */
.kf-topics{display:flex;flex-wrap:wrap;gap:8px}
.kf-topic-btn{min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--k-line);background:var(--k-surface);color:var(--k-ink-2);font:800 .95rem/1 "Manrope",Inter,sans-serif}
.kf-topic-btn:hover{background:var(--k-surface-2);border-color:#3b4a9a}
.kf-topic-btn[aria-pressed="true"]{background:var(--k-gold);border-color:var(--k-gold);color:#1b1438}
.kf-topic-btn:focus-visible{outline:3px solid var(--k-gold);outline-offset:2px}

/* ---------- Cards ---------- */
.kf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media(min-width:600px){.kf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:900px){.kf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1060px){.kf-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.kf-card{--kf-a:var(--k-gold);position:relative;overflow:hidden;scroll-margin-top:136px;border-radius:22px;background:var(--k-surface);border:2px solid var(--k-line);transition:border-color .15s,transform .15s}
.kf-t-animals{--kf-a:#f6c96c}.kf-t-space{--kf-a:#a594ff}.kf-t-nature{--kf-a:#62e3ab}.kf-t-body{--kf-a:#ff9fd3}
.kf-card:hover{border-color:var(--kf-a)}
.kf-card.is-seen{border-color:#44559f}
.kf-card[open]{grid-column:1/-1;border-color:var(--kf-a)}
.kf-sum{display:block;position:relative;padding:8px 8px 12px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kf-sum::-webkit-details-marker{display:none}
.kf-sum:focus-visible{outline:4px solid var(--k-gold);outline-offset:-4px;border-radius:20px}
.kf-pic{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#0d1333}
.kf-pic img{display:block;width:100%;height:100%;object-fit:cover}
.kf-seen{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--k-gold);color:#1b1438;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.kf-seen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.kf-topic{display:block;margin:10px 4px 0;font-size:.78rem;font-weight:800;letter-spacing:.03em;color:var(--kf-a)}
.kf-title{display:block;min-height:2.5em;margin:2px 40px 0 4px;font:800 1.05rem/1.25 "Manrope",Inter,sans-serif;color:var(--k-ink)}
.kf-plus{position:absolute;right:14px;bottom:14px;width:30px;height:30px;border-radius:50%;background:var(--kf-a)}
.kf-plus::before,.kf-plus::after{content:"";position:absolute;left:50%;top:50%;border-radius:2px;background:#1b1438;transform:translate(-50%,-50%)}
.kf-plus::before{width:14px;height:3px}
.kf-plus::after{width:3px;height:14px}
.kf-card[open] .kf-plus::after{display:none}

/* An open card spans the whole row: picture on top on phones, picture beside the words on wider screens. */
.kf-card[open] .kf-pic{width:min(100%,300px);margin:0 auto}
.kf-card[open] .kf-topic,.kf-card[open] .kf-title{margin-left:0}
.kf-card[open] .kf-title{min-height:0;font-size:1.5rem;margin-top:4px}
.kf-card[open] .kf-seen{display:none}
.kf-card[open] .kf-sum{padding:14px 14px 0}
.kf-card[open] .kf-plus{top:20px;right:20px;bottom:auto}
.kf-body{padding:8px 14px 18px}
.kf .kf-fact{margin:0 0 14px;max-width:none;font-size:1.18rem;line-height:1.6;font-weight:650;color:var(--k-ink)}
.kf .kf-try{margin:0 0 16px;max-width:none;padding:12px 16px;border-radius:16px;background:rgba(246,201,108,.1);border:1px solid #6b5a33;color:#f6e3b8;font-size:1.05rem}
.kf .kf-try strong{display:block;margin-bottom:2px;color:var(--k-gold);font-size:.85rem;letter-spacing:.04em}
.kf-listen{display:inline-flex;align-items:center;gap:10px;min-height:52px}
.kf-listen svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:700px){
 .kf-card{scroll-margin-top:96px}
 .kf-card[open] .kf-sum{padding-bottom:0}
 .kf-card[open] .kf-pic{float:left;width:min(34%,300px);margin:0 20px 8px 0}
 .kf-card[open] .kf-body{padding-top:0}
 .kf-card[open] .kf-fact,.kf-card[open] .kf-try,.kf-card[open] .kf-listen{display:flow-root}
 .kf-card[open] .kf-listen{display:inline-flex}
}

/* ---------- For grown-ups ---------- */
.kf-grownups{margin-top:30px;padding:22px 24px;border-radius:24px;background:rgba(7,11,33,.55);border:1px dashed #3a4588}
.kp-main .kf-grownups h2{font-size:1.2rem;margin:0 0 8px}
.kp-main .kf-grownups p{color:var(--k-muted);margin:0 0 10px}

@media(max-width:600px){
 .kf-hero{grid-template-areas:"head art" "lede lede" "count count";padding:18px 16px;border-radius:22px}
 .kf-hero-art{align-self:center}
 .kf-hero-art img{max-height:150px}
 .kf-body{padding:6px 14px 16px}
}
@media(max-width:390px){
 .kf-title{font-size:.98rem}
 .kf-topic-btn{padding:0 14px}
}
@media(prefers-reduced-motion:reduce){
 .kf-card,.kf-bar>span{transition:none}
}

/* ---------- Print: every card open, two columns, no card split across pages ---------- */
@media print{
 .kp-header,.kids-skip,.kp-footer,.kf-back,.kf-hero-art,.kf-count,.kf-topics,.kf-listen,.kf-plus,.kf-seen,.kf-grownups{display:none!important}
 .kf-card::details-content{content-visibility:visible;display:block;block-size:auto}
 .kf-hero{display:block;padding:0 0 4mm;margin:0 0 4mm;border:0;border-bottom:1px solid #777;border-radius:0;background:none;box-shadow:none}
 .kp-main .kf-hero h1{font-size:20pt;margin:0}
 .kp-main .kf-lede{font-size:11pt;margin:2mm 0 0}
 .kf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5mm;margin:0}
 .kf-card,.kf-card[open]{grid-column:auto;break-inside:avoid;page-break-inside:avoid;border:1px solid #777;border-radius:3mm;background:#fff}
 .kf-sum,.kf-card[open] .kf-sum{padding:3mm 3mm 0}
 .kf-card .kf-pic,.kf-card[open] .kf-pic{float:left;width:34mm;margin:0 3mm 2mm 0;border-radius:2mm}
 .kf-topic{margin:0;font-size:8pt}
 .kf-title,.kf-card[open] .kf-title{margin:0;font-size:12pt}
 .kf-body{padding:1mm 3mm 3mm}
 .kf .kf-fact{font-size:10pt;margin:0 0 2mm;display:flow-root}
 .kf .kf-try{clear:both;font-size:9pt;padding:1.5mm 2mm;margin:0;background:none;border:1px dashed #777}
 .kf .kf-try strong{display:inline;font-size:9pt;margin-right:1mm}
 .kf-card[hidden]{display:none!important}
 @page{size:A4 portrait;margin:12mm}
}

/* Print-only band (Tosbi's discovery header) above the cards; kids-print-band.js loads the picture just before printing. */
.k-print-band{display:none}@media print{.k-print-band{display:block;margin:0 0 4mm;break-after:avoid;page-break-after:avoid}.k-print-band img{display:block;width:100%;height:auto}}