/* =====================================================================
   v33 · breadcrumbs as a route — switch: FEATURES["route_breadcrumbs"] in build.py
   Each step is a station on a line; the line draws itself from one station
   to the next, and the page you are on is lit red, set in italic.
   ===================================================================== */
.fg-crumbs {
    display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 8px; list-style: none; margin: 0 0 34px; padding: 8px 20px 8px 12px;
    border: 1px solid var(--fg-line); border-radius: 40px; background: rgba(255, 255, 255, 0.025);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-family: var(--fg-body) !important; font-size: 13px !important; letter-spacing: 0.02em; text-transform: none; color: var(--fg-muted);
}
.fg-crumbs li { position: relative; display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.fg-crumbs li + li { margin-left: 52px; }
/* the station */
.fg-crumbs li::after {
    content: ""; order: -1; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.7;
    transition: background 0.3s, border-color 0.3s, opacity 0.3s;
}
/* the line from the previous station (replaces the old "/") */
.fg-crumbs li + li::before {
    content: ""; position: absolute; left: -44px; top: 50%; width: 36px; height: 1px; margin: 0; opacity: 1;
    background: linear-gradient(90deg, rgba(243, 241, 236, 0.18), rgba(184, 32, 37, 0.8));
    transform: scaleX(0); transform-origin: 0 50%; animation: fgCrumbLine 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.fg-crumbs li:nth-child(2)::before { animation-delay: 0.35s; }
.fg-crumbs li:nth-child(3)::before { animation-delay: 0.65s; }
.fg-crumbs li:nth-child(4)::before { animation-delay: 0.95s; }
@keyframes fgCrumbLine { to { transform: scaleX(1); } }
.fg-crumbs a { color: var(--fg-muted); transition: color 0.3s; }
.fg-crumbs li:hover a { color: var(--fg-text); }
.fg-crumbs li:hover::after { background: var(--fg-text); border-color: var(--fg-text); opacity: 1; }
/* you are here */
.fg-crumbs li:last-child { color: var(--fg-text); font-family: var(--fg-serif); font-style: italic; font-size: 16px; letter-spacing: 0; }
.fg-crumbs li:last-child::after {
    background: var(--fg-red); border-color: var(--fg-red); opacity: 1;
    box-shadow: 0 0 0 0 rgba(184, 32, 37, 0.55); animation: fgCrumbPing 2s cubic-bezier(0.22, 1, 0.36, 1) infinite 1.2s;
}
@keyframes fgCrumbPing { 0% { box-shadow: 0 0 0 0 rgba(184, 32, 37, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(184, 32, 37, 0); } }
.fg-ct-head .fg-crumbs { justify-self: start; }
.fg-light .fg-crumbs { background: rgba(11, 15, 20, 0.03); }
@media (max-width: 575px) {
    .fg-crumbs { font-size: 12px !important; padding: 7px 16px 7px 10px; }
    .fg-crumbs li + li { margin-left: 38px; }
    .fg-crumbs li + li::before { left: -32px; width: 24px; }
    .fg-crumbs li:last-child { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .fg-crumbs li + li::before { animation: none; transform: none; }
    .fg-crumbs li:last-child::after { animation: none; }
}
/* larger on desktop: the route is a feature, not a footnote */
@media (min-width: 576px) {
    .fg-crumbs { font-size: 14px !important; padding: 11px 24px 11px 16px; margin-bottom: 40px; }
    .fg-crumbs li { gap: 12px; }
    .fg-crumbs li + li { margin-left: 74px; }
    .fg-crumbs li + li::before { left: -64px; width: 54px; }
    .fg-crumbs li::after { width: 8px; height: 8px; }
    .fg-crumbs li:last-child { font-size: 19px; }
}
/* the route always sits on its own line */
.fg-crumbs { display: flex; width: fit-content; max-width: 100%; }