.xibo-work-page{
  --ink: #171717;
  --muted: #696969;
  --line: #d9d9d9;
  --blue: #8ecdeb;
  --soft-blue: #eaf6fb;
  --pink: #f4a7ba;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Noto Sans TC", sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}.xibo-work-page *{ box-sizing: border-box; }.xibo-work-page,
.xibo-work-page,
.xibo-work-page{ min-height: 100%; }.xibo-work-page{ margin: 0; overflow-x: hidden; background: #fff; }.xibo-work-page button,
.xibo-work-page a{ color: inherit; }.xibo-work-page a{ text-decoration: none; }.xibo-work-page img{ display: block; width: 100%; height: auto; }.xibo-work-page figure{ margin: 0; }.xibo-work-page .content-width{ width: min(1280px, calc(100% - 9vw)); margin-inline: auto; }.xibo-work-page .site-header{
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 28px 4.5vw;
  color: #fff;
  mix-blend-mode: normal;
}.xibo-work-page .brand{ display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 400; letter-spacing: .16em; }.xibo-work-page .brand-monogram{ display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 13px; letter-spacing: 0; }.xibo-work-page .desktop-nav{ display: flex; gap: clamp(24px, 3.2vw, 52px); font-size: 10px; letter-spacing: .16em; }.xibo-work-page .desktop-nav a,
.xibo-work-page .brand{ transition: opacity .2s ease; }.xibo-work-page .desktop-nav a:hover,
.xibo-work-page .brand:hover{ opacity: .58; }.xibo-work-page .menu-button{ display: none; padding: 0; border: 0; background: transparent; color: inherit; }.xibo-work-page .mobile-nav{ display: none; }.xibo-work-page .hero{ position: relative; width: 100%; aspect-ratio: 2048 / 1445; background: var(--blue); }.xibo-work-page .hero-artwork{ height: 100%; }.xibo-work-page .hero-artwork img{ width: 100%; height: 100%; object-fit: cover; }.xibo-work-page .hero-index{
  position: absolute;
  right: 4.5vw;
  bottom: 4vw;
  display: grid;
  grid-template-columns: auto auto;
  gap: 22px;
  align-items: start;
  color: rgba(255,255,255,.9);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .18em;
}.xibo-work-page .project-intro{
  display: grid;
  grid-template-columns: .72fr 1.62fr .55fr;
  gap: clamp(38px, 6vw, 96px);
  padding: clamp(92px, 11vw, 172px) 0;
  align-items: start;
}.xibo-work-page .eyebrow{ margin: 0 0 28px; color: #777; font-size: 9px; line-height: 1.6; letter-spacing: .19em; }.xibo-work-page .project-title h1{ margin: 0; font-size: clamp(55px, 7.5vw, 112px); font-weight: 300; line-height: .9; letter-spacing: -.055em; }.xibo-work-page .project-name{ margin: 33px 0 0; font-size: clamp(14px, 1.35vw, 19px); font-weight: 400; line-height: 1.6; letter-spacing: .02em; }.xibo-work-page .project-copy h2{ margin: 0; font-size: clamp(28px, 3vw, 45px); font-weight: 300; line-height: 1.35; letter-spacing: -.015em; }.xibo-work-page .lead-en{ margin: 13px 0 52px; color: var(--blue); font-size: clamp(13px, 1.2vw, 17px); font-weight: 400; letter-spacing: .06em; }.xibo-work-page .copy-columns{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); }.xibo-work-page .copy-columns p{ margin: 0 0 1.35em; color: #555; font-size: 14px; font-weight: 400; line-height: 1.9; }.xibo-work-page .copy-columns [lang="en"] p{ color: #777; font-size: 12.5px; line-height: 1.78; }.xibo-work-page .project-meta{ margin: 0; display: grid; gap: 29px; }.xibo-work-page .project-meta div{ padding-top: 12px; border-top: 1px solid var(--line); }.xibo-work-page .project-meta dt{ margin-bottom: 8px; color: #8a8a8a; font-size: 8px; letter-spacing: .18em; }.xibo-work-page .project-meta dd{ margin: 0; font-size: 9px; line-height: 1.65; letter-spacing: .1em; }.xibo-work-page .concept-section{
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 896;
  margin: 0;
  overflow: hidden;
  background: #8fd6f2;
}.xibo-work-page .concept-background{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }.xibo-work-page .concept-copy{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(36px, 5.8vw, 92px);
  width: min(43%, 610px);
  transform: translateY(-50%);
  color: #075692;
}.xibo-work-page .concept-copy h2{ margin: 0 0 clamp(22px, 2.4vw, 38px); font-size: clamp(27px, 3vw, 46px); font-weight: 300; line-height: 1.38; letter-spacing: -.025em; }.xibo-work-page .concept-copy p{ max-width: 570px; margin: 0 0 1.35em; color: #125f92; font-size: clamp(13px, 1.08vw, 16px); font-weight: 400; line-height: 1.9; letter-spacing: .015em; }.xibo-work-page .concept-en{ max-width: 570px; margin-top: clamp(24px, 2.2vw, 32px); color: #125f92; }.xibo-work-page .concept-copy .concept-en-title{ margin: 0 0 10px; font-size: clamp(10px, .82vw, 13px); font-weight: 500; line-height: 1.5; letter-spacing: .1em; }.xibo-work-page .concept-copy .concept-en-body{ margin: 0; font-size: clamp(10.5px, .82vw, 12.5px); font-weight: 400; line-height: 1.72; letter-spacing: .01em; }.xibo-work-page .image-stage{ padding: clamp(28px, 4vw, 64px) 0; }.xibo-work-page .soft-blue{ background: var(--soft-blue); }.xibo-work-page .white-stage{ background: #fff; }.xibo-work-page .content-image{ width: min(1380px, calc(100% - 6vw)); margin-inline: auto; }.xibo-work-page .narrow-image{ width: min(1080px, calc(100% - 14vw)); margin-inline: auto; }.xibo-work-page .tight{ margin-top: clamp(26px, 3.2vw, 54px); }.xibo-work-page .full-image{ width: 100%; }.xibo-work-page .colour-stage{ background: #fff; }.xibo-work-page .detail-flow{ padding-top: clamp(20px, 3vw, 46px); }.xibo-work-page .transition-compact + .detail-flow{ padding-top: 0; }.xibo-work-page .detail-flow .narrow-image{ margin-top: clamp(34px, 5vw, 80px); }.xibo-work-page .transition{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: end;
  width: min(1280px, calc(100% - 9vw));
  margin-inline: auto;
  padding: clamp(92px, 12vw, 186px) 0;
}.xibo-work-page .transition-blue{ color: #fff; }.xibo-work-page .transition-soft-blue{ padding-top: clamp(100px, 11vw, 160px); padding-bottom: clamp(54px, 7vw, 96px); }.xibo-work-page .transition-compact{ padding-top: clamp(68px, 7vw, 108px); padding-bottom: clamp(48px, 4vw, 64px); }.xibo-work-page .transition-zh{ margin: 0; font-size: clamp(29px, 4vw, 61px); font-weight: 300; line-height: 1.35; letter-spacing: -.025em; }.xibo-work-page .transition-en{ margin: 0 0 .45em; color: #797979; font-size: clamp(11px, 1.15vw, 16px); line-height: 1.6; letter-spacing: .13em; text-transform: uppercase; }.xibo-work-page .keep-together{ white-space: nowrap; }.xibo-work-page .transition-blue .transition-en{ color: #fff; }.xibo-work-page .colour-stage{ background: #fff; }.xibo-work-page .colour-stage .transition{
  width: 100%;
  margin: 0;
  padding-inline: max(4.5vw, calc((100vw - 1280px) / 2));
  background: #f5b8c9;
}.xibo-work-page .finale-stage{ padding-bottom: clamp(70px, 9vw, 138px); }.xibo-work-page .closing-image{ margin-top: 0; }.xibo-work-page .closing{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
  align-items: center;
  gap: clamp(58px, 8vw, 128px);
  width: min(1280px, calc(100% - 9vw));
  margin: clamp(32px, 4vw, 56px) auto clamp(20px, 2.5vw, 36px);
  padding: clamp(32px, 3.5vw, 48px) 0 clamp(28px, 3vw, 42px);
  background: #fff;
  color: #151515;
}.xibo-work-page .closing-copy{ min-width: 0; }.xibo-work-page .closing-label{ margin: 0 0 clamp(18px, 2vw, 30px); color: #777; font-size: 9px; letter-spacing: .2em; }.xibo-work-page .closing h2{ margin: 0; color: #111; font-size: clamp(48px, 6.2vw, 100px); font-weight: 300; line-height: .9; letter-spacing: -.052em; }.xibo-work-page .closing-zh{ margin: clamp(24px, 3vw, 42px) 0 0; color: #444; font-size: clamp(15px, 1.45vw, 21px); font-weight: 400; line-height: 1.6; letter-spacing: .035em; white-space: nowrap; }.xibo-work-page .closing-mark{ width: min(46%, 220px); justify-self: end; }.xibo-work-page .closing-mark img{ width: 100%; height: auto; object-fit: contain; }.xibo-work-page .back-top{ position: absolute; z-index: 2; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: 9px; letter-spacing: .16em; white-space: nowrap; }.xibo-work-page .site-footer{ display: flex; justify-content: space-between; padding: 28px 0; border-top: 1px solid var(--line); color: #777; font-size: 8px; letter-spacing: .14em; }.xibo-work-page .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s ease; }.xibo-work-page .reveal.is-visible{ opacity: 1; transform: none; }@media (max-width: 900px){.xibo-work-page .project-intro{ grid-template-columns: 1fr 1.4fr; }.xibo-work-page .project-meta{ grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }.xibo-work-page .copy-columns{ grid-template-columns: 1fr; gap: 0; }
}@media (max-width: 680px){.xibo-work-page .content-width{ width: calc(100% - 40px); }.xibo-work-page .site-header{ padding: 20px; }.xibo-work-page .brand > span:last-child{ font-size: 9px; }.xibo-work-page .desktop-nav{ display: none; }.xibo-work-page .menu-button{ display: grid; place-items: center; }.xibo-work-page .mobile-nav{
    position: absolute;
    top: 60px;
    right: 20px;
    display: grid;
    min-width: 170px;
    padding: 20px 24px;
    gap: 17px;
    background: rgba(255,255,255,.96);
    color: var(--ink);
    font-size: 9px;
    letter-spacing: .15em;
  }.xibo-work-page .hero-index{ display: none; }.xibo-work-page .hero-artwork img{ min-height: 0; object-fit: contain; }.xibo-work-page .project-intro{ display: block; padding: 76px 0 86px; }.xibo-work-page .project-title h1{ font-size: 64px; }.xibo-work-page .project-name{ margin-top: 24px; font-size: 15px; }.xibo-work-page .project-copy{ margin-top: 64px; }.xibo-work-page .project-copy h2{ font-size: 28px; }.xibo-work-page .lead-en{ margin: 10px 0 38px; font-size: 12px; }.xibo-work-page .copy-columns p{ font-size: 14px; line-height: 1.85; }.xibo-work-page .copy-columns [lang="en"] p{ font-size: 12px; }.xibo-work-page .project-meta{ grid-template-columns: 1fr; gap: 18px; margin-top: 56px; }.xibo-work-page .concept-section{
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 2048 / 1445;
    margin: 0;
  }.xibo-work-page .concept-background{ position: static; order: 2; width: 100%; height: auto; object-fit: contain; }.xibo-work-page .concept-copy{ position: static; order: 1; width: auto; max-width: none; padding: 46px 24px 20px; transform: none; }.xibo-work-page .concept-copy h2{ margin-bottom: 26px; font-size: 28px; }.xibo-work-page .concept-copy p{ max-width: none; font-size: 14px; line-height: 1.9; }.xibo-work-page .concept-en{ max-width: none; margin-top: 28px; }.xibo-work-page .concept-copy .concept-en-title{ margin-bottom: 10px; font-size: 11px; line-height: 1.5; }.xibo-work-page .concept-copy .concept-en-body{ font-size: 12px; line-height: 1.75; }.xibo-work-page .image-stage{ padding: 14px 0; }.xibo-work-page .content-image,
.xibo-work-page .narrow-image{ width: calc(100% - 24px); }.xibo-work-page .tight,
.xibo-work-page .detail-flow .narrow-image{ margin-top: 14px; }.xibo-work-page .transition{
    display: block;
    width: calc(100% - 40px);
    padding: 86px 0;
  }.xibo-work-page .transition-zh{ font-size: 29px; line-height: 1.42; }.xibo-work-page .transition-en{ margin-top: 17px; font-size: 10px; line-height: 1.65; }.xibo-work-page .transition-compact{ padding-top: 64px; padding-bottom: 52px; }.xibo-work-page .colour-stage{ background: #fff; }.xibo-work-page .colour-stage .transition{ width: 100%; padding: 72px 20px; }.xibo-work-page .transition-soft-blue{ padding-top: 84px; padding-bottom: 52px; }.xibo-work-page .finale-stage{ padding-bottom: 70px; }.xibo-work-page .closing{
    display: block;
    width: calc(100% - 40px);
    margin: 28px auto 20px;
    padding: 34px 0 0;
  }.xibo-work-page .closing h2{ font-size: clamp(42px, 13vw, 58px); line-height: .94; }.xibo-work-page .closing-zh{ margin-top: 24px; font-size: 15px; white-space: normal; word-break: keep-all; }.xibo-work-page .closing-mark{ width: min(36vw, 150px); margin: 28px auto 0; }.xibo-work-page .back-top{ position: static; margin-top: 32px; }.xibo-work-page .site-footer{ display: grid; gap: 8px; padding: 22px 0; }
}@media (prefers-reduced-motion: reduce){.xibo-work-page{ scroll-behavior: auto; }.xibo-work-page .reveal{ opacity: 1; transform: none; transition: none; }
}


/* XIBO ZIP baseline: prevent the global project-copy grid from changing this page's structure. */
.xibo-work-page .project-copy {
  display: block;
}

/* XIBO mobile refinements: preserve the ZIP typography while tightening only the requested rhythm. */
@media (max-width: 680px) {
  .xibo-work-page .project-intro {
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .xibo-work-page .project-name {
    margin-top: 16px;
  }
  .xibo-work-page .project-copy {
    margin-top: 36px;
  }
  .xibo-work-page .lead-en {
    margin-top: 8px;
    margin-bottom: 24px;
  }
  .xibo-work-page .project-meta {
    margin-top: 36px;
  }

  /* Match the image edge tone so the copy and Logo image read as one blue field. */
  .xibo-work-page .concept-section {
    background: rgb(156, 219, 253);
  }
  .xibo-work-page .concept-copy {
    padding-top: 32px;
    padding-bottom: 12px;
  }
  .xibo-work-page .concept-copy h2 {
    margin-bottom: 20px;
  }
  .xibo-work-page .concept-copy p {
    line-height: 1.75;
  }
  .xibo-work-page .concept-en {
    margin-top: 22px;
  }

  /* Reduce only mobile section breathing room; images, type sizes and order stay intact. */
  .xibo-work-page .colour-stage .transition {
    padding-top: 44px;
    padding-bottom: 36px;
  }
  .xibo-work-page .transition-compact {
    padding-top: 42px;
    padding-bottom: 34px;
  }
  .xibo-work-page .transition-soft-blue {
    padding-top: 48px;
    padding-bottom: 34px;
  }
}