:root{
    --bg:#f3efe6;
    --bg-soft:#f8f4ec;
    --paper:#fbf8f2;
    --paper-2:#f5efe4;
    --ink:#1f2937;
    --muted:#6b7280;
    --line:#d8cfbe;
    --gold:#a98545;
    --gold-soft:#c9b48a;
    --gold-deep:#8f6d37;
    --blue:#1E40AF;
    --blue-soft:#dfe9ff;
    --shadow:0 22px 50px rgba(0,0,0,.08);
    --shadow-soft:0 12px 30px rgba(0,0,0,.06);
    --day-shadow:0 26px 70px rgba(65,49,22,.08);
    --day-shadow-hover:0 36px 90px rgba(65,49,22,.12);
    --hero-shadow:0 28px 70px rgba(65,49,22,.08);
    --radius:22px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding-top:68px;
    font-family:Arial,sans-serif;
    background:
        radial-gradient(circle at top, rgba(255,255,255,.72), transparent 34%),
        linear-gradient(180deg, #f8f4eb 0%, #f2ece1 100%);
    color:var(--ink);
}

a{
    color:var(--blue);
    text-decoration:none;
}

a:hover{
    color:#315fe8;
}

.header-wrapper{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    transition:transform .25s ease;
    will-change:transform;
}

.header{
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(14px);
    padding:12px 24px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    z-index:10;
}

.header a{
    font-weight:bold;
    text-decoration:none;
    color:#1F2937;
}

.header a:hover{
    color:#3B82F6;
}

#userPanelBtn{
    margin-left:auto;
    padding:6px 12px;
    background:#3B82F6;
    color:#fff;
    border-radius:4px;
}

.search-box input{
    padding:7px 11px;
    border-radius:8px;
    border:1px solid #d7dbe3;
    font-size:13px;
    background:#fff;
}

.jump-open-btn{
    padding:7px 12px;
    border-radius:8px;
    border:1px solid #d7dbe3;
    background:#3B82F6;
    color:#fff;
    cursor:pointer;
}

/* HERO */

.hero{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    padding:22px 24px 12px;
}

.hero-inner{
    position:relative;
    text-align:center;
    padding:30px 36px 26px;
    border-radius:28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(250,245,236,.92) 100%);
    border:1px solid rgba(169,133,69,.18);
    box-shadow:var(--hero-shadow);
    overflow:hidden;
}

.hero-inner::before{
    content:'';
    position:absolute;
    left:40px;
    right:40px;
    top:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(169,133,69,.42), transparent);
}

.hero-inner::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top center, rgba(255,255,255,.38), transparent 34%),
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 28%);
}

.hero-kicker{
    position:relative;
    z-index:1;
    display:inline-block;
    margin-bottom:10px;
    font-size:10px;
    letter-spacing:.30em;
    text-transform:uppercase;
    color:#8b7350;
}

.hero h1{
    position:relative;
    z-index:1;
    margin:0;
    font-size:clamp(42px,5.4vw,70px);
    line-height:.94;
    font-weight:300;
    letter-spacing:-.035em;
    color:#1b2430;
}

.hero-sub{
    position:relative;
    z-index:1;
    max-width:820px;
    margin:14px auto 0;
    font-size:17px;
    line-height:1.65;
    color:#5f6772;
}

.hero-actions{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:18px;
}

.hero-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.74);
    border:1px solid rgba(169,133,69,.18);
    color:#5a4a31;
    font-size:11px;
    letter-spacing:.07em;
    text-transform:uppercase;
    box-shadow:0 6px 18px rgba(0,0,0,.035);
}

.about-trigger{
    font-size:11px;
    color:#1E40AF;
    cursor:pointer;
    text-decoration:underline;
}

.about-trigger:hover{
    opacity:.8;
}

/* TIMELINE SHELL */

.timeline-shell{
    max-width:1420px;
    margin:0 auto;
    padding:10px 24px 100px;
}

.timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:58px;
}

.timeline > .day:first-of-type .day-marker{
    margin-bottom:18px;
}

.timeline > .day:first-of-type .day-marker::before{
    height:18px;
}

.timeline > .day:first-of-type .day-marker::after{
    top:calc(100% + 5px);
}

.timeline:before{
    content:'';
    position:absolute;
    top:8px;
    bottom:8px;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    background:
        linear-gradient(
            180deg,
            rgba(169,133,69,.08) 0%,
            rgba(169,133,69,.38) 12%,
            rgba(169,133,69,.5) 50%,
            rgba(169,133,69,.38) 88%,
            rgba(169,133,69,.08) 100%
        );
    z-index:0;
}

.timeline:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:20px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.18) 15%,
            rgba(255,255,255,.12) 50%,
            rgba(255,255,255,.18) 85%,
            rgba(255,255,255,0) 100%
        );
    filter:blur(12px);
    pointer-events:none;
    z-index:0;
}

/* DAY BLOCK */

.day{
    position:relative;
    width:100%;
    opacity:0;
    transform:translateY(34px) scale(.992);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.8,.2,1);
    z-index:1;
}

.day.visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

.day::before{
    content:'';
    position:absolute;
    left:50%;
    top:52px;
    bottom:26px;
    width:1px;
    transform:translateX(-50%);
    background:
        linear-gradient(
            180deg,
            rgba(169,133,69,.18) 0%,
            rgba(169,133,69,.35) 20%,
            rgba(169,133,69,.18) 100%
        );
    z-index:0;
    pointer-events:none;
}

.day-marker{
    position:relative;
    z-index:4;
    width:max-content;
    margin:0 auto 18px;
    padding:11px 20px 10px;
    border-radius:999px;
    background:
        linear-gradient(180deg, #fffdfa 0%, #f8efdf 100%);
    border:1px solid rgba(169,133,69,.28);
    box-shadow:
        0 12px 28px rgba(65,49,22,.08),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -1px 0 rgba(169,133,69,.10);
    text-align:center;
}

.day-marker::before{
    content:'';
    position:absolute;
    left:50%;
    top:100%;
    width:2px;
    height:26px;
    transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(169,133,69,.65), rgba(169,133,69,0));
}

.day-marker::after{
    content:'';
    position:absolute;
    left:50%;
    top:calc(100% + 8px);
    width:10px;
    height:10px;
    transform:translateX(-50%);
    border-radius:50%;
    background:linear-gradient(180deg, #c8a96d 0%, #9d7a3c 100%);
    box-shadow:
        0 0 0 6px rgba(201,180,138,.16),
        0 6px 14px rgba(65,49,22,.18);
}

.day-marker-kicker{
    font-size:10px;
    letter-spacing:.30em;
    text-transform:uppercase;
    color:#8b7350;
    margin-bottom:6px;
}

.day-marker-date{
    font-size:20px;
    font-weight:700;
    color:#243042;
    letter-spacing:.01em;
}

/* DAY STAGE */

.day-stage{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1.55fr) minmax(320px, .9fr);
    gap:26px;
    align-items:stretch;
    max-width:1260px;
    margin:0 auto;
}

.day-main{
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,245,236,.98));
    border:1px solid rgba(169,133,69,.16);
    border-radius:28px;
    box-shadow:var(--day-shadow);
    overflow:hidden;
    min-height:380px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.day:hover .day-main{
    transform:translateY(-3px);
    box-shadow:var(--day-shadow-hover);
    border-color:rgba(169,133,69,.24);
}

.day-main::before{
    content:'';
    position:absolute;
    left:34px;
    right:34px;
    top:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(169,133,69,.48), transparent);
}

.day-main::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top center, rgba(255,255,255,.22), transparent 36%);
    opacity:.8;
}

.day-main-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.14fr) minmax(270px, .88fr);
    min-height:380px;
}

.feature-media{
    position:relative;
    min-height:380px;
    background:#ddd;
    overflow:hidden;
}

.feature-media::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 24%),
        radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 28%);
}

.feature-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 10s ease;
}

.day-main:hover .feature-media img{
    transform:scale(1.045);
}

.feature-overlay{
    position:absolute;
    inset:auto 0 0 0;
    padding:28px 26px 22px;
    background:linear-gradient(to top, rgba(14,18,25,.84), rgba(14,18,25,.26), transparent);
    color:#fff;
}

.feature-category{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.feature-title{
    margin:0;
    font-size:35px;
    line-height:1.08;
    font-weight:700;
    letter-spacing:-.02em;
}

.feature-side{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:24px 24px 22px;
    gap:18px;
    position:relative;
}

.feature-side::before{
    content:'';
    position:absolute;
    top:28px;
    bottom:28px;
    left:0;
    width:1px;
    background:linear-gradient(180deg, rgba(169,133,69,.10), rgba(169,133,69,.22), rgba(169,133,69,.10));
}

.feature-side-top{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.feature-label{
    font-size:11px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:#8b7350;
}

.feature-summary{
    margin:0;
    font-size:15px;
    line-height:1.65;
    color:#4f5a67;
}

.feature-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    margin-top:6px;
    font-weight:700;
    color:#1E40AF;
}

/* SUPPORT SIDE */

.day-side{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.support-card{
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,234,.96));
    border:1px solid rgba(169,133,69,.15);
    border-radius:22px;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.support-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(0,0,0,.09);
    border-color:rgba(169,133,69,.24);
}

.support-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 15px 10px;
    border-bottom:1px solid rgba(169,133,69,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}

.support-card-label{
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#8b7350;
}

.support-card-link{
    font-size:11px;
    font-weight:700;
    color:#1E40AF;
}

.support-card-body{
    display:grid;
    grid-template-columns:92px 1fr;
    gap:12px;
    padding:12px 15px 14px;
    align-items:start;
}

.support-thumb{
    width:92px;
    height:72px;
    object-fit:cover;
    border-radius:12px;
    display:block;
}

.support-title{
    margin:0 0 6px 0;
    font-size:15px;
    line-height:1.34;
    color:#1f2937;
}

.support-text{
    margin:0;
    font-size:12px;
    line-height:1.5;
    color:#5b6571;
}

/* ARTIFACTS */

.day-artifacts{
    position:relative;
    margin:14px auto 0;
    max-width:1260px;
    background:rgba(255,255,255,.70);
    border:1px solid rgba(169,133,69,.14);
    border-radius:20px;
    padding:14px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(4px);
}

.day-artifacts::before{
    content:'';
    position:absolute;
    left:20px;
    right:20px;
    top:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(169,133,69,.30), transparent);
}

