@font-face { font-family:"Manrope"; font-style:normal; font-weight:200 800; font-display:swap; src:url("/assets/fonts/manrope-latin-variable.woff2") format("woff2"); }
:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #11110f;
  --muted: #6d6961;
  --line: rgba(17, 17, 15, .24);
  --signal: #b5ec25;
  --page-edge: clamp(1.25rem, 3vw, 3.75rem);
  --display: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --focus: #11110f;
  --dialog-motion: 560ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111210;
  --ink: #f4f1e8;
  --muted: #aaa69b;
  --line: rgba(244, 241, 232, .23);
  --focus: #f4f1e8;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; overflow-x: hidden; overflow-x: clip; background: var(--paper); scroll-behavior: smooth; transition: background-color 420ms cubic-bezier(.16, 1, .3, 1); }
body { margin: 0; overflow-x: hidden; overflow-x: clip; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.45; transition: color 420ms cubic-bezier(.16, 1, .3, 1), background-color 420ms cubic-bezier(.16, 1, .3, 1); -webkit-font-smoothing: antialiased; }
html.is-dialog-open { overflow: hidden; }
body.is-dialog-open { overflow: hidden; padding-right: var(--scrollbar-compensation, 0); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.is-dialog-motion-source-hidden { visibility: hidden !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

.skip-link { position: fixed; z-index: 1000; inset: .75rem auto auto .75rem; padding: .75rem 1rem; color: var(--paper); background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.is-silent-focus:focus, [tabindex="-1"]:focus { outline: none; }

.site-header {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(12.5rem, 23vh, 18.5rem);
  padding: 3.25rem var(--page-edge) .4rem;
  text-align: center;
}

.site-kicker, .site-index, .eyebrow {
  margin: 0;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.site-kicker { position: absolute; top: clamp(2rem, 5vh, 4.5rem); max-width: calc(100% - 8rem); line-height: 1.35; }
.site-index { position: absolute; top: 2rem; right: var(--page-edge); }
.theme-toggle { position: absolute; top: 1.65rem; left: var(--page-edge); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
.theme-icon { display:block; grid-area:1 / 1; width:24px; height:24px; transform-origin:center; transition:opacity 180ms ease,transform 240ms ease; }
.theme-icon--sun { opacity:0; transform:scale(.85); }
html[data-theme="dark"] .theme-icon--moon { opacity:0; transform:scale(.85); }
html[data-theme="dark"] .theme-icon--sun { opacity:1; transform:none; }
.ui-icon { display:block; flex:none; }
.pause-symbol__play { display:none; }
[data-carousel-action="toggle"][aria-pressed="true"] .pause-symbol__pause { display:none; }
[data-carousel-action="toggle"][aria-pressed="true"] .pause-symbol__play { display:block; }
@media(prefers-reduced-motion:reduce) { .theme-icon { transition:none; } }
.site-brand { position: relative; width: min(74vw, 43rem); margin: clamp(2.1rem, 5vh, 3.5rem) 0 .1rem; }
.site-signature-ink { display: block; width: 100%; filter: contrast(1.08); transform-origin: 18% 64%; pointer-events: none; }
.site-signature-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.site-signature { filter: none; }
.signature-stroke, .signature-nib-coverage { stroke-dasharray: 1; stroke-dashoffset: 0; }
.signature-ink-effects { fill: #11110f; pointer-events: none; }
.signature-filament, .signature-drop, .signature-speck { opacity: 0; transform-box: fill-box; transform-origin: center top; }
.site-focus { margin: -.35rem 0 0; color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }

.js.is-intro-ready .signature-stroke, .js.is-intro-ready .signature-nib-coverage { stroke-dashoffset: 1; }
.js.is-intro-playing .signature-stroke, .js.is-intro-playing .signature-nib-coverage { animation: signature-ink var(--stroke-duration) var(--stroke-ease, cubic-bezier(.2, .72, .25, 1)) var(--stroke-delay) both; }
.js.is-intro-playing .signature-filament { animation: signature-filament var(--filament-duration) cubic-bezier(.22,.7,.24,1) var(--filament-delay) both; }
.js.is-intro-playing .signature-drop { animation: signature-drop var(--drop-duration) linear var(--drop-delay) both; }
.js.is-intro-playing .signature-speck { animation: signature-speck .48s cubic-bezier(.18, .72, .26, 1) var(--speck-delay) both; }
.js.is-intro-ready .site-kicker, .js.is-intro-ready .site-focus, .js.is-intro-ready .site-index, .js.is-intro-ready .theme-toggle { opacity: 0; }
.js.is-intro-playing .site-kicker, .js.is-intro-playing .site-index, .js.is-intro-playing .theme-toggle { animation: intro-detail-in .72s cubic-bezier(.16, 1, .3, 1) .08s both; }
.js.is-intro-playing .site-focus { animation: intro-detail-in .72s cubic-bezier(.16, 1, .3, 1) 4.46s both; }
.js.is-intro-complete .site-signature-ink, .js.is-intro-complete .site-kicker, .js.is-intro-complete .site-focus, .js.is-intro-complete .site-index, .js.is-intro-complete .theme-toggle { opacity: 1; }
.js.is-intro-complete .signature-stroke, .js.is-intro-complete .signature-nib-coverage { stroke-dashoffset: 0; }

html[data-theme="dark"] .site-signature-ink { filter: invert(1) sepia(.06) contrast(1.04); }
html[data-theme="dark"] .project__picture { box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, .48); }
html[data-theme="dark"] .project-dialog__media { background: #080906; }
html[data-theme="dark"] .project-gallery__stage { background: #1b1c19; }
html[data-theme="dark"] .artbox__sparks { opacity: .76; filter: contrast(1.03) drop-shadow(0 0 2.5px rgba(236, 207, 103, .24)); }

.artbox { position: relative; z-index: 1; min-height: clamp(34rem, 68vh, 51rem); padding: 0 0 2rem; }
/* Let the tallest card define the stage, including room for the 3D motion. */
.artbox__stage { position: relative; display: grid; align-items: center; min-width: 0; overflow-x: clip; overflow-y: visible; perspective: 1120px; perspective-origin: 50% 42%; }
.artbox__stage::before, .artbox__stage::after { position: absolute; z-index: 4; top: 0; bottom: 0; width: clamp(.75rem, 4vw, 5rem); content: ""; pointer-events: none; }
.artbox__stage::before { left: 0; background: var(--paper); mask-image: linear-gradient(to right, #000, transparent); }
.artbox__stage::after { right: 0; background: var(--paper); mask-image: linear-gradient(to left, #000, transparent); }

.artbox__viewport { position: relative; display: flex; align-items: center; min-width: 0; width: 100%; overflow: visible; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; }
.artbox__viewport.is-dragging { cursor: grabbing; }
.artbox__sparks { position: absolute; z-index: 130; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: contrast(1.025) drop-shadow(0 0 2px rgba(206, 174, 72, .18)); }
.artbox__track { display: flex; align-items: center; width: max-content; gap: clamp(.8rem, 1.25vw, 1.55rem); padding: 4.5rem 0 7rem; transform-style: preserve-3d; will-change: transform; transform: translate3d(0, 0, 0); }

.project { position: relative; flex: 0 0 auto; width: clamp(12.4rem, 16.4vw, 19.8rem); transform: translate3d(0, 0, 0); transform-origin: 50% 62%; transform-style: preserve-3d; transition: filter 240ms ease; will-change: transform, opacity; }
.project:nth-child(7n + 1) { width: clamp(11rem, 14vw, 16.5rem); }
.project:nth-child(7n + 2) { width: clamp(12.8rem, 17.2vw, 20.5rem); }
.project:nth-child(7n + 3) { width: clamp(12.8rem, 17.6vw, 20.9rem); }
.project:nth-child(7n + 4) { width: clamp(11rem, 14.3vw, 17rem); }
.project:nth-child(7n + 5) { width: clamp(12rem, 15.5vw, 18.5rem); }
.project:nth-child(7n + 6) { width: clamp(11.4rem, 14.7vw, 17.4rem); }
.project:nth-child(7n + 7) { width: clamp(12.2rem, 16vw, 19rem); }

.project__trigger { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; transform: scale(1); transform-origin: 50% 55%; transition: transform 820ms cubic-bezier(.16, 1, .3, 1); }
.project__trigger:hover, .project__trigger:focus-visible { transform: scale(1.022); }
.project figure { position: relative; margin: 0; }
.project__picture { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: var(--card-ratio, 3 / 4); overflow: hidden; background: #d2cdc3; box-shadow: 0 1.2rem 2.4rem rgba(17, 17, 15, .09); }
.project__picture img { display: block; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; transition: transform 900ms cubic-bezier(.16, 1, .3, 1), filter 700ms ease; }
.project--portrait .project__picture img { object-position: 28% 50%; }
.project--landscape .project__picture img { object-position: 44% 50%; }
[data-project-slug="inx-media"] .project__picture img { object-position: 50% 50%; }
[data-project-slug="oktoberfest-2026"] .project__picture img { object-position: 50% 50%; }
[data-project-slug="stille-koerper"] .project__picture img { object-position: 52% 38%; }
[data-project-slug="christina-2026"] .project__picture img { object-position: 50% 50%; }
.project--square .project__picture img { object-position: 52% 37%; }
.project--tall .project__picture img { object-position: 42% 48%; }
.project--wide .project__picture img { object-position: 75% 58%; }
[data-project-slug="ciao-miau"] .project__picture img { object-position: 50% 50%; }
[data-project-slug="martin-michel"] .project__picture img { object-position: 47% 50%; }
[data-project-slug="screenie"] .project__picture img { object-position: 50% 48%; }
[data-project-slug="andreas-reiter"] .project__picture img { object-position: 50% 50%; }
[data-project-slug="inx-media"] { --card-ratio: 1086 / 1448; }
[data-project-slug="oktoberfest-2026"] { --card-ratio: 1100 / 1555; }
[data-project-slug="stille-koerper"] { --card-ratio: 1122 / 1402; }
[data-project-slug="christina-2026"] { --card-ratio: 1920 / 1282; }
[data-project-slug="ciao-miau"] { --card-ratio: 1 / 1; }
[data-project-slug="martin-michel"] { --card-ratio: 3 / 2; }
[data-project-slug="screenie"], [data-project-slug="andreas-reiter"] { --card-ratio: 1086 / 1448; }
/* The studio cover series shares one portrait frame across print, web and film. */
.project.project--studio { --card-ratio: 3 / 4; }
.project--studio .studio-cover img { object-position: 50% 50%; }
.project__trigger:hover .project__picture img, .project__trigger:focus-visible .project__picture img { transform: scale(1.015); filter: contrast(1.025); }

.project figcaption { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem .55rem; padding-top: .75rem; border: 0; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.project__title { font-weight: 700; }
.project__meta { color: var(--muted); }
.project__teaser { display: block; margin: .42rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.25; }
.project__data { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.no-js .artbox__viewport { overflow-x: auto; cursor: auto; scroll-snap-type: x proximity; }
.no-js .theme-toggle { display: none; }
.no-js .artbox__track { transform: none !important; }
.no-js .project { transform: none; scroll-snap-align: center; }
.no-js .project__trigger { pointer-events: none; cursor: default; }
.no-js .project__data { position: static; width: auto; height: auto; margin-top: 1rem; overflow: visible; clip-path: none; white-space: normal; }
.no-js .project__data h3 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.5rem; font-weight: 800; }
.no-js .project__data dl { margin: 0; font-size: .72rem; }
.no-js .project__data dl div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; padding: .2rem 0; }
.no-js .project__data dd { margin: 0; }
.no-js .project__data p { font-size: .82rem; white-space: normal; }
.no-js .artbox__status { display: none; }
.artbox__status { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.primary-actions { position: relative; z-index: 5; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(5rem, 10vw, 10rem) var(--page-edge) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
.primary-action { display: grid; grid-template-rows: auto 1fr auto; align-items: start; min-height: clamp(11rem, 17vw, 15rem); padding: clamp(1.2rem, 2.2vw, 2.2rem); color: var(--ink); background: var(--paper); text-decoration: none; transition: color 400ms cubic-bezier(.16, 1, .3, 1), background 400ms cubic-bezier(.16, 1, .3, 1); }
.primary-action + .primary-action { border-left: 1px solid var(--ink); }
.primary-action__meta { font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.primary-action__title { align-self: center; max-width: 10ch; font-family: var(--display); font-size: clamp(2.35rem, 4.2vw, 5.1rem); font-weight: 800; line-height: .84; letter-spacing: -.06em; transition: transform 700ms cubic-bezier(.16, 1, .3, 1); }
.primary-action__copy { max-width: 32rem; color: var(--muted); font-size: clamp(.86rem, 1.05vw, 1rem); line-height: 1.35; transition: color 400ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1); }
.primary-action:hover, .primary-action:focus-visible { color: var(--paper); background: var(--ink); }
.primary-action:hover .primary-action__title, .primary-action:focus-visible .primary-action__title { transform: translateX(clamp(.35rem, 1vw, .8rem)); }
.primary-action:hover .primary-action__copy, .primary-action:focus-visible .primary-action__copy { color: var(--paper); transform: translateX(clamp(.15rem, .5vw, .35rem)); }

.fallback-content { max-width: 60rem; margin: clamp(6rem, 12vw, 12rem) var(--page-edge); padding-top: 1rem; border-top: 1px solid var(--line); }
.fallback-content h2 { margin: 1.3rem 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 8rem); font-weight: 800; letter-spacing: -.06em; }
.fallback-content p:not(.eyebrow) { max-width: 45rem; font-size: clamp(1.1rem, 2vw, 1.6rem); }
.fallback-content dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fallback-content dl div { padding-top: .65rem; border-top: 1px solid var(--line); }
.fallback-content dt { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.fallback-content dd { margin: .5rem 0 0; }
.js .fallback-content { display: none; }

.site-footer { display: flex; justify-content: space-between; gap: 2rem; margin: clamp(6rem, 10vw, 10rem) var(--page-edge) 0; padding: 1.25rem 0 2rem; border-top: 1px solid var(--ink); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.site-footer p, .site-footer nav { display: flex; gap: 1.5rem; margin: 0; }
.site-footer nav { align-items: flex-start; }
.site-footer button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-decoration: underline; text-transform: inherit; cursor: pointer; }

.privacy-notice { position: fixed; z-index: 90; right: var(--page-edge); bottom: var(--page-edge); left: var(--page-edge); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 5rem); align-items: end; padding: clamp(1.2rem, 2.5vw, 2.2rem); border: 1px solid var(--ink); color: var(--ink); background: color-mix(in srgb, var(--paper) 97%, transparent); box-shadow: 0 1.5rem 5rem rgba(17, 17, 15, .2); backdrop-filter: blur(18px); }
.privacy-notice[hidden] { display: none; }
.privacy-notice .eyebrow { margin-bottom: .65rem; }
.privacy-notice__heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem; }
.privacy-notice__heading .eyebrow { margin:0; }
.privacy-notice__close { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.25rem 0 .25rem .75rem; border:0; color:inherit; background:transparent; font-size:.75rem; text-decoration:underline; cursor:pointer; }
.privacy-notice__close:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.privacy-notice p { max-width: 61rem; margin: 0; font-size: clamp(.9rem, 1.25vw, 1.08rem); }
.privacy-notice p strong { font-weight: 700; }
.privacy-notice__actions { display: flex; gap: .75rem; align-items: center; }
.privacy-notice__actions a, .privacy-notice__actions button { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.35; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); background: var(--paper); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.privacy-notice__actions button { color: var(--paper); background: var(--ink); }
.privacy-notice__actions a:hover, .privacy-notice__actions a:focus-visible { color: var(--paper); background: var(--ink); }
.privacy-notice__actions button:hover, .privacy-notice__actions button:focus-visible { color: var(--ink); background: var(--paper); }

dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ink); background: transparent; overflow: hidden; }
dialog::backdrop { background: rgba(17, 17, 15, .72); backdrop-filter: blur(2px); }
dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
dialog[open]:not([data-motion-phase]) { animation: dialog-in var(--dialog-motion) ease both; }
dialog[open][data-motion-phase] { animation: none; }
.text-dialog[open]:not([data-motion-phase]) > .dialog-shell { animation: dialog-shell-in var(--dialog-motion) cubic-bezier(.17,.8,.24,1) both; }
.project-dialog::backdrop, .text-dialog[data-motion-phase]::backdrop { background: var(--paper); opacity: .94; -webkit-backdrop-filter: none; backdrop-filter: none; }
.project-dialog[open]::backdrop, .text-dialog[data-motion-phase="opening"]::backdrop { animation: project-scrim-in 150ms ease-out both; }
.project-dialog[data-motion-phase="closing"]::backdrop, .text-dialog[data-motion-phase="closing"]::backdrop { animation: project-scrim-out 220ms 430ms ease-in both; }
dialog.is-closing { animation: dialog-out 280ms ease both; }
.text-dialog.is-closing > .dialog-shell { animation: dialog-shell-out 280ms ease both; }
.dialog-shell { position: relative; width: calc(100% - clamp(1rem, 4vw, 4rem)); height: 100%; min-height: 0; margin: 0 auto; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.dialog-return { position: relative; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr); gap: .95rem; align-items: center; justify-content: center; width: min(30rem, calc(100% - 2rem)); min-height: 4.4rem; margin: .75rem auto max(.75rem, env(safe-area-inset-bottom)); padding: .8rem 1.4rem; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 .8rem 2.6rem rgba(17, 17, 15, .12); backdrop-filter: blur(16px); font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; transform: translate3d(0, var(--dialog-control-pull, 0px), 0); cursor: pointer; touch-action: none; transition: color 280ms ease, background 280ms ease, letter-spacing 420ms cubic-bezier(.16, 1, .3, 1), transform 420ms cubic-bezier(.16, 1, .3, 1); }
.dialog-return:hover, .dialog-return:focus-visible { color: var(--paper); background: var(--ink); letter-spacing: .18em; }
.dialog-return:active { transform: translate3d(0, calc(var(--dialog-control-pull, 0px) + 2px), 0); }

.project-dialog__shell { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(22rem, 1fr); transition: transform 420ms cubic-bezier(.16, 1, .3, 1); }
dialog[data-motion-phase="opening"] > .dialog-shell,
dialog[data-motion-phase="closing"] > .dialog-shell,
dialog[data-motion-phase="opening"] > .dialog-return,
dialog[data-motion-phase="closing"] > .dialog-return { opacity: 0; pointer-events: none; }
.project-dialog.is-pulling-down .project-dialog__shell { transform: translate3d(0, var(--dialog-pull, 0), 0); transition: none; }
.project-dialog.is-kicking .project-dialog__shell { transform: translate3d(var(--project-kick-x, 0), 0, 0) rotate(var(--project-kick-rotate, 0deg)); transition: none; }
.project-card-transition { position: fixed; z-index: 120; inset: 0; pointer-events: none; perspective: 930px; perspective-origin: 50% 50%; contain: layout paint style; }
.project-card-transition__positioner { position: fixed; transform-origin: 50% 50%; transform-style: preserve-3d; will-change: left, top, width, height, transform; }
.project-card-transition__flipper { position: absolute; inset: 0; transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform; }
.project-card-transition__face { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; overflow: hidden !important; border: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2.8rem 7rem rgba(17, 17, 15, .25); }
.project-card-transition__face--back { transform: rotateX(180deg); }
.project-card-transition__face--front > .project__picture { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
.project-card-transition__face--front img { width: 100%; height: 100%; object-fit: cover; }
.project-card-transition__face--front > .primary-action { width: 100%; height: 100%; min-height: 0; border: 1px solid currentColor; }
.project-card-transition__face--back.project-dialog__shell { display: grid; }
.project-card-transition__face--back.text-dialog__shell { max-width: none; }
.project-card-transition__face--back .project-gallery { transform: none !important; }
.project-dialog__media { display: grid; place-items: center; min-height: calc(100vh - 4rem); padding: clamp(2rem, 5vw, 6rem); background: #fff; }
.project-gallery { width: min(100%, 68rem); min-width: 0; overflow: hidden; padding: clamp(.5rem, 1.1vw, .9rem); border: 1px solid rgba(17, 17, 15, .28); background: var(--paper); box-shadow: 0 2.6rem 6rem rgba(17, 17, 15, .2); transform-origin: 50% 50%; will-change: transform; }
.project-gallery__stage { position: relative; display: grid; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; cursor: grab; touch-action: pan-y pinch-zoom; }
.project-gallery[data-project-slug="stille-koerper"] { width: min(100%, 48rem); }
.project-gallery[data-project-slug="stille-koerper"] .project-gallery__stage { aspect-ratio: 4 / 5; background: #0b0b0a; }
.project-gallery[data-project-slug="christina-2026"] .project-gallery__stage { aspect-ratio: 1920 / 1282; background: #121212; }
.project-gallery__stage.is-dragging { cursor: grabbing; }
.project-gallery__slide { grid-area: 1 / 1; display: grid; min-width: 0; min-height: 0; overflow: hidden; place-items: center; transform: translate3d(0, 0, 0); opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform 560ms cubic-bezier(.2,.76,.22,1), opacity 280ms ease; }
.project-gallery__stage.is-dragging .project-gallery__slide { transition: none; }
.project-gallery__slide[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.project-gallery__slide picture { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; }
.project-gallery__slide img { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; }
.project-gallery__slide .project-video { width: 100%; }
.project-video { position: relative; display: grid; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0b0a; }
.project-video__launch { position: relative; display: grid; width: 100%; min-height: 100%; padding: 0; border: 0; color: #fff; background: #0b0b0a; cursor: pointer; overflow: hidden; }
.project-video__launch img { grid-area: 1 / 1; width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: .82; transition: opacity 420ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1); }
.project-video__launch:hover img, .project-video__launch:focus-visible img { opacity: .62; transform: scale(1.025); }
.project-video__play { position: absolute; z-index: 2; inset: 50% auto auto 50%; display: grid; place-items: center; width: clamp(4rem, 7vw, 6.5rem); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); }
.project-video__play::after { width: 0; height: 0; margin-left: .28em; border-top: .62rem solid transparent; border-bottom: .62rem solid transparent; border-left: 1rem solid currentColor; content: ""; }
.project-video__label { position: absolute; z-index: 2; right: 1rem; bottom: .85rem; left: 1rem; font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.project-video iframe { width: 100%; height: 100%; border: 0; }
.project-gallery__controls { display: flex; min-width: 0; align-items: center; gap: .45rem; overflow-x: auto; padding-top: .7rem; scrollbar-width: none; }
.project-gallery__controls::-webkit-scrollbar { display: none; }
.project-gallery__thumb { width: 4.5rem; height: 3.25rem; padding: .18rem; border: 1px solid transparent; color: var(--ink); background: transparent; cursor: pointer; opacity: .48; }
.project-gallery__thumb:hover, .project-gallery__thumb[aria-pressed="true"] { border-color: var(--ink); opacity: 1; }
.project-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-gallery[data-project-slug="stille-koerper"] .project-gallery__thumb:first-child img { object-position: 52% 30%; }
.project-gallery[data-project-slug="stille-koerper"] .project-gallery__thumb:nth-child(2) img { object-position: 50% 42%; }
.project-gallery__thumb.is-video { position: relative; }
.project-gallery__thumb.is-video::after { position: absolute; inset: 50% auto auto 50%; width: 0; height: 0; border-top: .3rem solid transparent; border-bottom: .3rem solid transparent; border-left: .48rem solid var(--ink); content: ""; transform: translate(-38%, -50%); }
.project-gallery__count { margin: 0 0 0 auto; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .1em; }
.project-dialog__copy { align-self: center; padding: clamp(5rem, 8vw, 9rem) clamp(2rem, 4vw, 4.5rem); }
.project-dialog__copy h2, .text-dialog h2 { max-width: 100%; margin: .18em 0 .6em; font-family: var(--display); font-size: clamp(3.2rem, 6vw, 7.5rem); font-weight: 800; line-height: .88; letter-spacing: -.055em; overflow-wrap: break-word; text-wrap: balance; }
.project-dialog__copy dl { margin: 0 0 2rem; }
.project-dialog__copy dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .52rem 0; border-top: 1px solid var(--line); }
.project-dialog__copy dt { color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.project-dialog__copy dd { margin: 0; font-size: .85rem; }
.project-dialog__description { max-width: 32rem; font-size: clamp(1.05rem, 1.45vw, 1.32rem); }
.project-dialog__link [data-field="project-url"] { display: flex; flex-wrap: wrap; gap: .45rem 1.15rem; }
.project-dialog__link a { display: inline-block; margin-top: 1rem; padding-bottom: .2rem; border-bottom: 1px solid; text-decoration: none; }

.text-dialog__shell { max-width: 86rem; padding: clamp(4.5rem, 10vw, 9rem) clamp(1.5rem, 8vw, 8rem); }
.text-dialog .eyebrow { margin-bottom: 1.4rem; }
.text-dialog h2 { font-size: clamp(3.4rem, 8vw, 8.5rem); }
.text-dialog__intro, .contact-dialog__intro { max-width: 58rem; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 2.1rem); font-weight: 600; line-height: 1.18; letter-spacing: -.03em; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; margin-top: clamp(4rem, 8vw, 8rem); }
.profile-grid div { padding-top: .75rem; border-top: 1px solid var(--ink); }
.profile-grid dt { margin-bottom: 1.1rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.profile-grid dd { margin: 0; font-size: 1.05rem; }
.about-dialog__shell { display: grid; grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.22fr); grid-template-areas: "portrait intro" "portrait profile"; align-content: start; gap: clamp(2.5rem, 5vw, 6rem); }
.about-intro { grid-area: intro; }
.about-copy > p { max-width: 46rem; margin: 0 0 1.25rem; }
.about-copy > p:not(.text-dialog__intro) { color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.about-portrait { position: sticky; top: clamp(2rem, 5vh, 4rem); grid-area: portrait; align-self: start; margin: 0; }
.about-portrait picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--ink); background: color-mix(in srgb, var(--paper) 92%, var(--ink)); box-shadow: 0 2.2rem 5rem rgba(17, 17, 15, .14); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.about-portrait figcaption { padding-top: .7rem; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.about-dialog__shell .profile-grid { grid-area: profile; gap: 1.7rem 2.5rem; margin-top: 0; }
.fallback-portrait { display: block; width: min(28rem, 100%); margin: 2rem 0; }
.fallback-portrait img { width: 100%; height: auto; }


.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; max-width: 66rem; margin-top: clamp(3rem, 6vw, 6rem); }
.form-field { display: flex; flex-direction: column; gap: .45rem; }
.form-field--wide, .form-privacy, .form-submit, .form-direct, .form-status { grid-column: 1 / -1; }
.form-field label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.form-field label span { color: var(--muted); font-weight: 400; }
.form-field input, .form-field textarea { width: 100%; min-height: 3.25rem; padding: .65rem .2rem; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; color: var(--ink); background: transparent; }
.form-field textarea { resize: vertical; }
.form-field [aria-invalid="true"] { border-color: #a51d1d; }
.form-error { min-height: 1.1em; color: #8b1717; font-size: .75rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }
.form-submit { justify-self: start; min-width: 12rem; min-height: 3.5rem; margin-top: .5rem; padding: .8rem 1.3rem; border: 1px solid var(--ink); border-radius: 0; color: var(--paper); background: var(--ink); cursor: pointer; }
.form-submit:disabled { cursor: wait; opacity: .58; }
.form-direct { margin: -.6rem 0 0; color: var(--muted); font-size: .84rem; }
.form-status { min-height: 1.4em; margin: 0; font-size: .86rem; }
.noscript-note { margin: 1rem var(--page-edge); padding: .8rem; border: 1px solid; }
.legal-page { width: min(62rem, calc(100% - 2 * var(--page-edge))); margin: 0 auto; padding: clamp(4rem, 12vw, 10rem) 0; }
.legal-page h1 { margin: .2em 0 .55em; font-family: var(--display); font-size: clamp(4rem, 10vw, 10rem); font-weight: 800; line-height: .84; letter-spacing: -.075em; }
.legal-page h2 { margin: 2.2em 0 .45em; font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; letter-spacing: -.045em; }
.legal-page p { max-width: 48rem; font-size: clamp(1.05rem, 2vw, 1.35rem); }

@keyframes dialog-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-shell-in { from { transform: translateY(1.2rem) scale(.985); } 70% { transform: translateY(-.15rem) scale(1.001); } to { transform: none; } }
@keyframes project-dialog-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes project-scrim-in { from { opacity: 0; } to { opacity: .94; } }
@keyframes project-scrim-out { from { opacity: .94; } to { opacity: 0; } }
@keyframes dialog-out { to { opacity: 0; } }
@keyframes dialog-shell-out { to { transform: translateY(.8rem) scale(.99); } }
@keyframes signature-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes signature-filament {
  0% { opacity: 0; transform: scale(.72, 0); }
  18% { opacity: .8; transform: scale(1.08, .18); }
  52% { opacity: .82; transform: scale(.58, 1); }
  72% { opacity: .46; transform: scale(.34, .88); }
  100% { opacity: 0; transform: scale(.16, 0); }
}
@keyframes signature-drop {
  0% { opacity: 0; transform: translate3d(0, -1px, 0) scale(.28, .16); }
  12% { opacity: .92; transform: translate3d(0, 0, 0) scale(1.08, .72); }
  30% { opacity: .92; transform: translate3d(var(--drop-neck-x), var(--drop-neck-y), 0) scale(.58, 1.82); }
  45% { opacity: .92; transform: translate3d(var(--drop-neck-x), var(--drop-neck-y), 0) scale(.46, 1.36); }
  66% { opacity: .9; transform: translate3d(var(--drop-mid-x), var(--drop-mid-y), 0) scale(.5, 1.18); }
  87% { opacity: .76; transform: translate3d(var(--drop-late-x), var(--drop-late-y), 0) scale(.42, 1.04); }
  100% { opacity: 0; transform: translate3d(var(--drop-drift), var(--drop-fall), 0) scale(.34, .94); }
}
@keyframes signature-speck {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.2); }
  18% { opacity: .74; transform: translate3d(var(--speck-early-x), var(--speck-up), 0) scale(1); }
  48% { opacity: .66; transform: translate3d(var(--speck-mid-x), var(--speck-mid-y), 0) scale(.76); }
  100% { opacity: 0; transform: translate3d(var(--speck-x), var(--speck-down), 0) scale(.3); }
}
@keyframes intro-detail-in { from { opacity: 0; transform: translateY(.45rem); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .site-header { min-height: 16.5rem; }
  .project { width: 16rem; }
  .project:nth-child(5n + 1), .project:nth-child(5n + 4) { width: 14rem; }
  .project:nth-child(5n + 2), .project:nth-child(5n + 3) { width: 17rem; }
  .project:nth-child(5n + 5) { width: 15.5rem; }
  .project-dialog__shell { display: block; }
  .project-dialog__media { min-height: 62vh; padding: 4rem 1rem 2rem; }
  .project-gallery__slide img { max-height: 50vh; }
  .project-dialog__copy { padding: 3rem 1.5rem 8.5rem; }
  .about-dialog__shell { display: grid; grid-template-columns: 1fr; grid-template-areas: "intro" "portrait" "profile"; gap: 2.5rem; }
  .about-portrait { position: static; width: min(34rem, 100%); }
  .about-dialog__shell .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .site-header { min-height: 12rem; padding-top: 3rem; }
  .site-brand { width: min(91vw, 32rem); margin-top: 2.25rem; }
  .site-focus { margin-top: -.55rem; font-size: .58rem; }
  .site-kicker { top: 1.8rem; }
  .theme-toggle { top: 1.42rem; left: .75rem; }
  .site-index { display: none; }
  .artbox { min-height: 33rem; }
  .artbox__viewport { touch-action: pan-y pinch-zoom; }
  .artbox__track { gap: .7rem; padding: 3.5rem 0 7rem; }
  .project { width: 12.5rem; }
  .project:nth-child(5n + 1), .project:nth-child(5n + 4) { width: 10.5rem; }
  .project:nth-child(5n + 2), .project:nth-child(5n + 3) { width: 13.5rem; }
  .project:nth-child(5n + 5) { width: 12rem; }
  .project.project--landscape, .project.project--wide { width: 15.5rem; }
  .project.project--square { width: 13rem; }
  .project__teaser { display: none; }
  .primary-actions { grid-template-columns: 1fr; }
  .primary-action { min-height: 11rem; }
  .primary-action + .primary-action { border-top: 1px solid var(--ink); border-left: 0; }
  .primary-action__title { font-size: clamp(2.1rem, 9.5vw, 3.6rem); letter-spacing: -.06em; }
  .primary-action__copy { max-width: 25rem; }
  .site-footer, .site-footer nav { flex-direction: column; }
  .privacy-notice { right: .5rem; bottom: .5rem; left: .5rem; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.15rem; }
  .privacy-notice__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .privacy-notice__actions a, .privacy-notice__actions button { display: grid; place-items: center; min-width: 0; padding-right: .55rem; padding-left: .55rem; text-align: center; white-space: normal; }
  .fallback-content dl, .profile-grid, .contact-form { grid-template-columns: 1fr; }
  .profile-grid { gap: 1.5rem; }
  .form-field--wide, .form-privacy, .form-submit, .form-direct, .form-status { grid-column: 1; }
  .dialog-shell { width: calc(100% - 1rem); }
  .project-dialog__copy { touch-action: pan-y; }
  .project-gallery__thumb { flex: 0 0 auto; width: 3.1rem; height: 2.3rem; }
  .project-gallery__count { position: sticky; right: 0; flex: 0 0 auto; padding-left: .4rem; background: var(--paper); }
  .dialog-return { grid-template-columns: minmax(0, 1fr); width: 100%; min-height: 5rem; margin: 0; padding: .75rem 1.25rem max(.9rem, env(safe-area-inset-bottom)); border-width: 1px 0 0; box-shadow: none; transform: translate3d(0, var(--dialog-control-pull, 0px), 0); }
  .dialog-return:active { transform: translate3d(0, calc(var(--dialog-control-pull, 0px) + 2px), 0); }
  .project-dialog.is-pulling-down .dialog-return { transition: none; }
  .text-dialog__shell { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .text-dialog h2 { font-size: clamp(2.45rem, 10.5vw, 4.2rem); line-height: .92; letter-spacing: -.05em; overflow-wrap: normal; word-break: normal; }
  .about-dialog__shell .profile-grid { grid-template-columns: 1fr; }
  .about-portrait picture { aspect-ratio: 4 / 5; }
  .about-portrait img { object-position: 52% 31%; }
}

@media (max-width: 520px) {
  .about-portrait picture { aspect-ratio: 1; }
  .about-portrait img { object-position: 50% 24%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .site-signature-ink, .site-kicker, .site-focus, .site-index, .theme-toggle { opacity: 1 !important; transform: none !important; }
  .signature-stroke, .signature-nib-coverage { animation: none !important; stroke-dashoffset: 0 !important; }
  .signature-filament, .signature-drop, .signature-speck { display: none !important; }
  .artbox__viewport { overflow-x: auto; scroll-snap-type: x proximity; touch-action: pan-x pan-y pinch-zoom; }
  .artbox__track { transform: none !important; }
  .artbox__sparks { display: none; }
  .project { opacity: 1 !important; transform: none !important; scroll-snap-align: center; }
}

/* Facetten: a collection with both portrait and landscape photography. */
[data-project-slug="facetten"] .project__picture img { object-position: 50% 35%; }
[data-project-slug="facetten"] { --card-ratio: 2 / 3; }
.project-gallery[data-project-slug="facetten"] { width: min(100%, 52rem); }
.project-gallery[data-project-slug="facetten"] .project-gallery__stage { height: clamp(15rem, 54dvh, 44rem); aspect-ratio: auto; background: #121212; }
.project-gallery[data-project-slug="facetten"] .project-gallery__thumb { flex: 0 0 auto; }

#project-dialog:has(.project-gallery[data-project-slug="facetten"]) .project-dialog__media { min-height: 0; align-content: start; padding: 1.5rem; }
.project-gallery[data-project-slug="facetten"] .project-gallery__slide img { max-height: none; }
.project-gallery[data-project-slug="facetten"] .project-gallery__count { position: sticky; right: 0; flex: 0 0 auto; padding-left: .4rem; background: var(--paper); }

.interest-panel { margin: 2rem 0 3rem; padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.interest-panel summary { cursor: pointer; font-size: 1.2rem; font-weight: 600; }
.interest-panel > p { max-width: 40rem; color: var(--muted); }
.interest-form { display: grid; gap: 1.2rem; max-width: 40rem; margin-top: 1.5rem; }
.interest-form select { width: 100%; padding: .8rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.interest-consent { display: flex; align-items: flex-start; gap: .7rem; font-size: .83rem; line-height: 1.6; }
.interest-consent input { flex: 0 0 auto; margin-top: .3rem; width: 1.1rem; height: 1.1rem; }
.privacy-notice__actions { flex-wrap: wrap; }
.privacy-notice__actions button { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }

/* Mobile and accessibility audit, October 2026. */
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
.quick-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem 1.1rem; margin:1.1rem 0 .4rem; }
.quick-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:.8rem; text-underline-offset:5px; }
.quick-nav a:last-child { font-weight:700; }
.theme-toggle { min-width:44px; min-height:44px; }
.carousel-controls { display:flex; justify-content:center; gap:.65rem; position:relative; z-index:6; }
.carousel-controls button, .project-gallery__navigation button { min-width:44px; min-height:44px; padding:.6rem .85rem; border:1px solid var(--line); border-radius:0; background:var(--paper); color:var(--ink); cursor:pointer; }
.carousel-controls button:hover, .project-gallery__navigation button:hover { border-color:var(--ink); }
.carousel-controls button:disabled, .project-gallery__navigation button:disabled { opacity:.45; cursor:default; }
.carousel-controls .control-label { font-size:.75rem; }
.carousel-hint { color:var(--muted); text-align:center; font-size:.8rem; margin:.8rem 1rem 0; }
.no-js .carousel-controls, .no-js .carousel-hint { display:none; }
.shooting-teaser { max-width:52rem; margin:clamp(2rem,6vw,5rem) auto 0; padding:0 var(--page-edge); text-align:center; }
.shooting-teaser h2 { font-size:clamp(2rem,4vw,3.7rem); font-weight:600; line-height:1.04; letter-spacing:-.05em; margin:.6rem 0 1.2rem; }
.shooting-teaser>p:not(.eyebrow) { color:var(--muted); line-height:1.7; }
.shooting-link { display:inline-flex!important; align-items:center; min-height:48px; padding:.65rem 0; border-bottom:1px solid; text-decoration:none; font-weight:600; font-size:1rem; }
.site-footer { flex-wrap:wrap; }
.site-footer p, .site-footer nav { flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; min-width:0; }
.site-footer nav a, .site-footer nav button { display:inline-flex; align-items:center; min-height:44px; overflow-wrap:anywhere; }
.privacy-notice { max-height:calc(100dvh - 1rem); overflow-y:auto; overscroll-behavior:contain; }
.project-gallery__navigation { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.65rem; }
.project-gallery__navigation .project-gallery__count { position:static; margin:0; padding:0; font-size:.78rem; }
.project-gallery__controls { position:relative; scroll-padding:1rem; padding-bottom:.3rem; }
.project-gallery__thumb { flex:0 0 4.5rem; min-width:44px; min-height:44px; }
.project-gallery__thumb:focus-visible { outline-offset:-3px; }
.project-dialog__copy { min-width:0; }
.project-dialog__copy dd, .project-dialog__link a { overflow-wrap:anywhere; }
.dialog-shell { scroll-padding:1rem 0; -webkit-overflow-scrolling:touch; }
.project-dialog__copy h2, .text-dialog h2, .primary-action__title { overflow-wrap:anywhere; }
.form-field { min-width:0; }
.form-field input, .form-field textarea, .form-field select { font-size:16px; }
.form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible { outline-offset:3px; }
.interest-consent { padding:.5rem 0; }
.interest-consent input { width:1.4rem; height:1.4rem; margin:.1rem .1rem 0 0; }
.form-direct a, .legal-page a { overflow-wrap:anywhere; }
.legal-page h1 { font-size:clamp(2.4rem,9vw,7rem); line-height:1; overflow-wrap:anywhere; }
.legal-page code { overflow-wrap:anywhere; }
.js.is-intro-playing .signature-stroke, .js.is-intro-playing .signature-nib-coverage { animation-duration:calc(var(--stroke-duration) * .32); animation-delay:calc(var(--stroke-delay) * .32); }
.js.is-intro-playing .site-focus { animation-delay:.25s; }
.js.is-intro-playing .signature-ink-effects { display:none; }
@media (max-width:720px) {
  .site-header { padding-top:3rem; min-height:0; }
  .site-brand { width:min(88vw,32rem); }
  .site-kicker { font-size:.6rem; }
  .site-focus { font-size:.65rem; letter-spacing:.09em; }
  .quick-nav { margin:.8rem 0 .25rem; }
  .artbox { min-height:0; padding-bottom:1.5rem; }
  .artbox__stage { min-height:clamp(30rem,73svh,35rem); }
  .project:nth-child(n) { width:clamp(14rem,64vw,19rem); }
  .project.project--wide, .project.project--landscape { width:min(78vw,23rem); }
  .project.project--square { width:min(68vw,20rem); }
  .project figcaption { font-size:.72rem; letter-spacing:.035em; }
  .project-gallery__thumb { width:3.4rem; height:3rem; flex-basis:3.4rem; }
  .project-gallery__navigation button { font-size:.8rem; }
  .primary-actions { margin-top:3rem; }
  .primary-action { min-height:10rem; gap:.9rem; }
  .primary-action__title { max-width:100%; font-size:clamp(2rem,9vw,3.4rem); line-height:1; }
  .site-footer, .site-footer nav { align-items:flex-start; }
  .site-footer { gap:1rem; margin-top:3rem; padding-bottom:max(1.5rem,env(safe-area-inset-bottom)); }
  .site-footer nav { flex-direction:row; }
  .privacy-notice { max-height:75dvh; padding:1rem; gap:.75rem; }
  .privacy-notice p { font-size:.85rem; line-height:1.5; }
  .privacy-notice__actions { grid-template-columns:1fr 1fr; }
  .privacy-notice__actions a { grid-column:1/-1; min-height:36px; border:0; padding:.2rem; }
  .privacy-notice__actions button { min-height:48px; font-size:.65rem; }
  dialog { height:var(--visual-viewport-height,100dvh); top:var(--visual-viewport-top,0px); }
  .dialog-return { min-height:3.5rem; padding:.6rem 1rem max(.6rem,env(safe-area-inset-bottom)); }
  .project-dialog__copy { padding:2rem 1rem 3rem; }
  .project-dialog__copy h2 { font-size:clamp(2.5rem,11vw,4rem); }
  .project-dialog__copy dl div { grid-template-columns:minmax(4.5rem,.6fr) minmax(0,1.4fr); gap:.6rem; }
  .project-dialog__copy dt { font-size:.7rem; }
  .project-dialog__media { min-height:0; padding:1rem .5rem; }
  #project-dialog:has(.project-gallery[data-project-slug="facetten"]) .project-dialog__media { padding:.75rem .5rem; }
  .project-gallery[data-project-slug="facetten"] .project-gallery__stage { height:clamp(13rem,53dvh,35rem); }
  .text-dialog__shell { padding:2.5rem 1rem 3rem; }
  .text-dialog h2 { overflow-wrap:anywhere; }
  .contact-dialog__intro { font-size:1.2rem; line-height:1.4; }
  .form-submit { width:100%; justify-self:stretch; }
  .artbox__sparks { display:none; }
}
@media (max-height:500px) and (orientation:landscape) {
  .privacy-notice { max-height:85dvh; }
  .project-gallery[data-project-slug="facetten"] .project-gallery__stage { height:65dvh; min-height:9rem; }
  .dialog-return { min-height:2.8rem; padding:.4rem; }
}

/* Clear service choices, compact inquiry and calmer desktop motion. */
.site-intro { margin:1.2rem 0 0; font-size:clamp(1.2rem,2.1vw,1.8rem); font-weight:500; line-height:1.25; letter-spacing:-.035em; text-wrap:balance; }
.quick-nav { gap:.35rem 1.4rem; margin-top:1.4rem; align-items:center; }
.quick-nav a:last-child { gap:.7rem; padding:.6rem 1rem; background:var(--ink); color:var(--paper); text-decoration:none; }
.quick-nav a:last-child:hover { background:var(--signal); color:#11110f; }
.work-heading { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem 2rem; margin:2.5rem var(--page-edge) 0; padding-top:1rem; border-top:1px solid var(--line); }
.work-heading h2 { font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0; }
.work-heading p { color:var(--muted); font-size:.78rem; margin:0; }
.work-heading .work-provenance { flex-basis:100%; max-width:80ch; line-height:1.6; }
.project figcaption { font-size:.72rem; letter-spacing:.035em; }
.project__teaser { font-size:.78rem; line-height:1.4; }
.service-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:clamp(2rem,5vw,5rem) var(--page-edge) 0; border-block:1px solid var(--line); }
.service-paths article { display:flex; align-items:flex-start; flex-direction:column; padding:clamp(2rem,4vw,4rem); min-width:0; }
.service-paths article+article { border-left:1px solid var(--line); }
.service-paths h2 { font-size:clamp(2rem,3.2vw,3.5rem); font-weight:600; line-height:1.06; letter-spacing:-.05em; margin:1rem 0; }
.service-paths p:not(.eyebrow) { color:var(--muted); max-width:37rem; line-height:1.7; margin:0 0 1.5rem; }
.service-paths .shooting-link { margin-top:auto; gap:1rem; line-height:1.5; }
.primary-actions { margin-top:clamp(2rem,4vw,4rem); }
.primary-action__title { line-height:.99; }
.dialog-toolbar { display:flex; justify-content:flex-end; align-items:center; width:calc(100% - clamp(1rem, 4vw, 4rem)); margin:0 auto; padding:max(.5rem,env(safe-area-inset-top)) 0 .5rem; }
.dialog-close { position:relative; flex:none; z-index:60; width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer; box-shadow:0 .25rem 1rem rgb(0 0 0 / .08); }
.dialog-close:hover { background:var(--ink); color:var(--paper); }
.contact-dialog .dialog-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-content:start; gap:clamp(2rem,5vw,5rem); padding:clamp(3.5rem,6vw,6rem) clamp(1.25rem,5vw,5rem) 3rem; max-width:78rem; }
.contact-dialog h2 { font-size:clamp(2.5rem,4.5vw,4.5rem); line-height:1.02; margin:.3rem 0 1.3rem; }
.contact-heading, .contact-fields { min-width:0; }
.contact-dialog__intro { font-size:clamp(1.2rem,1.65vw,1.5rem); line-height:1.4; }
.contact-heading>p:not(.eyebrow):not(.contact-dialog__intro) { color:var(--muted); line-height:1.7; }
.contact-direct { margin-top:2rem; }
.contact-direct a { color:var(--ink); overflow-wrap:anywhere; text-underline-offset:4px; }
.contact-note { font-size:.8rem; }
.contact-fields .interest-form { margin:0; max-width:none; }
.interest-form .form-submit { display:flex; align-items:center; justify-content:center; width:100%; }
.interest-form .form-status { padding:.75rem 0; margin:0; }
.interest-form .form-status[data-state] { border-top:1px solid var(--line); }
.interest-form .form-status[data-state="success"] { font-weight:600; }
.interest-form .form-status[data-state="error"] { color:#a52719; }
html[data-theme="dark"] .interest-form .form-status[data-state="error"] { color:#ffb8a9; }
.form-field label { font-size:.76rem; letter-spacing:.045em; line-height:1.5; }
.form-submit { transition:background-color 180ms ease,color 180ms ease; }
.form-submit:hover:not(:disabled) { background:var(--signal); color:#11110f; }
.project-dialog__link .shooting-link { min-height:48px; font-size:1rem; }
@media(max-width:800px) {
  .service-paths { grid-template-columns:1fr; }
  .service-paths article { padding:2rem 0; }
  .service-paths article+article { border-left:0; border-top:1px solid var(--line); }
  .service-paths h2 { font-size:clamp(2rem,7vw,3rem); }
  .contact-dialog .dialog-shell { grid-template-columns:1fr; gap:1.5rem; padding:3.5rem 1.25rem 2rem; }
  .contact-direct { margin-top:1rem; }
}
@media(max-width:720px) {
  .site-intro { margin:.9rem 0 0; font-size:clamp(1.15rem,4.8vw,1.45rem); }
  .artbox__stage { min-height:clamp(26rem,calc(96vw + 6rem),35rem); }
  .quick-nav { gap:.25rem 1.1rem; margin-top:1rem; max-width:25rem; }
  .quick-nav a { font-size:.78rem; }
  .quick-nav a:last-child { min-width:70%; justify-content:center; margin-top:.4rem; }
  .work-heading { margin-top:1.75rem; gap:.4rem; }
  .work-heading h2, .work-heading p { font-size:.7rem; }
  .dialog-toolbar { width:calc(100% - 1rem); }
  .contact-fields .form-submit { min-height:52px; }
  .service-paths .shooting-link { font-size:.95rem; }
}

/* One scrolling surface; controls remain in their own viewport rows. */
.project-dialog__copy { align-self:start; padding:clamp(2rem,4vw,4rem) clamp(1.5rem,3vw,3rem); }
.text-dialog__shell { padding-top:clamp(2rem,5vw,5rem); padding-bottom:clamp(2rem,5vw,5rem); }
.contact-dialog .dialog-shell { padding-top:clamp(2rem,4vw,4rem); }
@media (min-width:901px) {
  .project-dialog__media { min-height:0; padding:1.5rem; align-self:start; }
  .project-gallery__stage { max-height:max(12rem,calc(100dvh - 22rem)); }
}
@media (min-width:901px) and (min-height:650px) {
  .project-dialog__media { position:sticky; top:0; }
}
@media (max-width:900px) {
  .project-dialog__media { min-height:0; padding:1rem; }
  .project-dialog__copy { padding:2rem 1.25rem 3rem; }
}

.service-paths .service-uiux-link { margin-top:1rem; font-size:.85rem; }