/* Base
   Shared typography, document sizing, and utility classes for tychen.org. */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
}

html,
body {
    min-height: 100vh;
    margin: 0;
    font-size: 14px;
    line-height: 1.35 !important;
}

html {
    overflow-y: scroll;
}

body {
    display: flex;
    flex-direction: column;
}

.container-fluid {
    max-width: 1100px;
    color: #333333DD;
    font-family: var(--font-sans);
    font-size: .95rem;
}

strong {
    font-weight: 600;
}

a,
a:link,
a:visited {
    color: #555555;
    background-color: transparent;
    text-decoration: none !important;
}

a:active,
a:hover {
    color: darkgreen !important;
    background-color: transparent;
    text-decoration: none !important;
    transition: color 0.2s;
}

.bold {
    color: #333333;
    font-weight: 600;
}

.hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

.border-red {
    border: 1px solid red;
}

.border-blue {
    border: 1px solid blue;
}

.border-green {
    border: 1px solid green;
}

/* Shared Header
   Two-column header aligns the TY mark with the left gutter of the content grid. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
    border-bottom-color: #E5E5E5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.site-header-grid {
    display: grid;
    grid-template-columns: 2fr 5fr;
    align-items: center;
    column-gap: 12px;
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
}

.site-nav {
    grid-column: 2;
    align-items: center;
    min-height: 0;
    padding: .75rem 0 1.25rem 0 !important;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    margin: 0;
    padding: .75rem 0 1.25rem 0;
    line-height: 1;
}

.site-brand img {
    border-radius: 3px;
}

.site-nav .nav-link {
    color: #555555;
    font-family: var(--font-sans);
    font-size: .95rem;
    letter-spacing: 0;
    padding: .15rem .55rem !important;
    text-decoration: none !important;
    text-transform: none;
    border-bottom: 0 !important;
    border-radius: 3px;
}

.site-nav .navbar-nav:first-child {
    margin-left: -.55rem;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.active {
    color: darkgreen !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.site-nav .nav-link.active {
    background-color: #E4EFE4;
    font-weight: 600;
}

.site-user-nav {
    align-items: center;
}

.avatar-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: .25rem;
    min-height: 0;
    padding: .15rem .25rem !important;
    border: 0;
    background: transparent;
    line-height: 1;
}

.avatar-menu-toggle::after {
    display: none;
}

.nav-avatar {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EEEEEE;
    color: #AAAAAA;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.avatar-menu-toggle:hover .nav-avatar,
.avatar-menu-toggle:focus .nav-avatar {
    background: #E4EFE4;
    color: #AAAAAA;
}

.site-user-dropdown {
    min-width: 9rem;
    border-radius: 3px;
    border-color: #E0E0E0;
    font-size: .95rem;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

.site-user-dropdown .dropdown-item {
    color: #555555;
}

.site-user-dropdown .dropdown-item:hover,
.site-user-dropdown .dropdown-item:focus {
    background: #F3F7F3;
    color: darkgreen;
}

.site-login-modal .modal-dialog {
    max-width: 18rem;
}

@media (min-width: 576px) {
    .site-login-modal .modal-dialog {
        position: fixed;
        top: var(--site-login-modal-top, 5rem);
        right: var(--site-login-modal-right, 1rem);
        width: 18rem;
        margin: 0;
    }
}

.site-login-modal .modal-content {
    border-radius: 6px;
    border-color: #D9DEE5;
    font-size: .95rem;
}

.site-login-modal .modal-header {
    align-items: center;
    padding: .75rem 1rem;
}

.login-modal-tabs {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
}

.login-modal-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #555555;
    cursor: pointer;
    font: inherit;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
    padding: 0 0 .14rem;
}

.login-modal-tab.is-active {
    color: darkgreen;
    box-shadow: inset 0 -2px 0 darkgreen;
}

.login-modal-tab:hover,
.login-modal-tab:focus {
    color: darkgreen;
}

.site-login-modal .modal-title {
    color: #333333;
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: 0;
    margin: 0;
}

.site-login-modal .modal-body {
    padding: 1rem;
}

.login-modal-form {
    max-width: 16rem;
}

.login-modal-form label {
    margin-top: .75rem;
    font-weight: 400;
}

.site-login-modal .user-form label,
.site-login-modal .user-form button {
    font-weight: 400;
}

.login-modal-form label:first-of-type {
    margin-top: 0;
}

.login-modal-loading {
    color: #777777;
    font-family: var(--font-sans);
    font-size: .95rem;
}

.link-button {
    appearance: none;
    border: 0 !important;
    background: transparent !important;
    color: #333333 !important;
    cursor: pointer;
    font: inherit;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}

.link-button:hover,
.link-button:focus {
    color: darkgreen;
    text-decoration: underline;
}

/* Site Content Grid
   Main CV/publication/course content uses a date/meta column plus content column. */