.day-artifacts-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.day-artifacts-title{
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#8b7350;
}

.day-artifacts-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}

.artifact{
    display:block;
    background:rgba(255,255,255,.76);
    border-radius:14px;
    padding:8px;
    border:1px solid rgba(169,133,69,.12);
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease;
}

.artifact:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.07);
    border-color:rgba(169,133,69,.22);
}

.artifact img{
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:10px;
    display:block;
    margin-bottom:7px;
}

.artifact-title{
    font-size:12px;
    line-height:1.4;
    color:#44505d;
}

.empty-note{
    text-align:center;
    color:#6b7280;
    padding:30px 0 10px;
}

/* INSTALL */

#installBtn{
    display:none;
    position:fixed;
    bottom:20px;
    right:20px;
    background:#3B82F6;
    color:#fff;
    padding:12px 18px;
    border-radius:8px;
    cursor:pointer;
    z-index:50;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* MODALS */

.about-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.55);
    z-index:1000;
}

.about-modal.active{
    display:flex;
}

.about-box{
    background:#fff;
    padding:28px 32px;
    border-radius:14px;
    max-width:420px;
    text-align:center;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    position:relative;
}

.about-close{
    position:absolute;
    top:10px;
    right:14px;
    font-size:22px;
    cursor:pointer;
    color:#555;
}

.about-main{
    font-size:18px;
    font-weight:bold;
    margin-bottom:12px;
    color:#111827;
}

.about-sub{
    font-size:14px;
    color:#374151;
}

.jump-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.55);
    z-index:1200;
}

.jump-modal.active{
    display:flex;
}

.jump-box{
    background:#fff;
    padding:18px;
    border-radius:14px;
    width:min(520px, 92vw);
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.jump-title{
    font-weight:bold;
    margin-bottom:10px;
    color:#111827;
}

.jump-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

.jump-row input,
.jump-row select{
    padding:8px 10px;
    border-radius:8px;
    border:1px solid #CBD5E1;
    font-size:14px;
}

.jump-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:12px;
}

.jump-actions button{
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #CBD5E1;
    cursor:pointer;
}

.jump-go{
    background:#3B82F6;
    color:#fff;
    border-color:#3B82F6;
}

.jump-cancel{
    background:#fff;
    color:#111827;
}

/* LOAD MORE */

.load-more-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    margin:10px 0 24px 0;
}

.load-more-btn{
    display:inline-block;
    padding:12px 22px;
    border-radius:999px;
    background:#1E40AF;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    box-shadow:0 8px 22px rgba(30,64,175,0.25);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.load-more-btn:hover{
    background:#2563EB;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(30,64,175,0.35);
}

/* RESPONSIVE */

@media (max-width:1100px){

    .timeline-shell{
        padding-top:18px;
    }

    .timeline{
        gap:56px;
    }

    .day::before{
        display:none;
    }

    .day-stage{
        grid-template-columns:1fr;
    }

    .day-main-grid{
        grid-template-columns:1fr;
    }

    .feature-media{
        min-height:360px;
    }

    .feature-side::before{
        display:none;
    }

    .day-artifacts-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:768px){
    .hero{
        padding:14px 14px 10px;
    }

    .hero-inner{
        padding:24px 18px 20px;
        border-radius:22px;
    }

    .hero-sub{
        margin-top:12px;
        font-size:15px;
        line-height:1.55;
    }

    .hero-actions{
        margin-top:14px;
        gap:7px;
    }

    .hero-chip{
        padding:8px 11px;
        font-size:10px;
    }

    .timeline-shell{
        padding:10px 14px 70px;
    }

.timeline{
    gap:30px;
}

    .timeline:before,
    .timeline:after{
        display:none;
    }

    .day{
        transform:translateY(24px);
    }

    .day::before{
        display:none;
    }

.day-marker{
    margin-bottom:12px;
    padding:9px 14px 8px;
}

.day-marker::before,
.day-marker::after{
    display:none;
}

.day-marker-date{
    font-size:16px;
}

    .day-stage{
        gap:16px;
    }

    .day-main{
        min-height:auto;
        border-radius:26px;
    }

    .day-main-grid{
        min-height:auto;
    }

.feature-media{
    min-height:220px;
}

.feature-overlay{
    padding:16px 16px 14px;
}

.feature-title{
    font-size:23px;
    line-height:1.1;
}

.feature-side{
    padding:16px 16px 15px;
}

    .feature-thread-list{
        padding-left:14px;
    }

    .feature-thread-item{
        padding-left:10px;
    }

.support-card-body{
    grid-template-columns:78px 1fr;
    gap:10px;
    padding:11px 13px 12px;
}

.support-thumb{
    width:78px;
    height:62px;
}

.support-title{
    margin-bottom:5px;
    font-size:14px;
    line-height:1.3;
}

.support-text{
    font-size:12px;
    line-height:1.45;
}

.day-artifacts{
    padding:10px;
    margin-top:12px;
}

.day-artifacts-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.artifact{
    padding:6px;
}

.artifact-title{
    font-size:11px;
    line-height:1.35;
}
}

/* =========================================
   HOMEPAGE HEADER POLISH
========================================= */

.header{
    min-height:68px;
    padding:12px 28px;
    gap:16px;
    border-bottom:1px solid rgba(169,133,69,.12);
    background:rgba(255,255,255,.94);
    box-shadow:0 6px 22px rgba(0,0,0,.045);
    flex-wrap:nowrap;
}

.header .logo{
    font-size:20px !important;
    letter-spacing:-.025em;
    color:#172033;
    white-space:nowrap;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:14px;
    color:transparent;
    white-space:nowrap;
}

.main-nav a{
    color:#344052;
    font-weight:600;
    transition:color .2s ease;
}

.main-nav a:hover{
    color:#1E40AF;
}

.search-box{
    position:relative;
    display:flex !important;
    align-items:center;
    gap:6px !important;
    margin-right:4px !important;
}

.search-box input{
    width:220px !important;
    height:38px;
    padding:0 13px;
    border-radius:10px;
    border:1px solid #d9dde5;
    background:#fff;
    font-size:13px;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.search-box input:focus{
    border-color:rgba(30,64,175,.45);
    box-shadow:0 0 0 3px rgba(30,64,175,.08);
}

.search-box button{
    height:38px;
    padding:0 14px;
    border:0;
    border-radius:10px;
    background:#243042;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.search-box button:hover{
    background:#1E40AF;
}

.header-btn,
.jump-open-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px !important;
    margin-left:0 !important;
    border-radius:10px;
    border:1px solid rgba(30,64,175,.12);
    background:#edf3ff;
    color:#1E40AF !important;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:none;
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.header-btn:hover,
.jump-open-btn:hover{
    background:#1E40AF;
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(30,64,175,.14);
}

@media (max-width:1100px){
    .header{
        gap:12px;
        padding:10px 16px;
    }

    .main-nav{
        order:3;
        width:100%;
        overflow-x:auto;
        padding-top:2px;
    }
}

@media (max-width:768px){
    .header{
        padding:10px 12px;
    }

    .search-box{
        order:4;
        width:100%;
    }

    .search-box input{
        width:100% !important;
        flex:1;
    }
}

/* =========================================
   GLOBAL RESPONSIVE WIDTH FIX
========================================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.header{
    width:100%;
    max-width:100%;
}

.header > *{
    min-width:0;
}

.search-box{
    flex:1 1 220px;
    min-width:180px;
    max-width:320px;
}

.search-box input{
    min-width:0;
}

@media (max-width:1400px){

    .header{
        flex-wrap:wrap;
    }

    .main-nav{
        flex:1 1 auto;
    }

}

.hero,
.timeline-shell,
.event-page{
    width:100%;
    max-width:100%;
}

/* =========================================
   HEADER FIT FOR LAPTOPS / ZOOM
========================================= */

@media (max-width:1550px){

    .header{
        gap:10px;
        padding:10px 14px;
    }

    .header .logo{
        font-size:18px !important;
    }

    .main-nav{
        gap:10px;
        font-size:13px;
    }

    .search-box{
        flex:0 1 260px;
        min-width:180px;
        max-width:260px;
    }

    .search-box input{
        width:100% !important;
    }

    .header-btn,
    .jump-open-btn{
        padding:0 11px !important;
        font-size:12px;
    }
}

/* =========================================
   THE TIMEMAP — CONNECT THE DOTS
========================================= */

.feature-thread-map{
    position:relative;
    margin-top:10px;
    padding-top:24px;
    border-top:1px solid rgba(169,133,69,.25);
}

.feature-thread-title{
    margin-bottom:20px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#8b7350;
}

.feature-thread-list{
    position:relative;
    display:grid;
    gap:18px;
    padding-left:38px;
}

/* Vertical story line */
.feature-thread-list::before{
    content:'';
    position:absolute;
    left:9px;
    top:-12px;
    bottom:22px;
    width:2px;
    background:
        linear-gradient(
            180deg,
            #a98545 0%,
            rgba(169,133,69,.55) 70%,
            rgba(169,133,69,.12) 100%
        );
}

/* Connected event */
.feature-thread-item{
    position:relative;
    display:block;
    padding:15px 16px 15px 18px;
    border-radius:17px;
    background:#fffdf8;
    border:1px solid rgba(169,133,69,.22);
    box-shadow:
        0 10px 24px rgba(65,49,22,.07),
        inset 0 1px 0 rgba(255,255,255,.9);
    color:#44505d;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

/* Branch from timeline */
.feature-thread-item::before{
    content:'';
    position:absolute;
    left:-29px;
    top:27px;
    width:29px;
    height:2px;
    background:#b18d51;
}

/* Timeline node */
.feature-thread-item::after{
    content:'';
    position:absolute;
    left:-35px;
    top:21px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#a98545;
    border:3px solid #f8f4ec;
    box-shadow:
        0 0 0 4px rgba(169,133,69,.18),
        0 5px 12px rgba(65,49,22,.16);
}

.feature-thread-item:hover{
    transform:translateX(6px);
    border-color:rgba(169,133,69,.42);
    box-shadow:0 16px 34px rgba(65,49,22,.11);
}

.feature-thread-item:hover .feature-thread-name{
    color:#1E40AF;
}

.feature-thread-type{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    margin-bottom:8px;
    border-radius:999px;
    background:#f3ead9;
    border:1px solid rgba(169,133,69,.15);
    color:#806536;
    font-size:9px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.feature-thread-name{
    display:block;
    font-size:15px;
    line-height:1.42;
    font-weight:700;
    color:#243042;
}

.feature-thread-meta{
    display:block;
    margin-top:6px;
    font-size:11px;
    color:#7a828d;
}

.feature-thread-excerpt{
    display:block;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(169,133,69,.10);
    font-size:12px;
    line-height:1.55;
    color:#586270;
}

/* Continue from featured event into its connections */
.feature-side-top{
    position:relative;
}

.feature-side-top::after{
    content:'';
    position:absolute;
    left:9px;
    bottom:-29px;
    width:2px;
    height:29px;
    background:#a98545;
}

@media (max-width:768px){

    .feature-thread-list{
        padding-left:30px;
    }

    .feature-thread-item{
        padding:13px 14px;
    }

    .feature-thread-item::before{
        left:-21px;
        width:21px;
    }

    .feature-thread-item::after{
        left:-27px;
    }
}

/* =========================================
   TIMELINE DATE INFORMATION
========================================= */

.day-marker-stats{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex-wrap:wrap;
    margin-top:10px;
}

.day-marker-stat{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:27px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(169,133,69,.08);
    border:1px solid rgba(169,133,69,.14);
    color:#806536;
    font-size:9px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.day-marker-stat-connected{
    gap:7px;
    background:rgba(30,64,175,.07);
    border-color:rgba(30,64,175,.14);
    color:#1E40AF;
}

.day-marker-connection-dot{
    width:7px;
    height:7px;
    flex:none;
    border-radius:50%;
    background:#1E40AF;
    box-shadow:
        0 0 0 4px rgba(30,64,175,.08);
}

.day-marker:has(.day-marker-stat-connected){
    border-color:rgba(30,64,175,.24);
    box-shadow:
        0 18px 40px rgba(65,49,22,.10),
        0 0 0 4px rgba(30,64,175,.035),
        inset 0 1px 0 rgba(255,255,255,.88);
}

@media (max-width:768px){

    .day-marker-stats{
        margin-top:8px;
        gap:5px;
    }

    .day-marker-stat{
        min-height:24px;
        padding:0 8px;
        font-size:8px;
    }
}

/* =========================================
   FEATURE INVESTIGATION ACTION
========================================= */

.feature-entry-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:8px;
}

.feature-entry-actions .feature-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 15px;
    margin-top:0;
    border-radius:999px;
    background:#1E40AF;
    color:#fff;
    font-size:13px;
    font-weight:700;
    box-shadow:0 10px 22px rgba(30,64,175,.16);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.feature-entry-actions .feature-link:hover{
    color:#fff;
    background:#2563EB;
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(30,64,175,.22);
}

.feature-connection-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:0 11px;
    border-radius:999px;
    background:rgba(169,133,69,.08);
    border:1px solid rgba(169,133,69,.16);
    color:#725b35;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.feature-connection-status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#a98545;
    box-shadow:0 0 0 4px rgba(169,133,69,.10);
}

@media (max-width:768px){

    .feature-entry-actions{
        align-items:flex-start;
        flex-direction:column;
    }

    .feature-entry-actions .feature-link{
        width:100%;
    }
}

/* =========================================
   ARCHIVE SNAPSHOT
========================================= */

.archive-snapshot{
    max-width:1280px;
    margin:8px auto 22px;
    padding:0 24px;
}

.archive-snapshot-inner{
    display:grid;
    grid-template-columns:minmax(340px, 1fr) minmax(0, 1.25fr);
    gap:24px;
    align-items:center;
    padding:24px 28px;
    border-radius:28px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.90),
            rgba(248,243,234,.96)
        );
    border:1px solid rgba(169,133,69,.16);
    box-shadow:0 16px 38px rgba(65,49,22,.07);
}

