/* ============ Fonts (self-hosted — no third-party requests) ============ */
/* Latin subset only; all three families are SIL OFL 1.1, licences in fonts/ */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens ============ */
/* Light only, on purpose: the black-and-white portrait has a white
   background and looks wrong inverted, so this site has no dark theme. */
:root {
  color-scheme: light;
  --font-head: 'Inter Tight', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --bg: #f6f5f1;
  --bg-soft: #ecebe5;
  --fg: #0c0c0d;
  --accent: #d63a0b;
  --accent-ink: #ffffff;

  --line: rgba(12, 12, 13, 0.14);
  --dim: rgba(12, 12, 13, 0.62);
  --row-hover: rgba(12, 12, 13, 0.035);

  --space-3xs: clamp(0.25rem, 0.2vw + 0.2rem, 0.35rem);
  --space-2xs: clamp(0.4rem, 0.3vw + 0.3rem, 0.55rem);
  --space-xs:  clamp(0.6rem, 0.4vw + 0.5rem, 0.85rem);
  --space-s:   clamp(0.9rem, 0.5vw + 0.75rem, 1.2rem);
  --space-m:   clamp(1.3rem, 0.8vw + 1.05rem, 1.8rem);
  --space-l:   clamp(1.8rem, 1.4vw + 1.4rem, 2.6rem);
  --space-xl:  clamp(2.6rem, 2.2vw + 1.9rem, 3.8rem);
  --space-2xl: clamp(3.6rem, 3.4vw + 2.5rem, 5.6rem);
  --space-3xl: clamp(5rem, 5.5vw + 3.2rem, 8.5rem);

  --text-xs:  0.78rem;
  --text-s:   0.92rem;
  --text-m:   1.1rem;
  --text-l:   1.4rem;
  --text-xl:  clamp(1.7rem, 1.6vw + 1.3rem, 2.3rem);
  --text-2xl: clamp(2.4rem, 3vw + 1.7rem, 3.8rem);
  --text-3xl: clamp(3.2rem, 5vw + 2rem, 5.8rem);
  --text-4xl: clamp(4rem, 8vw + 1.6rem, 8.6rem);

  --measure: 62ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; margin: 0; line-height: 1; letter-spacing: -0.02em; }
p { margin: 0; }
svg { display: block; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--space-l); padding-right: var(--space-l); }

/* ============ Nav ============ */
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}
.wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--text-m);
  letter-spacing: -0.01em;
}
.wordmark em { font-style: normal; color: var(--accent); }
.nav-links {
  display: flex;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.nav-links .sep { color: var(--dim); }
.nav-links a:hover { color: var(--accent); }

/* ============ Shared bits ============ */
.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-xl);
}
.panel { background: var(--bg-soft); border-top: none; padding-bottom: var(--space-3xl); }
.dim { color: var(--dim); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--space-m);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
}
.section-statement {
  font-size: var(--text-2xl);
  max-width: 18ch;
  margin-bottom: var(--space-m);
}
.section-sub { max-width: var(--measure); font-size: var(--text-m); }

.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-s) var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
}
.btn-solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-solid:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-line:hover { color: var(--accent); border-color: var(--accent); }
.link-row { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-l); }

/* ============ Hero ============ */
.hero { overflow: hidden; padding-bottom: var(--space-l); }
.hero-top { position: relative; }
.hero-copy { position: relative; z-index: 1; max-width: 62%; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.hero-name { font-size: var(--text-4xl); text-transform: uppercase; margin: var(--space-s) 0 var(--space-s); }
.hero-name { margin-bottom: var(--space-l); }
.hero-lede { max-width: 52ch; font-size: var(--text-l); color: var(--dim); }
.hero-lede b { color: var(--fg); font-weight: 500; }
.nowrap { white-space: nowrap; }

.portrait {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(36vw, 500px);
}
/* multiply makes the photo's white background vanish into the page colour */
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 38%;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
/* On desktop the links sit beside the wordmark, leaving the top right to the photo */
@media (min-width: 861px) {
  .nav { justify-content: flex-start; gap: var(--space-2xl); }
}
/* Too narrow to sit beside the text: stacked below it, the photo looks wrong, so drop it */
@media (max-width: 860px) {
  .hero-copy { max-width: none; }
  .portrait { display: none; }
}

/* ============ Timeline (career, year by year) ============ */
.timeline { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; }
.tl-group { display: grid; grid-template-columns: 7rem minmax(0, 1fr); }
.tl-label { text-align: right; padding: var(--space-m) var(--space-l) 0 0; }
.tl-year {
  position: sticky;
  top: var(--space-m);
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* the rail: a left border on the entries column, with a square marker per year */
.tl-entries { position: relative; border-left: 1px solid var(--line); padding-left: var(--space-l); }
.tl-entries::before {
  content: '';
  position: absolute;
  left: -4px;
  top: calc(var(--space-m) + var(--text-xl) / 2 - 4px);
  width: 7px;
  height: 7px;
  background: var(--fg);
}
.tl-group.is-today .tl-year { color: var(--accent); }
.tl-group.is-today .tl-entries::before { background: var(--accent); }
.tl-note { font-size: var(--text-s); color: var(--dim); padding: calc(var(--space-m) + var(--text-xl) / 2 - 0.7rem) 0 var(--space-m); }
.tl-note a { margin-left: var(--space-2xs); }

.tl-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-l);
  align-items: start;
  padding: var(--space-m) 0;
  transition: background-color 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}
