* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* === TYPOGRAPHY === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 18px;
    --font-size-md: 20px;
    --font-size-lg: 44px;
    
    /* === COLORS === */
    /* Text colors */
    --color-text-primary: #000;
    --color-text-secondary: #565656;
    --color-text-tertiary: #6f6f6f;
    
    /* Border colors */
    --color-border: #ebebeb;
    
    /* Button colors */
    --color-button-bg-light: #fdfffc;
    --color-button-text-dark: #484848;
    --color-button-border-dark: #4a4a4a;
    --color-button-text-blue: #016996;
    --color-button-border-blue: #295b78;
    
    /* === SPACING === */
    --spacing-xs: 8px;
    --spacing-sm: 20px;
    --spacing-sm-mobile: 12px;
    --spacing-md: 40px;
    --spacing-lg: 64px;
    --widget-padding: 1.5rem;
    
    /* === BORDER RADIUS === */
    --radius-unit: 1;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 999px;
    --radius-circle: 50%;
    --widget-radius: calc(var(--radius-unit) * 24px);
    
    /* === EFFECTS === */
    --shadow-widget: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    --transition-bg: background-color 0.2s ease;
    
    /* === TRANSITION SCALE === */
    --transition-fast: 0.2s;
    --transition-medium: 0.3s;
    
    /* === ANIMATION === */
    --animation-duration: 0.6s;
    --animation-delay-base: 0.1s;
    
    /* === WIDGET COLORS === */
    --widget-color: #000;
    --widget-color-bg: #fff;
    --widget-color-hover: rgba(0, 0, 0, 0.03);
    --widget-color-active: #efefef;
    
    /* === COMPONENT SIZES === */
    --profile-image-size: 184px;
    --profile-image-size-mobile: 120px;
    --box-small-size: 175px;
    --box-large-size: 390px;
    --box-content-width: 127px;
    --box-left-width: 156px;
    --box-right-width: 178px;
    
    /* === MOBILE TYPOGRAPHY === */
    --font-size-lg-mobile: 32px;
    --font-size-md-mobile: 16px;
    
    /* === OPACITY SCALE === */
    --opacity-hover-light: 0.8;
    --opacity-hover-heavy: 0.9;
    --opacity-overlay: 0.03;
    
    /* === BOX COLORS === */
    --color-box-accent: #FFB733;
    --color-box-quote-bg: #FEFEF4;
    --color-label-bg: #fff;
    --color-label-border: #dbdbdb;
    
    /* === Z-INDEX SCALE === */
    --z-overlay: 10;
    --z-label: 20;
    --z-button: 30;
    --z-toast: 1000;
    
    /* Widget theme colors */
    --color-linkedin-bg: #f1f7fc;
    --color-linkedin-icon: #016996;
    --color-portfolio-bg: #fff8f7;
    --color-portfolio-icon: #fb6920;
    --color-website-bg: #fffcf7;
    --color-website-icon: #fbbc20;
}

/* ========================
   FONT LOADING
   ======================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Inter Light'), local('Inter-Light');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter Regular'), local('Inter-Regular');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Inter SemiBold'), local('Inter-SemiBold');
}

/* ========================
   LAYOUT
   ======================== */

body {
    font-family: var(--font-family);
    background: white;
    color: var(--color-text-primary);
    min-height: 100vh;
    padding: var(--spacing-lg) 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

.page-wrapper {
    padding: 0 64px;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1520px;
    margin: 0 auto;
}

/* Left Side Styles */
.left-side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: clamp(260px, calc(100% - 820px - 24px), 500px);
    min-width: 260px;
    max-width: 500px;
    flex-shrink: 0;
    animation: fadeSlideUp var(--animation-duration) ease-out backwards;
    animation-delay: 0s;
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Right Side Styles */
.right-side {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 820px;
    flex-shrink: 0;
}

/* ========================
   PROFILE
   ======================== */

.profile-image {
    width: var(--profile-image-size);
    height: var(--profile-image-size);
    border-radius: var(--radius-circle);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* ========================
   TYPOGRAPHY
   ======================== */

.name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: normal;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.bio {
    font-size: var(--font-size-md);
    font-weight: 300;
    line-height: 28px;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.role,
.location {
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: normal;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.role strong,
.location strong {
    font-weight: 600;
}

.section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 18px 0;
    margin-bottom: 10px;
    animation: fadeSlideUp var(--animation-duration) ease-out backwards;
    will-change: opacity, transform;
    transform: translateZ(0);
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* Contact Info title */
.right-side > :nth-child(1) {
    animation-delay: calc(var(--animation-delay-base) * 1);
}

/* Resources title */
.right-side > :nth-child(3) {
    animation-delay: calc(var(--animation-delay-base) * 6);
}

/* ========================
   GRID LAYOUTS
   ======================== */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--box-small-size));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--box-large-size));
    gap: var(--spacing-md);
}