.archive-snapshot-kicker{
    margin-bottom:8px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:#8b7350;
}

.archive-snapshot-title{
    max-width:470px;
    font-size:24px;
    line-height:1.22;
    letter-spacing:-.025em;
    color:#243042;
}

.archive-snapshot-stats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

.archive-stat{
    position:relative;
    min-width:0;
    padding:13px 10px 11px;
    border-radius:14px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(169,133,69,.12);
    text-align:center;
}

.archive-stat::before{
    content:'';
    position:absolute;
    left:22%;
    right:22%;
    top:0;
    height:2px;
    border-radius:999px;
    background:rgba(169,133,69,.30);
}

.archive-stat-primary::before{
    background:rgba(30,64,175,.48);
}

.archive-stat strong{
    display:block;
    margin-bottom:5px;
    font-size:22px;
    line-height:1;
    color:#1E40AF;
}

.archive-stat span{
    display:block;
    font-size:9px;
    line-height:1.3;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:#6f7782;
}

@media (max-width:900px){

    .archive-snapshot-inner{
        grid-template-columns:1fr;
    }

    .archive-snapshot-stats{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:600px){

    .archive-snapshot{
        padding:0 14px;
        margin-bottom:10px;
    }

    .archive-snapshot-inner{
        padding:14px 14px;
        border-radius:18px;
        gap:14px;
    }

    .archive-snapshot-stats{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .archive-stat{
        padding:9px 8px;
    }

    .archive-stat strong{
        font-size:19px;
    }

    .archive-snapshot-title{
        font-size:18px;
    }
}

/* =========================================
   ARCHIVE SNAPSHOT — STRONGER STORY
========================================= */

.archive-snapshot-copy{
    max-width:520px;
    margin:14px 0 0;
    font-size:14px;
    line-height:1.75;
    color:#66717e;
}

.archive-stat-primary{
    background:
        linear-gradient(
            180deg,
            rgba(240,246,255,.96),
            rgba(255,255,255,.92)
        );
    border-color:rgba(30,64,175,.15);
}

.archive-stat-primary strong{
    font-size:29px;
    color:#1E40AF;
}

.archive-stat-primary span{
    color:#334155;
}

.archive-stat{
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.archive-stat:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(65,49,22,.08);
    border-color:rgba(169,133,69,.24);
}

.archive-stat-primary:hover{
    border-color:rgba(30,64,175,.24);
}

@media (max-width:600px){

    .archive-snapshot-copy{
        font-size:12px;
        line-height:1.45;
    }

    .archive-stat-primary strong{
        font-size:19px;
    }
}

/* =========================================
   FIRST TIMELINE ENTRY — START HERE
========================================= */

.timeline > .day:first-of-type .day-main{
    border-color:rgba(30,64,175,.20);
    box-shadow:
        0 24px 60px rgba(30,64,175,.08),
        0 18px 46px rgba(65,49,22,.07);
}

.timeline > .day:first-of-type .feature-label{
    display:flex;
    align-items:center;
    gap:8px;
}

.timeline > .day:first-of-type .feature-label::before{
    content:'Start here';
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:0 8px;
    border-radius:999px;
    background:rgba(30,64,175,.08);
    border:1px solid rgba(30,64,175,.12);
    color:#1E40AF;
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

/* =========================================
   HOMEPAGE SEARCH CARDS
========================================= */

.homepage-search-results{
    max-width:1180px;
    margin:0 auto;
    padding:18px 24px 80px;
}

.homepage-search-head{
    margin-bottom:18px;
    padding:18px 20px;
    border-radius:20px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(169,133,69,.16);
    box-shadow:0 10px 26px rgba(65,49,22,.05);
}

.homepage-search-kicker{
    margin-bottom:6px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#8b7350;
}

.homepage-search-head h2{
    margin:0;
    font-size:24px;
    line-height:1.2;
    color:#243042;
}

.homepage-search-count{
    margin-top:6px;
    font-size:12px;
    color:#6b7280;
}

.homepage-search-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.homepage-search-card{
    display:grid;
    grid-template-columns:180px minmax(0, 1fr);
    min-width:0;
    overflow:hidden;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,245,236,.98));
    border:1px solid rgba(169,133,69,.16);
    box-shadow:0 12px 30px rgba(65,49,22,.07);
}

.homepage-search-image{
    display:block;
    min-height:160px;
    background:#ddd;
    overflow:hidden;
}

.homepage-search-image img{
    width:100%;
    height:100%;
    min-height:160px;
    object-fit:cover;
    display:block;
}

.homepage-search-content{
    padding:16px 17px;
}

.homepage-search-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:8px;
}

.homepage-search-meta span{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:0 8px;
    border-radius:999px;
    background:rgba(169,133,69,.08);
    color:#806536;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.homepage-search-content h3{
    margin:0;
    font-size:18px;
    line-height:1.25;
}

.homepage-search-content h3 a{
    color:#243042;
}

.homepage-search-content p{
    margin:9px 0 0;
    font-size:13px;
    line-height:1.55;
    color:#5b6571;
}

.homepage-search-open{
    display:inline-flex;
    margin-top:11px;
    font-size:12px;
    font-weight:700;
    color:#1E40AF;
}

@media (max-width:900px){

    .homepage-search-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:600px){

    .homepage-search-results{
        padding:12px 14px 60px;
    }

    .homepage-search-card{
        grid-template-columns:110px minmax(0, 1fr);
    }

    .homepage-search-image,
    .homepage-search-image img{
        min-height:130px;
    }

    .homepage-search-content{
        padding:13px;
    }

    .homepage-search-content h3{
        font-size:15px;
    }

    .homepage-search-content p{
        font-size:12px;
    }
}

/* =========================================
   SEARCH TIMELINE CONTROLS
========================================= */

.homepage-search-head .homepage-search-open{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    margin-top:14px;
    padding:0 14px;
    border-radius:999px;
    background:#1E40AF;
    color:#fff;
    font-size:12px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(30,64,175,.15);
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.homepage-search-head .homepage-search-open:hover{
    background:#2563EB;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(30,64,175,.22);
}

/* =========================================
   SEARCH STORY TIMELINE
========================================= */

.search-story-timeline{
    position:relative;
    max-width:1240px;
    margin:10px auto 0;
    padding:20px 24px 80px;
}

.search-story-timeline::before{
    content:'';
    position:absolute;
    top:20px;
    bottom:80px;
    left:50%;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(
        180deg,
        rgba(30,64,175,.08),
        rgba(30,64,175,.55) 10%,
        rgba(30,64,175,.55) 90%,
        rgba(30,64,175,.08)
    );
}

.search-story-event{
    position:relative;
    width:calc(50% - 48px);
    margin:0 calc(50% + 48px) 34px 0;
}

.search-story-event:nth-of-type(even){
    margin-left:calc(50% + 48px);
    margin-right:0;
}

.search-story-node{
    position:absolute;
    top:34px;
    right:-57px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#2563EB;
    border:4px solid #f5efe4;
    box-shadow:
        0 0 0 2px rgba(30,64,175,.38),
        0 0 0 8px rgba(30,64,175,.08);
}

.search-story-event:nth-of-type(even) .search-story-node{
    right:auto;
    left:-57px;
}

.search-story-card{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    min-height:165px;
    overflow:hidden;
    border-radius:20px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.96),
        rgba(249,245,236,.98)
    );
    border:1px solid rgba(169,133,69,.18);
    box-shadow:0 14px 34px rgba(65,49,22,.08);
    color:#243042;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.search-story-card:hover{
    transform:translateY(-3px);
    border-color:rgba(30,64,175,.24);
    box-shadow:0 20px 42px rgba(65,49,22,.12);
}

