/* SKIKT – gemensam stil */
:root{--ink:#17191d;--muted:#4a4e56;--hover:#5c6068;--rule:#e4e4e1;--bg:#fff;--tint:#f4f4f4;--gut:clamp(20px,3vw,40px)}
body.warm{--ink:#1d1b18;--muted:#5b554d;--hover:#6a6258;--tint:#f3f2ef}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--hover)}
h1,h2,h3,p,dl,dd{margin:0}
button{font:inherit}

.mono{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.mono.cap{letter-spacing:.06em;text-transform:none}
.mono.sub{color:var(--muted)}
.lead{font-size:clamp(22px,2.4vw,32px);font-weight:300;line-height:1.38;letter-spacing:-.01em;text-wrap:pretty}
.serif{font-family:'Newsreader',Georgia,serif}
.page{min-height:100vh;display:flex;flex-direction:column}

/* header / footer */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 32px;padding:18px var(--gut)}
.logo{font-weight:700;font-size:20px;letter-spacing:-.05em}
.nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.nav a[aria-current]{border-bottom:1px solid var(--ink);padding-bottom:2px}
.site-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:28px var(--gut);border-top:1px solid var(--rule);color:var(--muted)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--ink)}
body.warm .site-footer{background:#f2ede6;border-top:0}

.menu-btn{display:none}

/* media (bildytor) */
.media{position:relative;overflow:hidden;background:var(--tint);width:100%}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media.contain{background:#fff}
.media.contain img{object-fit:contain}
.r-4-5{aspect-ratio:4/5}.r-3-4{aspect-ratio:3/4}.r-4-3{aspect-ratio:4/3}.r-3-2{aspect-ratio:3/2}.r-1-1{aspect-ratio:1/1}

/* reveal */
[data-reveal]{will-change:opacity,transform}

/* ===== Startsida ===== */
.hero-top{padding:clamp(64px,10vw,150px) var(--gut) clamp(28px,3vw,44px)}
.hero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 48px}
.wordmark{font-weight:700;font-size:clamp(96px,20vw,310px);letter-spacing:-.065em;line-height:.78;margin-left:-.04em}
.hero-intro{display:flex;flex-direction:column;gap:14px;max-width:340px;padding-bottom:clamp(2px,.8vw,12px)}
.hero-intro p{font-size:17px;line-height:1.55;text-wrap:pretty}
.hero-img{height:88vh;min-height:420px}
.hero-img.media{width:100%}
.caption-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:14px var(--gut)}
.caption-row .tag{display:flex;align-items:center;gap:10px}
.caption-row .tag i{width:2px;height:12px;background:var(--ink)}

.studio-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:40px;padding:clamp(120px,16vw,240px) var(--gut)}
.studio-intro p{max-width:640px}

.projects{padding:clamp(40px,6vw,80px) var(--gut) clamp(80px,10vw,140px)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 48px;margin-bottom:clamp(48px,6vw,88px);padding-top:20px;border-top:1px solid var(--ink)}
.section-head>div:first-child{display:flex;flex-direction:column;gap:14px}
.h2{font-size:clamp(36px,4.6vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px 28px}
.chip{padding:6px 0;border:0;border-bottom:1px solid transparent;background:none;color:var(--hover);cursor:pointer;display:flex;gap:4px;align-items:flex-start;transition:color .2s,border-color .2s}
.chip sup{font-size:10px;line-height:1}
.chip[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(64px,8vw,120px)}
.card{display:flex;flex-direction:column;gap:16px}
.card-meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:baseline}
.card-meta .num,.card-meta .year{font-family:'Geist Mono',monospace;font-size:12px;color:var(--muted)}
.card-meta .name{font-size:20px;font-weight:500;letter-spacing:-.02em}
.card-meta .kind{grid-column:2}
.more{justify-self:end;color:#9a9ea6;transition:color .2s}
.card-meta:hover .more{color:var(--ink)}
.card:nth-child(6n+1){grid-column:1/span 7}.card:nth-child(6n+1) .media{aspect-ratio:4/3}
.card:nth-child(6n+2){grid-column:9/span 4;margin-top:120px}.card:nth-child(6n+2) .media{aspect-ratio:3/4}
.card:nth-child(6n+3){grid-column:1/span 12}.card:nth-child(6n+3) .media{aspect-ratio:21/9}
.card:nth-child(6n+4){grid-column:1/span 5}.card:nth-child(6n+4) .media{aspect-ratio:4/5}
.card:nth-child(6n+5){grid-column:7/span 6;margin-top:160px}.card:nth-child(6n+5) .media{aspect-ratio:4/3}
.card:nth-child(6n+6){grid-column:3/span 8}.card:nth-child(6n+6) .media{aspect-ratio:16/9}
.empty{font-size:18px;color:var(--muted)}

.process{padding:clamp(120px,14vw,200px) var(--gut);border-top:1px solid var(--rule)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:48px;margin-top:56px}
.step{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--ink);padding-top:20px}
.step .n{font-family:'Geist Mono',monospace;font-size:12px;color:var(--muted)}
.step h3{font-size:24px;font-weight:500;letter-spacing:-.02em}
.step p{font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}

