body {
            transition: background-color 0.8s ease, color 0.8s ease;
            background-color: #d4b886; /* Default to era1 */
            color: #2d3748;
        }
        
        /* Fade-in animation for scroll */
        .fade-in-section {
            opacity: 0;
            transform: translateY(5vh);
            visibility: hidden;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-section.is-visible {
            opacity: 1;
            transform: none;
            visibility: visible;
        }

        .era-dark-mode {
            color: #f7fafc;
        }
        
        #hero-canvas {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        @keyframes baghdadArrowBounce {
            0%,
            100% {
                transform: translateY(-25%);
                animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            }

            50% {
                transform: translateY(0);
                animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }
        }

        .scroll-arrow-bounce {
            animation: baghdadArrowBounce 1s infinite;
        }

        .floating-scroll-arrow {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 140px;
            background-color: transparent;
            color: #000000;
            border-radius: 0;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 99999;
            font-size: 36px;
            font-weight: 900;
            box-shadow: none;
            border: 0;
        }

        .floating-scroll-arrow:hover {
            background-color: transparent;
            border-color: transparent;
            transform: translateX(-50%) scale(1.05);
        }

        /* SVG Pattern Overlays */
        .bg-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: -1;
            opacity: 0;
            transition: opacity 1s ease;
            background-size: 200px 200px;
        }
        #pattern-era1 {
            z-index: 0;
            background-size: 90px 90px;
            background-image: url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23553719' fill-opacity='0.32'%3E%3Ccircle cx='6' cy='8' r='0.9'/%3E%3Ccircle cx='18' cy='31' r='0.7'/%3E%3Ccircle cx='39' cy='13' r='1.05'/%3E%3Ccircle cx='62' cy='23' r='0.75'/%3E%3Ccircle cx='82' cy='9' r='0.85'/%3E%3Ccircle cx='10' cy='58' r='0.8'/%3E%3Ccircle cx='31' cy='72' r='1'/%3E%3Ccircle cx='52' cy='49' r='0.75'/%3E%3Ccircle cx='76' cy='64' r='1.05'/%3E%3Ccircle cx='84' cy='84' r='0.7'/%3E%3C/g%3E%3Cg fill='%23f6e0ad' fill-opacity='0.36'%3E%3Ccircle cx='25' cy='7' r='0.75'/%3E%3Ccircle cx='47' cy='34' r='0.65'/%3E%3Ccircle cx='72' cy='42' r='0.8'/%3E%3Ccircle cx='7' cy='80' r='0.65'/%3E%3Ccircle cx='40' cy='86' r='0.7'/%3E%3Ccircle cx='67' cy='78' r='0.65'/%3E%3C/g%3E%3Cg stroke='%23734b23' stroke-opacity='0.18' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M12 21h3'/%3E%3Cpath d='M56 8h4'/%3E%3Cpath d='M68 55h3'/%3E%3Cpath d='M22 48h4'/%3E%3Cpath d='M44 65h3'/%3E%3C/g%3E%3C/svg%3E");
        }
        #pattern-era2 {
            background-image: none;
        }
        #pattern-era5 {
            background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.05'%3E%3Cpath d='M10 16c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10S0 .477 0 6c0 5.523 4.477 10 10 10zm16 0c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 5.523 4.477 10 10 10zm16 0c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 5.523 4.477 10 10 10zM10 26c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10S0 10.477 0 16c0 5.523 4.477 10 10 10zm16 0c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 5.523 4.477 10 10 10zm16 0c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 5.523 4.477 10 10 10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        #lightbox { display: none; position: fixed; inset: 0; background: rgba(20,15,10,0.45); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 9999; cursor: pointer; align-items: center; justify-content: center; }
        #lightbox.open { display: flex; }
        #lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; cursor: default; box-shadow: 0 8px 60px rgba(0,0,0,0.7); }
        #lightbox-close { position: absolute; top: 1.5rem; right: 2rem; color: white; font-size: 2rem; line-height: 1; opacity: 0.7; cursor: pointer; user-select: none; }
        #lightbox-close:hover { opacity: 1; }

        body[data-era="era1"] {
            background:
                linear-gradient(135deg, rgba(108, 70, 37, 0.16) 0 1px, transparent 1px 18px),
                radial-gradient(circle at 16% 10%, rgba(114, 77, 41, 0.22), transparent 27rem),
                radial-gradient(circle at 88% 28%, rgba(41, 99, 103, 0.16), transparent 23rem),
                linear-gradient(180deg, #d8bd8a 0%, #cda675 48%, #b77f55 100%);
            color: #24180d;
        }
        .foundation-era-expanded {
            position: relative;
            z-index: 2;
        }
        .foundation-era-shell {
            max-width: 65%;
            margin: 0;
        }
        .foundation-era-lede {
            max-width: 780px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .foundation-era-phase {
            margin: 3rem 0 1.35rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(70, 42, 20, 0.28);
        }
        .foundation-era-phase h3 {
            font-family: Cinzel, serif;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 700;
            margin-bottom: 0.35rem;
            color: #2c1b0d;
        }
        .foundation-events {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }
        .foundation-event {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.1rem;
            border: 1px solid rgba(83, 50, 23, 0.22);
            border-radius: 8px;
            background: rgba(255, 244, 210, 0.75);
            box-shadow: 0 14px 36px rgba(75, 42, 18, 0.10);
            scroll-margin-top: 20vh;
        }
        .foundation-event.is-highlight {
            border-color: rgba(57, 35, 20, 0.64);
            background: rgba(74, 36, 20, 0.92);
            color: #ffffff;
            box-shadow: 0 18px 44px rgba(64, 31, 14, 0.20);
        }
        .foundation-event-date {
            font-family: Cinzel, serif;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: #7a2f17;
        }
        .foundation-event.is-highlight .foundation-event-date {
            color: #ffe8a0;
        }
        .foundation-event-phase-label {
            margin-bottom: 0.25rem;
            color: rgba(58, 34, 16, 0.64);
            font-family: Cinzel, serif;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .foundation-event.is-highlight .foundation-event-phase-label {
            color: rgba(255, 232, 190, 0.90);
        }
        .foundation-event-title {
            font-family: Georgia, serif;
            font-size: 1.22rem;
            font-weight: bold;
            font-style: normal;
            padding-bottom: 0.4rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(83, 50, 23, 0.25);
        }
        .foundation-event.is-highlight .foundation-event-title {
            border-bottom-color: rgba(255, 232, 190, 0.35);
        }
        .foundation-event-copy {
            font-size: 1rem;
            line-height: 1.65;
            opacity: 0.92;
        }
        .foundation-event-media {
            float: right;
            position: relative;
            z-index: 1;
            margin: 0 0 1rem 1.25rem;
            width: 200px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(90, 54, 26, 0.44);
            border-radius: 8px;
            background: rgba(255, 244, 210, 0.50);
            color: rgba(58, 34, 16, 0.72);
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 1rem;
        }
        .foundation-event.is-highlight .foundation-event-media {
            border-color: rgba(255, 223, 164, 0.46);
            background: rgba(255, 223, 164, 0.10);
            color: rgba(255, 244, 220, 0.78);
        }

        .golden-age-expanded {
            position: relative;
            z-index: 2;
        }
        body[data-era="era2"] {
            background:
                radial-gradient(circle at 18% 8%, rgba(244, 201, 93, 0.34), transparent 28rem),
                radial-gradient(circle at 82% 22%, rgba(255, 232, 160, 0.18), transparent 24rem),
                linear-gradient(180deg, #7b5a16 0%, #604712 48%, #3b2b0c 100%);
        }
        .golden-era-content-row {
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
        }
        .golden-era-content-row .golden-age-shell {
            flex: 0 0 65%;
            max-width: 65%;
            margin: 0;
        }
        .golden-detail-column {
            flex: 1 1 0;
            min-width: 0;
            position: relative;
        }
        .golden-age-shell {
            max-width: 65%;
            margin: 0;
        }
        .golden-age-lede {
            max-width: 760px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .golden-age-phase {
            margin: 3rem 0 1.35rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(247, 250, 252, 0.24);
        }
        .golden-age-phase h3 {
            font-family: Cinzel, serif;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 700;
            margin-bottom: 0.35rem;
        }
        .golden-age-events {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }
        .golden-event {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.1rem;
            border: 1px solid rgba(247, 250, 252, 0.18);
            border-radius: 8px;
            background: rgba(39, 28, 8, 0.46);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
            scroll-margin-top: 20vh;
        }
        .golden-event.is-highlight {
            border-color: rgba(255, 224, 138, 0.95);
            background: rgba(116, 82, 14, 0.66);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
        }
        .golden-event-date {
            font-family: Cinzel, serif;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: #ffe08a;
        }
        .golden-event-phase-label {
            margin-bottom: 0.25rem;
            color: rgba(255, 241, 199, 0.65);
            font-family: Cinzel, serif;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .golden-event-title {
            font-family: Georgia, serif;
            font-size: 1.22rem;
            font-weight: bold;
            font-style: normal;
            padding-bottom: 0.4rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(247, 250, 252, 0.22);
        }
        .golden-event-copy {
            font-size: 1rem;
            line-height: 1.65;
            opacity: 0.92;
        }
        .golden-event-media {
            float: right;
            position: relative;
            z-index: 1;
            margin: 0 0 1rem 1.25rem;
            width: 200px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(247, 250, 252, 0.38);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
                repeating-linear-gradient(45deg, rgba(212, 184, 134, 0.18) 0 1px, transparent 1px 14px);
            color: rgba(247, 250, 252, 0.72);
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 1rem;
        }
        .mongol-siege-expanded {
            position: relative;
            z-index: 2;
        }
        body[data-era="era3"] {
            background:
                radial-gradient(circle at 20% 12%, rgba(176, 43, 25, 0.38), transparent 28rem),
                radial-gradient(circle at 78% 22%, rgba(234, 112, 54, 0.16), transparent 22rem),
                linear-gradient(180deg, #4a0e0e 0%, #2f1110 48%, #151111 100%);
        }
        .mongol-siege-shell {
            max-width: 65%;
            margin: 0;
        }
        .mongol-siege-lede {
            max-width: 800px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .mongol-siege-phase {
            margin: 3rem 0 1.35rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(255, 181, 123, 0.25);
        }
        .mongol-siege-phase h3 {
            font-family: Cinzel, serif;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 700;
            margin-bottom: 0.35rem;
            color: #ffd2ad;
        }
        .mongol-siege-events {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }
        .mongol-event {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.1rem;
            border: 1px solid rgba(255, 226, 199, 0.16);
            border-radius: 8px;
            background: rgba(15, 13, 12, 0.62);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
            scroll-margin-top: 20vh;
        }
        .mongol-event.is-highlight {
            border-color: rgba(255, 138, 76, 0.94);
            background: rgba(88, 24, 17, 0.78);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
        }
        .mongol-event-date {
            font-family: Cinzel, serif;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: #ffb47c;
        }
        .mongol-event-title {
            font-family: Georgia, serif;
            font-size: 1.22rem;
            font-weight: bold;
            font-style: normal;
            padding-bottom: 0.4rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255, 226, 199, 0.2);
        }
        .mongol-event-copy {
            font-size: 1rem;
            line-height: 1.65;
            opacity: 0.92;
        }
        .mongol-event-media {
            float: right;
            position: relative;
            z-index: 1;
            margin: 0 0 1rem 1.25rem;
            width: 200px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(255, 181, 123, 0.42);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(255, 138, 76, 0.13), rgba(255, 255, 255, 0.02)),
                repeating-linear-gradient(45deg, rgba(255, 138, 76, 0.13) 0 1px, transparent 1px 14px);
            color: rgba(255, 226, 199, 0.72);
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 1rem;
        }
        .mongol-event.is-highlight .mongol-event-media {
            border-color: rgba(255, 195, 145, 0.56);
            background: rgba(255, 138, 76, 0.12);
            color: rgba(255, 235, 218, 0.82);
        }
        .stagnation-expanded {
            position: relative;
            z-index: 2;
        }
        body[data-era="era4"] {
            background:
                linear-gradient(135deg, rgba(87, 211, 194, 0.08) 0 1px, transparent 1px 20px),
                radial-gradient(circle at 18% 10%, rgba(87, 211, 194, 0.18), transparent 26rem),
                radial-gradient(circle at 82% 24%, rgba(180, 116, 66, 0.14), transparent 24rem),
                linear-gradient(180deg, #303434 0%, #202324 48%, #131516 100%);
            color: #edf4f2;
        }
        .stagnation-shell {
            max-width: 65%;
            margin: 0;
        }
        .stagnation-lede {
            max-width: 820px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .stagnation-phase {
            margin: 3rem 0 1.35rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(125, 218, 205, 0.22);
        }
        .stagnation-phase h3 {
            font-family: Cinzel, serif;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 700;
            margin-bottom: 0.35rem;
            color: #bff4ec;
        }
        .stagnation-events {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }
        .stagnation-event {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.1rem;
            border: 1px solid rgba(199, 218, 214, 0.16);
            border-radius: 8px;
            background: rgba(19, 21, 22, 0.66);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
            scroll-margin-top: 20vh;
        }
        .stagnation-event.is-highlight {
            border-color: rgba(87, 211, 194, 0.88);
            background: rgba(18, 58, 58, 0.76);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
        }
        .stagnation-event-date {
            font-family: Cinzel, serif;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: #7de0d3;
        }
        .stagnation-event-title {
            font-family: Georgia, serif;
            font-size: 1.22rem;
            font-weight: bold;
            font-style: normal;
            padding-bottom: 0.4rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(199, 218, 214, 0.2);
        }
        .stagnation-event-copy {
            font-size: 1rem;
            line-height: 1.65;
            opacity: 0.92;
        }
        .stagnation-event-media {
            float: right;
            position: relative;
            z-index: 1;
            margin: 0 0 1rem 1.25rem;
            width: 200px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(125, 218, 205, 0.42);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(87, 211, 194, 0.12), rgba(180, 116, 66, 0.05)),
                repeating-linear-gradient(45deg, rgba(87, 211, 194, 0.11) 0 1px, transparent 1px 14px);
            color: rgba(229, 245, 241, 0.72);
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 1rem;
        }
        .stagnation-event.is-highlight .stagnation-event-media {
            border-color: rgba(166, 241, 230, 0.58);
            background: rgba(87, 211, 194, 0.12);
            color: rgba(239, 255, 251, 0.84);
        }
        body[data-era="era5"] {
            background:
                linear-gradient(135deg, rgba(220, 180, 110, 0.12) 0 1px, transparent 1px 22px),
                radial-gradient(circle at 14% 8%, rgba(220, 180, 80, 0.22), transparent 28rem),
                radial-gradient(circle at 84% 28%, rgba(160, 100, 40, 0.14), transparent 22rem),
                linear-gradient(180deg, #a06830 0%, #8b5a2b 48%, #5c3a1a 100%);
            color: #f0e4d0;
        }
        body[data-era="era6"] {
            background:
                radial-gradient(circle at 20% 12%, rgba(56, 189, 248, 0.08), transparent 28rem),
                radial-gradient(circle at 80% 24%, rgba(139, 211, 221, 0.06), transparent 22rem),
                linear-gradient(180deg, #243040 0%, #1a202c 48%, #0e1318 100%);
            color: #edf7fa;
        }
        .ottoman-expanded {
            position: relative;
            z-index: 2;
        }
        .ottoman-shell {
            max-width: 65%;
            margin: 0;
        }
        .ottoman-lede {
            max-width: 820px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .ottoman-phase {
            margin: 3rem 0 1.35rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(246, 224, 181, 0.34);
        }
        .ottoman-phase h3 {
            font-family: Cinzel, serif;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 700;
            margin-bottom: 0.35rem;
            color: #ffe2aa;
        }
        .ottoman-events {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }
        .ottoman-event {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.1rem;
            border: 1px solid rgba(82, 48, 22, 0.24);
            border-radius: 8px;
            background: rgba(244, 229, 197, 0.92);
            color: #24170d;
            box-shadow: 0 16px 38px rgba(45, 24, 8, 0.24);
            scroll-margin-top: 20vh;
        }
        .ottoman-event.is-highlight {
            border-color: rgba(225, 184, 94, 0.88);
            background: rgba(69, 30, 36, 0.94);
            color: #fff6df;
            box-shadow: 0 20px 48px rgba(38, 15, 12, 0.38);
        }
        .ottoman-event-date {
            font-family: Cinzel, serif;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: #173f54;
        }
        .ottoman-event.is-highlight .ottoman-event-date {
            color: #f0c56f;
        }
        .ottoman-event-title {
            font-family: Georgia, serif;
            font-size: 1.22rem;
            font-weight: bold;
            font-style: normal;
            padding-bottom: 0.4rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(82, 48, 22, 0.18);
        }
        .ottoman-event.is-highlight .ottoman-event-title {
            border-bottom-color: rgba(240, 197, 111, 0.34);
        }
        .ottoman-event-copy {
            font-size: 1rem;
            line-height: 1.65;
            opacity: 0.92;
        }
        .ottoman-event-media {
            float: right;
            position: relative;
            z-index: 1;
            margin: 0 0 1rem 1.25rem;
            width: 200px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(23, 63, 84, 0.42);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(23, 63, 84, 0.08), rgba(165, 105, 45, 0.08)),
                repeating-linear-gradient(45deg, rgba(23, 63, 84, 0.08) 0 1px, transparent 1px 14px);
            color: rgba(36, 23, 13, 0.68);
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 1rem;
        }
        .ottoman-event.is-highlight .ottoman-event-media {
            border-color: rgba(240, 197, 111, 0.58);
            background:
                linear-gradient(135deg, rgba(240, 197, 111, 0.12), rgba(255, 255, 255, 0.04)),
                repeating-linear-gradient(45deg, rgba(240, 197, 111, 0.12) 0 1px, transparent 1px 14px);
            color: rgba(255, 246, 223, 0.82);
        }
        .modern-expanded {
            position: relative;
            z-index: 2;
        }
        .modern-shell {
            max-width: 65%;
            margin: 0;
        }
        .modern-lede {
            max-width: 820px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .modern-phase {
            margin: 3rem 0 1.35rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(139, 211, 221, 0.28);
        }
        .modern-phase h3 {
            font-family: Cinzel, serif;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 700;
            margin-bottom: 0.35rem;
            color: #a9e7ef;
        }
        .modern-events {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }
        .modern-event {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.1rem;
            border: 1px solid rgba(139, 211, 221, 0.22);
            border-radius: 8px;
            background: rgba(18, 48, 58, 0.90);
            color: #dff0f4;
            box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
            scroll-margin-top: 20vh;
        }
        .modern-event.is-highlight {
            border-color: rgba(249, 115, 22, 0.82);
            background: rgba(58, 24, 10, 0.96);
            color: #fff7ed;
            box-shadow: 0 20px 52px rgba(0, 0, 0, 0.46);
        }
        .modern-event-date {
            font-family: Cinzel, serif;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: #7dcfdb;
        }
        .modern-event.is-highlight .modern-event-date {
            color: #fca96e;
        }
        .modern-event-title {
            font-family: Georgia, serif;
            font-size: 1.22rem;
            font-weight: bold;
            font-style: normal;
            padding-bottom: 0.4rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(139, 211, 221, 0.18);
        }
        .modern-event.is-highlight .modern-event-title {
            border-bottom-color: rgba(252, 169, 110, 0.34);
        }
        .modern-event-copy {
            font-size: 1rem;
            line-height: 1.65;
            opacity: 0.92;
        }
        .modern-event-media {
            float: right;
            position: relative;
            z-index: 1;
            margin: 0 0 1rem 1.25rem;
            width: 200px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(139, 211, 221, 0.38);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(139, 211, 221, 0.10), rgba(56, 189, 248, 0.04)),
                repeating-linear-gradient(45deg, rgba(139, 211, 221, 0.08) 0 1px, transparent 1px 14px);
            color: rgba(223, 240, 244, 0.72);
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 1rem;
        }
        .modern-event.is-highlight .modern-event-media {
            border-color: rgba(252, 169, 110, 0.52);
            background:
                linear-gradient(135deg, rgba(252, 169, 110, 0.14), rgba(255, 255, 255, 0.03)),
                repeating-linear-gradient(45deg, rgba(252, 169, 110, 0.10) 0 1px, transparent 1px 14px);
            color: rgba(255, 247, 237, 0.80);
        }
        .protest-expanded {
            position: relative;
            z-index: 2;
        }
        body[data-era="era7"] {
            background:
                radial-gradient(ellipse at 50% -5%, rgba(255, 245, 160, 0.70), transparent 52%),
                radial-gradient(circle at 12% 25%, rgba(255, 175, 50, 0.50), transparent 44%),
                radial-gradient(circle at 88% 18%, rgba(255, 210, 80, 0.45), transparent 42%),
                radial-gradient(circle at 50% 98%, rgba(220, 130, 20, 0.38), transparent 42%),
                linear-gradient(180deg, #f5cf50 0%, #e8a81e 50%, #d49010 100%);
            color: #1e0c00;
        }
        .protest-shell {
            max-width: 65%;
            margin: 0;
        }
        .protest-lede {
            max-width: 820px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .protest-phase {
            margin: 3rem 0 1.35rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(140, 65, 5, 0.30);
        }
        .protest-phase h3 {
            font-family: Cinzel, serif;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 700;
            margin-bottom: 0.35rem;
            color: #6b2e00;
        }
        .protest-events {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }
        .protest-event {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.1rem;
            border: 1px solid rgba(160, 80, 10, 0.26);
            border-radius: 8px;
            background: rgba(255, 245, 200, 0.88);
            color: #1e0c00;
            box-shadow: 0 14px 36px rgba(140, 65, 0, 0.14);
            scroll-margin-top: 20vh;
        }
        .protest-event.is-highlight {
            border-color: rgba(100, 165, 210, 0.55);
            background: rgba(195, 228, 248, 0.94);
            color: #0e1e2a;
            box-shadow: 0 18px 44px rgba(30, 80, 130, 0.18);
        }
        .protest-event-date {
            font-family: Cinzel, serif;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: #8b3a00;
        }
        .protest-event.is-highlight .protest-event-date {
            color: #1a5c8a;
        }
        .foundation-event-date,
        .golden-event-date,
        .mongol-event-date,
        .stagnation-event-date,
        .ottoman-event-date,
        .modern-event-date,
        .protest-event-date {
            display: block;
            margin-bottom: 0.28rem;
        }
        .protest-event-title {
            font-family: Georgia, serif;
            font-size: 1.22rem;
            font-weight: bold;
            font-style: normal;
            padding-bottom: 0.4rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(140, 65, 5, 0.22);
        }
        .protest-event.is-highlight .protest-event-title {
            border-bottom-color: rgba(30, 90, 140, 0.22);
        }
        .protest-event-copy {
            font-size: 1rem;
            line-height: 1.65;
            opacity: 0.92;
        }
        .protest-event-media {
            float: right;
            position: relative;
            z-index: 1;
            margin: 0 0 1rem 1.25rem;
            width: 200px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(160, 80, 10, 0.40);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(240, 180, 60, 0.20), rgba(255, 230, 130, 0.10)),
                repeating-linear-gradient(45deg, rgba(180, 100, 20, 0.12) 0 1px, transparent 1px 14px);
            color: rgba(100, 45, 0, 0.72);
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 1rem;
        }
        .protest-event.is-highlight .protest-event-media {
            border-color: rgba(30, 100, 160, 0.40);
            background:
                linear-gradient(135deg, rgba(100, 175, 220, 0.18), rgba(160, 215, 245, 0.08)),
                repeating-linear-gradient(45deg, rgba(30, 100, 160, 0.10) 0 1px, transparent 1px 14px);
            color: rgba(20, 70, 110, 0.72);
        }
        .timeline-card-image {
            overflow: hidden;
            align-items: stretch;
            justify-content: flex-start;
            flex-direction: column;
            padding: 0;
            border-style: solid;
            background: rgba(20, 14, 8, 0.18);
            text-transform: none;
            letter-spacing: 0;
        }
        .timeline-card-image a {
            display: block;
            width: 100%;
            aspect-ratio: 5 / 3;
            min-height: 128px;
            background: rgba(0, 0, 0, 0.18);
        }
        .timeline-card-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 180ms ease, opacity 180ms ease;
        }
        .timeline-card-image a:hover img {
            transform: scale(1.035);
            opacity: 0.94;
        }
        .timeline-card-image-caption {
            padding: 0.45rem 0.55rem 0.55rem;
            font-size: 0.72rem;
            line-height: 1.25;
            font-style: italic;
            color: rgba(255, 244, 220, 0.78);
            background: rgba(24, 13, 7, 0.28);
        }
        @media (max-width: 768px) {
            .foundation-era-content-row,
            .golden-era-content-row,
            .mongol-siege-content-row,
            .stagnation-content-row,
            .ottoman-content-row,
            .modern-content-row {
                display: block;
            }
            .foundation-era-content-row .foundation-era-shell,
            .golden-era-content-row .golden-age-shell,
            .mongol-siege-content-row .mongol-siege-shell,
            .stagnation-content-row .stagnation-shell,
            .ottoman-content-row .ottoman-shell,
            .modern-content-row .modern-shell {
                max-width: none;
            }
            .foundation-detail-column,
            .golden-detail-column,
            .timeline-detail-column {
                display: grid;
                gap: 1rem;
                height: auto !important;
                margin-top: 1.5rem;
            }
            .detail-card-wrapper {
                position: static !important;
            }
            .detail-card-line {
                display: none;
            }
            .golden-age-shell {
                margin-left: 0;
            }
            .foundation-era-shell {
                margin-left: 0;
            }
            .mongol-siege-shell {
                margin-left: 0;
            }
            .stagnation-shell {
                margin-left: 0;
            }
            .ottoman-shell {
                margin-left: 0;
            }
            .modern-shell {
                margin-left: 0;
            }
            .protest-shell {
                margin-left: 0;
            }
            .timeline-container .pl-16 {
                padding-left: 0 !important;
            }
            .foundation-event,
            .golden-event,
            .mongol-event,
            .stagnation-event,
            .ottoman-event,
            .modern-event,
            .protest-event {
                grid-template-columns: 1fr;
            }
            .foundation-event > div,
            .golden-event > div,
            .mongol-event > div,
            .stagnation-event > div,
            .ottoman-event > div,
            .modern-event > div,
            .protest-event > div {
                flex-direction: column;
            }
            .foundation-event-media,
            .golden-event-media,
            .mongol-event-media,
            .stagnation-event-media,
            .ottoman-event-media,
            .modern-event-media,
            .protest-event-media {
                width: 100%;
                flex-basis: auto;
            }
        }

        #timeline-connectors {
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            pointer-events: none;
            z-index: 3;
            overflow: visible;
        }
        .timeline-event-line {
            fill: none;
            stroke: rgba(255, 226, 139, 0.3);
            stroke-width: 1.1;
        }
        .timeline-event-line.is-foundation {
            stroke: rgba(122, 55, 25, 0.34);
        }
        .timeline-event-line.is-golden {
            stroke: rgba(255, 224, 138, 0.44);
        }
        .timeline-event-line.is-golden.is-highlight {
            stroke: rgba(255, 224, 138, 0.82);
        }
        .timeline-event-line.is-highlight {
            stroke: rgba(255, 224, 115, 0.72);
            stroke-width: 1.8;
        }
        .timeline-event-line.is-foundation.is-highlight {
            stroke: rgba(128, 47, 20, 0.72);
        }
        .timeline-event-line.is-mongol {
            stroke: rgba(255, 138, 76, 0.44);
        }
        .timeline-event-line.is-mongol.is-highlight {
            stroke: rgba(255, 138, 76, 0.78);
        }
        .timeline-event-line.is-stagnation {
            stroke: rgba(87, 211, 194, 0.42);
        }
        .timeline-event-line.is-stagnation.is-highlight {
            stroke: rgba(87, 211, 194, 0.82);
        }
        .timeline-event-line.is-ottoman {
            stroke: rgba(23, 63, 84, 0.42);
        }
        .timeline-event-line.is-ottoman.is-highlight {
            stroke: rgba(240, 197, 111, 0.84);
        }
        .timeline-event-line.is-modern {
            stroke: rgba(139, 211, 221, 0.42);
        }
        .timeline-event-line.is-modern.is-highlight {
            stroke: rgba(249, 115, 22, 0.78);
        }
        .timeline-event-line.is-protest {
            stroke: rgba(255, 180, 60, 0.42);
        }
        .timeline-event-line.is-protest.is-highlight {
            stroke: rgba(255, 195, 80, 0.84);
        }
        .detail-card-line {
            stroke-width: 2.5;
        }

        #entity-bar::after,
        #ruler-bar::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 6;
            background-image: repeating-linear-gradient(
                135deg,
                rgba(0, 0, 0, 0.07) 0px,
                rgba(0, 0, 0, 0.07) 1px,
                transparent 1px,
                transparent 7px
            );
        }

        /* ── Detail Cards ─────────────────────────────────────── */
        .foundation-era-content-row {
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
        }
        .mongol-siege-content-row,
        .stagnation-content-row,
        .ottoman-content-row,
        .modern-content-row {
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
        }
        .foundation-era-content-row .foundation-era-shell {
            flex: 0 0 65%;
            max-width: 65%;
        }
        .mongol-siege-content-row .mongol-siege-shell,
        .stagnation-content-row .stagnation-shell,
        .ottoman-content-row .ottoman-shell,
        .modern-content-row .modern-shell {
            flex: 0 0 65%;
            max-width: 65%;
            margin: 0;
        }
        .foundation-detail-column {
            flex: 1 1 0;
            min-width: 0;
            position: relative;
        }
        .timeline-detail-column {
            flex: 1 1 0;
            min-width: 0;
            position: relative;
        }
        .detail-card-wrapper {
            position: absolute;
            left: 0;
            right: 0;
        }
        .detail-card {
            border: 1px solid rgba(57, 35, 20, 0.64);
            border-radius: 34px;
            background: rgba(74, 36, 20, 0.92);
            color: #ffffff;
            cursor: pointer;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            box-shadow:
                0 0 0 1px rgba(255, 232, 190, 0.14),
                0 0 28px rgba(255, 232, 190, 0.26),
                0 18px 44px rgba(64, 31, 14, 0.22);
        }
        .detail-card:hover {
            transform: translateY(-3px);
            box-shadow:
                0 0 0 1px rgba(255, 232, 190, 0.22),
                0 0 38px rgba(255, 232, 190, 0.34),
                0 22px 52px rgba(64, 31, 14, 0.30);
        }
        .detail-card-img {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 33px 33px 0 0;
            background: rgba(255, 223, 164, 0.10);
        }
        .detail-card-img img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .detail-card-body {
            padding: 1rem 1.1rem 1.1rem;
            border-top: 1px solid rgba(255, 232, 190, 0.35);
        }
        .detail-card-eyebrow {
            font-family: Arial, sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            text-decoration: none;
            margin-bottom: 0.3rem;
        }
        .detail-card-title {
            font-family: Georgia, serif;
            font-size: 1.4rem;
            font-weight: bold;
            font-style: normal;
            color: #ffffff;
            line-height: 1.35;
        }
        .detail-card-wrapper[data-event-class="golden-event"] .detail-card {
            border-color: rgba(255, 224, 138, 0.95);
            background: rgba(116, 82, 14, 0.66);
            box-shadow:
                0 0 0 1px rgba(255, 224, 138, 0.18),
                0 0 30px rgba(255, 224, 138, 0.32),
                0 18px 44px rgba(0, 0, 0, 0.20);
        }
        .detail-card-wrapper[data-event-class="golden-event"] .detail-card-body {
            border-top-color: rgba(247, 250, 252, 0.22);
        }
        .detail-card-wrapper[data-event-class="mongol-event"] .detail-card {
            border-color: rgba(255, 138, 76, 0.94);
            background: rgba(88, 24, 17, 0.78);
            box-shadow:
                0 0 0 1px rgba(255, 138, 76, 0.18),
                0 0 30px rgba(255, 138, 76, 0.32),
                0 20px 48px rgba(0, 0, 0, 0.34);
        }
        .detail-card-wrapper[data-event-class="mongol-event"] .detail-card-body {
            border-top-color: rgba(255, 226, 199, 0.2);
        }
        .detail-card-wrapper[data-event-class="stagnation-event"] .detail-card {
            border-color: rgba(87, 211, 194, 0.88);
            background: rgba(18, 58, 58, 0.76);
            box-shadow:
                0 0 0 1px rgba(87, 211, 194, 0.18),
                0 0 30px rgba(87, 211, 194, 0.30),
                0 20px 48px rgba(0, 0, 0, 0.34);
        }
        .detail-card-wrapper[data-event-class="stagnation-event"] .detail-card-body {
            border-top-color: rgba(199, 218, 214, 0.2);
        }
        .detail-card-wrapper[data-event-class="ottoman-event"] .detail-card {
            border-color: rgba(225, 184, 94, 0.88);
            background: rgba(69, 30, 36, 0.94);
            color: #fff6df;
            box-shadow:
                0 0 0 1px rgba(240, 197, 111, 0.18),
                0 0 30px rgba(240, 197, 111, 0.30),
                0 20px 48px rgba(38, 15, 12, 0.38);
        }
        .detail-card-wrapper[data-event-class="ottoman-event"] .detail-card-title {
            color: #fff6df;
        }
        .detail-card-wrapper[data-event-class="ottoman-event"] .detail-card-body {
            border-top-color: rgba(240, 197, 111, 0.34);
        }
        .detail-card-wrapper[data-event-class="modern-event"] .detail-card {
            border-color: rgba(249, 115, 22, 0.82);
            background: rgba(58, 24, 10, 0.96);
            color: #fff7ed;
            box-shadow:
                0 0 0 1px rgba(252, 169, 110, 0.18),
                0 0 30px rgba(249, 115, 22, 0.32),
                0 20px 52px rgba(0, 0, 0, 0.46);
        }
        .detail-card-wrapper[data-event-class="modern-event"] .detail-card-title {
            color: #fff7ed;
        }
        .detail-card-wrapper[data-event-class="modern-event"] .detail-card-body {
            border-top-color: rgba(252, 169, 110, 0.34);
        }
        .detail-card-wrapper[data-event-class="protest-event"] .detail-card {
            border-color: rgba(100, 165, 210, 0.55);
            background: rgba(195, 228, 248, 0.94);
            color: #0e1e2a;
            box-shadow:
                0 0 0 1px rgba(100, 165, 210, 0.18),
                0 0 30px rgba(100, 165, 210, 0.30),
                0 18px 44px rgba(30, 80, 130, 0.20);
        }
        .detail-card-wrapper[data-event-class="protest-event"] .detail-card-title {
            color: #0e1e2a;
        }
        .detail-card-wrapper[data-event-class="protest-event"] .detail-card-body {
            border-top-color: rgba(30, 90, 140, 0.22);
        }

        /* ── Detail Modal ─────────────────────────────────────── */
        @media (max-width: 768px) {
            .foundation-era-content-row,
            .golden-era-content-row,
            .mongol-siege-content-row,
            .stagnation-content-row,
            .ottoman-content-row,
            .modern-content-row {
                display: block;
            }
            .foundation-era-content-row .foundation-era-shell,
            .golden-era-content-row .golden-age-shell,
            .mongol-siege-content-row .mongol-siege-shell,
            .stagnation-content-row .stagnation-shell,
            .ottoman-content-row .ottoman-shell,
            .modern-content-row .modern-shell {
                max-width: none;
                margin-left: 0;
                margin-right: 0;
            }
            .foundation-detail-column,
            .golden-detail-column,
            .timeline-detail-column {
                display: grid;
                gap: 1rem;
                height: auto !important;
                margin-top: 1.5rem;
            }
            .detail-card-wrapper {
                position: static !important;
                left: auto;
                right: auto;
                top: auto !important;
            }
            .detail-card-line {
                display: none;
            }
        }

        .detail-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(20, 15, 10, 0.62);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 8000;
            align-items: center;
            justify-content: center;
        }
        .detail-modal-overlay.open {
            display: flex;
        }
        .detail-modal {
            background: rgba(74, 36, 20, 0.97);
            max-width: 720px;
            width: 92%;
            max-height: 82vh;
            overflow-y: auto;
            border-radius: 12px;
            padding: 2.5rem;
            position: relative;
            box-shadow: 0 20px 64px rgba(0,0,0,0.48);
            font-family: Lora, serif;
            color: #ffffff;
            border: 1px solid rgba(57, 35, 20, 0.64);
        }
        .detail-modal-close {
            position: absolute;
            top: 1.25rem;
            right: 1.5rem;
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0.45;
            line-height: 1;
            user-select: none;
        }
        .detail-modal-close:hover { opacity: 1; }
        .detail-modal-eyebrow-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.3rem;
        }
        .detail-modal-eyebrow {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            color: rgba(255, 232, 190, 0.75);
        }
        .detail-modal-date {
            font-family: Cinzel, serif;
            font-size: 0.85rem;
            font-weight: 700;
            color: #ffe8a0;
        }
        .detail-modal-title {
            font-family: Cinzel, serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 1.5rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid rgba(255, 232, 190, 0.35);
            line-height: 1.3;
        }
        .detail-modal-content p {
            margin-bottom: 1.1rem;
            font-size: 1rem;
            line-height: 1.78;
        }
        .detail-modal-content p:last-child { margin-bottom: 0; }
        .detail-modal-overlay[data-event-class="golden-event"] .detail-modal {
            border-color: rgba(255, 224, 138, 0.95);
            background: rgba(116, 82, 14, 0.96);
        }
        .detail-modal-overlay[data-event-class="golden-event"] .detail-modal-title {
            border-bottom-color: rgba(247, 250, 252, 0.22);
        }
        .detail-modal-overlay[data-event-class="golden-event"] .detail-modal-date {
            color: #ffe08a;
        }
        .detail-modal-overlay[data-event-class="mongol-event"] .detail-modal {
            border-color: rgba(255, 138, 76, 0.94);
            background: rgba(88, 24, 17, 0.96);
        }
        .detail-modal-overlay[data-event-class="mongol-event"] .detail-modal-title {
            border-bottom-color: rgba(255, 226, 199, 0.2);
        }
        .detail-modal-overlay[data-event-class="stagnation-event"] .detail-modal {
            border-color: rgba(87, 211, 194, 0.88);
            background: rgba(18, 58, 58, 0.96);
        }
        .detail-modal-overlay[data-event-class="stagnation-event"] .detail-modal-title {
            border-bottom-color: rgba(199, 218, 214, 0.2);
        }
        .detail-modal-overlay[data-event-class="ottoman-event"] .detail-modal {
            border-color: rgba(225, 184, 94, 0.88);
            background: rgba(69, 30, 36, 0.97);
            color: #fff6df;
        }
        .detail-modal-overlay[data-event-class="ottoman-event"] .detail-modal-title {
            color: #fff6df;
            border-bottom-color: rgba(240, 197, 111, 0.34);
        }
        .detail-modal-overlay[data-event-class="modern-event"] .detail-modal {
            border-color: rgba(249, 115, 22, 0.82);
            background: rgba(58, 24, 10, 0.98);
            color: #fff7ed;
        }
        .detail-modal-overlay[data-event-class="modern-event"] .detail-modal-title {
            color: #fff7ed;
            border-bottom-color: rgba(252, 169, 110, 0.34);
        }
        .detail-modal-overlay[data-event-class="protest-event"] .detail-modal {
            border-color: rgba(100, 165, 210, 0.55);
            background: rgba(195, 228, 248, 0.98);
            color: #0e1e2a;
        }
        .detail-modal-overlay[data-event-class="protest-event"] .detail-modal-title {
            color: #0e1e2a;
            border-bottom-color: rgba(30, 90, 140, 0.22);
        }
        .detail-modal-overlay[data-event-class="protest-event"] .detail-modal-eyebrow,
        .detail-modal-overlay[data-event-class="protest-event"] .detail-modal-date {
            color: #1a5c8a;
        }

        html[dir="rtl"] body {
            direction: rtl;
            font-family: 'Amiri', 'Lora', serif;
        }
        html[dir="rtl"] .font-cinzel,
        html[dir="rtl"] .foundation-era-phase h3,
        html[dir="rtl"] .golden-age-phase h3,
        html[dir="rtl"] .mongol-siege-phase h3,
        html[dir="rtl"] .stagnation-phase h3,
        html[dir="rtl"] .ottoman-phase h3,
        html[dir="rtl"] .modern-phase h3,
        html[dir="rtl"] .protest-phase h3,
        html[dir="rtl"] .detail-modal-title,
        html[dir="rtl"] .detail-card-title {
            font-family: 'Reem Kufi', 'Amiri', serif;
        }
        html[dir="rtl"] .foundation-event,
        html[dir="rtl"] .golden-event,
        html[dir="rtl"] .mongol-event,
        html[dir="rtl"] .stagnation-event,
        html[dir="rtl"] .ottoman-event,
        html[dir="rtl"] .modern-event,
        html[dir="rtl"] .protest-event,
        html[dir="rtl"] .detail-card-title,
        html[dir="rtl"] .detail-modal,
        html[dir="rtl"] .timeline-card-image-caption {
            text-align: right;
        }
        html[dir="rtl"] .foundation-era-lede,
        html[dir="rtl"] .golden-age-lede,
        html[dir="rtl"] .mongol-siege-lede,
        html[dir="rtl"] .stagnation-lede,
        html[dir="rtl"] .ottoman-lede,
        html[dir="rtl"] .modern-lede,
        html[dir="rtl"] .protest-lede,
        html[dir="rtl"] #hero {
            text-align: center;
        }
        html[dir="rtl"] .foundation-event-media,
        html[dir="rtl"] .golden-event-media,
        html[dir="rtl"] .mongol-event-media,
        html[dir="rtl"] .stagnation-event-media,
        html[dir="rtl"] .ottoman-event-media,
        html[dir="rtl"] .modern-event-media,
        html[dir="rtl"] .protest-event-media {
            float: left;
            margin: 0 1.25rem 1rem 0;
        }
        html[dir="rtl"] .detail-modal-close {
            right: auto;
            left: 1.5rem;
        }
        html[dir="rtl"] .detail-modal-eyebrow-row {
            flex-direction: row-reverse;
        }

        /* ============================================================
           Language Picker Overlay (intro)
           ============================================================ */
        body.lang-locked { overflow: hidden; }

        .lang-overlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                linear-gradient(135deg, rgba(108, 70, 37, 0.16) 0 1px, transparent 1px 18px),
                radial-gradient(circle at 16% 10%, rgba(114, 77, 41, 0.22), transparent 27rem),
                radial-gradient(circle at 88% 28%, rgba(41, 99, 103, 0.16), transparent 23rem),
                linear-gradient(180deg, #d8bd8a 0%, #cda675 48%, #b77f55 100%);
            color: #24180d;
        }

        .lang-coins {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 96px;
        }

        .lang-coin {
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            border: 0;
            padding: 0;
            margin: 0;
            width: 340px;
            height: 340px;
            position: relative;
            cursor: pointer;
            color: rgba(40, 20, 8, 0.78);
        }
        .lang-coin:focus { outline: none; }

        .lang-coin-face {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #c79a5d;
            outline: 1.5px solid #000;
            outline-offset: 10px;
        }

        .lang-coin-art {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            color: rgba(35, 18, 6, 0.85);
        }

        .lang-coin-label {
            position: relative;
            z-index: 1;
            font-family: 'Cinzel', serif;
            font-weight: 700;
            font-size: 38px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #1f0f04;
            line-height: 1;
            padding-left: 0.18em;
        }
        .lang-coin-ar .lang-coin-label {
            font-family: 'Reem Kufi', 'Amiri', serif;
            font-weight: 700;
            font-size: 60px;
            letter-spacing: 0;
            text-transform: none;
            padding: 0;
        }

        .lang-coin:hover .lang-coin-face,
        .lang-coin:focus-visible .lang-coin-face {
            outline: 5px solid #f5c842;
        }

        @media (max-width: 800px) {
            .lang-coins { gap: 40px; }
            .lang-coin { width: 240px; height: 240px; }
            .lang-coin-label { font-size: 28px; }
            .lang-coin-ar .lang-coin-label { font-size: 44px; }
        }
        @media (max-width: 520px) {
            .lang-coins { gap: 24px; flex-direction: column; }
            .lang-coin { width: 220px; height: 220px; }
        }

        /* ============================================================
           Mobile Timeline Redesign
           ============================================================ */
        @media (max-width: 768px) {
            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }

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

            body {
                margin: 0;
                background-color: #d8bd8a;
                color: #24180d;
            }

            body[data-era="era1"],
            body[data-era="era2"],
            body[data-era="era3"],
            body[data-era="era4"],
            body[data-era="era5"],
            body[data-era="era6"],
            body[data-era="era7"],
            .lang-overlay {
                background-image: none !important;
            }

            #timeline-sidebar,
            #timeline-connectors,
            #tl-tip,
            #tl-tip-line {
                display: none !important;
            }

            #fx-canvas,
            #round-city-canvas,
            #golden-age-canvas,
            #ottoman-canvas,
            #modern-canvas,
            #protest-canvas {
                opacity: 0.18;
            }

            #hero {
                min-height: 82vh;
                padding: 5rem 1rem 6rem;
                overflow: hidden;
            }

            #hero h1 {
                font-size: clamp(3.15rem, 15vw, 5rem) !important;
                line-height: 0.95;
                overflow-wrap: anywhere;
            }

            #hero p {
                font-size: clamp(1.2rem, 6vw, 1.65rem) !important;
                line-height: 1.25;
                max-width: 19rem;
            }

            .floating-scroll-arrow {
                width: 76px;
                height: 76px;
                bottom: 1.25rem;
            }

            .scroll-arrow-bounce {
                width: 72px !important;
                height: 72px !important;
            }

            main.timeline-container {
                width: 100%;
                max-width: none;
                margin: 0;
                padding: 2.25rem 1rem 3rem !important;
                overflow-x: hidden;
            }

            .foundation-era-expanded,
            .golden-age-expanded,
            .mongol-siege-expanded,
            .stagnation-expanded,
            .ottoman-expanded,
            .modern-expanded,
            .protest-expanded {
                margin-bottom: 4.5rem !important;
                padding: 1.1rem 0 0;
                overflow: visible;
            }

            .foundation-era-lede,
            .golden-age-lede,
            .mongol-siege-lede,
            .stagnation-lede,
            .ottoman-lede,
            .modern-lede,
            .protest-lede {
                margin: 0 0 1.5rem;
                max-width: none;
                text-align: left;
            }

            .foundation-era-lede h2,
            .golden-age-lede h2,
            .mongol-siege-lede h2,
            .stagnation-lede h2,
            .ottoman-lede h2,
            .modern-lede h2,
            .protest-lede h2 {
                font-size: clamp(2rem, 11vw, 3.25rem) !important;
                line-height: 1.02;
                margin-bottom: 0.55rem !important;
                overflow-wrap: anywhere;
            }

            .foundation-era-lede h3,
            .golden-age-lede h3,
            .mongol-siege-lede h3,
            .stagnation-lede h3,
            .ottoman-lede h3,
            .modern-lede h3,
            .protest-lede h3 {
                font-size: clamp(1rem, 5vw, 1.35rem) !important;
                line-height: 1.25;
                margin-bottom: 0 !important;
                letter-spacing: 0.08em;
            }

            .foundation-era-content-row,
            .golden-era-content-row,
            .mongol-siege-content-row,
            .stagnation-content-row,
            .ottoman-content-row,
            .modern-content-row {
                display: block !important;
            }

            .foundation-era-shell,
            .golden-age-shell,
            .mongol-siege-shell,
            .stagnation-shell,
            .ottoman-shell,
            .modern-shell,
            .protest-shell,
            .foundation-era-content-row .foundation-era-shell,
            .golden-era-content-row .golden-age-shell,
            .mongol-siege-content-row .mongol-siege-shell,
            .stagnation-content-row .stagnation-shell,
            .ottoman-content-row .ottoman-shell,
            .modern-content-row .modern-shell {
                width: 100%;
                max-width: none !important;
                margin: 0 !important;
                flex: none !important;
            }

            .foundation-detail-column,
            .golden-detail-column,
            .timeline-detail-column {
                display: none !important;
            }

            .foundation-era-phase,
            .golden-age-phase,
            .mongol-siege-phase,
            .stagnation-phase,
            .ottoman-phase,
            .modern-phase,
            .protest-phase {
                margin: 2rem 0 0.9rem;
                padding-bottom: 0.65rem;
            }

            .foundation-era-phase h3,
            .golden-age-phase h3,
            .mongol-siege-phase h3,
            .stagnation-phase h3,
            .ottoman-phase h3,
            .modern-phase h3,
            .protest-phase h3 {
                font-size: clamp(1.25rem, 7vw, 1.75rem);
                line-height: 1.15;
                overflow-wrap: anywhere;
            }

            .foundation-era-phase p,
            .golden-age-phase p,
            .mongol-siege-phase p,
            .stagnation-phase p,
            .ottoman-phase p,
            .modern-phase p,
            .protest-phase p {
                font-size: 0.98rem;
                line-height: 1.6;
            }

            .foundation-events,
            .golden-age-events,
            .mongol-siege-events,
            .stagnation-events,
            .ottoman-events,
            .modern-events,
            .protest-events {
                display: grid;
                gap: 0.95rem;
            }

            .foundation-event,
            .golden-event,
            .mongol-event,
            .stagnation-event,
            .ottoman-event,
            .modern-event,
            .protest-event {
                width: 100%;
                max-width: 100%;
                margin-top: 1rem !important;
                padding: 1rem;
                display: block;
                border-radius: 8px;
                scroll-margin-top: 1rem;
                overflow: hidden;
            }

            .foundation-event:first-child,
            .golden-event:first-child,
            .mongol-event:first-child,
            .stagnation-event:first-child,
            .ottoman-event:first-child,
            .modern-event:first-child,
            .protest-event:first-child {
                margin-top: 0 !important;
            }

            .foundation-event > div,
            .golden-event > div,
            .mongol-event > div,
            .stagnation-event > div,
            .ottoman-event > div,
            .modern-event > div,
            .protest-event > div {
                display: block;
                min-width: 0;
            }

            .foundation-event-date,
            .golden-event-date,
            .mongol-event-date,
            .stagnation-event-date,
            .ottoman-event-date,
            .modern-event-date,
            .protest-event-date {
                display: inline-block;
                margin-bottom: 0.55rem;
                font-size: 0.95rem;
                line-height: 1.2;
                overflow-wrap: anywhere;
            }

            .foundation-event-title,
            .golden-event-title,
            .mongol-event-title,
            .stagnation-event-title,
            .ottoman-event-title,
            .modern-event-title,
            .protest-event-title {
                font-size: 1.16rem;
                line-height: 1.25;
                overflow-wrap: anywhere;
            }

            .foundation-event-copy,
            .golden-event-copy,
            .mongol-event-copy,
            .stagnation-event-copy,
            .ottoman-event-copy,
            .modern-event-copy,
            .protest-event-copy {
                font-size: 0.98rem;
                line-height: 1.62;
                overflow-wrap: break-word;
            }

            .foundation-event-media,
            .golden-event-media,
            .mongol-event-media,
            .stagnation-event-media,
            .ottoman-event-media,
            .modern-event-media,
            .protest-event-media {
                float: none !important;
                clear: both;
                width: 100% !important;
                min-height: 0;
                margin: 0.2rem 0 0.9rem !important;
                padding: 0.75rem;
            }

            .timeline-card-image {
                padding: 0;
            }

            .timeline-card-image a {
                aspect-ratio: 4 / 3;
                min-height: 0;
            }

            .timeline-card-image-caption {
                font-size: 0.76rem;
                line-height: 1.35;
                overflow-wrap: break-word;
            }

            .mobile-related-details {
                display: grid;
                gap: 0.75rem;
                margin: 0.75rem 0 1rem;
            }

            .mobile-related-details .detail-card-wrapper {
                position: static !important;
                inset: auto !important;
                width: 100%;
            }

            .mobile-related-details .detail-card {
                border-radius: 8px;
                display: grid;
                grid-template-columns: minmax(86px, 32%) minmax(0, 1fr);
                min-height: 96px;
            }

            .mobile-related-details .detail-card:hover {
                transform: none;
            }

            .mobile-related-details .detail-card-img {
                height: 100%;
                min-height: 96px;
                padding-bottom: 0;
                border-radius: 7px 0 0 7px;
            }

            .mobile-related-details .detail-card-body {
                min-width: 0;
                padding: 0.85rem;
                border-top: 0;
                border-left: 1px solid rgba(255, 232, 190, 0.26);
            }

            .mobile-related-details .detail-card-title {
                font-size: 1rem;
                line-height: 1.25;
                overflow-wrap: anywhere;
            }

            .detail-modal-overlay.open {
                align-items: flex-end;
                padding: 0;
            }

            .detail-modal {
                width: 100%;
                max-width: none;
                max-height: 88vh;
                border-radius: 12px 12px 0 0;
                padding: 2.8rem 1rem 1.4rem;
            }

            .detail-modal-close {
                top: 0.9rem;
                right: 1rem;
                font-size: 1.75rem;
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .detail-modal-eyebrow-row {
                gap: 0.75rem;
                align-items: flex-start;
            }

            .detail-modal-title {
                font-size: 1.32rem;
                line-height: 1.25;
                margin-bottom: 1rem;
                overflow-wrap: anywhere;
            }

            .detail-modal-content p {
                font-size: 1rem;
                line-height: 1.68;
            }

            #lightbox {
                padding: 1rem;
            }

            #lightbox img {
                max-width: 96vw;
                max-height: 82vh;
                border-radius: 8px;
            }

            #lightbox-close {
                top: 0.75rem;
                right: 0.75rem;
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
            }

            .lang-overlay {
                padding: 1rem;
                overflow-y: auto;
            }

            .lang-coins {
                flex-direction: column;
                gap: 1rem;
                width: 100%;
            }

            .lang-coin {
                width: min(58vw, 210px);
                height: min(58vw, 210px);
            }

            .lang-coin-face {
                outline-offset: 6px;
            }

            .lang-coin-label {
                font-size: clamp(1.35rem, 7vw, 1.8rem);
                letter-spacing: 0.12em;
            }

            .lang-coin-ar .lang-coin-label {
                font-size: clamp(2rem, 11vw, 2.75rem);
            }

            footer {
                height: auto !important;
                min-height: 64px;
                flex-direction: column;
                align-items: flex-start !important;
                justify-content: center !important;
                gap: 0.25rem;
                padding: 0.85rem 1rem !important;
            }

            footer a {
                max-width: 100%;
                font-size: 0.98rem !important;
                line-height: 1.3;
                overflow-wrap: anywhere;
            }

            html[dir="rtl"] .foundation-era-lede,
            html[dir="rtl"] .golden-age-lede,
            html[dir="rtl"] .mongol-siege-lede,
            html[dir="rtl"] .stagnation-lede,
            html[dir="rtl"] .ottoman-lede,
            html[dir="rtl"] .modern-lede,
            html[dir="rtl"] .protest-lede {
                text-align: right;
            }

            html[dir="rtl"] .foundation-event-media,
            html[dir="rtl"] .golden-event-media,
            html[dir="rtl"] .mongol-event-media,
            html[dir="rtl"] .stagnation-event-media,
            html[dir="rtl"] .ottoman-event-media,
            html[dir="rtl"] .modern-event-media,
            html[dir="rtl"] .protest-event-media {
                float: none !important;
                margin: 0.2rem 0 0.9rem !important;
            }

            html[dir="rtl"] .mobile-related-details .detail-card {
                grid-template-columns: minmax(0, 1fr) minmax(86px, 32%);
            }

            html[dir="rtl"] .mobile-related-details .detail-card-img {
                border-radius: 0 7px 7px 0;
                grid-column: 2;
                grid-row: 1;
            }

            html[dir="rtl"] .mobile-related-details .detail-card-body {
                border-left: 0;
                border-right: 1px solid rgba(255, 232, 190, 0.26);
                grid-column: 1;
                grid-row: 1;
            }

            html[dir="rtl"] .detail-modal-close {
                right: auto;
                left: 1rem;
            }

            html[dir="rtl"] footer {
                align-items: flex-end !important;
                text-align: right;
            }
        }