/* The reference's white editorial layout with Guangying's own brand palette. */
:root{--paper:#eeece5;background:var(--paper);color:var(--green)}
body{background:var(--paper)}
.site-header{height:70px;background:#eeece5f5;padding-inline:40px}
.wrap{max-width:1280px;width:calc(100% - 80px)}
.brand img{mix-blend-mode:multiply}
.gallery-shell{position:relative}
.photo-gallery{height:420px;margin:0;overflow:hidden;contain:layout paint;isolation:isolate}
.gallery-image{overflow:hidden;background:var(--paper);box-shadow:none;transform-origin:center center;will-change:transform,opacity}
.gallery-image img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;display:block}
.motion-ready .gallery-image{display:block;left:0;top:0;max-width:none;transition:none}
.motion-toggle{position:absolute;bottom:10px;right:40px;z-index:5;background:transparent;border:0;padding:10px;color:#657166;font:inherit;font-size:.75rem;cursor:pointer}
.motion-toggle:hover{color:#96695f}
button:focus-visible,.case-track:focus-visible{outline:3px solid var(--rose);outline-offset:4px}
.hero-type{padding-top:0}
h1{font-weight:400;font-size:clamp(3rem,6.3vw,6.5rem);line-height:1.28;letter-spacing:.055em}
.hero-bottom{padding:30px 0 56px;display:block}
.hero-bottom p{max-width:800px;font-size:1.2rem;line-height:1.55}
.hero-bottom p br{display:none}
.hero-links{margin-top:27px}
.case-ribbons{overflow:hidden;padding:28px 0 35px;border-block:1px solid #3e494515;display:grid;gap:20px}
.case-ribbon{overflow:hidden}
.ribbon-track,.ribbon-group{display:flex;align-items:center;width:max-content;gap:24px}
.ribbon-track{animation:case-drift 50s linear infinite;will-change:transform}
.reverse .ribbon-track{animation-direction:reverse;animation-duration:57s}
.ribbon-group img{width:160px;height:100px;object-fit:cover;object-position:50% 34%}
.case-ribbons:hover .ribbon-track,.motion-paused .ribbon-track{animation-play-state:paused}
@keyframes case-drift{to{transform:translateX(calc(-50% - 12px))}}
.work-section{grid-template-columns:38% 1fr;gap:5%;padding-top:90px}
.work-intro{top:105px}
.work-intro>.kicker,.work-intro>.underlined{display:none}
.work-intro h2{font-size:clamp(2.5rem,4.1vw,4rem);line-height:1.25}
.story-photo.triptych{display:grid;grid-template-columns:1fr 1.4fr 1fr;aspect-ratio:2.25;gap:0;background:none}
.story-photo.triptych img{height:100%;width:100%;min-width:0;object-fit:cover;object-position:center 38%}
.story-photo.triptych img:nth-child(2){object-position:center 32%}
.story-text{display:flex;align-items:center;gap:25px;margin-top:22px}
.story h3{font-size:1.5rem;letter-spacing:.09em}
.story p{font-size:1.05rem;line-height:1.55}
.story-more{white-space:nowrap;font-size:.8rem;border-bottom:1px solid currentColor;padding-bottom:4px;flex-shrink:0}
.story-more:hover{color:#94685d}
.story{border-bottom:1px solid #859183;padding-bottom:32px;margin-bottom:32px}
.studio-section{display:grid;grid-template-columns:1fr 1fr;background:#dfe3d9;align-items:stretch}
.studio-description{padding:75px max(40px,calc((100vw - 1280px)/2));padding-right:55px}
.studio-description h2{font-size:clamp(2.4rem,3.7vw,3.8rem);line-height:1.28}
.studio-description>p{font-size:1.05rem;line-height:1.65;margin-top:28px}
.studio-description ul{padding-left:20px;margin:25px 0 30px;line-height:2.15;font-size:.95rem}
.studio-case{display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;min-height:580px;background:var(--green)}
.studio-case>img{width:100%;height:100%;object-fit:cover;object-position:center 45%;min-width:0}
.studio-case>span{position:absolute;bottom:30px;left:30px;background:#3e4945d9;padding:12px 18px;color:white;font-size:.85rem;letter-spacing:.08em}
.more-cases{padding-top:85px;padding-bottom:55px}
.more-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}
.more-heading h2{font-size:clamp(2.6rem,4.6vw,4.5rem);line-height:1.25}
.more-heading h2>span{padding-left:1.8em}
.carousel-controls{display:flex;gap:12px}
.carousel-controls button{width:44px;height:44px;background:transparent;border:1px solid var(--green);border-radius:50%;font-size:1.25rem;color:var(--green);cursor:pointer}
.carousel-controls button:hover{background:var(--green);color:white}
.carousel-controls button:disabled{opacity:.3;cursor:default;background:transparent;color:var(--green)}
.case-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#b58a8180 transparent;padding-bottom:15px}
.case-card{width:calc((100% - 48px)/3);flex-shrink:0;scroll-snap-align:start;margin:0}
.case-card>div{height:350px;overflow:hidden;background:#dfe3d9}
.case-card img{width:100%;height:100%;object-fit:cover;object-position:center 33%}
.case-card figcaption{padding:18px 0;font-size:1.1rem;line-height:1.6}
.about-section{padding-top:55px}
.closing{background:var(--rose)}
@media(max-width:1024px){.photo-gallery{height:280px}.site-header{padding-inline:24px}.wrap{width:calc(100% - 48px)}.motion-toggle{right:20px;bottom:0;font-size:.7rem}.hero-bottom p{font-size:1.05rem}.story-text{display:block}.story-more{display:inline-block;margin-top:15px}.studio-description{padding:45px 30px}.studio-case{min-height:470px}.case-card>div{height:290px}.work-intro h2{font-size:2.8rem}}
@media(max-width:760px){.site-header{height:64px;padding-inline:16px}.wrap{width:calc(100% - 32px)}.photo-gallery{height:245px}.hero-type{padding-top:0}h1{font-size:clamp(1.8rem,7.7vw,3.8rem);letter-spacing:.01em;line-height:1.45}.hero-bottom{padding:20px 0 30px}.hero-bottom p{font-size:1rem;line-height:1.75}.case-ribbons{padding:20px 0;gap:14px}.ribbon-track,.ribbon-group{gap:16px}.ribbon-group img{width:116px;height:76px}.ribbon-track{animation-name:case-drift-mobile}@keyframes case-drift-mobile{to{transform:translateX(calc(-50% - 8px))}}.work-section{grid-template-columns:1fr;gap:35px;padding-top:50px}.work-intro{position:static}.work-intro h2{font-size:2.5rem}.story-photo.triptych{aspect-ratio:1.8}.story h3{font-size:1.28rem}.story p{font-size:1rem;line-height:1.7}.story-more{font-size:.8rem}.studio-section{grid-template-columns:1fr}.studio-description{padding:45px 20px}.studio-description h2{font-size:2.5rem}.studio-case{height:420px;min-height:0}.studio-case>span{left:20px;bottom:20px}.more-cases{padding-top:50px;padding-bottom:35px}.more-heading h2{font-size:2.3rem}.more-heading h2>span{padding-left:.6em}.carousel-controls{gap:8px}.carousel-controls button{width:38px;height:38px}.case-card{width:78%;max-width:340px}.case-card>div{height:320px}.case-card figcaption{font-size:1rem}.about-section{padding-top:30px}.footer-meta{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none!important}}

/* Frame the source photography without changing or repainting its pixels. */
.case-art{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.ribbon-group>.case-art{flex:none;width:160px;height:100px}
.studio-case>.case-art{align-self:stretch}
@media(max-width:760px){.ribbon-group>.case-art{width:116px;height:76px}}

.footer-meta{flex-wrap:wrap;gap:12px 24px}.footer-meta>a{white-space:nowrap}.footer-meta>a:hover{text-decoration:underline}