/* About page: avatar beside the opening line; people and tools in the text link to their projects. */
.about-hello { display: flex; align-items: center; gap: 24px; margin: 8px 0 28px; }
.about-avatar { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; filter: grayscale(1); border: 1px solid var(--line); }
.about-lead { margin: 0; font-size: 22px; line-height: 1.6; color: var(--ink); }
.inline-ref { color: var(--ink); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 160ms, background-color 160ms; }
.inline-ref:hover, .inline-ref:focus-visible { text-decoration-style: solid; background-color: var(--wash); }
@media (max-width: 499px) {
  .about-hello { gap: 16px; }
  .about-avatar { width: 80px; height: 80px; }
  .about-lead { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .inline-ref { transition: none; } }

.about-method { margin: 40px 0; border-block: 1px solid var(--line); }
.about-method > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 14px 0; list-style: none; cursor: pointer; color: var(--heading); }
.about-method > summary h2 { display: inline; margin: 0; }

.about-method > summary::-webkit-details-marker { display: none; }
.about-method-indicator { position: relative; flex: none; width: 16px; height: 16px; }
.about-method-indicator::before, .about-method-indicator::after { content: ""; position: absolute; background: currentColor; }
.about-method-indicator::before { inset: 7px 0; }
.about-method-indicator::after { inset: 0 7px; }
.about-method[open] .about-method-indicator::after { display: none; }