@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces-Italic.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/Jost.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ox:#5A1A1F;
  --ox-deep:#4E171B;
  --bone:#EFE7DA;
  --brass:#A8834F;
  --ink:#1E1A19;
  --copy:#4A403B;
  --muted:#6B635C;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--bone);
  color:var(--ink);
  font-family:"Jost",sans-serif;
  font-size:18px;
  font-weight:400;
  font-variation-settings:"wght" 400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:4px;
}

.skip{
  position:absolute;
  left:16px;
  top:-80px;
  z-index:50;
  background:var(--ink);
  color:var(--bone);
  padding:10px 16px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:500;
}
.skip:focus{top:16px}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:var(--bone);
  background:var(--ink);
  text-align:center;
}
.hero-media,
.hero-overlay{
  position:absolute;
  inset:0;
}
.hero-media{z-index:0;background:var(--ink)}
.hero-poster,
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero-video{
  opacity:0;
  transition:opacity .6s ease;
}
.hero.is-playing .hero-video{opacity:1}
.hero-overlay{
  z-index:1;
  background:
    linear-gradient(180deg, rgba(30,26,25,.42) 0%, rgba(90,26,31,.28) 38%, rgba(30,26,25,.58) 72%, rgba(30,26,25,.82) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(30,26,25,.08) 0%, rgba(30,26,25,.42) 70%);
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:2;
  padding:64px 32px 96px;
  width:100%;
  max-width:880px;
  margin:0 auto;
}
.brand{
  margin:0 0 32px;
  font-size:inherit;
  font-weight:inherit;
  line-height:normal;
  letter-spacing:0;
  text-shadow:none;
  color:inherit;
}
.brand img{
  width:min(440px, 82vw);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 2px 10px rgba(30,26,25,.65)) drop-shadow(0 8px 28px rgba(30,26,25,.45));
}
.hero .slogan{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-style:normal;
  font-variation-settings:"opsz" 144,"wght" 500,"SOFT" 0,"WONK" 0;
  font-size:clamp(40px, 6vw, 72px);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--bone);
  margin:0 0 16px;
  text-shadow:0 2px 28px rgba(30,26,25,.55);
}
.hero .slogan em{
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 144,"wght" 400,"SOFT" 50,"WONK" 0;
}
.lede{
  font-family:"Jost",sans-serif;
  font-size:clamp(16px, 1.5vw, 19px);
  font-weight:400;
  font-variation-settings:"wght" 400;
  color:var(--bone);
  letter-spacing:.02em;
  max-width:36em;
  margin:0 auto;
  text-shadow:0 1px 18px rgba(30,26,25,.5);
  opacity:.94;
}

/* Fade in on load */
.hero-content .brand,
.hero-content .slogan,
.hero-content .lede,
.hero-toggle{
  animation:rise .9s ease both;
}
.hero-content .slogan{animation-delay:.18s}
.hero-content .lede{animation-delay:.34s}
.hero-toggle{animation-delay:.7s}
.scroll-cue{animation:fadein .9s ease both;animation-delay:.7s}
@keyframes fadein{
  from{opacity:0}
  to{opacity:1}
}
@keyframes rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.hero-toggle{
  position:absolute;
  z-index:3;
  right:20px;
  bottom:24px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 14px 8px 12px;
  border:1px solid rgba(168,131,79,.85);
  background:rgba(30,26,25,.62);
  color:var(--bone);
  font-family:"Jost",sans-serif;
  font-size:11px;
  font-weight:500;
  font-variation-settings:"wght" 500;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:0;
}
.hero-toggle:hover{
  background:rgba(30,26,25,.82);
  border-color:var(--brass);
}
.hero-toggle[hidden]{display:none}
.toggle-icon{
  width:12px;
  height:12px;
  display:block;
  background:
    linear-gradient(var(--bone),var(--bone)) 0 0/4px 12px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 8px 0/4px 12px no-repeat;
}
.hero-toggle.is-paused .toggle-icon{
  background:
    linear-gradient(to bottom right, transparent 50%, var(--bone) 50%) 0 0 / 0 0,
    none;
  width:0;
  height:0;
  border-style:solid;
  border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--bone);
  background:none;
}

