@font-face{font-family:Nunito;src:url('/fonts/Nunito_400Regular.ttf')}@font-face{font-family:Nunito;src:url('/fonts/Nunito_700Bold.ttf');font-weight:700}@font-face{font-family:Baloo;src:url('/fonts/Baloo2_800ExtraBold.ttf');font-weight:800}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--color-cinema-bg);color:var(--color-cinema-text);font:16px/1.6 Nunito,system-ui,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--color-mint);outline-offset:5px}h1,h2,p{margin:0}h1,h2{line-height:1.08;letter-spacing:-.045em}h2{font-size:clamp(30px,3.4vw,46px)}.skip{position:absolute;top:-80px;z-index:10;background:var(--color-mint);color:var(--color-ink);padding:12px}.skip:focus{top:0}header{height:90px;position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:50px;padding:0 5%;background:linear-gradient(var(--color-cinema-bg),transparent)}.logo{font:800 39px/1 Baloo,Nunito,sans-serif;letter-spacing:-2px}.logo span{color:var(--color-mint)}header nav{display:flex;gap:30px;font-size:14px}header nav a:hover,footer a:hover{color:var(--color-mint)}header>.button{margin-left:auto}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;background:var(--color-mint);color:var(--color-mint-ink);font-weight:700;border-radius:8px;padding:14px 23px;transition:transform .2s,filter .2s}.button:hover{filter:brightness(1.1);transform:translateY(-2px)}.button.small{font-size:14px;padding:11px 20px}.button.secondary{background:var(--color-cinema-chip);color:var(--color-cinema-text);border:1px solid var(--color-cinema-chip-border);backdrop-filter:blur(8px)}.hero{min-height:760px;position:relative;display:flex;align-items:center;overflow:hidden}.hero-image{position:absolute;right:0;top:0;width:68%;height:100%;object-fit:cover;object-position:50% 36%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-cinema-bg) 8%,rgba(var(--color-cinema-scrim),.94) 30%,rgba(var(--color-cinema-scrim),.24) 69%,rgba(var(--color-cinema-scrim),.08)),linear-gradient(0deg,var(--color-cinema-bg),transparent 35%)}.hero-content{position:relative;padding:135px 5% 115px;width:100%;max-width:900px}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:700;color:var(--color-mint);margin-bottom:20px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-mint);margin-right:7px}h1{font-size:clamp(40px,4.6vw,66px);font-weight:700}h1 em{font-style:normal;color:var(--color-cinema-text-soft)}.intro{max-width:455px;color:var(--color-cinema-text-soft);font-size:18px;margin-top:26px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-note{font-size:13px;color:var(--color-cinema-text-soft);margin-top:16px}.featured{position:absolute;bottom:87px;right:5%;max-width:300px}.featured span{font-size:10px;letter-spacing:.2em}.featured strong{display:block;font-size:24px}.featured small{display:block;color:var(--color-cinema-text-soft);font-size:12px}.section{padding:48px 5% 58px}.shelf{position:relative;margin-top:-40px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.section-head .eyebrow{margin-bottom:10px}.section-copy{color:var(--color-cinema-text-soft);margin:16px 0 25px}.arrows{display:flex;gap:8px}.arrows button{border:1px solid var(--color-cinema-border);background:var(--color-cinema-surface);color:var(--color-cinema-text);border-radius:50%;width:42px;height:42px}.arrows button:disabled{opacity:.35;cursor:default}.poster-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 22px;scrollbar-width:thin;scrollbar-color:var(--color-cinema-border) transparent}.poster{flex:0 0 calc((100% - 100px)/6);min-width:160px;scroll-snap-align:start;border:0;background:none;padding:0;text-align:left;color:var(--color-cinema-text)}.poster-art{position:relative;display:block;overflow:hidden;border-radius:10px;aspect-ratio:2/3;border:1px solid var(--color-cinema-chip-border);transition:transform .25s}.poster img{width:100%;height:100%;object-fit:cover;display:block}.poster strong{display:block;font-size:16px;margin-top:13px}.meta{font-size:13px;color:var(--color-cinema-text-soft)}.poster-open{position:absolute;bottom:0;left:0;right:0;background:var(--color-cinema-veil);padding:12px;font-size:13px;opacity:0;transition:opacity .2s}.poster:hover .poster-art{transform:translateY(-5px)}.poster:hover .poster-open,.poster:focus-visible .poster-open{opacity:1}.learning{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding-top:85px;padding-bottom:85px}.learning-copy p:not(.eyebrow){color:var(--color-cinema-text-soft);margin-top:24px;max-width:480px}.text-link{display:inline-block;color:var(--color-mint);font-weight:700;margin-top:24px}.demo{background:var(--color-cinema-surface);border:1px solid var(--color-cinema-border);border-radius:18px;overflow:hidden;transform:rotate(1deg)}.demo-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px}.demo-head>span{font-size:10px;font-weight:700;letter-spacing:.12em}.lang{border:0;background:transparent;color:var(--color-cinema-text-soft);border-radius:5px;padding:8px 12px;font-size:13px}.lang.active{background:var(--color-cinema-accent);color:var(--color-white)}.demo-scene{position:relative;padding-top:54px}.demo-scene img{display:block;width:100%;height:auto}.bubble{position:absolute;top:6px;left:12px;max-width:calc(100% - 24px);background:var(--color-white);color:var(--color-ink);border:2px solid var(--color-ink);border-radius:14px 14px 14px 0;padding:7px 14px;font-size:18px;line-height:1.3;font-weight:700}.bubble span{color:var(--color-violet)}.demo-question{padding:22px}.answers{display:flex;gap:10px;margin-top:16px}.answers button{border:1px solid var(--color-cinema-chip-border);border-radius:8px;color:var(--color-cinema-text);background:var(--color-cinema-surface-soft);padding:10px 22px;min-height:44px}.answers button:hover{border-color:var(--color-mint)}.answers button.correct{background:var(--color-mint);color:var(--color-mint-ink)}.feedback{color:var(--color-mint);font-size:14px;min-height:46px;margin-top:16px}.demo-question small{font-size:12px;color:var(--color-cinema-text-soft)}.languages{text-align:center;background:radial-gradient(ellipse at center,var(--color-cinema-surface-soft),var(--color-cinema-bg) 72%);padding-top:80px;padding-bottom:90px}.languages p:not(.eyebrow){color:var(--color-cinema-text-soft);margin-top:20px}.parents{border-top:1px solid var(--color-cinema-border);display:grid;grid-template-columns:1fr 1fr;gap:9%;padding-top:75px;padding-bottom:75px}.parents p:not(.eyebrow){color:var(--color-cinema-text-soft)}.trust{display:flex;gap:25px;flex-wrap:wrap;margin:24px 0;color:var(--color-mint);font-size:14px}.muted{font-size:14px;color:var(--color-cinema-text-soft)}.join{text-align:center;background:var(--color-cinema-surface);margin:15px 5% 70px;border-radius:20px;padding:65px 24px}.join p:not(.eyebrow){margin-top:20px;color:var(--color-cinema-text-soft)}.join .actions{justify-content:center}footer{padding:0 5% 40px;display:flex;align-items:center;gap:30px}footer p{font-size:13px;color:var(--color-cinema-text-soft)}footer nav{display:flex;gap:22px;margin-left:auto;font-size:13px}dialog{max-width:860px;width:calc(100% - 32px);padding:0;border:1px solid var(--color-cinema-border);border-radius:18px;background:var(--color-cinema-surface);color:var(--color-cinema-text);max-height:90dvh;overflow:auto}dialog[open]{display:grid;grid-template-columns:35% 1fr}dialog::backdrop{background:var(--color-cinema-veil);backdrop-filter:blur(8px)}dialog>img{width:100%;height:100%;object-fit:cover}.dialog-copy{padding:38px 28px}.dialog-copy h2{font-size:32px}.dialog-copy p:not(.eyebrow){margin:20px 0}.close{position:absolute;right:10px;top:10px;width:36px;height:36px;border:1px solid var(--color-cinema-border);border-radius:50%;background:var(--color-cinema-bg);color:var(--color-white);font-size:23px}
@media(min-width:1600px){.hero{min-height:850px}.hero-content{max-width:1050px}}
@media(max-width:900px){header{gap:25px}header nav{gap:18px}.featured{display:none}.hero-content{max-width:720px}.poster{flex-basis:23%}.learning{gap:5%}.demo-head{flex-wrap:wrap}.parents{gap:5%}footer{flex-wrap:wrap}footer nav{margin-left:0}.answers button{padding:10px 14px}}
@media(max-width:600px){header{height:78px;padding:0 6%}.logo{font-size:34px}header nav{display:none}.hero{min-height:830px;align-items:end}.hero-image{width:100%;height:480px;object-position:center 32%;opacity:.85}.hero-shade{background:linear-gradient(0deg,var(--color-cinema-bg) 7%,var(--color-cinema-bg) 32%,rgba(var(--color-cinema-scrim),.25) 80%)}.hero-content{padding:330px 6% 75px}h1{font-size:40px}.hero .eyebrow{font-size:10px}.intro{font-size:16px;margin-top:20px}.actions{gap:10px;margin-top:24px}.button{padding:13px 16px;font-size:14px}.hero-note{font-size:12px}.section{padding:38px 6%}.shelf{margin-top:-35px}.section-head h2{font-size:28px}.section-head .eyebrow{font-size:10px}.arrows{display:none}.poster-track{gap:14px;margin-right:-6vw;padding-right:6vw}.poster{flex-basis:43%;min-width:145px}.poster strong{font-size:14px}.learning,.parents{grid-template-columns:1fr;gap:35px}.demo{transform:none}.learning-copy h2{font-size:36px}.demo-scene{padding-top:54px}.demo-head{flex-wrap:nowrap}.demo-head>span{font-size:9px}.demo-head{padding:12px}.lang{padding:8px}.languages{padding-top:60px;padding-bottom:65px}.parents{padding-top:50px}.join{margin:20px 6% 45px;padding:40px 20px}.join .actions{flex-direction:column}footer{padding:0 6% 30px;gap:18px}footer nav{flex-wrap:wrap;gap:15px}dialog[open]{grid-template-columns:1fr}dialog>img{height:220px;object-position:center 30%}.dialog-copy{padding:25px}.dialog-copy h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;transform:none!important}}

