/* Compact project previews and quiet, consistent interface details. */
.interest-trail { max-width: 1000px; }
.interest-timeline__item {
    display: block;
    padding: 28px 0;
    box-shadow: inset 0 1px var(--line);
}
.interest-timeline__item:first-child { padding-top: 0; box-shadow: none; }
.interest-timeline__item:last-child { padding-bottom: 0; }
.trail-entry--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
.trail-entry__copy { max-width: 62ch; position: static; }
.trail-entry__heading { margin-bottom: 14px; }
.trail-entry h4 { font-size: 1.2rem; line-height: 1.45; }
.trail-entry h4 a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.trail-entry h4 a:hover { text-decoration: underline; }
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font: 400 .78rem/1.65 var(--font-body);
    color: var(--muted-strong);
}
.project-tag {
    max-width: 100%;
    padding: 2px 8px;
    background: var(--panel);
    border-radius: 0;
    overflow-wrap: anywhere;
}
.archive-list .project-tags { margin-left: 50px; }
.applet-heading .project-tags { margin-bottom: 10px; }
.trail-entry .interest-timeline__year {
    display: inline-block;
    padding: 0;
    margin-left: 10px;
    font-size: .78rem;
}
.trail-entry__heading h4 + .interest-timeline__year { margin: 8px 0 0; }
.project-visuals { min-width: 0; width: 260px; max-width: 100%; }
.project-visuals .trail-media { --media-max-height: 180px; }
.project-visuals > .trail-media img,
.project-visuals > .trail-media video {
    width: min(100%, calc(var(--media-max-height) * var(--media-ratio)));
    height: auto;
    max-height: var(--media-max-height);
    margin-left: auto;
    object-fit: contain;
}
.project-visuals .trail-gallery { gap: 8px; }
.project-visuals .render-study { margin-top: 20px; padding-top: 0; }
.project-visuals .render-study h5 { font-size: .85rem; font-weight: 500; }
.project-visuals .render-comparison__labels { font-size: .75rem; }
.project-visuals .render-comparison { margin-top: 8px; }

/* Existing actions keep visible underlines and keyboard focus outlines. */
.hero-link-list { gap: 12px; box-shadow: none; }
.hero-summary-link, .hero-summary-link + .hero-summary-link {
    background: var(--bg-elevated);
    box-shadow: inset 0 0 0 1px var(--line);
}
.hero-summary-link:hover { text-decoration: underline; }
.hero-summary-link:hover > span:first-child { text-decoration: underline; }
.hero-summary-link small { min-height: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, .is-expandable-media:focus-visible {
    outline: 2px solid var(--muted-strong);
    outline-offset: 4px;
}
.media-frame .is-expandable-media:focus-visible {
    outline: 2px solid var(--muted-strong);
}
.interest-archive { max-width: 1000px; box-shadow: inset 0 1px var(--line); }
.interest-archive > summary { padding-block: 16px; }
.interest-archive > .interest-trail { margin-top: 24px; padding-top: 24px; }

@media (max-width: 640px) {
    .trail-entry--with-media { grid-template-columns: 1fr; gap: 18px; }
    .project-visuals { width: min(280px, 100%); }
    .project-visuals .trail-media { --media-max-height: 190px; }
    .project-visuals > .trail-media img,
    .project-visuals > .trail-media video { margin-left: 0; }
    .interest-timeline__item { padding-block: 24px; }
}