:root{
  --red:#c93a2f;
  --black:#151515;

  --cream:#f7f1e8;
  --cream-deep:#efe6d8;

  --yellow:#d8ab32;
  --orange:#df7642;
  --pink:#d06b93;
  --green:#3f6b5c;

  --orange-wash:#f8ede4;
  --pink-wash:#f8edf2;
  --yellow-wash:#f6efd8;

  --shadow:rgba(0,0,0,.12);
}

@font-face{
  font-family:'Mouthfeel';
  src:url('assets/mouthfeel.ttf') format('truetype');
  font-display:swap;
}

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

html{
  scroll-behavior:smooth;
}

body{
  background:var(--cream);
  color:var(--black);
  font-family:'DM Sans',sans-serif;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.03;

  background-image:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.4) 1px, transparent 1px);

  background-size:7px 7px;

  z-index:9999;
}

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

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

section{
  position:relative;
}

nav{
  position:sticky;
  top:0;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:1rem 2rem;

  background:rgba(247,241,232,.82);

  backdrop-filter:blur(18px);

  border-bottom:1px solid rgba(17,16,8,.12);
}

.nav-brand{
  font-family:'Mouthfeel','Fraunces',serif;
  font-size:2rem;
  color:var(--red);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:3rem;

  list-style:none;
}

.nav-links a{
  font-family:'Syne',sans-serif;
  font-size:.78rem;
  font-weight:700;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(17,16,8,.6);

  transition:.25s ease;
}

.nav-links a:hover{
  color:var(--red);
}

.nav-pill{
  background:var(--cream-deep);

  border:1.5px solid var(--black);

  border-radius:999px;

  padding:.8rem 1.3rem;

  font-family:'Syne',sans-serif;
  font-size:.7rem;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;

  box-shadow:2px 2px 0 rgba(0,0,0,.12);

  transition:.25s ease;
}

.nav-pill:hover{
  transform:translateY(-1px);

  background:var(--yellow-wash);
}

h1{
  font-family:'Mouthfeel','Fraunces',serif;

  line-height:.92;

  letter-spacing:0;
}

p{
  line-height:1.75;
}

.card{
  border-radius:18px;

  box-shadow:6px 6px 0 rgba(0,0,0,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.card:hover{
  transform:
    translateY(-4px)
    rotate(-.4deg);
}
.footer-main-logo{
  width:min(180px,42vw);
  height:auto;
  display:block;
}
.soft-wave{
  height:72px;
  margin-bottom:-1px;
}

.wave-divider{
  line-height:0;
  overflow:hidden;
}

.wave-divider svg{
  display:block;
  width:100%;
  height:100%;
}

.wave-divider path{
  fill:currentColor;
}

.wave-from-pink{
  background:var(--pink-wash);
}

.wave-to-cream{
  color:var(--cream);
}