@font-face{font-family:Manrope;src:url('./brand/manrope.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
:root{color-scheme:light;--green:#075439;--paper:#f3e6c6;--gold:#df9b12;--muted:#59765c}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{margin:0;color:var(--green);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:var(--paper);min-height:100svh}
button{font:inherit}
::selection{background:var(--gold);color:var(--green)}
.page{position:relative;z-index:4;display:grid;grid-template-rows:auto 1fr;min-height:100svh;padding:32px 48px 69px;pointer-events:none;user-select:none;-webkit-user-select:none}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px}
.header{min-height:65px}
.brand-trigger{position:relative;pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;border-radius:8px;-webkit-tap-highlight-color:transparent}
.brand-trigger .brand{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.brand-trigger:hover .brand{transform:translateY(-3px) rotate(-3deg) scale(1.045);filter:drop-shadow(0 5px 14px #a997351f)}
.brand-trigger:active .brand{transform:scale(.94)}
.brand-trigger:focus-visible{outline:2px solid var(--green);outline-offset:9px}
.brand{display:block;width:137px;height:auto;filter:drop-shadow(0 3px 8px #4b532914)}
main{display:grid;place-items:center;padding:42px 0 50px;text-align:center}
.hero{position:relative}
.eyebrow{margin:0 0 27px;text-transform:uppercase;letter-spacing:.2em;font-weight:500;font-size:.75rem;color:var(--muted)}
h1{margin:0;font-size:clamp(5rem,12vw,11rem);font-weight:500;letter-spacing:-.015em;line-height:1}
h1>span{display:block;padding-right:.015em}
h1 .gold{color:#008052;margin-top:0}
.period{display:inline-block;color:var(--gold)}
.groceries{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.grocery{position:absolute;left:0;top:0;display:grid;place-items:center;margin:0;padding:0;background:none;border:0;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform;transform-origin:center;line-height:0;border-radius:20%}
.grocery img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 8px 9px #42503220);transition:filter .18s}
.grocery:hover img,.grocery.dragging img{filter:drop-shadow(0 12px 12px #42503230) brightness(1.03)}
.grocery.dragging{cursor:grabbing;z-index:2}
.grocery:focus-visible{outline:2px dashed var(--green);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.page{padding:40px 64px 76px}h1{font-size:12rem}}
@media(max-width:650px){.page{padding:22px 23px 62px}.header{min-height:54px}.brand{width:116px}.eyebrow{font-size:.75rem;letter-spacing:.1em;margin-bottom:28px}main{padding:64px 0}h1{font-size:clamp(4rem,20vw,8.6rem)}}
@media(max-width:360px){.page{padding-inline:18px}.header{gap:12px}.eyebrow{max-width:230px;margin-inline:auto;line-height:1.7}}
@media(max-height:640px) and (min-width:651px){.page{padding-top:20px;padding-bottom:16px}main{padding:24px 0}h1{font-size:clamp(5.5rem,17vh,8rem)}.eyebrow{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero{will-change:auto}}

.shake-enable{pointer-events:auto;color:var(--green);background:transparent;border:1px solid #07543930;border-radius:100px;padding:10px 15px;min-height:44px;font-size:.75rem;cursor:pointer;touch-action:manipulation}
.shake-enable:hover{background:#07543908}
.shake-enable:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.shake-enable:disabled{cursor:default;opacity:.7}
.shake-enable[hidden]{display:none}