.search-story-image{
    width:150px;
    height:100%;
    min-height:165px;
    object-fit:cover;
    display:block;
}

.search-story-content{
    padding:18px;
}

.search-story-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.search-story-date{
    color:#1E40AF;
    font-size:12px;
    font-weight:800;
}

.search-story-category{
    padding:5px 9px;
    border-radius:999px;
    background:rgba(30,64,175,.07);
    border:1px solid rgba(30,64,175,.12);
    color:#1E40AF;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.search-story-content h3{
    margin:0;
    font-size:20px;
    line-height:1.25;
    color:#243042;
}

.search-story-content p{
    margin:9px 0 0;
    color:#5b6571;
    font-size:13px;
    line-height:1.55;
}

.search-story-open{
    display:inline-block;
    margin-top:12px;
    color:#1E40AF;
    font-size:12px;
    font-weight:700;
}

@media (max-width:800px){

    .search-story-timeline{
        padding:12px 14px 60px 46px;
    }

    .search-story-timeline::before{
        left:25px;
        transform:none;
    }

    .search-story-event,
    .search-story-event:nth-of-type(even){
        width:100%;
        margin:0 0 22px;
    }

    .search-story-node,
    .search-story-event:nth-of-type(even) .search-story-node{
        left:-30px;
        right:auto;
        top:30px;
        width:14px;
        height:14px;
        border-width:3px;
    }

    .search-story-card{
        grid-template-columns:105px minmax(0,1fr);
    }

    .search-story-image{
        width:105px;
        min-height:150px;
    }

    .search-story-content{
        padding:14px;
    }

    .search-story-content h3{
        font-size:16px;
    }
}

.search-story-sequence{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    color:#8b7350;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.search-story-sequence span{
    color:#b7aa92;
}

.search-story-event::after{
    content:'';
    position:absolute;
    top:42px;
    right:-48px;
    width:48px;
    height:2px;
    background:linear-gradient(
        90deg,
        rgba(30,64,175,.18),
        rgba(30,64,175,.55)
    );
}

.search-story-event:nth-of-type(even)::after{
    right:auto;
    left:-48px;
    background:linear-gradient(
        90deg,
        rgba(30,64,175,.55),
        rgba(30,64,175,.18)
    );
}

@media (max-width:800px){

    .search-story-event::after,
    .search-story-event:nth-of-type(even)::after{
        top:36px;
        left:-20px;
        right:auto;
        width:20px;
    }
}

/* Latest event emphasis */

.search-story-event:first-of-type .search-story-node{
    background:#1E40AF;
    box-shadow:
        0 0 0 2px rgba(30,64,175,.45),
        0 0 0 9px rgba(30,64,175,.10),
        0 0 22px rgba(30,64,175,.24);
}

.search-story-event:first-of-type .search-story-card{
    border-color:rgba(30,64,175,.28);
    box-shadow:
        0 18px 42px rgba(30,64,175,.10),
        0 12px 30px rgba(65,49,22,.07);
}

.search-story-event:first-of-type .search-story-sequence::after{
    content:'Latest';
    margin-left:6px;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(30,64,175,.09);
    border:1px solid rgba(30,64,175,.15);
    color:#1E40AF;
    font-size:8px;
    letter-spacing:.12em;
}

.search-story-year{
    position:relative;
    z-index:3;
    width:max-content;
    margin:8px auto 26px;
    padding:8px 14px;
    border-radius:999px;
    background:#243042;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    box-shadow:0 8px 20px rgba(36,48,66,.16);
}

@media (max-width:800px){

    .search-story-year{
        margin:6px 0 20px -34px;
    }
}

.search-story-card{
    position:relative;
}

.search-story-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(
        90deg,
        #1E40AF,
        rgba(30,64,175,.18)
    );
}

.search-story-event:nth-of-type(even) .search-story-card::before{
    background:linear-gradient(
        90deg,
        rgba(30,64,175,.18),
        #1E40AF
    );
}

/* Mirror alternating timeline cards */

.search-story-event:nth-of-type(even) .search-story-card{
    grid-template-columns:minmax(0,1fr) 150px;
}

.search-story-event:nth-of-type(even) .search-story-image{
    order:2;
}

.search-story-event:nth-of-type(even) .search-story-content{
    order:1;
}

@media (max-width:800px){

    .search-story-event:nth-of-type(even) .search-story-card{
        grid-template-columns:105px minmax(0,1fr);
    }

     .search-story-image{
        order:1;
    }

    .search-story-event:nth-of-type(even) .search-story-content{
        order:2;
    }
}

.search-story-year{
    display:flex;
    align-items:center;
    gap:8px;
}

.search-story-year span{
    padding-left:8px;
    border-left:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.72);
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.search-story-empty{
    position:relative;
    z-index:2;
    max-width:520px;
    margin:30px auto;
    padding:24px;
    border:1px solid rgba(169,133,69,.18);
    border-radius:18px;
    background:rgba(255,255,255,.88);
    color:#6b7280;
    text-align:center;
    box-shadow:0 12px 30px rgba(65,49,22,.07);
}

.search-story-image{
    transition:
        transform .28s ease,
        filter .28s ease;
}

.search-story-card:hover .search-story-image{
    transform:scale(1.035);
    filter:saturate(1.05) contrast(1.02);
}

.search-story-open{
    transition:
        transform .18s ease,
        color .18s ease;
}

.search-story-card:hover .search-story-open{
    transform:translateX(4px);
    color:#2563EB;
}

.search-story-content p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

.search-story-event:last-of-type:not(:first-of-type)
.search-story-sequence::after{
    content:'Earliest';
    margin-left:6px;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(139,115,80,.08);
    border:1px solid rgba(139,115,80,.15);
    color:#8b7350;
    font-size:8px;
    letter-spacing:.12em;
}

.search-story-date{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border:1px solid rgba(30,64,175,.16);
    border-radius:7px;
    background:rgba(30,64,175,.06);
}

.search-story-date::before{
    content:'';
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:#2563EB;
    box-shadow:0 0 8px rgba(37,99,235,.28);
}

.search-story-timeline::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:72px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#243042;
    border:3px solid #f5efe4;
    box-shadow:0 0 0 2px rgba(36,48,66,.22);
    transform:translateX(-50%);
}

@media (max-width:800px){

    .search-story-timeline::after{
        left:20px;
        bottom:52px;
        transform:none;
    }
}

