/* Age gate: the page waits under a solid backdrop until the visitor answers. */

/* Before the script runs: hide the page, keep the gate. */
.tg-age-wait body { visibility: hidden; }
.tg-age-wait .tg-agegate { visibility: visible; }

/* The panel: brown, white text, dead center of the viewport (the theme's reset takes the dialog's own auto margins away). */
.tg-agegate {
  position: fixed;
  inset: 0;
  width: min(36rem, calc(100vw - 2rem));
  height: fit-content;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 3rem 2.5rem;
  overflow: auto;
  border: 0;
  background: #9d573a;   /* the links brown; white on it 5.5 */
  color: #ffffff;
  text-align: center;
}

.tg-agegate::backdrop { background: rgb(0 0 0 / 0.92); }

/* The white logotype, transparent, at its full 300 */
.tg-agegate__logo {
  display: block;
  width: 100%;
  max-width: 18.75rem;
  height: auto;
  margin: 0 auto 2rem;
}

.tg-agegate__title {
  margin: 0 0 1.75rem;
  color: #ffffff;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  text-transform: uppercase;
}

/* The yes button: white, brown text */
.tg-agegate .tg-agegate__yes {
  --tg-btn-bg: #ffffff;
  --tg-btn-bg-hover: #f5f5f5;
  --tg-btn-fg: #9d573a;
}

.tg-agegate__no,
.tg-agegate__no:hover,
.tg-agegate__no:focus-visible {
  display: block;
  margin-top: 1.25rem;
  color: #ffffff;
  font-size: 0.875rem;
}

.tg-agegate__note {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.85;
}