/* Readable type, deliberate spacing, and one family of tactile controls. */
:root{--body-text:17px;--secondary-text:15px;--small-text:12px;--control-text:14px;--control-height:48px}
body{font-size:var(--body-text)}
p{font-size:var(--body-text);line-height:1.7}
.eyebrow{font-size:11px;line-height:1.6;letter-spacing:.14em}
:is(.problem-heading>div>p:not(.lead),.how-content>p:not(.eyebrow),.mechanism-copy>p:not(.eyebrow),.community-content>p:not(.eyebrow)){font-size:var(--body-text);line-height:1.7;max-width:44ch}
.hero-intro>div>p:last-child{font-size:var(--body-text);line-height:1.65;max-width:37ch}
.hero-values b{font-size:14px}
.hero-values>span{font-size:12px}
.hero-bottom>.eyebrow{font-size:11px}
.pill,.mechanism-actions .pill,.light-pill,.community-dialog .pill,.text-button{font-size:var(--control-text);line-height:1.45;min-height:48px;padding-block:13px}
.action-strip .eyebrow{font-size:11px}
.action-strip h3{font-size:22px;line-height:1.3}
.mechanism-chain{gap:20px}
.mechanism-chain li{font-size:16px;line-height:1.55;padding-left:34px}
.mechanism-chain li:before{font-size:11px;top:4px}
.mechanism-chain span{font-size:14px;line-height:1.6;margin-top:4px}
.mechanism-details figcaption>span{font-size:11px;line-height:1.6}
.mechanism-details figcaption p{font-size:16px;line-height:1.65;max-width:32ch}
.viewer-controls button{font-size:13px;min-height:40px;padding:9px 15px}
.model-status{font-size:14px}
.model-caption{font-size:11px;letter-spacing:.07em;line-height:1.7}
.model-caption span{font-size:11px;opacity:.85}
.concept-note{font-size:13px;line-height:1.6;letter-spacing:0;max-width:40ch;color:#c8cfb8}
.garden-credit{font-size:11px;line-height:1.5;opacity:.8}
.community-dialog>p:not(.eyebrow),.preview-card p{font-size:16px;line-height:1.65}
.preview-steps button{font-size:14px;min-height:46px}
.community-dialog .preview-note{font-size:13px;line-height:1.65}
.preview-card{min-height:200px}
/* Glass is translucent; text and control outlines retain their contrast. */
.site-header nav,.site-header.is-scrolled nav{font-size:14px}
.site-header nav :is(a,.nav-link){min-height:40px;padding-inline:14px}
.site-header.is-scrolled{background:rgb(238 237 223 / .64);border-color:#ffffff50;--nav-fill:#ffffff50;--nav-hover:#ffffff70}
html[data-theme=dark] .site-header.is-scrolled{background:rgb(27 36 32 / .66);border-color:#eeeddf24;--nav-fill:#eeeddf0f;--nav-hover:#eeeddf1c}
.language-switch button{font-size:11px;min-height:30px;min-width:30px}
/* Scene controls form a quiet base, with an inviting contribution action beside them. */
.scene-copy p:not(.eyebrow){font-size:var(--body-text);line-height:1.65;max-width:34ch}
.scene-control-row{grid-template-columns:88px auto;gap:12px}
.scene-control-row>.eyebrow{font-size:11px;letter-spacing:.1em;opacity:.9}
.scene-control-row .time-controls button{font-size:14px;min-height:42px;min-width:85px;padding:10px 14px}
.scene-controls{gap:10px;padding-right:44px}
.scene-reset{width:34px;height:34px;min-width:34px}
.scene-response{gap:12px;max-width:320px}
#scene-contribute{min-height:78px;gap:24px;padding:16px 21px;border-radius:999px;border:1px solid #eeeddf9e;background:rgb(238 237 223 / .92);color:#30392c;box-shadow:0 8px 26px #07190d26,0 1px 0 #fff8 inset;backdrop-filter:blur(14px);text-align:left;isolation:isolate}
#scene-contribute .contribute-copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
#scene-contribute strong{font:inherit;font-size:16px;font-weight:500;line-height:1.3;letter-spacing:0}
#scene-contribute small{font-size:12px;line-height:1.4;letter-spacing:0;color:#58634c}
#scene-contribute>.contribute-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #53644544;border-radius:50%;flex:none;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
#scene-contribute .ui-icon{width:19px;height:19px}
#scene-contribute:hover{transform:translateY(-3px);background:#faf9ed;border-color:#eeeddf;box-shadow:0 14px 32px #07190d30,0 1px 0 #fff inset}
#scene-contribute:hover>.contribute-icon{transform:rotate(35deg)}
#scene-contribute:active{transform:translateY(0) scale(.98)}
#scene-contribute.is-contributing>.contribute-icon{animation:contribution-turn 1.3s cubic-bezier(.2,.7,.2,1) both}
#scene-contribute:focus-visible{outline-color:var(--cream);outline-offset:6px}
@keyframes contribution-turn{to{transform:rotate(360deg)}}
.scene-response>p{font-size:14px;line-height:1.55;max-width:30ch;color:#e1e5d5}
.scene-step{font-size:11px;line-height:1.5;letter-spacing:.06em}
.scene-caption{font-size:11px;line-height:1.5;letter-spacing:.09em;bottom:218px;max-width:80%}
.native-scene-films video{will-change:auto}
.native-scene-films video.active,.native-scene-films video.incoming{will-change:opacity}
/* The deck has separate, accessible controls: body to toss, + to read. */
.local-lede{font-size:var(--body-text);line-height:1.7;max-width:36ch}
.local-collection .region-choices{gap:7px;max-width:440px;flex-wrap:wrap;margin-block:28px 24px}
.local-collection .region-choices button{font-size:14px;min-height:44px;padding:11px 16px;min-width:60px}
.local-region-description{min-height:148px;max-width:42ch}
.local-collection #region-label{font-size:11px;letter-spacing:.12em}
.local-collection #region-text{font-size:var(--secondary-text);line-height:1.7;margin-top:12px;max-width:42ch}
.local-context{min-height:122px;max-width:380px;margin-top:6px}
.local-invitation{font-size:14px;line-height:1.7;color:#d0d6c0}
.local-time-panel{padding:17px 19px 13px}
.local-time-heading{font-size:14px;margin-bottom:10px}
.local-time-heading output{font-size:13px}
.local-time-ticks{font-size:11px;padding-inline:30px;letter-spacing:0}
.local-time-slider input{height:32px}
.local-collection .card-front{padding:0;display:block}
.local-collection .card-toss{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:10px;padding:15px 13px 13px;border:0;border-radius:12px;background:transparent;text-align:left;color:#394332}
.local-collection .card-toss img{display:block;width:100%;height:calc(100% - 44px);min-height:0;object-fit:contain;mix-blend-mode:multiply}
.local-collection .card-name{font-size:14px;line-height:1.3;letter-spacing:0;min-height:36px;display:flex;align-items:center}
.local-collection .card-details{position:absolute;top:3px;right:3px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:7px;border:0;border-radius:50%;background:transparent;color:#394332}
.local-collection .card-details:before{content:'';position:absolute;inset:6px;background:#eeeddfeb;border:1px solid #53644550;border-radius:50%;transition:background .2s,transform .25s}
.local-collection .card-details .ui-icon{position:relative;width:16px;height:16px}
.local-collection .card-details:hover:before{background:#fffef2;transform:scale(1.08)}
.local-collection .pattern-card:has(:focus-visible){z-index:45}
.local-collection .pattern-card:has(.card-toss:focus-visible),.local-collection .pattern-card:has(.card-details:focus-visible){outline:2px solid var(--amber);outline-offset:6px}
.local-collection .card-toss:focus-visible{outline-offset:4px}
.local-collection .pattern-card.is-tossing{transition:none!important;pointer-events:none;will-change:transform,opacity}
.local-collection .card-back{padding:24px;justify-content:flex-start;gap:16px;overscroll-behavior:auto}
.local-collection .card-back .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.09em}
.local-collection .card-back strong{font-size:32px;line-height:1.1}
.local-collection .card-story{font-size:15px;line-height:1.65;color:#48533e;margin:0}
.local-collection .card-close{display:inline-flex;align-items:center;align-self:flex-start;gap:10px;min-height:42px;margin-top:auto;padding:9px 13px;background:#eeeddf70;border:1px solid #53644544;border-radius:999px;font-size:13px;line-height:1.4;color:#394332}
.local-collection .card-close .ui-icon{width:16px;height:16px}
.local-collection .local-see-action,.local-collection .local-model-actions .pill{font-size:14px;min-height:48px;padding:13px 21px}
.local-model-actions .icon-button{width:48px;height:48px;min-width:48px}
.local-stage-actions{min-height:48px}
.local-stage-caption{font-size:12px;line-height:1.6;letter-spacing:.025em;bottom:-15px}
.local-footnote>p,.local-footnote .pattern-sources{font-size:12px;line-height:1.7;color:#cbd2bb}
.local-footnote .pattern-sources p,.local-footnote .pattern-sources a{font-size:13px;line-height:1.7}
.local-footnote #deck-discovery{font-size:13px}
/* Crop the wordmark precisely; fade only its final edge. The legal line remains crisp. */
.footer-top>div>.eyebrow{font-size:11px;line-height:1.6}
.footer-top>div>a,.footer-top>div>p{font-size:15px;line-height:1.7}
.footer-top>div{gap:13px}
.footer-top>div>a .ui-icon{width:15px;height:15px}
.footer-wordmark-window{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 85%,#000c 94%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 85%,#000c 94%,transparent 100%)}
.footer-bottom{opacity:1;transform:none;filter:none;transition:none;background:transparent;border:0;display:grid;grid-template-columns:1fr 1.1fr 1.8fr;gap:24px;font-size:12px;line-height:1.6;letter-spacing:0;color:#c9d0b9;min-height:88px;padding-top:25px;margin-top:16px;align-items:start}
.footer-bottom:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;filter:none;pointer-events:none;background:linear-gradient(90deg,#eeeddf12,#eeeddf60 20%,#eeeddf60 80%,#eeeddf12);opacity:0;transform:scaleX(.94);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.footer-bottom>span{opacity:0;transform:translateY(4px);transition:opacity .55s ease .12s,transform .65s cubic-bezier(.2,.7,.2,1) .12s}
.footer-bottom>span:last-child{max-width:40ch;justify-self:end}
.footer-bottom.visible:before,.footer-bottom.visible>span{opacity:1;transform:none}
@media(max-width:1100px){
 :root{--body-text:16px;--secondary-text:15px}
 .site-header nav,.site-header.is-scrolled nav{font-size:13px;gap:2px}
 .site-header nav :is(a,.nav-link){padding-inline:11px}
 .scene-copy{top:24%;width:40%}
 .scene-copy h2{font-size:clamp(36px,4.5vw,50px)}
 .scene-control-row{grid-template-columns:76px auto;gap:9px}
 .scene-control-row .time-controls button{font-size:13px;min-width:76px;padding-inline:11px}
 .scene-response{max-width:295px}
 .scene-response>.pill{font-size:14px;max-width:none}
 .scene-caption{bottom:223px}
 .local-copy>h2{font-size:clamp(36px,4.5vw,49px)}
 .local-collection .region-choices{gap:6px}
 .local-collection .region-choices button{padding-inline:13px;min-width:56px}
 .local-region-description{min-height:174px}
 .local-context{max-width:340px}
 .local-stage{height:clamp(490px,68svh,650px)}
 .local-collection .card-toss{padding:12px 10px 10px}
 .local-collection .card-name{font-size:13px}
 .mechanism-copy h2{font-size:clamp(39px,4.8vw,53px)}
 .footer-top{grid-template-columns:1.1fr .85fr 1.2fr auto;gap:24px;padding-inline:0}
 .footer-top>div>a,.footer-top>div>p{font-size:14px}
}
@media(min-width:701px) and (max-width:900px){
 .scene-control-row{grid-template-columns:1fr;gap:5px}
 .scene-control-row .time-controls button{min-width:78px}
 .scene-controls{gap:12px}
 .scene-caption{bottom:270px}
 .scene-response{max-width:275px}
 #scene-contribute{gap:15px;padding-inline:17px}
 .local-collection .region-choices{max-width:300px}
}
@media(max-width:700px){
 .site-header{height:112px}
 .site-header.is-scrolled{height:108px}
 .site-header nav,.site-header.is-scrolled nav{top:58px;font-size:13px;gap:3px}
 .site-header nav :is(a,.nav-link),.site-header.is-scrolled nav :is(a,.nav-link){padding:10px 12px;min-height:40px}
 .site-header.is-scrolled .icon-button{width:32px;height:32px;min-width:32px}
 .language-switch button{font-size:11px;min-width:27px;min-height:28px}
 .hero-intro .intro-copy{max-width:100%}
 .hero-intro>div>p:last-child{font-size:16px;line-height:1.6;max-width:33ch}
 .hero-intro h2{font-size:clamp(32px,5.2svh,43px)}
 .hero-bottom>.eyebrow{font-size:10px}
 .possibility-line span{font-size:15px;max-width:100px}
 .action-strip{gap:16px}
 .action-strip .eyebrow{font-size:10px;letter-spacing:.06em}
 .action-strip h3{font-size:18px}
 .how-section{padding-bottom:240px}
 .scene-copy{top:clamp(132px,18svh,174px);width:88%}
 .scene-copy h2{font-size:clamp(32px,5.2svh,43px);margin:16px 0;max-width:12ch}
 .scene-copy p:not(.eyebrow){font-size:16px;line-height:1.55;max-width:34ch}
 .scene-bottom{bottom:26px;gap:16px}
 .scene-control-row{grid-template-columns:1fr;gap:5px}
 .scene-control-row>.eyebrow{font-size:10px;letter-spacing:.1em}
 .scene-controls{grid-template-columns:1fr;gap:10px;padding-right:36px}
 .scene-control-row .time-controls button{font-size:13px;min-width:0;min-height:40px;padding:9px 11px}
 .scene-response{display:block;text-align:left;max-width:none;width:100%}
 #scene-contribute{width:100%;min-height:74px;justify-content:space-between;padding:14px 18px;gap:16px}
 #scene-contribute strong{font-size:16px}
 #scene-contribute small{font-size:12px}
 .scene-response>p{font-size:13px;line-height:1.5;max-width:100%;margin-top:12px}
 .scene-caption{display:none}
 .scene-step{display:none}
 .local-collection{padding-top:110px;padding-bottom:76px;gap:16px}
 .local-copy>h2{font-size:clamp(38px,8.8vw,51px)}
 .local-lede{font-size:16px;max-width:36ch}
 .local-collection .region-choices{max-width:none;gap:6px;margin-block:25px 22px}
 .local-collection .region-choices button{font-size:14px;padding:11px 15px;min-width:56px}
 .local-region-description{min-height:150px;max-width:44ch}
 .local-collection #region-text{font-size:15px;max-width:44ch}
 .local-context{min-height:122px;max-width:390px;margin-top:0}
 .local-time-panel{padding:16px 17px 12px}
 .local-stage{height:470px;width:100%;max-width:500px;margin-top:0}
 .local-collection .pattern-deck{bottom:76px}
 .local-product{inset:-8px -8% 74px}
 .local-collection .card-toss{padding:12px 8px 10px;gap:8px}
 .local-collection .card-name{font-size:12px;line-height:1.25;min-height:32px}
 .local-collection .card-back{padding:20px;gap:14px}
 .local-collection .card-back strong{font-size:30px}
 .local-stage-caption{font-size:12px;bottom:-13px}
 .local-footnote>p,.local-footnote .pattern-sources{font-size:12px;max-width:43ch}
 .mechanism-actions{gap:16px}
 .mechanism-details figure{grid-template-columns:1fr;gap:18px}
 .mechanism-details img{aspect-ratio:1.5}
 .mechanism-details figcaption p{max-width:40ch}
 .mechanism-details{gap:36px}
 .community-section{padding-bottom:90px}
 .garden-credit{font-size:10px;left:var(--pad);right:var(--pad);max-width:42ch}
 .footer-top{grid-template-columns:1fr 1fr;gap:32px;padding-bottom:45px}
 .footer-top>div>a,.footer-top>div>p{font-size:14px}
 .footer-top>div>.eyebrow{font-size:10px;letter-spacing:.1em}
 .footer-bottom{grid-template-columns:1fr;gap:12px;font-size:12px;line-height:1.65;min-height:0;padding-bottom:8px;margin-top:18px}
 .footer-bottom>span:last-child{width:auto;max-width:38ch;justify-self:start;text-align:left}
 .preview-card{grid-template-columns:32px 1fr;min-height:240px}
 .preview-steps{gap:22px}
 .community-dialog>.eyebrow{font-size:10px;max-width:90%}
}
@media(max-width:360px){
 .site-header nav,.site-header.is-scrolled nav{font-size:12px}
 .site-header nav :is(a,.nav-link),.site-header.is-scrolled nav :is(a,.nav-link){padding-inline:9px}
 .site-header .brand,.site-header.is-scrolled .brand{font-size:19px;gap:5px}
 .header-tools{gap:4px}
 .site-header .brand svg{width:20px}
 .language-switch button{min-width:24px;padding-inline:4px}
 .local-collection .region-choices button{padding-inline:11px;font-size:13px}
}
@media(max-height:720px) and (min-width:701px){
 .scene-copy{top:22%}
 .scene-copy h2{font-size:clamp(32px,4vw,48px);margin:16px 0}
 .scene-copy p:not(.eyebrow){max-width:38ch;font-size:16px;line-height:1.55}
 .scene-bottom{bottom:22px}
 .scene-caption{display:none}
}
@media(max-width:700px) and (max-height:740px){
 .scene-copy{top:124px}
 .scene-copy h2{font-size:32px;max-width:100%;margin:12px 0}
 .scene-copy p:not(.eyebrow){line-height:1.5;max-width:100%}
 .scene-bottom{bottom:18px;gap:12px}
 .scene-controls{gap:8px;grid-template-columns:1fr 1fr;padding-right:0;padding-bottom:0}
 .scene-control-row .time-controls{flex-direction:column;border-radius:18px;gap:0;padding:3px}
 .scene-control-row .time-controls button{font-size:13px;min-height:34px;padding:7px 8px;width:100%}
 .scene-control-row>.eyebrow{min-height:16px}
 .scene-reset{right:-7px;top:-5px;transform:translateY(-100%);width:28px;height:28px;min-width:28px}
 .scene-reset:not(:disabled):active{transform:translateY(-100%) scale(.94)}
 #scene-contribute{min-height:68px;padding-block:11px}
 .scene-response>p{display:none}
}
@media(prefers-reduced-motion:reduce){
 #scene-contribute:hover,#scene-contribute:hover>.contribute-icon{transform:none}
 #scene-contribute.is-contributing>.contribute-icon{animation:none}
 .footer-bottom:before,.footer-bottom>span{opacity:1;transform:none;transition:none}
 .local-collection .pattern-card{transition:none!important}
}
body.motion-paused #scene-contribute.is-contributing>.contribute-icon{animation:none}

body.motion-paused .footer-bottom:before,body.motion-paused .footer-bottom>span{opacity:1;transform:none;transition:none}

/* Organic scraps make the contribution action tangible, with one short toss per press. */
#scene-contribute>.contribute-icon{width:44px;height:44px;background:#43473409;border-color:#53644538;overflow:hidden;transform:none}
#scene-contribute .compost-illustration{display:block;width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.compost-scrap{transform-box:view-box;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.scrap-leaf{transform-origin:14px 14px}
.scrap-core{transform-origin:24px 16px}
.scrap-peel{transform-origin:34px 14px}
.compost-turn{transform-box:fill-box;transform-origin:center}
#scene-contribute:hover>.contribute-icon{transform:none;background:#43473413}
#scene-contribute:not(.is-contributing):hover .scrap-leaf{transform:translate(-1px,-2px) rotate(-9deg)}
#scene-contribute:not(.is-contributing):hover .scrap-peel{transform:translate(1px,-1px) rotate(7deg)}
#scene-contribute.is-contributing>.contribute-icon{animation:none}
#scene-contribute.is-contributing .scrap-leaf{animation:compost-leaf-drop .75s cubic-bezier(.3,.1,.6,1) both}
#scene-contribute.is-contributing .scrap-core{animation:compost-core-drop .75s cubic-bezier(.3,.1,.6,1) .08s both}
#scene-contribute.is-contributing .scrap-peel{animation:compost-peel-drop .75s cubic-bezier(.3,.1,.6,1) .16s both}
#scene-contribute.is-contributing .compost-turn{animation:contribution-turn 1s cubic-bezier(.2,.7,.2,1) .55s both}
#scene-contribute.is-contributing .compost-chute{animation:compost-response 1.7s ease .5s both}
@keyframes compost-leaf-drop{0%{transform:none;opacity:1}28%{transform:translate(-2px,-5px) rotate(-18deg);opacity:1}82%,100%{transform:translate(8px,19px) rotate(35deg);opacity:0}}
@keyframes compost-core-drop{0%{transform:none;opacity:1}25%{transform:translate(1px,-6px) rotate(14deg);opacity:1}85%,100%{transform:translate(-1px,19px) rotate(-15deg);opacity:0}}
@keyframes compost-peel-drop{0%{transform:none;opacity:1}24%{transform:translate(2px,-5px) rotate(19deg);opacity:1}88%,100%{transform:translate(-8px,19px) rotate(-30deg);opacity:0}}
@keyframes compost-response{0%,100%{color:#394332}38%,64%{color:#aa6e24}}
@media(prefers-reduced-motion:reduce){
 #scene-contribute .compost-scrap,#scene-contribute .compost-turn,#scene-contribute .compost-chute{animation:none!important;transform:none!important;transition:none;opacity:1}
}
body.motion-paused #scene-contribute .compost-scrap,body.motion-paused #scene-contribute .compost-turn,body.motion-paused #scene-contribute .compost-chute{animation:none!important;transform:none!important;opacity:1}