/*
 * Lock In Infusions: the 21+ age gate. Loaded on every page, after site.css
 * (which explains the --f / --m / --u sizing units used below).
 *
 * The names here say "entry", not "age gate", on purpose: some content
 * blockers hide or block anything named after an age gate.
 */

/* Each page is hidden in its own HTML (the "hidden" attribute on #site), so it
   stays closed even if this file never loads. These rules open it: site.js adds
   "entered" to <html> once the Enter link is used and remembers that for the
   browser tab. Without JavaScript the Enter link still works through the #site
   anchor. */

.entered .site,
html:not(.js) .site:target {
  display: block;
}

.entered .site-entry,
html:not(.js) .site:target ~ .site-entry {
  display: none;
}

/* Same as the two rules above for links that jump inside the page. Kept apart
   because a browser that does not know :has() would drop the whole rule. */
html:not(.js) .site:has(:target) {
  display: block;
}

html:not(.js) .site:has(:target) ~ .site-entry {
  display: none;
}

.site-entry {
  display: none;
}

/* Same as the two rules above for links that jump inside the page. Kept apart
   because a browser that does not know :has() would drop the whole rule. */
html:not(.js) .site:has(:target) {
  display: block;
}

html:not(.js) .site:has(:target) ~ .site-entry {
  display: none;
}

.site-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--f));
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(40 * var(--f)) calc(24 * var(--m));
  background: var(--paper);
  text-align: center;
}

.site-entry__logo {
  width: min(100%, calc(342 * var(--f)));
  height: auto;
  aspect-ratio: 1336 / 486;
  object-fit: cover;
}

.site-entry__text {
  max-width: 20em;
  font-size: calc(18 * var(--f));
  line-height: 1.25;
}

/* The Enter link is the one action on this screen: a size up from the same
   link elsewhere on the site. */
.site-entry .icon-link {
  height: calc(56 * var(--f));
  font-size: calc(19 * var(--f));
}

.site-entry .icon-link__icon {
  width: calc(34 * var(--f));
  height: calc(34 * var(--f));
}

/* ================= Desktop: 1024px and wider ================= */

@media (min-width: 1024px) {
  .site-entry {
    gap: calc(36 * var(--u));
  }

  .site-entry__logo {
    width: calc(560 * var(--u));
  }

  .site-entry__text {
    font-size: calc(24 * var(--u));
  }

  .site-entry .icon-link {
    height: calc(56 * var(--u));
    font-size: calc(22 * var(--u));
  }

  .site-entry .icon-link__icon {
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
  }
}