/* ───────────────────────── Jakob Schlenker — portfolio ───────────────────────── */

:root {
  --paper: #ffffff;
  --ink: #141413;
  --ink-2: #55534e;
  --ink-3: #8f8c85;
  --line: #e7e5df;
  --accent: #141413;
  --tint: #f5f4f0;

  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* type scale: one display size for the greeting, three headline sizes, two copy sizes */
  --h0: clamp(52px, 9.6vw, 164px);
  --h1: clamp(40px, 5vw, 80px);
  --h2: clamp(26px, 2.6vw, 38px);
  --h3: clamp(19px, 1.6vw, 23px);
  --text: 16px;
  --small: 13px;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* plant-cell shapes: irregular, softly rounded five- and six-sided outlines (used as masks) */
  --cell-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6.5%2027.6%20Q4%2020%208.9%2013.6%20L12.1%209.4%20Q17%203%2025.0%202.9%20L91.0%202.1%20Q99%202%20105.0%207.3%20L111.0%2012.7%20Q117%2018%20114.1%2025.4%20L108.9%2038.6%20Q106%2046%2098.0%2045.8%20L20.0%2044.2%20Q12%2044%209.5%2036.4Z%22/%3E%3C/svg%3E");
  --cell-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4.4%2020.9%20Q3%2013%2010.7%2010.8%20L34.3%204.2%20Q42%202%2050.0%202.4%20L105.0%205.6%20Q113%206%20114.2%2013.9%20L116.8%2031.1%20Q118%2039%20110.0%2039.5%20L17.0%2045.5%20Q9%2046%207.6%2038.1Z%22/%3E%3C/svg%3E");
  --cell-c: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M7.2%2033.1%20Q2%2027%205.6%2019.8%20L9.4%2012.2%20Q13%205%2021.0%204.7%20L74.0%202.3%20Q82%202%2089.6%204.4%20L109.4%2010.6%20Q117%2013%20115.5%2020.9%20L112.5%2037.1%20Q111%2045%20103.0%2045.2%20L27.0%2046.8%20Q19%2047%2013.8%2040.9Z%22/%3E%3C/svg%3E");
  --cell-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5.9%2011.9%20Q7%204%2015.0%203.8%20L100.0%202.2%20Q108%202%20110.8%209.5%20L116.2%2023.5%20Q119%2031%20111.4%2033.6%20L79.6%2044.4%20Q72%2047%2064.1%2046.1%20L9.9%2039.9%20Q2%2039%203.1%2031.1Z%22/%3E%3C/svg%3E");
}


