/* Page typography shared by the reader (index.html) and the PDF (print.html).
   Every size is in container-query units (cqw = 1% of the page width), so a page
   lays out identically at any size: screen, phone or a 140 x 226 mm sheet. */

@font-face { font-family: "Nastaliq"; src: url(../fonts/NotoNastaliqUrdu.woff2) format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Numerals"; src: url(../fonts/Tinos-Bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "HonorificSign"; src: url(../fonts/Amiri-Honorific.woff2) format("woff2"); unicode-range: U+FDFA, U+FDF2, U+0610-0614; }
@font-face { font-family: "Garamond"; src: url(../fonts/EBGaramond.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Garamond"; src: url(../fonts/EBGaramond-Italic.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --ink: #1c1712;
  --ink-soft: #3b3129;
  --paper: #fbf6ea;
  --paper-edge: #efe4cc;
}

.page {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  --fs: 1;          /* per-page type scale, set by the fitter */
  --lh: 2.05;       /* per-page line height, set by the fitter */
}

.sheet {
  position: absolute;
  inset: 0;
  direction: rtl;
  font-family: "Nastaliq", serif;
  font-weight: 560;
  word-spacing: -.04em;
  font-size: calc(3.38cqw * var(--fs));
  line-height: var(--lh);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- running head: page number + rule ---------- */
.runhead {
  position: absolute;
  top: 4.6cqw; left: 8.5cqw; right: 8.5cqw;
  height: 7.2cqw;
  direction: ltr;
}
.runhead .num {
  position: absolute; left: 0; right: 0; top: 0;
  text-align: center;
  font-family: "Numerals", "Times New Roman", serif;
  font-weight: 700;
  font-size: 3.3cqw;
  line-height: 1;
  letter-spacing: .02em;
}
.runhead .rule {
  position: absolute; left: 0; right: 0; top: 5.2cqw;
  height: max(1.4px, .42cqw);
  background: var(--ink);
}

/* ---------- body ---------- */
.body {
  position: absolute;
  top: 14cqw; bottom: 9cqw; left: 8.5cqw; right: 8.5cqw;
  display: flex;
  flex-direction: column;
}
.page.no-head .body { top: 9cqw; }
.body > * { flex: none; }

.title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  line-height: 2.1;
  font-size: 1.75em;
}
.title.size-xl { font-size: 1.95em; }
.title.size-l  { font-size: 1.55em; }
.title.size-m  { font-size: 1.3em; }
.title img.traced { display: block; margin: 0 auto; height: 1.35em; }

.subtitle { text-align: center; font-weight: 700; font-size: .86em; line-height: 2; }
.line { font-size: 1em; }
.line.size-l { font-size: 1.12em; }
.line.size-s { font-size: .86em; }
.pin { position: absolute; left: 8.5cqw; right: 8.5cqw; line-height: 1.9; }
.pin .title { line-height: 1; }
.line.bold { font-weight: 700; }
.a-center { text-align: center; }
.a-right  { text-align: right; }
.a-left   { text-align: left; }

/* prose */
.para {
  margin: 0;
  text-align: justify;
  text-align-last: right;
  hyphens: none;
}
.para.runon { text-align-last: justify; }
.para.runon.natural { text-align-last: right; }
.para.indent { text-indent: 1.6em; }
.para.a-center { text-align: center; text-align-last: center; }
.para.a-left { text-align: left; text-align-last: left; }
.para.a-right { text-align: right; text-align-last: right; }
b { font-weight: 700; }
.para b { font-size: 1.1em; }
.yr { position: relative; white-space: nowrap; }
.yr::after { /* the curved sanah stroke under a year, rising at the ء */
  content: ""; position: absolute; left: -.08em; right: -.12em; bottom: .42em; height: .42em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M99.5 0.5C100.5 5 98 9.5 91 10.2C70 11.6 30 10.4 0 9.2L0 8.4C30 8.9 70 9.4 90 8.3C95.5 8 97.6 5 97.4 1.2Z' fill='%231c1712'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
u { text-decoration-thickness: .06em; text-underline-offset: .35em; }

/* poetry: every misra of a stanza is justified to the same width,
   the way Urdu verse is traditionally typeset */
.verse { align-self: center; margin: .5em 0; }
.title + .verse, .title + .space + .verse { margin-top: .7em; }
/* stanzas that cascade across the page in the print (right, centre, left) */
.verse.shift-right { align-self: flex-start; margin-right: 3cqw; }   /* rtl: start = right */
.verse.shift-left { align-self: flex-end; margin-left: 3cqw; }
.show-en .verse.shift-right, .show-en .verse.shift-left { align-self: center; margin-left: 0; margin-right: 0; }
.verse .m { white-space: nowrap; text-align: justify; text-align-last: justify; }
.verse.a-right .m, .verse.a-center .m { text-align-last: auto; }
.verse.a-center .m { text-align: center; }
.verse.a-right .m { text-align: right; }
.verse.measuring .m { display: inline-block; text-align-last: auto; }
.verse.measuring { width: auto !important; }

.verse2 { display: grid; column-gap: 12cqw; justify-content: center; margin: .35em 0; }
.verse2 .m { white-space: nowrap; text-align: justify; text-align-last: justify; }
.verse2.measuring { grid-template-columns: max-content max-content !important; }
.verse2.measuring .m { text-align-last: auto; }

.date { font-size: .82em; margin-top: .3em; }
.stars { display: flex; justify-content: center; margin: .4em 0; }
.stars svg { height: .85em; width: auto; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.space { height: calc(var(--h, 1) * 1em * var(--lh)); }

/* contents: title on the right, dotted leader, page number flush left.
   Short titles sit in a fixed-width slot so their leaders all stop at the same point. */
.toc { font-size: .9em; line-height: 2; display: flex; flex-direction: column; row-gap: 1.25cqw; }
.toc .row { display: flex; align-items: baseline; gap: 1.2cqw; }
.toc .t { font-weight: 700; white-space: nowrap; min-width: 36%; text-align: right; }
.toc .t .sub { font-weight: 700; }
.para b { font-size: 1.1em; }
.toc .t.has-sub { display: flex; justify-content: space-between; gap: 6cqw; }
.toc .lead { flex: 1; min-width: 4cqw; height: 1cqw; align-self: baseline;
  background: radial-gradient(circle, var(--ink) 34%, transparent 40%) right center / 1.35cqw 1cqw repeat-x; }
.toc .pg { font-weight: 700; min-width: 1.6em; text-align: left; }

/* colophon */
.kv { display: grid; grid-template-columns: max-content 2.4em max-content; row-gap: .45em; justify-content: start; margin-right: 6cqw; }
.kv .k, .kv .v { font-weight: 700; white-space: nowrap; }
.kv .c { text-align: center; font-weight: 700; }

/* ---------- special pages ---------- */
.page.cover { background: #2b1a10; }
.page.cover .art, .page.cover .lettering { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.page.cover .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.page.framed .frame { position: absolute; top: 6cqw; bottom: 6cqw; left: 7cqw; right: 7cqw; }
.page.framed .frame svg { width: 100%; height: 100%; display: block; }

.page.endpaper { background: #efe3c8; }

/* ---------- translation layer (English, 40% opacity) ---------- */
.en {
  display: none;
  direction: ltr;
  font-family: "Garamond", "HonorificSign", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  opacity: .4;
  color: var(--ink);
  font-size: 2.6cqw;              /* fixed: English never shrinks with the Urdu fit */
  line-height: 1.22;
  text-align: center;
  text-align-last: auto;
  white-space: normal;
  word-spacing: normal;
  unicode-bidi: isolate;
  hyphens: manual;
}
.show-en .en { display: block; }
/* under a misra: centred on the stanza but free to run wider than it */
.show-en .verse .en {
  width: 80cqw; margin: -.2cqw calc((100% - 80cqw) / 2) 1.5cqw;
}
.show-en .verse { margin: .15em 0; }
.show-en .verse2 { row-gap: 0; }
.show-en .verse2 .en { margin: -.2cqw 0 1.6cqw; }
.show-en .title + .en, .show-en .subtitle + .en { margin: -.6cqw 0 1.8cqw; }
.show-en .line + .en { margin: -.2cqw 0 1cqw; }
.show-en .en.block { margin: .4cqw 0 1.8cqw; text-align: justify; text-align-last: left; font-size: 2.5cqw; line-height: 1.28; }
.show-en .date-en { display: inline-block; margin-left: .6em; font-size: 2.3cqw; }
.show-en .toc-en { text-align: right; margin: -2.4cqw 0 .2cqw; font-size: 2.15cqw; }
.show-en .kv-en { text-align: right; margin: -1.4cqw 0 .6cqw; font-size: 2.2cqw; }