/*
 * Lock In Infusions: styles shared by every page (colours, type, header, phone
 * menu, footer). The 21+ gate is in entry.css; page styles are in home.css and
 * legal.css. No build step.
 *
 * The layout is a measured copy of the Wix site, which scales everything with
 * the width of the window. Two layouts exist, as on the original:
 *   - phone and tablet (under 1024px wide): numbers are the pixel sizes of the
 *     original at a 390px-wide window.
 *   - desktop (1024px and wider): numbers are the pixel sizes of the original
 *     at a 1440px-wide window; growth stops at 1920px.
 * So "calc(24 * var(--f))" reads as "24px on the reference phone".
 */

@font-face {
  font-family: "Old Standard TT";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/old-standard-tt-italic-latin.woff2") format("woff2");
}

:root {
  /* Colours */
  --ink: #000;
  --paper: #fff;
  --menu-ink: #31190f;
  --menu-muted: #595959;
  --focus: #116dff;

  /* Type. TODO: the original uses Neue Haas Grotesk Display Pro, a licensed
     font served by Wix. It is not copied here; system fonts stand in. Once a
     licence is in place (for example an Adobe Fonts kit), put that font first
     in --font-sans and set --fit-text and --fit-display to 0em. */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Old Standard TT", "Times New Roman", Times, serif;
  /* The stand-in fonts are wider than the original. These two values tighten
     the letter spacing by the measured difference (one for body text, one for
     headings) so lines break where they do on the original. */
  --fit-text: -0.032em;
  --fit-display: -0.034em;
  --tight: -0.05em;                              /* the original's own tight setting */
  --pill: 999px;                                 /* fully rounded ends */
  --tight-sans: calc(var(--tight) + var(--fit-display));

  /* Scaling units (see the note at the top of this file) */
  --m: calc(100vw / 390);                  /* phone: widths and side margins */
  --f: calc(min(100vw, 700px) / 390);      /* phone: type and vertical space, stops growing at 700px */
  --u: calc(min(100vw, 1920px) / 1440);    /* desktop: everything, stops growing at 1920px */
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--fit-text);
}

h1, h2, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

main:focus { outline: none; }

/* ---------- Shared pieces ---------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--focus);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transform: translate(-50%, -150%);
}

.skip-link:focus {
  transform: translate(-50%, 8px);
}

/* Circle-plus link: "Our Vision", "Email Me", "Enter" */
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--f));
  height: calc(47 * var(--f));
  color: inherit;
  font-family: var(--font-serif);
  font-size: calc(16 * var(--f));
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tight);
  text-decoration: none;
  text-transform: capitalize;
}

.icon-link__icon {
  flex: none;
  width: calc(28 * var(--f));
  height: calc(28 * var(--f));
}

.icon-link:hover .icon-link__label,
.icon-link:focus-visible .icon-link__label {
  text-decoration: underline;
}

/* Keyboard focus draws a pill around the whole link instead of a box. The
   rounding is applied only while focused so it never trims the clickable area. */
.icon-link:focus-visible {
  border-radius: var(--pill);
  outline-offset: calc(4 * var(--f));
}

/* Menu links: plain, with the current page underlined */
.site-nav a,
.mobile-menu__nav a,
.site-footer__nav a {
  text-decoration: none;
}

.site-nav a[aria-current="page"],
.mobile-menu__nav a[aria-current="page"],
.site-footer__nav a[aria-current="page"] {
  text-decoration: underline;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--paper);
}

.site-header--sticky {
  position: sticky;
  top: 0;
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: calc(70 * var(--f));
}

/* On phones these three live inside the menu instead */
.site-nav,
.site-header__age,
.site-header__avail {
  display: none;
}

.menu-toggle,
.menu-close {
  width: calc(44 * var(--f));
  height: calc(44 * var(--f));
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.menu-toggle {
  margin: calc(8 * var(--f)) calc(31 * var(--m) - 7 * var(--f)) 0 0;
  padding: calc(7 * var(--f));
}

.menu-toggle svg, .menu-close svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Phone menu ---------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: auto;
  background: var(--paper);
  color: var(--menu-ink);
}

.mobile-menu[hidden] {
  display: none;
}

.menu-open body {
  overflow: hidden;
}

.menu-close {
  position: absolute;
  top: calc(18 * var(--f));
  right: calc(32 * var(--m) - 14 * var(--f));
  padding: calc(14 * var(--f));
}