/* elements shaped like plant cells; --shape picks one of the four outlines */
.btn, .lang span[aria-current], .focus .sk, .carousel__btns button, .lb button {
  --shape: var(--cell-a);
  -webkit-mask: var(--shape) center / 100% 100% no-repeat;
          mask: var(--shape) center / 100% 100% no-repeat;
}
.focus .sk:nth-child(4n+2), .carousel__btns button + button, .lb__next { --shape: var(--cell-b); }
.focus .sk:nth-child(4n+3), .btn--light, .lb__close { --shape: var(--cell-c); }
.focus .sk:nth-child(4n+4), .lang span[aria-current] { --shape: var(--cell-d); }
.btn--ghost { --shape: var(--cell-a); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.serif { font-family: var(--serif); font-weight: 380; }
.serif-i { font-family: var(--serif); font-style: normal; font-weight: 400; }
.label {
  font-family: var(--sans);
  font-size: var(--small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* ── Nav ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.nav__mark { font-family: var(--serif); font-weight: 700; font-size: var(--text); letter-spacing: -.01em; line-height: 1; white-space: nowrap; transition: opacity .2s; }
.nav__mark:hover { opacity: .6; }
.nav__links { display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); font-size: var(--small); }
.nav__links a { position: relative; color: var(--ink-2); transition: color .2s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
.lang { display: inline-flex; align-items: center; gap: 2px; font-size: var(--small); letter-spacing: .02em; margin-left: clamp(4px, 1vw, 12px); }
.lang > * { padding: 6px 10px; line-height: 1; }
.lang span[aria-current] { background: var(--ink); color: #fff; }
.nav__links .lang a { color: var(--ink-3); }
.nav__links .lang a::after { display: none; }
.nav__links .lang a:hover { color: var(--ink); background: var(--tint); }

/* ── Parallax + reveal primitives ────────────────────── */
.px-frame { position: relative; overflow: hidden; background: var(--tint); }
.px-frame > img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.curtain { clip-path: inset(18% 0 0 0); transition: clip-path 1.4s var(--ease); }
.curtain.is-in { clip-path: inset(0 0 0 0); }

/* ── Home: hero ──────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 28px);
  padding-block: clamp(40px, 6vw, 96px) clamp(64px, 9vw, 128px);
}
.hero__photo { grid-column: 7 / span 4; grid-row: 1 / span 2; margin: 0; align-self: start; }
.hero__photo .px-frame { aspect-ratio: 3 / 5; }
.hero__title {
  grid-column: 1 / -1; grid-row: 1; align-self: end; position: relative; z-index: 2;
  color: #fff; mix-blend-mode: difference;
  margin: clamp(120px, 16vw, 260px) 0 0;
  font-family: var(--serif); font-weight: 400;
  font-size: var(--h0);
  line-height: 1.04; letter-spacing: -.02em;
}
.hero__title span { display: block; }
.hero__title span + span { padding-left: .9em; }
.intro {
  grid-column: 1 / span 6; grid-row: 2; align-self: start;
  margin: clamp(28px, 4vw, 56px) 0 0;
  font-size: var(--h3); line-height: 1.45; letter-spacing: -.015em;
  max-width: 44ch;
}
.intro p { margin: 0; }
.intro em { font: inherit; }
.intro__role { display: flex; align-items: center; gap: 12px; margin-top: clamp(24px, 3vw, 40px) !important; font-size: var(--text); color: var(--ink-3); letter-spacing: 0; }
.intro__role i { width: 8px; height: 8px; border-radius: 50%; background: #2f9e5b; flex: none; animation: pulse 2.4s infinite; }
.focus { grid-column: 1 / span 6; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(28px, 3vw, 44px); padding-top: 18px; border-top: 1px solid var(--line); }
.focus p { margin: 6px 0 0; font-size: var(--small); color: var(--ink-2); line-height: 1.7; }
.focus p { margin-left: -9px; }
.focus .sk { display: inline-block; white-space: nowrap; padding: 2px 10px; transition: background .25s, color .25s; cursor: default; }
.focus .sk:hover { background: #ecebe6; color: var(--ink); }
.focus p i { font-style: normal; color: #cfccc4; margin: 0 1px 0 0; }

/* film grain on the hero photo */
.hero__photo .px-frame > img { filter: contrast(1.06) saturate(.88) sepia(.08); }
.hero__photo .px-frame::after {
  content: ""; position: absolute; inset: -60%; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px; opacity: .42; mix-blend-mode: overlay;
  animation: grain .9s steps(6) infinite;
}
.hero__photo .px-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(20,14,8,.35) 100%);
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 9%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-7%, -4%); } 100% { transform: translate(0, 0); }
}

/* thesis pattern band */
.ribbon { overflow: hidden; margin: 0 0 clamp(56px, 8vw, 120px); pointer-events: none; }
.ribbon img { width: max(1200px, 130vw); max-width: none; mix-blend-mode: multiply; will-change: transform; transform: translate3d(-10%, 0, 0); }

