.sirah-age-events {
    --sae-maroon: #6f3741;
    --sae-maroon-dark: #4b232b;
    --sae-wood: #5a3529;
    --sae-wood-light: #9a6a43;
    --sae-gold: #c08d49;
    --sae-gold-light: #e8c988;
    --sae-paper: #fbf6ec;
    --sae-paper-2: #f3e7d2;
    --sae-ink: #372822;
    --sae-muted: #7b685f;
    --sae-sand-progress: .22;
    --sae-age-position: 22%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow-anchor: none;
    padding: 42px 0 50px;
    background: radial-gradient(circle at 9% 12%, rgba(192,141,73,.10), transparent 25%),
        radial-gradient(circle at 92% 88%, rgba(111,55,65,.06), transparent 27%),
        linear-gradient(180deg, #fbf7ef 0%, #f5ede0 100%);
    box-sizing: border-box;
    width: 100%;
}

.sirah-age-events__container {
    position: relative;
    width: min(
        calc(100% - var(--sirah-layout-gutter, 36px)),
        var(--sirah-layout-width, 1240px)
    );
    max-width: var(--sirah-layout-width, 1240px);
    margin-inline: auto;
    padding-inline: 0 !important;
}

.sirah-age-events * {
    box-sizing: border-box;
}

.sirah-age-events *::before {
    box-sizing: border-box;
}

.sirah-age-events *::after {
    box-sizing: border-box;
}

.sirah-age-events__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .38;
    background: repeating-linear-gradient(45deg, rgba(105,69,47,.018) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(-45deg, rgba(192,141,73,.018) 0 1px, transparent 1px 24px),
        radial-gradient(circle at 20% 30%, rgba(105,69,47,.045) 0 1px, transparent 2px);
    background-size: auto, auto, 120px 120px;
}

.sirah-age-events__heading {
    max-width: 920px;
    margin: 0 auto 18px;
    text-align: center;
    margin-bottom: 24px;
}

.sirah-age-events__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    padding: 6px 12px;
    color: #9c6a30;
    background: rgba(255,250,241,.90);
    border: 1px solid rgba(192,141,73,.20);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.sirah-age-events__heading h2 {
    margin: 0 0 8px;
    color: var(--sae-ink);
    font-family: "Amiri", "Cairo", serif !important;
    font-size: clamp(31px, 3vw, 45px);
    line-height: 1.18;
    margin-bottom: 5px;
}

.sirah-age-events__heading h2 strong {
    color: var(--sae-maroon);
}

.sirah-age-events__heading p {
    margin: 0;
    color: var(--sae-muted);
    font-size: 13.5px;
    line-height: 1.7;
    max-width: 760px;
    margin-inline: auto;
}

.sirah-age-events__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 365px;
    gap: 22px;
    align-items: stretch;
    grid-template-areas: "results timepiece";
    direction: ltr;
}

.sirah-age-timepiece {
    position: relative;
    top: auto;
    overflow: hidden;
    padding: 14px;
    color: #fff5e8;
    background: radial-gradient(circle at 50% -8%, rgba(255,224,157,.20), transparent 34%),
        radial-gradient(circle at 12% 75%, rgba(215,164,91,.08), transparent 32%),
        linear-gradient(180deg, #75404a 0%, #5f3039 48%, #402028 100%);
    border: 1px solid rgba(234,204,157,.34);
    border-radius: 28px;
    box-shadow: 0 24px 56px rgba(64,31,38,.17),
        inset 0 1px 0 rgba(255,255,255,.07);
    grid-area: timepiece;
    direction: rtl;
    width: 100%;
    height: 540px;
    min-height: 540px;
    max-height: 540px;
    display: flex;
    flex-direction: column;
}

.sirah-age-timepiece::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(238,217,181,.13);
    border-radius: 20px;
    pointer-events: none;
    border-color: rgba(241,219,180,.18);
}

.sirah-age-timepiece__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1px 5px 9px;
    flex: 0 0 46px;
    min-height: 52px;
    flex-basis: 52px;
}

