/* =========================================================
   TIMELINE V3 — VERTICAL / MOBILE FIRST

   First-pass goals:
   - natural vertical page flow
   - no modal / tooltip / filter interactions
   - editorial hierarchy:
       PRIMARY   = larger image
       CONTEXT   = slightly smaller image
       SECONDARY = icon + year
   - compressed chronological scale:
       time still affects spacing, but never literally
   ========================================================= */


/* ---------- PAGE ---------- */

.timeline-v3-page {
    position: relative;
    z-index: 0;
    isolation: isolate;

    /*
       INDEPENDENT MOTION / OPACITY CONTROLS

       MEDIA = primary/context image
       COPY = primary/context date + title
       SECONDARY = secondary circle + year, including a same-year
       secondary icon merged into a primary/context event.

       All groups start with the same values so this version preserves
       the current visual behavior until you tune them independently.
    */

    /* MEDIA */
    --timeline-v3-media-perspective: 380px;
    --timeline-v3-media-max-rotate: 14;
    --timeline-v3-media-min-scale: .84;
    --timeline-v3-media-reveal-entry: 110px;
    --timeline-v3-media-reveal-exit: 110px;

    /* DATE + TITLE */
    --timeline-v3-copy-perspective: 380px;
    --timeline-v3-copy-max-rotate: 14;
    --timeline-v3-copy-min-scale: .84;
    --timeline-v3-copy-reveal-entry: 110px;
    --timeline-v3-copy-reveal-exit: 110px;

    /* SECONDARY EVENTS */
    --timeline-v3-secondary-perspective: 380px;
    --timeline-v3-secondary-max-rotate: 14;
    --timeline-v3-secondary-min-scale: .84;
    --timeline-v3-secondary-reveal-entry: 110px;
    --timeline-v3-secondary-reveal-exit: 110px;

    width: 100%;
    background: var(--surface-page);
    color: var(--primary-color);
}




/* ---------- INTRO / PAGE HEADING ---------- */

.timeline-v3-intro {
    /*padding-top: var(--content-space-top);*/
    padding-bottom: 60px;
}

