/* =====================================================================
视频占位体系（.vid-ph）— 全站统一：黄底墨黑三角播放钮
===================================================================== */
.vid-ph {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-dark-ink);
}

.vid-ph__bg {
    position: absolute;
    inset: 0;
    background: var(--color-dark-blue);
    transition: transform .6s ease;
}

.vid-ph--ink .vid-ph__bg {
    background: var(--color-dark-ink);
}

.vid-ph--cool .vid-ph__bg {
    background: var(--color-brand-blue);
}

.vid-ph--deep .vid-ph__bg {
    background: var(--color-brand-blue-deep);
}

.vid-ph--warm .vid-ph__bg {
    background: var(--color-brand-yellow);
}

.vid-ph__grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 44px 44px;
}

.vid-ph__shimmer {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .18), transparent 60%);
    transition: opacity .4s ease;
}

.vid-ph.is-playing .vid-ph__shimmer {
    opacity: 1;
    animation: kenburns 9s ease-in-out infinite alternate;
}

.vid-ph.is-playing .vid-ph__bg {
    animation: kenburns 12s ease-in-out infinite alternate;
}

@keyframes kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.08) translate(-2%, -2%);
    }
}

/* 播放钮：黄底墨黑三角（暖黄底改白底墨黑三角，避免同色边界消失） */
.vid-ph__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, background .2s ease;
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.vid-ph__play svg {
    width: 20px;
    height: 20px;
    fill: var(--color-on-yellow);
    margin-left: 3px;
}

.vid-ph.is-playing .vid-ph__play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
}

.vid-ph--warm .vid-ph__play {
    background: var(--color-white);
}

.vid-ph--warm .vid-ph__play svg {
    fill: var(--color-ink);
}

.vid-ph__pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(10, 10, 10, .7);
    color: #fff;
    font-size: .6875rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    z-index: 3;
    letter-spacing: .02em;
}

.vid-ph__tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    z-index: 3;
    opacity: .9;
    background: rgba(10, 10, 10, .6);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

/* 视频卡（4.2） */
.vcard {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    cursor: pointer;
}

.vcard:hover {
    box-shadow: var(--shadow-float);
    border-color: var(--color-brand-yellow);
}

.vcard__media {
    /* max-width: 23.1rem;
    max-height: 17.3rem; */
    width: 100%;
    position: relative;
    aspect-ratio: 369/206;
    overflow: hidden;
}

.vcard__media .vid-ph__bg {
    transition: transform .4s ease;
}

.vcard:hover .vid-ph__bg {
    transform: scale(1.04);
}

.vcard:hover .vid-ph__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.vcard__body {
    padding: 12px 16px;
}

.vcard__body h4 {
    margin-bottom: 4px;
}

.vcard__body .small {
    color: var(--color-text-secondary);
}


/* =====================================================================
② 首页全屏首屏 — 顶导之外占满 PC 屏 · 黄屏轮播 + 蓝搜索条 + 6 圆形图标
整体高度 = 100vh - 导航高(64px)，三段 flex 分配
===================================================================== */
.indexBannerSwiper {
    max-width: 1920px;
}

.indexBannerSwiper .swiper-slide {
    /*height: 780px;*/
    /*min-height: 400px;*/
    background: #fff;
    color: #fff;
}

.indexBannerSwiper .swiper-slide img {
    width: 100%;
    margin: 0px auto;
}

/* 响应式：PC 专用 · 不做手机端 */

/* =====================================================================
③ 蓝色搜索条（电光蓝全宽 · 左搜索框 · 右品牌字）— 紧凑型
===================================================================== */
.searchbar {
    background: var(--color-brand-blue);
    color: var(--color-on-blue);
    flex: 0 0 auto;
}