.sirah-age-timepiece__seal {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    color: #f7ddb0;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.15), transparent 34%),
        rgba(255,255,255,.075);
    border: 1px solid rgba(235,210,169,.18);
    border-radius: 11px;
    font-size: 12px;
    flex-basis: 39px;
    border-color: rgba(235,210,169,.25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.sirah-age-timepiece__top small {
    display: block;
    color: rgba(255,236,217,.68);
    font-size: 9.5px;
    font-weight: 700;
}

.sirah-age-timepiece__top strong {
    display: block;
    margin-top: 0;
    color: #fff9ef;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.1px;
}

.sirah-age-timepiece__stage {
    position: relative;
    min-height: 0;
    padding: 8px 8px 34px;
    background: radial-gradient(ellipse at 50% 44%, rgba(255,255,255,.84) 0%, rgba(255,252,241,.50) 32%, transparent 57%),
        repeating-linear-gradient(0deg, rgba(117,78,48,.018) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #fbf4e7 0%, #eee0c7 100%);
    border: 1px solid rgba(220,193,151,.48);
    border-radius: 20px;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.26),
        inset 0 0 34px rgba(99,63,39,.09),
        0 1px 0 rgba(255,255,255,.35);
    flex: 1 1 auto;
    height: auto;
    overflow: hidden;
    border-color: rgba(211,180,132,.58);
}

.sirah-age-timepiece__stage::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(192,141,73,.14);
    border-radius: 14px;
    pointer-events: none;
    border-color: rgba(182,126,60,.18);
}

.sirah-age-timepiece__ornament {
    position: absolute;
    left: 50%;
    z-index: 2;
    color: rgba(173,119,54,.38);
    font-size: 11px;
    transform: translateX(-50%);
}

.sirah-age-timepiece__ornament--top {
    top: 6px;
}

.sirah-age-timepiece__ornament--bottom {
    bottom: 30px;
}

.sirah-age-hourglass {
    position: absolute;
    width: 250px;
    height: 390px;
    margin: 0;
    filter: drop-shadow(0 18px 18px rgba(66,39,29,.18))
        drop-shadow(0 2px 1px rgba(255,255,255,.30));
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.86);
    transform-origin: center center;
}

.sirah-age-hourglass__cap {
    position: absolute;
    left: 50%;
    z-index: 8;
    width: 232px;
    height: 40px;
    transform: translateX(-50%);
    border: 3px solid #42271f;
    border-radius: 50% / 44%;
    background: radial-gradient(ellipse at 50% 17%, rgba(255,225,169,.28), transparent 35%),
        linear-gradient(180deg, #ad7a4c 0%, #795038 34%, #553226 72%, #2e1c18 100%);
    box-shadow: inset 0 0 0 3px rgba(220,174,99,.14),
        inset 0 8px 12px rgba(255,224,164,.08),
        0 5px 10px rgba(52,29,23,.22);
}

.sirah-age-hourglass__cap span {
    position: absolute;
    inset: 7px 25px;
    border: 1px solid rgba(229,188,119,.36);
    border-radius: 50%;
    border-color: rgba(238,199,132,.44);
}

.sirah-age-hourglass__cap--top {
    top: 0;
}

.sirah-age-hourglass__cap--bottom {
    bottom: 0;
}

.sirah-age-hourglass__frame {
    position: absolute;
    inset: 28px 18px;
}

.sirah-age-hourglass__post {
    position: absolute;
    top: 5px;
    bottom: 5px;
    z-index: 6;
    width: 25px;
    border: 2px solid #45291f;
    border-radius: 13px;
    background: linear-gradient(90deg,
            #2f1c18 0%,
            #694331 18%,
            #b27d4c 46%,
            #7b5138 66%,
            #39231c 100%);
    box-shadow: inset 2px 0 0 rgba(231,185,111,.13),
        inset -2px 0 0 rgba(41,24,20,.26),
        0 3px 7px rgba(55,31,24,.15);
    border-color: #40261f;
}

.sirah-age-hourglass__post--left {
    left: 4px;
}

.sirah-age-hourglass__post--right {
    right: 0;
    width: 32px;
}

.sirah-age-hourglass__glass {
    position: absolute;
    top: 22px;
    right: 50px;
    bottom: 22px;
    left: 42px;
    filter: drop-shadow(0 3px 2px rgba(78,49,35,.11))
        drop-shadow(0 0 7px rgba(255,255,255,.20));
}

.sirah-age-hourglass__bulb {
    position: absolute;
    left: 50%;
    width: 116px;
    height: 128px;
    overflow: hidden;
    transform: translateX(-50%);
    border: 2px solid rgba(87,57,42,.46);
    background: linear-gradient(100deg,
            rgba(255,255,255,.62) 0%,
            rgba(255,252,239,.14) 25%,
            rgba(255,255,255,.05) 55%,
            rgba(255,255,255,.44) 100%);
    box-shadow: inset 12px 0 18px rgba(255,255,255,.20),
        inset -8px 0 14px rgba(137,98,67,.04),
        inset 0 0 18px rgba(255,255,255,.34);
}

.sirah-age-hourglass__bulb--top {
    top: 0;
    clip-path: polygon(4% 0, 96% 0, 76% 76%, 57% 100%, 43% 100%, 24% 76%);
}

.sirah-age-hourglass__bulb--bottom {
    bottom: 0;
    clip-path: polygon(43% 0, 57% 0, 76% 24%, 96% 100%, 4% 100%, 24% 24%);
}

.sirah-age-hourglass__sand {
    position: absolute;
    right: 7px;
    left: 7px;
    background: radial-gradient(circle at 24% 32%, rgba(255,231,160,.52) 0 1px, transparent 1.5px),
        repeating-radial-gradient(circle at 30% 35%, #ddb35d 0 1px, #c9933a 1px 3px);
    filter: saturate(.95);
    box-shadow: inset 0 6px 7px rgba(255,223,140,.12);
}

.sirah-age-hourglass__sand--top {
    bottom: 0;
    height: calc((1 - var(--sae-sand-progress)) * 88%);
    clip-path: polygon(0 20%, 100% 20%, 71% 100%, 29% 100%);
    transition: height .28s ease;
}

.sirah-age-hourglass__sand--bottom {
    bottom: 0;
    height: calc(var(--sae-sand-progress) * 82% + 7%);
    clip-path: polygon(28% 0, 72% 0, 100% 76%, 0 76%);
    transition: height .28s ease;
}

.sirah-age-hourglass__neck {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 16px;
    height: 22px;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(89,59,43,.52);
    border-radius: 7px;
    background: rgba(255,255,255,.18);
}

.sirah-age-hourglass__stream {
    position: absolute;
    top: calc(50% - 4px);
    left: 50%;
    width: 3px;
    height: 112px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(221,177,91,.10), #deb25b 17%, #c88e35 84%, rgba(221,177,91,.06));
    box-shadow: 0 0 7px rgba(199,154,85,.36);
    animation: saeSandStream 1.35s ease-in-out infinite;
}

.sirah-age-hourglass__age {
    position: absolute;
    top: 50%;
    left: 46%;
    z-index: 12;
    min-width: 96px;
    padding: 8px 12px 9px;
    text-align: center;
    transform: translate(-50%, -50%);
    color: var(--sae-ink);
    background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.96), rgba(249,238,216,.94));
    border: 1px solid rgba(158,105,47,.34);
    border-radius: 17px;
    box-shadow: 0 7px 17px rgba(73,45,31,.12),
        inset 0 0 0 2px rgba(255,255,255,.45),
        0 0 0 3px rgba(190,139,70,.055);
    backdrop-filter: blur(3px);
}

.sirah-age-hourglass__age small {
    display: block;
    margin-bottom: 1px;
    color: #927058;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2px;
}

.sirah-age-hourglass__age strong {
    display: inline-block;
    color: var(--sae-maroon);
    font-family: "Amiri", serif;
    font-size: 39px;
    line-height: .95;
    text-shadow: 0 1px 0 rgba(255,255,255,.80);
}

.sirah-age-hourglass__age span {
    margin-inline-start: 3px;
    color: #785e50;
    font-size: 10px;
    font-weight: 700;
}

.sirah-age-hourglass__slider {
    position: absolute;
    top: 27px;
    right: -19px;
    z-index: 20;
    width: 82px;
    height: 284px;
}

.sirah-age-hourglass__slider-rail {
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 36px;
    width: 10px;
    border: 1px solid #5b3526;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg,
            rgba(255,233,182,.34) 0 1px,
            transparent 1px 19px),
        linear-gradient(90deg, #70452c, #d5ac62 47%, #805035);
    box-shadow: inset 0 0 0 2px rgba(66,37,26,.22),
        0 0 0 2px rgba(242,211,153,.10),
        0 2px 5px rgba(53,31,23,.12);
}

.sirah-age-hourglass__slider input[type="range"] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 266px;
    height: 38px;
    margin: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    appearance: none;
    -webkit-appearance: none;
    direction: ltr;
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    outline: none;
    cursor: ns-resize;
}

