/* MyShirties · escenas en movimiento: ciudad, semana e hilo */
#ciudad{height:240vh;background:var(--night)}
#ciudad canvas{position:absolute;inset:0;width:100%;height:100%}
.city-copy{position:absolute;right:var(--gut-r);bottom:16vh;color:var(--paper);opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s;max-width:min(640px,92vw);z-index:2}
.city-copy.on{opacity:1;transform:none}
.city-copy .mono{color:var(--champ);display:flex;align-items:center;gap:10px}
.city-copy .mono::after{content:'';width:60px;height:1px;background:currentColor}
.city-h{margin:10px 0 0;font-weight:900;font-stretch:70%;font-size:clamp(38px,6.2vw,100px);line-height:.84;text-transform:uppercase}
.city-h em{font-family:var(--f-serif);font-weight:400;font-style:italic;font-stretch:100%;text-transform:none}
.route{position:absolute;left:var(--gut-l);bottom:40px;color:var(--paper);width:min(300px,60vw);z-index:2}
.route svg{width:100%;overflow:visible}
.route .lbls{display:flex;justify-content:space-between;margin-top:6px;color:var(--champ-hi)}
#semana{height:520vh;background:var(--paper)}
#semana .stage{background:var(--paper)}
.contour{position:absolute;inset:0;opacity:.7;background-image:repeating-radial-gradient(ellipse at 70% 40%,transparent 0 46px,rgba(20,19,18,.04) 47px 48px)}
.gal-title{position:absolute;left:var(--gut-l);top:50%;transform:translateY(-50%);max-width:min(420px,40vw);z-index:3}
.gal-title .mono{color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.gal-title .mono::before{content:'';width:36px;height:1px;background:currentColor}
.gal-title h2{margin:10px 0 8px;font-weight:900;font-stretch:70%;font-size:clamp(40px,5.4vw,84px);line-height:.88;text-transform:uppercase}
.gal-title h2 em{font-family:var(--f-serif);font-weight:400;font-style:italic;font-stretch:100%;text-transform:none}
.gal-title p{margin:0;color:var(--ink-soft);font-family:var(--f-serif);font-size:16px;max-width:34ch}
.gal-index{position:absolute;right:var(--gut-r);top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:grid;gap:12px;z-index:3}
.gal-index li{display:grid;grid-template-columns:52px auto;gap:12px;color:#a9a49c;transition:color .3s;font-family:var(--f-serif);font-size:14px}
.gal-index li span{font-family:var(--f-mono);font-size:11px;padding-top:3px;text-transform:uppercase;letter-spacing:.1em}
.gal-index li.on{color:var(--ink)}
.gal-index li.on span::before{content:'\25CF  ';color:var(--champ)}
.cards{position:absolute;inset:0;perspective:1100px}
.card{position:absolute;left:52%;top:50%;width:min(420px,58vw);transform-style:preserve-3d;will-change:transform,opacity;text-decoration:none;color:inherit}
.card figure{margin:0;background:#fff;padding:10px 10px 0;box-shadow:0 30px 60px -20px rgba(13,13,15,.35)}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--night-2)}
.card figcaption{font-family:var(--f-serif);font-size:15px;padding:10px 2px 12px;display:flex;justify-content:space-between;gap:10px}
.card figcaption span{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-soft);padding-top:4px;white-space:nowrap}
#flor{position:relative;height:100vh;height:100svh;min-height:620px;background:var(--paper);overflow:hidden}
#flor canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.flor-copy{position:absolute;left:var(--gut-l);top:50%;transform:translateY(-50%);z-index:3;max-width:min(440px,44vw);pointer-events:none}
.flor-copy .mono{color:var(--ink-soft)}
.flor-copy h2{margin:10px 0 12px;font-weight:900;font-stretch:70%;font-size:clamp(46px,6.4vw,100px);line-height:.84;text-transform:uppercase}
.flor-copy h2 em{font-family:var(--f-serif);font-weight:400;font-style:italic;font-stretch:100%;text-transform:none}
.flor-copy p{margin:0 0 14px;font-family:var(--f-serif);font-size:16px;color:var(--ink-soft);max-width:34ch}
.flor-copy .hint{color:var(--ink)}
.hang{position:absolute;left:0;top:0;width:clamp(96px,10vw,140px);padding:5px;background:#fff;border-radius:2px;z-index:4;transform-origin:50% 0;will-change:transform;box-shadow:0 14px 22px -10px rgba(13,13,15,.4)}
.hang img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;pointer-events:none}
.hang .tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;background:var(--night);color:var(--paper);font-size:11px;padding:4px 10px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}
.hang:hover .tag,.hang:focus-visible .tag{opacity:1}
.hang.fall{transition:transform 1.1s cubic-bezier(.55,0,.9,.5),opacity 1.1s;opacity:0}
@media (max-width:760px){.city-copy{bottom:22vh}.gal-index{display:none}.gal-title{top:88px;transform:none;max-width:calc(100% - 32px)}.card{left:50%;top:62%;width:78vw}.flor-copy{top:70px;transform:none;left:0;right:0;max-width:none;padding:14px var(--gut-r) 14px var(--gut-l);background:linear-gradient(var(--paper) 80%,rgba(251,250,247,0))}.flor-copy h2{font-size:44px}.flor-copy p{font-size:14px;margin-bottom:6px}}
@media (prefers-reduced-motion:reduce){.city-copy{transition:none}}