:root {
  --teal: #66b5ad;
  --teal-dark: #2f7f82;
  --cream: #f6e6ba;
  --yellow: #edc957;
  --coral: #ef724c;
  --coral-dark: #b94936;
  --ink: #16404a;
  --palm: #5d7436;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: #3e8f91;
  color: var(--cream);
  overflow-x: hidden;
  font-family: 'Oswald', Arial, sans-serif;
}

.poster {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 78px) clamp(16px, 4vw, 56px);
  background:
    radial-gradient(circle at 52% 45%, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(circle at 20% 18%, rgba(246,230,186,.18), transparent 28%),
    linear-gradient(135deg, #76c3bb 0%, var(--teal) 45%, #4fa49d 100%);
  border: 3px solid rgba(20, 59, 65, .65);
  isolation: isolate;
  overflow: hidden;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
}

.content {
  width: min(1040px, 100%);
  text-align: center;
  position: relative;
  z-index: 2;
  transform: translateY(-1vh);
}

.topline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: -2px;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: clamp(26px, 4.1vw, 62px);
  text-shadow: 0 4px 0 rgba(16, 52, 60, .22);
}
.topline i, .sale::before, .sale::after {
  width: clamp(54px, 9vw, 130px);
  height: 24px;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, var(--yellow) 5px 8px, transparent 8px 13px);
  display: block;
}

h1 {
  margin: 0;
  color: var(--coral);
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: clamp(76px, 15vw, 210px);
  line-height: .85;
  letter-spacing: -.05em;
  text-transform: uppercase;
  text-shadow:
    3px 3px 0 var(--cream),
    8px 9px 0 rgba(13, 56, 65, .82),
    12px 13px 0 rgba(13, 56, 65, .22);
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.15));
}

.ribbon {
  width: min(760px, 92%);
  margin: clamp(12px, 2vw, 18px) auto clamp(28px, 5vw, 52px);
  position: relative;
  background: var(--yellow);
  color: var(--ink);
  padding: clamp(8px, 1.5vw, 14px) clamp(16px, 4vw, 42px);
  font-family: 'Pacifico', cursive;
  font-size: clamp(23px, 3.3vw, 48px);
  line-height: 1.05;
  box-shadow: 0 4px 0 rgba(16, 52, 60, .12);
}
.ribbon b { color: var(--coral); font-weight: 400; }
.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  width: 52px;
  height: 100%;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ribbon::before { left: -51px; transform: rotate(180deg); }
.ribbon::after { right: -51px; }

.visitors {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  color: var(--cream);
  text-transform: uppercase;
  font-size: clamp(24px, 3.8vw, 54px);
  letter-spacing: .03em;
  text-shadow: 0 3px 0 rgba(16, 52, 60, .22);
}
.star { color: var(--coral); font-size: .8em; }

.sale {
  margin: clamp(10px, 2vw, 20px) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(12px, 2vw, 26px);
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(28px, 4.7vw, 66px);
}
.sale::before, .sale::after { content: ''; width: 100%; max-width: 190px; justify-self: end; }
.sale::after { justify-self: start; }
.sale span { white-space: nowrap; }
.sale b {
  position: relative;
  color: var(--coral);
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: clamp(82px, 13vw, 176px);
  line-height: .8;
  text-shadow: 3px 3px 0 var(--cream), 7px 8px 0 rgba(13, 56, 65, .75);
}
.sale b::before {
  content: '';
  position: absolute;
  inset: -28px -46px;
  z-index: -1;
  background: var(--cream);
  opacity: .74;
  clip-path: polygon(50% 0, 58% 25%, 83% 10%, 73% 37%, 100% 44%, 73% 55%, 90% 82%, 61% 72%, 50% 100%, 39% 72%, 10% 82%, 27% 55%, 0 44%, 27% 37%, 17% 10%, 42% 25%);
}
.sale sup { font-size: .42em; }

.note {
  display: inline-block;
  margin-top: clamp(22px, 4vw, 42px);
  padding: 8px 34px 12px;
  border: 2px solid rgba(239, 114, 76, .9);
  border-radius: 999px;
  color: var(--coral);
  font-family: 'Pacifico', cursive;
  font-size: clamp(22px, 3.1vw, 38px);
  background: rgba(246, 230, 186, .08);
}

.timer-wrap {
  width: min(700px, 100%);
  margin: clamp(24px, 4vw, 44px) auto 0;
}
.timer-title {
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(14px, 1.6vw, 21px);
  margin-bottom: 12px;
}
.timer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.5vw, 16px);
}
.time-card {
  background: rgba(246,230,186,.92);
  color: var(--ink);
  border: 2px solid rgba(22,64,74,.28);
  border-radius: 10px;
  padding: clamp(10px, 2vw, 18px) 8px;
  box-shadow: 0 6px 0 rgba(22,64,74,.22), inset 0 0 0 2px rgba(255,255,255,.18);
}
.time-card strong {
  display: block;
  color: var(--coral);
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: clamp(34px, 5.6vw, 70px);
  line-height: .9;
  text-shadow: 2px 2px 0 rgba(22,64,74,.18);
}
.time-card span {
  display: block;
  margin-top: 6px;
  text-transform: uppercase;
  font-size: clamp(11px, 1.6vw, 18px);
  letter-spacing: .04em;
  font-weight: 700;
}

