/* ===========================================================================
   Features

   A band with the name over it, one short paragraph alone in the middle of
   the page, then the writing. One section, not three: everything written is
   here, and the word under a title says what a piece is.

   The grid keeps the site's rule — colour comes only from photographs, the
   interface has none — and then breaks it one picture at a time: the pictures
   sit in grey until you point at one, and that one comes up in full colour.
   Each piece is numbered the way a field journal numbers its plates, and the
   first of them runs across two columns.
   =========================================================================== */

/* The band is a photograph. Until there is one it is the page's own paper —
   no tint of its own, since the only colour on this site comes out of a
   picture. The moment one is set it fills the band and the name goes white
   over it, and nothing else about the page changes. */
.feathead {
  position: relative;
  display: grid;
  place-items: center;
  /* A head, not half a screen. */
  min-height: clamp(11rem, 26vh, 17rem);
  overflow: hidden;
  background: var(--ink);
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.feathead--plain {
  background: none;
  /* No slab to fill, so the height is the word and the air around it rather
     than a block that has to be tall enough to read as a band. */
  min-height: 0;
  margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
}
.feathead--plain .feathead__title {
  color: var(--ink);
  /* Open above, close below: on paper the space under the name was reading as
     a hole rather than as the room a title stands in. The line beneath it
     belongs to it, so it is kept near. */
  padding-block: clamp(2.4rem, 5vw, 3.4rem) clamp(1rem, 2.2vw, 1.6rem);
}
.feathead__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Just enough shade behind the name to hold it against a pale part of a
   photograph — it is darkest at the middle where the name sits and clears
   at the edges, so the picture itself is barely touched. */
.feathead:has(.feathead__img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.42), rgba(0,0,0,.06) 78%);
}
.feathead__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
  /* Down from 6rem. At that size the word was the page rather than the label
     on it, and the writing underneath had to compete with its own heading. */
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  font-weight: 300;
  line-height: 1.05;
  /* Set in capitals, and capitals need the air between them that lower-case
     letters carry in their own shapes. The indent gives back the space the
     last letter's tracking would otherwise steal from the centring. */
  text-transform: uppercase;
  letter-spacing: .1em;
  text-indent: .1em;
  color: var(--paper);
  text-align: center;
}

/* One paragraph, alone, in the middle. Everything else on the page is a grid;
   this is the one place a person is asked only to read. */
.featlede {
  max-width: 44rem;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  text-align: center;
  font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem);
  line-height: 1.66;
  color: var(--ink-muted);
}

/* --- the writing ---------------------------------------------------------- */

.writing {
  list-style: none;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
}
/* The first piece runs across two columns, the way a section front sets its
   lead story. Only when there are enough behind it to fill the row. */

.write a { display: grid; gap: .7rem; text-decoration: none; }
.write__fig {
  display: block;
  overflow: hidden;
  background: var(--paper-sunk);
  aspect-ratio: 4 / 5;
}
/* In colour. The grid used to hold every photograph in grey until you pointed
   at one; the pictures are covers, pressed flowers and cut-outs as often as
   they are photographs, and grey made them read as a different medium rather
   than as a muted version of themselves. */
.write__fig img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.write a:hover .write__fig img,
.write a:focus-visible .write__fig img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .write a:hover .write__fig img { transform: none; }
}
.write__fig--none { display: grid; place-items: center; }
.write__fig--none svg { width: 30%; max-width: 4.5rem; color: var(--rule-strong); }

