/* Fonts of the printed (PDF) version, hosted in fonts/ (variable fonts: one file for weights 400-700) */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Résumé as two panels on the dotted page: sidebar | main column.
   Same panel as the projects on the portfolio page. */
.resume {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    align-items: start;
    gap: clamp(20px, 3vw, 32px);
    width: calc(100% - 2 * var(--gutter));
    max-width: 1200px;
    margin: clamp(24px, 3vw, 32px) auto 0;
    padding-bottom: 96px;  /* the fixed PDF button does not cover the end of the page */
    font-size: 20px;
    line-height: 1.35;
}

.side,
.resume_main {
    border: 2px solid var(--color-line);
    border-radius: 12px;
    background-color: var(--color-card);
    box-shadow: 6px 6px 0 var(--color-shadow);
}

/* Both columns may shrink below their content width; long words wrap instead of overflowing */
.side,
.resume_main {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Reset without specificity, so the rules below can set their own margins */
:where(.resume) :where(p, h1, h2, ul) {
    margin: 0;
}

.resume a {
    color: inherit;
    text-decoration: none;
}

.resume a:hover {
    color: var(--color-border);
}

/* ---------- Sidebar ---------- */
.side {
    padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px) 8px;
}

.monogram {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin-bottom: 40px;
    border-radius: 12px;
    background-color: var(--color-border);
    color: #FFFFFF;
    font-size: 56px;
}

.side-block {
    margin-bottom: 32px;
}

.side-head {
    margin-bottom: 8px;
    color: var(--color-border);
    font-size: 24px;
}

.contact {
    color: var(--color-secondary);
    word-break: break-word;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    padding: 2px 10px;
    border: 2px solid var(--color-secondary);
    border-radius: 6px;
    font-size: 18px;
}

.side .sub {
    color: var(--color-secondary);
}

/* Keeps e.g. a date range together on one line */
.nowrap {
    white-space: nowrap;
}

/* Space between entries, e.g. two degrees under education */
.side .sub + .strong {
    margin-top: 12px;
}

/* ---------- Main column ---------- */
.resume_main {
    padding-bottom: 48px;
}

.resume_header {
    padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px) 0;
}

.prompt {
    color: var(--color-border);
}

.name {
    font-size: clamp(40px, 9vw, 64px);
    font-weight: normal;
    line-height: 1.1;
}

.tagline {
    margin-bottom: 16px;
    font-size: clamp(22px, 3.5vw, 28px);
}

.summary {
    max-width: 800px;
    color: var(--color-secondary);
}

.resume_section {
    padding: 32px clamp(16px, 4vw, 48px) 0;
}

.main-head {
    margin-bottom: 12px;
    color: var(--color-border);
    font-size: 28px;
    font-weight: normal;
}

.rule-accent {
    height: 2px;
    margin-bottom: 12px;
    background-color: var(--color-border);
}

.rule-soft {
    height: 1px;
    margin-bottom: 12px;
    background-color: var(--color-secondary);
}

.job {
    margin-bottom: 20px;
}

.job-top {
    display: flex;
    flex-wrap: wrap;  /* the date drops below a long title instead of squeezing it */
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 16px;
}

.job-title {
    font-size: 26px;
}

.job-date,
.job-org,
.muted {
    color: var(--color-secondary);
}

.job-date {
    white-space: nowrap;
}

.job ul {
    margin-top: 6px;
    padding-left: 24px;
}

.job li {
    margin-bottom: 4px;
}

.project-name {
    color: var(--color-border);
}

/* ---------- Save as PDF button ---------- */
.print_button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    position: fixed;
    right: 24px;
    bottom: 24px;
    min-height: 44px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--color-border);
    color: #FFFFFF;
    font-family: var(--font-primary);
    font-size: 22px;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}

@media (hover: hover) {
    .print_button:hover {
        filter: brightness(1.1);
    }
}

/* ---------- Screen: the shared type scale, spacing and panels of the site (see general.css) ----------
   Only for the screen: the A4 print layout further down keeps its own sizes and colours. */
