/* Home: ten full-height photographs, one open at a time. */
.home{position:fixed;inset:0;z-index:25;background:#050f11;transition:opacity var(--t2) var(--ease)}.home[hidden]{display:none}.home.leaving{opacity:0;pointer-events:none}
.at-home .head-right,.at-home .identity{opacity:1}.at-home .series{display:none}.at-home .site-head{z-index:35;background:none}
.at-home #watch,.at-home #fit,.at-home #clean,.at-home #journeys,.at-home #map-toggle,.at-home hr{display:none}
/* a real band of shade under the top labels, whatever the photograph */
.home::before{content:"";position:absolute;z-index:29;inset:0 0 auto 0;height:148px;background:linear-gradient(#050f11f0,#050f11e4 18px,#050f11c4 40px,#050f1196 64px,#050f1164 88px,#050f1038 112px,#050f1016 130px,transparent);pointer-events:none}
.home-bar{position:absolute;z-index:30;top:0;left:0;right:0;height:84px;padding-bottom:12px;display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none}
.home-bar>*{pointer-events:auto}
.home-tabs{display:flex;gap:2px}.home-tabs button,.home-map{background:none;border:0;min-height:44px;padding:0 16px;color:#d2ded9;font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);position:relative}
.home-tabs button small{font-size:11px;color:var(--soft);margin-left:6px}
.home-tabs button:hover,.home-map:hover{color:#fff}
.home-tabs button[aria-pressed=true]{color:#fff}.home-tabs button[aria-pressed=true]::after{content:"";position:absolute;left:16px;right:16px;bottom:7px;height:1px;background:#fff}
.home-map{display:flex;align-items:center;gap:10px;margin-left:12px;border-left:1px solid #ffffff33;padding-left:22px}.home-map i{width:32px;height:18px;border-radius:10px;border:1px solid #ffffff99;position:relative;display:block;transition:background .3s,border-color .3s}.home-map i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .3s,background .3s}
.home-map[aria-pressed=true]{color:#fff}.home-map[aria-pressed=true] i{background:#8fe8d033;border-color:#b6fff0}.home-map[aria-pressed=true] i::after{transform:translateX(14px);background:#b6fff0;box-shadow:0 0 8px #b6fff0}
.home-foot{position:absolute;z-index:30;left:40px;bottom:28px;color:#dfe9e5;pointer-events:none;font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);text-shadow:0 1px 8px #000b}.home-foot b{font-weight:600;color:#fff}
/* panels */
.panels{position:absolute;inset:0;display:flex;gap:2px;transition:filter .7s,opacity .7s}.panels[hidden]{display:none}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#0b2023;border:0;padding:0;text-align:left;color:inherit;transition:flex-grow .85s var(--ease)}.panel.active{flex-grow:7}
.p-imgs{position:absolute;inset:0}.p-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.2s,transform 6s var(--ease),filter .8s;filter:saturate(1) brightness(.92)}
.p-imgs img.on{opacity:1}.panel.active .p-imgs img{filter:none}.panel.active .p-imgs img.on{transform:scale(1.0)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,#05131838 56%,#05131878 68%,#051318bc 80%,#051318dc);pointer-events:none}
.p-vt{position:absolute;left:14px;bottom:84px;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:-.01em;white-space:nowrap;transition:opacity .35s;text-shadow:0 0 18px #000a}.panel.active .p-vt{opacity:0}
.p-info{position:absolute;left:36px;right:30px;bottom:84px;z-index:2;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .7s var(--ease);min-width:340px;pointer-events:none}.panel.active .p-info{opacity:1;transform:none;transition-delay:.18s}
.p-info .lab{font:500 var(--lab-size) var(--label);letter-spacing:var(--lab-track);text-transform:uppercase;color:#eef2ea;text-shadow:0 1px 8px #000b}
.p-info b{display:block;font-family:var(--serif);font-weight:380;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.035em;line-height:.98;margin:10px 0 12px;text-shadow:0 2px 30px #0009}
.p-info em{display:block;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.45;max-width:28em;margin-bottom:16px;color:#f2f4ec;text-shadow:0 1px 12px #000b}
.p-strip{display:flex;gap:4px;height:38px}.p-strip img{height:100%;aspect-ratio:3/2;object-fit:cover;opacity:.95}
/* first arrival: the strips rise into place one after another */
/* opening: strips resolve from their own pixels (pixel-intro.js); labels follow once the image is readable */
.p-imgs canvas.px{position:absolute;inset:0;width:100%;height:100%;transition:opacity .26s linear}
.panels.intro .p-vt,.panels.intro .p-info{animation:label-in .7s ease both;animation-delay:calc(.45s + var(--i)*70ms)}
@keyframes label-in{from{opacity:0}}
/* map layer */
.home-map-layer{position:absolute;z-index:20;inset:96px 40px 84px 300px;opacity:0;pointer-events:none;transition:opacity .7s}
.map-on .home-map-layer{opacity:1;pointer-events:auto}.map-on .panels,.map-on .wall{opacity:.06;filter:blur(10px);pointer-events:none}.map-on .home-foot{opacity:0}
.home-map-layer .mapsvg{-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.home-map-layer .mapsvg .land{fill:#bdf3e40d;stroke-opacity:.5}
.mdot{width:34px;height:34px;display:grid;place-items:center;z-index:2}.mdot i{width:9px;height:9px;border-radius:50%;background:#e8fff9;box-shadow:0 0 10px 3px #8fe8d0;transition:all .2s}.mdot:hover i,.mdot:focus-visible i{width:14px;height:14px;background:#fff;box-shadow:0 0 18px 7px #b6fff0}.mdot span{position:absolute;font:600 11px var(--label);color:#062224}
.mdot.cluster i{width:24px;height:24px;background:#e8fff9;box-shadow:0 0 14px 4px #8fe8d0aa}.mdot.cluster:hover i{width:28px;height:28px}
.mroute-date{position:absolute;transform:translate(-50%,calc(-100% - 14px));background:#050f11d8;padding:3px 7px;font:500 11px var(--label);letter-spacing:.08em;text-transform:uppercase;color:#f2d9a6;white-space:nowrap;pointer-events:none;text-shadow:0 0 8px #000,0 0 2px #000;opacity:0;animation:fadein .8s 1.4s forwards}
@keyframes fadein{to{opacity:1}}
.medge{position:absolute;right:0;bottom:-52px;background:#07191c;border:1px solid #ffffff40;color:#eafff9;min-height:40px;padding:0 14px;font:500 12px var(--label);letter-spacing:.06em;text-transform:uppercase}.medge:hover{background:#0f2b2e}
.mlegend{position:absolute;left:-260px;bottom:-50px;margin:0;display:flex;align-items:center;gap:10px;font:500 12px var(--label);letter-spacing:.06em;text-transform:uppercase;color:#d2ded9}
.mlegend .dot{width:8px;height:8px;border-radius:50%;background:#e8fff9;box-shadow:0 0 8px 2px #8fe8d0}.mlegend .line{width:26px;height:2px;background:#f2d9a6;margin-left:18px}
.mreset{position:absolute;right:0;top:-6px;background:none;border:1px solid #ffffff55;color:#fff;min-height:40px;padding:0 16px;font:500 12px var(--label);letter-spacing:.08em;text-transform:uppercase}
.mcard{position:absolute;width:190px;background:#07191c;border:1px solid #ffffff30;transform:translate(-50%,calc(-100% - 20px));pointer-events:none;opacity:0;transition:opacity .15s;z-index:3}.mcard.on{opacity:1}.mcard img{width:100%;height:120px;object-fit:cover;display:block}
.mcard b{display:block;padding:8px 10px 0;font:400 15px/1.2 var(--serif)}.mcard small{display:block;padding:4px 11px 11px;font:500 11px/1.45 var(--label);letter-spacing:.05em;text-transform:uppercase;color:#a9cfc5}
/* all-photographs wall */
.wall{position:absolute;inset:0;overflow:auto;padding:132px 40px 90px;transition:filter .7s,opacity .7s}.wall[hidden]{display:none}
.chips{position:fixed;top:78px;left:40px;right:40px;z-index:31;display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.chips::-webkit-scrollbar{display:none}.chips button{flex:0 0 auto}.chips button{border:1px solid #ffffff40;background:#07191cdd;padding:0 14px;min-height:34px;border-radius:17px;color:#e3ebe7;font:500 11px var(--label);letter-spacing:.08em;text-transform:uppercase}.chips button:hover{border-color:#fff}.chips button[aria-pressed=true]{background:#f4f4e9;color:#07191c}
.chips .sep{margin-left:14px}
.tiles{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}.tiles::after{content:'';flex-grow:999}.f{height:21vh;flex-grow:1;position:relative;overflow:hidden;background:#0b2023;border:0;padding:0}.f img{height:100%;width:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .5s}.tiles:hover .f img{opacity:.4}.tiles .f:hover img,.tiles .f:focus-visible img{opacity:1;transform:scale(1.04)}.f.off{display:none}
.f::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#050f11d0);opacity:0;transition:opacity .3s}.f:hover::after,.f:focus-visible::after{opacity:1}
.f .f-name{position:absolute;z-index:1;left:12px;right:12px;bottom:10px;font:400 15px/1.2 var(--serif);text-align:left;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .4s var(--ease);color:#fff}.f:hover .f-name,.f:focus-visible .f-name{opacity:1;transform:none}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease)}
.home.view-all .home-foot{display:none}
@media(max-width:850px){.home::before{height:150px}.home-bar{top:62px;height:52px;justify-content:flex-start;padding:0 8px;overflow-x:auto}.home-tabs button,.home-map{padding:0 10px}.home-map{margin-left:4px;padding-left:12px}
 .panels{flex-direction:column;inset:116px 0 0 0;gap:2px;overflow-y:auto;overscroll-behavior:contain}.panel{flex:0 0 54px;transition:flex-basis .85s var(--ease)}.panel.active{flex:0 0 max(250px,min(50vh,430px))}.p-vt{writing-mode:horizontal-tb;transform:none;left:18px;bottom:auto;top:50%;margin-top:-11px;font-size:17px}.p-info{left:18px;right:18px;bottom:18px;min-width:0}.p-info b{font-size:26px}.p-info em{font-size:14px;margin-bottom:10px}.p-strip{height:38px}
 .home-tabs button{white-space:nowrap}.home-tabs button small{display:none}
 .panel::after{background:linear-gradient(90deg,#051318d0,#05131860 60%,transparent),linear-gradient(180deg,transparent 40%,#051318e0)}
 .home-foot{display:none}.home-map-layer{inset:126px 14px 70px}.wall{padding:166px 14px 80px}.chips{top:118px;left:14px;right:14px;flex-wrap:nowrap;overflow-x:auto}.chips button{flex:0 0 auto}.f{height:16vh}.f .f-name{opacity:1;transform:none;font-size:13px}.f::after{opacity:1}
 .mlegend{flex-wrap:wrap;bottom:-58px;font-size:11px}.mreset{bottom:auto;top:-6px}.medge{top:auto;bottom:6px}}
@media(prefers-reduced-motion:reduce){.p-imgs img,.panel,.p-info{transition:none!important}.panels.intro .panel,.panels.intro .panel img{animation:none!important}}

/* map: choose all places or one journey */
.mjourneys{position:absolute;z-index:4;left:-260px;top:0;width:240px;display:flex;flex-direction:column;gap:2px;max-height:calc(100% - 20px);overflow:auto;scrollbar-width:none}
.mjourneys button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:none;border:0;border-left:2px solid transparent;padding:7px 14px;min-height:44px;color:#c9d7d2;text-align:left;transition:color .2s,border-color .2s,background .2s}
.mjourneys button b{font:400 15px/1.15 var(--serif)}.mjourneys button small{font:500 11px var(--label);letter-spacing:.08em;text-transform:uppercase;color:#93aaa3}
.mjourneys button:hover{color:#fff;background:#ffffff08}.mjourneys button[aria-pressed=true]{color:#fff;border-left-color:#f2d9a6;background:#f2d9a60d}
.scoped .mapsvg .route,.scoped .mroute-date{display:none}
.mdot.stop i{width:22px;height:22px;background:#fff8e6;box-shadow:0 0 14px 4px #f2d9a6aa}.mdot.stop span{color:#3a2a08}
.mlegend .line.j{background:#f2d9a6;margin-left:0}
@media(max-width:850px){.home-map-layer{inset:126px 14px 130px}.mjourneys{position:fixed;flex-direction:row;top:auto;bottom:14px;left:0;right:0;width:auto;padding:0 10px;overflow-x:auto;max-height:none}.mlegend{left:0}.mjourneys button{flex:0 0 auto;border-left:0;border-bottom:2px solid transparent}.mjourneys button[aria-pressed=true]{border-bottom-color:#f2d9a6}}
