/* Commitments list (ix-fan.js), design language v2: a ruled list, one row per commitment. Serif italic numeral in the
   left margin, the lead as the title, one sentence of body, a small-caps tag at the right. The base layout is the
   no-JS state with every sentence visible; .ix-fan--on (added by the script) folds it into an accordion. */
.ix-fan__list {
  --fan-num-col: 3.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ix-rule);
}

.ix-fan__row {
  display: grid;
  grid-template-columns: var(--fan-num-col) minmax(0, 1fr) auto;
  grid-template-areas:
    "num lead tag"
    "num body tag";
  column-gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-5) var(--s-4);
  border: 1px solid transparent;
  border-bottom-color: var(--ix-hair);
}

.ix-fan__num {
  grid-area: num;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--text-3);
}

.ix-fan__lead { grid-area: lead; display: block; }
.ix-fan__body { grid-area: body; margin: var(--s-2) 0 0; max-width: 40rem; }
.ix-fan__tag { grid-area: tag; white-space: nowrap; }

/* Accordion state: the head button carries number, lead and tag; the sentence opens beneath the lead. */
.ix-fan--on .ix-fan__row { display: block; padding: 0; }

.ix-fan__head {
  display: grid;
  grid-template-columns: var(--fan-num-col) minmax(0, 1fr) auto;
  grid-template-areas: "num lead tag";
  column-gap: var(--s-4);
  align-items: baseline;
  width: 100%;
  padding: var(--s-5) var(--s-4);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ix-fan__head:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: -4px; }

.ix-fan--on .ix-fan__body { margin: 0; padding: 0 var(--s-4) var(--s-5) calc(var(--fan-num-col) + var(--s-4) + var(--s-4)); }
.ix-fan--on .ix-fan__body[hidden] { display: none; }
.ix-fan--on .ix-fan__body.is-anim { animation: ix-fan-in var(--ix-t-swap) var(--ix-ease) both; }

.ix-fan__row.is-on .ix-fan__num { color: var(--text-1); }

@keyframes ix-fan-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 639px) {
  .ix-fan__list { --fan-num-col: 2.25rem; }

  .ix-fan__row,
  .ix-fan__head {
    grid-template-columns: var(--fan-num-col) minmax(0, 1fr);
    grid-template-areas:
      "num tag"
      "num lead"
      "num body";
    column-gap: var(--s-3);
  }

  .ix-fan__head { grid-template-areas: "num tag" "num lead"; padding-inline: var(--s-3); }
  .ix-fan--on .ix-fan__body { padding-inline: var(--s-3); padding-left: calc(var(--fan-num-col) + var(--s-3) + var(--s-3)); }
  .ix-fan__row { padding-inline: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .ix-fan--on .ix-fan__body.is-anim { animation: none; }
}

.ix-fan--on .ix-fan__tag::after { content: "+"; margin-left: var(--s-3); }
.ix-fan--on .is-on .ix-fan__tag::after { content: "\2212"; }