.timeline-v3-heading {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.timeline-v3-kicker {
    margin: 0 0 10px;

    font-family: var(--secondary-font);
    font-size: 13px;
    font-weight: var(--weight-regular);
    line-height: 1.3;

    color: var(--secondary-color);
}

.timeline-v3-heading-rule {
    width: 100%;
    margin: 0 0 12px;

    border: 0;
    border-top: 1px solid #00000020;
}

.timeline-v3-title,
.timeline-v3-outro-title {
    margin: 0;

    font-family: var(--main-font);
    font-size: 28px;
    font-weight: var(--weight-semibold);
    line-height: 1.15;
    letter-spacing: -0.025em;

    color: var(--primary-color);
    text-transform: none;
}

.timeline-v3-intro-text,
.timeline-v3-outro-text {
    margin: 16px 0 0;
}

/*
   The closing copy is semantically independent from the intro, but it
   follows the same page-width / gutter system.
*/
.timeline-v3-outro {
    width: 100%;
    padding-bottom: var(--content-space-bottom);
}

.timeline-v3-outro-inner {
    width: 100%;
}


/* ---------- TIMELINE ---------- */

.timeline-v3-section {
    padding-bottom: var(--content-space-bottom);
}

.timeline-v3-container {
    min-width: 0;
}

/*
   COMPACT:
   Timeline heading and timeline content share the same exact
   40px left/right gutter. This also removes the apparent extra
   inset that the first prototype created with image bleed.
*/
@media (max-width: 609px) {
    /*
       PAGE HEADING — COMPLETELY INDEPENDENT

       There is intentionally NO .page-container and NO semantic <header>
       around this heading.

       IMPORTANT:
       legacy styles.css applies sticky positioning + 40px horizontal padding
       to every <header> element. Using <header> here would therefore add an
       unwanted second 40px inset and make the heading sticky.

       The section itself owns the exact viewport gutters:
       40px left + 40px right.
    */
    .timeline-v3-intro,
    .timeline-v3-outro {
        width: 100%;
        box-sizing: border-box;
        padding-left: 40px;
        padding-right: 40px;
    }

    .timeline-v3-heading,
    .timeline-v3-outro-inner {
        width: 100%;
    }

    /*
       TIMELINE CONTENT

       Separate geometry, also beginning 40px from the viewport edge.
    */
    .timeline-v3-container {
        width: calc(100% - 80px);
        margin-inline: auto;
    }

    .timeline-v3-track {
        width: 100%;
    }
}

.timeline-v3-track {
    /*
       The rail is intentionally left of the text column.

       Scale values are read by timeline-v3.js:
       - same-year events stay close together
       - larger year differences create more air
       - logarithmic compression prevents giant empty stretches
    */
    /*
       COMPACT ALIGNMENT GUIDES

       The .page-container begins 40px from the viewport edge.

       guide 1 — media / page heading = 0px   → viewport x 40px
       guide 2 — timeline rail         = 40px  → viewport x 80px
       guide 3 — ALL event copy        = 80px  → viewport x 120px

       Event hierarchy must never change these alignments.
    */
    --timeline-v3-axis-x: 40px;
    --timeline-v3-copy-x: 80px;

    --timeline-v3-gap-same-year: 40px;
    --timeline-v3-gap-min: 40px;
    --timeline-v3-gap-max: 110px;

    /*
       FILTER SCALE ANIMATION

       Hidden rows collapse to 0 while the remaining visible rows
       receive newly calculated chronological gaps.
    */
    --timeline-v3-filter-layout-duration: 380ms;
    --timeline-v3-filter-fade-duration: 190ms;

    --timeline-v3-primary-media-width: 100%;
    --timeline-v3-context-media-width: 100%;

    --timeline-v3-icon-size: 52px;

    position: relative;
    width: 100%;

    padding-top: 2px;
    padding-bottom: 28px;
}


/* Vertical rail */

.timeline-v3-track::before {
    content: "";

    position: absolute;

    /*
       JS measures the CENTER of the first and last visible markers.
       The rail therefore begins/ends exactly at those points instead
       of using guessed offsets tied to image or track height.
    */
    top: var(--timeline-v3-rail-top, 126px);
    bottom: var(--timeline-v3-rail-bottom, 30px);

    left: var(--timeline-v3-axis-x);

    width: 1px;

    background:
        color-mix(
            in srgb,
            var(--secondary-color) 70%,
            transparent
        );

    pointer-events: none;
    z-index: 0;
}


/* ---------- ALL EVENTS ---------- */

.timeline-v3-event {
    position: relative;
    z-index: 1;

    margin-top: var(--timeline-v3-gap, 88px);

    /*
       JS measures the natural row height without changing its content.
       max-height gives us an animatable collapse axis while the event
       is filtered out.
    */
    max-height: var(--timeline-v3-natural-height, none);

    /*
       The event wrapper stays geometrically stable for Watch motion.
       Filter layout animation happens here; perspective stays on the
       children exactly as before.
    */
}

.timeline-v3-event:first-child {
    margin-top: 0;
}


/*
   DYNAMIC FILTER SCALE

   Initialization is intentionally non-animated. Once JS has measured
   every event and calculated the first visible chronology, it adds:
   - is-filter-layout-ready
   - then is-filter-animated on the next frame.

   After that, filter changes animate BOTH:
   - event collapse / expansion
   - newly calculated chronological gaps.
*/
.timeline-v3-track.is-filter-layout-ready
.timeline-v3-event {
    max-height:
        var(
            --timeline-v3-natural-height,
            1200px
        );
}

.timeline-v3-track.is-filter-animated
.timeline-v3-event {
    transition:
        margin-top
            var(--timeline-v3-filter-layout-duration)
            cubic-bezier(.22, .61, .36, 1),
        max-height
            var(--timeline-v3-filter-layout-duration)
            cubic-bezier(.22, .61, .36, 1),
        opacity
            var(--timeline-v3-filter-fade-duration)
            ease;
}

/*
   overflow is needed only while a row physically collapses/expands.
   JS removes is-filter-transitioning after the layout transition so
   media shadows are never permanently clipped.
*/
.timeline-v3-event.is-filter-transitioning {
    overflow: hidden;
}


/*
   WATCH-LIKE SCROLL PERSPECTIVE — INDEPENDENT AXES

   The event wrapper is deliberately NOT transformed.

   JS writes one shared rotate/scale value on each event, but every
   visual piece consumes those values around its own transform origin.

   Result:
   - rail stays fixed
   - primary dot stays fixed
   - media pivots around its own center
   - copy keeps its left alignment guide
   - secondary circle stays fixed on the rail while its inner surface
     scales/rotates around its own center
*/
.timeline-v3-event-visual {
    position: relative;
    width: 100%;
}

.timeline-v3-media,
.timeline-v3-main-copy,
.timeline-v3-secondary-icon-surface,
.timeline-v3-secondary-copy {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}


/*
   PRIMARY / CONTEXT MEDIA
*/
.timeline-v3-media {
    opacity: var(--timeline-v3-media-opacity, 1);

    transform-origin: center center;
    transform:
        perspective(var(--timeline-v3-media-perspective))
        rotateX(var(--timeline-v3-media-rotate, 0deg))
        scale(var(--timeline-v3-media-scale, 1));
}


/*
   PRIMARY / CONTEXT DATE + TITLE

   Dot stays fixed on the rail.
   Only .timeline-v3-main-copy participates in this motion profile.
*/
.timeline-v3-main-copy {
    opacity: var(--timeline-v3-copy-opacity, 1);

    transform-origin: left center;
    transform:
        perspective(var(--timeline-v3-copy-perspective))
        rotateX(var(--timeline-v3-copy-rotate, 0deg))
        scale(var(--timeline-v3-copy-scale, 1));
}


/*
   SECONDARY EVENT

   Outer circle remains the positional anchor on the rail.
   Its inner surface and year use the same secondary perspective values.
*/
.timeline-v3-secondary-copy {
    min-width: 0;

    transform-origin: left center;
    transform:
        perspective(var(--timeline-v3-secondary-perspective))
        rotateX(var(--timeline-v3-secondary-rotate, 0deg))
        scale(var(--timeline-v3-secondary-scale, 1));
}

.timeline-v3-secondary-icon-surface {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border-radius: inherit;
    background: inherit;

    transform-origin: center center;
    transform:
        perspective(var(--timeline-v3-secondary-perspective))
        rotateX(var(--timeline-v3-secondary-rotate, 0deg))
        scale(var(--timeline-v3-secondary-scale, 1));
}


/* ---------- PRIMARY + CONTEXT EVENTS ---------- */

.timeline-v3-media {
    position: relative;
    z-index: 2;

    display: block;

    width: min(
        var(--timeline-v3-primary-media-width),
        100%
    );

    aspect-ratio: 1.48 / 1;

    margin: 0;

    overflow: hidden;

    border: 6px solid var(--surface-page);
    background: var(--surface-page);

    box-shadow:
        0 12px 38px rgba(0, 0, 0, 0.18);
}

.timeline-v3-event--context .timeline-v3-media {
    width: min(
        var(--timeline-v3-context-media-width),
        100%
    );
}

.timeline-v3-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*
   Year + title live to the right of the rail.
   The dot is part of this metadata row rather than the image,
   so image size can vary without changing the rail grammar.
*/

.timeline-v3-main-meta {
    position: relative;

    min-height: 40px;
    margin-top: 24px;

    padding-left: var(--timeline-v3-copy-x);
}

.timeline-v3-dot {
    position: absolute;

    top: 12px;
    left: var(--timeline-v3-axis-x);

    width: 6px;
    height: 6px;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: var(--secondary-color);
}

/*
   SAME-YEAR SECONDARY EVENT

   If a secondary event shares the exact year of a primary/context
   event, JS moves its circle into the primary metadata row.

   The circle occupies the SAME axis position as the primary dot,
   and the duplicate secondary year/event row is removed.
*/
.timeline-v3-main-meta.has-shared-secondary .timeline-v3-dot {
    visibility: hidden;
}

/*
   If the merged secondary marker is filtered out, the host main event
   must still retain its own primary dot on the rail.
*/
.timeline-v3-main-meta.has-shared-secondary.is-shared-secondary-filtered
.timeline-v3-dot {
    visibility: visible;
}

.timeline-v3-shared-secondary-icon {
    position: absolute;

    /*
       Although this icon is physically moved into a primary meta row,
       it keeps the SECONDARY motion/opacity profile.
    */
    opacity: var(--timeline-v3-secondary-opacity, 1);

    top: 12px;
    left: var(--timeline-v3-axis-x);

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--timeline-v3-icon-size);
    height: var(--timeline-v3-icon-size);

    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: transparent;

    font-size: 28px;
    line-height: 1;

    z-index: 3;
}