@media screen {
    .resume {
        grid-template-columns: minmax(272px, 352px) 1fr;  /* 352 = 22 x 16: the main column starts on a dot */
        width: var(--column);
        gap: var(--space-gap);
        margin-top: var(--page-top);
        font-size: var(--fs-text);
        line-height: var(--lh-text);
    }

    .name {
        font-size: 64px;
        line-height: 80px;
    }

    .tagline {
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
    }

    /* Running text on the panels in the soft text colour, as on the portfolio and the blog; titles stay white */
    .side,
    .resume_main {
        box-shadow: var(--shadow-hard);
        color: var(--color-text-soft);
    }

    .name,
    .tagline,
    .job-title,
    .side .strong {
        color: var(--color-primary);
    }

    .side {
        padding: var(--panel-inset);
    }

    .side-block:last-child {
        margin-bottom: 0;
    }

    /* "## contact" etc.: section titles of the sidebar, sized like the card titles of the type scale */
    .side-head {
        margin-bottom: var(--space-title);
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
    }

    .contact,
    .side .sub,
    .job-date,
    .job-org,
    .muted {
        font-size: var(--fs-small);
        line-height: var(--lh-small);
    }

    /* Same outlined chips as the tags on the portfolio */
    /* Stack, set justified (script/snap-to-grid.js): one small grid square between all chips and rows; the chips of
       a row grow so the row ends exactly at the sidebar's right edge (the last row keeps its natural widths) */
    .chips {
        gap: 8px;
    }

    .monogram {
        margin-bottom: 48px;
    }

    .chip {
        padding: 2px 12px;
        border-color: var(--color-line);
        font-size: var(--fs-chip);
        line-height: var(--lh-chip);
    }

    .resume_main {
        padding-bottom: var(--panel-inset);
    }

    .resume_header {
        padding: var(--panel-inset) var(--panel-inset) 0;
    }

    .resume_section {
        padding: 32px var(--panel-inset) 0;
    }

    /* "## experience" etc.: the sections of the page (h2 of the type scale), in blue like the sidebar's */
    .main-head {
        margin-bottom: var(--space-title);
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
    }

    /* Vertical spacing on the 8px grid; the 2px and 1px rules plus their margin make 16px */
    .rule-accent {
        margin-bottom: 14px;
    }

    .rule-soft {
        margin-bottom: 15px;
    }

    .job {
        margin-bottom: 32px;
    }

    /* Title (28px) and date (20px) in 32px rows, centred: aligned at their baselines they would push the row
       2px off the grid */
    .job-top {
        align-items: center;
        gap: 0 16px;
    }

    .job ul {
        margin-top: 16px;
    }

    .job li {
        margin-bottom: 0;
    }

    /* Markdown, like the "##" section headings: the name is the top heading ("# "), the points are "- " items.
       Screen only, the PDF keeps its own layout. */
    .name::before {
        content: "# ";
        color: var(--color-border);
    }

    .job ul {
        list-style-type: "- ";
    }

    .job li::marker {
        color: var(--color-primary);  /* white in dark mode, dark in light mode, like the job titles */
    }

    .side .sub + .strong {
        margin-top: 16px;
    }

    .resume_section:last-child .job:last-child {
        margin-bottom: 0;
    }

    /* Small text inside a line of running text (e.g. "[link]" after a project): its own taller line box would
       make the line 33px instead of 32px */
    p .muted {
        line-height: 1;
    }

    .job-title {
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
    }

    /* Same button as "Try it" and "Send" (48px tall), in the bottom right corner of the window. Its right edge
       sits on a grid line: of the lines right of the content column (every 16px from its edge), the one furthest
       right that still keeps 24px from the window edge. (In a fixed element 100% is the window width.) */
    .print_button {
        right: calc((100% - var(--column)) / 2 - round(down, (100% - var(--column)) / 2 - 24px, 16px));
        min-height: 48px;
        padding: 8px 24px;
        line-height: 32px;
        font-size: var(--fs-button);
        box-shadow: 3px 3px 0 var(--color-shadow);
        transition: translate 0.12s steps(2), box-shadow 0.12s steps(2);
    }

    .print_button:active {
        translate: 2px 2px;
        box-shadow: 1px 1px 0 var(--color-shadow);
    }
}

/* Wide windows: enough room right of the content column, so the button sits in the middle between the column's
   right edge and the window edge, its left edge on the nearest 16px grid line. --snap-width is the button's width
   from script/snap-to-grid.js (160px without it). */
@media screen and (min-width: 1600px) {
    .print_button {
        right: auto;
        left: calc(50% + var(--column) / 2
                   + round(nearest, ((100% - var(--column)) / 2 - var(--snap-width, 160px)) / 2, 16px));
    }
}

/* ---------- Narrow screens and portrait tablets: one column ---------- */
/* "screen" keeps these rules away from the A4 print layout below */
@media screen and (max-width: 900px) {
    .resume {
        grid-template-columns: 1fr;
    }

    /* Name and experience first, the sidebar follows */
    .side {
        order: 2;
    }

    .resume_main {
        padding-bottom: var(--panel-inset);
    }

    .monogram {
        width: 80px;
        height: 80px;
        margin-bottom: 32px;
        font-size: 40px;
    }

    .side-block {
        margin-bottom: 32px;
    }

}

@media screen and (max-width: 600px) {
    .name {
        font-size: 40px;
        line-height: 48px;
    }
}

@media screen and (max-width: 760px) {
    .print_button {
        right: calc((100% - var(--column)) / 2);
        bottom: calc(var(--bottom-bar) + 16px);  /* above the tab bar */
    }
}

/* Text with two versions: the terminal style on the screen ("## contact", "florian_braun"), plain wording with
   correct capitals in the PDF ("Contact", "Florian Braun"). The hidden one is also hidden from screen readers. */
.print_text {
    display: none;
}

