/* Editorial vision and mission layout, scoped to the About page. */
.about-page #tentang .intro-grid {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(30px, 5vw, 72px);
}
.about-page #tentang .intro-card {
  position: sticky;
  top: 110px;
  min-width: 0;
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid var(--theme-line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--theme-primary) 3%, white);
  color: var(--theme-ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 5%, transparent);
}
.about-page #tentang .intro-card > .kicker,
.about-page #tentang .mission-list > .kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .12em;
}
.about-page #tentang .intro-card > .kicker { color: var(--theme-primary); }
.about-page #tentang .intro-card > p {
  margin: 27px 0 30px;
  padding-left: 20px;
  border-left: 2px solid var(--theme-accent);
  color: var(--theme-ink);
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 1.12rem + .75vw, 1.85rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.about-page #tentang .intro-card > .text-link {
  display: inline-block;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--theme-line);
  border-radius: 0;
  background: transparent;
  color: var(--theme-primary);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}
.about-page #tentang .mission-list {
  min-width: 0;
  padding: 4px 0 0;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.about-page #tentang .mission-list > .kicker {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--theme-line);
  color: var(--theme-primary);
}
.about-page #tentang .mission-list ol { gap: 0; }
.about-page #tentang .mission-list li {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  min-width: 0;
  padding: 25px 4px;
  border: 0;
  border-bottom: 1px solid var(--theme-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.about-page #tentang .mission-list li:last-child { padding-bottom: 8px; border-bottom: 0; }
.about-page #tentang .mission-list .number {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--theme-secondary);
  font-family: Georgia, serif;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.about-page #tentang .mission-list li > span:last-child {
  min-width: 0;
  color: var(--theme-ink);
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.about-page #tentang .mission-list li:not(:last-child)::after {
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--theme-line);
}
.about-page #tentang .mission-list li.is-being-read {
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-primary) 6%, transparent);
}
.about-page #tentang .about-voice-toggle {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  background: #fff;
  border-color: var(--theme-line);
  color: var(--theme-primary);
}
.about-page #tentang .about-voice-toggle[aria-pressed="true"] {
  background: var(--theme-primary);
  color: #fff;
}
.about-page #tentang .about-voice-status:not([hidden]) {
  margin: 0;
  padding: 10px 0;
  color: var(--theme-primary);
  font-size: .8rem;
}
.about-page #tentang .intro-card > .about-voice-status:not([hidden]) { padding-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .about-page #tentang .mission-list.mission-reveal-ready li { border-bottom-color: transparent; }
}
@media (max-width: 850px) {
  .about-page #tentang .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about-page #tentang .intro-card { position: static; padding: 26px 24px 30px; border-radius: 20px; }
  .about-page #tentang .intro-card > p { margin: 23px 0 26px; padding-left: 16px; font-size: 1.45rem; line-height: 1.65; }
  .about-page #tentang .mission-list { padding: 0 2px; }
  .about-page #tentang .mission-list li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 23px 0; }
  .about-page #tentang .mission-list .number { font-size: 1.65rem; }
  .about-page #tentang .mission-list li > span:last-child { font-size: 1rem; line-height: 1.8; }
}