.sirah-age-hourglass__slider input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border: 0;
}

.sirah-age-hourglass__slider input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -12px;
    -webkit-appearance: none;
    appearance: none;
    border: 3px solid #68402b;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 27%, #fff0bb 0 15%, #e1b568 29%, #b47a38 63%, #754525 100%);
    box-shadow: 0 0 0 4px rgba(255,226,166,.26),
        0 6px 12px rgba(68,40,28,.25),
        inset 0 1px 0 rgba(255,255,255,.55);
}

.sirah-age-hourglass__slider input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border: 0;
}

.sirah-age-hourglass__slider input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: 3px solid #68402b;
    border-radius: 50%;
    background: #dbae5d;
    box-shadow: 0 0 0 4px rgba(255,226,166,.26),
        0 6px 12px rgba(68,40,28,.25);
}

.sirah-age-hourglass__slider-label {
    position: absolute;
    top: var(--sae-age-position);
    right: 54px;
    z-index: 4;
    display: grid;
    gap: 2px;
    min-width: 52px;
    padding: 5px 8px;
    transform: translateY(-50%);
    text-align: center;
    color: #75594c;
    background: rgba(255,248,233,.96);
    border: 1px solid rgba(177,126,62,.22);
    border-radius: 11px;
    box-shadow: 0 6px 14px rgba(70,42,29,.12),
        inset 0 1px 0 rgba(255,255,255,.75);
    pointer-events: none;
    transition: top .18s ease;
    border-color: rgba(166,111,48,.30);
}

.sirah-age-hourglass__slider-label span {
    font-family: "Amiri", serif;
    font-size: 10px;
    line-height: 1;
    opacity: .56;
}

.sirah-age-hourglass__slider-label b {
    color: var(--sae-maroon);
    font-family: "Amiri", serif;
    font-size: 20px;
    line-height: 1;
}