.scroll-cue{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:28px;
  width:24px;
  height:40px;
  margin-left:-12px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.scroll-cue i{
  display:block;
  width:14px;
  height:14px;
  border-right:1px solid var(--bone);
  border-bottom:1px solid var(--bone);
  transform:rotate(45deg);
  opacity:.85;
  animation:nudge 1.8s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.4}
  50%{transform:rotate(45deg) translate(3px,3px);opacity:.95}
}

/* ---------- Below the hero ---------- */
.below{
  background:var(--bone);
  color:var(--ink);
  text-align:center;
  padding:80px 32px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.now{width:100%;max-width:420px;margin:0 0 40px}
.label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-size:11px;
  font-weight:500;
  font-variation-settings:"wght" 500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ox);
  margin:0 0 22px;
}
.hair{
  display:inline-block;
  width:56px;
  height:1px;
  background:var(--brass);
  flex:0 0 56px;
}
.concept{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-variation-settings:"opsz" 72,"wght" 500,"SOFT" 0,"WONK" 0;
  font-size:clamp(28px, 3.2vw, 36px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ox);
  margin:0 0 6px;
}
.place{
  font-size:14px;
  font-weight:500;
  font-variation-settings:"wght" 500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--copy);
  margin:0 0 18px;
}
.visit{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  font-variation-settings:"wght" 500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ox);
  border-bottom:1px solid var(--brass);
  padding-bottom:4px;
}
.visit:hover,
.visit:focus-visible{
  color:var(--ox-deep);
  border-bottom-color:var(--ox);
}
.area{
  margin:18px 0 0;
  font-size:15px;
  font-weight:400;
  font-variation-settings:"wght" 400;
  letter-spacing:.01em;
  color:var(--copy);
  line-height:1.45;
}
.soon{
  margin:18px 0 0;
  font-family:"Fraunces",serif;
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 36,"wght" 400,"SOFT" 40,"WONK" 0;
  font-size:18px;
  color:var(--copy);
}
.contact{margin:0 0 8px}
.contact a{
  font-size:13px;
  font-weight:500;
  font-variation-settings:"wght" 500;
  letter-spacing:.12em;
  color:var(--ox);
  border-bottom:1px solid rgba(168,131,79,.7);
  padding-bottom:3px;
}
.contact a:hover,
.contact a:focus-visible{border-bottom-color:var(--ox)}

.connect{text-align:center;padding:8px 24px 28px}
.connect .label{margin-bottom:14px}
.connect .contact{margin:0 0 18px}
.social{list-style:none;display:flex;justify-content:center;gap:14px;margin:0;padding:0}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(168,131,79,.7);color:var(--ox);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.social a:hover,.social a:focus-visible{background:var(--ox);color:var(--bone);border-color:var(--ox)}
.social svg{width:20px;height:20px}

.ftr{
  background:var(--bone);
  text-align:center;
  padding:16px 24px 40px;
}
.ftr p{
  font-size:11px;
  font-weight:500;
  font-variation-settings:"wght" 500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--copy);
}

@media (max-width:700px){
  .lede .break{display:block}
  .hero-content{padding:56px 22px 108px}
  .brand{margin-bottom:28px}
  .brand img{width:min(300px, 82vw)}
  .hero .slogan{font-size:40px}
  .lede{font-size:16px}
  .hero-toggle{right:14px;bottom:20px}
  .scroll-cue{bottom:24px}
  .below{padding:64px 22px 28px}
  .hair{width:36px;flex-basis:36px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-content .brand,
  .hero-content .slogan,
  .hero-content .lede,
  .scroll-cue,
  .hero-toggle,
  .scroll-cue i,
  .hero-video{
    animation:none !important;
    transition:none !important;
    opacity:1;
    transform:none;
  }
  .hero-video{display:none}
}

.no-video .hero-video{display:none}
.no-video .hero-toggle{display:none}

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