:root { --ink:#f5f4ef; --paper:#0d0d0f; --blue:#2455ff; --red:#ff4b47; --lime:#caff34; --purple:#9a68ff; --yellow:#ffd632; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 4.5vw; border-bottom:1px solid var(--ink); background:var(--paper); position:sticky; top:0; z-index:5; }
.logo { display:block; line-height:0; } .logo-image { display:block; width:130px; height:68px; object-fit:contain; }
nav { display:flex; gap:2rem; font-size:.87rem; font-weight:500; } nav a:hover { color:var(--blue); }
.header-cta,.eyebrow,.image-caption { font-family:"Courier New",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; }.header-cta span { font-size:1.1rem; margin-left:.3rem; }
.hero { min-height:660px; display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; border-bottom:1px solid var(--ink); }
.hero-copy { padding:9vw 4.5vw 5vw; position:relative; z-index:1; }.eyebrow { margin:0 0 1.1rem; }.hero h1,.section-heading h2,.lookbook h2,.contact h2 { font-size:clamp(3.9rem,7.4vw,8rem); line-height:.85; letter-spacing:-.075em; margin:0; font-weight:700; }.hero h1 em,.lookbook h2 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.09em; }
.intro { font-size:1.1rem; max-width:330px; margin:2rem 0 2.4rem; line-height:1.45; }.button { display:inline-flex; align-items:center; gap:2rem; padding:1rem 1.25rem; font-weight:600; font-size:.86rem; }.button-dark { background:var(--ink); color:#0d0d0f; }.button span { font-size:1.25rem; }.hero-image { min-height:660px; position:relative; background:var(--yellow); overflow:hidden; }.hero-image img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }.image-caption { position:absolute; bottom:1rem; right:1rem; background:var(--paper); padding:.45rem .55rem; }.hero-sticker { background:var(--lime); color:#0d0d0f; width:110px; height:110px; border-radius:50%; display:grid; place-content:center; text-align:center; line-height:.85; font-size:.98rem; font-weight:700; transform:rotate(-12deg); position:absolute; left:46%; bottom:9%; z-index:2; }
.marquee { overflow:hidden; padding:.9rem 0; background:var(--blue); color:white; font-family:"Courier New",monospace; font-size:.8rem; white-space:nowrap; }.marquee div { animation:slide 18s linear infinite; }.marquee b { color:var(--lime); margin:0 1rem; } @keyframes slide { to { transform:translateX(-25%); } }
.catalogue { padding:8vw 4.5vw; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:3.7rem; }.section-heading h2 { font-size:clamp(3rem,6vw,6.5rem); }.section-heading > p { max-width:295px; line-height:1.45; font-size:1rem; }
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.product-art { height:330px; overflow:hidden; position:relative; display:grid; place-items:center; }.product-art::before,.product-art::after { content:""; position:absolute; background:#101012; }.product-art span { position:relative; z-index:1; font-size:3rem; font-weight:700; color:white; }.product-blue .product-art { background:var(--blue); }.product-red .product-art { background:var(--red); }.product-lime .product-art { background:var(--lime); }.product-purple .product-art { background:var(--purple); }
.product-image { display:none; width:100%; height:100%; object-fit:cover; object-position:center 42%; position:absolute; inset:0; z-index:2; }.product-art.has-photo::before,.product-art.has-photo::after,.product-art.has-photo span { display:none; }.product-art.has-photo .product-image { display:block; }
.art-jacket::before { width:135px; height:185px; border-radius:30px 30px 12px 12px; }.art-jacket::after { width:185px; height:70px; border-radius:50px; top:80px; }.art-top::before { width:115px; height:165px; border-radius:45px 45px 14px 14px; }.art-top::after { width:170px; height:38px; border-radius:50%; top:75px; background:var(--yellow); }.art-pants::before { width:130px; height:220px; clip-path:polygon(0 0,100% 0,88% 100%,55% 100%,50% 45%,45% 100%,12% 100%); }.art-pants::after { width:135px; height:12px; top:55px; background:var(--red); }.art-shoe::before { width:195px; height:75px; border-radius:50px 25px 20px 20px; top:150px; transform:rotate(-11deg); }.art-shoe::after { width:105px; height:25px; border-radius:25px; top:136px; left:calc(50% - 10px); transform:rotate(-11deg); background:white; }.art-shoe span { color:var(--yellow); transform:translateY(35px); }
.product-info { padding:.9rem .15rem 0; display:flex; justify-content:space-between; gap:.5rem; }.product h3 { font-size:1rem; margin:0 0 .2rem; }.product p { margin:0; font-family:"Courier New",monospace; font-size:.62rem; text-transform:uppercase; }.product strong { font-size:.85rem; white-space:nowrap; }
.lookbook { display:grid; grid-template-columns:1fr 1fr; min-height:590px; background:var(--yellow); }.lookbook-image { overflow:hidden; }.lookbook-image img { height:100%; width:100%; object-fit:cover; object-position:65% center; display:block; filter:saturate(1.1); }.lookbook-copy { align-self:center; padding:5vw 8vw; }.lookbook h2 { font-size:clamp(3.2rem,5.4vw,6rem); }.lookbook-copy > p:not(.eyebrow) { max-width:360px; line-height:1.5; margin:2rem 0; }.text-link { border-bottom:1px solid var(--ink); padding-bottom:.45rem; font-weight:600; }.text-link span { margin-left:1rem; }
.contact { padding:7vw 4.5vw 4.5vw; background:#000; color:var(--ink); display:grid; grid-template-columns:1.2fr 1fr auto; gap:3rem; align-items:end; }.contact h2 { font-size:clamp(3.3rem,6vw,6.8rem); }.contact-details { display:flex; gap:2.6rem; font-size:.9rem; line-height:1.6; }.contact-details p { margin:0; }.button-light { background:var(--lime); color:#0d0d0f; white-space:nowrap; }
footer { padding:1.7rem 4.5vw; display:flex; justify-content:space-between; align-items:center; font-family:"Courier New",monospace; font-size:.65rem; } footer a:last-child:hover { color:var(--blue); }
@media (max-width:800px) { .site-header { height:64px; padding:0 1.25rem; } .logo-image { width:104px; height:58px; } nav { display:none; }.header-cta { font-size:.62rem; }.hero { grid-template-columns:1fr; }.hero-copy { min-height:470px; padding:5.5rem 1.25rem 3rem; }.hero-image { min-height:490px; }.hero-sticker { width:86px; height:86px; font-size:.76rem; left:auto; right:1.2rem; bottom:44%; }.catalogue { padding:5rem 1.25rem; }.section-heading { display:block; margin-bottom:2.5rem; }.section-heading > p { margin-top:1.5rem; }.products { grid-template-columns:repeat(2,1fr); gap:2rem .7rem; }.product-art { height:230px; }.lookbook { grid-template-columns:1fr; }.lookbook-image { height:480px; }.lookbook-copy { padding:4.5rem 1.25rem; }.contact { padding:4.5rem 1.25rem 2rem; grid-template-columns:1fr; gap:2.5rem; }.contact-details { flex-wrap:wrap; gap:1.5rem 2rem; } footer { padding:1.4rem 1.25rem; } footer p { display:none; } }
@media (max-width:390px) { .products { grid-template-columns:1fr; }.product-art { height:280px; } }