#why.why-experiment{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:60px 7% 80px;overflow:hidden}
.why-variants{order:0;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:40px}
.why-variants button{font:inherit;font-size:12px;padding:10px 14px;border:1px solid var(--line);border-radius:30px;background:transparent;color:inherit;cursor:pointer}
.why-variants button[aria-pressed="true"]{background:var(--green);color:var(--cream)}
#why .philosophy-copy{display:contents}
#why .philosophy-copy>.eyebrow{order:1;margin:0 0 20px}
#why .philosophy-copy>h2{order:2;margin:0 auto 32px;max-width:820px}
#why .philosophy-copy>p{order:5;max-width:670px;margin:0 auto 18px;text-align:center}
#why .philosophy-art{order:3;width:min(100%,650px);margin:0 auto 28px}
#why .philosophy-art>.handwriting{display:block;margin:14px auto 0;rotate:0deg;font-size:23px}
#why .feedback-ribbon{order:4;width:min(100%,760px);padding:0;margin:0 auto 36px;background:transparent}
#why .philosophy-arrow{display:none}
.pixel-picture{position:relative;overflow:hidden;aspect-ratio:3/2}
.pixel-picture>img{display:block;width:100%;height:100%;object-fit:cover}
.pixel-dissolve{position:absolute;inset:0;display:grid;grid-template-columns:repeat(24,1fr);grid-template-rows:repeat(16,1fr);pointer-events:none}
.pixel-dissolve i{background:var(--pixel-color,var(--cream));opacity:0}
.pixel-dissolve.playing i{animation:pixel-clear 900ms both;animation-delay:var(--delay)}
@keyframes pixel-clear{0%,20%{opacity:1;transform:scale(1.05)}65%{opacity:.8;transform:scale(.55)}100%{opacity:0;transform:scale(0)}}
#why[data-layout="gallery"] .philosophy-art{width:min(100%,920px);order:2;margin-top:5px}
#why[data-layout="gallery"] .pixel-picture{aspect-ratio:2.2;}
#why[data-layout="gallery"] .philosophy-copy>h2{order:3;margin-top:24px}
#why[data-layout="gallery"] .feedback-ribbon{width:min(100%,520px);order:6;margin-top:24px;margin-bottom:0}
#why[data-layout="forest"]{background:var(--green);color:var(--cream);--pixel-color:var(--green)}
#why[data-layout="forest"] .why-variants button{border-color:#faf7e954}
#why[data-layout="forest"] .why-variants button[aria-pressed="true"]{background:var(--yellow);color:var(--green)}
#why[data-layout="forest"] .philosophy-copy p,#why[data-layout="forest"] .eyebrow{color:var(--cream)}
#why[data-layout="forest"] .philosophy-art{width:min(100%,560px);padding:16px;background:var(--cream);color:var(--green);transform:rotate(-2deg)}
#why[data-layout="forest"] .feedback-ribbon text{fill:var(--cream)}
#why[data-layout="forest"] .loop-word svg{stroke:var(--yellow)}
.closing.section-wrap .closing-collection{width:160px;height:160px;right:8%;top:70px}
@media(max-width:760px){#why.why-experiment{padding:40px 6% 50px}#why .philosophy-copy>h2{font-size:38px}#why .philosophy-copy>p{font-size:16px}.why-variants{margin-bottom:30px}.why-variants button{padding:10px;font-size:11px}.closing.section-wrap .closing-collection{position:relative;inset:auto;order:2;width:125px;height:125px;margin:28px auto 0}}
@media(prefers-reduced-motion:reduce){.pixel-dissolve.playing i{animation:none}}
.motion-paused .pixel-dissolve i{animation:none!important;opacity:0}
#why.why-experiment{background:var(--cream);color:var(--green)}
#why[data-layout="forest"]{background:var(--green);color:var(--cream)}
#why .pixel-picture{background:var(--cream)}
#why .pixel-picture>img{mix-blend-mode:normal}
/* A quiet loop behind the work; a folded sheet for the story. */
#why.why-experiment{position:relative;isolation:isolate}
#why .feedback-ribbon,#why[data-layout="gallery"] .feedback-ribbon{position:absolute;z-index:-1;pointer-events:none;width:150%;max-width:none;left:-25%;top:30%;margin:0;padding:0;opacity:.075;transform:rotate(-16deg)}
#why .feedback-ribbon svg{max-width:none;width:100%}
#why .ribbon-shadow{display:none}
#why .ribbon-band{stroke:currentColor;stroke-width:85}
#why[data-layout="forest"] .ribbon-band{stroke:var(--yellow)}
#why[data-loop="outline"] .feedback-ribbon{width:180%;left:-40%;top:20%;opacity:.16;transform:rotate(20deg)}
#why[data-loop="outline"] .ribbon-band{stroke-width:3}
#why[data-loop="crop"] .feedback-ribbon{width:260%;left:-100%;top:18%;opacity:.1;transform:rotate(-35deg)}
#why[data-loop="crop"] .ribbon-band{stroke-width:130}
.loop-options{order:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:-20px 0 36px;font-size:12px}
.loop-options>span{opacity:.65;margin-right:6px}
.loop-options button{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid transparent;padding:9px 5px;cursor:pointer}
.loop-options button[aria-pressed="true"]{border-bottom-color:currentColor}
#why .why-letter{order:5;position:relative;width:min(100%,720px);box-sizing:border-box;margin:24px auto 0;padding:46px 54px;background:linear-gradient(90deg,#00000003,transparent 48%,#00000007 50%,transparent 52%),#faf7e9;color:var(--green);text-align:left;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #16332616,0 12px 30px #00000012}
#why .why-letter:after{content:"";position:absolute;right:0;top:0;width:32px;height:32px;background:linear-gradient(45deg,#cdd0bb 45%,#e0e1ce 50%);box-shadow:-3px 3px 8px #16332620}
#why .why-letter p,#why[data-layout="forest"] .why-letter p{color:var(--green);font-size:17px;line-height:1.75;text-align:left;max-width:none;margin:0 0 22px}
#why .why-letter p:last-child{margin-bottom:0}
@media(max-width:760px){#why .why-letter{padding:34px 26px}#why .why-letter p{font-size:16px}.loop-options{gap:5px}#why .feedback-ribbon{top:40%}}
/* Match the story sheet to its artwork, with actual folded-paper grain. */
#why.why-experiment{--story-width:650px}
#why[data-layout="gallery"]{--story-width:920px}
#why[data-layout="forest"]{--story-width:560px}
#why .philosophy-art,#why .why-letter{width:min(100%,var(--story-width));box-sizing:border-box}
#why .why-letter{padding:44px 42px;background:#f7f3e6 url('/assets/folded-letter-paper.png') center/100% 100% no-repeat;clip-path:none;box-shadow:0 2px 3px #00000012,0 14px 28px #00000018;border:1px solid #e4dfcf}
#why .why-letter:after{display:none}
#why[data-layout="gallery"] .why-letter{padding-inline:clamp(28px,8vw,100px)}
@media(max-width:760px){#why .why-letter{padding:32px 26px}}