.palm-left {
  position: absolute;
  left: -62px;
  top: -16px;
  width: 460px;
  height: 560px;
  transform: rotate(-8deg);
  z-index: 1;
  opacity: .78;
  filter: drop-shadow(2px 4px 0 rgba(25, 62, 48, .22));
}
.palm-left::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 610px;
  left: 112px;
  top: -56px;
  background: linear-gradient(#7d8b3a, #51672f);
  transform: rotate(28deg);
  border-radius: 999px;
}
.palm-left span {
  position: absolute;
  left: 84px;
  top: 52px;
  width: 340px;
  height: 42px;
  background: linear-gradient(90deg, #304c24, #789047 55%, #344c22);
  border-radius: 0 100% 0 100%;
  transform-origin: left center;
  clip-path: polygon(0 50%, 100% 0, 82% 55%, 100% 100%);
}
.palm-left span:nth-child(1){ transform: rotate(6deg); top: 50px; width: 390px; }
.palm-left span:nth-child(2){ transform: rotate(22deg); top: 102px; width: 360px; }
.palm-left span:nth-child(3){ transform: rotate(42deg); top: 154px; width: 340px; }
.palm-left span:nth-child(4){ transform: rotate(64deg); top: 210px; width: 330px; }
.palm-left span:nth-child(5){ transform: rotate(86deg); top: 268px; width: 315px; }
.palm-left span:nth-child(6){ transform: rotate(115deg); top: 330px; width: 300px; }
.palm-left span:nth-child(7){ transform: rotate(145deg); top: 390px; width: 260px; }

.bird {
  position: absolute;
  right: 10%;
  top: 12%;
  width: 130px;
  height: 62px;
  opacity: .9;
  z-index: 1;
}
.bird::before, .bird::after {
  content: '';
  position: absolute;
  width: 82px;
  height: 34px;
  border-radius: 100% 0 100% 0;
  background: var(--cream);
}
.bird::before { left: 0; transform: rotate(23deg) skewX(-18deg); }
.bird::after { right: 0; transform: rotate(-14deg) skewX(20deg); }

.cup {
  position: absolute;
  right: clamp(22px, 6vw, 110px);
  bottom: clamp(22px, 7vw, 82px);
  width: clamp(96px, 14vw, 170px);
  height: clamp(76px, 11vw, 132px);
  border-radius: 0 0 52px 52px;
  background: var(--cream);
  border: 5px solid rgba(22,64,74,.76);
  box-shadow: 10px 12px 0 rgba(22,64,74,.22);
  z-index: 1;
  opacity: .9;
}
.cup::after {
  content: '';
  position: absolute;
  left: -18px;
  right: -34px;
  bottom: -28px;
  height: 28px;
  border: 5px solid rgba(22,64,74,.76);
  background: rgba(246,230,186,.8);
  border-radius: 50%;
  z-index: -1;
}
.coffee { position: absolute; left: 12px; right: 12px; top: 11px; height: 18px; border-radius: 50%; background: var(--ink); }
.handle { position: absolute; right: -48px; top: 26px; width: 54px; height: 54px; border: 10px solid rgba(22,64,74,.76); border-left: 0; border-radius: 0 50% 50% 0; }
.steam { position: absolute; left: 44%; top: -70px; width: 36px; height: 64px; border-left: 9px solid rgba(246,230,186,.78); border-radius: 50%; transform: rotate(14deg); }

@media (max-width: 850px) {
  .poster { min-height: 100svh; padding-top: 80px; padding-bottom: 36px; }
  .palm-left { left: -150px; top: -70px; transform: rotate(-16deg) scale(.68); }
  .cup { opacity: .36; right: -10px; bottom: 18px; }
  .bird { right: 5%; top: 10%; transform: scale(.72); }
  .sale { grid-template-columns: 1fr; gap: 8px; }
  .sale::before, .sale::after { display: none; }
  .sale b::before { inset: -18px -34px; }
  .timer { grid-template-columns: repeat(2, 1fr); }
  .ribbon::before, .ribbon::after { width: 30px; }
  .ribbon::before { left: -29px; }
  .ribbon::after { right: -29px; }
}

@media (max-width: 460px) {
  .topline i { width: 34px; }
  h1 { font-size: clamp(58px, 22vw, 96px); }
  .ribbon { width: 86%; }
  .visitors { flex-wrap: wrap; gap: 8px 16px; }
  .time-card { border-radius: 8px; }
}