.adventure-cast{margin:38px 0 34px}.story-section-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:20px}.story-section-heading h2{font-family:var(--serif,Georgia,serif);font-size:clamp(24px,3vw,34px);font-weight:500;line-height:1.4;margin:6px 0 0;color:#284536}.story-section-heading>p{font-size:13px;color:#777c6f;max-width:270px;line-height:1.7;margin:0}.story-eyebrow{font-family:var(--sans,Arial,sans-serif);font-size:10px;letter-spacing:.17em;font-weight:700;color:#788572}.story-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.story-role{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;border:1px solid #d7d9c8;border-radius:12px;overflow:hidden;background:#fffdf6;text-align:left;color:#344839;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}.story-role:hover{transform:translateY(-3px);border-color:#6a886c;box-shadow:0 8px 24px #293e3010}.story-role.selected{border:2px solid #486b52;box-shadow:0 5px 20px #244b3512}.story-role:focus-visible,.story-button:focus-visible,.story-reveal:focus-visible{outline:3px solid #af783d;outline-offset:4px}.story-portrait{display:block;background-image:url('./assets/characters.webp');background-size:300% auto;background-repeat:no-repeat}.story-person-0{background-position:0% 0%}.story-person-1{background-position:50% 0%}.story-person-2{background-position:100% 0%}.story-role>.story-portrait{width:100%;aspect-ratio:1/1.15;max-height:300px;box-shadow:inset 0 -12px 30px #344b3810}.story-role-copy{display:grid;gap:7px;padding:18px 17px 16px}.story-role-copy strong{font-family:var(--serif,Georgia,serif);font-size:19px;font-weight:600}.story-role-copy small{font-size:12px;color:#747869;line-height:1.6}.story-role-choose{font-size:11px;font-weight:700;letter-spacing:.03em;color:#66806b;margin-top:5px}.story-role.selected .story-role-choose{color:#385e45}.story-traits{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}.story-traits>span{display:flex;gap:14px;align-items:center;border:1px solid #dcdccb;background:#f4f3e8;border-radius:100px;padding:7px 13px;font-size:11px;color:#67705c}.story-traits b{font-family:Georgia,serif;font-size:17px;color:#35553d}.story-traits>small{font-size:10px;line-height:1.6;color:#828576;margin-left:auto;max-width:280px}.story-scene{background-image:url('./assets/story-scenes.webp');background-size:300% 200%;background-repeat:no-repeat;background-color:#e2e3d4}.story-scene-0{background-position:0% 0%}.story-scene-1{background-position:50% 0%}.story-scene-2{background-position:100% 0%}.story-scene-3{background-position:0% 100%}.story-scene-4{background-position:50% 100%}.story-scene-5{background-position:100% 100%}.story-reading{margin:28px 0 4px;border:1px solid #d8ddcd;border-radius:10px;overflow:hidden;background:#fcfbf4;text-align:left}.story-reading-image{height:205px;position:relative}.story-reading-image>span{position:absolute;left:20px;bottom:16px;max-width:calc(100% - 40px);padding:7px 13px;color:#fffdf3;background:#294b3be8;font-family:var(--serif,Georgia,serif);font-size:17px;border-radius:3px}.story-reading-body{padding:23px 26px}.story-reading-meta{display:flex;justify-content:space-between;gap:14px;color:#7c8874;letter-spacing:.07em;font-size:10px;line-height:1.5}.story-reading-body h3{font-family:var(--serif,Georgia,serif);font-size:25px;line-height:1.5;color:#284c39;margin:13px 0 14px}.story-passage{font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.95;letter-spacing:.005em;color:#394638;margin:0 0 20px!important}.story-passage mark{background:linear-gradient(transparent 64%,#d8e3a6 75%);color:inherit;padding:0 2px}.story-focus{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:16px 0}.story-focus>span{color:#8a8c7b;font-size:11px;margin-right:3px}.story-focus>b{font-size:12px;font-weight:500;color:#4a6545;background:#edf0df;padding:4px 9px;border-radius:5px}.story-translation,.story-comprehension{border-top:1px solid #e3e4d7;padding-top:12px;margin-top:12px;font-size:12px;color:#667458}.story-translation summary,.story-comprehension summary{cursor:pointer;padding:2px 0 5px;line-height:1.7;font-weight:600;min-height:30px}.story-translation>p{font-size:14px;line-height:1.95;color:#69715f;margin:8px 0 12px!important}.story-quiz-label{font-size:12px;line-height:1.7;color:#75816b;margin:12px 0 6px!important}.story-cloze{font-family:Georgia,serif;font-size:16px;line-height:1.75;color:#344c3c;margin:0 0 12px!important}.story-quiz-options,.story-choice-buttons{display:flex;flex-wrap:wrap;gap:8px}.story-button{padding:10px 15px;border:1px solid #bccbb5;border-radius:5px;color:#385340;background:#f3f6e9;font:inherit;font-size:12px;line-height:1.5;cursor:pointer;transition:background .15s}.story-button:hover{background:#e5edda}.story-button.is-correct{background:#d9ebd5;border-color:#548251}.story-button.is-wrong{background:#f4e6dc;border-color:#b48870}.story-reading-feedback{font-size:13px;line-height:1.8;color:#4b6643;margin:12px 0!important;min-height:10px}.story-reveal{border:0;padding:4px 0;background:none;color:#8c795c;text-decoration:underline;text-underline-offset:4px;font-size:11px;cursor:pointer}.story-aside{display:block;font-size:10px;color:#949481;line-height:1.8;margin-top:17px}.story-encounter{border:1px solid #d1dbc7;border-radius:10px;overflow:hidden;margin:25px 0 18px;background:#f8f9f0;text-align:left}.story-encounter-image{height:150px;position:relative}.story-npc{position:absolute;width:70px;height:83px;bottom:-17px;left:22px;border:3px solid #f8f9f0;border-radius:8px;box-shadow:0 2px 12px #283d3030}.story-encounter-copy{padding:29px 23px 23px}.story-encounter-copy h3{font-family:var(--serif,Georgia,serif);font-size:23px;color:#355039;line-height:1.5;margin:8px 0 9px}.story-encounter-copy>p{font-size:14px;color:#65715b;line-height:1.85;margin:0 0 16px!important}.story-echo{padding:13px 16px;border-left:3px solid #b29357;background:#eeeede;font-size:13px!important}.story-outcome{background:#e8eddd;border-radius:6px;padding:15px 17px;color:#4b6244}.story-outcome strong{font-size:12px;line-height:1.6}.story-outcome p{font-size:13px;line-height:1.8;margin:6px 0 0!important}.story-role-needed{font-weight:500}.story-chapter{background-size:500% 200%}.story-chapter-1{background-image:url('./assets/chapters-01.webp')}.story-chapter-2{background-image:url('./assets/chapters-02.webp')}.story-chapter-3{background-image:url('./assets/chapters-03.webp')}.story-chapter-4{background-image:url('./assets/chapters-04.webp')}.story-chapter-5{background-image:url('./assets/chapters-05.webp')}.story-chapter-6{background-image:url('./assets/chapters-06.webp')}.story-chapter-7{background-image:url('./assets/chapters-07.webp')}.story-chapter-8{background-image:url('./assets/chapters-08.webp')}.story-chapter-9{background-image:url('./assets/chapters-09.webp')}.story-chapter-10{background-image:url('./assets/chapters-10.webp')}.story-cell-0{background-position:0% 0%}.story-cell-1{background-position:25% 0%}.story-cell-2{background-position:50% 0%}.story-cell-3{background-position:75% 0%}.story-cell-4{background-position:100% 0%}.story-cell-5{background-position:0% 100%}.story-cell-6{background-position:25% 100%}.story-cell-7{background-position:50% 100%}.story-cell-8{background-position:75% 100%}.story-cell-9{background-position:100% 100%}
/* Keep atlas cells proportional, then crop the illustration inside the wide card. */
.story-reading-image,.story-encounter-image{overflow:hidden;background-size:0 0;isolation:isolate;--story-atlas-size:300% 200%;--story-cell-aspect:1}
.story-reading-image::before,.story-encounter-image::before{content:"";position:absolute;left:0;top:50%;width:100%;aspect-ratio:var(--story-cell-aspect);transform:translateY(-50%);background-image:inherit;background-position:inherit;background-repeat:no-repeat;background-size:var(--story-atlas-size);z-index:-1}
.story-reading-image.story-chapter{--story-atlas-size:500% 200%;height:260px}
.story-reading-image>span{z-index:1}.story-npc{bottom:12px;width:62px;height:76px;z-index:1}.story-encounter-copy{padding-top:19px}
@media(max-width:640px){.adventure-cast{margin-top:27px}.story-section-heading{display:block}.story-section-heading>p{margin-top:9px;max-width:none}.story-role-grid{gap:8px}.story-role-copy{padding:12px 8px;gap:5px}.story-role-copy strong{font-size:14px;line-height:1.45}.story-role-copy small{font-size:10px;line-height:1.5;min-height:30px}.story-role-choose{font-size:9px}.story-traits{gap:6px}.story-traits>span{font-size:10px;padding:5px 10px;gap:9px}.story-traits>small{max-width:none;flex-basis:100%;margin-top:3px}.story-reading-image{height:155px}.story-reading-image.story-chapter{height:225px}.story-reading-body{padding:18px 17px}.story-reading-body h3{font-size:22px}.story-passage{font-size:17px;line-height:1.9}.story-reading-meta{font-size:9px}.story-reading-image>span{left:15px;font-size:15px}.story-encounter-copy{padding:19px 17px 19px}.story-encounter-copy h3{font-size:21px}.story-encounter-image{height:130px}.story-choice-buttons{display:grid;grid-template-columns:1fr}.story-button{min-height:42px}.story-role>.story-portrait{aspect-ratio:.7/1}.story-quiz-options .story-button{flex:1}}
@media(prefers-reduced-motion:reduce){.story-role,.story-button{transition:none}.story-role:hover{transform:none}}
/* Native chapter atlases are 1983 by 793 pixels, with five columns and two rows. */
.story-reading-image.story-chapter-1{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-2{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-3{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-4{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-5{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-6{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-7{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-8{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-9{--story-cell-aspect:1.0002522068}
.story-reading-image.story-chapter-10{--story-cell-aspect:1.0002522068}