/* Fabelo book/speech symbol; matches the locally bundled app loading mark. */
.logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.logo img{display:block;width:42px;height:42px;object-fit:contain;border-radius:9px}

/* Public launch: Renart leads; Uilenspiegel is a smaller, non-interactive announcement. */
.story-selection{margin-top:0;padding-top:30px}.story-lineup{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(280px,1fr);gap:56px;align-items:center}.renart-feature{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:36px;align-items:center}.renart-feature .poster{width:100%;min-width:0}.story-copy h3{font:700 clamp(30px,3vw,46px)/1.08 Nunito,sans-serif;letter-spacing:-.04em;margin:14px 0 24px}.story-copy>p:not(.availability){color:var(--color-cinema-text-soft);margin:16px 0}.story-copy .button{margin-top:12px}.availability{display:inline-block;border:1px solid var(--color-mint);border-radius:30px;padding:5px 13px;font-size:12px;font-weight:700;color:var(--color-mint)}.upcoming-story{border-left:1px solid var(--color-cinema-border);padding-left:32px}.upcoming-story>img{width:110px;height:165px;object-fit:cover;border-radius:8px;opacity:.7;margin-bottom:20px}.upcoming-story .eyebrow{font-size:10px;margin-bottom:10px}.upcoming-story h3{font-size:22px;line-height:1.2;margin:0 0 8px}.upcoming-story p:not(.eyebrow):not(.meta){font-size:14px;color:var(--color-cinema-text-soft);margin:14px 0}.upcoming-story p.release-date{color:var(--color-mint)!important;font-weight:700}.upcoming-story .muted{font-size:12px}
@media(max-width:1000px){.story-lineup{grid-template-columns:1fr}.upcoming-story{display:flex;gap:24px;border-left:0;border-top:1px solid var(--color-cinema-border);padding:28px 0 0}.upcoming-story>img{flex-shrink:0}.renart-feature{grid-template-columns:minmax(150px,240px) 1fr}}
@media(max-width:600px){.renart-feature{grid-template-columns:1fr;gap:20px}.renart-feature .poster{max-width:230px}.story-lineup{gap:32px}.upcoming-story{gap:18px}.upcoming-story>img{width:80px;height:120px}.upcoming-story h3{font-size:20px}}

