/* ==========================================================================
   devanshi jain — chapters
   Laid out as in the brand deck (page 19): eight chapters in four columns,
   read down each column. The bars come from page.css.
   Proportions are taken from the deck at 1056×589.
   ========================================================================== */

:root {
  --col: 15.3vw;           /* chapter width (title to +) */
  --img: 8.7vw;            /* square image */
  /* column starts as in the deck: 25.1%, 50.2%, 75.1% of the width (the first starts at --side) */
  --tracks: calc(25.1vw - var(--side)) 25.1vw 24.9vw 1fr;
}

/* page.css draws the fixed logo + 'index' bar and the footer; the chapters scroll between them */
body { line-height: 1.4; }
p, h2, ol { margin: 0; padding: 0; }
ol { list-style: none; }

/* the grid: two rows, filled column by column (i/ii, iii/iv, v/vi, vii/viii) */
.ch-grid {
  display: grid;
  grid-template-columns: var(--tracks);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  row-gap: clamp(28px, 4.6vh, 60px);
  padding: var(--fade) 0 var(--fade) var(--side);   /* starts right under the top bar, like press + terms */
}
.ch { width: var(--col); }
.ch__head { display: flex; justify-content: space-between; align-items: baseline; }
.ch__title { font-weight: 300; font-size: 1em; color: var(--ink); letter-spacing: 0.02em; }
.ch__more { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px; color: var(--ink); align-self: center; }
.ch__more svg { display: block; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
@media (hover: hover) { a.ch__more:hover { opacity: .6; } }
.is-soon { cursor: default; }
/* room for four lines, so the images in a row share one top edge whatever the text length */
.ch__text { margin-top: .5em; min-height: calc(4 * 1.4em); }
.ch__img {
  display: block; width: var(--img); height: auto; aspect-ratio: 1 / 1; margin-top: 1em;   /* height:auto lets the square win over the img's height attribute */
  object-fit: cover; background: #efefee;
}
/* which part of a photo stays in the square ('focus' in content/chapters.php) */
.ch__img.focus-left { object-position: 35% 50%; }
.ch__img.focus-right { object-position: 65% 50%; }
.ch__img.focus-top { object-position: 50% 20%; }
.ch__img.focus-bottom { object-position: 50% 100%; }
.ch__img--empty { background: linear-gradient(135deg, #f0f0ef, #e6e6e5); }

/* tablets + small laptops: two columns, read in order */
@media (max-width: 1099px) {
  :root { --tracks: 1fr 1fr; --col: auto; --img: 46%; }
  .ch-grid { grid-template-rows: none; grid-auto-flow: row; column-gap: 6vw; padding-right: var(--side); }
  .ch__text { min-height: calc(3 * 1.4em); }
}

/* phones */
@media (max-width: 719px) {
  :root { --img: 100%; }
  .ch-grid { column-gap: 22px; row-gap: 44px; }
  .ch__text { min-height: calc(4 * 1.4em); }
}

/* ---------- tap & click feel ---------- */
.ch__more { position: relative; -webkit-user-select: none; user-select: none; }
.ch__more::after { content: ""; position: absolute; inset: -11px; }      /* 22px → 44px */
@media (hover: none) { a.ch__more:active { opacity: .5; } }