.map-page{
  margin:0;
  color:#342819;
  background:
    linear-gradient(rgba(239,224,190,.92),rgba(239,224,190,.92)),
    url("../homepage-reference.png") center 16% / cover fixed no-repeat;
  font-family:Georgia,"Times New Roman",serif;
}
.map-shell{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:26px 0 48px;
}
.map-intro-block{
  max-width:900px;
  margin:0 auto;
  padding:54px 20px 34px;
  text-align:center;
}
.map-intro-block h1{
  margin:4px 0 9px;
  color:#711813;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(2.7rem,6vw,5rem);
  line-height:1;
}
.map-tagline{
  margin:0 auto 8px;
  color:#172b38;
  font-size:clamp(1.08rem,2vw,1.42rem);
  line-height:1.45;
  font-weight:700;
}
.map-flourish{
  color:#9a681f;
  margin:8px 0 18px;
  font-size:1.1rem;
  letter-spacing:.12em;
}
.map-intro{
  max-width:800px;
  margin:0 auto;
  color:#493a27;
  font-size:1.05rem;
  line-height:1.6;
}
.map-page .gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  align-items:start;
  padding:8px 12px 34px;
}
.map-page .card{
  min-width:0;
  background:rgba(247,235,207,.84);
  border:1px solid rgba(126,82,27,.52);
  box-shadow:0 7px 16px rgba(63,35,10,.14);
  padding:10px 10px 15px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .map-page .card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 21px rgba(63,35,10,.22);
  }
}
.map-page .frame{
  height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#cbb381;
  border:4px double #7f521d;
  overflow:hidden;
}
.map-page .frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.map-page .card h2{
  font-size:1.08rem;
  color:#711813;
  text-align:center;
  margin:12px 5px 4px;
  line-height:1.2;
}
.map-page .card p{
  text-align:center;
  color:#604423;
  font-size:.92rem;
  margin:0;
  font-style:italic;
  min-height:1.1em;
}
.map-page .lightbox{
  position:fixed;
  inset:0;
  background:rgba(20,12,7,.94);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:30px 80px;
}
.map-page .lightbox.open{display:flex}
.map-page .lightbox figure{
  margin:0;
  max-width:90vw;
  max-height:92vh;
  text-align:center;
}
.map-page .lightbox img{
  max-width:86vw;
  max-height:82vh;
  object-fit:contain;
  box-shadow:0 0 0 2px #b88735,0 15px 45px #000;
}
.map-page .lightbox figcaption{
  color:#f4dfb1;
  font-size:18px;
  margin-top:12px;
}
.map-page .close,
.map-page .prev,
.map-page .next{
  position:absolute;
  border:0;
  background:transparent;
  color:#f3dfb0;
  cursor:pointer;
}
.map-page .close{right:28px;top:16px;font-size:48px}
.map-page .prev,
.map-page .next{top:47%;font-size:70px}
.map-page .prev{left:24px}
.map-page .next{right:24px}

@media(max-width:900px){
  .map-page .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-page .frame{height:300px}
}
@media(max-width:600px){
  .map-shell{
    width:min(100% - 18px,1180px);
    padding-top:14px;
  }
  .map-intro-block{padding:38px 16px 26px}
  .map-page .gallery{grid-template-columns:1fr;padding:0 0 28px}
  .map-page .frame{height:390px}
  .map-page .lightbox{padding:45px 15px}
  .map-page .prev,
  .map-page .next{font-size:48px}
  .map-page .prev{left:5px}
  .map-page .next{right:5px}
}