:root{
  --bg:#e0d8cd;
  --ink:#16130e;
  --smoke:#efe9d8;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: var(--ff-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0,0,0,.10) 100%);
}

/* CURSOR FOG — follows the mouse anywhere on the page */
.cursor-fog{
  position:fixed;
  top:0; left:0;
  width:520px; height:360px;
  margin-left:-260px; margin-top:-180px;
  pointer-events:none;
  z-index:25;
  background: radial-gradient(50% 55% at 50% 50%,
               rgba(248,244,232,.75),
               rgba(248,244,232,.35) 42%,
               rgba(248,244,232,0) 78%);
  filter:blur(26px);
  opacity:0;
  transition: opacity .6s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.cursor-fog.is-active{ opacity:.9; }

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:32px 64px 32px; z-index:20; background: transparent;
  transition: background .25s ease, padding-bottom .25s ease;
  font-family: var(--ff-nav);
  font-size:16px; letter-spacing: var(--ls-nav); text-transform:uppercase;
}
nav.is-scrolled{ background: var(--bg); }
nav:has(li.has-submenu:hover),
nav:has(li.has-submenu:focus-within),
nav:not(.is-scrolled):has(li.has-submenu.is-open){ padding-bottom: 88px; }
nav ul{display:flex;gap:46px;list-style:none;position:relative}
nav a{
  color:var(--ink);text-decoration:none;font-weight:400;transition:opacity .25s;
}
nav a:hover{opacity:.55}
nav a.active{ text-decoration: underline; text-underline-offset: 6px; }

nav li{ position: relative; }
nav li.has-submenu{ position: static; }
nav .submenu{
  list-style: none;
  position: absolute;
  top: 100%;
  padding-top: 14px;
  left: 0;
  background: transparent;
  display: flex;
  gap: 28px;
  white-space: nowrap;
  margin: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .25s ease;
}
nav li.has-submenu:hover .submenu,
nav li.has-submenu:focus-within .submenu,
nav:not(.is-scrolled) li.has-submenu.is-open .submenu{
  opacity: 1; visibility: visible; transform: translateY(0);
}
nav .submenu a{ font-size: .82em; }
nav .submenu .mobile-only{ display: none; }
nav .submenu a.active{ text-decoration: underline; text-underline-offset: 6px; }

/* STAGE */
.stage{
  position:relative;
  width:100vw;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}

/* Tentacles */
.tent{
  position:absolute;
  pointer-events:auto;
  mix-blend-mode:multiply;
  filter:contrast(1.02) saturate(.9);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s;
  will-change: transform;
}
.tent img{width:100%;height:100%;display:block;pointer-events:none;object-fit:contain}

.tent.left{
  left:-4vw; top:-6vh;
  width:50vw; height:100vh;
  max-width:1000px;
  z-index:8;
  animation: driftL 9s ease-in-out infinite alternate;
}
.tent.left img{object-fit:cover; object-position: left top;}

.tent.bottom{
  left:66%; bottom:-8vh;
  width:40vw; height:100vh;
  max-width:546px;
  transform: translateX(-50%);
  transform-origin: bottom center;
  z-index:8;
  animation: driftB 14s ease-in-out infinite alternate;
}
.tent.bottom img{object-position: center bottom;}

.tent.right{
  right: 0;
  top: -18vh;
  width: 100vw;
  height: 120vh;
  max-width: 1320px;
  transform: rotate(-6deg);
  transform-origin: right top;
  z-index: 8;
  animation: driftR 11s ease-in-out infinite alternate;
}
.tent.right img{object-position: right top;}

@keyframes driftL{
  0%   { transform: translate(0,0) rotate(-1deg); }
  50%  { transform: translate(10px,-6px) rotate(.4deg); }
  100% { transform: translate(-6px,8px) rotate(1.2deg); }
}
@keyframes driftR{
  0%   { transform: rotate(-6deg) translate(0,0); }
  50%  { transform: rotate(-4deg) translate(-8px, 6px); }
  100% { transform: rotate(-7deg) translate(6px,-8px); }
}
@keyframes driftB{
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%  { transform: translateX(-49%) translateY(-4px) rotate(.6deg); }
  100% { transform: translateX(-51%) translateY(3px) rotate(-.5deg); }
}

