:root {
  --ink: #17201b;
  --paper: #f3efe4;
  --green: #174a35;
  --green-deep: #0b2b20;
  --acid: #d9ff58;
  --orange: #f0643c;
  --muted: #5d675f;
  --line: rgba(23, 32, 27, .18);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.5; }
a { color: inherit; }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; padding: .75rem 1rem; background: white; }

.site-header, .site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0;
}
.brand { font-size: 1.25rem; font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
.brand span { color: var(--orange); }
nav { display: flex; gap: 24px; }
nav a { color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--orange); }

.countdown-hero {
  min-height: calc(100vh - 150px);
  padding: clamp(62px, 8vw, 105px) max(20px, calc((100vw - 1180px) / 2));
  color: white;
  background:
    radial-gradient(circle at 84% 20%, rgba(217, 255, 88, .16), transparent 26%),
    linear-gradient(135deg, rgba(23, 74, 53, .18) 0%, rgba(11, 43, 32, .1) 100%),
    url("../images/Bg1.jpg") center center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.countdown-hero::after {
  content: "";
  position: absolute;
  right: -9vw;
  bottom: -24vw;
  width: min(62vw, 800px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255,255,255,.026), 0 0 0 140px rgba(255,255,255,.018);
}
.hero-inner { position: relative; z-index: 1; width: min(1040px, 100%); }
.eyebrow { margin: 0 0 12px; color: var(--acid); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(4.25rem, 9.3vw, 8.8rem); font-weight: 400; letter-spacing: -.045em; line-height: .84; }
h1 em { color: var(--acid); font-weight: 400; }
.festival-date { margin: 27px 0 42px; color: rgba(255,255,255,.74); font-size: clamp(.95rem, 2vw, 1.12rem); }

.countdown-grid {
  display: grid;
  grid-template-columns: 1.55fr repeat(3, 1fr);
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
}
.countdown-unit {
  min-width: 0;
  padding: clamp(20px, 3vw, 34px);
  border-left: 1px solid rgba(255,255,255,.22);
}
.countdown-unit:first-child { border-left: 0; }
.countdown-days { color: var(--ink); background: var(--acid); }
.countdown-unit strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 7.4vw, 7rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.06em;
  line-height: .9;
}
.countdown-unit span {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.65);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.countdown-days span { color: rgba(23,32,27,.62); }

.archive-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(430px, 100%);
  margin-top: 28px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.3);
  color: white;
  font-weight: 650;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.archive-cta small { display: block; margin-bottom: 2px; color: var(--acid); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.archive-cta > span:last-child { font-size: 1.5rem; }
.archive-cta:hover, .archive-cta:focus-visible { outline: 0; color: var(--ink); background: white; }
.archive-cta:hover small, .archive-cta:focus-visible small { color: var(--orange); }

.site-footer { color: var(--muted); }
.site-footer p { font-size: .75rem; }

@media (max-width: 700px) {
  .site-header { padding: 18px 0; }
  nav { gap: 16px; }
  .countdown-hero { min-height: calc(100vh - 130px); padding-top: 64px; }
  h1 { font-size: clamp(3.25rem, 15vw, 4.75rem); line-height: .88; }
  .festival-date { margin-bottom: 30px; }
  .countdown-grid { grid-template-columns: repeat(2, 1fr); }
  .countdown-unit { min-height: 145px; border-top: 1px solid rgba(255,255,255,.22); }
  .countdown-unit:nth-child(odd) { border-left: 0; }
  .countdown-unit:nth-child(-n+2) { border-top: 0; }
  .countdown-unit strong { font-size: clamp(3.5rem, 17vw, 5rem); }
  .site-footer { align-items: flex-start; }
  .site-footer p { max-width: 220px; margin-top: 2px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-cta { transition: none; }
}
