@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', sans-serif;
      background: #f8f8f6;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      color: #1a1a1a;
    }

    .countdown-wrapper {
      text-align: center;
    }

    /* Optional title — edit or remove this */
    .event-title {
      font-size: 0.85rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #888;
      margin-bottom: 2.5rem;
    }

    .countdown {
      display: flex;
      gap: 2.5rem;
      align-items: flex-start;
      justify-content: center;
    }

    .unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .number {
      font-size: clamp(3rem, 8vw, 5.5rem);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.02em;
      min-width: 2ch;
      tabular-nums: auto;
      font-variant-numeric: tabular-nums;
    }

    .divider {
      font-size: clamp(2.5rem, 7vw, 4.5rem);
      font-weight: 200;
      color: #ccc;
      line-height: 1;
      padding-top: 0.05em;
    }

    .label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #aaa;
    }

    .expired-msg {
      font-size: 1.5rem;
      font-weight: 300;
      color: #888;
      letter-spacing: 0.05em;
    }

    @media (max-width: 480px) {
      .countdown { gap: 1.2rem; }
      .divider { display: none; }
    }