/* WOMIO works collection, sized to the common portrait flipbook. */
.case-sheet{container-type:inline-size;background:#f5f2ec;color:#3E3A36;font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif}
.case-page{position:relative;width:100%;height:100%;overflow:hidden;background:#f5f2ec;font-size:clamp(9px,2.3cqw,16px)}
.case-page::after{content:attr(data-page);position:absolute;right:5%;bottom:2.6%;font:400 .75em Georgia,serif;letter-spacing:.14em;color:#8D8377}
.case-cover-photo{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% center}
.case-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,#151a15b7 0%,transparent 36%,#171b17c9 100%)}
.case-cover-top{position:absolute;top:6.5%;left:7%;right:7%;display:flex;align-items:flex-start;justify-content:space-between;gap:2%;color:#f8f5ed}
.case-cover-top img{width:42%;height:auto;filter:brightness(0) invert(1)}
.case-cover-top span{font:500 .7em/1.4 Georgia,serif;letter-spacing:.2em;text-align:right}
.case-cover-bottom{position:absolute;left:8%;right:8%;bottom:7%;color:#fff}
.case-cover-bottom .case-rule{display:block;width:14%;height:2px;background:#afbd81;margin-bottom:6%}
.case-cover-bottom p{margin:0 0 5%;font:600 .85em/1.3 system-ui,sans-serif;letter-spacing:.23em}
.case-cover-bottom h1{font:400 3.6em/1.28 Georgia,"Noto Serif TC",serif;letter-spacing:.04em;margin:0 0 7%;text-shadow:0 1px 9px #0005}
.case-cover-bottom small{display:block;border-top:1px solid #ffffff8c;padding-top:4%;font:400 .8em/1.5 system-ui,sans-serif;letter-spacing:.12em}
.case-sheet:first-of-type .case-page::after,.case-sheet .case-cover-bottom~*{color:#fff}
.case-sheet:has(.case-cover-photo) .case-page::after{color:#e7e0d2}
.case-intro-top{display:flex;justify-content:space-between;align-items:center;padding:9% 9% 0;color:#7C746C;font:600 .68em Georgia,serif;letter-spacing:.15em}
.case-intro-top img{width:39%;height:auto}
.case-intro-top span{text-align:right}
.case-page:has(.case-intro-top){display:flex;flex-direction:column;background:#eeeae1}
.case-page:has(.case-intro-top) h2{margin:17% 9% 6%;font:400 3.2em/1.25 Georgia,"Noto Serif TC",serif;letter-spacing:.04em}
.case-intro-lead{margin:0 9%;color:#665f55;font:400 1.12em/1.85 system-ui,sans-serif;letter-spacing:.025em}
.case-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:2%;height:30%;margin:8% 9% 0;overflow:hidden}
.case-intro-grid img{width:100%;height:100%;object-fit:cover}
.case-intro-foot{margin:auto 9% 7%;border-top:1px solid #c3bbae;padding-top:4%;display:flex;justify-content:space-between;gap:5%;font:.78em/1.2 system-ui,sans-serif;color:#6B8E23;letter-spacing:.06em}
.case-kicker{height:10%;display:flex;align-items:center;justify-content:space-between;gap:4%;padding:0 7%;color:#6B8E23;font:.74em/1.2 Georgia,serif;letter-spacing:.17em}
.case-kicker img{display:block;width:31%;height:auto;max-height:78%;object-fit:contain;object-position:left}
.case-kicker span{text-align:right}
.case-image-frame{position:relative;height:60%;margin:0 5%;background:#ded8cd;display:grid;place-items:center;overflow:hidden}
.case-image-frame>img{display:block;width:100%;height:100%;object-fit:contain}
.case-image-tag{position:absolute;top:2.3%;right:3%;padding:.6em .9em;background:#f9f7f1ec;color:#4c493e;font:600 .74em/1 system-ui,sans-serif;letter-spacing:.06em}
.case-caption{position:relative;height:30%;padding:4% 7% 6%;display:flex;flex-direction:column}
.case-index{font:500 .7em/1 Georgia,serif;color:#6B8E23;letter-spacing:.18em}
.case-caption h2{font:400 2.25em/1.22 Georgia,"Noto Serif TC",serif;letter-spacing:.02em;margin:4% 0 4%}
.case-caption p{font:400 .98em/1.65 system-ui,sans-serif;color:#625d56;margin:0;max-width:94%}
.case-meta{margin-top:auto;border-top:1px solid #c8c1b6;padding-top:3%;display:flex;justify-content:space-between;align-items:center;gap:3%;font:500 .72em/1.25 system-ui,sans-serif;letter-spacing:.07em;color:#7C746C}
.case-meta b{font:400 1em Georgia,serif;white-space:nowrap}
.case-page:has(.case-concept){background:#f5f2ec}
.case-sheet:has(.case-image-tag) .case-page::after{display:none}
.case-end-logo{position:absolute;top:9%;left:9%;width:49%}.case-end-logo img{display:block;width:100%}
.case-end-center{position:absolute;left:9%;right:9%;top:30%}.case-end-center span{font:.72em/1 Georgia,serif;color:#6B8E23;letter-spacing:.25em}.case-end-center h2{font:400 3.5em/1.22 Georgia,"Noto Serif TC",serif;margin:9% 0 10%}.case-end-center p{font:1em/1.8 system-ui,sans-serif;color:#625b51;margin:0}
.case-end-links{position:absolute;bottom:8%;left:9%;right:9%;border-top:1px solid #beb6a9;padding-top:5%;display:grid;gap:.6em}.case-end-links span{color:#6B8E23;font:600 .8em/1.4 system-ui,sans-serif;letter-spacing:.09em}.case-end-links strong{font:500 1.1em/1.35 Georgia,serif}.case-end-links small{font:.8em/1.3 system-ui,sans-serif;color:#7C746C}
.catalog-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
.flip-leaf.case-sheet .case-page{width:100%;height:100%}
.flip-leaf.case-sheet img{height:auto;object-fit:contain}
.flip-leaf.case-sheet .case-kicker img{width:31%;height:auto;max-height:78%}
.flip-leaf.case-sheet .case-cover-top img{width:42%;height:auto}
.flip-leaf.case-sheet .case-intro-top img{width:39%;height:auto}
.flip-leaf.case-sheet .case-end-logo img{width:100%;height:auto}
.flip-leaf.case-sheet .case-image-frame img,.flip-leaf.case-sheet .case-intro-grid img,.flip-leaf.case-sheet .case-cover-photo{height:100%;object-fit:contain}
.flip-leaf.case-sheet .case-cover-photo{object-fit:cover}
.zoom-stage .case-sheet{display:block;width:min(100%,680px);aspect-ratio:1854/2800;height:auto;margin:auto;overflow:hidden}
.zoom-stage .case-sheet .case-page{height:100%}
@media(max-width:700px){.catalog-switch button{padding:8px 6px;font-size:12px}.catalog-switch small{font-size:10px}.case-page{font-size:clamp(9px,2.7cqw,16px)}.case-caption h2{font-size:1.95em}.case-caption p{font-size:.9em}}