*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#050505;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.nav{position:fixed;z-index:20;top:0;left:0;width:100%;padding:15px 20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;mix-blend-mode:multiply}
.nav nav{display:flex;gap:22px}.nav a:hover{text-decoration:underline}

.fixed-logo{position:fixed;z-index:10;left:50%;top:50%;width:min(58vw,780px);transform:translate(-50%,-50%);opacity:.12;pointer-events:auto;mix-blend-mode:multiply;transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.fixed-logo img{display:block;width:100%;height:auto}
.fixed-logo:hover{opacity:.88;filter:hue-rotate(305deg) saturate(3) contrast(1.2);transform:translate(-50%,-50%) scale(1.02)}

.intro{height:100vh;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px}
.intro span{font-size:9px;letter-spacing:.16em}
.archive{width:100%;padding:2vh 0 10vh;overflow:hidden}
figure{margin:0 0 3.5vh;position:relative}
figure img{display:block;width:100%;height:auto}
.wide{width:min(980px,78vw);margin:auto}.medium{width:min(650px,55vw);margin:auto}.small{width:min(430px,38vw);margin:auto}
.shift-right{transform:translateX(8vw)}.shift-left{transform:translateX(-8vw)}

.generator{min-height:70vh;border-top:1px solid #000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.generator span,.generator p{font-size:9px;letter-spacing:.17em}
.generator h1{margin:18px 0 12px;font-size:clamp(56px,12vw,175px);line-height:.82;letter-spacing:-.08em}

@media(max-width:700px){
.nav{padding:12px 14px}.nav nav{gap:13px}
.fixed-logo{width:80vw;opacity:.10}
.intro{height:72vh}
figure{margin-bottom:2.5vh}
.wide,.medium,.small{width:91vw}
.shift-right,.shift-left{transform:none}
.generator{min-height:55vh}
}