/* CSS Variables for Light & Dark Mode (Zinc Palette) */
:root {
    --bg: #f4f4f5;
    /* zinc-100 */
    --text-main: #27272a;
    /* zinc-800 */
    --text-heading: #18181b;
    /* zinc-900 */
    --text-muted: #71717a;
    /* zinc-500 */
    --text-eyebrow: #a1a1aa;
    /* zinc-400 */
    --line-color: #d4d4d8;
    /* zinc-300 */
    --card-bg: #e4e4e7;
    /* zinc-200 */
    --card-ring: #d4d4d8;
    /* zinc-300 */
    --btn-bg: rgba(228, 228, 231, 0.8);
    --btn-hover: #d4d4d8;
    --btn-border: rgba(212, 212, 216, 0.7);
    --btn-text: #3f3f46;
    /* zinc-700 */
    --toggle-text: #52525b;
    /* zinc-600 */
}

html.dark {
    --bg: #09090b;
    /* zinc-950 */
    --text-main: #e4e4e7;
    /* zinc-200 */
    --text-heading: #f4f4f5;
    /* zinc-100 */
    --text-muted: #a1a1aa;
    /* zinc-400 */
    --text-eyebrow: #71717a;
    /* zinc-500 */
    --line-color: #3f3f46;
    /* zinc-700 */
    --card-bg: #18181b;
    /* zinc-900 */
    --card-ring: #27272a;
    /* zinc-800 */
    --btn-bg: rgba(24, 24, 27, 0.8);
    --btn-hover: #27272a;
    --btn-border: #27272a;
    --btn-text: #d4d4d8;
    /* zinc-300 */
    --toggle-text: #a1a1aa;
    /* zinc-400 */
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::selection {
    background-color: #a1a1aa;
    color: #09090b;
}

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.5s ease, color 0.5s ease;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow-x: hidden;
}

@media (min-width: 640px) {
    body {
        padding: 2.5rem;
    }
}

/* Background Canvas */
#dot-grid-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Theme Toggle Button */
#theme-toggle {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 30;
    padding: 0.625rem;
    border-radius: 9999px;
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--toggle-text);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#theme-toggle:hover {
    background-color: var(--btn-hover);
}

#theme-toggle svg {
    width: 1rem;
    height: 1rem;
}

#icon-sun {
    display: none;
}

#icon-moon {
    display: block;
}

html.dark #icon-sun {
    display: block;
}

html.dark #icon-moon {
    display: none;
}

/* Main Centered Container */
main {
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 10;
}

@media (min-width: 768px) {
    main {
        max-width: 540px;
        flex-direction: row;
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    main {
        width: 33.333333%;
        min-width: 460px;
        max-width: 580px;
    }
}

/* Left Column: 9:16 Portrait */
.portrait-col {
    width: 12rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .portrait-col {
        width: 13rem;
    }
}

@media (min-width: 768px) {
    .portrait-col {
        width: 41.666667%;
    }
}

.portrait-frame {
    aspect-ratio: 9 / 16;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--card-ring);
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Right Column: Content */
.content-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.875rem;
}

@media (min-width: 768px) {
    .content-col {
        width: 58.333333%;
        align-items: flex-start;
        text-align: left;
    }
}

/* Eyebrow */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--text-eyebrow);
    font-weight: 500;
}

.eyebrow-line {
    width: 1.5rem;
    height: 1px;
    background-color: var(--line-color);
    display: none;
}

@media (min-width: 768px) {
    .eyebrow-line {
        display: inline-block;
    }
}

/* Name Heading */
h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--text-heading);
    transition: color 0.5s ease;
}

@media (min-width: 640px) {
    h1 {
        font-size: 3rem;
    }
}

h1 br {
    display: none;
}

@media (min-width: 768px) {
    h1 br {
        display: inline;
    }
}

h1 .last-name {
    font-style: italic;
    font-weight: 400;
    color: var(--text-muted);
}

/* Bio Paragraph */
.bio {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.625;
    max-width: 240px;
    padding-top: 0.25rem;
}

@media (min-width: 640px) {
    .bio {
        font-size: 0.875rem;
    }
}

/* Social Links */
.social-links {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-top: 0.5rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    transition: all 0.3s ease;
}

.social-btn:hover {
    background-color: var(--btn-hover);
    transform: scale(1.02);
}

.social-btn svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
    flex-shrink: 0;
}