: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);min-height:calc(100svh - 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,52vh);width:min(480px,86vw,52svh);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 .scale{display:block;position:relative;width:36%;aspect-ratio:214/119;margin-bottom:8px}
.scale img{position:absolute;inset:0;width:100%;height:100%}
.scale .arm{transform-origin:50% 28%;animation:tip 5s ease-in-out infinite}
@keyframes tip{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.scale .arm{animation:none}}
.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 !important;padding:18px}.logo.small b{font-size:1.6rem}.logo.small span{font-size:.52rem}.logo.small .scale{width:38%}
.cue{display:block;margin-top:22px;text-align:center;color:var(--ink);text-decoration:none;font-size:2.4rem;line-height:1;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.cue{animation:none}}
#erbjuder .box{margin-bottom:28px}
.lead{max-width:600px;margin:0 0 54px;text-align:center;font-size:.95rem}
.lead.sub{margin:-24px 0 46px}
.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}
.pq{margin:0}
.pq p{margin:0}
.qm{display:block;font:700 6rem/1 "Fraunces",serif;color:#615c50;height:.5em;overflow:visible}
.qm.o{text-align:left;margin-bottom:.12em}
.qm.c{text-align:right;margin-top:-.08em;margin-bottom:.47em}
.about .sign{text-align:right;padding-right:6px;margin-top:0;font-family:"Mrs Saint Delafield","Brush Script MT",cursive;font-size:2.7rem;line-height:1;color:#1d1b22}
.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}
.works{align-items:start}
a.work:hover h3{text-decoration:underline}
.row{display:flex;gap:18px;align-items:flex-start;margin-top:10px}
.thumb{flex:none;width:150px;display:block;border:1px solid #0003;box-shadow:0 2px 8px #0002;transition:transform .15s,box-shadow .15s}
.thumb:hover,.thumb:focus-visible{transform:translateY(-2px);box-shadow:0 6px 14px #0003}
.thumb img{display:block;width:100%;height:auto}
.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){
.full{min-height:calc(100svh - 100px)}
.about p{text-align:center;font-size:.95rem;line-height:1.6;text-wrap:balance}
.qm{font-size:4.6rem}.qm.o,.qm.c{text-align:center}
.about .sign{text-align:center;padding-right:0;font-size:2.7rem;line-height:1}
.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}.thumb{width:112px}.row{gap:12px}}