*{box-sizing:border-box}
:root{--m:#444;--f:#777;--l:#161616;--a:#6ea8ff}
html,body{margin:0;background:#000;color:var(--f)}
body{font:14px/1.5 system-ui,sans-serif}
a{color:inherit;text-decoration:none}
main{width:min(900px,calc(100% - 32px));margin:auto}

header{
 height:64px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 border-bottom:1px solid var(--l)
}

.logo{font-size:22px;font-weight:700;letter-spacing:-.1em}

nav,.footer-links{
 display:flex;
 gap:20px;
 font:11px monospace;
 color:var(--m)
}

a:hover,.post a{color:var(--a)}

section{
 padding:70px 0;
 border-bottom:1px solid var(--l)
}

.hero{
 min-height:420px;
 display:flex;
 flex-direction:column;
 justify-content:center
}

h1{
 margin:0;
 color:#555;
 font-size:clamp(90px,20vw,180px);
 line-height:.8;
 letter-spacing:-.1em
}

h2{
 margin:0 0 25px;
 color:var(--m);
 font:11px monospace
}

h3{margin-top:40px;color:var(--f)}
p{max-width:650px}
.muted{color:var(--m)}

.list{border-top:1px solid var(--l)}

.row{
 display:grid;
 grid-template-columns:1fr 1fr 20px;
 gap:15px;
 padding:18px 0;
 border-bottom:1px solid var(--l)
}

.row span:last-child{text-align:right}

.project h1{font-size:clamp(60px,12vw,120px)}

.project-image{
 width:100%;
 max-height:600px;
 margin:40px 0;
 object-fit:cover
}

.post{max-width:700px;padding:70px 0}
.post-date{margin-bottom:30px;color:var(--m);font:11px monospace}
.post h1{font-size:clamp(40px,8vw,80px)}
.post h2{margin-top:50px;color:var(--f)}
.post p,.post li{color:#888}
.post b{color:#aaa}
.small-title{font-size:80px}

footer{
 display:flex;
 justify-content:space-between;
 padding:25px 0;
 color:var(--m);
 font:10px monospace
}

@media(max-width:600px){
 main{width:calc(100% - 24px)}
 nav{gap:12px}
 .row{grid-template-columns:1fr 20px}
 .row .muted{display:none}
 footer{flex-direction:column;gap:15px}
}