header.local-nav {
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--bg-dynamic-local-nav-bar-primary);
    position: sticky;
    top: 0;
    z-index: 25;
    backdrop-filter: saturate(180%) blur(20px);
}

@media screen and ( min-width: 601px ) {
    body.admin-bar header.local-nav {
        top: var(--wp-admin--admin-bar--height);
    }
}

header.local-nav .has-theme-font-family {
    font-size: 24px;
    font-weight: 500;
    font-style: italic;
    line-height: 64px;
}

header.local-nav .menu-toggle {
    display: none;
    cursor: pointer;
}

header.local-nav .menu {
    font-size: 14px;
    gap: 32px !important;
    box-sizing: border-box !important;
}

header.local-nav .menu a {
    height: 64px;
    display: flex;
    align-items: center;
    color: inherit !important;
    border-bottom: 2px solid transparent;
    transition: border-color 60ms ease;
    box-sizing: border-box;
}

header.local-nav .menu a.selected {
    border-bottom: 2px solid var(--border-local-nav-bar-menu-selected);
}

header.local-nav .menu a:not(.selected):hover {
    border-bottom: 2px solid var(--border-local-nav-bar-menu-hover);
}

.post-subhead {
    font-size: 24px;
    font-weight: 300;
}

.portfolio-tooltip-language {
    font-size: 12px;
    font-style: italic;
    margin-top: 48px;
    margin-bottom: 24px;
}

.portfolio-tooltip-language .tooltip-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    margin-left: -2px;
}

.portfolio-tooltip-language .tip-icon {
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('../images/info-black.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.portfolio-tooltip-language a {
    color: var(--a-link-blue) !important;
}

.portfolio-tooltip-language a:hover {
    text-decoration: underline;
}

.post-header hr.col {
    margin: 32px auto;
}

.post-content .citation {
    box-sizing: content-box;
}

.post-content .citation .wp-block-columns {
    column-gap: 24px !important;
}

.post-content .citation .wp-block-column p:not(:last-child) {
    margin-bottom: 16px;
}

.post-content .citation a {
    position: relative;
}

.post-content .citation a[target="_blank"]::before, .post-content .citation a[target="_blank"]::after {
    content: '';
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    right: 0;
    top: 4px;
    transition: opacity 160ms ease 40ms;
}

.post-content .citation a[target="_blank"]::before {
    position: absolute;
    background-image: url('../images/arrow-up-right-blue.svg');
    opacity: 1;
}

.post-content .citation a[target="_blank"]::after {
    position: relative;
    background-image: url('../images/arrow-up-right-blue-hover.svg');
    opacity: 0;
}

.post-content .citation a:hover::after {
    opacity: 1;
}

.wp-block-columns {
    flex-wrap: nowrap !important;
}

.post-footer .portfolio-footer {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 8px;
}

.portfolio-footer-meta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: hsla(240, 24%, 96%, 1);
    padding: 14px 16px 16px;
    font-size: 12px;
}

@supports (padding: max(0px)) {
    @media ( max-width: 576px ) {
        body[class*="-template-single-full-width-no-title"]:not(.entry) .footer-info {
            padding-left: max(var(--general-page-padding), env(safe-area-inset-left)) !important;
            padding-right: max(var(--general-page-padding), env(safe-area-inset-right)) !important;
        }
    }
}

.portfolio-footer-meta h3 {
    font-size: 16px;
}

.portfolio-footer-meta a {
    color: hsla(202, 95%, 46%, 1);
    transition: color 160ms ease 80ms;
}

.portfolio-footer-meta a:hover {
    color: hsla(203, 95%, 77%, 1);
}

.portfolio-footer-meta .comma,
.meta-group .value .value-explanation {
    color: hsla(240, 6%, 25%, 0.6);
}

.value-explanation {
    display: inline-block;
    margin-left: 4px;
    font-weight: normal;
}

html[lang="zh-CN"] .value-explanation {
    margin-left: 2px;
}

.portfolio-footer-meta h3 + .meta-group {
    margin-top: 32px;
}

.portfolio-footer ul, .portfolio-footer li {
    list-style-type: none;
}

.portfolio-footer li {
    display: inline-block;
}

.meta-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.meta.row {
    display: flex;
    gap: 16px;
    padding: 6px 0;
    border-top: 1px solid #E0E0E0;
}

