:root{--ink:#0d0f14;--paper:#f6f4ee;--teal:#18b5b0;--blue:#2f6fe0;--deep:#0b1630;--r:18px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1.1rem;background:rgba(246,244,238,.85);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.nav-mark img{width:72px}
.nav nav a{margin-left:1rem;font-weight:800;text-decoration:none;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
.nav nav a:hover{color:var(--teal)}
.kicker{font-weight:900;text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;color:var(--teal)}
h2{font-size:clamp(2rem,7vw,3.6rem);line-height:1;font-weight:900;letter-spacing:-.02em;margin:.3rem 0 1rem}
.btn{display:inline-block;margin-top:1.6rem;padding:.9rem 1.6rem;border:3px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font-weight:900;text-decoration:none;box-shadow:5px 5px 0 var(--teal);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--teal)}
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.2rem;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,rgba(24,181,176,.28),transparent 60%)}
.stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,var(--blue),transparent),radial-gradient(2px 2px at 75% 20%,var(--teal),transparent),radial-gradient(1.5px 1.5px at 60% 70%,var(--blue),transparent),radial-gradient(2px 2px at 10% 80%,var(--teal),transparent),radial-gradient(1.5px 1.5px at 88% 65%,var(--ink),transparent);opacity:.55;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.2}}
.mark{position:relative;width:min(640px,92vw);transform-origin:50% 80%;animation:shrug 4.5s ease-in-out infinite}
@keyframes shrug{0%,70%,100%{transform:translateY(0) rotate(0)}76%{transform:translateY(-10px) rotate(-1.5deg)}82%{transform:translateY(-10px) rotate(1.5deg)}88%{transform:translateY(0) rotate(0)}}
.origin{position:relative;margin-top:1.2rem;font-size:1.1rem;font-weight:700;opacity:.75}
.ben{display:grid;gap:2rem;padding:5rem 1.2rem;background:var(--deep);color:#eaf6ff;align-items:center}
.ben-art{border-radius:50%;background:radial-gradient(circle,rgba(24,181,176,.45),transparent 70%);max-width:520px;margin:auto;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.ben-copy p{font-size:1.15rem}
.note{margin-top:1rem;font-size:.85rem!important;opacity:.6;font-style:italic}
.gs{position:relative;padding:6rem 1.2rem;text-align:center;overflow:hidden;background:var(--teal)}
.pattern{position:absolute;inset:0;background:url(../assets/pattern.webp) 0 0/220px;opacity:.18;animation:drift 60s linear infinite}
@keyframes drift{to{background-position:220px 220px}}
.gs-inner{position:relative;max-width:760px;margin:auto;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:2.5rem 1.4rem;box-shadow:10px 10px 0 var(--ink)}
.gs .kicker{color:var(--blue)}
.gg{font-size:clamp(4rem,18vw,8rem);font-weight:900;line-height:1;margin:.5rem 0}
.gg span:last-child{color:var(--teal);display:inline-block;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
blockquote{font-size:clamp(1.4rem,5vw,2.2rem);font-weight:800;line-height:1.2}
.cite{margin-top:.8rem;opacity:.6;font-weight:700}
.shop{padding:5rem 1.2rem;text-align:center;max-width:1200px;margin:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem;margin-top:1.5rem;text-align:left}
.card{display:block;text-decoration:none;background:#fff;border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:6px 6px 0 var(--teal)}
.card img{aspect-ratio:1;object-fit:cover;width:100%;border-bottom:3px solid var(--ink)}
.card img.contain{object-fit:contain;background:#eef}
.card h3{font-size:1rem;padding:.8rem .9rem 0}
.card p{padding:.2rem .9rem .9rem;font-weight:900;color:var(--blue)}
footer{background:var(--ink);color:var(--paper);text-align:center;padding:3rem 1rem}
footer img{width:180px;margin:0 auto 1rem}
.small{font-size:.8rem;opacity:.6;margin-top:.5rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(min-width:800px){.ben{grid-template-columns:1fr 1fr;padding:7rem 6vw}.nav{padding:.7rem 2rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.static .hero{min-height:680px}
@media(min-width:1100px){.grid{grid-template-columns:repeat(5,1fr)}}
.tagline{position:relative;margin-top:1.4rem;font-size:clamp(1.3rem,4vw,2rem);font-weight:900;letter-spacing:-.01em}
.wonder{position:relative;background:#07080c;display:grid;place-items:center;overflow:hidden}
.wonder img{width:100%;max-height:80vh;object-fit:cover;opacity:.85;-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 75%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 75%,transparent)}
.wonder-line{position:absolute;bottom:8%;left:0;right:0;text-align:center;color:#fff;font-weight:900;font-size:clamp(1.3rem,4.5vw,2.6rem);padding:0 1rem;text-shadow:0 2px 18px #000}
.chars{background:linear-gradient(#07080c,var(--deep));color:#eaf6ff;padding:5rem 1.2rem;text-align:center}
.char-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:1100px;margin:1.5rem auto 0}
.char{display:block;text-decoration:none;border:2px solid rgba(24,181,176,.5);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.03)}
.char img{aspect-ratio:1;object-fit:cover;width:100%}
.char h3{font-size:1.4rem;font-weight:900;padding:.9rem 1rem 0}
.char p{padding:.2rem 1rem 1.1rem;opacity:.8}
.gallery{background:var(--deep);padding:0 1.2rem 5rem;text-align:center}
.gal-grid{display:grid;gap:1.2rem;grid-template-columns:2fr 1fr;max-width:1100px;margin:1.2rem auto 0;align-items:start}
.gal-grid figure{margin:0;border-radius:var(--r);overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.gal-grid figcaption{color:#eaf6ff;opacity:.7;font-size:.9rem;padding:.6rem;font-style:italic}
@media(max-width:700px){.gal-grid{grid-template-columns:1fr}}
/* v3: door-style home + subpages */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
body{animation:pagein .5s ease-out}
@keyframes pagein{from{opacity:0}}
body.leaving{opacity:0;transition:opacity .3s}
.home{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.2rem;background:radial-gradient(ellipse at 50% 115%,rgba(24,181,176,.16),transparent 60%),var(--paper);overflow:hidden}
.home .mark{width:min(560px,84vw)}
.home .tagline{margin-top:1.6rem;font-size:clamp(.85rem,2.4vw,1rem);font-weight:600;letter-spacing:.06em;opacity:.55}
.doors{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin-top:2.6rem}
.doors a{position:relative;text-decoration:none;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.22em;opacity:.6;padding:.5rem 0;transition:opacity .25s}
.doors a::after{content:"";position:absolute;left:50%;right:50%;bottom:.2rem;height:2px;background:var(--teal);transition:left .25s,right .25s}
.doors a:hover,.doors a:focus-visible{opacity:1}
.doors a:hover::after,.doors a:focus-visible::after{left:0;right:0}
.home:has(.doors a:hover) .mark{animation-duration:2.2s}
.hint{height:1.2rem;margin-top:.6rem;font-size:.75rem;font-style:italic;opacity:0;transition:opacity .25s}
.hint.on{opacity:.5}
.subhead{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1.1rem;background:rgba(246,244,238,.88);backdrop-filter:blur(8px);border-bottom:1px solid rgba(13,15,20,.15)}
.subhead .home-link img{width:64px}
.subhead nav a{margin-left:.9rem;text-decoration:none;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;opacity:.55}
.subhead nav a[aria-current],.subhead nav a:hover{opacity:1;color:var(--teal)}
.page-foot{text-align:center;padding:2rem 1rem;font-size:.75rem;opacity:.5}
.page-foot a{text-decoration:none}
@media(max-width:480px){.subhead nav a{margin-left:.6rem;font-size:.64rem;letter-spacing:.1em}.subhead .home-link img{width:52px}}
.gallery.solo{padding-top:4rem}
.gallery.solo .kicker{color:var(--teal)}

.word{font-size:clamp(3rem,14vw,7.5rem);font-weight:900;line-height:1;letter-spacing:.02em;margin:.6rem 0 .2rem;white-space:nowrap}
.g2{font:inherit;color:var(--teal);background:none;border:0;padding:0;margin:0;letter-spacing:inherit;vertical-align:baseline;text-shadow:0 0 .18em rgba(0,170,170,.45);cursor:pointer;display:inline-block;animation:bob 3s ease-in-out infinite;transition:transform .5s,color .5s,text-shadow .5s;transform-origin:50% 85%}
.g2:focus-visible{outline:3px dashed var(--blue);outline-offset:6px;border-radius:8px}
.g2[aria-expanded=true]{animation:none;transform:rotate(-8deg);color:var(--blue);text-shadow:0 0 .22em rgba(40,110,255,.5)}
.g2hint{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;transition:opacity .4s}
html:not(.js) .g2hint,.opened .g2hint{opacity:0;height:0;overflow:hidden}
.g2line{font-size:clamp(1.3rem,4.6vw,2rem);font-weight:800;line-height:1.25;max-width:22ch;margin:1.2rem auto 0;transition:opacity .9s ease,transform .9s ease,filter .9s ease}
.js .g2line{opacity:0;transform:translateY(14px);filter:blur(6px)}
.js .opened .g2line{opacity:1;transform:none;filter:none}
.g2rule{width:60px;border:0;border-top:3px solid var(--ink);margin:2rem auto}
@media (prefers-reduced-motion:reduce){.g2,.g2line{animation:none;transition:none}}
/* v6: home menu glow + shop cards */
.doors a{transition:opacity .25s,transform .25s,text-shadow .25s,color .25s}
.doors a:hover,.doors a:focus-visible{transform:translateY(-3px);color:var(--teal);text-shadow:0 0 12px rgba(24,181,176,.55),0 0 2px rgba(24,181,176,.4);outline:none}
.doors a:focus-visible{outline:2px dashed var(--teal);outline-offset:6px}
@keyframes doorShimmer{0%,86%,100%{opacity:.6}93%{opacity:.95;text-shadow:0 0 8px rgba(24,181,176,.35)}}
.doors a{animation:doorShimmer 7s ease-in-out infinite}
.doors a:nth-child(2){animation-delay:1.75s}.doors a:nth-child(3){animation-delay:3.5s}.doors a:nth-child(4){animation-delay:5.25s}
.doors a:hover,.doors a:focus-visible{animation:none;opacity:1}
.shop .grid .card{display:flex;flex-direction:column;background:var(--paper);box-shadow:4px 4px 0 var(--ink);transition:transform .22s,box-shadow .22s}
.shop .grid .card:hover,.shop .grid .card:focus-visible{transform:translateY(-6px);box-shadow:8px 10px 0 var(--teal),0 0 24px rgba(24,181,176,.35);outline:none}
.shop .card .frame{display:block;aspect-ratio:1;overflow:hidden;background:#fff;border-bottom:3px solid var(--ink)}
.shop .card .frame img{width:100%;height:100%;border:0;aspect-ratio:auto;transition:transform .4s}
.shop .card .frame img.contain{background:#fff;padding:6%}
.shop .card:hover .frame img{transform:scale(1.05)}
.card-body{display:flex;flex-direction:column;flex:1;text-align:left}
.card-body h3{padding:.9rem 1rem .4rem;line-height:1.25}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 1rem 1rem}
.card-foot .price{padding:0;font-size:1.15rem}
.etsy-cta{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:.45rem .8rem;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);white-space:nowrap;transition:background .2s,color .2s}
.card:hover .etsy-cta,.card:focus-visible .etsy-cta{background:var(--teal);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.doors a,.shop .grid .card,.shop .card .frame img{animation:none!important;transition:none!important}.doors a:hover,.doors a:focus-visible,.shop .grid .card:hover,.shop .card:hover .frame img{transform:none}}
.card-foot{flex-direction:column;align-items:stretch;gap:.6rem}
.etsy-cta{text-align:center}