/* ============================================================
   Ustad Ghulam Jelani Ruhani — site styles
   Palette: forest greens, blossom pink and gold-leaf illumination
   ============================================================ */

:root {
  --lapis: #2e5a41;         /* forest green */
  --lapis-deep: #1c3a2a;    /* deep forest */
  --gold: #c9a655;
  --gold-ink: #7a6222;
  --paper: #f3f6ee;          /* pale sage paper */
  --blossom: #e2a79d;
  --leaf: #7fa36b;
  --mat: #fffefa;
  --ink: #1f2a22;
  --ink-soft: #4b5a4f;
  --rule: #d3dccb;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --nastaliq: "Noto Nastaliq Urdu", "Vazirmatn", "Iran Nastaliq", "Noto Naskh Arabic", Tahoma, serif;
  --rtl-text: "Vazirmatn", "Noto Naskh Arabic", Tahoma, sans-serif;

  --measure: 36rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;          /* 19px */
  line-height: 1.7;
  font-feature-settings: "kern", "liga", "onum";
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--mat); padding: .5rem 1rem; z-index: 10;
}
.skip-link:focus { top: 1rem; }

/* ---------- Right-to-left text (Dari = fa, Pashto = ps) ---------- */
[dir="rtl"] { direction: rtl; unicode-bidi: isolate; }
:lang(fa), :lang(ps) { font-family: var(--rtl-text); }
.nastaliq, .nastaliq:lang(fa), .nastaliq:lang(ps) { font-family: var(--nastaliq); font-weight: 400; }
/* A whole page or block written in Dari/Pashto: add dir="rtl" lang="fa" (or "ps") */
.rtl-block { direction: rtl; text-align: right; font-family: var(--rtl-text); line-height: 2; }