.sirah-age-timepiece__scale {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 0 7px;
    color: #806b60;
    right: 14px;
    left: 14px;
    bottom: 9px;
}

.sirah-age-timepiece__scale > span {
    display: grid;
    gap: 1px;
}

.sirah-age-timepiece__scale > span:last-child {
    text-align: left;
}

.sirah-age-timepiece__scale b {
    color: #6b4131;
    font-size: 9.5px;
}

.sirah-age-timepiece__scale small {
    font-size: 7.5px;
    font-weight: 700;
}

.sirah-age-timepiece__scale i {
    height: 1px;
    background: linear-gradient(90deg, rgba(192,141,73,.18), rgba(192,141,73,.55), rgba(192,141,73,.18));
}

.sirah-age-timepiece__footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 5px 6px 5px 9px;
    min-height: 42px;
    flex: 0 0 42px;
    color: rgba(255,243,224,.82);
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(238,213,172,.12);
    border-radius: 13px;
    overflow: hidden;
}

.sirah-age-timepiece__hint {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-inline: 2px;
    font-size: 8.7px;
    line-height: 1.35;
}

.sirah-age-timepiece__hint i {
    flex: 0 0 auto;
    color: var(--sae-gold-light);
    font-size: 9px;
}

.sirah-age-timepiece__hint span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sirah-age-direct {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
}

.sirah-age-direct > label {
    margin: 0;
    color: rgba(255,243,224,.74);
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.sirah-age-direct__field {
    display: grid;
    grid-template-columns: 54px 28px;
    align-items: center;
    overflow: hidden;
    height: 30px;
    border: 1px solid rgba(238,213,172,.20);
    border-radius: 9px;
    background: rgba(255,250,240,.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.sirah-age-direct input {
    width: 54px;
    height: 100%;
    margin: 0;
    padding: 0 6px;
    color: var(--sae-maroon);
    background: transparent;
    border: 0;
    outline: 0;
    font-family: "Amiri", "Cairo", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.sirah-age-direct input::-webkit-inner-spin-button,
.sirah-age-direct input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.sirah-age-direct input:focus {
    background: #fffaf0;
    box-shadow: inset 0 0 0 2px rgba(192,141,73,.13);
}

.sirah-age-direct button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    color: #fff7e8;
    background: linear-gradient(145deg, #b37a36, #8f5928);
    border: 0;
    border-inline-start: 1px solid rgba(111,55,65,.10);
    cursor: pointer;
    font-size: 8px;
    transition: filter .18s ease, transform .18s ease;
}

.sirah-age-direct button:hover,
.sirah-age-direct button:focus-visible {
    filter: brightness(1.08);
}

.sirah-age-direct button:active {
    transform: scale(.95);
}


.sirah-age-results {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,246,237,.97));
    border: 1px solid rgba(96,66,48,.12);
    border-radius: 27px;
    box-shadow: 0 18px 46px rgba(72,46,38,.09), inset 0 1px 0 rgba(255,255,255,.84);
    grid-area: results;
    direction: rtl;
    width: 100%;
    height: 540px;
    min-height: 540px;
    max-height: 540px;
    display: flex;
    flex-direction: column;
}

.sirah-age-results::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(192,141,73,.07);
    border-radius: 22px;
    pointer-events: none;
}

.sirah-age-results__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(96,66,48,.08);
    flex: 0 0 auto;
}

.sirah-age-results__headline {
    min-width: 0;
}

.sirah-age-results__kicker {
    display: inline-block;
    margin-bottom: 5px;
    color: #b17e3c;
    font-size: 11px;
    font-weight: 800;
}

.sirah-age-results__headline h3 {
    margin: 0 0 6px;
    color: var(--sae-ink);
    font-family: "Amiri", "Cairo", serif !important;
    font-size: clamp(25px, 2.25vw, 35px);
    line-height: 1.24;
    margin-bottom: 4px;
}

.sirah-age-results__headline h3 strong {
    color: var(--sae-maroon);
}

