:root {
  color: #f8f2e8;
  background: #24231e;
  font-family: "Italiana", Georgia, serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
}

.countdown {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  padding: clamp(1.5rem, 4vw, 4.5rem);
  overflow: hidden;
  background: url("bg.JPG") center 42% / cover no-repeat;
}

.countdown::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(22, 19, 14, .64) 0%, rgba(25, 21, 16, .14) 42%, rgba(20, 17, 13, .66) 100%),
    linear-gradient(90deg, rgba(20, 18, 13, .38), transparent 56%);
}

.masthead, footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.masthead p, footer p { margin: 0; }

.eyebrow, footer {
  font-size: clamp(.82rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.date { font-size: clamp(1rem, 1.4vw, 1.25rem); font-style: italic; }

.clock { align-self: center; margin: 3.5rem 0; }

h1 {
  max-width: 8ch;
  margin: 0 0 clamp(1.4rem, 3vw, 2.5rem);
  font-size: clamp(3.8rem, 10vw, 9.5rem);
  font-weight: 400;
  line-height: .77;
  letter-spacing: -.055em;
}

.units {
  display: flex;
  flex-wrap: wrap;
  max-width: 68rem;
}

.unit {
  display: grid;
  min-width: min(19vw, 10.5rem);
  padding: clamp(.65rem, 1.2vw, 1rem) clamp(.6rem, 1.25vw, 1.2rem) clamp(.6rem, 1vw, .85rem) 0;
}

.unit span {
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.06em;
}

.unit small {
  margin-top: 1.5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.complete { margin: 1.5rem 0 0; font-size: clamp(1.5rem, 3vw, 2.5rem); font-style: italic; }

footer { align-self: end; color: rgba(255, 252, 245, .9); }

@media (max-width: 620px) {
  .countdown { padding: 1.5rem; background-position: 54% center; }
  .masthead, footer { align-items: flex-start; flex-direction: column; }
  .masthead { gap: .35rem; }
  .clock { margin: 2.5rem 0; }
  .units {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1rem;
  }
  .unit { min-width: 0; padding: 1.1rem .85rem .85rem 0; }
}