/* Shared shell for the site's text pages (privacy policy, terms): the home page's header, menu and footer
   without its animation scripts. Loaded after site.css. */

/* ---- fluid type scale: the same values the home page sets inline */
html, body { overscroll-behavior: none; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { font-size: 1.484375rem; }
@media screen and (max-width: 2560px) { html { font-size: calc(-0.006009615384615419rem + 0.9314903846153846vw); } }
@media screen and (max-width: 1728px) { html { font-size: calc(-0.009345794392523143rem + 0.9345794392523362vw); } }
@media screen and (max-width: 991px) { html { font-size: calc(0.021640258215962493rem + 1.8779342723004695vw); } }
@media screen and (max-width: 767px) { html { font-size: calc(-0.0025905678851174934rem + 4.14490861618799vw); } }

/* ---- header: same layout overrides as the home page */
.header {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  display: grid;
}
.header__left {
  justify-self: start;
  display: flex;
}
.header_right { justify-self: end; }
.header__menu {
  align-items: center;
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
}
.site-logo { display: block; }
.site-logo--on-light { display: none; }
body.dark .site-logo--on-light { display: block; }
body.dark .site-logo--on-dark { display: none; }

/* body.dark is the light appearance on this site, so it shows the moon ("switch to dark") */
.header__theme-night, .header__theme-day { display: none; }
body.dark .header__theme-night { display: flex; }
body:not(.dark) .header__theme-day { display: flex; }

.header__menu:focus-visible, .header__theme:focus-visible, .page a:focus-visible, .menu a:focus-visible, .header a:focus-visible {
  outline: 2px solid #ff6b02;
  outline-offset: 3px;
}

/* ---- menu: closed it is the grey pill behind the header pill, open it is the full panel */
.menu .menu__wrap {
  width: 15rem;
  height: 2.7rem;
  padding: 0;
  transition: width .4s cubic-bezier(.25, .46, .45, .94), height .4s cubic-bezier(.25, .46, .45, .94), padding .4s cubic-bezier(.25, .46, .45, .94), transform .4s cubic-bezier(.25, .46, .45, .94);
  transform: translateY(1.25rem);
}
.menu.is-open .menu__wrap {
  width: 18rem;
  height: 39rem;
  padding: 6.25rem 1.25rem 2.5rem;
  transform: none;
}
.menu .menu__item {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility 0s .2s;
}
.menu.is-open .menu__item {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s .2s, visibility 0s;
}
.menu.is-open .menu__item:nth-child(2) { transition-delay: .25s, 0s; }
.menu.is-open .menu__item:nth-child(3) { transition-delay: .3s, 0s; }
.menu.is-open .menu__item:nth-child(4) { transition-delay: .35s, 0s; }
.header__menu-line { transition: transform .25s cubic-bezier(.25, .46, .45, .94); }
.header__menu.is-open .header__menu-line.is-top { transform: translate(0, .03rem) rotate(45deg); }
.header__menu.is-open .header__menu-line.is-bottom { transform: translate(0, -.03rem) rotate(-45deg); }
@media screen and (max-width: 991px) {
  .menu.is-open .menu__wrap {
    width: 16.2rem;
    padding: 5rem 1rem 1rem;
  }
}
@media screen and (max-width: 767px) {
  .header_right { display: none; }
  .menu .menu__wrap {
    width: 15.5rem;
    transform: translateY(.5rem);
  }
  .menu.is-open .menu__wrap { transform: none; }
}

/* ---- text page */
.legal { padding: 12rem 2rem 0; }
.legal__head, .legal__section, .legal__closing {
  border-top: 1px solid var(--lines);
  grid-template-columns: 1fr 2fr;
  column-gap: 2rem;
  display: grid;
}
.legal__head { padding: 2rem 0 5rem; }
.legal__title { margin: 0; }
.legal__intro {
  max-width: 46rem;
  margin-top: 2.5rem;
}
.legal__section, .legal__closing { padding: 2.5rem 0 3.5rem; }
.legal__num { padding-top: .6rem; }
.legal__h {
  color: var(--fonts-100);
  font-family: var(--_font-family---font-family);
  font-size: var(--_fonts---h4);
  font-weight: var(--_font-family---regular);
  letter-spacing: -.06rem;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}
.legal__text {
  color: var(--fonts-64);
  font-family: var(--_font-family---font-family);
  font-size: var(--_fonts---body-3);
  font-weight: var(--_font-family---regular);
  max-width: 46rem;
  line-height: 1.5;
}
.legal__text p + p { margin-top: 1.1rem; }
.legal__text strong {
  color: var(--fonts-100);
  font-weight: var(--_font-family---medium);
}
.legal__closing .legal__text { color: var(--fonts-100); }
@media screen and (max-width: 991px) {
  .legal { padding-top: 10rem; }
  .legal__head, .legal__section, .legal__closing { grid-template-columns: 1fr; }
  .legal__head { padding-bottom: 3.5rem; }
  .legal__title { margin-top: 1.5rem; }
  .legal__num { padding: 0 0 1rem; }
}
@media screen and (max-width: 767px) {
  .legal { padding: 8rem 1rem 0; }
  .legal__head { padding: 1.5rem 0 3rem; }
  .legal__intro { margin-top: 1.75rem; }
  .legal__section, .legal__closing { padding: 2rem 0 2.5rem; }
  .legal__h { margin-bottom: 1rem; }
}

/* ---- footer: the home page's footer at its natural height, with a still version of its dot grid */
.footer .footer__wrap {
  height: auto;
  max-height: none;
}
.footer .footer__main {
  height: auto;
  min-height: 15rem;
}
.footer .footer__main__wrap { height: auto; }
.footer__logo {
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  display: inline-flex;
}
.footer__logo-text-custom {
  color: var(--fonts-100);
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 300;
}
.footer__logo-text-custom { white-space: nowrap; }
/* below desktop the logo box no longer reserves a wide column, so the name sits next to the mark */
@media screen and (max-width: 991px) {
  .footer .footer__logo-in {
    width: auto;
    height: auto;
  }
  .footer .footer__logo-in .site-logo { height: 2.2rem; }
}
.footer__dots {
  opacity: .15;
  background-image: radial-gradient(circle, var(--fonts-100) 0, var(--fonts-100) .5rem, #0000 calc(.5rem + .5px));
  background-repeat: space;
  background-size: 2rem 2rem;
  height: 10rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .footer .footer__main { min-height: 0; }
  .footer__dots {
    background-image: radial-gradient(circle, var(--fonts-100) 0, var(--fonts-100) .25rem, #0000 calc(.25rem + .5px));
    background-size: 1rem 1rem;
    height: 6rem;
    margin-top: 1rem;
  }
}

/* ---- links inside running text */
.legal__text a, .contact__note a {
  color: var(--fonts-100);
  text-underline-offset: .2em;
}

/* ---- contact form */
.body { --alert: #ff7a2b; }
body.dark { --alert: #c63a00; }
.contact__form {
  gap: 1.5rem;
  max-width: 46rem;
  display: grid;
}
.contact__form[hidden], .contact__done[hidden] { display: none; }
.contact__row {
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  display: grid;
}
.contact__field {
  flex-flow: column;
  gap: .6rem;
  min-width: 0;
  display: flex;
}
.contact__label { color: var(--fonts-64); }
.contact__input {
  appearance: none;
  border: 1px solid var(--lines);
  color: var(--fonts-100);
  font-family: var(--_font-family---font-family);
  font-size: var(--_fonts---body-3);
  font-weight: var(--_font-family---regular);
  background-color: #0000;
  border-radius: 1rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.25rem;
  line-height: 1.4;
  transition: border-color .2s;
}
.contact__input::placeholder { color: var(--fonts-30); }
.contact__input:hover { border-color: var(--fonts-30); }
.contact__input:focus {
  border-color: var(--fonts-100);
  outline: none;
}
textarea.contact__input {
  resize: vertical;
  min-height: 12rem;
}
.contact__field.is-invalid .contact__input { border-color: var(--alert); }
.contact__error {
  color: var(--alert);
  font-family: var(--_font-family---font-family);
  font-size: var(--_fonts---title-2);
  line-height: 1.4;
}
.contact__error:empty { display: none; }
.contact__trap {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
}
.contact__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  display: flex;
}
.contact__submit, .contact__again {
  appearance: none;
  cursor: pointer;
  background-color: var(--fonts-100);
  color: var(--mainbg);
  font-family: var(--_font-family---font-family);
  font-size: var(--_fonts---btn);
  font-weight: var(--_font-family---regular);
  letter-spacing: -.02125rem;
  border: 0;
  border-radius: 99rem;
  height: 3rem;
  padding: 0 1.75rem;
  line-height: 1.2;
  transition: background-color .2s, opacity .2s;
}
.contact__submit:hover, .contact__again:hover { background-color: #ff6b02; }
.contact__submit:focus-visible, .contact__again:focus-visible {
  outline: 2px solid #ff6b02;
  outline-offset: 3px;
}
.contact__submit[disabled] {
  cursor: progress;
  opacity: .6;
}
.contact__status { color: var(--alert); }
.contact__status:empty { display: none; }
/* keep a focused field or the thank-you message clear of the fixed header when the page scrolls to it */
.contact__input, .contact__done { scroll-margin-top: 9rem; }
.contact__done:focus { outline: none; }
.contact__again { margin-top: 2rem; }
@media screen and (max-width: 767px) {
  .contact__row { grid-template-columns: 1fr; }
  .contact__form { gap: 1.25rem; }
}