/* === Brand tokens === */
:root{
  --tomato:#DD4E2F;
  --mint:#8CD1DA;
  --white:#FFFFFF;
}

/* === Base === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--tomato);
  color:var(--white);
  font-family: "gotham-condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* === Canvas (stable coordinate system) === */
.hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 0;
}

.canvas{
  /* Acts like the comp’s safe area. Tune max-width/ratio if needed. */
  position:relative;
  width: 100vw;
  min-height: 100vh;
  margin:auto;
}


/* === Center lockup === */
.lockup{
  position:relative;
  text-align:center;
  z-index:20; /* above side text */
  margin-top: 20vh;
}
.lockup-img{
  /* Keep it big but leave room for side copy; matches comp scale. */
  width: 30%;
  height:auto;
  display:block;
  margin-inline:auto;
}
.mouth-img{
  display:block;
  margin: clamp(6px, 0.9vw, 12px) auto 0;
  width: 10%;
  height:auto;
  z-index:21;
}
.tagline{
  margin-top: clamp(8px, 1.2vw, 14px);
  color:var(--mint);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:2.1rem;
  line-height:1.2;
}

/* === Side copy (CLEVELAND BASED / AND CHEF MADE) === */
.side{
  position:absolute;
  color: #EB94BA;
  top:48%;                      /* vertical center like comp */
  transform:translateY(-50%);
  text-align:center;
  font-family: "gotham-condensed", sans-serif;
font-weight: 600;
font-style: normal;
  letter-spacing:.08em;
  font-size: 3rem;
  line-height: 2.3rem;
  z-index:10;                   /* under logo, over background */
}
.side.left  { left: 3%; }       /* nudged out so arch won’t overlap */
.side.right { right:3%; }
.side p{ margin:10px 0 }

/* === Stickers (all PNGs) === */
.sticker{
  position:absolute;
  display:block;
  height:auto;
  z-index:25; /* over the arch letters to mimic comp */
}

/* Coordinates are % of the .canvas (stable across viewports) */
.knead  { left: 2%;  top:  2%;  width: 15%; }  /* “You Knead It” burst */
.smile  { left: 15%; top: 12%;  width:  15%; }  /* small smiley */
.exclaim{ right:12%; top: 15%;  width:  10%; z-index: 1000;}  /* small exclamation */
.coming { right: 5%; top:  5%;  width: 15%;}  /* big COMING SOON */
.tonsils{ right:8%; bottom: 8.5%; width: 15%;}

/* STICKER ANIMATIONS */

.sticker.exclaim{
  animation: dickyts-pulse 3s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* === Footer === */
.foot{
  position: absolute;
  bottom: 0;
  text-align:center;
  color:rgba(255,255,255,.85);
  font-size:14px;
  padding:12px 0 0px;
  width: 100%;
  margin: 0 auto;
}

/* === Responsive rules === */
@media (max-width: 1100px){
  .side{ display:none; } /* keep hero clean on smaller screens */
  .canvas{ width: 100vw; height: 100vh; }
  .lockup{ height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 0;}
  .lockup-img{ width:30%; }
  .mouth-img{ width:15%; }
  /* Slight inward pull so stickers don’t clip on small screens */
  .knead{ left:4.5% }
  .coming{ right:5.5% }
  .tagline{ font-size: 1.3rem; }
}

@media (max-width: 665px){
  .knead{ width: 35%; left: 0; top: 0;}
  .smile{ width: 30%; top: 28%; left: 0%;}
  .coming{ width: 25%; top: 3%;}
  .exclaim{ width: 18%; right: 16%; top: 8%;}
  .tonsils { right: 8%; bottom: 15%; width: 25%;}
  .lockup-img{width: 50%;}
  .mouth-img{width: 25%;}
  
}

/* EMAIL SIGNUP */

/* a11y helper */
.visually-hidden {
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); border:0;
}

/* Sign-up bar */
.signup{
  margin: clamp(18px, 2.6vw, 26px) auto 0;
  display:flex; gap:10px; justify-content:center; align-items:center;
  flex-wrap:wrap;
}
.signup input[type="email"]{
  width:min(520px, 80vw);
  padding:14px 16px;
  border-radius:10px;
  border:3px solid var(--mint);
  background:#ffffff; color:#000;
  font-family: 'gotham-condensed';
  text-transform: uppercase;
  font-size:clamp(16px, 1.8vw, 20px);
  outline:none;
}
.signup input[type="email"]::placeholder{ color:#7a7a7a; }

/* honeypot (hidden from human users) */
.signup .hp{ display:none; }

.signup button{
  padding:14px 18px;
  border-radius:10px;
  border:3px solid #ffffff;
  background:transparent;
  font-family: "gotham-condensed", sans-serif;
  font-size: clamp(16px, 1.8vw, 20px);
  color:#ffffff;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(14px, 1.6vw, 18px);
  cursor:pointer;
  transition: .2s ease;
}

.signup button:hover {
    background: white;
    color: #8ad2db;
    transition: .2s ease;
    border: 3px solid #8cd1da;
}

.signup button:disabled{ opacity:.6; cursor:not-allowed; }

.signup .msg{
  width:100%;
  text-align:center;
  color:var(--mint);
  font-weight:800;
  margin-top:8px;
  min-height:1.2em; /* reserve space to avoid layout jump */
}

/* KEYFRAMES ANIMATIONS */

@keyframes dickyts-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dickyts-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}