/* ==========================================================================
   David Visscher — One-Pager Grid
   Swiss-inspired, dark, grid-forward
   ========================================================================== */

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

:root {
    --bg: #0a0a0a;
    --fg: #e8e6e3;
    --fg-muted: rgba(232, 230, 227, 0.4);
    --crimson: #8B1A1A;
    --orange: #D4622B;
    --lavender: #7B6B8A;
    --border: rgba(232, 230, 227, 0.12);
    --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', monospace;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.5;
    color: var(--fg);
    background: var(--bg);
}

a {
    color: var(--fg);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--orange);
}

/* ==========================================================================
   ONE-PAGER GRID
   ========================================================================== */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 160px;
    grid-template-rows: 1fr 1fr 1fr auto auto auto auto;
    min-height: 100vh;
    min-height: 100dvh;
    border: 1px solid var(--border);
}

.cell {
    border: 1px solid var(--border);
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* --- Name cell: top-left, spans 2 cols × 3 rows --- */
.cell-name {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.name {
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.role {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 300;
    color: var(--fg-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.org {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    font-weight: 300;
    color: var(--fg-muted);
}

/* --- Accent cells: right column, one per row --- */
.cell-accent {
    padding: 0;
}

.cell-crimson {
    grid-column: 3;
    grid-row: 1;
    background: var(--crimson);
}

.cell-orange {
    grid-column: 3;
    grid-row: 2;
    background: var(--orange);
}

.cell-lavender {
    grid-column: 3;
    grid-row: 3;
    background: var(--lavender);
}

/* --- Section labels --- */
.cell-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 1.25rem;
}

/* --- Cell lists --- */
.cell-list {
    list-style: none;
}

.cell-list li {
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.cell-list li:last-child {
    margin-bottom: 0;
}

.cell-list a {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
}

.cell-list a:hover {
    border-color: var(--orange);
}

.muted {
    font-size: 0.8rem;
    color: var(--fg-muted);
    font-weight: 300;
}

/* --- Projects: left column --- */
.cell-projects {
    grid-column: 1;
    grid-row: 4 / 7;
}

/* --- Publications: right spanning 2 cols --- */
.cell-publications {
    grid-column: 2 / 4;
    grid-row: 4 / 6;
}

/* --- Contact --- */
.cell-contact {
    grid-column: 2 / 4;
    grid-row: 6;
}

.email {
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
}

.email:hover {
    border-color: var(--orange);
}

/* --- Footer row --- */
.cell-footer {
    grid-column: 1 / 4;
    grid-row: 7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.blog-link {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   SUB-PAGES (Blog listing, articles, pages) — same dark theme
   ========================================================================== */

.sub-header {
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
}

.back-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--fg);
}

.back-link:hover {
    color: var(--orange);
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem;
}

.rule {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

.sub-page {
    padding: 4rem 0;
}

.sub-title {
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.article-date,
.article-item-date {
    font-size: 0.85rem;
    color: var(--fg-muted);
    font-weight: 300;
}

.article-content {
    font-size: 1.05rem;
    line-height: 1.7;
}

.article-content h2 { font-size: 1.5rem; margin-top: 3rem; margin-bottom: 1rem; font-weight: 900; }
.article-content h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.5rem; font-weight: 900; }
.article-content p { margin-bottom: 1rem; }
.article-content ul,
.article-content ol { margin-bottom: 1rem; padding-left: 2rem; }
.article-content li { margin-bottom: 0.5rem; }

.article-content a {
    color: var(--fg);
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
}

.article-content a:hover {
    color: var(--orange);
    border-color: var(--orange);
}

.article-content blockquote {
    border-left: 3px solid var(--crimson);
    padding-left: 2rem;
    color: var(--fg-muted);
    font-style: italic;
    margin: 2rem 0;
}

.article-content code,
.article-content pre { font-family: var(--mono); font-size: 0.9em; }

.article-content pre {
    background: rgba(255, 255, 255, 0.05);
    color: var(--fg);
    padding: 2rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    overflow-x: auto;
    margin-bottom: 2rem;
}

.article-content code {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.15em 0.4em;
    border-radius: 3px;
}

.article-content pre code {
    background: none;
    padding: 0;
}

/* --- Blog listing --- */
.article-list { list-style: none; }

.article-item {
    padding: 2rem 0;
    border-bottom: 1px solid var(--border);
}

.article-item:last-child { border-bottom: none; }

.article-item-title {
    font-size: 1.3rem;
    font-weight: 900;
    margin: 0.5rem 0;
}

.article-item-title a { color: var(--fg); }
.article-item-title a:hover { color: var(--orange); }

.article-item-summary {
    color: var(--fg-muted);
    font-size: 0.95rem;
}

.empty-state {
    color: var(--fg-muted);
    font-style: italic;
    padding: 3rem 0;
}

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

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto auto;
    }

    .cell-name {
        grid-column: 1 / 3;
        grid-row: 1;
        padding: 3rem clamp(1.25rem, 3vw, 2.5rem);
        min-height: 50vh;
    }

    .cell-crimson {
        grid-column: 1;
        grid-row: 2;
        min-height: 80px;
    }

    .cell-orange {
        grid-column: 2;
        grid-row: 2;
        min-height: 80px;
    }

    .cell-lavender {
        display: none;
    }

    .cell-projects {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .cell-publications {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    .cell-contact {
        grid-column: 1 / 3;
        grid-row: 5;
    }

    .cell-footer {
        grid-column: 1 / 3;
        grid-row: 6;
    }
}

@media (max-width: 480px) {
    .name {
        font-size: 2.5rem;
    }

    .cell-name {
        min-height: 40vh;
    }

    .article-header-bar {
        padding: 1rem;
    }

    .container {
        padding: 0 1rem;
    }
}