@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;
  --red:#8b0304;
  --dark:#25201c;
  --muted:#5d554b;
  --line:rgba(139,3,4,.35);

  /* TYPOGRAPHY */
  --font-title:"Americana", serif;
  --font-body:"Montserrat", Arial, sans-serif;
  --font-ui:var(--font-body);
  --type-body:14px;
  --type-small:12px;
  --type-caption:11px;
  --type-h1:clamp(36px,4.6vw,58px);
  --type-h2:clamp(28px,3.1vw,42px);
  --type-h3:clamp(20px,2vw,28px);
  --leading-body:1.75;
  --leading-title:1.08;

  /* 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:var(--type-body);
  line-height:var(--leading-body);
  font-weight:var(--fw-regular);

  letter-spacing:0;

  -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:var(--leading-title);

  letter-spacing:0;
}

h1{
  font-size:var(--type-h1);
}

h2{
  font-size:var(--type-h2);
}

h3{
  font-size:var(--type-h3);
}

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{
  --fade-y:28px;
  --fade-duration:.82s;
  --fade-delay:0ms;
  --fade-ease:cubic-bezier(.22,.72,.22,1);

  opacity:0;
  transform:translate3d(0,var(--fade-y),0);
  transition:
    opacity var(--fade-duration) var(--fade-ease) var(--fade-delay),
    transform var(--fade-duration) var(--fade-ease) var(--fade-delay);
  animation:none;
  will-change:opacity,transform;
}

.fadein-up.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}

@media (prefers-reduced-motion: reduce){
  .fadein-up{
    opacity:1;
    transform:none;
    transition:none;
    animation:none;
  }
}

/* =========================================================
   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);
  }

}