/* Variables for color palette and spacing */
:root {
    --color-main: #111;      /* Strong black */
    --color-accent: #f65;   /* A single bright red/reddish accent */
    --color-text: #222;     /* Slightly softer dark gray for body text */
    --space-unit: 3vw;      /* Responsive spacing unit */
}

/* Global reset and base styling (Brutalist principles) */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

 
/* Global reset and base styling (Brutalist principles) */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #fff;
    color: var(--color-text);
    min-height: 100vh; /* Key for vertical centering */
    display: flex;       /* Enable Flexbox layout */
    flex-direction: column; /* Stack primary elements vertically */
    justify-content: center; /* Center content vertically in the viewport */
    align-items: center;   /* Center content horizontally in the viewport */
    padding: 0; /* Remove body padding to allow centering at edges */
}

/* Utility class for block borders/dividers */
.border-line {
    width: 1px;
    background-color: var(--color-main);
    margin: 2rem 0;
}


/* Utility class for block borders/dividers */
.border-line {
    width: 1px;
    background-color: var(--color-main);
    margin: 2rem 0;
}

a {
    text-decoration: none;
    color: var(--color-main);
}

/* Site Brand/Header */
.site-brand {
    display: block;
    font-size: 1.5rem; /* Medium size, noticeable */
    letter-spacing: -0.03em;
    margin-bottom: 4vw;
    padding: 0 .5rem;
}

/* Container for the main content */
.container {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

/* Main Personal Info Section */
.personal-info {
    padding: 4vw 0;
}

/* Name (H1) - Large and impactful */
.name {
    font-size: clamp(2.5rem, 8vw, 5rem); /* Responsive size range */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1vw;
}

/* Occupation/Title (P) - Secondary info */
.title {
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    color: var(--color-accent); /* Use accent color for functional role */
    letter-spacing: 0.1em; /* Technical/label feeling */
    margin-bottom: 3vw;
    text-transform: uppercase;
}

 
    /* Links container (X and Domain) */
    .links {
        display: flex;
        flex-direction: column; 
        gap: 1rem;
        margin-bottom: 3vw; /* Slightly reducing margin as there is less content */
    }

    /* Single Primary Handle Styling - Replaces previous individual link/domain styles */
    .primary-handle {
        font-size: clamp(1.5rem, 4vw, 2rem);
        padding: 0.7rem 1.8rem;
        display: inline-block; /* Use block for full visual weight and centering potential */
        border: 3px solid var(--color-main); /* More aggressive border to make it central focus */
        text-transform: uppercase;
        font-weight: 0; /* Light/technical feel */
        letter-spacing: -0.02em;
        transition: all 0.1s ease;
    }

     /* Interaction for the single handle */
    .primary-handle:hover {
        background-color: var(--color-main);
        color: #fff; /* Change text color on hover */
        transform: translateY(-2px);
    }

/* Footer Styling */
footer {
    margin-top: clamp(4vw, 5vw, 6rem);
    font-size: 0.9rem;
    color: var(--color-text);
    border-top: 1px dashed #ccc; /* Subtler division */
    padding-top: 2vw;
    display: block;
}

/* Responsive Adjustments (Tablet/Mobile consideration) */
@media (min-width: 768px) {
    .links {
        flex-direction: row; /* Side by side on large screens */
        justify-content: center;
        gap: 2rem;
        margin-bottom: 4vw;
    }

    /* Adjusting domain display for desktop - inline with other links if possible, or keep block style strong */
     .domain {
        display: inline-block; /* Allows it to sit nicely alongside others if we change structure */
        padding: 0.8rem 1.5rem;
        margin-left: 2rem; 
    }
}


/* Dark Mode Preference */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212; /* Deep charcoal background */
        color: #ddd; /* Light text color */
    }

    /* Overriding foreground/background contrast */
    .site-brand, .link-item {
        border-color: #444; 
        color: #fff;
    }

    /* Adjusting dark modes for specific elements */
    .name {
        color: #fff;
    }
    
    /* Makes the occupation color pop against the dark background */
    .title {
        color: var(--color-accent); 
        text-shadow: 0 0 5px rgba(246, 85, 97, 0.2); /* Subtle glow effect for accent */
    }

    /* Making the domain tag stand out against dark mode's container feel */
    .domain {
        background-color: #3a3a3a;
        box-shadow: 2px 2px 0 #111;
        color: #fff;
    }

     /* Adjusting general link hover background for dark backgrounds */
    .link-item:hover {
        background-color: rgba(255, 255, 255, 0.08);
        cursor: pointer;
    }
}