:root{--green:#2C3B1F;--gold:#C8960C;--gold2:#E7B62E;--ink:#1a1710;--body:#3a3426;--paper:#FBF8EF;--rule:#e6dec6}
.phead,.phead *,.pmain,.pmain *,.end,.end *{box-sizing:border-box;margin:0;padding:0}
body{overflow-x:clip;background:var(--paper);color:var(--body);font-family:'Lato',system-ui,sans-serif;font-weight:300;line-height:1.6}
.pwrap{max-width:1120px;margin:0 auto;padding:0 20px}

.phead{background:var(--green);color:#e9e3cf;padding:calc(var(--navh,80px) + 64px) 0 56px}
.eb{font-family:'DM Sans',system-ui,sans-serif;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2)}
h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.12}
h1{font-size:clamp(32px,5vw,52px);color:#f4efe0;margin:12px 0 14px} h1 em{font-style:italic;color:var(--gold2)}
header p{max-width:620px;font-size:18px;color:#d9d3bd}
.pstep{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center;padding:36px 0}
.pstep:nth-of-type(even) .part{order:2}
.part svg{width:100%;height:auto;display:block;overflow:visible}
.pnum{font-family:'DM Sans',system-ui,sans-serif;font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--gold)}
h2{font-size:clamp(26px,3vw,34px);color:var(--ink);margin:6px 0 12px}
.pstep p{font-size:17px;max-width:440px}
.pnote{padding:48px 0 80px;font-size:14px;color:#7a705c;max-width:720px}
@media(max-width:760px){.pstep{grid-template-columns:1fr;gap:16px;padding:40px 0}.pstep:nth-of-type(even) .part{order:0}}
.cap{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:12px;fill:#2C3B1F}
/* reveal: ink wipes on once, left to right */
.part svg{clip-path:inset(0 100% 0 0)}
.seen svg{animation:wipe 1.6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
/* motion loops, only while in view */
.part g{transform-box:fill-box}
.sway{transform-origin:50% 100%} .on .sway{animation:sway 6s ease-in-out infinite}
.on .slowsway{animation-duration:8s}
@keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.on .netwave{animation:netw 5s ease-in-out infinite} @keyframes netw{50%{transform:translateY(1.5px)}}
.on .birds{animation:birds 14s linear infinite} @keyframes birds{0%{transform:translate(-30px,6px)}50%{transform:translate(10px,-4px)}100%{transform:translate(50px,4px)}}
.on .sun{animation:sunp 6s ease-in-out infinite} @keyframes sunp{50%{opacity:.75}}
.on .rake{animation:rake 2.6s ease-in-out infinite} @keyframes rake{0%,100%{transform:translate(-70px,-4px) rotate(-3deg)}55%{transform:translate(70px,4px) rotate(2deg)}}
.fall{opacity:0} .on .fall{animation:fall 2.2s cubic-bezier(.45,0,1,1) infinite}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateY(var(--d)) rotate(120deg);opacity:0}}
.smoke{opacity:0} .on .smoke{animation:smoke 3.9s ease-out infinite} @keyframes smoke{0%{opacity:0;transform:translateY(6px) scale(.8)}30%{opacity:.8}100%{opacity:0;transform:translate(6px,-14px) scale(1.2)}}
.truck{transform:translateX(-170px)} .on .truck{animation:drive 6s cubic-bezier(.3,0,.25,1) forwards}
@keyframes drive{from{transform:translateX(-170px)}to{transform:translateX(136px)}}
.on .bob{animation:bob .45s ease-in-out infinite} @keyframes bob{50%{transform:translateY(-.8px)}}
.wheel{transform-origin:center} .on .wheel{animation:spin .7s linear 7}
.dust{opacity:0} .on .dust{animation:dust 1.5s ease-out 3} @keyframes dust{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.8}100%{opacity:0;transform:translate(-26px,-8px) scale(1.6)}}
.spin{transform-origin:center} .on .spin{animation:spin 2.4s linear infinite} .on .spin.rev{animation-direction:reverse} .on .spin.fast{animation-duration:.8s} .on .spin.slow{animation-duration:6s}
@keyframes spin{to{transform:rotate(360deg)}}
.on .slide{animation:slide 3s linear infinite} .on .slide.fast{animation-duration:1s} @keyframes slide{to{transform:translateX(-24px)}}
.on .pour{animation:pour .5s linear infinite} @keyframes pour{to{stroke-dashoffset:-20}}
.blow{opacity:0} .on .blow{animation:blow 2.6s ease-out infinite} @keyframes blow{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(70px,-30px) rotate(200deg)}}
.drip{opacity:0} .on .drip{animation:drip 1.2s ease-in infinite} @keyframes drip{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(var(--d))}}
.level{transform-origin:50% 100%} .on .level{animation:level 7s ease-in-out infinite} @keyframes level{0%{transform:scaleY(.2)}60%,100%{transform:scaleY(1)}}
.sink{opacity:0} .on .sink{animation:sink 5s linear infinite} @keyframes sink{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(var(--d))}}
.bfill{transform-origin:50% 100%;transform:scaleY(0)} .on .bfill{animation:bfill 5s ease-in-out infinite} @keyframes bfill{0%,8%{transform:scaleY(0)}55%,100%{transform:scaleY(1)}}
.stream{opacity:0} .on .stream{animation:stream 5s steps(1) infinite} @keyframes stream{0%{opacity:0}8%{opacity:1}55%,100%{opacity:0}}
.cap-drop{opacity:0} .on .cap-drop{animation:capd 5s ease-in-out infinite} @keyframes capd{0%,58%{opacity:0;transform:translateY(-26px)}70%,100%{opacity:1;transform:translateY(0)}}
.merc{transform-origin:50% 100%} .on .merc{animation:merc 5s ease-in-out infinite} @keyframes merc{50%{transform:scaleY(.9)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.part svg{clip-path:none}.fall,.smoke,.dust,.blow,.drip,.sink,.stream{opacity:0}.truck{transform:translateX(120px)}.bfill{transform:none}.cap-drop{opacity:1}}
.cap.gold{fill:#C8960C;font-size:14px}
.lift{opacity:0} .on .lift{animation:lift 3s linear infinite} @keyframes lift{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(78px,-86px)}}
.on .comb{animation:comb 2.4s ease-in-out infinite} @keyframes comb{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}}
.on .drop-in{animation:dropin 4s ease-in-out infinite} @keyframes dropin{0%,15%{transform:translateY(-30px);opacity:0}35%{opacity:1}60%,100%{transform:translateY(0);opacity:1}}
.part{will-change:transform}

