@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Nunito+Sans:wght@400;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#1c2739;background:#fffdf7;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,a{outline-offset:4px}.skip{position:absolute;left:-10000px;top:0;padding:.8rem;background:#fff;z-index:5}.skip:focus{left:1rem}.wrap{width:min(1170px,calc(100% - 3rem));margin-inline:auto}.site-header{background:#fffdf7;border-bottom:1px solid #e9e4d7}.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:2rem}.brand{display:flex;align-items:center;gap:.7rem;font:900 1.35rem 'Nunito',sans-serif;white-space:nowrap;letter-spacing:-.04em}.brand img{width:48px;height:48px;border-radius:50%}.brand em,.footer-brand em{font-style:normal;color:#e28e21}.site-header nav{display:flex;gap:2rem;font-weight:800;font-size:.94rem}.site-header nav a:hover,.footer a:hover,.text-link:hover{color:#b36a13}.hero{background:#ffca5b;position:relative;overflow:hidden}.hero-layout{min-height:560px;display:grid;grid-template-columns:1fr .88fr;align-items:center;gap:7%;padding-block:4.5rem 5rem}.hero-copy{position:relative;z-index:1}.tag,.eyebrow{font-weight:800;letter-spacing:.16em;font-size:.76rem}.tag{display:inline-flex;align-items:center;gap:.65rem;background:#fff6d8;border:1px solid #2c3545;border-radius:40px;padding:.65rem .9rem}.tag-dot{width:9px;height:9px;background:#e9853b;border-radius:50%}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Nunito',sans-serif;letter-spacing:-.055em;line-height:1.07}h1{font-size:clamp(3.2rem,6vw,6.6rem);font-weight:900;margin:1.4rem 0 1.5rem}h1 em{font-style:normal;color:#fffdf7;text-shadow:2px 3px 0 #1c2739,-1px -1px 0 #1c2739,1px -1px 0 #1c2739,-1px 1px 0 #1c2739}.hero-copy p{font-size:1.25rem;line-height:1.55;max-width:27rem;margin-bottom:2rem}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem 1.4rem;border-radius:14px;font-weight:800;min-height:54px}.button.primary{background:#1c2739;color:white;box-shadow:5px 5px 0 #fff2bf}.button.secondary{background:#ffca5b;color:#1c2739}.button:hover{transform:translateY(-2px)}.hero-feature{height:440px;border:8px solid #fffdf7;border-radius:26px;overflow:hidden;position:relative;background:#263144;box-shadow:15px 17px 0 rgba(28,39,57,.17);transform:rotate(2deg);transition:transform .2s}.hero-feature:hover{transform:rotate(0)}.hero-feature img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12)}.feature-play,.play{display:grid;place-items:center;position:absolute;background:#ffca5b;color:#1c2739;border:2px solid #1c2739;border-radius:50%;font-size:1.3rem;padding-left:3px}.feature-play{width:74px;height:74px;left:50%;top:45%;transform:translate(-50%,-50%)}.feature-caption{position:absolute;bottom:0;left:0;right:0;color:white;padding:3.5rem 1.4rem 1.3rem;background:linear-gradient(transparent,rgba(16,25,39,.9));display:flex;flex-direction:column;gap:.2rem}.feature-caption small{font-weight:800;letter-spacing:.12em}.feature-caption strong{font:900 1.7rem 'Nunito',sans-serif}.hero-doodle{position:absolute;left:-32px;bottom:-105px;font-size:240px;color:rgba(255,255,255,.26);line-height:1}.section{padding-block:5.5rem}.section-head{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:1.8rem}.section-head h2{font-size:clamp(2rem,3.6vw,3.3rem);margin:.5rem 0 0}.eyebrow{color:#be6718}.text-link,.card-link{font-weight:800}.story-grid,.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.story-card{display:block;border:2px solid #1c2739;border-radius:21px;overflow:hidden;background:#fff;box-shadow:5px 6px 0 #1c2739;transition:transform .2s}.story-card:hover,.character-card:hover{transform:translateY(-5px)}.story-image{height:220px;display:block;overflow:hidden;position:relative;background:#cfe6ef}.story-image img,.portrait img,.character-large img{width:100%;height:100%;object-fit:cover}.story-card.orange .story-image{background:#ffe0aa}.story-card.green .story-image{background:#d8e5a9}.play{width:48px;height:48px;right:17px;bottom:15px;font-size:.9rem}.card-text{padding:1.25rem 1.3rem 1.5rem;display:flex;flex-direction:column;min-height:154px}.card-text strong{font:900 1.5rem 'Nunito',sans-serif;letter-spacing:-.03em;margin:.35rem 0 auto}.card-link{margin-top:1.2rem;font-size:.92rem}.characters-band{background:#e6f1e3;border-top:1px solid #cddfc9}.character-card{background:#fffdf7;border-radius:20px;border:2px solid #1c2739;overflow:hidden;display:flex;align-items:center;gap:1rem;padding:.9rem;transition:transform .2s}.portrait{display:block;width:100px;height:115px;overflow:hidden;border-radius:13px;flex:0 0 100px;background:#ddd}.character-text{display:flex;flex-direction:column;line-height:1.35}.character-text strong{font:900 1.5rem 'Nunito',sans-serif}.character-text>span:nth-child(2){font-size:.88rem;color:#526073}.character-text .card-link{margin-top:1rem}.footer{background:#1c2739;color:#fffdf7;padding:3rem 0}.footer-inner{display:flex;justify-content:space-between;gap:2rem}.footer-brand{font:900 1.5rem 'Nunito',sans-serif}.footer p{color:#c5cbd2;margin:.3rem 0}.footer-links{display:flex;align-items:start;gap:1.7rem;font-weight:700}.page-intro{padding-top:5rem}.page-intro h1{font-size:clamp(3.3rem,6vw,6rem);margin:1rem 0}.page-intro h1 em{color:#eaa039;text-shadow:none}.page-intro p{font-size:1.2rem;line-height:1.6;max-width:40rem}.page-intro+.section{padding-top:2rem}.crumb{display:flex;gap:.7rem;padding-top:2rem;color:#637083;font-size:.9rem}.crumb a{text-decoration:underline}.watch-layout{display:grid;grid-template-columns:minmax(310px,.82fr) 1fr;align-items:center;gap:min(8vw,6rem);padding-block:2rem 2.5rem}.watch-player{position:relative;height:min(70vh,620px);min-height:490px;max-width:360px;width:100%;margin-inline:auto;border-radius:20px;overflow:hidden;background:#1c2739;box-shadow:10px 12px 0 #ffca5b}.watch-player iframe{width:100%;height:100%;border:0}.watch-copy h1{font-size:clamp(2.5rem,4vw,4.5rem);margin:.75rem 0 1.5rem}.watch-copy p,.character-detail p{font-size:1.18rem;line-height:1.65;max-width:36rem}.watch-note{color:#6a7280;font-size:.95rem!important;margin-top:1.5rem}.story-grid.smaller{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.character-detail{display:grid;grid-template-columns:.9fr 1fr;align-items:center;gap:7%;padding-block:3rem 6rem}.character-large{height:380px;border:8px solid #ffca5b;border-radius:28px;overflow:hidden;background:#cbdde0;box-shadow:12px 12px 0 #1c2739}.character-detail h1{margin:.7rem 0}.kind{font-weight:800;color:#b86d20}.about-intro{min-height:70vh;padding-bottom:6rem}.about-intro .button{margin-top:1rem}
@media(max-width:850px){.hero-layout{gap:2rem}.hero-feature{height:350px}.story-grid,.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-grid .character-card:last-child{grid-column:span 2;max-width:calc(50% - .7rem)}}@media(max-width:650px){.wrap{width:min(100% - 2rem,1170px)}.header-inner{min-height:70px;flex-wrap:wrap;justify-content:center;padding-block:.6rem;gap:.4rem}.site-header nav{width:100%;justify-content:center;gap:1.8rem;font-size:.88rem}.brand{font-size:1.2rem}.brand img{width:38px;height:38px}.hero-layout{grid-template-columns:1fr;padding-block:2.8rem 4rem;gap:2.2rem}.hero-copy h1{font-size:clamp(3.3rem,13vw,5rem)}.hero-copy p{font-size:1.1rem}.hero-feature{height:280px;transform:rotate(1deg);margin-right:9px}.hero-doodle{display:none}.section{padding-block:3.5rem}.section-head{align-items:start}.section-head h2{font-size:2.15rem}.story-grid,.story-grid.smaller,.character-grid{grid-template-columns:1fr}.story-image{height:230px}.character-grid .character-card:last-child{grid-column:auto;max-width:none}.page-intro{padding-top:3.5rem}.page-intro h1{font-size:3.5rem}.watch-layout,.character-detail{grid-template-columns:1fr;gap:3rem}.watch-player{height:580px;min-height:0;max-width:340px}.watch-copy h1{font-size:2.8rem}.character-large{height:300px}.footer-inner{flex-direction:column}.footer-links{flex-wrap:wrap}.about-intro{min-height:60vh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Approved LOS artwork and its soft storybook typography set the visual language. */
:root{font-family:'Nunito Sans',system-ui,sans-serif;color:#392820;background:#fffdf7}
h1,h2,.brand,.footer-brand,.character-text strong,.card-text strong,.feature-caption strong{font-family:'Bree Serif',Georgia,serif;letter-spacing:-.025em;font-weight:400}
.brand{font-size:1.35rem;color:#4d2b1d}.brand em,.footer-brand em{color:inherit}
.brand img{border:2px solid #ecdfc7}.site-header{background:#fffefa;border-color:#eee4d5}
.site-header nav a:hover,.footer a:hover,.text-link:hover{color:#9a4d29}
.hero{background:#fffdf7;border-bottom:1px solid #ede3d3}.brand-banner{height:390px;background:url('/assets/los-banner.png') center center/cover no-repeat}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:0 0 2.3rem}
.hero-bottom p{font-size:1.15rem;line-height:1.5;max-width:34rem;margin:0;color:#4d4038}
.button.primary{background:#4b3024;box-shadow:none}.button.secondary{background:#e9c28b}.button{border-radius:11px}
.eyebrow{color:#a05836}.page-intro h1 em{color:#a7653c}.page-intro h1,.watch-copy h1,.character-detail h1{color:#4d2b1d}
.story-card{border:1px solid #dfd2c0;box-shadow:0 8px 24px rgba(74,44,28,.08)}
.character-card{border:1px solid #dfd2c0}.characters-band{background:#edf2df;border-color:#dfe5d2}
.play,.feature-play{background:#f2c38b;border-color:#4d2b1d}.footer{background:#352b27}.footer-brand em{color:#f6ca94}
.character-large{border-color:#e8c391;box-shadow:12px 12px 0 #7b8a61}.watch-player{box-shadow:10px 12px 0 #e8c391}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){.brand{font-size:1.15rem}.brand-banner{height:250px;background-size:auto 290px}.hero-bottom{flex-direction:column;align-items:flex-start;padding:0 0 2.2rem;gap:1rem}.hero-bottom p{font-size:1rem}.hero-bottom .button{width:100%}}
.home-scene{min-height:520px;background:#fffaf0 url('/assets/los-home-hero-v1.webp') center center/cover no-repeat;display:flex;align-items:center;border-radius:0 0 22px 22px;overflow:hidden}
.home-heading{padding:3rem 4rem;max-width:610px}
.home-heading h1{color:#4d2b1d;font-size:clamp(3.1rem,5vw,5.2rem);line-height:1.05;margin:.8rem 0 1rem}
.home-heading h1 em{color:#9e5937;text-shadow:none}
.home-heading p{max-width:25rem;font-size:1.14rem;line-height:1.6;color:#4d4038;margin-bottom:1.5rem}
@media(max-width:800px){.home-scene{background-position:58% center}.home-heading{padding:2.5rem;max-width:53%;background:linear-gradient(90deg,rgba(255,253,247,.94),rgba(255,253,247,.64) 75%,transparent)}.home-heading h1{font-size:clamp(2.5rem,5vw,4rem)}}
@media(max-width:650px){.home-scene{display:block;min-height:0;background-image:none;overflow:visible}.home-scene:before{content:"";display:block;height:280px;background:#fffaf0 url('/assets/los-home-hero-v1.webp') 67% center/cover no-repeat;border-radius:0 0 17px 17px}.home-heading{max-width:none;padding:1.7rem .3rem 2.3rem;background:none}.home-heading h1{font-size:clamp(2.8rem,12vw,4rem)}.home-heading p{font-size:1.05rem}.home-heading .button{width:100%}}
/* Character archive: two roomy cards per row and isolated reference artwork. */
.cast-intro{padding-top:3.6rem}.cast-intro h1{font-size:clamp(3.2rem,5.4vw,5.8rem)}.cast-intro p{margin-bottom:0}
.cast-section{padding-top:2.4rem;padding-bottom:5.5rem}
.cast-section .character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.cast-section .character-card{min-height:275px;padding:1rem;gap:1.35rem;border-radius:21px;align-items:stretch;background:#fffefa}
.cast-section .portrait{position:relative;flex:0 0 43%;width:43%;height:auto;min-height:240px;border-radius:14px;background:#f4e9d6}
.cast-section .character-text{justify-content:center;min-width:0;gap:.4rem}
.cast-section .character-text strong{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.15}
.cast-section .character-text>span:nth-child(2){font-size:1rem;line-height:1.45;color:#564b44}
.cast-section .character-text .card-link{margin-top:1rem;font-size:.95rem;color:#874526}
.portrait img,.character-large img{position:absolute;top:0;left:0;width:390%;height:auto;max-width:none;object-fit:initial}
.portrait,.character-large{position:relative;background:#f7ecd9}
.portrait-rusty img,.portrait-millie img{width:300%}
.portrait-stanley img,.portrait-turtle-robbers img{width:400%}
.portrait-pip-and-pop img{width:205%;top:-120%;left:0}
.portrait-theo img,.portrait-mabel img{width:390%}
.character-large{height:440px;max-width:450px}
.character-large img{width:390%}
.character-large.portrait-rusty img,.character-large.portrait-millie img{width:300%}
.character-large.portrait-stanley img,.character-large.portrait-turtle-robbers img{width:400%}
.character-large.portrait-pip-and-pop img{width:205%;top:-120%}
@media(max-width:850px){.cast-section .character-grid .character-card:last-child{grid-column:auto;max-width:none}.cast-section .character-card{min-height:240px;gap:.8rem}.cast-section .portrait{min-height:210px}.cast-section .character-text strong{font-size:1.5rem}}
@media(max-width:650px){.cast-intro{padding-top:2.5rem}.cast-intro h1{font-size:clamp(2.8rem,11vw,4.5rem)}.cast-section{padding-top:1.5rem}.cast-section .character-grid{grid-template-columns:1fr;gap:1rem}.cast-section .character-card{min-height:220px;gap:1rem}.cast-section .portrait{flex-basis:42%;width:42%;min-height:200px}.cast-section .character-text>span:nth-child(2){font-size:.92rem}.character-large{height:340px}}
/* Final standalone portraits: preserve each full character and the white field. */
.cast-section .portrait,.character-large{background:#fff}
.portrait img,.character-large img,.portrait-rusty img,.portrait-millie img,.portrait-stanley img,.portrait-turtle-robbers img,.portrait-pip-and-pop img,.portrait-theo img,.portrait-mabel img,.character-large.portrait-rusty img,.character-large.portrait-millie img,.character-large.portrait-stanley img,.character-large.portrait-turtle-robbers img,.character-large.portrait-pip-and-pop img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center center}
.cast-section .character-card{min-height:310px}
.cast-section .portrait{min-height:275px}
.character-large{height:480px}
@media(max-width:650px){.cast-section .character-card{min-height:225px}.cast-section .portrait{min-height:205px}.character-large{height:370px}}
/* Quiet portrait frame and a short, distinct story on each character page. */
.story-detail{align-items:start}
.story-detail .character-large{border:1px solid #e7e2db;border-radius:18px;box-shadow:0 12px 30px rgba(52,42,36,.07);height:530px;background:#fff}
.story-detail .character-story{border-top:1px solid #e7e2db;margin:2rem 0 1.7rem;padding-top:1.7rem}
.story-detail .character-story h2{font-size:clamp(1.6rem,2.4vw,2rem);color:#4d2b1d;margin:0 0 1.15rem}
.story-detail .character-story p{font-size:1.04rem;line-height:1.72;margin:0 0 .9rem;max-width:38rem}
.story-detail .character-story p:last-child{margin-bottom:0}
.story-reader{display:flex;flex-wrap:wrap;gap:.65rem;margin:.2rem 0 1.7rem}
.story-reader[hidden]{display:none}
.story-reader button{min-height:44px;padding:.62rem 1rem;border:2px solid #4b3024;border-radius:11px;background:#fffdf7;color:#4b3024;font:800 .95rem 'Nunito',sans-serif;cursor:pointer}
.story-reader button[data-read]{background:#ffca5b;color:#1c2739;border-color:#1c2739}
.story-reader button:hover:not(:disabled){transform:translateY(-2px)}
.story-reader button:disabled{opacity:.48;cursor:default}
@media(max-width:650px){.story-detail .character-large{height:390px}.story-detail .character-story{margin-top:1.7rem}}
.footer-legal{font-size:.8rem;color:#d5cdc5;padding:0 0 1.5rem}
.footer-legal{line-height:1.6}.footer-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px;margin-left:.5rem}
/* Headings now start each page directly; balance intro copy at changing viewport widths. */
.page-intro{padding-top:3.6rem}.page-intro h1{margin:0 0 1.25rem}.page-intro p{max-width:44rem;text-wrap:balance}.about-intro p{max-width:45rem}.home-heading h1{margin-top:0}.home-heading p{text-wrap:balance}.character-detail h1,.watch-copy h1{margin-top:0}
@media(max-width:650px){.page-intro{padding-top:2.5rem}.page-intro p,.home-heading p{text-wrap:pretty}}
/* Keep the H1 scale consistent with Build your story across the public pages. */
.hero-copy h1,.home-heading h1,.page-intro h1,.cast-intro h1,.watch-copy h1,.character-detail h1{font-size:clamp(3.1rem,5vw,5.2rem);line-height:1.08}
@media(max-width:650px){.hero-copy h1,.home-heading h1,.page-intro h1,.cast-intro h1,.watch-copy h1,.character-detail h1{font-size:clamp(2.7rem,11vw,4rem)}}
/* Character facts are sourced from the same cast registry as the quiz and story builder. */
.story-detail .character-profile-side{align-self:start;min-width:0}.story-detail .character-profile-side .character-large{max-width:none}.character-facts{margin-top:20px;border:1px solid #e7e2db;border-radius:16px;background:#fffefa;padding:20px 22px}.character-facts h2{font:1.35rem 'Bree Serif',Georgia,serif;color:#4d2b1d;margin:0 0 12px}.character-facts dl{margin:0}.character-facts dl>div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-top:1px solid #eee5da}.character-facts dt{color:#705b4a}.character-facts dd{margin:0;font-weight:700;text-align:right}
.site-header .language-control{margin-left:auto;flex:none}.language-control select{min-height:42px;padding:8px 28px 8px 12px;border:1px solid #d7c8b9;border-radius:9px;background:#fffefa;color:#392820;font:700 .92rem 'Nunito Sans',system-ui,sans-serif;cursor:pointer}.language-control select:focus-visible{outline:2px solid #9e5937;outline-offset:2px}@media(max-width:760px){.site-header .header-inner{flex-wrap:wrap;justify-content:center}.site-header .language-control{margin-left:0;order:2}.site-header nav{order:3;justify-content:center;width:100%;gap:clamp(8px,3vw,20px)}}
/* Match the near-white portrait matte to the surface of character cards. */
.character-card .portrait,.cast-section .portrait,.character-large,.story-detail .character-large{background:#fffefa}
.portrait img,.character-large img{mix-blend-mode:multiply}

/* The homepage's daily story is one illustrated story, with the image and copy rotated together. */
.daily-story-section{padding:4.5rem 0;background:#fbf5e9;border-bottom:1px solid #eadcc9}
.daily-story-heading{margin-bottom:1.5rem}.daily-story-heading h2{font:clamp(1.9rem,3vw,2.7rem) 'Bree Serif',Georgia,serif;color:#402b20;letter-spacing:-.03em;margin:.45rem 0 0}
.daily-story-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch;overflow:hidden;border:1px solid #dfd0bc;border-radius:28px;background:#fff;box-shadow:0 15px 40px rgba(77,48,31,.08)}
.daily-story-illustration{display:grid;place-items:center;min-height:400px;padding:1rem;background:#fff;overflow:hidden}
.daily-story-illustration img{width:100%;height:100%;max-height:480px;object-fit:contain}
.daily-story-copy{padding:clamp(1.5rem,3vw,3rem);align-self:center;color:#3d2b22}
.daily-story-character{display:inline-block;font-weight:800;color:#9c5b36;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}
.daily-story-copy h3{font:clamp(2rem,3.2vw,3.25rem) 'Bree Serif',Georgia,serif;letter-spacing:-.035em;line-height:1.13;margin:.55rem 0 1.3rem}
.daily-story-copy p{font-size:1.05rem;line-height:1.7;margin:0 0 1rem;max-width:42rem}
.daily-story-link{display:inline-flex;align-items:center;min-height:48px;margin-top:.35rem;font-weight:800;color:#884a2f;text-decoration:underline;text-underline-offset:4px}
.daily-story-link:hover{color:#b45c30}
@media(max-width:760px){.daily-story-section{padding:3rem 0}.daily-story-card{grid-template-columns:1fr}.daily-story-illustration{min-height:0;height:270px;padding:1rem 1rem 0}.daily-story-illustration img{max-height:270px}.daily-story-copy{padding:1.3rem 1.45rem 1.7rem}.daily-story-copy h3{font-size:2.1rem}.daily-story-copy p{font-size:1rem;line-height:1.65}}