/* Site typography */
html,
body {
  font-family: source-serif-pro, "Source Serif Pro", Georgia, Cambria, "Times New Roman", Times, serif;
}

html:lang(zh-CN),
html:lang(zh-CN) body,
html:lang(zh-CN) body * {
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
}

[lang="zh-CN"],
[lang="zh"],
.lang-zh {
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
}

[lang="zh-CN"] *,
[lang="zh"] *,
.lang-zh * {
  font-family: inherit !important;
}

[lang="en"],
[lang="en-US"],
.lang-en {
  font-family: source-serif-pro, "Source Serif Pro", Georgia, Cambria, "Times New Roman", Times, serif;
}

[lang="en"] *,
[lang="en-US"] *,
.lang-en * {
  font-family: inherit;
}

.sqs-spin {
  display: none;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: #111;
  border-radius: 50%;
  animation: sqs-spin 0.8s linear infinite;
  z-index: 9999;
}

body.collection-type-index.index-loading {
  overflow: hidden;
}

body.collection-type-index.index-loading #projectPages,
body.collection-type-index.index-loading #projectThumbs {
  opacity: 0;
  transition: opacity 0.2s;
}

body.collection-type-index.index-loading .sqs-spin {
  display: block;
  position: fixed;
  top: calc(50% - 11px);
  left: calc(50% - 11px);
}

@keyframes sqs-spin {
  to {
    transform: rotate(360deg);
  }
}

#mobileNav {
  display: none;
}

#mobileNav.open {
  display: block;
}

@media (max-width: 750px) {
  #topNav {
    display: none;
  }

  #mobileMenuLink {
    display: block;
    cursor: pointer;
  }

  #mobileNav.open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    padding: 1em;
    border-bottom: 1px solid #eee;
  }

  #mobileNav .main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #mobileNav .main-nav li {
    margin: 0.5em 0;
  }

  #canvas {
    margin: 0 auto;
    padding: 20px;
  }
}

@media (min-width: 751px) {
  #mobileMenuLink {
    display: none;
  }
}

#blogList article,
.article-list article {
  margin-bottom: 2.5em;
}

#blogList .meta,
.article-list .meta {
  color: #999;
  font-size: 12px;
  margin-bottom: 0.25em;
}

#blogList .entry-title,
.article-list .entry-title {
  font-size: 1.4em;
  font-weight: normal;
  margin: 0;
}

#blogList .entry-title a,
.article-list .entry-title a {
  color: inherit;
  text-decoration: none;
}

#blogList .entry-title a:hover,
.article-list .entry-title a:hover {
  color: #0085bd;
}

/* Blog sidebar: Latest Posts directory */
#sidebar h2 {
  font-size: 1.1em;
  font-weight: normal;
  margin: 0 0 1em;
}

#sidebar .summary-item {
  margin-bottom: 1.25em;
}

#sidebar .summary-title {
  font-size: 1em;
  line-height: 1.4;
}

#sidebar .summary-title a {
  color: inherit;
  text-decoration: none;
}

#sidebar .summary-title a:hover,
#sidebar .summary-title a.active-link {
  color: #0085bd;
}

#sidebar .timestamp {
  display: block;
  color: #999;
  font-size: 11px;
  margin-bottom: 0.25em;
  text-transform: none;
}

/* Blog: stacked blockquotes (e.g. Medium pull quotes) */
body.collection-type-blog .entry-content .sqs-html-content blockquote {
  margin-top: 0;
  margin-bottom: 0;
}

/* Blog: center image captions */
body.collection-type-blog .sqs-block-image .image-caption-wrapper,
body.collection-type-blog .sqs-block-image .image-caption,
body.collection-type-blog .sqs-block-image .image-caption p {
  text-align: center;
}

/* Blog article spacing */
body.collection-type-blog .entry-content .sqs-block-html,
body.collection-type-blog .entry-content .sqs-block-image {
  padding-top: 0;
  padding-bottom: 0;
}

body.collection-type-blog .entry-content .sqs-block-html:has(h1) {
  padding-top: 17px;
}

body.collection-type-blog .entry-content .sqs-block-html:has(h2) {
  padding-top: 17px;
}

body.collection-type-blog .entry-content .sqs-layout .sqs-col-12 > .sqs-block-html:first-child,
body.collection-type-blog .entry-content .sqs-layout .sqs-col-12 > .sqs-block-image:first-child {
  padding-top: 0 !important;
}

body.collection-type-blog .entry-content .sqs-block-image {
  padding-top: 17px;
}

body.collection-type-blog .entry-content .sqs-block-image .image-caption-wrapper {
  padding-top: 12px;
}

body.collection-type-blog .entry-content .sqs-block-content {
  padding-bottom: 17px;
}

body.collection-type-blog .entry-content .sqs-block-html:has(h1) .sqs-block-content,
body.collection-type-blog .entry-content .sqs-block-html:has(h2) .sqs-block-content {
  padding-bottom: 0;
}

