/* ishkuzai hub.  A hung picture: a dark wall of taiga, and on it a leaf of parchment set in a woven band.  The
   ornament is taken from Russian folk art and illustration: the woven rhombus border (Bilibin's page frames),
   the pointed arch of the kokoshnik (Vasnetsov), and, for the single picture, the misty forest depth of Shishkin.
   Ruslan Display (folk lettering) is kept for the name and the page titles; Forum carries the headings; Gentium
   the reading text. */
:root {
  --taiga: #141c17;          /* the wall: the black-green of Shishkin's firs */
  --taiga-hi: #223027;
  --parchment: #ebe0c0;      /* the leaf: Bilibin's page margins */
  --ink: #261c12;
  --ink-soft: #5b4a35;
  --madder: #7a3724;         /* the woven band */
  --cinnabar: #a8321f;       /* links, the red of boots and sashes */
  --gilt: #c39a3b;
  --gilt-soft: #a98b4c;
  --indigo: #26365c;         /* the Firebird border */
  --wall-text: #e6dcc0;
  --display: "Ruslan Display", "Forum", "Gentium Book Plus", Georgia, serif;
  --head: "Forum", "Gentium Book Plus", Georgia, serif;
  --serif: "Gentium Book Plus", "Gentium Plus", Georgia, "Times New Roman", serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --leaf: 46rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); position: relative;
  background-color: var(--taiga);
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.62; font-kerning: normal;
  min-height: 100vh; display: flex; flex-direction: column;
}
/* The background of every page: a painting of a river valley at dawn, fixed behind the page.  The picture is left
   bright; the menu has its own dark bar, and only the foot is shaded, for the inscription. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 20, 16, 0.12) 0, rgba(14, 20, 16, 0) 10rem, rgba(14, 20, 16, 0) 62%, rgba(14, 20, 16, 0.58) 100%),
    url("hub-bg.jpg") center / cover no-repeat var(--taiga);
}
html[lang="fa"] body { font-family: var(--serif), "Noto Naskh Arabic"; font-size: 1.3rem; line-height: 2; }
a { color: var(--cinnabar); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--indigo); }
a:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }
.wrap { width: min(100%, calc(var(--leaf) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- the wall: name, menu, languages ------------------------------------------------------------- */
/* the menu: a bar of dark glass as wide as the leaf beneath it */
.bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center;
  width: min(calc(100% - 2 * var(--gutter)), var(--leaf)); margin: 1.1rem auto 0; padding: 0.7rem 1.3rem;
  background: rgba(16, 22, 18, 0.66); border: 1px solid rgba(195, 154, 59, 0.5); border-radius: 0.5rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bar a { color: var(--wall-text); text-decoration: none; }
.wordmark { font-family: "EB Garamond", "Gentium Book Plus", Georgia, serif; font-weight: 500; font-size: 1.7rem; letter-spacing: 0.08em; color: var(--gilt) !important; margin-inline-end: auto; }
.wordmark[lang="peo"] { font-family: "Noto Sans Old Persian", "Segoe UI Historic", serif; font-size: 1.9rem; letter-spacing: 0.12em; }
.sections { display: flex; gap: 1.5rem; font-family: var(--head); font-size: 1.05rem; letter-spacing: 0.03em; }
.sections a { padding-block: 0.15rem; border-block-end: 1px solid transparent; }
.sections a:hover { border-block-end-color: var(--gilt-soft); }
.sections a[aria-current] { border-block-end-color: var(--gilt); }
.langs { display: flex; gap: 0.1rem; font-family: var(--head); font-size: 0.9rem; }
.langs a { padding: 0.15rem 0.45rem; color: #cdbd8f; }
.langs a:hover { color: var(--wall-text); }
.langs a[aria-current] { color: var(--wall-text); border-block-end: 1px solid var(--gilt); }

/* ---- the leaf: parchment set in a woven band ------------------------------------------------------ */
.leaf {
  width: min(calc(100% - 2 * var(--gutter)), var(--leaf)); margin: 0.4rem auto 3.2rem; padding: 17px; position: relative; z-index: 1;
  background-color: var(--madder);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%237a3724'/%3E%3Cpath d='M14 1 L27 14 L14 27 L1 14Z' fill='none' stroke='%23ecdfbd' stroke-width='1.6' stroke-dasharray='3 1.6'/%3E%3Cpath d='M14 8 L20 14 L14 20 L8 14Z' fill='%23ecdfbd'/%3E%3Cpath d='M14 11 L17 14 L14 17 L11 14Z' fill='%237a3724'/%3E%3Cpath d='M0 0 L4 0 L0 4Z M28 0 L24 0 L28 4Z M0 28 L4 28 L0 24Z M28 28 L24 28 L28 24Z' fill='%23ecdfbd'/%3E%3C/svg%3E");
  background-size: 28px 28px; background-position: center;
}
.leaf-in {
  background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--gilt), inset 0 0 0 6px var(--parchment), inset 0 0 0 7px var(--gilt-soft);
  padding: 3.2rem clamp(1.5rem, 7vw, 4rem) 3rem;
}

