/* ==========================================================================
   art.css — 艺术家详情页专用样式
   加载方：Views/Home/Art.cshtml（通过 _ArtistLayout 的 @section Styles）
   关联 CSS：public-core.css（变量 §4.7-4.8）/ public-layout.css §5（子导航）
           public-pages.css §4（ArtArchive/ArtArticle 富文本内容区）
   ========================================================================== */
    body {
        overflow-x: hidden;
    }

    button {
        background-color: transparent;
        border: none;
    }

    .bg {
        background: linear-gradient(to bottom right, var(--artist-grad1), var(--artist-grad2));
        display: list-item;
    }

    #section01 {
        /* 首页大图 */
        width: 100vw;
        height: 100vh;
        position: relative;
        background-image: var(--artist-banner);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -2;
        transition: background-image 600ms cubic-bezier(0.4, 0, 0.2, 1);
        /* 添加过渡动画 */
    }

    #section02 {
        /* 介绍 */
        color: white;
        padding: 5% 0 8vh 0;
        height: auto;
    }

    #section03 {
        /* 作品集 */
        width: 100%;
        height: auto;
        position: relative;
        color: white;
    }

    #section04 {
        /* 展讯 */
        position: relative;
        height: auto;
        color: white;
    }

    #section05 {
        height: 50vh;
        color: white;
    }

    .bgBlack {
        background-color: #00000030;
        width: 100vw;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #img {
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
    }

    .name {
        border: none;
        font-size: 1.3rem;
        margin-bottom: 3vh;
        color: white;
    }

    .introduce {
        position: absolute;
        left: 2%;
        bottom: 5%;
        width: 96%;
        z-index: 10;
        color: white;
        font-size: 3.2rem;
    }

    .introduce a {
        color: white;
        text-decoration: none;
        cursor: grab;
    }

    .introduce li {
        position: relative;
        padding: .6vh 0;
    }

    .hoverLine {
    }

    .hoverLine::before {
        content: "";
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        transition: opacity 100ms ease-in-out;
    }

    .hoverLine:hover::before {
        opacity: 1;
    }

    .hoverLine:hover {
        font-family: 'Szaipa Noto Serif SC', 'Szaipa Noto Serif SC GB', serif !important;
        font-display: swap;
        font-weight: 500;
        font-size: 3rem;
    }

    .arrow-right {
        position: absolute;
        right: 0;
        bottom: -30%;
        transform: translateY(100%) rotate(90deg) !important;
        background-image: url('/content/icon/arrow-right-bottom.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        height: 2.5vh;
        max-height: 60px;
        width: 2vw;
    }

    .moreInfo {
        position: absolute;
        top: .2vh;
        right: 0;
        display: flex;
        font-weight: 300;
        font-family: 'Szaipa Noto Sans SC', 'Szaipa Noto Sans SC GB', sans-serif !important;
        font-size: 1rem;
        opacity: 0;
        transform: translateY(100%);
        transition: all 400ms ease;
    }

    .hoverLine:hover .moreInfo {
        opacity: 1;
        transform: translateY(50%);
    }

    #language {
        position: absolute;
        top: 3%;
        left: 2%;
        color: white;
        font-size: 1rem;
        z-index: 10;
    }

    #language a {
        color: white;
        text-decoration: none;
    }

    #language ul {
        background-color: #00000040;
        padding: 1vh 0;
    }

    #language ul>li {
        padding: .2vh 1vw;
        text-align: center;
        margin-bottom: 1vh;
        position: relative;
    }

    .lang {
        display: flex;
        align-items: center;
        margin-bottom: 1vh;
        cursor: pointer;
    }

    .langopt::before {
        content: "";
        background-color: #00000030;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        transition: opacity 400ms ease-in-out;
    }

    .langopt:hover::before {
        opacity: 1;
    }

    #language .langSwitcher {
        opacity: 0;
        transition: 300ms ease-in-out;
    }

    #language:hover .langSwitcher {
        opacity: 1;
    }

    #switcher img {
        height: 3vh;
        max-height: 1rem;
    }

    /* section02 */

    .fuzhuImg {
        width: 25vw;
        height: 78vh;
        background: url('/content/images/fuzhu-14.png') center;
        opacity: 1;
        margin: 5vh 0;
    }

    .zuopin {
        width: 35vw;
        height: 80vh;
    }

    .portfolio {
        height: 80vh;
        position: absolute;
        left: 0;
        top: 0;
        width: 80vw;
    }

    .touxiang {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10% 0 3% 0;
        width: var(--touxiangW);
    }

    .jieshao {
        white-space: pre-line;
        text-align: center;
        line-height: 1.8em;
        font-size: .9rem;
        overflow: hidden;

        width: var(--touxiangW);
        padding: 0 5em 0 5em;
        /* 2025.11.19 */
    }

    .jieshao h1 {
        font-size: 1.3rem;
        margin: 1em 0;
        line-height: 0;
    }

    /* 年表 */

    .collapsible {
        position: relative;
        color: white;
        cursor: pointer;
        width: 100%;
        padding: 0 0 .5em .3em;
        border-bottom: 1px solid #939393;
        text-align: left;
        outline: none;
        font-size: 1.5rem;
        letter-spacing: .05em;
        font-family: 'dinLightI';
        transition: all 200ms ease-in-out;
    }

    .collapsible:hover {
        background-color: #ffffff30;
        border-radius: 5px;
    }

    .collapsible span {
        position: absolute;
        right: .5em;
    }

    .content {
        max-height: none;
        overflow: hidden;
        transition: max-height 200ms ease-out;
        white-space: pre-line;
        margin-bottom: 2vh;
        padding-left: 2em;
        font-size: .9rem;
        line-height: 1.5em;
        font-weight: 300;
        font-family: 'Szaipa Noto Sans SC', 'Szaipa Noto Sans SC GB', sans-serif;
        z-index: 10;
    }

    .content p {
        margin: 0;
    }

    .arrow02 {
        height: 2.2vh;
        max-height: 40px;
        opacity: .7;
        transform: rotate(90deg);
        transition: all 200ms ease-in-out;
    }

    .defaultActive .arrow02 {
        transform: rotate(180deg);
    }

    .nianbiao {
        padding: 3% 2em 5% 2em;
    }

    .line::before {
        content: "";
        border-right: 1px solid white;
        opacity: .4;
        position: absolute;
        top: 8%;
        bottom: 0;
        left: 0;
        right: 10%;
    }

    .sec02-title {
        margin-bottom: 3em;
    }

    .sec02-title span {
        font-size: 2rem;
    }

    #toggleBtn {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: .9rem;
        color: #ededed;
    }

    #toggleBtn:hover {
        border-bottom: 1px solid white;
    }

    /* 年表结束 */

    .swiper {
        width: 100%;
        height: var(--swiperH);
    }

    .swiper-slide {
        position: relative;
        padding: 3em 5% 3em 5%;
        border-right: 1px solid white;
        z-index: 0;
    }

    .swiper-button-prev,
    .swiper-button-next {
        color: #ededed;
    }

    .swiper-v {
        background: transparent;
    }

    .material {
        font-size: 1.3rem;
        text-align: center;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        top: var(--materialT);
        text-transform: lowercase;
    }

    .swiper-slide a {
        display: block;
        width: 75%;
        height: min(55vh, 32rem);
        position: absolute;
        top: var(--zuopinTop);
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    .swiper-slide a img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .workInfo {
        width: 100%;
        padding: 0 3em 0 5.5em;
        font-size: .9rem;
        text-align: justify;
        line-height: 1.6em;
        position: relative;
    }

    .workInfo h2 {
        margin-bottom: 1.5em;
        font-size: 1.5rem;
    }

    .number {
        position: absolute;
        /* NUMBER的位置要和BLANKSPACE对应 */
        top: 13%;
        left: 3em;
        transform: translate(-50%, -50%);
        background-color: black;
        width: 2em;
        height: 2em;
        border-radius: 100%;
    }

    .number p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'dinLight';
        font-size: 1.2rem;
    }

    .blankspace {
        /* 与NUMBER对应 */
        width: 100%;
        height: var(--blankspaceH);
    }

    .mySwiper3 {
        margin-bottom: 3vh;
    }

    .exhibition {
        height: 83vh;
        width: 100%;
    }

    .exhibition>.swiper-slide {
        border: none;
        height: inherit;
        width: 100%;
        padding: 0;
        overflow: hidden;
    }

    .exhibition>.swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        filter: grayscale(40%) brightness(90%);
        transition: all 0.3s ease-out;
    }

    .exhibition>.swiper-slide img:hover {
        scale: 1.02;
    }

    .mySwiper3>.swiper-pagination>.swiper-pagination-bullet {
        margin-top: 3vh;
        background-color: white;
    }

    .information {
        color: white;
        position: absolute;
        left: 5em;
        bottom: 10em;

        font-size: 1.2rem;
        letter-spacing: .1em;
        font-family: 'smile-core', 'smile';
    }

    .information span {
        font-size: var(--informationHeader);
        width: 30em;

        position: absolute;
        bottom: 1.4em;
        left: 0;
    }

    body .magnify {
        height: 35vh;
    }

    body .magnify > .magnify-lens {
        border: 1px solid white;
    }

