.age-gate[hidden] { display: none; }
body.age-locked { overflow: hidden; }
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 24px;
  overflow-y: auto;
  background:
    linear-gradient(rgba(4, 3, 5, .82), rgba(4, 3, 5, .94)),
    url('../images/travel-buds-hero.jpg') center / cover no-repeat;
}
.age-card {
  position: relative;
  width: min(620px, 100%);
  padding: clamp(34px, 7vw, 68px);
  text-align: center;
  color: #e8dfcb;
  background: linear-gradient(145deg, rgba(24, 20, 24, .97), rgba(7, 6, 7, .98));
  border: 1px solid #b68a3e;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .78), 0 0 44px rgba(217, 42, 153, .15);
}
.age-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(224, 191, 121, .24);
}
.age-ornament {
  margin: 0 0 22px;
  color: #d92a99;
  font: 400 22px Cinzel, Georgia, serif;
}
.age-kicker {
  margin: 0 0 16px;
  color: #e0bf79;
  font: 600 11px Cinzel, Georgia, serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.age-title {
  margin: 0 0 24px;
  color: #f0e7d3;
  font: 700 clamp(34px, 7vw, 58px) / 1.08 Cinzel, Georgia, serif;
  text-transform: uppercase;
}
.age-copy {
  max-width: 470px;
  margin: 0 auto 30px;
  color: #b7ad9f;
  font: 400 15px / 1.7 Inter, Arial, sans-serif;
}
.age-actions { display: grid; gap: 13px; max-width: 360px; margin: 0 auto; }
.age-enter,
.age-exit {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 15px 18px;
  border-radius: 0;
  font: 600 11px Cinzel, Georgia, serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.age-enter {
  border: 1px solid #d92a99;
  color: #fff0f9;
  background: rgba(217, 42, 153, .16);
}
.age-enter:hover,
.age-enter:focus-visible {
  background: rgba(217, 42, 153, .28);
  box-shadow: 0 0 26px rgba(217, 42, 153, .22);
}
.age-exit {
  border: 1px solid rgba(224, 191, 121, .44);
  color: #e0bf79;
  background: transparent;
}
.age-enter:focus-visible,
.age-exit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.age-note {
  position: relative;
  z-index: 1;
  margin: 24px auto 0;
  color: #7f766a;
  font: 400 11px / 1.55 Inter, Arial, sans-serif;
}
@media (max-width: 520px) {
  .age-gate { padding: 12px; }
  .age-card { padding: 42px 24px; }
  .age-copy { font-size: 14px; }
}