/* Shared by the Professional pages: the main page (index.html) and the two bio pages
   (bio.html, bio_ch.html). The background photo, the header above the photo, the photo
   column (its sizes, black instead of navy, the name), the gray section headings, the
   width of the page, the text size and the underlined links: change them here and all
   three pages follow. What only the main page has (news, papers, talks, press, the list
   of sections) is in index.html. */

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.bg-image {
    background-image: url('../img/pnw_lowres_4k.jpg');  /* relative to this file */
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.126; /* 26% transparency */
    z-index: 0;
}
.content {
    position: relative;
    z-index: 1;
    padding-left: 9%;
    padding-right: 9%;
    padding-bottom: 9%;
    /* Add your content styles here */
}

/* The header with the three tabs, its light and dark colors and the place of the
   light/dark button are the same on every page: see assets/css/header.css.
   Here the header only needs to sit above the background photo. */
.site-header {
    position: relative;
    z-index: 1;
}
/* No name in the header here: it's under the photo. It stays as an invisible
   spacer, so the tabs sit exactly where they are on the other pages. */
.site-header .brand {
    visibility: hidden;
}
/* Black instead of navy: the name, the headings, the profile icons, and the paper
   labels and buttons (which use --global-theme-color). Dark mode keeps its colors. */
h1, h2, h3, h4, h5, h6 {
    color: #111111;
}
.social-icons a {
    color: #111111 !important;
}
:root {
    --global-theme-color: #111111;
}
/* Section headings (News, Selected Publications, ..., Complete Bio) in the
   style of index_main.html: gray capitals with wide letter spacing, at this page's
   own heading sizes. The smaller headings (Reviewer, Teaching, ...) stay black. */
section h2,
section h3 {
    color: var(--text-faint);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
section h2 {
    font-size: 100%;    /* News, Selected Publications, Selected Talks, Services, Selected Press Coverage, Projects */
}
section h3 {
    font-size: 1em;  /* Research Interests, Other Invited Talks and Demos */
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) section h2,
    html:not([data-theme="light"]) section h3 {
        color: var(--text-faint);
    }
}
html[data-theme="dark"] section h2,
html[data-theme="dark"] section h3 {
    color: var(--text-faint) !important;
}
/* Less room between the tabs and the photo and text below them. */
@media screen and (min-width: 961px) {
    header,
    section {
        padding-top: 0.5em;
    }
    /* Wider than style.css's 990px: the photo column, 108px of space and the text
       column, centered, with the same space on both sides of the page. The text column is
       780px wide: next to a paper's 240px thumbnail, just wide enough for the longest
       author lines (Single-Shot VR, Split-Lohmann) to stay on one line. In narrower
       windows the text column narrows; the space between the columns stays 108px. */
    .wrapper.content {
        max-width: 1120px;  /* 232 + 108 + 780 */
        padding-left: max(32px, min(9%, (100% - 1120px) / 2));
        padding-right: max(32px, min(9%, (100% - 1120px) / 2));
    }
    .wrapper.content > section {
        width: min(780px, 100% - 340px);  /* 232px for the photo column and 108px between */
    }
}
@media screen and (max-width: 960px) {
    .content {
        padding-top: 8px;
    }
}

/* The size of the text on the right (it was 16px): the body text, headings, news,
   papers and talks all follow it. */
.content > section {
    font-size: 18px;
}
/* The first section (the bio and research interests) has the line spacing of
   index_main.html (site.css: .body). */
.content > section > p.text-justify {
    line-height: 1.65;
}
/* The same for the photo column (it was 16px): the name, the lines under it and the
   section list follow it. */
.content > header {
    font-size: 18px;
}
/* The name, in the same style as the name at the top of the other pages (header.css:
   .site-header .brand), including its finer rendering (style.css draws the rest of
   this column a little heavier, subpixel-antialiased), but larger: 32px. */
.content > header h1 {
    font-size: 2rem;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}
.content > header email {
    font-size: 0.875em;
}
/* Links in the text: the color of the text around them, underlined, as on
   index_main.html, instead of blue. (Buttons, the press logos and the expand bars
   keep their own look; paper titles: index.html.) */
.content > section a[href]:not(.btn):not(.press-coverage-link) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.content > section a[href]:not(.btn):not(.press-coverage-link):hover {
    color: var(--hover);
    text-decoration-color: currentColor;
}

/* "© Yingsi Qin // design by me // code by Claude" at the end of the text, like the
   footer of the other pages (site.css: footer). */
.content > section > footer.credits {
    position: static;
    float: none;
    width: auto;
    margin-top: clamp(36px, 5vw, 72px);
    color: var(--text-faint);
    font-size: 0.95rem;
    text-align: center;
}
/* On small windows style.css draws a line above and below the text. The copyright ends
   the page, so no line below it. */
@media screen and (max-width: 960px) {
    .content > section::after {
        display: none;
    }
}