/* =============================================================================
 * Personal Website
 * =============================================================================
 *
 * Premium monochrome single-page profile.
 *
 * Design:
 *
 *   - Large profile image as the primary focal point
 *   - Consistent top-left lighting direction
 *   - 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-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%;

    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;

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

body {
    min-height: 100vh;
    min-height: 100svh;

    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;

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

/*
 * Do not apply 100vh to every nested Material container.
 * The landing page alone controls the viewport height.
 */

.md-container,
.md-main,
.md-main__inner,
.md-content {
    min-height: 0;
}

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

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

html.landing,
html.landing body {
    background: #e09f67;
}

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

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

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    padding:
        max(1.5rem, env(safe-area-inset-top))
        max(1.5rem, env(safe-area-inset-right))
        max(1.5rem, env(safe-area-inset-bottom))
        max(1.5rem, env(safe-area-inset-left));

    text-align: center;
}

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

.landing-image {
    display: block;

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

    margin: 0;

    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;
}

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

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

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

@media (max-width: 1024px) {
    .landing-page {
        padding:
            max(1.75rem, env(safe-area-inset-top))
            max(1.75rem, env(safe-area-inset-right))
            max(1.75rem, env(safe-area-inset-bottom))
            max(1.75rem, env(safe-area-inset-left));
    }

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

/* -----------------------------------------------------------------------------
 * 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 {
        min-height: 100svh;

        padding:
            max(1.25rem, env(safe-area-inset-top))
            max(1.25rem, env(safe-area-inset-right))
            max(1.25rem, env(safe-area-inset-bottom))
            max(1.25rem, env(safe-area-inset-left));
    }

    .landing-image {
        /*
         * The image must fit both the screen width and the available height.
         * Around 9rem is reserved for text, spacing and page padding.
         */

        width: min(82vw, calc(100svh - 9rem), 420px);
        max-width: 92vw;
        max-height: calc(100svh - 9rem);

        object-fit: contain;

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

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

@media (max-width: 420px) {
    .landing-page {
        padding:
            max(1rem, env(safe-area-inset-top))
            max(1rem, env(safe-area-inset-right))
            max(1rem, env(safe-area-inset-bottom))
            max(1rem, env(safe-area-inset-left));
    }

    .landing-image {
        width: min(88vw, calc(100svh - 8.5rem), 360px);
        max-width: 88vw;
        max-height: calc(100svh - 8.5rem);
    }
}

/* -----------------------------------------------------------------------------
 * Very Short Mobile Displays
 * -------------------------------------------------------------------------- */

@media (max-width: 768px) and (max-height: 600px) {
    .landing-page {
        justify-content: flex-start;

        min-height: 100svh;

        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .landing-image {
        width: min(74vw, calc(100svh - 7.5rem), 330px);
        max-height: calc(100svh - 7.5rem);
    }
}

/* -----------------------------------------------------------------------------
 * Short Desktop and Tablet Viewports
 * -------------------------------------------------------------------------- */

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

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

        object-fit: contain;
    }
}

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

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

/* -----------------------------------------------------------------------------
 * 404 / Personal Error
 * -------------------------------------------------------------------------- */

.personal-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;

    padding: 2rem 1.25rem;
    text-align: center;
}

.personal-error__code {
    margin: 0 0 0.35rem;

    color: var(--silver-dark);

    font-size: clamp(3.5rem, 12vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
}

.personal-error__title {
    margin: 0 0 0.85rem;

    color: var(--silver-light);

    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.personal-error__message {
    max-width: 28rem;
    margin: 0 auto 1.75rem;

    color: var(--title-dark);

    font-size: 0.95rem;
    line-height: 1.55;
}

.personal-error__actions {
    margin: 0;
}

.personal-error__button {
    display: inline-block;

    padding: 0.7rem 1.35rem;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.35rem;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    color: var(--silver-light);

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.personal-error__button:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}