.sirah-age-results__headline p {
    margin: 0;
    color: var(--sae-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.sirah-age-results__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    flex-shrink: 0;
}

.sirah-age-results__stats span {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 118px;
    padding: 9px 11px;
    color: var(--sae-ink);
    background: linear-gradient(180deg, #fffdfa, #f4ead9);
    border: 1px solid rgba(192,141,73,.14);
    border-radius: 13px;
}

.sirah-age-results__stats i {
    color: var(--sae-maroon);
}

.sirah-age-results__stats b {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 10.5px;
}

.sirah-age-results__stats strong {
    color: var(--sae-maroon);
    font-size: 18px;
}

.sirah-age-subtitle {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    color: var(--sae-ink);
    font-size: 11.5px;
    font-weight: 800;
}

.sirah-age-subtitle span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sirah-age-subtitle i {
    color: var(--sae-maroon);
}

.sirah-age-persons-wrap {
    margin-bottom: 9px;
    flex: 0 0 auto;
    max-height: 98px;
    overflow: hidden;
}

.sirah-age-persons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 68px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(111,55,65,.28) transparent;
}

.sirah-age-person-card {
    flex: 0 1 205px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 7px;
    align-items: center;
    padding: 7px 8px;
    background: linear-gradient(180deg, #fffdf9, #f7efe0);
    border: 1px solid rgba(192,141,73,.13);
    border-radius: 12px;
}

.sirah-age-person-card__avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #fff3e0;
    background: linear-gradient(145deg, var(--sae-maroon), #8b4c59);
    border: 2px solid rgba(226,197,145,.48);
    border-radius: 50%;
    font-family: "Amiri", serif;
    font-size: 14px;
}

.sirah-age-person-card strong {
    display: block;
    overflow: hidden;
    color: var(--sae-ink);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sirah-age-person-card small {
    display: block;
    margin-top: 2px;
    color: var(--sae-muted);
    font-size: 8.5px;
}

.sirah-age-events-list {
    display: grid;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    padding-inline-end: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(111,55,65,.28) transparent;
}

.sirah-age-event-card {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr) 38px;
    gap: 11px;
    align-items: center;
    padding: 10px;
    background: linear-gradient(180deg, #fffdf8, #f7efe1);
    border: 1px solid rgba(192,141,73,.13);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(72,47,39,.06);
}

.sirah-age-event-card__media {
    width: 92px;
    height: 70px;
    overflow: hidden;
    display: block;
    border-radius: 10px;
    border: 1px solid rgba(96,66,48,.10);
    background: linear-gradient(180deg, #eadab9, #dfc18f);
}

.sirah-age-event-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sirah-age-event-card__media--empty {
    display: grid;
    place-items: center;
    color: #8e6031;
    background: linear-gradient(145deg, #ead7aa, #d9b777);
}

.sirah-age-event-card__placeholder {
    display: grid;
    justify-items: center;
    gap: 3px;
}

.sirah-age-event-card__placeholder-mark {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: #f8e7be;
    background: linear-gradient(180deg, #8b5b36, #5a3426);
    border-radius: 50%;
}

.sirah-age-event-card__placeholder small {
    font-size: 7px;
}

.sirah-age-event-card__content {
    min-width: 0;
}

.sirah-age-event-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 2px;
}

.sirah-age-event-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #896c62;
    font-size: 8px;
}

.sirah-age-event-card__meta i {
    color: var(--sae-maroon);
}

.sirah-age-event-card h4 {
    margin: 0 0 5px;
    color: var(--sae-ink);
    font-family: "Amiri", "Cairo", serif !important;
    font-size: clamp(15px, 1.15vw, 19px);
    line-height: 1.3;
    margin-bottom: 2px;
}

.sirah-age-event-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--sae-muted);
    font-size: 10px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sirah-age-event-card__link {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #fff !important;
    background: linear-gradient(180deg, var(--sae-maroon), var(--sae-maroon-dark));
    border-radius: 10px;
    text-decoration: none !important;
}

.sirah-age-loading {
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 15px;
    min-height: 72px;
    background: rgba(255,255,255,.52);
    border: 1px dashed rgba(192,141,73,.18);
}

.sirah-age-empty {
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 15px;
    min-height: 72px;
    padding: 16px;
    color: var(--sae-muted);
    background: rgba(255,255,255,.50);
    border: 1px dashed rgba(96,66,48,.13);
}

.sirah-age-loading--small {
    min-height: 54px;
}

.sirah-age-loading span {
    width: 9px;
    height: 9px;
    display: inline-block;
    margin: 0 3px;
    border-radius: 50%;
    background: var(--sae-gold);
    animation: saePulse .9s infinite ease-in-out;
}

.sirah-age-loading span:nth-child(2) {
    animation-delay: .12s;
}

.sirah-age-loading span:nth-child(3) {
    animation-delay: .24s;
}

.sirah-age-empty i {
    margin-bottom: 6px;
    color: var(--sae-maroon);
    font-size: 25px;
}

.sirah-age-empty strong {
    color: var(--sae-ink);
    font-size: 14px;
}

.sirah-age-empty span {
    margin-top: 3px;
    font-size: 11px;
}

.sirah-age-events-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sirah-age-events-list-wrap > .sirah-age-subtitle {
    flex: 0 0 auto;
}

.sirah-age-persons::-webkit-scrollbar {
    width: 6px;
}

.sirah-age-events-list::-webkit-scrollbar {
    width: 6px;
}

.sirah-age-persons::-webkit-scrollbar-thumb {
    background: rgba(111,55,65,.24);
    border-radius: 999px;
}

.sirah-age-events-list::-webkit-scrollbar-thumb {
    background: rgba(111,55,65,.24);
    border-radius: 999px;
}

.sirah-age-hourglass__cap::after {
    content: "";
    position: absolute;
    right: 34px;
    left: 34px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(231,190,118,.58), transparent);
}

.sirah-age-hourglass__bulb::after {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 18%;
    left: 17%;
    width: 10px;
    border-radius: 50%;
    transform: rotate(5deg);
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0));
    opacity: .58;
    pointer-events: none;
}