@media print {
    .screen_text {
        display: none;
    }

    .print_text {
        display: inline;
    }
}

/* ---------- Print / PDF: light A4 layout (former LaTeX design) ---------- */
@page {
    size: A4;
    margin: 0;
}

@media print {
    nav,
    .print_button {
        display: none;
    }

    /* Page colour behind the main column */
    html {
        background-color: #FAFAF7;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: none;
    }

    main {
        width: auto;
        margin: 0;
        padding: 0;
        background: none;
    }

    /* Undo the screen panels */
    .resume {
        gap: 0;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .side,
    .resume_main {
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .resume {
        --accent: #0D99FF;
        --ink: #1C1917;
        --muted: #57534E;
        --soft: #44403C;
        --paper: #FAFAF7;
        --sidebar: #F0EFEA;
        --rule: #D6D3D1;
        --sideborder: #E7E5E4;
        --mono: "JetBrains Mono", "Fira Mono", monospace;

        /* No fixed A4 size: browsers that keep their own page margins
           (Safari) would otherwise spill onto a second page */
        grid-template-columns: 66mm 1fr;
        min-height: 0;
        color: var(--ink);
        font-family: "IBM Plex Sans", system-ui, sans-serif;
        font-size: 9pt;
        line-height: 1.4;
    }

    .resume * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .resume a {
        color: inherit;
    }

    /* Sidebar. Its grey background is a fixed strip, because in print
       fixed elements fill the full height of every page */
    .side {
        padding: 14mm 6mm 14mm 8mm;
        border-right: none;
    }

    .resume::before {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 66mm;
        background-color: var(--sidebar);
        border-right: 0.6pt solid var(--sideborder);
    }

    .monogram {
        width: 20mm;
        height: 20mm;
        margin-bottom: 18pt;
        border-radius: 3pt;
        background-color: var(--accent);
        color: #FFFFFF;
        font-family: var(--mono);
        font-weight: 700;
        font-size: 20pt;
    }

    .side-block {
        margin-bottom: 16pt;
    }

    .side-head {
        margin-bottom: 4pt;
        color: var(--accent);
        font-family: var(--mono);
        font-weight: 700;
        font-size: 10pt;  /* same as the main column's section headings: all sections are one level */
    }

    .contact {
        color: var(--soft);
        font-family: var(--mono);
        font-size: 8pt;
        line-height: 1.55;
    }

    /* Justified like on the screen: equal gaps, the chips of a row grow so it ends at the right edge. The empty
       ::after takes the rest of the last row, so that row keeps its natural widths (left-aligned). */
    .chips {
        gap: 4pt 3pt;
    }

    .chips::after {
        content: "";
        flex-grow: 1000;
    }

    .chip {
        flex-grow: 1;
        text-align: center;
        padding: 1.2pt 3.5pt;
        border: 0.5pt solid var(--rule);
        border-radius: 1.5pt;
        background-color: var(--paper);
        font-family: var(--mono);
        font-size: 7pt;
    }

    .side .strong {
        font-weight: 600;
    }

    .side .sub {
        color: var(--soft);
    }

    .side .sub + .strong {
        margin-top: 6pt;
    }

    /* Main column */
    .resume_main {
        padding-bottom: 0;
    }

    .resume_header {
        padding: 15mm 10.5mm 0;
    }

    .prompt {
        margin-bottom: 2pt;
        color: var(--accent);
        font-family: var(--mono);
        font-size: 8pt;
    }

    .name {
        margin-bottom: 3pt;
        font-family: var(--mono);
        font-weight: 700;
        font-size: 26pt;
        line-height: 1.15;
    }

    .tagline {
        margin-bottom: 14pt;
        font-size: 12pt;
    }

    .summary {
        max-width: none;
        margin-bottom: 16pt;
        color: var(--soft);
    }

    .resume_section {
        padding: 0 10.5mm;
        margin-bottom: 16pt;
    }

    .main-head {
        margin-bottom: 6pt;
        color: var(--accent);
        font-family: var(--mono);
        font-weight: 700;
        font-size: 10pt;
    }

    .rule-accent {
        height: 1.4pt;
        margin-bottom: 5pt;
        background-color: var(--accent);
    }

    .rule-soft {
        height: 0.5pt;
        margin-bottom: 5pt;
        background-color: var(--rule);
    }

    .job {
        margin-bottom: 9pt;
        break-inside: avoid;
    }

    .job-top {
        gap: 8pt;
    }

    .job-title {
        font-size: 11.5pt;
        font-weight: 700;
    }

    .job-date {
        font-family: var(--mono);
        font-size: 8pt;
    }

    .job-date,
    .job-org,
    .muted {
        color: var(--muted);
    }

    .job ul {
        margin-top: 3pt;
        padding-left: 12pt;
    }

    .job li {
        margin-bottom: 1.5pt;
    }

    .project-name {
        color: var(--ink);
        font-family: var(--mono);
        font-weight: 700;
    }
}