/* Kids corner hero v3: Nicholas offers a fish, Peter says no, a gold coin appears, both smile. A framed picture card (same 16px radius + hairline border as the book cards)
   spanning exactly two card columns of the grid below, with the header text in the third column. Space reserved by aspect-ratio (no layout shift); first frame shown at once; plays once and rests on the last frame.
   Reduced motion / blocked autoplay -> the final still. No controls. Index page only. */
.kbh{position:relative;isolation:isolate;margin-top:-71px;padding:calc(71px + clamp(22px,3.4vw,46px)) 0 clamp(10px,2.4vw,30px);min-height:0!important;display:block;overflow:visible}
.kbh .phbg{display:none}
.kbh-stage{position:relative;max-width:calc(62rem + 44px);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:center}
.kbh-stage::before{content:"";position:absolute;z-index:-1;left:4%;top:-8%;width:62%;height:116%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 13%,transparent),transparent);filter:blur(10px)}
.kbh-media{grid-column:1/span 2;position:relative;margin:0;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--gb);background:#bcd6ea;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.85),0 10px 22px -16px rgba(0,0,0,.5);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.kbh-media picture,.kbh-media img,.kbh-media video{position:absolute;inset:0;width:100%;height:100%;display:block}
.kbh-media img,.kbh-media video{object-fit:cover;object-position:50% 50%;border:0;background:transparent}
.kbh-media video{z-index:1}
.kbh-media .kbh-end{z-index:2;opacity:0;transition:opacity .4s ease}
.kbh.kbh-still-on .kbh-end{opacity:1}
.kbh.kbh-still-on .kbh-media video{display:none}
.kbh .kbh-in{position:relative;inset:auto;width:auto;margin:0;padding:0 0 0 clamp(6px,1.6vw,22px)!important;text-align:left;z-index:1}
.kbh .kbh-in::after{content:none!important;display:none!important}
.kbh .kbh-in .gm{justify-content:flex-start}
.kbh-in h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.3rem,4.3vw,3.7rem);line-height:1.04;letter-spacing:-.02em;margin:14px 0 14px;color:var(--ink);text-shadow:none!important}
.kbh-in .kbh-rule{display:block;width:72px;height:1px;margin:0 0 16px;background:linear-gradient(90deg,var(--gold),transparent)}
.kbh-in .sub{font-family:var(--disp);font-style:italic;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;color:color-mix(in srgb,var(--ink) 80%,transparent);margin:0;max-width:30em;text-shadow:none}
.kbh .kbh-in .gth{margin-top:12px}
@keyframes kbh-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kbh-in .gm{animation:kbh-rise .8s ease .1s both}
.kbh-in h1{animation:kbh-rise .9s cubic-bezier(.2,.7,.2,1) .2s both}
.kbh-in .kbh-rule{animation:kbh-rise .8s ease .35s both}
.kbh-in .sub{animation:kbh-rise .9s ease .45s both}
.kbh-in .gth{animation:kbh-rise .9s ease .55s both}
/* light theme: warm soft shadow, no dark halo */
html[data-theme=light] .kbh-media{box-shadow:0 26px 50px -30px rgba(90,60,20,.45),0 8px 18px -14px rgba(90,60,20,.3)}
html[data-theme=light] .kbh-stage::before{background:radial-gradient(closest-side,rgba(217,171,74,.16),transparent)}
html[data-theme=light] .kbh-in h1{color:#2a1a12}
html[data-theme=light] .kbh-in .sub{color:#4a3826}
/* dark theme: the bright picture is toned down a touch so it sits calmly on the dark page */
html:not([data-theme=light]) .kbh-media img,html:not([data-theme=light]) .kbh-media video{filter:brightness(.95) saturate(.97)}
/* tablet (the cards drop to 2 columns): picture on top, text below */
@media (max-width:987px){
  .kbh-stage{grid-template-columns:1fr;gap:22px}
  .kbh-media{grid-column:1}
  .kbh-stage::before{left:0;width:100%;height:80%}
  .kbh .kbh-in{max-width:40rem;padding-left:0!important}
}
/* phone: 4:3 crop centred on the two friends (own 4:3 file), page gutters as the cards */
@media (max-width:720px){
  .kbh{padding-top:calc(71px + 14px);padding-bottom:4px}
  .kbh-stage{padding:0 14px;gap:16px}
  .kbh-media{aspect-ratio:4/3;border-radius:14px}
  .kbh-in h1{font-size:clamp(2.1rem,9.5vw,2.7rem);margin:10px 0 10px}
  .kbh-in .sub{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .kbh-media video{display:none}
  .kbh-media .kbh-end{opacity:1;transition:none}
  .kbh-in h1,.kbh-in .kbh-rule,.kbh-in .sub,.kbh-in .gth,.kbh-in .gm{animation:none}
}
.kbh-media,.kbh-media img,.kbh-media video{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.kbh-media video,.kbh-media img{pointer-events:none}
.kbh-media video::-webkit-media-controls,.kbh-media video::-webkit-media-controls-panel,.kbh-media video::-webkit-media-controls-overlay-play-button,
.kbh-media video::-webkit-media-controls-start-playback-button,.kbh-media video::-webkit-media-controls-play-button,
.kbh-media video::-webkit-media-controls-enclosure,.kbh-media video::-internal-media-controls-overlay-cast-button{display:none!important;-webkit-appearance:none;appearance:none;opacity:0!important}