.chronicle-oracle {
    position: relative;
    width: 100%;
    max-width: 800px;
    padding-top: 54px;
    justify-self: end;
    container-type: inline-size;
}

.chronicle-heading {
    position: absolute;
    z-index: 8;
    top: 7px;
    left: 50%;
    display: grid;
    min-width: min(360px, 62%);
    padding: 9px 38px 10px;
    border: 1px solid rgba(190, 130, 43, 0.72);
    place-items: center;
    background:
        linear-gradient(90deg, transparent, rgba(223, 173, 78, 0.15) 17%, rgba(223, 173, 78, 0.15) 83%, transparent),
        linear-gradient(180deg, rgba(39, 28, 16, 0.98), rgba(10, 10, 8, 0.98));
    box-shadow:
        0 0 0 3px rgba(6, 7, 6, 0.88),
        0 8px 22px rgba(0, 0, 0, 0.52),
        inset 0 0 18px rgba(218, 163, 68, 0.08);
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    transform: translateX(-50%);
}

.chronicle-heading::before,
.chronicle-heading::after {
    position: absolute;
    top: 50%;
    width: 108px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 159, 66, 0.72));
    content: "";
}

.chronicle-heading::before {
    right: 100%;
}

.chronicle-heading::after {
    left: 100%;
    transform: scaleX(-1);
}

.chronicle-heading span,
.chronicle-heading strong {
    font-family: var(--serif);
    text-transform: uppercase;
}

.chronicle-heading span {
    color: #e7c06f;
    font-size: clamp(0.58rem, 1.45cqw, 0.74rem);
    font-weight: 850;
    letter-spacing: 0.19em;
}

.chronicle-heading strong {
    margin-top: 2px;
    color: #a9a08c;
    font-size: clamp(0.48rem, 1.15cqw, 0.61rem);
    letter-spacing: 0.14em;
}

.chronicle-stage {
    position: relative;
    isolation: isolate;
}

.chronicle-stage::before {
    position: absolute;
    z-index: -1;
    inset: 14% 5% 5%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(178, 115, 36, 0.18), rgba(0, 0, 0, 0.52) 58%, transparent 76%);
    filter: blur(15px);
    content: "";
}

.chronicle-stage::after {
    position: absolute;
    right: 9%;
    bottom: 1%;
    left: 9%;
    z-index: -1;
    height: 12%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.74);
    filter: blur(16px);
    content: "";
}

.chronicle-book {
    position: relative;
    width: 100%;
    aspect-ratio: 758 / 493;
    outline: none;
}

.chronicle-book:focus-visible {
    outline: 2px solid #e2b052;
    outline-offset: 5px;
}

.chronicle-book-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.68));
    user-select: none;
}

.chronicle-book-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    color: #4a2b17;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 280ms ease;
    transform: translateY(4px);
}

.chronicle-oracle.is-content-visible .chronicle-book-content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.chronicle-oracle.is-turning .chronicle-book-content,
.chronicle-oracle.is-closing .chronicle-book-content {
    pointer-events: none;
}

.chronicle-left-page,
.chronicle-right-page {
    position: absolute;
    text-shadow: 0 1px rgba(255, 238, 190, 0.24);
}

.chronicle-left-page {
    top: 17.2%;
    left: 14.9%;
    width: 30.5%;
    height: 59.2%;
}

.chronicle-copy {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: start;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-5px);
    transition: opacity 180ms ease, transform 220ms ease;
}

