/* Landscape master: every spatial value shares one unit, 1px at the 1920px master; display width is capped at 1080px.
   app.js sets --u from the scrollbar-free viewport. The CSS value is its no-JS fallback. */
@font-face{font-family:'Forest Serif';src:url('assets/fonts/forest-serif.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Forest Serif';src:url('assets/fonts/forest-serif-bold.woff') format('woff');font-style:normal;font-weight:700;font-display:swap}
:root{--ink:#233b22;--cream:#fff0ce;--gold:#dfbc68;--u:min(calc(100vw / 1920),.5625px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(148 * var(--u))}
body{margin:0;overflow-x:clip;background:#000;color:var(--ink);font:calc(38 * var(--u))/1.32 'Forest Serif',Georgia,serif}
a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{font-family:inherit}
a:focus-visible,button:focus-visible{outline:calc(4 * var(--u)) solid var(--gold);outline-offset:calc(8 * var(--u))}
h1,h2,p,figure{margin:0}h1,h2{font-weight:700;line-height:1.12}img{max-width:100%;height:auto}
.site-shell{width:100%;max-width:1080px;margin:0 auto;background:#281f13}
header{position:fixed;z-index:50;top:0;left:50%;transform:translateX(-50%);width:calc(1920 * var(--u));padding:calc(18 * var(--u)) calc(58 * var(--u));display:flex;gap:calc(45 * var(--u));align-items:center;color:var(--cream);background:linear-gradient(#13210cea,#18290dba);box-shadow:0 calc(6 * var(--u)) calc(30 * var(--u)) #10170c45}
.brand{display:flex;align-items:center;gap:calc(15 * var(--u));text-decoration:none;white-space:nowrap;font-size:calc(42 * var(--u));line-height:1.15;text-shadow:0 calc(4 * var(--u)) calc(6 * var(--u)) #102010}
.brand img{width:calc(140 * var(--u));height:calc(90 * var(--u));object-fit:contain}
.brand small{display:block;font-size:calc(26 * var(--u));color:#ead89b;margin-top:calc(6 * var(--u))}
nav{display:flex;gap:calc(49 * var(--u));margin-left:auto}
nav a{text-decoration:none;font-size:calc(32 * var(--u));padding:calc(15 * var(--u)) 0;border-bottom:calc(4 * var(--u)) solid transparent}
nav a:hover,nav a.active{color:#f8dda0;border-bottom-color:#cdaa59}#menu{display:none}
main{width:100%}
.hero{position:relative;z-index:10;aspect-ratio:1526/1030}
.hero::before{content:"";position:absolute;inset:0 0 calc(134 * var(--u));background:none center/cover}
.hero-art{position:relative;display:block;width:100%;z-index:2}
.hero-copy{position:absolute;z-index:3;top:24%;left:8%;width:81%;color:var(--cream);text-shadow:0 calc(4 * var(--u)) calc(6 * var(--u)) #181a0b,0 calc(6 * var(--u)) calc(28 * var(--u)) #112008}
.hero h1{font-size:calc(156 * var(--u));letter-spacing:calc(-3 * var(--u));white-space:nowrap}
.statement{font-size:calc(60 * var(--u));line-height:1.2;margin:calc(10 * var(--u)) 0 calc(15 * var(--u));text-align:center;width:88%}
.lead{font-size:calc(40 * var(--u));text-align:center;width:88%;line-height:1.4}
.button{display:table;margin:calc(38 * var(--u)) auto 0;transform:translateX(-5%);padding:calc(19 * var(--u)) calc(53 * var(--u));border:calc(4 * var(--u)) solid #a58236;border-radius:calc(53 * var(--u));color:#fff2d5;background:#2d492ae8;box-shadow:0 calc(6 * var(--u)) calc(8 * var(--u)) #17230c77;text-shadow:none;text-decoration:none;font-size:calc(36 * var(--u))}
.button:hover{background:#416037}
.film{position:relative;z-index:1;aspect-ratio:16/9;width:100%;margin-top:calc(-134 * var(--u));background:#182716}
.film video{display:block;width:100%;height:100%;object-fit:contain}
.game-chapter{position:relative;z-index:12;margin-top:calc(-58 * var(--u))}
.scene{position:relative;aspect-ratio:var(--art-ratio)}
.gathering{z-index:5;margin-bottom:calc(-122 * var(--u))}
.foraging{z-index:4;margin-bottom:calc(-94 * var(--u))}
.matching{z-index:3;margin-bottom:calc(-122 * var(--u))}
.page-art{display:block;position:relative;z-index:2;width:100%;pointer-events:none}
.copy{position:absolute;z-index:3;color:var(--ink);font-size:calc(38 * var(--u));line-height:1.32}
.copy h2{font-size:calc(60 * var(--u));margin-bottom:calc(18 * var(--u))}
.gathering .copy{top:17%;left:57.5%;width:38%;text-align:center}
.foraging .copy{top:26%;left:7.5%;width:35.5%}
.foraging .copy p{font-size:calc(36 * var(--u))}
.matching .copy{top:16%;left:60.5%;width:34%}
.matching .copy h2{font-size:calc(54 * var(--u))}
.matching .copy p{font-size:calc(36 * var(--u))}
.video-slot{position:absolute;z-index:1;left:var(--slot-x);top:var(--slot-y);width:var(--slot-w);aspect-ratio:var(--slot-ratio);transform:translate(-50%,-50%) rotate(var(--tilt));display:flex;align-items:center;justify-content:center;background:#51381e;box-shadow:inset 0 0 calc(22 * var(--u)) #1f170e}
/* Native 854×480 footage: the surrounding opening may be wider, but video never is.
   Thin wood side mats preserve the 16:9 image without stretching or cropping. */
.video-slot video{display:block;aspect-ratio:854/480;height:100%;max-height:calc(480 * var(--u));width:auto;max-width:calc(854 * var(--u));object-fit:contain;background:#1b2816;flex-shrink:0}
.phone-foreground{display:none}
.visual-description{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.progression{position:relative;z-index:2}
.recipe-paper{position:relative;padding:calc(75 * var(--u)) calc(85 * var(--u)) calc(220 * var(--u));border:calc(72 * var(--u)) solid transparent;border-image:none 110 fill / calc(72 * var(--u)) / 0 stretch;color:var(--ink);text-align:center}
.recipe-paper h2{font-size:calc(66 * var(--u));margin-bottom:calc(15 * var(--u))}
.pear-line{display:block;width:100%;margin:calc(8 * var(--u)) auto calc(23 * var(--u))}
.pear-counts{display:block;border-top:calc(2 * var(--u)) dashed #b28a42;padding-top:calc(19 * var(--u))}
.pear-counts img{display:block;width:100%}
.recipe-close{margin:calc(25 * var(--u)) 0 0;font-size:calc(41 * var(--u))}
.progression-foreground{position:relative;display:block;width:100%;margin-top:calc(-395 * var(--u));pointer-events:none;z-index:3}
footer{padding:calc(26 * var(--u)) calc(56 * var(--u)) calc(160 * var(--u));display:flex;justify-content:space-between;gap:calc(38 * var(--u));color:var(--cream);font-size:calc(30 * var(--u))}footer a{text-decoration:none}
.motion{position:fixed;bottom:calc(22 * var(--u));right:max(calc(22 * var(--u)),calc((100% - 1080px)/2 + 22 * var(--u)));z-index:60;background:#172e1fe8;border:calc(2 * var(--u)) solid #e4c677;border-radius:calc(47 * var(--u));color:var(--cream);padding:calc(17 * var(--u)) calc(28 * var(--u));cursor:pointer;font:calc(26 * var(--u))/1.4 Arial,sans-serif}
.skip{position:fixed;top:-100px;z-index:100;background:white;color:black;padding:15px;font:16px Arial,sans-serif}.skip:focus{top:10px}
/* Review-only controls remain legible independently of the illustrated master. */
.dev-toggle{position:fixed;left:12px;bottom:12px;z-index:100;color:#fff;background:#13291fed;border:1px solid #dab86a;border-radius:24px;padding:9px 14px;font:14px/1.4 Arial,sans-serif;cursor:pointer}
.dev-layer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.asset-label{position:absolute;max-width:calc(100vw - 10px);padding:3px 7px;border-radius:4px;background:#071810ed;color:#fff2ab;border:1px solid #eac760;box-shadow:0 2px 5px #0006;font:12px/1.4 ui-monospace,monospace;white-space:nowrap;pointer-events:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(forced-colors:active){.copy,.recipe-paper{position:relative;padding:calc(75 * var(--u)) calc(85 * var(--u)) calc(220 * var(--u));border:calc(72 * var(--u)) solid transparent;border-image:none 110 fill / calc(72 * var(--u)) / 0 stretch;color:var(--ink);text-align:center}.hero-copy{background:Canvas;color:CanvasText;text-shadow:none}}

/* Agreed ingredient row is retained. New Section4 styling is isolated. */
.ingredient-families{display:block;width:calc(1300 * var(--u));margin:calc(25 * var(--u)) auto 0}
.progression{background:#172716 none center/cover}

/* Section4 uses a1080-unit composition derived from the same single master unit.
   The placeholder's intrinsic dimensions never alter the authored video or frame. */
.friends-chapter{--f:calc(var(--u) * 1920 / 1080);position:relative;z-index:11;margin-top:calc(-150 * var(--u));background:none}
.friends-header{position:relative;z-index:6;height:calc(850 * var(--f))}
.friends-animals{position:relative;z-index:5;height:calc(1900 * var(--f));margin-top:calc(-90 * var(--f))}
.friends-header-art,.friends-animals-art{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.friends-panel-a{top:0;height:calc(700 * var(--f))}.friends-panel-b{top:calc(590 * var(--f));height:calc(700 * var(--f))}.friends-panel-c{top:calc(1180 * var(--f));height:calc(720 * var(--f))}
.friends-heading,.friends-intro,.animal-copy,.friends-closing{position:absolute;z-index:4;color:var(--ink);text-align:center}
.friends-heading{left:calc(265 * var(--f));top:calc(88 * var(--f));width:calc(550 * var(--f));height:calc(152 * var(--f));display:flex;flex-direction:column;justify-content:center;gap:calc(8 * var(--f))}
.friends-heading h2{font-size:calc(50 * var(--f));line-height:1.05}
.friends-heading p{font-size:calc(21.375 * var(--f));white-space:nowrap}
.friends-video{position:absolute;z-index:3;left:50%;top:calc(280 * var(--f));width:calc(854 * var(--u));height:calc(480 * var(--u));transform:translateX(-50%)}
.friends-video video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.friends-frame{position:absolute;z-index:2;left:calc(-158.31729055258467 * var(--u));top:calc(-164.21052631578948 * var(--u));width:calc(1169.1122994652405 * var(--u));height:calc(808.421052631579 * var(--u));max-width:none;clip-path:none;pointer-events:none}
.friends-intro{left:calc(230 * var(--f));top:calc(622 * var(--f));width:calc(620 * var(--f));height:calc(115 * var(--f));display:flex;flex-direction:column;justify-content:center;gap:calc(7 * var(--f))}
.friends-intro h3{font-size:calc(30.375 * var(--f));line-height:1.12;margin:0}
.friends-intro p{font-size:calc(21.375 * var(--f));line-height:1.28}
.animal-sprite{position:absolute;z-index:3;width:calc(240 * var(--f));height:calc(240 * var(--f));filter:drop-shadow(0 calc(3 * var(--f)) calc(5 * var(--f)) #10210c70)}
.animal-still,.animal-sprite canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.animal-sprite.sprite-ready .animal-still{visibility:hidden}
.animal-copy{width:calc(250 * var(--f));height:calc(145 * var(--f));display:flex;flex-direction:column;justify-content:center;gap:calc(5.625 * var(--f));font-size:calc(21.375 * var(--f));line-height:1.28}
.animal-copy h3{font-size:calc(33.75 * var(--f));line-height:1.12;margin:0}
.fox .animal-sprite{left:calc(215 * var(--f));top:calc(95 * var(--f))}.fox .animal-copy{left:calc(542 * var(--f));top:calc(150.0 * var(--f));width:calc(250 * var(--f));height:calc(130 * var(--f))}
.badger .animal-sprite{left:calc(735 * var(--f));top:calc(330 * var(--f))}.badger .animal-copy{left:calc(340.3 * var(--f));top:calc(374.5 * var(--f));width:calc(230 * var(--f));height:calc(135 * var(--f))}
.hedgehog .animal-sprite{left:calc(170 * var(--f));top:calc(649.8 * var(--f))}.hedgehog .animal-copy{left:calc(502.65 * var(--f));top:calc(704.8 * var(--f));width:calc(240 * var(--f));height:calc(130 * var(--f))}
.owl .animal-sprite{left:calc(725 * var(--f));top:calc(876.05 * var(--f))}.owl .animal-copy{left:calc(360.4 * var(--f));top:calc(931.05 * var(--f));width:calc(220 * var(--f));height:calc(130 * var(--f))}
.raccoon .animal-sprite{left:calc(207 * var(--f));top:calc(1253 * var(--f))}.raccoon .animal-copy{left:calc(540.3 * var(--f));top:calc(1308.0 * var(--f));width:calc(240 * var(--f));height:calc(130 * var(--f))}
.mouse .animal-sprite{left:calc(720 * var(--f));top:calc(1440.7 * var(--f))}.mouse .animal-copy{left:calc(310.35 * var(--f));top:calc(1495.7 * var(--f));width:calc(280 * var(--f));height:calc(130 * var(--f))}
.friends-closing{left:calc(284.375 * var(--f));top:calc(1696.4 * var(--f));width:calc(500 * var(--f));height:calc(88 * var(--f));display:flex;align-items:center;justify-content:center;font-size:calc(33.75 * var(--f));line-height:1.12;font-weight:700}

.friends-chapter::before{content:"";position:absolute;inset:0;z-index:0;background:none center/100% auto repeat-y;mask-image:linear-gradient(transparent,#000 calc(100 * var(--f)),#000 calc(100% - 100 * var(--f)),transparent);pointer-events:none}

.frame-geometry{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Section 5: one fixed composition, scaled by the existing landscape unit.
   Photographs remain original lossless assets, never recoloured, filtered or stretched. */
.story-chapter{--s:calc(var(--u) * 1920 / 1080);position:relative;z-index:10;margin-top:calc(-90 * var(--s));background:transparent;isolation:isolate}
.story-film{position:relative;z-index:1;width:100%;aspect-ratio:16/9;background:#090604}
.story-film video{display:block;width:100%;height:100%;object-fit:contain}
.story-pages{position:relative;z-index:3;margin-top:calc(-65 * var(--s))}
.story-plate{position:absolute;left:0;width:100%;isolation:isolate}
.story-plate-art{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.story-photo{position:absolute;z-index:3;border-style:solid;border-color:transparent;border-image-source:none;border-image-slice:30;border-image-width:1;border-image-repeat:stretch;box-shadow:0 calc(5 * var(--s)) calc(10 * var(--s)) #0006;background:#241508}
.story-photo img{display:block;width:100%;height:100%;object-fit:contain;filter:none;mix-blend-mode:normal}
.story-copy{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#233b22;text-align:center}
.story-copy h2,.story-copy h3,.story-copy p{margin:0;width:100%;font-family:'Forest Serif',Georgia,serif;letter-spacing:normal;text-shadow:none}
.story-copy h2,.story-copy h3,.story-statement{font-weight:700}
/* Existing navigation gains one jump target; all content artwork and sizes stay intact. */
nav{gap:calc(32 * var(--u))}
footer{background:#090604}

/* Section 6: approved landscape artwork, original scenes and live paper copy. */
.regions-chapter{overflow:clip;--r:calc(var(--u) * 1920 / 1080);position:relative;z-index:9;margin-top:calc(-150 * var(--r));background:#16210f;isolation:isolate}
.regions-film{position:relative;z-index:1;width:100%;aspect-ratio:16/9;background:#16210f}
.regions-film video{display:block;width:100%;height:100%;object-fit:contain}
.regions-pages{position:relative;z-index:3;margin-top:calc(-240 * var(--r))}
.regions-pages::before{content:"";position:absolute;top:calc(240 * var(--r));bottom:0;left:0;right:0;background:none center top/100% auto repeat-y;pointer-events:none}
.regions-plate{position:absolute;left:0;width:100%;isolation:isolate}
.regions-plate-art{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;pointer-events:none}
.regions-photo{position:absolute;z-index:2;border-style:solid;border-color:transparent;border-image-source:none;border-image-slice:30;border-image-width:1;border-image-repeat:stretch;background:#241508;box-shadow:0 calc(4 * var(--r)) calc(8 * var(--r)) #0005}
.regions-photo[data-frame-kind="native-art"]{border:0;box-shadow:none;background:transparent}
.regions-photo[data-frame-kind="native-art"] img{object-fit:cover}
.regions-photo img{display:block;width:100%;height:100%;object-fit:contain;filter:none;mix-blend-mode:normal}
.regions-photo[data-frame-kind="separate-single"]{z-index:4}
.regions-copy{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#233b22;text-align:center}
.regions-copy h2,.regions-copy h3,.regions-copy p{margin:0;width:100%;font-family:'Forest Serif',Georgia,serif;letter-spacing:normal;text-shadow:none}
.regions-photo[data-asset-tag="Regions_Map_Frame"]{background:transparent;box-shadow:none;border:0}
.regions-photo[data-asset-tag="Regions_Map_Frame"] img{object-fit:cover}
nav{gap:calc(24 * var(--u))}
footer{background:#16210f}

/* v33: one original-art composition, bounded JPG panels and live text/media. */
main{position:relative;--p:calc(var(--u) * 1920 / 1080)}
.scene-artwork{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene-panel{position:absolute;left:0;width:100%;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden}
.scene-jpg{display:block;width:100%;height:100%;opacity:0;transition:opacity .22s}
.scene-panel.art-ready .scene-jpg{opacity:1}
main>section{position:absolute!important;left:0;width:100%;margin:0!important;background:transparent!important}
.hero::before,.friends-chapter::before,.regions-pages::before{display:none}
.game-chapter .scene{position:absolute;width:100%;aspect-ratio:auto;margin:0}
.progression{position:absolute;width:100%;background:none}
.recipe-paper{position:relative;padding:0;border:0;background:transparent}
.recipe-paper h2{position:absolute;left:calc(157 * var(--u));width:calc(1606 * var(--u));margin:0}
.recipe-close{position:absolute;left:0;width:100%;margin:0}
.video-slot{background:transparent;box-shadow:none}
.film,.story-film,.regions-film{background:transparent}
video{opacity:0;transition:opacity .25s}
video.video-ready{opacity:1}
.video-edge{position:absolute;left:0;z-index:2;display:block;width:100%;max-width:none;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scene-jpg,video{transition:none}}
main{height:calc(14167 * var(--p))}
#forest{top:calc(0 * var(--p));height:calc(728.964613368283 * var(--p))}
#film{top:calc(653.589613368283 * var(--p));height:calc(607.5 * var(--p))}
#game{top:calc(1228.4646133682832 * var(--p));height:calc(2373.789473425197 * var(--p))}
#friends{top:calc(3517.87908679348 * var(--p));height:calc(2660 * var(--p))}
#moral-story{top:calc(6087.87908679348 * var(--p));height:calc(3146.6983805668024 * var(--p))}
#regions{top:calc(9084.577467360283 * var(--p));height:calc(5082.422532639717 * var(--p))}
.gathering{top:calc(0.0 * var(--p));height:calc(549 * var(--p))}
.foraging{top:calc(480.375 * var(--p));height:calc(440 * var(--p))}
.matching{top:calc(867.5 * var(--p));height:calc(531 * var(--p))}
.progression{top:calc(1329.875 * var(--p));height:calc(1043.9144734251968 * var(--p))}
.recipe-paper{height:calc(1610.8479527559052 * var(--u))}
.recipe-paper h2{top:calc(147 * var(--u))}
.recipe-close{top:calc(963.3499999999999 * var(--u))}
video[data-asset-tag="Gather_Video"]{clip-path:polygon(90.45662% 0.00000%,90.22831% 0.40650%,12.60274% 0.81301%,9.17808% 1.21951%,9.40639% 1.62602%,9.40639% 3.25203%,9.17808% 3.65854%,9.40639% 4.06504%,9.40639% 5.69106%,8.94977% 6.91057%,8.72146% 9.34959%,8.26484% 10.16260%,4.84018% 10.56911%,5.06849% 13.00813%,4.61187% 13.82114%,4.61187% 15.85366%,3.92694% 17.07317%,3.47032% 19.51220%,2.78539% 20.32520%,1.18721% 23.57724%,0.04566% 24.79675%,0.04566% 72.35772%,0.50228% 73.17073%,0.50228% 73.98374%,0.04566% 74.79675%,5.06849% 75.20325%,5.52511% 76.01626%,5.29680% 76.42276%,5.29680% 77.64228%,4.84018% 78.45528%,4.84018% 80.08130%,3.69863% 82.52033%,3.69863% 83.33333%,2.78539% 84.55285%,4.84018% 85.77236%,5.29680% 86.58537%,16.48402% 86.99187%,21.96347% 87.80488%,27.67123% 90.24390%,31.32420% 93.08943%,41.82648% 93.49593%,42.73973% 95.93496%,45.25114% 96.34146%,45.70776% 97.15447%,45.70776% 98.37398%,46.39269% 98.78049%,46.84932% 99.59350%,99.72603% 99.59350%,99.72603% 0.00000%)}
video[data-asset-tag="Forage_Video"]{clip-path:polygon(97.83186% 0.00000%,97.61062% 0.39370%,0.04425% 2.36220%,0.04425% 98.03150%,4.46903% 98.42520%,81.23894% 99.21260%,81.46018% 99.60630%,97.74336% 99.60630%,98.84956% 97.24409%,99.73451% 96.45669%,99.73451% 0.00000%)}
video[data-asset-tag="Match_Video"]{clip-path:polygon(0.04167% 0.00000%,0.04167% 94.44444%,9.20833% 94.81481%,9.83333% 95.92593%,9.83333% 96.66667%,16.29167% 97.03704%,17.33333% 98.14815%,19.62500% 99.62963%,89.75000% 99.62963%,89.95833% 99.25926%,99.33333% 98.88889%,99.75000% 98.51852%,99.75000% 0.00000%)}