.timeline-v3-shared-secondary-icon .timeline-v3-secondary-icon-surface {
    background: var(--surface-page);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.10);
}

.timeline-v3-main-copy {
    min-width: 0;
}

.timeline-v3-year {
    margin: 0 0 3px;

    font-family: var(--secondary-font);
    font-size: 20px;
    font-weight: var(--weight-regular);
    line-height: 1.2;
    letter-spacing: -1px;

    color: var(--secondary-color);

    font-variant-numeric: tabular-nums;
}

.timeline-v3-event-title {
    margin: 0;

    max-width: 200px;

    font-family: var(--main-font);
    font-size: 24px;
    font-weight: var(--weight-semibold);
    line-height: 1.15;
    letter-spacing: -0.015em;

    color: var(--primary-color);

    text-wrap: balance;
}

.timeline-v3-event--context .timeline-v3-event-title {
    font-size: 24px;
}


/* ---------- SECONDARY / CONTEXTUAL MARKERS ---------- */

.timeline-v3-event--secondary {
    min-height: var(--timeline-v3-icon-size);

    /*
       Secondary rows fade as one event.
       building-secondary uses a small rail dot instead of the icon circle.
    */
    opacity: var(--timeline-v3-secondary-opacity, 1);
}

.timeline-v3-event--secondary .timeline-v3-event-visual {
    min-height: var(--timeline-v3-icon-size);

    padding-left: var(--timeline-v3-copy-x);

    display: flex;
    align-items: center;
}