.search-story-node{
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.search-story-event:hover .search-story-node{
    transform:scale(1.18);
    box-shadow:
        0 0 0 2px rgba(30,64,175,.42),
        0 0 0 9px rgba(30,64,175,.10),
        0 0 20px rgba(37,99,235,.22);
}

.search-story-content h3{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

#mainTimeline{
    scroll-margin-top:90px;
}

.search-story-event::after{
    transition:
        background .2s ease,
        box-shadow .2s ease;
}

.search-story-event:hover::after{
    background:#2563EB;
    box-shadow:0 0 10px rgba(37,99,235,.18);
}

.search-story-content{
    display:flex;
    flex-direction:column;
}

.search-story-open{
    margin-top:auto;
    padding-top:12px;
}

@media (max-width:520px){

    .search-story-card,
    .search-story-event:nth-of-type(even) .search-story-card{
        grid-template-columns:1fr;
    }

    .search-story-image,
    .search-story-event:nth-of-type(even) .search-story-image{
        order:1;
        width:100%;
        height:170px;
        min-height:0;
    }

    .search-story-content,
    .search-story-event:nth-of-type(even) .search-story-content{
        order:2;
    }
}

.search-story-card:focus-visible{
    outline:3px solid rgba(37,99,235,.35);
    outline-offset:4px;
}

/* =========================================
   SEARCH STORY TIMELINE — FINAL POLISH
========================================= */

.search-story-timeline{
    padding-top:30px;
    padding-bottom:95px;
}

.search-story-event{
    margin-bottom:42px;
}

.search-story-event:nth-of-type(even){
    margin-bottom:42px;
}

.search-story-card{
    min-height:175px;
    border-color:rgba(169,133,69,.20);
    box-shadow:
        0 14px 34px rgba(65,49,22,.08),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.search-story-content{
    min-width:0;
    padding:19px 20px 18px;
}

.search-story-sequence{
    margin-bottom:9px;
}

.search-story-top{
    margin-bottom:11px;
}

.search-story-content h3{
    margin-bottom:0;
    font-weight:750;
    letter-spacing:-.015em;
}

.search-story-content p{
    margin-top:10px;
}

.search-story-category{
    white-space:nowrap;
}

.search-story-open{
    display:inline-flex;
    align-items:center;
    width:max-content;
    font-weight:800;
}

.search-story-year{
    margin-top:18px;
    margin-bottom:32px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
        0 8px 20px rgba(36,48,66,.16),
        0 0 0 5px rgba(36,48,66,.035);
}

.search-story-year span{
    white-space:nowrap;
}

.search-story-node{
    z-index:3;
}

.search-story-event:first-of-type .search-story-card{
    transform:translateY(-2px);
}

.search-story-event:first-of-type:hover .search-story-card{
    transform:translateY(-5px);
}

.search-story-event:last-of-type{
    margin-bottom:20px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:1000px) and (min-width:801px){

    .search-story-timeline{
        padding-left:18px;
        padding-right:18px;
    }

    .search-story-event{
        width:calc(50% - 38px);
        margin-right:calc(50% + 38px);
    }

    .search-story-event:nth-of-type(even){
        margin-left:calc(50% + 38px);
        margin-right:0;
    }

    .search-story-event::after{
        right:-38px;
        width:38px;
    }

    .search-story-event:nth-of-type(even)::after{
        left:-38px;
        right:auto;
        width:38px;
    }

    .search-story-node{
        right:-47px;
    }

    .search-story-event:nth-of-type(even) .search-story-node{
        left:-47px;
        right:auto;
    }

    .search-story-card,
    .search-story-event:nth-of-type(even) .search-story-card{
        grid-template-columns:120px minmax(0,1fr);
    }

    .search-story-event:nth-of-type(even) .search-story-card{
        grid-template-columns:minmax(0,1fr) 120px;
    }

    .search-story-image{
        width:120px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:800px){

    .search-story-timeline{
        padding-top:18px;
        padding-bottom:70px;
    }

    .search-story-event,
    .search-story-event:nth-of-type(even){
        margin-bottom:26px;
    }

    .search-story-year{
        margin-top:12px;
        margin-bottom:24px;
    }

    .search-story-content{
        padding:15px;
    }

    .search-story-top{
        align-items:flex-start;
    }

    .search-story-date{
        font-size:11px;
    }

    .search-story-category{
        font-size:8px;
    }

    .search-story-content p{
        line-height:1.5;
    }
}

/* =========================================
   SEARCH TIMELINE — READING GUIDE
========================================= */

.search-story-guide{
    max-width:1180px;
    margin:0 auto 8px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border:1px solid rgba(169,133,69,.16);
    border-radius:14px;
    background:rgba(255,255,255,.58);
    box-shadow:0 8px 24px rgba(65,49,22,.045);
}

.search-story-guide-main{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.search-story-guide-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(30,64,175,.08);
    border:1px solid rgba(30,64,175,.15);
    color:#1E40AF;
    font-size:17px;
    font-weight:800;
}

.search-story-guide-main div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.search-story-guide-main strong{
    color:#243042;
    font-size:12px;
    font-weight:800;
}

.search-story-guide-main span{
    color:#6b7280;
    font-size:11px;
    line-height:1.4;
}

.search-story-guide-hint{
    max-width:430px;
    color:#7b6b52;
    font-size:11px;
    line-height:1.45;
    text-align:right;
}

@media (max-width:800px){

    .search-story-guide{
        margin-left:14px;
        margin-right:14px;
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .search-story-guide-hint{
        max-width:none;
        padding-left:46px;
        text-align:left;
    }
}

@media (max-width:520px){

    .search-story-guide{
        padding:13px 14px;
    }

    .search-story-guide-hint{
        padding-left:0;
    }
}

/* =========================================
   SEARCH TIMELINE — YEAR NAVIGATION
========================================= */

.search-story-year-nav{
    position:relative;
    z-index:5;
    max-width:1180px;
    margin:4px auto 28px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid rgba(169,133,69,.16);
    border-radius:15px;
    background:rgba(255,255,255,.72);
    box-shadow:
        0 8px 24px rgba(65,49,22,.045),
        inset 0 1px 0 rgba(255,255,255,.75);
}

.search-story-year-nav-label{
    flex:0 0 auto;
    color:#7b6b52;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.search-story-year-nav-list{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    overflow-x:auto;
    padding:2px 2px 4px;
    scrollbar-width:thin;
}

.search-story-year-nav-link{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding:0 10px;
    border:1px solid rgba(30,64,175,.13);
    border-radius:999px;
    background:rgba(30,64,175,.045);
    color:#1E40AF;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.search-story-year-nav-link strong{
    font-size:11px;
    font-weight:800;
}

.search-story-year-nav-link span{
    min-width:19px;
    height:19px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border-radius:999px;
    background:rgba(30,64,175,.09);
    color:#50627c;
    font-size:8px;
    font-weight:800;
}

.search-story-year-nav-link:hover{
    transform:translateY(-1px);
    background:rgba(30,64,175,.08);
    border-color:rgba(30,64,175,.24);
    box-shadow:0 5px 12px rgba(30,64,175,.08);
}

.search-story-year{
    scroll-margin-top:110px;
}

html{
    scroll-behavior:smooth;
}


/* =========================================
   YEAR NAVIGATION — MOBILE
========================================= */

@media (max-width:800px){

    .search-story-year-nav{
        margin-left:14px;
        margin-right:14px;
        margin-bottom:22px;
        padding:12px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .search-story-year-nav-list{
        width:100%;
    }

    .search-story-year{
        scroll-margin-top:90px;
    }
}

/* =========================================
   SEARCH TIMELINE — FINISH
========================================= */

.search-story-finish{
    position:relative;
    z-index:4;
    max-width:720px;
    margin:54px auto 0;
    padding:20px 22px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    border:1px solid rgba(169,133,69,.18);
    border-radius:18px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.94),
            rgba(249,245,236,.96)
        );
    box-shadow:
        0 14px 34px rgba(65,49,22,.07),
        inset 0 1px 0 rgba(255,255,255,.85);
}

.search-story-finish-marker{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#243042;
    border:4px solid #f5efe4;
    color:#fff;
    font-size:15px;
    font-weight:800;
    box-shadow:
        0 0 0 2px rgba(36,48,66,.20),
        0 8px 20px rgba(36,48,66,.12);
}

.search-story-finish-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.search-story-finish-kicker{
    color:#8b7350;
    font-size:8px;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.search-story-finish-content strong{
    color:#243042;
    font-size:14px;
    line-height:1.35;
}

.search-story-finish-content span{
    color:#6b7280;
    font-size:11px;
    line-height:1.4;
}

.search-story-finish-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
}

.search-story-finish-top,
.search-story-finish-results{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 11px;
    border-radius:999px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.search-story-finish-top{
    border:1px solid rgba(30,64,175,.15);
    background:rgba(30,64,175,.05);
    color:#1E40AF;
}

.search-story-finish-results{
    border:1px solid #1E40AF;
    background:#1E40AF;
    color:#fff;
}

.search-story-finish-top:hover{
    transform:translateY(-1px);
    background:rgba(30,64,175,.09);
    color:#2563EB;
}

.search-story-finish-results:hover{
    transform:translateY(-1px);
    background:#2563EB;
    border-color:#2563EB;
    color:#fff;
}


/* =========================================
   SEARCH TIMELINE FINISH — MOBILE
========================================= */

@media (max-width:700px){

    .search-story-finish{
        margin-top:36px;
        padding:17px;
        grid-template-columns:auto minmax(0,1fr);
        align-items:start;
    }

    .search-story-finish-actions{
        grid-column:1 / -1;
        width:100%;
        padding-top:5px;
        flex-direction:row;
        align-items:center;
    }

    .search-story-finish-top,
    .search-story-finish-results{
        flex:1;
    }
}

@media (max-width:420px){

    .search-story-finish-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .search-story-finish-top,
    .search-story-finish-results{
        width:100%;
    }
}

/* =========================================
   SEARCH TIMELINE — SCROLL REVEAL
========================================= */

.search-story-reveal{
    opacity:0;
    transform:translateY(20px);
    transition:
        opacity .48s ease,
        transform .48s ease;
}

.search-story-reveal.visible{
    opacity:1;
    transform:translateY(0);
}


/* Slightly softer reveal for year markers */

.search-story-year.search-story-reveal{
    transform:translateY(12px) scale(.97);
}

.search-story-year.search-story-reveal.visible{
    transform:translateY(0) scale(1);
}


/* Timeline cards reveal cleanly without affecting hover effects */

.search-story-event.search-story-reveal{
    transition:
        opacity .48s ease,
        transform .48s ease;
}

.search-story-event.search-story-reveal.visible{
    opacity:1;
    transform:translateY(0);
}


/* Finish panel gets a slightly stronger entrance */

.search-story-finish.search-story-reveal{
    transform:translateY(24px);
}

.search-story-finish.search-story-reveal.visible{
    transform:translateY(0);
}


/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .search-story-reveal,
    .search-story-year.search-story-reveal,
    .search-story-event.search-story-reveal,
    .search-story-finish.search-story-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

    .search-story-card,
    .search-story-image,
    .search-story-node,
    .search-story-open,
    .search-story-event::after,
    .search-story-year-nav-link,
    .search-story-finish-top,
    .search-story-finish-results{
        transition:none;
    }
}

/* =========================================
   SEARCH TIMELINE — ACTIVE YEAR
========================================= */

.search-story-year-nav-link.is-active{
    background:#1E40AF;
    border-color:#1E40AF;
    color:#fff;
    box-shadow:
        0 6px 16px rgba(30,64,175,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.search-story-year-nav-link.is-active span{
    background:rgba(255,255,255,.16);
    color:#fff;
}

.search-story-year-nav-link.is-active:hover{
    background:#2563EB;
    border-color:#2563EB;
    color:#fff;
}

.search-story-year-nav-link.is-active strong{
    color:#fff;
}

/* =========================================
   SEARCH TIMELINE — YEAR NAV REFINEMENT
========================================= */

.search-story-year-nav-list{
    scroll-behavior:smooth;
    scroll-padding-left:10px;
    scroll-padding-right:10px;
}

.search-story-year-nav-link{
    position:relative;
}

.search-story-year-nav-link.is-active::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-5px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#1E40AF;
    transform:translateX(-50%);
}

.search-story-year-nav-link.is-active{
    transform:translateY(-1px);
}

.search-story-year-nav-link:focus-visible{
    outline:3px solid rgba(37,99,235,.28);
    outline-offset:3px;
}

@media (max-width:800px){

    .search-story-year-nav-list{
        padding-bottom:8px;
    }

    .search-story-year-nav-link{
        min-height:34px;
        padding-left:12px;
        padding-right:12px;
    }
}

/* =========================================
   SEARCH TIMELINE — SMART YEAR NAVIGATION
========================================= */

.search-story-year-nav{
    position:sticky;
    top:72px;
    z-index:40;

    transition:
        transform .24s ease,
        opacity .20s ease,
        background .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}

.search-story-year-nav.is-smart-stuck{
    background:rgba(255,253,248,.94);
    border-color:rgba(169,133,69,.22);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:
        0 12px 30px rgba(65,49,22,.10),
        inset 0 1px 0 rgba(255,255,255,.90);
}

.search-story-year-nav.is-smart-hidden{
    opacity:0;

    transform:
        translateY(
            calc(-100% - 90px)
        );

    pointer-events:none;
}


/* Keeps the navigation visible when
   keyboard focus is inside it */

.search-story-year-nav.is-smart-hidden:focus-within{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}


/* =========================================
   SMART YEAR NAVIGATION — MOBILE
========================================= */

@media (max-width:800px){

    .search-story-year-nav{
        top:64px;
    }

    .search-story-year-nav.is-smart-hidden{
        transform:
            translateY(
                calc(-100% - 80px)
            );
    }
}


/* =========================================
   SMART YEAR NAV — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .search-story-year-nav{
        transition:none;
    }
}

/* =========================================
   SMART YEAR NAV — HEADER POSITION FIX
========================================= */

.search-story-year-nav{
    top:var(--timeline-smart-top, 8px);
    z-index:900;
}

/* =========================================
   SMART YEAR NAV — COMPACT STICKY MODE
========================================= */

.search-story-year-nav{
    transform-origin:top center;
}

.search-story-year-nav-label,
.search-story-year-nav-list,
.search-story-year-nav-link,
.search-story-year-nav-link span{
    transition:
        opacity .20s ease,
        transform .20s ease,
        padding .20s ease,
        min-height .20s ease,
        background .20s ease,
        border-color .20s ease;
}


/* Compact once the navigation becomes sticky */

.search-story-year-nav.is-smart-stuck{
    max-width:1040px;
    padding:9px 12px;
    gap:10px;
    border-radius:13px;
}

.search-story-year-nav.is-smart-stuck
.search-story-year-nav-label{
    font-size:8px;
    letter-spacing:.11em;
    white-space:nowrap;
}

.search-story-year-nav.is-smart-stuck
.search-story-year-nav-link{
    min-height:28px;
    padding:0 9px;
}

.search-story-year-nav.is-smart-stuck
.search-story-year-nav-link strong{
    font-size:10px;
}

.search-story-year-nav.is-smart-stuck
.search-story-year-nav-link span{
    min-width:17px;
    height:17px;
    padding:0 4px;
    font-size:7px;
}


/* Make the active year stand out more */

.search-story-year-nav.is-smart-stuck
.search-story-year-nav-link.is-active{
    padding-left:12px;
    padding-right:12px;
    box-shadow:
        0 5px 16px rgba(30,64,175,.20),
        inset 0 1px 0 rgba(255,255,255,.14);
}


/* Fade the edges when there are many years */

.search-story-year-nav-list{
    position:relative;
    mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 12px,
            #000 calc(100% - 12px),
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 12px,
            #000 calc(100% - 12px),
            transparent 100%
        );
}


/* Prevent the year bar from becoming too tall */

.search-story-year-nav-list{
    max-height:42px;
}


/* =========================================
   SMART YEAR NAV — MOBILE COMPACT MODE
========================================= */

@media (max-width:800px){

    .search-story-year-nav.is-smart-stuck{
        margin-left:8px;
        margin-right:8px;
        padding:8px 10px;
        gap:6px;
        border-radius:12px;
    }

    .search-story-year-nav.is-smart-stuck
    .search-story-year-nav-label{
        display:none;
    }

    .search-story-year-nav.is-smart-stuck
    .search-story-year-nav-list{
        width:100%;
        max-height:38px;
    }

    .search-story-year-nav.is-smart-stuck
    .search-story-year-nav-link{
        min-height:30px;
        padding-left:10px;
        padding-right:10px;
    }

    .search-story-year-nav.is-smart-stuck
    .search-story-year-nav-link.is-active{
        padding-left:13px;
        padding-right:13px;
    }
}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width:420px){

    .search-story-year-nav.is-smart-stuck{
        margin-left:6px;
        margin-right:6px;
    }

    .search-story-year-nav.is-smart-stuck
    .search-story-year-nav-link span{
        display:none;
    }

    .search-story-year-nav.is-smart-stuck
    .search-story-year-nav-link{
        min-width:52px;
        justify-content:center;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .search-story-year-nav-label,
    .search-story-year-nav-list,
    .search-story-year-nav-link,
    .search-story-year-nav-link span{
        transition:none;
    }
}

/* =========================================
   SMART YEAR NAV — FIXED BEHAVIOR
========================================= */

.search-story-year-nav-placeholder{
    height:0;
}


/* Once reached, remove it from normal flow
   and attach it directly to the viewport */

.search-story-year-nav.is-smart-stuck{
    position:fixed !important;

    top:var(
        --timeline-smart-top,
        8px
    ) !important;

    left:50% !important;

    width:min(
        1040px,
        calc(100% - 48px)
    ) !important;

    margin:0 !important;

    z-index:950 !important;

    opacity:1;

    transform:
        translateX(-50%) !important;

    pointer-events:auto;
}


/* Scrolling downward */

.search-story-year-nav.is-smart-stuck.is-smart-hidden{
    opacity:0;

    transform:
        translate(
            -50%,
            calc(-100% - 30px)
        ) !important;

    pointer-events:none;
}


/* Scrolling upward */

.search-story-year-nav.is-smart-stuck:not(.is-smart-hidden){
    opacity:1;

    transform:
        translateX(-50%) !important;

    pointer-events:auto;
}


/* Keep it visible while using keyboard navigation */

.search-story-year-nav.is-smart-stuck:focus-within{
    opacity:1 !important;

    transform:
        translateX(-50%) !important;

    pointer-events:auto !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:800px){

    .search-story-year-nav.is-smart-stuck{
        width:calc(
            100% - 20px
        ) !important;

        margin:0 !important;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .search-story-year-nav{
        transition:none !important;
    }

}

/* =========================================
   SEARCH TIMELINE — LIVE PROGRESS
========================================= */

.search-story-progress{
    position:relative;
    z-index:4;

    max-width:720px;

    margin:
        0 auto
        38px;

    padding:
        13px 16px
        14px;

    border:
        1px solid
        rgba(169,133,69,.16);

    border-radius:14px;

    background:
        rgba(255,255,255,.68);

    box-shadow:
        0 8px 22px
        rgba(65,49,22,.045);
}


.search-story-progress-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-bottom:9px;
}


.search-story-progress-label{
    color:#8b7350;

    font-size:8px;
    font-weight:800;

    letter-spacing:.14em;
    text-transform:uppercase;
}


.search-story-progress-status{
    display:flex;
    align-items:center;
    gap:10px;
}


.search-story-progress-current{
    color:#6b7280;

    font-size:10px;
    font-weight:700;
}


.search-story-progress-percent{
    min-width:34px;

    color:#1E40AF;

    font-size:11px;
    font-weight:850;

    text-align:right;
}


.search-story-progress-track{
    position:relative;

    width:100%;
    height:5px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(30,64,175,.08);
}


.search-story-progress-fill{
    position:absolute;

    top:0;
    bottom:0;
    left:0;

    width:0;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #1E40AF,
            #3B82F6
        );

    box-shadow:
        0 0 10px
        rgba(37,99,235,.20);

    transition:
        width .14s linear;
}


/* Small moving reading point */

.search-story-progress-fill::after{
    content:'';

    position:absolute;

    top:50%;
    right:0;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#fff;

    border:3px solid #2563EB;

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

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,.09);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:800px){

    .search-story-progress{
        margin:
            0 0
            28px;

        padding:
            12px 13px;
    }

    .search-story-progress-info{
        gap:8px;
    }

    .search-story-progress-status{
        gap:7px;
    }

    .search-story-progress-current{
        font-size:9px;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width:420px){

    .search-story-progress-info{
        align-items:flex-start;
    }

    .search-story-progress-status{
        flex-direction:column;
        align-items:flex-end;
        gap:1px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .search-story-progress-fill{
        transition:none;
    }

}

/* =========================================
   TIMELINE PROGRESS — FLOATING READER BAR
========================================= */

.search-story-progress.is-floating-visible{
    position:fixed;

    left:50%;
    bottom:18px;

    width:min(
        680px,
        calc(100% - 32px)
    );

    margin:0;

    z-index:980;

    transform:
        translateX(-50%);

    background:
        rgba(255,253,248,.96);

    border-color:
        rgba(169,133,69,.24);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        0 14px 40px
        rgba(36,48,66,.16),
        0 3px 10px
        rgba(36,48,66,.08),
        inset 0 1px 0
        rgba(255,255,255,.92);
}


/* Make the floating version slimmer */

.search-story-progress.is-floating-visible{
    padding:
        10px 14px
        11px;
}


.search-story-progress.is-floating-visible
.search-story-progress-info{
    margin-bottom:7px;
}


.search-story-progress.is-floating-visible
.search-story-progress-track{
    height:4px;
}


/* Active moment becomes easier to read */

.search-story-progress.is-floating-visible
.search-story-progress-current{
    color:#44505d;
    font-weight:800;
}


.search-story-progress.is-floating-visible
.search-story-progress-percent{
    padding:
        3px 7px;

    border-radius:999px;

    background:
        rgba(30,64,175,.08);

    color:#1E40AF;
}


/* =========================================
   FLOATING PROGRESS — MOBILE
========================================= */

@media (max-width:800px){

    .search-story-progress.is-floating-visible{
        bottom:10px;

        width:
            calc(100% - 20px);

        padding:
            9px 11px
            10px;

        border-radius:12px;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width:420px){

    .search-story-progress.is-floating-visible
    .search-story-progress-label{
        display:none;
    }

    .search-story-progress.is-floating-visible
    .search-story-progress-info{
        justify-content:flex-end;
    }

    .search-story-progress.is-floating-visible
    .search-story-progress-status{
        width:100%;

        flex-direction:row;

        justify-content:
            space-between;

        align-items:center;
    }

}

/* =========================================
   TIMELINE PROGRESS — MOMENT NAVIGATION
========================================= */

.search-story-progress-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
}

.search-story-progress-button{
    width:32px;
    height:32px;

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

    flex:0 0 32px;

    padding:0;

    border:1px solid rgba(30,64,175,.16);
    border-radius:50%;

    background:rgba(30,64,175,.055);

    color:#1E40AF;

    font-size:15px;
    font-weight:800;
    line-height:1;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75);

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;
}

.search-story-progress-button:hover:not(:disabled){
    transform:translateY(-1px);

    background:#1E40AF;
    border-color:#1E40AF;

    color:#fff;

    box-shadow:
        0 5px 12px rgba(30,64,175,.16);
}

.search-story-progress-button:active:not(:disabled){
    transform:scale(.94);
}

.search-story-progress-button:disabled{
    opacity:.25;
    cursor:default;
    box-shadow:none;
}

.search-story-progress-button:focus-visible{
    outline:3px solid rgba(37,99,235,.25);
    outline-offset:2px;
}


/* Floating reader layout */

.search-story-progress.is-floating-visible
.search-story-progress-info{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:14px;
}

.search-story-progress.is-floating-visible
.search-story-progress-status{
    justify-self:center;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:600px){

    .search-story-progress.is-floating-visible
    .search-story-progress-info{
        grid-template-columns:
            minmax(0,1fr)
            auto;

        gap:10px;
    }

    .search-story-progress.is-floating-visible
    .search-story-progress-label{
        display:none;
    }

    .search-story-progress.is-floating-visible
    .search-story-progress-status{
        justify-self:start;
    }

    .search-story-progress-button{
        width:36px;
        height:36px;

        flex-basis:36px;

        font-size:16px;
    }
}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width:390px){

    .search-story-progress-current{
        font-size:9px;
    }

    .search-story-progress-percent{
        font-size:10px;
    }

    .search-story-progress-actions{
        gap:4px;
    }

    .search-story-progress-button{
        width:34px;
        height:34px;

        flex-basis:34px;
    }
}

/* =========================================
   TIMELINE PROGRESS — CLICKABLE SCRUBBER
========================================= */

.search-story-progress-track{
    position:relative;

    display:block;

    width:100%;
    height:20px;

    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    touch-action:manipulation;
}


/* Visual rail */

.search-story-progress-track::before{
    content:'';

    position:absolute;

    top:50%;
    left:0;
    right:0;

    height:5px;

    border-radius:999px;

    background:
        rgba(30,64,175,.08);

    transform:
        translateY(-50%);
}


/* Progress fill */

.search-story-progress-track
.search-story-progress-fill{
    position:absolute;

    top:50%;
    left:0;
    bottom:auto;

    height:5px;

    transform:
        translateY(-50%);

    pointer-events:none;
}


/* Current-position dot */

.search-story-progress-track
.search-story-progress-fill::after{
    pointer-events:none;
}


/* Hover gives the user a hint that
   the timeline bar is interactive */

.search-story-progress-track:hover::before{
    background:
        rgba(30,64,175,.13);
}


/* Keyboard focus */

.search-story-progress-track:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.24);

    outline-offset:3px;

    border-radius:999px;
}


