/* ==========================================================================
   About — magazine editorial: split masthead, drop-cap column with a ruled
   fact file, name band, five-era ledger, dark argument list, method columns.
   ========================================================================== */

/* ---------------- Page head ---------------- */
.ab-head { border-bottom: 1px solid var(--rule); }
.ab-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.8rem, 4vw, 4.5rem);
  align-items: end;
}
.ab-head__title { letter-spacing: -.03em; }
.ab-head__side { padding-bottom: .6rem; }
.ab-head__names {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 860px) {
  .ab-head__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------------- Who she was ---------------- */
.ab-who__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2.2rem, 5vw, 5rem);
  align-items: start;
  padding-top: clamp(1.5rem, 3vw, 3rem);
}
.ab-who__h { max-width: 16ch; margin-bottom: 1.8rem; }
.ab-who__prose p { max-width: 64ch; }

.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.6em;
  line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--oxblood);
}

/* Fact file */
.factfile {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  position: sticky;
  top: 6.5rem;
}
.factfile__h {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 1.2rem;
}
.factfile__list { display: grid; margin: 0; }
.factfile__list > div {
  padding-block: .8rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: .25rem;
}
.factfile__list dt {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.factfile__list dd { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
.factfile__note {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

@media (max-width: 980px) {
  .ab-who__grid { grid-template-columns: minmax(0, 1fr); }
  .factfile { position: static; }
}

/* ---------------- Name band ---------------- */
.ab-band { padding-block: clamp(3rem, 6vw, 5.5rem); }
.ab-band__grid {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.ab-band__fig { max-width: 25rem; }
.ab-band__h { max-width: 24ch; margin-bottom: 2rem; }

.namelist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.namelist li {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: .4rem clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.namelist__n { font-family: var(--display); font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--ink); }
.namelist__d { font-size: .92rem; line-height: 1.65; color: var(--ink-mute); }

@media (max-width: 860px) {
  .ab-band__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-band__fig { max-width: 19rem; }
  .namelist li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Eras ---------------- */
.eras__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.eras__head h2 { max-width: 14ch; }
.eras__lede { max-width: 48ch; }
@media (max-width: 900px) {
  .eras__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
.eras__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}
.era {
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(.9rem, 1.6vw, 1.4rem) clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.era + .era { border-left: 1px solid var(--rule); }
.era::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--oxblood);
  transition: width .8s var(--ease);
}
.era.is-in::before, .no-js .era::before { width: 100%; }
.era__span {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--oxblood);
  margin-bottom: 1rem;
}
.era__h { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.2; margin-bottom: .8rem; }
.era__t { font-size: .9rem; line-height: 1.68; color: var(--ink-mute); }

@media (max-width: 1080px) {
  .eras__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .era:nth-child(odd) { border-left: 0; }
  .era:nth-child(even) { border-left: 1px solid var(--rule); }
}
@media (max-width: 620px) {
  .eras__list { grid-template-columns: minmax(0, 1fr); }
  .era, .era:nth-child(even) { border-left: 0; }
}

/* ---------------- Why it matters ---------------- */
.why { padding-block: clamp(4rem, 9vw, 8rem); }
.why__inner { position: relative; }
.why__head { max-width: 22ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.why__list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.wpoint {
  display: grid;
  grid-template-columns: clamp(3.5rem, 7vw, 6rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--rule-night);
}
.wpoint:last-child { border-bottom: 1px solid var(--rule-night); }
.wpoint__n { font-size: clamp(1.4rem, 2.6vw, 2.1rem); color: var(--brass); line-height: 1; }
.wpoint__h { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: .8rem; max-width: 30ch; }
.wpoint__t { font-size: .97rem; line-height: 1.75; color: var(--night-text); max-width: 68ch; }
.why__note { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

@media (max-width: 620px) {
  .wpoint { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}

/* ---------------- Method ---------------- */
.method__grid { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
.method__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
}
.method__col {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(1.3rem, 2.6vw, 2rem);
}
.method__col--yes { border-top: 3px solid var(--brass); }
.method__col--no  { border-top: 3px solid var(--oxblood); }
.method__h {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.ticks, .crosses { display: grid; gap: .85rem; list-style: none; margin: 0; padding: 0; }
.ticks li, .crosses li {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: .6rem;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-mute);
}
.ticks li::before { content: "\002713"; color: var(--brass-ink); font-size: .95rem; line-height: 1.6; }
.crosses li::before { content: "\002715"; color: var(--oxblood); font-size: .9rem; line-height: 1.7; }

.method__cta { font-size: 1rem; color: var(--ink-mute); }
.method__cta a { color: var(--oxblood); text-underline-offset: .2em; }

@media (max-width: 720px) {
  .method__cols { grid-template-columns: minmax(0, 1fr); }
}