/* ---------- Site header ---------- */
.site-header {
  background: var(--lapis-deep);
  color: #fff;
  border-bottom: 1px solid var(--gold);
}
.site-header__inner {
  max-width: 72rem; margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem;
}
.brand { color: #fff; text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; }
.brand:hover { color: #fff; }
.brand__fa { font-size: 1.25rem; line-height: 2.1; color: var(--gold); }
.brand__en { font-size: .875rem; letter-spacing: .02em; opacity: .9; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-nav a { color: #fff; text-decoration: none; font-size: 1rem; padding: .25rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ---------- Home hero: the name inside gold jadval rules ---------- */
.hero {
  background-color: var(--lapis-deep);
  background-image: url("../images/leaf-pattern.svg");
  background-size: 140px 140px;
  color: #fff;
  padding: clamp(2.5rem, 7vw, 5rem) 1.25rem;
}
.jadval {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;
  position: relative;
  background: rgba(28, 58, 42, .82);
  /* double gold ruling, as around the text block of an illuminated page */
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}
.hero h1 { margin: 0; font-weight: 400; }
.hero__fa {
  display: block;
  color: var(--gold);
  font-size: clamp(2.2rem, 7.5vw, 4.25rem);
  line-height: 2.2;              /* Nastaliq needs tall lines */
}
.hero__en {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  letter-spacing: .015em;
  margin-top: .25rem;
}
.hero__subtitle {
  margin: 1.25rem auto 0; max-width: 30rem;
  font-style: italic; font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: #e3ecdf;
}

/* ---------- Page body ---------- */
main { display: block; }
.page { max-width: var(--measure); margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.page--wide { max-width: 72rem; }

.page-title { font-weight: 500; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.15; margin: 0 0 .5rem; color: var(--lapis-deep); }
.page-lede { color: var(--ink-soft); font-style: italic; margin: 0 0 2.5rem; }

h2 {
  font-weight: 500; font-size: 1.5rem; line-height: 1.3;
  color: var(--lapis-deep);
  margin: 3.25rem 0 1rem;
  padding-top: 2.4rem;
  background: url("../images/divider.svg") no-repeat left top / 10rem auto;
}
h2:first-child { margin-top: 0; }

p { margin: 0 0 1.1em; hyphens: manual; }

.epigraph { margin: 0 0 2.5rem; padding: 0; text-align: center; }
.epigraph p { font-size: 1.35rem; font-style: italic; line-height: 1.5; color: var(--lapis-deep); margin: 0; }
.epigraph footer { margin-top: .5rem; color: var(--ink-soft); font-size: 1rem; }

blockquote.pull {
  margin: 1.5rem 0; padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--gold);
  font-style: italic;
}

.list-exhibitions { padding-left: 1.2rem; }
.list-exhibitions li { margin-bottom: .35rem; }

/* Home: ways into the site */
.doors { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--rule); }
.doors li { border-bottom: 1px solid var(--rule); }
.doors a { display: block; padding: 1.1rem 0; text-decoration: none; color: var(--ink); }
.doors a:hover .doors__title { color: var(--gold-ink); }
.doors__title { display: block; font-size: 1.35rem; color: var(--lapis); }
.doors__desc { display: block; font-size: 1rem; color: var(--ink-soft); }

/* Sources */
.sources-list { padding-left: 1.4rem; }
.sources-list li { margin-bottom: .6rem; }
.link-label { margin-bottom: .2rem; font-weight: 500; }
.ext-link { word-break: break-all; }

/* ---------- Gallery ---------- */
.gallery {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: 2rem 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.gallery figure { margin: 0; }
.gallery button {
  display: block; width: 100%; padding: .9rem; cursor: zoom-in;
  background: var(--mat);
  border: 1px solid var(--rule);
  outline: 1px solid var(--gold); outline-offset: -6px;   /* inner gold mount line */
}
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--mat); }
.gallery figcaption { font-size: 1rem; line-height: 1.45; margin-top: .6rem; color: var(--ink-soft); }
.gallery figcaption strong { display: block; font-weight: 500; color: var(--ink); }

.gallery-empty { border: 1px dashed var(--rule); padding: 1.5rem; color: var(--ink-soft); background: var(--mat); }

/* Lightbox */
dialog.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh;
}
dialog.lightbox::backdrop { background: rgba(28, 58, 42, .95); }
.lightbox__inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lightbox img { max-width: 94vw; max-height: 80vh; width: auto; object-fit: contain; background: var(--mat); }
.lightbox__caption { color: #fff; text-align: center; max-width: 40rem; font-size: 1rem; }
.lightbox__controls { display: flex; gap: .75rem; }
.lightbox__controls button {
  font: inherit; font-size: 1rem; color: #fff; background: transparent;
  border: 1px solid var(--gold); padding: .35rem 1rem; cursor: pointer;
}
.lightbox__controls button:hover { background: var(--gold); color: var(--lapis-deep); }

/* ---------- Footer ---------- */
.site-footer { background: var(--lapis-deep) url("../images/leaf-pattern.svg") 0 0 / 140px 140px; color: #e3ecdf; border-top: 1px solid var(--gold); }
.site-footer__inner {
  max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 2.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 2rem;
  font-size: 1rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold); }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-names .nastaliq { color: var(--gold); font-size: 1.1rem; line-height: 2; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  body { background: #fff; }
}

/* ---------- Floral ornaments ---------- */
.corner {
  position: absolute; width: clamp(44px, 9vw, 72px); aspect-ratio: 1;
  background: url("../images/corner.svg") no-repeat center / contain;
  pointer-events: none;
}
.corner--tl { top: -14px; left: -14px; }
.corner--tr { top: -14px; right: -14px; transform: scaleX(-1); }
.corner--bl { bottom: -14px; left: -14px; transform: scaleY(-1); }
.corner--br { bottom: -14px; right: -14px; transform: scale(-1, -1); }

.epigraph::before {
  content: ""; display: block; width: 9rem; height: 1.3rem; margin: 0 auto 1rem;
  background: url("../images/divider.svg") no-repeat center / contain;
}
.doors a { padding-left: 1.9rem; position: relative; }
.doors a::before {
  content: ""; position: absolute; left: 0; top: 1.45rem; width: 1.2rem; height: 1.2rem;
  background: url("../images/favicon.svg") no-repeat center / contain; border-radius: 50%;
}
.site-header { box-shadow: 0 1px 0 rgba(201, 166, 85, .35); }