body {
  max-width: 60em;
}

/* centered title block with the black hole cover */
header {
  text-align: center;
}

header h1 {
  font-size: 2em;
  margin-bottom: 0.2em;
}

header p.byline {
  font-size: 1.2em;
  margin-top: 2em;
  /* margin-bottom: 3em; */
}

.cover {
  margin-top: 3em;
  margin-bottom: 3em;
}

.cover figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
}

/* Iqbal epigraph in the introduction. Each couplet is paired with its translation, the
   English on the left and the Urdu original on the right. Nastaliq has tall, deep glyphs,
   so the Urdu needs a large size and generous line spacing to breathe. */
.verse-block {
  margin: 1em 0 0.5em;
}

.verse-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2em;
  align-items: center;
  margin-bottom: 0.8em;
}

.verse-en {
  font-style: italic;
  text-align: left;
  line-height: 1.7;
}

.verse-ur {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 1.0em;
  line-height: 2.0;
  text-align: right;
}

/* the source line, set apart from the couplets and a little smaller */
.verse-attribution {
  margin-top: 1.2em;
  margin-bottom: 1.5em;
}

.verse-attribution .verse-en,
.verse-attribution .verse-ur {
  font-size: 0.9em;
}

/* on a narrow screen the two columns would be cramped, so stack each couplet with its
   translation instead */
@media (max-width: 480px) {
  .verse-row {
    grid-template-columns: 1fr;
    row-gap: 0.3em;
  }
}

ul {
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.2em;
  line-height: 1.2;
  /* text-indent: -0.6em; */
  /* padding-left: 0.6em; */
}

.venue {
  /* color: gray; */
  font-style: italic;
}

/* a "#" permalink that appears when you hover a heading */
.heading-anchor {
  margin-left: 0.35em;
  text-decoration: none;
  color: gray;
  opacity: 0;
  font-weight: normal;
}

h2:hover .heading-anchor,
h3:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 1;
}

/* leave breathing room above a jump target so it is not glued to the top edge */
h2, h3, dfn {
  scroll-margin-top: 0.8em;
}

/* long display equations scroll inside their own box instead of widening the page */
mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* wide content (e.g. the theory table) scrolls within its box rather than widening the page */
.scroll-x {
  overflow-x: auto;
}

/* a widget's slot reserves its height and shows a loading bar until the widget swaps in,
   so the surrounding text does not jump while reading */
/* a static image gets the same plate as an interactive figure */
.figure-plate {
  margin: 2em 0;
  padding: 1em 1.2em;
  background: #f5f5f2;
  text-align: center;
}

.widget-slot {
  position: relative;
  /* a figure sits on its own light plate, caption included, so it is never read as part of
     the prose and never crowds it. Drawings on the plate use white for filled regions. */
  margin: 2em 0;
  padding: 1em 1.2em;
  background: #f5f5f2;
}

.widget-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8em;
  height: 4px;
  border-radius: 2px;
  background: #eee;
  overflow: hidden;
}

.widget-loading::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: #999;
  animation: widget-loading 1.1s ease-in-out infinite;
}

@keyframes widget-loading {
  from { left: -40%; }
  to { left: 100%; }
}

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

/* hover definition for a linked term (built by gr_dfn.js) */
/* wide and tall enough to show a whole definition box, displayed equations included, at nearly the body text
   size, while staying inside a narrow phone screen */
#gr-tip {
  position: fixed;
  z-index: 1000;
  max-width: min(36em, calc(100vw - 16px));
  max-height: min(26em, calc(100vh - 16px));
  overflow: hidden;
  background: #fff;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 0.6em 0.9em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 0.95em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.4;
  pointer-events: none;
}

/* an equation is wider than a line of prose and must not lose its right hand side */
#gr-tip.math {
  max-width: min(44em, calc(100vw - 16px));
  max-height: min(20em, calc(100vh - 16px));
  overflow: auto;
}

#gr-tip[hidden] {
  display: none;
}

#gr-tip p {
  margin: 0;
}

/* defined terms: keep the bold look (dfn defaults to italic otherwise) */
dfn {
  font-weight: bold;
  font-style: normal;
}

/* a formal definition sits in its own box, as in a mathematics textbook, so the reader
   can find it again without rereading the prose around it */
/* a theorem box states a result the book proves, in the same box as a definition */
.definition,
.theorem,
.corollary {
  border: 1px solid #999;
  padding: 0 0.9em;
  margin: 1em 0;
}

/* an example is read once in sequence, so it gets a lighter mark than a definition, a rule
   down the left margin that shows where the example starts and ends */
.example {
  border-left: 2px solid #999;
  padding-left: 0.9em;
  margin: 1em 0;
}

/* briefly highlight a definition when you jump to it */
:target {
  background: lightgray;
}

/* links back to a definition: readable in prose, not a sea of blue */
a.term {
  color: inherit;
  text-decoration: underline lightgray;
}