:root{
  --navy:#071d32;
  --gold:#c9953e;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--navy);
  color:var(--white);
  font-family:Georgia,"Times New Roman",serif;
}
a{color:inherit;text-decoration:none}

.topbar{
  min-height:88px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:var(--navy);
}
.logo{
  font-size:clamp(30px,3.3vw,44px);
  letter-spacing:.035em;
  white-space:nowrap;
}
nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
nav a{
  padding:3px 16px;
  border-left:1px solid rgba(201,149,62,.65);
  font-size:13px;
  text-transform:uppercase;
}
nav a:first-child{border-left:0}
nav a:hover{color:#e5bd74}

.hero{
  width:100%;
  aspect-ratio:16/9;
  background:#102b43;
  overflow:hidden;
}
.hero img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  padding:3px;
  background:#f1eee8;
}
.tile{
  position:relative;
  aspect-ratio:1/1.03;
  overflow:hidden;
  background:#102b43;
}
.tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}
.tile::after{
  content:"";
  position:absolute;
  inset:42% 0 0;
  background:linear-gradient(transparent,rgba(4,22,38,.94));
}
.tile span{
  position:absolute;
  z-index:2;
  left:20px;
  right:20px;
  bottom:34px;
  text-align:center;
  font-size:clamp(24px,2.6vw,38px);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.tile span::after{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin:16px auto 0;
  background:var(--gold);
}
.tile:hover img{
  transform:scale(1.025);
  filter:brightness(1.06);
}

footer{
  padding:26px 20px 30px;
  text-align:center;
  font-size:14px;
  letter-spacing:.04em;
}

@media(max-width:900px){
  .topbar{
    align-items:flex-start;
    flex-direction:column;
    padding-top:22px;
    padding-bottom:20px;
  }
  nav{justify-content:flex-start}
  nav a{padding:4px 12px}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .tiles{grid-template-columns:1fr}
  .hero{aspect-ratio:4/3}
}