* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body { margin: 0; background: #1e0039; color:#fff; font-family: Arial, Helvetica, sans-serif; }
.panel { height: 100vh; height:100svh; min-height: 400px; position:relative; overflow:hidden; scroll-snap-align: start; }
.cover-image,.photo-image { position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.cover-image { background-image:url('assets/start.jpg'); }
.mare .photo-image {background-image:url('assets/mare-store.jpg');}
.sea .photo-image {background-image:url('assets/the-view.jpg');}
.bar .photo-image {background-image:url('assets/impasto.jpg');}
.street .photo-image {background-image:url('assets/streets.jpg');}
.mark { position:absolute; height:auto; width: clamp(106px,12vw,185px); pointer-events:none; filter: drop-shadow(0 1px 7px rgba(0,0,0,.08)); }
.mark-bottom { bottom: clamp(18px,4.5vh,52px); left: clamp(15px,3.2vw,54px); }
.mark-center { top: 50%; left:50%; transform:translate(-50%,-50%); width:clamp(170px,21vw,300px); }
.mark-left { left:clamp(36px,8vw,170px); top:50%; transform:translateY(-50%); width:clamp(145px,17vw,245px); }
.page-nav { position:fixed; right:clamp(12px,2vw,30px); top:50%; transform:translateY(-50%); z-index:10; display:flex; flex-direction:column; gap:14px; padding:12px 4px; }
.page-nav a { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:rgba(12,5,27,.24); text-decoration:none; }
.page-nav a span { display:block; width:7px; height:7px; border:1px solid white; border-radius:50%; background:transparent; transition:transform .2s, background .2s; box-shadow:0 0 3px rgba(0,0,0,.4); }
.page-nav a.active span, .page-nav a[aria-current="location"] span { background:#fff; transform:scale(1.45); }
.page-nav a:focus-visible,.skip-link:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.skip-link { position:fixed; z-index:30; left:12px; top:-50px; padding:8px; color:#fff; background:#130027; }
.skip-link:focus {top:12px;}
.scroll-hint { position:absolute; left:50%; bottom: 4.2vh; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.78); font-size:9px; letter-spacing:.32em; display:flex; align-items:center; flex-direction:column; gap:9px; text-shadow:0 1px 8px rgba(0,0,0,.6);}
.scroll-hint .arrow {font-size:22px;letter-spacing:0;}
@media (max-width:640px) {
  .panel {min-height:300px;}
  .photo-image { background-position:center center; }
  .mark-bottom {bottom:10vh;left:18px;width:125px;}
  .mark-center {width:220px;}
  .mark-left {left:22px;width:160px;}
  .page-nav {right:8px; gap:9px;}
  .cover-image {background-position:center center;}
  .scroll-hint {bottom:5vh;}
}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior:auto;} .page-nav a span {transition:none;} }