@font-face {
  font-family: "Source Han Sans TW";
  src: url("/assets/fonts/SourceHanSansTW-Site.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: block;
}

body.site-typography {
  --font-sans: "Source Han Sans TW";
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;
  color: #000000;
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  letter-spacing: 0;
  opacity: 1 !important;
}

body.home-page .masthead h1,
body.home-page .masthead h1 * {
  font-weight: var(--weight-regular) !important;
}

body.home-page .masthead-contents {
  max-width: none;
  width: 92%;
}

body.home-page .masthead h1 {
  font-size: clamp(37.5px, 22vw, 90px) !important;
  line-height: 1.133333 !important;
  margin-bottom: clamp(12.5px, 7.333333vw, 30px) !important;
  overflow-wrap: normal;
  word-break: normal;
}

body.home-page .masthead p,
body.home-page .masthead p * {
  font-size: clamp(21px, 8.8vw, 36px) !important;
  font-variation-settings: "wght" 200;
  font-weight: 200 !important;
  line-height: 1.25 !important;
  overflow-wrap: normal;
  text-transform: none !important;
  word-break: normal;
}

body.home-page .masthead .slogan-variable {
  display: inline-block;
}

body.home-page .masthead .slogan-word {
  display: inline-block;
  white-space: nowrap;
}

body.home-page .masthead .slogan-letter {
  display: inline-block;
  font-variation-settings: "wght" 200;
  transition: font-variation-settings 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.home-page .masthead .slogan-letter:hover {
  font-variation-settings: "wght" 900;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .masthead .slogan-letter {
    transition-duration: 1ms;
  }
}

body.gallery-page .masthead-copy-en,
body.gallery-page .masthead-copy-zh {
  display: block;
}

body.gallery-page .masthead-copy-en {
  line-height: 1.8 !important;
}

body.gallery-page .masthead-copy-zh {
  line-height: 2.16 !important;
  margin-top: 1.8em;
}

body.site-typography :where(
  .nav-container,
  .responsive-nav,
  .masthead-text,
  .project-module-text,
  .other-projects-title,
  .project-cover .details-wrap,
  .form-input,
  .submit-button,
  .contact-form-sent,
  .back-to-top,
  .site-footer
),
body.site-typography :where(
  .nav-container,
  .responsive-nav,
  .masthead-text,
  .project-module-text,
  .other-projects-title,
  .project-cover .details-wrap,
  .form-input,
  .submit-button,
  .contact-form-sent,
  .back-to-top,
  .site-footer
) * {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0 !important;
}

body.site-typography :where(
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  a,
  span,
  label,
  button,
  input,
  textarea,
  select,
  option
) {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
}

body.site-typography .project-module-text .rich-text,
body.site-typography .project-module-text .rich-text * {
  font-weight: var(--weight-light) !important;
}

body.site-typography .project-module-text .rich-text .bold,
body.site-typography .project-module-text .rich-text .bold * {
  font-weight: var(--weight-regular) !important;
}

body.site-typography :where(input, textarea, button, select) {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
}

body.site-typography :where(input, textarea)::placeholder {
  color: #000000 !important;
  opacity: 1;
}

body.site-typography .project-module-form .submit-button {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.contact-page #project-modules > .project-module-text:first-child
  .rich-text > div:nth-child(1) *,
body.contact-page #project-modules > .project-module-text:first-child
  .rich-text > div:nth-child(4) * {
  font-weight: var(--weight-regular) !important;
}

body.contact-page .project-module-form label {
  font-weight: var(--weight-light) !important;
}

body.contact-page .project-module-form .submit-button {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 25px !important;
  padding-right: 25px !important;
  text-transform: none !important;
}

body.contact-page .project-module-form .submit-button:hover,
body.contact-page .project-module-form .submit-button:focus-visible {
  text-transform: uppercase !important;
}

body.contact-page .project-module-form :where(input, textarea)::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

body.contact-page .project-module-form textarea {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 100% !important;
  overflow-wrap: break-word !important;
  resize: vertical !important;
  white-space: pre-wrap !important;
  width: 100% !important;
}

body.contact-page .project-module-form textarea::placeholder {
  overflow-wrap: break-word !important;
  white-space: pre-wrap !important;
}

body.site-typography :where(
  .site-header .nav-container,
  .responsive-nav .nav-container,
  .masthead h1,
  .other-projects-title,
  .project-cover .title,
  .project-cover .date,
  .submit-button,
  .back-to-top
),
body.site-typography :where(
  .site-header .nav-container,
  .responsive-nav .nav-container,
  .masthead h1,
  .other-projects-title,
  .project-cover .title,
  .project-cover .date,
  .submit-button,
  .back-to-top
) * {
  font-weight: var(--weight-regular) !important;
}

body.site-typography .site-header .nav-container,
body.site-typography .site-header .nav-container * {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

body.site-typography #project-modules .case-intro-title,
body.site-typography #project-modules .case-intro-title * {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: 0 !important;
}

body.site-typography .case-intro-title .rich-text span {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

body.site-typography .case-intro-title .rich-text [lang="zh-Hant-TW"] {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

body.site-typography #project-modules .case-intro-copy,
body.site-typography #project-modules .case-intro-copy * {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: var(--weight-light) !important;
  letter-spacing: 0 !important;
  line-height: 1.8 !important;
}

body.site-typography #project-modules .case-intro-copy .rich-text > div {
  text-align: justify !important;
  text-justify: inter-ideograph;
}

body.site-typography #project-modules .case-intro-copy [lang="zh-Hant-TW"] {
  line-height: 2.16 !important;
}

body.site-typography .other-projects-title,
body.site-typography .other-projects-title * {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
}

body.site-typography .project-cover :where(.title, .date, .custom1, .custom2, .description) {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: 0 !important;
}

body.gallery-page .project-cover .title,
body.case-page .other-projects .project-cover .title {
  font-size: 16px !important;
  font-weight: var(--weight-light) !important;
  line-height: 26px !important;
  text-transform: none !important;
}

body.gallery-page .project-cover :where(.date, .custom1, .custom2, .description),
body.case-page .other-projects .project-cover :where(.date, .custom1, .custom2, .description) {
  font-size: 14px !important;
  font-weight: var(--weight-light) !important;
  line-height: 18px !important;
  text-transform: none !important;
}

body.site-typography .project-cover .cover-image::after,
body.site-typography .project-cover:hover .cover-image::after,
body.site-typography .project-cover.touch-hover .cover-image::after {
  background-color: #000000 !important;
}

body.site-typography .project-cover:hover .cover-image::after,
body.site-typography .project-cover.touch-hover .cover-image::after {
  opacity: 0.3 !important;
}

body.site-typography .project-cover:hover .details-wrap,
body.site-typography .project-cover:hover .details-wrap *,
body.site-typography .project-cover.touch-hover .details-wrap,
body.site-typography .project-cover.touch-hover .details-wrap * {
  color: #ffffff !important;
}

body.site-typography .site-footer .footer-text {
  color: #000000 !important;
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: var(--weight-light) !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}

body.site-typography .back-to-top-fixed {
  background: #000000 !important;
  border-radius: 0 !important;
  height: 42px !important;
  width: 42px !important;
}

body.site-typography .back-to-top-fixed .icon-back-to-top {
  fill: #ffffff !important;
  height: 16.8px !important;
  opacity: 1 !important;
  width: 16.8px !important;
}

body.site-typography .back-to-top-fixed:hover,
body.site-typography .back-to-top-fixed:focus-visible {
  background: #ffffff !important;
}

body.site-typography .back-to-top-fixed:hover .icon-back-to-top,
body.site-typography .back-to-top-fixed:focus-visible .icon-back-to-top {
  fill: #000000 !important;
  opacity: 1 !important;
}

@media (min-width: 933px) {
  body.site-typography .site-header > .nav-container {
    /* Mirror the menu beside the centered logo so desktop and mobile controls stay on the right. */
    left: calc(50% + 50px + 4vw);
    max-width: none;
    position: absolute;
    right: 4%;
    text-align: right;
    width: auto;
    white-space: nowrap;
  }

  body.site-typography .site-header .logo-wrap {
    left: 50%;
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    transform: translateX(-50%);
    width: 40%;
  }

  body.site-typography .site-header > .pf-nav-social {
    left: 0;
    margin-left: auto;
    position: relative;
    right: 0;
  }
}

@media (max-width: 932px) {
  body.gallery-page .project-cover :where(.title, .date, .custom1, .custom2, .description),
  body.case-page .other-projects .project-cover :where(.title, .date, .custom1, .custom2, .description) {
    font-size: 12px !important;
    line-height: 18px !important;
  }
}

@media (max-width: 767px) {
  body.site-typography .case-intro-title .rich-text span {
    font-size: 20px !important;
  }

  body.site-typography .case-intro-title .rich-text [lang="zh-Hant-TW"],
  body.site-typography .other-projects-title,
  body.site-typography .other-projects-title * {
    font-size: 17px !important;
  }

  body.site-typography #project-modules .case-intro-copy,
  body.site-typography #project-modules .case-intro-copy * {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  body.site-typography #project-modules .case-intro-copy [lang="zh-Hant-TW"] {
    line-height: 2.16 !important;
  }
}