/* Optimized supplied layers. Transparent margins are cropped; original canvas positions remain. */
.hero.exact-hero{aspect-ratio:1920 / 768!important;background:#071b30}
.composition-art{position:absolute!important;inset:0!important;width:100%;height:100%;transform:none!important;background:none}
.composition-art>img.composition-layer{position:absolute!important;inset:auto!important;display:block;height:auto!important;max-width:none!important;object-fit:contain!important;filter:none;transform:none;pointer-events:none}
.composition-art>img.comp-moon{left:48.593750%!important;top:0.000000%!important;width:19.270833%!important;z-index:0;}
.composition-art>img.comp-city{left:0.000000%!important;top:0.963542%!important;width:100.000000%!important;z-index:1;}
.composition-art>img.comp-foreground{left:0.000000%!important;top:0.000000%!important;width:100.000000%!important;z-index:2;}
.composition-art>img.comp-book-4{left:30.520833%!important;top:79.296875%!important;width:24.895833%!important;z-index:3;}
.composition-art>img.comp-book-3{left:31.666667%!important;top:70.703125%!important;width:22.447917%!important;z-index:4;}
.composition-art>img.comp-book-2{left:34.322917%!important;top:64.713542%!important;width:19.739583%!important;z-index:5;}
.composition-art>img.comp-book-1{left:37.552083%!important;top:59.635417%!important;width:15.260417%!important;z-index:6;}
.composition-art>img.comp-girl{left:37.968750%!important;top:38.281250%!important;width:10.625000%!important;z-index:7;}
.composition-art>img.comp-cat{left:44.375000%!important;top:44.531250%!important;width:8.125000%!important;z-index:8;}
.comp-book-4,.comp-book-3,.comp-book-2,.comp-book-1,.comp-girl,.comp-cat{animation:compositionLand 1.2s cubic-bezier(.2,.75,.3,1) both}
.comp-book-4{animation-delay:.25s}.comp-book-3{animation-delay:1.1s}.comp-book-2{animation-delay:1.95s}.comp-book-1{animation-delay:2.8s}.comp-girl{animation-delay:3.8s}.comp-cat{animation-delay:4.65s}
.loading .composition-layer{animation-play-state:paused!important}.hero.assembled .composition-layer{animation:none}.scenery-canvas{z-index:2!important}.whale-stage{z-index:10!important}.hero.flying .whale-stage{z-index:50!important}
.sky-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@keyframes compositionLand{0%{transform:translateY(-110vh);opacity:0}8%{opacity:1}75%{transform:translateY(2px)}88%{transform:translateY(-7px)}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.composition-layer{animation:none!important}}

/* Foreground blur: 4% blurred / 96% original, as requested. */
.composition-art>img.comp-foreground{filter:url(#foregroundBlur4)}
/* Navigation overlays the slideshow, with a translucent glass background. */
.page-shell{position:relative}
.site-header{position:absolute!important;top:0!important;left:0!important;transform:none!important;width:100%!important;background:rgba(3,24,41,.48)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(242,223,187,.15)!important;z-index:80}
.site-header .brand__name{color:#fff2d4;text-shadow:0 1px 12px #07152666}.site-header .desktop-nav a{color:#fff6e6;text-shadow:0 1px 8px #07152688}
@media(max-width:680px){.site-header{height:64px!important;background:rgba(3,24,41,.43)!important;padding:0 13px!important}.site-header .brand__name{font-size:28px!important}.site-header .brand__sub{font-size:.43rem}.site-header .mobile-menu{top:63px}.header-actions .icon-button{width:31px;height:34px}}
/* Slimmer, clearer navigation glass. */
.site-header{height:62px!important;padding:0 4.5%!important;background:rgba(3,24,41,.22)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-bottom-color:rgba(242,223,187,.09)!important}
.site-header .brand__name{font-size:34px!important}.site-header .brand__sub{font-size:.48rem;letter-spacing:.12em}.site-header .desktop-nav a{font-size:11.5px}.site-header .icon-button{width:32px;height:32px}.site-header .icon-button svg{width:19px;height:19px}
@media(max-width:980px){.site-header .mobile-menu{top:61px}}
@media(max-width:680px){.site-header{height:52px!important;padding:0 12px!important;background:rgba(3,24,41,.18)!important}.site-header .brand__name{font-size:26px!important}.site-header .brand__sub{font-size:.4rem}.site-header .icon-button{width:30px;height:30px}.site-header .mobile-menu{top:51px}}
/* Foreground image: exact Gaussian blur radius requested by the user. */
.composition-art>img.comp-foreground{filter:blur(1px)}
/* Header stays transparent, with no backdrop blur. */
.site-header{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Overscan keeps the foreground frame covering the viewport during depth motion. */
.composition-art>.comp-foreground{scale:1.025;transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.composition-art>.comp-foreground{scale:1}}

/* Books appear in their final stack positions; characters retain their landing animation. */
.comp-book-4,.comp-book-3,.comp-book-2,.comp-book-1{animation-name:compositionBookReveal;animation-duration:.8s;animation-timing-function:ease-out}
@keyframes compositionBookReveal{from{opacity:0;transform:none}to{opacity:1;transform:none}}

/* Keep navigation attached to the window while scrolling. */
.site-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:100!important}
html{scroll-padding-top:80px}

/* Translucent navigation with an irregular paper edge. Only its backdrop is masked. */
.site-header{--header-paper:rgba(3,24,41,.22);background:transparent!important;border-bottom:0!important;isolation:isolate}
.site-header::before{content:'';position:absolute;inset:0 0 -7px;z-index:-1;pointer-events:none;background:var(--header-paper);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1440V90L1424%2092%201407%2089%201383%2093%201369%2091%201348%2094%201315%2092%201294%2094%201268%2090%201240%2092%201219%2089%201191%2092%201173%2091%201147%2094%201124%2092%201095%2095%201079%2092%201052%2093%201024%2090%201002%2092%20978%2089%20951%2092%20927%2090%20904%2093%20879%2091%20850%2094%20824%2092%20799%2094%20771%2091%20745%2093%20722%2090%20697%2092%20670%2089%20646%2092%20618%2091%20590%2094%20567%2092%20539%2094%20516%2091%20490%2093%20463%2090%20435%2092%20413%2089%20386%2092%20362%2090%20336%2093%20310%2091%20287%2094%20260%2092%20236%2094%20209%2091%20185%2093%20158%2090%20132%2092%20107%2089%2080%2092%2055%2090%2028%2093%200%2091Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1440V90L1424%2092%201407%2089%201383%2093%201369%2091%201348%2094%201315%2092%201294%2094%201268%2090%201240%2092%201219%2089%201191%2092%201173%2091%201147%2094%201124%2092%201095%2095%201079%2092%201052%2093%201024%2090%201002%2092%20978%2089%20951%2092%20927%2090%20904%2093%20879%2091%20850%2094%20824%2092%20799%2094%20771%2091%20745%2093%20722%2090%20697%2092%20670%2089%20646%2092%20618%2091%20590%2094%20567%2092%20539%2094%20516%2091%20490%2093%20463%2090%20435%2092%20413%2089%20386%2092%20362%2090%20336%2093%20310%2091%20287%2094%20260%2092%20236%2094%20209%2091%20185%2093%20158%2090%20132%2092%20107%2089%2080%2092%2055%2090%2028%2093%200%2091Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
@media(max-width:680px){.site-header{--header-paper:rgba(3,24,41,.18)}}

/* Broad, softly undulating paper edge. */
.site-header::before{bottom:-12px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1440V87Q1360%2098%201280%2088T1100%2091Q1000%2078%20900%2089T700%2087Q610%2099%20510%2088T310%2091Q215%2079%20120%2090T0%2087Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1440V87Q1360%2098%201280%2088T1100%2091Q1000%2078%20900%2089T700%2087Q610%2099%20510%2088T310%2091Q215%2079%20120%2090T0%2087Z%22%2F%3E%3C%2Fsvg%3E")}

/* Warm moonlit rim follows the transparent silhouettes, never the image rectangles. */
.composition-art>img:is(.comp-book-4,.comp-book-3,.comp-book-2,.comp-book-1){filter:drop-shadow(0 0 1px #fff0b9) drop-shadow(0 0 4px #ffc15c80) drop-shadow(0 5px 10px #03132399)}
.composition-art>img:is(.comp-girl,.comp-cat){filter:drop-shadow(1px -1px 1px #fff0c5cc) drop-shadow(0 0 5px #ffd88988) drop-shadow(0 3px 8px #061a32aa)}
@media(max-width:680px){.composition-art>img:is(.comp-book-4,.comp-book-3,.comp-book-2,.comp-book-1){filter:drop-shadow(0 0 1px #ffe5a8) drop-shadow(0 0 3px #ffc15c70)}.composition-art>img:is(.comp-girl,.comp-cat){filter:drop-shadow(0 -1px 1px #fff0c5bb) drop-shadow(0 0 3px #ffd88988)}}

/* The city and bridge share the same warm silhouette lighting. */
.composition-art>img.comp-city{filter:drop-shadow(0 0 1px #fff0b999) drop-shadow(0 0 4px #ffc15c70) drop-shadow(0 4px 8px #03132366)}
@media(max-width:680px){.composition-art>img.comp-city{filter:drop-shadow(0 0 1px #ffe5a899) drop-shadow(0 0 2px #ffc15c60)}}

/* Foreground frame: retain 1px blur and add the shared golden contour. */
.composition-art>img.comp-foreground{filter:blur(1px) drop-shadow(0 0 1px #fff0b9aa) drop-shadow(0 0 4px #ffc15c80)}
@media(max-width:680px){.composition-art>img.comp-foreground{filter:blur(1px) drop-shadow(0 0 1px #ffe5a899) drop-shadow(0 0 2px #ffc15c70)}}

/* Slow, gentle rim shimmer begins after the entrance sequence. */
@keyframes rimShimmer{0%,100%{filter:drop-shadow(0 0 1px #fff0b988) drop-shadow(0 0 3px #ffc15c55)}50%{filter:drop-shadow(0 0 1.5px #fff6d7dd) drop-shadow(0 0 6px #ffd478aa)}}
@keyframes frameRimShimmer{0%,100%{filter:blur(1px) drop-shadow(0 0 1px #fff0b988) drop-shadow(0 0 3px #ffc15c55)}50%{filter:blur(1px) drop-shadow(0 0 1.5px #fff6d7cc) drop-shadow(0 0 5px #ffd47899)}}
.hero.assembled .composition-art>img:is(.comp-city,.comp-book-4,.comp-book-3,.comp-book-2,.comp-book-1,.comp-girl,.comp-cat){animation:rimShimmer 6s ease-in-out infinite!important}
.hero.assembled .composition-art>img.comp-foreground{animation:frameRimShimmer 8s ease-in-out -3s infinite!important}
.hero.assembled .composition-art>img.comp-city{animation-duration:9s!important;animation-delay:-4s!important}
.hero.assembled .composition-art>img.comp-book-3{animation-delay:-1.5s!important}
.hero.assembled .composition-art>img.comp-book-2{animation-delay:-3s!important}
.hero.assembled .composition-art>img.comp-book-1{animation-delay:-4.5s!important}
.hero.assembled .composition-art>img.comp-girl{animation-duration:7s!important;animation-delay:-2s!important}
.hero.assembled .composition-art>img.comp-cat{animation-duration:7s!important;animation-delay:-3s!important}
.hero.magic-paused .composition-art>img{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.hero.assembled .composition-art>img{animation:none!important}}

/* Keep the mobile whale behind the readable hero copy, including during flight. */
@media(max-width:680px){.hero .whale-stage,.hero.flying .whale-stage{z-index:4!important}.hero__inner{position:relative;z-index:5}}