/* Hafezieh: the tomb of Hafez in Shiraz. Blue sky, limestone, verdigris dome, turquoise tiled ceiling, cypresses. */
:root {
  --bg: #F3EDE0;
  --surface: #FBF8F1;
  --ink: #1D2F33;
  --muted: #5B6A66;
  --line: #DCCFB3;
  --accent: #1F5E63;
  --accent-ink: #FBF8F1;
  --accent-2: #C79A3B;
  --highlight: #9A3D4A;
  --verse: #173F4A;
  --header-bg: rgba(251, 248, 241, .92);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(29, 47, 51, .06), 0 10px 30px rgba(29, 47, 51, .10);
  --font-display: "Cormorant Garamond", Georgia, serif;
  /* pavilion drawing */
  --tile-a: #1F5E63;
  --tile-b: #173F4A;
  --tile-light: #EFE3C8;
  --dome: #4E6E62;
  --dome-light: #7C9A8C;
  --dome-rib: #3D5A4F;
  --stone: #EDE3CC;
  --stone-shade: #CDBE9E;
  --cypress: #2F4A35;
  --pot: #B9764A;
  --flower: #F7F4F8;
  --flower-2: #D98BB0;
  --sky: #BFD9EA;
}
body { background: linear-gradient(180deg, var(--sky) 0, #DCE9EF 280px, var(--bg) 640px) no-repeat, var(--bg); }

/* A turquoise tile frieze under the shared header, like the band below the dome. */
.site-header { border-bottom: 0; }
.site-header::after {
  content: ""; display: block; height: 12px; margin-inline: -16px;
  background:
    radial-gradient(circle at 50% 50%, #C79A3B 0 2.2px, transparent 2.6px) 0 0 / 14px 12px,
    linear-gradient(45deg, transparent 42%, #EFE3C8 42% 58%, transparent 58%) 0 0 / 14px 12px,
    #1F5E63;
  border-block: 2px solid #C79A3B;
}
.site-header .logo b, .main-nav a[aria-current] { color: var(--accent); }
.langs a[aria-current] { background: var(--accent); color: var(--accent-ink); }

.hero h1, .page-title h1 { color: var(--tile-b); font-weight: 600; letter-spacing: .01em; }
:lang(fa) .hero h1, :lang(fa) .page-title h1 { font-weight: 700; }
.eyebrow { color: var(--accent-2); letter-spacing: .14em; }
.hero-art { width: min(360px, 82vw); margin-block-end: 10px; }
.hero-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(29, 47, 51, .18)); }

/* The Fal card is framed like a tiled panel of the pavilion ceiling. */
.fal {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 6px var(--tile-a), 0 0 0 8px var(--accent-2), 0 24px 50px rgba(23, 63, 74, .25);
}
.verse { color: var(--verse); border-color: rgba(199, 154, 59, .35); }
.btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.accent { background: var(--accent-2); border-color: var(--accent-2); color: #1D2F33; }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.card { border-top: 4px solid var(--tile-a); background: var(--surface); }
.card:nth-child(3n+2) { border-top-color: var(--accent-2); }
.card:nth-child(3n) { border-top-color: var(--dome); }
.tag { background: var(--tile-a); color: var(--accent-ink); }
.countdown strong { color: var(--highlight); }
.ghazal-list a:hover { border-color: var(--accent); }
.site-footer { background: var(--tile-b); color: var(--tile-light); border-top: 3px solid var(--accent-2); }
.footer-bar, .footer-bar a { color: var(--tile-light); }