.mobile-menu__nav {
  margin: calc(132 * var(--f)) 0 0 calc(40 * var(--m));
  font-size: calc(16 * var(--f));
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.mobile-menu__nav li + li {
  margin-top: calc(16 * var(--f));
}

/* Bigger tap area without moving the text: padding out, the same margin back
   in. 8 up and 8 down is half the gap between two menu lines, so the areas of
   neighbouring links meet but never overlap. */
.mobile-menu__nav a,
.site-footer__nav a {
  display: inline-block;
  margin: calc(-8 * var(--f)) calc(-12 * var(--f));
  padding: calc(8 * var(--f)) calc(12 * var(--f));
}

.mobile-menu__avail {
  margin: calc(21 * var(--f)) 0 0 calc(38 * var(--m));
  color: var(--menu-muted);
  font-size: calc(14 * var(--f));
  line-height: 1.3;
  text-transform: uppercase;
}

.mobile-menu__age {
  width: calc(285 * var(--f));
  max-width: calc(100% - 48 * var(--m));
  margin: calc(33 * var(--f)) auto 0;
  color: var(--ink);
  font-size: calc(14 * var(--f));
  line-height: 1.25;
  text-align: center;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
}

.site-footer__inner {
  position: relative;
  padding: calc(40 * var(--f)) 0 calc(29 * var(--f));
}

.site-footer__lead {
  padding-left: calc(24 * var(--m));
}

.site-footer__title {
  font-size: calc(32 * var(--f));
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tight-sans);
}

.site-footer__email {
  margin-top: calc(8.5 * var(--f));
}

.site-footer__cols {
  display: grid;
  grid-template-columns: calc(158 * var(--m)) calc(186 * var(--m));
  margin-top: calc(57.5 * var(--f));
  padding-left: calc(22 * var(--m));
}

.site-footer__nav {
  margin-top: calc(1 * var(--f));
  font-size: calc(14 * var(--f));
  line-height: 1.25;
  text-transform: uppercase;
}

.site-footer__contact {
  font-size: calc(16 * var(--f));
  line-height: 1.3;
}

.site-footer__legal {
  margin: calc(27 * var(--f)) 0 0 calc(21 * var(--m));
  font-size: calc(16 * var(--f));
  line-height: 1.3;
}

.site-footer__legal li + li {
  margin-top: calc(2.2 * var(--f));
}

.site-footer__copy {
  margin: calc(32 * var(--f)) 0 0 calc(12 * var(--m));
  font-size: calc(14 * var(--f));
  line-height: 1.3;
}

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

@media (min-width: 1024px) {
  .wrap {
    max-width: 1920px;
    margin-inline: auto;
  }

  .icon-link {
    gap: calc(5 * var(--u));
    height: calc(47 * var(--u));
    font-size: calc(18 * var(--u));
  }

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

  .icon-link:focus-visible {
    outline-offset: calc(4 * var(--u));
  }

  /* Header */
  .site-header__inner {
    display: grid;
    grid-template-columns: calc(325 * var(--u)) calc(532 * var(--u)) calc(337 * var(--u)) 1fr;
    align-items: center;
    height: calc(60 * var(--u));
    font-size: calc(15.75 * var(--u));
    line-height: 1.25;
  }

  .menu-toggle, .mobile-menu {
    display: none;
  }

  .site-nav {
    display: block;
    grid-column: 2;
    text-transform: uppercase;
  }

  .site-nav ul {
    display: flex;
    gap: calc(35 * var(--u));
  }

  .site-header__age {
    display: block;
    grid-column: 3;
    width: calc(343 * var(--u));   /* 6 wider than the original box so "21 years" reliably stays on line one */
  }

  .site-header__avail {
    display: block;
    grid-column: 4;
    justify-self: end;
    width: calc(185 * var(--u));
    text-transform: uppercase;
  }

  /* Footer */
  .site-footer__inner {
    display: grid;
    grid-template-columns: calc(543 * var(--u)) calc(253 * var(--u)) calc(346 * var(--u)) 1fr;
    align-items: start;
    min-height: calc(513 * var(--u));
    padding: calc(42 * var(--u)) 0 0 calc(28 * var(--u));
  }

  .site-footer__lead {
    padding-left: 0;
  }

  .site-footer__title {
    font-size: calc(54 * var(--u));
  }

  .site-footer__email {
    margin-top: calc(52 * var(--u));
  }

  .site-footer__cols {
    display: contents;
  }

  .site-footer__nav {
    margin-top: calc(3 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1.3;
  }

  .site-footer__contact {
    width: calc(210 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .site-footer__legal {
    margin: calc(2 * var(--u)) 0 0;
    font-size: calc(18 * var(--u));
  }

  .site-footer__legal li + li {
    margin-top: calc(49.6 * var(--u));
  }

  .site-footer__copy {
    position: absolute;
    bottom: calc(34 * var(--u));
    left: calc(13 * var(--u));
    margin: 0;
    font-size: calc(18 * var(--u));
  }
}