/*
   BUILDING-SECONDARY

   Same semantic family as Casa Rocca, but without image:
   - no emoji
   - no 52px white circle
   - same small grey rail dot used by primary building events
   - year + optional label only
*/
.timeline-v3-event--building-secondary {
    min-height: 40px;
}

.timeline-v3-event--building-secondary
.timeline-v3-event-visual {
    min-height: 40px;
    align-items: flex-start;
}

.timeline-v3-building-secondary-dot {
    position: absolute;

    top: 12px;
    left: var(--timeline-v3-axis-x);

    width: 6px;
    height: 6px;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: var(--secondary-color);

    z-index: 2;
}


.timeline-v3-secondary-icon {
    position: absolute;

    left:
        calc(
            var(--timeline-v3-axis-x)
            - (var(--timeline-v3-icon-size) / 2)
        );

    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--timeline-v3-icon-size);
    height: var(--timeline-v3-icon-size);

    transform: translateY(-50%);

    border-radius: 50%;

    /*
       Outer circle is only the fixed positional anchor on the rail.
       Visual background/shadow live on the inner surface so scaling
       never moves the anchor itself.
    */
    background: transparent;

    font-size: 28px;
    line-height: 1;

    z-index: 2;
}

.timeline-v3-secondary-icon-surface {
    border-radius: 50%;
    background: var(--surface-page);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.20);
}

/*
   Emoji glyphs have font-specific internal baselines.
   Center the line box, then apply a tiny optical correction upward.
*/
.timeline-v3-secondary-glyph {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    line-height: 1;

    transform: translateY(-2px);
}

.timeline-v3-secondary-year {
    font-family: var(--secondary-font);
    font-size: 15px;
    font-weight: var(--weight-medium);
    line-height: 1;

    color: var(--secondary-color);

    font-variant-numeric: tabular-nums;
}

.timeline-v3-secondary-label {
    max-width: 210px;
    margin-top: 5px;

    font-family: var(--secondary-font);
    font-size: 15px;
    font-weight: var(--weight-regular);
    line-height: 1.25;

    color: var(--primary-color);
}


/* ---------- VERY NARROW PHONES ---------- */

@media (max-width: 349px) {

    .timeline-v3-event-title {
        max-width: 190px;
    }
}


/* ---------- WIDE — TEMPORARY V3 PROTOTYPE BEHAVIOR ---------- */

