:root {
    --bg-color: #050505;
    /* Deepest Black */
    --card-bg: #0a0a0a;
    /* Very subtle separation */
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --border-color: #1f1f1f;
    --accent-color: #ffffff;
    /* Minimalist accent is often just white */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --radius-lg: 16px;
    --radius-md: 8px;
    --spacing: 1.5rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-color);
    /* Grid Paper Look */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    /* Grid cell size */
    color: var(--text-primary);
    font-family: var(--font-family);
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align top for natural scroll */
    min-height: 100vh;
    padding: 4rem 1rem;
}

/* Main Container */
.profile-container {
    width: 100%;
    max-width: 520px;
    margin: 2rem auto;
    /* Add space for the tape */
}

/* Card Style - Border & Tape */
.profile-card {
    background: #0a0a0a;
    /* distinct dark background */
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* The crisp outline */
    border-radius: 20px;
    padding: 3rem 2rem;
    /* Restore padding */
    position: relative;
    /* Anchor for tape */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* The Tape Effect - Realism */
.profile-card::before {
    content: '';
    position: absolute;
    top: -15px;
    /* Adjust vertical position */
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    /* Slight natural tilt */
    width: 120px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    /* Frosted tape look */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Edge highlight */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Lift shadow */
    z-index: 10;
    pointer-events: none;
    /* Click through */
}

/* Optional: Second subtle tape piece or visual anchor if needed */
.profile-card::after {
    /* content: ''; */
    /* Can uncomment for a second piece */
    /* ... */
}

/* Header */
.card-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    /* padding-bottom: 2rem; border-bottom: 1px solid var(--border-color); */
    /* Remove separation border inside card for cleaner tape look? 
       User said minimal. I'll keep it but maybe softer. */
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.avatar-container {
    width: 140px;
    /* Bigger size */
    height: 140px;
    border-radius: 28px;
    /* Curvy square (Squircle) */
    overflow: hidden;
    background-color: var(--card-bg);
    border: 1px solid #222;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Add depth */
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    /* Slight zoom for framing */
}

/* Removed hover grayscale effect */

.header-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    /* Center text vertically with big image */
}

.name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.role {
    font-size: 1.1rem;
    /* Increased from 0.9rem */
    color: #bbb;
    /* Brighter grey to stand out */
    font-weight: 500;
    margin-top: 0.25rem;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
    /* More spacing */
    margin-top: 1rem;
}

.social-icons a {
    color: #ddd;
    /* Brighter */
    font-size: 1.4rem;
    /* Significantly larger */
    transition: all 0.2s ease;
}

.social-icons a:hover {
    color: #fff;
    transform: scale(1.1);
}

/* Sections */
.section {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #444;
    /* Very subtle section header */
}

/* Bio */
.bio-section p {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.7;
    font-weight: 300;
}

/* Items (Ventures, etc) */
.item-group {
    margin-bottom: 2rem;
}

/* Remove the specific highlight-card container background for minimal look, 
   or keep it very subtle. Let's make it invisible but keep spacing. */
.highlight-card {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    position: relative;
    padding-left: 1rem;
    /* Indent slightly for hierarchy */
    border-left: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.highlight-card:hover {
    border-left-color: var(--text-primary);
    /* Minimal interactive state */
}

.highlight-card::before {
    display: none;
    /* Remove gradient strip */
}

.item-title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
}

.badge {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-secondary);
    background: #111;
    padding: 2px 8px;
    border: 1px solid #222;
    border-radius: 4px;
}

.item-list {
    list-style: none;
    padding-left: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.item-list li {
    margin-bottom: 0.5rem;
}

/* Typography Hierarchy */
.name {
    color: #ffffff;
    /* Stark white */
}

.item-title {
    color: #ffffff;
}

.section-title {
    color: #666;
    /* Subtle section headers like 'Content', 'Ventures' */
}

/* Body Text - Grey */
.bio-section p,
.item-list,
.role {
    color: #888;
}

/* Highlighted Words - Pearl White */
.highlight-text {
    color: #FDFCF0;
    /* Pearl White */
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 253, 220, 0.4);
    /* Subtle pearl glow */
}

/* Links within text - Keep them distinctive or match highlight? 
   Ref uses blue. I will use a subtle blue-grey or just bright white for links 
   to distinct them from the pearl highlights if they are different concepts.
   Let's make links subtle blue like the user requested initially or keep minimal.
   The user *specifically* asked for pearl white highlights for words. */
a {
    transition: all 0.2s ease;
}

/* Specific link styling to match "Reference" style (usually blue-ish) */
.item-list a,
.email-link {
    color: #5A9BD5;
    /* Muted Blue typical of these cleaner sites */
    border-bottom: none;
    text-decoration: none;
}

.item-list a:hover,
.email-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Contact Specifics */
.email-link {
    color: var(--text-primary) !important;
    border-bottom: 1px solid #333 !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: 400 !important;
}


/* Animations - Subtle Fade Only */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 600px) {
    body {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .profile-container {
        padding-top: 0;
        margin-top: 0;
    }

    .card-header {
        flex-direction: column;
        /* Stack on mobile for better space with big image */
        text-align: center;
        align-items: center;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        gap: 1.5rem;
    }

    .avatar-container {
        width: 120px;
        /* Still large on mobile */
        height: 120px;
        margin: 0 auto;
    }

    .name {
        font-size: 2rem;
    }

    .social-icons {
        justify-content: center;
    }

    /* Adjust indent for mobile */
    .highlight-card {
        padding-left: 0.75rem;
    }
}

/* Desktop "Zoomed/Stretched" Layout */
@media (min-width: 1024px) {
    body {
        align-items: flex-start;
        /* Let it flow naturally from top */
        padding-top: 5vh;
        /* Slight top offset */
    }

    .profile-container {
        max-width: 960px;
        /* Much wider */
        transform: none;
        /* Remove artificial zoom */
        margin-top: 0;
        margin-bottom: 4rem;
    }

    /* Scale up fonts slightly to match the wider layout */
    body {
        font-size: 20px;
    }

    .name {
        font-size: 3rem;
    }

    .profile-card {
        padding: 4rem;
        /* More breathing room */
    }
}