:root { color-scheme: dark; --paper:#f5f5f2; --ink:#111; --muted:rgba(17,17,17,.43); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { width:100%; overflow-x:hidden; }
body { margin:0; background:#000; color:#fff; font-family:"Inter",Arial,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.floating-nav { position:fixed; z-index:12; top:20px; left:50%; display:flex; align-items:center; gap:4px; padding:5px; border:1px solid rgba(255,255,255,.32); border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.08),0 10px 35px rgba(0,0,0,.14); -webkit-backdrop-filter:blur(24px) saturate(190%) contrast(88%); backdrop-filter:blur(24px) saturate(190%) contrast(88%); transform:translateX(-50%); }
.floating-nav a { display:flex; align-items:center; justify-content:center; height:34px; padding:0 13px; border-radius:999px; color:#111; font-size:13px; text-decoration:none; transition:background .2s,color .25s,transform .2s; white-space:nowrap; }
.floating-nav a:hover,.floating-nav a:focus-visible { background:rgba(127,127,127,.18); }.floating-nav .floating-name{font-weight:500}.floating-nav .floating-icon{width:34px;padding:0}.floating-icon img{width:16px;height:16px;filter:brightness(0)}.floating-nav.on-dark a{color:#fff}.floating-nav.on-dark .floating-icon img{filter:none}.email-glyph{position:relative;width:16px;height:12px;border:1.5px solid currentColor;border-radius:3px}.email-glyph:before,.email-glyph:after{content:"";position:absolute;top:2px;width:9px;height:1.5px;background:currentColor}.email-glyph:before{left:1px;transform:rotate(34deg)}.email-glyph:after{right:1px;transform:rotate(-34deg)}
.portfolio-shell { --shell-scale:1; --shell-radius:0px; --shell-lift:0px; position:relative; z-index:2; width:102%; margin:0 0 0 -1%; padding:0 0 160px; color:var(--ink); background:var(--paper); border-radius:var(--shell-radius) var(--shell-radius) 32px 32px; box-shadow:0 calc(var(--shell-radius) * .45) calc(var(--shell-radius) * 1.5) rgba(0,0,0,.16); transform:translate3d(0,var(--shell-lift),0) scale(var(--shell-scale)); transform-origin:bottom center; will-change:transform,border-radius,box-shadow; }
.intro { position:relative; height:372px; display:grid; place-items:center; text-align:center; }
.intro-copy { position:absolute; left:50%; width:max-content; transform:translateX(-50%); }
.intro p { margin:0; line-height:1.42; }
.name { font-weight:500; }
.role { color:var(--muted); }
.info-cluster { position:absolute; left:calc(50% + 142px); display:inline-grid; place-items:center; }
.info-button { width:24px; height:24px; margin:0; border:0; border-radius:50%; background:rgba(17,17,17,.09); color:#111; font:500 12px/24px Inter,sans-serif; cursor:pointer; transition:transform .25s,background .25s; }
.info-button:hover { transform:rotate(8deg) scale(1.08); background:rgba(17,17,17,.16); }
.info-hover-card { position:absolute; left:50%; bottom:calc(100% + 12px); display:flex; flex-direction:column; gap:7px; width:245px; padding:17px; border:1px solid rgba(0,0,0,.08); border-radius:16px; background:rgba(255,255,255,.96); box-shadow:0 16px 45px rgba(0,0,0,.14); color:#111; line-height:1.35; text-align:left; opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1); }
.info-hover-card strong{margin-bottom:4px;font-weight:500}.info-hover-card>span{color:rgba(17,17,17,.52);font-size:12px}
.info-hover-card a { display:flex; align-items:center; gap:7px; width:max-content; color:rgba(17,17,17,.55); font-size:12px; text-decoration:none; pointer-events:auto; }.info-hover-card a:hover{text-decoration:underline}.info-hover-card img{width:15px;height:15px;filter:brightness(0)}
.info-cluster:hover .info-hover-card,.info-cluster:focus-within .info-hover-card { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.projects { width:480px; max-width:calc(100% - 40px); margin:0 auto; padding-top:210px; display:flex; flex-direction:column; gap:128px; }
.project-card { display:block; color:var(--ink); text-decoration:none; }
.project-visual { position:relative; width:100%; aspect-ratio:480/646; overflow:hidden; border-radius:36px; transform:translateZ(0); }
.project-visual img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .project-visual img { transform:scale(1.025); }
.project-meta { display:grid; grid-template-columns:1fr auto; gap:20px; padding-top:13px; line-height:1.45; }
.project-meta h2,.project-meta p { margin:0; font-size:14px; font-weight:400; }
.project-meta h2 { font-weight:500; }
.project-meta p,.project-meta>span { color:var(--muted); }
.edeka-visual { display:flex; align-items:center; background:#0b56a7; }
.edeka-visual img { width:100%; height:100%; object-fit:cover; filter:none; }
.discount-visual { display:flex; align-items:center; justify-content:center; background:transparent; color:#111; }
.discount-visual p { margin:0; font:700 clamp(120px,15vw,190px)/.8 Antonio,sans-serif; letter-spacing:-.07em; transform:rotate(-7deg); }
.discount-visual span { position:absolute; right:28px; bottom:30px; font:700 22px/.9 Antonio,sans-serif; letter-spacing:-.03em; text-align:right; }
.family-visual { display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,#ff3932 0%,#fd9b37 48%,#f5ca4b 100%); }
.family-orbit { width:140px; height:140px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; }
.family-orbit:before,.family-orbit:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.28); border-radius:50%; }
.family-orbit:before { width:235px; height:235px; }.family-orbit:after { width:350px; height:350px; }
.family-orbit img { width:52px; height:52px; filter:brightness(0) invert(1); }
.family-visual p { z-index:1; margin:34px 0 0; color:#fff; font:700 53px/.84 Antonio,sans-serif; letter-spacing:-.03em; text-align:center; }
.restaurant-visual { background:#ebe7de; }
.restaurant-visual img { object-position:center; }
.small-projects{width:min(716px,calc(100% - 40px));margin:220px auto 0}
.small-projects__intro{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px}
.small-projects__intro h2,.small-projects__intro p{margin:0}
.small-projects__intro h2{font-size:14px;font-weight:500;line-height:1.45}
.small-projects__intro p{max-width:300px;color:var(--muted);font-size:14px;line-height:1.45;text-align:right}
.project-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;grid-auto-rows:150px;gap:14px}
.project-mosaic__tile{position:relative;overflow:hidden;border:1px solid rgba(17,17,17,.035);border-radius:18px;background:#fafaf8}
.project-mosaic__tile:nth-child(2),.project-mosaic__tile:nth-child(6),.project-mosaic__tile:nth-child(9){background:#efefeb}
.project-mosaic__tile:nth-child(3),.project-mosaic__tile:nth-child(7){background:#f1eee8}
.project-mosaic__tile:nth-child(4),.project-mosaic__tile:nth-child(8){background:#e9ede9}
.project-mosaic__tile--feature{grid-column:span 2;grid-row:span 2}
.project-mosaic__tile--wide{grid-column:span 2}
.small-projects.reveal{opacity:0;transform:translate3d(0,24px,0);filter:blur(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.2,1),filter .9s ease}
.small-projects.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}
.explorations { position:relative; z-index:3; width:min(100%,1440px); min-height:1370px; margin:-1px auto 0; padding:148px 28px 180px; background:#000; text-align:center; }
.photo-grid { width:60%; max-width:840px; margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; text-align:left; }
.photo-column { display:flex; flex-direction:column; gap:18px; min-width:0; }
.photo-grid figure { width:100%; margin:0; overflow:hidden; border-radius:18px; background:#111; }
.photo-grid img { display:block; width:100%; height:auto; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease; }.photo-grid figure:hover img{transform:scale(1.025);filter:brightness(1.05)}
.gallery-more { display:flex; justify-content:center; padding-top:58px; }.gallery-more button{padding:0;border:0;background:transparent;color:#fff;font:500 14px Inter;cursor:pointer;text-decoration:underline;text-underline-offset:5px;transition:opacity .2s}.gallery-more button:hover,.gallery-more button:focus-visible{opacity:.58}.gallery-more button[hidden]{display:none}
footer { min-height:510px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; line-height:1.5; text-align:center; }
footer p { margin:0; } footer p:last-child { color:rgba(255,255,255,.42); } footer a { text-underline-offset:3px; }
.load-reveal,.reveal .project-visual,.reveal .project-meta,.photo-grid .reveal { opacity:0; transform:translate3d(0,24px,0); filter:blur(8px); }
.page-ready .load-reveal { animation:element-in .9s cubic-bezier(.22,.8,.2,1) forwards; }
.intro-copy.load-reveal{transform:translate(-50%,24px)}.page-ready .intro-copy.load-reveal{animation:intro-copy-in .9s cubic-bezier(.22,.8,.2,1) forwards}@keyframes intro-copy-in{to{opacity:1;filter:blur(0);transform:translate(-50%,0)}}
.page-ready .intro .load-reveal:nth-child(2) { animation-delay:.1s; }
.reveal .project-visual,.reveal .project-meta,.photo-grid .reveal { transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.2,1),filter .9s ease; }
.reveal .project-meta { transition-delay:.11s; }
.reveal.is-visible .project-visual,.reveal.is-visible .project-meta,.photo-grid .reveal.is-visible { opacity:1; transform:none; filter:blur(0); }
@keyframes element-in { to { opacity:1; transform:none; filter:blur(0); } }
@media (min-width:810px) and (max-width:1199.98px){
  .portfolio-shell { padding-bottom:140px; }
  .intro { height:360px; }
  .explorations { padding-inline:48px; }
}
@media (max-width:809.98px){
  .portfolio-shell { padding-bottom:104px; border-radius:0 0 24px 24px; }
  .intro { height:320px; }.projects{width:480px;max-width:calc(100% - 40px);gap:96px}.project-visual{border-radius:36px}
  .small-projects{margin-top:160px}
  .explorations { width:100%; min-height:auto; padding:104px 12px 140px; }.photo-grid{width:76%;grid-template-columns:repeat(2,1fr);gap:10px}.photo-column{gap:10px}
  footer { min-height:380px; padding:30px; }
}
@media (max-width:479.98px){
  .intro { height:300px; }
  .projects { max-width:calc(100% - 32px); gap:88px; }
  .project-meta { gap:10px; }
  .discount-visual span { right:20px; bottom:22px; font-size:18px; }
  .family-visual p { font-size:clamp(38px,13vw,53px); }
  .floating-nav{top:12px}.floating-nav a{padding-inline:10px}.photo-grid { width:92%; grid-template-columns:repeat(2,1fr); gap:9px; }
  .photo-column{gap:9px}.photo-grid figure { border-radius:12px; }.project-visual { border-radius:24px; }
  .small-projects{width:calc(100% - 32px);margin-top:132px}.small-projects__intro{display:block;margin-bottom:24px}.small-projects__intro p{margin-top:5px;text-align:left}.project-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(124px,40vw,170px);gap:10px}.project-mosaic__tile{border-radius:14px}.project-mosaic__tile--feature{grid-row:span 1}.project-mosaic__tile:first-child,.project-mosaic__tile:nth-child(4),.project-mosaic__tile:nth-child(9){grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portfolio-shell{transform:none;border-radius:0 0 32px 32px;box-shadow:none}.load-reveal,.reveal .project-visual,.reveal .project-meta,.photo-grid .reveal,.small-projects.reveal{opacity:1;transform:none;filter:none;animation:none;transition:none}.project-visual img{transition:none}}

/* New batches are visible independently of intersection observers. */
.photo-grid .photo-enter{animation:photo-loaded .75s cubic-bezier(.22,.8,.2,1) both}
@keyframes photo-loaded{from{opacity:.25;filter:blur(8px);transform:translateY(16px)}to{opacity:1;filter:blur(0);transform:none}}
@media(prefers-reduced-motion:reduce){.photo-grid .photo-enter{animation:none}}

/* Adding images must not anchor the viewport to the moving See more button. */
.explorations{overflow-anchor:none}

.menu-visual{display:grid;place-items:center;background:#dce9be;color:#264b34}
.menu-wordmark{text-align:center;transform:rotate(-5deg);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.menu-wordmark span{display:block;font-size:clamp(22px,4vw,32px);font-weight:600;letter-spacing:-.04em;margin-bottom:12px}
.menu-wordmark p{margin:0;font:700 clamp(88px,20vw,150px)/.95 Antonio,sans-serif;letter-spacing:-.03em}
.project-card:hover .menu-wordmark{transform:rotate(-3deg) scale(1.025)}
@media(prefers-reduced-motion:reduce){.menu-wordmark{transition:none}.project-card:hover .menu-wordmark{transform:rotate(-5deg)}}