@font-face{font-family:"Italiana";src:url(../fonts/italiana-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--black:#0A0A0A;--white:#F4F4F2;--grey:#9A9A96;--grey-2:#5E5E5A;--line:rgb(244 244 242 / .16);
  --disp:"Italiana",Didot,serif;--body:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;--gut:clamp(16px,4.6vw,72px)}
*{box-sizing:border-box}
html{background:var(--black);color:var(--white);overflow-x:clip}
body{margin:0;font:300 clamp(16px,1.05vw,18px)/1.65 var(--body);-webkit-font-smoothing:antialiased;letter-spacing:.005em}
main>section{overflow-x:clip}
a{color:inherit} img{display:block;max-width:100%;height:auto}
.mono{font:400 .72rem/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.skip{position:fixed;left:-999px;top:10px;z-index:200;background:var(--white);color:var(--black);padding:.6rem 1rem}
.skip:focus{left:10px}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;letter-spacing:.01em}
h2{font-size:clamp(2.8rem,7vw,7.4rem);line-height:.95}
i{font-style:normal;color:var(--grey)}

.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:24px var(--gut);mix-blend-mode:difference;color:#fff}
.mark{font:400 1.3rem/1 var(--disp);letter-spacing:.42em;text-decoration:none}
.top nav{display:flex;gap:clamp(14px,3vw,44px);align-items:center}
.top nav a{font:400 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.top nav a:hover::after{transform:none;transform-origin:left}
.cta{border:1px solid currentColor;padding:.85rem 1.2rem}
.cta::after{display:none}

.hero{height:220vh;position:relative}
.hero-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.mercury{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-copy{position:absolute;inset:auto var(--gut) 12vh;z-index:2;display:grid;grid-template-columns:1fr minmax(0,24rem);align-items:end;gap:2rem 4vw;pointer-events:none}
.kick{grid-column:1/-1;color:var(--grey);margin:0}
h1{font-size:clamp(4rem,14vw,16rem);line-height:.82;position:relative;height:1em}
h1 span{position:absolute;left:0;bottom:0;white-space:nowrap}
h1 .w2{opacity:0;font-size:.62em;bottom:.04em}
.sub{color:var(--grey);margin:0;max-width:24rem}
.scroll-cue{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);color:var(--grey);margin:0;z-index:2}
.scroll-cue::after{content:"";display:block;width:1px;height:42px;background:linear-gradient(var(--grey),transparent);margin:12px auto 0;animation:cue 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.manifesto{padding:22vh var(--gut);max-width:1500px}
.big{font:400 clamp(2rem,4.6vw,4.8rem)/1.12 var(--disp);margin:0}
.big .w{opacity:.14}

.collection{padding:4vh var(--gut) 10vh}
.col-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:3vh;margin-bottom:12vh}
.col-head .mono{color:var(--grey);margin:0}
.look{display:grid;grid-template-columns:minmax(0,1.05fr) 1fr;gap:clamp(24px,7vw,140px);align-items:end;margin-bottom:22vh}
.look.r{grid-template-columns:1fr minmax(0,1.05fr)}
.look.r figure{order:2}
.look figure{margin:0;overflow:hidden;aspect-ratio:4/5;position:relative}
.look img{width:100%;height:118%;object-fit:cover;filter:grayscale(1) contrast(1.08);will-change:transform}
.look-txt .mono{color:var(--grey)}
.look h3{font-size:clamp(2.6rem,5.4vw,5.8rem);line-height:.95;margin:1.4rem 0 1.8rem}
.look-txt p:not(.mono){color:var(--grey);max-width:26rem}
.price{color:var(--white)!important;border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem;max-width:26rem}

.cctv{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,6vw,100px);align-items:center;padding:14vh var(--gut);border-top:1px solid var(--line)}
.cctv-frame{position:relative;overflow:hidden}
.cctv-frame img{filter:grayscale(1) contrast(1.15)}
.cctv-frame::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgb(0 0 0 / .18) 2px 3px);pointer-events:none}
.hud{position:absolute;inset:0;padding:1.2rem 1.4rem;display:grid;grid-template-columns:1fr auto;align-content:space-between;color:#fff;text-shadow:0 0 8px #000;z-index:1}
.rec{color:#fff;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.hud-d{grid-column:1/-1}
.cctv-txt .mono{color:var(--grey)}
.cctv-txt h2{font-size:clamp(2.4rem,4.6vw,4.8rem);margin:1.2rem 0 1.6rem}
.cctv-txt p{color:var(--grey)}
.link{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}

.contact{background:var(--white);color:var(--black);padding:16vh var(--gut)}
.contact i{color:var(--grey-2)}
.c-grid{display:grid;grid-template-columns:1fr minmax(0,30rem);gap:clamp(32px,7vw,120px);margin-top:9vh}
.contact p{color:var(--grey-2)}
.tel{display:block;font:400 clamp(2.6rem,6vw,5.6rem)/1 var(--disp);text-decoration:none;margin:1.8rem 0}
.small{line-height:2}
.form{display:grid;gap:1.6rem}
.form label .mono{display:block;color:var(--grey-2);margin-bottom:.4rem}
.form input,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--black);font:300 1.25rem/1.4 var(--body);color:var(--black);padding:.4rem 0;border-radius:0;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-bottom-width:2px}
.form button{justify-self:start;background:var(--black);color:var(--white);border:0;padding:1.1rem 1.8rem;font:400 .74rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:letter-spacing .4s}
.form button:hover{letter-spacing:.28em}
.msg{color:var(--black);min-height:1.2em;margin:0}

.foot{padding:12vh var(--gut) 5vh}
.foot-mark{font:400 clamp(3.4rem,13.5vw,15rem)/.9 var(--disp);letter-spacing:.18em;margin:0 0 4rem;text-align:center;color:var(--white)}
.demo{color:var(--grey);text-align:center}

@media (max-width:900px){
  .mark{letter-spacing:.24em;font-size:1.1rem}
  .cta{padding:.7rem .9rem}
  h1 .w2{font-size:.8em}
  .top nav a:not(.cta){display:none}
  .hero-copy{grid-template-columns:1fr;bottom:10vh}
  .look,.look.r,.cctv,.c-grid{grid-template-columns:1fr}
  .look.r figure{order:0}
  .look{margin-bottom:12vh}
  h1 span{white-space:normal}
  h1{height:auto;min-height:1.7em}
}
@media (prefers-reduced-motion:reduce){ .scroll-cue::after,.rec{animation:none} h1 .w1{display:none} h1 .w2{opacity:1;position:static} }