@media (min-width: 610px) {

    /*
       V3 is intentionally being designed mobile-first.
       Until the wider compositions are designed, keep the timeline
       as a readable narrow editorial column instead of stretching it.
    */

    .timeline-v3-heading,
    .timeline-v3-outro-inner {
        width: calc(100% - 140px);
        margin-inline: auto;
    }

    .timeline-v3-container {
        width: min(
            520px,
            calc(100% - 140px)
        );

        margin-inline: auto;
    }

    .timeline-v3-intro {
        padding-bottom: 56px;
    }
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    .timeline-v3-event {
        scroll-behavior: auto;
    }

    .site-navbar-logo-link,
    .timeline-v3-navbar-filter-trigger,
    .timeline-v3-event,
    .timeline-v3-shared-secondary-icon {
        transition: none !important;
    }

    .timeline-v3-media,
    .timeline-v3-main-copy,
    .timeline-v3-secondary-icon-surface,
    .timeline-v3-secondary-copy {
        transform: none !important;
        will-change: auto;
    }

    .timeline-v3-media,
    .timeline-v3-main-copy,
    .timeline-v3-event--secondary,
    .timeline-v3-shared-secondary-icon {
        opacity: 1 !important;
    }
}


/* =========================================================
   NAVBAR CONTEXT + EVENT FILTER
   Timeline V3 only — this stylesheet is page-specific.
   ========================================================= */

/*
   The regular Casa Rocca logo remains untouched in navbar.html.
   JS only adds this sibling button on Timeline V3.
*/
/*
   Timeline-only navbar identity crossfade.

   Keep the real logo in normal layout so the navbar geometry never
   changes. The Historia trigger is absolutely overlaid in the same
   left-hand position.
*/
.site-navbar-inner {
    position: relative;
}

.site-navbar-logo-link {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 220ms ease,
        transform 220ms ease;

    will-change: opacity, transform;
}

.timeline-v3-navbar-filter-trigger {
    appearance: none;

    z-index: 2;

    position: absolute;
    top: 50%;
    left: 0;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 0;
    padding: 0;
    border: 0;

    background: transparent;

    font-family: var(--secondary-font);
    font-size: 15px;
    font-weight: var(--weight-regular);
    line-height: 1;

    white-space: nowrap;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(calc(-50% + 2px));

    transition:
        opacity 220ms ease,
        transform 220ms ease,
        visibility 0s linear 220ms;

    will-change: opacity, transform;
}

.timeline-v3-navbar-filter-title {
    color: var(--primary-color);
    font-weight: var(--weight-semibold);
}

.timeline-v3-navbar-filter-meta {
    color: var(--secondary-color);
    font-weight: var(--weight-regular);
}

.timeline-v3-navbar-filter-state-icon {
    margin-left: 3px;

    font-size: 18px !important;
    line-height: 1;

    color: var(--secondary-color);

    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 20;

    transform: translateY(1px);
}

/*
   Once Historia has passed beneath the navbar, crossfade identities.
   No display:none: that would prevent the transition.
*/
.site-navbar.is-timeline-v3-context
.site-navbar-logo-link {
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
}

.site-navbar.is-timeline-v3-context
.timeline-v3-navbar-filter-trigger {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(-50%);

    transition:
        opacity 220ms ease,
        transform 220ms ease,
        visibility 0s linear 0s;
}


/*
   NAVIGATION MENU OPEN — LOGO ALWAYS WINS

   menu-v2.js adds .is-menu-open to .site-navbar while the navigation
   overlay is open.

   Do NOT close either menu here. We only change the navbar identity:
   - navigation overlay open  -> Casa Rocca logo
   - navigation overlay closed -> Timeline context label returns if the
     page title has already passed beneath the navbar.
*/
.site-navbar.is-menu-open
.site-navbar-logo-link,
.site-navbar.is-menu-open.is-timeline-v3-context
.site-navbar-logo-link {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.site-navbar.is-menu-open
.timeline-v3-navbar-filter-trigger,
.site-navbar.is-menu-open.is-timeline-v3-context
.timeline-v3-navbar-filter-trigger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(calc(-50% + 2px));

    transition:
        opacity 220ms ease,
        transform 220ms ease,
        visibility 0s linear 220ms;
}


/* ---------- FILTER PANEL ---------- */

