/* Home: an index of categories over one full-screen photograph (the rules for it are at the end of this file). */
.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 #play-menu,.at-home hr.scene-only{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 */
@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:96px 40px 90px;transition:filter .7s,opacity .7s;-webkit-mask:linear-gradient(#0000 66px,#000 100px);mask:linear-gradient(#0000 66px,#000 100px)}.wall[hidden]{display:none}
/* the wall shows everything; this pill appears only when something narrows it (e.g. "Made with a phone") */
.wall-filter{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:10px;margin:0;padding:0 6px 0 16px;min-height:36px;border-radius:18px;background:#f4f4e9;color:#07191c;font:500 11px var(--label);letter-spacing:.08em;text-transform:uppercase}
.wall-filter button{width:28px;height:28px;border:0;border-radius:50%;background:#07191c18;color:#07191c;font:16px/1 var(--label)}.wall-filter button:hover{background:#07191c30}
.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}
 .home-tabs button{white-space:nowrap}.home-tabs button small{display:none}
 .home-foot{display:none}.home-map-layer{inset:126px 14px 70px}.wall{padding:124px 14px 80px}.wall-filter{top:118px}.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}}

/* map: choose all places or one category */
.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}}

/* ---- the index ---- */
.panels{position:absolute;inset:0;transition:filter .7s,opacity .7s}.panels[hidden]{display:none}
.ix-bg{position:absolute;inset:0;overflow:hidden;background:var(--shade)}
.ix-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);transition:opacity .7s var(--ease),transform 7s var(--ease)}
.ix-bg img.on{opacity:1;transform:scale(1)}
.ix-bg canvas.px{position:absolute;inset:0;width:100%;height:100%;z-index:1;transition:opacity .3s linear}
/* shade behind the names, in the photograph's own shadow colour */
.ix-bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--sh-90),var(--sh-75) 22%,var(--sh-35) 46%,transparent 66%),linear-gradient(0deg,var(--sh-55),transparent 30%)}
.ix{position:absolute;z-index:3;left:40px;top:50%;transform:translateY(-46%);max-width:min(760px,62vw)}
.ix ol{list-style:none;margin:0;padding:0;counter-reset:none}
.ix-item{display:flex;align-items:baseline;gap:18px;background:none;border:0;padding:3px 0;color:#f4f4e9;text-align:left;transition:opacity .35s,transform .5s var(--ease)}
.ix-n{flex:0 0 2.2em;font:500 11px var(--label);letter-spacing:.1em;color:var(--tint);transform:translateY(-.9em)}
.ix-name{font:380 clamp(28px,3.6vw,54px)/1.06 var(--serif);letter-spacing:-.03em;white-space:nowrap}
.ix-c{font:500 11px var(--label);letter-spacing:.06em;color:var(--soft);margin-left:-8px}
.ix-thumb{display:none}
.pointing .ix-item{opacity:.68}.pointing .ix-item.on{opacity:1;transform:translateX(12px)}
.ix-item:hover .ix-name,.ix-item:focus-visible .ix-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;text-decoration-color:color-mix(in srgb,var(--tint) 70%,transparent)}
.ix-item:focus-visible{outline:none}
.ix-more{display:flex;gap:26px;margin:30px 0 0 calc(2.2em + 18px)}
.ix-more button{background:none;border:0;padding:6px 0;color:#e3ebe7;font:500 var(--lab-size) var(--label);letter-spacing:var(--lab-track);text-transform:uppercase;border-bottom:1px solid #ffffff40}
.ix-more button:hover{color:#fff;border-color:#fff}.ix-more sup{color:var(--soft);font-size:10px}
/* what is inside the category being pointed at, and the name of the photograph showing */
.ix-strip{position:absolute;z-index:3;right:40px;bottom:84px;display:flex;gap:4px;height:52px;pointer-events:none}
.ix-strip img{height:100%;width:auto;max-width:96px;object-fit:cover;opacity:.5;transition:opacity .4s,transform .4s var(--ease);animation:ix-in .5s var(--ease) both}
.ix-strip img.on{opacity:1;transform:translateY(-4px);box-shadow:0 0 0 1px var(--tint)}
.ix-strip img:nth-child(2){animation-delay:.04s}.ix-strip img:nth-child(3){animation-delay:.08s}.ix-strip img:nth-child(4){animation-delay:.12s}.ix-strip img:nth-child(n+5){animation-delay:.16s}
.ix-now{position:absolute;z-index:3;right:40px;bottom:148px;margin:0;font:italic 15px var(--serif);color:#e8eee4;text-shadow:0 1px 10px #000b}
.home .home-foot{display:none}
@keyframes ix-in{from{opacity:0;transform:translateY(10px)}}
.panels.intro .ix li,.panels.intro .ix-more{animation:ix-in .8s var(--ease) both;animation-delay:calc(.55s + var(--i,8)*70ms)}
@media(max-width:850px){
 .home .ix-bg img{filter:brightness(.38) saturate(.85) blur(2px)}.ix-bg::after{display:none}
 .ix{inset:116px 0 0 0;transform:none;max-width:none;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 120px}
 .ix li{border-bottom:1px solid #ffffff14}
 .ix-item{width:100%;align-items:center;gap:14px;padding:10px 0}.pointing .ix-item{opacity:1}.pointing .ix-item.on{transform:none}
 .ix-thumb{display:block;flex:0 0 auto;width:64px;height:64px;object-fit:cover;border-radius:2px}
 .ix-n{flex:0 0 auto;transform:none;order:-1;width:1.8em}
 .ix-name{font-size:25px;white-space:normal}.ix-c{margin-left:auto}
 .ix-more{margin:22px 0 0}.ix-strip,.ix-now{display:none}
 .ix-item:focus-visible{outline:3px solid var(--tint);outline-offset:2px}}
@media(prefers-reduced-motion:reduce){.ix-bg img,.ix-item,.ix-strip img{transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){.mroute-date{opacity:1}}
@media(max-width:850px){.wall{-webkit-mask:linear-gradient(#0000 100px,#000 130px);mask:linear-gradient(#0000 100px,#000 130px)}}