@font-face{
  font-family:"Americana";
  src:
    url("../fonts/Americana.woff2") format("woff2"),
    url("../fonts/Americana.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Montserrat";
  src:
    url("../fonts/Montserrat-Light.woff2") format("woff2"),
    url("../fonts/Montserrat-Light.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Montserrat";
  src:
    url("../fonts/Montserrat-Regular.woff2") format("woff2"),
    url("../fonts/Montserrat-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Montserrat";
  src:
    url("../fonts/Montserrat-SemiBold.woff2") format("woff2"),
    url("../fonts/Montserrat-SemiBold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Montserrat";
  src:
    url("../fonts/Montserrat-Bold.woff2") format("woff2"),
    url("../fonts/Montserrat-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   ROOT SYSTEM
========================================================= */

:root{

  /* COLOR SYSTEM */
  --cream:#f4f1e9;
  --cream-soft:#f7f4ed;
  --cream-alt:#edeae5;
  --red:#8b0304;
  --red-deep:#741217;
  --dark:#25201c;
  --ink:#2b2723;
  --body:#4e4e4e;
  --muted:#5d554b;
  --line:rgba(139,3,4,.35);

  /* TYPOGRAPHY */
  --font-title:"Americana", serif;
  --font-body:"Montserrat", Arial, sans-serif;
  --font-ui:var(--font-body);

  /* FONT WEIGHT */
  --fw-regular:400;
  --fw-semibold:600;
  --fw-bold:700;

  /* LAYOUT */
  --container:1140px;
  --wide:1180px;

  /* TRANSITION */
  --ease:cubic-bezier(.22,.72,.22,1);

}

/* =========================================================
   RESET
========================================================= */

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:var(--cream);
  color:#000;

  font-family:var(--font-body);
  font-size:13px;
  line-height:1.82;
  font-weight:var(--fw-regular);

  letter-spacing:.01em;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body.menu-open,
body.booking-open{
  overflow:hidden;
}

/* =========================================================
   GLOBAL ELEMENT
========================================================= */

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

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

button,
input,
select,
textarea{
  font-family:var(--font-ui);
  font-size:inherit;
}

button,
[type="button"],
[type="submit"],
a[href],
select,
.clickable{
  cursor:pointer;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
  margin:0;

  font-family:var(--font-title);
  font-weight:400;
  line-height:1.12;

  letter-spacing:0;
}

p{
  margin:0;
}

/* =========================================================
   LAYOUT
========================================================= */

.container{
  width:min(var(--container), calc(100% - 90px));
  margin-inline:auto;
}

.wide-container{
  width:min(var(--wide), calc(100% - 90px));
  margin-inline:auto;
}

/* =========================================================
   ANIMATION
========================================================= */

.fadein-up{
  opacity:0;
  transform:translateY(28px);

  animation:fadeInUp 1.4s var(--ease) forwards;

  animation-play-state:paused;
}

@keyframes fadeInUp{

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* =========================================================
   404
========================================================= */

.not-found{
  min-height:70vh;

  padding:180px 40px 120px;

  text-align:center;

  background:var(--cream);
}

.not-found h1{
  font-size:48px;
  margin-bottom:18px;
}

.not-found p{
  margin-bottom:24px;

  font-size:15px;
}

.not-found a{
  color:var(--red);

  font-weight:var(--fw-bold);

  letter-spacing:.16em;
  text-transform:uppercase;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:980px){

  .container,
  .wide-container{
    width:calc(100% - 38px);
  }

}