.stories-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:80px;align-items:center;padding:58px 64px;margin-block:0 70px;border-radius:38px;background:#e8def0;position:relative;overflow:hidden}
.story-peek{display:block;position:relative;max-width:310px;margin:auto;transform:rotate(-4deg);box-shadow:10px 13px 0 #cab6dc;border:3px solid var(--ink);border-radius:6px;background:white}
.story-peek img{width:100%;height:auto;border-radius:3px}.peek-label{position:absolute;bottom:-17px;left:-18px;padding:10px 14px;background:#f4e7af;border:2px solid var(--ink);font-size:11px;letter-spacing:.1em;font-weight:800;transform:rotate(4deg)}
.stories-feature-copy h2{font-size:clamp(32px,4vw,49px);letter-spacing:-1.8px;line-height:1.08;margin:0 0 22px}.stories-feature-copy>p:not(.eyebrow){line-height:1.75;max-width:460px}.stories-feature-copy .story-note{font-size:12px;margin-top:20px;color:var(--muted)}.story-feature-title{margin-bottom:25px}.stories-nav{font-weight:700}
.stories-intro{padding-block:70px 48px}.stories-intro h1{max-width:900px;font-size:clamp(39px,5.4vw,68px);line-height:1.08;letter-spacing:-2.8px;margin:0 0 24px}.stories-intro h1 em{color:var(--purple);font-style:normal}.stories-intro>p:not(.eyebrow){max-width:660px;font-size:17px;line-height:1.8;color:var(--muted)}.reading-tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.reading-tags span{font-size:12px;border:1px solid var(--line);border-radius:30px;padding:8px 14px}
.story-shelf{margin-bottom:70px}.story-featured{display:grid;grid-template-columns:340px 1fr;gap:70px;align-items:center;padding:45px 60px;background:#eee5f2;border-radius:32px}.story-cover{display:block;position:relative;max-width:300px;transform:rotate(-2deg);box-shadow:9px 10px 0 #ccb9d8;border:2px solid var(--ink)}.story-cover img{display:block;width:100%;height:auto}.cover-sticker{position:absolute;top:20px;right:-18px;transform:rotate(6deg);padding:11px 16px;background:#e0edc6;border:2px solid var(--ink);font-size:11px;font-weight:800;letter-spacing:.1em}
.story-description h2{font-size:clamp(33px,4vw,52px);line-height:1.05;letter-spacing:-1.8px;margin:0 0 10px}.original-title{color:var(--muted);font-style:italic;font-size:14px}.story-description>p:not(.eyebrow){line-height:1.8;max-width:490px}.story-meta{font-size:13px;color:var(--muted);line-height:1.8;margin-block:22px}.story-meta span{padding-inline:8px}.story-description .start-course{margin-top:12px}.reading-note{display:flex;gap:30px;max-width:800px;margin-bottom:70px;align-items:flex-start}.reading-note>span{display:grid;place-items:center;background:#e3eccc;border-radius:24px;min-width:80px;height:80px;font:italic 35px Georgia,serif}.reading-note h2{font-size:24px;margin:0 0 10px}.reading-note p{line-height:1.8;color:var(--muted);margin:0}
.story-intro{max-width:850px;padding-block:32px 40px;text-align:center}.back-link{display:inline-block;font-size:14px;text-decoration:underline;text-underline-offset:4px;margin-bottom:30px}.story-intro h1{font-size:clamp(38px,6vw,65px);letter-spacing:-2px;margin:0 0 10px;line-height:1.1}.story-intro>p:not(.eyebrow){max-width:600px;line-height:1.8;margin-inline:auto}.theme-note{font-size:12px;color:var(--muted)}.story-intro .start-course{margin-top:15px}
.chapter-nav{position:sticky;top:0;z-index:5;border-block:1px solid var(--line);background:#faf7f2f5;backdrop-filter:blur(12px);padding:12px 20px;text-align:center}.chapter-nav>div{display:flex;gap:8px;align-items:center;justify-content:center}.chapter-nav>div>span{font-size:12px;margin-right:10px}.chapter-nav a{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:13px;font-weight:700;background:white}.chapter-nav a:hover{background:var(--lilac)}.chapter-nav p{font-size:11px;color:var(--muted);margin:9px 0 0}
.comic-pages{max-width:850px;margin:auto;padding:0 20px}.comic-chapter{scroll-margin-top:115px}.chapter-heading{padding:42px 0 12px;text-align:center}.chapter-heading .eyebrow{margin-bottom:10px}.chapter-heading h2{font-size:27px;margin:0 0 20px}.comic-page{margin:0 0 42px;scroll-margin-top:115px}.page-image{display:block;background:#eee6f1;cursor:zoom-in}.page-image img{display:block;width:100%;height:auto}.comic-page figcaption{display:flex;justify-content:space-between;padding:12px 2px;font-size:11px;color:var(--muted)}.page-transcript{font-size:13px;border-bottom:1px solid var(--line);padding:6px 2px 15px}.page-transcript summary{cursor:pointer;color:var(--muted)}.page-transcript dl{margin-bottom:0}.page-transcript dl>div{display:flex;gap:14px;padding:8px 0}.page-transcript dt{min-width:70px;font-weight:700}.page-transcript dd{margin:0;line-height:1.6}.story-end{text-align:center;padding:40px 20px 70px}.story-end h2{font-size:clamp(28px,4vw,42px);letter-spacing:-1px;line-height:1.15}.story-end p{line-height:1.7}.story-end .back-link{display:block;width:fit-content;margin:28px auto 0}
.comic-zoom{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:0;border:0;background:#211c2b;color:white}.comic-zoom::backdrop{background:#211c2bf5}.comic-zoom[open]{display:flex;flex-direction:column}.comic-zoom header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));flex-shrink:0}.zoom-close{padding:10px 18px;border-radius:20px;background:#faf7f2;color:#352742;border:0;cursor:pointer}.zoom-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}.zoom-scroll img{width:1024px;max-width:none;height:auto;margin:auto}.comic-zoom>p{margin:0;padding:10px 16px max(10px,env(safe-area-inset-bottom));font-size:12px;color:#e2d6e9;text-align:center}.page-load-error{padding:18px;border:1px solid var(--line)}.page-load-error button{cursor:pointer;padding:8px;background:#e8def0;border:1px solid var(--ink);border-radius:8px}
@media(max-width:900px){.story-featured{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:35px;padding:35px}.stories-feature{gap:40px;padding:40px}}
@media(max-width:600px){.stories-feature{grid-template-columns:1fr;gap:45px;padding:30px 24px;border-radius:26px;margin-bottom:45px}.story-peek{max-width:220px}.stories-feature-copy h2{font-size:36px}.stories-feature-copy>p:not(.eyebrow){font-size:15px}.stories-intro{padding-block:42px 30px}.stories-intro h1{letter-spacing:-1.8px;font-size:40px}.stories-intro>p:not(.eyebrow){font-size:15px}.story-featured{grid-template-columns:1fr;gap:35px;padding:30px 24px}.story-cover{width:230px;max-width:100%;margin:auto}.story-description h2{font-size:36px}.story-description>p:not(.eyebrow){font-size:15px}.reading-note{gap:18px}.reading-note>span{min-width:52px;height:58px;border-radius:16px;font-size:27px}.reading-note h2{font-size:21px}.reading-note p{font-size:14px}.story-intro{padding-top:24px}.story-intro h1{font-size:40px}.comic-pages{padding:0 8px}.comic-page figcaption,.page-transcript{margin-inline:8px}.chapter-nav{padding-inline:8px}.chapter-nav>div{gap:6px}.chapter-nav>div>span{margin-right:3px}.chapter-nav a{width:32px;height:32px}.story-reading .header{min-height:76px}.story-end{padding-bottom:45px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* First-page language experiment. Original raster panels remain intact underneath. */
.bubble-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#eee5f2;border:1px solid #d8c8e3;border-radius:18px;padding:16px 18px;margin-bottom:18px}.bubble-controls strong{font-size:14px;display:block}.bubble-controls small{display:block;font-size:12px;margin-top:5px;color:var(--muted)}.bubble-buttons{display:flex;gap:8px}.bubble-buttons button{min-height:44px;padding:10px 16px;border:2px solid #76518e;border-radius:22px;background:#fff;color:#403253;cursor:pointer;font-weight:700;font-size:14px}.bubble-buttons button[aria-pressed=true]{background:#403253;color:#fff}.bubble-buttons button:focus-visible{outline:3px solid #76518e;outline-offset:4px}
.live-comic-page{display:grid;grid-template-columns:1fr 1fr;gap:0;background:white}.live-comic-panel{position:relative;container-type:inline-size;min-width:0}.live-comic-panel.wide{grid-column:1/-1}.live-comic-panel>svg{display:block;width:100%;height:auto}.live-bubble{position:absolute;top:3%;width:max-content;max-width:48%;min-height:0;border:2px solid #25232a;border-radius:48% / 42%;background:white;color:#141218;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:13px 18px;gap:6px;font-family:Arial,"Segoe UI",Tahoma,sans-serif;box-sizing:border-box}.bubble-left{left:3%}.bubble-right{right:3%}.bubble-roman{font-size:clamp(16px,4.6cqw,22px);line-height:1.22;font-weight:600}.bubble-thai{font-size:clamp(15px,4.1cqw,20px);line-height:1.45}.bubble-english{font-size:clamp(13px,3.65cqw,18px);line-height:1.25}.live-bubble [hidden]{display:none!important}
@media(max-width:600px){.live-comic-page{grid-template-columns:1fr}.live-comic-panel.wide{grid-column:auto}.bubble-controls{align-items:flex-start;flex-direction:column;gap:12px;margin-inline:8px;padding:15px}.bubble-buttons{width:100%}.bubble-buttons button{flex:1}.live-bubble{padding:12px 15px;gap:5px}.bubble-roman{font-size:clamp(16px,4.8cqw,22px)}}

.bubble-enlarge{display:block;margin:12px auto 0;padding:10px 16px;min-height:44px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);cursor:pointer;font-size:13px}
.zoom-scroll .zoom-live-page{width:1024px;margin:auto;grid-template-columns:1fr 1fr}.zoom-scroll .zoom-live-page .wide{grid-column:1/-1}.zoom-scroll>img[hidden]{display:none}

/* Balloon tails follow the speaker; height now comes only from visible text. */
.live-bubble::before,.live-bubble::after{content:"";position:absolute;width:0;height:0;pointer-events:none;border-style:solid}
.bubble-left::before{right:8px;bottom:-16px;border-width:20px 0 0 20px;border-color:transparent transparent transparent #25232a;transform:rotate(-14deg)}
.bubble-left::after{right:10px;bottom:-11px;border-width:16px 0 0 16px;border-color:transparent transparent transparent white;transform:rotate(-14deg)}
.bubble-right::before{left:8px;bottom:-16px;border-width:20px 20px 0 0;border-color:#25232a transparent transparent transparent;transform:rotate(14deg)}
.bubble-right::after{left:10px;bottom:-11px;border-width:16px 16px 0 0;border-color:white transparent transparent transparent;transform:rotate(14deg)}