.tychen_wrapper .grid-container {
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 5fr;
    row-gap: 6px;
    column-gap: 12px;
    color: #757575;
    font-family: var(--font-sans);
    font-size: .95rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.grid-container > div {
    padding: 0;
}

.grid-container > div:nth-child(odd) {
    line-height: 1.2rem;
    text-align: right;
}

.grid-container .title {
    display: inline;
}

/* Footer */
.site-footer {
    width: 95%;
    max-width: 800px;
    margin: auto auto 2.5rem auto;
    padding-top: 4rem;
    color: #8A8A8A;
    font-family: var(--font-sans);
    font-size: .78rem;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 2fr 5fr;
    column-gap: 12px;
}

.site-footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.site-footer a {
    color: #8A8A8A !important;
}

.site-footer-separator {
    color: #C0C0C0;
}

/* Homepage */
.home-summary {
    grid-column: 2;
    max-width: 620px;
    margin-top: 1.4rem;
    color: #555555;
    font-family: var(--font-sans);
    font-size: .95rem;
    line-height: 1.55;
}

.home-summary p {
    margin: 0 0 .75rem 0;
}

.home-summary-lead {
    color: darkgreen;
}

.home-cards {
    /* Row height holds the title plus four clamped description lines. */
    --home-card-height: 9.6rem;
    --home-card-pad-x: .75rem;
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: var(--home-card-height);
    gap: .6rem;
    width: calc(100% + (var(--home-card-pad-x) * 2) + 2px);
    max-width: calc(620px + (var(--home-card-pad-x) * 2) + 2px);
    margin-top: 1.6rem;
    margin-left: calc((var(--home-card-pad-x) * -1) - 1px);
}

.home-card,
.home-card:link,
.home-card:visited {
    position: relative;
    display: block;
    padding: .65rem var(--home-card-pad-x);
    border: 1px solid #E4EFE4;
    border-radius: 8px;
    /* Opaque so a hovered card can cover the ones beneath it. */
    background-color: #FFFFFF;
    font-family: var(--font-sans);
    transition: border-color .2s, box-shadow .2s;
}

/* Hovering lifts the card above its neighbours and reveals the full text. */
.home-card:hover {
    z-index: 5;
    align-self: start;
    height: auto;
    min-height: var(--home-card-height);
    border-color: darkgreen;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.home-card-title {
    display: block;
    color: darkgreen;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.35;
    margin-bottom: .3rem;
}

.home-card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    color: #555555;
    font-size: .95rem;
    line-height: 1.45;
    margin: 0;
}

.home-card:hover .home-card-desc {
    display: block;
    overflow: visible;
}

/* User Module */
.user-panel {
    max-width: 620px;
    color: #555555;
    font-family: var(--font-sans);
    font-size: .95rem;
    line-height: 1.45;
}

.user-form {
    display: grid;
    gap: .45rem;
}

.user-form label {
    margin-top: .35rem;
    color: #555555;
    font-weight: 600;
}

.user-form input {
    width: 100%;
    padding: .45rem .55rem;
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    color: #333333;
    font: inherit;
}

.user-form textarea {
    width: 100%;
    min-height: 320px;
    padding: .55rem;
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    color: #333333;
    font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    resize: vertical;
}

.user-form button {
    width: fit-content;
    margin-top: .55rem;
    padding: .45rem .8rem;
    border: 1px solid darkgreen;
    border-radius: 3px;
    background: darkgreen;
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
}

.user-form-note {
    margin-top: .8rem;
}

.account-identity {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding-bottom: .75rem;
    border-bottom: 1px solid #E8E8E8;
}

.account-avatar {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #E4EFE4;
    color: darkgreen;
    font-size: .95rem;
    font-weight: 600;
}

.account-name {
    color: #333333;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
}

.account-email {
    color: #777777;
    font-size: .95rem;
    line-height: 1.35;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .8rem;
}

.account-action-form,
.dropdown-item-form {
    margin: 0;
}

.account-actions a,
.account-actions button {
    display: inline-flex;
    align-items: center;
    padding: .32rem .55rem;
    border-radius: 3px;
    font: inherit;
    font-size: .95rem;
    font-weight: 400;
    cursor: pointer;
}

.account-actions a.account-action-primary,
.account-actions a.account-action-primary:link,
.account-actions a.account-action-primary:visited,
.account-actions a.account-action-primary:hover,
.account-actions a.account-action-primary:focus,
.account-actions button.account-action-primary {
    border: 1px solid darkgreen;
    background: darkgreen;
    color: #FFFFFF !important;
}

.account-actions a.account-action-secondary,
.account-actions a.account-action-secondary:link,
.account-actions a.account-action-secondary:visited,
.account-actions button.account-action-secondary {
    border: 1px solid #D8D8D8;
    background: #FFFFFF;
    color: #555555 !important;
}

.account-actions a.account-action-secondary:hover,
.account-actions a.account-action-secondary:focus,
.account-actions button.account-action-secondary:hover,
.account-actions button.account-action-secondary:focus {
    border-color: darkgreen;
    color: darkgreen !important;
}

.dropdown-item-form .dropdown-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
}

