.area{padding:130px 0;}

/* magazine spread: one lead story taking the visual weight, two
   supporting items stacked beside it — not three equal tiles */
.area-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:repeat(2,1fr);
  gap:26px;
  margin-top:64px;
}
.area-card{
  position:relative;overflow:hidden;border-radius:2px;
  box-shadow:0 26px 50px -30px rgba(15,37,47,0.3);
  aspect-ratio:4/5;
}
.area-card.lead{grid-row:1 / 3;aspect-ratio:auto;}
.area-card .ph{position:absolute;inset:0;transition:transform 1.2s var(--ease-soft);}
.area-card:hover .ph{transform:scale(1.05);}
.area-card .label{
  position:absolute;bottom:0;left:0;right:0;padding:30px 26px;
  background:linear-gradient(0deg, rgba(15,37,47,0.88), transparent 75%);
  color:#fff;
}
.area-card .label .tag{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--aegean-light);}
.area-card .label h4{font-family:var(--serif);font-size:22px;font-weight:500;margin-top:6px;font-style:italic;}
.area-card .label p{margin-top:8px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,0.8);max-width:340px;}
.area-card.lead .label h4{font-size:28px;}

@media(max-width:860px){
  .area-grid{grid-template-columns:1fr;grid-template-rows:none;}
  .area-card,.area-card.lead{grid-row:auto;aspect-ratio:4/5;}
}

/* a quiet placeholder line for what's coming next — sets the
   expectation without shipping a half-built map */
.area-more{
  margin-top:36px;text-align:center;
  font-size:13px;color:var(--ink-soft);
}
.area-more span{color:var(--terracotta);font-weight:600;}