/* ===========================================================================
   About, and the data behind the site
   =========================================================================== */

/* --- about Ekatra ---------------------------------------------------------
   The simplest page here. The name at the size it deserves, what the project
   is, and the stitched sunbird at the foot. No band, no grid, nothing in the
   margins. */

.aboutus {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  /* The drawing carries its own white margin, so the page adds little. */
  padding: clamp(.5rem, 2vw, 1.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.aboutus__mark { margin-bottom: clamp(2rem, 5vw, 3.2rem); }
/* The paper round the drawing is trimmed off the file itself now, so the
   frame is simply the drawing: no crop, no aspect-ratio to keep in step with
   the artwork, and nothing to go wrong when a new version arrives. */
.aboutus__logo {
  display: block;
  /* Matches the sizes attribute on the img, so the browser is asked for the
     file it is actually going to draw. The drawing is 751px wide, so this is
     also about as large as it can be set before a dense screen starts
     stretching it. */
  width: min(100%, 30rem);
  height: auto;
  margin-inline: auto;
  /* No optical nudge. The one that used to sit here was 3.9%, measured off the
     previous mark, whose weight was all on one side — a dense brushed bird
     against thin kesuda line. This drawing is one line weight throughout, and
     its ink sits 0.71% of the width left of its box (measured off the file's
     alpha channel), which is under a pixel at any size the page uses. */
}
.aboutus__gu {
  font-family: 'Noto Serif Gujarati', serif;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  margin: .6rem 0 0;
  max-width: none;
}

.aboutus__lede {
  font-size: clamp(1.15rem, 1.02rem + .6vw, 1.5rem);
  line-height: 1.55;
  margin: 0 auto clamp(2.2rem, 5vw, 3.2rem);
  max-width: 32ch;
}
.aboutus__body {
  text-align: left;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  line-height: 1.7;
}
.aboutus__body p { max-width: none; margin: 0 0 1.15em; }

/* The first line stands a size up, and the last of the opening block is the
   line the whole project is named for, so it does too. */
.aboutus__open, .aboutus__close {
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.42rem);
  line-height: 1.5;
  color: var(--ink);
}
.aboutus__close { margin-top: 1.6em; }

.aboutus__sect { margin-top: clamp(2.6rem, 6vw, 4rem); text-align: left; }
.aboutus__h {
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.7rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
}
.aboutus__list { margin: 0 0 1.4em; padding: 0; list-style: none; }
.aboutus__list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
  line-height: 1.55;
}
.aboutus__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: .55rem;
  height: 1px;
  background: var(--accent);
}
.aboutus__body a { color: var(--accent); text-underline-offset: .18em; }

.aboutus__last {
  margin: clamp(2.6rem, 6vw, 4rem) auto 0;
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.42rem);
  line-height: 1.45;
}
.aboutus__go { margin: 1.6rem 0 0; max-width: none; }
.aboutus__triad {
  margin: 1.4rem 0 0;
  max-width: none;
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-faint);
}

.aboutus__who {
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  max-width: none;
  font-size: var(--step--1);
  color: var(--ink-faint);
}
/* The end mark only needs placing here; .piece__mark in ekatra.css gives it
   its size and its two threads, the same as at the foot of a piece of writing
   and of the data page. */
.aboutus__end { margin: clamp(2.5rem, 6vw, 3.6rem) auto 0; }

.about { max-width: 52rem; margin-inline: auto; padding-bottom: clamp(2rem, 5vw, 3rem); }
.about__sect { margin-bottom: clamp(2.6rem, 6vw, 4rem); }
.about__body {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  line-height: 1.68;
}
.about__body p { max-width: none; margin: 0 0 1.1em; }
.about__onward { text-align: center; max-width: none; margin-top: clamp(2rem, 5vw, 3rem); }

/* The counts, at the size the numbers deserve. Every one of them is counted
   from the files the site serves rather than typed in, so none can go stale. */
.tally {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin: 0 0 clamp(3rem, 7vw, 4.5rem);
  padding: clamp(1.6rem, 4vw, 2.4rem) 0;
  border-block: 1px solid var(--rule);
  text-align: center;
}
.tally__n {
  display: block;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tally__k {
  display: block;
  margin-top: .5rem;
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-faint);
}

/* A photograph among the paragraphs, wider than the column they are set in so
   it breaks the reading rather than sitting inside it. */
/* Small, and inside the reading column. It was 52rem and broke out past the
   text on both sides, which made a photograph among paragraphs read as a plate
   hung on a wall. Held to 18rem it sits in the column like a figure in a book. */
.aboutus__fig {
  width: min(100%, 18rem);
  margin: clamp(2.4rem, 6vw, 3.6rem) auto;
}
.aboutus__fig img { width: 100%; height: auto; background: var(--paper-sunk); }
.aboutus__fig figcaption {
  margin-top: .6rem;
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: left;
}

/* More than two pictures: a small row rather than more breaks in the prose. */
.aboutus__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 1.8rem);
  justify-content: center;
  margin: clamp(2.4rem, 6vw, 3.6rem) 0;
}
.aboutus__fig--row { width: min(100%, 13rem); margin: 0; }

.aboutus__credits {
  margin: clamp(2.2rem, 5vw, 3rem) 0 0;
  max-width: none;
  font-size: var(--step--2);
  line-height: 1.7;
  color: var(--ink-faint);
}