:root{ --max: 1100px; }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: Georgia, serif;
  color:#eadfd2;
  background:#0d0d11 url('images/bg-texture.jpg') center/cover fixed no-repeat;
}
.site-header{ position:relative }
.header-strip{ height:140px; background:url('images/header-strip.png') repeat-x center }
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
  transform: translateY(-90px);
}
.logo{ height:48px; margin-bottom:8px; width:auto; }
.nav{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap }
.navbtn{
  position:relative; display:inline-block; width:180px; height:52px;
  text-decoration:none;
}
.navbtn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.navbtn span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:bold; color:#2b1600;
  text-shadow:0 1px 2px rgba(255,240,210,0.8);
  text-align:center; font-size:14px; padding:0 6px;
}
.navbtn:hover span{ filter:brightness(1.2); }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 16px }
.card{ margin: 10px 0 20px 0 }
.card-surface{
  min-height: 420px;
  background: url('images/content-card.png') center/cover no-repeat;
  border-radius: 8px;
  padding: 26px;
  color:#2b1600;
  font-size:18px; line-height:1.6;
  text-shadow:0 1px 0 rgba(255,240,210,.6);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.gallery{ display:flex; justify-content:center; gap:60px; padding:40px 0 }
.tile{ position:relative; width:220px; height:220px; display:block }
.frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.site-footer{ text-align:center; color:#e5d8c8; margin-top: 10px }
.footer-strip{ height:140px; background:url('images/footer-strip.png') repeat-x center }
.site-footer p{ margin: 12px 0 28px 0 }