/* ==========================================================================
   INDEX — the magazine-style "table of contents" list of clickable sections
   ========================================================================== */

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--paper-line);
}
.index-list li { border-bottom: 1px solid var(--paper-line); }

.index-row {
  width: 100%;
  display: grid;
  grid-template-columns: 2.6rem 1.3fr 1.7fr auto;
  align-items: center;
  gap: 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.5rem 0.9rem;
  text-align: left;
  transition: background 200ms var(--ease), padding-left 200ms var(--ease);
}
.index-row:hover,
.index-row:focus-visible {
  background: var(--sage-pale);
  padding-left: 1.6rem;
}

.index-row__num {
  color: var(--sage-deep);
  font-variant-numeric: tabular-nums;
}
.index-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.3vw, 1.7rem);
  color: var(--charcoal);
  font-style: italic;
}
.index-row__teaser {
  font-family: var(--font-body);
  color: var(--charcoal-faint);
  font-size: 0.94rem;
  line-height: 1.5;
}
.index-row__arrow {
  font-size: 1.3rem;
  color: var(--sage-deep);
  transform: rotate(0deg);
  transition: transform 260ms var(--ease);
  justify-self: end;
}
.index-row:hover .index-row__arrow,
.index-row:focus-visible .index-row__arrow {
  transform: translateX(4px);
}
.index-row.is-open {
  background: var(--sage-pale);
}
.index-row.is-open .index-row__title {
  color: var(--sage-deep);
}
.index-row.is-open .index-row__arrow {
  transform: rotate(90deg);
}
.index-row.is-open:hover .index-row__arrow {
  transform: rotate(90deg) translateX(4px);
}

@media (max-width: 720px) {
  .index-row {
    grid-template-columns: 2rem 1fr auto;
  }
  .index-row__teaser { display: none; }
}

/* ---- Dropdown panel ----
   The grid-template-rows 0fr -> 1fr trick animates height without
   knowing the content's size ahead of time. The inner wrapper clips
   the content while collapsed. */
.index-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease);
  background: var(--paper);
}
.index-panel.is-open { grid-template-rows: 1fr; }

.index-panel__inner {
  overflow: hidden;
  min-height: 0;
}

.index-panel__content {
  padding: 0.4rem 3.7rem 2rem 2.6rem;
  color: var(--charcoal-soft);
  line-height: 1.75;
  font-size: clamp(0.92rem, 1.3vw, 1rem);
}
.index-panel__content p { margin: 0 0 1em; }
.index-panel__content ul { margin: 0 0 1em; padding-left: 1.2em; }
.index-panel__content li { margin-bottom: 0.4em; }
.index-panel__content h3 {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--charcoal);
  font-size: 1.1em;
  margin: 1.1em 0 0.3em;
}
.index-panel__content .meta {
  font-family: var(--font-ui);
  font-size: 0.78em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 0.5em;
}

@media (max-width: 720px) {
  .index-panel__content { padding: 0.4rem 1rem 1.8rem 2rem; }
}

/* ---- Entry cards (Research / Experience / Projects) ---- */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0.4rem 0 0.4rem;
}
@media (max-width: 560px) {
  .entry-grid { grid-template-columns: 1fr; }
}

.entry-card {
  text-align: left;
  background: var(--cream);
  border: 1px solid var(--paper-line);
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease);
}
.entry-card:hover,
.entry-card:focus-visible {
  border-color: var(--sage);
  background: var(--sage-pale);
  transform: translateY(-2px);
}
.entry-card__meta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 0.4rem;
}
.entry-card__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--charcoal);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.entry-card__teaser {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--charcoal-faint);
  line-height: 1.5;
}
.entry-card__cta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--sage-deep);
  margin-top: 0.7rem;
  display: block;
}