/* Teaser "coming soon" — stijl afgeleid van het Joint Mission-logo:
   witte achtergrond (het logo-bestand heeft een witte ondergrond) en de
   logokleuren (olijfgroen, bordeaux, oker, petrol, donkergrijs) als accenten. */

:root {
  --groen: #6b7c2e;
  --bordeaux: #7e2a33;
  --oker: #dc9b2d;
  --petrol: #2d5e78;
  --grijs: #4d4d4d;
  --muted: #8a857c;
  --tegel: #f7f4ee;
  --lijn: #e7e1d6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #fff;
  color: var(--grijs);
  font-family: 'Avenir Next', 'Avenir', 'Futura', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.teaser {
  min-height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  width: min(88vw, 520px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  /* de JPEG heeft een net-niet-witte ondergrond; multiply laat die wegvallen */
  mix-blend-mode: multiply;
}

.coming-soon {
  margin: 4px 0 36px;
  font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: .32em;
  padding-left: .32em; /* compenseert de tracking, houdt de tekst optisch gecentreerd */
  text-transform: uppercase;
  text-align: center;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 118px));
  gap: clamp(10px, 2.5vw, 20px);
  justify-content: center;
}

.tile {
  background: var(--tegel);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: clamp(14px, 2.6vw, 22px) 6px;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.tile span {
  font-size: clamp(1.9rem, 7vw, 3.3rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tile small {
  font-size: clamp(.6rem, 1.8vw, .78rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.tile-groen span    { color: var(--groen); }
.tile-bordeaux span { color: var(--bordeaux); }
.tile-oker span     { color: var(--oker); }
.tile-petrol span   { color: var(--petrol); }

.event-line {
  margin: 34px 0 0;
  font-size: clamp(.85rem, 2.4vw, 1rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}