/* tl-opener.css — full-bleed chapter opener.
 *
 * Chapters I, II, IV and V are the narrative spine of the library and carried
 * no tables, no stat cards and two inline images each, so every one of them
 * opened identically: a label, a headline, and a wall of text. This gives each
 * a single photograph at full width with the chapter mark and title set into
 * it, the way a book opens a chapter on a plate.
 *
 * The opener sits between the breadcrumb and .page-layout so it can run the
 * full width of the viewport without fighting the article's grid.
 */

.ch-opener {
  position: relative;
  width: 100%;
  margin: 0;
  background: #1A1A1A;
  overflow: hidden;
  isolation: isolate;
}

.ch-opener--wide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* the archive photographs vary a lot in exposure; a light, uniform grade
     keeps the title legible without flattening them into silhouettes */
  filter: saturate(0.92) contrast(1.04) brightness(0.82);
}

/* Two scrims: a soft top wash so the breadcrumb edge does not collide with a
   bright sky, and a heavier bottom one carrying the title. */
.ch-opener::before,
.ch-opener::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.ch-opener::before {
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.55), transparent);
}
.ch-opener::after {
  bottom: 0;
  height: 78%;
  background: linear-gradient(0deg, rgba(10, 10, 12, 0.92) 0%,
              rgba(10, 10, 12, 0.62) 38%, transparent 100%);
}

.ch-opener-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(200px, 30vh, 340px) 24px clamp(28px, 4vh, 46px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ch-opener-label {
  display: inline-block;
  background: var(--gold, #C9A84C);
  color: #1A1A1A;
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  margin-bottom: 16px;
}

.ch-opener-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

/* Attribution stays in English and stays quiet, but stays visible. */
.ch-opener figcaption {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px clamp(18px, 2.5vh, 26px);
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}
.ch-opener figcaption .af-credit {
  display: block;
  margin-top: 5px;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.ch-opener figcaption .af-credit a { color: inherit; }

/* The article no longer needs its own top margin: the opener supplies it. */
.ch-opener + .page-layout { padding-top: 34px; }

@media (max-width: 899px) {
  .ch-opener img { object-position: center 42%; }
  .ch-opener-inner { padding: clamp(150px, 26vh, 230px) 20px 24px; }
  .ch-opener-title { max-width: 100%; }
  .ch-opener figcaption { padding: 0 20px 18px; }
}

@media (min-width: 900px) {
  .ch-opener-inner { padding-left: 40px; padding-right: 40px; }
  /* keep the caption aligned with the title, but stop it running the full
     1200px — long attribution lines are hard to scan */
  .ch-opener figcaption { padding-left: 40px; padding-right: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-opener--wide img { transition: none; }
}

/* The site is light-only; keep the opener dark regardless of OS preference. */
@media (prefers-color-scheme: dark) {
  .ch-opener-title { color: #fff !important; }
  .ch-opener figcaption { color: rgba(255, 255, 255, 0.62) !important; }
}

/* ── PLATE VARIANT ────────────────────────────────────────────────────────
 * The most important photographs in the archive are the ones that cannot be
 * cropped: Komaram Bheem's memorial is 540x1200, Jayashankar is 795x1200, the
 * 1969 street photograph is only 816px wide. Forcing those into a full-bleed
 * band would either behead the subject or upscale it into mush.
 *
 * So instead of choosing a worse photograph, this variant changes the frame:
 * the picture sits at its own aspect ratio on a dark plate, with the title
 * beside it. Same weight of opening, no crop, no upscale.
 */

.ch-opener--plate { background: radial-gradient(ellipse at 30% 30%, #232220, #161514); }

.ch-opener--plate .ch-opener-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  padding: 34px 24px 26px;
}

.ch-opener--plate .ch-opener-inner img {
  position: relative;
  inset: auto;
  /* width:auto so the frame hugs the photograph instead of letterboxing it */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(52vh, 420px);
  filter: none;
  justify-self: center;
  /* a thin warm edge so the photograph reads as a mounted plate, not a
     cutout floating on the background */
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  background: #0f0f10;
}

/* the plate supplies its own contrast, so the reading scrims are not needed */
.ch-opener--plate::before,
.ch-opener--plate::after { display: none; }

.ch-opener--plate .ch-opener-title { max-width: 18ch; text-shadow: none; }

.ch-opener--plate figcaption {
  padding-top: 0;
  padding-bottom: 30px;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 820px) {
  .ch-opener--plate .ch-opener-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 48px;
    padding: 52px 40px 40px;
    min-height: 360px;
  }
  /* text first in the source for screen readers, picture to its right */
  .ch-opener--plate .ch-opener-text { grid-column: 1; }
  .ch-opener--plate .ch-opener-inner img { grid-column: 2; grid-row: 1; max-height: min(56vh, 460px); }
}

@media (max-width: 819px) {
  /* picture above the title on narrow screens */
  .ch-opener--plate .ch-opener-inner img { order: -1; max-height: 46vh; }
  .ch-opener--plate .ch-opener-title { max-width: 100%; }
}