@charset "UTF-8";
:root { color-scheme: dark; --black: #000; --item-shadow-contact: 2px 3px 3px rgba(0,0,0,.58); --item-shadow-cast: 12px 18px 18px rgba(0,0,0,.23); --white: #fff; --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --gutter: clamp(24px, 2.7vw, 52px); --nav-size: 14px; --badge-width: 64px; --wipe-ease: cubic-bezier(.44, 0, .56, 1); }
* { box-sizing: border-box; }
html { background: var(--black); scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
body { margin: 0; background: #000; color: #fff; font: var(--nav-size)/1.35 var(--mono); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { margin: 0; border: 0; border-radius: 0; font: inherit; background: transparent; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 1px solid white; outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { color: black; background: white; }
.skip-link { position: fixed; z-index: 50; top: -80px; left: 20px; padding: 12px; background: white; color: black; }
.skip-link:focus { top: 20px; }
.story { position: relative; height: 500svh; }
.scene { position: sticky; top: 0; width: 100%; height: 100svh; min-height: 320px; overflow: hidden; isolation: isolate; background: #000; }
.header { position: absolute; top: var(--gutter); left: var(--gutter); right: var(--gutter); z-index: 10; }
.navigation { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: center; }
.navigation > button { background: transparent; color: #fff; opacity: 1; font-weight: 500; }
.navigation > button > span:first-child, .side-copy .wipe > span:first-child { text-shadow: 0 1px 2px #000b, 0 0 4px #0005; }
.side-copy, .side-copy .wipe { background: transparent; }
.wipe { position: relative; display: inline-block; padding: 2px 6px; isolation: isolate; white-space: nowrap; font-size: var(--nav-size); font-weight: 400; line-height: 1.4; letter-spacing: .04em; }
.wipe > span:first-child { display: block; }
.wipe-fill { position: absolute; inset: 0; display: grid; place-items: center; padding: inherit; color: #000; background: #fff; clip-path: inset(100% 0 0 0); transition: clip-path 350ms var(--wipe-ease); pointer-events: none; }
.wipe:hover > .wipe-fill, .wipe:focus-visible > .wipe-fill, button:hover > .wipe > .wipe-fill, button:focus-visible > .wipe > .wipe-fill { clip-path: inset(0); }
.artboard { position: absolute; width: min(100vw, 177.68332svh); aspect-ratio: 1672 / 941; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.pour-bag { position: absolute; z-index: 3; top: 0; left: 50%; display: block; width: min(78vw, 1100px); height: auto; opacity: 0; pointer-events: none; user-select: none; transform: translate(-50%, calc(var(--hide, .45) * -100% + var(--lift-y, 0px))) rotate(var(--rot, 180deg)); background: transparent; box-shadow: none; filter: none; }
.pour-charm { position: absolute; z-index: 4; width: 100px; height: auto; pointer-events: none; background: transparent; filter: none; box-shadow: none; }
#bag-canvas { display: block; width: 100%; height: 100%; }
#charm-canvas { position: absolute; pointer-events: none; background: transparent; box-shadow: none; filter: none; object-fit: contain; user-select: none; }
.bag-hit, .charm-hit { position: absolute; padding: 0; z-index: 3; }
.bag-hit { clip-path: polygon(5% 0, 95% 0, 100% 95%, 0 95%); }
.bag-hit:focus-visible, .charm-hit:focus-visible { clip-path: none; border: 1px solid #ffffff80; outline-offset: 8px; }
.charm-hit { z-index: 4; border-radius: 40%; }
.side-copy { position: absolute; top: 50%; margin: 0; transform: translateY(-50%); z-index: 5; font: inherit; }
.side-copy-left { left: calc(var(--gutter) - 6px); }
.side-copy-right { right: calc(var(--gutter) - 6px); }
.edge-badge { position: absolute; z-index: 15; right: var(--gutter); top: 66.7%; width: var(--badge-width); height: calc(var(--badge-width) * 3.23585); padding: 0; transform: translateY(-8%); overflow: hidden; background: #fff; color: #000; }
.badge-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; background: #fff; color: #000; }
.badge-mark { display: grid; place-items: center; flex: 0 0 28%; width: 100%; font: 900 calc(var(--badge-width) * .4)/1 Arial, Helvetica, sans-serif; letter-spacing: -.07em; padding-right: 2px; }
.badge-label { position: absolute; left: 50%; top: 63%; width: calc(var(--badge-width) * 2.22); text-align: center; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font: 700 calc(var(--badge-width) * .193)/1 Arial, Helvetica, sans-serif; letter-spacing: -.025em; }
.badge-fill { background: #000; color: #fff; clip-path: inset(100% 0 0 0); transition: clip-path 350ms var(--wipe-ease); }
.edge-badge:hover .badge-fill, .edge-badge:focus-visible .badge-fill { clip-path: inset(0); }
.edge-badge:focus-visible { outline-offset: -3px; outline: 1px solid #999; }
.unzip { position: absolute; left: 50%; bottom: 18px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 60px; padding: 4px 8px; transform: translateX(-50%); }
.sound { position: absolute; z-index: 12; bottom: 24px; left: var(--gutter); font-size: 10px; }
.back-to-bag { position: absolute; z-index: 12; bottom: 24px; right: var(--gutter); left: auto; max-width: calc(50% - var(--gutter)); font-size: 11px; }
.items { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.item { position: absolute; display: grid; place-items: center; padding: 0; opacity: 0; pointer-events: auto; will-change: transform, opacity; }
.item-content { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #d8d3c3; border-radius: 5px; background: #ddd6c5; color: #171612; font-size: 11px; letter-spacing: .06em; transition: transform .28s ease, box-shadow .28s ease; }
.item:nth-child(2n) .item-content { color: #ddd6c5; border-color: #69665c; background: #23231f; }
.item:hover .item-content, .item:focus-visible .item-content { transform: translateY(-6px); }
.item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.item-caption { position: absolute; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); transform: translate(-50%, 4px); font-size: 10px; line-height: 1.4; color: white; text-align: center; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.item:hover + .item-caption, .item:focus-visible + .item-caption { opacity: 1; transform: translate(-50%, 0); }
.asset-error { position: absolute; z-index: 5; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 32px; border: 1px solid #555; font-size: 11px; line-height: 2; text-align: center; }
.asset-error button { margin-top: 15px; text-decoration: underline; }
.debug { position: absolute; z-index: 30; right: 16px; top: 68px; padding: 12px; background: #121212e8; color: #d9dfc0; border: 1px solid #555; white-space: pre; font: 11px/1.7 var(--mono); pointer-events: none; }
.entry-dialog { position: fixed; width: min(500px, calc(100vw - 40px)); margin: auto; padding: 64px 32px 32px; border: 1px solid #686868; border-radius: 0; background: #050505; color: white; }
.entry-dialog::backdrop { background: #000b; backdrop-filter: blur(8px); }
.dialog-close { position: absolute; right: 18px; top: 16px; font-size: 11px; }
.entry-dialog h2 { margin: 0 0 24px; font: 20px/1.3 var(--mono); letter-spacing: .04em; }
.entry-dialog p { margin: 0 0 40px; color: #aaa; font: 12px/1.9 var(--mono); }
.dialog-return { font-size: 11px; }
.no-script { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: black; font: 12px var(--mono); }
.no-script img { width: 100%; max-height: 85svh; object-fit: contain; }
@media (min-aspect-ratio: 2 / 1) { .edge-badge { top: auto; bottom: 6%; transform: none; } .header { top: var(--gutter); } .unzip { bottom: 10px; } }
@media (max-width: 900px) { :root { --nav-size: 11px; --badge-width: 52px; } .header { top: var(--gutter); } .side-copy-right { top: 55%; } .side-copy-left { top: 45%; } .edge-badge { top: auto; bottom: 12%; transform: none; } }
@media (max-width: 640px) { .pour-bag { width: 90vw; } }
@media (max-width: 600px) { :root { --nav-size: 10px; --gutter: 24px; --badge-width: 46px; } .header { top: 24px; } .navigation .wipe { padding: 4px 0; } .artboard { width: min(128vw, 150svh); top: 46%; } .side-copy { top: 71%; } .side-copy-left { left: 14px; } .side-copy-right { top: 75%; left: 14px; right: auto; } .edge-badge { bottom: 16%; } .unzip { bottom: 39px; } .unzip .wipe { font-size: 11px; } .sound { bottom: 24px; font-size: 9px; } .back-to-bag { bottom: 24px; font-size: 9px; } .item-content { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Navigation dropdowns share the existing wipe treatment. */
.nav-dropdown { position: absolute; top: calc(100% + 14px); left: 0; z-index: 20; width: max-content; max-width: calc(100vw - 40px); padding: 12px; border: 1px solid #333; background: #000; color: #fff; font-family: var(--mono); box-shadow: 0 12px 28px #0005; }
.nav-dropdown .nav-item { display: block; width: 100%; text-align: left; font-size: clamp(10px, 1vw, 13px); line-height: 1.5; padding: 10px 12px; }
.nav-item > span { display: flex !important; align-items: baseline; gap: 14px; }
.nav-item .wipe-fill { display: flex; justify-content: flex-start; }
.nav-item b { font-weight: 400; font-size: .85em; letter-spacing: .08em; opacity: .65; }
@media (max-width: 600px) { .nav-dropdown { padding: 8px; } .nav-dropdown .nav-item { padding: 11px 10px; } }

/* One light direction for the six bag thumbnails; dialog contents are independent. */
.items .item .item-content { box-shadow: none; filter: drop-shadow(var(--item-shadow-contact)) drop-shadow(var(--item-shadow-cast)); transition: transform .28s ease, filter .28s ease; }
.items .item:hover .item-content, .items .item:focus-visible .item-content { transform: translateY(-6px); --item-shadow-contact: 3px 6px 5px rgba(0,0,0,.38); --item-shadow-cast: 17px 27px 25px rgba(0,0,0,.15); box-shadow: none; filter: drop-shadow(var(--item-shadow-contact)) drop-shadow(var(--item-shadow-cast)); }
.items .weekly-item .item-content img { object-fit: fill; }

/* Artwork has its own silhouette; captions are unrotated siblings in #items. */
.items .item.has-art .item-content { border: 0; background: transparent; border-radius: 0; outline: 0; }
.items .item:focus-visible { outline: 0; }
.items .item:focus-visible + .item-caption { text-decoration: underline; text-underline-offset: 4px; }
.items .item.is-out + .item-caption { opacity: 0; }