/* Quiet the Sirens — shared styles */

@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-baskerville-400.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-baskerville-400-italic.woff2") format("woff2");
}

:root {
  --cream: rgb(255, 245, 217);
  --navy: rgb(24, 34, 65);
  --ink: rgb(21, 26, 45);
  --slate: rgb(83, 108, 124);
  --sans: "Helvetica Neue", Arial, sans-serif;
  --serif: "Libre Baskerville", Georgia, serif;
  --gutter: 2vw;
  /* Squarespace fluid type: size = (v - 1) * 1.2vw + 1rem, capped at a 3000px page width */
  --step: 1.2vw;
}

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

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  /* keep the footer at the bottom of short pages, as Squarespace does */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

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

a { color: inherit; }

p { margin: 1rem 0; }
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}
h1 { font-size: min(calc(2.6 * var(--step) + 1rem), calc(2.6 * 36px + 1rem)); line-height: 1.1648; }
h2 { font-size: min(calc(1.8 * var(--step) + 1rem), calc(1.8 * 36px + 1rem)); line-height: 1.2064; }
h3, .h3 { font-size: min(calc(1.1 * var(--step) + 1rem), calc(1.1 * 36px + 1rem)); line-height: 1.2428; }
h4 { font-size: min(calc(0.2 * var(--step) + 1rem), calc(0.2 * 36px + 1rem)); line-height: 1.3; }

@media (max-width: 767px) and (orientation: portrait) {
  /* Squarespace scales mobile type by viewport height */
  :root { --step: min(1.2vh, 10.8px); }
  h1, h2, h3, h4, .h3 { font-size: calc(var(--v) * var(--step) + 1rem); }
  h1 { --v: 2.6; }
  h2 { --v: 1.8; }
  h3, .h3 { --v: 1.1; }
  h4 { --v: 0.2; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 100;
  padding: 1.3em 4em;
  border-radius: 300px;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; }

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

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2.3vw var(--gutter);
}

.site-logo { grid-column: 2; display: block; line-height: 0; }
.site-logo img { width: min(32.5vw, 395px); height: auto; }

.site-nav { grid-column: 1; grid-row: 1; }
.site-nav ul {
  display: flex;
  gap: 1.8em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: min(calc(1rem - 0.12vw), 0.9rem);
}
.site-nav a {
  display: block;
  padding: 0.1em 0;
  line-height: 3;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-nav a {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 0.1em) / 0 1px;
  transition: background-size 0.3s;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { background-size: 100% 1px; }

.menu-toggle { display: none; }

@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  .site-header {
    grid-template-columns: 1fr auto;
    padding: calc(6vw + 4px) 6vw calc(6vw + 3px);
  }
  .site-logo { grid-column: 1; position: relative; z-index: 2; }
  .site-logo img { width: auto; height: 30px; }

  .menu-toggle {
    display: block;
    grid-column: 2;
    position: relative;
    z-index: 2;
    width: 47px;
    height: 37px;
    margin: -4px -6px -3px 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cream);
    cursor: pointer;
  }
  .menu-toggle::before,
  .menu-toggle::after {
    content: "";
    position: absolute;
    left: 6px;
    width: 35px;
    height: 1px;
    background: currentColor;
    transition: transform 0.25s, top 0.25s;
  }
  .menu-toggle::before { top: 12px; }
  .menu-toggle::after { top: 23px; }
  .menu-open .menu-toggle::before { top: 18px; transform: rotate(45deg); }
  .menu-open .menu-toggle::after { top: 18px; transform: rotate(-45deg); }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.6s, opacity 0.4s;
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; }
  .menu-open { overflow: hidden; }
  .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 6.6vmin;
  }
  .site-nav a { line-height: 1; padding: 0; margin: 3vw 5vw; letter-spacing: -0.005em; }
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.section > * { position: relative; }

.section-bg {
  position: absolute !important;
  inset: 0;
}
.section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay, transparent);
  opacity: var(--overlay-opacity, 1);
}

/* First section sits under the absolutely positioned header */
.section--first { padding-top: calc(4.6vw + min(6.75vw, 82px)); }
@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  .section--first { padding-top: calc(12vw + 37px); }
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 300px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

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

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 33vh;
  padding: 0 13.25vw 36px 6.05vw;
  background: var(--slate);
}
.site-footer .logos { width: 55.7vw; height: auto; }
.instagram { display: block; flex: none; width: 48px; height: 48px; }
.instagram svg { display: block; width: 100%; height: 100%; fill: var(--cream); }

@media (max-width: 767px) {
  .site-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: center;
    gap: 108px;
    padding: 172px 6vw 118px;
  }
  .site-footer .logos { width: 100%; }
  .instagram { align-self: flex-end; margin-right: -12px; }
}