/* eHudHud home page (demo "new-home"): hero with the animal buttons, tonight's story, sections built from the catalog,
   the hoopoe speaking between them. Day = warm storybook cream; night (evening, or the ☾ button) = a soft night sky.
   Loaded after home.css; only the library screen (#lib) is styled here. */
.lib{--bg:#f9f4e7;--card:#fffdf6;--ink:#44231d;--ink-2:#8a6a58;--line:#eadfc4;--how:#fff4dc;--pill:#f8e6b9;
  background:var(--bg);color:var(--ink);transition:background .6s ease,color .6s ease}
body.hh-night .lib{--bg:#151b3a;--card:#1f2750;--ink:#f6ead2;--ink-2:#b9b4d6;--line:#2e3768;--how:#1b2246;--pill:#2a3366;
  --cocoa:#f6ead2;--brown:#f6ead2;--brown-dim:#b9b4d6;color-scheme:dark}
body.hh-night .lib .nav{background:rgb(21 27 58 / .92);border-block-end-color:var(--line)}
body.hh-night .lib .nav nav a:hover{background:#26305e}
body.hh-night .lib .nav nav a.on{background:#2c3670;color:#ffb27a}
body.hh-night .lib .logo-ar{color:#ff8a6b}

/* night / day button */
.lib .hh-mode{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:1.25rem;cursor:pointer;line-height:1}
.lib .hh-mode .moon{display:none}
body.hh-night .lib .hh-mode .sun{display:none}body.hh-night .lib .hh-mode .moon{display:block}

/* hero: our own picture, the hoopoe, the animal buttons */
.lib .hh-hero{position:relative;overflow:hidden;padding-block:40px 36px;text-align:center;isolation:isolate}
.lib .hh-scene{position:absolute;inset:0;z-index:-1}
.lib .hh-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.lib .hh-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(rgb(249 244 231 / .55),rgb(249 244 231 / .82) 60%,var(--bg));transition:background .6s}
body.hh-night .lib .hh-scene img{filter:brightness(.45) saturate(.7) hue-rotate(195deg)}
body.hh-night .lib .hh-scene::after{background:linear-gradient(rgb(21 27 58 / .35),rgb(21 27 58 / .7) 60%,var(--bg))}
.lib .hh-moon,.lib .hh-stars{position:absolute;opacity:0;transition:opacity .8s}
.lib .hh-moon{top:28px;inset-inline-start:7%;width:64px;height:64px;border-radius:50%;box-shadow:-14px 10px 0 0 #ffe3a3;z-index:1}
.lib .hh-stars{inset:0;z-index:1;background-image:radial-gradient(2px 2px at 12% 22%,#fff,transparent),radial-gradient(2px 2px at 28% 12%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 44% 30%,#fff,transparent),radial-gradient(2px 2px at 63% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 26%,#fff,transparent),
  radial-gradient(2px 2px at 90% 10%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 6% 44%,#fff,transparent)}
body.hh-night .lib .hh-moon,body.hh-night .lib .hh-stars{opacity:1}
.lib .hh-hero-in{position:relative;z-index:2}
.lib .hh-bird{width:112px;height:auto;display:block;margin:0 auto 4px;animation:hh-bob 4s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgb(68 35 29 / .2))}
@keyframes hh-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.lib .hh-hero h1{font-family:var(--f-round);font-weight:800;color:var(--ink);font-size:clamp(2.2rem,7vw,4.2rem);line-height:1.2;margin:6px 0 10px}
.lib .hh-hero h1 em{font-style:normal;color:var(--coral)}
body.hh-night .lib .hh-hero h1 em{color:#ffb27a}
.lib .hh-hero .lead{max-width:34rem;margin:0 auto;color:var(--ink-2);font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.9}
.lib .hh-ask{margin:28px 0 14px;font-family:var(--f-round);font-weight:800;font-size:1.35rem;color:var(--ink)}
.lib .hh-animals{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 12px;max-width:980px;margin-inline:auto}
.lib .hh-animal{all:unset;cursor:pointer;display:grid;justify-items:center;gap:6px;width:96px;-webkit-tap-highlight-color:transparent}
.lib .hh-animal img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;background:#fff;
  box-shadow:0 8px 16px -8px rgb(68 35 29 / .45),0 0 0 3px var(--saffron);transition:transform .2s ease,box-shadow .2s}
.lib .hh-animal span{font-family:var(--f-round);font-weight:700;font-size:1.05rem;color:var(--ink)}
.lib .hh-animal:hover img,.lib .hh-animal:focus-visible img{transform:translateY(-4px) scale(1.06)}
.lib .hh-animal[aria-pressed="true"] img{box-shadow:0 8px 16px -8px rgb(68 35 29 / .45),0 0 0 5px var(--coral);transform:scale(1.08)}
.lib .hh-animal:focus-visible{outline:none}.lib .hh-animal:focus-visible span{text-decoration:underline}
body.hh-night .lib .hh-animal img{border-color:#2a3366}

/* sections */
.lib .hh-pick,.lib .hh-tonight{padding-block:20px 8px}
.lib .hh-shelf{padding-block:12px 40px}
.lib .hh-sec{padding-block:18px 26px;scroll-margin-top:84px}
.lib .hh-sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-block-end:18px;border-block-end:3px dotted var(--line);padding-block-end:10px}
.lib .hh-sec-h h2{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--f-round);font-weight:800;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--ink);line-height:1.3}
.lib .hh-sec-h h2 img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:3px solid var(--saffron)}
.lib .hh-sec-h p{margin:0;color:var(--ink-2);font-weight:600}
.lib .hh-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--saffron);color:#fff;font-size:1.3rem;flex:none}
.lib .hh-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lib #sec-read .hh-ico{background:var(--sky)}
.lib .hh-x{font:inherit;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
.lib .hh-count{text-align:center;color:var(--ink-2);font-weight:600;margin:24px 0 0}

/* the hoopoe speaking between sections */
.lib .hh-say{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 8px;max-width:640px}
.lib .hh-say img{width:64px;height:auto;flex:none;animation:hh-bob 5s ease-in-out infinite}
.lib .hh-say p{position:relative;margin:0;background:var(--card);border:2px solid var(--saffron);border-radius:22px;padding:10px 20px;
  font-family:var(--f-round);font-weight:700;font-size:1.15rem;color:var(--ink);box-shadow:0 6px 0 rgb(245 165 36 / .25)}
.lib .hh-say p::before{content:"";position:absolute;inset-inline-start:-10px;top:50%;width:16px;height:16px;background:var(--card);
  border-inline-start:2px solid var(--saffron);border-block-end:2px solid var(--saffron);transform:translateY(-50%) rotate(45deg)}

/* story cards */
.lib .hh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
@media (min-width:760px){.lib .hh-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lib .hh-card{display:grid;align-content:start;gap:10px;text-align:center;background:var(--card);border-radius:22px;padding:10px 10px 14px;
  border:0;box-shadow:0 10px 22px -14px rgb(68 35 29 / .5);transition:transform .2s ease}
.lib .hh-card:hover,.lib .hh-card:focus-visible{transform:translateY(-5px) rotate(-.6deg)}
.lib .hh-card .cv{margin:0;border-radius:16px;border:0;box-shadow:none;animation:none;transform:none!important}
.lib .hh-card .go{bottom:6cqw}
.lib .hh-kind{position:absolute;top:6cqw;inset-inline-start:6cqw;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;color:var(--coral);box-shadow:0 3px 8px -2px rgb(0 0 0 / .3)}
.lib .hh-kind.read{color:#2a8bc2}
.lib .hh-kind svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lib .hh-card .lb{padding:0;gap:4px;justify-items:center}
.lib .hh-card .bt{color:var(--ink);font-family:var(--f-round);font-weight:700;font-size:1.15rem;line-height:1.4}
.lib .hh-meta{font-size:.82rem;color:var(--ink-2)}
.lib .hh-lesson{font-size:.78rem;font-weight:700;color:var(--ink);background:var(--pill);border-radius:999px;padding:2px 12px}
.lib .hh-card .pr{width:70%;background:var(--line)}

/* tonight: one big card */
.lib .hh-card.big{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:20px;padding:14px;text-align:start;max-width:880px;margin-inline:auto}
.lib .hh-card.big .lb{justify-items:start;gap:8px}
.lib .hh-card.big .bt{font-size:clamp(1.4rem,3.4vw,2rem)}
.lib .hh-card.big .hh-meta{font-size:.95rem}
@media (max-width:600px){.lib .hh-card.big{grid-template-columns:1fr;text-align:center}.lib .hh-card.big .lb{justify-items:center}}
body.hh-night .lib .hh-tonight .hh-card.big{box-shadow:0 0 0 2px #ffe3a3,0 20px 50px -20px rgb(255 227 163 / .35)}

/* waves and the sections under the shelf follow day and night */
.lib .wave{display:block;width:100%;height:48px;background:var(--bg)}
.lib .wave-how{fill:var(--how)}
.lib .how{background:var(--how)}
.lib .wave:has(.wave-about){background:var(--how)}.lib .wave-about{fill:#44231d}
.lib .wave:has(.wave-foot){background:#44231d}.lib .wave-foot{fill:var(--bg)}
body.hh-night .lib .about{background:#0e1330}
body.hh-night .lib .wave-about{fill:#0e1330}body.hh-night .lib .wave:has(.wave-foot){background:#0e1330}
body.hh-night .lib .steps b{background:#2a3366}
body.hh-night .lib .foot nav a,body.hh-night .lib .foot{color:var(--ink-2)}

@media (max-width:640px){.lib .hh-animal{width:76px}.lib .hh-animal img{width:66px;height:66px}.lib .hh-animal span{font-size:.92rem}.lib .hh-bird{width:88px}}
@media (prefers-reduced-motion:reduce){.lib .hh-bird,.lib .hh-say img{animation:none}.lib .hh-card,.lib .hh-animal img{transition:none}}
.lib .hh-card.big{width:100%}
@media (max-width:600px){.lib .hh-say p{font-size:1rem;padding:8px 14px}.lib .hh-say img{width:52px}}

/* ---------- the wall: covers in their own shapes, staggered in columns (like a picture-book shop window) ---------- */
.lib .hh-wall{display:block;columns:2;column-gap:14px}
@media (min-width:760px){.lib .hh-wall{columns:3;column-gap:22px}}
@media (min-width:1100px){.lib .hh-wall{columns:4}}
.lib .hh-tile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:8px;width:100%;break-inside:avoid;margin-block-end:22px;
  -webkit-tap-highlight-color:transparent}
.lib .hh-pic{position:relative;display:block;border-radius:18px;overflow:hidden;container-type:inline-size;background:var(--card);
  box-shadow:0 14px 26px -16px rgb(68 35 29 / .6);transition:transform .25s ease,box-shadow .25s ease}
.lib .hh-pic img{display:block;width:100%;height:auto}
.lib .hh-tile:hover .hh-pic,.lib .hh-tile:focus-visible .hh-pic{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 22px 34px -18px rgb(68 35 29 / .7)}
.lib .hh-tile:focus-visible .hh-pic{outline:3px solid var(--coral);outline-offset:3px}
/* the title drawn over a picture that has none of its own: big round letters, like a book cover */
.lib .hh-ttl{position:absolute;inset-inline:0;top:0;padding:8cqw 7cqw 14cqw;text-align:center;font-family:var(--f-round);font-weight:800;
  font-size:clamp(1.1rem,11.5cqw,2.4rem);line-height:1.15;color:#fff;-webkit-text-stroke:.06em #e8432d;paint-order:stroke fill;
  text-shadow:0 3px 0 rgb(68 35 29 / .35);background:linear-gradient(rgb(0 0 0 / .18),transparent);text-wrap:balance}
.lib .hh-tile .hh-kind{top:auto;bottom:3.5cqw;inset-inline-start:3.5cqw;width:32px;height:32px}
.lib .hh-tile .go{position:absolute;bottom:3.5cqw;inset-inline-end:3.5cqw;inset-inline-start:auto;margin:0;width:max-content;max-width:75%;
  font-size:clamp(.72rem,6cqw,.9rem);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.lib .hh-tile:hover .go,.lib .hh-tile:focus-visible .go,.lib .hh-tile.locked .go{opacity:1;transform:none}
@media (hover:none){.lib .hh-tile .go{opacity:1;transform:none}}
.lib .hh-tile .pr{position:absolute;inset-inline:0;bottom:0;height:5px;border-radius:0;background:rgb(255 255 255 / .5);width:auto;margin:0}
.lib .hh-tile .pr i{background:var(--coral)}
.lib .hh-tile .tagx{top:3.5cqw;inset-inline-end:3.5cqw}
.lib .hh-tile.locked .hh-pic img{filter:saturate(.75) brightness(.86)}
.lib .hh-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;text-align:center}
.lib .hh-cap .hh-meta{font-size:.8rem}

/* tonight's tile: picture and words side by side */
.lib .hh-tile.big{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:22px;max-width:900px;margin:0 auto;padding:14px;
  background:var(--card);border-radius:26px;box-shadow:0 16px 34px -20px rgb(68 35 29 / .6)}
.lib .hh-big-lb{display:grid;gap:8px;justify-items:start}
.lib .hh-big-lb .bt{font-family:var(--f-round);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.3;color:var(--ink)}
.lib .hh-big-lb .hh-meta{font-size:.95rem}
.lib .hh-tile.big .go{opacity:1;transform:none}
@media (max-width:600px){.lib .hh-tile.big{grid-template-columns:1fr}.lib .hh-big-lb{justify-items:center;text-align:center}}
body.hh-night .lib .hh-tonight .hh-tile.big{box-shadow:0 0 0 2px #ffe3a3,0 20px 50px -20px rgb(255 227 163 / .35)}
body.hh-night .lib .hh-pic{box-shadow:0 14px 26px -14px rgb(0 0 0 / .8)}
@media (prefers-reduced-motion:reduce){.lib .hh-pic,.lib .hh-tile .go{transition:none}}
.lib .hh-ttl.low{top:auto;bottom:0;padding:0 14cqw 4.5cqw;background:none;text-shadow:none;color:var(--coral);-webkit-text-stroke:0;font-size:clamp(1rem,10cqw,2.1rem)}
.lib #sec-watch .hh-ico{background:var(--coral)}
.lib .hh-kind.film{color:#7a4fc0}

/* phones: the menu links stay reachable in a row that scrolls sideways under the logo */
@media (max-width:640px){
  .lib .nav-in{flex-wrap:wrap;row-gap:2px;padding-block:6px}
  .lib .nav nav{flex-wrap:nowrap;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none;padding-block:2px 4px}
  .lib .nav nav::-webkit-scrollbar{display:none}
  .lib .nav nav a:not(.cta){display:inline-block;white-space:nowrap;padding:6px 12px;font-size:.9rem}
  .lib .nav nav .hh-mode,.lib .nav nav .cta{flex:none}
}
/* the wall uses the width of the screen: 2 columns on phones up to 5 on wide screens */
.lib .hh-shelf .wrap,.lib .hh-pick .wrap{max-width:1440px}
@media (min-width:640px){.lib .hh-wall{columns:3}}
@media (min-width:1000px){.lib .hh-wall{columns:4}}
@media (min-width:1400px){.lib .hh-wall{columns:5}}
/* never more columns than stories, and a cover never wider than ~300px: a short section stays neat at the start */
.lib .hh-wall{--c:2;column-count:min(var(--c),var(--n,99));max-width:calc(min(var(--c),var(--n,99)) * 310px);margin-inline:0 auto}
@media (min-width:640px){.lib .hh-wall{--c:3}}
@media (min-width:1000px){.lib .hh-wall{--c:4}}
@media (min-width:1400px){.lib .hh-wall{--c:5}}
@media (max-width:639px){.lib .hh-wall{max-width:none;column-count:2}}