/* Compliance trace: IBM Plex Sans Light (300 (Google Fonts Interaction (Key Technical Detail Intersection Observer. IntersectionObserver` threshold (0.15 Source Serif 4 creates fully reading experience echoes fine book typography (400 #fff */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --void-indigo: #0a0e27;
    --midnight-slate: #111833;
    --frost-white: #e8edf5;
    --mist-silver: #9aa5bf;
    --aurora-cyan: #4fc3f7;
    --celestial-teal: #80deea;
    --spectral-lavender: #b388ff;
    --ember-gold: #ffd54f;
    --ice-blue: #b2ebf2;
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--void-indigo);
    color: var(--frost-white);
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    display: grid;
    grid-template-columns: 1fr min(680px, 85vw) 1fr;
}

@media (min-width: 1200px) {
    body { grid-template-columns: 25vw 680px 1fr; }
}

body > * { grid-column: 2; }

.noise-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.03;
    mix-blend-mode: screen;
}

.aurora {
    position: fixed;
    inset: -12vh -8vw;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
}

.aurora-1 {
    background:
        radial-gradient(ellipse 800px 200px at 50% 30%, rgba(79, 195, 247, 0.15), transparent 70%),
        radial-gradient(ellipse 640px 160px at 14% 68%, rgba(79, 195, 247, 0.08), transparent 72%);
    animation: auroraShift1 40s ease-in-out infinite;
}

.aurora-2 {
    background:
        radial-gradient(ellipse 900px 240px at 62% 44%, rgba(128, 222, 234, 0.08), transparent 72%),
        radial-gradient(ellipse 520px 180px at 28% 18%, rgba(178, 235, 242, 0.055), transparent 70%);
    animation: auroraShift2 55s ease-in-out infinite;
}

.aurora-3 {
    background:
        radial-gradient(ellipse 720px 190px at 46% 58%, rgba(179, 136, 255, 0.06), transparent 72%),
        radial-gradient(ellipse 680px 250px at 83% 20%, rgba(179, 136, 255, 0.045), transparent 70%);
    animation: auroraShift3 70s ease-in-out infinite;
}

@keyframes auroraShift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, -30px) scale(1.1); } }
@keyframes auroraShift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-60px, 40px) scale(1.05); } 66% { transform: translate(40px, -20px) scale(0.95); } }
@keyframes auroraShift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 25px) scale(1.08); } }

.epoch-portal,
.colophon {
    grid-column: 1 / -1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.epoch-portal::before,
.colophon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(17, 24, 51, 0.24), rgba(10, 14, 39, 0.75) 65%);
}

.epoch-content,
.colophon-content {
    position: relative;
    text-align: center;
    z-index: 2;
}

.epoch-counter,
.colophon-counter {
    font-family: "Cormorant Garamond", Garamond, Georgia, serif;
    font-weight: 300;
    font-size: clamp(3.5rem, 10vw, 8rem);
    letter-spacing: 0.06em;
    line-height: 1.05;
    color: var(--frost-white);
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga' 1, 'kern' 1;
    text-shadow: 0 0 34px rgba(79, 195, 247, 0.22);
}

.epoch-counter::after,
.colophon-counter::after {
    content: "";
    display: block;
    width: min(34vw, 180px);
    height: 1px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--aurora-cyan), var(--celestial-teal), var(--ice-blue), transparent);
    box-shadow: 0 0 18px rgba(79, 195, 247, 0.5);
}

.particle-field {
    position: absolute;
    inset: -20% -30%;
    pointer-events: none;
}

.particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--aurora-cyan);
    opacity: 0;
    animation: particleDissolve 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow: 0 0 12px var(--aurora-cyan);
}

@keyframes particleDissolve {
    0% { opacity: 0.85; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.1); }
}