.chronicle-copy.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.chronicle-copy p {
    margin: 0 0 4%;
    color: #8b4c27;
    font-family: var(--serif);
    font-size: clamp(0.5rem, 1.22cqw, 0.67rem);
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.chronicle-copy h2 {
    max-width: 100%;
    margin: 0 0 6%;
    color: #402313;
    font-family: var(--serif);
    font-size: clamp(0.92rem, 3.3cqw, 1.62rem);
    letter-spacing: -0.025em;
    line-height: 1.03;
}

.chronicle-copy h2::after {
    display: block;
    width: 42%;
    height: 1px;
    margin-top: 7%;
    background: linear-gradient(90deg, #8e512c, transparent);
    content: "";
}

.chronicle-copy > span {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: #52331e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.59rem, 1.65cqw, 0.82rem);
    font-weight: 650;
    line-height: 1.34;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.chronicle-right-page {
    top: 15.2%;
    left: 55.1%;
    display: grid;
    width: 31.5%;
    height: 64%;
    align-content: start;
    justify-items: center;
}

.chronicle-right-page > img {
    width: 15%;
    height: auto;
    margin-bottom: 1%;
    filter: sepia(0.28) drop-shadow(0 2px 2px rgba(72, 38, 17, 0.3));
}

.chronicle-right-page > p {
    margin: 0 0 5%;
    color: #63361d;
    font-family: var(--serif);
    font-size: clamp(0.52rem, 1.32cqw, 0.7rem);
    font-weight: 900;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
}

.chronicle-right-page ol {
    display: grid;
    width: 91%;
    margin: 0;
    padding: 0;
    gap: clamp(3px, 1.2cqw, 8px);
    list-style: none;
}

.chronicle-right-page li {
    display: grid;
    min-height: clamp(27px, 6.4cqw, 48px);
    padding: 2.8% 4%;
    border-top: 1px solid rgba(104, 59, 30, 0.28);
    border-bottom: 1px solid rgba(104, 59, 30, 0.16);
    align-items: center;
    grid-template-columns: 13% 1fr;
    gap: 4%;
    background: rgba(118, 69, 36, 0.035);
}

.chronicle-right-page li i {
    display: grid;
    width: clamp(16px, 4cqw, 27px);
    aspect-ratio: 1;
    border: 1px solid rgba(113, 61, 30, 0.5);
    border-radius: 50%;
    place-items: center;
    color: #814324;
    font-family: var(--serif);
    font-size: clamp(0.45rem, 1.15cqw, 0.63rem);
    font-style: normal;
    font-weight: 900;
}

.chronicle-right-page li span {
    display: -webkit-box;
    overflow: hidden;
    color: #54331d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.5rem, 1.25cqw, 0.7rem);
    font-weight: 700;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.chronicle-right-page > a {
    position: absolute;
    right: 4%;
    bottom: 0;
    left: 4%;
    display: flex;
    padding: 3% 2%;
    border-top: 1px solid rgba(111, 61, 30, 0.34);
    align-items: center;
    justify-content: center;
    gap: 6%;
    color: #6e391c;
    font-family: var(--serif);
    font-size: clamp(0.47rem, 1.23cqw, 0.67rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.chronicle-right-page > a:hover,
.chronicle-right-page > a:focus-visible {
    color: #9a4b21;
}

.chronicle-close,
.chronicle-controls button,
.chronicle-open {
    border: 1px solid rgba(106, 57, 27, 0.58);
    background: linear-gradient(180deg, rgba(125, 75, 38, 0.2), rgba(79, 40, 20, 0.13));
    color: #6d391f;
    font: inherit;
    cursor: pointer;
}

.chronicle-close:hover,
.chronicle-close:focus-visible,
.chronicle-controls button:hover,
.chronicle-controls button:focus-visible {
    border-color: rgba(128, 62, 26, 0.85);
    color: #9e4f25;
}

.chronicle-close:disabled,
.chronicle-controls button:disabled {
    cursor: default;
    opacity: 0.26;
}

.chronicle-close {
    position: absolute;
    top: 13.1%;
    right: 7.2%;
    display: grid;
    width: clamp(22px, 4.6cqw, 34px);
    aspect-ratio: 1;
    border-radius: 50%;
    place-items: center;
    font-size: clamp(0.55rem, 1.45cqw, 0.8rem);
}

.chronicle-controls {
    position: absolute;
    right: 6.2%;
    bottom: 8.8%;
    left: 6.2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.chronicle-controls button {
    display: grid;
    width: clamp(25px, 5.2cqw, 39px);
    aspect-ratio: 1;
    border-radius: 50%;
    place-items: center;
    pointer-events: auto;
    font-size: clamp(0.62rem, 1.6cqw, 0.9rem);
}

.chronicle-controls > span {
    color: rgba(83, 45, 23, 0.64);
    font-family: var(--serif);
    font-size: clamp(0.47rem, 1.13cqw, 0.62rem);
    font-weight: 900;
    letter-spacing: 0.12em;
}

.chronicle-open {
    position: absolute;
    z-index: 5;
    top: 54%;
    left: 50%;
    display: grid;
    min-width: clamp(138px, 25cqw, 208px);
    min-height: clamp(40px, 7.4cqw, 58px);
    padding: 9px 28px;
    border-color: rgba(215, 164, 73, 0.66);
    place-items: center;
    background: linear-gradient(180deg, rgba(42, 31, 18, 0.97), rgba(12, 12, 10, 0.98));
    box-shadow:
        0 0 0 3px rgba(7, 8, 7, 0.86),
        0 0 0 4px rgba(184, 126, 41, 0.4),
        0 12px 26px rgba(0, 0, 0, 0.58);
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    color: #edca80;
    font-family: var(--serif);
    font-size: clamp(0.62rem, 1.55cqw, 0.82rem);
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.chronicle-open i {
    width: 38%;
    height: 1px;
    margin-top: 5px;
    background: linear-gradient(90deg, transparent, #c5903c, transparent);
}

.chronicle-open:hover,
.chronicle-open:focus-visible {
    border-color: #e8bd68;
    color: #ffe4a5;
    transform: translate(-50%, calc(-50% - 2px));
}

.chronicle-oracle.is-opening .chronicle-open,
.chronicle-oracle.is-open .chronicle-open,
.chronicle-oracle.is-closing .chronicle-open {
    opacity: 0;
    pointer-events: none;
}


@media (max-width: 1260px) {
    .chronicle-oracle {
        max-width: 690px;
    }
}

@media (max-width: 1040px) {
    .chronicle-oracle {
        max-width: 780px;
        justify-self: center;
    }
}

@media (max-width: 760px) {
    .chronicle-oracle {
        width: calc(100% + 20px);
        margin-left: -10px;
        padding-top: 48px;
    }

    .chronicle-heading::before,
    .chronicle-heading::after {
        width: 62px;
    }

    .chronicle-copy > span {
        -webkit-line-clamp: 5;
    }
}

@media (max-width: 560px) {
    .chronicle-oracle {
        width: calc(100% + 30px);
        margin-left: -15px;
        padding-top: 42px;
    }

    .chronicle-heading {
        min-width: 72%;
        padding: 7px 22px 8px;
    }

    .chronicle-heading::before,
    .chronicle-heading::after {
        width: 36px;
    }

    .chronicle-copy h2 {
        margin-bottom: 4%;
    }

    .chronicle-copy h2::after {
        margin-top: 5%;
    }

    .chronicle-copy > span {
        line-height: 1.28;
        -webkit-line-clamp: 4;
    }

    .chronicle-right-page ol {
        gap: 2px;
    }

    .chronicle-right-page li {
        min-height: 24px;
    }

    .chronicle-right-page li span {
        -webkit-line-clamp: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chronicle-book-content,
    .chronicle-copy,
    .chronicle-open {
        transition: none !important;
    }
}