body.collection-type-blog .entry-content .sqs-html-content p {
  margin: 0 0 1em;
}

body.collection-type-blog .entry-content .sqs-html-content p:last-child {
  margin-bottom: 0;
}

body.collection-type-blog .entry-content .sqs-html-content h1 {
  margin: 0 0 0.75em;
}

body.collection-type-blog .entry-content .sqs-html-content h2 {
  margin: 0 0 0.75em;
}

body.collection-type-blog .entry-content .sqs-html-content .post-subtitle {
  margin: 0 0 1em;
  font-size: inherit;
  font-weight: bold;
  color: #555;
  text-transform: none;
  line-height: inherit;
}

body.collection-type-blog .entry-content .sqs-html-content .post-subtitle strong {
  font-weight: bold;
  color: inherit;
}

body.collection-type-blog .entry-content .sqs-html-content ul,
body.collection-type-blog .entry-content .sqs-html-content ol {
  margin: 0 0 1em;
}

body.collection-type-blog .entry-content .sqs-html-content li p {
  margin: 0 0 0.5em;
}

body.collection-type-blog .entry-content .sqs-html-content li:last-child p {
  margin-bottom: 0;
}

body.collection-type-blog article header {
  margin-bottom: 0.25em;
}

body.collection-type-blog .article-list article .entry-content {
  margin-top: 0.5em;
}

@media (max-width: 750px) {
  body.collection-type-blog #sidebar {
    display: none;
  }

  body.collection-type-blog.layout-style-left.blog-sidebar-display-auto .article-list,
  body.collection-type-blog.layout-style-left.blog-sidebar-display-auto .article-wrapper {
    margin-right: 0;
  }
}

/* About page header banner */
.extra-wrapper.page-header .sqs-block-image .sqs-image-shape-container-element {
  position: relative;
  padding-bottom: 29.75%;
  overflow: hidden;
}

.extra-wrapper.page-header .sqs-block-image .sqs-image-shape-container-element img {
  position: absolute;
  top: 0;
  left: 0 !important;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
}

.about-page .sqs-html-content p {
  text-align: justify;
  text-justify: inter-ideograph;
}

.project-controls .back-to-work {
  color: #575757;
  text-decoration: none;
}

.project-controls .back-to-work:hover {
  color: #111;
}

/* Static site: Squarespace hides image card text until sqs-text-ready JS runs */
.image-block-outer-wrapper:not(.sqs-text-ready) .sqs-dynamic-text {
  visibility: visible;
}

.image-block-outer-wrapper .sqs-dynamic-text-container {
  opacity: 1;
  transform: none;
}

body.collection-type-index #projectPages .project-controls > div {
  padding-top: 0;
}

/* Homepage layout */
body.collection-type-index #header,
body.collection-type-index .page-header,
body.collection-type-index section#page,
body.collection-type-index .extra-wrapper.page-footer {
  display: block;
  clear: both;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.collection-type-index #projectPages {
  display: none;
  clear: both;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0px;
  padding-bottom: 0px;
}

body.collection-type-index.index-page-open #projectPages,
body.collection-type-index.page-open #projectPages {
  display: block;
}

body.collection-type-index .project-injected-content {
  margin-bottom: 50px;
}

body.collection-type-page #page .content .sqs-html-content p,
body.collection-type-page #page .content .sqs-html-content li,
body.collection-type-index #projectPages .project-injected-content .sqs-html-content p,
body.collection-type-index #projectPages .project-injected-content .sqs-html-content li {
  font-size: 15px;
}

body.collection-type-index #projectPages .project.active-project {
  margin-bottom: 0;
}

body.collection-type-index .extra-wrapper.page-footer {
  margin-top: 0;
  padding: 0;
}

body.index-page-open .extra-wrapper.page-footer {
  display: none;
}

body.collection-type-index.index-page-open .page-header,
body.collection-type-index.index-page-open .extra-wrapper.page-header {
  display: none;
}

body.collection-type-index .page-open #projectPages .project.page-project.active-project .sqs-block-image img,
body.collection-type-index .page-open #projectPages .project.page-project.active-project .sqs-block-image-figure img,
body.collection-type-page #page .content img,
body.collection-type-page #page .content .sqs-block-image img {
  max-width: 100%;
  height: auto;
}

/* Thumbnail images: fill container responsively */
#projectThumbs .project .project-image .content-fill img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Standalone project page navigation */
body.collection-type-page .project-page-controls {
  display: block;
  clear: both;
  margin-top: 50px;
}

body.collection-type-page .project-page-controls #projectNav {
  float: right;
}

body.collection-type-page .project-page-controls #projectNav a,
body.collection-type-page .project-page-controls #projectNav span {
  cursor: pointer;
  color: #575757;
  text-decoration: none;
}

body.collection-type-page .project-page-controls #projectNav a:hover {
  color: #111;
}

body.collection-type-page .project-page-controls #projectNav .disabled {
  cursor: default;
  color: rgba(87, 87, 87, 0.5);
}