@font-face {
  font-family: "Chewy";
  src: url("assets/chewy-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root { --oat: #ddd2c0; --chocolate: #614d41; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  background: var(--oat);
  color: var(--chocolate);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}
.coming-soon {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--oat);
}
.brand {
  position: absolute;
  z-index: 3;
  top: clamp(2rem, 6vh, 4rem);
  left: 50%;
  width: min(23rem, 52vw);
  transform: translateX(-50%);
}
.brand__logo { display: block; width: 100%; height: auto; }
.message {
  position: absolute;
  z-index: 3;
  top: 45%;
  left: 50%;
  width: min(90vw, 52rem);
  transform: translate(-50%, -50%);
  text-align: center;
}
.message h1 {
  margin: 0;
  font-family: "Chewy", "Cooper Black", cursive;
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.message__eyebrow {
  margin: clamp(1.25rem, 2.3vw, 1.75rem) 0 0;
  font-size: clamp(0.78rem, 1.25vw, 1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.message__link {
  display: inline-block;
  margin-top: 1.15rem;
  color: var(--chocolate);
  font-size: clamp(0.72rem, 1vw, 0.88rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-decoration-color: rgba(97, 77, 65, 0.48);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35rem;
  transition: opacity 180ms ease, text-underline-offset 180ms ease;
}
.message__link:hover { opacity: 0.72; text-underline-offset: 0.5rem; }
.message__link:focus-visible {
  border-radius: 0.2rem;
  outline: 2px solid var(--chocolate);
  outline-offset: 0.5rem;
}
.bear {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  width: clamp(19rem, 29vw, 29rem);
  transform: translate(-50%, 20%);
  pointer-events: none;
  animation: peek-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bear img { display: block; width: 100%; height: auto; }
@keyframes peek-in {
  from { transform: translate(-50%, 47%); }
  to { transform: translate(-50%, 20%); }
}
@media (max-width: 640px) {
  .brand { top: 2rem; width: min(16rem, 62vw); }
  .message { top: 43%; }
  .message h1 { font-size: clamp(3.8rem, 18vw, 5.8rem); }
  .bear { width: max(18rem, 78vw); transform: translate(-50%, 22%); }
  @keyframes peek-in {
    from { transform: translate(-50%, 50%); }
    to { transform: translate(-50%, 22%); }
  }
}
@media (max-height: 700px) {
  .brand { top: 1.5rem; width: min(18rem, 44vw); }
  .message { top: 43%; }
  .message h1 { font-size: clamp(3.5rem, 12vh, 5.25rem); }
  .message__eyebrow { margin-top: 0.9rem; }
  .message__link { margin-top: 0.8rem; }
  .bear { width: clamp(18rem, 27vw, 24rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bear { animation: none; }
  .message__link { transition: none; }
}