/* Paper in Motion — polished vector edition. No build dependencies. */
@font-face { font-family:Portfolio Sans;src:url(assets/sans-regular.woff) format('woff');font-style:normal;font-weight:400;font-display:swap}

@font-face { font-family:Portfolio Sans;src:url(assets/sans-bold.woff) format('woff');font-style:normal;font-weight:700 900;font-display:swap}

@font-face { font-family:Portfolio Serif;src:url(assets/serif-italic.woff) format('woff');font-style:italic;font-weight:400;font-display:swap}

:root { --ink:#160f02;--orange:#ef4004;--cream:#fff0cf;--gold:#ffc21a;color-scheme:light}
*,*::before,*::after { box-sizing:border-box}
html { scroll-behavior:smooth;background:#ffc21a}
body { margin:0;color:var(--ink);font-family:Portfolio Sans,Arial,sans-serif}
a { color:inherit;text-decoration:none}
button,input { font:inherit}
h1,h2,h3,p { margin:0}
em { font-family:Portfolio Serif,Georgia,serif;font-weight:400;color:var(--orange)}

.page { container-type:inline-size;max-width:none;margin-inline:auto}
.canvas { --u:calc(100cqw / 1024);position:relative;height:calc(1536 * var(--u));overflow:hidden;background:radial-gradient(ellipse at 13% 29%,#ffe694 0%,transparent 35%),radial-gradient(ellipse at 31% 7%,#ffbd04 0%,transparent 44%),radial-gradient(ellipse 27% 5.2% at 25% 93.4%,#ffdd94 0%,#fdd36e 48%,rgba(255,202,10,0) 100%),#ffca0a;font-size:calc(16 * var(--u))}
.paper-surfaces { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

.header,.hero,.concepts,.own-projects,.career,.collection-banner,.footer { position:absolute;left:0;right:0}
.header { top:0;z-index:7;height:calc(42 * var(--u))}
.wordmark { position:absolute;left:calc(43 * var(--u));top:calc(12 * var(--u));width:calc(460 * var(--u));height:calc(25 * var(--u));border-bottom:calc(1.3 * var(--u)) solid var(--ink);padding-left:calc(3 * var(--u));font-size:calc(15 * var(--u));font-weight:700;letter-spacing:calc(.5 * var(--u))}
.header nav { position:absolute;left:calc(540 * var(--u));right:calc(36 * var(--u));top:calc(11 * var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--u));white-space:nowrap;font-weight:700;font-size:calc(16 * var(--u))}

.button { display:inline-flex;align-items:center;justify-content:center;gap:calc(5 * var(--u));border-radius:999px;white-space:nowrap;font-weight:700;line-height:1;border:calc(1 * var(--u)) solid #2b1903;font-size:calc(15 * var(--u));height:calc(34 * var(--u));padding:0 calc(21 * var(--u));cursor:pointer}
.button-dark { color:#fff7e9;background:linear-gradient(120deg,#211100 5%,#3c2107 55%,#1c0f00 90%);box-shadow:inset 0 calc(1 * var(--u)) calc(4 * var(--u)) #ffbf4d63,0 calc(2 * var(--u)) calc(2 * var(--u)) #8c46002b}
.button-outline { background:#ffefc254}
.button span { font-family:Arial,sans-serif;font-size:1.15em;font-weight:400;line-height:.8}
.header .nav-contact { height:calc(29 * var(--u));min-width:calc(119 * var(--u));padding-inline:calc(17 * var(--u));font-size:calc(16 * var(--u))}

.hero { top:0;height:calc(446 * var(--u));z-index:1}
.eyebrow { font-size:calc(14 * var(--u));font-weight:700;letter-spacing:calc(1.2 * var(--u));line-height:1}
.hero-eyebrow { position:absolute;left:calc(59 * var(--u));top:calc(56 * var(--u));font-size:calc(13 * var(--u));letter-spacing:calc(1.8 * var(--u));z-index:2}
.hero-name { position:absolute;left:calc(54 * var(--u));top:calc(85 * var(--u));font-size:calc(59 * var(--u));line-height:.82;letter-spacing:calc(-2.5 * var(--u));font-weight:900;z-index:2}
.orange { color:var(--orange)}
.hero-statement { position:absolute;left:calc(54 * var(--u));top:calc(190 * var(--u));font-size:calc(65 * var(--u));font-weight:900;letter-spacing:calc(-2.6 * var(--u));line-height:.87;z-index:2}
.hero-statement em { display:block;margin-top:calc(1 * var(--u));margin-left:calc(-8 * var(--u));font-size:calc(88 * var(--u));letter-spacing:calc(-4.5 * var(--u));line-height:.87;-webkit-text-stroke:0}
.hero-statement br { display:none}
.hero-intro { position:absolute;left:calc(56 * var(--u));top:calc(330 * var(--u));font-size:calc(20.5 * var(--u));line-height:1.04;z-index:2}
.hero-actions { position:absolute;left:calc(55 * var(--u));top:calc(378 * var(--u));display:flex;gap:calc(15 * var(--u));z-index:3}
.hero-actions .button:first-child { width:auto;padding:0 calc(22 * var(--u))}
.hero-actions .button:last-child:not(:first-child) { width:calc(109 * var(--u));padding:0}
.hero-art { position:absolute;left:calc(350 * var(--u));top:calc(36 * var(--u));width:calc(674 * var(--u));height:calc(410 * var(--u));overflow:visible}

.concepts { top:calc(435 * var(--u));height:calc(398 * var(--u));z-index:3;scroll-margin-top:15px}
.concepts>.eyebrow { position:absolute;left:calc(53 * var(--u));top:calc(14 * var(--u));font-size:calc(16 * var(--u));letter-spacing:calc(.6 * var(--u))}
.concepts>h2 { position:absolute;left:calc(51 * var(--u));top:calc(30 * var(--u));font-size:calc(41.5 * var(--u));font-weight:900;line-height:1;letter-spacing:calc(-1.6 * var(--u));white-space:nowrap}
.concepts>h2 em { font-size:calc(52 * var(--u));letter-spacing:calc(-2.4 * var(--u));-webkit-text-stroke:0}
.concept-card { position:absolute;display:block}
.concept-picture { display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 calc(8 * var(--u)) calc(5 * var(--u)) #37210065)}
.quire { left:calc(59 * var(--u));top:calc(118 * var(--u));width:calc(274 * var(--u));height:calc(280 * var(--u));z-index:1}
.mondlicht { left:calc(322 * var(--u));top:calc(79 * var(--u));width:calc(376 * var(--u));height:calc(310 * var(--u));z-index:3}
.bloom { left:calc(690 * var(--u));top:calc(119 * var(--u));width:calc(279 * var(--u));height:calc(276 * var(--u));z-index:2}
.project-label { position:absolute;top:calc(209 * var(--u));left:calc(53 * var(--u));width:calc(190 * var(--u));min-height:calc(51 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;border-radius:calc(18 * var(--u));background:linear-gradient(105deg,#fff0cd,#ffebc0 60%,#ffeac4);box-shadow:0 calc(5 * var(--u)) calc(7 * var(--u)) #5a340052}
.project-label strong { font-size:calc(22 * var(--u));font-weight:900;letter-spacing:calc(-.8 * var(--u))}
.project-label>span { font-size:calc(15.5 * var(--u));margin-top:calc(2 * var(--u));white-space:nowrap}
.project-label b,.own-caption b { font-weight:400;color:var(--orange)}
.mondlicht .project-label { left:calc(96 * var(--u));top:calc(252 * var(--u));width:calc(189 * var(--u));height:calc(54 * var(--u))}
.bloom .project-label { left:calc(38 * var(--u));top:calc(208 * var(--u));width:calc(181 * var(--u))}

.own-projects { top:calc(836 * var(--u));height:calc(340 * var(--u));z-index:3}
.own-projects>.eyebrow { position:absolute;left:calc(85 * var(--u));top:calc(8 * var(--u));font-size:calc(13 * var(--u));letter-spacing:calc(1 * var(--u))}
.own-projects>h2 { position:absolute;left:calc(84 * var(--u));top:calc(14 * var(--u));font-size:calc(49 * var(--u));font-weight:900;line-height:1;letter-spacing:calc(-1.4 * var(--u))}
.own-projects>h2 em { font-size:calc(65 * var(--u));letter-spacing:calc(-2.7 * var(--u));-webkit-text-stroke:0}
.own-card { position:absolute;display:block}
.own-picture { display:block;width:100%;height:auto;filter:drop-shadow(0 calc(6 * var(--u)) calc(5 * var(--u)) #6838005e)}
.bodensee { left:calc(55 * var(--u));top:calc(83 * var(--u));width:calc(465 * var(--u))}
.own-caption { display:block;font-size:calc(15 * var(--u));line-height:1.08}
.own-caption strong { display:block;font-size:calc(20 * var(--u));font-weight:700;letter-spacing:calc(-.6 * var(--u));margin-bottom:calc(2 * var(--u))}
.bodensee .own-caption { padding:calc(4 * var(--u)) calc(5 * var(--u)) 0}
.milo { left:calc(553 * var(--u));top:calc(10 * var(--u));width:calc(299 * var(--u))}
.keeps { left:calc(553 * var(--u));top:calc(163 * var(--u));width:calc(300 * var(--u))}
.milo .own-caption,.keeps .own-caption { position:absolute;left:calc(315 * var(--u));top:calc(57 * var(--u));width:calc(137 * var(--u))}
.milo .own-caption strong { font-style:italic;white-space:nowrap;font-size:calc(19 * var(--u))}
.keeps .own-caption { top:calc(34 * var(--u));left:calc(318 * var(--u));width:calc(125 * var(--u))}
.keeps .own-caption strong { margin-bottom:calc(5 * var(--u))}
.shop-badge { position:absolute;right:calc(-9 * var(--u));top:calc(-1 * var(--u));padding:calc(4 * var(--u)) calc(11 * var(--u));font-size:calc(12 * var(--u));border-radius:999px;background:#ff5c04;color:#fff;line-height:1.2;font-weight:700}

.career { top:calc(1173 * var(--u));height:calc(215 * var(--u));z-index:4;scroll-margin-top:20px}
.career>h2 { position:absolute;left:calc(29 * var(--u));top:calc(16 * var(--u));font-size:calc(49 * var(--u));font-weight:900;line-height:.79;letter-spacing:calc(-1.7 * var(--u))}
.career>h2 em { display:block;margin-left:calc(-13 * var(--u));margin-top:calc(-1 * var(--u));font-size:calc(84 * var(--u));line-height:.88;letter-spacing:calc(-4 * var(--u));-webkit-text-stroke:0}
.career>h2 br:last-of-type { display:none}
.journey,.education { position:absolute;top:0}
.journey { left:calc(268 * var(--u));width:calc(289 * var(--u))}
.education { left:calc(639 * var(--u));width:calc(299 * var(--u))}
.career h3 { position:absolute;left:0;top:calc(3 * var(--u));font:italic calc(25 * var(--u))/1 Portfolio Serif,Georgia,serif;color:#fff8e6;font-weight:400;text-shadow:none}
.education h3 { left:calc(-8.5 * var(--u))}
.timeline { list-style:none;margin:calc(39 * var(--u)) 0 0;padding:0 0 0 calc(36 * var(--u));position:relative}
.timeline::before { content:'';position:absolute;left:calc(7 * var(--u));top:calc(8 * var(--u));bottom:calc(14 * var(--u));width:calc(2 * var(--u));background:linear-gradient(#ed3d00,#ff8825,#f74108)}
.timeline li { position:relative;min-height:calc(39 * var(--u));padding-bottom:calc(6 * var(--u));border-bottom:calc(.7 * var(--u)) solid #ceaa7157}
.timeline li:nth-child(3) { min-height:calc(49 * var(--u))}
.timeline li:last-child { border-bottom:0;min-height:0}
.timeline li::before { content:'';position:absolute;left:calc(-36 * var(--u));top:calc(2 * var(--u));width:calc(16 * var(--u));height:calc(16 * var(--u));border:calc(2 * var(--u)) solid #241300;border-radius:50%;background:#ff830b}
.timeline li:nth-child(2)::before,.timeline li:nth-child(3)::before { background:#ffc32b}
.timeline strong { display:block;font-size:calc(14.2 * var(--u));letter-spacing:calc(-.45 * var(--u));line-height:1.02;white-space:nowrap}
.timeline p { font-size:calc(11.2 * var(--u));line-height:1.04;margin-top:calc(2 * var(--u));letter-spacing:calc(-.15 * var(--u));white-space:nowrap}
.education dl { margin:calc(39 * var(--u)) 0 0;padding:0}
.education dl>div { border-bottom:calc(.8 * var(--u)) solid #716a5c;padding:0 0 calc(5 * var(--u));margin-bottom:calc(5 * var(--u));min-height:calc(35 * var(--u))}
.education dl>div:last-child { border:0;margin-bottom:0}
.education dt { font-size:calc(15 * var(--u));line-height:1.02;font-weight:700;letter-spacing:calc(-.3 * var(--u))}
.education dd { margin:calc(1 * var(--u)) 0 0;font-size:calc(12 * var(--u));line-height:1.08;letter-spacing:calc(-.25 * var(--u))}

.collection-banner { top:calc(1387 * var(--u));height:calc(99 * var(--u));z-index:2}
.collection-number { position:absolute;left:calc(35 * var(--u));top:calc(-11 * var(--u));color:transparent;-webkit-text-stroke:calc(1.3 * var(--u)) #ff5918;font-size:calc(120 * var(--u));line-height:1;font-weight:700;font-style:italic;letter-spacing:calc(-7 * var(--u));transform:scaleX(1.4);transform-origin:left top}
.collection-copy { position:absolute;left:calc(429 * var(--u));top:calc(19 * var(--u))}
.collection-copy h2 { font-size:calc(24.7 * var(--u));line-height:1;font-weight:700;letter-spacing:calc(-.9 * var(--u))}
.collection-copy p { font-size:calc(14 * var(--u));line-height:1;margin-top:calc(2 * var(--u))}
.collection-copy .button { margin-top:calc(6 * var(--u));height:calc(26 * var(--u));font-size:calc(13 * var(--u));padding:0 calc(15 * var(--u))}
.footer { top:calc(1487 * var(--u));height:calc(49 * var(--u));display:flex;align-items:center;z-index:4}
.footer h2 { position:absolute;left:calc(49 * var(--u));top:calc(-4 * var(--u));font-size:calc(48 * var(--u));font-weight:900;line-height:1;letter-spacing:calc(-1.8 * var(--u));white-space:nowrap}
.footer h2 em { font-size:calc(52 * var(--u));letter-spacing:calc(-2.5 * var(--u));-webkit-text-stroke:0}
.footer>.button { position:absolute;left:calc(576 * var(--u));top:calc(8.5 * var(--u));height:calc(32 * var(--u));width:calc(226 * var(--u));padding:0;font-size:calc(16 * var(--u))}
.footer>.button::before { content:'';position:absolute;left:calc(-31 * var(--u));top:calc(-1 * var(--u));height:calc(31 * var(--u));width:calc(1 * var(--u));background:#7b623c}
.footer small { position:absolute;left:calc(838 * var(--u));top:calc(18 * var(--u));font-size:calc(11 * var(--u));white-space:nowrap}

a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #063471;outline-offset:5px;border-radius:5px}
.skip-link { position:fixed;top:12px;left:12px;transform:translateY(-200%);background:#160f02;color:#fff;padding:12px 20px;border-radius:8px;z-index:100}
.skip-link:focus { transform:none}

dialog { --u:1px;color:var(--ink);border:1px solid #7e602b;border-radius:20px;background:var(--cream);padding:24px;width:min(1000px,calc(100vw - 32px));max-height:90dvh;box-shadow:0 20px 100px #25100380;overflow:auto}
dialog::backdrop { background:#201405bd}
body:has(dialog[open]) { overflow:hidden}
.dialog-toolbar { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.dialog-toolbar h2 { font-size:clamp(26px,4vw,42px);margin:3px 0 0;letter-spacing:-1.5px;line-height:1}
.dialog-toolbar .eyebrow { font-size:12px;letter-spacing:1.4px;margin-bottom:9px}
.close-button { border:1px solid #4d3614;border-radius:50%;background:var(--ink);color:var(--cream);font-size:28px;width:44px;height:44px;line-height:1;cursor:pointer;flex-shrink:0}
.project-dialog>img { display:block;width:100%;height:auto;border-radius:9px;background:#eadfca}
.project-kind { margin-top:16px}
.search-label { font-size:13px;font-weight:700;display:block;margin-bottom:6px}
input[type=search] { width:100%;padding:13px 16px;border:1px solid #8e774e;background:#fff9e9;border-radius:10px;font:inherit;color:var(--ink)}
.filters { display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}
.filters button { font:inherit;font-size:13px;border:1px solid #a9926d;padding:8px 12px;border-radius:30px;background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed=true] { background:var(--ink);color:var(--cream);border-color:var(--ink)}
.result-count { font-size:13px;color:#665439;margin:12px 0}
.collection-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.collection-card { display:block;border:1px solid #cfb98d;border-radius:12px;padding:0;background:#fff9e9;overflow:hidden;cursor:pointer;text-decoration:none;color:var(--ink);text-align:left;font:inherit}
.collection-card img { display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top;background:#eee2c8}
.collection-card .card-copy { padding:12px;display:block}
.collection-card strong { display:block;font-size:17px;line-height:1.2;margin-bottom:5px}
.collection-card small { font-size:12px;display:block;line-height:1.4;color:#6d5a3e}
.collection-card:hover { border-color:var(--orange)}
.empty-state { padding:24px;text-align:center}

@media(max-width:650px) { dialog { padding:18px;border-radius:14px;max-height:94dvh;width:calc(100vw - 20px)}
.collection-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.collection-card .card-copy { padding:10px}
.collection-card strong { font-size:15px}
.dialog-toolbar h2 { letter-spacing:-.7px}
}

@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto}
dialog::backdrop { backdrop-filter:none}
}

@media print { html { background:#fff}
.page { max-width:none}
.skip-link,dialog { display:none!important}
body { print-color-adjust:exact;-webkit-print-color-adjust:exact}
}



/* Reference artwork: native paper surfaces and crisp, editable HTML type. */
.hero-name .orange { vertical-align:calc(15 * var(--u));display:inline-block;width:calc(14 * var(--u));height:calc(14 * var(--u));margin-left:calc(2 * var(--u));border-radius:50%;background:var(--orange);font-size:0;-webkit-text-stroke:0; }
.hero-statement em { margin-top:calc(-2 * var(--u)); }
.hero-art { image-rendering:auto; }
.concepts>.eyebrow { letter-spacing:calc(1.05 * var(--u)); }
.button span[aria-hidden=true] { position:relative;display:inline-block;width:.72em;height:.72em;font-size:1em;color:transparent;flex:none;margin-left:.12em; }
.button span[aria-hidden=true]::before { content:'';position:absolute;inset:0 0 auto auto;width:.65em;height:.65em;border-top:.085em solid var(--ink);border-right:.085em solid var(--ink); }
.button span[aria-hidden=true]::after { content:'';position:absolute;right:.02em;top:.02em;width:.91em;height:.085em;background:var(--ink);transform:rotate(-45deg);transform-origin:right center; }
.button-dark span[aria-hidden=true]::before { border-color:#fff7e9; }
.button-dark span[aria-hidden=true]::after { background:#fff7e9; }
.shot-frame { display:flex;flex-direction:column;width:100%;overflow:hidden;background:#fff3d5;position:relative;border:max(1px,calc(1.2 * var(--u))) solid #5b421a;border-radius:calc(13 * var(--u));box-shadow:0 calc(1.5 * var(--u)) calc(1.5 * var(--u)) #39200038,0 calc(6 * var(--u)) calc(6 * var(--u)) #57360030; }
.shot-bar { flex:none;position:relative;height:calc(18 * var(--u));background:linear-gradient(110deg,#ffedc3,#f9ecd2 65%,#fff3d8);border-bottom:max(1px,calc(1 * var(--u))) solid #c1a577;box-shadow:inset 0 max(1px,calc(1 * var(--u))) #fff9e7; }
.shot-bar::before { content:'';position:absolute;left:calc(9 * var(--u));top:50%;width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;margin-top:calc(-3.5 * var(--u));background:#ff5a00;box-shadow:calc(12 * var(--u)) 0 0 #ffb400,calc(24 * var(--u)) 0 0 #1b140a; }
.shot-img { flex:1 1 auto;min-height:0;width:100%;object-fit:cover;object-position:top center;display:block; }
.quire .shot-frame { aspect-ratio:274/218;transform:rotate(-4.7deg); }
.mondlicht .shot-frame { aspect-ratio:376/273;border-radius:calc(15 * var(--u)); }
.mondlicht .shot-bar { height:calc(22 * var(--u)); }
.mondlicht .shot-bar::before { width:calc(10 * var(--u));height:calc(10 * var(--u));margin-top:calc(-5 * var(--u));left:calc(13 * var(--u));box-shadow:calc(16 * var(--u)) 0 0 #ffb400,calc(32 * var(--u)) 0 0 #1b140a; }
.bloom .shot-frame { aspect-ratio:279/218;transform:rotate(4.8deg); }
.bloom .shot-img { object-fit:contain;object-position:top center;background:#faf0dc; }
.bodensee .shot-frame { aspect-ratio:465/210; }
.milo .shot-frame { aspect-ratio:299/142; }
.keeps .shot-frame { aspect-ratio:300/159; }
.own-frame .shot-bar { height:calc(16 * var(--u)); }
.own-frame .shot-bar::before { width:calc(6 * var(--u));height:calc(6 * var(--u));margin-top:calc(-3 * var(--u));left:calc(9 * var(--u));box-shadow:calc(10 * var(--u)) 0 0 #ffb400,calc(20 * var(--u)) 0 0 #1b140a; }
.project-label { border:calc(.6 * var(--u)) solid #fff6df; }
.own-caption { font-size:calc(14.5 * var(--u)); }
.own-caption strong { font-size:calc(19.8 * var(--u)); }
.timeline li::before { width:calc(16 * var(--u));height:calc(16 * var(--u)); }
.education dl>div { border-bottom-color:#a99a81; }
.collection-banner { overflow:hidden; }
.collection-number { z-index:0; }
.collection-copy { z-index:2; }
/* The lower ribbon is above the outline numerals, like the reference. */
.collection-banner::after { content:'';position:absolute;inset:0;pointer-events:none;background:url(assets/bottom-ribbon.svg) center / 100% 100% no-repeat;z-index:1; }
.button,.concept-card,.own-card { -webkit-tap-highlight-color:transparent; }
@media(hover:hover) {
  .button:hover { filter:brightness(1.09); }
  .concept-card:hover .project-label { box-shadow:0 calc(7 * var(--u)) calc(9 * var(--u)) #5a340075; }
  .own-card:hover .own-caption strong { text-decoration:underline;text-underline-offset:.15em; }
}
/* Phones reflow into readable sections while retaining the same artwork/assets. */
@media(max-width:760px) {
  .canvas { --u:1px;height:auto;overflow:hidden;padding:16px 20px 24px;background:radial-gradient(ellipse at 0 15%,#ffe89d,transparent 40%),#ffc50b; }
  .paper-surfaces { display:none; }
  .header,.hero,.concepts,.own-projects,.career,.collection-banner,.footer { position:relative;inset:auto;height:auto;width:100%; }
  .header { margin-bottom:28px; }
  .wordmark { position:relative;inset:auto;display:block;width:100%;height:auto;padding:0 0 9px;font-size:13px; }
  .header nav { position:relative;inset:auto;margin-top:12px;gap:10px;flex-wrap:wrap;font-size:13px; }
  .header .nav-contact { min-width:0;height:32px;font-size:13px;padding-inline:14px; }
  .hero { padding-bottom:10px; }
  .hero-eyebrow,.hero-name,.hero-statement,.hero-intro,.hero-actions { position:relative;inset:auto; }
  .hero-eyebrow { margin-bottom:15px;font-size:11px;letter-spacing:1.5px; }
  .hero-name { font-size:clamp(44px,12vw,68px);line-height:.88;letter-spacing:-2px; }
  .hero-name .orange { transform:translateY(.44em);vertical-align:baseline;width:.23em;height:.23em;font-size:inherit;margin-left:2px;color:transparent; }
  .hero-statement { margin-top:20px;font-size:clamp(39px,10.5vw,60px);line-height:.95;letter-spacing:-1.8px; }
  .hero-statement em { margin:1px 0 0 -5px;font-size:1.45em;line-height:.85;letter-spacing:-3px;transform:none; }
  .hero-intro { margin-top:17px;font-size:18px;line-height:1.15; }
  .hero-actions { margin-top:16px;gap:12px;flex-wrap:wrap; }
  .hero-actions .button { height:38px; }
  .hero-art { position:relative;inset:auto;display:block;width:calc(100% + 55px);max-width:690px;height:auto;margin:22px -28px 0 -27px; }
  .concepts { border-top:1.5px solid #fff8df;border-radius:42% 9% 0 0 / 28px 12px 0 0;padding-top:27px;margin-top:-5px; }
  .concepts>.eyebrow,.own-projects>.eyebrow,.concepts>h2,.own-projects>h2 { position:relative;inset:auto; }
  .concepts>.eyebrow,.own-projects>.eyebrow { font-size:11px;letter-spacing:1px;line-height:1.2; }
  .concepts>h2,.own-projects>h2 { margin:7px 0 24px;font-size:clamp(30px,8.4vw,46px);line-height:1;letter-spacing:-1.2px;white-space:normal; }
  .concepts>h2 em,.own-projects>h2 em { font-size:1.27em;letter-spacing:-1.8px; }
  .concept-cards { display:grid;gap:25px;padding-inline:6px; }
  .concept-card { position:relative;inset:auto;width:100%;height:auto; }
  .concept-card .shot-frame { aspect-ratio:1.5;transform:none; }
  .quire .shot-frame { transform:rotate(-2deg); }
  .bloom .shot-frame { transform:rotate(2deg); }
  .concept-card .shot-bar { height:19px; }
  .concept-card .shot-bar::before { width:7px;height:7px;margin-top:-3.5px;left:10px;box-shadow:12px 0 0 #ffb400,24px 0 0 #1b140a; }
  .concept-card .project-label { position:relative;inset:auto;width:max-content;max-width:95%;min-width:180px;height:auto;min-height:52px;margin:-15px auto 0;padding:7px 16px;z-index:2; }
  .project-label strong { font-size:21px; }
  .project-label>span { font-size:14px; }
  .own-projects { margin-top:36px;padding:25px 0 18px;border-top:3px solid #ff6500;border-bottom:3px solid #ff6500; }
  .own-card { position:relative;inset:auto;width:100%;margin-top:22px; }
  .own-card .own-caption { position:relative;inset:auto;display:block;width:auto;margin-top:8px;padding:0 4px;font-size:15px; }
  .own-card .own-caption strong { font-size:21px;margin-bottom:4px; }
  .own-caption br { display:none; }
  .own-caption br::after { content:' '; }
  .shop-badge { right:8px;top:5px;font-size:11px; }
  .career { margin-top:30px; }
  .career>h2 { position:relative;inset:auto;font-size:clamp(35px,9.5vw,50px);line-height:.96;letter-spacing:-1.5px;max-width:470px; }
  .career>h2 br { display:none; }
  .career>h2 br::after { content:' '; }
  .career>h2 em { display:inline;font-size:1.45em;margin:0;letter-spacing:-2px;line-height:1; }
  .career-pages { margin-top:23px;display:grid;gap:18px; }
  .journey,.education { position:relative;inset:auto;width:100%;padding:18px 17px 20px;border:1px solid #fff3d4;border-radius:12px 20px 20px 7px;background:linear-gradient(95deg,#efd2a0,#fff0d4 12%,#f8e7c8 86%,#efd5ac);box-shadow:0 8px 15px #85500040; }
  .career h3,.education h3 { position:relative;inset:auto;width:max-content;margin:-18px 0 20px -8px;padding:5px 22px 5px 14px;font-size:25px;background:linear-gradient(110deg,#bd3300,#ff7d05 10%,#ff5100 30%,#f04800);clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%); }
  .timeline { margin:0;padding-left:27px; }
  .timeline::before { left:6px;bottom:18px; }
  .timeline li { min-height:0;margin-bottom:13px;padding-bottom:10px; }
  .timeline li:nth-child(3) { min-height:0; }
  .timeline li:last-child { margin-bottom:0;padding-bottom:0; }
  .timeline li::before { left:-27px;top:0;width:14px;height:14px; }
  .timeline strong { font-size:14px;line-height:1.1;white-space:normal;letter-spacing:-.3px; }
  .timeline p { font-size:12px;line-height:1.25;white-space:normal;margin-top:4px; }
  .education dl { margin:0; }
  .education dl>div { padding-bottom:9px;margin-bottom:9px; }
  .education dt { font-size:16px; }
  .education dd { font-size:13px;line-height:1.3;margin-top:3px; }
  .collection-banner { margin-top:30px;padding:22px 17px;background:#fff0cf;border-radius:12px;box-shadow:0 8px 15px #85500030; }
  .collection-number { position:relative;inset:auto;display:block;font-size:92px;line-height:.85;letter-spacing:-5px;transform:none;margin-bottom:18px; }
  .collection-copy { position:relative;inset:auto; }
  .collection-copy h2 { font-size:26px;line-height:1.05;letter-spacing:-.8px; }
  .collection-copy p { font-size:14px;line-height:1.25;margin-top:7px; }
  .collection-copy .button { height:36px;margin-top:13px;font-size:14px; }
  .collection-banner::after { display:none; }
  .footer { display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:30px;padding-top:24px;border-top:2px solid #ff6500; }
  .footer h2 { position:relative;inset:auto;font-size:clamp(32px,8vw,44px);line-height:1;white-space:normal;letter-spacing:-1px; }
  .footer h2 em { font-size:1.17em;letter-spacing:-1.5px; }
  .footer>.button { position:relative;inset:auto;width:auto;min-height:38px;padding:0 18px;font-size:16px; }
  .footer>.button::before { display:none; }
  .footer small { position:relative;inset:auto;font-size:12px; }
}
@media(min-width:520px) and (max-width:760px) {
  .canvas { padding-inline:32px; }
  .concept-cards { max-width:510px;margin-inline:auto; }
  .hero-art { margin-left:auto;width:85%; }
}


/* Crisp paper edges; shadows live behind the shapes, never over their content. */
.shot-frame::after { content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 max(1px,calc(1 * var(--u))) #fff7de8c; }
.shot-img { image-rendering:auto;filter:none;opacity:1; }
@media(min-width:761px) {
  .career h3 { top:calc(4 * var(--u));color:#fff9e9; }
  .timeline li { border-bottom-color:#b38d572c; }
  .education dl>div { border-bottom-color:#9a805c70; }
}

/* The journey tab follows the original tapered ribbon at desktop scale. */
@media(min-width:761px) {
  .journey h3 { left:calc(-2 * var(--u));top:calc(1 * var(--u)); }
}

/* Sharper outline on the restored reference project. */
.quire .shot-frame { border-color:#4b3a20;box-shadow:0 calc(1.2 * var(--u)) calc(1 * var(--u)) #39200033,0 calc(4 * var(--u)) calc(3 * var(--u)) #5736002b; }

/* Lesbarkeit: die Bildunterschriften der eigenen Projekte liegen teils auf dem
   orangen Band. Sie bekommen dieselbe cremefarbene Flaeche wie die Konzept-Labels. */
.own-caption { position:relative;border-radius:calc(14 * var(--u));padding:calc(7 * var(--u)) calc(11 * var(--u));background:linear-gradient(105deg,#fff2d4,#ffecc4 60%,#ffeac6);box-shadow:0 calc(4 * var(--u)) calc(7 * var(--u)) #5a340040;border:calc(.6 * var(--u)) solid #fff7e2}
.bodensee .own-caption { padding:calc(7 * var(--u)) calc(11 * var(--u));width:max-content;max-width:100%}
.milo .own-caption,.keeps .own-caption { width:max-content;max-width:calc(150 * var(--u))}
@media (max-width:900px){
  .own-caption { padding:8px 13px;border-radius:13px }
  .milo .own-caption,.keeps .own-caption { max-width:none }
}
:root{--cursor-color:#160f02;--cursor-accent:#ef4004}

/* Radar als Zeiger: der Suchstrahl dreht sich, die Ringe stehen still,
   und kurz nachdem der Strahl daran vorbeikommt, blitzt ein Echo auf.
   Mittelpunkt = Hotspot, denn cursor.js zentriert die 40er-Flaeche. */
.cur-shape svg{width:100%;height:100%;display:block;overflow:visible}
.cur-shape .radar-rings circle{fill:none;stroke:var(--cursor-color,#160f02);stroke-width:1.1;opacity:.4}
.cur-shape .radar-rings path{fill:none;stroke:var(--cursor-color,#160f02);stroke-width:.9;opacity:.24}
.cur-shape .bs1{stop-color:var(--cursor-accent,#ef4004);stop-opacity:.62}
.cur-shape .bs2{stop-color:var(--cursor-accent,#ef4004);stop-opacity:0}
.cur-shape .radar-sweep{transform-origin:20px 20px;animation:radar-spin 2.6s linear infinite}
.cur-shape .beam{fill:url(#radar-beam);stroke:none}
.cur-shape .edge{fill:none;stroke:var(--cursor-accent,#ef4004);stroke-width:1.7;stroke-linecap:round}
.cur-shape .radar-core{fill:var(--cursor-color,#160f02)}
.cur-shape .radar-blip{fill:var(--cursor-accent,#ef4004);transform-origin:27.5px 13.5px;animation:radar-echo 2.6s ease-out infinite;opacity:0}
@keyframes radar-spin{to{transform:rotate(360deg)}}
@keyframes radar-echo{0%,86%{opacity:0;transform:scale(.4)}89%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){
  .cur-shape .radar-sweep{animation:none}
  .cur-shape .radar-blip{animation:none;opacity:.8}
}
@media (hover:none),(pointer:coarse){.cur-shape,.cur-print{display:none!important}}
.cur-print{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cursor-accent);opacity:.35}
.cur-print svg{display:none}

/* Die drei eigenen Projekte scrollen wie eine echte Seite: hohe Aufnahme,
   im Rahmen abgeschnitten, 2,5 Bildschirme hoch, also 60% Weg nach oben. */
.own-card .shot-frame{position:relative}
.own-card .shot-frame>.shot-img{position:absolute;left:0;top:calc(18 * var(--u));width:100%;height:auto;object-fit:fill;will-change:transform;animation:own-scroll 26s cubic-bezier(.66,0,.34,1) infinite}
.milo .shot-frame>.shot-img{animation-delay:3s}
.keeps .shot-frame>.shot-img{animation-delay:6s}
@keyframes own-scroll{0%,13%{transform:translateY(0)}50%,63%{transform:translateY(var(--travel,-60%))}95%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.own-card .shot-frame>.shot-img{animation:none}}
/* Linke Kante: auf schmalen Schirmen steht nur diese eine Karte schief,
   dadurch wirkt die Spalte links ausgefranst. Dort gerade stellen. */
@media (max-width:760px){.quire .shot-frame{transform:none}}
/* Jede Aufnahme endet dort, wo die Seite endet, also hat jede ihren eigenen Weg. */
.bodensee .shot-frame>.shot-img{--travel:-52.34%}
.milo .shot-frame>.shot-img{--travel:-60.01%}
.keeps .shot-frame>.shot-img{--travel:-60.0%}

/* Konzeptstudien bewegen sich erst, wenn man sie anfasst. Die eigenen
   Projekte laufen von selbst - so bleibt die Seite ruhig und der Unterschied
   zwischen "live" und "Studie" sichtbar. */
.concept-card .shot-frame{position:relative}
.concept-card .shot-frame>.shot-img{position:absolute;left:0;top:calc(18 * var(--u));width:100%;height:auto;object-fit:fill;will-change:transform;transform:translateY(0);transition:transform 2.8s cubic-bezier(.33,0,.25,1)}
.concept-card:hover .shot-frame>.shot-img,.concept-card:focus-visible .shot-frame>.shot-img{transform:translateY(var(--travel,-55%))}
@media (prefers-reduced-motion:reduce){
  .concept-card .shot-frame>.shot-img{transition:none}
  .concept-card:hover .shot-frame>.shot-img,.concept-card:focus-visible .shot-frame>.shot-img{transform:translateY(0)}
}
@media (hover:none){.concept-card .shot-frame>.shot-img{transition:none}}
.quire .shot-frame>.shot-img{--travel:-58.33%}
.mondlicht .shot-frame>.shot-img{--travel:-35.77%}
.bloom .shot-frame>.shot-img{--travel:-31.35%}

/* Sprachumschalter: zwei Kuerzel, das aktive dunkel. */
.lang-toggle{display:inline-flex;align-items:center;gap:calc(2 * var(--u));padding:calc(3 * var(--u)) calc(9 * var(--u));border:calc(1 * var(--u)) solid #2b1903;border-radius:999px;background:#ffefc254;font:inherit;font-weight:700;font-size:calc(13 * var(--u));line-height:1;cursor:pointer;white-space:nowrap}
.lang-toggle i{font-style:normal;opacity:.4}
.lang-toggle span{opacity:.42;transition:opacity .2s}
.lang-toggle span.is-on{opacity:1;text-decoration:underline;text-underline-offset:calc(2 * var(--u))}
.lang-toggle:hover{background:#ffe7a8}
.ws-header .lang-toggle{padding:7px 13px;font-size:13px;border-radius:999px}
.ws-header .lang-toggle span.is-on{text-underline-offset:3px}
@media (max-width:760px){.lang-toggle{padding:4px 10px;font-size:12px}}

/* Menue: sichtbares Hover- und Aktiv-Feedback statt reiner Textlinks. */
.header nav>a:not(.button) { position:relative;padding-bottom:calc(4 * var(--u)) }
.header nav>a:not(.button)::after { content:'';position:absolute;left:0;right:100%;bottom:0;height:calc(2 * var(--u));border-radius:999px;background:var(--orange);transition:right .22s ease }
.header nav>a[aria-current="page"]::after { right:0;background:var(--ink) }
@media(hover:hover) { .header nav>a:not(.button):hover::after { right:0 } }

/* Die Kopfzeile ist Bedienelement, kein Plakat. Sie waechst mit der Buehne,
   hoert aber bei ~18px auf, damit das Menue auf grossen Monitoren nicht
   ueberdimensioniert wirkt. Das Menue haengt dafuer rechts statt gestreckt. */
.header { --u:min(calc(100cqw / 1024),1.15px) }
.header nav { left:auto;justify-content:flex-end }

/* Die Rahmen auf der Startseite wie auf der Sammlungsseite: dunkle, geschlossene
   Kante statt hellem Innenring, damit sie wie echte Monitore wirken. */
.concept-card .shot-frame,.own-card .shot-frame { border-color:#1b1206;border-width:max(1.5px,calc(2 * var(--u))) }
.concept-card .shot-frame::after,.own-card .shot-frame::after { box-shadow:none }