/* A small, floating world made from the original brand artwork. */
body{padding-bottom:0;overflow-x:clip}
.page{min-height:100svh;display:flex;flex-direction:column}
main{flex:1}
#home-view{min-height:calc(100svh - 135px);display:flex;flex-direction:column;justify-content:center}
.cover{padding:22px 0 0}
.signature-stage{width:min(760px,78%);margin:0 auto}
.cover h1{width:100%;max-width:none;margin:0}
.creative-note{margin:10px auto 0;transform:none}
.creative-statement{font-size:clamp(24px,2.6vw,35px);line-height:1.6}
.sticker-world{position:relative;padding:0 0 38px;margin:8px 0 25px}
.sticker-field{width:min(1060px,100%);min-height:clamp(300px,36vh,390px);margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr 1.08fr 1fr;gap:20px;align-items:center}
.floating-sticker{position:relative;min-width:0;animation:sticker-float var(--duration,8s) ease-in-out var(--delay,0s) infinite;will-change:transform}
.sticker-bloomy{--angle:-8deg;--offset:-19px;--duration:8.2s;--delay:-1.3s}
.sticker-shishis{--angle:8deg;--offset:35px;--duration:7.4s;--delay:-3.1s}
.sticker-sets{--angle:-6deg;--offset:-24px;--duration:9.2s;--delay:-5s}
.sticker-guide{--angle:9deg;--offset:28px;--duration:8.6s;--delay:-2.7s}
.sticker-link{display:block;position:relative;transform:rotate(var(--angle));transition:transform .35s cubic-bezier(.2,.7,.25,1);outline-offset:12px;border-radius:24px}
.sticker-art{display:flex;align-items:center;justify-content:center;position:relative;filter:drop-shadow(0 7px 8px #3d12300f) drop-shadow(0 1px 1px #3d123014);transition:filter .35s}
.sticker-art img{display:block;max-width:100%;width:100%;height:auto;user-select:none}
.bloomy-art{padding:0;background:none;border:0;border-radius:0;overflow:visible;filter:drop-shadow(0 5px 5px #17372c12)}
.bloomy-art img{mix-blend-mode:normal}
.neon-art{filter:drop-shadow(0 4px 2px #ffffff) drop-shadow(0 9px 8px #e900781c)}
.sets-art{display:flex;padding:0;background:none;border:0;border-radius:0;max-width:250px;margin:auto}
.sticker-sets-prefix{font:italic 400 25px/1 Georgia,serif;letter-spacing:-.05em;color:var(--pink)}
.sets-art .clothing-ink{position:relative;width:100%;max-width:210px}
.sets-art .sets-logo{width:100%}
.guide-art{width:184px;max-width:100%;margin:auto;flex-direction:column;gap:5px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#302029}
.guide-stuff,.guide-likes{font:italic 400 17px/1.1 Georgia,serif;letter-spacing:-.05em}
.guide-shishi{font:400 32px/1.1 'Personal Hand',cursive;color:var(--pink);margin:0}
.guide-wordmark{display:flex;align-items:baseline;justify-content:center;gap:5px;white-space:nowrap}
.sticker-caption{position:absolute;left:-20px;right:-20px;top:calc(100% + 22px);display:flex;justify-content:center;align-items:center;gap:7px;font-size:8px;font-weight:400;line-height:1.5;letter-spacing:.1em;text-align:center;color:#766a72;opacity:0;transform:translateY(-5px);transition:opacity .2s,transform .2s;pointer-events:none}
.sticker-caption>span{color:var(--pink);font-size:12px}
.floating-sticker:focus-within{z-index:2;animation-play-state:paused}
.sticker-link:focus-visible{transform:rotate(0) scale(1.06)}
.sticker-link:focus-visible .sticker-caption{opacity:1;transform:translateY(0)}
@media(hover:hover){
 .floating-sticker:hover{z-index:2;animation-play-state:paused}
 .sticker-link:hover{transform:rotate(0) scale(1.08)}
 .sticker-link:hover .sticker-art{filter:drop-shadow(0 14px 10px #3d123017) drop-shadow(0 1px 1px #3d123014)}
 .sticker-link:hover .sticker-caption{opacity:1;transform:translateY(0)}
}
.sticker-world .sparkle-toggle{bottom:0;right:0;min-height:30px;font-size:6px;letter-spacing:.12em}
.footer{border-top:0;padding:18px 0 24px}
.soundtrack-section:not([open]){display:none}
.sets-view{padding-top:55px;min-height:calc(100svh - 135px)}
.sets-intro{padding:clamp(90px,16vh,180px) 0;text-align:center}
.sets-intro h1{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 0 40px}
.sets-intro .sticker-sets-prefix{font-size:32px}
.sets-intro .clothing-ink{width:330px;max-width:80%}
.sets-intro p{font:400 31px/1.4 'Personal Hand',cursive;margin:0 0 24px}
.sets-intro>.micro{font-size:8px;letter-spacing:.18em}
@keyframes sticker-float{0%,100%{transform:translateY(var(--offset))}50%{transform:translateY(calc(var(--offset) - 12px))}}
.stars-paused .floating-sticker{animation-play-state:paused}
@media(min-width:1450px){.signature-stage{width:760px;max-width:760px}}
@media(max-width:850px){
 .signature-stage{width:85%;margin:0 auto}
 .cover{padding:34px 0 0}
 .creative-note{margin:16px auto 0}
 .creative-statement{font-size:28px}
 .sticker-field{gap:12px;min-height:300px}
 .bloomy-art{padding:0}
 .sets-art{padding:0}
 .sticker-sets-prefix{font-size:20px}
 .guide-art{width:150px;padding:0}
 .guide-stuff,.guide-likes{font-size:14px}
 .guide-shishi{font-size:28px}
 .sticker-caption{font-size:6px}
}
@media(max-width:600px){
 #home-view{min-height:calc(100svh - 130px);justify-content:center}
 .cover{padding:29px 0 0}
 .signature-stage{width:100%;margin:0 auto;min-height:0;display:block}
 .creative-note{margin:13px -8px 0}
 .creative-statement{font-size:clamp(18px,5.5vw,28px);white-space:nowrap;letter-spacing:-.045em}
 .sticker-world{margin:12px 0 14px;padding-bottom:31px}
 .sticker-field{width:min(390px,94%);grid-template-columns:1fr 1fr;column-gap:26px;row-gap:35px;min-height:0;padding:31px 0 30px}
 .sticker-bloomy{--angle:-9deg;--offset:-5px}
 .sticker-shishis{--angle:8deg;--offset:14px}
 .sticker-sets{--angle:-7deg;--offset:7px}
 .sticker-guide{--angle:10deg;--offset:18px}
 .sets-art{padding:0}
 .sticker-sets-prefix{font-size:20px}
 .guide-art{width:140px;padding:0}
 .guide-shishi{font-size:27px}
 .guide-stuff,.guide-likes{font-size:14px}
 .sticker-caption{top:calc(100% + 14px);font-size:6px;letter-spacing:.04em}
 .footer{gap:15px;padding:15px 0 20px;font-size:6px}
 .footer-links{gap:17px}
 .sticker-world .sparkle-toggle{font-size:6px;bottom:-3px}
 .sets-view{padding-top:35px}
}
@media(prefers-reduced-motion:reduce){
 .floating-sticker{animation:none;transform:translateY(var(--offset));will-change:auto}
 .sticker-link,.sticker-art,.sticker-caption{transition:none}
}

.sets-wordmark{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.map-sticker{display:block;width:154px;max-width:100%;height:auto;overflow:visible}
@media(max-width:850px){
 .map-sticker{width:125px}
}
@media(max-width:600px){
 .map-sticker{width:114px}
 .guide-wordmark{gap:4px}
}
@media(max-width:360px){
 .guide-stuff,.guide-likes{font-size:11px}
 .guide-shishi{font-size:24px}
 .guide-wordmark{gap:3px}
}

/* Stacked lettering, closely cut to the artwork. */
.guide-art{width:230px;filter:drop-shadow(0 5px 5px #3d12300c)}
@media(max-width:850px){.guide-art{width:180px}}
@media(max-width:600px){.guide-art{width:170px}}

.vision-quote{max-width:620px;margin:0 auto 30px;padding:0 18px;text-align:center;font:400 10px/1.8 Arial,Helvetica,sans-serif;color:#92908f;text-wrap:balance}
@media(max-width:600px){.vision-quote{max-width:100%;font-size:9px;margin:12px auto 24px;padding:0 8px}.vision-quote span{display:block;white-space:nowrap}}

.footer #year{color:var(--pink)}

/* Close white sticker edges and a light paper-lift shadow. */
.sticker-field{width:min(860px,100%);grid-template-columns:1.15fr 1fr 1.08fr;gap:55px}
.sticker-art{filter:drop-shadow(2.5px 0 0 white) drop-shadow(-2.5px 0 0 white) drop-shadow(0 2.5px 0 white) drop-shadow(0 -2.5px 0 white) drop-shadow(0 2px 1px #35232c22) drop-shadow(0 7px 6px #35232c1c)}
@media(hover:hover){.sticker-link:hover .sticker-art{filter:drop-shadow(2.5px 0 0 white) drop-shadow(-2.5px 0 0 white) drop-shadow(0 2.5px 0 white) drop-shadow(0 -2.5px 0 white) drop-shadow(0 3px 2px #35232c22) drop-shadow(0 12px 9px #35232c24)}}
@media(max-width:850px){.sticker-field{gap:28px}}
@media(max-width:600px){.sticker-field{width:min(390px,94%);grid-template-columns:1fr 1fr;column-gap:26px;row-gap:35px}.sticker-sets{grid-column:1/-1;width:46%;justify-self:center}}

/* One continuous die-cut backing for the complete Sets by Shishi’s mark. */
.sets-art .sets-wordmark{position:relative;gap:0;padding:4px 5px 5px;isolation:isolate}
.sets-backing{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.sets-art .sticker-sets-prefix{position:relative;z-index:1;margin-bottom:-6px}
.sets-art .clothing-ink{position:relative;z-index:1}



/* Fill the interior between the prefix and script while retaining the curved outer cut. */


.sets-art .sticker-sets-prefix{color:#171717}

.masthead .guide-nav{color:var(--pink)}

.masthead nav{gap:18px}
.sets-art{transition:none}

.sets-art .sets-backing{left:5px;right:5px;width:calc(100% - 10px)}

/* Purpose-drawn paper silhouette: the artwork sits on one smooth die-cut sheet. */
.sets-art .sets-backing{left:0;right:0;width:100%}
.sticker-art.sets-art,.sticker-link:hover .sticker-art.sets-art{filter:drop-shadow(0 1px 1px #35232c20) drop-shadow(0 5px 5px #35232c20)}

.sets-art{max-width:250px}.sets-art img{width:100%;height:auto}

/* Keep lettering as live vector geometry; apply the paper shadow only to the backing. */
.sticker-art.sets-art,.sticker-link:hover .sticker-art.sets-art{filter:none}
.sets-vector{display:block;width:100%;height:auto;overflow:visible;shape-rendering:geometricPrecision}
.sets-vector .sets-paper{filter:drop-shadow(0 8px 8px #35232c20) drop-shadow(0 40px 40px #35232c20)}
.sticker-sets{will-change:auto}

/* A visible paper rim, with its shadow below the untouched vector lettering. */
.sets-vector .sets-paper{filter:none}
.sets-vector .sets-paper-shadow{filter:drop-shadow(0 1px 1px #35232c55) drop-shadow(0 5px 4px #35232c30)}

/* Separate paper layer: browser-safe sticker shadow, with sharp unfiltered ink above it. */
.sets-paper-layer{position:absolute;inset:0;display:block;pointer-events:none;filter:drop-shadow(0 2px 1px #35232c40) drop-shadow(0 7px 6px #35232c30)}
.sets-paper-layer svg{display:block;width:100%;height:100%;overflow:visible}
.sets-paper-layer .sets-paper-shadow,.sets-paper-layer .sets-paper{filter:none}
.sets-art>.sets-vector{position:relative;z-index:1;pointer-events:none}
@media(hover:hover){.sticker-link:hover .sets-paper-layer{filter:drop-shadow(0 3px 2px #35232c40) drop-shadow(0 12px 9px #35232c38)}}