.searchbar__inner {
    max-width: 1320px;
    margin-inline: auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.searchbar__form {
    flex: 1;
    max-width: 560px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 999px;
    padding: 4px 16px;
    color: var(--color-text-primary);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.searchbar__form svg.s-icon {
    width: 16px;
    height: 16px;
    stroke: var(--color-text-secondary);
    stroke-width: 2.2;
    fill: none;
    flex: 0 0 auto;
}

.searchbar__form input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: .9rem;
    color: var(--color-text-primary);
    font-family: inherit;
    min-width: 0;
    padding: 4px 0;
}

.searchbar__form input::placeholder {
    color: var(--color-text-tertiary);
}

.searchbar__form button {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 0;
    flex: 0 0 auto;
}

.searchbar__form button:hover {
    background: var(--color-bg-soft);
}

.searchbar__brand {
    font-family: var(--font-english);
    font-weight: 900;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    letter-spacing: .18em;
    color: #fff;
    margin-left: auto;
    white-space: nowrap;
}

.indexBannerSwiper_m {
    display: none;
}

@media (max-width: 1023px) {
    .indexBannerSwiper {
        display: none;
    }

    .indexBannerSwiper_m {
        display: block;
    }

    .indexBannerSwiper_m .swiper-slide {
        /*height: 675px;*/
    }

    .indexBannerSwiper_m .swiper-slide img {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .searchbar__brand {
        display: none;
    }
}

/* PC 专用：不做移动端 */

/* =====================================================================
④ 一排圆形图标导航（6 个 · 跳转下一页 · 白底发丝胶囊标签）— 紧凑型
===================================================================== */
.iconrail {
    background: #fff;
    padding: 10px 0 16px;
    flex: 0 0 auto;
}

.iconrail__inner {
    max-width: 1320px;
    margin-inline: auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.iconrail__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: transform .2s ease;
    font-family: inherit;
}

.iconrail__btn:hover {
    transform: translateY(-3px);
}

.iconrail__circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    display: grid;
    place-items: center;
    border: 2px solid var(--color-border);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    color: var(--color-brand-blue);
    background-size: 40% !important;
}

.iconrail__btn:hover .iconrail__circle {
    border-color: var(--color-brand-yellow);
    background: #fff;
    box-shadow: 0 4px 14px rgba(245, 216, 0, .35);
}

.iconrail__circle svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.iconrail .iconrail__inner a.display_m {
    display: none;
}

.iconrail .iconrail__inner a.icon01 .iconrail__circle {
    background: url(../img/index_icon01.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon02 .iconrail__circle {
    background: url(../img/index_icon02.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon03 .iconrail__circle {
    background: url(../img/index_icon03.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon04 .iconrail__circle {
    background: url(../img/index_icon04.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon05 .iconrail__circle {
    background: url(../img/index_icon05.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon06 .iconrail__circle {
    background: url(../img/index_icon06.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon07 .iconrail__circle {
    background: url(../img/index_icon07.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon08 .iconrail__circle {
    background: url(../img/index_icon08.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon01:hover .iconrail__circle {
    background: url(../img/index_icon01_h.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon02:hover .iconrail__circle {
    background: url(../img/index_icon02_h.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon03:hover .iconrail__circle {
    background: url(../img/index_icon03_h.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon04:hover .iconrail__circle {
    background: url(../img/index_icon04_h.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon05:hover .iconrail__circle {
    background: url(../img/index_icon05_h.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon06:hover .iconrail__circle {
    background: url(../img/index_icon06_h.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon07:hover .iconrail__circle {
    background: url(../img/index_icon07_h.png) no-repeat center center var(--color-bg-soft);
}

.iconrail .iconrail__inner a.icon08:hover .iconrail__circle {
    background: url(../img/index_icon08_h.png) no-repeat center center var(--color-bg-soft);
}

/* ===== iconrail 标签 · 去贴纸感（白底发丝描边胶囊 · hover 转黄柔光+安全黄字） ===== */
.iconrail__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--color-text-heading);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    box-shadow: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.iconrail__btn:hover .iconrail__label {
    color: var(--color-brand-yellow-text);
    border-color: var(--color-brand-yellow);
    background: var(--color-bg-yellow-soft);
    box-shadow: none;
    transform: none;
}

.iconrail__btn:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
    border-radius: var(--radius-card-sm);
}

/* 响应式：≥1024 六列（现状保留）；768–1023 三列；<768 两列 + 圆片/标签微缩 */
@media (max-width: 1023px) {
    .iconrail .iconrail__inner a.display_m {
        display: flex;
    }

    .iconrail__inner {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .iconrail__btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--color-bg-soft);
        border: 1px solid transparent;
        border-radius: 10px;
        padding: 14px 4px 12px;
        cursor: pointer;
        font-family: inherit;
        transition: background .18s ease, border-color .18s ease;
    }

    .iconrail__circle {
        display: inline-grid;
        place-items: center;
        width: 1.625rem;
        height: 1.625rem;
        color: var(--color-brand-blue);
        border: 0px;
        background-size: 100% !important;
    }

    .iconrail__label {
        font-family: var(--font-heading);
        font-size: .8rem;
        font-weight: 700;
        color: var(--color-text-heading);
        white-space: nowrap;
        padding: 0px;
        background: none;
        border: 0px;
    }
}

@media (max-width: 767px) {
    /* .iconrail__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    } */
    /* .iconrail__circle {
        width: 56px;
        height: 56px;
    }

    .iconrail__circle svg {
        width: 26px;
        height: 26px;
    } */
    /* .iconrail__label {
        font-size: .75rem;
        padding: 2px 10px;
    } */
}

/* =====================================================================
④ 最新资讯 —— 占满 PC 一屏 · 左分类竖标签 + 右横向列表（视频+文字）
===================================================================== */
.news {
    background: var(--color-white);
    /*min-height: calc(100vh - 64px);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 32px;
}

.news .container {
    width: 100%;
}

.news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.news__head .title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eyebrow {
    font-family: var(--font-english);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
}

.news__head h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    color: var(--color-ink);
    letter-spacing: -.01em;
    margin: 0;
}

.news__layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px;
    align-items: start;
}

/* 左侧分类竖标签（去掉数字 badge） */
.news__cats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-card);
    padding: 12px;
    border: 1px solid var(--color-border);
    align-self: start;
    margin-top: 15px;
}

.news__cats .cat-title {
    font-family: var(--font-english);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 6px 10px 4px;
}

.cat-tab {
    flex: 0 0 auto;
    padding: 11px 12px;
    border-radius: var(--radius-card-sm);
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    display: block;
    width: 100%;
}

.cat-tab:hover {
    background: #fff;
    color: var(--color-ink);
}

.cat-tab.is-active {
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
    font-weight: 800;
    box-shadow: 2px 2px 0 var(--color-ink);
}

/* 右侧：横向列表（视频+文字）· 圆润圆角处理 */
.new_list_box {
    /* width: 100%; */
    overflow: hidden;
    padding: 15px;
}

.news__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news__list .tab-cont {
    display: none;
}

.news__list .tab-cont.active {
    display: block;
}

.ncard {
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    align-items: stretch;
    min-height: 118px;
    height: 120px;
    margin-bottom: 5px;
}

.ncard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float);
    border-color: var(--color-brand-yellow);
}

/* 视频封面在左：横向公众号首图 2.35:1 + 圆润圆角 */
.ncard__media {
    flex: 0 0 17.5rem;
    max-width: 17.5rem;
    max-height: 7.5rem;
    width: 100%;
    aspect-ratio: 280 / 120;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-soft);
    border-radius: 0;
}

.ncard__media .vid-ph {
    aspect-ratio: 2.35/1;
    height: 100%;
    min-height: 118px;
    border-radius: 0;
}

.ncard__media .vid-ph__cap {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-family: var(--font-english);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 3px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* 文字版（艺考新闻 纯文字）*/
.ncard--text {
    background: var(--color-bg-soft);
    justify-content: center;
}

.ncard--text .ncard__media {
    display: none;
}

.ncard__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 22px 10px 18px;
    position: relative;
    justify-content: center;
    min-width: 0;
}

/* 顶部 meta 小字 */
.ncard__body .small-meta {
    font-size: .6rem;
    font-family: var(--font-english);
    color: var(--color-text-tertiary);
    margin-bottom: 6px;
    letter-spacing: .1em;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
}

/* 主标题：大字、清晰 */
.ncard__body h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.32;
    color: var(--color-ink);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 副标题（内容摘要） */
.ncard__body p {
    font-size: .8rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 右下角 meta 区：日期 + 了解详情同行，垂直间距不冲突 */
.ncard__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-right: 4px;
}

.ncard__date {
    font-size: .7rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    font-family: var(--font-english);
    opacity: .7;
}

.ncard__action {
    font-size: .78rem;
    font-weight: 800;
    color: var(--color-brand-blue);
    text-decoration: none;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.ncard__action::after {
    content: "›";
    font-size: 1.1em;
    line-height: 1;
    transition: transform .18s ease;
    font-weight: 900;
}

.ncard:hover .ncard__action::after {
    transform: translateX(3px);
}

.ncard:hover .ncard__action {
    color: var(--color-brand-blue-hover);
}

/* 更多按钮行 */
.news__more {
    margin-top: 16px;
    text-align: right;
}

.news__more .link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
    font-size: .8125rem;
    font-weight: 800;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    transition: background .15s ease, transform .15s ease;
    border: 1.5px solid var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    text-decoration: none;
}

.news__more .link-more:hover {
    background: var(--color-brand-yellow-hover);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--color-ink);
}

.news__more .link-more svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
}

/* 响应式：≥1024 六列（现状保留）；768–1023 三列；<768 两列 + 圆片/标签微缩 */
@media (max-width: 1023px) {
    .news__layout {
        display: block;
    }

    .news__cats {
        flex-direction: row;
        margin-bottom: 15px;
    }

    .news__cats .cat-title {
        display: none;
    }

    .cat-tab {
        flex: auto;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .news__cats {
        flex-wrap: wrap;
    }

    .cat-tab {
        width: 30%;
    }

    .ncard {
        flex-direction: column;
        height: auto;
        min-height: initial;
    }

    .ncard__media {
        max-height: initial;
        max-width: initial;
        flex: initial;
    }
}

/* =====================================================================
⑤ 东昱在线（浅灰区 · 3×2 视频网格 + 热门视频列表）
===================================================================== */
.online {
    background: var(--color-bg-soft);
    position: relative;
}

.online__videos {
    position: relative;
}

/* 3×2 视频网格 —— PC 端一屏 3 列 × 2 行整齐排布 */
.online__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    padding: 6px 0 14px 0;
}

/* 平板：2 列 × 3 行 */
@media (max-width: 900px) {
    .online__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 移动端：1 列纵向 */
@media (max-width: 560px) {
    .online__grid {
        grid-template-columns: 1fr;
    }
}

/* 东昱在线 — 热门视频列表（替换原黄底大 CTA Banner · 圆角卡 + 2 列 × 4 行 · 编号 + 标题 + 火苗 + 日期） */
.online__list {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: var(--space-6);
}

.hot-list {
    display: flex;
    flex-direction: column;
}

.hot-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: linear-gradient(180deg, rgba(255, 224, 0, .07), transparent);
    border-bottom: 1px solid var(--color-border);
}

.hot-list__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--color-ink);
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hot-list__title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 18px;
    background: var(--color-brand-yellow);
    border-radius: 3px;
}

.hot-list__title .h-en {
    font-family: var(--font-english);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-left: 2px;
}

.hot-list__more {
    font-family: var(--font-english);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1.5px solid var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    transition: background .15s ease, color .15s ease, gap .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hot-list__more:hover {
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
    gap: 9px;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--color-ink);
}

.hot-list__more svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 主体：桌面 4 列 / 平板 2 列 / 手机 1 列 grid，8 条视频正好 4×2 */
.hot-list__body {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
}

.hot-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.hot-row:hover {
    border-color: var(--color-brand-yellow);
    box-shadow: var(--shadow-float);
    transform: translateY(-3px);
}

.hot-row__media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.hot-row__media .vid-ph__bg {
    transition: transform .4s ease;
}

.hot-row:hover .vid-ph__bg {
    transform: scale(1.04);
}

.hot-row__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px 12px;
}

.hot-row__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .875rem;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
    min-width: 0;
    line-height: 1.4;
}

.hot-row:hover .hot-row__title {
    color: var(--color-ink);
}

.hot-row__date {
    font-family: var(--font-english);
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
    .hot-list__body {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hot-list__body {
        grid-template-columns:1fr;
    }
}

/* =====================================================================
⑥ 东昱画室 · 名师天团（暖黄 overlay 8% · 两级 tab 导航 + 卡片网格）
===================================================================== */
.teachers {
    position: relative;
    background: var(--color-white);
}

.teachers::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-yellow-teacher);
    pointer-events: none;
}

.teachers .container {
    position: relative;
    z-index: 1;
}

/* 头部 —— 仿"厚一学堂·师资队伍"参考图：
行 1：左标题 + 右斜体引言
行 2：[左 tab 列表] ............ [右 更多教师按钮]
行 3：二级细分 tab（紧贴卡片上方）
*/
.teachers__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    align-items: flex-start;
}

.teachers__nav-left {
    display: block;
    min-width: 0;
    max-width: 780px;
}

.teachers__nav .lead {
    margin-top: 6px;
    font-size: 1rem;
}

/* 行 2：tab 列表 + 更多教师按钮 */
.teachers__filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    width: 100%;
}

.teachers__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-ink);
    text-decoration: none;
    padding: 8px 22px;
    border: 1.5px solid var(--color-ink);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    box-shadow: 2px 2px 0 var(--color-ink);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
}

.teachers__more:hover {
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--color-ink);
}

/* 行 3：二级 tab（紧贴卡片上方） */
.teachers__sub-wrap {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .32s ease, opacity .24s ease;
    width: 100%;
}

.teachers__sub-wrap.is-open {
    max-height: 80px;
    opacity: 1;
}

.teachers__tabs,
.teachers__tabs-sub {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.2;
    white-space: nowrap;
}

/* 缩小 tab 字体 — 与主标题区隔开 */
.teachers__tabs {
    font-size: 1.15rem;
}

.teachers__tabs-sub {
    font-size: .88rem;
    color: var(--color-text-tertiary);
}

.teachers__tab {
    position: relative;
    padding: 4px 14px;
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: none;
    font: inherit;
    letter-spacing: .02em;
    transition: color .15s ease, font-weight .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.teachers__tab + .teachers__tab {
    border-left: 1px solid var(--color-border-strong, rgba(0, 0, 0, .18));
}

.teachers__tab:hover {
    color: var(--color-ink);
}

.teachers__tab.is-active {
    color: var(--color-ink);
    font-weight: 800;
}

.teachers__tab.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 3px;
    background: var(--color-ink);
    border-radius: 2px 2px 0 0;
}

.teacher.is-hidden {
    display: none !important;
}

/* 教师网格 — 教学部 4×2；校长 3 列 */
.teacher-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.teacher-grid.is-president {
    grid-template-columns: repeat(3, 1fr);
}

.teacher-grid.is-president .teacher__avatar {
    flex: 0 0 190px;
    height: 190px;
}

.teacher-grid.is-president .teacher {
    padding: 14px;
}

@media (max-width: 1024px) {

    .teacher-grid,
    .teacher-grid.is-president {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .teacher-grid,
    .teacher-grid.is-president {
        grid-template-columns: repeat(1, 1fr);
    }

    .teachers__more {
        font-size: .75rem;
        padding: 4px 10px;
        display: none;
    }
}

.teacher {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 12px;
    display: flex;
    flex-direction: column;
    /*cursor: pointer;*/
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.teacher:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
    border-color: var(--color-brand-yellow);
}

.teacher__avatar {
    position: relative;
    flex: 0 0 11.81rem;
    /* width: 15.75rem;
    height: 11.81rem; */
    aspect-ratio: 252/189;
    border-radius: var(--radius-card-sm);
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--color-bg-soft);
}

.teacher__avatar .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: var(--shadow-card);
}

.teacher:hover .play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.teacher__avatar .play svg {
    width: 16px;
    height: 16px;
    fill: var(--color-on-yellow);
    margin-left: 2px;
}

/* 名字 + 角色行（含"老师介绍视频"按钮） */
.teacher__role-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

.teacher__name {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--color-text-heading);
    line-height: 1.3;
}

.teacher__role {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--color-brand-blue-deep);
    background: var(--color-brand-blue-light);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin: 0;
}

/* 老师介绍视频按钮（深蓝底 + 浅黄三角 + 白字） */
.teacher__video-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-brand-blue-deep);
    border: 1px solid var(--color-brand-blue-deep);
    padding: 3px 9px 3px 7px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.teacher__video-btn:hover {
    background: #0d1d3a;
    border-color: #0d1d3a;
}

.teacher__video-btn:active {
    transform: scale(.96);
}

.teacher__video-btn svg {
    width: 8px;
    height: 8px;
    fill: currentColor;
    margin-top: -1px;
}

.teacher__meta {
    font-size: .78rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.teacher__detail {
    margin-top: auto;
    padding-top: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-brand-blue);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.teacher__detail svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
}

/* =====================================================================
⑦ 东昱画室 · 招生简章（4 张 2×2 圆角 banner · 紧凑一屏版）
===================================================================== */
/* admissions 整体：不强制一屏 min-height，padding 收紧 */
.admissions {
    padding-block: var(--space-5);
}

.admissions .section-head {
    margin-bottom: var(--space-3);
    max-width: 680px;
}

.admissions .section-head .h1 {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.admissions .section-head .lead {
    font-size: .85rem;
    margin-top: 4px;
}

/* 招生简章容器：4 张 2×2 banner */
.brochure-section {
    padding-block: var(--space-3);
    margin-top: var(--space-3);
}

.brochure-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .brochure-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

/* 单张简章 banner —— 紧凑版：aspect 16/4.5（高 ~170px）+ padding 14×18 */
.brochure {
    position: relative;
    aspect-ratio: 16/4.6;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1.5px solid var(--color-ink);
    background: var(--color-brand-blue-deep);
    color: var(--color-white);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), box-shadow .25s ease, border-color .2s ease;
}

.brochure:hover {
    transform: translateY(-3px);
    box-shadow: 4px 4px 0 var(--color-ink);
    border-color: var(--color-ink);
}

/* 不同索引使用不同主色 —— 蓝调家族 */
.brochure--1 {
    background: linear-gradient(135deg, #1a2c8c 0%, #10246B 60%, #0a1a4a 100%);
}

.brochure--2 {
    background: linear-gradient(135deg, #10246B 0%, #0a1a4a 60%, #1a2c8c 100%);
}

.brochure--3 {
    background: linear-gradient(135deg, #0a1a4a 0%, #10246B 60%, #1a2c8c 100%);
}

.brochure--4 {
    background: linear-gradient(135deg, #1a2c8c 0%, #0a1a4a 100%);
}

/* 右上品牌标签 —— 等宽全大写 · 紧凑 */
.brochure__brand {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 3;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: .72rem;
    letter-spacing: .14em;
    color: var(--color-white);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
    background: linear-gradient(180deg, transparent 0 70%, var(--color-brand-yellow) 70% 100%);
    padding: 0 3px;
}

/* 左上序号 01/02/03/04 —— 描边大字 · 紧凑 */
.brochure__num {
    position: absolute;
    top: 8px;
    left: 14px;
    z-index: 3;
    font-family: var(--font-number);
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: .04em;
    color: var(--color-brand-yellow);
    -webkit-text-stroke: 1px var(--color-white);
    text-stroke: 1px var(--color-white);
    text-shadow: 0 0 0 transparent;
}

/* 中部标题区 —— 紧凑 */
.brochure__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-right: 8%;
}

.brochure__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-brand-yellow);
}

.brochure__eyebrow::before {
    content: "";
    width: 14px;
    height: 1.5px;
    background: var(--color-brand-yellow);
}

.brochure__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(.9rem, 1.35vw, 1.25rem);
    line-height: 1.18;
    color: var(--color-white);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}

.brochure__title b {
    display: block;
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    color: var(--color-white);
    font-weight: 900;
    margin-top: 1px;
}

.brochure__sub {
    font-size: .7rem;
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
    max-width: 90%;
    line-height: 1.4;
    margin: 0;
}

/* 右下梯形黄块 —— 紧凑 */
.brochure__join {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
    padding: 5px 10px 5px 9px;
    border-radius: 10px 0 var(--radius-card) 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .6rem;
    letter-spacing: .04em;
    border-top: 1.5px solid var(--color-ink);
    border-left: 1.5px solid var(--color-ink);
}

.brochure__join .tri {
    font-size: .7rem;
    line-height: 1;
    opacity: .7;
}

/* 左下小元数据 · 招生对象 + 日期 —— 紧凑 */
.brochure__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .6rem;
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
    letter-spacing: .02em;
}

.brochure__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.brochure__meta span::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
}

.brochure__meta b {
    font-weight: 800;
    color: var(--color-white);
}

/* hover 时右下角黄色块微微放大，强化"点击进入"暗示 */
.brochure:hover .brochure__join {
    background: var(--color-brand-yellow-hover);
}

.brochure:active {
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 var(--color-ink);
}

/* 响应式：单卡变矮（去掉高 aspect，保内容可见） */
@media (max-width: 767px) {
    .brochure {
        aspect-ratio: auto;
        min-height: 170px;
        padding: 14px 16px;
    }

    .brochure__main {
        padding-right: 0;
    }
}

/* =====================================================================
⑧ 东昱画室 · 班型介绍（4 卡 · 紧凑一屏版 · 顶部视频缩略图 + 描述 · 移除价格/报名按钮）
===================================================================== */
.courses-wrap {
    padding-top: var(--space-3);
}

@media (min-width: 1024px) {
    .courses-wrap {
        padding-top: var(--space-4);
    }
}

.courses-wrap .section-head {
    margin-bottom: var(--space-3);
    max-width: 680px;
}

.courses-wrap .section-head .h1 {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.courses-wrap .section-head .lead {
    font-size: .85rem;
    margin-top: 4px;
}

.course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .course-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.course {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    transform-style: preserve-3d;
    will-change: transform;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.course.is-selected {
    border-color: var(--color-brand-yellow);
    box-shadow: 0 0 0 2px var(--color-brand-yellow), var(--shadow-float);
}

.course__media {
    position: relative;
    /* width: 280px;
    height: 120px; */
    aspect-ratio: 503/298;
    overflow: hidden;
}

.course__media .vid-ph__bg {
    transition: transform .4s ease;
}

@media (min-width: 1024px) {
    .course:hover .vid-ph__bg {
        transform: scale(1.04);
    }
}

.course__body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course__tag {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-brand-blue-deep);
    background: var(--color-brand-blue-light);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    margin-bottom: 6px;
    align-self: flex-start;
}

.course__body h4 {
    margin-bottom: 3px;
    color: var(--color-text-heading);
    font-size: .92rem;
}

.course__pitch {
    font-size: .72rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.course__meta {
    display: grid;
    gap: 3px;
    font-size: .7rem;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
    padding-top: 6px;
    margin-top: auto;
}

.course__meta b {
    color: var(--color-text-primary);
    font-weight: 700;
}

/* 班型方向切换（全国 / 浙江 / 校考定向）— 切换形式复用「名师天团」tab 组件 */
.course-scope {
    margin-top: var(--space-4);
}

.course-scope__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-bottom: var(--space-3);
    width: 100%;
}

.course-scope__tabs {
    font-size: 1.05rem;
}

.course-scope__lead {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    letter-spacing: .02em;
}

.course.is-hidden {
    display: none !important;
}

/* =====================================================================
⑧ 东昱画室 · 校园环境（暖黄 overlay 5% · 视频/图片网格 + 360 全景 + 随手拍画廊）
===================================================================== */
.campus {
    position: relative;
    background: var(--color-white);
}

.campus::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-yellow-campus);
    pointer-events: none;
}

.campus .container {
    position: relative;
    z-index: 1;
}


/* =====================================================================
⑨b 学员风采 · 老师随手拍（竖屏小视频横向滑动 · 一屏内）
===================================================================== */
.snap {
    padding-block: var(--space-4);
}

.snap .section-head {
    margin-bottom: 10px;
}

.snap .section-head .h1 {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.snap .section-head .lead {
    font-size: .8125rem;
    margin-top: 4px;
}

.snap-divider {
    height: 1px;
    background: var(--color-border);
    margin: 12px 0;
}

.snap__gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 4px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.snap__gallery::-webkit-scrollbar {
    display: none;
}

.snap__gallery.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.snap__card {
    flex: 0 0 168px;
    scroll-snap-align: start;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    cursor: pointer;
}

.snap__card:hover {
    box-shadow: var(--shadow-float);
    transform: translateY(-3px);
    border-color: var(--color-brand-yellow);
}

.snap__media {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.snap__media .vid-ph__bg {
    transition: transform .4s ease;
}

.snap__card:hover .vid-ph__bg {
    transform: scale(1.04);
}

.snap__card:hover .vid-ph__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.snap__body {
    padding: 8px 12px;
}

.snap__body h4 {
    font-size: .8125rem;
    margin-bottom: 2px;
    color: var(--color-text-heading);
}

.snap__body .small {
    font-size: .7rem;
    color: var(--color-text-secondary);
}

.snap__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: .75rem;
    margin-top: 6px;
}

.snap__hint svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* =====================================================================
⑨ 东昱画室 · 学员访谈（左侧学员列表 + 右侧主播放器）
===================================================================== */
.interview {
    padding-block: var(--space-5);
}

.interview .section-head {
    margin-bottom: 12px;

}

.interview .section-head .h1 {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.interview .section-head .lead {
    display: block;
    font-size: .8125rem;
    margin-top: 4px;
}

.interview__layout {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 1024px) {
    .interview__layout {
        grid-template-columns: 350px 1fr;
        gap: var(--space-6);
    }
    .interview .section-head {
        max-width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
}

@media (max-width: 1023px) {
    .interview__layout .player {
        display: none;
    }
}

.interview__list {
    display: grid;
    gap: 8px;
    align-content: start;
}

.ilist {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    cursor: pointer;
    text-align: left;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
    opacity: .55;
}

.ilist:hover {
    transform: translateX(3px);
    opacity: 1;
}

.ilist.is-active {
    background: var(--color-brand-yellow);
    border-color: var(--color-brand-yellow);
    opacity: 1;
}


.ilist__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}

.ilist.is-active .ilist__avatar {
    border-color: var(--color-ink);
}

.ilist__body {
    min-width: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
}

.ilist__name {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--color-text-heading);
}

.ilist.is-active .ilist__name {
    color: var(--color-ink);
}

.ilist__school {
    font-size: .75rem;
    color: var(--color-text-secondary);
}

.ilist.is-active .ilist__school {
    color: var(--color-ink);
    opacity: .75;
}

.ilist__vt {
    font-size: .75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ilist.is-active .ilist__vt {
    color: var(--color-ink);
    opacity: .65;
}
@media (max-width: 1023px) {
    .ilist.is-active{
        background: none;
        opacity: .55;
        border-color: var(--color-border);
    }
    .ilist.is-active .ilist__avatar{
        border: 0px;
    }
}

.player__media {
    width: 100%;
    /* max-width: 51.62rem;
    max-height: 38.75rem; */
    position: relative;
    aspect-ratio: 776 / 437;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

.player__cap {
    margin-top: 10px;
}

.player__cap h3 {
    font-size: 1.25rem;
    color: var(--color-text-heading);
}

.player__cap .small {
    font-size: .8125rem;
    color: var(--color-text-secondary);
}

.player__desc {
    background: var(--color-bg-yellow-soft);
    border-radius: var(--radius-card);
    padding: 12px 16px;
    margin-top: 10px;
}

.player__desc h4 {
    color: var(--color-ink);
    font-size: .875rem;
    margin-bottom: 4px;
}

.player__desc p {
    color: var(--color-text-primary);
    font-size: .8125rem;
    line-height: 1.5;
}

/* =====================================================================
⑨c 艺考演播室 + 作品展示（左5分类tab视频列表 + 右两级tab作品网格 · 一屏内）
===================================================================== */
/*.studio {*/
/*    padding-block: var(--space-4);*/
/*    min-height: calc(100vh - 80px);*/
/*}*/

/*.studio__layout {*/
/*    display: grid;*/
/*    gap: var(--space-5);*/
/*}*/

/*@media (min-width: 1024px) {*/
/*    .studio__layout {*/
/*        grid-template-columns: 50% 50%;*/
/*        gap: var(--space-6);*/
/*        align-items: start;*/
/*    }*/
/*}*/

/*.studio__col {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    min-height: 0;*/
/*}*/

/*.studio__col .section-head {*/
/*    margin-bottom: var(--space-3);*/
/*}*/

/*.studio__col .section-head .eyebrow {*/
/*    margin-bottom: var(--space-3);*/
/*    font-size: .75rem;*/
/*    letter-spacing: .32em;*/
/*}*/

/*.studio__col .section-head .h1 {*/
/*    font-size: clamp(1.75rem, 2.4vw, 2.25rem);*/
/*    font-weight: 800;*/
/*    margin-bottom: var(--space-3);*/
/*}*/

/*.studio__col .section-head .lead {*/
/*    font-size: .9375rem;*/
/*    margin-top: var(--space-3);*/
/*    color: var(--color-text-secondary);*/
/*}*/

/*!* 左：艺考演播室 — tab 列表（仿名师天团 .teachers__tabs 样式） *!*/
/*.studio__tabs {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*    font-family: var(--font-heading);*/
/*    font-weight: 600;*/
/*    color: var(--color-text-secondary);*/
/*    line-height: 1.2;*/
/*    white-space: nowrap;*/
/*    font-size: 1.05rem;*/
/*    border-top: 1px solid var(--color-border);*/
/*    padding-top: var(--space-3);*/
/*    margin-bottom: var(--space-3);*/
/*}*/

/*.studio__tab {*/
/*    position: relative;*/
/*    padding: 4px 14px;*/
/*    cursor: pointer;*/
/*    color: inherit;*/
/*    background: transparent;*/
/*    border: none;*/
/*    font: inherit;*/
/*    letter-spacing: .02em;*/
/*    transition: color .15s ease, font-weight .15s ease;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 0;*/
/*}*/

/*.studio__tab + .studio__tab {*/
/*    border-left: 1px solid rgba(0, 0, 0, .18);*/
/*}*/

/*.studio__tab:hover {*/
/*    color: var(--color-ink);*/
/*}*/

/*.studio__tab.is-active {*/
/*    color: var(--color-ink);*/
/*    font-weight: 800;*/
/*}*/

/*.studio__tab.is-active::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 14px;*/
/*    right: 14px;*/
/*    bottom: -1px;*/
/*    height: 3px;*/
/*    background: var(--color-ink);*/
/*    border-radius: 2px 2px 0 0;*/
/*}*/

/*.studio__list {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 8px;*/
/*    flex: 1;*/
/*    !* overflow-y: auto; *!*/
/*}*/

/*.studio__pane {*/
/*    display: none;*/
/*    flex-direction: column;*/
/*    gap: 8px;*/
/*    flex: 1;*/
/*}*/

/*.studio__pane.is-active {*/
/*    display: flex;*/
/*}*/

/*.studio__item {*/
/*    display: flex;*/
/*    gap: 12px;*/
/*    align-items: center;*/
/*    padding: 10px 14px;*/
/*    border-radius: var(--radius-card);*/
/*    border: 1px solid var(--color-border);*/
/*    background: var(--color-white);*/
/*    cursor: pointer;*/
/*    text-align: left;*/
/*    transition: background .2s ease, border-color .2s ease, transform .2s ease;*/
/*    opacity: .6;*/
/*}*/

/*.studio__item:hover {*/
/*    transform: translateX(3px);*/
/*    opacity: 1;*/
/*    border-color: var(--color-brand-yellow);*/
/*}*/

/*.studio__item-num {*/
/*    display: inline-grid;*/
/*    place-items: center;*/
/*    width: 35px;*/
/*    height: 35px;*/
/*    overflow: hidden;*/
/*    background: var(--color-brand-blue);*/
/*    color: #fff;*/
/*    font-family: var(--font-number);*/
/*    font-weight: 900;*/
/*    font-size: .75rem;*/
/*    line-height: 1;*/
/*    border-radius: 6px;*/
/*    flex-shrink: 0;*/
/*    font-variant-numeric: tabular-nums;*/
/*}*/

/*.studio__item-body {*/
/*    min-width: 0;*/
/*    flex: 1;*/
/*}*/

/*.studio__item-title {*/
/*    font-weight: 700;*/
/*    font-size: .875rem;*/
/*    color: var(--color-text-heading);*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*}*/

/*.studio__item-sub {*/
/*    font-size: .75rem;*/
/*    color: var(--color-text-secondary);*/
/*    margin-top: 1px;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*}*/

/*.studio__item-play {*/
/*    width: 32px;*/
/*    height: 32px;*/
/*    border-radius: 50%;*/
/*    background: var(--color-brand-blue-deep);*/
/*    display: grid;*/
/*    place-items: center;*/
/*    flex: 0 0 auto;*/
/*    transition: transform .2s ease;*/
/*}*/

/*.studio__item:hover .studio__item-play {*/
/*    transform: scale(1.08);*/
/*}*/

/*.studio__item-play svg {*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    fill: #fff;*/
/*    margin-left: 2px;*/
/*}*/

/*!* 右：作品展示 — 两级 tab（学生作品/老师作品 + 素描/速写/色彩） *!*/
/*.work__tabs-main {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*    font-family: var(--font-heading);*/
/*    font-weight: 600;*/
/*    color: var(--color-text-secondary);*/
/*    line-height: 1.2;*/
/*    white-space: nowrap;*/
/*    font-size: 1.05rem;*/
/*    border-top: 1px solid var(--color-border);*/
/*    padding-top: var(--space-3);*/
/*    margin-bottom: var(--space-2);*/
/*}*/

/*.work__tab-main {*/
/*    position: relative;*/
/*    padding: 4px 14px;*/
/*    cursor: pointer;*/
/*    color: inherit;*/
/*    background: transparent;*/
/*    border: none;*/
/*    font: inherit;*/
/*    letter-spacing: .02em;*/
/*    transition: color .15s ease, font-weight .15s ease;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 0;*/
/*}*/

/*.work__tab-main + .work__tab-main {*/
/*    border-left: 1px solid rgba(0, 0, 0, .18);*/
/*}*/

/*.work__tab-main:hover {*/
/*    color: var(--color-ink);*/
/*}*/

/*.work__tab-main.is-active {*/
/*    color: var(--color-ink);*/
/*    font-weight: 800;*/
/*}*/

/*.work__tab-main.is-active::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 14px;*/
/*    right: 14px;*/
/*    bottom: -1px;*/
/*    height: 3px;*/
/*    background: var(--color-ink);*/
/*    border-radius: 2px 2px 0 0;*/
/*}*/

/*.work__tabs-sub {*/
/*    display: none;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*    font-family: var(--font-heading);*/
/*    font-weight: 600;*/
/*    color: var(--color-text-tertiary);*/
/*    line-height: 1.2;*/
/*    white-space: nowrap;*/
/*    font-size: .88rem;*/
/*    margin-bottom: var(--space-3);*/
/*    opacity: 0;*/
/*    transition: max-height .32s ease, opacity .24s ease;*/
/*}*/

/*.work__tabs-sub.is-open {*/
/*    display: inline-flex;*/
/*    opacity: 1;*/
/*}*/

/*.work__tab-sub {*/
/*    position: relative;*/
/*    padding: 3px 12px;*/
/*    cursor: pointer;*/
/*    color: inherit;*/
/*    background: transparent;*/
/*    border: none;*/
/*    font: inherit;*/
/*    letter-spacing: .02em;*/
/*    transition: color .15s ease, font-weight .15s ease;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 0;*/
/*}*/

/*.work__tab-sub + .work__tab-sub {*/
/*    border-left: 1px solid var(--color-border);*/
/*}*/

/*.work__tab-sub:hover {*/
/*    color: var(--color-ink);*/
/*}*/

/*.work__tab-sub.is-active {*/
/*    color: var(--color-ink);*/
/*    font-weight: 800;*/
/*}*/

/*.work__tab-sub.is-active::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 12px;*/
/*    right: 12px;*/
/*    bottom: -1px;*/
/*    height: 2.5px;*/
/*    background: var(--color-ink);*/
/*    border-radius: 2px 2px 0 0;*/
/*}*/

/*.work__grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, 1fr);*/
/*    gap: 10px;*/
/*    flex: 1;*/
/*}*/

/*.work__item {*/
/*    position: relative;*/
/*    aspect-ratio: 4/5;*/
/*    border-radius: var(--radius-card);*/
/*    overflow: hidden;*/
/*    border: 1px solid var(--color-border);*/
/*    cursor: pointer;*/
/*    transition: box-shadow .2s ease, transform .2s ease;*/
/*}*/

/*.work__item:hover {*/
/*    box-shadow: var(--shadow-float);*/
/*    transform: translateY(-3px);*/
/*}*/

/*.work__item .vid-ph__bg {*/
/*    transition: transform .4s ease;*/
/*}*/

/*.work__item:hover .vid-ph__bg {*/
/*    transform: scale(1.04);*/
/*}*/

/*.work__label {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    padding: 8px 10px 6px;*/
/*    background: linear-gradient(transparent, rgba(20, 30, 50, .78));*/
/*    color: #fff;*/
/*    font-size: .65rem;*/
/*    font-weight: 600;*/
/*}*/
/* =====================================================================
   ⑨c 艺考演播室 + 作品展示（左5分类tab视频列表 + 右两级tab作品网格 · 一屏内）
   ===================================================================== */
.studio {
    padding-block: var(--space-4);
    min-height: calc(100vh - 80px);
}

.studio__layout {
    display: grid;
    grid-template-columns:1fr;
    gap: var(--space-5);
}

@media (min-width: 1024px) {
    .studio__layout {
        gap: var(--space-6);
    }
}

.studio__col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.studio__col .section-head {
    margin-bottom: var(--space-3);
}

.studio__col .section-head .eyebrow {
    margin-bottom: var(--space-3);
    font-size: .75rem;
    letter-spacing: .32em;
}

.studio__col .section-head .h1 {
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    font-weight: 800;
    margin-bottom: var(--space-3);
}

.studio__col .section-head .lead {
    font-size: .9375rem;
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
}

/* 艺考演播室 — tab 列表（仿名师天团 .teachers__tabs 样式） */
.studio__tabs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    font-size: 1.05rem;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.studio__tab {
    position: relative;
    padding: 4px 14px;
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: none;
    font: inherit;
    letter-spacing: .02em;
    transition: color .15s ease, font-weight .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.studio__tab + .studio__tab {
    border-left: 1px solid rgba(0, 0, 0, .18);
}

.studio__tab:hover {
    color: var(--color-ink);
}

.studio__tab.is-active {
    color: var(--color-ink);
    font-weight: 800;
}

.studio__tab.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 3px;
    background: var(--color-ink);
    border-radius: 2px 2px 0 0;
}

.studio__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.studio__pane {
    display: none;
    grid-template-columns:repeat(4, 1fr);
    gap: var(--space-4);
}

.studio__pane.is-active {
    display: grid;
}

.studio__item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.studio__item:hover {
    transform: translateY(-3px);
    border-color: var(--color-brand-yellow);
    box-shadow: var(--shadow-float);
}

.studio__item-media {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.studio__item-media .vid-ph__bg {
    transition: transform .4s ease;
}

.studio__item:hover .vid-ph__bg {
    transform: scale(1.04);
}

.studio__item-body {
    min-width: 0;
    padding: 10px 12px 12px;
}

.studio__item-title {
    font-weight: 700;
    font-size: .875rem;
    color: var(--color-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio__item-sub {
    font-size: .75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .studio__pane {
        grid-template-columns:repeat(2, 1fr);
    }
}

/*@media (max-width: 640px) {*/
/*    .studio__pane {*/
/*        grid-template-columns:1fr;*/
/*    }*/
/*}*/

/* 作品展示 — 两级 tab（学生作品/老师作品 + 素描/速写/色彩） */
.work__tabs-main {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    font-size: 1.05rem;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-bottom: var(--space-2);
}

.work__tab-main {
    position: relative;
    padding: 4px 14px;
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: none;
    font: inherit;
    letter-spacing: .02em;
    transition: color .15s ease, font-weight .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.work__tab-main + .work__tab-main {
    border-left: 1px solid rgba(0, 0, 0, .18);
}

.work__tab-main:hover {
    color: var(--color-ink);
}

.work__tab-main.is-active {
    color: var(--color-ink);
    font-weight: 800;
}

.work__tab-main.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 3px;
    background: var(--color-ink);
    border-radius: 2px 2px 0 0;
}

.work__tabs-sub {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-tertiary);
    line-height: 1.2;
    white-space: nowrap;
    font-size: .88rem;
    margin-bottom: var(--space-3);
}

.work__tabs-sub.is-open {
    display: inline-flex;
}

.work__tab-sub {
    position: relative;
    padding: 3px 12px;
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: none;
    font: inherit;
    letter-spacing: .02em;
    transition: color .15s ease, font-weight .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.work__tab-sub + .work__tab-sub {
    border-left: 1px solid var(--color-border);
}

.work__tab-sub:hover {
    color: var(--color-ink);
}

.work__tab-sub.is-active {
    color: var(--color-ink);
    font-weight: 800;
}

.work__tab-sub.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2.5px;
    background: var(--color-ink);
    border-radius: 2px 2px 0 0;
}

.work__grid {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 10px;
    flex: 1;
}

@media (max-width: 1024px) {
    .work__grid {
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .work__grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

.work__item {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

.work__item:hover {
    box-shadow: var(--shadow-float);
    transform: translateY(-3px);
}

.work__item .vid-ph__bg {
    transition: transform .4s ease;
}

.work__item:hover .vid-ph__bg {
    transform: scale(1.04);
}

.work__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px 6px;
    background: linear-gradient(transparent, rgba(20, 30, 50, .78));
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
}

@media (max-width: 767px) {
    .course-scope__tabs {
        font-size: 1rem;
    }

    .campus__top {
        grid-template-columns: 1fr;
    }

    .campus__vgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .work__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .studio__col {
        width: 100%;
        overflow-x: hidden;
    }
}