/*
Theme Name: Chiawei Blog
Theme URI: https://www.chiawei.com
Author: Chiawei Lu
Author URI: https://www.chiawei.com/about/
Description: Designed and developed by Chiawei in Boston.
Version: 0.1.4
Tags: Blog
Text Domain: chiawei-blog
*/

/**
 * Table of Contents
 *
 * 1.0 - Reset
 *   1.1 - Basic
 *   1.2 - Typography
 *   1.3 - Elements
 *   1.4 - Form
 * 2.0 - General
 * 3.0 - Header
 *   3.1 - Bar
 *   3.2 - Hero
 * 4.0 - Main
 *   4.1 - Main Class
 *   4.2 - Page Header
 *   4.3 - Not Found
 *   4.4 - Attachment
 * 5.0 - Post
 *   5.1 - Post Header
 *   5.2 - Post Content
 *   5.3 - Post Footer
 * 6.0 - Comments
 * 7.0 - Post Navigation
 * 8.0 - Posts Pagination
 * 9.0 - Footer
 * 10.0 - Media
 *   10.1 - Image
 *   10.2 - Gallery
 *   10.3 - Playlist
 * 11.0 - Addition
 */


/* 1.0 Reset
------------------------------------------------------------ */

/* 1.1 Basic */

html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust： 100%; }
body { background: #fff; color: #333; font-size: 18px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; min-width: 320px; -webkit-tap-highlight-color: transparent; }
header, footer, nav, main, article, section, figure { display: block; }

/* 1.2 Typography */

:root {
    font-family: "Optical Aligned Punctuation", Inter, -apple-system, system-ui, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    
    --display-font-en: InterDisplay, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --display-font-zh: "Optical Aligned Punctuation", InterDisplay, -apple-system, system-ui, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
    --display-font-zh-title: InterDisplay, -apple-system, system-ui, BlinkMacSystemFont, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
    
    --serif-font: ui-serif, Georgia, "Times New Roman", serif;
    --monospace-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --rounded-font: ui-rounded;
    --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Mozilla", sans-serif;
    
    --brand-font: "pinot-grigio-modern", ui-rounded, InterDisplay, sans-serif;
}
html:lang(en-US) { font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, sans-serif; }
html:lang(zh-CN) { font-family: "Optical Aligned Punctuation", Inter, -apple-system, system-ui, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", sans-serif; }

@supports (font-variation-settings: normal) {
    :root { font-family: "Optical Aligned Punctuation", InterVariable, -apple-system, system-ui, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", sans-serif; }
    html:lang(en-US) * { font-family: InterVariable, -apple-system, system-ui, BlinkMacSystemFont, sans-serif; }
    html:lang(zh-CN) { font-family: "Optical Aligned Punctuation", InterVariable, -apple-system, system-ui, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", sans-serif; }
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; margin-bottom: 0; }
blockquote.is-style-default {  }
blockquote.is-style-plain {  }
blockquote.is-style-bleed { max-width: var(--max-width-post-content-wide); margin: 56px auto; text-align: center; }
blockquote.is-style-bleed p { max-width: var(--max-width-post-content-wide); margin-left: auto; margin-right: auto; }
blockquote.has-medium-font-size { font-size: 16px !important; line-height: 1.4; }
html:lang(zh) blockquote.has-medium-font-size { line-height: 1.6; }
blockquote.has-medium-font-size p + cite { font-size: 14px; margin-top: 12px; }
blockquote.has-large-font-size { font-size: 24px !important; line-height: 1.35; }
html:lang(zh) blockquote.has-large-font-size { line-height: 1.5; }
blockquote.has-large-font-size p + cite { font-size: 20px; margin-top: 18px; }
blockquote.has-x-large-font-size { font-size: 32px !important; line-height: 1.35; }
html:lang(zh) blockquote.has-x-large-font-size { line-height: 1.45; }
blockquote.has-x-large-font-size p + cite { font-size: 24px; margin-top: 20px; }
blockquote.is-style-classic { font-family: var(--serif-font); border-left: 3px solid rgba(0, 0, 0, .8); border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding: 32px 24px 32px 32px; margin-left: auto; margin-right: auto; background: #fcfcfc; padding: 32px 24px 32px 32px; }
blockquote.is-style-classic:lang(zh-cmn-Hant) { font-family: var(--serif-font); }
blockquote.is-style-classic:lang(en) { font-family: var(--serif-font); }
.post-content blockquote p { margin-bottom: 0px; margin-left: auto; margin-right: auto; }

div.ancient { direction: rtl; border-right: 3px solid rgba(0, 0, 0, .8); border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); background: #fcfcfc; overflow: auto; }
.ancient blockquote { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; direction: ltr; height: 60vh; border: none; border-left: 1px solid rgba(0, 0, 0, .1); padding: 20px 0 20px 20px; margin: 0; }
.ancient blockquote p.chapter { font-size: 34px; line-height: 1em; font-weight: bold; }
div.ancient + * { margin-top: 30px !important; }

pre, code, .code { font-family: var(--monospace-font); letter-spacing: -0.027em; }
pre, code { font-size: 15px; }
pre { line-height: 1.6; background-color: #f9fafa; border: 1px solid #e6e6e6; border-radius: 4px; margin: 0; padding: 25px; overflow: auto; }
pre span.syntax-param-name { color: #404040; }
pre span.syntax-comment, pre span.syntax-quote { color: #007400; }
pre span.syntax-keyword, pre span.syntax-literal, pre span.syntax-selector-tag { color: #aa0d91; }
pre span.syntax-string { color: #c41a16; }
pre span.syntax-link { font-weight: italic; }
pre span.syntax-bullet, pre span.syntax-meta, pre span.syntax-number, pre span.syntax-symbol, pre span.syntax-tag, pre span.syntax-title { color: #1c00cf; }
pre span.syntax-attr, pre span.syntax-built_in, pre span.syntax-builtin-name, pre span.syntax-class, pre span.syntax-params, pre span.syntax-section, pre span.syntax-title, pre span.syntax-type { color: #5c2699; }
pre span.syntax-attribute, pre span.syntax-identifier, pre span.syntax-subst { color: #000000; }
.center { text-align: center; }
.right { text-align: right; }

.post-content .wp-block-group p { margin-bottom: 0px; }

code { line-height: 1.4; vertical-align: middle; display: inline-block; padding: 0 6px; border-radius: 4px; background-color: #f9fafa; border: 1px solid #e6e6e6; white-space: pre-wrap; word-break: break-word; }
pre code { display: inline-block; padding: 0; border-radius: 0; background-color: transparent; border: none; }

q:lang(zh) { quotes: "「" "」" "『" "』"; }
q:lang(en) { quotes: '“' '”' "‘" "’"; }

.nowrap, span.nowrap { display: inline-block; text-decoration: inherit; white-space: nowrap; }

sup, sub { font-weight: 300; margin-right: 10px; }

u, .underline { text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid #333; }

.optimized-underline {
    text-decoration: none !important;
    border-bottom: 2px solid var(--wp--preset--color--vivid-green-cyan);
}
.optimized-underline:lang(en) { padding-bottom: 3.5px; }
.optimized-underline:lang(zh) { padding-bottom: 4.25px; }

@media ( min-width: 577px ) {
    body[class*="-template-single-full-width-no-title"]:not(.entry) .post-content > * { padding-left: var(--page-padding-wide); padding-right: var(--page-padding-wide); box-sizing: border-box; }
}

@media ( max-width: 768px ) {
	pre, code { font-size: 15px; }
}

@media ( max-width: 576px ) {
    body:not(.entry) .post-content > * { padding-left: var(--page-padding-default); padding-right: var(--page-padding-default); box-sizing: border-box; }
}

/* 1.3 Elements */

hr, .wp-block-separator { background: rgba(0,0,0,.1); border: 0 !important; width: 100%; height: 1px; margin: 40px auto; box-sizing: content-box; background-clip: content-box !important; }
body[class*="template-default"] .post-header hr,
body[class*="template-default"] .post-content hr { box-sizing: border-box; }
iframe, embed { width: 100%; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }
td, th, caption { border: solid rgb(229, 229, 234); border-width: 1px 0; }
td, th { font-size: 15px; line-height: 22px; padding: 12px 0; }
tr:first-child, caption { border-top: 2px solid rgb(229,229,234); }
th { text-align: left; padding-right: 24px; font-weight: 400; }
caption { border-bottom: 0; color: rgba(0,0,0,.4); font-size: 11px; text-transform: uppercase; letter-spacing: 3px; line-height: 25px; padding: 16px 12px; }
table + figcaption { text-align: left; }

a { text-decoration: none; color: inherit; cursor: auto; transition: color 160ms ease 40ms; }
a:hover, a:active { outline: 0; text-decoration: none; color: inherit; }
a:-webkit-any-link { text-decoration: none; color: inherit; cursor: pointer; transition: color 160ms ease 40ms; }
a[target="_blank"] { cursor: ne-resize; }

/* 1.4 Form */

fieldset { border: 1px solid rgba(0,0,0,.1); margin: 0; padding: 20px; }
button, input, textarea { border: 1px solid rgba(0,0,0,.1); box-sizing: border-box; color: inherit; font-size: inherit; margin: 0; outline: 0; }
button, input[type=button], input[type=reset], input[type=submit] { background: none; border-radius: 3px; cursor: pointer; -webkit-appearance: none; }
input[type=search], input[type=password] { -webkit-appearance: none; }

@media ( max-width: 768px ) {
	input, textarea { background-image: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)); }
	input[type=search], input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: none; }
	input[type=file], textarea { width: 100%; }
}

@media ( min-width: 744px ) {
    body[class*="template-default"] .post-header hr,
    body[class*="template-default"] .post-content hr { box-sizing: content-box; }
}

@media ( max-width: 743px ) {
    body[class*="template-default"] .post-header hr,
    body[class*="template-default"] .post-content hr { padding-left: 0 !important; padding-right: 0 !important; max-width: calc( 100vw - var(--general-page-padding) * 2 ); }
}

@media ( max-width: 576px ) {
    .wp-block-separator.is-style-dots:before { letter-spacing: 1em; padding-left: 1em; }
}


/* 2.0 General
------------------------------------------------------------ */

:root {
    --max-width-default: 680px;
    --max-width-wide: 960px;
    --max-width-fullwidth: 100vw;
    
    --max-width-post-header-default: var(--max-width-default);
    
    --max-width-post-featured-image-default: var(--max-width-post-content-default);
    --max-width-post-featured-image-big: var(--max-width-post-content-wide);
    --max-width-post-featured-image-fullbleed: var(--max-width-post-content-fullwidth);
    
    --max-width-post-content-default: var(--max-width-default);
    --max-width-post-content-wide: var(--max-width-wide);
    --max-width-post-content-fullwidth: var(--max-width-fullwidth);
    
    --max-width-post-text-default: var(--max-width-post-content-default);
    --max-width-post-text-wide: var(--max-width-post-content-wide);
    --max-width-post-text-fullwidth: var(--max-width-post-content-fullwidth);
    
    --max-width-post-image-default: var(--max-width-post-content-default);
    --max-width-post-image-big: var(--max-width-post-content-wide);
    --max-width-post-image-fullbleed: var(--max-width-post-content-fullwidth);
    
    --max-width-post-details-default: var(--max-width-post-content-default);
    --max-width-post-details-big: var(--max-width-post-content-wide);
    --max-width-post-details-fullbleed: var(--max-width-post-content-fullwidth);
    
    --max-width-post-table-default: var(--max-width-post-content-default);
    
    --max-width-post-footer-default: var(--max-width-default);
    --max-width-post-footer-fullwidth: var(--max-width-fullwidth);
    
    --max-width-page-footer-default: var(--max-width-default);
    --max-width-page-footer-wide: var(--max-width-wide);
    --max-width-page-footer-fullwidth: var(--max-width-fullwidth);
    
    --page-padding-ultrawide: 64px;
    --page-padding-wide: 32px;
    --page-padding-default: 20px;
    --page-padding-narrow: 8px;
    --page-padding-none: 0px;
    
    --general-page-padding: var(--page-padding-default);

    --header-admin-bar-height: 0px;
    --header-global-nav-bar-height: 64px;
    --header-home-banner-height: 0px;
    
    --nav-logo-margin-left: calc( var(--general-page-padding) - 2px );
    --page-content-padding: var(--general-page-padding);
    --page-footer-padding: var(--general-page-padding);
}

@media ( max-width: 1023px ) {
    :root {
        --max-width-default: 600px;
        --max-width-wide: 720px;
    }
}

@media ( max-width: 768px ) {
    :root {
        --header-global-nav-bar-height: 56px;
    }
}

@media ( max-width: 736px ) {
    :root {
        --max-width-default: 430px;
        --max-width-wide: 560px;
    }
}

@media ( min-width: 577px ) {
    :root {
        --general-page-padding: var(--page-padding-wide);
    }
}

@media ( max-width: 576px ) {
    :root {
        --max-width-default: 360px;
        --max-width-wide: 430px;
        --general-page-padding: var(--page-padding-default);
    }
}

@media ( max-width: 320px ) {
    :root {
        --max-width-post-image-fullbleed: 100%;
    }
}

body.admin-bar {
    --header-admin-bar-height: 32px;
  }
  
@media (max-width: 782px) {
    body.admin-bar {
        --header-admin-bar-height: 46px;
    }
}

.col, .pagination, .post-navigation .nav-links { max-width: var(--max-width-fullwidth); margin-left: auto; margin-right: auto; }
.article-list { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: stretch; gap: 2.5%; padding-left: 2.5%; padding-right: 2.5%; max-width: 680px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }

@supports (padding: max(0px)) {
    .article-list { padding-left: max(var(--page-padding-wide), env(safe-area-inset-left)) !important;
        padding-right: max(var(--page-padding-wide), env(safe-area-inset-right)) !important; }
}

@media ( max-width: 576px ) {
    @supports (padding: max(0px)) {
        .article-list {
            padding-left: max(var(--page-padding-default), env(safe-area-inset-left)) !important;
            padding-right: max(var(--page-padding-default), env(safe-area-inset-right)) !important;
        }
    }
}

.article-list > .col { max-width: 680px; width: 100%; margin-left: unset; margin-right: unset; }
.text-hidden, .says, .screen-reader-text { position: absolute; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

html:lang('en') .post-title { font-weight: 800; letter-spacing: -0.01em; }
html:lang('en') .logo, html:lang('en') .title, html:lang('en') .post-title, html:lang('en') .post-content h1, html:lang('en') .post-content h2, html:lang('en') .post-content h3, html:lang('en') .post-content h4, html:lang('en') .post-content h5, html:lang('en') .post-content h6 { font-family: var(--display-font-en); }
html:lang('zh') .post-title { font-family: var(--display-font-zh-title); font-weight: 800; }
html:lang('zh') .title, html:lang('zh') .post-content h1, html:lang('zh') .post-content h2, html:lang('zh') .post-content h3, html:lang('zh') .post-content h4, html:lang('zh') .post-content h5, html:lang('zh') .post-content h6 { font-family: var(--display-font-zh); }

.post-header .col { max-width: var(--max-width-post-header-default); box-sizing: content-box; }

.post-content > * { max-width: var(--max-width-post-content-default); }
.post-content > * { margin-left: auto; margin-right: auto; }

body:not(.entry) .post-footer { max-width: var(--max-width-post-footer-fullwidth); padding-left: var(--general-page-padding); padding-right: var(--general-page-padding); }

@media ( max-width: 576px ) {
    body:not(.entry) .post-footer { padding-left: var(--page-padding-none); padding-right: var(--page-padding-none); }
}

body[class*="-template-single-full-width-no-title"] .post-content > * { max-width: var(--max-width-post-content-fullwidth); min-width: 320px; }
body[class*="-template-single-full-width-no-title"]:not(.entry) .post-footer { max-width: var(--max-width-post-footer-fullwidth); min-width: 320px; padding-left: var(--general-page-padding); padding-right: var(--general-page-padding); }
body[class*="-template-single-full-width-no-title"]:not(.entry) .footer-info { max-width: var(--max-width-post-footer-fullwidth); padding-left: var(--general-page-padding); padding-right: var(--general-page-padding); }
body[class*="-template-single-full-width-no-title"] main > article > .post-content + footer { margin-top: var(--general-page-padding); }

@supports (padding: max(0px)) {
    @media ( min-width: 577px ) {
        body[class*="-template-single-full-width-no-title"]:not(.entry) .post-footer,
        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;
        }
    }
}

body[class*="-template-default"] .col.post-content > *:not([class*="-fullbleed"]):not([class*="-expanded"]),
body[class*="-template-default"] header.post-header > * { padding-left: var(--general-page-padding); padding-right: var(--general-page-padding); }
body[class*="-template-default"] .col.post-content > *[class*="-ultrawide"] { margin-left: var(--general-page-padding); margin-right: var(--general-page-padding); }

.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { max-width: var(--max-width-post-text-default); margin-left: auto !important; margin-right: auto !important; }
body:not(.entry) .post-content p, .post-content ul { max-width: var(--max-width-post-text-default); }
body[class*="-template-single-full-width-no-title"]:not(.entry) .post-content p,
body[class*="-template-single-full-width-no-title"]:not(.entry) .post-content ul { max-width: var(--max-width-post-text-fullwidth); }
.post-content .wp-block-table { max-width: var(--max-width-post-table-default); }

.post-content .is-style-image-default { max-width: var(--max-width-post-image-default); }
.post-content .is-style-image-big { max-width: var(--max-width-post-image-big); }
.post-content .is-style-image-fullbleed { max-width: var(--max-width-post-image-fullbleed); }

.post-content .is-style-details-default { max-width: var(--max-width-post-details-default); padding: var(--page-padding-default); padding-top: 12px; box-sizing: content-box; border-radius: 8px; }
.post-content .is-style-details-big { max-width: var(--max-width-post-details-big); padding: var(--page-padding-default); padding-top: 12px; box-sizing: content-box; border-radius: 12px; }
.post-content .is-style-details-fullbleed { max-width: var(--max-width-post-details-fullbleed); }
.post-content .is-style-details-big summary, .post-content .is-style-details-fullbleed summary { max-width: var(--max-width-post-details-default); margin: 0 auto; }

.is-style-details-default[open], .is-style-details-big[open], .is-style-details-fullbleed[open] { background-color: #F2F2F7; }

.is-style-details-default > :last-child, .is-style-details-big > :last-child { margin-bottom: 0px; }

body:not(.entry) .post-footer { max-width: var(--max-width-post-footer-default); }

@media ( max-width: 768px ) {
	.col, .pagination, .post-navigation .nav-links { padding-left: 0px; padding-right: 0px; }
    .article-list { padding: 0 var(--page-padding-default); }
    .article-list > .col { margin-top: unset; }
    body:not(.entry) .post-footer { max-width: var(--max-width-post-footer-default); }
}

@media ( max-width: 720px ) {
    .article-list { box-sizing: border-box; }
}

@media ( max-width: 576px ) {
    .post-footer { max-width: var(--max-width-post-footer-wide); }
    body:not(.entry) .post-date { padding-left: var(--page-padding-default); padding-right: var(--page-padding-default); }
    body:not(.entry) .post-footer { max-width: var(--max-width-post-footer-fullwidth); }
    body[class*="-template-single-full-width-no-title"]:not(.entry) .post-footer { max-width: var(--max-width-post-footer-fullwidth); padding-left: var(--page-padding-none); padding-right: var(--page-padding-none); }
    .post-content .is-style-image-big { padding-left: var(--page-padding-narrow); padding-right: var(--page-padding-narrow); }
    .post-content .is-style-image-fullbleed { padding-left: var(--page-padding-none) !important; padding-right: var(--page-padding-none) !important; }
    .post-content ul { padding-left: 44px !important; }
    .post-header .col { max-width: var(--max-width-post-text-default); margin-left: auto; margin-right: auto; padding-left: var(--page-padding-default); padding-right: var(--page-padding-default); }
}


/* 3.0 Header
------------------------------------------------------------ */

/* 3.1 Bar */

.bar { display: flex; justify-content: space-between; align-items: stretch; position: relative; height: var(--header-global-nav-bar-height); z-index: 50; transition: all 240ms ease-out 0ms; background: var(--background) !important; }

.logo { flex: 0 0 auto; white-space: nowrap; overflow: hidden; }
.logo a { display: block; font-size: 24px; font-weight: bold; font-style: italic; line-height: 64px; margin-left: 18px; font-family: var(--brand-font) }
.logo a, .logo a:hover { color: #333; text-decoration: none; user-select: none; cursor: pointer; }

@supports (padding: max(0px)) {
    .logo a {
        margin-left: max(var(--nav-logo-margin-left), env(safe-area-inset-left));
    }
    
    @media (min-width: 1024px) {
        .logo a {
            margin-left: max(var(--nav-logo-margin-left), env(safe-area-inset-left));
        }
    }
}

.connect-on-linkedin button,
.language-switcher button { display: flex; justify-content: center; align-items: center; flex-basis: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; }

.connect-on-linkedin button svg { fill: var(--a-logo) !important; }

.burger { position: relative; border: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; flex-basis: 100%; }
.burger div { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 24px; width: 24px; }
.burger span { background: rgba(0,0,0,.8); width: 16px; height: 2px; border-radius: 2px; margin: 3px 0; transition: all 200ms cubic-bezier(0.4, 0, 0.16, 1) 80ms; }
.burger span:hover, .burger span:active { will-change: transform; }
.burger.open span:nth-child(1) { transform: rotate3d(0, 0, 1, 135deg); margin: -1px; }
.burger.open span:nth-child(2) { transform: rotate3d(0, 0, 1, 45deg); margin: -1px; }
.burger.open span:hover, .burger.open span:active { will-change: transform; }

.nav { pointer-events: none; opacity: 0; position: absolute; top: 60px; right: 10px; background: #fff; box-shadow: none; width: 280px; border-radius: 6px; transform: translate3d(5px, -11px, 0)scale(.9); transition: all 100ms ease-out 80ms; }
.nav::before { content: ''; position: absolute; top: -6px; right: 31px; background: #fff; width: 14px; height: 14px; transform: rotate3d(0, 0, 1, 45deg); z-index: -1; border-radius: 1px; }
.live .open + .nav { pointer-events: auto; opacity: 1; box-shadow: 0 8px 80px -16px rgba(0, 0, 0, 0.5); transform: translate3d(0, 0, 0)scale(1); transition: all 200ms cubic-bezier(0.4, 0, 0.16, 1) 80ms; }
.live .no-transition + .nav { transition: none !important; }

.nav ul.menu { background: #FFFFFF; border-radius: 6px; overflow: hidden; }
.nav ul li { list-style-type: none;s }
.nav ul li::marker { display: none; }

.menu:nth-of-type(1) .nav { right: 66px; }
.menu:nth-of-type(2) .nav { right: 10px; }

@supports(padding: max(0px)) {
    .menu:nth-of-type(1) .nav {
        right: max(66px, calc( env(safe-area-inset-right) + 46px ));
    }
    .menu:nth-of-type(2) .nav {
        right: max(10px, calc( env(safe-area-inset-right) - 10px ));
    }
}

.header-menus { display: flex; flex-direction: row; justify-content: flex-end; align-items: stretch; flex-grow: 1; padding: 0 20px; list-style: none; line-height: 30px; }
.header-menus > .menu { display: flex; justify-content: center; align-items: center; flex: 0 0 56px; cursor: pointer; }
.header-menus a { display: block; color: rgb(0,122,255); font-size: 18px; padding: 16px 0px; overflow: hidden; text-align: left; line-height: 1.4; }
.header-menus a:hover, .header-menus a:active, .header-menus .current-menu-item a { color: rgba(0, 122, 255, .2); text-decoration: none; }
.header-menus .current-menu-item a { font-weight: 600; color: rgb(0, 122, 255); }
.header-menus .current-menu-item a:hover, .header-menus .current-menu-item a:active, .header-menus .active-language a:hover, .header-menus .active-language a:active { color: rgba(0, 122, 255, .2); }
.header-menus nav li a { padding-left: 16px; padding-right: 16px; }
.header-menus a span { display: inline-block; }

@supports(padding: max(0px)) {
    .header-menus {
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

.menu.connect-on-linkedin button { cursor: ne-resize; }
.menu.connect-on-linkedin button svg { transition: fill 160ms ease 80ms; }

.menu.language-switcher a { padding-left: 42px; color: #000000; }
.menu.language-switcher li:not(.active-language) a:hover, .menu.language-switcher li:not(.active-language) a:active { color: C3C3C3; }
.menu.language-switcher #language-switcher-icon { transition: fill 160ms ease 80ms; }
.menu.language-switcher .active-language::before { content: ''; position: absolute; background-image: url('img/checkmark.svg'); background-repeat: no-repeat; background-size: 16px 16px; background-position: center; width: 16px; height: 16px; left: 16px; top: 20px; pointer-events: none; }

.search-icon { display: none; }
.search-form { float: right; position: relative; margin-top: 14px; margin-right: 18px; }
.search-field { max-width: 300px; border: none; border-radius: 10px; font-size: 17px; line-height: 22px; height: 36px; padding-left: 34px; padding-right: 10px; background-color: rgba(142, 142, 147, .12); color: #000; transition: background-color 0.1s ease-in-out 0.14s; }
.search-field:active { background-color: rgba(142, 142, 147, .3);
    transition: background-color 0.18s ease-in-out 0s; }
.search-submit { position: absolute; top: 0; left: 0; background: url(img/search-submit.svg) 10px 11px no-repeat !important; background-size: 14px !important; border: 0; text-indent: -9999px; width: 32px; height: 36px; padding: 0; vertical-align: middle; }

@media ( max-width: 768px ) {
	.logo a { line-height: 56px; }
	.burger:after { bottom: -8px; box-shadow: -1px -1px 1px -1px rgba(0,0,0,.35); }
    .burger span { transition: all 200ms cubic-bezier(0.4, 0, 0.16, 1) 80ms; }
    
    html { overflow: auto; }
    html.live { overflow: hidden; }
	.live, .show { overflow-y: scroll; }
	.live, .live body, .live .header, .live .bar,
	.show, .show body, .show .header, .show .bar { //height: 100%; }
	.live .hero, .live .main, .live .footer,
	.show .hero, .show .main, .show .footer { //display: none; }
    .live .open + .nav { box-shadow: none; transition: all 160ms ease-in-out 80ms; z-index: 10; box-shadow: 0 0 0 0.3px rgba(0, 0, 0, 0.25); }
    .nav::before { top: -6px; right: 24px; box-shadow: 0 0 0 0.3px rgba(0, 0, 0, 0.25); }
    .menu:nth-of-type(1) .nav::before { right: 77px; }
    .menu:nth-of-type(2) .nav::before { right: 21px; }
	.nav { position: absolute; top: 56px; left: 0; border-radius: 0; box-shadow: 0 0 1px rgba(0,0,0,.35); width: 100%; transition: all 80ms ease-out 80ms; transform: translate3d(0, 0, 0)scale(1); }
    .nav ul.menu { border-radius: 0; }
    .header-menus { padding: 0 0 0 20px; }
    .header-menus a { font-size: 22.5px; padding-top: 9px; padding-bottom: 10.5px; text-align: center; line-height: 31.5px; }
    .header-menus .current-menu-item a:hover, .header-menus .current-menu-item a:active { color: rgb(255,255,255); }
    .menu.language-switcher #language-switcher-icon { fill: #000000; }
    .menu.language-switcher:hover #language-switcher-icon, .menu.language-switcher .open #language-switcher-icon { fill: #0693E3; }
    .menu.language-switcher a { padding-left: 20px; padding-right: 20px; }
    .menu.language-switcher .active-language::before { background-size: 20px 20px; width: 20px; height: 20px; left: 20px; top: 15px; }
    
	.search-icon { display: block; position: relative; float: right; background: url(img/search-icon.svg) center no-repeat; width: 32px; height: 32px; margin-top: 11px; margin-right: 15px; cursor: pointer; }
	.show .search-icon:after, .show .search-form { display: block; }
	.search-icon:after { content: ''; display: none; position: absolute; bottom: -21px; right: 10px; background: #fff; box-shadow: -1px -1px 1px -1px rgba(0,0,0,.45); width: 14px; height: 14px; transform: rotate3d(0, 0, 1, 45deg); z-index: 10; }
	.search-form { display: none; position: absolute; top: 56px; left: 0; box-shadow: 0 -1px 0 rgba(0,0,0,.1); text-align: center; width: 100%; margin-top: 0; margin-right: 0; padding: 22px 0; }
    .search-field { max-width: calc(100vw - 32px); font-size: 17px; width: calc(100vw - 32px); height: 36px; line-height: 22px; }
	.search-submit { margin-top: 22px; margin-left: 16px; }
}

/* 3.2 Hero */

.hero { margin-bottom: 20px; width:100%; background-color: black; }
.bg-fill { padding-bottom: 320px; transition: all 0.2s ease-in-out 0s; }
.hero-bg { background-position: center; background-repeat: no-repeat; background-size: cover; }

.cover { display: flex; align-items: center; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0); width: 100%; height: 100%; }
.brand { text-align: center; padding-top: 20px; }
.brand h1 { margin-bottom: 8px; }
.title a { color: #fff; font-size: 64px; font-style: italic; font-weight: bold; line-height: 1; transition: color 240ms ease 20ms; font-family: var(--brand-font); }
.title a:hover, a:active { text-decoration: none; }
.description { color: rgba(255,255,255,.8); font-size: 14px; transition: color 240ms ease 20ms; max-width: 208px; margin-left: auto; margin-right: 4px; }

@media ( max-width: 768px ) {
	.hero { margin-bottom: 8px; }
	.bg-fill { padding-bottom: 240px; }
	.title a { font-size: 48px; }
	.description { font-size: 12px; max-width: 176px; margin-right: -5px; }
}


/* 4.0 Main
------------------------------------------------------------ */

/* 4.1 Main Class */

.entry .main, .page .main, .single .main { min-height: calc( 100vh - var(--header-global-nav-bar-height) - var(--header-admin-bar-height) ); display: flex; flex-direction: column; align-items: stretch; }
.entry.home:not(.paged) .main { min-height: calc( 100vh - var(--header-global-nav-bar-height) - var(--header-admin-bar-height) - var(--header-home-banner-height) ); }

/* 4.2 Page Header */

.page-header { padding: 30px 20px; }
.page-title { font-size: 32px; font-weight: 800; margin-left: -2px; }
.home.blog.entry .col.page-header .page-title { font-family: var(--brand-font); font-size: 64px; font-weight: 400; font-style: italic; }
.archive .page-title, .search .page-title { text-align: center; }
.search .page-title { font-size: 50px; }
.page-title span { display: block; color: rgba(0,0,0,.4); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; /* margin-left: 2px; */ font-weight: 500; text-align: center; }
.page-description { margin-top: 10px; margin-bottom: 5px; }
.page-description p { color: rgba(0,0,0,.6); font-size: 13px; line-height: 1.7; }
.page-description a { color: rgba(0,0,0,.4); }
.page-description a:hover { color: rgba(0,0,0,.6); }

.author-header { background: #fafafa; padding-top: 50px; padding-bottom: 50px; margin-bottom: 10px; }
.author-header .author-info { border-top: 0; min-height: 80px; padding-top: 0; padding-bottom: 0; }
.author-header .author-title { font-size: 22px; line-height: 33px; }
.author-header .author-desc { font-size: 15px; line-height: 21px; }

@media ( max-width: 768px ) {
	.page-header { padding-top: 20px; padding-bottom: 20px; }
	.page-title { font-size: 24px; margin-left: 0; }
	.search .page-title { font-size: 40px; }
	.page-title span { margin-left: .5px; }
	.page-description { margin-top: 5px; margin-bottom: 0; }
	.page-description p { font-size: 12px; line-height: 1.6; }

	.author-header { padding-top: 30px; padding-bottom: 30px; margin-bottom: 5px; }
	.author-header .author-info { min-height: 60px; }
	.author-header .author-avatar .avatar { width: 60px; height: 60px; }
	.author-header .author-title { font-size: 18px; line-height: 23px; }
	.author-header .author-desc { font-size: 13px; line-height: 16px; }
}

/* 4.3 Not Found */

.not-found { text-align: center; }
.not-found .page-header { padding-bottom: 5px; }
.not-found .page-title { font-weight: 700; margin-left: -10px; }
.not-found p { font-size: 11px; color: rgba(0,0,0,.4); text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.8; }

.content-none .page-header { padding-top: 25vh; }
.home .content-none { padding-top: 50px; padding-bottom: 30px; }
.home .content-none a { display: inline-block; border: 1px solid rgba(0,0,0,.6); margin-top: 8px; padding: 1px 9px; }

.error-404 .page-header { padding-top: 20vh; }
.error-404 .page-title { font-size: 150px; color: rgba(0,0,0,.1); line-height: 1; }

@media ( max-width: 768px ) {
	.not-found .page-title { margin-left: -5px; }
	.not-found p { letter-spacing: 1px; line-height: 1.5; width: 80vw; margin-left: auto; margin-right: auto; }
	.home .content-none { padding-top: 60px; padding-bottom: 40px; }
	.home .content-none a { margin-top: 10px; padding: 3px 8px 2px; }
	.error-404 .page-title { font-size: 130px; }
}

/* 4.4 Attachment */

.single-attachment .main { background: rgba(0,0,0,.9); }
.single-attachment .post-title { color: rgba(255,255,255,.4); font-size: 16px; font-weight: 400; letter-spacing: .2px; text-align: center; margin-top: 0; margin-bottom: 25px; margin-left: 0; padding-top: 55px; }
.single-attachment .post-content { position: relative; padding-bottom: 60px; }
.single-attachment .figure { margin-top: 0; margin-bottom: 0; }
.single-attachment .figure img { margin: 0 auto; }

.image-navigation a { position: absolute; top: 50%; color: rgba(255,255,255,.1); font-size: 60px; transform: translateY(-90%) scaleY(2); transition: color .3s; }
.image-navigation a:hover { color: rgba(255,255,255,.8); }
.image-navigation .nav-previous a { left: -100px; }
.image-navigation .nav-next a { right: -100px; }
.image-navigation .nav-previous a:before { content: '<'; }
.image-navigation .nav-next a:before { content: '>';  }

@media ( max-width: 768px ) {
	.image-navigation a { color: #fff; font-size: 36px; text-shadow: 0 0 1px rgba(0,0,0,.8); transform: translateY(-120%) scaleY(2); opacity: .4; }
	.image-navigation .nav-previous a { left: 10px; }
	.image-navigation .nav-next a { right: 10px; }
}


/* 5.0 Post
------------------------------------------------------------ */

/* 5.1 Post Header */

.blog .post:first-child .post-header, .author .post:first-of-type .post-header { border-top: 0; }
.entry .post-header { padding-top: unset; }
.sticky-post { display: none; border: 1px solid #f46c0e; color: #f46c0e; font-size: 13px; line-height: 1.46154; text-transform: uppercase; letter-spacing: 2px; margin-top: 15px; margin-bottom: 5px; padding: 2px 8px 2px 10px; border-radius: 4px; }
.post-thumb { margin-top: unset; margin-bottom: 16px; }
.post-thumb:after { content: " "; box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.4); mix-blend-mode: soft-light; position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
.entry .post-title { font-size: 24px; margin-top: 16px; margin-bottom: 10px; }

.post-img { margin-left: auto; margin-right: auto; }
.post-img-full { margin-top: 0; margin-bottom: 60px; max-width: 6016px !important; }
.post-img-out { margin-top: 50px; margin-bottom: 50px; }
.post-img-col { margin-top: 50px; margin-bottom: 65px; }

.featured-image-below-title-banner { margin-top: 40px; margin-bottom: 32px; }
.featured-image-below-title-gallery { margin-top: 40px; margin-bottom: 32px; }
.featured-image-below-title-inline { margin-bottom: 32px; }

.featured-image-fullscreen-container { height: calc( 100vh - 64px ); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: var(--max-width-post-featured-image-fullbleed); margin: 0 auto; position: relative; overflow: hidden; }
.featured-image-fullscreen-cover { height: 100%; }
.featured-image-fullscreen-cover > .image > img { visibility: hidden !important; opacity: 0 !important; pointer-events: none; }

.post-title { font-size: 44px; line-height: 1.3; word-wrap: break-word; margin-top: 40px; margin-bottom: 24px; }
.post-title:lang(zh) { line-height: 1.4; }

.post-subhead { line-height: 1.4; }
.post-subhead:lang(zh) { line-height: 1.5; }

.read-aloud-player { display: flex; flex-direction: row; gap: 16px; font-size: 14px; margin-bottom: 24px; }
.read-aloud-player .read-aloud-button { min-width: 173px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
html:lang(zh-CN) .read-aloud-player .read-aloud-button { min-width: 96px; }
.read-aloud-player .read-aloud-button:hover { color: #0693E3; }
.read-aloud-player .read-aloud-button.disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.read-aloud-player .read-aloud-button-wrapper { width: fit-content; display: flex; align-items: center; gap: 4px; transition: all 160ms ease 40ms; }
.read-aloud-player .read-aloud-button:hover .read-aloud-button-wrapper { background-color: hsla(240, 24%, 96%, 1); box-shadow: 0 0 0 6px hsla(240, 24%, 96%, 1); border-radius: 2px; }
.read-aloud-player .read-aloud-button .icon { display: block; width: 16px; height: 16px; background-image: url('/img/play-circle.svg'); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; transition: background-image 160ms ease 40ms, transform 320ms ease 40ms; }
.read-aloud-player .read-aloud-button.play .icon { background-image: url('./img/play-circle.svg'); }
.read-aloud-player .read-aloud-button.pause .icon { background-image: url('./img/pause-circle.svg'); transform: rotate(360deg); }
.read-aloud-player .read-aloud-button.play:hover .icon { background-image: url('./img/play-circle-blue.svg') !important; }
.read-aloud-player .read-aloud-button.pause:hover .icon { background-image: url('./img/pause-circle-blue.svg') !important; }
.read-aloud-player .read-aloud-duration { color: #777; }

@media ( max-width: 768px ) {
	.sticky-post { letter-spacing: .8px; margin-bottom: 2px; padding: 3px 5px 2px 6px; }
	.post-thumb { margin-top: unset; margin-bottom: 20px; }
	.entry .post-title { font-size: 22px; margin-top: 10px; margin-bottom: 10px; }
    
    .featured-image-fullscreen-container { height: calc( 100vh - var(--header-global-nav-bar-height) ); }
    
	.post-img-full { margin-bottom: 30px; }
	.post-img-out { margin-top: 40px; margin-bottom: 40px; }
	.post-img-col { margin-top: 35px; margin-bottom: 50px; border: solid transparent; border-width: 0 20px; }
	.post-title { font-size: 36px; margin-top: 32px; }
}

@media ( max-width: 736px ) {
    .featured-image-below-title-banner { margin-bottom: 24px; }
    .featured-image-below-title-gallery { margin-bottom: 24px; }
    .featured-image-below-title-inline { margin-bottom: 24px; }
}

@media ( max-width: 320px ) {
    .post-img {  }
}

/* 5.2 Post Content */

.post-content { font-size: 16px; line-height: 1.7; word-wrap: break-word; }
.post-content:lang(zh) { line-height: 1.8; }
.page .post-content { padding-bottom: 50px; }
.entry .post-content { font-size: 16px; letter-spacing: .05px; line-height: 1.6; margin-bottom: 0; }
.entry .post-content p, .entry .post-content ul, .entry .post-content ol, .entry .post-content li { margin-bottom: 0; }

.post-content h1, .post-content h2 { line-height: 1.2; }
.post-content h1:lang(zh), .post-content h2:lang(zh) { line-height: 1.3; }
.post-content h3, .post-content h4 { line-height: 1.2; }
.post-content h3:lang(zh), .post-content h4:lang(zh) { line-height: 1.3; }
.post-content h5, .post-content h6 { line-height: 1.3; }
.post-content h5:lang(zh), .post-content h6:lang(zh) { line-height: 1.4; }
.post-content h1 { margin-bottom: 32px; }
.post-content h2 { margin-bottom: 24px; }
.post-content h3 { font-weight: bold; }
.post-content h4 { font-weight: bold; }
.post-content h5, .post-content h6 { color: rgba(0,0,0,.4); font-weight: 400; margin-bottom: 16px; }
.post-content h1 { font-size: 40px; margin-top: 80px; margin-left: -2px; }
.post-content h2 { font-size: 32px; margin-top: 64px; margin-left: -1px; }
.post-content h3 { font-size: 24px; margin-bottom: 24px; margin-top: 48px; }
.post-content h4 { font-size: 18px; margin-bottom: 20px; margin-top: 30px; }
.post-content h5 { font-size: 16px; }
.post-content h6 { font-size: 14px; }

.post-content h5 + h1, .post-content h5 + h2, .post-content h6 + h1, .post-content h6 + h2 { margin-top: 0; }
//.post-content h1 + h1, .post-content h2 + h2, .post-content h3 + h3 { margin-top: 0; }

.post-content p, .post-content ul, .post-content ol { margin-bottom: 24px; }
.post-content ul { padding-left: 16px; }
.post-content ol { padding-left: 22px; }
.post-content li { line-height: 1.4; margin-bottom: 4px; }
.post-content li > ul , .post-content li > ol { margin-top: 2px; margin-bottom: 0; }
.post-content pre, .post-content table, .figure { margin-top: 40px; margin-bottom: 40px; display: block; }
.post-content ul h5, .post-content ol h5 { color: #333; font-weight: bold; }

.post-content.col p a { display: inline-block; color: #0070c9; text-decoration: none; }
.post-content.col p a:hover { text-decoration: underline; }
.post-content.col p a.hidden { color: inherit; transition: color 0.18s ease-out 0.04s; }
.post-content.col p a.hidden:hover { color: #0070c9; }

.frame { margin-left: auto; margin-right: auto; }
.alignleft, .alignright { width: 75%; margin-top: 10px; margin-bottom: 20px; }
.alignleft { float: left; margin-left: -160px; margin-right: 30px; }
.alignright { float: right; margin-right: -160px; margin-left: 30px; }

.post-password-form { position: relative; }
.post-password-form input[type=password] { max-width: 220px; font-size: 18px; height: 46px; line-height: 24px; border-radius: 10px;  padding: 10px; transition: background-color 0.1s ease-in-out 0.14s; }
.post-password-form input[type=submit] { margin-left: 2px; border: 0; border-radius: 10px; color: rgb(0,122,255); font-size: 20px; font-weight: 600; text-transform: uppercase; line-height: 26px; padding: 10px 10px; transition: opacity 0.12s ease-out 0.05s, color 0.12s ease-out 0.05s; }
.post-password-form input[type=submit]:hover { cursor: pointer; }
.post-password-form input[type=submit]:active { color: #094E96; opacity: 0.9; transition: opacity 0.12s ease-out 0.05s, color 0.12s ease-out 0.05s; }

.page-links { text-align: center; margin-bottom: 30px; }
.page-links span { display: inline-block; color: rgba(0,0,0,.2); font-weight: 700; height: 32px; width: 32px; }
.page-links a { display: inline-block; }
.page-links a span { color: rgba(0,0,0,.5); }
.page-links a span:hover { color: rgba(0,0,0,.8); }

[class*="is-style-carousel-"] figure { display: none; }

.wp-block-group { margin-top: 40px; margin-bottom: 16px; }
.wp-block-group + .wp-block-group { margin-top: 0px; }
.wp-block-group + .wp-block-group figure { margin-top: 24px; }
.wp-block-group .wp-block-group__inner-container > [class*="active-"].wp-block-group:last-child { margin-bottom: 40px; }
.wp-block-group.is-style-carousel-basic .figure { margin-bottom: 16px; }

.wp-element-button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.wp-element-button, .wp-block-buttons.is-style-segmented-control .wp-element-button.activated { color: #000000; background-color: #FFFFFF; padding: 6px 16px; font-size: 14px; }
.wp-element-button, .wp-block-buttons.is-style-segmented-control-enhanced .wp-element-button.activated { color: #FFFFFF; background-color: #000000; }
.wp-element-button:hover, .wp-element-button:active { color: #888; }

.wp-block-buttons.is-style-segmented-control, .wp-block-buttons.is-style-segmented-control-enhanced { background: hsla(240, 24%, 96%, 1); border-radius: 9999px; padding: 4px; gap: 4px !important; margin-bottom: 8px; flex-wrap: nowrap !important; }
.wp-block-buttons.is-style-segmented-control .wp-element-button, .wp-block-buttons.is-style-segmented-control-enhanced .wp-element-button { color: #000; line-height: 1.4; background-color: transparent; transition: all 160ms ease 40ms; word-break: normal; white-space: nowrap; }
.wp-block-buttons.is-style-segmented-control .wp-element-button.activated, .wp-block-buttons.is-style-segmented-control-enhanced .wp-element-button.activated { cursor: default; }
.wp-block-buttons.is-style-segmented-control .wp-element-button:not(.activated):hover, .wp-block-buttons.is-style-segmented-control-enhanced .wp-element-button:not(.activated):hover { background-color: #FFFFFF; }

.wp-block-inline-svg-block { line-height: 0 !important; }

.wp-block-details { margin-top: 24px; margin-bottom: 24px; overflow: hidden; }
.wp-block-details:not(.is-style-details-lined) + .wp-block-details:not(.is-style-details-lined) { margin-top: 8px !important; }
.wp-block-details[class*="is-style-details-filled"] { border-radius: 8px; }
.wp-block-details.is-style-details-filled-primary { background-color: #FFFFFF; }
.wp-block-details.is-style-details-filled-secondary { background-color: #F2F2F7; }
.wp-block-details.is-style-details-bordered { border-width: 1px; border-style: solid; border-color: var(--border-primary); border-radius: 8px; }
.wp-block-details.is-style-details-lined { border-top: 1px solid #E4E4E9; border-bottom: 1px solid #E4E4E9; }
.wp-block-details.is-style-details-lined + .wp-block-details.is-style-details-lined { margin-top: 0; border-top: none; }

.wp-block-details summary { padding-top: 16px; padding-bottom: 16px; transition: background-color 160ms ease 20ms, padding-left 240ms ease 80ms, font-weight 160ms ease 20ms; }

details::details-content, details > .wp-block-group { transition: height 240ms ease-out 20ms, margin-top 240ms ease-out 20ms, content-visibility 240ms allow-discrete; overflow: hidden; }
details[open]::details-content, details[open] > .wp-block-group { height: var(--accordion-height, auto); }
details:not([open])::details-content, details:not([open]) > .wp-block-group { height: 0; }
details summary::-webkit-details-marker, details summary::marker { display: none; content: none; }
details summary { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: nowrap; list-style: none; }
details summary > *:first-child { flex-grow: 1; }
details summary::after { content: ''; display: block; width: 24px; height: 24px; mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); mask-repeat: no-repeat; mask-size: contain; mask-position: center; background-color: #000000; transform: rotate(0deg); transform-origin: center; transition: all 240ms ease-out 20ms; flex-shrink: 0; }
details[open] summary::after { transform: rotate(180deg); }

.wp-block-details[open] summary { font-weight: bold; }
.wp-block-details[class*="is-style-details-filled"] summary,
.wp-block-details.is-style-details-bordered summary { padding-left: 24px; padding-right: 24px; }
.wp-block-details[class*="is-style-details-filled"] summary:hover,
.wp-block-details.is-style-details-bordered summary:hover { background-color: #EDEDF3; }
.wp-block-details.is-style-details-lined[open] summary:hover { background-color: #EDEDF3; }
.wp-block-details.is-style-details-lined summary:hover { padding-left: 16px; }

.wp-block-details > .wp-block-group { margin-top: 0; margin-bottom: 0; }
.wp-block-details[class*="is-style-details-filled"] > .wp-block-group,
.wp-block-details.is-style-details-bordered > .wp-block-group { padding: 16px 24px 24px; }
.wp-block-details.is-style-details-lined > .wp-block-group { padding-top: 16px; padding-bottom: 24px; }

@media ( max-width: 1060px ) {
	.alignleft, .alignright { width: 60%; }
	.alignleft { margin-left: 0; }
	.alignright { margin-right: 0; }
}

@media ( max-width: 768px ) {
	.post-content { font-size: 16px; line-height: 1.6; }
	.entry .post-content { letter-spacing: 0; line-height: 1.5; }
	.post-content h1 { font-size: 36px; margin-top: 64px; }
	.post-content h2 { font-size: 28px; margin-top: 56px; }
	.post-content h3 { font-size: 24px; margin-top: 48px; margin-bottom: 16px; }
	.post-content h4 { font-size: 18px; }
	.post-content h5 { font-size: 16px; }
	.post-content h6 { font-size: 14px; }
    .post-content h5 + h1, .post-content h5 + h2, .post-content h6 + h1, .post-content h6 + h2 { margin-top: 0; }
    //.post-content h1 + h1, .post-content h2 + h2, .post-content h3 + h3 { margin-top: 0; }

	.post-content p, .post-content ul, .post-content ol { margin-bottom: 20px; }
	.post-content li > ul , .post-content li > ol { margin-top: 10px; }
	.post-content pre, .post-content table, .figure { margin-top: 30px; margin-bottom: 30px; }

	.post-content.col p a { text-decoration: none; }
	.alignleft, .alignright { float: none; width: auto; margin: 35px auto; }
    .post-password-form input[type=password] { border-radius: 10px; width: 100%; max-width: 150px; }

	.page-links { margin-top: 35px; margin-bottom: 35px; }
	.page-links span { height: 40px; width: 40px; }
	.page-links a span, .page-links a span:hover { color: rgba(0,0,0,.6); }
}

/* 5.3 Post Footer */

.post-footer { font-size: 14px; }
.entry .post-footer { height: 20px; margin-top: 15px; margin-bottom: 33px; }
.entry .post-footer a { color: rgba(0,0,0,.4); }
.entry .post-footer a:hover { color: rgba(0,0,0,.6); }
.entry .post-date, .author-link { float: left; }
.entry .post-date { margin-top: 0; margin-bottom: 0; }
.entry .author-link a { font-weight: 700; margin-right: 10px; }
.entry .post-edit-link, .comments-link { float: right; }
.entry .post-edit-link { margin-left: 10px; }

main > article > .post-content + footer { margin-top: 60px; }

.post-categories:after, .post-tags:after { content: ''; display: table; clear: both; }
.post-categories a, .post-tags a { float: left; color: rgba(0,0,0,.6); line-height: 32px; margin-bottom: 10px; margin-right: 10px; }
.post-categories a:hover, .post-tags a:hover { color: rgba(0,0,0,.9); }
.post-categories { margin-bottom: 15px; }
.post-categories li { list-style: none; }
.post-categories a { border-bottom: 1px solid rgba(0,0,0,.4); }
.post-categories a:hover { border-color: rgba(0,0,0,.6); }
.post-tags a { background: #fafafa; border: 1px solid rgba(0,0,0,.05); border-radius: 3px; padding: 0 15px; }
.post-tags a:hover { border-color: rgba(0,0,0,.15); color: rgba(0,0,0,.8); }
.post-date { color: rgba(0,0,0,.4); margin-top: 10px; margin-bottom: 60px; }
.post-meta + .post-date { margin-top: 32px; }

.author-info { display: flex; align-items: center; border-top: 1px solid rgba(0,0,0,.05); padding-top: 25px; padding-bottom: 50px; }
.author-avatar { margin-right: 15px; }
.author-avatar .avatar { border-radius: 100%; }
.author-content { flex: 1; }
.author-title { font-size: 17px; margin-bottom: 5px; }
.author-title a:hover { color: rgba(0,0,0,.5); }
.author-desc { color: rgba(0,0,0,.6); font-size: 14px; line-height: 18px; }

@media ( max-width: 768px ) {
	.post-footer { font-size: 12px; }
	.entry .post-footer { margin-top: 10px; margin-bottom: 18px; }
	.entry .author-link a { margin-right: 6px; }
	.post-categories a, .post-tags a { font-size: 13px; }
	.post-date { margin-bottom: 40px; }
	.author-info { padding-bottom: 40px; }
	.author-desc { font-size: 13px; }
}


/* 6.0 Comments
------------------------------------------------------------ */

.comments-area { padding-top: 20px; padding-bottom: 40px; }
.comments-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 8px; }

.comment-list { list-style: none; margin-bottom: 70px; }
.comment-body { position: relative; border-top: 1px solid rgba(0,0,0,.1); padding-top: 35px; padding-bottom: 35px; }
.comment-list .children { list-style: none; }
.comment-list .children > li { padding-left: 30px; }

.bypostauthor .comment-author:after { content: '\2615'; color: rgba(0,0,0,.4); vertical-align: text-top; }
.comment-author { font-size: 14px; line-height: 18px; }
.comment-author .avatar { float: left; border-radius: 100%; width: 36px; height: 36px; margin-right: 10px; }
.comment-metadata { line-height: 18px; height: 18px; }
.comment-metadata a { color: rgba(0,0,0,.4); font-size: 12px; }
.comment-metadata a:hover { color: rgba(0,0,0,.6); }
.comment-edit-link { margin-left: 5px; }

.comment-content { line-height: 1.6; margin-top: 20px; }
.comment-reply-link { position: absolute; top: 35px; right: 0; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; color: rgba(0,0,0,.4); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 4px 7px; }
.comment-reply-link:hover { border-color: rgba(0,0,0,.3); color: rgba(0,0,0,.6); }

.comment-navigation { border-top: 1px solid rgba(0,0,0,.1); padding-top: 35px; padding-bottom: 35px; }
.comment-navigation a { display: block; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; color: rgba(0,0,0,.4); font-size: 14px; line-height: 34px; padding: 0 15px; }
.comment-navigation a:hover { border-color: rgba(0,0,0,.3); color: rgba(0,0,0,.6); }
.comment-navigation .nav-previous { float: left; }
.comment-navigation .nav-next { float: right; }
.comment-navigation .nav-previous a:before { content: '\2190'; margin-right: 2px; }
.comment-navigation .nav-next a:after { content: '\2192'; margin-left: 2px; }
.comment-navigation:after { content: ''; display: table; clear: both; }

.comment-respond { position: relative; margin-top: -5px; padding-bottom: 40px; }
.comment-reply-title { float: right; font-size: 0; }
.comment-reply-title small a { color: rgba(0,0,0,.6); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.comment-reply-title small a:hover { color: rgba(0,0,0,.9); }

.comment-notes { display: none; }
.logged-in-as { color: rgba(0,0,0,.3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.logged-in-as a { color: rgba(0,0,0,.3); }
.logged-in-as a:hover { color: rgba(0,0,0,.6); }

.comment-form textarea, .comment-form input { border: none; border-radius: 0; width: 100% !important; background: transparent; font-size: 18px; line-height: 22px; padding: 13px 0; }
.comment-form textarea { letter-spacing: -.04px; line-height: 1.6; height: 80px; border: none; border-bottom: 0.5px solid rgb(188, 187, 193); }
.comment-form label { display: block; color: rgb(0,122,255); font-size: 16px; letter-spacing: 0.7px; margin-top: 12px; margin-bottom: 2px; }
.logged-in .comment-form-comment label { display: none; }
.comment-form-comment label { margin-top: 0; }
.comment-form label .required { color: rgb(169,169,169); }
.comment-form-url { margin-bottom: 5px; }
.form-submit input[type=submit] { background: rgb(0,122,255); border-radius: 7.5px; color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: 0.7px; line-height: inherit; display: block; margin: auto; margin-top: 18px; max-width: 291px; padding-top: 11px; padding-bottom: 11px; height: 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 0.1s ease-out 0.14s; }
.logged-in .form-submit input[type=submit] { margin-top: 15px; }
.form-submit input[type=submit]:hover { background: rgb(0,95,200); transition: background 0.1s ease-out 0.14s; }
.form-submit input[type=submit]:active { background: rgb(0,95,200); transition: background 0.12s ease-out 0.05s; }
p.comment-form-comment { margin-bottom: -6px; }
p.comment-form-author, p.comment-form-email { display: inline-block; width: calc(50% - 10.15px); border: none; border-bottom: 0.5px solid rgb(188,187,193); }
p.comment-form-author { margin-right: 15px; }
input[type="text"].mc-input { line-height: 22px; text-align: center; padding: 10px 0; border-radius: 5px; background: rgba(142, 142, 147, .12); }
.math-captcha-form { text-align: center; margin: auto; margin-top: 18px; }

@media ( max-width: 768px ) {
	.comments-area { padding-bottom: 25px; }
	.comment-body { padding-top: 25px; padding-bottom: 25px; }
	.comment-list .children > li { padding-left: 15px; }

	.comment-author { font-size: 13px; line-height: 16px; }
	.comment-author .avatar { width: 36px; height: 36px; border: 0.5px solid rgb(229, 229, 234) }
	.comment-metadata { line-height: 16px; height: 16px; }
	.comment-edit-link { margin-left: 2px; }

	.comment-content { font-size: 16px; line-height: 1.6; margin-top: 15px; }
	.comment-reply-link { top: 25px; }
	.comment-navigation a { font-size: 13px; padding: 0 10px; }

	.logged-in-as { letter-spacing: .5px; }
	.comment-form textarea, .comment-form input { font-size: 18px; }
    .form-submit input[type=submit] { max-width: 100%; margin-top: 34px; }
    p.comment-form-author, p.comment-form-email { display: block; width: 100%; border: none; border-bottom: 0.5px solid rgb(188,187,193); }
    input[type="text"].mc-input { background: white; }
    .math-captcha-form { text-align: center; padding: 10px 0; margin-top: 18px; border: 0.5px solid #ddd; background-color: rgba(142, 142, 147, .1); }
}


/* 7.0 Post Navigation
------------------------------------------------------------ */

.post-navigation { width: 100%; max-width: var(--max-width-post-footer-default); margin-left: auto; margin-right: auto; background: var(--bg-dynamic-secondary); border-radius: 8px; }
.post-navigation .nav-links { display: flex; flex-direction: row; gap: 24px 40px; justify-content: space-between; flex-wrap: nowrap; }
.post-navigation .nav-previous, .post-navigation .nav-next { display: flex; max-width: var(--max-width-post-text-default); flex-grow: 1; flex-basis: 40%; box-sizing: border-box; }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-previous a, .post-navigation .nav-next a { display: block; flex-grow: 1; padding: 24px 0 8px; }
.post-navigation .nav-previous a { padding-left: var(--general-page-padding); }
.post-navigation .nav-next a { padding-right: var(--general-page-padding); }

/* 
@supports(padding: max(0px)) {
    .post-navigation .nav-previous a { padding-left: max(var(--general-page-padding), env(safe-area-inset-left)); }
    .post-navigation .nav-next a { padding-right: max(var(--general-page-padding), env(safe-area-inset-right)); }
}
    */

.post-navigation .meta-nav { display: block; color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.post-navigation .post-title { display: block; font-size: 20px; font-weight: 400; margin-top: 8px; }

@media ( max-width: 768px ) {
    .post-navigation { border-radius: 0; }
	.post-navigation { padding-top: 16px; padding-bottom: 40px; }
	.post-navigation .post-title { font-size: 16px; }
}


/* 8.0 Posts Pagination
------------------------------------------------------------ */

.pagination { border-top: 1px solid rgba(0,0,0,.06); text-align: center; padding: 40px 20px; max-width: 100%; width: 100%; box-sizing: border-box; }
.pagination .page-numbers { display: inline-block; line-height: 44px; width: 44px; height: 44px; margin-left: 5px; margin-right: 5px; border-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 160ms ease 8ms; }
.pagination .page-numbers:not(.dots):not(.current):hover { color: rgba(0,0,0,.4); background: #fafafa; cursor: pointer; }
.pagination .current { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); color: rgba(0,0,0,.3); cursor: default; }
.pagination .dots { line-height: 32px; vertical-align: top; }
.pagination .prev, .pagination .next { vertical-align: top; overflow: hidden; }
.pagination .prev:before, .pagination .next:before { display: inline-block; font-size: 24px; line-height: 42px; height: 44px; width: 44px; }
.pagination .prev:before { content: '\2190'; }
.pagination .next:before { content: '\2192'; }

@media ( max-width: 768px ) {
	.pagination { padding: 30px 0; }
	.pagination .page-numbers { display: none; margin-left: 8px; margin-right: 8px; }
	.pagination .current, .pagination .prev, .pagination .next { display: inline-block; }
	.pagination .current { color: rgba(0,0,0,.2); }
	.pagination .prev:before, .pagination .next:before { line-height: 42px; }
}


/* 9.0 Footer
------------------------------------------------------------ */

.footer { width: 100%; background: transparent; padding-top: 22px; padding-bottom: 22px; display: inline-block; }
.footer .col { line-height: 1; min-height: 20px; }
.footer a { color: rgba(0,0,0,.3); transition: color 160ms ease 40ms; }
.footer a:last-child { margin-right: 0; }
.footer a:hover, .footer a:active { color: rgba(0,0,0,.5); text-decoration: none; transition: color 160ms ease 40ms; }

@supports(padding: max(0px)) {
    .footer {
        padding-bottom: max(22px, env(safe-area-inset-bottom));
    }
}

.footer-info { display: flex; gap: 8px; max-width: var(--max-width-page-footer-default); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.legal { line-height: 16px; margin: 6px 0; }
.legal.copyright { flex-grow: 1; display: inline-block; }
.legal.copyright span { display: inline-block; }
.legal.links { float: right; display: inline-block; }
.legal.links a { color: rgba(0, 0, 0, .5); border-right: 1px solid #d6d6d6; margin-right: 10px; padding-right: 12px; display: inline-block; white-space: nowrap; }
.legal.links a:last-child { border: none; margin: 0; padding: 0; }
.legal.links a:hover { color: rgba(0, 0, 0, .3); transition: color 0.16s ease-out 0.1s; }
.legal.icp { display: block; }

@media ( max-width: 768px ) {
	.footer a { margin-right: 2px; }
    .footer-info { padding-left: 20px; padding-right: 20px; }
}

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

@media ( max-width: 576px ) {
    .legal.links { float: none; }
    .entry .main, .page .main, .single .main { min-height: calc(100vh - 116px - 56px); }
}

@media ( max-width: 640px ) {
    .footer-info { flex-direction: column; gap: 0; }
}


/* 10.0 Media
------------------------------------------------------------ */

/* 10.1 Image */

.hero, .frame, .post-thumb, .post-img { position: relative; }
.fill { background: rgba(0,0,0,.05); }
.hero, .small-image { overflow: hidden; transition: all 240ms ease-out 0ms; }
.hero-bg, .image img, .image, .small-image, .zoom-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero-bg, .image img { visibility: hidden; opacity: 0; }
.hero .blurry, .image .blurry { -webkit-filter: blur(20px); transform: scale(1.15, 1.15); }
.hero .loaded, .image .loaded { visibility: visible; opacity: 1; transition: visibility 0s steps(1, start) 0s, opacity .4s .2s; }
.hero .blurry.loaded, .image .blurry.loaded { transition: none; }
.hero .blurry-hidden, .image .blurry-hidden { visibility: hidden; opacity: 0; transition: visibility 0s steps(1, end) 1s, opacity .4s .6s !important; }

.is-style-image-default .image .loaded { transition: visibility 0s steps(1, start) 0s, opacity .4s .2s, border-radius 160ms ease 0ms; }
.is-style-image-default .image .blurry-hidden { transition: visibility 0s steps(1, end) 1s, opacity .4s .6s; }
.is-style-image-big .image .loaded { transition: visibility 0s steps(1, start) 0s, opacity .6s .4s, border-radius 160ms ease 0ms; }
.is-style-image-big .image .blurry-hidden { transition: visibility 0s steps(1, end) 1.5s, opacity .4s 1s; }
.is-style-image-fullbleed .image .loaded { transition: visibility 0s steps(1, start) 0s, opacity 1s .6s; }
.is-style-image-fullbleed .image .blurry-hidden { transition: visibility 0s steps(1, end) 2s, opacity .4s 1.6s; }

.zoom-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; opacity: 0; transition: opacity .3s; z-index: 45; }
.zoom-overlay-open .zoom-overlay { opacity: 1; }
.zoom-image, .zoom { transition: .3s !important; z-index: 50; }
img[data-action=zoom] { cursor: zoom-in; }
.is-style-image-default .small-image, .is-style-image-default img, .is-style-image-default .zoom-image img { border-radius: 8px; }
.zoom-overlay-open .is-style-image-default .zoom-image img, .zoom-overlay-open .is-style-image-big .zoom-image img { border-radius: 0; }
.is-style-image-big .small-image, .is-style-image-big img, .is-style-image-big .zoom-image img { border-radius: 12px; }
.is-style-image-fullbleed img[data-action="zoom"] { cursor: default; }
.zoom { cursor: zoom-out; }

figcaption, .wp-caption-text, .wp-element-caption { max-width: var(--max-width-post-text-default); width: 100%; margin-left: auto; margin-right: auto; color: rgba(0,0,0,.6); font-size: 12px; line-height: 1.4; text-align: center; padding-top: 10px; }
img + figcaption { text-align: center; }

@media ( min-width: 1440px ) {
    .is-style-image-fullbleed .image .blurry { -webkit-filter: blur(24px); transform: scale(1.1, 1.1); }
}

@media ( max-width: 768px ) {
    .image .blurry { -webkit-filter: blur(14px); transform: scale(1.2, 1.2); }
}

@media ( max-width: 576px ) {
    .is-style-image-default .small-image, .is-style-image-default img, .is-style-image-default .zoom-image img { border-radius: 4px; }
    .is-style-image-big .small-image, .is-style-image-big img, .is-style-image-big .zoom-image img { border-radius: 6px; }
}

/* 10.2 Gallery */

.gallery { border: 1px solid rgba(0,0,0,.1); margin-top: 45px; margin-bottom: 45px; padding: 15px; }
.gallery-item { display: inline-block; box-sizing: border-box; width: 100%; padding: 1px; vertical-align: middle; }
.gallery-columns-1 .gallery-item { max-width: 100%; }
.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33333%; }
.gallery-columns-4 .gallery-item { max-width: 25%; }
.gallery-columns-5 .gallery-item { max-width: 20%; }
.gallery-columns-6 .gallery-item { max-width: 16.66666%; }
.gallery-columns-7 .gallery-item { max-width: 14.28571%; }
.gallery-columns-8 .gallery-item { max-width: 12.5%; }
.gallery-columns-9 .gallery-item { max-width: 11.11111%; }
.gallery-item img { margin: 0 auto; }
.gallery-caption { padding-bottom: 10px; }
.gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; }

@media ( max-width: 768px ) {
	.gallery { margin-top: 35px; margin-bottom: 35px; padding: 10px; }
}

/* 10.3 Playlist */

.wp-playlist, .wp-audio-shortcode, .wp-video { margin-top: 45px !important; margin-bottom: 45px !important; }
.wp-playlist { border: 1px solid rgba(0,0,0,.1) !important; padding: 25px !important; }
.wp-playlist-item-title { font-size: 15px !important; }
.wp-playlist-item-artist { font-size: 13px !important; }
.wp-playlist-current-item { margin-top: 5px; }
.wp-playlist-current-item .wp-playlist-item-title { font-weight: 700; }
.wp-playlist-item-album { color: rgba(0,0,0,.4); font-size: 12px !important; font-style: normal !important; }
.wp-playlist-item-artist { color: rgba(0,0,0,.6); text-transform: none !important; }
.wp-playlist-tracks { margin-top: 20px !important; }
.wp-playlist-item { border-bottom: 0 !important; padding: 10px 0 !important; }
.wp-playlist-item:last-child { padding-bottom: 2px !important; }
.wp-playlist-item-length { top: 10px !important; }

@media ( max-width: 768px ) {
	.wp-playlist, .wp-audio-shortcode, .wp-video { margin-top: 35px !important; margin-bottom: 35px !important; }
	.wp-playlist { padding: 20px !important; }
}

.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body { background: transparent !important; }


/* 11.0 Addition
------------------------------------------------------------ */

/* Color */

::-moz-selection { background-color: #b9eaff; color: inherit; }
::selection { background-color: hsla(198, 100%, 69%, 0.45); color: inherit; }

input::input-placeholder, input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder { color: rgb(142, 142, 147); }

/* Menu */

.menu-item { border-bottom: .5px solid rgba(0, 0, 0, .1); position: relative; }
.menu-item:last-child { border: none; }

@media ( max-width: 768px ) {
    .menu-item a { transition: all 0.1s ease-out 0.02s; }
    .menu-item a:hover { background: rgb(0, 122, 255); color: #fff; transition: all 0s ease-out 0s; }
    .menu-item:nth-child(1) { z-index: 1; }
    .menu-item:last-child { border-bottom: none !important; }
}

/* Image */

.post-thumb .image .loaded, .post-thumb .image .small-image .blurry, .post-thumb .image .small-image .loaded, .post-thumb .image .small-image .blurry-hidden, .post-thumb .image .small-image { border-radius: 0; }
.post-thumb .fill { border-radius: 0; }
video { border-radius: 5px; }
video.noradius { border-radius: 0; }
.icon-bg { background-repeat: no-repeat !important; background-size: contain !important; }

.border { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

video::-internal-media-controls-download-button { display:none; }
video::-webkit-media-controls-enclosure { overflow:hidden; }

/* iMessage */

.chat { display: block; max-width: 680px; margin-left: auto; margin-right: auto; margin-bottom: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.chat div { max-width: 70%; word-wrap: break-word; line-height: 1.5; }
.chat p { margin-bottom: 12px !important; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

.clear { clear: both; }

.bubblevideo { height: 51px; margin: 8px 0; display: block; clear: both; }

.sparetime { margin-bottom: 8px; clear: both; }

.timestamp { max-width: 100% !important; position:relative; margin-left: auto; margin-right: auto; text-align: center; color: #8e8e93; font-size: 14px; font-weight: bold; clear: both; }
.timestamp p { margin-top: 10px; margin-bottom: 10px !important; }

.emoji-received { position: relative; font-size: 48px; line-height: 52px !important; margin-top: 6px; margin-bottom: 6px; float: left; clear: both; }
.emoji-sent { position: relative; font-size: 48px; line-height: 52px !important; margin-top: 6px; margin-bottom: 6px; float: right; clear: both; }
[class^="emoji-"] { font-family: var(--emoji-font); }

.bluemsg p, .bluemsg-last p, .greymsg p, .greymsg-last p, .emoji-received p, .emoji-sent p { margin-bottom: 0 !important; }

.bluemsg, .bluemsg-last, .pic-sent-info, .pic-sent-info-last { position: relative; padding: 7px 20px; margin-bottom: 2px; color: #fff; background-color: #007aff; background-image: linear-gradient(to top, #007aff, #5ac8fa); background-size: contain; background-attachment: fixed; border-radius: 21px; float: right; clear: both; }
@media ( max-width: 1024px ) { .bluemsg, .bluemsg-last, .pic-sent-info, .pic-sent-info-last { background-color: #007aff; } }
.bluemsg-last:before, .pic-sent-info-last:before { content: ""; position: absolute; z-index: -1; bottom: -2px; right: -7px; height: 23px; border-right: 20px solid transparent; background-color: #007aff; background-image: linear-gradient(to top, #007aff, #5ac8fa); background-size: contain; background-attachment: fixed; border-bottom-left-radius: 16px 14px; -webkit-transform: translate(0, -2px); }
@media ( max-width: 1024px ) { .bluemsg-last:before, .pic-sent-info-last:before { background-color: #007aff; } }
.bluemsg-last:after, .pic-sent-info-last:after { content:""; position: absolute; z-index: 1; bottom: -2px; right: -40px; width: 10px; height: 24px; background: #fff; border-bottom-left-radius: 10px; -webkit-transform: translate(-30px, -2px); }
.bluemsg a, .bluemsg-last a, .pic-sent-info a, .pic-sent-info-last a { color: white !important; text-decoration: underline !important; }

.greymsg, .greymsg-last { position: relative; padding: 7px 20px; margin-bottom: 2px; background: #e5e5ea; border-radius: 21px; color: #333; float: left; clear: both; }

.pic-received, .pic-received-info, .pic-received-info-last { position: relative; padding: 0; margin-bottom: 2px; background: #e5e5ea; border-radius: 21px; color: #333; float: left; clear: both; }

.greymsg-last:before, .pic-received-info-last:before { content: ""; position: absolute; z-index: -1; bottom: -2px; left: -7px; height: 23px; border-left: 20px solid #E5E5EA; border-bottom-right-radius: 16px 14px; -webkit-transform: translate(0, -2px); }
.greymsg-last:after, .pic-received-info-last:after { content:""; position: absolute; z-index: 1; bottom: -2px; left: 23px; width: 7px; height: 24px; background: #fff; border-bottom-right-radius: 10px; -webkit-transform: translate(-30px, -2px); }

.pic-received img { border-radius: 21px; }
.pic-received-info img, .pic-received-info-last img { border-top-left-radius: 21px; border-top-right-radius: 21px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pic-received-info p, .pic-received-info-last p { font-weight: normal; font-size: 16px; padding: 12px 20px 12px 20px; margin-bottom: 0 !important; }
.pic-received-info audio, .pic-received-info-last audio { padding: 0; margin-bottom: 0 !important; width: 100%; }

.pic-sent, .pic-sent-info, .pic-sent-info-last { position: relative; padding: 0; margin-bottom: 2px; background-color: #007aff; background-image: linear-gradient(to top, #007aff, #5ac8fa); background-attachment: fixed; border-radius: 21px; float: right; clear: both; }
@media ( max-width: 1024px ) { .pic-sent, .pic-sent-info, .pic-sent-info-last { background-color: #007aff; } }
.pic-sent img { border-radius: 21px; }
.pic-sent-info img, .pic-sent-info-last img { border-top-left-radius: 21px; border-top-right-radius: 21px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pic-sent-info p, .pic-sent-info-last p { font-weight: normal; font-size: 16px; padding: 12px 20px 12px 20px; margin-bottom: 0 !important; }
.bluemsg-last, .pic-sent-info-last, .greymsg-last, .pic-received-info-last {
    margin-bottom: 10px;
}

.mobile-bg { background-image: none !important; }

.bubble { display: block; position: relative; width: 110px; height: 54px; float: left; clear: both;}
[class^="bubble-"] { position: absolute; background: #E5E5EA; }
[class^="dot-"] { position: absolute; top: 16.5px; width: 11px; height: 11px; background: #9FA0A4; border-radius: 20px; }
.bubble-1 { left: 0px; width: 77px; height: 44px; border-radius: 22px; animation: bubble-1 1s linear 0s infinite alternate; }
.bubble-2 { left: 0px; bottom: 7px; width: 16px; height: 16px; border-radius: 20px; animation: bubble-2 calc(2s/3) linear 0s infinite alternate; }
.bubble-3 { left: -5px; bottom: 2px; width: 8px; height: 8px; border-radius: 16px; animation: bubble-3 .4s linear 0s infinite alternate; }
.dot-1 { left: 16px; animation: dot 1s linear 0s infinite alternate; }
.dot-2 { left: 33px; animation: dot 1s linear calc(1s/3) infinite alternate; }
.dot-3 { left: 50px; animation: dot 1s linear calc(2s/3) infinite alternate; }

@keyframes bubble-1 { from { transform: scale(.95); } to { transform: scale(1); } }
@keyframes bubble-2 { from { transform: scale(.8); } to { transform: scale(1); } }
@keyframes bubble-3 { from { transform: scale(.8); } to { transform: scale(1); } }
@keyframes dot { 0% { background: #DADADE; } 33.33% { background: #9FA0A4; } 100% { background: #DADADE; } }

/* Notification */

.notification { width: 100%; padding: 150px 0 0 0; margin-bottom: 30px; background: linear-gradient(45deg, #eac0aa, #d2c0ac 7%, #2fbdb9 50%, #1a989d 70%, #023545); background-size: cover; border-radius: 7px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default !important; }
.notification .title { color: black; }

.compact { width: 359px; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: rgba(248,248,248,0.82); border-radius: 13px; margin: 8px auto; box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.25); will-change: transform, opacity; transform: scale(0.9); opacity: 0; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, opacity 0.45s ease-out 0.4s, -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s; }
.compact.action { cursor: pointer; }
.compact.push { transform: translateY(-80px) translateZ(0) scale(1); opacity: 1; will-change: unset; }

.sash { color: rgb(153, 153, 153); line-height: 20px; height: 20px; border-radius: 13px 13px 0 0; padding: 8px 16px 8px 8px; display: block; background-color: rgba(255, 255, 255, 0.35); }
.sash .appicon { width: 20px; height: 20px; border-radius: 4.5px; -webkit-mask: url('https://www.chiawei.com/wp-content/themes/chiawei-blog/img/app_icon.svg'); mask: url('https://www.chiawei.com/wp-content/themes/chiawei-blog/img/app_icon.svg'); background-color: white; margin-right: 8px; float: left; background-size: 20px 20px; }
.sash .appname { font-size: 13px; text-transform: uppercase; letter-spacing: -0.08px; float: left; }
.sash .timestamp { font-size: 13px; text-transform: uppercase; letter-spacing: -0.08px; float: right; margin-left: 8px; }

.board { color: #000; border-radius: 0 0 13px 13px; padding: 8px 12px 8px 12px; display: block; }
.board .title { font-size: 15px; font-weight: 600; letter-spacing: -0.24px; line-height: 20px; margin: 1px 0; }
.board .body { font-size: 15px; letter-spacing: -0.24px; line-height: 18px; margin: 1px 0; }
.board .action { font-size: 12px; color: rgb(153, 153, 153); letter-spacing: 0.25px; line-height: 18px; margin-top: 1px; cursor: pointer; }

@media ( max-width: 414px ) {
    .notification { width: 100vw; margin-left: -20px; border-radius: 0; }
    .compact { width: calc(100vw - 16px); }
}

/* Button */

.bluebutton, .orangebutton { font-size: 17px; line-height: 1.52947; font-weight: 400; letter-spacing: -0.021em; border-width: 1px; border-style: solid; border-radius: 4px; cursor: pointer; display: inline-block; min-width: 30px; padding: 3px 15px 4px 15px; margin-right: 1em; text-align: center; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.bluebutton { background-color: #0070c9; background: -webkit-linear-gradient(#42a1ec, #0070c9); background: linear-gradient(#42a1ec, #0070c9); border-color: #07c; color: white !important; }
.orangebutton { background-color: #ff9500; background: -webkit-linear-gradient(#ffcc00, #ff9500); background: linear-gradient(#ffcc00, #ff9500); border-color: #f90; color: #222 !important; }
.bluebutton:hover { background-color: #147bcd; background: -webkit-linear-gradient(#51a9ee, #147bcd); background: linear-gradient(#51a9ee, #147bcd); border-color: #1482d0; text-decoration: none !important; }
.orangebutton:hover { background-color: #ff9c10; background: -webkit-linear-gradient(#ffda47, #ff9c10); background: linear-gradient(#ffda47, #ff9c10); border-color: #ffb600; text-decoration: none !important; }
.bluebutton:focus { box-shadow: 0 0 0 3px rgba(131, 192, 253, 0.5); outline: none; }
.orangebutton:focus { box-shadow: 0 0 0 3px rgba(255, 156, 0, 0.5); outline: none; }
.bluebutton:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select), .orangebutton:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select), .bluebutton:focus[data-focus-method="touch"]:not(input):not(textarea):not(select), .orangebutton:focus[data-focus-method="touch"]:not(input):not(textarea):not(select) { box-shadow: none; }
.bluebutton:active { background-color: #0067b9; background: -webkit-linear-gradient(#3d94d9, #0067b9); background: linear-gradient(#3d94d9, #0067b9); border-color: #006dbc; outline: none; }
.orangebutton:active { background-color: #f78100; background: -webkit-linear-gradient(#ffb200, #f78100); background: linear-gradient(#ffb200, #f78100); border-color: #ff9900; outline: none; }
.bluebutton:disabled, .bluebutton.disabled { background-color: #0070c9; background: -webkit-linear-gradient(#42a1ec, #0070c9); background: linear-gradient(#42a1ec, #0070c9); border-color: #07c; color: !important; cursor: default; opacity: 0.3; }
.orangebutton:disabled, .orangebutton.disabled { background-color: #ff9500; background: -webkit-linear-gradient(#ffcc00, #ff9500); background: linear-gradient(#ffcc00, #ff9500); border-color: #f90; color: #222 !important; cursor: default; opacity: 0.3; }
.post-content ul.downloadfile { padding-left: 0px; margin-bottom: 8px; }
.post-content ul.downloadfile li { display: inline-block; }
.post-content ul.downloadfile .footer-info { margin: 17px 0 7px 16px; }
.footer-info { font-size: 11px; line-height: 1.5; font-weight: 400; color: #888888; }

/* Live Photos */

.live-photos { text-align: center; margin-bottom: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.live-photos p.footer-info { margin-top: 7px; margin-bottom: 17px; cursor: default; }
.live-photos p.desktop { display: inherit; }

span[data-live-photo] { -webkit-transition: box-shadow .5s ease; transition: box-shadow .5s ease }

@media ( max-width: 1024px ) { .live-photos p.desktop { display: none; } span[data-live-photo]:active { box-shadow: 0 45.4px 70px -20.4px rgba(0, 0, 0, 0.4); z-index: 5 !important; } }
.live-photos p.mobile { display: inherit; }
@media ( min-width: 1024px ) { .live-photos p.mobile { display: none; } span[data-live-photo]:hover { box-shadow: 0 45.4px 70px -20.4px rgba(0, 0, 0, 0.3); z-index: 5 !important; } }
@media ( width: 1024px ) { .live-photos p.mobile { display: inherit; } span[data-live-photo]:hover { box-shadow: 0 45.4px 70px -20.4px rgba(0, 0, 0, 0.3); z-index: 5 !important; } }

/* Shortcode */

.su-spoiler-icon-plus .su-spoiler-icon:before { color: rgb(255, 59, 48) !important; }
.su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { color: rgb(76, 217, 100) !important; }
.su-spoiler-icon { text-align: left !important; }
.su-spoiler-title { font-size: 17px !important; }

.su-tabs { margin-bottom: 30px; padding: 25px; border: 1px solid #e6e6e6; border-radius: 4px; }
.su-tabs-nav { text-align: left; white-space: normal; margin-bottom: 20px; display: inline-block !important; }
.su-tabs-nav span { margin-right: 30px; font-size: 20px; line-height: 1.5; font-weight: 600; letter-spacing: .017em; padding-bottom: 0; border-bottom: 2px solid #e3e3e3; color: #ccc; outline-offset: -3px; cursor: pointer; transition: all .2s; display: inline-block !important; }
.su-tabs-nav span:hover { color: #0070c9; }
.su-tabs-nav span:last-child { margin-right: 0; }
.su-tabs-nav span.su-tabs-current { cursor: default; border-color: #111; color: #111; display: inline-block !important; }
.su-tabs-pane { line-height: 1.45455; font-weight: 300; letter-spacing: .017em; }

@media ( max-width: 735px ) {
    .su-tabs { margin-top: 40px; margin-bottom: 50px; padding: 0; border: none; border-radius: 0; }
    .su-tabs-nav { box-shadow: 0 -1px 0 0 #e3e3e3 inset; display: inline-block !important; }
    .su-tabs-nav span { border-bottom: 1px solid #e3e3e3; font-size: 18px; line-height: 2.2; font-weight: 500; letter-spacing: .018em; display: inline-block !important; }
    .su-tabs-nav span.su-tabs-current { pointer-events: none; border-bottom: 1px solid #111; display: inline-block !important; }
    .su-tabs-pane { font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: -.01em; }
}

.su-accordion { padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }

@media ( min-width: 667px ) {
    .su-accordion { padding: 10px 14px 10px 14px; border: 1px solid #eee; border-radius: 7px; transition: box-shadow 0.5s ease-in-out 0.05s; }
    .su-accordion:hover { box-shadow: 0 0 20px 10px #f9f9f9; transition: box-shadow 0.5s ease-in-out 0.05s; }
}

.su-spoiler-content > p:first-child { display: none; }

/* Sticky */

.entry .main article.sticky { border-radius: unset; background: rgba(90, 200, 255, .2); box-shadow: 0 0 0 24px rgba(90, 200, 255, .2); }
.main article.sticky .post-thumb { border: none; }

.overhidden { overflow: hidden; }

@media ( max-width: 740px ) {
    .main article.sticky { margin-top: -5px; padding: 0 calc(50vw - 340px); border-radius: 0; }
}

@media ( max-width: 720px ) {
    .main article.sticky { padding: 0 20px; }
}

/* Meta */

table.post-meta { margin-bottom: 35px; }

@media ( max-width: 568px ) {
    table.post-meta { margin-bottom: 25px; }
    .meta-value { text-align: right; }
}

/* Aside */

.aside { font-size: .8em; background-color: #fafafa; border-left-color: #e6e6e6; border-left-style: solid; border-left-width: 6px; border-radius: 4px; padding: 0.94118rem; margin-bottom: 30px; }
.aside-note { background-color: #fafafa; border-color: #e6e6e6; }
.aside-important { background-color: #fbf8e8; border-color: #fee450; }
* + aside, aside + *, * + figure, figure + * { margin-top: 1.4em; }

/* Home Modules */
.home-modules { display: flex; flex-grow: 1; box-sizing: border-box; }
.home-modules-container { display: flex; flex-direction: row; flex-grow: 1; gap: var(--page-padding-narrow); }
.home-module { display: flex; align-items: center; justify-content: center; flex: 1; flex-basis: 50%; min-height: 200px; width: 100%; padding: var(--page-padding-default); text-decoration: none; border-radius: 8px; background-color: var(--bg-dynamic-secondary); transition: all 240ms ease 40ms !important; box-sizing: border-box; }
.home-module h1 { margin: 0; font-family: var(--brand-font); font-size: 48px; font-weight: 400; font-style: italic; text-align: center; }

@media ( min-width: 769px ) {
    .home-module:hover { background-color: var(--bg-dynamic-cta-cyan); flex-basis: 60%; }
    .home-module:hover h1 { color: var(--text-color-cta-reversed); }
}

@media ( max-width: 768px ) {
    .home-modules-container { flex-direction: column; }
}

@supports (padding: max(0px)) {
    .home-modules {
        padding-left: max(var(--page-padding-default), env(safe-area-inset-left)) !important;
        padding-right: max(var(--page-padding-default), env(safe-area-inset-right)) !important;
        padding-bottom: max(var(--page-padding-default), env(safe-area-inset-bottom)) !important;
    }
}

/* Blog Home */
body.blog-home main { background-color: var(--bg-dynamic-secondary); }
body.blog-home .article-list { margin-top: 40px; margin-bottom: 64px; }

@supports (padding: max(0px)) {
    body.blog-home .footer-info { padding-left: max(var(--page-padding-wide), env(safe-area-inset-left)) !important; padding-right: max(var(--page-padding-wide), env(safe-area-inset-right)) !important; }
}

@media ( max-width: 576px ) {
    @supports (padding: max(0px)) {
        body.blog-home .footer-info {
            padding-left: max(var(--page-padding-default), env(safe-area-inset-left)) !important;
            padding-right: max(var(--page-padding-default), env(safe-area-inset-right)) !important;
        }
    }
}

/* Blog Local Nav */
.wp-block-spacer { flex-grow: 1; }
body main > header.local-nav { 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; }

@media ( max-width: 768px ) {
    body main > header.local-nav { flex-direction: column; justify-content: flex-start; align-items: stretch; padding-left: 0 !important; padding-right: 0 !important; }
    body main > header.local-nav:not(.open) .menu a, body main > header.local-nav.closing .menu a { transform: translateY(-20px); opacity: 0; }
    body main > header.local-nav .menu { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 16px !important; line-height: 32px; width: 100%; 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); flex-wrap: nowrap; }
    body main > header.local-nav .menu a { padding-left: 16px; border-left: 2px solid transparent; border-bottom: 0; height: 32px; transform: translateY(0); opacity: 1; transition: transform 400ms ease, opacity 200ms ease; }
    body main > header.local-nav .menu a:first-child { margin-top: 16px; }
    body main > header.local-nav .menu a.selected { border-left: 2px solid var(--border-local-nav-bar-menu-selected); border-bottom: 0; }
    body main > header.local-nav > .wp-block-spacer { display: none; }
}

@media ( max-width: 576px ) {
    body main > header.local-nav .has-theme-font-family, body main > header.local-nav .menu { padding-left: var(--page-padding-default); }
}