.about-nav { position: relative; }
.about-nav > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-inline: 4px; list-style: none; cursor: pointer; white-space: nowrap; }
.about-nav > summary::-webkit-details-marker { display: none; }
.about-nav > summary svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 180ms ease; }
.about-nav[open] > summary svg { transform: rotate(180deg); }
.about-nav > summary:hover, .about-nav[data-current] > summary { color: var(--orange); }
.about-nav--desktop .about-subnav { position: absolute; top: calc(100% + 14px); right: -18px; min-width: 252px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px #2629260d; }
.about-nav--desktop .about-subnav::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.about-nav--desktop .about-subnav a { display: flex; min-height: 48px; padding: 12px 14px; border-radius: 6px; font-size: 16px; line-height: 1.5; }
.about-nav--desktop .about-subnav a:hover { background: #ecebe366; }
.about-nav--mobile > summary { min-height: 60px; padding: 14px 0; font-size: 22px; font-weight: 500; line-height: 1.45; }
.about-nav--mobile > summary svg { width: 18px; height: 18px; }
.about-nav--mobile .about-subnav { margin: 0 0 12px 3px; padding-left: 18px; border-left: 1px solid var(--line); }
.about-nav--mobile .about-subnav a { min-height: 48px; padding: 10px 0; font-size: 18px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .about-nav > summary svg { transition: none; } }