/* Slightly larger target on touch devices */

@media (max-width:800px){

    .search-story-progress-track{
        height:24px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .search-story-progress-track{
        scroll-behavior:auto;
    }

}

/* =========================================
   SEARCH TIMELINE — SEARCH TERM HIGHLIGHT
========================================= */

.search-story-highlight{
    position:relative;

    padding:
        1px 3px;

    margin:
        0 1px;

    border-radius:4px;

    background:
        linear-gradient(
            180deg,
            rgba(250,204,21,.13),
            rgba(250,204,21,.28)
        );

    color:inherit;

    box-shadow:
        inset 0 -1px 0
        rgba(180,130,20,.24);

    font-weight:inherit;

    text-decoration:none;
}


/* Slightly stronger inside titles */

.search-story-content h3
.search-story-highlight{
    background:
        linear-gradient(
            180deg,
            rgba(250,204,21,.16),
            rgba(250,204,21,.34)
        );

    box-shadow:
        inset 0 -2px 0
        rgba(180,130,20,.28);
}


/* Active event */

.search-story-event.is-reading
.search-story-highlight{
    background:
        linear-gradient(
            180deg,
            rgba(250,204,21,.20),
            rgba(250,204,21,.40)
        );

    box-shadow:
        inset 0 -2px 0
        rgba(180,130,20,.32);
}


/* =========================================
   REDUCED MOTION / PRINT
========================================= */

@media print{

    .search-story-highlight{
        background:transparent;

        border-bottom:
            2px solid
            rgba(180,130,20,.45);

        border-radius:0;

        box-shadow:none;
    }

}

/* =========================================
   SEARCH TIMELINE — OVERVIEW
========================================= */

.search-story-summary{
    position:relative;
    z-index:4;

    max-width:1180px;

    margin:
        0 auto
        24px;

    padding:
        18px 20px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(260px,.65fr);

    gap:24px;

    border:
        1px solid
        rgba(169,133,69,.17);

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.80),
            rgba(249,245,236,.72)
        );

    box-shadow:
        0 10px 28px
        rgba(65,49,22,.055),
        inset 0 1px 0
        rgba(255,255,255,.82);
}