.user-message {
    margin-bottom: .8rem;
    overflow-wrap: anywhere;
}

.user-message-error {
    color: #9D1C1C;
}

.user-message-success {
    color: darkgreen;
}

.user-admin-note {
    margin-top: .8rem;
}

/* CMS */
.cms-panel {
    max-width: 680px;
    color: #555555;
    font-family: var(--font-sans);
    font-size: .9rem;
}

.cms-content-sections {
    display: grid;
    gap: 1.05rem;
}

.cms-add-form {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) minmax(10rem, 1.2fr) minmax(9rem, 1fr) auto;
    gap: .4rem;
    align-items: center;
    margin-bottom: 1rem;
}

.cms-add-form select,
.cms-add-form input {
    min-width: 0;
    padding: .4rem .45rem;
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    color: #333333;
    font: inherit;
}

.cms-add-form button {
    border: 0;
    border-radius: 3px;
    background: darkgreen;
    color: #FFFFFF;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: .45rem .7rem;
}

.cms-block-section {
    display: grid;
    gap: .45rem;
}

.cms-section-title {
    margin: .2rem 0 0;
    color: #777777;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cms-block-list {
    display: grid;
    gap: .45rem;
}

.cms-block-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .6rem .7rem;
    border: 1px solid #E3E3E3;
    border-radius: 3px;
    color: #555555;
}

.cms-block-row:hover,
.cms-block-row:focus-within {
    border-color: darkgreen;
    color: darkgreen !important;
}

.cms-block-main,
.cms-block-main:link,
.cms-block-main:visited {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: .55rem;
    color: #555555;
}

.cms-block-main:hover,
.cms-block-main:focus {
    color: darkgreen !important;
}

.cms-block-title {
    flex: 0 1 auto;
    color: #333333;
    font-weight: 700;
}

.cms-block-meta,
.cms-edit-meta {
    color: #888888;
    font-size: .78rem;
}

.cms-block-status {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #777777;
    cursor: pointer;
    font-size: .78rem;
    line-height: 1.2;
    padding: .15rem .2rem;
}

.cms-block-status:hover,
.cms-block-status:focus {
    color: darkgreen;
    text-decoration: underline;
}

.cms-block-status.is-inactive {
    color: #AAAAAA;
}

.cms-block-status:disabled {
    color: #AAAAAA;
    cursor: default;
    text-decoration: none;
}

.cms-block-controls {
    display: flex;
    gap: .18rem;
    align-items: center;
}

.cms-block-controls form {
    margin: 0;
}

.cms-block-controls button {
    border: 0;
    background: transparent;
    color: #888888;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    line-height: 1;
    padding: .15rem .2rem;
}

.cms-block-controls button:hover,
.cms-block-controls button:focus {
    color: darkgreen;
}