/* ── Home: index ─────────────────────────────────────── */
.index { padding-bottom: clamp(64px, 10vw, 140px); }
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.sec-head h2 { margin: 0; font-family: var(--serif); font-size: var(--h2); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.sec-head h2 .serif-i { font-weight: 300; }

.rows { list-style: none; margin: 0; padding: 0; }
.row a {
  --c: var(--ink);
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: 48px minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(0, .9fr) 28px;
  gap: 20px; align-items: baseline;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--line);
  transition: color .25s, padding .45s var(--ease);
}
.row a::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1);
  background: color-mix(in srgb, var(--c) 7%, white);
  opacity: 0; transition: opacity .25s; z-index: -1;
}
.row__no { font-size: var(--small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row__title {
  font-family: var(--serif); font-weight: 380;
  font-size: var(--h3); line-height: 1.2; letter-spacing: 0;
  display: flex; align-items: center; gap: 12px;
}
.row__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(-.1em); }
.row__desc { font-size: var(--text); color: var(--ink-2); transition: color .25s; }
.row__meta { font-size: var(--small); color: var(--ink-3); }
.row__arrow { font-size: var(--text); justify-self: end; transition: transform .3s; color: var(--ink-3); }
.row__thumb { display: none; }

@media (hover: hover) {
  .row a:hover { color: var(--c); padding-left: 12px; }
  .row a:hover::before { opacity: 1; }
  .row a:hover .row__desc { color: var(--ink); }
  .row a:hover .row__arrow { transform: translateX(-10px); color: var(--c); }
  .rows:has(a:hover) .row a:not(:hover) { color: var(--ink-3); }
  .rows:has(a:hover) .row a:not(:hover) .row__desc { color: var(--ink-3); }
}

/* floating photo preview that follows the cursor */
.peek {
  position: fixed; top: 0; left: 0; z-index: 30;
  width: clamp(280px, 26vw, 400px); aspect-ratio: 4 / 3;
  pointer-events: none; overflow: hidden; background: var(--tint);
  opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-2deg);
  transition: opacity .3s, transform .5s var(--ease);
  box-shadow: 0 30px 60px -20px rgba(20,20,19,.35);
}
.peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.peek img.is-on { opacity: 1; }

/* ── CV ──────────────────────────────────────────────── */
.about { padding-block: clamp(56px, 8vw, 112px); }
.cv-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
.cv-grid h2 { margin: 6px 0 0; font-family: var(--serif); font-size: var(--h2); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.cv-list { list-style: none; margin: 0; padding: 0; }
.cv-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.cv-list li:first-child { border-top: 1px solid var(--ink); }
.cv-list time { font-size: var(--small); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 4px; }
.cv-list h3 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: var(--h3); letter-spacing: 0; line-height: 1.25; }
.cv-list p { margin: 0; color: var(--ink-2); font-size: var(--text); max-width: 62ch; }