.epoch-subtitle,
.colophon-subtitle,
.era-label,
.marginalia,
figcaption {
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.epoch-subtitle,
.colophon-subtitle {
    margin-top: 2rem;
    color: var(--mist-silver);
    opacity: 0;
    animation: fadeInSubtle 2s ease 1.2s forwards;
}

@keyframes fadeInSubtle { to { opacity: 0.78; } }

.chronicle { grid-column: 2; display: contents; }

.chapter {
    position: relative;
    z-index: 2;
    padding: 8vh 0;
    margin: 8vh 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.chapter-divider {
    height: 1px;
    margin-bottom: 6vh;
    opacity: 0.5;
    background: linear-gradient(90deg, transparent, var(--aurora-cyan), var(--celestial-teal), var(--ice-blue), transparent);
    transition: opacity 0.8s ease, height 0.4s ease, box-shadow 0.4s ease;
}

.chapter.burst .chapter-divider,
.chapter.visible .chapter-divider {
    opacity: 1;
    box-shadow: 0 0 20px rgba(79, 195, 247, 0.35);
}

.chapter.burst .chapter-divider { height: 3px; }

.chapter-body {
    position: relative;
    padding: clamp(1.4rem, 4vw, 3rem);
    margin-inline: clamp(-1rem, -2vw, 0rem);
    background: rgba(17, 24, 51, 0.42);
    backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 0 80px rgba(10, 14, 39, 0.22);
}

.chapter-body.frosted { background: rgba(17, 24, 51, 0.56); }

.era-label {
    color: var(--spectral-lavender);
    margin-bottom: 1.5rem;
}

.chapter-title {
    font-family: "Cormorant Garamond", Garamond, Georgia, serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: 0.06em;
    line-height: 1.05;
    margin-bottom: 1.1em;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga' 1, 'kern' 1;
}

p { margin-bottom: 1.5em; hyphens: auto; word-break: break-word; }
p:last-child { margin-bottom: 0; }

.pull-quote {
    font-family: "Cormorant Garamond", Garamond, Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.4;
    font-style: italic;
    color: var(--frost-white);
    border-left: 3px solid var(--spectral-lavender);
    padding-left: 1.5rem;
    margin: 3rem 0;
}

.ember-date {
    color: var(--ember-gold);
    text-shadow: 0 0 20px rgba(255, 213, 79, 0.3);
}

.marginalia {
    position: absolute;
    right: -128px;
    top: 2rem;
    color: var(--mist-silver);
    opacity: 0.72;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.4s ease, opacity 0.4s ease;
}

.marginalia:hover,
.magnetic.active { color: var(--aurora-cyan); opacity: 1; }

.marginalia.vertical {
    writing-mode: vertical-rl;
    right: -86px;
    top: auto;
    bottom: 2rem;
}

.chronicle-image {
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    height: 60vh;
    margin: 8vh 0;
    overflow: hidden;
    background: var(--void-indigo);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.chronicle-image.visible { opacity: 1; transform: translateY(0); }

.image-surface {
    position: absolute;
    inset: 0;
    filter: brightness(0.6) contrast(1.15) saturate(0.4);
    mix-blend-mode: luminosity;
    transition: filter 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.chronicle-image:hover .image-surface {
    filter: brightness(0.75) contrast(1.1) saturate(0.6);
    transform: scale(1.025);
}

.chronicle-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 14, 39, 0.3), rgba(79, 195, 247, 0.08));
    mix-blend-mode: soft-light;
}

.photo-ancient .image-surface {
    background:
        linear-gradient(180deg, rgba(10, 14, 39, 0.2), rgba(10, 14, 39, 0.7)),
        radial-gradient(ellipse at 55% 22%, rgba(79, 195, 247, 0.3), transparent 36%),
        linear-gradient(162deg, transparent 0 34%, rgba(232, 237, 245, 0.5) 35% 36%, transparent 37%),
        linear-gradient(18deg, transparent 0 50%, rgba(232, 237, 245, 0.28) 51% 52%, transparent 53%),
        linear-gradient(8deg, #111833 0 48%, #9aa5bf 49% 51%, #0a0e27 52%);
}

.photo-classical .image-surface {
    background:
        radial-gradient(circle at 44% 18%, rgba(178, 235, 242, 0.22), transparent 30%),
        repeating-linear-gradient(90deg, transparent 0 7%, rgba(232, 237, 245, 0.48) 7.5% 9%, transparent 9.5% 14%),
        linear-gradient(180deg, #0a0e27 0%, #111833 46%, #9aa5bf 47%, #0a0e27 50%, #111833 100%);
}

.photo-medieval .image-surface {
    background:
        radial-gradient(ellipse at 50% 8%, rgba(79, 195, 247, 0.38), transparent 24%),
        radial-gradient(ellipse at 50% 105%, rgba(179, 136, 255, 0.16), transparent 40%),
        repeating-linear-gradient(75deg, rgba(232, 237, 245, 0.16) 0 2px, transparent 2px 42px),
        linear-gradient(90deg, #0a0e27 0 18%, #111833 18% 82%, #0a0e27 82%);
}

.photo-library .image-surface {
    background:
        radial-gradient(ellipse at 68% 20%, rgba(255, 213, 79, 0.12), transparent 24%),
        repeating-linear-gradient(178deg, rgba(232, 237, 245, 0.36) 0 2px, transparent 2px 18px),
        repeating-linear-gradient(90deg, rgba(17, 24, 51, 0.2) 0 18px, rgba(154, 165, 191, 0.3) 18px 22px),
        linear-gradient(120deg, #111833, #0a0e27 55%, #111833);
}

.photo-orbit .image-surface {
    background:
        radial-gradient(circle at 50% 115%, rgba(178, 235, 242, 0.7), rgba(79, 195, 247, 0.22) 21%, transparent 43%),
        radial-gradient(circle at 34% 64%, rgba(232, 237, 245, 0.65) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 38%, rgba(232, 237, 245, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 28%, rgba(232, 237, 245, 0.5) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 70%, rgba(232, 237, 245, 0.55) 0 1px, transparent 2px),
        linear-gradient(180deg, #0a0e27, #111833 70%, #0a0e27);
}

figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 2rem;
    color: var(--mist-silver);
    background: linear-gradient(to top, rgba(10, 14, 39, 0.86), transparent);
}

.colophon { background: radial-gradient(ellipse at 50% 90%, rgba(255, 213, 79, 0.06), transparent 34%); }
.colophon .colophon-counter { text-shadow: 0 0 36px rgba(179, 136, 255, 0.26); }
.colophon-counter::after { background: linear-gradient(90deg, transparent, var(--spectral-lavender), var(--ember-gold), var(--aurora-cyan), transparent); }

.ghost-date {
    position: fixed;
    font-family: "Cormorant Garamond", Garamond, Georgia, serif;
    font-weight: 300;
    font-size: 12vw;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--frost-white);
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

.ghost-date-1 { top: 13%; left: 5%; }
.ghost-date-2 { top: 35%; right: 2%; }
.ghost-date-3 { top: 59%; left: 8%; }
.ghost-date-4 { top: 80%; right: 5%; }

a {
    color: var(--aurora-cyan);
    text-decoration: none;
    background-image: linear-gradient(var(--aurora-cyan), var(--aurora-cyan));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.4s ease;
}

a:hover { background-size: 100% 1px; }
::selection { background: rgba(79, 195, 247, 0.25); color: var(--frost-white); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--void-indigo); }
::-webkit-scrollbar-thumb { background: var(--midnight-slate); }

@media (max-width: 1000px) {
    .chapter { margin: 4vh 0; }
    .chapter-body { margin-inline: 0; }
    .marginalia,
    .marginalia.vertical {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        display: block;
        writing-mode: horizontal-tb;
        margin-bottom: 1rem;
    }
}

@media (max-width: 640px) {
    body { grid-template-columns: 1fr min(88vw, 680px) 1fr; }
    .chapter-body { padding: 1.4rem; }
    .chronicle-image { height: 54vh; }
    figcaption { padding: 1.2rem; }
}