.meta.row:first-child {
    border: none;
}

.meta.row.date .value {
    color: hsla(240, 6%, 25%, 0.6);
}

.meta.row.date .value .date {
    color: #000;
}

.meta.row.with-taxonomy-notes {
    padding: 0;
}

.meta.row.with-taxonomy-notes .key, .meta.row.with-taxonomy-notes .value li {
    padding: 6px 0;
}

.meta-group .key {
    flex: 1 1 20%;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
    font-weight: normal;
    color: hsla(240, 6%, 25%, 0.6);
}

.meta-group .value {
    flex: 1 1 60%;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

.value-title {
    font-weight: 500;
}

.with-taxonomy-notes .comma {
    display: none;
}

.with-taxonomy-notes .value {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.with-taxonomy-notes .value li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 4px;
}

.with-taxonomy-notes .value li:hover .taxonomy-note {
    color: #000000;
}

.with-taxonomy-notes .value li .value-name {
    flex: 1 1 40%;
}

.with-taxonomy-notes .value li .taxonomy-note {
    flex: 1 1 50%;
    color: hsla(240, 6%, 25%, 0.6);
    transition: color 160ms ease 90ms;
    cursor: default;
}

.with-taxonomy-notes .value li:not(:first-child) {
    border-top: 1px solid #F0F0F0;
}

.meta-group.meta-social-media-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

.meta-social-media-links .meta a {
    display: block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    transition: all 120ms ease-out 40ms;
    padding: 8px;
    cursor: pointer;
}

.meta-social-media-links .meta a::before, .meta-social-media-links .meta a::after {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    transition: all 0ms ease 40ms;
    margin-left: 2px;
    margin-top: 2px;
    opacity: 0;
    z-index: 9;
}

.meta-social-media-links .meta a::after {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    margin-left: -8px;
    margin-top: -8px;
    z-index: 1 !important;
}

.meta-social-media-links .meta:hover a::after, .meta-social-media-links .meta:hover a::before {
    opacity: 1;
    scale: 1.2;
    cursor: pointer;
    transition: all 120ms ease-out 40ms;
}

.meta-social-media-links .meta:active a::after, .meta-social-media-links .meta:active a::before {
    scale: 1;
}

.meta.linkedin_post_link a {
    background-image: url('../images/linkedin-black.svg');
}
.meta.linkedin_post_link a::before {
    background-image: url('../images/linkedin-tint-blue.svg');
}

.meta.x_post_link a {
    background-image: url('../images/x-black.svg');
}
.meta.x_post_link a::before {
    background-image: url('../images/x-tint-blue.svg');
}

.meta.instagram_post_link a {
    background-image: url('../images/instagram-black.svg');
}
.meta.instagram_post_link a::before {
    background-image: url('../images/instagram-tint-blue.svg');
}

.meta.instagram_story_link a {
    background-image: url('../images/instagram-story-black.svg');
}
.meta.instagram_story_link a::before {
    background-image: url('../images/instagram-story-tint-blue.svg');
}

.meta.medium_story_link a {
    background-image: url('../images/medium-black.svg');
}
.meta.medium_story_link a::before {
    background-image: url('../images/medium-tint-blue.svg');
}

.meta.publication_link a {
    background-image: url('../images/publication-black.svg');
}
.meta.publication_link a::before {
    background-image: url('../images/publication-tint-blue.svg');
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media ( min-width: 768px ) {
    .portfolio-footer-meta {
        padding: 26px 32px 20px;
    }
    
    .portfolio-footer-meta h3 {
        font-size: 20px;
    }
    
    .meta-group.meta-social-media-links {
        justify-content: flex-start;
        margin-left: -12px;
    }
}

@media ( min-width: 769px ) {
    header.local-nav.open .menu {
        height: 64px !important;
    }
}

@media screen and (min-width: 769px) {
    @supports (padding: max(0px)) {
        body .col.post-content > header.local-nav {
            padding-right: max( calc( var(--general-page-padding) + 4px ), calc( env(safe-area-inset-right) + 16px ), env(safe-area-inset-right)) !important;
        }
    }
}

@media ( max-width: 768px ) {
    html body .col.post-content > header.local-nav {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    header.local-nav .has-theme-font-family {
        padding-left: var(--page-padding-wide);
    }
    
    @supports (padding: max(0px)) {
        header.local-nav p.has-theme-font-family {
            padding-left: max(var(--page-padding-wide), env(safe-area-inset-left)) !important;
        }
        body .col.post-content > header.local-nav {
            padding-left: 0 !important;
            padding-right: max(0px, env(safe-area-inset-right)) !important;
        }
    }
    
    header.local-nav .menu-toggle {
        display: block;
        transition: transform 400ms ease;
    }
    
    header.local-nav.open .menu-toggle {
        transform: rotateX(180deg);
    }
    
    header.local-nav.closing .menu-toggle {
        transform: rotateX(0deg);
    }
    
    header.local-nav > .wp-block-spacer {
        display: none;
    }
    
    header.local-nav .menu {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 16px !important;
        line-height: 32px;
        width: 100%;
        /* background-color: var(--bg-dynamic-local-nav-bar-primary); */
        /* backdrop-filter: saturate(180%) blur(20px); */
        padding-right: 0px;
        padding-left: var(--page-padding-wide);
        height: 0.5px;
        overflow: hidden;
        transition: height 400ms ease;
        box-shadow: 0 0.5px var(--border-local-nav-bar-menu-boder-bottom);
    }
    
    header.local-nav .menu a {
        height: 32px;
        transform: translateY(0);
        opacity: 1;
        transition: transform 400ms ease, opacity 200ms ease;
    }
    
    header.local-nav:not(.open) .menu {
        pointer-events: none;
    }
    
    header.local-nav:not(.open) .menu a,
    header.local-nav.closing .menu a {
        transform: translateY(-20px);
        opacity: 0;
    }
    
    header.local-nav .menu a:first-child {
        margin-top: 16px;
    }
    
    header.local-nav .menu a:last-child {
        margin-bottom: 40px;
    }
    
    header.local-nav .menu a .wp-block-inline-svg-block {
        min-height: 44px;
        display: flex;
        align-items: center;
        margin: 8px 0;
    }
    
    header.local-nav .menu a {
        padding-left: 16px;
        border-left: 2px solid transparent;
        border-bottom: 0;
    }
    
    header.local-nav .menu a.selected {
        border-left: 2px solid var(--border-local-nav-bar-menu-selected);
        border-bottom: 0;
    }
    
    header.local-nav .menu a:not(.selected):hover {
        border-left: 2px solid var(--border-local-nav-bar-menu-hover);
        border-bottom: 0;
    }
}

@media ( max-width: 736px ) {
    .post-header hr.col {
        margin: 24px auto;
    }
    
    .post-subhead {
        font-size: 22px;
    }
    
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
    
    .post-content .citation .wp-block-column p:last-child {
        margin-bottom: 16px;
    }
}

@media ( max-width: 576px ) {
    header.local-nav .has-theme-font-family,
    header.local-nav .menu {
        padding-left: var(--page-padding-default);
    }
    
    @supports (padding: max(0px)) {
        header.local-nav p.has-theme-font-family {
            padding-left: max(var(--page-padding-default), env(safe-area-inset-left)) !important;
        }
        body .col.post-content > header.local-nav {
            padding-left: 0 !important;
            padding-right: max(var(--page-padding-default), env(safe-area-inset-right)) !important;
        }
    }
    
    .post-footer { max-width: var(--max-width-post-footer-wide); }
    .post-footer .portfolio-footer { border-radius: 0px; }
    .portfolio-footer-meta { padding: 24px var(--general-page-padding); }
    .portfolio-footer-meta h3 { font-size: 20px; }
    .portfolio-footer-meta h3 + .meta-group { margin-top: 96px; }
    .meta-group.meta-social-media-links { justify-content: space-evenly; }
}

@supports(padding: max(0px)) {
    @media ( max-width: 576px ) {
        .portfolio-footer-meta {
            padding-left: max(var(--general-page-padding), env(safe-area-inset-left));
            padding-right: max(var(--general-page-padding), env(safe-area-inset-right));
        }
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and(min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .meta.row, .with-taxonomy-notes .value li:not(:first-child) {
        border-top-width: 0.5px;
        border-top-color: hsla(240, 2.04%, 31.85%, 0.25);
    }
}