@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#263c36;background:#d8e6d4;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}.landscape{height:100svh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#c6c9b6;position:relative}.topline{z-index:3;display:flex;justify-content:space-between;align-items:center;padding:25px clamp(20px,5vw,76px)}.topline{position:absolute;top:0;left:0;right:0;height:76px;background:transparent;font-family:'DM Sans',sans-serif;font-size:clamp(15px,1.4vw,19px);font-weight:700;letter-spacing:.01em;color:#17392f;text-shadow:0 1px 8px #fff9}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:none}.top-message{font-family:'DM Mono',monospace;font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:.08em;color:#17392f;text-align:right}.roadside{position:absolute;inset:0;height:auto;min-height:0;isolation:isolate;overflow:hidden}.environment-window{position:absolute;z-index:0;inset:0;background-image:url('img/eco-transition-panorama.png');background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;transition:background-position .72s cubic-bezier(.2,.75,.25,1)}.sign-row{z-index:1;position:absolute;left:0;right:0;bottom:16%;overflow:hidden;display:flex;align-items:flex-end}.sign-track{width:max-content;display:flex;align-items:flex-end;gap:clamp(22px,2vw,34px);padding:0 clamp(30px,5vw,76px);transition:transform .72s cubic-bezier(.2,.75,.25,1);will-change:transform}.sign{--sign:#527d68;--ink:#f7f0dc;position:relative;width:clamp(220px,19vw,275px);flex:0 0 auto;display:flex;flex-direction:column;align-items:center;transform:translateY(0)}.sign:nth-child(2){transform:translateY(-35px)}.sign:nth-child(4){transform:translateY(-20px)}.sign-sage{--sign:#246044;--ink:#fff8e8}.sign-rust{--sign:#75452f;--ink:#fff3dd}.sign-blue{--sign:#185f88;--ink:#f8f6e9}.sign-yellow{--sign:#f0c344;--ink:#263c36}.sign-cream{--sign:#e7ead6;--ink:#284a39}.sign-lilac{--sign:#367386;--ink:#fff8e8}.sign-coral{--sign:#ad4937;--ink:#fff5e5}.board{position:relative;z-index:1;width:100%;appearance:none;font:inherit;text-align:left;cursor:pointer;transition:filter .18s,box-shadow .18s;min-height:225px;padding:22px 22px 21px;background:linear-gradient(110deg,color-mix(in srgb,var(--sign) 88%,#fff) 0%,var(--sign) 42%,color-mix(in srgb,var(--sign) 86%,#000) 100%);color:var(--ink);border:6px solid #87928e;border-radius:3px;box-shadow:inset 0 1px 1px #fff9,inset 0 -3px 0 #182a2838,0 6px 3px #27373348,0 15px 22px #263b302b;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;overflow:hidden}.board:hover{filter:brightness(1.07);box-shadow:0 10px 0 #263b3020,0 20px 30px #3245372b}.board:focus-visible{outline:3px solid #fff8df;outline-offset:5px}.sign-track.is-end .board{cursor:default}.board:before{content:"";position:absolute;z-index:0;inset:7px;border:1px solid color-mix(in srgb,var(--ink) 55%,transparent);box-shadow:inset 0 0 12px #fff2;pointer-events:none}.board:after{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(circle at 9px 9px,#e9e8da 0 2px,#596560 2.5px 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 9px) 9px,#e9e8da 0 2px,#596560 2.5px 3px,transparent 3.5px),radial-gradient(circle at 9px calc(100% - 9px),#e9e8da 0 2px,#596560 2.5px 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#e9e8da 0 2px,#596560 2.5px 3px,transparent 3.5px);pointer-events:none}.board>*{position:relative;z-index:1}.sign-number{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.13em;opacity:.88}.board p{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(18px,1.3vw,22px);font-weight:600;line-height:1.13;letter-spacing:-.025em;margin:13px 0;max-width:12em}.answer-starter{font-size:clamp(10px,.78vw,12px);line-height:1.35;opacity:.9;margin-top:-4px}.direction{font-size:15px;line-height:1;opacity:.75}.post{height:clamp(200px,22vh,255px);width:21px;background:radial-gradient(ellipse at center,#4f5d58 0 1px,#c4c9c1 1.2px 1.8px,transparent 2px) 50% 8px/5px 18px repeat-y,linear-gradient(90deg,#5d6965 0%,#bfc5bf 13%,#77837f 24%,#e0e2d9 46%,#929b96 68%,#59645f 100%);position:relative;margin-top:-1px;border-left:1px solid #e9e7dc;border-right:1px solid #485551;box-shadow:3px 1px 3px #28383366}.post:after{content:"";position:absolute;left:2px;right:2px;bottom:-13px;height:22px;background:linear-gradient(90deg,#5b6762,#aeb5ae 48%,#59645f);clip-path:polygon(0 0,100% 0,72% 100%,28% 100%)}.post-bolt{position:absolute;z-index:2;top:14px;left:-9px;width:35px;height:6px;border:1px solid #52605b;border-radius:2px;background:linear-gradient(#e2e4dc,#8c9791);box-shadow:0 8px 0 -1px #73807a}.post-bolt:before,.post-bolt:after{content:"";position:absolute;top:1px;width:3px;height:3px;border-radius:50%;background:#e9e7dc;box-shadow:0 0 0 1px #53615c}.post-bolt:before{left:3px}.post-bolt:after{right:3px}.is-ready .sign{animation:arrive .72s cubic-bezier(.2,.75,.25,1) both}.is-ready .sign:nth-child(1){animation-delay:.05s}.is-ready .sign:nth-child(2){animation-delay:.22s}.is-ready .sign:nth-child(3){animation-delay:.39s}.is-ready .sign:nth-child(4){animation-delay:.56s}.is-ready .sign:nth-child(5){animation-delay:.73s}.is-ready .sign:nth-child(6){animation-delay:.9s}.is-ready .sign:nth-child(7){animation-delay:1.07s}@keyframes arrive{from{opacity:0;translate:-26px 22px}to{opacity:1;translate:0 0}}@media(max-width:700px){.topline{height:auto;min-height:72px;padding:12px 18px;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}.top-message{font-size:11px;letter-spacing:.06em;text-align:left}.roadside{height:auto;min-height:0;overflow:hidden}.sign-row{bottom:22%}.sign-track{gap:25px;padding:0 28px}.sign{width:222px}.board{min-height:215px;padding:24px}.board p{font-size:22px}.answer-starter{font-size:12px}.sign:nth-child(2){transform:translateY(-24px)}.sign:nth-child(4){transform:translateY(-13px)}.post{height:200px}}@media(max-height:720px) and (min-width:701px){.roadside{min-height:0}.sign-row{bottom:16%}.board{min-height:225px}.post{height:160px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}