h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 9vw, 4.1rem); line-height: 1.08;
  letter-spacing: 0.04em; color: var(--cinnabar); text-align: center; margin: 0 0 0.9rem;
}
/* Persian titles fall through to Naskh for the Arabic-script letters; the Latin name keeps the folk lettering. */
html[lang="fa"] h1 { font-family: var(--display), "Noto Naskh Arabic"; letter-spacing: 0; line-height: 1.5; }
.lead {
  font-family: var(--head); font-size: 1.35rem; line-height: 1.45; color: var(--ink-soft); text-align: center;
  max-width: 30rem; margin: 0 auto 1.9rem; padding-block-end: 1.6rem;
  /* a short stretch of the same woven rhomb, as a flourish under the lead */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M8 1 L15 6 L8 11 L1 6Z' fill='none' stroke='%23a98b4c' stroke-width='1.2'/%3E%3Cpath d='M8 4 L11 6 L8 8 L5 6Z' fill='%23a8321f'/%3E%3C/svg%3E") repeat-x center bottom / 16px 12px;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.origin { font-size: 0.85rem; color: var(--ink-soft); text-align: center; }
.text { max-width: 36rem; margin-inline: auto; }
.text p { margin: 0 0 1rem; }
h2 {
  font-family: var(--head); font-weight: 400; font-size: 1.7rem; color: var(--indigo); margin: 2.6rem 0 0.5rem;
  padding-block-start: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M10 1 L15 5 L10 9 L5 5Z' fill='%23c39a3b'/%3E%3Cpath d='M0 5 H4 M16 5 H20' stroke='%23a98b4c' stroke-width='1'/%3E%3C/svg%3E") repeat-x left top / 20px 10px;
}
.text ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.text li { position: relative; padding-inline-start: 1.5rem; margin-block: 0.45rem; }
.text li::before {
  content: ""; position: absolute; inset-inline-start: 0.1rem; top: 0.62em; width: 0.55rem; height: 0.55rem;
  background: var(--gilt); transform: rotate(45deg);
}

/* ---- the projects: each a short entry on the leaf, set off by a rule ------------------------------- */
.project { padding-block: 1.3rem; border-block-end: 1px solid var(--gilt-soft); }
.project:first-of-type { padding-block-start: 0.4rem; }
.project h3 { font-family: var(--head); font-weight: 400; font-size: 1.75rem; line-height: 1.2; margin: 0; color: var(--ink); }
.project h3 a { color: var(--cinnabar); }
.project p { margin: 0.2rem 0 0; }
.status { font-style: italic; font-size: 1rem; color: var(--gilt-soft) !important; }
html[lang="fa"] .status { font-style: normal; font-size: 1.05rem; }

.where { font-size: 1rem; }
.where a { font-family: var(--head); letter-spacing: 0.03em; }
/* an inscription in an old script at the foot of the page, set on the wall in gilt */
.foot .inscription { color: var(--gilt); text-align: center; margin: 0 auto 1.4rem; padding-block-start: 1.4rem; max-width: 34rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M10 1 L15 5 L10 9 L5 5Z' fill='%23c39a3b'/%3E%3Cpath d='M0 5 H4 M16 5 H20' stroke='%23a98b4c' stroke-width='1'/%3E%3C/svg%3E") repeat-x center top / 20px 10px; }
.inscription-peo { font-family: "Noto Sans Old Persian", "Segoe UI Historic", serif; font-size: 1.7rem; line-height: 1.9; letter-spacing: 0.1em; }
.inscription-ae { font-family: "Noto Sans Avestan", "Segoe UI Historic", serif; font-size: 1.7rem; line-height: 1.9; }
.inscription-sa { font-family: "Noto Serif Devanagari", "Tiro Devanagari Sanskrit", "Nirmala UI", serif; font-size: 1.2rem; line-height: 2.1; }
.foot { padding-block: 0 2.4rem; font-family: var(--head); font-size: 0.9rem; color: var(--gilt-soft); text-align: center; }
.foot p { margin: 0; }
@media (max-width: 560px) {
  body { font-size: 1.12rem; }
  .leaf { padding: 11px; }
  .leaf-in { padding-inline: 1.25rem; }
  .sections { gap: 1rem; }
}