:root {
    --night: #0a0e1a;
    --predawn: #2a3a5a;
    --dawn: #8aa0c8;
    --morning: #c8d0e0;
    --midday: #f5f2ee;
    --midday-peak: #f8f5f0;
    --afternoon-gold: #d4a870;
    --sunset: #9a6a50;
    --twilight: #5a3a48;
    --night-return: #141028;
    --afternoon-warm: #f0e8d8;
    --afternoon-amber: #e8d0b0;
    --morning-warm: #e8e4e0;
    --text-light: #b0b8c8;
    --text-dark: #2a2820;
    --text-warm: #3a2a18;
    --text-color: var(--text-light);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.9;
    color: var(--text-color);
    overflow-x: hidden;
    min-height: 1400vh;
    background: linear-gradient(
        to bottom,
        #0a0e1a 0%,
        #0a0e1a 3%,
        #0e1428 10%,
        #0e1428 14.3%,
        #1a2a48 18%,
        #2a3a5a 21%,
        #3a5a80 24%,
        #5a7aaa 26%,
        #8aa0c8 28.6%,
        #a0b8d8 31%,
        #c8d0e0 34%,
        #dcdce0 38%,
        #e8e4e0 41%,
        #f0ece6 43%,
        #f5f2ee 46.4%,
        #f8f5f0 50%,
        #f8f5f0 54%,
        #f5f2ee 57.1%,
        #f0ebe0 60%,
        #f0e8d8 63%,
        #e8d0b0 67%,
        #d4a870 71.4%,
        #c08a58 74%,
        #9a6a50 77%,
        #7a5048 80%,
        #5a3a48 83%,
        #3a2838 85.7%,
        #2a1e30 88%,
        #1e1628 91%,
        #141028 93%,
        #0e0c20 96%,
        #0a0e1a 100%
    );
}

.day-column {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin-left: 30%;
    min-height: 1400vh;
}

.moment {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 20px;
}

.domain-name {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.9;
    color: var(--text-color);
}

.tick-line {
    width: 40px;
    height: 0.5px;
    background-color: var(--text-color);
    margin-bottom: 12px;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.tick-line.visible {
    opacity: 1;
}

.timestamp {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    letter-spacing: 0.15em;
    color: var(--text-color);
    display: block;
    margin-bottom: 8px;
}

.moment-text {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.9;
    color: var(--text-color);
    max-width: 55ch;
}

@media (max-width: 768px) {
    .day-column {
        margin-left: auto;
        margin-right: auto;
        width: 85%;
        max-width: none;
    }
}