/* Light presentation: paper surfaces, ink typography, restrained CV blue. */
:root{color-scheme:light;--surface:#f8f9fc;--paper:#202431;--muted:#596174;--cv-detail:#5170ff;background:var(--surface);color:var(--paper)}
body{background:var(--surface)}
.about-section{background:#f8f9fc;border-color:#20243118}
.about-eyebrow{color:#5170ff}.about-detail p{color:#596174}
.skills-list li{color:#414a60;border-color:#20243126}
.work-section{background:#fff;border-color:#20243118}
.brands-banner{background:#e9ecfa;border-color:#5170ff18}
.brands-banner h2{color:#58627d;border-color:#5170ff80}
.brands-list img{filter:brightness(0);opacity:.65}
.brands-list .logo-motorrad{filter:grayscale(1);opacity:.7}
.brand-label{color:#737b91}
.portfolio-nav{background:#f4f6fbed;color:#40495f;box-shadow:0 -1px 14px #23315805}
.portfolio-nav::before{background:#46557926}
.portfolio-nav a,.nav-handle{color:#58627a}
.portfolio-nav a:hover,.portfolio-nav a[aria-current="location"]{color:#263350}
.portfolio-nav a::after{filter:brightness(.45);opacity:.4}
.portfolio-nav .nav-contacts a:hover{color:#5170ff}
.language-switch button[aria-pressed="true"],.language-switch button:hover{border-color:#5170ff80}
.hero{color:#f4f6fc}
.hero:after{background:linear-gradient(90deg,rgba(10,12,23,.55),rgba(10,12,23,.03) 78%),linear-gradient(0deg,rgba(10,12,23,.58),transparent 48%,rgba(12,14,25,.15))}
.hero .eyebrow{color:#bac6ff}.hero .showreel-button{color:#f4f6fc;border-color:#bec7e14d}
.hero .showreel-button:hover{background:#5170ff25;border-color:#a5b1f2}
.hero .play-icon{color:#b6c3ff}.motion-control,.motion-control:hover{color:#e0e3f2}
.work-card{color:#f4f6fc}.work-card-action{color:#d5dcf6}
button:focus-visible,a:focus-visible{outline-color:#5170ff}
dialog{background:#f8f9fc;color:#202431;border-color:#46557933}
.dialog-header h2 span{color:#606d9c}.dialog-header button{color:#414a60}
.gallery-controls button{color:#414a60;border-color:#46557933}
#gallery-counter{color:#596174}#gallery-error{background:#f8f9fc;color:#414a60}

.hero .eyebrow{font-style:normal}
.portfolio-nav .nav-links a,.portfolio-nav .nav-links a:hover,.portfolio-nav .nav-links a[aria-current="location"]{font-weight:700;color:#5170ff;border-bottom:0;text-decoration:none}
.portfolio-nav .nav-links a::after{display:none}

/* Match the popup frames to the pale blue brands panel. */
#reel-dialog,#gallery-dialog,.dialog-header,.gallery-controls{background:#e9ecfa}
#reel-dialog,#gallery-dialog{border-color:#5170ff26}
.gallery-controls button{display:grid;place-items:center;color:#5170ff;border:0;background:transparent;border-radius:0;transition:background .2s,color .2s}
.gallery-controls button:hover{background:#5170ff0d;color:#3655df}
.gallery-controls button svg{width:30px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Both viewers share the same frame dimensions. */
#reel-dialog{width:min(1500px,calc(100% - 48px));max-height:calc(100svh - 32px);border-radius:0}
#reel-dialog .player{height:min(70svh,850px);max-height:none;aspect-ratio:auto}
#reel-dialog::after{content:"";display:block;height:68px;background:#e9ecfa}
#reel-dialog .player>video{height:100%;max-height:none;object-fit:contain}
@media(max-width:650px){#reel-dialog{width:calc(100% - 16px)}#reel-dialog .player{height:60svh}}

/* A quiet invitation to continue below the landing film. */
.scroll-cue{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);display:grid;place-items:center;width:44px;height:44px;color:#e0e6ffb3;z-index:2}
.scroll-cue svg{width:18px;height:25px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;animation:scroll-hint 2.8s ease-in-out infinite}
.scroll-cue:hover{color:#fff}
@keyframes scroll-hint{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}

.scroll-cue svg{width:26px;height:34px;stroke-width:2.2}
.hero .eyebrow{font-size:1rem}
#display-name{font-weight:400}
.work-section .section-label{margin:0 0 32px;color:#5170ff;font-size:.75rem;font-weight:600;letter-spacing:.16em;line-height:normal;text-transform:uppercase}
@media(max-width:650px){.hero .eyebrow{font-size:.875rem}}

/* One quiet, always-visible navigation strip. */
.portfolio-nav,.portfolio-nav:hover,.portfolio-nav:focus-within,.portfolio-nav.is-open{height:32px;transform:none;transition:none}
.portfolio-nav .nav-links,.portfolio-nav:hover .nav-links,.portfolio-nav:focus-within .nav-links,.portfolio-nav.is-open .nav-links{top:0;bottom:auto;left:26%;right:26%;height:32px;padding:0;gap:12px;opacity:1;visibility:visible;transform:none;pointer-events:auto}
.portfolio-nav .nav-links a{min-height:0;height:32px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:.75rem}
body:has(.portfolio-nav) main{transform:none;transition:none}
.hero .eyebrow{max-width:100%;align-items:center}
.hero .eyebrow::after{content:"";height:1px;background:var(--accent);opacity:.8;flex:1;min-width:12px}
.hero .eyebrow>span:first-child{margin-top:0}
@media(max-width:650px){
 .portfolio-nav .nav-links{left:80px;right:130px;gap:0}
 .portfolio-nav .nav-links a{font-size:.625rem;padding:0 3px}
 .language-switch{left:4px;gap:0}
 .nav-contacts{right:4px;gap:0}
 .hero .eyebrow{font-size:.75rem;gap:8px}
}

/* Consistent blue rules across the three sections. */
.hero .eyebrow{width:100%}
.about-eyebrow,.work-section .section-label{display:flex;align-items:center;gap:12px;width:100%}
.about-eyebrow::before,.work-section .section-label::before{content:"";width:26px;flex-shrink:0;height:1px;background:#5170ff;opacity:.8}
.about-eyebrow::after,.work-section .section-label::after{content:"";flex:1;height:1px;background:#5170ff;opacity:.8}
.skills-list li{border-color:#5170ff}

/* Centered navigation, borrowing the showreel button's fine border and glass. */
.top-navigation{position:fixed;z-index:20;top:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px;border:1px solid #bec7e14d;background:rgba(16,18,24,.72);backdrop-filter:blur(8px);border-radius:0}
.top-navigation a{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 28px;color:#f4f6fc;font-size:.875rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.top-navigation a:hover,.top-navigation a[aria-current="location"]{background:#5170ff25;color:#bac6ff}
.top-navigation a[aria-current="location"]::before{content:"";position:absolute;top:-6px;left:30%;right:30%;height:1px;background:#839aff}
@media(max-width:650px){.top-navigation{top:16px;gap:2px}.top-navigation a{padding:8px 18px;font-size:.75rem}.motion-control{top:80px}}

/* Keep the framed navigation centered within a slightly taller utility bar. */
:root{--bottom-bar-height:72px}
body{padding-bottom:72px}
.portfolio-nav,.portfolio-nav:hover,.portfolio-nav:focus-within,.portfolio-nav.is-open{height:72px}
.top-navigation{top:auto;bottom:8px;z-index:21}
.language-switch,.nav-contacts{top:20px}
.hero{padding-bottom:72px}
@media(max-width:650px){
 :root{--bottom-bar-height:104px}
 body{padding-bottom:104px}
 .portfolio-nav,.portfolio-nav:hover,.portfolio-nav:focus-within,.portfolio-nav.is-open{height:104px}
 .top-navigation{top:auto;bottom:42px}
 .language-switch,.nav-contacts{top:auto;bottom:4px}
 .hero{padding-bottom:104px}
}
.scroll-cue{bottom:92px}
@media(max-width:650px){.scroll-cue{bottom:124px}}

/* Slim utility strip; the scroll cue leads into the portfolio. */
:root{--bottom-bar-height:32px}
body{padding-bottom:32px}
.portfolio-nav,.portfolio-nav:hover,.portfolio-nav:focus-within,.portfolio-nav.is-open{height:32px}
.language-switch,.nav-contacts{top:0;bottom:auto}
.hero{padding-bottom:32px}
.scroll-cue{bottom:52px;color:#f4f6fc}
.scroll-cue svg{width:32px;height:40px;stroke-width:2.6;filter:drop-shadow(0 2px 5px #0008)}

/* Avoid full-viewport blur compositing during embedded video playback. */
dialog::backdrop{background:#05070de8;backdrop-filter:none;-webkit-backdrop-filter:none}
body:has(dialog[open]) .scroll-cue svg{animation-play-state:paused}
body:has(dialog[open]) .portfolio-nav,body:has(dialog[open]) .showreel-button{backdrop-filter:none;-webkit-backdrop-filter:none}