.sirah-age-hourglass__slider-label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(45deg);
    background: rgba(255,248,233,.96);
    border-top: 1px solid rgba(166,111,48,.25);
    border-right: 1px solid rgba(166,111,48,.25);
}

@keyframes saePulse {
    0%,100% { transform: scale(.72); opacity: .45; }
    50% { transform: scale(1); opacity: 1; }
}

@keyframes saeSandStream {
    0%, 100% { opacity: .68; transform: translateX(-50%) scaleX(.88); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.08); }
}

@media (min-width: 1600px) {
    .sirah-age-events__layout {
        grid-template-columns: minmax(0, 1fr) 390px;
        gap: 26px;
    }
    .sirah-age-timepiece {
        height: 565px;
        min-height: 565px;
        max-height: 565px;
    }
    .sirah-age-results {
        height: 565px;
        min-height: 565px;
        max-height: 565px;
    }
    .sirah-age-hourglass {
        transform: translate(-50%, -50%) scale(.91);
    }
}

@media (min-width: 1200px) and (max-width: 1279.98px) {
    .sirah-age-events__layout {
        grid-template-columns: minmax(0, 1fr) 345px;
        gap: 18px;
    }
    .sirah-age-timepiece {
        height: 525px;
        min-height: 525px;
        max-height: 525px;
    }
    .sirah-age-results {
        height: 525px;
        min-height: 525px;
        max-height: 525px;
    }
    .sirah-age-hourglass {
        transform: translate(-50%, -50%) scale(.81);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .sirah-age-events {
        padding: 34px 0 40px;
    }
    .sirah-age-events__layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 16px;
    }
    .sirah-age-timepiece {
        height: 505px;
        min-height: 505px;
        max-height: 505px;
    }
    .sirah-age-results {
        height: 505px;
        min-height: 505px;
        max-height: 505px;
        padding: 16px;
    }
    .sirah-age-hourglass {
        transform: translate(-50%, -50%) scale(.74);
    }
    .sirah-age-results__header {
        gap: 10px;
    }
    .sirah-age-results__stats span {
        min-width: 102px;
        padding: 8px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sirah-age-events {
        padding: 32px 0 38px;
    }

    .sirah-age-events__container {
        width: min(
            calc(100% - 28px),
            var(--sirah-layout-width, 1240px)
        );
    }
    .sirah-age-events__heading {
        margin-bottom: 18px;
    }
    .sirah-age-events__layout {
        grid-template-columns: 1fr;
        grid-template-areas: "timepiece"
            "results";
        gap: 16px;
        direction: rtl;
    }
    .sirah-age-timepiece {
        width: 100%;
        height: 485px;
        min-height: 485px;
        max-height: 485px;
    }
    .sirah-age-timepiece__stage {
        min-height: 0;
    }
    .sirah-age-hourglass {
        top: 47%;
        transform: translate(-50%, -50%) scale(.79);
    }
    .sirah-age-results {
        width: 100%;
        height: auto;
        min-height: 470px;
        max-height: none;
        overflow: visible;
        padding: 18px;
    }
    .sirah-age-persons-wrap {
        max-height: none;
    }
    .sirah-age-persons {
        max-height: 120px;
    }
    .sirah-age-events-list-wrap {
        min-height: 250px;
        overflow: visible;
    }
    .sirah-age-events-list {
        max-height: 420px;
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    .sirah-age-events {
        padding: 24px 0 30px;
    }

    .sirah-age-events__container {
        width: min(
            calc(100% - 20px),
            var(--sirah-layout-width, 1240px)
        );
    }
    .sirah-age-events__heading {
        margin-bottom: 15px;
        padding-inline: 5px;
    }
    .sirah-age-events__eyebrow {
        padding: 5px 10px;
        font-size: 9.5px;
    }
    .sirah-age-events__heading h2 {
        font-size: clamp(23px, 7vw, 29px);
    }
    .sirah-age-events__heading p {
        max-width: 560px;
        font-size: 10.5px;
        line-height: 1.65;
    }
    .sirah-age-events__layout {
        grid-template-columns: 1fr;
        grid-template-areas: "timepiece"
            "results";
        gap: 12px;
        direction: rtl;
    }
    .sirah-age-timepiece {
        width: 100%;
        height: 365px;
        min-height: 365px;
        max-height: 365px;
        padding: 8px;
        border-radius: 20px;
    }
    .sirah-age-timepiece__top {
        flex-basis: 39px;
        min-height: 39px;
        padding-bottom: 4px;
    }
    .sirah-age-timepiece__seal {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }
    .sirah-age-timepiece__top strong {
        font-size: 12px;
    }
    .sirah-age-timepiece__stage {
        border-radius: 15px;
        padding-bottom: 24px;
    }
    .sirah-age-hourglass {
        top: 47%;
        transform: translate(-50%, -50%) scale(.55);
    }
    .sirah-age-timepiece__footer {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        min-height: 34px;
        flex-basis: 34px;
        margin-top: 5px;
        padding: 3px 4px 3px 6px;
        border-radius: 10px;
    }
    .sirah-age-timepiece__hint {
        gap: 4px;
        padding-inline: 1px;
        font-size: 6.6px;
    }
    .sirah-age-timepiece__hint i { font-size: 7px; }
    .sirah-age-direct { gap: 4px; }
    .sirah-age-direct > label { font-size: 6.7px; }
    .sirah-age-direct__field {
        grid-template-columns: 42px 24px;
        height: 26px;
        border-radius: 8px;
    }
    .sirah-age-direct input {
        width: 42px;
        padding-inline: 3px;
        font-size: 15px;
    }
    .sirah-age-direct button {
        width: 24px;
        height: 24px;
        font-size: 7px;
    }
    .sirah-age-hourglass__slider {
        right: -16px;
    }
    .sirah-age-hourglass__slider input[type="range"] {
        touch-action: none;
        cursor: ns-resize;
    }
    .sirah-age-hourglass__slider-label {
        right: 51px;
        min-width: 48px;
        gap: 1px;
        padding: 4px 6px;
    }
    .sirah-age-hourglass__slider-label span {
        font-size: 9px;
    }
    .sirah-age-hourglass__slider-label b {
        font-size: 18px;
    }
    .sirah-age-results {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        padding: 13px;
        border-radius: 20px;
    }
    .sirah-age-results__header {
        flex-direction: column;
        gap: 7px;
        margin-bottom: 9px;
        padding-bottom: 9px;
    }
    .sirah-age-results__headline h3 {
        font-size: 21px;
    }
    .sirah-age-results__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 6px;
    }
    .sirah-age-results__stats span {
        min-width: 0;
        justify-content: center;
        padding: 7px 6px;
    }
    .sirah-age-persons-wrap {
        max-height: none;
        margin-bottom: 8px;
    }
    .sirah-age-persons {
        max-height: 150px;
        overflow-y: auto;
    }
    .sirah-age-events-list-wrap {
        min-height: 0;
        overflow: visible;
    }
    .sirah-age-events-list {
        max-height: 460px;
        overflow-y: auto;
        padding-inline-end: 2px;
    }
    .sirah-age-event-card {
        grid-template-columns: 62px minmax(0,1fr) 30px;
        gap: 7px;
        padding: 7px;
    }
    .sirah-age-event-card__media {
        width: 62px;
        height: 54px;
    }
    .sirah-age-event-card__meta {
        display: none;
    }
    .sirah-age-event-card h4 {
        font-size: 14px;
    }
    .sirah-age-event-card p {
        font-size: 9px;
        -webkit-line-clamp: 1;
    }
    .sirah-age-event-card__link {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 430px) {
    .sirah-age-events__container {
        width: calc(100% - 16px);
    }

    .sirah-age-timepiece {
        height: 340px;
        min-height: 340px;
        max-height: 340px;
        border-radius: 20px;
    }
    .sirah-age-hourglass {
        transform: translate(-50%, -50%) scale(.51);
    }
    .sirah-age-timepiece__hint {
        display: none;
    }
    .sirah-age-timepiece__footer {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 31px;
        flex-basis: 31px;
        padding: 2px 4px;
    }
    .sirah-age-direct > label { display: none; }
}

@media (max-width: 370px) {
    .sirah-age-timepiece {
        height: 320px;
        min-height: 320px;
        max-height: 320px;
    }
    .sirah-age-hourglass {
        transform: translate(-50%, -50%) scale(.47);
    }
    .sirah-age-timepiece__hint {
        display: none;
    }
}

@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
    .sirah-age-events {
        padding: 18px 0 22px;
    }
    .sirah-age-timepiece {
        height: 360px;
        min-height: 360px;
        max-height: 360px;
    }
    .sirah-age-hourglass {
        transform: translate(-50%, -50%) scale(.53);
    }
    .sirah-age-timepiece__hint {
        display: none;
    }
    .sirah-age-timepiece__footer {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 31px;
        flex-basis: 31px;
        padding: 2px 4px;
    }
    .sirah-age-direct > label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sirah-age-hourglass__slider-label {
        transition: none !important;
        animation: none !important;
    }

    .sirah-age-hourglass__sand--top {
        transition: none !important;
        animation: none !important;
    }

    .sirah-age-hourglass__sand--bottom {
        transition: none !important;
        animation: none !important;
    }

    .sirah-age-hourglass__stream {
        transition: none !important;
        animation: none !important;
    }

    .sirah-age-loading span {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   توافق العرض الحالي: اسم الشخصية + حدث الربط
   ========================================================= */
.sirah-age-person-card__content {
    min-width: 0;
}

.sirah-age-person-card__event {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--sae-muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* لا نعرض قائمة أحداث ثانية؛ البيانات تظهر داخل بطاقة الشخصية */
.sirah-age-events-list-wrap[hidden] {
    display: none !important;
}


/* =========================================================
   بطاقات الشخصيات — النسخة الرسمية
   اسم الشخصية + عدة أحداث/أوصاف داخل بطاقة واحدة
   ========================================================= */
.sirah-age-persons-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
    overflow: hidden;
}

.sirah-age-persons {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 2px 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(111,55,65,.28) transparent;
}

.sirah-age-person-card {
    width: 100%;
    min-width: 0;
    align-self: start;
    display: block;
    padding: 12px;
    background:
        radial-gradient(circle at 92% 7%, rgba(192,141,73,.07), transparent 28%),
        linear-gradient(180deg, #fffdf9 0%, #f8f0e4 100%);
    border: 1px solid rgba(192,141,73,.17);
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(72,47,39,.055), inset 0 1px 0 rgba(255,255,255,.86);
}

.sirah-age-person-card__header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(111,55,65,.09);
}

.sirah-age-person-card__avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
    box-shadow: 0 5px 11px rgba(91,44,54,.12);
}

.sirah-age-person-card__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sirah-age-person-card__name {
    min-width: 0;
    overflow: hidden;
    color: var(--sae-ink);
    font-family: "Amiri", "Cairo", serif;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sirah-age-person-card__count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    color: var(--sae-maroon);
    background: rgba(255,250,241,.78);
    border: 1px solid rgba(192,141,73,.16);
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 850;
    white-space: nowrap;
}

.sirah-age-person-card__events {
    display: grid;
    gap: 0;
    width: 100%;
}

/* بطاقة واحدة في كل صف: الاسم بالأعلى والأحداث تحته بعرض كامل */
@media (min-width: 768px) {
    .sirah-age-person-card {
        padding: 13px 15px;
    }

    .sirah-age-person-card__header {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .sirah-age-person-card__event-copy p {
        max-width: none;
        font-size: 10px;
        line-height: 1.8;
    }
}

.sirah-age-person-card__event-item {
    position: relative;
    padding: 10px 1px 9px;
}

.sirah-age-person-card__event-item + .sirah-age-person-card__event-item {
    border-top: 1px solid rgba(111,55,65,.075);
}

.sirah-age-person-card__event-item.is-hidden-event {
    display: none;
}

.sirah-age-person-card.is-expanded .sirah-age-person-card__event-item.is-hidden-event {
    display: block;
}

.sirah-age-person-card__event-copy {
    min-width: 0;
}

.sirah-age-person-card__event-title {
    display: block;
    margin: 0;
    color: var(--sae-maroon-dark) !important;
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.55;
    text-decoration: none !important;
}

a.sirah-age-person-card__event-title:hover {
    color: var(--sae-maroon) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.sirah-age-person-card__event-copy p {
    margin: 4px 0 0;
    color: var(--sae-muted);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.72;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sirah-age-person-card__toggle {
    width: 100%;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
    padding: 5px 9px;
    color: var(--sae-maroon);
    background: rgba(255,250,241,.66);
    border: 1px solid rgba(192,141,73,.15);
    border-radius: 9px;
    font-size: 8.5px;
    font-weight: 850;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.sirah-age-person-card__toggle:hover {
    background: #fff8eb;
    border-color: rgba(192,141,73,.28);
    transform: translateY(-1px);
}

.sirah-age-person-card__toggle i {
    font-size: 7px;
}

/* التنسيق القديم لحدث واحد داخل البطاقة لم يعد مستخدماً. */
.sirah-age-person-card__content,
.sirah-age-person-card__event {
    min-width: 0;
}

@media (max-width: 1100px) {
    .sirah-age-persons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .sirah-age-persons {
        max-height: 430px;
        height: auto;
    }
}

@media (max-width: 767.98px) {
    .sirah-age-persons-wrap {
        overflow: visible;
    }

    .sirah-age-persons {
        grid-template-columns: 1fr;
        gap: 8px;
        max-height: 470px;
        height: auto;
        padding-inline-end: 2px;
    }

    .sirah-age-person-card {
        padding: 10px;
        border-radius: 13px;
    }

    .sirah-age-person-card__header {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
        padding-bottom: 8px;
    }

    .sirah-age-person-card__avatar {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .sirah-age-person-card__name {
        font-size: 14px !important;
    }

    .sirah-age-person-card__count {
        min-height: 22px;
        padding: 3px 7px;
        font-size: 7.5px;
    }

    .sirah-age-person-card__event-item {
        padding: 8px 1px;
    }

    .sirah-age-person-card__event-title {
        font-size: 10.5px;
    }

    .sirah-age-person-card__event-copy p {
        font-size: 9px;
        line-height: 1.68;
    }

    .sirah-age-person-card__toggle {
        min-height: 29px;
        font-size: 8px;
    }
}

@media (max-width: 390px) {
    .sirah-age-person-card__identity {
        gap: 5px;
    }

    .sirah-age-person-card__name {
        font-size: 13px !important;
    }

    .sirah-age-person-card__count {
        font-size: 7px;
    }
}