/* The town is the canvas. The directory stays at its edge. */
.page-gallery{background:#202629;color:#eee7d9}
.page-gallery .site-header{position:absolute;inset:0 0 auto;background:linear-gradient(#152025d9,transparent);z-index:20}
.beach-explorer{position:relative;isolation:isolate;min-height:850px;height:100svh;max-height:1300px;overflow:hidden;background:#24393d;font-family:var(--body)}
.explorer-landscape,.explorer-shade{position:absolute;inset:0;z-index:-2}
.explorer-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%;opacity:0;transform:scale(1.035);transition:opacity .8s ease,transform 1.6s cubic-bezier(.22,1,.36,1)}
.explorer-image.is-current{opacity:1;transform:scale(1)}
.explorer-shade{z-index:-1;background:linear-gradient(0deg,#122127fa 2%,#152427b0 22%,transparent 70%),linear-gradient(90deg,#11262ba1,transparent 67%)}
.explorer-masthead{position:absolute;left:6%;right:6%;top:133px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e7e1d952;padding-top:17px}
.explorer-masthead h1{font:500 12px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;margin:0}
.explorer-masthead>span{font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.explorer-caption{position:absolute;left:6%;bottom:255px;max-width:65%;pointer-events:none;text-shadow:0 2px 35px #10202533}
.explorer-kind{font:500 10px/1.4 var(--body);letter-spacing:.19em;text-transform:uppercase;margin:0 0 20px}
.explorer-name{font:800 clamp(66px,8.4vw,135px)/.84 var(--display);text-transform:uppercase;letter-spacing:-.025em;max-width:9ch;margin:0 0 24px;text-wrap:balance}
.explorer-description{font:400 13px/1.7 var(--body);max-width:34ch;margin:0;color:#eee7d9}
.explorer-friend{display:inline-block;pointer-events:auto;font:italic 18px/1.4 var(--accent);margin-top:16px;padding-bottom:5px;border-bottom:1px solid #ece6d870}
.explorer-friend[hidden]{display:none}
.explorer-controls{position:absolute;right:6%;bottom:262px;display:flex;flex-direction:column;align-items:end;gap:26px}
.explorer-full{border:0;border-bottom:1px solid #f3ebd96b;background:none;padding:10px 0;font:500 11px var(--body);display:flex;align-items:center;gap:30px}
.explorer-full span{font-size:22px}
.explorer-paging{display:flex;align-items:center;gap:22px}
.explorer-paging button{border:1px solid #e1dcd278;background:#1c2d2f45;width:46px;height:46px;font:400 23px var(--body);transition:background .2s}
.explorer-paging button:hover{background:#e9e4d8;color:#202629}
.explorer-count{font:400 10px var(--body);letter-spacing:.15em;min-width:52px;text-align:center}
.explorer-directory{position:absolute;bottom:22px;left:6%;right:6%}
.explorer-directory-top{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dfd8c759;padding-top:9px;margin-bottom:12px;gap:25px}
.explorer-directory-top>span{font:italic 18px/1.3 var(--accent)}
.explorer-filters{display:flex;align-items:center;gap:22px}
.explorer-filters button{position:relative;font:500 10px var(--body);padding:9px 0;background:none;border:0;border-bottom:1px solid transparent;min-height:36px;color:#c9c8c3}
.explorer-filters button[aria-pressed=true]{border-bottom-color:#eee7d9;color:#fff}
.explorer-rail{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 2px 12px;scrollbar-width:thin;scrollbar-color:#b9b1a267 transparent}
.explorer-stop{position:relative;display:block;flex:0 0 155px;scroll-snap-align:start;opacity:.64;transition:opacity .25s;text-decoration:none}
.explorer-stop:hover,.explorer-stop[aria-current=true]{opacity:1}
.explorer-stop[hidden]{display:none}
.explorer-stop img{display:block;width:100%;height:87px;object-fit:cover;filter:saturate(.7);transition:filter .25s}
.explorer-stop[aria-current=true] img{outline:1px solid #f6edda;outline-offset:3px;filter:saturate(1)}
.explorer-stop>span{display:flex;align-items:center;gap:10px;font:400 10px/1.4 var(--body);padding:12px 0 3px}
.explorer-stop small{font-size:8px;letter-spacing:.06em;color:#c6bdaa}
.explorer-error{position:absolute;right:6%;top:190px;max-width:34ch;background:#202629e6;padding:14px;font-size:12px}
.explorer-art{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;padding:75px 6% 80px;background:#172124f7;color:#eee7d9}
.explorer-art::backdrop{background:#172124}
.explorer-art[open]{display:flex;align-items:center;justify-content:center}
.explorer-art>img{width:100%;height:100%;object-fit:contain}
.explorer-art-close{position:absolute;right:5%;top:18px;border:1px solid #e1dcd258;background:transparent;padding:12px 18px;font:500 11px var(--body);min-height:44px}
.explorer-art>p{position:absolute;bottom:26px;left:80px;right:80px;text-align:center;font:400 12px var(--body)}
.explorer-art-prev,.explorer-art-next{position:absolute;bottom:17px;border:1px solid #e1dcd258;background:transparent;width:46px;height:44px;font:400 23px var(--body)}
.explorer-art-prev{left:5%}.explorer-art-next{right:5%}
@media(max-width:1000px){.explorer-name{font-size:10vw}.explorer-stop{flex-basis:135px}.explorer-stop img{height:76px}.explorer-caption{bottom:252px}.explorer-controls{bottom:259px}}
@media(max-width:760px){
  .beach-explorer{height:100svh;min-height:820px;max-height:1100px}
  .explorer-image{object-position:57% center}
  .explorer-shade{background:linear-gradient(0deg,#152427 2%,#152427bd 35%,transparent 84%)}
  .explorer-masthead{top:111px;left:6%;right:6%;padding-top:13px}
  .explorer-masthead h1{font-size:9px;letter-spacing:.12em}.explorer-masthead>span{font-size:8px;letter-spacing:.03em}
  .explorer-caption{left:6%;bottom:293px;max-width:88%}.explorer-kind{font-size:8px;margin-bottom:14px}
  .explorer-name{font-size:clamp(52px,16vw,96px);line-height:.88;max-width:12ch;margin-bottom:15px}
  .explorer-description{font-size:12px;max-width:31ch;line-height:1.6}.explorer-friend{font-size:16px;margin-top:12px}
  .explorer-controls{left:6%;right:6%;bottom:228px;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .explorer-full{font-size:9px;gap:12px;padding:7px 0}.explorer-full span{font-size:19px}
  .explorer-paging{gap:10px}.explorer-paging button{width:38px;height:38px;font-size:19px}.explorer-count{font-size:8px;min-width:47px}
  .explorer-directory{left:6%;right:0;bottom:17px}.explorer-directory-top{margin-right:6.4%;gap:8px;padding-top:12px;margin-bottom:9px}
  .explorer-directory-top>span{font-size:16px}.explorer-filters{gap:13px}.explorer-filters button{font-size:9px;min-height:35px}
  .explorer-rail{gap:14px;padding-top:4px;padding-right:6vw;padding-bottom:10px}.explorer-stop{flex-basis:133px}.explorer-stop img{height:75px}
  .explorer-stop>span{font-size:9px;padding-top:10px;gap:7px}.explorer-stop small{font-size:7px}
  .explorer-error{top:168px;left:6%;font-size:11px}.explorer-art{padding:70px 12px 75px}
}
@media(max-width:360px){.explorer-directory-top>span{font-size:14px}.explorer-filters{gap:11px}.explorer-filters button{font-size:8px}.explorer-name{font-size:16vw}}
@media(prefers-reduced-motion:reduce){.explorer-image{transition:none;transform:none}.explorer-stop{transition:none}}