/* =========================================================
   CV — LaTeX-matched A4 layout
   ========================================================= */

.cv {

    --cv-black: #111;
    --cv-dark: #222;
    --cv-muted: #666;
    --cv-light: #888;
    --cv-rule: #222;
    --cv-entry-rule: #d2d2d2;

    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    min-height: 297mm;
    box-sizing: border-box;

    padding: 0.2rem 0.8rem;



    font-size: 10pt;
    line-height: normal;

    color: var(--cv-black);

    text-align: left;

    -webkit-font-smoothing: antialiased;
}
.cv-download {
    margin-top: 7pt;
    text-align: center;
}

.cv-download sl-button {
    font-size: 8.5pt;
}
.cv-download sl-button::part(base) {
    background-color: var(--button);
    color: var(--button-text);
    border-color: var(--border);
}
.cv-download sl-button::part(base):hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}



/* =========================================================
   Header
   ========================================================= */

.cv-header {
    width: 100%;
    margin: 0;
    padding: 0;

    text-align: center;
}

.cv-header h1 {
    margin: 0;
    padding: 0;



    font-size: 18pt;
    line-height: 1;

    font-weight: 700;
    letter-spacing: 0;

    color: var(--cv-black);
}

.cv-contact {
    margin-top: 3pt;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    font-size: 10pt;
    line-height: 1;

    color: var(--cv-black);
}

.cv-contact > span,
.cv-contact > a {
    display: inline-flex;
    align-items: center;

    white-space: nowrap;
}

.cv-contact .separator {
    margin: 0 0.55em;
}

.cv-contact i {
    margin-right: 0.3em;
}

.cv-contact a {
    color: var(--cv-black);
    text-decoration: none;
}

.cv-contact a:hover {
    text-decoration: underline;
}


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

.cv-section {
    margin: 6pt 0 0;
    padding: 0;
}

.cv-section > h2 {
    margin: 0 0 6pt;
    padding: 0 0 2pt;


    font-size: 12pt;

    font-variant: small-caps;

    font-weight: 400;

    line-height: 1;

    color: var(--cv-black);

    border-bottom: 0.7pt solid var(--cv-rule);
}


/* =========================================================
   Section content
   ========================================================= */

.cv-section-content {
    margin-left: 0.6cm;
    margin-right: 1cm;

    padding: 0;

    width: auto;

    text-align: justify;
}


/* =========================================================
   Summary
   ========================================================= */

.cv-section-content > p {
    margin: 0;

    font-size: 10pt;
    line-height: normal;

    color: var(--cv-black);

    text-align: justify;
}


/* =========================================================
   Skills
   ========================================================= */

.skills {
    font-size: 9pt;
    line-height: normal;
}

.skill {
    display: grid;

    grid-template-columns: 20% 80%;

    margin: 0;
    padding: 0;

    line-height: normal;

    text-align: left;
}

.skill strong {
    font-weight: 700;
    color: var(--cv-black);
}

.skill span {
    color: var(--cv-black);
}


/* =========================================================
   CV Entries
   ========================================================= */

.cv-entry {
    position: relative;

    display: grid;

    grid-template-columns: 20% 75%;
    column-gap: 5%;

    width: 100%;

    margin: 0;
    padding: 1pt 0 3pt 0;

    align-items: start;

    text-align: left;
}



/* =========================================================
   Left metadata column
   ========================================================= */

.cv-entry-side {
    margin: 0;
    padding: 0;

    font-size: 8.5pt;
    line-height: 1.15;

    color: var(--cv-muted);
}

.cv-entry-side div {
    margin: 0;
    padding: 0;
}

.cv-entry-side div:first-child {
    /*
     * Date is the most important metadata.
     */
    color: var(--cv-dark);

    font-weight: 400;
}

.cv-entry-side div + div {
    /*
     * Location is slightly quieter.
     */
    margin-top: 2pt;

    color: var(--cv-light);
}


/* =========================================================
   Main entry content
   ========================================================= */

.cv-entry-main {
    min-width: 0;

    margin: 0;
    padding: 0;

    color: var(--cv-black);

    text-align: left;
}


.cv-entry:not(:last-child) .cv-entry-main {
    border-bottom: 1px solid var(--cv-entry-rule);
    padding-bottom: 5pt;
}




/* =========================================================
   Entry title
   ========================================================= */

.cv-entry-title {
    margin: 0;
    padding: 0;

    /*
     * Slightly larger than body text makes the hierarchy
     * much clearer while staying close to LaTeX.
     */
    font-size: 10.5pt;
    line-height: 1.05;

    font-weight: 700;

    color: var(--cv-black);
}


/* =========================================================
   Company / University
   ========================================================= */

.cv-entry-company {
    margin: 2pt 0 0;
    padding: 0;

    font-size: 9.5pt;
    line-height: 1.05;

    /*
     * Clearly distinct from the job title, but still dark.
     */
    color: #444;

    font-weight: 400;
}