.timeline-v3-filter-panel {
    position: fixed;

    /*
       JS measures the ACTUAL Historia trigger.
       Panel begins exactly 12px below its bottom edge and aligns to
       its left edge. This intentionally overlaps the navbar vertically.
    */
    top: var(
        --timeline-v3-filter-panel-top,
        calc(var(--navbar-height) + 10px)
    );

    left: var(
        --timeline-v3-filter-panel-left,
        40px
    );

    width: min(290px, calc(100vw - 80px));
    box-sizing: border-box;

    padding: 14px 20px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary-color) 16%,
            transparent
        );

    border-radius: 16px;

    background: var(--surface-page);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .14);

    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;

    transition:
        opacity 150ms ease,
        transform 150ms ease;

    /*
       JS moves this panel to be a DIRECT CHILD OF BODY.
       It is therefore outside .site-page / .timeline-v3-page stacking
       contexts and can genuinely paint above the navbar.
    */
    z-index: 5000;
}

.timeline-v3-filter-panel[hidden] {
    display: none;
}

.timeline-v3-filter-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.timeline-v3-filter-group + .timeline-v3-filter-group {
    margin-top: 14px;
}

.timeline-v3-filter-group-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    margin: 4px 0 8px;
}

.timeline-v3-filter-group-title {
    width: 100%;

    font-family: var(--secondary-font);
    font-size: var(--font-size-XS);
    font-weight: var(--weight-semibold);
    line-height: 1;

    color: var(--secondary-color);
}

.timeline-v3-filter-group-rule {
    display: block;
    width: 100%;
    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--secondary-color) 28%,
            transparent
        );
}

.timeline-v3-filter-option {
    appearance: none;

    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;

    margin: 0;
    padding: 11px 0;
    border: 0;

    background: transparent;

    font-family: var(--secondary-font);
    font-size: var(--font-size-S);
    font-weight: var(--weight-regular);
    line-height: 1.2;
    text-align: left;

    color: var(--primary-color);
    cursor: pointer;
}

.timeline-v3-filter-checkbox {
    flex: 0 0 auto;

    font-size: 22px !important;
    line-height: 1;

    color: var(--secondary-color);

    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.timeline-v3-filter-option.is-checked
.timeline-v3-filter-checkbox {
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

/*
   Active + enabled = primary.
   Inactive remains secondary.
   Disabled active ("Casa Rocca") also stays secondary.
*/
.timeline-v3-filter-option.is-checked:not(.is-disabled)
.timeline-v3-filter-checkbox {
    color: var(--primary-color);
}

.timeline-v3-filter-option.is-disabled {
    color: var(--secondary-color);
    cursor: default;
    opacity: .48;
}

.timeline-v3-filter-option.is-disabled
.timeline-v3-filter-checkbox {
    color: var(--secondary-color);
}


/* ---------- FILTERED EVENTS ---------- */

/*
   Before JS finishes measuring the Timeline, events that start OFF
   (currently detachments) must not flash on first paint.
*/
.timeline-v3-track:not(.is-filter-layout-ready)
.timeline-v3-event.is-filter-hidden {
    visibility: hidden;
    opacity: 0;
}

/*
   Once layout measurements exist, hidden rows collapse completely.

   IMPORTANT:
   display:none is still deliberately avoided. Keeping every event in
   the DOM lets max-height + margin-top animate the chronological scale.
*/
.timeline-v3-track.is-filter-layout-ready
.timeline-v3-event.is-filter-hidden {
    max-height: 0;
    margin-top: 0 !important;

    opacity: 0;
    overflow: hidden;

    pointer-events: none;
}

/*
   Same-year secondary icons do not own a Timeline row, so they only
   need an opacity transition; hiding them does not affect chronology.
*/
.timeline-v3-shared-secondary-icon {
    transition:
        opacity
            var(--timeline-v3-filter-fade-duration, 190ms)
            ease;
}

.timeline-v3-shared-secondary-icon.is-filter-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}


@media (min-width: 610px) {

    .timeline-v3-filter-panel {
        left: max(
            70px,
            calc((100vw - var(--navbar-max-width)) / 2)
        );
    }
}


/*
   Desktop keeps the old interaction model:
   hover opens the filter; mobile uses tap.
*/
@media (hover: hover) and (pointer: fine) {

    .timeline-v3-navbar-filter-trigger {
        cursor: default;
    }
}