.tent.left:hover{
  animation-play-state: paused;
  transform: translate(16px,-10px) rotate(2deg) scale(1.015);
  filter: contrast(1.06) saturate(1) brightness(.97);
}
.tent.right:hover{
  animation-play-state: paused;
  transform: rotate(-2deg) translate(-14px,10px) scale(1.02);
  filter: contrast(1.06) saturate(1) brightness(.97);
}

/* HEADLINE */
.kicker{
  position:relative;z-index:3;
  font-family: var(--ff-label);
  font-size:15px; font-weight:400;
  letter-spacing: var(--ls-label); text-transform:uppercase;
  margin-bottom:16px;
}
h1{
  position:relative;z-index:3;
  font-family: var(--ff-display);
  font-weight:500;
  font-size:clamp(64px, 10.4vw, 176px);
  letter-spacing:.008em; line-height:.96;
  text-align:center; color:var(--ink);
  text-rendering:geometricPrecision;
}
h1.hero-headline{
  font-size: 0;
  line-height: 0;
  text-align: center;
  margin: 0 auto;
  width: min(84vw, 1100px);
  max-width: 92vw;
  display: block;
}
h1.hero-headline img{
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px){
  h1.hero-headline{ width: 86vw; }
}
h1 .line{display:block}
h1 .line + .line{margin-top:-.03em}
h1 .ch{
  position:relative;
  display:inline-block;
  cursor: default;
}

/* FOG — per-letter soft atmospheric mist */
h1 .ch::after{
  content:"";
  position:absolute;
  left:-80%;right:-80%;top:35%;bottom:-40%;
  pointer-events:none;
  background: radial-gradient(55% 60% at 50% 55%,
               rgba(248,244,232,.85),
               rgba(248,244,232,.45) 42%,
               rgba(248,244,232,0) 80%);
  filter:blur(18px);
  opacity:0;
  transform: translate(0, 0) scale(1);
  transition: opacity .7s ease, transform 1.2s ease;
  z-index:2;
}
h1 .ch::before{
  content:"";
  position:absolute;
  left:-130%;right:-130%;top:55%;bottom:-60%;
  pointer-events:none;
  background: radial-gradient(50% 55% at 50% 50%,
               rgba(248,244,232,.7),
               rgba(248,244,232,.3) 48%,
               rgba(248,244,232,0) 85%);
  filter:blur(30px);
  opacity:0;
  z-index:2;
  transition: opacity 1s ease;
}
h1 .ch.smoking::after{ animation: fogSit 6s ease-in-out forwards; }
h1 .ch.smoking::before{ animation: fogSitWide 6.4s ease-in-out forwards; }
h1 .ch:hover::after{
  opacity: 1;
  transform: translate(0,0) scale(1.05);
  transition: opacity .35s ease, transform .8s ease;
  animation: none;
}
h1 .ch:hover::before{
  opacity: .85;
  transition: opacity .5s ease;
  animation: none;
}

@keyframes fogSit{
  0%   { opacity:0;   transform: translate(-8px, 0) scale(.9); }
  35%  { opacity:1;   transform: translate(-2px, 0) scale(1);  }
  70%  { opacity:.85; transform: translate(6px, -2px) scale(1.05); }
  100% { opacity:0;   transform: translate(14px,-6px) scale(1.1); }
}
@keyframes fogSitWide{
  0%   { opacity:0;  transform: translate(-12px, 2px) scale(.85); }
  40%  { opacity:.9; transform: translate(-4px, 0) scale(1);    }
  75%  { opacity:.7; transform: translate(8px, -3px) scale(1.08); }
  100% { opacity:0;  transform: translate(18px,-8px) scale(1.15); }
}

.tagline{
  position:relative;z-index:3;
  margin-top:30px; text-align:center;
  font-family: var(--ff-body);
  font-weight:600;
  font-size:12px; line-height:2.2; letter-spacing: var(--ls-body,.05em);
  max-width:626px !important; color:var(--ink);
}
.tagline p + p{margin-top:3px}

footer.meta{
  position:fixed;bottom:22px;left:64px;right:64px;
  z-index:20;display:flex;justify-content:space-between;
  font-family: var(--ff-label);
  font-size:10px;letter-spacing: var(--ls-label);text-transform:uppercase;color:var(--ink);
  opacity:.55; font-weight:400;
}
footer.meta a{ color: inherit; text-decoration: none; transition: opacity .2s ease; }
footer.meta a:hover{ opacity: .6; }