.exp { background: var(--ink); color: #fff; padding-block: clamp(64px, 9vw, 128px); }
.exp .label { color: #8d8a83; }
.exp .cv-list li { border-top-color: #34332f; }
.exp .cv-list li:first-child { border-top-color: #34332f; }
.exp .cv-list time { color: #8d8a83; }
.exp .cv-list p { color: #b9b6ae; }
.exp__photo { margin: clamp(28px, 4vw, 48px) 0 0; max-width: 380px; }
.exp__photo .px-frame { aspect-ratio: 4 / 5; background: #232321; }

.now {
  --pad: clamp(16px, 2.2vw, 28px);
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: clamp(20px, 2.6vw, 30px) var(--pad);
  margin: 0 calc(var(--pad) * -1) 12px;
  background: #fff; color: var(--ink);
}
.now .label { color: var(--ink-3); display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.now .label i { width: 7px; height: 7px; border-radius: 50%; background: #2f9e5b; animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,158,91,.45); } 70% { box-shadow: 0 0 0 9px rgba(47,158,91,0); } 100% { box-shadow: 0 0 0 0 rgba(47,158,91,0); } }
.now h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--h3); letter-spacing: -.01em; line-height: 1.2; }
.now h3 span { color: var(--ink-3); }
.now p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--text); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 19px 42px 18px; border: 0;
  background: var(--ink); color: #fff; font-size: var(--text); line-height: 1;
  transition: background .25s, color .25s, gap .35s var(--ease);
}
.btn:hover { background: #33322f; gap: 22px; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #e4e2dc; color: var(--ink); }
.btn--ghost { background: #ecebe6; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

.cv-dl { margin-top: 32px; padding: 20px 48px 19px; gap: 10px; }
.cv-dl:hover { gap: 14px; }
.cv-dl span { color: var(--ink-3); transition: color .25s; }
.cv-dl:hover span { color: #fff; }

/* ── Contact CTA + footer ────────────────────────────── */
.cta { background: var(--ink); color: #fff; padding-block: clamp(80px, 11vw, 160px) clamp(56px, 7vw, 96px); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.cta__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--h2); line-height: 1.08; letter-spacing: -.02em; }
.cta p { margin: 0 0 28px; color: #b9b6ae; font-size: var(--text); max-width: 40ch; }
.cta--home { padding-block: clamp(72px, 9vw, 128px) clamp(48px, 6vw, 80px); }
.cta__grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; align-items: end; }
.cta__main .label { color: #8d8a83; display: block; margin-bottom: 14px; }
.cta__main .cta__title { max-width: 18ch; margin-bottom: 18px; }
.cta__main p { margin: 0 0 32px; }
.cta__scribble { justify-self: start; align-self: center; width: clamp(140px, 16vw, 230px); }
.cta__scribble svg { display: block; width: 100%; height: auto; overflow: visible; transform: rotate(-7deg); }
.cta__scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.6, .05, .3, 1); }
.cta__scribble path:nth-child(2) { transition-delay: .35s; opacity: .85; }
.cta__scribble path:nth-child(3) { transition-delay: .7s; opacity: .7; }
.cta__scribble path:nth-child(4) { transition-delay: 1.05s; transition-duration: .7s; }
.cta__scribble.is-in path { stroke-dashoffset: 0; }
.cta__scribble:hover svg { animation: wiggle .6s ease-in-out; }
@keyframes wiggle { 0%, 100% { transform: rotate(-7deg); } 30% { transform: rotate(-2deg); } 60% { transform: rotate(-10deg); } }
.cta--small { padding-block: clamp(48px, 6vw, 80px) clamp(36px, 4vw, 56px); }
.cta--small .cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.cta__small-title { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: var(--h3); line-height: 1.25; letter-spacing: -.01em; }
.cta--small p { margin: 0; max-width: 52ch; font-size: var(--text); }
.foot { background: var(--ink); color: #b9b6ae; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-block: 22px 28px; background: linear-gradient(#3a3936, #3a3936) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; font-size: var(--small); }
.foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.foot a:hover { color: #fff; }

/* ── Contact page ────────────────────────────────────── */
.contact-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 120px); padding-block: clamp(64px, 9vw, 144px) clamp(80px, 10vw, 160px); }
.contact-page h1 { margin: 0 0 24px; font-family: var(--serif); font-weight: 400; font-size: var(--h1); line-height: 1.04; letter-spacing: -.02em; }
.contact-page__lede { font-size: var(--h3); line-height: 1.45; max-width: 34ch; margin: 0 0 40px; }
.direct { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.direct a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--text); transition: padding .35s var(--ease); }
.direct a:hover { padding-left: 8px; }
.direct a span:first-child { color: var(--ink-3); }
.form { display: grid; gap: 28px; align-content: start; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--small); color: var(--ink-3); }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--text); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; outline: none;
  transition: border-color .2s;
}
.field textarea { min-height: 180px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--ink); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form__note { font-size: var(--small); color: var(--ink-3); margin: 0; }
.form__status { font-size: var(--small); color: #2f7a4a; margin: 0; min-height: 1.4em; }
.form__status.is-error { color: #a33a2b; }
.form__status a { text-decoration: underline; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* ── Project bar: plain names, an angular cell appears on hover ── */
.tabs { padding-top: 16px; }
.tabs__bar { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.tabs__back { flex: none; font-size: var(--small); color: var(--ink-3); white-space: nowrap; transition: color .2s, transform .3s var(--ease); }
.tabs__back:hover { color: var(--ink); transform: translateX(-3px); }
.tabs__row {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: clamp(4px, .8vw, 14px);
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  padding: 6px 0;
}
.tabs__row::-webkit-scrollbar { display: none; }
.tab {
  position: relative; isolation: isolate; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px;
  font-size: var(--small); white-space: nowrap; color: var(--ink-2);
  transition: color .25s;
}
.tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.tab::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #ecebe6;
  -webkit-mask: var(--shape, var(--cell-c)) center / 100% 100% no-repeat;
          mask: var(--shape, var(--cell-c)) center / 100% 100% no-repeat;
  opacity: 0; transform: scale(.92);
  transition: opacity .25s ease, transform .35s var(--ease);
}
.tab:nth-child(4n+1) { --shape: var(--cell-c); }
.tab:nth-child(4n+2) { --shape: var(--cell-a); }
.tab:nth-child(4n+3) { --shape: var(--cell-d); }
.tab:nth-child(4n+4) { --shape: var(--cell-b); }
.tab__no { display: none; }
.tab:hover { color: var(--ink); }
.tab:hover::after { opacity: 1; transform: none; }
.tab[aria-current] { color: #fff; }
.tab[aria-current]::after { background: var(--ink); opacity: 1; transform: none; }

/* ── Project page ────────────────────────────────────── */
.project { --tint: color-mix(in srgb, var(--accent) 7%, white); }

.p-hero { padding-block: clamp(64px, 9vw, 144px) clamp(48px, 6vw, 96px); }
.p-hero__eyebrow { color: var(--accent); margin-bottom: clamp(18px, 2vw, 28px); }
.p-hero__title {
  margin: 0;
  font-family: var(--serif); font-weight: 340;
  font-size: var(--h1); line-height: 1.06; letter-spacing: -.02em;
}
.p-hero__title b { font-weight: inherit; }
.p-hero__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 6vw, 96px); margin-top: clamp(40px, 5.5vw, 88px); align-items: start;
}
.p-lede { margin: 0; font-size: var(--h3); line-height: 1.45; letter-spacing: -.01em; max-width: 46ch; }
.meta { margin: 0; }
.meta div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--text); }
.meta div:first-child { border-top-color: var(--accent); }
.meta dt { color: var(--ink-3); }
.meta dd { margin: 0; }

.p-cover .px-frame { aspect-ratio: 16 / 8; max-height: 74vh; width: 100%; cursor: zoom-in; }
.p-cover .px-frame.is-contain > img { object-fit: contain; padding: clamp(16px, 4vw, 56px); }
.p-cover .px-frame:not(.is-contain) { background: transparent; }

.p-body p { font-size: var(--text); line-height: 1.65; color: var(--ink-2); max-width: 62ch; margin: 0 0 1.1em; }
.p-body p:first-of-type { color: var(--ink); }

.section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); padding-top: clamp(56px, 8vw, 112px); }
.section__no { color: var(--accent); margin-bottom: 10px; display: block; }
.section h2 { margin: 0; font-family: var(--serif); font-size: var(--h2); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.section h2 .serif-i { font-weight: 300; }

.quote {
  margin: clamp(40px, 6vw, 80px) 0 0; padding: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: var(--h2); line-height: 1.25; letter-spacing: -.01em; color: var(--accent);
  max-width: 26ch;
}
.quote::before { content: "“"; }
.quote::after { content: "”"; }

/* example ↔ principle flip cards (Text[ure]) */
.media--flip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.flip { margin: 0; cursor: pointer; outline: none; }
.flip__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tint); }
.flip__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .8s var(--ease); }
.flip__alt { opacity: 0; transform: scale(1.04); }
.flip__frame .principle { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--tint); }
.flip__frame .principle { transition: opacity .5s ease, transform .8s var(--ease); }
.principle text { font-family: var(--serif); font-size: 34px; fill: #773306; }
/* same tones as the original Text[ure] posters */
.principle:not(.example) circle, .principle:not(.example) rect { fill: #c45f1b; }
.principle circle.off { fill: color-mix(in srgb, #c45f1b 22%, white); }
.principle .more circle { fill: var(--ink-3); }
.flip__frame .example { transition: opacity .5s ease, transform .8s var(--ease); }
.flip:hover .flip__frame .example, .flip.is-on .flip__frame .example { opacity: 0; }
.flip:hover .flip__alt, .flip:focus-visible .flip__alt, .flip.is-on .flip__alt { opacity: 1; transform: none; }
.flip:hover .flip__frame img:first-child, .flip.is-on .flip__frame img:first-child { transform: scale(1.03); }
.flip figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-family: var(--serif); font-size: var(--h3); }

/* Instagram-story player (Text[ure] · In context) */
.story { display: flex; justify-content: center; }
.story__frame {
  position: relative; width: min(340px, 78vw); aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 18px; background: var(--tint); box-shadow: 0 30px 60px -30px rgba(20,20,19,.45);
}
.story__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.story__slide.is-on { opacity: 1; }
.story__bars { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.story__bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.45); overflow: hidden; }
.story__bars i { display: block; height: 100%; width: 0; background: #fff; }
.story__bars span.is-done i { width: 100%; }
.story__frame.is-playing .story__bars span.is-on i { animation: story-fill 4.5s linear forwards; }
.story__frame:hover .story__bars span.is-on i { animation-play-state: paused; }
@keyframes story-fill { from { width: 0; } to { width: 100%; } }
.story__prev, .story__next { position: absolute; z-index: 3; top: 0; bottom: 0; width: 50%; background: none; border: 0; cursor: pointer; }
.story__prev { left: 0; } .story__next { right: 0; }

/* media blocks: single / pair / grid / carousel */
.media { margin-top: clamp(28px, 4vw, 48px); }
.media figure { margin: 0; }
.tile { cursor: zoom-in; }
.tile.is-contain > img { object-fit: contain; padding: clamp(10px, 2vw, 28px); }
.px-frame > img { transition: scale .9s var(--ease); }
.tile:hover > img { scale: 1.03; }

.media--wide .px-frame { aspect-ratio: auto; background: none; }
.media--wide .px-frame > img { height: auto; object-fit: initial; }
.media--wide + .media { margin-top: clamp(10px, 1.4vw, 20px); }

.media--single { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
.media--single figure { grid-column: 2; }
.media--single .px-frame { aspect-ratio: 3 / 2; max-height: 66vh; }

.media--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.media--pair .px-frame { aspect-ratio: 4 / 3; }
.media.media--tall { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.4vw, 20px); }
.media--tall .px-frame { aspect-ratio: auto; background: none; flex: 0 1 auto; }
.media--tall .px-frame > img { width: auto; height: auto; max-width: 100%; max-height: min(82vh, 820px); object-fit: initial; }

.media--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.media--grid .px-frame { aspect-ratio: 1; }

.carousel { position: relative; }
.carousel__track {
  display: flex; gap: clamp(10px, 1.4vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track .tile {
  flex: none; scroll-snap-align: start;
  height: clamp(240px, 48vh, 500px); aspect-ratio: var(--ar, 4 / 3);
  max-width: 82vw;
  background: var(--tint); overflow: hidden;
}
.carousel__track .tile > img { width: 100%; height: 100%; object-fit: cover; }
.carousel__ui { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.carousel__bar { flex: 1; height: 1px; background: var(--line); margin-right: 24px; position: relative; overflow: hidden; }
.carousel__bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: transform .3s var(--ease); transform-origin: left; }
.carousel__btns { display: flex; gap: 8px; align-items: center; }
.carousel__count { margin-right: 12px; font-variant-numeric: tabular-nums; }
.carousel__btns button {
  width: 48px; height: 42px; border: 0; background: #efeee9;
  display: grid; place-items: center; font-size: var(--text); transition: background .2s, color .2s;
}
.carousel__btns button:hover { background: var(--accent); color: #fff; }
.carousel__btns button:disabled { opacity: .35; pointer-events: none; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(255,255,255,.97); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb img { max-width: calc(100vw - 160px); max-height: calc(100vh - 140px); object-fit: contain; transform: scale(.97); transition: transform .4s var(--ease); }
.lb.is-open img { transform: none; }
.lb button { position: absolute; width: 54px; height: 46px; transition: background .2s, color .2s; border: 0; background: #efeee9; display: grid; place-items: center; font-size: var(--text); }
.lb button:hover { background: var(--accent); color: #fff; }
.lb__close { top: 20px; right: 20px; }
.lb__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lb__next { right: 20px; top: 50%; translate: 0 -50%; }
.lb__count { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; }

.next {
  display: block; margin-top: clamp(80px, 12vw, 160px);
  background: var(--next); color: #fff; overflow: hidden;
  padding: clamp(40px, 7vw, 96px) 0;
}
.next .label { color: rgba(255,255,255,.8); }
.next__title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-family: var(--serif); font-weight: 340;
  font-size: var(--h1); line-height: 1.05; letter-spacing: -.02em; margin-top: 12px;
}
.next__title span:last-child { font-family: var(--sans); font-size: .5em; transition: transform .35s; }
.next:hover .next__title span:last-child { transform: translateX(12px); }

.mini-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 24px 32px; font-size: var(--small); color: var(--ink-3); }
.mini-foot nav { display: flex; gap: 20px; }
.mini-foot a:hover { color: var(--ink); }

/* ── Plain text page (Impressum) ─────────────────────── */
.plain { padding-block: clamp(40px, 7vw, 104px) clamp(64px, 8vw, 120px); }
.plain h1 { margin: 0 0 40px; font-family: var(--serif); font-size: var(--h1); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
.plain h2 { font-family: var(--serif); font-size: var(--h3); font-weight: 400; margin: 32px 0 8px; }
.plain p { max-width: 70ch; color: var(--ink-2); font-size: var(--text); }
.legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(32px, 6vw, 96px); }
.legal section { border-top: 1px solid var(--line); padding-top: 18px; }
.legal h2 { margin: 0 0 10px; }
.legal p { margin: 0; line-height: 1.65; }
.legal a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--ink); }
.legal--long { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: clamp(24px, 3vw, 40px); }
.legal--long p + p { margin-top: 12px; }
.legal__updated { margin: -24px 0 40px; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .curtain { opacity: 1; transform: none; clip-path: none; transition: none; }
  .now .label i, .intro__role i, .hero__photo .px-frame::after, .cta__scribble:hover svg { animation: none; }
  .cta__scribble path { stroke-dashoffset: 0; transition: none; }
  .carousel__track { scroll-behavior: auto; }
  .story__frame.is-playing .story__bars span.is-on i { animation: none; width: 100%; }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .p-hero__grid, .section, .cv-grid, .media--single { grid-template-columns: minmax(0, 1fr); }
  .media--single figure { grid-column: 1; }
  .row a { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 6px 14px; }
  .row__desc { grid-column: 2 / 3; font-size: var(--text); }
  .row__meta { grid-column: 2 / 3; }
  .row__arrow { grid-row: 1; grid-column: 3; }
  .media--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peek { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .exp__photo { max-width: 180px; }
  .cta__inner, .cta__grid, .contact-page { grid-template-columns: minmax(0, 1fr); }
  .cta__scribble { grid-row: 1; justify-self: end; width: 110px; margin-bottom: -20px; }
  .lb img { max-width: calc(100vw - 32px); }
  .lb__prev, .lb__next { top: auto; bottom: 16px; translate: none; }
}
@media (max-width: 640px) {
  .hero__photo { grid-column: 6 / -1; grid-row: 1; }
  .hero__title { margin-top: clamp(150px, 40vw, 220px); }
  .intro, .focus { grid-column: 1 / -1; }
  .focus { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .row__thumb { display: block; grid-column: 2 / 3; margin-top: 10px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); }
  .row__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cv-list li, .now { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .now .label { padding-top: 0; }
  .cta--small .cta__inner { grid-template-columns: minmax(0, 1fr); }
  .meta div { grid-template-columns: 84px minmax(0, 1fr); }
  .media--pair, .media--grid, .media--flip { grid-template-columns: minmax(0, 1fr); }
  .p-cover .px-frame { aspect-ratio: 4 / 3; }
  .form__row, .legal { grid-template-columns: minmax(0, 1fr); }
  .nav__mark { font-size: var(--text); }
  .tab { height: 36px; padding: 0 16px; font-size: var(--small); }
  .nav .wrap { gap: 12px; }
  .nav__links { gap: 12px; font-size: var(--small); }
  .nav__links a[href$="#about"] { display: none; }
  .lang { margin-left: 0; }
  .lang > * { padding: 4px 6px; }
}