/* A restrained interpretation of the CV: periwinkle, strong type, italic details. */
:root{--accent:#5170ff;--paper:#f0f1f7;--muted:#b2b6ca;--surface:#12141d;--cv-detail:#a5b1f2;--content-gutter:clamp(24px,8vw,220px)}
body{background:var(--surface)}
.hero:after{background:linear-gradient(90deg,rgba(10,12,23,.57),rgba(10,12,23,.03) 78%),linear-gradient(0deg,#12141d,transparent 48%,rgba(12,14,25,.15))}
h1{font-weight:700;letter-spacing:-.052em;line-height:1.02}
#display-name{font-weight:600;color:#e0e3f2;letter-spacing:-.04em}
.eyebrow{color:var(--cv-detail);font-style:italic;letter-spacing:.075em;font-weight:600}
.eyebrow>span:first-child{height:1px;width:26px;opacity:.8}
.showreel-button{font-size:.875rem;font-weight:600;background:#171b2a38;border-color:#a5b1f238;padding:17px 25px}
.showreel-button:hover{background:#5170ff12;border-color:#a5b1f28a}
.play-icon,.work-card-action span{color:var(--cv-detail)}
.motion-control{font-size:.75rem;color:#c0c4d5}
.brands-banner{background:#1b1e2c;border-color:#b2b9e011;padding-block:36px;column-gap:40px}
.brands-banner h2{border-color:#879aff80;color:#b7bdd5;font-size:.7rem;letter-spacing:.09em}
.brands-list img{opacity:.76}
.brand-label{color:#9298af;font-weight:700;font-size:.7rem}
.work-section{padding-block:86px 96px;border-color:#b2b9e019}
.work-section h2,.upcoming-work h2{font-weight:700;letter-spacing:-.035em;font-size:clamp(2rem,3.2vw,3.5rem)}
.work-section h2{margin-bottom:32px}
.work-grid{gap:32px}
.work-card{aspect-ratio:16/11}
.work-card-caption{font-weight:700;font-size:clamp(1.75rem,2.6vw,3rem);letter-spacing:-.035em}
.work-card-action{font-style:italic;font-weight:500;letter-spacing:0;color:#c5cbee}
.work-card::after{background:linear-gradient(transparent,rgba(10,12,23,.88))}
.upcoming-work{background:linear-gradient(90deg,#1d213380 0%,#171a2780 35%,#12141d 80%);padding-block:64px;border-color:#b2b9e019}
.upcoming-work p{color:#a9afc4;line-height:1.7}
.contact-footer{background:#1b1e2b;color:#afb4cb;font-size:.8125rem;padding-block:32px;gap:16px 28px}
.contact-footer a:hover{text-decoration-color:var(--cv-detail)}
.portfolio-nav{background:#141722eb;font-size:.8125rem}
.portfolio-nav::before{background:#b2b9e02b}
.portfolio-nav a{color:#b4b9cc}
.portfolio-nav a[aria-current="location"]{color:var(--paper)}
.portfolio-nav a::after{opacity:.3}
.portfolio-nav a[aria-current="location"]::after{opacity:.75}
dialog{background:#191c29;border-radius:0;border-color:#a5b1f22b}
.dialog-header h2{font-weight:600}.dialog-header h2 span{color:var(--cv-detail);font-style:italic;font-weight:400}
.dialog-header button{border-radius:0;background:transparent;color:#bec4d9}
.gallery-controls button{border-color:#a5b1f233}
@media(min-width:1101px) and (max-width:1550px){.brands-list{grid-template-columns:repeat(7,minmax(0,1fr));gap:18px}.brands-banner{grid-template-columns:120px minmax(0,1fr);column-gap:24px}}
@media(max-width:800px){.work-section{padding-block:48px 56px}.work-grid{gap:24px}.work-card{aspect-ratio:16/10}.upcoming-work{padding-block:48px}}
@media(max-width:650px){.brands-banner{column-gap:20px;padding-block:28px}.brands-banner h2{font-size:.65rem}.contact-footer{padding-block:28px}.portfolio-nav{font-size:.75rem}}

/* Editorial biography, with the work remaining the visual focus. */
.about-section{padding:88px var(--content-gutter) 96px;scroll-margin-top:28px;border-bottom:1px solid #b2b9e019}
.about-eyebrow{margin:0 0 32px;color:var(--cv-detail);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.about-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(48px,8vw,150px);align-items:start}
.about-grid h2{font-size:clamp(3rem,5.8vw,7.5rem);font-weight:500;line-height:1.05;letter-spacing:-.055em;margin:0;max-width:12ch;text-wrap:balance}
.about-detail p{font-size:clamp(1rem,1.1vw,1.2rem);color:var(--muted);line-height:1.75;margin:0 0 24px}
.skills-list{list-style:none;padding:0;margin:42px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.skills-list li{border-top:1px solid #b2b9e02b;padding:17px 0;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;line-height:1.5;color:#c1c6d9}
.player>video{display:block;width:100%;height:100%;max-height:calc(100svh - 155px);object-fit:contain;background:#050609}
@media(max-width:800px){.about-section{padding-block:56px}.about-grid{grid-template-columns:1fr;gap:36px}.about-grid h2{max-width:17ch;font-size:clamp(2.8rem,8vw,4.5rem)}.about-eyebrow{margin-bottom:24px}}
@media(max-width:400px){.skills-list{column-gap:18px}.skills-list li{font-size:.65rem}}

/* A single signature flourish and a discoverable retracting navigation. */
.portfolio-nav{padding-top:42px;transform:translateY(calc(100% - 32px));transition:transform .3s ease}
.portfolio-nav:hover,.portfolio-nav:focus-within,.portfolio-nav.is-open{transform:translateY(0)}
.nav-handle{position:absolute;top:0;left:50%;transform:translateX(-50%);height:32px;display:flex;align-items:center;gap:10px;padding:0 24px;border:0;background:transparent;color:#b4b9cc;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}
.nav-handle span{font-size:1rem}
.portfolio-nav a::after{left:27%;right:27%;height:7px;bottom:1px;transform:rotate(-1deg);opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C53 5 121 6 198 2 C146 5 77 6 2 8Z' fill='%23bec7e1'/%3E%3C/svg%3E")}
.portfolio-nav a:nth-child(even)::after{transform:rotate(-1deg)}
.contact-footer{justify-content:center;gap:clamp(28px,5vw,80px);display:flex;flex-wrap:wrap}
.contact-footer a{display:grid;place-items:center;width:48px;height:48px;padding:10px;transition:color .2s,transform .2s}
.contact-footer a:hover{color:var(--cv-detail);transform:translateY(-2px)}
.contact-footer svg{width:25px;height:25px}
@media(hover:none){.portfolio-nav:hover{transform:translateY(calc(100% - 32px))}.portfolio-nav:focus-within,.portfolio-nav.is-open{transform:translateY(0)}}
body{padding-bottom:32px}.hero{padding-bottom:32px}
.portfolio-nav{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;padding-inline:clamp(24px,4vw,100px)}
.nav-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.language-switch,.nav-contacts{display:flex;align-items:center;gap:12px}
.language-switch button{border:0;border-bottom:1px solid transparent;background:none;padding:10px 7px;opacity:.5;min-height:44px}
.language-switch button[aria-pressed="true"],.language-switch button:hover{opacity:1;border-color:#a5b1f280}
.language-switch svg{display:block;width:27px;height:18px}
.portfolio-nav .nav-contacts a{width:44px;height:44px;min-height:44px;padding:10px;display:grid;place-items:center}
.nav-contacts svg{width:23px;height:23px}.portfolio-nav .nav-contacts a::after{display:none}
@media(max-width:800px){.portfolio-nav{grid-template-columns:auto 1fr;gap:10px 20px;padding-inline:24px}.nav-links{grid-column:1/-1;grid-row:3}.nav-contacts{justify-content:flex-end;gap:6px}.language-switch{gap:6px}}
@media(max-width:380px){.portfolio-nav{padding-inline:12px;column-gap:8px}.nav-contacts{gap:0}}
html[lang="de"] .about-grid h2{hyphens:auto;overflow-wrap:break-word}

/* Utilities stay in the visible strip; section links unfold above it. */
.portfolio-nav{display:block;padding:0;height:112px;transform:none;background:transparent;backdrop-filter:none;pointer-events:none;transition:none}
.portfolio-nav::before{top:auto;bottom:55px;left:clamp(20px,2.4vw,64px);right:clamp(20px,2.4vw,64px);z-index:2}
.portfolio-nav::after{content:"";position:absolute;inset:auto 0 0;height:56px;background:#141722f5;backdrop-filter:blur(14px);z-index:-1;pointer-events:auto}
.portfolio-nav:hover,.portfolio-nav:focus-within,.portfolio-nav.is-open{transform:none}
.nav-handle{top:auto;bottom:0;height:56px;pointer-events:auto}
.language-switch{position:absolute;left:clamp(16px,4vw,100px);bottom:6px;pointer-events:auto}
.nav-contacts{position:absolute;right:clamp(16px,4vw,100px);bottom:6px;pointer-events:auto}
.nav-links{position:absolute;bottom:56px;left:0;right:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:8px var(--content-gutter);background:#141722f5;backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
.portfolio-nav:hover .nav-links,.portfolio-nav:focus-within .nav-links,.portfolio-nav.is-open .nav-links{opacity:1;visibility:visible;transform:none;pointer-events:auto}
body{padding-bottom:56px}.hero{padding-bottom:56px}
@media(max-width:650px){.nav-handle{font-size:.55rem;padding-inline:8px;gap:4px}.language-switch{left:10px;gap:2px}.language-switch button{padding-inline:5px}.language-switch svg{width:23px;height:16px}.nav-contacts{right:10px;gap:0}.portfolio-nav .nav-contacts a{width:34px;padding:7px}.nav-contacts svg{width:20px;height:20px}.nav-links{padding-inline:24px;gap:12px}}
@media(hover:none){.portfolio-nav:hover .nav-links{opacity:0;visibility:hidden;pointer-events:none}.portfolio-nav:focus-within .nav-links,.portfolio-nav.is-open .nav-links{opacity:1;visibility:visible;pointer-events:auto}}

/* Restore the slim strip and sliding reveal, with utilities always visible. */
.portfolio-nav{height:96px;transform:translateY(64px);background:#141722f5;backdrop-filter:blur(14px);pointer-events:auto;transition:transform .3s ease}
.portfolio-nav:hover,.portfolio-nav:focus-within,.portfolio-nav.is-open{transform:translateY(0)}
.portfolio-nav::before{top:0;bottom:auto}
.portfolio-nav::after{display:none}
.nav-handle{top:0;bottom:auto;height:32px}
.language-switch,.nav-contacts{top:0;bottom:auto;height:32px}
.language-switch button{min-height:30px;height:30px;padding:5px 7px}
.language-switch svg{width:24px;height:16px}
.portfolio-nav .nav-contacts a{height:30px;min-height:30px;width:36px;padding:5px}
.nav-contacts svg{width:20px;height:20px}
.nav-links{top:32px;bottom:auto;height:64px;transform:none;background:transparent;backdrop-filter:none;padding-block:8px;transition:opacity .2s,visibility .2s}
body{padding-bottom:32px}.hero{padding-bottom:32px}
@media(max-width:650px){.language-switch button{padding-inline:5px}.language-switch svg{width:22px;height:15px}.portfolio-nav .nav-contacts a{width:30px}.nav-contacts svg{width:18px;height:18px}}
@media(hover:none){.portfolio-nav:hover{transform:translateY(64px)}.portfolio-nav:focus-within,.portfolio-nav.is-open{transform:translateY(0)}}

/* Move the page with the navigation's 64px reveal instead of covering it. */
main{transform:translateY(0);transition:transform .3s ease}