@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&display=swap');
     body {
            background-color: #E7E7E0;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-weight: 300;
            margin: 0;
            min-height: 100vh;
        }
        .page {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4.5rem 1.5rem 5rem;
            gap: 2.5rem;
        }
        .centered-title {
            text-align: center;
            font-weight: 400;
            font-size: 1.5rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin: 0;
        }
        .centered-image {
            display: flex;
            justify-content: center;
            margin: 0;
        }
        .amber-photo {
            width: 200px;
            height: auto;
            object-fit: contain;
            transition: transform 0.7s cubic-bezier(.4,1.6,.4,1);
        }
        .bio-container {
            max-width: 640px;
            margin: 0 auto;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            border: none;
            padding: 2.2rem 2.4rem;
            text-align: center;
            font-size: 0.8rem;
            line-height: 1.75;
            color: #332d25;
            opacity: 0.5;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(.4,1.6,.4,1), transform 0.7s cubic-bezier(.4,1.6,.4,1);
        }
        .bio-container.visible {
            opacity: 1;
            transform: translateY(0);
        }
        @media (max-width: 600px) {
            .amber-photo {
                width: 200px;
            }
            .bio-container {
                padding: 1.4rem 1.2rem;
            }
        }