:root{--bg:#d9d6c9;--ink:#1d1b22;--muted:#7d7a70;--circle:#615c50;--cream:#ece9dd}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Special Elite","Courier New",monospace;line-height:1.55}
nav{position:sticky;top:0;background:var(--bg);z-index:5;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;padding:14px 12px;border-bottom:1px solid #0001}
nav a{color:var(--muted);text-decoration:none;font-size:1.05rem}
nav a:hover,nav a.on{color:var(--ink)}
section{padding:70px 6vw;display:flex;flex-direction:column;align-items:center;justify-content:center}
.full{min-height:calc(100vh - 56px);position:relative}
.box{border:2px solid var(--ink);padding:.35em 1.4em;font:600 clamp(1.8rem,5vw,3.4rem) "IBM Plex Mono",monospace;text-align:center;margin:0 0 50px}
.serif{font-family:"Fraunces",serif}
.logo{width:min(480px,86vw);aspect-ratio:1;border-radius:50%;background:var(--circle);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.logo img{width:36%;height:auto;margin-bottom:8px}
.logo b{font:700 clamp(2.4rem,9vw,3.8rem) "Fraunces",serif;line-height:1.1}
.logo span{font-family:"Special Elite","Courier New",monospace;font-size:clamp(.85rem,2.6vw,1.05rem);margin-top:8px;max-width:14em}
.logo.small{width:190px;padding:18px}.logo.small b{font-size:1.6rem}.logo.small span{font-size:.52rem}.logo.small img{width:38%}
.cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--muted);text-decoration:none;font-size:2rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 60px;max-width:1000px;width:100%}
.item{display:flex;gap:22px;align-items:flex-start}
.item svg{flex:none;width:110px;height:auto}
h3{margin:0 0 8px;font:600 1.05rem "IBM Plex Mono",monospace;text-decoration:underline;text-transform:uppercase}
.item p{margin:0;font-size:.95rem}
.about{display:flex;max-width:1000px;width:100%;align-items:stretch;flex-wrap:wrap}
.photo{flex:0 0 340px;min-height:460px;background:#c9c9c6 url(foto.jpg) center top/cover no-repeat}
.about .txt{flex:1;min-width:280px;padding-left:30px}
.about .box{margin:60px 0 40px -80px;background:var(--bg);display:inline-block;position:relative}
.about p{margin:0 0 10px;text-align:justify}
.sign{text-align:right;padding-right:20px}
.works{display:grid;grid-template-columns:1fr 1fr;gap:50px 60px;max-width:960px;width:100%}
.work{display:flex;gap:16px;color:inherit;text-decoration:none}
.work .star{font-size:3rem;line-height:1;font-family:"IBM Plex Mono",monospace}
.work h3{text-decoration:none;font-weight:500;letter-spacing:.02em}
.work p{margin:0;font-size:.85rem;color:#3a3830}
a.work:hover h3{text-decoration:underline}
.contact{text-align:center;min-height:calc(100vh - 56px)}
.contact p{margin:6px 0}
.contact a{color:var(--ink)}
.contact .logo{margin:40px auto 0}
footer{text-align:center;padding:20px;color:var(--muted);font-size:.8rem}
@media(max-width:760px){
.grid,.works{grid-template-columns:1fr}
.photo{flex:1 1 100%;min-height:380px;background-position:center 20%}
.about .txt{padding:0}.about .box{margin:-26px auto 30px;display:block;width:max-content;max-width:90%}
.item svg{width:80px}}