.resources-right-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ========================
   BOX COMPONENTS
   ======================== */

/* Base box styles - shared properties */
.box-1-4,
.box-2-4,
.box-square {
    padding: var(--widget-padding);
    border: 1px solid var(--color-border);
    border-radius: var(--widget-radius);
    box-shadow: var(--shadow-widget);
    transition: var(--transition-bg);
    animation: fadeSlideUp var(--animation-duration) ease-out backwards;
    will-change: opacity, transform;
    contain: layout style paint;
    transform: translateZ(0);
    text-decoration: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
}

/* Individual box sizes and layouts */
.box-1-4 {
    width: var(--box-small-size);
    height: var(--box-small-size);
}

.box-2-4 {
    width: var(--box-large-size);
    height: var(--box-small-size);
    display: flex;
    gap: var(--spacing-xs);
}

.box-square {
    width: var(--box-large-size);
    height: var(--box-large-size);
}

/* Staggered animation delays for contact boxes */
.contact-grid .box-1-4:nth-child(1) { animation-delay: calc(var(--animation-delay-base) * 2); }
.contact-grid .box-1-4:nth-child(2) { animation-delay: calc(var(--animation-delay-base) * 3); }
.contact-grid .box-1-4:nth-child(3) { animation-delay: calc(var(--animation-delay-base) * 4); }
.contact-grid .box-1-4:nth-child(4) { animation-delay: calc(var(--animation-delay-base) * 5); }

/* Staggered animation delays for resource boxes */
.resources-grid .box-square:nth-child(1) { animation-delay: calc(var(--animation-delay-base) * 7); }
.resources-grid .box-square:nth-child(2) { animation-delay: calc(var(--animation-delay-base) * 8); }
.resources-grid .resources-right-column .box-2-4:nth-child(1),
.resources-grid .resources-right-column .box-text-only:nth-child(1) { animation-delay: calc(var(--animation-delay-base) * 8); }
.resources-grid .resources-right-column .box-2-4:nth-child(2),
.resources-grid .resources-right-column .box-text-only:nth-child(2) { animation-delay: calc(var(--animation-delay-base) * 9); }

/* Box internal structure */
.box-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: var(--box-content-width);
    height: var(--box-content-width);
}

.box-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: var(--box-left-width);
    height: var(--box-content-width);
}

