/* === Base Typography === */
section.timeline article.biography h1,
section.timeline article.biography h2,
section.timeline > h1 {
    text-transform: uppercase;
}


/* === Base Layout === */

section.timeline {
    column-count: 1;
    column-gap: 0;
    font-family: system-ui, sans-serif;
    color: #111827;
    display: block;
}

@media (min-width: 768px) {
    section.timeline {
        column-count: 2;
    }
}

@media (min-width: 1280px) {
    section.timeline {
        column-count: 3;
    }
}


/* === Article & Year Headers === */

section.timeline article.year {
    padding-left: 0.25rem;
    display: block;
}

section.timeline .year-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    break-after: avoid;
    padding: 10px;
    margin-left: 0;
    padding-left: 0;
}


section.timeline .year-label {
    font-size: 1.75rem;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    color: #1e293b;
    border-radius: 0.375rem;
    box-shadow: none;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    padding-bottom: 0.5rem;
    border: 1px solid #e9e9e9;
    background: #fafafa;
    text-align: center;
}

/* === BIOGRAPHY === */

section.timeline article.biography {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-left: 2px solid #e3e3e3a3;
    padding-left: 1.5em;
    margin-left: 0em;
    margin-bottom: 1.5rem;
    padding-right: 1em;
}

section.timeline hr {
    margin: 0;
}


/* === Project Sections === */

section.timeline article.year section.project {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-left: 2px solid #f0dcdca3;
    padding-left: 1.5em;
    margin-left: 0em;
    margin-bottom: 1.5rem;
    padding-right: 1em;
    padding: 0 0.8rem;
}

section.timeline article.year section.project:last-child {
    margin-bottom: 0;
}

section.timeline article.year section.project.job,
section.timeline article.year section.project.milestone {
    border-left: 2px solid #ff0000;
}

section.timeline article.year section.project h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

section.timeline article.year section.project h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

section.timeline p {
    line-height: 1.5;
    font-size: 0.9rem;
    text-align: justify;
    hyphens: auto;
}

section.timeline .no-break {
    break-inside: avoid;
}

section.timeline pre {
    break-inside: avoid;
}

section.timeline article.year section.project ul {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: 1.25rem;
    font-size: 0.9rem;
}

/* section.timeline article.year section.project > *:nth-child(-n + 2) {
    break-after: avoid;
} */


/* === Tags === */

section.timeline article.year .tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}

section.timeline article.year .tag {
    background-color: #f3f4f65c;
    border: 1px solid #d1d5db;
    color: #475f85;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    white-space: nowrap;
    text-align: center;
    font-weight: 300;
    flex: auto;
    line-break: auto;
    hyphenate-character: auto;
    hyphens: auto;
}


/* === Links & Inline Code === */

section.timeline a {
    color: #1d4ed8;
    text-decoration: none;
    line-break: anywhere;
    hyphens: none;
}

section.timeline a:hover {
    text-decoration: underline;
}

section.timeline :not(pre) > code {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    font-family: Menlo, monospace;
    font-size: 0.85rem;
    padding: 0 0.25em;
    border-radius: 0.25em;
}

section.timeline :not(pre) > code.link-text {
    background: none;
    border: none;
}

/* === BIO SECTION ==== */

section.timeline article.year section.info {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

/* section.timeline article.year section.info h2 */


/* === Optional: Blockquotes === */

section.timeline article.year section.project blockquote {
    border-left: 4px solid #d1d5db;
    padding-left: 1em;
    margin: 0;
    color: #6b7280;
    font-style: italic;
}

section.timeline article.year.full-width {
    column-span: all;
    display: block;
    width: 100%;
    margin-top: 0.1px;
    /* tiny value */
}


/* === BADGES & WHATNOT ==== */


section.timeline span.outline {
    border: 1px solid #d0d0d0;
    border-radius: 0.25em;
    padding: 1px 4px;
}

/* === DUE TO FREAKIN SAFARI BUGS ==== */

@supports (-webkit-hyphens: none) {
    section.timeline article.year.full-width {
        column-span: initial !important;
        /* or unset */
    }
}


/* === FOOTNOTES === */

ul.footnotes {
    list-style-type: disc;
    color: #444;
    padding-left: 0;
    font-size: 0.85em;
    list-style: none;
    position: relative;
}

ul.footnotes li {
    margin-bottom: 0.25em;
    line-height: 1.4;
    position: relative;
    padding-left: 1.5em; /* aligns text under text, not symbol */
}

ul.footnotes li::before {
    content: attr(data-symbol);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25em;
    text-align: center;
    margin-right: 0.25em;
}

ul.footnotes a {
    color: inherit;
    text-decoration: underline;
    word-break: break-all;
}

/* === MAKE LISTS MORE PRETTY === */

ul:first-of-type:not(ul ul) {
    padding-left: 0;
}


/* === MEDIA SCREEN & DARK MODE === */

@media screen and (prefers-color-scheme: dark) {
    /* === Base Typography & Layout === */

    section.timeline {
        color: #e5e7eb; /* Light gray for general text */
    }

    /* === Article & Year Headers === */

    section.timeline .year-label {
        color: #cbd5e1; /* Lighter gray-blue */
        background: #212121;
        border: 1px solid #616161;
        box-shadow: none;
    }

    /* === BIOGRAPHY === */

    section.timeline article.biography {
        border-left: 2px solid #4b5563; /* Neutral border with better dark contrast */
    }

    /* === Project Sections === */

    section.timeline article.year section.project {
        border-left: 2px solid #6b7280; /* Softer than red, more readable */
    }

    section.timeline article.year section.project.job,
    section.timeline article.year section.project.milestone {
        border-left: 2px solid #ef4444; /* Keep red but slightly muted */
    }

    section.timeline article.year section.project h4 {
        color: #f3f4f6; /* Light header text */
    }

    /* === Tags === */

    section.timeline article.year .tag {
        background-color: #1f2937; /* Dark blue-gray */
        border: 1px solid #374151; /* Slightly lighter for contrast */
        color: #f9fafb; /* Light text for tags */
    }

    /* === Links & Inline Code === */

    section.timeline a {
        color: #60a5fa; /* Lightened blue for dark mode */
    }

    section.timeline :not(pre)>code {
        background: #1e293b; /* Dark background for code */
        border: 1px solid #334155; /* Dark border for contrast */
        color: #e5e7eb; /* Light code text */
    }

    /* === Optional: Blockquotes === */

    section.timeline article.year section.project blockquote {
        border-left: 4px solid #475569; /* Muted border */
        color: #9ca3af; /* Dimmed text */
    }

    /* === BADGES & WHATNOT ==== */

    section.timeline span.outline {
        border: 1px solid #6b7280; /* Medium gray */
    }

    /* === FOOTNOTES === */

    ul.footnotes {
        color: #9ca3af; /* Soft muted gray */
    }
}