@media (max-width: 620px) {
    .cms-add-form {
        grid-template-columns: 1fr;
    }

    .cms-block-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cms-block-main {
        display: grid;
        gap: .12rem;
    }

    .cms-block-controls {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.cms-form {
    gap: .55rem;
}

.cms-editor {
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    background: #FFFFFF;
}

.cms-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .45rem;
    border-bottom: 1px solid #E4E4E4;
    background: #F8F8F8;
}

.cms-editor-toolbar button {
    width: auto;
    margin: 0;
    padding: .22rem .45rem;
    border: 1px solid #D6D6D6;
    border-radius: 3px;
    background: #FFFFFF;
    color: #555555;
    font-size: .78rem;
    font-weight: 600;
}

.cms-editor-toolbar button:hover,
.cms-editor-toolbar button:focus {
    border-color: darkgreen;
    color: darkgreen;
}

.cms-inline-editor {
    min-height: 360px;
    max-height: 620px;
    padding: .75rem;
    overflow: auto;
    color: #555555;
    background: #FFFFFF;
    font-family: var(--font-sans);
    font-size: .9rem;
    line-height: 1.45;
    outline: 0;
}

.cms-inline-editor:focus {
    box-shadow: inset 0 0 0 1px darkgreen;
}

.cms-inline-editor .grid-container {
    display: block;
    width: auto;
    max-width: none;
}

.cms-inline-editor .grid-container > div:empty {
    display: none;
}

.cms-inline-editor .grid-container > div:nth-child(odd) {
    text-align: left;
}

.cms-inline-editor.is-hidden {
    display: none;
}

.cms-editor textarea {
    display: none;
    min-height: 360px;
    border: 0;
    border-radius: 0;
}

.cms-editor textarea.is-visible {
    display: block;
}

.cms-checkbox {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

.cms-checkbox input {
    width: auto;
}

.theme-list {
    display: grid;
    gap: .55rem;
}

.theme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .6rem .7rem;
    border: 1px solid #E3E3E3;
    border-radius: 3px;
    color: #555555;
}

.theme-option:has(input:checked) {
    border-color: darkgreen;
    background: #F6FAF6;
}

.theme-option input {
    width: auto;
}

.theme-option-title {
    display: block;
    color: #333333;
    font-weight: 700;
}

.theme-option-meta,
.theme-option-status {
    color: #888888;
    font-size: .78rem;
}

.theme-option-status {
    flex: 0 0 auto;
    color: darkgreen;
    font-weight: 700;
}

.cms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}

.cms-actions .account-action-secondary {
    display: inline-flex;
    align-items: center;
    padding: .42rem .7rem;
    border: 1px solid #D8D8D8;
    border-radius: 3px;
    background: #FFFFFF;
    color: #555555 !important;
    font-weight: 600;
}

.cms-live-block {
    position: relative;
}

/* .heading_section/.heading_page set overflow:hidden for their own layout
   reasons; the edit pencil is absolutely positioned outside that box
   (left: -1.65rem), so it needs this overridden back to visible or it
   gets silently clipped. */
.heading_section.cms-live-block,
.heading_page.cms-live-block {
    overflow: visible;
}

.cms-live-edit-button {
    position: absolute;
    top: 0;
    left: -1.65rem;
    display: none;
    width: 1.3rem;
    height: 1.3rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #D8D8D8;
    border-radius: 50%;
    background: #FFFFFF;
    color: #777777;
    font-size: .68rem;
    line-height: 1;
    z-index: 2;
}

.cms-editing-enabled .cms-live-edit-button {
    display: inline-flex;
}

.cms-editing-enabled .cms-live-block {
    min-height: 1.3rem;
}

.cms-live-edit-button:hover,
.cms-live-edit-button:focus {
    border-color: darkgreen;
    color: darkgreen;
}

.cms-live-content.is-editing {
    outline: 1px solid darkgreen;
    outline-offset: .35rem;
    background: #FFFFFF;
}

.cms-live-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin: .7rem 0 1rem 0;
}

.cms-live-actions[hidden] {
    display: none;
}

.cms-live-save,
.cms-live-cancel {
    width: auto;
    margin: 0;
    padding: .28rem .55rem;
    border: 1px solid #D8D8D8;
    border-radius: 3px;
    background: #FFFFFF;
    color: #555555;
    font-size: .78rem;
    font-weight: 600;
}

.cms-live-save {
    border-color: darkgreen;
    background: darkgreen;
    color: #FFFFFF;
}

.cms-live-actions a {
    color: #777777 !important;
    font-size: .78rem;
}

.cms-live-status {
    color: #777777;
    font-size: .78rem;
}

.cms-live-notice {
    margin: .3rem 0 .8rem 0;
    color: #777777;
    font-size: .78rem;
}

