/* Keep Saga's original introduction. The work occupies its original wide banner. */
.brand-pick{display:block;width:80px;height:80px;color:#20211f}
.brand-pick svg{display:block;width:100%;height:100%}
.mark-showcase{position:relative;--banner-height:clamp(320px,39vw,590px)}
.mark-showcase *{box-sizing:border-box;min-width:0}
.mark-stage{position:relative;height:calc(var(--banner-height) + 96px)}
.mark-project{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .85s cubic-bezier(.22,1,.36,1),visibility 0s .85s}
.mark-project[data-position="0"]{opacity:1;visibility:visible;pointer-events:auto;z-index:1;transition-delay:0s}
.mark-art{position:relative;display:grid;grid-template-columns:1.4fr 1fr;height:var(--banner-height);overflow:hidden;border:0;border-radius:4px;background:#fff;box-shadow:0 26px 38px -34px #20211f66}
.mark-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#1e211d20,transparent 45%,#1e211d15);opacity:0}
.mark-project[data-position="0"] .mark-art::after{animation:mark-shade 1.1s ease-out both}
@keyframes mark-shade{from{opacity:1}to{opacity:0}}
.mark-image{display:block;overflow:hidden;height:100%}
.mark-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0;margin:0;padding:0}
.mark-project-bournvita .mark-image-0 img{object-position:50% 54%}
.mark-project-pogou .mark-art{grid-template-columns:1fr;background:#eae6d8}
.mark-project-pogou .mark-image-0 img{object-fit:cover}
.mark-project-mini-nova .mark-art{grid-template-columns:repeat(3,minmax(0,1fr));background:#fcf6e5}
.mark-project-mini-nova .mark-image{position:relative}
.mark-project-mini-nova .mark-art img{position:absolute;top:0;left:50%;height:200%;width:auto;max-width:none;object-fit:initial;transform:translateX(-25%)}
.mark-project-mini-nova .mark-image-1 img{transform:translateX(-75%)}
.mark-project-mini-nova .mark-image-2 img{top:-100%}
.mark-project-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;width:49%;height:96px;padding-block:18px}
.mark-project-caption h2{font-size:25px;line-height:1.2;letter-spacing:-.035em;font-weight:500;margin-top:5px}
.mark-discipline{font-size:13px;line-height:1.5;color:#65695f}
.mark-project-caption .text-link{flex-shrink:0;white-space:nowrap}
.mark-controls{position:absolute;right:0;bottom:18px;z-index:2;display:flex;align-items:center;gap:20px;width:44%}
.mark-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;flex:1}
.mark-tab{font:inherit;font-size:15px;font-weight:500;line-height:1.5;text-align:left;border:0;border-top:2px solid #d8dad2;background:transparent;padding:14px 0 8px;display:flex;align-items:center;gap:12px;color:#686b62;cursor:pointer;transition:border-color .2s,color .2s}
.mark-tab>span{font-size:12px;font-variant-numeric:tabular-nums;color:#71766a}
.mark-tab[aria-selected="true"]{border-color:#c9f31d;color:#20211f}
.mark-tab:hover{border-color:#c9f31d;color:#20211f}
.mark-tab:focus-visible,.mark-art:focus-visible{outline:2px solid #20211f;outline-offset:5px}
.mark-art:focus-visible{outline-offset:-5px}
.hero .hero-bottom{border-top:1px solid #d7d8d1;padding-top:19px}
@media(max-width:1100px){
 .mark-project-caption{width:49%;gap:18px}
 .mark-controls{width:45%;gap:14px}
 .mark-tabs{gap:14px}
 .mark-tab{gap:8px}
 .mark-project-caption h2{font-size:23px}
}
@media(max-width:1024px){
 .mark-showcase{--banner-height:clamp(300px,42vw,420px)}
 .mark-project-caption{width:100%}
 .mark-controls{position:relative;bottom:auto;width:100%;margin-bottom:20px;gap:24px}
 .mark-tabs{gap:24px}
}
@media(max-width:680px){
 .brand-pick{display:none}
 .mark-showcase{--banner-height:clamp(210px,60vw,380px)}
 .mark-art{grid-template-columns:1fr}
 .mark-project-bournvita .mark-image-1,.mark-project-mini-nova .mark-image-2{display:none}
 .mark-project-pogou .mark-art{grid-template-columns:1fr}
 .mark-project-pogou .mark-image-0 img{object-fit:contain}
 .mark-project-mini-nova .mark-art{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mark-project-caption{gap:12px;height:96px}
 .mark-project-caption h2{font-size:21px}
 .mark-project-caption .text-link{font-size:14px!important;white-space:normal;max-width:116px}
 .mark-discipline{font-size:12px}
 .mark-controls{gap:14px;margin-bottom:16px;align-items:flex-end}
 .mark-tabs{gap:14px}
 .mark-tab{font-size:14px;gap:6px;padding-top:12px;min-height:48px;display:block;white-space:nowrap}
 .mark-tab>span{display:block;font-size:11px;margin-bottom:3px}
 .hero .hero-bottom p{font-size:14px!important;line-height:1.65}
}
@media(max-width:390px){.mark-tabs{gap:12px}.mark-tab{gap:6px}.mark-project-caption h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.mark-showcase *,.mark-showcase *::after{transition:none!important;animation:none!important}}