/* Homepage sample uses unchanged published Renart panels and their original French lines. */
.real-panels{transform:none}.demo-language{color:var(--color-mint);font-size:12px!important;border:1px solid var(--color-cinema-border);border-radius:20px;padding:4px 12px}.demo-choices{display:flex;gap:8px;padding:0 18px 16px}.demo-choices button{flex:1;border:1px solid var(--color-cinema-chip-border);border-radius:8px;background:transparent;color:var(--color-cinema-text-soft);padding:9px 12px;font-size:13px}.demo-choices button.active{background:var(--color-cinema-chip);color:var(--color-cinema-text);border-color:var(--color-mint)}.real-panels .demo-scene{padding-top:0;container-type:inline-size}.demo-lettering{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--color-cream);stroke:var(--color-ink);stroke-width:4;stroke-linejoin:round}.real-panels .bubble{display:flex;align-items:center;justify-content:center;max-width:none;margin:0;padding:0;background:transparent;border:0;border-radius:0;font-size:4.7cqw;line-height:1;font-weight:700;white-space:pre}.real-panels .bubble span{display:inline-block;min-width:1em;text-align:center}.real-panels .demo-scene img{aspect-ratio:1;object-fit:contain}.demo-translation{color:var(--color-mint);font-weight:700;font-size:19px;margin-bottom:6px}.real-panels #question{font-size:14px;color:var(--color-cinema-text-soft)}.real-panels .feedback{min-height:44px}.real-panels .demo-question{padding:18px 22px}

/* Keep the introduction terms readable beside the invitation. */
.join .access-note{max-width:720px;margin:22px auto 0;text-align:left}.join .access-note a{color:var(--color-mint);text-decoration:underline;text-underline-offset:3px}