.box-right {
    width: var(--box-right-width);
    height: var(--box-content-width);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.box-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Box text content */
.box-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Box content with image variant */
.box-content-full {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    height: 100%;
}

.box-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.box-text-content-full {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.box-text-content-full .box-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.box-text-content-full .box-subtitle {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-tertiary);
    line-height: 1.4;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.box-image-bottom {
    width: 100%;
    height: 192px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: auto;
}

.box-image-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.box-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: normal;
    white-space: pre-wrap;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.box-subtitle {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-tertiary);
    line-height: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* ========================
   ICONS
   ======================== */

.icon {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    overflow: hidden;
}

.icon img {
    width: 24px;
    height: 24px;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.icon-website img {
    width: 24px;
    height: 16px;
}

/* Icon backgrounds */
.icon-linkedin {
    background: var(--color-linkedin-icon);
}

.icon-presentation {
    background: var(--color-portfolio-icon);
}

.icon-website {
    background: var(--color-website-icon);
}

/* Box theme backgrounds */
.box-linkedin {
    background: var(--color-linkedin-bg);
}

.box-portfolio {
    background: var(--color-portfolio-bg);
}

.box-website {
    background: var(--color-website-bg);
}

/* Consolidated hover states */
.box-linkedin:hover,
.box-portfolio:hover,
.box-website:hover {
    background-image: linear-gradient(var(--widget-color-hover), var(--widget-color-hover));
}

/* ========================
   FOCUS & ACTIVE STATES
   ======================== */


/* Active states for tactile feedback */
.box-1-4:active,
.box-2-4:active,
.box-square:active,
.box-image:active,
.box-text-only:active {
    transform: scale(0.98);
}


/* Button active states */
.btn-outline-dark:active {
    background: var(--color-button-border-dark);
    color: white;
}

.btn-outline-blue:active {
    background: var(--color-button-border-blue);
    color: white;
}

.btn-solid-orange:active {
    transform: scale(0.96);
}

.btn-solid-yellow:active {
    transform: scale(0.96);
}

/* Touch device alternatives */
@media (hover: none) {
    .box-linkedin:hover,
    .box-portfolio:hover,
    .box-website:hover {
        background-image: none;
    }
    
    .box-linkedin:active,
    .box-portfolio:active,
    .box-website:active {
        background-image: linear-gradient(var(--widget-color-hover), var(--widget-color-hover));
    }
}

/* ========================
   IMAGE BOX COMPONENT
   ======================== */

.box-image {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    display: block;
}

.box-clickable {
    cursor: pointer;
}

/* Overlay pseudo-element for image and text-only boxes */
.box-image::before,
.box-text-only::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background var(--transition-fast) ease;
    z-index: var(--z-overlay);
    pointer-events: none;
}

.box-image:hover::before,
.box-text-only:hover::before {
    background: var(--widget-color-hover);
}

/* Image box padding override */
.box-2-4.box-image,
.box-square.box-image {
    padding: 0;
}

/* Text-only box (390x175 with flat color background) */
.box-text-only {
    position: relative;
    padding: 16px;
    background: var(--color-box-accent);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    animation: fadeSlideUp var(--animation-duration) ease-out backwards;
    text-decoration: none;
}

.box-text-content {
    position: relative;
    z-index: var(--z-label);
}

.box-text-content h3 {
    font-family: var(--font-family);
    font-size: 24px;
    font-weight: 500;
    color: white;
    line-height: 120%;
    margin: 0;
    text-decoration: none;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* Quote box variant with different background */
.box-quote {
    background: var(--color-box-quote-bg);
}

.box-quote .box-text-content h3 {
    color: var(--color-text-primary);
}

.box-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fit;
    border-radius: var(--widget-radius);
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.external-link-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast) ease;
    z-index: var(--z-button);
    /* Pointer events disabled to allow click-through to parent container */
    /* Button is purely decorative; parent box handles interaction */
    pointer-events: none;
}

.external-link-btn:hover,
.box-image:hover .external-link-btn,
.box-text-only:hover .external-link-btn {
    transform: scale(1.1);
}

.external-link-btn img {
    width: 100%;
    height: 100%;
    display: block;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
}

/* ========================
   TOAST NOTIFICATION
   ======================== */

.toast {
    position: fixed;
    top: 24px;
    right: 24px;
    background: var(--color-text-primary);
    color: white;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
    z-index: var(--z-toast);
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast p {
    margin: 0;
    line-height: normal;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}


.box-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--color-label-bg);
    border: 1px solid var(--color-label-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08);
    z-index: var(--z-label);
    width: fit-content;
    max-width: calc(100% - 24px);
}