/* On hover the entry grows outward by the padding it gains, so the tint has
   breathing room while the text stays put (and stays clear of the rail). */
.tl-entry:hover {
  background: var(--row-hover);
  padding-left: var(--space-s);
  padding-right: var(--space-s);
  margin-left: calc(-1 * var(--space-s));
  margin-right: calc(-1 * var(--space-s));
}
.tl-period { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--dim); margin-bottom: var(--space-2xs); }
.tl-entry:hover .row-link:not(.is-off) { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .tl-entry { transition: background-color 0.2s ease; }
}
@media (max-width: 720px) {
  .tl-group { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .tl-label { padding-right: var(--space-s); }
  .tl-year { font-size: var(--text-l); }
  .tl-entries { padding-left: var(--space-m); }
  .tl-entries::before { top: calc(var(--space-m) + var(--text-l) / 2 - 4px); }
  .tl-entry { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .tl-entry h3 { font-size: var(--text-l); overflow-wrap: anywhere; }
}

.hud-ruler { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-s) 0; }
.hud-readout {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}
.hud-readout b { color: var(--fg); font-weight: 500; }

/* ============ Logo strip ============ */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  margin-top: var(--space-l);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-m);
  color: var(--dim);
  letter-spacing: -0.01em;
}
.logo-strip { align-items: center; }
.logo-strip span { white-space: nowrap; }
.logo-strip img { height: var(--h, 28px); width: auto; max-width: 100%; mix-blend-mode: multiply; opacity: 0.92; }
.logo-note { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin-top: var(--space-m); }

/* ============ Archive rows ============ */
.archive-list { margin-top: var(--space-xl); }
.archive-row {
  display: grid;
  grid-template-columns: 3.5rem 10rem minmax(0, 1fr) auto;
  gap: var(--space-l);
  align-items: start;
  padding: var(--space-l) 0;
  border-top: 1px solid var(--line);
  transition: background-color 0.2s ease, padding 0.2s ease, margin 0.2s ease, box-shadow 0.2s ease, border-top-color 0.2s ease;
}
.archive-row:last-child { border-bottom: 1px solid var(--line); }
/* On hover the row grows outward by the same amount it gains in padding,
   so the highlight gets breathing room while the text stays put. */
.archive-row:hover {
  background: var(--row-hover);
  padding-left: var(--space-s);
  padding-right: var(--space-s);
  margin-left: calc(-1 * var(--space-s));
  margin-right: calc(-1 * var(--space-s));
}
/* The line under a row is the next row's top border, which doesn't widen.
   The hovered row draws that line itself (shadow, 1px below its edge) and
   the neighbour's own line is hidden meanwhile, so it stays a single line.
   The last row already owns its bottom border. */
.archive-row:not(:last-child):hover { box-shadow: 0 1px 0 var(--line); }
.archive-row:hover + .archive-row { border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .archive-row { transition: background-color 0.2s ease; }
}
.row-index { font-family: var(--font-mono); font-size: var(--text-s); color: var(--dim); }
.row-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  padding-top: 0.2rem;
}
.row-tag.is-live { color: var(--accent); }
.row-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
.row-role { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: var(--space-2xs); }
.row-body p { max-width: var(--measure); color: var(--dim); font-size: var(--text-s); }
.row-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid currentColor;
  height: fit-content;
  white-space: nowrap;
}
.row-link.is-off { border-bottom: none; color: var(--dim); }
.archive-row:hover .row-link:not(.is-off) { color: var(--accent); }
@media (max-width: 720px) {
  .archive-row { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .row-link { justify-self: start; }
}

/* ============ Beyond code columns ============ */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.col h3 { font-size: var(--text-l); margin-bottom: var(--space-s); }
.col li {
  font-size: var(--text-s);
  color: var(--dim);
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--line);
}
.col li b { color: var(--fg); font-weight: 500; }
.col li a { border-bottom: 1px solid currentColor; }

