@font-face {
  font-family: "Cormorant";
  src: url("../assets/fonts/Cormorant-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant";
  src: url("../assets/fonts/Cormorant-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/fonts/HelveticaNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/fonts/HelveticaNeue-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../assets/fonts/HelveticaNeue-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --accent: #D30909;
  --white: #F5F5F5;
  --black: #000000;
  --paper: #E2DACE;
  --sticker: #FFCC80;
  --ink: #2A1C0A;
  --dark: #1C1C1C;
  --kraft: #C4AE94;
  --kraft-dark: #A48E74;

  --font-serif: "Cormorant", Georgia, serif;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(24px, 3.6vw, 64px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scrollbar-gutter: stable;
}

html.is-locked {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

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

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

.rough {
  position: relative;
  isolation: isolate;
  background: none;
}

.rough::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rough-bg, var(--white));
  filter: var(--rough-filter, url(#rough-edge));
  transition: background-color 0.25s var(--ease);
  pointer-events: none;
}

.rough--alt {
  --rough-filter: url(#rough-edge-alt);
}

.rough--wave {
  --rough-filter: url(#rough-wave);
}

.rough--wave-alt {
  --rough-filter: url(#rough-wave-alt);
}

.rough--soft {
  --rough-bg: rgba(245, 245, 245, 0.06);
}

.rough--soft::before {
  box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.12);
}

.rough--white { --rough-bg: var(--white); }
.rough--red { --rough-bg: var(--accent); }
.rough--dark { --rough-bg: var(--dark); }
.rough--paper { --rough-bg: var(--paper); }
.rough--sticker { --rough-bg: var(--sticker); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 32px;
  border: 0;
  --rough-bg: var(--white);
  color: var(--black);
  font: 700 18px/1.2 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover,
.btn--red {
  --rough-bg: var(--accent);
}

.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(42, 28, 10, 0.25);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.close-btn:hover {
  border-color: rgba(42, 28, 10, 0.5);
  background: rgba(42, 28, 10, 0.08);
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: clip;
  }

  @supports not (overflow-x: clip) {
    body {
      overflow-x: hidden;
    }
  }

  main > section,
  #main-footer {
    max-width: 100vw;
    clip-path: inset(0);
  }

  .legal,
  .table,
  .initiation {
    clip-path: none;
  }
}