/* ABOUT — a long cinematic scroll. Serif-led, chaptered,
   photographs running the full width between passages of text. */

.ahero{
  position:relative;
  height:clamp(520px,86svh,900px);
  overflow:hidden;
}
.ahero img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 46%;
  animation:aSettle 2.6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes aSettle{ from{ transform:scale(1.12); } to{ transform:none; } }
.ahero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,10,10,.95) 2%,rgba(11,10,10,.18) 48%,rgba(11,10,10,.62));
}
.ahero__copy{
  position:absolute; z-index:2;
  left:0; right:0; bottom:clamp(34px,6vw,80px);
  padding-inline:var(--gutter);
  max-width:1560px; margin-inline:auto;
}
.ahero__title{
  font-family:var(--serif);
  font-size:clamp(3.2rem,13vw,11rem);
  line-height:.9;
  letter-spacing:-.01em;
  margin:.1em 0 0;
  color:var(--bone);
}
.ahero__title em{ color:var(--blood); font-style:italic; }
.ahero__kicker{
  margin:clamp(16px,2.4vw,26px) 0 0;
  max-width:46ch;
  font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.6;
  color:#D4CCC5;
}

/* ---------- chapters ---------- */

.chapter{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
.chapter--flip{ grid-template-columns:120px minmax(0,.92fr) minmax(0,1fr); }
.chapter--flip .chapter__body{ order:2; }
.chapter--flip .chapter__fig{ order:1; }

.chapter__num{
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:.72rem; letter-spacing:.24em;
  color:var(--blood);
  font-variant-numeric:tabular-nums;
  padding-top:.7em;
  border-top:2px solid var(--blood);
}
.chapter__head{
  font-family:var(--serif);
  font-size:clamp(2rem,4.6vw,3.9rem);
  line-height:1.02;
  margin:0 0 clamp(16px,2.2vw,26px);
  text-wrap:balance;
}
.chapter__body .body-copy{ font-size:1.05rem; max-width:56ch; }
.chapter__fig{ position:relative; }
.chapter__fig img{ width:100%; }
.chapter__fig figcaption{
  padding-top:12px;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
}

/* ---------- full-bleed stills ---------- */

.still{ position:relative; overflow:hidden; }
.still img{
  width:100%; height:clamp(320px,70vh,760px); object-fit:cover;
}
.still--tall img{ height:clamp(420px,88vh,940px); }
.still figcaption{
  position:absolute; left:var(--gutter); bottom:18px;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(239,233,227,.78);
  text-shadow:0 1px 14px rgba(0,0,0,.8);
}

/* ---------- pull quote ---------- */

.pull{
  position:relative;
  border-block:1px solid var(--ink-3);
  padding-block:clamp(48px,8vw,120px);
  text-align:center;
}
.pull blockquote{
  margin:0 auto;
  max-width:22ch;
  font-family:var(--serif);
  font-size:clamp(1.9rem,6vw,4.6rem);
  line-height:1.06;
  color:var(--bone);
}
.pull blockquote em{ font-style:italic; color:var(--ember); }
.pull cite{
  display:block;
  margin-top:clamp(20px,3vw,34px);
  font-family:var(--display);
  font-style:normal;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ash);
}

/* ---------- accolades ledger ---------- */

.ledger{ margin:clamp(26px,4vw,44px) 0 0; }
.ledger dl{ margin:0; }
.ledger div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 20px;
  align-items:baseline;
  border-top:1px solid var(--ink-3);
  padding-block:16px;
}
.ledger div:last-child{ border-bottom:1px solid var(--ink-3); }
.ledger dt{
  font-variation-settings:"wdth" 82,"wght" 750;
  text-transform:uppercase;
  font-size:clamp(1rem,2.1vw,1.55rem);
  line-height:1.1;
}
.ledger dd{
  margin:0;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---------- MMIW ---------- */

.mmiw{
  background:var(--ink-2);
  border-block:1px solid var(--ink-3);
  position:relative;
}
.mmiw::before{
  content:"";
  position:absolute; inset-inline:0; top:0; height:4px;
  background:var(--blood);
}
.mmiw__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4.5vw,72px);
  align-items:start;
}
.mmiw__img img{ width:100%; }
.mmiw__tags{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  margin:22px 0 0;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blood);
  font-variation-settings:"wdth" 100,"wght" 700;
}
.ella{
  margin-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--ink-3);
  padding-top:clamp(24px,3vw,36px);
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:clamp(18px,3vw,34px);
  align-items:start;
}
.ella img{ width:100%; }

/* ---------- community strip ---------- */

.people{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(8px,1.2vw,16px);
  margin-top:clamp(26px,4vw,44px);
}
.people img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(.55) contrast(1.05);
  transition:filter .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.people a:hover img,.people figure:hover img{ filter:none; transform:scale(1.03); }

/* ---------- closing ---------- */

.closing{
  display:grid;
  grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);
  align-items:center;
}
.closing img{ width:100%; }

@media (max-width:1000px){
  .chapter,.chapter--flip{ grid-template-columns:70px minmax(0,1fr); }
  .chapter__fig{ grid-column:1/-1; order:3 !important; max-width:620px; }
  .chapter--flip .chapter__body{ order:2; }
  .mmiw__grid{ grid-template-columns:1fr; }
  .mmiw__img{ max-width:440px; }
  .closing{ grid-template-columns:1fr; }
  .closing figure{ max-width:380px; }
  .people{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px){
  .chapter,.chapter--flip{ grid-template-columns:1fr; gap:16px; }
  .chapter__num{ justify-self:start; padding-inline-end:1.4em; }
  .ella{ grid-template-columns:1fr; }
  .ella figure{ max-width:220px; }
  .ledger div{ grid-template-columns:1fr; }
  .ledger dd{ white-space:normal; }
}