.search-story-summary-main{
    min-width:0;
}


.search-story-summary-kicker{
    margin-bottom:12px;

    color:#8b7350;

    font-size:8px;
    font-weight:850;

    letter-spacing:.15em;
    text-transform:uppercase;
}


.search-story-summary-stats{
    display:grid;

    grid-template-columns:
        repeat(3, minmax(80px,1fr))
        minmax(180px,1.8fr);

    gap:10px;
}


.search-story-summary-stat{
    min-width:0;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(30,64,175,.09);

    border-radius:12px;

    background:
        rgba(255,255,255,.54);
}


.search-story-summary-stat strong{
    display:block;

    margin-bottom:2px;

    color:#243042;

    font-size:17px;
    font-weight:850;

    line-height:1.15;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.search-story-summary-stat span{
    display:block;

    color:#7a8490;

    font-size:8px;
    font-weight:750;

    letter-spacing:.07em;
    text-transform:uppercase;
}


.search-story-summary-stat-wide strong{
    color:#1E40AF;

    font-size:12px;
}


.search-story-summary-categories{
    min-width:0;

    padding-left:20px;

    border-left:
        1px solid
        rgba(169,133,69,.15);
}


.search-story-summary-category-label{
    margin-bottom:10px;

    color:#8b7350;

    font-size:8px;
    font-weight:850;

    letter-spacing:.15em;
    text-transform:uppercase;
}


.search-story-summary-category-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}


.search-story-summary-category{
    display:inline-flex;
    align-items:center;
    gap:7px;

    min-height:28px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(30,64,175,.11);

    border-radius:999px;

    background:
        rgba(30,64,175,.045);

    color:#536071;

    font-size:9px;
    font-weight:750;
}