.box-label p {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: normal;
    margin: 0;
    white-space: pre-wrap;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* ========================
   BUTTONS
   ======================== */

.btn {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    cursor: pointer;
    text-align: center;
    line-height: normal;
    text-decoration: none;
    display: inline-block;
}

/* Outline button shared styles */
.btn-outline-dark,
.btn-outline-blue {
    background: var(--color-button-bg-light);
    align-self: flex-start;
}

.btn-outline-dark {
    color: var(--color-button-text-dark);
    border: 2px solid var(--color-button-border-dark);
}

.btn-outline-blue {
    color: var(--color-button-text-blue);
    border: 2px solid var(--color-button-border-blue);
}

.btn-outline-dark:hover,
.btn-outline-blue:hover {
    opacity: var(--opacity-hover-light);
}

/* Solid button shared styles */
.btn-solid-orange,
.btn-solid-yellow {
    color: white;
    padding: 6px 16px;
    align-self: flex-start;
}

.btn-solid-orange {
    background: var(--color-portfolio-icon);
}

.btn-solid-yellow {
    background: var(--color-website-icon);
}

.btn-solid-orange:hover,
.btn-solid-yellow:hover {
    opacity: var(--opacity-hover-heavy);
}

/* ========================
   ANIMATIONS
   ======================== */

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================
   TEXT SELECTION
   ======================== */

::selection {
    background: var(--color-linkedin-icon);
    color: white;
}

::-moz-selection {
    background: var(--color-linkedin-icon);
    color: white;
}

/* ========================
   RESPONSIVE
   ======================== */

/* Desktop mode: >1259px
   - Profile: 500px
   - Widget: 820px
   - Module sizes: 175x175, 390x390, 390x175
   - Module gaps: 40px
   - Container padding: min 64px
   - Section gap: flexible/automatic */

/* Stacked mode: <=1259px and >=428px */
@media (max-width: 1259px) {
    body {
        padding: var(--spacing-md) 0;
    }
    
    .page-wrapper {
        padding: 0 24px;
    }
    
    .container {
        flex-direction: column;
        gap: var(--spacing-md);
        max-width: 380px;
        width: 100%;
        margin: 0 auto;
    }
    
    .left-side {
        width: 100%;
        max-width: 380px;
        gap: var(--spacing-sm-mobile);
    }
    
    .right-side {
        width: 100%;
        max-width: 380px;
    }
    
    .profile-image {
        width: var(--profile-image-size-mobile);
        height: var(--profile-image-size-mobile);
    }
    
    .name {
        font-size: var(--font-size-lg-mobile);
    }
    
    .bio {
        font-size: var(--font-size-md-mobile);
    }
    
    .role,
    .location {
        font-size: var(--font-size-base);
    }
    
    .contact-grid {
        grid-template-columns: repeat(2, 178px);
        gap: 24px;
    }
    
    .box-1-4 {
        width: 178px;
        height: 178px;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .resources-right-column {
        gap: 24px;
    }
    
    /* Stacked layout box widths */
    .box-2-4,
    .box-text-only,
    .box-square {
        width: 100%;
        max-width: 380px;
    }
    
    .box-2-4 {
        height: 178px;
    }

    .box-square {
        height: auto;
        aspect-ratio: 1/1;
    }
    
    .toast {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        width: auto;
    }
}

/* Mobile mode: <428px
   - Container: 100% width with 24px body gutters
   - Modules scale proportionally maintaining aspect ratio */
@media (max-width: 428px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .left-side {
        width: 100%;
        max-width: 100%;
    }
    
    .name,
    .bio,
    .role,
    .location {
        width: 100%;
        max-width: 100%;
    }
    
    .profile-image {
        width: calc((100vw - 48px) * (var(--profile-image-size-mobile) / 380));
        height: calc((100vw - 48px) * (var(--profile-image-size-mobile) / 380));
        max-width: var(--profile-image-size-mobile);
        max-height: var(--profile-image-size-mobile);
    }
    
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: min(24px, 6.3vw);
        max-width: 100%;
    }
    
    .box-1-4 {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 178px;
        max-height: 178px;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: min(24px, 6.3vw);
        max-width: 100%;
    }
    
    /* Mobile layout box widths */
    .box-2-4,
    .box-text-only,
    .box-square {
        width: 100%;
        max-width: 100%;
    }
    
    .box-2-4 {
        height: auto;
        aspect-ratio: 390 / 178;
    }

    .box-square {
        height: auto;
        aspect-ratio: 1/1;
    }
}