@media (max-width: 61.9375em) {
    #ArtistNav a {
        white-space: nowrap;
        word-break: keep-all;
        writing-mode: horizontal-tb;
    }

    .arrow-right {
        right: 0.25rem;
    }

    .information {
        --information-inline-space: clamp(1rem, 5vw, 2rem);

        box-sizing: border-box;
        right: var(--information-inline-space);
        bottom: clamp(2.5rem, 10vh, 5rem);
        left: var(--information-inline-space);
        width: auto;
        max-width: none;
    }

    .information span {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   2026-10-28 艺术家官网手机 / 平板按旧站比例还原
   旧站艺术家页（_Artist.cshtml）没有 viewport meta：手机按 980px 宽排版再整体缩放到屏宽，
   根字号 26px（responsive.css ≤991px），屏幕上 1rem = 26 × 屏宽/980 = 屏宽 × 2.653%。
   新站 initial-scale=1 + 根字号约 15.4px，本页所有 rem 字号因此放大约 1.55 倍（“作品集”77px）。
   这里把根字号设回 2.653vw：任何屏宽下都与旧站显示大小一致（375 宽 ≈ 9.95px）。
   只影响本页（art.css 只由 Art.cshtml 加载）。
   ========================================================================== */
@media (max-width: 61.9375em) {
    html {
        font-size: 2.653vw;
    }

    /* 简介与“艺术家年表”之间的间距：旧 Artist.css 同一档有 .jieshao { margin-bottom: 15% }，迁移时漏了，
       新版两块几乎贴在一起（间距 11px，旧版 67px）。 */
    .jieshao {
        margin-bottom: 15%;
    }

    /* 共享的订阅区与备案号按首页根字号调过；本页根字号不同，按旧站实际大小单独给值
       （标题 2rem、说明 1.2rem、备案 1rem，即 375 宽下 19.9 / 11.9 / 9.9px）。 */
    .emailPosition h1 {
        font-size: 2rem;
    }

    .emailPosition p {
        font-size: 1.2rem;
    }

    .copyrightM {
        font-size: 1rem;
    }
}