/* motion layer: stacked scenes, chapter index, staggered text */
.pstep{position:sticky;top:var(--navh,80px);min-height:calc(100vh - var(--navh,80px));min-height:calc(100svh - var(--navh,80px));margin:0 calc(50% - 50vw);padding:48px max(20px,calc(50vw - 540px));background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -18px 40px -24px rgba(26,23,16,.18);transform-origin:50% 0;will-change:transform,filter}
.pstep .part{transition:opacity 1s ease,scale 1.2s cubic-bezier(.2,.7,.2,1);opacity:0;scale:.96}
.pstep.in .part{opacity:1;scale:1}
.txt>*{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.pstep.in .txt>*{opacity:1;transform:none}
.pstep.in .txt>h2{transition-delay:.12s}.pstep.in .txt>p{transition-delay:.26s}
.pnote{position:relative;z-index:2;background:var(--paper)}
.chap{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:6;display:none;transition:opacity .4s}
.chap ol{list-style:none}
.chap a{display:flex;align-items:center;gap:10px;padding:6px 0;text-decoration:none;color:#a99f86;font-family:'DM Sans',system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em}
.chap a::before{content:'';height:1px;width:12px;background:currentColor;transition:width .5s cubic-bezier(.2,.7,.2,1),background .3s}
.chap a span{opacity:0;transform:translateX(-6px);transition:all .4s ease;white-space:nowrap;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-style:italic;letter-spacing:0;font-size:14px;color:var(--green)}
.chap a.done{color:#6f6650}
.chap a.cur{color:var(--ink)}
.chap a.cur::before{width:32px;background:var(--gold)}
.chap:hover a span{opacity:1;transform:none}
.chap:hover{background:rgba(251,248,239,.96);box-shadow:0 8px 30px rgba(44,59,31,.12);border-radius:8px;padding:8px 16px 8px 8px;margin-left:-8px}
@media(min-width:1360px){.chap{display:block}}
.pill{position:fixed;left:50%;bottom:18px;z-index:6;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:8px 16px 8px 8px;border:0;border-radius:40px;background:var(--green);color:#f4efe0;box-shadow:0 10px 30px rgba(26,23,16,.28);font:inherit;cursor:pointer;transform:translate(-50%,140%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pill.show{transform:translate(-50%,0)}
.pill svg{width:36px;height:36px;flex:none;transform:rotate(-90deg)}
.pill circle{fill:none;stroke:rgba(231,182,46,.25);stroke-width:2.5}
.pill .arc{stroke:var(--gold2);stroke-dasharray:94.25;stroke-dashoffset:calc(94.25*(1 - var(--p,0)));stroke-linecap:round}
.pill .n{position:absolute;left:8px;width:36px;text-align:center;font-family:'DM Sans',system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--gold2)}
.pill .t{font-family:'Playfair Display',Georgia,serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill .go{color:var(--gold2);font-size:14px}
@media(min-width:1360px){.pill{display:none}}
@media(max-width:760px){.pstep{padding:24px 20px 88px;align-content:center}}
@media(max-height:560px){.pstep{position:relative;min-height:0}}
@media (prefers-reduced-motion:reduce){.pstep{position:relative;min-height:0;transform:none!important;filter:none!important}.part,.txt>*{opacity:1!important;transform:none!important;scale:1!important;transition:none!important}}
/* desktop dwell: each scene holds still for 70vh of scrolling before the next slides over it */
@media(min-width:761px) and (min-height:561px) and (prefers-reduced-motion:no-preference){.pstep{grid-template-rows:calc(100vh - var(--navh,80px));grid-template-rows:calc(100svh - var(--navh,80px));min-height:0;padding-top:0;padding-bottom:70vh}}
/* closing panel: slides up over the last scene */
.end{position:relative;z-index:3;background:var(--green);color:#e9e3cf;padding:96px 0 64px;box-shadow:0 -18px 40px -24px rgba(26,23,16,.35)}
.end h2{font-size:clamp(30px,4vw,46px);color:#f4efe0;margin:12px 0 14px}.end h2 em{font-style:italic;color:var(--gold2)}
.end p{max-width:560px;font-size:17px;color:#d9d3bd}
.end .cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 56px}
.end .pnote{background:none;padding:24px 0 0;border-top:1px solid rgba(231,182,46,.25);font-size:13px;color:#a9a58f;max-width:720px}
@media(min-width:761px) and (min-height:561px) and (prefers-reduced-motion:no-preference){.pstep:last-of-type{padding-bottom:0}}

.end .cta .btn-outline{color:var(--gold2)}
.phead h1{color:#f4efe0}
.end .cta .btn{padding:15px 24px;font-size:.72rem;letter-spacing:.2em}
.end .cta .btn-outline{background:transparent;border-color:var(--gold);color:var(--gold2)}.end .cta .btn-outline:hover{background:var(--gold);color:var(--green)}
.on .pick{animation:pick 2.4s ease-in-out infinite} @keyframes pick{0%,100%{transform:translate(0,0)}45%{transform:translate(2px,3px)}60%{transform:translate(2px,3px)}}