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

:root {
  --sky-top: #1a3a4a;
  --sky-mid: #2d5a4a;
  --sky-bottom: #4a3728;
  --sun-core: #e8a838;
  --sun-glow: rgba(232, 168, 56, 0.35);
  --mountain-back: #1e3d32;
  --mountain-mid: #2a5240;
  --mountain-front: #3d6b4f;
  --cream: #f2e8d5;
  --sand: #c9a87c;
  --rust: #c45c26;
  --ember: #e07832;
  --forest: #1a3328;
  --pine: #4a7c59;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--cream);
  background: var(--forest);
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sky gradient */
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    175deg,
    var(--sky-top) 0%,
    var(--sky-mid) 42%,
    var(--sky-bottom) 78%,
    #3d2e1f 100%
  );
}

/* Setting sun */
.sun {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 14vw, 130px);
  height: clamp(80px, 14vw, 130px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f5c86a, var(--sun-core) 55%, #c47820);
  box-shadow:
    0 0 60px 20px var(--sun-glow),
    0 0 120px 50px rgba(232, 120, 50, 0.15);
}

/* Mountains */
.mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38%;
  pointer-events: none;
}

/* Compass watermark */
.compass {
  position: absolute;
  top: 6%;
  right: 6%;
  width: clamp(70px, 10vw, 110px);
  height: clamp(70px, 10vw, 110px);
  color: var(--sand);
  opacity: 0.18;
  animation: slow-spin 120s linear infinite;
}

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

/* Main content */
.content {
  position: relative;
  z-index: 2;
  width: min(92vw, 720px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  padding: 1.5rem;
}

/* Brand */
.brand-tag {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.65rem, 1.8vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.25rem;
}

.brand-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--cream);
}

.brand-accent {
  color: var(--ember);
}

/* Hero */
.eyebrow {
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.5rem;
}

.headline {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.8rem, 10vw, 5rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--cream);
  margin-bottom: 0.75rem;
}

.headline-accent {
  color: var(--rust);
  display: inline-block;
  position: relative;
}

.headline-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--rust), var(--ember));
  border-radius: 2px;
}

.subtext {
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  line-height: 1.55;
  color: rgba(242, 232, 213, 0.75);
  max-width: 420px;
  margin: 0 auto;
}

/* Countdown */
.countdown-wrap {
  width: 100%;
}

.countdown-label {
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.7rem, 1.8vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.75rem;
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 1.5vw, 0.75rem);
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(52px, 14vw, 80px);
  padding: clamp(0.5rem, 1.5vw, 0.85rem) clamp(0.4rem, 1.2vw, 0.65rem);
  background: rgba(26, 51, 40, 0.65);
  border: 1px solid rgba(201, 168, 124, 0.25);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(242, 232, 213, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.25);
}

.countdown-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1;
  color: var(--cream);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.countdown-name {
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.55rem, 1.5vw, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 0.2rem;
  opacity: 0.85;
}

.countdown-sep {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--ember);
  opacity: 0.7;
  margin-bottom: 1rem;
  user-select: none;
}

/* Footer */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.trail-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sand), transparent);
  margin-bottom: 0.25rem;
}

.footer-note {
  font-size: clamp(0.75rem, 1.8vw, 0.88rem);
  color: rgba(242, 232, 213, 0.55);
  letter-spacing: 0.04em;
}

.footer-link {
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--ember);
}

/* Short screens — tighten spacing */
@media (max-height: 620px) {
  .content {
    gap: 0.75rem;
  }

  .subtext {
    display: none;
  }

  .compass {
    width: 50px;
    height: 50px;
    top: 4%;
    right: 4%;
  }

  .sun {
    bottom: 18%;
    width: 60px;
    height: 60px;
  }
}

@media (max-height: 480px) {
  .brand-tag,
  .eyebrow {
    display: none;
  }

  .footer-note {
    display: none;
  }
}