:root {
    /* Swiss Color Palette */
    --color-bg: #F4F4F4;
    --color-text: #111111;
    --color-accent: #FF3B30;
    /* International Orange/Red */
    --color-grid: rgba(255, 59, 48, 0.1);
    --color-hover: #EAEAEA;

    /* Typography */
    --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --line-height-base: 1.4;
    --line-height-tight: 0.95;

    /* Spacing / Grid */
    --grid-gap: 20px;
    --container-padding: 40px;
    --col-count: 12;
}

html {
    scroll-behavior: smooth;
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- The Grid --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    column-gap: var(--grid-gap);
    padding: var(--container-padding);
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
}

/* --- Hero Section --- */
.section-hero {
    grid-column: 1 / -1;
    /* Full viewport height minus top/bottom container padding */
    min-height: calc(100vh - (var(--container-padding) * 2));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 4px solid var(--color-text);
    margin-bottom: 80px;
    padding-bottom: 10px;
    /* Reduced to keep content tight to line */
    position: relative;
}

.hero-title {
    /* Increased by ~25% from 9vw to 11.25vw */
    font-size: clamp(3.75rem, 11.25vw, 15rem);
    font-weight: 900;
    line-height: var(--line-height-tight);
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.hero-title .accent {
    color: var(--color-accent);
}

.offset-right {
    display: block;
    text-align: right;
}

.contact-meta {
    margin-top: auto;
    /* Push to bottom */
    font-family: var(--font-mono);
    font-size: 1rem;
    display: flex;
    gap: 40px;
    margin-bottom: 0px;
    padding-bottom: 30px;
    /* Space for scroll cue */
    align-items: flex-end;
}

.contact-meta a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent);
}

.contact-meta a:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* Scroll Cue */
.scroll-cue {
    position: absolute;
    bottom: 0px;
    right: 0;
    font-size: 2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}


/* --- Section Styling --- */
section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gap);
    margin-bottom: 15vh;
}

.section-title-col {
    grid-column: 1 / 4;
}

.section-content-col {
    grid-column: 4 / -1;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    position: sticky;
    top: 40px;
}

/* --- Job Cards (Interactive) --- */
.job-item {
    margin-bottom: 0;
    /* Collapsed view */
    border-top: 2px solid var(--color-text);
    padding: 30px 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    column-gap: var(--grid-gap);
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}

.job-item:hover {
    background-color: var(--color-hover);
    /* Extend bg slightly negative margins if needed, or keep simple */
}

/* Indicator for interactivity */
.job-item::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 30px;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
}

.job-item.active::after {
    transform: rotate(45deg);
    /* Turns + to x */
}

.job-meta {
    grid-column: 1 / 4;
}

.job-details {
    grid-column: 4 / -1;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.job-item.active .job-details {
    max-height: 1000px;
    /* Arbitrary large height for animation */
    opacity: 1;
    margin-top: 20px;
    /* Space between title and content */
}

.job-year {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 10px;
    display: block;
}

.job-company {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.job-role {
    font-size: 1.125rem;
    font-weight: 400;
    margin-bottom: 0;
    font-style: italic;
    opacity: 0.8;
}

.job-desc ul {
    list-style: none;
    border-left: 2px solid var(--color-accent);
    padding-left: 30px;
    margin-top: 10px;
}

.job-desc li {
    margin-bottom: 15px;
    position: relative;
    max-width: 800px;
    font-size: 1.125rem;
}

/* Removed the arrow content */
.job-desc li::before {
    content: "■";
    position: absolute;
    left: -42px;
    /* Align with border */
    color: var(--color-bg);
    /* Mask check */
    background: var(--color-accent);
    width: 6px;
    height: 6px;
    font-size: 0;
    top: 10px;
}

/* --- Footer --- */
.site-footer {
    grid-column: 1 / -1;
    border-top: 10px solid var(--color-text);
    padding: 60px 0;
    display: flex;
    justify-content: space-between;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.2rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .section-title-col {
        grid-column: 1 / -1;
        margin-bottom: 40px;
        position: static;
    }

    .section-content-col {
        grid-column: 1 / -1;
    }

    .job-item {
        grid-template-columns: 1fr;
        padding-right: 40px;
        /* Space for indicator */
    }

    .job-meta {
        grid-column: 1 / -1;
        margin-bottom: 10px;
    }

    .job-details {
        grid-column: 1 / -1;
    }

    .hero-title {
        font-size: 11vw;
    }

    .section-hero {
        min-height: 80vh;
        padding-bottom: 40px;
    }

    .contact-meta {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        padding-bottom: 0;
    }

    .contact-meta a {
        display: block;
        width: 100%;
    }

    .scroll-cue {
        display: none;
    }
}

/* --- Inline Link Styles --- */
.job-link {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.job-link:hover {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

/* --- Print / PDF Optimization --- */
@media print {

    /* Reset body */
    body {
        font-size: 12pt;
        background-color: white;
        color: black;
    }

    /* Hide non-essential interactive elements */
    .job-item::after {
        display: none !important;
    }

    .scroll-cue {
        display: none !important;
    }

    /* Expand all details */
    .job-details {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        margin-top: 10px !important;
    }

    /* 
       REVERTED to "Job Item as box" logic but using FLEX to prevent overlap.
       Grid across pages causes the overlapping issue described.
    */
    .job-item {
        display: flex;
        flex-direction: row;
        break-inside: avoid;
        page-break-inside: avoid;
        border-top: 1px solid #000;
        padding: 20px 0;
        margin-bottom: 20px;
    }

    /* Simulate grid columns with flex basis */
    .job-meta {
        flex: 0 0 33%;
        /* Match grid 1-4 (3 cols) */
        padding-right: 20px;
    }

    .job-details {
        flex: 0 0 66%;
        /* Match grid 4-12 (9 cols approx) */
    }

    section {
        margin-bottom: 40px;
        page-break-after: avoid;
        /* Try to keep section title with content */
    }

    h2 {
        position: static;
        /* Remove sticky for print */
        page-break-after: avoid;
    }

    /* Ensure links are printed logically */
    a {
        text-decoration: underline;
        color: black;
    }

    .hero-title {
        font-size: 4rem;
        /* Reduce huge hero for print */
    }

    .section-hero {
        min-height: auto;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }
}