@font-face { font-family: "Grotesk"; src: url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Grotesk"; src: url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mono"; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mono"; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0a0a0a;
  --fg: #e9e9e6;
  --muted: #7d7d78;
  --line: #3a3a38;
  --accent: #e9e9e6;
  --gutter: clamp(16px, 2.2vw, 32px);
  --mono: "Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Grotesk", "Helvetica Neue", Arial, sans-serif;
  --dash: 1px dashed var(--line);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 13px/1.55 var(--mono); letter-spacing: 0.01em; min-height: 100vh; display: flex; flex-direction: column; position: relative; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
img, video { display: block; width: 100%; height: auto; background: #151514; }
.muted { color: var(--muted); }
::selection { background: var(--fg); color: var(--bg); }

/* ---------- header ---------- */
.site-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: var(--gutter); border-bottom: var(--dash);
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.wordmark { font: 700 clamp(28px, 4vw, 52px)/0.9 var(--sans); letter-spacing: -0.02em; text-transform: uppercase; }
.site-head nav { display: flex; align-items: center; gap: 22px; text-transform: uppercase; }
.nav-icon { display: inline-flex; line-height: 0; }
.nav-icon svg { display: block; }
.home .wordmark { font-size: clamp(34px, 5.4vw, 88px); }
.home .site-head { position: relative; background: transparent; backdrop-filter: none; }

/* Partikel hinter Name + Claim (Höhe setzt site.js) */
.particles { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 0; pointer-events: none; }
.home .site-head, .home .intro { position: relative; z-index: 1; }
.home .intro { pointer-events: none; }
.home .intro a { pointer-events: auto; }

/* ---------- home ---------- */
.intro { padding: calc(var(--gutter) * 0.55) var(--gutter) calc(var(--gutter) * 0.65); border-bottom: var(--dash); }
.claim { margin: 0; font: 700 clamp(16px, 1.9vw, 32px)/1.05 var(--sans); letter-spacing: -0.025em; }
.intro-text { margin: 6px 0 0; font: 500 clamp(15px, 1.25vw, 20px)/1.3 var(--sans); max-width: 70em; text-wrap: balance; }

.filters { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 14px var(--gutter); border-bottom: var(--dash); position: sticky; top: 0; z-index: 9; background: var(--bg); }
.filters button { all: unset; cursor: pointer; color: var(--muted); text-transform: uppercase; }
.filters button:hover, .filters button.active { color: var(--fg); }
.filters button.active::before { content: "● "; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.card { display: flex; flex-direction: column; padding: var(--gutter); border-right: var(--dash); border-bottom: var(--dash); }
.card:nth-child(3n) { border-right: 0; }
.card[hidden] { display: none; }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: #151514; }
.card-media { position: relative; }
.card-media .cover { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.card-media::after { content: "View project →"; position: absolute; left: 12px; bottom: 10px; padding: 3px 7px; background: var(--fg); color: var(--bg); text-transform: uppercase; font-size: 11px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.card-title { transition: transform .3s; }
.card:hover .cover, .card:focus-visible .cover { transform: scale(1.04); }
.card:hover .card-media::after { opacity: 1; transform: none; }
.card:hover .card-title { transform: translateX(6px); }
.card:hover { color: inherit; }
.card-meta { margin-top: 12px; }
.card-row { display: flex; justify-content: space-between; gap: 12px; }
.card-title { font: 500 17px/1.2 var(--sans); }
.card-year, .card-sub, .card-tags { color: var(--muted); }
.card-year { white-space: nowrap; }
.card-sub { margin-top: 4px; }
.card-tags { text-transform: lowercase; }

/* ---------- project ---------- */
.project .p-head { padding: calc(var(--gutter) * 2) var(--gutter) var(--gutter); border-bottom: var(--dash); }
.p-cat { margin: 0 0 10px; color: var(--muted); text-transform: uppercase; }
.project h1 { margin: 0; font: 700 clamp(40px, 8vw, 120px)/0.92 var(--sans); letter-spacing: -0.025em; }
.p-summary { margin: 22px 0 0; max-width: 46em; font: 500 clamp(16px, 1.6vw, 21px)/1.35 var(--sans); }

.p-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--dash); }
.p-facts > div { padding: var(--gutter); border-right: var(--dash); }
.p-facts > div:last-child { border-right: 0; }
.p-facts h2 { margin: 0 0 10px; font: inherit; color: var(--muted); text-transform: uppercase; }
.p-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 0; }
.p-facts dt { color: var(--muted); }
.p-facts dd { margin: 0; }
.p-facts ul { list-style: none; margin: 0; padding: 0; }

.p-hero { padding: var(--gutter); border-bottom: var(--dash); }
.p-hero video, .p-hero img { max-height: 86vh; object-fit: contain; background: #000; }
.hero-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: var(--gutter); }
.p-hero .hero-row video, .p-hero .hero-row img { max-height: none; }
.p-hero .portrait { width: auto; max-width: 100%; height: 82vh; margin: 0 auto; }
.p-text { padding: calc(var(--gutter) * 1.5) var(--gutter); border-bottom: var(--dash); columns: 2 20em; column-gap: calc(var(--gutter) * 2); font: 500 clamp(15px, 1.15vw, 17px)/1.5 var(--sans); }
.p-text p { margin: 0 0 1em; max-width: 36em; break-inside: avoid; }

.p-gallery { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--gutter); padding: var(--gutter); align-items: start; }
.p-gallery figure { margin: 0; }
.p-gallery figure.wide { grid-column: span 2; }

.pager { display: flex; justify-content: space-between; padding: var(--gutter); border-top: var(--dash); text-transform: uppercase; }

/* ---------- text pages ---------- */
.textpage { padding: calc(var(--gutter) * 2) var(--gutter); max-width: 52em; }
.textpage h1 { font: 700 clamp(36px, 6vw, 80px)/0.95 var(--sans); letter-spacing: -0.02em; margin: 0 0 1em; }
.textpage p { font: 500 clamp(16px, 1.5vw, 19px)/1.45 var(--sans); }
.todo { color: #e0a33a; }

/* ---------- footer ---------- */
.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: var(--gutter); border-top: var(--dash); color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card:nth-child(3n) { border-right: var(--dash); }
  .card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 640px) {
  .site-head { flex-direction: column; align-items: flex-start; }
  .home .wordmark { font-size: 12vw; line-height: 0.9; }
  .p-hero .portrait { height: auto; width: 100%; }
  .hero-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .hero-row > * { scroll-snap-align: start; }
  .grid { grid-template-columns: 1fr; }
  .card { border-right: 0 !important; }
  .p-facts { grid-template-columns: 1fr; }
  .p-facts > div { border-right: 0; border-bottom: var(--dash); }
  .p-facts > div:empty { display: none; }
  .p-gallery { grid-template-columns: 1fr; }
  .p-gallery figure.wide { grid-column: auto; }
  .p-gallery { grid-template-columns: repeat(min(var(--cols, 2), 2), 1fr); }
}