.cms-live-notice[hidden] {
    display: none;
}

.cms-live-notice a {
    color: #777777 !important;
}

/* Text-style buttons for Undo, Redo, Reload, Overwrite anyway. */
.cms-live-link {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: darkgreen;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Version history page (/user/history). */
.cms-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-history-item {
    padding: .6rem 0;
    border-bottom: 1px solid #EEEEEE;
}

.cms-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: baseline;
    font-size: .85rem;
}

.cms-history-action {
    color: #777777;
    font-size: .75rem;
    text-transform: uppercase;
}

.cms-history-current {
    color: darkgreen;
    font-size: .75rem;
    font-weight: 600;
}

.cms-history-preview {
    margin-top: .2rem;
    color: #555555;
    font-size: .85rem;
}

.cms-history-item details {
    margin-top: .3rem;
    font-size: .85rem;
}

.cms-history-text {
    margin: .4rem 0;
    padding: .6rem;
    border: 1px solid #EEEEEE;
    background: #FAFAFA;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .85rem;
}

.cms-history-text ins {
    background: #DDF4DD;
    text-decoration: none;
}

.cms-history-text del {
    background: #F8DADA;
}

.cms-history-item form {
    display: inline;
}

/* CV and Publications */
.cv.grid-container ul li {
    position: relative;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    text-indent: 0;
}

.cv.grid-container ul li::before {
    position: absolute;
    left: -1rem;
    display: block;
    width: .75rem;
    color: #BBBBBB;
    content: "-";
    text-indent: 0;
    text-align: left;
}

.cv .institute {
    display: inline;
}

.cv .institute::before {
    display: block;
    content: " ";
}

.cv .institute::after {
    content: ",";
}

.cv .remark,
.cv .location {
    display: inline;
}

.cv .bullets {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    padding-left: 0;
    list-style: none;
    text-indent: 0;
}

.cv a {
    display: inline;
    padding: 0;
    color: #BBBBBB !important;
    text-decoration: none;
}

.cv a::before {
    content: "@" !important;
}

.cv .dissertation a::before {
    content: "" !important;
}

.cv .funded::after {
    content: "*" !important;
}

.keywords {
    margin-top: 5px;
    color: #B3B3B3;
    font-size: .9rem;
}

.keywords::before {
    content: "Keywords: ";
}

/* Headings and Inline Metadata */
.heading_page {
    display: block;
    margin: 5px 0 8px 0;
    padding: 5px 0 0 0;
    overflow: hidden;
    color: darkgreen;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.heading_section {
    display: block;
    margin: 1.4rem 0 .15rem 0;
    overflow: hidden;
    color: #222222;
    background-image: linear-gradient(to right, #F5F5F5, white);
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
}

.heading_section2 {
    display: block;
    margin: .8rem 0 0 0;
    overflow: hidden;
    color: #333333;
    font-weight: 700;
}

.header-sub {
    position: relative;
    display: block;
    margin: 2px;
    padding: 2px;
    line-height: normal;
}

#contact_info span a {
    display: inline;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #757575;
    font-size: 10px;
    font-weight: normal;
    line-height: 1rem !important;
    text-transform: none;
}

.fas,
.fa-caret-down {
    color: #999999;
    font-size: .5em;
}

/* Course Overview Page */
#courses .paragraph {
    padding: 0 0 5px 0;
}

#courses ol,
#courses ul {
    margin: 5px 0 0 0;
    padding-left: 1.25rem;
}

#courses .notes,
.notes * {
    color: #B3B3B3 !important;
    font-size: .86rem;
}

#courses .keywords {
    margin: .2rem 0 0 0;
    line-height: 1.25;
}

#course_summary tr.detail_list td {
    padding: 0 5px;
}

.row {
    margin: 1em 0;
}

.one-fourth.column {
    width: 23.5%;
}

.one-half.column {
    width: 49%;
}

.three-fourths.column {
    width: 74.5%;
}

/* Canvas Course Pages
   Exported class pages load this same stylesheet for lightweight Canvas overrides. */
.kl_flat_sections_main > div,
.kl_flat_sections > div {
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 1rem !important;
}

.kl_flat_sections_main h4,
.kl_flat_sections h4 {
    margin: 1rem 0 0 0 !important;
    color: #000;
    border-bottom: 1px solid #E0E0E0;
}

