@font-face {
  font-family: "UDE Newsreader";
  src: url("../fonts/newsreader-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "UDE Gideon Roman";
  src: url("../fonts/gideon-roman-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "UDE Noto Sans TC";
  src: url("../fonts/noto-sans-tc-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.elementor-widget-ude-architecture-slider,
.elementor-widget-ude-architecture-slider > .elementor-widget-container {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.ude-architecture-slider {
  color-scheme: dark;
  --ink: #0b0d0e;
  --paper: #f4f0e8;
  --muted-paper: rgba(244, 240, 232, .62);
  --font-body: "UDE Newsreader", Georgia, "Times New Roman", serif;
  --font-display: "UDE Gideon Roman", Georgia, "Times New Roman", serif;
  --font-zh: "UDE Noto Sans TC", "Noto Sans TC", "PingFang TC", sans-serif;
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ude-edge-inset: 50px;
  --ude-layout-side: clamp(50px, 6.2vw, 140px);
  --ude-nav-row-height: clamp(44px, min(3.333vw, 5.9259dvh), 72px);
  --type-scale-x: 1vw;
  --type-scale-y: 1.7778dvh;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  overflow: clip;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  outline: none;
}

/*
 * The navigation carousel pitch follows the same width/height scale used by
 * the rest of the composition. The important flag intentionally wins over
 * stale Elementor-generated px declarations when automatic mode is selected.
 */
.elementor-widget-ude-architecture-slider.ude-nav-spacing--auto .ude-architecture-slider,
.ude-architecture-slider.ude-nav-spacing--auto {
  --ude-nav-row-height: clamp(44px, min(3.333vw, 5.9259dvh), 72px) !important;
}

.ude-architecture-slider:not(.is-intro-complete) {
  isolation: auto;
}

.ude-architecture-slider *,
.ude-architecture-slider *::before,
.ude-architecture-slider *::after { box-sizing: border-box; }

.ude-slides,
.ude-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ude-architecture-slider::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 5, 6, .24), transparent 32%, transparent 74%, rgba(3, 5, 6, .2)),
    linear-gradient(180deg, rgba(3, 5, 6, .12), transparent 45%, rgba(3, 5, 6, .2));
  content: "";
  pointer-events: none;
}

.ude-slide {
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ude-slide.is-active,
.ude-slide.is-outgoing,
.ude-slide.is-incoming {
  visibility: visible;
  opacity: 1;
}

.ude-slide.is-active { pointer-events: auto; }

.ude-slide.is-outgoing { z-index: 3; }
.ude-slide.is-incoming { z-index: 2; }

.ude-transition-backdrop {
  position: absolute;
  z-index: 1;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  background: #0b0d0e;
  pointer-events: none;
}

.ude-transition-slices {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  perspective: 1200px;
  pointer-events: none;
}

.ude-transition-slice {
  position: absolute;
  inset: 0;
  background-image: var(--slice-image);
  background-position: var(--slice-position, center);
  background-size: cover;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform, opacity;
}

.ude-transition-slice::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 90%, rgba(255, 244, 220, .11));
  content: "";
  mix-blend-mode: screen;
}

.ude-slide__visual,
.ude-slide__inner,
.ude-slide__image-stage,
.ude-slide__image,
.ude-slide__reveal-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ude-slide__visual,
.ude-slide__inner,
.ude-slide__image-stage,
.ude-slide__image {
  will-change: transform;
  backface-visibility: hidden;
}

.ude-slide__visual {
  overflow: hidden;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.ude-slide__inner {
  overflow: hidden;
  transform: scale(1);
  transform-origin: center;
  perspective: 1200px;
}

.ude-slide__image-stage {
  overflow: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}

.ude-slide__image {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
}

.elementor .ude-architecture-slider .ude-slide__image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.ude-slide__reveal-mask {
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 38%,
    rgba(0, 0, 0, .94) 54%,
    rgba(0, 0, 0, .78) 68%,
    rgba(0, 0, 0, .56) 80%,
    rgba(0, 0, 0, .3) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: translate3d(0, -100%, 0);
  will-change: transform;
}

.ude-project-nav {
  position: absolute;
  z-index: 20;
  top: calc(44dvh + var(--ude-nav-y-offset, 0px));
  width: max-content;
  height: calc(var(--ude-nav-row-height) * 3);
  overflow: hidden;
  translate: 0 -50%;
}

.ude-nav--right .ude-project-nav { right: var(--ude-nav-offset, var(--ude-layout-side)); }
.ude-nav--left .ude-project-nav { left: var(--ude-nav-offset, var(--ude-layout-side)); }

.ude-project-nav__list {
  width: max-content;
  margin: 0;
  padding-left: 0;
  list-style: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.ude-project-nav__item {
  position: relative;
  height: var(--ude-nav-row-height);
  padding-left: calc(var(--ude-nav-dot-size, 7px) + var(--ude-nav-dot-gap, 20px));
  color: transparent;
  white-space: nowrap;
  transition: color 320ms ease;
}

.ude-project-nav__item::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ude-nav-dot-size, 7px);
  height: var(--ude-nav-dot-size, 7px);
  border-radius: 50%;
  background: currentColor;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.ude-project-nav__item.is-active { color: var(--ude-nav-dot-color, #fff); }

.ude-project-nav button {
  display: inline-grid;
  grid-template-columns:
    minmax(var(--ude-nav-en-width, 6.2em), max-content)
    minmax(var(--ude-nav-zh-width, 2.5em), max-content);
  align-items: baseline;
  align-content: center;
  gap: var(--ude-nav-column-gap, 1.45em);
  width: max-content;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  font-family: var(--font-body);
  font-size: clamp(14px, min(1.25vw, 2.2223dvh), 26px);
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  transition: color 320ms ease, opacity 320ms ease;
}

.ude-project-nav button,
.ude-project-nav button:hover,
.ude-project-nav button:focus,
.ude-project-nav button:active {
  appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.ude-project-nav__label--en,
.ude-project-nav__label--zh {
  --nav-strike-optical-offset: .11em;
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: transform 640ms cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}

.ude-project-nav__label--en::before,
.ude-project-nav__label--zh::before {
  position: absolute;
  z-index: 2;
  top: calc(50% - var(--nav-strike-optical-offset));
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: none;
  opacity: .92;
  pointer-events: none;
  transform: translateY(-50%) scaleX(0);
  transition: transform 720ms cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}

.ude-nav-strike--on .ude-project-nav__label--en::before,
.ude-nav-strike--on .ude-project-nav__label--zh::before {
  content: "";
}

.ude-project-nav__label--en::before {
  transform-origin: left center;
}

.ude-project-nav__label--zh::before {
  transform-origin: right center;
}

.ude-project-nav__label--en {
  width: max-content;
  justify-content: flex-start;
  justify-self: start;
  text-align: left;
}

.ude-project-nav__char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  perspective: 420px;
  vertical-align: bottom;
}

.ude-project-nav__char > span,
.ude-project-nav__char::after {
  display: block;
  transition:
    transform 720ms cubic-bezier(.19, 1, .22, 1),
    opacity 420ms ease;
  transition-delay: calc(var(--char-index) * 34ms);
  transform-origin: center center;
  will-change: transform, opacity;
}

.ude-project-nav__char::after {
  position: absolute;
  top: 100%;
  left: 0;
  content: attr(data-char);
  opacity: .15;
  transform: translateY(0) rotateX(-78deg) skewY(7deg);
  transform-origin: center top;
}

.ude-project-nav__item.is-active button {
  color: #fff;
}

.ude-project-nav button:hover {
  color: rgba(255, 255, 255, .9);
}

.ude-project-nav button:hover .ude-project-nav__label--en,
.ude-project-nav button:focus-visible .ude-project-nav__label--en {
  transform: translateX(10px);
}

.ude-project-nav button:hover .ude-project-nav__label--zh,
.ude-project-nav button:focus-visible .ude-project-nav__label--zh {
  transform: translateX(-10px);
}

.ude-nav-strike--on .ude-project-nav button:hover .ude-project-nav__label--en::before,
.ude-nav-strike--on .ude-project-nav button:focus-visible .ude-project-nav__label--en::before,
.ude-nav-strike--on .ude-project-nav button:hover .ude-project-nav__label--zh::before,
.ude-nav-strike--on .ude-project-nav button:focus-visible .ude-project-nav__label--zh::before {
  transform: translateY(-50%) scaleX(1);
}

.ude-project-nav button:hover .ude-project-nav__char > span,
.ude-project-nav button:focus-visible .ude-project-nav__char > span {
  opacity: 0;
  transform: translateY(-110%) rotateX(78deg) skewY(-7deg);
}

.ude-project-nav button:hover .ude-project-nav__char::after,
.ude-project-nav button:focus-visible .ude-project-nav__char::after {
  opacity: 1;
  transform: translateY(-100%) rotateX(0) skewY(0);
}

.ude-project-nav button:focus-visible {
  color: #fff;
  outline: 1px solid rgba(255, 255, 255, .7);
  outline-offset: 5px;
}

.ude-nav-hover--none .ude-project-nav__label,
.ude-nav-hover--none .ude-project-nav__char > span,
.ude-nav-hover--none .ude-project-nav__char::after {
  transition: none;
}

.ude-nav-hover--none .ude-project-nav button:hover .ude-project-nav__label,
.ude-nav-hover--none .ude-project-nav button:focus-visible .ude-project-nav__label {
  transform: none;
}

.ude-nav-hover--none .ude-project-nav button:hover .ude-project-nav__char > span,
.ude-nav-hover--none .ude-project-nav button:focus-visible .ude-project-nav__char > span,
.ude-nav-hover--none .ude-project-nav button:hover .ude-project-nav__char::after,
.ude-nav-hover--none .ude-project-nav button:focus-visible .ude-project-nav__char::after {
  opacity: inherit;
  transform: none;
}

.ude-project-nav__label--zh {
  width: max-content;
  justify-content: flex-end;
  justify-self: end;
  font-family: var(--font-zh);
  text-align: right;
}

.ude-homepage-chrome {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ude-homepage-tagline,
.ude-brand-verse,
.ude-design-principle,
.ude-design-principle__zh,
.ude-standard-time {
  position: absolute;
  z-index: 3;
  margin: 0;
  color: var(--paper);
  text-shadow: 0 1px 20px rgba(0, 0, 0, .28);
}

.ude-homepage-tagline {
  top: clamp(30px, 4.4dvh, 58px);
  left: 50%;
  margin: var(--ude-tagline-margin-top, 0px) var(--ude-tagline-margin-right, 0px) var(--ude-tagline-margin-bottom, 0px) var(--ude-tagline-margin-left, 0px);
  font-size: clamp(12px, min(1.05vw, 1.8667dvh), 22px);
  font-weight: 400;
  letter-spacing: .015em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.ude-brand-verse {
  top: clamp(64px, 8.8dvh, 112px);
  left: 50%;
  margin: var(--ude-verse-margin-top, 0px) var(--ude-verse-margin-right, 0px) var(--ude-verse-margin-bottom, 0px) var(--ude-verse-margin-left, 0px);
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, .8vw, 18px);
  font-family: var(--font-zh);
  font-size: clamp(12px, min(1.12vw, 1.9912dvh), 23px);
  font-weight: 450;
  line-height: 1;
  letter-spacing: .14em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ude-brand-verse::before,
.ude-brand-verse::after {
  display: block;
  width: clamp(26px, 2.1vw, 44px);
  height: 1px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .78);
  content: "";
}

.ude-design-principle {
  bottom: clamp(46px, 7.5dvh, 92px);
  left: clamp(42px, 5.1vw, 114px);
  margin: var(--ude-principle_en-margin-top, 0px) var(--ude-principle_en-margin-right, 0px) var(--ude-principle_en-margin-bottom, 0px) var(--ude-principle_en-margin-left, 0px);
  width: min(66vw, 1320px);
  text-align: left;
}

.ude-design-principle__zh {
  position: fixed;
  top: 60.7dvh;
  right: var(--ude-nav-offset, var(--ude-layout-side));
  margin: var(--ude-principle_zh-margin-top, 0px) var(--ude-principle_zh-margin-right, 0px) var(--ude-principle_zh-margin-bottom, 0px) var(--ude-principle_zh-margin-left, 0px);
  font-family: var(--font-zh);
  font-size: clamp(18px, min(1.75vw, 3.1112dvh), 36px);
  font-weight: 400;
  letter-spacing: .12em;
  white-space: nowrap;
}

.ude-design-principle__en {
  display: grid;
  justify-items: start;
  margin: 0;
  color: rgba(250, 247, 240, .98);
  font-family: var(--font-display);
  font-size: clamp(56px, min(9.5vw, 16.8889dvh), var(--ude-title-max-size, 150px));
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .84;
  white-space: nowrap;
}

.ude-design-principle__clip {
  display: block;
  overflow: hidden;
  padding: .08em .03em .13em;
  perspective: 720px;
}

.ude-architecture-slider.is-intro-complete .ude-design-principle__clip {
  overflow: visible;
}

.ude-design-principle__clip > span {
  display: block;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.ude-design-principle__char {
  display: inline-block;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 100%;
  will-change: transform;
}

.ude-standard-time {
  right: var(--ude-nav-offset, var(--ude-layout-side));
  bottom: clamp(48px, 9.2dvh, 112px);
  margin: var(--ude-standard_time-margin-top, 0px) var(--ude-standard_time-margin-right, 0px) var(--ude-standard_time-margin-bottom, 0px) var(--ude-standard_time-margin-left, 0px);
  display: grid;
  justify-items: end;
  gap: 2px;
  font-family: var(--font-body);
  font-size: clamp(9px, min(.76vw, 1.3512dvh), 15px);
  font-weight: 500;
  letter-spacing: .045em;
  line-height: 1.12;
  text-align: right;
}

.ude-standard-time__clock {
  font-variant-numeric: tabular-nums;
}

.ude-homepage-grain {
  position: absolute;
  z-index: 6;
  inset: -12%;
  opacity: .07;
  background: url("../images/slider-grain.png") center / 540px auto repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.ude-transition-ripple {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity 90ms linear;
  will-change: opacity, transform;
}

.ude-transition-ripple.is-active {
  visibility: visible;
  opacity: 1;
}

.ude-intro-curtain {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

@keyframes ude-intro-curtain-failsafe {
  to { visibility: hidden; }
}

.ude-intro-curtain.is-ready {
  display: block;
  animation: ude-intro-curtain-failsafe 0s linear 8s forwards;
}

.ude-intro-curtain[hidden] { display: none; }

.ude-intro-curtain__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50% + 1px);
  background: var(--ink);
  will-change: transform;
}

.ude-intro-curtain__panel--top { top: 0; }
.ude-intro-curtain__panel--bottom { bottom: 0; }

.ude-intro-curtain__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  opacity: 1;
  background: #eee4d2;
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center;
}

@media (max-width: 820px) {
  .ude-architecture-slider {
    --ude-edge-inset: 30px;
    --ude-layout-side: 30px;
  }

  .ude-project-nav {
    top: calc(max(37dvh, 230px) + var(--ude-nav-y-offset, 0px));
    width: max-content;
    max-width: calc(100% - var(--ude-edge-inset) * 2);
  }

  .ude-project-nav button {
    gap: 1.1em;
    font-size: clamp(15px, min(4.4vw, 2.8dvh), 19px);
  }

  .ude-homepage-tagline {
    top: clamp(112px, 17vw, 138px);
    margin-top: max(var(--ude-tagline-margin-top, 0px), 0px) !important;
    max-width: calc(100vw - 60px);
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
  }

  .ude-brand-verse {
    top: clamp(140px, 20.5vw, 166px);
    margin-top: max(var(--ude-verse-margin-top, 0px), 0px) !important;
    gap: 7px;
    font-size: 10px;
    letter-spacing: .09em;
  }

  .ude-brand-verse::before,
  .ude-brand-verse::after {
    width: 18px;
  }

  .ude-design-principle {
    left: var(--ude-edge-inset);
    bottom: 76px;
    width: calc(100vw - var(--ude-edge-inset) - var(--ude-edge-inset));
    margin-bottom: max(var(--ude-principle_en-margin-bottom, 0px), 0px) !important;
    margin-left: max(var(--ude-principle_en-margin-left, 0px), 0px) !important;
  }

  .ude-design-principle__zh {
    top: 56dvh;
    right: var(--ude-edge-inset);
    margin-right: max(var(--ude-principle_zh-margin-right, 0px), 0px) !important;
    font-size: 18px;
  }

  .ude-design-principle__en {
    font-size: clamp(34px, min(12vw, 8dvh), var(--ude-title-max-size, 62px));
    line-height: .88;
  }

  .ude-standard-time {
    right: var(--ude-edge-inset);
    bottom: 24px;
    margin-right: max(var(--ude-standard_time-margin-right, 0px), 0px) !important;
    margin-bottom: max(var(--ude-standard_time-margin-bottom, 0px), 0px) !important;
    font-size: 8px;
  }

  .ude-homepage-grain {
    opacity: .045;
  }
}

.ude-homepage-tagline:empty,
.ude-design-principle__zh:empty,
.ude-standard-time > span:first-child:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ude-architecture-slider *,
  .ude-architecture-slider *::before,
  .ude-architecture-slider *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }

  .ude-intro-curtain {
    display: none !important;
  }

  .ude-slide__image-stage,
  .ude-transition-slice {
    transform: none !important;
  }

  .ude-transition-ripple {
    display: none !important;
  }
}