.write__title {
  font-size: var(--step--1);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.write a:hover .write__title { color: var(--accent); }
.write__dek { font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
/* The word for what the piece is, under its headline — the way the
   reference does it, in normal case rather than shouted. */
/* What the piece is, under its own title on the card — a word about that one
   piece rather than a heading cutting the page into a section per kind. */
.write__label {
  display: block;
  margin-top: .2rem;
  font-size: var(--step--2);
  letter-spacing: .02em;
  color: var(--ink-faint);
}

/* Nothing published yet, said without apology. */
.writing__none {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: none;
  margin: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
  font-size: var(--step-0);
  color: var(--ink-muted);
}
.writing__none svg { width: 3.2rem; height: 3.2rem; color: var(--rule-strong); }

/* --- one piece ------------------------------------------------------------
   Set the way the reference sets one: the photograph across the top but not
   to the edges of the window, then everything on white and on the centre line
   — what it is, the title, who wrote it — and then the writing in a single
   narrow column. The title goes up into capitals, which is a way of setting
   it and not a change to what it says.                                  */

.piece { padding-top: clamp(1.2rem, 3vw, 2.2rem); }

/* The masthead first, then the picture. Side by side only works when the
   photograph is a rectangle that fills its half; a cut-out on white left that
   half looking empty, and the two stopped reading as one spread. */
/* The picture leads every piece, so it opens the page and needs real space
   between it and the masthead below — with a caption under it the two were
   running together. */
.piece__lead {
  width: min(100% - (var(--gutter) * 2), 46rem);
  margin: 0 auto clamp(3.5rem, 8vw, 6rem);
}
.piece__lead img { width: 100%; height: auto; background: var(--paper-sunk); }
.piece__lead figcaption {
  margin-top: .7rem;
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: left;
}

/* A picture that should not read as a plate laid on top of the page. It runs
   the full width and its lower edge is dissolved into the paper, so the piece
   begins inside the image rather than under a hard line drawn across the top
   of it. For a painting whose ground is a flat wash this is the difference
   between the page carrying the work and the work sitting on the page. */
.piece__lead--merge {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.6rem);
}
.piece__lead--merge img {
  display: block;
  background: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
/* The caption comes back into the measure; only the picture breaks out. It
   sits in the part of the frame that has already faded to paper, which is what
   makes the picture and the page one thing — no pulling the masthead up over
   it, which put the two on top of each other. */
.piece__lead--merge figcaption {
  width: min(100% - (var(--gutter) * 2), 46rem);
  margin-inline: auto;
  margin-top: clamp(-3rem, -5vw, -1.5rem);
  position: relative;
  text-align: center;
}

.piece__head {
  /* 44rem, not 32. "Ahmedabad Is No. 1. But This Is Not a Ranking We Want."
     in a 32rem column broke into five cramped lines; this gives it three. */
  width: min(100% - (var(--gutter) * 2), 44rem);
  margin: 0 auto clamp(2.6rem, 6vw, 4rem);
  text-align: center;
}

/* What it is and which edition, in the sans — the one loud thing in a
   masthead that is otherwise set quietly. */
.piece__meta {
  display: grid;
  gap: .1rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  max-width: none;
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.4;
}

/* One typeface on the site, so the title is the sans at a heavier weight and
   in title case. Capitals were what made the old one feel too big: set in
   them it ran the full measure on one line whatever the size said. */
.piece__title {
  margin: 0;
  font-size: clamp(1.7rem, 1.05rem + 2.1vw, 2.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
}

/* The two lines that say what the piece is about. Back in the sans and set
   small, bold and in capitals: it is the one block that has to be read before
   the reader decides, so it is the one block that is allowed to be blunt. */
/* A dispatch: not an essay but four named parts, each a heading and a short
   piece of advice. The headings are set the way the rest of the site sets a
   label — small, tracked, upper case — so the page reads as a bulletin without
   any of it having to shout. A rule above each part does the separating that a
   heading size would otherwise have to do. */
.dispatch__part + .dispatch__part {
  margin-top: clamp(2.4rem, 5.5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.dispatch__head {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 .9rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
}
/* The mark sits with the heading rather than in it: upright, its own size, and
   out of the letter-spacing that the words are set on. */
.dispatch__mark {
  font-size: 1.05rem;
  letter-spacing: normal;
  line-height: 1;
  flex: none;
}

/* The source note under a piece. Smaller and quieter than the writing, set
   off by a rule the width of the measure, because it is about the text rather
   than part of it. */
.piece__source {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  padding-top: clamp(1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}
/* Upright inside the italic line, so the title of the book stands out of the
   note rather than dissolving into it. */
.piece__source cite { font-style: normal; }

.piece__stand {
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  max-width: 28rem;
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .035em;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Who made it, in sentence case rather than small capitals — a signature
   rather than a label. */
/* A credit that points at where the picture came from, or at whoever made it. */
.piece__by a { color: inherit; text-underline-offset: .25em; }
.piece__by a:hover { color: var(--ink); }

.piece__by {
  display: grid;
  gap: .15rem;
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  max-width: none;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* A longer line and less empty page beside it: at 38rem the column sat as a
   narrow ribbon with a third of the screen blank on either side. */
.piece__body {
  width: min(100% - (var(--gutter) * 2), 46rem);
  margin-inline: auto;
  font-size: clamp(1.02rem, .97rem + .3vw, 1.15rem);
  font-weight: 300;
  line-height: 1.62;
}
.piece__body p { max-width: none; margin: 0 0 1.1em; }

.piece__end {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  width: min(100% - (var(--gutter) * 2), 38rem);
  margin: clamp(3rem, 7vw, 5rem) auto clamp(2rem, 5vw, 3rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--rule);
}
/* The stitched sunbird closes a piece. Its threads are set here rather than
   left at the default ink: an end mark should be quieter than the writing it
   follows, not the darkest thing on the page. */
.piece__mark {
  width: 3.4rem;
  height: 3.4rem;
  margin-inline: auto;
  --stitch-a: #6f8262;
  --stitch-b: #a8b89a;
}
.piece__end .onward { margin: 0; }

/* The way back, on the same centre line as everything above it. */
.writing + .onward { text-align: center; max-width: none; }
.writing + .onward::before { margin-inline: auto; }

/* --- photographs inside a piece -------------------------------------------
   Wider than the column of text, so one registers as a break in the reading
   rather than as an illustration squeezed into the measure. Two that follow
   the same paragraph stand side by side, and go back to one under each other
   on a narrow screen.                                                    */

.piece__figs {
  width: min(100vw - (var(--gutter) * 2), 52rem);
  margin: clamp(2.2rem, 5vw, 3.4rem) calc(50% - min(100vw - (var(--gutter) * 2), 52rem) / 2);
}
.piece__figs figure { margin: 0; }
.piece__figs img { width: 100%; height: auto; background: var(--paper-sunk); }
.piece__figs figcaption {
  margin-top: .6rem;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--ink-muted);
}
.piece__credit { color: var(--ink-faint); }

/* A picture that should not be stretched: a portrait, or a source whose own
   width runs out before the measure does. It sits inside the column of text
   instead of breaking out of it, which reads as a deliberate size rather than
   as an image that came up short. */
.piece__figs--narrow {
  width: min(100vw - (var(--gutter) * 2), 26rem);
  margin-inline: calc(50% - min(100vw - (var(--gutter) * 2), 26rem) / 2);
}

/* A pair stays inside the measure rather than breaking out of it. Two pictures
   side by side are a note in the margin of the story, not an interruption of
   it, and at this width neither one competes with the painting at the top. */
.piece__figs--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.8rem, 2vw, 1.4rem);
  width: min(100% - (var(--gutter) * 2), 42rem);
  margin-inline: auto;
}
.piece__figs--pair img { aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 40rem) {
  .piece__figs--pair { grid-template-columns: 1fr; }
  .piece__figs--pair img { aspect-ratio: 4 / 3; }
}