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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    background: #ffffff;
    height: 100vh;
    width: 100vw;
}

.tiles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    gap: 20px;
}

.tile-column {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* gap: 20px;  Removed gap from container to use margin-bottom on tiles for better control if needed, but flex gap is fine too. Let's stick to flex gap for consistency with previous code, but we need to ensure images don't stretch */
    gap: 20px;
    animation-play-state: paused;
}

/* Running state */
body.scrolling .tile-column {
    animation-play-state: running;
}

/* Loaded state (tiles visible) */
body.loaded .tile {
    opacity: 0.4;
}

.tile {
    width: 280px;
    /* height is now auto */
    margin-bottom: 20px;
    /* Add gap here since we are in a flex column */
    opacity: 0;
    transition: opacity 1.5s ease-in;
}

.tile img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    /* Optional: adds a nice touch */
}

.tile-column.scroll-down {
    will-change: transform;
    animation: scrollDown 120s linear infinite;
    animation-play-state: paused;
    /* Ensure it starts paused */
}

.tile-column.scroll-up {
    will-change: transform;
    animation: scrollUp 100s linear infinite;
    animation-play-state: paused;
    /* Ensure it starts paused */
}

@keyframes scrollDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes scrollUp {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

.content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 40px;
}

.message {
    font-size: 120px;
    font-weight: 300;
    letter-spacing: -2px;
    color: #000000;
    background: rgba(255, 255, 255, 0.95);
    padding: 40px 80px;
    border: 1px solid #000000;

    /* Animation initial state */
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-out;
}

body.show-text .message {
    opacity: 1;
    transform: translateY(0);
}

.card {
    position: relative;
    width: 100%;
    max-width: 860px;
    max-height: 80vh;
    padding: 48px 56px;
    border-radius: 32px;
    box-shadow: 0 30px 120px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    pointer-events: auto;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: normal;
}

.card h1 {
    font-size: 64px;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.hero-top h1 {
    margin-bottom: 0;
}

.card h3 {
    font-size: 28px;
    margin: 32px 0 16px;
}

.card hr {
    border: none;
    border-top: 1px solid #000000;
    margin: 32px 0;
}

.card ul {
    margin: 16px 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card li {
    margin-left: 12px;
}

.card li.double-indent {
    margin-left: 36px;
}

.card strong {
    background: linear-gradient(120deg, rgba(255, 251, 18, 0.6), rgba(255, 230, 0, 0.35));
    padding: 0 6px;
    border-radius: 12px;
    font-weight: 600;
}

.card blockquote {
    margin: 24px 0;
    padding: 16px 24px;
    border-left: 4px solid #000000;
    background: rgba(0, 0, 0, 0.04);
    font-style: italic;
}

.card a {
    color: #d72638;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(215, 38, 56, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.card a:hover,
.card a:focus-visible {
    color: #a01a28;
    border-color: rgba(160, 26, 40, 0.7);
}

.card::-webkit-scrollbar {
    width: 10px;
}

.card::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
}

.card::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 999px;
}

.photo-link::after {
    font-size: 0.85em;
}

.video-embed {
    margin-top: 32px;
    padding: 16px 20px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.video-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.video-frame {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-embed--inline {
    margin-top: 0;
    padding: 12px 16px;
    min-width: 220px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 16px;
}

.video-embed--inline .video-frame {
    max-width: 240px;
}

.audio-player {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-player audio {
    display: none;
}

.audio-label-minimal {
    font-size: 12px;
    font-weight: 300;
    font-style: italic;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.02em;
}

.audio-toggle {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.audio-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.audio-toggle svg {
    width: 14px;
    height: 14px;
    color: rgba(0, 0, 0, 0.7);
}

.audio-toggle .pause-icon {
    display: none;
}

.audio-toggle.playing .play-icon {
    display: none;
}

.audio-toggle.playing .pause-icon {
    display: block;
}

.slideshow-button {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    padding: 12px 18px;
    border-radius: 999px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.slideshow-button:hover,
.slideshow-button:focus-visible {
    transform: translateY(-2px);
    opacity: 0.9;
}

.slideshow-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

body.show-text .slideshow-button {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .message {
        font-size: 60px;
        padding: 30px 50px;
    }

    .tile {
        width: 200px;
        /* height: 200px; Removed fixed height */
    }

    .slideshow-button {
        right: 16px;
        bottom: 16px;
        font-size: 14px;
        padding: 10px 14px;
    }

    .card {
        padding: 32px 24px;
        max-height: 85vh;
    }

    .card h1 {
        font-size: 40px;
    }

    .card h3 {
        font-size: 24px;
    }

    .audio-player {
        top: 16px;
        right: 16px;
        gap: 6px;
    }

    .audio-label-minimal {
        font-size: 10px;
    }

    .audio-toggle {
        width: 28px;
        height: 28px;
    }

    .audio-toggle svg {
        width: 12px;
        height: 12px;
    }
}