@media (max-width: 1400px){
  .tent.left{width:40vw;max-width:520px;left:-5vw;top:-4vh;}
  .tent.right{width:36vw;max-width:480px;}
}
@media (max-width: 1100px){
  .tent.left{width:34vw;max-width:400px;left:-6vw;top:-2vh;}
  .tent.right{width:30vw;max-width:380px;right:-8vw;}
  .tagline{max-width:500px !important;font-size:11px;line-height:2.2;}
}
@media (max-width: 900px){
  nav.is-scrolled{ background: transparent; }
  nav{padding:22px 24px;font-size:10px;}
  nav ul{gap:18px;flex-wrap:wrap;justify-content:center;}
  .tent.left{width:28vw;left:-8vw;top:auto;bottom:0;max-width:220px;opacity:.35;}
  .tent.right{width:24vw;right:-8vw;top:-4vh;max-width:200px;opacity:.35;}
  .tent.bottom{display:none;}
  footer.meta{left:24px;right:24px;position:relative;bottom:auto;padding:22px 0;}
  .tagline{max-width:80vw !important;font-size:11px;line-height:2.2;padding:0 20px;}
  .break-mobile{display:block;margin-top:1em;}
}
/* Hamburger — hidden on desktop */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:0;z-index:30;width:44px;height:28px;position:relative;}
.hamburger-icon{width:100%;height:100%;object-fit:contain;transition:opacity .3s ease,transform .4s ease;}
.hamburger-x-line{position:absolute;top:50%;left:0;width:100%;height:auto;opacity:0;clip-path:inset(0 0 72% 0);transition:opacity .3s ease,transform .4s ease;transform:translateY(-50%) rotate(0);}
.hamburger-x-line:last-child{clip-path:inset(72% 0 0 0);}
nav.is-open .hamburger-icon{opacity:0;transform:rotate(90deg) scale(.5);}
nav.is-open .hamburger-x-line{opacity:1;}
nav.is-open .hamburger-x-line:nth-child(2){transform:translateY(-50%) rotate(45deg);}
nav.is-open .hamburger-x-line:last-child{transform:translateY(-50%) rotate(-45deg);}

@media (max-width: 600px){
  .hamburger{display:flex;position:fixed;top:22px;right:24px;opacity:.55;}
  nav{padding:22px 24px;}
  nav.is-scrolled{ background: transparent; }
  nav ul{display:none;}
  nav.is-open{
    position:fixed;inset:0;background:var(--bg);z-index:25;
    flex-direction:column;align-items:center;justify-content:flex-start;gap:28px;
    padding:90px 24px 48px;overflow-y:auto;
  }
  nav.is-open ul{
    display:flex;flex-direction:column;align-items:center;gap:28px;
    font-size:18px;position:static;background:none;
  }
  nav.is-open .submenu{
    position: static; opacity: 0; visibility: hidden; transform: none;
    display: none;
  }
  nav.is-open li.has-submenu.mobile-open .submenu{
    display: flex; opacity: 1; visibility: visible;
    flex-direction: column; align-items: center; gap: 14px;
    margin-top: 14px; font-size: .85em;
    padding: 0; width: auto; max-width: none;
  }
  nav.is-open li.has-submenu{ display: flex; flex-direction: column; align-items: center; gap: 0; }
  nav.is-open li.has-submenu > a::before{
    content: "\25BE"; display: inline-block; margin-right: 12px;
    visibility: hidden; font-size: 1em; vertical-align: 0.15em;
    font-family: system-ui, sans-serif;
  }
  nav.is-open li.has-submenu > a::after{
    content: "\25BE"; display: inline-block; margin-left: 12px;
    transition: transform .2s ease; opacity: .8; font-size: 1em;
    vertical-align: 0.15em; font-family: system-ui, sans-serif;
  }
  nav.is-open li.has-submenu.mobile-open > a::after{ transform: rotate(180deg); }
  nav.is-open .submenu .mobile-only{ display: list-item; }
  .stage{height:100svh;justify-content:center;}
  .tent.left{width:100vw;left:-5vw;top:auto;bottom:-5vh;max-width:100%;opacity:.25;}
  .tent.right{width:50vw;right:0;top:-2vh;max-width:360px;opacity:.25;}
  h1.hero-headline{width:96vw;}
  .tagline{max-width:92vw !important;font-size:13px;line-height:1.9;padding:0;margin-top:16px;}
  .tagline p + p{margin-top:.8em;}
  footer.meta{font-size:8px;padding:16px 20px;}
}