/* Yalda: the longest night, watermelon red and rind green, pomegranate seeds, candle gold. */
:root {
  color-scheme: dark;
  --bg: #14070C;
  --surface: #22101A;
  --ink: #FBEDE4;
  --muted: #D8A99B;
  --line: #43202C;
  --accent: #F0414F;
  --accent-ink: #FFF6F0;
  --accent-2: #F5C66B;
  --highlight: #F0414F;
  --verse: #FFD9A0;
  --header-bg: rgba(20, 7, 12, .86);
  --shadow: 0 0 60px rgba(240, 65, 79, .14);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-display-fa: "Lalezar", "Vazirmatn", sans-serif;
  --melon: #E8323F;
  --melon-light: #FF6B6B;
  --rind: #1F7A3E;
  --rind-light: #B8E0A0;
  --seed: #1A0A0E;
  --pomegranate: #A3162E;
}
body { background: radial-gradient(ellipse at 50% -10%, #4A1224 0%, #14070C 60%) fixed; }
.hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero .lead { margin-inline: auto; }
.hero .ctas { justify-content: center; }
.hero h1 { font-size: clamp(40px, 6vw, 74px); font-weight: 600; color: var(--ink); text-shadow: 0 0 30px rgba(240, 65, 79, .45); }
:lang(fa) .hero h1 { font-weight: 400; }
.eyebrow { color: var(--accent-2); letter-spacing: .12em; }
.page-title { text-align: center; }
.page-title .lead { margin-inline: auto; }
.fal { max-width: 680px; width: 100%; background: rgba(34, 16, 26, .75); border-color: rgba(245, 198, 107, .3); }
.verse { font-size: clamp(22px, 3vw, 32px); text-shadow: 0 0 24px rgba(245, 198, 107, .35); border-color: rgba(245, 198, 107, .2); }
.btn { background: transparent; color: var(--accent-2); border-color: var(--accent-2); }
.btn.accent { background: var(--melon); border-color: var(--melon); color: #FFF6F0; box-shadow: 0 6px 24px rgba(232, 50, 63, .4); }
.btn.ghost { color: var(--ink); border-color: var(--line); }
.langs a[aria-current] { background: var(--melon); color: #FFF6F0; }
.card, .panel { background: rgba(34, 16, 26, .78); }
/* Countdown as a watermelon slice: red flesh, white-green rind line, green skin. */
.countdown {
  justify-content: center;
  background: linear-gradient(180deg, var(--melon-light), var(--melon) 70%);
  color: #FFF6F0;
  border: 0;
  border-bottom: 10px solid var(--rind);
  box-shadow: inset 0 -6px 0 var(--rind-light), 0 10px 40px rgba(232, 50, 63, .35);
}
.countdown strong { color: #FFF6F0; text-shadow: 0 2px 0 rgba(26, 10, 14, .35); }
.countdown .note { color: rgba(255, 246, 240, .85); }
.prose h2 { color: var(--accent-2); }
.prose li::marker { color: var(--melon); }