:root{--ink:#10302f;--chalk:#f4f7f3;--cobalt:#0f6b66;--flare:#ff6f91;--ball:#d9f23a;--mute:#5a6b69;--line:#d3dcd8;
--disp:'Playfair Display',Georgia,serif;--body:'Be Vietnam Pro',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font:400 1rem/1.5 var(--body);background:var(--chalk);color:var(--ink)}
:focus-visible{outline:3px solid var(--flare);outline-offset:3px}
.sr,.skip:not(:focus){position:absolute;left:-9999px}
.skip{position:fixed;top:8px;left:8px;background:#fff;padding:8px;z-index:99}
.bar{position:sticky;top:0;z-index:20;display:flex;gap:1.5rem;align-items:center;padding:.8rem clamp(1rem,4vw,3rem);background:var(--chalk);border-bottom:1px solid var(--line)}
.logo{font:italic 800 1.5rem var(--disp);text-decoration:none;color:var(--ink);letter-spacing:-.02em}
nav{display:flex;gap:1.2rem;overflow-x:auto;flex:1}nav a{color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:500;padding:.2rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--cobalt)}
.search input{font:inherit;padding:.5rem .8rem;border:1px solid var(--ink);background:transparent;width:9rem}
.hero{position:relative;min-height:100svh;padding:7rem clamp(1rem,4vw,3rem) 3rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ink);color:var(--chalk)}
.hero-art{position:absolute;inset:0 0 0 38%;opacity:.95}.hero-art svg{width:100%;height:115%}
.mega{position:relative;font:italic 800 clamp(4.5rem,18vw,14rem)/.82 var(--disp);letter-spacing:-.03em}.line.s2{padding-left:clamp(2rem,14vw,11rem)}
.line{display:block;overflow:hidden;padding-bottom:.04em}.line span{display:inline-block}
.lede{position:relative;max-width:34rem;margin:1.5rem 0;font-size:1.15rem}.lede small{display:block;color:#9aa3b8;margin-top:.5rem;font-size:.85rem}
.cta{position:relative;align-self:flex-start;background:var(--flare);color:var(--ink);font:700 1rem var(--body);padding:1rem 1.8rem;border:0;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s}
.cta:hover{transform:translateY(-3px);background:#fff}.cta.ghost{background:var(--ink);color:var(--chalk);margin:2rem auto 0;display:block}
.scroll{position:absolute;right:clamp(1rem,4vw,3rem);bottom:3rem;width:2px;height:90px;background:#ffffff40;overflow:hidden}
.scroll i{display:block;width:100%;height:40%;background:var(--chalk);animation:drop 1.8s cubic-bezier(.7,0,.3,1) infinite}
@keyframes drop{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
.rail-wrap{padding:4rem 0 1rem clamp(1rem,4vw,3rem)}.rail-wrap h2,.count{font:700 .95rem var(--body);color:var(--mute);margin-bottom:1rem}
.rail{display:flex;align-items:flex-end;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;padding-right:3rem}
.shop{padding:3rem clamp(1rem,4vw,3rem) 5rem}.tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}.chips button{font:inherit;padding:.4rem 1rem;border:1px solid var(--ink);background:none;cursor:pointer}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--chalk)}select{font:inherit;padding:.4rem;border:1px solid var(--ink);background:transparent}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:2.5rem 1.2rem}
.card{background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.art{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--c);display:grid;place-items:center;color:var(--fg);opacity:1;font:italic 800 6rem var(--disp);border-radius:5rem 0 0 0}
.art i{position:absolute;inset:-5%;background:repeating-linear-gradient(115deg,#ffffff14 0 18px,transparent 18px 44px);transition:transform .6s}
.card:hover .art i{transform:scale(1.08) translateX(2%)}
.tag{position:absolute;left:0;top:0;background:var(--flare);color:var(--ink);font:700 .85rem var(--body);padding:.3rem .6rem}.tag.out{background:var(--ink);color:#fff}
.demo{position:absolute;right:.5rem;bottom:.5rem;font:500 .7rem var(--body);color:#fff9}
.meta{display:flex;justify-content:space-between;gap:1rem;padding-top:.7rem}.meta b{font-weight:600}
.was{color:var(--mute);text-decoration:line-through;margin-right:.4rem}.now{font-weight:600}.low{color:var(--flare);font-size:.85rem}
dialog{border:0;max-width:min(56rem,94vw);width:100%;padding:0;background:var(--chalk)}dialog::backdrop{background:#0b1020cc}
.x{position:absolute;right:1rem;top:1rem;background:var(--ink);color:#fff;border:0;padding:.5rem 1rem;cursor:pointer;z-index:2}
.det{display:grid;grid-template-columns:1fr 1fr}.det .art{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--c);display:grid;place-items:center;color:var(--fg);opacity:1;font:italic 800 6rem var(--disp);border-radius:5rem 0 0 0}.det div.info{padding:3rem 2rem}
.det h2{font:900 2.4rem/1 var(--disp);font-stretch:110%;margin-bottom:1rem}.opts{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 1.2rem}
.opts span{border:1px solid var(--ink);padding:.3rem .8rem}footer{padding:2rem clamp(1rem,4vw,3rem);border-top:1px solid var(--line);color:var(--mute)}
@media(max-width:700px){.det{grid-template-columns:1fr}.search input{width:6rem}.hero-art{inset:0 0 40% 0;opacity:.6}.bar{gap:.8rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}.card:hover .art img{transform:scale(1.06)}.promo{width:100%;margin:1rem 0}

.tile{flex:0 0 auto;display:grid;place-items:center;text-align:center;padding:1.5rem;background:var(--c);color:var(--fg);text-decoration:none;font:italic 800 1.7rem/1.05 var(--disp);scroll-snap-align:start;transition:transform .3s}
.tile:hover{transform:translateY(-8px) rotate(-2deg)}
.t0{width:min(60vw,15rem);aspect-ratio:3/4;border-radius:999px 999px 0 0}
.t1{width:min(60vw,17rem);aspect-ratio:1;border-radius:50%}
.t2{width:min(50vw,13rem);aspect-ratio:2/3;border-radius:46% 46% 14% 14%/34% 34% 8% 8%}
.t3{width:min(80vw,22rem);aspect-ratio:2.2/1;border-radius:999px}
.t4{width:min(66vw,17rem);aspect-ratio:1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.art img{border-radius:0}.chips button{border-radius:999px}.nav a{border-radius:0}
.demo{color:var(--fg);opacity:.7}.art .tag{border-radius:0 0 1rem 0}

html,body{overflow-x:clip}.ch{display:inline-block;will-change:transform}
.marquee{overflow:hidden;background:var(--ball);color:var(--ink);transform:rotate(-2deg);margin:-1.4rem -1rem 0;position:relative;z-index:2;padding:.7rem 0}
.track{display:flex;width:max-content;animation:mq 30s linear infinite}.track span{font:italic 800 clamp(1.6rem,4vw,3rem)/1 var(--disp);white-space:nowrap}
.marquee i{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--flare);margin:0 1.4rem}
@keyframes mq{to{transform:translateX(-50%)}}
.rail.pin{overflow:visible;scroll-snap-type:none;width:max-content}
.hero .cta{transition:background .2s}.hero .cta:hover{transform:none}
.info{padding:4rem clamp(1rem,4vw,3rem);background:var(--ink);color:var(--chalk)}
.info h2{font:italic 800 clamp(2.4rem,7vw,5rem)/1 var(--disp);margin-bottom:2rem}
#infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem 3rem}
#infogrid h3{font:600 .9rem var(--body);color:var(--ball);margin-bottom:.5rem}#infogrid p{white-space:pre-line;max-width:34ch}