.cta{padding:clamp(120px,16vw,240px) var(--gut) clamp(80px,10vw,140px);display:flex;flex-direction:column;gap:40px}
.cta h2{font-size:clamp(40px,7vw,104px);font-weight:500;letter-spacing:-.05em;line-height:.95;max-width:1100px}
.ulink{align-self:flex-start;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;border-bottom:1px solid var(--ink);padding-bottom:6px;transition:color .2s,border-color .2s}
.ulink:hover{border-color:var(--hover)}

/* ===== Studio / Kontakt ===== */
.page-main{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(80px,12vw,180px);padding:clamp(64px,10vw,150px) var(--gut) clamp(80px,10vw,140px)}
.page-title{font-weight:700;font-size:clamp(80px,19vw,300px);letter-spacing:-.065em;line-height:.78;margin-left:-.04em}
.page-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
.studio-grid{row-gap:28px}
.studio-grid .label{grid-column:1/span 3;padding-top:20px;border-top:1px solid var(--ink)}
.studio-grid .text{grid-column:7/span 5;display:flex;flex-direction:column;gap:1em;padding-top:14px}
.kontakt .page-main{gap:clamp(96px,14vw,200px)}
.kontakt .page-title{font-size:clamp(76px,17vw,280px)}
.kontakt .page-grid{row-gap:72px}
.kontakt .intro{grid-column:1/span 5}
.info{grid-column:7/span 6;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:40px clamp(16px,2vw,32px)}
.info>div{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--ink);padding-top:20px}
.info .val{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;padding-bottom:7px}

