.brands-project { background:#000; color:#fff; font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
.brands-project :is(figure,h2,p) { margin:0; }
.brands-project img { display:block; width:100%; height:auto; }
.brands-project button { font:inherit; color:inherit; }
.brand-work { padding-block:110px 140px; }
.brand-work+.brand-work { padding-top:100px; }
.brand-wrap { width:min(86%,1120px); margin-inline:auto; }
.brand-cover { display:block; margin-bottom:90px; }
.brand-intro { display:grid; grid-template-columns:1fr 1.15fr; align-items:start; gap:8vw; margin-bottom:80px; }
.brand-intro h2 { font-size:clamp(36px,3.8vw,66px); font-weight:500; letter-spacing:-.045em; line-height:1.16; }
.brand-copy p { max-width:590px; font-size:18px; line-height:1.9; }
.brand-copy p+p { margin-top:22px; }
.brand-art { --hover-x:50%; --hover-y:50%; position:relative; display:block; width:100%; padding:0; border:0; background:transparent; border-radius:var(--surface-radius); overflow:hidden; }
.brand-art:focus-visible { outline:2px solid #fff; outline-offset:6px; }
.brand-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:40px; }
.brand-nook-system { display:grid; grid-template-columns:12fr 13fr; align-items:stretch; gap:clamp(48px,12vw,150px); width:min(100%,900px); margin:0 auto 110px; }
.brand-norms { display:flex; flex-direction:column; justify-content:space-between; gap:clamp(12px,1.875vw,24px); }
/* Remove the palette's empty rows so its visible bottom aligns with the poster. */
.brand-norms .brand-art:last-child { aspect-ratio:1920/500; }
.brand-norms .brand-art:last-child img { position:absolute; inset-inline:0; top:-59.6%; }
.brand-logo-motion { display:block; width:min(70%,780px); aspect-ratio:1920/702; height:auto; margin:0 auto 100px; object-fit:contain; background:transparent; }
.brand-posters { grid-template-columns:1fr; align-self:start; }
.brand-poster-motion { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; aspect-ratio:1240/1754; }
.brand-application-grid { grid-template-columns:1.15fr 1fr; align-items:center; gap:60px; margin-bottom:100px; }
.brand-application-stack { display:grid; gap:50px; }
.brand-scenes { grid-template-columns:1fr 1fr .68fr; align-items:center; gap:32px; }
.brand-film { width:100%; height:auto; aspect-ratio:16/9; display:block; object-fit:contain; margin-bottom:90px; }
.brand-kuku-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-bottom:90px; }
.brand-labels { width:min(76%,920px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; margin-inline:auto; }
.brand-fruit { display:block; width:min(68%,780px); margin:0 auto 80px; }
.brand-tangping-language { grid-template-columns:1.4fr 1fr; align-items:center; gap:80px; margin-bottom:90px; }
.brand-paper { background:#edeae1; padding:28px; }
.brand-tangping-boxes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; margin-bottom:70px; }
.brand-gifts { gap:40px; }
.brand-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; box-sizing:border-box; padding:70px 60px 80px; border:0; margin:0; background:#000; color:#fff; overflow:hidden; }
.brand-lightbox::backdrop { background:#000; }
.brand-arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff65; border-radius:50%; background:transparent; font-size:22px!important; line-height:1; }
.brand-close { position:absolute; right:24px; top:20px; font-size:30px!important; }
.brand-lightbox-stage { height:100%; display:flex; align-items:center; justify-content:center; }
.brand-lightbox-stage img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.brand-lightbox-stage img.is-on-paper { background:#edeae1; padding:18px; box-sizing:border-box; }
.brand-lightbox-nav { position:absolute; bottom:22px; left:24px; right:24px; display:flex; justify-content:space-between; }
@media (hover:hover) and (pointer:fine) {
  .brand-art::before,.brand-art::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .28s ease; }
  .brand-art::before { z-index:3; background:radial-gradient(240px circle at var(--hover-x) var(--hover-y),#ffffff0d,transparent 75%); }
  .brand-art::after { z-index:4; padding:1px; background:radial-gradient(210px circle at var(--hover-x) var(--hover-y),#ffffffb3,#ffffff30 48%,#ffffff09 85%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; }
  .brand-art:is(:hover,:focus-visible)::before,.brand-art:is(:hover,:focus-visible)::after { opacity:1; }
}
@media (max-width:900px) {
  .brand-kuku-gallery,.brand-tangping-boxes { gap:20px; }
  .brand-intro { gap:5vw; }
  .brand-application-grid,.brand-tangping-language { gap:35px; }
  .brand-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-scenes .brand-art:last-child { width:60%; grid-column:1/-1; justify-self:center; }
}
@media (max-width:600px) {
  .brand-work { padding-block:70px 75px; }
  .brand-work+.brand-work { padding-top:65px; }
  .brand-cover { margin-bottom:55px; }
  .brand-intro { grid-template-columns:1fr; gap:28px; margin-bottom:45px; }
  .brand-copy p { font-size:16px; line-height:1.85; }
  .brand-nook-system { grid-template-columns:1fr; gap:40px; margin-bottom:65px; }
  .brand-norms { width:85%; margin-inline:auto; gap:28px; }
  .brand-logo-motion { width:86%; margin-bottom:60px; }
  .brand-posters { width:min(78%,360px); margin-inline:auto; }
  .brand-application-grid { grid-template-columns:1fr; gap:35px; margin-bottom:65px; }
  .brand-application-stack { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .brand-scenes { gap:20px; }
  .brand-film { margin-bottom:50px; }
  .brand-kuku-gallery { grid-template-columns:1fr; width:90%; margin:0 auto 50px; gap:30px; }
  .brand-labels { width:100%; gap:24px; }
  .brand-fruit { width:85%; margin-bottom:45px; }
  .brand-tangping-language { gap:28px; margin-bottom:55px; }
  .brand-paper { padding:14px; }
  .brand-tangping-boxes { grid-template-columns:1fr; width:85%; margin:0 auto 50px; gap:28px; }
  .brand-gifts { gap:20px; }
  .brand-lightbox { padding:75px 18px 80px; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-art::before,.brand-art::after { transition:none!important; }
}