:root{--ink:#090613;--pink:#ff4fd8}*{box-sizing:border-box}body{margin:0;background:#f7f2ef;color:var(--ink);font-family:'DM Sans',sans-serif}header{height:90px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff}.logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:.75rem}.logo span{border:1px solid #e9c98788;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-family:Italiana;color:#e9c987}.logo b{display:grid;font:400 1.18rem/1 Italiana,serif;letter-spacing:.1em}.logo small{margin-top:4px;color:#efcde9;font:600 .48rem/1 'DM Sans',sans-serif;letter-spacing:.38em}nav{display:flex;gap:clamp(9px,1.25vw,20px)}nav a{color:#ddd4df;text-decoration:none;text-transform:uppercase;font-size:.64rem;letter-spacing:.09em}nav a[aria-current=page]{color:#e9c987}.looks-hero{padding:110px 8vw 80px;background:radial-gradient(circle at 80% 20%,#8f347c55,transparent 32%),var(--ink);color:#fff}.looks-hero p{color:#f1a3e6;letter-spacing:.28em;font-size:.65rem}.looks-hero h1{font:400 clamp(4.5rem,9vw,8.5rem)/.82 Italiana;margin:25px 0}.looks-hero h1 em{color:#d7b4ff}.looks-hero span{color:#bdb3c4}.filters{padding:45px 8vw 20px;display:flex;gap:10px;flex-wrap:wrap}.filters button{border:1px solid #bdb2bf;border-radius:50px;background:transparent;padding:10px 18px;cursor:pointer}.filters button.active{background:var(--ink);color:#fff}.looks-grid{padding:25px 8vw 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.look{position:relative;background:#fff}.look>button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.look img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}.look div{padding:16px 20px}.look small{color:#a03c92;text-transform:uppercase;letter-spacing:.2em}.look p{margin:8px 0 0;color:#716a74;line-height:1.55}.look p:empty{display:none}.empty{grid-column:1/-1;text-align:center;padding:80px;color:#776e7d}footer{padding:45px;text-align:center;background:var(--ink);color:#d8b4ec;letter-spacing:.25em;font-size:.65rem}@media(max-width:1050px){header{padding-inline:3vw}nav{gap:8px}nav a{font-size:.58rem;letter-spacing:.07em}}@media(max-width:750px){header nav{display:none}.logo b{font-size:1rem}.logo small{font-size:.42rem}.looks-grid{grid-template-columns:1fr}.looks-hero{padding-top:80px}.looks-hero h1{font-size:4rem}}
