/* =============================================================================
 * Personal Website
 * =============================================================================
 *
 * Premium monochrome single-page profile.
 *
 * Design:
 *
 *   - Large profile image as the primary focal point
 *   - Tight nameplate-style spacing beneath the image
 *   - Raised machined-metal typography
 *   - Consistent top-left lighting direction
 *   - Deep charcoal background with subtle radial illumination
 *   - No visible MkDocs Material interface
 *
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * Theme
 * -------------------------------------------------------------------------- */

:root {
    --background-outer: #090909;
    --background-inner: #181818;
    --background-mid: #121212;

    --silver-highlight: #ffffff;
    --silver-light: #e8e8e8;
    --silver-mid: #c6c6c6;
    --silver-dark: #8d8d8d;

    --title-light: #b8b8b8;
    --title-dark: #8f8f8f;

    --shadow-deep: rgba(0, 0, 0, 0.95);
    --shadow-soft: rgba(0, 0, 0, 0.45);
    --highlight-soft: rgba(255, 255, 255, 0.18);
}

/* -----------------------------------------------------------------------------
 * Reset
 * -------------------------------------------------------------------------- */

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

html,
body {
    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;
}

html {
    background: var(--background-outer);
}

body {
    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 42% 34%,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.012) 24%,
            transparent 48%
        ),
        radial-gradient(
            circle at 50% 44%,
            var(--background-inner) 0%,
            var(--background-mid) 48%,
            var(--background-outer) 100%
        );

    color: var(--silver-mid);

    font-family:
        Inter,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------------------------
 * Hide MkDocs Material Interface
 * -------------------------------------------------------------------------- */

.md-header,
.md-tabs,
.md-sidebar,
.md-footer,
.md-top,
.md-search,
.md-source,
.md-content__button,
.md-nav,
.md-nav__title,
.md-nav__list,
.md-sidebar--primary,
.md-sidebar--secondary {
    display: none !important;
}

/* -----------------------------------------------------------------------------
 * Remove MkDocs Material Layout Constraints
 * -------------------------------------------------------------------------- */

.md-container,
.md-main,
.md-main__inner,
.md-content,
.md-content__inner {
    width: 100%;
    max-width: none !important;

    min-height: 100vh;

    margin: 0 !important;
    padding: 0 !important;
}

.md-content__inner::before,
.md-content__inner::after {
    display: none;
}

/* -----------------------------------------------------------------------------
 * Landing Page
 * -------------------------------------------------------------------------- */

.landing-page {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 100vh;

    padding: 2rem;

    text-align: center;
}

/* -----------------------------------------------------------------------------
 * Profile Image
 * -------------------------------------------------------------------------- */

.landing-image {
    display: block;

    width: clamp(360px, 40vw, 600px);
    max-width: 90vw;
    height: auto;

    margin: 0 0 0.3rem;

    filter:
        drop-shadow(-2px -2px 1px rgba(255, 255, 255, 0.035))
        drop-shadow(8px 12px 18px rgba(0, 0, 0, 0.34));

    user-select: none;
    pointer-events: none;

    -webkit-user-drag: none;
}

/* -----------------------------------------------------------------------------
 * Name
 * -------------------------------------------------------------------------- */

.landing-name {
    margin: 0;

    color: var(--silver-mid);

    font-size: clamp(2.8rem, 4vw, 4rem);
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 1;

    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.24),
        1px 1px 0 rgba(0, 0, 0, 0.98),
        2px 2px 1px rgba(0, 0, 0, 0.74),
        4px 5px 8px rgba(0, 0, 0, 0.5),
        0 0 2px rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------------------------------------------
 * Job Title
 * -------------------------------------------------------------------------- */

.landing-title {
    margin: 0.7rem 0 0;

    color: var(--title-light);

    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 500;

    letter-spacing: 0.22em;
    line-height: 1.4;

    text-transform: uppercase;

    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.14),
        1px 1px 0 rgba(0, 0, 0, 0.92),
        2px 2px 4px rgba(0, 0, 0, 0.42);
}

/* -----------------------------------------------------------------------------
 * Large Displays
 * -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
    .landing-image {
        width: min(36vw, 620px);
    }

    .landing-name {
        font-size: 4.15rem;
    }

    .landing-title {
        font-size: 1.15rem;
    }
}

/* -----------------------------------------------------------------------------
 * Tablet
 * -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .landing-page {
        padding: 1.75rem;
    }

    .landing-image {
        width: clamp(320px, 55vw, 520px);
        margin-bottom: 0.25rem;
    }

    .landing-name {
        font-size: clamp(2.65rem, 6vw, 3.7rem);
    }
}

/* -----------------------------------------------------------------------------
 * Mobile
 * -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body {
        background:
            radial-gradient(
                circle at 42% 32%,
                rgba(255, 255, 255, 0.03) 0%,
                rgba(255, 255, 255, 0.01) 24%,
                transparent 46%
            ),
            radial-gradient(
                circle at 50% 42%,
                var(--background-inner) 0%,
                var(--background-mid) 48%,
                var(--background-outer) 100%
            );
    }

    .landing-page {
        padding: 1.5rem;
    }

    .landing-image {
        width: clamp(260px, 82vw, 420px);
        max-width: 92vw;

        margin-bottom: 0.2rem;

        filter:
            drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.03))
            drop-shadow(6px 9px 14px rgba(0, 0, 0, 0.32));
    }

    .landing-name {
        font-size: clamp(2.25rem, 9vw, 3rem);

        text-shadow:
            -1px -1px 0 rgba(255, 255, 255, 0.2),
            1px 1px 0 rgba(0, 0, 0, 0.96),
            2px 2px 1px rgba(0, 0, 0, 0.66),
            3px 4px 6px rgba(0, 0, 0, 0.42);
    }

    .landing-title {
        margin-top: 0.65rem;

        font-size: 0.9rem;
        letter-spacing: 0.16em;
    }
}

/* -----------------------------------------------------------------------------
 * Small Mobile Displays
 * -------------------------------------------------------------------------- */

@media (max-width: 420px) {
    .landing-page {
        padding: 1rem;
    }

    .landing-image {
        width: 88vw;
        max-width: 360px;
    }

    .landing-name {
        font-size: clamp(2.05rem, 10vw, 2.7rem);
    }

    .landing-title {
        font-size: 0.78rem;
        letter-spacing: 0.13em;
    }
}

/* -----------------------------------------------------------------------------
 * Short Viewports
 * -------------------------------------------------------------------------- */

@media (max-height: 800px) and (min-width: 769px) {
    .landing-page {
        padding: 1.25rem;
    }

    .landing-image {
        width: min(36vw, 500px);
        max-height: 61vh;

        margin-bottom: 0.2rem;

        object-fit: contain;
    }

    .landing-name {
        font-size: clamp(2.55rem, 3.6vw, 3.45rem);
    }

    .landing-title {
        margin-top: 0.6rem;
    }
}

/* -----------------------------------------------------------------------------
 * Accessibility
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}