.kl_panel_heading {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.kl_panel_heading h4 {
    margin: 1rem 0 0 0.5rem;
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
}

.kl_panel_content div {
    margin: 0;
    padding: 0;
}

#kl_wrapper_3.kl_flat_sections_main h4,
#kl_wrapper_3.kl_flat_sections h4 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

#kl_wrapper_3.kl_flat_sections > div,
#kl_wrapper_3.kl_flat_sections_main > div {
    font-size: 1rem;
    line-height: 1.4rem;
}

table {
    margin: 1rem 0;
}

@media only screen and (min-width: 500px) {
    .off-sm-12,
    .col-sm-12,
    .off-sm-11,
    .col-sm-11,
    .off-sm-10,
    .col-sm-10,
    .off-sm-9,
    .col-sm-9,
    .off-sm-8,
    .col-sm-8,
    .off-sm-7,
    .col-sm-7,
    .off-sm-6,
    .col-sm-6,
    .off-sm-5,
    .col-sm-5,
    .off-sm-4,
    .col-sm-4,
    .off-sm-3,
    .col-sm-3,
    .off-sm-2,
    .col-sm-2,
    .off-sm-1,
    .col-sm-1,
    .col-sm {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* Responsive Layout */
@media (max-width: 775px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-header-grid {
        grid-template-columns: auto 1fr;
    }

    .site-nav {
        grid-column: 1 / -1;
    }

    .site-brand {
        margin-right: .75rem;
    }

    .site-nav .navbar-collapse {
        padding-top: .75rem;
        text-align: right;
    }

    .site-nav .navbar-nav {
        align-items: flex-end;
        margin-left: auto !important;
    }

    .site-nav .nav-link {
        padding: .35rem 0 !important;
    }

    .tychen_wrapper .grid-container {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
        row-gap: .25rem;
    }

    .tychen_wrapper .grid-container > div:nth-child(odd) {
        text-align: left;
    }

    .grid-spacer {
        display: none;
    }

    .cv > div:empty {
        display: none;
    }

    .cv > div[style*="visibility: hidden"] {
        display: none;
    }

    .cv .bullets {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .cv .heading_section {
        margin-top: .85rem;
    }

    .cms-live-edit-button {
        top: -.1rem;
        left: 0;
    }

    .heading_page {
        font-size: .95rem;
    }

    .heading_section {
        margin-top: 1.2rem;
    }

    .home-summary {
        grid-column: 1;
        font-size: .92rem;
    }

    .home-cards {
        grid-column: 1;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 1.1rem;
    }

    .site-footer {
        width: 100%;
        max-width: 100%;
        padding-top: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Paragraphs inside a CMS section body (see page_sections_block): a gap
   between paragraphs, none after the last one. */
.section-body p {
    margin: 0 0 .75rem 0;
}

.section-body p:last-child {
    margin-bottom: 0;
}

/* Statement section headings (teaching, research): room below the heading
   so it heads the whole section rather than sitting on the first line. */
.heading_section.section-heading {
    margin-bottom: .4rem;
}

/* Publications (includes/publications_store.php). The left column holds the
   authors, so the edit pencil sits to the right of each entry instead. */
.publication-details.cms-live-block > .cms-live-edit-button {
    left: auto;
    right: -1.8rem;
}

.publication-hidden {
    opacity: .55;
}

.publication-flag {
    display: block;
    color: #A0522D;
    font-size: .75rem;
}

.publication-preview {
    margin: 0 0 1rem 0;
    padding: .6rem;
    border: 1px solid #EEEEEE;
    background: #FAFAFA;
}

.publication-form fieldset {
    margin: 0 0 1rem 0;
    padding: 0;
    border: 0;
}

.publication-form legend {
    margin: .4rem 0;
    color: darkgreen;
    font-size: .9rem;
    font-weight: 700;
}

.publication-date-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.publication-date-fields > div {
    flex: 1 1 8rem;
}

.publication-doi-start {
    padding: .6rem !important;
    border: 1px solid #DDEEDD !important;
    background: #F6FBF6;
}

.publication-doi-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.publication-doi-row input {
    flex: 1 1 auto;
}

/* People and ORCID pages */
.publication-tools {
    margin-left: .8rem;
    color: #777777;
    font-size: .8rem;
}

.publication-tools a {
    color: #777777 !important;
}

.people-subheading {
    margin: 1.2rem 0 .4rem 0;
    font-size: 1rem;
    font-weight: 700;
}

.people-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.people-table th,
.people-table td {
    padding: .3rem .4rem;
    border-bottom: 1px solid #EEEEEE;
    text-align: left;
    vertical-align: top;
}

.people-me {
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 3px;
    background: #DDF4DD;
    color: darkgreen;
    font-size: .7rem;
    font-weight: 700;
}

.people-suggestions,
.orcid-list {
    padding-left: 1.1rem;
    font-size: .88rem;
}

.people-suggestions form {
    display: inline;
}

.orcid-list li {
    margin-bottom: .5rem;
}

.orcid-add {
    margin-left: .3rem;
    font-weight: 600;
}

@media (max-width: 700px) {
    .people-table th:nth-child(3),
    .people-table td:nth-child(3),
    .people-table th:nth-child(5),
    .people-table td:nth-child(5) {
        display: none;
    }
}

/* Profile page and the identity line under the publications heading */
.publication-identity {
    margin: .2rem 0 .4rem 0;
    color: #777777;
    font-size: .82rem;
}

.publication-identity a {
    color: darkgreen !important;
}

.publication-identity-sep {
    color: #CCCCCC;
}

.profile-form fieldset {
    margin: 0 0 1.2rem 0;
    padding: 0;
    border: 0;
}

.profile-form legend {
    margin: .4rem 0;
    color: darkgreen;
    font-size: .9rem;
    font-weight: 700;
}

.profile-variants input[type="text"] {
    width: 100%;
    margin: 0;
}

.profile-unsaved td {
    background: #FFFBEA;
}

.profile-url {
    flex: 3 1 14rem !important;
}

.profile-help {
    margin: .2rem 0 .8rem 0;
    font-size: .85rem;
}

.profile-help summary {
    color: darkgreen;
    cursor: pointer;
}

.profile-help ol {
    margin: .4rem 0;
    padding-left: 1.2rem;
}

.profile-help li {
    margin-bottom: .3rem;
}

.profile-help code {
    font-size: .8rem;
    word-break: break-all;
}

.profile-add-names {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin: .6rem 0 .3rem 0;
}

.profile-add-names select {
    width: auto;
    max-width: 100%;
    margin: 0;
}

.profile-pick-label {
    margin: 0;
    color: #777777;
    font-size: .85rem;
    font-weight: 400;
}

/* HTML content blocks that carry their own layout grid (CV, home, research
   map): the block spans the whole page width, so by default the pencil sits
   at the page's left edge. Put it beside the text column instead, using the
   grid's geometry (width 95% up to 800px, centered, columns 2fr 5fr, 12px
   gap). Phones use one column and keep the default placement. */
@media (min-width: 776px) {
    .cms-live-block:has(> .cms-live-content > .grid-container:first-child) > .cms-live-edit-button {
        left: calc((100% - min(95%, 800px)) / 2 + (min(95%, 800px) - 12px) * 2 / 7 + 12px - 1.65rem);
    }
}

/* ...and level with the block's heading when it starts with one (headings
   carry a 1.4rem top margin). */
@media (min-width: 776px) {
    .cms-live-block:has(> .cms-live-content > .grid-container:first-child > .heading_section:nth-child(-n+2)) > .cms-live-edit-button {
        top: 1.4rem;
    }
}

/* CV records (includes/cv_store.php): pencil to the right of each entry,
   since the left column holds the dates. */
.cv-entry.cms-live-block > .cms-live-edit-button {
    left: auto;
    right: -1.8rem;
}

.cv-hidden {
    opacity: .55;
}

/* Editing-only parts: hidden records, "+ Add" links, empty placeholders.
   With Editing off, a signed-in owner sees the page as visitors do. */
.cms-edit-only {
    display: none !important;
}

.cms-editing-enabled .cms-edit-only {
    display: revert !important;
}

.cms-editing-enabled .grid-container.cms-edit-only {
    display: grid !important;
}

/* The CV styles every link inside an entry (shown inline, grey, with "@").
   Keep those rules off the edit pencil and the "+ Add" links. */
.cv a.cms-live-edit-button {
    display: none;
    color: #777777 !important;
}

.cms-editing-enabled .cv a.cms-live-edit-button {
    display: inline-flex;
}

.cv a.cms-live-edit-button::before,
.cv a.cms-add-link::before {
    content: none !important;
}

.cv a.cms-add-link {
    color: #555555 !important;
}