.work-list[data-exhibition] { display: block; }
.works-scene { width: min(1220px,84%); padding-top: 112px; }
.works-toolbar { margin-bottom: 32px; }
.works-heading { max-width: 800px; margin-bottom: 32px; }
.works-heading h1 { font-size: 42px; margin: 12px 0 16px; }
.works-heading h1:focus { outline: none; }
.works-heading #worksSummary { font-size: 13px; line-height: 1.8; }
.works-heading .chapter-recipe { margin-top: 12px; }
body[data-scene="works"] .site-footer { display: none; }
body[data-scene="works"] .site-header::before { content: ""; position: absolute; inset: -15px -12px -12px; background: #fffffff5; z-index: -1; pointer-events: none; }
.exhibit-topline { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #bde3f1; font-size: 10px; color: #4c7896; }
.exhibit-arrows { display: flex; gap: 10px; }
.exhibit-arrows button { width: 44px; height: 44px; border: 1px solid #a9d8eb; background: white; border-radius: 50%; color: #a43e75; font-size: 21px; transition: background .25s,transform .25s; }
.exhibit-arrows button:hover:not(:disabled) { background: #fdf0f7; transform: translateX(2px); }
.exhibit-arrows button:disabled { opacity: .3; cursor: default; }
.figure-zoom { margin-left: auto; color: #a43e75; }
.letter-tray { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; padding: 30px 15px 40px; }
.message-letter { position: relative; text-align: left; padding: 16px 20px 20px; border: 1px solid #b4ddeb; background: #f4fbfe; color: #365b73; transform: rotate(-2deg); box-shadow: 4px 6px 0 #e9f5fa; transition: transform .4s,background .4s,border-color .4s; }
.message-letter:nth-child(2) { transform: translateY(15px) rotate(1deg); }
.message-letter:nth-child(3) { transform: rotate(2deg); }
.message-letter:hover,.message-letter[aria-selected="true"] { transform: translateY(-8px) rotate(0); border-color: #d48bb5; background: #fff8fc; }
.letter-fold { position: absolute; inset: auto 0 0; height: 35%; overflow: hidden; pointer-events: none; opacity: .45; }
.letter-fold::before,.letter-fold::after { content: ""; position: absolute; width: 65%; height: 120%; border-top: 1px solid #a9d8eb; bottom: -35%; transform: rotate(26deg); left: -10%; }
.letter-fold::after { left: auto; right: -10%; transform: rotate(-26deg); }
.letter-cover { display: block; height: 170px; overflow: hidden; margin-bottom: 20px; }
.letter-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.letter-meta { display: block; font-size: 10px; color: #a43e75; margin-bottom: 12px; }
.message-letter strong { position: relative; display: block; font: 22px/1.5 "Songti SC",serif; }
.letter-date { position: relative; display: flex; justify-content: space-between; margin-top: 20px; font-size: 11px; }
.letter-date>span { color: #bf548b; font-size: 20px; }
.message-content { border-top: 1px solid #e7c4d9; padding-top: 48px; scroll-margin-top: 100px; }
.message-content .media-case { margin: 0; }
.message-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; color: #547890; font-size: 11px; }

.brand-scroll { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 44px; position: relative; }
.brand-source { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-block: 4px 20px; margin-bottom: 30px; border-bottom: 1px solid #bde3f1; color: #53788e; font-size: 11px; }
.brand-source a { color: #a43e75; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
.brand-source a:hover { text-decoration: underline; text-underline-offset: 5px; }
.brand-source small { color: #53788e; font-size: 10px; }
.brand-page-sequence { display: grid; gap: 38px; }
.scroll-index { position: sticky; align-self: start; top: 120px; display: grid; gap: 18px; padding-block: 10px 35px; }
.scroll-seed { color: #d583ae; font-size: 40px; margin-bottom: 5px; }
.scroll-index button { text-align: left; min-height: 44px; border: 0; background: none; color: #5d8096; padding: 8px 0; font-size: 12px; }
.scroll-index button span { margin-right: 12px; font: 15px Georgia,serif; }
.scroll-index button[aria-current="step"] { color: #a43e75; }
.scroll-progress { position: absolute; top: 82px; bottom: 35px; right: 3px; width: 1px; background: #d5eaf3; }
.scroll-progress i { display: block; width: 100%; height: 100%; background: #d68ab4; transform: scaleY(.333); transform-origin: top; transition: transform .6s ease; }
.brand-chapter { scroll-margin-top: 110px; padding-bottom: 80px; }
.brand-chapter>header { display: flex; gap: 24px; align-items: center; margin-bottom: 28px; }
.chapter-orbit { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 78px; border: 1px solid #a6d7ea; border-radius: 50%; color: #b34882; font: 24px Georgia,serif; }
.brand-chapter header p { font-size: 10px; color: #5d8096; margin-bottom: 7px; }
.brand-chapter h2 { color: #a43e75; font: 30px "Songti SC",serif; margin-bottom: 10px; }
.brand-chapter header div>span { color: #53788e; font-size: 12px; line-height: 1.8; }
.brand-chapter .work-figure { transform: translateY(16px); transition: transform .8s ease; }
.brand-chapter.has-arrived .work-figure { transform: translateY(0); }
.brand-chapter .work-figure img { border: 1px solid #d3eaf4; }

.gallery-toolbar { display: flex; gap: 20px; justify-content: space-between; align-items: center; border-bottom: 1px solid #a9d8eb; padding-bottom: 14px; }
.gallery-design-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 26px 0 4px; }
.gallery-design-notes[hidden] { display: none; }
.gallery-design-notes dt { color: #b53c7e; font-size: 13px; margin-bottom: 8px; }
.gallery-design-notes dd { color: #365f78; font-size: 15px; line-height: 1.8; margin: 0; max-width: 32em; }
@media (max-width: 650px) { .gallery-design-notes { grid-template-columns: minmax(0,1fr); gap: 16px; } }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery-filters button { padding: 8px 12px; min-height: 44px; border: 0; border-bottom: 1px solid transparent; color: #557c94; background: none; font-size: 13px; }
.gallery-filters button[aria-pressed="true"] { color: #a43e75; border-bottom-color: #d48bb5; }
.gallery-count { color: #557c94; font-size: 11px; white-space: nowrap; }
.gallery-track { position: relative; display: flex; gap: 54px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c5e3f0 transparent; padding: 0 0 34px; }
.gallery-hanger { flex: 0 0 62%; min-width: 0; padding-top: var(--hang); scroll-snap-align: center; }
.hanging-wire { display: block; height: 48px; width: 70%; margin: auto; border-inline: 1px solid #9bcce0; position: relative; }
.hanging-wire::before,.hanging-wire::after { content: ""; position: absolute; bottom: -7px; left: -5px; width: 8px; height: 14px; border: 1px solid #d18ab1; border-radius: 3px; background: #fff8fc; z-index: 1; }
.hanging-wire::after { left: auto; right: -5px; }
.gallery-hanger .work-figure { padding: 14px 14px 18px; border: 1px solid #b4ddeb; background: #fbfdff; transition: border-color .4s; }
.gallery-hanger.is-centred .work-figure { border-color: #d48bb5; }
.gallery-hanger .work-figure button { height: 340px; }
.gallery-hanger .work-figure img { width: 100%; height: 100%; object-fit: contain; }
.gallery-hanger .work-figure figcaption { min-height: 32px; line-height: 1.6; }
.gallery-bottom { display: flex; align-items: center; gap: 25px; justify-content: space-between; margin-top: 24px; color: #547890; font-size: 10px; }
.gallery-position { margin-left: auto; }
.is-poster-view .gallery-track { gap: 35px; padding: 34px max(12px,calc(100% - 292px)) 30px 12px; align-items: start; }
.is-poster-view .poster-card { flex: 0 0 280px; padding: 0; scroll-snap-align: start; }
.is-poster-view .poster-card .work-figure { padding: 0; border: 0; background: none; }
.is-poster-view .poster-card .work-figure button { height: auto; transition: transform .3s ease; }
.is-poster-view .poster-card .work-figure img { height: auto; width: 100%; border-radius: 5px; box-shadow: 0 5px 14px #365b731a; }
.is-poster-view .poster-card .work-figure figcaption { margin-top: 16px; font-size: 11px; gap: 10px; }
.is-poster-view .poster-card .work-figure button:hover { transform: translateY(-6px) rotate(1deg); }
.is-poster-view .poster-card:not(.is-dealt) .work-figure { opacity: 0; }
body[data-scene="works"][data-exhibit-filter="海报/展板设计"] .atelier-room[data-room="works-graphic"] .room-layer { visibility: hidden; }
.is-store-view .gallery-toolbar { position: sticky; top: 92px; z-index: 3; background: #f5fbfef5; padding-top: 10px; }
.is-brand-view .gallery-toolbar { position: sticky; top: 92px; z-index: 3; background: #f5fbfef5; padding-top: 10px; }
.graphic-brand-panel { padding-top: 32px; }
.packaging-case { max-width: 1050px; margin-inline: auto; }
.packaging-intro { max-width: 760px; margin-bottom: 32px; }
.packaging-intro>p:first-child,.packaging-section>header>p:first-child { font-size: 11px; color: #557c94; margin-bottom: 14px; }
.packaging-intro h2 { font: 36px "Songti SC",serif; color: #a43e75; margin-bottom: 18px; }
.packaging-case p { font-size: 15px; line-height: 1.95; }
.packaging-case .work-figure { min-width: 0; margin: 0; }
.packaging-case .work-figure img { width: 100%; height: auto; }
.packaging-case .work-figure figcaption { font-size: 11px; line-height: 1.65; gap: 10px; }
.packaging-case .work-figure figcaption>span:first-child { display: none; }
.packaging-case .work-figure figcaption .figure-zoom { margin-left: auto; }
.packaging-section { padding-top: 74px; margin-top: 54px; border-top: 1px solid #bde3f1; }
.packaging-section>header { max-width: 780px; margin-bottom: 32px; }
.packaging-section h3 { font: 29px "Songti SC",serif; color: #a43e75; margin-bottom: 16px; }
.packaging-case h4 { font-size: 18px; font-weight: 500; color: #a43e75; margin: 20px 0 12px; }
.packaging-brand-context { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-bottom: 36px; }
.packaging-brand-context h4 { margin-top: 0; }
.packaging-brand-references { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.packaging-reference-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px 28px; }
.packaging-reference-grid img { aspect-ratio: 4/3; object-fit: contain; }
.packaging-reference-grid p { font-size: 14px; }
.packaging-case .packaging-reference-note { font-size: 12px; color: #557c94; margin-top: 24px; }
.packaging-illustration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.packaging-illustration-grid h4 { margin-top: 0; }
.packaging-stage { display: block; padding: 25px 0; color: #557c94; font-size: 11px; }
.packaging-dielines,.packaging-outcomes { display: grid; gap: 40px; }
@media(max-width:820px) {
  .packaging-intro h2 { font-size: 28px; }
  .packaging-section { padding-top: 40px; margin-top: 40px; }
  .packaging-section h3 { font-size: 25px; }
  .packaging-brand-context { grid-template-columns: 1fr; gap: 24px; }
  .packaging-brand-references { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
  .packaging-reference-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
  .packaging-illustration-grid { grid-template-columns: 1fr; gap: 48px; }
  .packaging-stage { padding-block: 20px; }
}
@media(max-width:480px) {
  .packaging-reference-grid { grid-template-columns: 1fr; }
}
.is-brand-view .scroll-index { top: 180px; }
.is-brand-view .brand-chapter { scroll-margin-top: 180px; }
.multimedia-empty { min-height: 260px; display: grid; align-content: center; justify-items: center; gap: 22px; border-block: 1px solid #c7e6f2; text-align: center; }
.multimedia-empty h2 { font: 28px/1.5 "Songti SC",serif; color: #a43e75; }
.multimedia-empty>p { font-size: 13px; color: #55778b; line-height: 1.8; }
.multimedia-screening { width:100%; }
.multimedia-film { width:min(100%,760px,var(--film-width,calc(52svh * 16 / 9))); margin-inline:auto; }
.multimedia-film + .multimedia-film { margin-top:90px; padding-top:36px; border-top:1px solid #c7e6f2; }
.multimedia-description { margin-top:22px; color:#507c96; font-size:14px; line-height:1.9; }
.multimedia-film header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.multimedia-film h2 { color:#ad3979; font:26px/1.5 "Songti SC",serif; margin-top:12px; }
.multimedia-film header>span { font:13px/1.5 Georgia,serif; color:#507c96; padding-bottom:5px; }
.multimedia-video { display:block; width:100%; height:auto; aspect-ratio:var(--film-ratio,16/9); object-fit:contain; background:#111; }
.multimedia-error { color:#a43e75; font-size:13px; line-height:1.8; margin-top:18px; }
.multimedia-error a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:650px) { .multimedia-film h2 { font-size:22px; } }
.is-store-view .gallery-track { display: grid; grid-template-columns: minmax(0,1fr); gap: 72px; overflow: visible; scroll-snap-type: none; padding: 36px 0 0; }
.is-store-view .gallery-hanger { padding: 0; width: min(100%,1000px); margin-inline: auto; }
.is-store-view .gallery-hanger.store-booth { width: min(100%,640px,72svh); }
.is-store-view .hanging-wire,.is-store-view .gallery-bottom { display: none; }
.is-store-view .gallery-hanger .work-figure { padding: 0; border: 0; background: none; }
.is-store-view .gallery-hanger .work-figure button { height: auto; }
.is-store-view .gallery-hanger .work-figure img { height: auto; width: 100%; }
.is-store-view .gallery-hanger .work-figure figcaption { border-bottom: 1px solid #bde3f1; padding-bottom: 20px; margin-top: 20px; }
#lightbox[data-kind="store"][open] { display: block; overflow-y: auto; padding-top: 75px; }
#lightbox[data-kind="store"] figure { display: block; width: min(1120px,100%); height: auto; margin: auto; }
#lightbox[data-kind="store"] img { display: block; width: 100%; max-height: none; height: auto; }
#lightbox[data-kind="store"] figcaption { padding-block: 25px; }
#lightbox[data-kind="store"]>button { position: fixed; }

.folder-shelf { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; padding-block: 46px 34px; }
.event-folder { min-width: 0; position: relative; padding: 20px 13px 15px; border: 1px solid #b3daea; border-radius: 0 6px 4px 4px; background: #f4fbfe; color: #365b73; text-align: left; transition: transform .35s,background .35s,border-color .35s; }
.folder-tab { position: absolute; left: -1px; top: -22px; width: 45%; height: 22px; padding: 5px 12px; font: 11px Georgia,serif; border: 1px solid #b3daea; border-bottom: 0; background: inherit; border-radius: 5px 7px 0 0; }
.event-folder:hover,.event-folder[aria-selected="true"] { transform: translateY(-8px); background: #fff7fc; border-color: #d48bb5; }
.event-folder[aria-selected="true"] .folder-tab { border-color: #d48bb5; }
.folder-photo { display: block; height: 122px; overflow: hidden; background: white; margin-bottom: 15px; }
.folder-photo img { width: 100%; height: 100%; object-fit: contain; }
.event-folder:first-child .folder-photo img { object-fit: cover; }
.event-folder strong { display: block; font: 17px/1.6 "Songti SC",serif; }
.event-folder small { display: block; margin-top: 8px; font-size: 10px; color: #a43e75; }
.archive-spread { display: grid; grid-template-columns: .8fr 1.2fr; border-block: 1px solid #b3daea; background: linear-gradient(90deg,#fffafd 0%,#fffafd 40%,#f6fcff 40%); }
.archive-intro { padding: 38px; border-right: 1px solid #e5bed5; }
.archive-number { display: block; color: #d8a9c4; font: 50px Georgia,serif; margin-bottom: 24px; }
.archive-intro h2 { margin: 15px 0 22px; font: 28px/1.5 "Songti SC",serif; color: #a43e75; }
.archive-intro>p:not(.scene-eyebrow),.archive-intro dd { color: #53788e; font-size: 13px; line-height: 1.9; }
.archive-intro dl { margin-top: 30px; }
.archive-intro dl>div { margin-top: 20px; }
.archive-intro dt { color: #a43e75; font-size: 11px; margin-bottom: 8px; }
.archive-pagination { margin-top: 36px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #53788e; }
.archive-pages { padding: 35px; display: grid; align-content: start; gap: 30px; min-width: 0; }
.archive-pages .work-figure img { max-height: 560px; object-fit: contain; }
@media(min-width:1500px) and (min-height:950px) { .letter-cover { height: 195px; } .gallery-hanger .work-figure button { height: 450px; } }
@media(max-width:820px) {
  .is-brand-view .brand-chapter { scroll-margin-top: 240px; }
  .works-scene { width: 86%; }
  .letter-tray { gap: 16px; padding: 28px 5px 36px; }
  .message-letter { padding: 10px; }
  .letter-cover { height: 110px; margin-bottom: 12px; }
  .message-letter strong { font-size: 16px; }
  .letter-date,.letter-meta { font-size: 9px; }
  .brand-scroll { grid-template-columns: 1fr; gap: 24px; }
  .scroll-index { top: 80px; z-index: 2; display: flex; gap: 4px; background: #fffffff2; border-block: 1px solid #c9e6f2; padding: 4px 0; overflow-x: auto; scrollbar-width: thin; }
  .scroll-seed,.scroll-progress { display: none; }
  .scroll-index button { font-size: 11px; flex: 0 0 auto; min-width: 100px; text-align: center; }
  .scroll-index button span { margin-right: 5px; }
  .brand-chapter { scroll-margin-top: 150px; padding-bottom: 48px; }
  .gallery-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .gallery-filters { gap: 2px; }
  .gallery-filters button { padding-inline: 9px; font-size: 12px; }
  .gallery-track { gap: 22px; }
  .gallery-hanger { flex-basis: 88%; }
  .gallery-hanger .work-figure button { height: 360px; }
  .gallery-bottom>span:first-child { max-width: 100px; line-height: 1.6; }
  .folder-shelf { display: flex; overflow-x: auto; gap: 18px; padding-top: 40px; scroll-snap-type: x mandatory; }
  .event-folder { flex: 0 0 155px; scroll-snap-align: start; }
  .archive-spread { grid-template-columns: 1fr; background: #f9fcff; }
  .archive-intro { padding: 25px; border-right: 0; border-bottom: 1px solid #e5bed5; background: #fffafd; }
  .archive-pages { padding: 25px; }
}
@media(max-width:480px) {
  .letter-tray { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 22px 5px 30px; }
  .message-letter { flex: 0 0 77%; scroll-snap-align: center; padding: 15px; margin-top: 12px; }
  .message-letter:nth-child(n) { transform: none; }
  .message-letter[aria-selected="true"] { transform: translateY(-6px); }
  .letter-cover { height: 160px; }
  .message-letter strong { font-size: 20px; }
  .chapter-orbit { width: 45px; height: 60px; font-size: 20px; }
  .brand-chapter>header { gap: 15px; }
  .brand-chapter h2 { font-size: 25px; }
  .gallery-hanger .work-figure button { height: 300px; }
  .gallery-hanger .work-figure { padding: 10px; }
  .gallery-hanger .work-figure figcaption { font-size: 10px; gap: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .is-poster-view .poster-card:not(.is-dealt) .work-figure { opacity: 1; }
  .is-poster-view .poster-card .work-figure button { transition: none; }
  .is-poster-view .poster-card .work-figure button:hover { transform: none; }
  .message-letter,.event-folder,.brand-chapter .work-figure,.scroll-progress i,.exhibit-arrows button { transition: none; }
  .brand-chapter .work-figure { transform: none; }
}