/* Simple edition: content-driven layouts from compact phones to wide displays. */
:root{--safe-top:env(safe-area-inset-top,0px);--header-height:calc(104px + var(--safe-top));--gutter:clamp(20px,4.5vw,72px);--safe-bottom:env(safe-area-inset-bottom,0px)}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.site-header{min-height:var(--header-height);height:auto;padding-top:calc(16px + var(--safe-top));padding-bottom:16px;gap:24px}.brand{flex-shrink:0}.site-header nav{gap:clamp(16px,2.8vw,40px)}.site-header nav a{display:flex;align-items:center;min-height:44px}.header-actions{flex-shrink:0}
.hero-inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:24px;height:auto;min-height:clamp(620px,calc(100svh - var(--header-height)),800px);padding-top:24px;padding-bottom:24px}
.hero-copy{grid-column:1;grid-row:1;width:auto;margin:0;min-width:0}.hero-copy h1{font-size:clamp(62px,6vw,104px);line-height:1.02}.hero-copy p{max-width:30ch}.hero-copy .button{max-width:100%;padding-block:12px;line-height:1.4;text-align:left}
.hero .farm-stage{grid-column:2;grid-row:1;position:relative;inset:auto;width:100%;height:clamp(390px,38vw,620px);min-width:0;z-index:1}.farm-label{top:3%;right:4%;max-width:90%;text-align:right}.hero-bottom{grid-column:1/-1;grid-row:2;position:static;inset:auto;display:flex;flex-wrap:wrap;gap:16px;min-width:0;padding-top:16px}.hero-bottom>.text-link{max-width:100%}.scene-controls{min-width:0;flex-wrap:wrap;justify-content:flex-end}#scene-caption{min-width:0}.round-button{flex-shrink:0;min-width:44px;min-height:44px}.motion-button{min-height:44px;white-space:nowrap}
#mobile-nav{top:var(--header-height);left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));max-height:calc(100svh - var(--header-height) - 16px);overflow-y:auto;overscroll-behavior:contain;padding:16px 20px}#mobile-nav:not([hidden]){gap:8px}#mobile-nav a,#mobile-nav button{display:flex;align-items:center;min-height:44px;width:100%}
.connection-grid,.farmer-grid,.questions-section,.connection-paths{min-width:0}.connection-grid>*,.farmer-grid>*,.questions-section>*,.connection-paths>*{min-width:0}.section-top>p{flex-shrink:1}.connection-paths .button,.farmer-grid .button{max-width:100%;padding-block:12px;line-height:1.4;text-align:left}.farmer-art{min-height:0}.farmer-art img{max-width:100%;height:auto;max-height:470px;aspect-ratio:8/7}.art-caption{padding-top:12px}.trade-line{min-width:0}.trade-path{min-width:0}.trade-line>span{flex-shrink:0}
.footer-top,.footer-bottom{flex-wrap:wrap}.footer-bottom>*{min-width:0}.footer-top .text-link{max-width:100%}.footer-bottom{padding-bottom:var(--safe-bottom)}
dialog{max-height:min(85svh,calc(100dvh - 32px));overflow-y:auto;padding:clamp(20px,4vw,40px);max-width:calc(100% - 24px);scrollbar-gutter:stable}dialog h2{width:100%;max-width:none;padding-right:44px;font-size:clamp(32px,5.5vw,48px)}.close-dialog{right:12px;top:12px}form,form label,input,textarea,select{min-width:0}.draft-actions{flex-wrap:wrap;column-gap:24px;row-gap:0}.intro-text{overflow-wrap:anywhere}dialog .button{max-width:100%;padding-block:12px;line-height:1.4}.form-status{overflow-wrap:anywhere}
/* Separate copy, canvas and chapter controls so no scene covers the text. */
.story-pin{--story-header-height:calc(96px + var(--safe-top));--story-footer-space:max(100px,calc(76px + var(--safe-bottom)))}
.story-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:16px;height:calc(100% - var(--story-header-height) - var(--story-footer-space))}.story-copy{width:100%;min-width:0}.story-copy h2{font-size:clamp(48px,5.7vw,88px);line-height:1.02;max-width:100%}.story-visual{position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0}.story-header{gap:16px;height:var(--story-header-height);padding-top:var(--safe-top)}.story-footer{gap:20px;bottom:max(20px,var(--safe-bottom))}.story-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;min-width:0}.story-steps button{width:100%;min-width:44px;min-height:44px;font-size:12px}.story-hint{max-width:16ch;text-align:right}.story-static .story-pin{min-height:0;height:max(680px,100svh)}
@media(max-width:1100px){.story-hint{display:none}.story-track{width:60px}.story-copy h2{font-size:clamp(44px,5.6vw,64px)}.hero-bottom>.text-link{font-size:13px}.scene-controls{gap:8px}}
@media(max-width:900px){
 :root{--header-height:calc(80px + var(--safe-top))}
 .site-header nav,.site-header .sell-link{display:none}.mobile-menu{display:grid;place-items:center;min-width:44px;min-height:44px}.site-header{padding-top:calc(12px + var(--safe-top));padding-bottom:12px}
 .hero-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:start;row-gap:16px;min-height:0;padding-top:24px;padding-bottom:24px}
 .hero-copy{grid-column:1;grid-row:1;width:100%;pointer-events:auto}.hero-copy h1{font-size:clamp(44px,11.5vw,82px);max-width:100%}.hero-copy p{font-size:16px;max-width:36ch;margin:20px 0 24px}.hero-copy .button{font-size:14px;gap:16px}
 .hero .farm-stage{grid-column:1;grid-row:2;inset:auto;width:100%;height:clamp(280px,78vw,470px)}.farm-label{display:none}
 .hero-bottom{grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;padding-top:12px}.hero-bottom>.text-link{display:inline-flex;justify-content:center;text-align:center;justify-self:center;font-size:13px}.scene-controls{display:grid;grid-template-columns:44px 44px minmax(88px,1fr);gap:8px;max-width:320px;width:100%;justify-self:center;align-items:center}.scene-controls #scene-caption{grid-column:1/-1;text-align:center;min-width:0;margin:0;font-size:12px}.scene-controls .motion-button{font-size:12px;padding-inline:8px}
 .connection-grid,.farmer-grid,.questions-section{grid-template-columns:minmax(0,1fr);gap:32px}.connection-copy{justify-self:start;max-width:100%}.connection h2,.section-top h2,.farmer-grid h2,.questions-section h2{font-size:clamp(42px,10vw,64px);line-height:1.04}.connection-copy p{font-size:16px}.section-top{display:block}.section-top p{margin-top:24px;font-size:15px}.connections-section,.questions-section{padding-block:64px}.connection-paths{grid-template-columns:minmax(0,1fr);gap:24px}.connection-paths h3{font-size:clamp(32px,8vw,44px);line-height:1.05}.connection-paths article{padding-block:24px}.connection-note{font-size:13px}.farmer-art{order:2;min-height:0}.farmer-art img{max-height:400px}.farmer-grid>div>p{font-size:16px}.questions summary{font-size:15px;min-height:72px}.questions summary span{flex-shrink:0}.questions details p{font-size:15px}
 .trade-line{gap:12px}.trade-line>span{font-size:30px}.trade-path span{font-size:10px;max-width:160px;padding:8px}.footer-top{gap:16px}.footer-top p{width:100%;order:3;margin:0}.footer-top .brand{font-size:36px}.footer-top .text-link{font-size:12px}.footer-bottom{gap:8px}.footer-bottom>span:nth-child(2){display:none}.form-pair{grid-template-columns:minmax(0,1fr);gap:0}
 .story-pin{height:100svh;min-height:0;--story-header-height:calc(72px + var(--safe-top));--story-footer-space:max(92px,calc(64px + var(--safe-bottom)))}.story-header{height:var(--story-header-height)}.story-header .brand{font-size:26px}.story-header .text-link{font-size:11px;line-height:1.3;text-align:right}.story-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:calc(100% - var(--story-header-height) - var(--story-footer-space));gap:0;align-items:stretch;padding-top:8px}.story-copy{grid-row:1;width:100%}.story-chapter{font-size:11px;margin-bottom:8px}.story-copy h2{font-size:clamp(34px,9.2vw,60px);line-height:1.02}.story-copy p{font-size:13px;line-height:1.45;max-width:42ch;margin-top:12px}.story-copy .story-instruction{font-size:11px;margin-top:12px}.story-visual{grid-row:2;grid-column:1;inset:auto;position:relative;width:calc(100% + 2*var(--gutter));margin-inline:calc(-1*var(--gutter));height:100%;min-height:0}.story-footer{display:block;bottom:max(12px,var(--safe-bottom))}.story-track{width:100%;height:2px;margin-bottom:8px}.story-steps{gap:0}.story-steps button{min-width:0;min-height:44px;font-size:clamp(10px,2.8vw,12px);padding:0 2px}.story-hint{display:none}.story-static .story-pin{height:max(680px,100svh);min-height:0}
}
@media(max-width:360px){.hero-copy .button{font-size:13px;padding-inline:18px;gap:12px}.footer-top .brand{font-size:32px}.footer-top .text-link{font-size:11px}.trade-line>span{font-size:26px}.trade-path span{font-size:9px;max-width:128px}.story-copy .story-instruction{display:none}dialog h2{font-size:32px}}
/* Short screens keep the full pinned scene and controls inside the viewport. */
@media(max-height:650px){.story-copy .story-instruction{display:none}.story-pin{--story-header-height:calc(60px + var(--safe-top));--story-footer-space:max(84px,calc(64px + var(--safe-bottom)))}.story-header{height:var(--story-header-height)}.story-layout{height:calc(100% - var(--story-header-height) - var(--story-footer-space))}.story-copy h2{font-size:clamp(32px,8vw,48px)}.story-copy p{margin-top:8px}.story-chapter{margin-bottom:6px}.story-static .story-pin{height:max(560px,100svh)}}
@media(max-height:650px) and (min-width:480px){
 :root{--header-height:calc(72px + var(--safe-top))}
 .hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:center;min-height:0;row-gap:16px;padding-top:16px}.hero-copy{grid-column:1;grid-row:1}.hero-copy h1{font-size:clamp(38px,5.8vw,64px)}.hero-copy p{font-size:14px;margin:16px 0}.hero .farm-stage{grid-column:2;grid-row:1;height:clamp(240px,62svh,380px)}.hero-bottom{grid-row:2;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.hero-bottom>.text-link{justify-content:start}.scene-controls{width:auto;grid-template-columns:44px 44px auto;max-width:none}.scene-controls #scene-caption{display:none}
 .story-pin{height:100svh;min-height:0;--story-header-height:calc(56px + var(--safe-top));--story-footer-space:max(64px,calc(52px + var(--safe-bottom)))}.story-header{height:var(--story-header-height)}.story-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);height:calc(100% - var(--story-header-height) - var(--story-footer-space));align-items:center;gap:12px;padding-top:0}.story-copy{grid-column:1;grid-row:1}.story-copy h2{font-size:clamp(30px,4.8vw,48px)}.story-copy p{font-size:12px;line-height:1.35}.story-visual{grid-column:2;grid-row:1;position:relative;inset:auto;margin:0;width:100%;height:100%;min-height:0}.story-footer{display:flex;align-items:center;gap:12px;bottom:max(8px,var(--safe-bottom))}.story-track{width:48px;flex-shrink:0;margin:0}.story-steps{flex:1;gap:0}.story-steps button{font-size:11px;min-height:44px}.story-static .story-pin{height:max(360px,100svh);min-height:0}.story-static .story-layout{height:calc(100% - var(--story-header-height) - var(--story-footer-space))}
}
@media(prefers-reduced-motion:reduce){.hero-inner{scroll-behavior:auto}.story-pin{position:relative}.story-static .story-instruction{display:none}}
.site-header .brand,.story-header .brand,footer .brand{min-height:44px}
/* The close button remains reachable while a long introduction form scrolls. */
dialog .close-dialog{position:sticky;top:0;right:auto;z-index:2;margin:-8px -8px -36px auto;background:var(--paper);border-radius:50%}