/* =========================================================
   Technology line
   ========================================================= */

.cv-entry-techline {
    margin: 2pt 0 0;
    padding: 0;

    font-size: 7.5pt;
    line-height: 1;

    color: #666;

    text-align: left;
}


/* =========================================================
   Bullet lists
   ========================================================= */

.cv-entry-main ul {
    margin: 3pt 0 0;

    padding: 0;

    list-style: none;

    font-size: 9pt;

    line-height: 1.12;

    text-align: justify;
}

.cv-entry-main li {
    position: relative;

    margin: 0;

    padding: 1.5pt 0 1.5pt 1em;

    font-size: 9pt;
    line-height: 1.12;

    color: var(--cv-black);

    text-align: justify;
}

.cv-entry-main li::before {
    content: "•";

    position: absolute;

    left: 0;
    top: 0.15ex;



    font-size: 6.5pt;
    line-height: 1;

    color: var(--cv-black);
}


/* =========================================================
   Technology information inside bullets
   ========================================================= */

.cv-tech {
    margin: 1pt 0 0;
    padding: 0;

    font-size: 7.5pt;
    line-height: 1;

    color: #666;

    text-align: left;
}


/* =========================================================
   Links
   ========================================================= */

.cv a {
    color: var(--cv-black);
    text-decoration: none;
}

.cv a:hover {
    text-decoration: underline;
}

.cv-entry-main li a i {
    font-size: 7.5pt;
    margin-right: 0.25em;
}


/* =========================================================
   GitHub / Project links
   ========================================================= */

.project-title {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    width: 100%;

    gap: 1em;
}

.github-link {
    flex-shrink: 0;

    margin-left: auto;

    font-size: 8.5pt;
    font-weight: 400;

    color: #444;

    white-space: nowrap;
}

.github-link i {
    margin-right: 0.25em;
}


/* =========================================================
   Degree grades
   ========================================================= */

.normal-weight {
    font-weight: 400;
}


/* =========================================================
   Prevent ugly wrapping
   ========================================================= */

.nowrap {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .cv {
        padding: 0;
        font-size: 9.5pt;
    }

    .cv-contact {
        gap: 0.25rem 0.5rem;
        line-height: 1.25;
    }

    .cv-contact .separator {
        display: none;
    }

    .cv-section-content {
        margin-left: 0;
        margin-right: 0;
    }

    .skill {
        grid-template-columns: 32% 68%;
    }

    .cv-entry {
        grid-template-columns: 1fr;
        row-gap: 0.35rem;
    }

    .cv-entry:not(:last-child)::after {
        left: 0;
    }

    .cv-entry-side {
        display: flex;
        gap: 0.5rem;
    }

    .cv-entry-side div + div {
        margin-top: 0;
    }

    .project-title {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .nowrap {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   Explicit LaTeX \pagebreak
   ========================================================= */

.cv-page-break {
    display: none;
}


/* =========================================================
   Education
   ========================================================= */

.cv-section:last-child .cv-entry {
    margin-bottom: 0;
}


/* =========================================================
   Print
   ========================================================= */

@media print {

    @page {
        size: A4;
        margin: 0;
    }

    html,
    body {
        width: 210mm;
        margin: 0;
        padding: 0;
    }

    body {
        background: white;
    }

    .cv {
        width: 210mm;
        min-height: 297mm;

        padding: 0.6in 0.8in 0.5in;

        font-size: 10pt;

        background: white;

        box-sizing: border-box;
    }

    .cv-page-break {
        display: block;

        break-before: page;
        page-break-before: always;
    }

    .cv-section {
        break-inside: auto;
    }

    .cv-entry {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .cv a {
        color: #000;
        text-decoration: none;
    }
}


/* =========================================================
   Screen
   ========================================================= */

@media screen and (max-width: 900px) {

    .cv {
        width: 100%;
        min-height: auto;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media screen and (max-width: 600px) {

    .cv {
        padding: 1.5rem 1rem 2rem;

        font-size: 9.5pt;
    }

    .cv-contact {
        gap: 0.2em;
        line-height: 1.4;
    }

    .cv-contact .separator {
        margin: 0 0.25em;
    }

    .cv-section-content {
        margin-left: 0;
        margin-right: 0;
    }

    .cv-entry {
        display: block;

        margin-bottom: 8pt;
        padding-bottom: 7pt;
    }

    /*
     * On mobile the separator spans the whole entry.
     */
    .cv-entry:not(:last-child)::after {
        left: 0;
    }

    .cv-entry-side {
        display: flex;

        gap: 0.5em;

        margin-bottom: 2pt;

        font-size: 8.5pt;
    }

    .cv-entry-side div + div {
        margin-top: 0;
    }

    .skill {
        display: block;

        margin-bottom: 1pt;
    }

    .skill strong::after {
        content: " ";
    }

    .github-link {
        display: inline-block;

        margin-left: 0.5em;
    }

    .project-title {
        display: block;
    }
}