/* Static-site additions on top of styles.css (the original site's compiled stylesheet). */

/* Compact, identical header on every page. */
.site-header { min-height: 64px; padding-top: 6px; padding-bottom: 6px; }
.site-header .brand-lockup-header { width: 50px; margin: 0; }
.main-nav a.active { box-shadow: inset 0 -1px 0 var(--outlaw-black); }
.site-header .header-tools { margin-left: auto; }
.site-header .main-nav + .header-tools { margin-left: 0; }
@media (width <= 820px) { .site-header .main-nav + .header-tools { margin-left: auto; } }

.scroll-progress { width: 100%; transform: scaleX(0); transform-origin: 0 50%; }

/* Locations: name, address and map link only */
/* List shrinks to its widest card (Pringle Bay); the other cards stretch to match. */
.rooms-list:has(.room-card-simple) { width: max-content; max-width: 100%; }
.room-card.room-card-simple { grid-template-columns: 1fr; margin-bottom: 16px; padding: 22px 24px; }
.room-card-simple .room-address { margin: 0; }

/* Entry page */
.entry-card { text-align: center; }
.entry-card .brand-lockup-gate { width: min(240px, 60vw); }
.entry-card .eyebrow { margin: 4px 0 6px; }
.entry-card h1 { font-size: clamp(32px, 6vw, 48px); margin: 0 0 14px; }
.entry-lede { max-width: 52ch; margin: 0 auto 28px; color: var(--outlaw-muted); }
.entry-join { text-align: left; border-top: 1px solid var(--outlaw-line); padding-top: 22px; margin-bottom: 24px; }
.entry-join .section-label { text-align: center; margin-bottom: 16px; }
.entry-steps strong { font-weight: 600; }
.entry-steps a { border-bottom: 1px solid currentColor; }
.entry-card .door-choice { margin-top: 8px; }

/* 18+ popup: shown on any page until confirmed once (see site.js). */
.age-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(44, 36, 24, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.age-pending .age-modal { display: grid; }
html.age-pending body { overflow: hidden; }
.age-modal.is-leaving { animation: ageFade .3s var(--ease-out) both; }
.age-modal-card {
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px 24px 26px;
  text-align: center;
  background: #f4ead4;
  border: 1px solid var(--outlaw-line);
  box-shadow: 0 24px 60px rgba(44, 36, 24, 0.25);
  font-family: var(--font-body);
  color: var(--outlaw-black);
}
.age-modal-card .brand-lockup-gate { width: 110px; margin: 0 auto 10px; }
.age-modal-card .eyebrow { margin: 0 0 6px; }
.age-modal-card h2 { font-family: var(--font-display); font-size: clamp(26px, 6vw, 34px); line-height: 1.1; margin: 0 0 12px; }
.age-modal-card p { color: var(--outlaw-muted); margin: 0 0 22px; }
.age-modal-card .button { width: 100%; }
@keyframes ageFade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .age-modal.is-leaving { animation: none; } }

/* Page shutter: closes on internal link click, opens on the next page load. */
.page-shutter.is-closing,
.page-shutter.is-opening { display: block; }
.page-shutter.is-closing .page-shutter-top { animation: shutterTopClose .45s var(--ease-out) both; }
.page-shutter.is-closing .page-shutter-bottom { animation: shutterBotClose .45s var(--ease-out) both; }
.page-shutter.is-opening .page-shutter-top { animation: shutterTopOpen .6s var(--ease-out) .1s both; }
.page-shutter.is-opening .page-shutter-bottom { animation: shutterBotOpen .6s var(--ease-out) .1s both; }
@keyframes shutterTopClose { from { transform: translateY(-101%); } to { transform: translateY(0); } }
@keyframes shutterBotClose { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes shutterTopOpen { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes shutterBotOpen { from { transform: translateY(0); } to { transform: translateY(101%); } }
@media (prefers-reduced-motion: reduce) {
  .page-shutter.is-closing, .page-shutter.is-opening { display: none; }
}