/* ============ Case study page ============ */
.case-hero { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.case-hero h1 { font-size: clamp(2rem, 4vw + 1rem, 4.4rem); text-transform: uppercase; margin-bottom: var(--space-m); overflow-wrap: anywhere; }
.shot {
  aspect-ratio: 16 / 9;
  margin-top: var(--space-xl);
  border: 1px dashed var(--line);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-align: center;
  padding: var(--space-m);
}

/* ============ Legal pages (Impressum, Datenschutz) ============ */
.legal { max-width: 74ch; margin-left: 0; padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }
@media (min-width: 1300px) { .legal { margin-left: max(0px, calc((100vw - 1240px) / 2)); } }
.legal h1 { font-size: var(--text-2xl); margin-bottom: var(--space-l); }
.legal h2 { font-size: var(--text-l); margin: var(--space-xl) 0 var(--space-xs); }
.legal p, .legal li, .legal address { font-size: 1rem; line-height: 1.65; margin-bottom: var(--space-xs); }
.legal address { font-style: normal; }
.legal ul { list-style: disc; padding-left: 1.2em; margin: 0 0 var(--space-xs); }
.legal a { border-bottom: 1px solid currentColor; }
.legal a:hover { color: var(--accent); }
.legal-lede { font-size: var(--text-m); line-height: 1.55; max-width: 62ch; }
.legal-lang { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-m); }
.legal-note-top { font-size: var(--text-s); color: var(--dim); max-width: 62ch; margin-bottom: var(--space-m); }
.legal-note { margin-top: var(--space-xl); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--dim); }

/* ============ Footer ============ */
.footer { padding-top: var(--space-xl); padding-bottom: var(--space-xl); border-top: 1px solid var(--line); }
.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.footer-row a:hover { color: var(--accent); }
.footer-promise {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.footer-promise::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--accent); }

/* Whole block clickable: the entry's link stretches over its container
   (only where the link is real, not the "Soon" placeholders). */
.tl-entry, .archive-row { position: relative; }
.tl-entry .row-link:not(.is-off)::after,
.archive-row .row-link:not(.is-off)::after { content: ""; position: absolute; inset: 0; }
.tl-entry:has(.row-link:not(.is-off)),
.archive-row:has(.row-link:not(.is-off)) { cursor: pointer; }
.tl-entry .row-link:focus-visible,
.archive-row .row-link:focus-visible { outline: none; }
.tl-entry .row-link:focus-visible::after,
.archive-row .row-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Screenshots with captions (case-study pages) */
.fig { margin: 0; }
.fig img { display: block; width: 100%; height: auto; background: var(--bg-soft); }
.fig figcaption { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--dim); margin-top: var(--space-2xs); }
.fig-hero { margin-top: var(--space-xl); }
.fig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); margin-top: var(--space-xl); }
.fig-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .fig-grid, .fig-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Placeholder link buttons that are not live yet */
.btn.is-off { color: var(--dim); border-style: dashed; pointer-events: none; }
.archive-row .link-row { margin-top: var(--space-s); gap: var(--space-xs); }
.archive-row .btn { padding: var(--space-2xs) var(--space-s); }

/* Notes that follow a list of rows need their own spacing */
.archive-list + .section-sub { margin-top: var(--space-l); }
.section-sub + .section-sub { margin-top: var(--space-s); }
.note-eyebrow { margin-top: var(--space-xl); }

/* Quotes inside rows */
.quote { margin: var(--space-m) 0 0; padding-left: var(--space-m); border-left: 2px solid var(--accent); max-width: var(--measure); }
.quote p { font-size: var(--text-m); margin: 0 0 var(--space-xs); }
.quote p:first-child { color: var(--fg); }
.quote p + p { color: var(--dim); font-size: var(--text-s); }
.quote cite { display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-style: normal; letter-spacing: 0.04em; color: var(--dim); }
.quote-lead { margin-top: var(--space-m); max-width: 60rem; }
.quote-lead p:first-child { font-size: var(--text-l); line-height: 1.35; }

/* External links: open in a new tab, marked visually and for screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ext { margin-left: 0.4em; font-size: 0.9em; }
.fig-card { max-width: 40rem; }

/* Warning note under an image */
.notice { margin-top: var(--space-s); padding: var(--space-s) var(--space-m); border-left: 3px solid var(--accent); background: var(--bg-soft); max-width: 48rem; font-size: var(--text-s); }
.notice strong { color: var(--accent); }
.fig-collage { margin-top: var(--space-l); margin-bottom: var(--space-l); }

/* Compact spec lists inside project rows */
.spec-list { list-style: none; margin: var(--space-s) 0 0; padding: 0; max-width: 56rem; }
.spec-list li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); grid-template-areas: "name detail" "year detail"; column-gap: var(--space-m); row-gap: 0; padding: var(--space-2xs) 0; border-top: 1px solid var(--line); font-size: var(--text-s); }
.spec-list b { grid-area: name; }
.spec-list span { grid-area: year; }
.spec-list .spec-detail { grid-area: detail; align-self: center; color: var(--dim); }
.spec-list b { font-weight: 600; }
.spec-list span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--dim); }
@media (max-width: 720px) { .spec-list li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "year" "detail"; } }
.flags { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin-top: 6px; }
.flagitem { display: inline-flex; align-items: center; gap: 4px; }
.flagitem img { display: block; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(12, 12, 13, 0.18); }
.flagitem small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--dim); }