/* ===== Projektsida ===== */
.p-intro{padding:clamp(48px,7vw,104px) var(--gut) clamp(28px,3vw,40px)}
.p-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;color:var(--muted)}
.p-top a{color:var(--muted)}
.p-top a:hover{color:var(--ink)}
.p-title-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px;margin-top:clamp(48px,8vw,128px)}
.p-title{font-size:clamp(52px,9.5vw,148px);font-weight:600;letter-spacing:-.055em;line-height:.88;max-width:11em;text-wrap:balance}
.p-hero{height:86vh;min-height:420px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:20px 32px;padding:20px var(--gut) 22px;border-bottom:1px solid #e6e2dc}
.facts>div{display:flex;flex-direction:column;gap:6px}
.facts .v{font-size:17px;letter-spacing:-.01em}
.sec-label{color:var(--muted)}
.question{display:flex;flex-wrap:wrap;gap:24px 0;padding:clamp(120px,16vw,240px) var(--gut) clamp(100px,13vw,200px)}
.question .sec-label,.light .sec-label,.pinfo .sec-label{flex:0 0 clamp(140px,26vw,420px)}
.question .sec-label{padding-top:.7em}
.question p{flex:1 1 300px;max-width:17em;font-weight:300;font-size:clamp(30px,4.2vw,62px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.idea{display:flex;flex-wrap:wrap;align-items:flex-end;gap:56px clamp(32px,7vw,140px);padding:0 var(--gut) clamp(120px,15vw,220px)}
.idea .media{width:clamp(260px,44vw,680px)}
.idea-text{flex:1 1 280px;max-width:440px;margin-left:auto;display:flex;flex-direction:column;gap:22px;padding-bottom:clamp(0px,4vw,64px)}
.idea-text .a{font-family:'Newsreader',Georgia,serif;font-size:22px;line-height:1.5;text-wrap:pretty}
.idea-text .b{font-size:16px;line-height:1.65;color:#4f4a43;text-wrap:pretty}
.wide{height:clamp(320px,60vw,920px)}
.seq{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:48px 32px;padding:clamp(32px,4vw,56px) var(--gut) clamp(120px,15vw,220px)}
.fig{display:flex;flex-direction:column;gap:12px}
.seq .f1{flex:0 1 56%;min-width:260px}
.seq .f2{flex:0 1 28%;min-width:190px;margin-left:auto;margin-top:clamp(0px,22vw,360px)}
.pair{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:48px 32px;padding:0 var(--gut) clamp(120px,15vw,220px)}
.pair .media{flex:0 1 40%;min-width:240px}
.pair .media:nth-child(2){margin-top:clamp(0px,12vw,200px)}
.drawings{background:#faf8f5;padding:clamp(80px,10vw,150px) var(--gut)}
.drawings .sec-label{display:block;margin-bottom:clamp(40px,5vw,72px)}
.dr-row{display:flex;flex-wrap:wrap;gap:48px clamp(24px,4vw,64px);align-items:flex-end}
.dr-row .main{flex:1 1 520px}
.dr-row .side{flex:0 1 340px;display:flex;flex-direction:column;gap:40px}
.dr-row .side .small{width:78%}
.light{background:#f2ede6;padding:clamp(120px,14vw,210px) var(--gut) clamp(100px,12vw,180px)}
.light-head{display:flex;flex-wrap:wrap;gap:24px 0;margin-bottom:clamp(56px,7vw,110px)}
.light-head .sec-label{padding-top:.5em}
.light-head p{flex:1 1 280px;max-width:22em;font-size:clamp(22px,2.2vw,30px);line-height:1.35;text-wrap:pretty}
.mats{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:48px 24px}
.mat{display:flex;flex-direction:column;gap:14px}
.mat .media{background:#e8e1d7}
.mat:nth-child(1){flex:0 1 40%;min-width:240px}.mat:nth-child(1) .media{aspect-ratio:3/4}
.mat:nth-child(2){flex:0 1 25%;min-width:170px;margin-top:clamp(0px,16vw,260px)}.mat:nth-child(2) .media{aspect-ratio:1/1}
.mat:nth-child(3){flex:0 1 24%;min-width:170px;margin-top:clamp(0px,6vw,96px)}.mat:nth-child(3) .media{aspect-ratio:4/5}
.mat .t{display:flex;flex-direction:column;gap:4px}
.mat .t span:first-child{font-size:17px;letter-spacing:-.01em}
.mat .t span:last-child{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--muted)}
.pinfo{background:#f2ede6;padding:0 var(--gut) clamp(120px,14vw,200px)}
.pinfo-in{display:flex;flex-wrap:wrap;gap:28px 0;border-top:1px solid var(--ink);padding-top:20px}
.pinfo dl{flex:1 1 300px;max-width:720px;display:flex;flex-direction:column}
.pinfo dl>div{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2fr);gap:16px;padding:14px 0;border-bottom:1px solid #d8d0c4}
.pinfo dt{color:var(--muted);padding-top:3px}
.pinfo dd{font-size:17px;line-height:1.45}
.next{background:#f2ede6}
.next-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;padding:0 var(--gut) clamp(24px,3vw,36px)}
.next-head>div{display:flex;flex-direction:column;gap:14px}
.next-link{font-size:clamp(40px,7vw,108px);font-weight:600;letter-spacing:-.05em;line-height:.92}
.next .meta{color:var(--muted);padding-bottom:8px}
.next-img{height:clamp(300px,58vh,720px);background:#e8e1d7}

/* ===== Mobil ===== */
@media (max-width:759px){
  .hero-img{height:72vh}
  .card:nth-child(6n+1){grid-column:1/span 12}.card:nth-child(6n+1) .media{aspect-ratio:4/5}
  .card:nth-child(6n+2){grid-column:4/span 9;margin-top:0}.card:nth-child(6n+2) .media{aspect-ratio:3/4}
  .card:nth-child(6n+3){grid-column:1/span 12}.card:nth-child(6n+3) .media{aspect-ratio:16/10}
  .card:nth-child(6n+4){grid-column:1/span 9}.card:nth-child(6n+4) .media{aspect-ratio:4/5}
  .card:nth-child(6n+5){grid-column:3/span 10;margin-top:0}.card:nth-child(6n+5) .media{aspect-ratio:4/3}
  .card:nth-child(6n+6){grid-column:1/span 12}.card:nth-child(6n+6) .media{aspect-ratio:16/10}
  .studio-grid .label{grid-column:1/span 12}
  .studio-grid .text{grid-column:1/span 11;padding-top:8px}
  .kontakt .intro{grid-column:1/span 11}
  .info{grid-column:1/span 12}
}

/* ===== Mobilmeny ===== */
@media (max-width:759px){
  .site-header{flex-wrap:nowrap;backdrop-filter:none;background:#fff;padding:16px var(--gut)}
  .logo,.site-header>a.mono,.menu-btn{position:relative;z-index:1}
  .menu-btn{display:block;padding:6px 0;border:0;background:none;color:var(--ink);cursor:pointer}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:flex-end;gap:2px;padding:96px var(--gut) 40px;background:#fff;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .nav a{font-family:'Geist',system-ui,sans-serif;font-size:clamp(30px,10vw,56px);font-weight:600;letter-spacing:-.05em;line-height:1.1;text-transform:none;white-space:nowrap;color:#9a9ea6}
  .nav a[aria-current]{border-bottom:0;padding-bottom:0;color:var(--ink)}
  .nav a:hover,.nav a:active{color:var(--ink)}
  body.menu-open{overflow:hidden}
  body.menu-open .nav{opacity:1;visibility:visible}
}