:root{--ink:#3b322c;--text:#4c4038;--soft:#74655a;--line:#6e503224;--paper:#fbf6f0;--green:#63b35b;--green-ink:#3d7f37;--red-ink:#a8462f;--up-bg:#e6f3e1;--down-bg:#fbe6e0;--shadow:0 18px 48px #5a3a2024, 0 2px 6px #5a3a200f;--heading:"Quicksand", "Nunito", system-ui, sans-serif;--body:"Nunito", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{background:var(--paper);color:var(--ink);font:600 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;margin:0}img{max-width:100%;display:block}h1,h2,h3{font-family:var(--heading);letter-spacing:-.015em;text-wrap:balance;font-weight:700}h2{margin:0 0 40px;font-size:clamp(32px,4vw,52px);line-height:1.08}em{color:var(--green-ink);font-style:normal}.center{text-align:center}.wrap{width:min(1200px,100% - 40px);margin:0 auto}.wrap.narrow{width:min(900px,100% - 40px)}section{padding:120px 0}.eyebrow{font:700 12.5px var(--heading);letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink);margin-bottom:14px;display:block}.btn{color:#fff;height:56px;font:700 19px var(--heading);white-space:nowrap;background:linear-gradient(#4f9f47 0%,#3a8532 100%);border-radius:16px;justify-content:center;align-items:center;padding:0 28px;text-decoration:none;transition:transform .15s,box-shadow .2s;display:inline-flex;box-shadow:0 12px 26px #3d7f3752,inset 0 1px #ffffff59,inset 0 -3px #1e501a4d}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px #3d7f3761,inset 0 1px #ffffff59,inset 0 -3px #1e501a4d}.btn:active{transform:translateY(1px)scale(.99)}.btn:focus-visible,.opt:focus-visible,.toggle button:focus-visible,.nav a:focus-visible{outline-offset:3px;outline:3px solid #f0a82e}.btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line), 0 6px 16px #5a3a2014;background:#fffcf8d1}.btn.small{background:#387d31;height:42px;padding:0 18px;font-size:15.5px}.nav{z-index:20;-webkit-backdrop-filter:blur(16px)saturate(1.2);background:#fffcf8cc;border:1px solid #ffffffd9;border-radius:20px;align-items:center;gap:28px;width:min(1200px,100% - 28px);height:62px;padding:0 10px 0 14px;display:flex;position:fixed;top:14px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #5a3a201a}.brand{font:700 18px var(--heading);color:var(--ink);align-items:center;gap:10px;text-decoration:none;display:inline-flex}.mark svg{display:block}.nav nav{gap:26px;margin-left:auto;display:flex}.nav nav a{color:var(--soft);font:700 15.5px var(--heading);text-decoration:none}.nav nav a:hover{color:var(--ink)}.hero{background:linear-gradient(#b8c2e5 0%,#e3d6dc 52%,#f5dcc6 100%);align-items:center;height:100dvh;min-height:660px;max-height:1100px;padding:0;display:grid;position:relative;overflow:hidden}#island{opacity:0;width:100%;height:100%;transition:opacity 1.6s;display:block;position:absolute;inset:0}body.live #island{opacity:1}#chips{pointer-events:none;opacity:0;transition:opacity 1s 1.6s;position:absolute;inset:0}body.live #chips{opacity:1}.chip{font:700 13.5px var(--heading);color:var(--green-ink);white-space:nowrap;background:#fffcf8f2;border-radius:999px;align-items:center;gap:7px;padding:4px 13px 4px 4px;transition:opacity .35s;display:inline-flex;position:absolute;top:0;left:0;box-shadow:0 6px 16px #50371e33}.chip svg{width:26px;height:26px;box-shadow:inset 0 0 0 2px var(--green);background:#fff;border-radius:50%;padding:3px}.chip.hide{opacity:0}.hero:after{content:"";background:linear-gradient(180deg, #fbf6f000, var(--paper));pointer-events:none;height:140px;position:absolute;bottom:0;left:0;right:0}.hero-still{display:none}.hero:before{content:"";z-index:1;pointer-events:none;opacity:var(--veil,0);background:linear-gradient(90deg,#fbf6f0e6 0%,#fbf6f0b8 30%,#fbf6f000 56%);position:absolute;inset:0}.hero-copy{z-index:2;grid-area:1/1;max-width:680px;margin-left:max(28px,50vw - 580px);padding-top:40px;position:relative}.hero-copy:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#fffaf4b3,#fffaf400);position:absolute;inset:-80px -120px -80px -160px}.hero h1{letter-spacing:-.025em;margin:0 0 20px;font-size:clamp(36px,3.4vw,50px);line-height:1.1}.hero-copy p{max-width:32ch;color:var(--text);margin:0 0 30px;font-size:21px;line-height:1.5}.ctas{flex-wrap:wrap;gap:12px;display:flex}@media (width>=900px){body.no-webgl .hero-still{object-fit:cover;width:64%;height:100%;display:block;position:absolute;top:0;right:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 28%);mask-image:linear-gradient(90deg,#0000,#000 28%)}}.year-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);align-items:start;gap:64px;display:grid}.steps{margin:0;padding:0;list-style:none}.step{opacity:.32;flex-direction:column;justify-content:center;min-height:72vh;transition:opacity .45s;display:flex}.step:first-child{justify-content:flex-start;min-height:56vh;padding-top:8vh}.step.active{opacity:1}.step h2{margin:0 0 14px;font-size:clamp(30px,3.3vw,46px)}.step p{max-width:34ch;color:var(--soft);margin:0;font-size:19px}.step-shot{display:none}.frame{aspect-ratio:16/10;background:#dfe3f1;border-radius:24px;position:sticky;top:16vh;overflow:hidden;box-shadow:0 34px 80px #5a3a2038,0 0 0 1px #6e50321a}.frame img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .55s,transform .8s cubic-bezier(.16,1,.3,1);position:absolute;inset:0;transform:scale(1.03)}.frame img.on{opacity:1;transform:none}.choice{background:linear-gradient(180deg, var(--paper) 0%, #eef0f8 18%, #eef0f8 82%, var(--paper) 100%)}.card{box-shadow:var(--shadow);background:#fff;border-radius:28px;padding:30px}.who{align-items:center;gap:18px;margin-bottom:24px;display:flex}.who>span{flex:none}.who blockquote{font:700 20px/1.45 var(--body);color:var(--text);margin:0}.opts{grid-template-columns:1fr 1fr;gap:14px;display:grid}.opt{border:2px solid var(--line);color:inherit;font:inherit;text-align:left;cursor:pointer;background:#fffdfa;border-radius:22px;gap:12px;padding:18px;transition:border-color .2s,transform .15s,box-shadow .2s,background .2s;display:grid}.opt:hover{border-color:#4b98458c;transform:translateY(-2px)}.opt:active{transform:translateY(0)scale(.99)}.opt[aria-checked=true]{border-color:var(--green);background:#f6fbf4;box-shadow:0 0 0 5px #63b35b2e}.opt b{font:700 22px var(--heading)}.row{flex-wrap:wrap;gap:6px;display:flex}.row i{font:800 13.5px var(--body);border-radius:999px;padding:4px 11px;font-style:normal}i.up{background:var(--up-bg);color:var(--green-ink)}i.down{background:var(--down-bg);color:var(--red-ink)}.odds{color:var(--soft);background:#f6f1ea;border-radius:16px;padding:10px 14px 12px;font-size:15px;display:block}.odds small{font:700 12px var(--heading);color:var(--soft);margin-bottom:2px;display:block}.odds strong{font:700 26px var(--heading);margin-right:1px}.odds strong+strong,.odds strong:last-of-type{margin-left:10px}strong.up{color:var(--green-ink)}strong.down{color:var(--red-ink)}.outcome{min-height:150px;margin-top:18px}.outcome .hint{text-align:center;color:var(--soft);margin:34px 0 0}.tl{gap:8px;display:grid}[hidden]{display:none!important}.tl div{color:var(--text);background:#faf6f0;border-radius:16px;grid-template-columns:104px 1fr;gap:12px;padding:12px 16px;font-size:16.5px;display:grid}.tl span{font:700 16px var(--heading);color:var(--green-ink)}.card[data-picked=pump] .tl div+div span{color:var(--red-ink)}.town-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;display:flex}.town-head h2{margin:0}.toggle{background:#efe8df;border-radius:999px;padding:5px;display:inline-flex}.toggle button{color:var(--soft);font:700 15px var(--heading);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:10px 18px}.toggle button[aria-selected=true]{color:var(--ink);background:#fff;box-shadow:0 2px 8px #5a3a201f}.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:14px;display:grid}.tile{border-radius:24px;margin:0}.photo{box-shadow:var(--shadow);background:#fff;flex-direction:column;grid-area:span 2/span 2;display:flex;overflow:hidden}.photo img{object-fit:cover;object-position:35% 60%;flex:1;width:100%;min-height:0}.photo figcaption{color:var(--soft);padding:14px 18px 16px;font-size:15px}.story{flex-direction:column;padding:22px;transition:background .4s;display:flex}.story .ic svg{width:44px;height:44px}.story h3{color:var(--soft);margin:14px 0 4px;font-size:16px}.story .state{font:700 27px/1.15 var(--heading);color:var(--ink);margin:0 0 auto;transition:color .3s}.story .dep{color:var(--soft);margin:14px 0 0;font-size:14.5px;line-height:1.45}.t-water{background:#e3eff8}.t-river{background:#e1f1ee}.t-sewer{background:#f3ebe0}.t-farm{background:#ecf3e0}.story.worse{background:#f9e6e0}.story.worse .state{color:var(--red-ink)}.state.flip{animation:.45s cubic-bezier(.16,1,.3,1) flip}@keyframes flip{0%{opacity:0;transform:translateY(10px)}}.world{padding-bottom:100px}.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 7% 93%,#0000);mask-image:linear-gradient(90deg,#0000,#000 7% 93%,#0000)}.track{gap:14px;width:max-content;padding:10px 0 20px;animation:70s linear infinite slide;display:flex}.marquee:hover .track{animation-play-state:paused}.track>span{box-shadow:0 8px 22px #5a3a2017, inset 0 0 0 1px var(--line);color:var(--text);white-space:nowrap;background:#fff;border-radius:18px;align-items:center;gap:12px;padding:15px 20px;font-size:16.5px;display:inline-flex}.tag{font:700 12.5px var(--heading);border-radius:999px;padding:3px 10px}.t-world.tag{color:#2a6388;background:#e2f0f8}.t-nation.tag{color:#634894;background:#f0e8f8}.t-weather.tag{color:#46607a;background:#e9eef3}.t-town.tag{color:#7e5f2c;background:#fbf1d6}@keyframes slide{to{transform:translate(-50%)}}.class-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:64px;display:grid}.class-grid h2{margin-bottom:18px}.class-grid p{max-width:40ch;color:var(--soft);margin:0;font-size:19px}.outcomes{grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;list-style:none;display:grid}.outcomes li{box-shadow:inset 0 0 0 1px var(--line), 0 8px 22px #5a3a200f;background:#fff;border-radius:22px;gap:6px;padding:22px;display:grid}.outcomes li:first-child{background:#eef5fa}.outcomes li:nth-child(4){background:#f2f7ec}.outcomes .ic svg{width:34px;height:34px}.outcomes b{font:700 18px var(--heading);margin-top:6px}.outcomes li>span:last-child{color:var(--soft);font-size:15px;line-height:1.5}.closing{background:url(/hard-choices-world-play/assets/farms-xjiISnWI.jpg) 50% 45%/cover no-repeat;place-items:center;min-height:600px;padding:120px 20px;display:grid;position:relative}.closing:before{content:"";background:linear-gradient(180deg, var(--paper) 0%, #fbf6f059 28%, #fbf6f059 72%, var(--paper) 100%);position:absolute;inset:0}.closing-copy{-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);text-align:center;background:#fffcf8e0;border-radius:32px;justify-items:center;gap:22px;padding:48px 56px;display:grid;position:relative}.closing h2{margin:0;font-size:clamp(34px,4.6vw,60px)}.closing p{color:var(--soft);margin:0;font-size:15px}.builder{background:linear-gradient(180deg, var(--paper) 0%, #e9e4f2 30%, #f3dfd2 78%, var(--paper) 100%);padding:110px 0 130px;position:relative;overflow:hidden}.builder-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:72px;display:grid}.builder h2{margin:0 0 18px}.builder .bar{background:var(--green);border-radius:999px;width:64px;height:6px;margin-bottom:26px;display:block}.builder-copy p{max-width:60ch;color:var(--text);margin:0 0 18px;font-size:19px;line-height:1.6}.links{flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.links .btn{gap:12px;height:52px;padding:0 22px;font-size:17px}.links .arrow{font-size:20px;transition:transform .2s;display:inline-block}.links .btn:hover .arrow{transform:translate(4px)}.isle{place-items:center;min-height:420px;display:grid;position:relative}.isle-float{width:300px;padding-bottom:120px;position:relative}.portrait{z-index:2;object-fit:cover;border-radius:50%;width:240px;height:240px;margin:0 auto;display:block;position:relative;box-shadow:0 0 0 7px #fffaf3,0 22px 44px #5a3a2047}.crew{z-index:3;filter:drop-shadow(0 6px 8px #50371e40);position:absolute;bottom:104px;right:22px}.crew svg{display:block}.ground{height:150px;position:absolute;bottom:0;left:0;right:0}.grass{z-index:1;background:radial-gradient(at 50% 40%,#9cc95e 0%,#7fb24a 62%,#6a9c3d 100%);border-radius:50%;height:66px;position:absolute;top:0;left:0;right:0;box-shadow:inset 0 -5px #3c5f2359}.strata{clip-path:polygon(0 0,100% 0,92% 46%,74% 78%,52% 100%,30% 82%,10% 50%);filter:drop-shadow(0 18px 18px #5a3a2038);background:linear-gradient(#6f9a3c 0 12%,#8a5a35 12% 30%,#c98b4a 30% 42%,#5b9fc4 42% 50%,#9a6a42 50% 70%,#6e4a33 70% 100%);height:112px;position:absolute;top:33px;left:3px;right:3px}.sky-cloud{background:#ffeeded9;border-radius:999px;width:120px;height:46px;position:absolute;box-shadow:34px -14px 0 4px #ffeeded9,-30px -6px 0 -2px #ffeeded9}.sky-cloud.c1{top:22%;left:6%}.sky-cloud.c2{opacity:.8;bottom:14%;right:4%;transform:scale(.75)}@media (prefers-reduced-motion:no-preference){.isle-float{animation:7s ease-in-out infinite bob}.sky-cloud.c1{animation:18s ease-in-out infinite alternate drift}.sky-cloud.c2{animation:22s ease-in-out infinite alternate-reverse drift}}@keyframes bob{50%{transform:translateY(-10px)}}@keyframes drift{to{translate:40px}}.foot{border-top:1px solid var(--line);width:min(1200px,100% - 40px);color:var(--soft);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:0 auto;padding:30px 0 46px;font-size:14.5px;display:flex}.foot .brand{font-size:16px}@media (prefers-reduced-motion:no-preference){.js .hero-copy>*{opacity:0;animation:10ms 3.5s forwards appear}body.intro .hero-copy>*{opacity:1;animation:1.1s cubic-bezier(.16,1,.3,1) both rise}body.intro .hero-copy>:nth-child(2){animation-delay:.15s}body.intro .hero-copy>:nth-child(3){animation-delay:.3s}.js .hero-copy:before{opacity:0;transition:opacity 1.2s}body.intro .hero-copy:before{opacity:1}body.motion .reveal{opacity:0;transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);transform:translateY(26px)}body.motion .reveal.in{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(20px)}}@keyframes appear{to{opacity:1}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#island,#chips{transition:none}.track{flex-wrap:wrap;justify-content:center;width:auto;padding:10px 20px;animation:none}.marquee{-webkit-mask-image:none;mask-image:none}.track>span[aria-hidden=true]{display:none}}@media (width<=899px){section{padding:84px 0}.nav nav{display:none}.nav .btn.small{margin-left:auto}.hero{height:auto;min-height:0;max-height:none;padding:120px 0 0;display:block}#island,#chips{display:none!important}.hero-copy{margin:0 20px;padding:0}.hero-copy:before{display:none}.hero-still{aspect-ratio:4/3;object-fit:cover;object-position:40% 60%;width:100%;margin-top:36px;display:block}.year-grid,.class-grid{grid-template-columns:1fr;gap:36px}.frame{display:none}.step,.step:first-child{opacity:1;min-height:0;margin-bottom:64px;padding:0}.step-shot{border-radius:16px;width:100%;margin-top:20px;display:block;box-shadow:0 16px 40px #5a3a202e}.opts{grid-template-columns:1fr}.tl div{grid-template-columns:1fr;gap:2px}.card{padding:20px}.who{align-items:flex-start}.who blockquote{font-size:17px}.bento{grid-template-columns:1fr 1fr}.photo{grid-area:auto/1/auto/-1}.photo img{aspect-ratio:16/10}.closing-copy{padding:36px 24px}.builder{padding:80px 0 90px}.builder-grid{grid-template-columns:1fr;gap:24px}.isle{min-height:0}.isle-float{scale:.85}.foot{flex-direction:column;align-items:flex-start}}@media (width<=520px){.nav{gap:12px}.brand{gap:8px;font-size:15px}.nav .btn.small{padding:0 14px;font-size:14.5px}.bento,.outcomes{grid-template-columns:1fr}.hero-copy p{font-size:19px}.btn{height:52px;padding:0 22px;font-size:18px}}