.search-story-summary-category strong{
    min-width:18px;
    height:18px;

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

    padding:
        0 5px;

    border-radius:999px;

    background:
        rgba(30,64,175,.09);

    color:#1E40AF;

    font-size:8px;
    font-weight:850;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:950px){

    .search-story-summary{
        grid-template-columns:1fr;
        gap:16px;
    }

    .search-story-summary-categories{
        padding-left:0;
        padding-top:15px;

        border-left:0;

        border-top:
            1px solid
            rgba(169,133,69,.15);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:650px){

    .search-story-summary{
        margin-left:14px;
        margin-right:14px;

        padding:
            15px;

        border-radius:15px;
    }

    .search-story-summary-stats{
        grid-template-columns:
            repeat(3,1fr);
    }

    .search-story-summary-stat-wide{
        grid-column:
            1 / -1;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width:390px){

    .search-story-summary-stats{
        grid-template-columns:
            repeat(2,1fr);
    }

    .search-story-summary-stat-wide{
        grid-column:
            1 / -1;
    }

}

/* =========================================
   TIMELINE OVERVIEW — DATE RANGE
========================================= */

.search-story-summary-range{
    grid-column:1 / -1;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        minmax(0,1fr);

    align-items:center;

    gap:16px;

    margin-top:2px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(30,64,175,.10);

    border-radius:14px;

    background:
        rgba(255,255,255,.56);
}


.search-story-summary-range-point{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:3px;
}


.search-story-summary-range-point:last-child{
    text-align:right;
    align-items:flex-end;
}


.search-story-summary-range-label{
    color:#8b7350;

    font-size:8px;
    font-weight:850;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.search-story-summary-range-point strong{
    color:#1E40AF;

    font-size:12px;
    font-weight:850;

    line-height:1.3;
}


.search-story-summary-range-point span{
    max-width:100%;

    overflow:hidden;

    color:#596575;

    font-size:10px;
    font-weight:700;

    line-height:1.4;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.search-story-summary-range-arrow{
    width:34px;
    height:34px;

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

    border-radius:50%;

    background:
        rgba(30,64,175,.07);

    border:
        1px solid
        rgba(30,64,175,.12);

    color:#1E40AF;

    font-size:15px;
    font-weight:850;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:600px){

    .search-story-summary-range{
        grid-template-columns:1fr;

        gap:10px;
    }


    .search-story-summary-range-point:last-child{
        text-align:left;
        align-items:flex-start;
    }


    .search-story-summary-range-arrow{
        width:28px;
        height:28px;

        margin-left:4px;

        font-size:13px;
    }


    .search-story-summary-range-point span{
        white-space:normal;
    }

}

/* =========================================
   SEARCH TIMELINE — DISPLAY SWITCH
========================================= */

.search-story-view-switch{
    position:relative;
    z-index:5;

    max-width:720px;

    margin:
        0 auto
        30px;

    padding:
        10px 12px;

    display:flex;
    align-items:center;

    gap:12px;

    border:
        1px solid
        rgba(169,133,69,.15);

    border-radius:14px;

    background:
        rgba(255,255,255,.60);

    box-shadow:
        0 7px 20px
        rgba(65,49,22,.04);
}


.search-story-view-switch-label{
    flex:0 0 auto;

    color:#8b7350;

    font-size:8px;
    font-weight:850;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.search-story-view-switch-buttons{
    display:inline-flex;

    padding:3px;

    border-radius:999px;

    background:
        rgba(30,64,175,.055);

    border:
        1px solid
        rgba(30,64,175,.09);
}


.search-story-view-button{
    min-height:30px;

    padding:
        0 11px;

    border:0;

    border-radius:999px;

    background:transparent;

    color:#657184;

    font-size:9px;
    font-weight:800;

    cursor:pointer;

    transition:
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}


.search-story-view-button:hover{
    color:#1E40AF;
}


.search-story-view-button.is-active{
    background:#fff;

    color:#1E40AF;

    box-shadow:
        0 3px 10px
        rgba(36,48,66,.08);
}


.search-story-view-button:active{
    transform:scale(.96);
}


.search-story-view-button:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.23);

    outline-offset:2px;
}


.search-story-view-switch-hint{
    min-width:0;

    margin-left:auto;

    color:#7a8490;

    font-size:9px;
    line-height:1.4;

    text-align:right;
}


/* =========================================
   COMPACT TIMELINE MODE
========================================= */

.search-story-timeline.is-compact
.search-story-event{
    margin-bottom:24px;
}


.search-story-timeline.is-compact
.search-story-card{
    min-height:112px;

    grid-template-columns:
        108px
        minmax(0,1fr);

    border-radius:15px;
}


.search-story-timeline.is-compact
.search-story-event:nth-of-type(even)
.search-story-card{
    grid-template-columns:
        minmax(0,1fr)
        108px;
}


.search-story-timeline.is-compact
.search-story-image{
    width:108px;

    min-height:112px;

    height:100%;
}


.search-story-timeline.is-compact
.search-story-content{
    padding:
        13px 15px;
}


.search-story-timeline.is-compact
.search-story-sequence{
    margin-bottom:5px;

    font-size:8px;
}


.search-story-timeline.is-compact
.search-story-top{
    margin-bottom:6px;
}


.search-story-timeline.is-compact
.search-story-date{
    padding:
        3px 7px;

    font-size:9px;
}


.search-story-timeline.is-compact
.search-story-category{
    padding:
        3px 7px;

    font-size:7px;
}


.search-story-timeline.is-compact
.search-story-content h3{
    font-size:15px;

    -webkit-line-clamp:2;
}


.search-story-timeline.is-compact
.search-story-content p{
    display:none;
}


.search-story-timeline.is-compact
.search-story-open{
    margin-top:7px;
    padding-top:0;

    font-size:10px;
}


.search-story-timeline.is-compact
.search-story-node{
    top:28px;

    width:14px;
    height:14px;

    border-width:3px;
}


.search-story-timeline.is-compact
.search-story-event::after{
    top:34px;
}


/* =========================================
   COMPACT MODE — MOBILE
========================================= */

@media (max-width:800px){

    .search-story-view-switch{
        margin:
            0 14px
            24px;

        flex-wrap:wrap;
    }


    .search-story-view-switch-hint{
        flex:
            1 0 100%;

        margin-left:0;

        text-align:left;
    }


    .search-story-timeline.is-compact
    .search-story-card,
    .search-story-timeline.is-compact
    .search-story-event:nth-of-type(even)
    .search-story-card{
        grid-template-columns:
            90px
            minmax(0,1fr);
    }


    .search-story-timeline.is-compact
    .search-story-event:nth-of-type(even)
    .search-story-image{
        order:1;
    }


    .search-story-timeline.is-compact
    .search-story-event:nth-of-type(even)
    .search-story-content{
        order:2;
    }


    .search-story-timeline.is-compact
    .search-story-image{
        width:90px;

        min-height:105px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width:520px){

    .search-story-timeline.is-compact
    .search-story-card,
    .search-story-timeline.is-compact
    .search-story-event:nth-of-type(even)
    .search-story-card{
        grid-template-columns:
            82px
            minmax(0,1fr);
    }


    .search-story-timeline.is-compact
    .search-story-image{
        width:82px;

        height:100%;

        min-height:100px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .search-story-view-button{
        transition:none;
    }

}

/* =========================================
   SEARCH TIMELINE — SELECTED YEAR
========================================= */

.search-story-year-context{
    position:relative;
    z-index:4;

    max-width:900px;

    margin:
        0 auto
        24px;

    padding:
        12px 14px;

    display:grid;

    grid-template-columns:
        minmax(150px,1fr)
        auto
        minmax(150px,1fr);

    align-items:center;

    gap:18px;

    border:
        1px solid
        rgba(169,133,69,.16);

    border-radius:16px;

    background:
        rgba(255,255,255,.68);

    box-shadow:
        0 8px 22px
        rgba(65,49,22,.045);
}


.search-story-year-context-side{
    min-width:0;
}


.search-story-year-context-side-right{
    text-align:right;
}


.search-story-year-context-link{
    display:inline-flex;

    align-items:center;

    gap:9px;

    color:#536071;

    text-decoration:none;

    transition:
        color .16s ease,
        transform .16s ease;
}


.search-story-year-context-link:hover{
    color:#1E40AF;

    transform:
        translateX(-2px);
}


.search-story-year-context-link-right{
    justify-content:flex-end;
}


.search-story-year-context-link-right:hover{
    transform:
        translateX(2px);
}


.search-story-year-context-link > span{
    color:#1E40AF;

    font-size:16px;
    font-weight:850;
}


.search-story-year-context-link small,
.search-story-year-context-edge small{
    display:block;

    margin-bottom:2px;

    color:#8b7350;

    font-size:7px;
    font-weight:850;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.search-story-year-context-link strong{
    display:block;

    font-size:12px;
    font-weight:850;
}


.search-story-year-context-current{
    min-width:150px;

    padding:
        7px 22px;

    text-align:center;

    border-left:
        1px solid
        rgba(169,133,69,.14);

    border-right:
        1px solid
        rgba(169,133,69,.14);
}


.search-story-year-context-current > span{
    display:block;

    margin-bottom:2px;

    color:#8b7350;

    font-size:7px;
    font-weight:850;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.search-story-year-context-current > strong{
    display:block;

    color:#1E40AF;

    font-size:22px;
    font-weight:900;

    line-height:1.05;
}


.search-story-year-context-current > small{
    display:block;

    margin-top:4px;

    color:#768191;

    font-size:8px;
    font-weight:700;
}


.search-story-year-context-edge{
    color:#9ca3af;
}


.search-story-year-context-edge strong{
    display:block;

    color:#8b929c;

    font-size:10px;
    font-weight:750;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:650px){

    .search-story-year-context{
        margin:
            0 14px
            22px;

        grid-template-columns:
            1fr
            1fr;

        gap:12px;
    }


    .search-story-year-context-current{
        grid-column:
            1 / -1;

        grid-row:1;

        padding:
            8px 10px
            12px;

        border-left:0;
        border-right:0;

        border-bottom:
            1px solid
            rgba(169,133,69,.14);
    }


    .search-story-year-context-side{
        grid-row:2;
    }


    .search-story-year-context-link{
        width:100%;
    }


    .search-story-year-context-link-right{
        justify-content:flex-end;
    }

}

/* =========================================
   SEARCH TIMELINE — CONTINUE THROUGH YEARS
========================================= */

.search-story-finish-actions{
    min-width:230px;
}


.search-story-finish-continue{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    width:100%;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(30,64,175,.15);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(30,64,175,.07),
            rgba(59,130,246,.035)
        );

    color:#243042;

    text-decoration:none;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.75);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.search-story-finish-continue:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(30,64,175,.27);

    background:
        linear-gradient(
            135deg,
            rgba(30,64,175,.105),
            rgba(59,130,246,.06)
        );

    box-shadow:
        0 7px 18px
        rgba(30,64,175,.09);
}


.search-story-finish-continue-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:1px;
}


.search-story-finish-continue-copy small{
    color:#8b7350;

    font-size:7px;
    font-weight:850;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.search-story-finish-continue-copy strong{
    color:#1E40AF;

    font-size:18px;
    font-weight:900;

    line-height:1.1;
}


.search-story-finish-continue-copy em{
    margin-top:2px;

    color:#758091;

    font-size:8px;
    font-weight:700;

    font-style:normal;
}


.search-story-finish-continue-arrow{
    flex:0 0 auto;

    width:32px;
    height:32px;

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

    border-radius:50%;

    background:#1E40AF;

    color:#fff;

    font-size:14px;
    font-weight:900;

    transition:
        transform .18s ease;
}


.search-story-finish-continue:hover
.search-story-finish-continue-arrow{
    transform:
        translateX(3px);
}


.search-story-finish-secondary{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-top:10px;
}


.search-story-finish-end{
    padding:
        12px 14px;

    border:
        1px solid
        rgba(169,133,69,.16);

    border-radius:13px;

    background:
        rgba(169,133,69,.045);
}


.search-story-finish-end small{
    display:block;

    margin-bottom:3px;

    color:#8b7350;

    font-size:7px;
    font-weight:850;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.search-story-finish-end strong{
    display:block;

    color:#555f6d;

    font-size:10px;
    font-weight:750;

    line-height:1.45;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:650px){

    .search-story-finish-actions{
        width:100%;
        min-width:0;
    }


    .search-story-finish-secondary{
        flex-wrap:wrap;

        justify-content:flex-start;
    }


    .search-story-finish-continue{
        padding:
            13px 14px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .search-story-finish-continue,
    .search-story-finish-continue-arrow{
        transition:none;
    }

}

/* =========================================
   SEARCH RESULTS — PAGINATION
========================================= */

.homepage-search-page-status{
    white-space:nowrap;
}


.homepage-search-pagination{
    max-width:720px;

    margin:
        34px auto
        4px;

    padding:
        11px 13px;

    display:grid;

    grid-template-columns:
        minmax(120px,1fr)
        auto
        minmax(120px,1fr);

    align-items:center;

    gap:16px;

    border:
        1px solid
        rgba(169,133,69,.16);

    border-radius:15px;

    background:
        rgba(255,255,255,.68);

    box-shadow:
        0 8px 22px
        rgba(65,49,22,.045);
}


.homepage-search-pagination-side{
    min-width:0;
}


.homepage-search-pagination-side-next{
    text-align:right;
}


.homepage-search-pagination-button{
    display:inline-flex;

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

    min-height:34px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(30,64,175,.14);

    border-radius:999px;

    background:
        rgba(30,64,175,.05);

    color:#1E40AF;

    font-size:9px;
    font-weight:800;

    text-decoration:none;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.homepage-search-pagination-button:hover{
    transform:
        translateY(-1px);

    background:
        rgba(30,64,175,.09);

    border-color:
        rgba(30,64,175,.24);

    box-shadow:
        0 5px 14px
        rgba(30,64,175,.08);
}


.homepage-search-pagination-current{
    min-width:100px;

    text-align:center;
}


.homepage-search-pagination-current > span{
    display:block;

    color:#8b7350;

    font-size:7px;
    font-weight:850;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.homepage-search-pagination-current > strong{
    display:block;

    margin-top:2px;

    color:#243042;

    font-size:17px;
    font-weight:900;
}


.homepage-search-pagination-current small{
    color:#8b929c;

    font-size:10px;
    font-weight:750;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:560px){

    .homepage-search-pagination{
        grid-template-columns:
            1fr
            auto
            1fr;

        gap:8px;

        margin-left:10px;
        margin-right:10px;
    }


    .homepage-search-pagination-button{
        min-height:36px;

        padding:
            0 10px;

        font-size:8px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

    .homepage-search-pagination-button{
        transition:none;
    }

}