/* V16: My Story uses the same section heading system as Experience and Licenses. */
.story-section{max-width:1150px!important;padding-top:35px!important}
.story-section>.section-heading{display:flex!important;align-items:center!important;margin:0 0 17px!important}
.story-section>.section-heading h2{font-size:clamp(24px,3vw,35px)!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.15!important}
.story-inline-heading,.story-monogram,.story-rule{display:none!important}
.story-panel{grid-template-rows:auto!important;gap:18px 24px!important;align-items:center!important;padding:22px 25px!important}
.story-panel .story-quote{grid-column:1!important;grid-row:1!important}
.story-panel .story-prose{grid-column:2!important;grid-row:1!important}
.story-panel .story-quote blockquote{font-size:clamp(17px,1.6vw,21px)!important;line-height:1.5!important}
.story-panel .story-summary{font-size:12.5px!important;line-height:1.6!important}
/* Brand and CV */
.header-logo{width:60px!important;height:43px!important;margin-right:0!important;object-fit:contain!important}
.identity:has(.header-logo:not([hidden])) #headerName{display:none!important}
.identity{min-width:60px}
.header-cv{font-weight:720!important;min-width:120px!important}
/* Hero spans under the top navigation on first page, then header becomes glass on scrolling. */
.header{background:linear-gradient(110deg,rgba(17,25,37,.15),rgba(17,25,37,.12))!important;border-color:transparent!important;box-shadow:none!important;transition:background .3s,border-color .3s,box-shadow .3s}
.header.is-scrolled{background:color-mix(in srgb,var(--panel) 92%,transparent)!important;border-color:var(--border)!important;box-shadow:0 6px 28px rgba(0,0,0,.10)!important}
body[data-theme="light"] .header:not(.is-scrolled){background:rgba(246,247,250,.20)!important}
.header:not(.is-scrolled){backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
/* Portrait uses its real transparent cutout with no blurred white/background square. */
.neural-hero.show-portrait .portrait-visual{inset:-11% -12% -6% -17%!important;overflow:visible!important}
.neural-hero.show-portrait .portrait-visual img{object-fit:contain!important;object-position:center bottom!important;filter:contrast(1.025) saturate(.93)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%)!important}
/* Navigation for both card carousels, with the controls floating at side midpoints. */
#work .carousel-shell,#credentials .cert-carousel{position:relative!important}
#work .carousel-nav>button{display:grid!important;place-items:center;position:absolute!important;top:40%!important;z-index:7!important;transform:translateY(-50%);width:37px!important;height:37px!important;border:1px solid var(--border)!important;border-radius:50%!important;background:color-mix(in srgb,var(--panel) 92%,transparent)!important;color:var(--text)!important;box-shadow:0 5px 18px rgba(0,0,0,.13)!important;backdrop-filter:blur(9px);cursor:pointer;font-size:18px!important}
#work #prevProject{left:-17px!important}#work #nextProject{right:-17px!important}
.cert-side-button{position:absolute;top:42%;transform:translateY(-50%);z-index:7;width:37px;height:37px;border:1px solid var(--border);border-radius:50%;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--text);font-size:26px;cursor:pointer;display:grid;place-items:center;box-shadow:0 5px 18px rgba(0,0,0,.13);backdrop-filter:blur(9px)}
.cert-prev{left:-17px}.cert-next{right:-17px}
.cert-side-button:hover,#work .carousel-nav>button:hover{background:var(--panel-hover)!important}
@media(max-width:690px){
 .story-section{padding-top:28px!important}
 .story-section>.section-heading{margin-bottom:15px!important}
 .story-section>.section-heading h2{font-size:27px!important}
 .story-panel{display:flex!important;flex-direction:column!important;padding:18px!important;gap:15px!important}
 .story-panel .story-quote,.story-panel .story-prose{grid-column:auto!important;grid-row:auto!important}
 .story-panel .story-quote blockquote{font-size:19px!important}
 .story-panel .story-summary{font-size:13px!important}
 .header-logo{height:35px!important;width:50px!important;margin-right:0!important}
 .identity{min-width:50px}
 .hero-art.show-portrait .portrait-visual{inset:-13% -8% -3% -7%!important;overflow:visible!important}
 .hero-art.show-portrait .portrait-visual img{object-position:right top!important;filter:contrast(1.045) saturate(.95)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)!important}
 #work .carousel-nav>button,.cert-side-button{width:30px!important;height:30px!important;top:43%!important}
 #work #prevProject,.cert-prev{left:-12px!important}#work #nextProject,.cert-next{right:-12px!important}
}
@media(prefers-reduced-motion:reduce){.header{transition:none!important}}