/* About page — plate rhythm, source list, method steps, diagram. */

.about-hero h1 { max-width: none; }

.section-head { margin-bottom: var(--sp-5); }
.section-head .eyebrow { margin-bottom: var(--sp-2); }

/* how to read: the extract left, the rank ladder right */
.howto {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-5);
}
@media (max-width: 900px) {
  .howto { grid-template-columns: 1fr; }
}
.diagram svg { width: 100%; height: auto; }
/* the diagram keeps a legible size on phones and scrolls sideways instead
   of shrinking its labels to dust */
@media (max-width: 640px) {
  .diagram { overflow-x: auto; }
  .diagram svg { min-width: 520px; }
}
.diagram-caption { margin-top: var(--sp-3); font-size: var(--text--1); color: var(--ink-soft); }
.rank-explain .rx {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.rank-explain .rk {
  width: 4.2rem; flex: none;
  font-size: var(--text-tag); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink);
}
.rank-explain p { max-width: 38ch; }

/* sources */
.sources { list-style: none; padding: 0; max-width: 60rem; }
.sources li {
  display: grid;
  grid-template-columns: 1.5rem 11rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.source-chip {
  width: 1.35rem;
  height: 1.35rem;
  align-self: center;
  /* full-edge 12° slant: rise = 21% of width, same angle as every cut */
  clip-path: polygon(0 0, 100% 0, 100% 79%, 0 100%);
}
.sources .name { font-weight: 700; }
.sources .gives { color: var(--ink-soft); }
/* the 11rem name column wraps long source names badly below ~760 */
@media (max-width: 760px) {
  .sources li { grid-template-columns: 1.5rem 1fr; }
  .sources .gives { grid-column: 2; }
}

/* method steps: a real sequence, so the numbers carry meaning */
.steps { list-style: none; padding: 0; counter-reset: step; max-width: 60rem; }
.steps li {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--step-hue, var(--peri-deep));
}
.steps h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: var(--sp-1); }
.steps p { max-width: var(--measure); }

/* honesty plate: the number and its sentence share one aligned row */
.gate-figure {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
  max-width: 44rem;
}
.gate-figure .big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--display-1);
  line-height: 1;
}
.gate-figure .vs { max-width: 40ch; }
@media (max-width: 640px) {
  /* single digits at 2.2rem are ~20px wide: 3.6rem of gutter is mostly air */
  .steps li { grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); }
  /* the big numeral stacks above its sentence instead of squeezing it */
  .gate-figure { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* intro: the story left at full measure, the numbers right, grouped the way
   the data actually is: the map, the ladder that organizes it, its orbit */
.intro {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(15rem, 21rem);
  gap: clamp(var(--sp-6), 7vw, 7rem);
  justify-content: space-between;
}
.intro-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.intro-stats .n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-3);
  line-height: 1.1;
}
.intro-stats .l { font-size: var(--text--1); color: var(--ink-soft); }
.stat-group { padding: 0; }
.stat-hero {
  display: flex;
  align-items: last baseline;
  gap: 0.75rem;
}
.stat-hero .n {
  font-weight: 900;
  font-size: var(--display-1);
  line-height: 0.95;
}
.stat-hero .l { max-width: 9ch; line-height: 1.35; }
.stat-line { margin-top: var(--sp-3); }
.stat-line .n { font-size: 1.35rem; margin-right: 0.35rem; }
/* the ladder steps down as it narrows: region contains family contains scene */
.ladder .rung + .rung { margin-top: var(--sp-2); }
.ladder .rung:nth-child(2) { padding-left: 1.4rem; }
.ladder .rung:nth-child(3) { padding-left: 2.8rem; }
.ladder .n { margin-right: 0.45rem; }
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .stat-group:first-child { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
}
.stamp .cell .n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-3);
  display: block;
}
.stamp .cell .l { font-size: var(--text--1); color: var(--ink-soft); }