/* Hand-painted map composition: the path carries the story, signs live in the landscape. */
.journey-shell{background-color:#f1edcf;border:0;border-radius:12px;box-shadow:0 10px 45px #75753a10}
.map-intro{height:155px;padding-left:8%;gap:20px}.map-intro p{font-family:"KaiTi","STKaiti",serif;font-size:16px;color:#677252}
.main-sign{width:206px!important;min-height:0;height:90px;padding:5px 3px;border:0;border-radius:0;background:none;box-shadow:none;gap:12px;transform:rotate(-3deg);filter:drop-shadow(0 2px 0 #fff6)}
.main-sign:hover{transform:translateY(-3px) rotate(-3deg);box-shadow:none}
.main-art{width:43px;flex-basis:43px;height:64px;background:transparent;box-shadow:none;transform:rotate(-6deg)}
.main-art .book-cover{filter:drop-shadow(2px 4px 2px #5e503c35)}
.main-copy{padding:2px 0;text-shadow:1px 1px 0 #fff7de,-1px -1px 0 #fff7de,0 0 8px #fff5d4}
.main-copy strong{font-family:"KaiTi","STKaiti","Microsoft YaHei",serif;font-size:24px;color:#614729;letter-spacing:.01em;line-height:1.4}
.main-copy small{background:none;color:#87724c;padding:0;margin-top:3px;font-size:12px;letter-spacing:.01em}
.station-number{display:none}.hint-arrow{display:none}
.branch-sign,.raz-sign{position:absolute;display:flex;align-items:flex-start;justify-content:flex-start;min-height:0;height:164px;padding:24px 18px 68px 43px;background:none;border:0;box-shadow:none;filter:drop-shadow(1px 3px 1px #88734e18);isolation:isolate;gap:10px;overflow:visible;transform:rotate(var(--tilt,-2deg));transform-origin:50% 90%}
.branch-sign:before{inset:0;clip-path:none;border-radius:0;box-shadow:none;background:transparent url('assets/handdrawn-arrow.1f99e2615770.png') center center/100% 100% no-repeat;z-index:-1}
.branch-sign:after{display:none}
.branch-sign.sign-right:before{transform:scaleX(-1)}
.branch-sign.sign-plain:before{background-image:url('assets/handdrawn-plank.4865b0d5fb42.png');transform:none}
.branch-sign.sign-right{padding-left:19px;padding-right:39px}
.branch-sign.sign-plain{padding-left:18px;padding-right:18px;padding-top:20px}
.branch-sign .signpost,.branch-sign .sign-rivet{display:none}
.branch-sign .small-art{width:41px;flex:0 0 41px;height:61px;margin-top:-4px;transform:rotate(-4deg);overflow:visible}
.branch-copy{color:#644c31;line-height:1.3;text-shadow:0 1px 0 #fff7}
.branch-sign strong{font-family:"KaiTi","STKaiti","Microsoft YaHei",serif;font-size:15px;line-height:1.35;font-weight:800;overflow-wrap:normal}
.branch-sign small{font-size:10px;margin-top:5px;color:#8c7751;line-height:1.4}
.branch-sign em{display:none}
.raz-sign{height:135px;align-items:flex-start;padding:20px 25px 55px;justify-content:center}
.raz-sign .little-dot{display:none}.raz-sign .branch-copy{text-align:center}
.raz-sign strong{font-family:"KaiTi","STKaiti","Microsoft YaHei",serif;font-size:19px;color:#6b5230}
.raz-sign small{font-size:10px;color:#8d7952}
.branch-sign:hover{transform:translateY(-4px) rotate(var(--tilt,-2deg));filter:drop-shadow(1px 6px 2px #88734e22)}
.scenery-vignette{z-index:0;max-width:23%;opacity:.93;filter:none}.strawberry-patch{z-index:1;opacity:.85;width:95px}
.wood{background:none;border:0;box-shadow:none;text-shadow:0 1px 0 #fff3;color:#765333}
.wood:after{display:none}.wood.small{width:180px;height:120px;padding:20px 20px 40px;background:url('assets/handdrawn-plank.4865b0d5fb42.png') center/100% 100% no-repeat;flex-shrink:0;transform:rotate(-6deg)}
.wood.small b{font-family:"KaiTi","STKaiti",serif;font-size:26px;font-weight:800;line-height:1.2}.wood.small span:not(.wood-berry){font-size:10px;margin-top:6px;color:#8d724c}
.phase-marker{top:-70px;left:45%;font-family:"KaiTi","STKaiti",serif;font-size:20px;letter-spacing:.2em;color:#8c7951;transform:rotate(-6deg);padding:5px 20px;background:#f5e8c350;border-radius:48% 52% 40% 60%}
.handoff{width:46%;left:28%;top:-68px;padding:5px 12px;color:#806536;font-family:"KaiTi","STKaiti",serif;font-size:17px;letter-spacing:.06em;line-height:1.4;background:#f7ecc76b;border-radius:42%;text-align:center}
.handoff small{font-family:"Microsoft YaHei",sans-serif;color:#998655;font-size:10px;margin-top:5px}
.journey-end:before{display:none}.journey-end{height:240px;padding-top:40px}.wood.wide{height:130px;width:430px;padding:26px 32px 65px;background:url('assets/handdrawn-plank.4865b0d5fb42.png') center/100% 100% no-repeat;font-family:"KaiTi","STKaiti",serif;font-size:23px;line-height:1.3;letter-spacing:.03em;transform:rotate(2deg)}
.journey-end p{margin-top:4px;color:#879068}.green-line{border-bottom:0;width:12px;height:7px;border-radius:50%;background:#bcaa7e}.pink-line{background:#eddbb7;height:8px}.intro-meta .tap-note{font-family:"KaiTi","STKaiti",serif;font-size:13px}
@media(min-width:760px) and (max-width:1000px){.branch-sign{padding-left:29px;padding-right:13px;padding-top:20px;gap:6px}.branch-sign.sign-plain{padding-left:15px;padding-right:12px}.branch-sign.sign-right{padding-left:15px;padding-right:28px}.branch-sign .small-art{width:31px;flex-basis:31px;height:48px}.branch-sign strong{font-size:12px}.branch-sign small{font-size:9px}.raz-sign{padding:18px 16px 44px}.raz-sign strong{font-size:16px}.main-sign{width:190px!important}.main-copy strong{font-size:22px}.main-art{width:35px;flex-basis:35px;height:54px}}
@media(max-width:759px){.map-intro{height:150px;padding-left:5%;gap:14px}.map-intro p{font-size:13px}.wood.small{width:145px;height:105px;padding-top:17px}.wood.small b{font-size:22px}.wood.small span:not(.wood-berry){font-size:9px}.main-sign{width:166px!important;height:90px;gap:8px;padding:5px 0}.main-art{width:32px;flex-basis:32px;height:49px}.main-copy strong{font-size:20px}.main-copy small{font-size:10px}.branch-sign,.raz-sign{display:none}.mobile-branches{top:101px;padding:6px 9px;background:#f8efdba8;border:0;color:#85714f;font-family:"KaiTi","STKaiti",serif;font-size:12px;max-width:170px;box-shadow:none}.scenery-vignette{max-width:27%;width:90px!important;opacity:.7}.strawberry-patch{width:65px}.phase-marker{left:40%;top:-51px;font-size:17px}.handoff{left:12%;width:76%;font-size:14px;top:-61px}.handoff small{font-size:8px}.wood.wide{width:310px;height:116px;max-width:95%;font-size:19px;padding:24px 23px 58px}.journey-end{height:200px}.journey-shell{border-radius:8px}}
.journey-shell{background-image:url('assets/storybook-meadow.c42e822bf50b.png');background-size:100% 100%;background-position:center center}
.wood.small{padding-top:14px}.wood.small b{font-size:25px;line-height:1.1}.wood.small span:not(.wood-berry){margin-top:4px}
@media(max-width:759px){.journey-shell{background-size:auto 100%}.wood.small{padding-top:13px}.wood.small b{font-size:21px}}
.phase-marker{display:none}
.branch-sign[data-key="ox6-raz"] strong{font-size:14px;line-height:1.2}
/* Mainline titles are landmarks; only side books use standing signs. */
.main-sign{width:230px!important}.main-art{width:49px;flex-basis:49px;height:71px}
.main-sign[data-key^="ox"] .main-copy strong{font-size:32px;font-weight:900;color:#873f2d;-webkit-text-stroke:.25px #873f2d;letter-spacing:.01em}
.main-copy strong{font-size:27px;font-weight:800}.main-copy small{font-size:13px;color:#775c35}
@media(min-width:760px) and (max-width:1000px){.main-sign{width:215px!important}.main-sign[data-key^="ox"] .main-copy strong{font-size:28px}.main-art{width:42px;flex-basis:42px;height:62px}}
@media(max-width:759px){.main-sign{width:166px!important}.main-sign[data-key^="ox"] .main-copy strong{font-size:24px}.main-copy strong{font-size:22px}.main-copy small{font-size:11px}.main-art{width:32px;flex-basis:32px;height:49px}}
.branch-sign{padding-top:20px;padding-bottom:61px;padding-left:36px;padding-right:15px;gap:8px}.branch-sign .small-art{width:36px;flex-basis:36px;height:54px}.branch-sign strong{font-size:14px}.branch-sign.sign-right{padding-left:17px;padding-right:34px}.branch-sign.sign-plain{padding-left:16px;padding-right:14px;padding-top:18px}.raz-sign{padding-top:17px;justify-content:center}.raz-sign strong{font-size:18px}
/* Let the landscape fill the desktop window, while prose keeps a readable line length. */
@media(min-width:760px){
 .site-header{max-width:none;margin:0 18px;padding:0 clamp(22px,3vw,64px)}
 .intro{max-width:none;margin-left:18px;margin-right:18px;padding-left:clamp(22px,3vw,64px);padding-right:clamp(22px,3vw,64px)}
 .journey-shell{width:calc(100% - 32px);max-width:none;border-radius:8px}
 .map-intro{padding-left:5%;gap:26px}
 .main-sign{width:var(--main-width,230px)!important}
 .main-sign[data-key^="ox"] .main-copy strong{font-size:clamp(32px,2.1vw,38px)}
 .main-copy strong{font-size:clamp(27px,1.8vw,33px)}
 .main-art{width:clamp(49px,3vw,58px);flex-basis:clamp(49px,3vw,58px);height:clamp(71px,4.3vw,82px)}
 .branch-sign{padding-top:23px;padding-left:39px;padding-right:17px;gap:9px}
 .branch-sign.sign-right{padding-left:19px;padding-right:38px}
 .branch-sign.sign-plain{padding:21px 18px 61px}
 .branch-sign .small-art{width:clamp(36px,2.5vw,44px);flex-basis:clamp(36px,2.5vw,44px);height:62px}
 .branch-sign strong{font-size:clamp(14px,1.04vw,16px);line-height:1.22}
 .branch-sign small{font-size:clamp(10px,.71vw,12px)}
 .raz-sign{padding-top:23px}
 .raz-sign strong{font-size:clamp(18px,1.3vw,22px)}
 .raz-sign[data-key="ox6-raz"]{padding-top:18px}
 .raz-sign[data-key="ox6-raz"] strong{font-size:clamp(14px,.94vw,16px)}
 .route-note{max-width:none;margin-left:32px;margin-right:32px}
 footer{max-width:none;margin-left:32px;margin-right:32px;padding-left:clamp(8px,2vw,40px);padding-right:clamp(8px,2vw,40px)}
}
@media(min-width:760px) and (max-width:1000px){
 .branch-sign{padding-left:34px;padding-right:14px;gap:7px}
 .branch-sign.sign-right{padding-left:15px;padding-right:32px}
 .branch-sign.sign-plain{padding-left:14px;padding-right:14px}
 .branch-sign .small-art{width:33px;flex-basis:33px;height:53px}
 .branch-sign strong{font-size:13px}.branch-sign small{font-size:9px}
 .raz-sign strong{font-size:17px}
 .main-sign[data-key^="ox"] .main-copy strong{font-size:30px}
}
@media(max-width:759px){.mobile-branches{white-space:nowrap;font-size:10px;padding:5px 6px;max-width:172px}}
/* Mainline landmarks have timber posts; companion books are small paper notes. */
.main-sign{top:-100px;width:var(--main-width,268px)!important;height:170px;min-height:0;padding:19px 21px 75px;background:none;border:0;border-radius:0;box-shadow:none;isolation:isolate;align-items:flex-start;gap:11px;transform:rotate(-2deg);filter:drop-shadow(1px 3px 2px #69533920)}
.main-sign:before{content:"";position:absolute;inset:0;background:url('assets/handdrawn-plank.4865b0d5fb42.png') center/100% 100% no-repeat;z-index:-1}
.main-sign:hover{transform:translateY(-3px) rotate(-2deg);box-shadow:none}
.main-art{width:49px;flex-basis:49px;height:69px;margin-top:-2px;transform:rotate(-5deg)}
.main-copy{padding:0;text-shadow:0 1px 0 #fff8;align-self:flex-start}
.main-copy strong{font-size:29px;line-height:1.2}
.main-sign[data-key^="ox"] .main-copy strong{font-size:32px;line-height:1.2;color:#873f2d}
.main-copy small{margin-top:5px;font-size:12px;color:#785837}
.branch-sign,.branch-sign.sign-right,.branch-sign.sign-plain,.raz-sign{min-height:0;padding:12px 14px;gap:11px;align-items:center;justify-content:flex-start;background:linear-gradient(115deg,#fcf5e7f5,#f3e8cfe8);border:1px solid #c7b58c91;border-radius:3px 10px 4px 7px;box-shadow:2px 4px 8px #5f5a3615;filter:none;transform-origin:center center}
.branch-sign:before,.branch-sign:after{display:none!important}
.branch-sign:hover{transform:translateY(-3px) rotate(var(--tilt,-1deg));filter:none;box-shadow:2px 7px 12px #5f5a3624}
.branch-sign .small-art{width:43px;flex-basis:43px;height:64px;margin:0;transform:rotate(-3deg)}
.branch-sign .branch-copy{color:#575f43;text-shadow:none}
.branch-sign strong,.branch-sign[data-key="ox6-raz"] strong{font-family:"KaiTi","STKaiti","Microsoft YaHei",serif;font-size:15px;line-height:1.25;color:#515b3e}
.branch-sign small{font-size:10px;line-height:1.4;margin-top:4px;color:#8b795a}
.branch-sign em{display:block;font-family:"KaiTi","STKaiti",serif;font-style:normal;font-size:10px;line-height:1.3;margin-top:5px;color:#9c8055}
.raz-sign .branch-copy{text-align:left}.raz-sign strong{font-size:18px}
.handoff{top:-170px}
@media(min-width:1500px){.main-sign[data-key^="ox"] .main-copy strong{font-size:35px}.main-copy strong{font-size:31px}.branch-sign strong{font-size:16px}}
@media(max-width:759px){
 .main-sign{top:-78px;height:144px;width:196px!important;padding:18px 16px 64px;gap:8px}
 .main-art{width:33px;flex-basis:33px;height:51px;margin-top:-2px}
 .main-sign[data-key^="ox"] .main-copy strong{font-size:24px}.main-copy strong{font-size:23px}.main-copy small{font-size:10px;margin-top:4px}
 .branch-sign,.raz-sign{display:none}
 .mobile-branches{top:82px;background:#f9efd6c9}
 .handoff{top:-160px}
}
/* Companion reading uses arrow-shaped timber; only the artwork is mirrored. */
@media(min-width:760px){
 .branch-sign,.branch-sign.sign-right,.branch-sign.sign-plain,.raz-sign{display:flex;align-items:flex-start;justify-content:flex-start;min-height:0;padding:25px 16px 82px 45px;gap:8px;background:none;border:0;border-radius:0;box-shadow:none;isolation:isolate;filter:drop-shadow(1px 3px 2px #68543320);transform-origin:50% 89%}
 .branch-sign:before{content:"";display:block!important;position:absolute;inset:0;z-index:-1;clip-path:none;border-radius:0;box-shadow:none;background:transparent url('assets/handdrawn-arrow.1f99e2615770.png') center/100% 100% no-repeat;transform:none}
 .branch-sign.sign-right{padding-left:17px;padding-right:44px}
 .branch-sign.sign-right:before{transform:scaleX(-1)}
 .branch-sign:hover{box-shadow:none;filter:drop-shadow(1px 6px 3px #6854332b);transform:translateY(-3px) rotate(var(--tilt,-2deg))}
 .branch-sign .small-art{width:38px;flex:0 0 38px;height:55px;margin-top:-2px;transform:rotate(-4deg)}
 .branch-sign .branch-copy{align-self:flex-start;color:#654b30;text-shadow:0 1px 0 #fff7;min-width:0}
 .branch-sign strong,.branch-sign[data-key="ox6-raz"] strong{font-family:"KaiTi","STKaiti","Microsoft YaHei",serif;font-size:15px;line-height:1.18;color:#654b30;font-weight:800}
 .branch-sign small{font-size:10px;line-height:1.25;color:#8c714d;margin-top:4px}
 .branch-sign em{display:none}
 .raz-sign,.raz-sign.sign-right{padding-top:22px;padding-bottom:69px;justify-content:center}
 .raz-sign .branch-copy{text-align:center}
 .raz-sign strong{font-size:19px;line-height:1.18}
 .raz-sign[data-key="ox6-raz"] strong{font-size:14px}
}
@media(min-width:760px) and (max-width:1000px){
 .branch-sign{padding-left:40px;padding-right:14px;gap:7px}
 .branch-sign.sign-right{padding-left:15px;padding-right:39px}
 .branch-sign .small-art{width:34px;flex-basis:34px;height:51px}
 .branch-sign strong{font-size:14px}.branch-sign small{font-size:9px}
 .raz-sign strong{font-size:18px}
}
/* Landscape and road are a single painting, with HTML landmarks above it. */
.journey-shell{background-image:none;background-color:#e7e5cd}
.map-intro{background:#eee9d2}
.painted-terrain{position:absolute;left:0;width:100%;max-width:none;object-fit:fill;z-index:0;pointer-events:none}
.roads{z-index:1}.strawberry-patch{z-index:2}
.compact-map .handoff{display:none}
.station{pointer-events:none}.station button{pointer-events:auto}
.journey-end{background:#eee9d2}
@media(min-width:760px) and (max-width:1099px){
 .branch-sign,.raz-sign{display:none!important}
 .mobile-branches{display:block;position:absolute;top:82px;white-space:nowrap;font-size:11px;padding:5px 8px;max-width:180px;background:#f9efd6d4;border:0;box-shadow:none;color:#85714f;font-family:"KaiTi","STKaiti",serif;border-radius:7px}
 .handoff{top:-160px}
}
/* Native media stays within the lesson panel; terrain and landmarks keep their layout. */
.lesson-media-section{margin-top:24px}
.lesson-media-section>h3{font-size:15px;line-height:1.5;margin:0 0 12px;color:#586848}
.supplement-section{padding-top:20px;border-top:1px solid #e7e5d4}
.supplement-section[hidden]{display:none}
.media-list{display:grid;gap:22px}
.media-card{min-width:0}
.media-card-heading{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.media-card .video-title{font-size:13px;font-weight:600;line-height:1.6;margin:0;color:#505b41;overflow-wrap:anywhere}
.media-kind{display:inline-block;flex-shrink:0;font-size:10px;line-height:1.7;padding:2px 7px;border-radius:5px;background:#edf0e0;color:#74845b}
.media-description{font-size:12px;color:#858671;line-height:1.8;margin:-3px 0 12px}
.media-card .real-video{display:block;width:100%;height:auto;max-height:65dvh;object-fit:contain;background:#25291f}
.real-audio{display:block;width:100%;height:54px}
@media(max-width:759px){.media-card-heading{flex-wrap:wrap;gap:5px}.media-list{gap:18px}.lesson-media-section{margin-top:20px}}