/* The About page's tabs. */
/* Bio and Team: a bar that stays under the nav, one panel showing at a time. */
.page-head { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(26px, 3vw, 40px); }   /* room for the tabs above the fold */
.page-head .lede { max-width: 50em; margin-bottom: 0; }
.tabs { position: sticky; top: 76px; z-index: 40; background: rgb(11, 10, 9); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tabs .wrap { display: flex; flex-wrap: wrap; gap: 0 clamp(28px, 4vw, 56px); }
.tabs a { position: relative; padding: 17px 0 16px; font-size: 13px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; color: var(--bone-dim); transition: color .6s; }
.tabs a::after { content: ""; position: absolute; left: 0; right: .28em; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.tabs a:hover { color: var(--bone); }
.tabs a[aria-selected="true"] { color: var(--bone); }
.tabs a[aria-selected="true"]::after { transform: none; }
.tabs a:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.panel { padding-top: clamp(44px, 5.5vw, 72px); scroll-margin-top: 130px; animation: panel-in .9s ease; }
.panel[id] [id] { scroll-margin-top: 150px; }
@keyframes panel-in { from { opacity: 0; } }
html.quiet .panel { animation: none; }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }
@media (max-width: 480px) {
  .tabs .wrap { justify-content: space-between; gap: 0; }
  .tabs a { font-size: 12px; letter-spacing: .2em; }
}