/* Differences from the shared project index: About-tray activation and 2 columns. */
#profile {
    --about-link-top: var(--public-navigation-top);
    --about-link-right: clamp(18px, 3.25vw, 52px);
}

#news-index {
    --index-column-date-width: 132px;
    --index-table-width: 100%;
    --news-content-inset: calc(var(--about-link-top) - var(--about-scroll-top) + 1.4 * 12px + clamp(18px, 3vh, 34px));
    padding-top: var(--about-link-top);
}

#news-index::before {
    /* Keep scrolled rows out of the fixed return row without covering the track. */
    content: "";
    position: absolute;
    z-index: 2;
    top: var(--about-scroll-top);
    left: calc(var(--about-side-inset) + 4px);
    right: var(--index-padding-x);
    height: var(--news-content-inset);
    background: var(--project-background);
}

#news-index .project-index-header {
    z-index: 3;
    margin-right: calc(var(--about-link-right) - var(--index-padding-x));
    pointer-events: none;
}

#news-index .project-index-header a {
    pointer-events: auto;
}

#news-index-back {
    margin-left: auto;
    text-align: right;
}

#news-index-filters {
    left: var(--news-filter-left, 0px);
    right: var(--index-filter-right);
}

#news-index-scroll {
    /* Match About's always-visible, four-pixel custom gutter on the left. */
    position: absolute;
    top: var(--about-scroll-top);
    bottom: var(--about-scroll-bottom);
    left: var(--about-side-inset);
    right: var(--index-padding-x);
    width: auto;
    max-width: none;
    margin-right: 0;
    direction: rtl;
    overflow-y: scroll;
    scrollbar-width: auto;
    scrollbar-color: auto;
    scrollbar-gutter: auto;
}

#news-index-content {
    position: absolute;
    left: var(--about-side-inset);
    right: 0;
    /* Reserve the return row inside the content, not above the scrollbar. */
    padding-top: var(--news-content-inset);
    direction: ltr;
}

#news-index .project-index-table thead {
    top: var(--news-content-inset);
}

#profile.news-mode #news-index {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 250ms ease-in-out, visibility 0s;
}

#profile.news-mode #profile_content {
    visibility: hidden;
    pointer-events: none;
}

#profile.news-mode #profile-news-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease-in-out, visibility 0s linear 250ms;
}

#profile-news-toggle {
    position: absolute;
    z-index: 61;
    top: var(--about-link-top);
    right: var(--about-link-right);
    color: var(--project-text);
    font: 600 12px/1.4 "Figtree", sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    outline: none;
    transition: opacity 250ms ease-in-out, visibility 0s;
}

#profile-news-toggle:hover {
    filter: drop-shadow(0 0 .026667em currentColor);
}

.news-index-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}

.news-index-date { width: var(--index-column-date-width); }
.news-index-text {
    width: auto;
    text-wrap: balance;
}

.news-index-date time,
.news-index-date a { white-space: nowrap; }

@media (max-width: 699px) {
    #news-index {
        /* The same internal blank space as the narrow About introduction. */
        --news-content-inset: 100px;
    }
}

@media (max-width: 767px) {
    #profile {
        --about-link-right: 16px;
    }
    #news-index {
        --index-column-date-width: 84px;
        padding-top: var(--about-link-top);
    }
}

@media (prefers-reduced-motion: reduce) {
    #profile-news-toggle {
        transition-duration: 1ms;
        transition-delay: 0ms;
    }
}