:root {
      color-scheme: dark;
      --black: #000;
      --white: #fff;
      --soft: rgba(255,255,255,.78);
      --muted: rgba(255,255,255,.65);
      --line: rgba(255,255,255,.18);
      --page: 1260px;
      --copy: 1070px;
      --ease: cubic-bezier(.22,1,.36,1);
    }

    * { box-sizing: border-box; }
    html { background: var(--black); scroll-behavior: smooth; }
    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--black);
      color: var(--white);
      font-family: "Manrope", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img, svg { display: block; max-width: 100%; }
    button, a { -webkit-tap-highlight-color: transparent; }
    ::selection { color: #000; background: #fff; }
    :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

    .skip-link {
      position: fixed;
      z-index: 50;
      top: 8px;
      left: 10px;
      padding: 8px 12px;
      color: #000;
      background: #fff;
      text-decoration: none;
      transform: translateY(-160%);
      transition: transform .2s ease;
    }
    .skip-link:focus { transform: none; }

    .home-link {
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: #000;
      text-decoration: none;
      font-size: 14px;
      letter-spacing: .04em;
    }
    .home-link:hover { color: rgba(255,255,255,.72); }

    .hero {
      position: relative;
      height: clamp(480px, 44vw, 620px);
      overflow: hidden;
      isolation: isolate;
      background-image:
        linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,.02) 62%),
        url("/art-assets/hero.jpg");
      background-position: center bottom;
      background-size: cover;
    }
    .hero__copy {
      position: absolute;
      z-index: 1;
      left: clamp(28px, 2.2vw, 40px);
      top: 37.4%;
      max-width: min(620px, calc(100% - 56px));
      text-shadow: 0 2px 28px rgba(0,0,0,.45);
    }
    .hero h1 {
      margin: 0 0 24px;
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: clamp(48px, 5vw, 68px);
      font-weight: 500;
      line-height: 1.18;
      letter-spacing: -.025em;
    }
    .hero p {
      margin: 0 0 3px;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(21px, 1.9vw, 27px);
      font-weight: 400;
      line-height: 1.42;
      letter-spacing: .035em;
    }

    .series-index {
      width: min(var(--page), calc(100% - 30px));
      margin: 0 auto;
      padding: 48px 36px 60px;
      border-bottom: 1px solid var(--line);
    }
    .series-index__label {
      margin: 0 0 24px;
      color: var(--muted);
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .series-index__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 28px;
    }
    .series-index__link {
      min-width: 0;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2px 14px;
      padding: 18px 0 16px;
      color: var(--white);
      border-top: 1px solid var(--line);
      text-decoration: none;
      transition: color .25s ease, border-color .25s ease, transform .25s var(--ease);
    }
    .series-index__link:hover {
      color: rgba(255,255,255,.72);
      border-color: rgba(255,255,255,.56);
      transform: translateY(-3px);
    }
    .series-index__number {
      grid-row: 1 / span 2;
      padding-top: 4px;
      color: var(--muted);
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: 11px;
      letter-spacing: .14em;
    }
    .series-index__name {
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
    }
    .series-index__en {
      overflow: hidden;
      color: var(--muted);
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .025em;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .manifesto {
      padding: 132px 36px 84px;
      border-top: 1px solid var(--line);
      background: #000;
    }
    .manifesto__intro {
      width: min(1140px, 100%);
      display: grid;
      grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
      gap: clamp(56px, 9vw, 132px);
      margin: 0 auto;
      padding: 0 0 132px;
    }
    .eyebrow {
      margin: 0 0 24px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.4;
      text-align: center;
    }
    .manifesto__aside {
      position: sticky;
      top: 32px;
      align-self: start;
    }
    .manifesto__intro .eyebrow {
      margin: 0 0 32px;
      padding-top: 0;
      color: var(--muted);
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: 12px;
      letter-spacing: .2em;
      text-align: left;
      text-transform: uppercase;
    }
    .manifesto__quote {
      margin: 0;
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: clamp(30px, 3.2vw, 44px);
      font-weight: 500;
      line-height: 1.42;
      letter-spacing: -.035em;
    }
    .manifesto__body {
      max-width: 650px;
    }
    .manifesto__body p {
      margin: 0 0 30px;
      color: rgba(255,255,255,.78);
      font-size: 16px;
      line-height: 1.92;
    }
    .manifesto__body p:first-child {
      color: rgba(255,255,255,.94);
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: 20px;
      line-height: 1.78;
    }
    .manifesto__body p:last-child { margin-bottom: 0; }
    .section-heading {
      margin: 0 auto 48px;
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: clamp(26px, 2.35vw, 32px);
      line-height: 1.18;
      text-align: center;
      letter-spacing: -.03em;
    }
    .emotion-header {
      width: min(1140px, 100%);
      display: grid;
      grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
      gap: clamp(56px, 9vw, 132px);
      margin: 0 auto 70px;
      padding-top: 30px;
      border-top: 1px solid var(--line);
    }
    .emotion-header__label {
      margin: 0;
      color: var(--muted);
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: 11px;
      letter-spacing: .2em;
      line-height: 1.6;
      text-transform: uppercase;
    }
    .emotion-header .section-heading {
      margin: 0;
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: clamp(30px, 3.4vw, 46px);
      font-weight: 500;
      line-height: 1.42;
      text-align: left;
    }
    .emotion-grid {
      width: min(1140px, 100%);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 56px;
      margin: 0 auto;
    }
    .emotion {
      min-height: 0;
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      column-gap: 18px;
      padding: 30px 0 36px;
      border-top: 1px solid var(--line);
    }
    .emotion__number {
      grid-row: 1 / span 2;
      color: rgba(255,255,255,.22);
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: 38px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -.05em;
    }
    .emotion h3 {
      margin: 0 0 12px;
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: 21px;
      font-weight: 500;
      line-height: 1.4;
    }
    .emotion p {
      margin: 0;
      color: rgba(255,255,255,.66);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.82;
    }

    .art-heading {
      max-width: 760px;
      margin: 58px auto 72px;
      padding: 0 24px;
      font-family: "Noto Serif TC", Georgia, serif;
      font-weight: 500;
    }
    .chapter {
      width: min(var(--page), calc(100% - 30px));
      margin: 0 auto;
      padding: 0 0 136px;
      scroll-margin-top: 32px;
    }
    .chapter + .chapter {
      padding-top: 88px;
      border-top: 1px solid var(--line);
    }
    .chapter__header {
      width: min(820px, calc(100% - 144px));
      margin: 0 auto 48px;
    }
    .chapter__header .eyebrow {
      margin-bottom: 22px;
      color: var(--muted);
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: 12px;
      letter-spacing: .2em;
      text-align: left;
      text-transform: uppercase;
    }
    .chapter__title {
      margin: 0 0 20px;
      font-family: "Noto Serif TC", Georgia, "Times New Roman", serif;
      line-height: 1.25;
    }
    .chapter__title-name {
      display: block;
      font-size: clamp(30px, 3vw, 42px);
      font-weight: 500;
      letter-spacing: -.03em;
    }
    .chapter__title-en {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(18px, 1.55vw, 22px);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: .035em;
    }
    .chapter__vector {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 28px;
    }
    .chapter__vector span {
      padding: 6px 11px;
      color: rgba(255,255,255,.76);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12px;
      line-height: 1.2;
      letter-spacing: .04em;
    }
    .chapter__description {
      margin: 0;
      color: rgba(255,255,255,.8);
      font-size: 16px;
      line-height: 1.9;
    }
    .chapter__description + .chapter__description { margin-top: 18px; }

    .carousel {
      --stage-height: clamp(540px, 54vw, 680px);
      position: relative;
      width: 100%;
      min-height: calc(var(--stage-height) + 52px);
      padding-bottom: 52px;
      outline: none;
    }
    .carousel__viewport {
      width: calc(100% - 72px);
      min-height: var(--stage-height);
      margin: 0 auto;
      overflow: hidden;
    }
    #chapter-2 .carousel {
      width: min(1440px, calc(100vw - 24px));
      margin-left: 50%;
      transform: translateX(-50%);
    }
    #chapter-2 .carousel__viewport { width: calc(100% - 40px); }
    .slide {
      min-height: var(--stage-height);
      display: grid;
      grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
      align-items: stretch;
      animation: reveal-slide .55s var(--ease) both;
    }
    .slide[hidden] { display: none; }
    .slide--detail { grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr); }
    .slide--quotes {
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
    }
    .slide__copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 34px 42px 34px 12px;
      color: rgba(255,255,255,.92);
    }
    .slide--detail .slide__copy { padding: 34px 16px 34px 44px; }
    .slide__copy h3 {
      margin: 0 0 20px;
      font-family: "Noto Serif TC", Georgia, "Times New Roman", serif;
      font-size: clamp(22px, 2vw, 29px);
      font-weight: 500;
      line-height: 1.4;
    }
    .slide__copy p {
      margin: 0;
      color: rgba(255,255,255,.84);
      font-size: 16px;
      line-height: 1.78;
    }
    .slide__copy p + p { margin-top: 24px; }
    .slide__date {
      margin-top: 24px !important;
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: .18em;
    }
    .art-image {
      position: relative;
      min-width: 0;
      min-height: var(--stage-height);
      overflow: hidden;
      isolation: isolate;
      background: #000;
    }
    .art-image > img,
    .art-image > svg {
      width: 100%;
      height: var(--stage-height);
      object-fit: cover;
      object-position: center;
    }
    .slide--detail .art-image > img,
    .slide--detail .art-image > svg { object-fit: contain; }
    .art-image--contain > img { object-fit: contain; }
    .art-image::after {
      content: "Spring & Dune";
      position: absolute;
      z-index: 2;
      right: 18px;
      bottom: 16px;
      color: rgba(255,255,255,.48);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 11px;
      letter-spacing: .16em;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
    }
    .art-image--plain::after { display: none; }
    .art-image--captured > img { object-fit: contain; }
    .dual-images {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-self: center;
      gap: clamp(10px, 1.5vw, 22px);
      width: 100%;
      height: auto;
      padding: clamp(8px, 1vw, 14px);
      background: #000;
    }
    .slide--quotes .dual-images {
      max-width: 1320px;
      margin: 0 auto;
      gap: clamp(8px, .9vw, 14px);
      padding: 0;
    }
    .dual-images img {
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 2;
      object-fit: contain;
      background: #000;
    }

    .carousel__button {
      position: absolute;
      z-index: 4;
      top: clamp(270px, 27vw, 340px);
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 50%;
      padding: 0;
      color: #fff;
      background: rgba(0,0,0,.52);
      backdrop-filter: blur(10px);
      cursor: pointer;
      transform: translateY(-50%);
      transition: background .2s ease, border-color .2s ease;
    }
    .carousel__button--prev { left: 0; }
    .carousel__button--next { right: 0; }
    .carousel__button::before {
      content: "";
      position: absolute;
      left: 17px;
      top: 15px;
      width: 16px;
      height: 16px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      opacity: .86;
      transition: opacity .2s ease, transform .2s ease;
    }
    .carousel__button--prev::before { transform: rotate(-135deg); }
    .carousel__button--next::before { left: 12px; transform: rotate(45deg); }
    .carousel__button:hover { background: rgba(24,24,24,.86); border-color: rgba(255,255,255,.5); }
    .carousel__button:hover::before { opacity: 1; }
    .carousel__button--prev:hover::before { transform: translateX(-3px) rotate(-135deg); }
    .carousel__button--next:hover::before { transform: translateX(3px) rotate(45deg); }
    .carousel__meta {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: calc(100% - 72px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      transform: translateX(-50%);
    }
    .carousel__counter {
      color: var(--muted);
      font-family: "Manrope", "Manrope", sans-serif;
      font-size: 11px;
      letter-spacing: .16em;
    }
    .carousel__dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .carousel__dot {
      width: 7px;
      height: 7px;
      border: 0;
      border-radius: 999px;
      padding: 0;
      background: rgba(255,255,255,.34);
      cursor: pointer;
      transition: width .25s var(--ease), background .25s ease;
    }
    .carousel__dot[aria-current="true"] {
      width: 24px;
      background: rgba(255,255,255,.9);
    }
    .carousel__status {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    @keyframes reveal-slide {
      from { opacity: 0; transform: translateX(18px); }
      to { opacity: 1; transform: none; }
    }

    .page-end {
      width: min(var(--copy), calc(100% - 60px));
      height: 1px;
      margin: 8px auto 0;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
    }

    @media (max-width: 980px) {
      .hero { height: 58vw; min-height: 500px; background-position: 55% bottom; }
      .series-index { padding-inline: 28px; }
      .series-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .manifesto__intro, .emotion-header { gap: 64px; }
      .emotion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
      .chapter__header { width: min(820px, calc(100% - 64px)); }
      .slide { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); }
      .slide--detail { grid-template-columns: minmax(0, 1.08fr) minmax(290px, .92fr); }
      .slide__copy, .slide--detail .slide__copy { padding: 28px; }
    }

    @media (max-width: 760px) {
      .home-link { height: 44px; }
      .hero {
        height: 64svh;
        min-height: 480px;
        max-height: 650px;
        background-position: 62% bottom;
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,.46), transparent 76%);
      }
      .hero__copy { z-index: 2; left: 22px; top: auto; bottom: 76px; max-width: calc(100% - 44px); }
      .hero h1 { max-width: 9em; font-size: clamp(38px, 11vw, 54px); }
      .hero p { font-size: 19px; }
      .series-index { width: 100%; padding: 36px 20px 44px; }
      .series-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
      .series-index__link { padding: 14px 0; }
      .manifesto { padding: 84px 20px 54px; }
      .manifesto__intro { grid-template-columns: 1fr; gap: 36px; padding-bottom: 88px; }
      .manifesto__aside { position: static; }
      .manifesto__intro .eyebrow { margin-bottom: 20px; }
      .manifesto__quote { font-size: clamp(29px, 9vw, 38px); }
      .manifesto__body p { margin-bottom: 24px; font-size: 15px; line-height: 1.82; }
      .manifesto__body p:first-child { font-size: 18px; line-height: 1.72; }
      .emotion-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 46px; padding-top: 24px; }
      .emotion-header .section-heading { font-size: clamp(28px, 8vw, 36px); }
      .emotion-grid { width: 100%; grid-template-columns: 1fr; gap: 0; }
      .emotion { grid-template-columns: 64px minmax(0, 1fr); padding: 26px 0 30px; }
      .emotion__number { font-size: 32px; }
      .emotion h3 { font-size: 20px; }
      .emotion p { font-size: 14px; line-height: 1.76; }
      .art-heading { margin: 64px auto 72px; }
      .chapter { width: 100%; padding: 0 20px 88px; }
      .chapter + .chapter { padding-top: 64px; }
      .chapter__header { width: 100%; margin-bottom: 34px; }
      .chapter__title-name { font-size: clamp(28px, 8vw, 34px); }
      .chapter__description { font-size: 15px; line-height: 1.82; }
      .chapter__vector { margin-bottom: 24px; }
      .carousel, .carousel__viewport { min-height: 0; }
      .carousel { --stage-height: min(82vw, 520px); padding-bottom: 48px; }
      .carousel__viewport { width: 100%; overflow: hidden; }
      #chapter-2 .carousel { width: 100%; margin-left: 0; transform: none; }
      #chapter-2 .carousel__viewport { width: 100%; }
      .slide, .slide--detail { min-height: 0; grid-template-columns: 1fr; }
      .slide__copy, .slide--detail .slide__copy { padding: 28px 4px 18px; }
      .slide .art-image, .slide--detail .art-image { order: -1; }
      .art-image { min-height: 0; }
      .art-image > img, .art-image > svg { height: var(--stage-height); }
      .slide--detail .art-image > img, .slide--detail .art-image > svg { object-fit: contain; }
      .dual-images { grid-template-columns: 1fr; gap: 12px; padding: 0; }
      .carousel__button {
        top: min(41vw, 260px);
        width: 42px;
        height: 42px;
        background: rgba(0,0,0,.5);
      }
      .carousel__button--prev { left: 8px; }
      .carousel__button--next { right: 8px; }
      .carousel__button::before { width: 14px; height: 14px; left: 15px; top: 13px; border-width: 2px; }
      .carousel__button--next::before { left: 10px; }
      .carousel__meta { width: 100%; }
      .art-image::after { right: 12px; bottom: 11px; font-size: 9px; }
    }

    @media (max-width: 430px) {
      .hero { background-position: 66% bottom; }
      .section-heading { font-size: 25px; }
      .emotion { grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; }
      .emotion__number { font-size: 28px; }
      .chapter { padding-inline: 16px; }
      .chapter__header .eyebrow { margin-bottom: 18px; }
      .slide__copy h3 { font-size: 21px; }
      .slide__copy p { font-size: 14px; }
    }

    /* Online gallery mode */
    body.gallery-mode { background: #050505; }
    .gallery-mode .chapter {
      width: min(1480px, calc(100% - 48px));
      padding-bottom: clamp(140px, 16vw, 240px);
    }
    .gallery-mode .chapter + .chapter { padding-top: clamp(130px, 15vw, 220px); }
    .gallery-mode .chapter__header {
      width: min(840px, calc(100% - 80px));
      margin-bottom: clamp(70px, 8vw, 110px);
    }
    .gallery-mode .chapter__header .eyebrow {
      position: static;
      width: auto;
      height: auto;
      margin: 0 0 22px;
      overflow: visible;
      clip: auto;
      clip-path: none;
      color: rgba(232,229,223,.48);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .gallery-mode .chapter__title-name { color: #e8e5df; }
    .gallery-mode .chapter__description { color: rgba(232,229,223,.72); }
    .gallery-mode .carousel,
    .gallery-mode #chapter-2 .carousel {
      width: 100%;
      min-height: 0;
      margin-left: 0;
      padding: 0;
      transform: none;
    }
    .gallery-mode .carousel__viewport,
    .gallery-mode #chapter-2 .carousel__viewport {
      display: grid;
      width: 100%;
      min-height: 0;
      gap: clamp(130px, 12vw, 190px);
      overflow: visible;
      counter-reset: artwork;
    }
    .gallery-mode .slide,
    .gallery-mode .slide[hidden] {
      display: grid !important;
      min-height: 0;
      align-items: end;
      gap: clamp(32px, 5vw, 76px);
      animation: none;
      counter-increment: artwork;
    }
    .gallery-mode .slide:not(.slide--detail):not(.slide--quotes) {
      grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }
    .gallery-mode .slide--detail {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    }
    .gallery-mode .slide--hero {
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: start;
      gap: 26px;
    }
    .gallery-mode .slide--hero .art-image {
      order: 1;
      width: min(1360px, 100%);
      justify-self: center;
    }
    .gallery-mode .slide--hero .art-image > img,
    .gallery-mode .slide--hero .art-image > svg { max-height: 88vh; }
    .gallery-mode .slide--hero .slide__copy {
      order: 2;
      width: min(320px, 100%);
      justify-self: end;
    }
    .gallery-mode .slide--quiet {
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: start;
      gap: 24px;
    }
    .gallery-mode .slide--quiet .art-image {
      order: 1;
      width: min(900px, 68vw);
      justify-self: center;
    }
    .gallery-mode .slide--quiet .slide__copy {
      order: 2;
      width: min(900px, 68vw);
      justify-self: center;
    }
    .gallery-mode .slide--quiet .slide__copy > * { max-width: 430px; }
    .gallery-mode .slide--quotes {
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
    }
    .gallery-mode .art-image {
      min-height: 0;
      overflow: visible;
      background: transparent;
    }
    .gallery-mode .art-image > img,
    .gallery-mode .art-image > svg,
    .gallery-mode .slide--detail .art-image > img,
    .gallery-mode .slide--detail .art-image > svg {
      width: 100%;
      height: auto;
      max-height: 82vh;
      object-fit: contain;
    }
    .gallery-mode .slide__copy,
    .gallery-mode .slide--detail .slide__copy {
      align-self: end;
      justify-content: flex-start;
      padding: 18px 0 0;
      border-top: 1px solid rgba(232,229,223,.22);
    }
    .gallery-mode .slide__copy::before {
      content: "WORK " counter(artwork, decimal-leading-zero);
      display: block;
      margin-bottom: 20px;
      color: rgba(232,229,223,.4);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 10px;
      letter-spacing: .2em;
    }
    .gallery-mode .slide__copy h3 {
      margin-bottom: 12px;
      color: #e8e5df;
      font-size: clamp(20px, 1.8vw, 26px);
    }
    .gallery-mode .slide__copy p {
      color: rgba(232,229,223,.68);
      font-size: 13px;
      line-height: 1.75;
    }
    .gallery-mode .slide__copy .artwork-meta {
      margin-top: 24px;
      padding-top: 14px;
      border-top: 1px solid rgba(232,229,223,.12);
      color: rgba(232,229,223,.48);
      font-family: "Manrope", "Noto Sans TC", Arial, sans-serif;
      font-size: 10px;
      line-height: 1.8;
      letter-spacing: .06em;
    }
    .gallery-mode .dual-images {
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      gap: clamp(18px, 2vw, 32px);
      background: transparent;
    }
    .gallery-mode .dual-images img { background: transparent; }
    .gallery-mode .slide--quotes .slide__copy {
      width: min(300px, 100%);
      justify-self: end;
    }
    .gallery-mode .carousel__button,
    .gallery-mode .carousel__status,
    .gallery-mode .carousel__meta { display: none !important; }

    .room-nav {
      position: fixed;
      z-index: 35;
      left: 50%;
      bottom: 22px;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px;
      border: 1px solid rgba(232,229,223,.16);
      border-radius: 999px;
      background: rgba(5,5,5,.76);
      box-shadow: 0 12px 40px rgba(0,0,0,.28);
      backdrop-filter: blur(16px);
      transform: translateX(-50%);
    }
    .room-nav a {
      min-width: 42px;
      padding: 8px 13px;
      border-radius: 999px;
      color: rgba(232,229,223,.48);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 10px;
      line-height: 1;
      letter-spacing: .12em;
      text-align: center;
      text-decoration: none;
      transition: color .25s ease, background .25s ease;
    }
    .room-nav a:hover { color: #e8e5df; }
    .room-nav a.is-active {
      color: #080808;
      background: #e8e5df;
    }
    .room-nav__name { display: none; }

    .gallery-progress {
      position: fixed;
      z-index: 34;
      top: 0;
      bottom: 0;
      left: 0;
      width: 2px;
      background: rgba(232,229,223,.08);
      pointer-events: none;
    }
    .gallery-progress span {
      display: block;
      width: 100%;
      height: 100%;
      background: #e8e5df;
      transform: scaleY(0);
      transform-origin: top;
      will-change: transform;
    }

    .room-indicator {
      position: fixed;
      z-index: 32;
      top: 64px;
      left: 24px;
      display: grid;
      gap: 1px;
      max-width: min(260px, calc(100vw - 48px));
      padding: 12px 15px;
      border-left: 1px solid rgba(232,229,223,.5);
      color: #e8e5df;
      background: rgba(5,5,5,.7);
      backdrop-filter: blur(12px);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity .35s ease, transform .35s var(--ease);
    }
    .room-indicator.is-visible { opacity: 1; transform: none; }
    .room-indicator span,
    .room-indicator small {
      color: rgba(232,229,223,.46);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 9px;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .room-indicator strong {
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: .04em;
    }

    .gallery-mode .chapter__vector {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .gallery-mode .chapter__vector span {
      position: relative;
      padding: 0 0 12px;
      border: 0;
      border-radius: 0;
      color: rgba(232,229,223,.62);
      font-family: "Manrope", "Noto Sans TC", sans-serif;
      font-size: 10px;
    }
    .gallery-mode .chapter__vector span::before,
    .gallery-mode .chapter__vector span::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1px;
    }
    .gallery-mode .chapter__vector span::before {
      width: 100%;
      background: rgba(232,229,223,.12);
    }
    .gallery-mode .chapter__vector span::after {
      width: calc(var(--emotion, 0) * 1%);
      background: rgba(232,229,223,.7);
    }

    .next-room {
      display: flex;
      width: min(920px, calc(100% - 80px));
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin: clamp(100px, 12vw, 180px) auto 0;
      padding: 24px 0;
      border-top: 1px solid rgba(232,229,223,.18);
      color: #e8e5df;
      text-decoration: none;
    }
    .next-room span:first-child {
      color: rgba(232,229,223,.42);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .next-room span:last-child {
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: clamp(17px, 1.5vw, 21px);
      transition: transform .25s var(--ease);
    }
    .next-room:hover span:last-child { transform: translateX(8px); }

    .has-js .gallery-mode .chapter__header,
    .has-js .gallery-mode .slide,
    .has-js .gallery-mode .next-room {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .75s ease, transform .9s var(--ease);
    }
    .has-js .gallery-mode .is-revealed { opacity: 1; transform: none; }

    .gallery-mode .art-image img,
    .gallery-mode .dual-images img {
      cursor: pointer;
      transition: opacity .25s ease;
    }
    .gallery-mode .art-image img:hover,
    .gallery-mode .dual-images img:hover { opacity: .9; }

    .art-viewer {
      position: fixed;
      inset: 0;
      width: 100vw;
      max-width: none;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      margin: 0;
      padding: 0;
      border: 0;
      overflow: hidden;
      color: #e8e5df;
      background: rgba(0,0,0,.97);
    }
    .art-viewer::backdrop { background: #000; }
    .art-viewer[open] { display: grid; place-items: center; }
    .art-viewer__stage {
      width: calc(100vw - 160px);
      height: calc(100vh - 132px);
      height: calc(100dvh - 132px);
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      justify-items: center;
      margin: 0;
    }
    .art-viewer__image {
      touch-action: none;
      display: block;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      object-fit: contain;
      user-select: none;
    }
    .art-viewer__caption {
      box-sizing: border-box;
      width: 100%;
      max-height: 30vh;
      max-height: 30dvh;
      overflow-y: auto;
      padding: 10px 12px 0;
      text-align: center;
    }
    .art-viewer:not(.show-info) .art-viewer__caption { display: none; }
    .art-viewer__room {
      display: block;
      margin-bottom: 5px;
      color: rgba(232,229,223,.42);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 9px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .art-viewer__caption h2 {
      margin: 0 0 6px;
      font-family: "Noto Serif TC", Georgia, serif;
      font-size: 20px;
      font-weight: 500;
    }
    .art-viewer__caption p {
      margin: 0;
      color: rgba(232,229,223,.58);
      font-size: 11px;
      line-height: 1.7;
    }
    .art-viewer button {
      position: fixed;
      z-index: 2;
      border: 1px solid rgba(232,229,223,.18);
      color: #e8e5df;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
      cursor: pointer;
    }
    .art-viewer__close,
    .art-viewer__info {
      top: 22px;
      min-height: 38px;
      padding: 0 15px;
      border-radius: 999px;
      font-family: "Manrope", "Noto Sans TC", sans-serif;
      font-size: 10px;
      letter-spacing: .12em;
    }
    .art-viewer__close { right: 24px; }
    .art-viewer__info { left: 24px; }
    .art-viewer__previous,
    .art-viewer__next {
      top: 50%;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      font-family: Georgia, serif;
      font-size: 28px;
      line-height: 1;
      transform: translateY(-50%);
    }
    .art-viewer__previous { left: 24px; }
    .art-viewer__next { right: 24px; }
    .art-viewer__count {
      position: fixed;
      bottom: 20px;
      left: 24px;
      margin: 0;
      color: rgba(232,229,223,.42);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 10px;
      letter-spacing: .14em;
    }

    /* Curatorial typography system */
    .series-index__label,
    .series-index__number,
    .chapter__header .eyebrow,
    .manifesto .eyebrow,
    .emotion-header__label,
    .emotion__number,
    .art-image::after,
    .gallery-mode .chapter__header .eyebrow,
    .gallery-mode .slide__copy::before,
    .gallery-mode .slide__copy .artwork-meta,
    .room-nav a,
    .room-indicator span,
    .room-indicator small,
    .gallery-mode .chapter__vector span,
    .next-room span:first-child,
    .art-viewer__room,
    .art-viewer__close,
    .art-viewer__info,
    .art-viewer__count {
      font-family: "Manrope", "Noto Sans TC", Arial, sans-serif;
    }
    .series-index__name,
    .section-heading,
    .chapter__title-name,
    .gallery-mode .slide__copy h3,
    .next-room span:last-child,
    .room-indicator strong,
    .art-viewer__caption h2 {
      font-family: "Noto Serif TC", Georgia, serif;
      font-weight: 500;
    }
    .section-heading { letter-spacing: -.025em; }
    .carousel__counter { font-family: "Manrope", "Noto Sans TC", sans-serif; }
    .chapter__description,
    .gallery-mode .slide__copy p {
      font-family: "Noto Sans TC", "Manrope", sans-serif;
      font-weight: 400;
    }
    .gallery-mode .slide__copy p {
      font-size: 14px;
      line-height: 1.82;
    }
    .gallery-mode .slide__copy .artwork-meta {
      font-size: 11px;
      line-height: 1.75;
      letter-spacing: .08em;
    }
    .art-viewer__caption p {
      font-family: "Manrope", "Noto Sans TC", sans-serif;
      font-size: 11px;
      line-height: 1.75;
      letter-spacing: .035em;
    }

    @media (max-width: 760px) {
      .hero h1 { font-size: clamp(40px, 11vw, 52px); }
      .hero p { font-size: 20px; }
      .series-index__en { font-size: 14px; }
      .chapter__title-en { font-size: 18px; }
      .gallery-mode .chapter { width: 100%; padding-bottom: 112px; }
      .gallery-mode .chapter + .chapter { padding-top: 96px; }
      .art-heading { margin: 44px auto 52px; }
      .gallery-mode .chapter__header { width: 100%; margin-bottom: 60px; }
      .gallery-mode .carousel__viewport,
      .gallery-mode #chapter-2 .carousel__viewport { gap: 96px; }
      .gallery-mode .slide,
      .gallery-mode .slide[hidden],
      .gallery-mode .slide:not(.slide--detail):not(.slide--quotes),
      .gallery-mode .slide--detail,
      .gallery-mode .slide--quotes {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
      }
      .gallery-mode .art-image,
      .gallery-mode .slide--detail .art-image { order: 1; }
      .gallery-mode .slide__copy,
      .gallery-mode .slide--detail .slide__copy { order: 2; padding-top: 15px; }
      .gallery-mode .slide--hero .art-image,
      .gallery-mode .slide--hero .slide__copy,
      .gallery-mode .slide--quiet .art-image,
      .gallery-mode .slide--quiet .slide__copy { width: 100%; }
      .gallery-mode .slide--quotes .slide__copy { width: 100%; justify-self: stretch; }
      .gallery-mode .art-image > img,
      .gallery-mode .art-image > svg,
      .gallery-mode .slide--detail .art-image > img,
      .gallery-mode .slide--detail .art-image > svg { max-height: none; }
      .gallery-mode .dual-images { grid-template-columns: 1fr; gap: 24px; }
      .room-nav {
        bottom: 12px;
        width: calc(100% - 24px);
        justify-content: space-between;
      }
      .room-nav a { flex: 1; min-width: 0; padding-inline: 8px; }
      .room-indicator { top: 54px; left: 16px; }
      .gallery-mode .chapter__vector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .next-room { width: 100%; }
      .art-viewer__stage { width: calc(100vw - 24px); height: calc(100vh - 132px); height: calc(100dvh - 132px); }
      .art-viewer__previous,
      .art-viewer__next { top: auto; bottom: 18px; transform: none; }
      .art-viewer__previous { left: calc(50% - 54px); }
      .art-viewer__next { right: calc(50% - 54px); }
      .art-viewer__close { top: 14px; right: 12px; }
      .art-viewer__info { top: 14px; left: 12px; }
      .art-viewer__count { bottom: 31px; left: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
      .has-js .gallery-mode .chapter__header,
      .has-js .gallery-mode .slide,
      .has-js .gallery-mode .next-room { opacity: 1; transform: none; }
    }
  
/* Shared editorial typography across the brand site and gallery. */
:root{--font-sans:"Manrope","Noto Sans TC","PingFang TC",sans-serif;--font-serif:"Cormorant Garamond","Noto Serif TC","Songti TC",serif;--font-display:var(--font-serif)}
body{font-family:var(--font-sans);font-optical-sizing:auto}
button,input,textarea,select{font-family:var(--font-sans)}
h1,h2,h3,.brand-cn,.brand-en{font-family:var(--font-serif);font-weight:500}
.section-label,.work-eyebrow,.contact__eyebrow{font-family:var(--font-sans);font-weight:500;letter-spacing:.08em}
.hero__primary{letter-spacing:-.025em}
.industry-entry h3,.technology-card h3{font-weight:500;letter-spacing:.015em}
p,li,dd,figcaption{font-family:var(--font-sans)}

/* Shared three-page navigation. */
.page-links a[aria-current="page"]{color:#c49f68;border-bottom:1px solid #c49f68}
.page-links a{padding-block:10px;text-decoration:none;white-space:nowrap}
.page-links a:focus-visible{outline:2px solid #c49f68;outline-offset:5px}

.gallery-site-header{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:10px 34px;background:rgba(11,44,48,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.12);color:#f4f4f2}
.gallery-brand{font-family:var(--font-serif);font-size:20px;letter-spacing:.08em;text-decoration:none;white-space:nowrap}
.gallery-site-header .page-links{display:flex;gap:28px;font-family:var(--font-sans);font-size:14px}
.gallery-site-header .page-links a{color:#c9c9c6}
.gallery-site-header .page-links a[aria-current="page"]{color:#c49f68}
@media(max-width:640px){.gallery-site-header{padding:10px 20px;gap:12px;flex-wrap:wrap}.gallery-site-header .page-links{gap:20px;justify-content:space-between;width:100%;font-size:13px}.gallery-brand{font-size:18px}.gallery-progress{top:105px}}

.gallery-mode .hero{height:auto;min-height:0;max-height:none;background-image:none;background-color:#0b2c30}
.gallery-hero-image{display:block;width:100%;height:auto;object-fit:contain}
.gallery-mode .hero__copy{top:auto;bottom:12%;left:clamp(20px,3vw,48px);max-width:60%}
.gallery-mode .hero h1{font-size:clamp(28px,4.5vw,64px)}
.gallery-mode .hero p{font-size:clamp(16px,2vw,28px)}
.gallery-progress{top:var(--shared-header-height)}
@media(max-width:640px){.gallery-mode .hero__copy{position:relative;inset:auto;max-width:none;padding:24px 20px;background:#0b2c30}.gallery-mode .hero::after{display:none}.gallery-mode .hero h1{font-size:32px}.gallery-mode .hero p{font-size:18px}}

/* Identical page header geometry, with content below it. */
:root{--shared-header-height:72px}
body{padding-top:var(--shared-header-height)!important}
header.shared-header,header.shared-header.is-scrolled{position:fixed!important;inset:0 0 auto!important;height:var(--shared-header-height)!important;min-height:0!important;display:block!important;width:100%!important;padding:0!important;margin:0!important;z-index:100!important;background:rgba(11,44,48,.94)!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;backdrop-filter:blur(12px)!important;color:#f4f4f2!important}
.shared-header-inner{width:min(1280px,calc(100% - 68px));height:100%;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:32px}
.shared-header .shared-brand{font-family:"Cormorant Garamond","Noto Serif TC",serif!important;font-size:22px!important;font-weight:500;letter-spacing:.08em;color:#f4f4f2!important;text-decoration:none;white-space:nowrap}
.shared-header nav.shared-page-links{position:static!important;display:flex!important;align-items:center;gap:32px!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important;width:auto!important;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:14px}
.shared-header .shared-page-links a{position:relative;display:block;padding:12px 0!important;color:#c9c9c6!important;text-decoration:none;border:0!important;line-height:1.6;white-space:nowrap}
.shared-header .shared-page-links a[aria-current="page"]{color:#c49f68!important}
.shared-header .shared-page-links a[aria-current="page"]::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:#c49f68}
.shared-header .shared-page-links a:hover{color:#f4f4f2!important}
.shared-header a:focus-visible{outline:2px solid #c49f68;outline-offset:5px}
.shared-header button[hidden],nav.mobile-nav[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--shared-header-height) + 20px)}
@media(max-width:640px){:root{--shared-header-height:108px}.shared-header-inner{width:calc(100% - 40px);flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}.shared-header .shared-brand{font-size:20px!important}.shared-header nav.shared-page-links{width:100%!important;justify-content:space-between;gap:16px!important;font-size:13px}}

/* Shared typography scale; page-specific text colors remain intact. */
:root{--font-sans:"Manrope","Noto Sans TC","PingFang TC",sans-serif;--font-serif:"Cormorant Garamond","Noto Serif TC","Songti TC",serif;--sans:var(--font-sans);--serif:var(--font-serif);--type-body:16px;--type-small:14px;--type-title:clamp(36px,4.5vw,64px);--type-section:clamp(28px,3.2vw,44px);--type-card:22px}
body{font-family:var(--font-sans);font-size:var(--type-body);line-height:1.85;font-optical-sizing:auto}
button,input,textarea,select{font-family:var(--font-sans)}
h1,h2,h3{font-family:var(--font-serif);font-weight:500}
h1,.hero h1,.gallery-mode .hero h1{font-size:var(--type-title);line-height:1.2;letter-spacing:-.02em}
.hero__primary{font-size:var(--type-title);line-height:1.2;letter-spacing:-.02em}
h2{font-size:var(--type-section);line-height:1.45}
h3,.industry-entry h3,.technology-card h3,.work-title h3,.service-card h3{font-size:var(--type-card);line-height:1.5;font-weight:500;letter-spacing:.015em}
p,li,dd,figcaption{font-family:var(--font-sans)}
.industry-entry-start,.industry-focus,.technology-card p,.technology-card .technology-tags,.service-card__body>p,.card-body .position,.card-body .description,.dialog-content p,.chapter__intro,.slide__copy p{font-size:var(--type-body);line-height:1.85}
.section-label,.work-eyebrow,.contact__eyebrow,.eyebrow,.chapter__header .eyebrow{font-family:var(--font-sans);font-size:var(--type-small);font-weight:500;line-height:1.7;letter-spacing:.08em}
.section-label span{font-size:var(--type-small)}
.btn,.project-link,.contact__actions a{font-family:var(--font-sans);font-size:var(--type-small)}
@media(max-width:640px){:root{--type-title:36px;--type-section:28px;--type-card:20px}.gallery-mode .hero h1{font-size:var(--type-title)}}

/* Transparent three-column brand navigation. */
header.shared-header,header.shared-header.is-scrolled{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;--nav-text:#f4f4f2;--nav-active:#e1bd80}
.shared-header-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
.shared-header .shared-brand{justify-self:start;color:var(--nav-text)!important}
.shared-header nav.shared-page-links{justify-self:center;justify-content:center}
.shared-header .shared-wordmark{justify-self:end;font-family:"Cormorant Garamond","Noto Serif TC",serif;font-size:22px;letter-spacing:.035em;text-decoration:none;white-space:nowrap;color:var(--nav-text)}
.shared-header .shared-page-links a{color:var(--nav-text)!important;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.32)}
.shared-header .shared-brand,.shared-wordmark{text-shadow:0 1px 8px rgba(0,0,0,.32)}
.shared-header .shared-page-links a[aria-current="page"]{color:var(--nav-active)!important}
.shared-header .shared-page-links a[aria-current="page"]::after{background:var(--nav-active)}
header.shared-header.is-over-light{--nav-text:#173b40;--nav-active:#785b2a}
.shared-header.is-over-light a{text-shadow:0 1px 8px rgba(255,255,255,.5)!important}
.back-to-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:95;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(224,214,188,.45);border-radius:50%;background:rgba(11,44,48,.75);color:#edcf9a;box-shadow:0 8px 24px rgba(0,0,0,.2);backdrop-filter:blur(8px);cursor:pointer}
.back-to-top svg{width:23px;height:23px}
.back-to-top:hover{background:rgba(22,66,70,.95);color:#fff}
.back-to-top:focus-visible{outline:2px solid #c49f68;outline-offset:5px}
@media(max-width:640px){.shared-header-inner{grid-template-columns:1fr 1fr;align-content:center;gap:4px 12px}.shared-header .shared-wordmark{font-size:18px}.shared-header nav.shared-page-links{grid-column:1 / -1;grid-row:2;justify-self:center;width:auto!important;gap:28px!important}.back-to-top{right:18px;bottom:18px;width:44px;height:44px}}

/* Solid shared header and more generous centered navigation spacing. */
header.shared-header,header.shared-header.is-scrolled,header.shared-header.is-over-light{background:#0b2c30!important;--nav-text:#f4f4f2;--nav-active:#e1bd80;border-bottom:1px solid rgba(255,255,255,.12)!important}
.shared-header nav.shared-page-links{gap:clamp(40px,5vw,72px)!important}
.shared-header a,.shared-header.is-over-light a{text-shadow:none!important}
@media(max-width:640px){.shared-header nav.shared-page-links{gap:36px!important}}

/* Page palettes and reading-mode header. */
header.shared-header{--header-bg:#0b2c30;--header-ink:#f4f4f2;--header-accent:#e1bd80}
header.shared-header[data-page="club"]{--header-bg:#f4f7f6;--header-ink:#173b40;--header-accent:#785b2a}
header.shared-header[data-page="art"]{--header-bg:#171b1b;--header-ink:#ede8de;--header-accent:#d8bc88}
header.shared-header,header.shared-header.is-scrolled,header.shared-header.is-over-light{background:var(--header-bg)!important;--nav-text:var(--header-ink);--nav-active:var(--header-accent);border-bottom:1px solid transparent!important;transition:background-color 200ms cubic-bezier(.2,0,0,1)}
.shared-header nav.shared-page-links{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 180ms ease,transform 200ms cubic-bezier(.2,0,0,1),visibility 0s}
header.shared-header.is-reading{background:transparent!important;pointer-events:none;--nav-text:#f4f4f2;--nav-active:#e1bd80}
header.shared-header.is-reading.is-over-light{--nav-text:#173b40}
.shared-header.is-reading .shared-brand,.shared-header.is-reading .shared-wordmark{pointer-events:auto;text-shadow:0 1px 8px rgba(0,0,0,.35)!important}
.shared-header.is-reading.is-over-light .shared-brand,.shared-header.is-reading.is-over-light .shared-wordmark{text-shadow:0 1px 8px rgba(255,255,255,.6)!important}
.shared-header.is-reading nav.shared-page-links{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity 180ms ease,transform 200ms cubic-bezier(.2,0,0,1),visibility 0s 200ms}
@media(prefers-reduced-motion:reduce){header.shared-header,.shared-header nav.shared-page-links{transition:none!important;transform:none!important}}

/* Hide the complete header while reading downward. */
header.shared-header{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 180ms ease,transform 200ms cubic-bezier(.2,0,0,1),background-color 200ms ease,visibility 0s}
header.shared-header.is-reading{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity 180ms ease,transform 200ms cubic-bezier(.2,0,0,1),background-color 200ms ease,visibility 0s 200ms}
.shared-header.is-reading .shared-brand,.shared-header.is-reading .shared-wordmark{pointer-events:none}
@media(prefers-reduced-motion:reduce){header.shared-header,header.shared-header.is-reading{transition:none!important;transform:none!important}}

/* Retain compact brand signatures while the central navigation fades. */
header.shared-header.is-reading{opacity:1;visibility:visible;transform:none;background:transparent!important;pointer-events:none;--nav-text:#f4f4f2}
header.shared-header.is-reading.is-over-light{--nav-text:#173b40}
.shared-header .shared-brand,.shared-header .shared-wordmark{display:flex;align-items:center;min-height:32px;line-height:1.4;transition:font-size 200ms cubic-bezier(.2,0,0,1)}
.shared-header.is-reading .shared-brand,.shared-header.is-reading .shared-wordmark{font-size:16px!important;line-height:1.4!important;min-height:32px;align-self:center;pointer-events:auto;color:var(--nav-text)!important;text-shadow:0 1px 8px rgba(0,0,0,.3)!important}
.shared-header.is-reading.is-over-light .shared-brand,.shared-header.is-reading.is-over-light .shared-wordmark{text-shadow:0 1px 8px rgba(255,255,255,.6)!important}
@media(max-width:640px){.shared-header.is-reading .shared-header-inner{grid-template-columns:1fr 1fr;grid-template-rows:1fr;align-content:center}.shared-header.is-reading .shared-brand{grid-column:1;grid-row:1}.shared-header.is-reading .shared-wordmark{grid-column:2;grid-row:1}.shared-header.is-reading nav.shared-page-links{position:absolute!important}.shared-header.is-reading .shared-brand,.shared-header.is-reading .shared-wordmark{font-size:15px!important}}
@media(prefers-reduced-motion:reduce){.shared-header .shared-brand,.shared-header .shared-wordmark{transition:none}}

/* Compact typography from the initial header state. */
.shared-header .shared-brand,.shared-header .shared-wordmark{font-size:16px!important;line-height:1.4!important;min-height:32px;align-self:center}
.shared-header nav.shared-page-links{font-size:12px!important}
.shared-header .shared-page-links a{font-size:12px!important;line-height:1.4!important}
@media(max-width:640px){.shared-header .shared-brand,.shared-header .shared-wordmark{font-size:15px!important}.shared-header nav.shared-page-links,.shared-header .shared-page-links a{font-size:12px!important}}

/* The final lightbox page brings the full series into view. */
.art-viewer__stage[hidden], .art-viewer__overview[hidden] { display: none; }
.art-viewer__overview {
  width: min(1060px, calc(100vw - 160px));
  height: calc(100vh - 132px);
  height: calc(100dvh - 132px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(14px, 3vw, 36px);
  scrollbar-color: #71614b transparent;
}
.art-viewer__overview header { border-bottom: 1px solid #393530; padding-bottom: 18px; }
.art-viewer__overview h2 {
  margin: 8px 0 16px;
  font: 500 clamp(26px, 5vw, 52px)/1.15 "Noto Serif TC", Georgia, serif;
}
.art-viewer__share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; }
.art-viewer .art-viewer__footer button {
  position: static;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 3px;
  font: inherit;
}
.art-viewer__share a { color: #e2bb83; text-underline-offset: 4px; }
.art-viewer__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 26px);
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.art-viewer .art-viewer__tiles button {
  position: static;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  font: inherit;
  font-size: 12px;
  text-align: left;
}
.art-viewer__tiles img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #0e0d0b;
}
.art-viewer__tiles span { display: block; padding-top: 7px; line-height: 1.5; }
.art-viewer__tiles button:hover img { opacity: .82; }
.art-viewer__overview :focus-visible, .art-viewer__footer button:focus-visible { outline: 2px solid #e2bb83; outline-offset: 3px; }
.art-viewer__footer { position: fixed; bottom: 16px; left: 24px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.art-viewer__footer .art-viewer__count { position: static; white-space: nowrap; }
.art-viewer__footer button[aria-pressed="true"] { color: #e2bb83; }
@media (max-width: 760px) {
  .art-viewer__overview { width: calc(100vw - 24px); }
  .art-viewer__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-viewer__footer { left: 12px; bottom: 22px; gap: 7px; }
  .art-viewer__footer .art-viewer__count { letter-spacing: .06em; }
  .art-viewer__previous { left: auto; right: 64px; }
  .art-viewer__next { right: 12px; }
}

#main, #manifesto, #collecting { scroll-margin-top: calc(var(--shared-header-height) + 16px); }
.art-collecting, .art-page-footer {
  width: min(1060px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0;
  border-top: 1px solid #393530;
  color: #c7c0b6;
}
.art-collecting h2 { margin: 0; color: #e8e5df; font: 500 clamp(21px, 3vw, 30px)/1.3 "Noto Serif TC", Georgia, serif; }
.art-collecting p { margin: 10px 0 12px; }
.collecting-prices { margin: 16px 0; }
.collecting-prices > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 12px 0;
  border-bottom: 1px solid #393530;
}
.collecting-prices dt, .collecting-prices strong { color: #e8e5df; }
.collecting-prices dd { margin: 0; }
.collecting-prices strong { font-variant-numeric: tabular-nums; }
.collecting-prices span { display: block; font-size: 0.875em; }

.art-collecting a { color: #e2bb83; text-underline-offset: 4px; }
.art-page-footer { padding-bottom: 76px; font-size: 13px; line-height: 1.6; }
.art-page-footer p { margin: 0 0 5px; }
.art-page-footer address { margin-bottom: 8px; font-style: normal; }

.series-print-note { margin: 14px 0 18px; color: #c7c0b6; font-size: 13px; line-height: 1.5; }
.series-print-spec { display: block; margin-top: 4px; color: #c4a47a; font-size: 11px; line-height: 1.5; }

.series-print-values { display: block; margin-top: 5px; color: #e8e5df; font-size: 14px; font-weight: 600; }

.art-viewer__collecting { width: 100%; margin-top: 28px; }
.art-viewer__collecting h3 {
  margin: 0;
  color: #e8e5df;
  font: 500 21px/1.3 "Noto Serif TC", Georgia, serif;
}