/* Anchor nav — minimal tracked-caps jump links above the page hero. */

.anchor-nav { padding: 1.25rem 0 0; }

/* First thing on the page: clear the fixed navbar */
main > .anchor-nav:first-child {
    padding-top: calc(var(--nav-offset) + 1.5rem);
}

/* The hero below carries less top padding when the anchors lead */
.anchor-nav + .interior-hero {
    padding-top: clamp(2rem, 4.5vw, 3.25rem);
}

.anchor-nav__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: clamp(1.125rem, 2.5vw, 2rem);
    row-gap: 0.625rem;
}

.anchor-nav__label {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.anchor-nav__link {
    position: relative;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted-alias);
    padding: 0.25rem 0;
    transition: color 0.25s ease;
}

.anchor-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold-deep);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s ease;
}

.anchor-nav__link:hover,
.anchor-nav__link:focus-visible { color: var(--text-primary); }

.anchor-nav__link:hover::after,
.anchor-nav__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Interpunct separators between links */
.anchor-nav__link + .anchor-nav__link::before {
    content: '\00B7';
    position: absolute;
    left: calc(-0.5 * clamp(1.125rem, 2.5vw, 2rem));
    transform: translateX(-50%);
    color: var(--border-medium);
    pointer-events: none;
}

/* Anchored sections stop below the fixed navbar */
main section[id],
main nav[id] { scroll-margin-top: calc(var(--nav-offset) + 12px); }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Phones: the label takes its own line above the links */
@media (max-width: 640px) {
    .anchor-nav__label {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 0.125rem;
    }
}