* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f8f5ef;
    color: #816955;
    font-family: "Calibri", "Arial", sans-serif;
}

/* 两个内容区上下排列 */
.main {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}


/*  第一屏：首页背景 */

#home-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #f9edd9;
    background-image: url("https://res.cloudinary.com/ab6obbr1/image/upload/v1790224782/%E4%BF%A1%E6%9C%9F%E7%BB%A3%E8%83%8C%E6%99%AF2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* 顶部导航 */

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 40px;
    z-index: 3;
}

.header-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.main-navigation,
.header-controls {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation {
    gap: 60px;
}

.main-navigation-link {
    color: #816955;
    font-size: 18px;
    text-decoration: none;
}

.header-controls {
    gap: 22px;
}

.auth-box {
    flex-shrink: 0;
}

.header-controls-button {
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    background-color: #f9edd9;
    color: #816955;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.header-controls-button:hover {
    background-color: #816955;
    color: #fff8ee;
    cursor: pointer;
}

/* 首页内容 */

.home-page-content {
    position: relative;
    min-height: 100vh;
    padding: 28vh 0 150px;
}

/* 左侧文字 */
.side-caption {
    position: absolute;
    top: 44%;
    left: 9.4%;
    padding: 40px 0 40px 25px;
    border-left: 1px solid #c7ac8899;
    color: #76543b;
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: 0.07em;
}

/* 中间文字保留实际高度，避免与第二屏重叠 */
.text-center {
    position: relative; 
    width: 66%;
    margin-left: 29.4%;
}

.title-row {
    display: flex;
    align-items: center;
}

.title-wrap {
    position: relative;
}

.text-center-h1 {
    margin: 0;
    color: #76543b;
    font-family: "STKaiti", "KaiTi", "Kaiti SC", serif;
    font-size: 113px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 5px;
}

/* 红色印章 */
.seal {
    position: absolute;
    top: 28%;
    right: -25px;
    padding: 4px 3px;
    border-radius: 6px;
    background-color: #a43628;
    color: #fff0d6;
    font-family: "KaiTi", serif;
    font-size: 18px;
    line-height: 1;
    box-shadow: inset 0 0 0 2px #f6eddc33;
}

/* 标题旁的斜线 */
.slash {
    width: 1px;
    height: 65px;
    margin: 20px 40px 0 55px;
    background-color: #76543b;
    transform: rotate(36deg);
}

.english-name {
    margin: 15px 0 0;
    color: #76543b;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0.48em;
}

/* 首页标语 */
.home-slogan {
    margin: 18px 0;
    color: #76543b;
    font-family: "STKaiti", "KaiTi", "Kaiti SC", serif;
    font-size: clamp(36px, 4.6vw, 76px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 4px;
}

.description {
    margin: 16px 0 0;
    color: #927356;
    font-size: clamp(15px, 1.35vw, 22px);
    line-height: 1.65;
    letter-spacing: 0.16em;
}

.short-line {
    display: block;
    width: 86px;
    height: 1px;
    margin-top: 28px;
    background-color: #76543b;
}


/* 页码装饰 */

.page-index {
    position: absolute;
    bottom: 9%;
    left: 3.7%;
    display: grid;
    justify-items: center;
    gap: 17px;
    color: #b09478;
    font-size: 15px;
    letter-spacing: 1px;
}

.page-index .current {
    color: #76543b;
}

.page-index i {
    width: 1px;
    height: 15px;
    background-color: #ae8d6e;
}


/* 向下浏览按钮 */

.explore {
    position: absolute;
    bottom: 8%;
    left: 9.4%;
    display: flex;
    align-items: center;
    gap: 32px;
    color: #76543b;
    font-family: Georgia, "Times New Roman", "SimSun", serif;
    font-size: 21px;
    text-decoration: none;
}

.arrow {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid #76543b;
    border-radius: 50%;
    font-size: 29px;
}

.explore:hover .arrow {
    background-color: #76543b;
    color: #f9edd9;
}


/* 第二屏：何为湘绣 */

#xiang-about {
    position: relative; 
    width: 100%;
    min-height: 100vh;
    padding: 86px 70px 60px;
    background-color: #f8f5ef;
    color: #816955;
    text-align: left;
}

.xiang-about-title {
    margin: 0;
    font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
    font-size: 60px;
    font-weight: bold;
    line-height: 66px;
    letter-spacing: 2px;
}

.xiang-about-subtitle {
    margin: 0;
    font-family: "Calibri", "Arial", sans-serif;
    font-size: 32px;
    font-weight: normal;
    line-height: 42px;
}

.xiang-about-text {
    max-width: 770px;
    margin-top: 46px;
    font-family: "Times New Roman", "SimSun", serif;
    font-size: 33px;
    line-height: 1.165;
}

.xiang-about-text p {
    margin: 0;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 千年一线 */

#traceability,
#traceability * {
    box-sizing: border-box;
}

#traceability {
    position: relative;
    display: block;

    width: 100%;
    min-width: 0;

    height: 300vh;
    height: 300svh;

    margin: 0;
    padding: 0;
    overflow: visible;

    background-color: #f9edd9;
    color: #816955;

    
    view-timeline-name: --thread-history;
    view-timeline-axis: block;
    view-timeline-inset: 0;
}

/* 展示窗口 */
#traceability .thread-stage {
    position: sticky;
    top: 0;

    width: 100%;
    height: 100vh;
    height: 100svh;

    margin: 0;
    padding: 0;

    overflow: clip;

    container-type: inline-size;
}

/* 横向画布 */
#traceability .thread-track {
    position: relative;

    width: 200%;
    min-width: 1552px;
    height: 100%;

    overflow: hidden;

    background-image: url("https://res.cloudinary.com/ab6obbr1/image/upload/v1790224788/%E4%BF%A1%E6%9C%9F%E7%BB%A3%E8%83%8C%E6%99%AF.png");
    background-repeat: repeat-x;
    background-position: left top;
    background-size: 50% 100%;

    font-family: "Calibri", "Arial", sans-serif;
    font-size: max(1px, 0.128866cqw);
    line-height: 1;

    will-change: transform;

    animation: thread-history-horizontal 1s linear both;
    animation-timeline: --thread-history;
    animation-range: contain 0% contain 100%;
}

/* 横移到画布最右端，正好展示最后一屏 */
@keyframes thread-history-horizontal {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% + 100cqw));
    }
}


/* 左上角标题 */

#traceability .traceability-heading {
    position: absolute;
    top: 9.7%;
    left: 2.58%;
}

#traceability .traceability-heading h2 {
    margin: 0;
    padding: 0;

    color: #816955;
    font-family:
        "LiSu",
        "隶书",
        "STXingkai",
        "华文行楷",
        serif;

    font-size: 32em;
    font-weight: bold;
    line-height: 1.05;
    letter-spacing: 1px;
}

#traceability .traceability-heading p {
    margin: 0;
    padding: 0;

    font-size: 18em;
    line-height: 1.1;
}

/* 棕色轴线和箭头 */

#traceability .traceability-axis {
    position: absolute;
    top: 47.02%;
    left: 2.58%;

    width: 94.72%;
    height: 2em;

    background-color: #816955;
    transform: translateY(-50%);
}

#traceability .traceability-axis::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 0;

    width: 10em;
    height: 10em;

    border-top: 2em solid #816955;
    border-right: 2em solid #816955;

    transform: translateY(-50%) rotate(45deg);
}

/* 七个圆形节点 */

#traceability .traceability-dot {
    position: absolute;
    top: 47.02%;

    width: 15em;
    height: 15em;

    border-radius: 50%;
    background-color: #816955;

    transform: translate(-50%, -50%);
}

#traceability .traceability-dot-1 {
    left: 9.34%;
}

#traceability .traceability-dot-2 {
    left: 23.20%;
}

#traceability .traceability-dot-3 {
    left: 36.86%;
}

#traceability .traceability-dot-4 {
    left: 54.32%;
}

#traceability .traceability-dot-5 {
    left: 62.56%;
}

#traceability .traceability-dot-6 {
    left: 70.81%;
}

#traceability .traceability-dot-7 {
    left: 89.76%;
}

/* 时间线文字 */

#traceability .traceability-events {
    margin: 0;
    padding: 0;
    list-style: none;
}

#traceability .traceability-event {
    position: absolute;

    margin: 0;
    padding: 0;

    text-align: left;
    white-space: nowrap;
}

#traceability .traceability-event h3 {
    margin: 0;
    padding: 0;

    color: #816955;
    font-family:
        "LiSu",
        "隶书",
        "STXingkai",
        "华文行楷",
        serif;

    font-size: 22em;
    font-weight: bold;
    line-height: 1.05;
    letter-spacing: 1px;
}

#traceability .traceability-event p {
    margin: 0;
    padding: 0;

    font-size: 18em;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
}

/* 楚地绣源 */
#traceability .traceability-event-1 {
    left: 5.93%;
    top: 55.24%;
}

/* 民间生长 */
#traceability .traceability-event-2 {
    left: 21.91%;
    top: 28.95%;
}

/* 湘绣成型 */
#traceability .traceability-event-3 {
    left: 34.15%;
    top: 55.44%;
}

/* 声明渐起 */
#traceability .traceability-event-4 {
    left: 51.16%;
    top: 33.06%;
}

/* 技艺新生 */
#traceability .traceability-event-5 {
    left: 60.24%;
    top: 52.98%;
}

/* 双面异绣 */
#traceability .traceability-event-6 {
    left: 68.11%;
    top: 31.42%;
}

/* 非遗时代 */
#traceability .traceability-event-7 {
    left: 86.66%;
    top: 55.85%;
}

/* 红色丝线 */

#traceability .traceability-thread {
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 100%;
    max-width: none;
    height: 100%;

    z-index: 2;
    pointer-events: none;
}

/* 红线随着滚动，沿原有曲线逐段画出 */
#traceability .traceability-thread path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;

/* 与页面横向移动共用同一滚动 */
    animation: thread-history-draw 1s linear both;
    animation-timeline: --thread-history;
    animation-range: contain 0% contain 100%;
}

/* 从隐藏整条红线，到完整显示红线 */
@keyframes thread-history-draw {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* 横轴、圆点和文字提前于红线显现 */

/* 棕色横轴：从左向右展开 */
#traceability .traceability-axis {
    animation: thread-axis-reveal 1s linear both;
    animation-timeline: --thread-history;
    animation-range: contain 0% contain 70%;
}

@keyframes thread-axis-reveal {
    from {
        /* 上下留出空间，避免裁掉箭头 */
        clip-path: inset(-20em 100% -20em -20em);
    }

    to {
        clip-path: inset(-20em -20em -20em -20em);
    }
}

/* 圆点和文字：只改变透明度，保留原来的位置 */
#traceability .traceability-dot,
#traceability .traceability-event {
    animation: thread-content-reveal 1s linear both;
    animation-timeline: --thread-history;
}

@keyframes thread-content-reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 第一组：楚地绣源 */
#traceability .traceability-dot-1,
#traceability .traceability-event-1 {
    animation-range: contain 0% contain 4%;
}

/* 第二组：民间生长 */
#traceability .traceability-dot-2,
#traceability .traceability-event-2 {
    animation-range: contain 7% contain 14%;
}

/* 第三组：湘绣成型 */
#traceability .traceability-dot-3,
#traceability .traceability-event-3 {
    animation-range: contain 17% contain 24%;
}

/* 第四组：声明渐起 */
#traceability .traceability-dot-4,
#traceability .traceability-event-4 {
    animation-range: contain 30% contain 38%;
}

/* 第五组：技艺新生 */
#traceability .traceability-dot-5,
#traceability .traceability-event-5 {
    animation-range: contain 36% contain 44%;
}

/* 第六组：双面异绣 */
#traceability .traceability-dot-6,
#traceability .traceability-event-6 {
    animation-range: contain 43% contain 51%;
}

/* 第七组：非遗时代 */
#traceability .traceability-dot-7,
#traceability .traceability-event-7 {
    animation-range: contain 77% contain 83%;
}



/* 内容从下方浮现，同时由透明变为清晰 */

@media (prefers-reduced-motion: no-preference) {
    @keyframes xiang-visible-reveal {
        from {
            opacity: 0;
            translate: 0 48px;
            filter: blur(3px);
        }
        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    /* 首页：刷新后，从下方浮现 */
    #home-screen :is(
        .header,
        .side-caption,
        .text-center,
        .page-index,
        .explore
    ) {
        animation: xiang-visible-reveal 1s ease-out both;
    }

    @supports (animation-timeline: view()) and
    (animation-range: entry 0% entry 220px) {

        /* 每个标题、段落和图片，分别随滚动显现 */
        #xiang-about :is(
            .xiang-about-title,
            .xiang-about-subtitle,
            .xiang-about-text > p
        ),
        #masterpiece :is(
            .classics-navigation,
            .classics-heading,
            .classic-row > .classic-picture,
            .classic-row > .classic-copy,
            .classic-lady > .classic-number,
            .classic-lady > .classic-name,
            .classic-lady > .classic-chinese,
            .lady-pictures > figure,
            .lady-description
        ) {
            animation: xiang-visible-reveal 1s linear both;
            animation-timeline: view(block);

            /* 进入屏幕后，再滚动220px，才完全显现 */
            animation-range: entry 0% entry 220px;
        }

        /* 千年一线：只调整标题入场 */
        #traceability .traceability-heading {
            animation: xiang-visible-reveal 1s linear both;
            animation-timeline: --thread-history;
            animation-range: entry 0% entry 220px;
        }
    }
}

.xe-renewal {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 1440 / 900;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #f8f5ef;
    color: #816955;
    container-type: inline-size;
    box-sizing: border-box;
}

/* 下半屏纹样背景，位置与设计图的水平分界一致。 */
.xe-renewal::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 50.8%;
    bottom: 0;
    background: #f5ead5 url("images/cloud-pattern.svg") center center / cover no-repeat;
}

.xe-renewal .xe-renewal-nav {
    position: absolute;
    z-index: 30;
    top: 6.2%;
    left: 43.6%;
    right: 4.7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-family: Calibri, Arial, sans-serif;
    font-size: clamp(12px, 1.4cqw, 24px);
    line-height: 1.3;
}
.xe-renewal .xe-renewal-nav a {
    position: static;
    margin: 0;
    padding: 0;
    color: #816955;
    text-decoration: none;
    white-space: nowrap;
}

.xe-renewal .xe-renewal-heading {
    position: absolute;
    z-index: 10;
    top: 10.7%;
    left: 5.5%;
    margin: 0;
}
.xe-renewal .xe-renewal-heading h2 {
    position: static;
    margin: 0;
    padding: 0;
    color: #816955;
    font-family: "HYFanXiaoGeYiLi", "华文隶书", "LiSu", "KaiTi", serif;
    font-size: clamp(24px, 3.8cqw, 72px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .08em;
}
.xe-renewal .xe-renewal-heading p {
    position: static;
    margin: .12em 0 0 .25em;
    padding: 0;
    color: #816955;
    font-family: Calibri, Arial, sans-serif;
    font-size: clamp(16px, 2.6cqw, 46px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

/* 作品容器占完整画布，单独在 50.8% 高度处裁切。 */
.xe-renewal .xe-renewal-art,
.xe-renewal .xe-renewal-products {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.xe-renewal .xe-renewal-art {
    z-index: 1;
    clip-path: inset(0 0 49.2% 0);
}
.xe-renewal .xe-renewal-products { z-index: 2; }

.xe-renewal .xe-renewal-piece {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    transform: rotate(var(--xe-turn, 0deg));
    transform-origin: center;
    pointer-events: auto;
}
/* 定位和旋转交给外层，放大只作用于图片，所以悬停时不会跳位。 */
.xe-renewal .xe-renewal-piece img {
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    object-fit: contain;
    opacity: .82;
    transform: scale(1);
    transform-origin: center;
    transition: transform .35s ease, opacity .35s ease;
}

/* 上半屏各图片的位置与大小。 */
.xe-renewal .xe-renewal-lotus {
    left: 31.1%; top: 15.2%; width: 10.3%; height: 35%;
    border-radius: 2.4cqw; --xe-turn: 5deg; z-index: 1;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224834/5.jpg);
}
.xe-renewal .xe-renewal-landscape {
    left: 45.1%; top: 12.3%; width: 10%; height: 40%;
    border-radius: 2cqw; --xe-turn: -7deg; z-index: 2;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224779/a.jpg);
}
.xe-renewal .xe-renewal-egrets {
    left: 56.7%; top: 17.5%; width: 11.8%; height: 28%;
    border-radius: 1.8cqw; --xe-turn: 9deg; z-index: 3;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224775/b.jpg);
}
.xe-renewal .xe-renewal-lion {
    left: 59.2%; top: 28.8%; width: 18%; height: 28.8%;
    border-radius: 50%; z-index: 1;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224780/%E7%8B%AE%E5%AD%90.jpg);
}
.xe-renewal .xe-renewal-magpies {
    left: 23.8%; top: 30.3%; width: 20%; height: 27%;
    border-radius: 4.5cqw; --xe-turn: -5deg; z-index: 4;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224774/2.jpg);
}
.xe-renewal .xe-renewal-round {
    left: 36%; top: 25.8%; width: 11.7%; height: 18.72%;
    border-radius: 50%; z-index: 5;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224795/c.png);
}
.xe-renewal .xe-renewal-white {
    left: 49.5%; top: 34.6%; width: 12%; height: 19.2%;
    border-radius: 50%; z-index: 6;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224772/d.jpg);
}
.xe-renewal .xe-renewal-art img { object-fit: cover; }
.xe-renewal .xe-renewal-lion img {
    object-position: center;
}

/* 下半屏产品：透明素材相互交叠。 */
.xe-renewal .xe-renewal-rings {
    left: 21.5%; top: 48.7%; width: 19.5%; height: 36%;
    --xe-turn: 15deg; z-index: 2;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224819/%E6%88%92%E6%8C%87.png);
}
.xe-renewal .xe-renewal-journal {
    left: 42.5%; top: 46.8%; width: 14%; height: 34.2%;
    --xe-turn: -65deg; z-index: 1;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224804/%E6%89%8B%E8%B4%A6%E6%9C%AC.png);
}
.xe-renewal .xe-renewal-earrings {
    left: 57.3%; top: 51.5%; width: 17%; height: 21%;
    --xe-turn: 5deg; z-index: 3;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224790/%E8%80%B3%E7%8E%AF1.png);
}
.xe-renewal .xe-renewal-fan {
    left: 39%; top: 72.4%; width: 11.2%; height: 24.2%;
    --xe-turn: 30deg; z-index: 4;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224791/%E5%9B%A2%E6%89%87.png);
}
.xe-renewal .xe-renewal-bookmark {
    left: 55.4%; top: 69%; width: 22%; height: 16%;
    --xe-turn: -8deg; z-index: 5;
    src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224818/%E4%B9%A6%E7%AD%BE.png);
}

/* 鼠标悬停：放大并完全不透明；移开后平滑恢复。 */
@media (hover: hover) {
    .xe-renewal .xe-renewal-piece:hover { z-index: 20; }
    .xe-renewal .xe-renewal-piece:hover img {
    transform: scale(1.1);
    opacity: 1;
}
}

@media (max-width: 600px) {
    .xe-renewal .xe-renewal-nav {
    top: 3%; left: 5.5%; right: 5.5%;
    gap: 6px;
    font-size: 10px;
}
    .xe-renewal .xe-renewal-heading { top: 12%; }
    .xe-renewal .xe-renewal-heading h2 { font-size: 23px; }
    .xe-renewal .xe-renewal-heading p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .xe-renewal .xe-renewal-piece img { transition: none; }
}

.details h2{
    font:inherit
}

.details p{
    white-space:nowrap
}

.ornaments{
    position:absolute;left:0;top:724px;width:1440px;height:176px;opacity:var(--pattern-alpha);transform:translate3d(0,var(--pattern-y),0);will-change:opacity,transform
}

.gold-pattern{
    position:absolute;inset:0;width:1440px;height:176px;object-fit:cover;display:block
}

.embroidery-crop{
    position:absolute;left:2px;top:83px;width:1436px;height:93px;overflow:hidden
}
.embroidery-crop img{
    position:absolute;width:100%;height:514.26%;left:.03%;top:-198.98%;max-width:none
}
.ornaments{
    position:absolute;left:0;right:0;bottom:0;width:100%;height:calc(176px * var(--scale));opacity:var(--pattern-alpha);transform:translate3d(0,var(--pattern-y),0);will-change:opacity,transform
}
.gold-pattern{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block
}
.embroidery-crop{
    position:absolute;left:0;bottom:0;width:100%;height:52.8409%;overflow:hidden
}
.embroidery-crop img{
    position:absolute;width:100%;height:auto;left:0;top:50%;transform:translateY(-48.416%);max-width:none;display:block
}
.scroll-cue{
    position:absolute;left:50%;bottom:34px;transform:translateX(-50%);border:0;background:transparent;color:var(--ink);font:12px/24px Arial,"Microsoft YaHei",sans-serif;letter-spacing:2px;opacity:var(--hint-alpha);cursor:pointer;padding:8px 12px;transition:color .15s
}
.ornaments{
    top:auto;bottom:0;width:100%;height:82px
}
.gold-pattern{
    width:100%;height:82px
}
.gold-pattern{
    width:100%;height:100%
}
.embroidery-crop{
    left:0;top:auto;bottom:0;width:100%;height:38px
}
.embroidery-crop img{
    height:auto;top:50%;transform:translateY(-50%)
}
.scroll-cue{
    bottom:36px
}
:root {
    color-scheme: light;

    --paper: #f8f5ef;
    --ink: #816955;
    --scale: 1;

    --move-x: 0px;
    --move-y: 0px;

    --detail-alpha: 1;
    --pattern-alpha: 1;
    --detail-y: 0px;
    --pattern-y: 0px;

    --hint-alpha: 0;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    background: var(--paper);
    scrollbar-color: #bdad99 var(--paper);
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family:
    "AaGuDianKeBenSong",
    "Times New Roman",
    "Songti SC",
    "SimSun",
    serif;
    -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
ul {
    margin: 0;
    padding: 0;
    font-weight: 400;
}

.about-story {
    position: relative;
}

/* 一段滚动区域对应两个画面 */
html.motion-ready .about-story {
    height: 240svh;
}

.stage {
    position: relative;
    height: 100svh;
    min-height: 480px;
    overflow: hidden;
    background: var(--paper);
}

html.motion-ready .stage {
    position: sticky;
    top: 0;
}

/* 文字按 Figma 的 1440 × 900 基准缩放 */
.composition {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1440px;
    height: 900px;
    transform: translate(-50%, -50%) scale(var(--scale));
    transform-origin: center;
}

.navigation {
    position: absolute;
    left: 618px;
    top: 35px;
    width: 756px;
    height: 27px;
    list-style: none;
    font: 20px/24px Inter, Arial, sans-serif;
}

.navigation li {
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.navigation li:nth-child(1) {
    left: 0;
}

.navigation li:nth-child(2) {
    left: 158px;
}

.navigation li:nth-child(3) {
    left: 349px;
}

.navigation li:nth-child(4) {
    left: 489px;
}

.navigation li:nth-child(5) {
    left: 676px;
    top: 3px;
}

.heading-cn {
  display: block;
  color: #816955;
  font-family: "HYFanXiaoGeYiLi", "STKaiti", "KaiTi", serif;
  font-size: 64px;
  font-weight: normal;
  line-height: 76px;
  white-space: nowrap;
}

.heading-en {
  display: block;
  color: #816955;
  font-family: Inter, Arial, sans-serif;
  font-size: 36px;
  font-weight: normal;
  line-height: 43px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .heading-cn {
    font-size: 42px;
    line-height: 54px;
  }

  .heading-en {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (max-width: 700px) {
  .heading-cn {
    font-size: 42px;
    line-height: 54px;
  }

  .heading-en {
    font-size: 24px;
    line-height: 32px;
  }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 初始位置：250, 410；结束位置：288, 253 */
.intro {
  position: absolute;
  left: 250px;
  top: 410px;
  width: 940px;
  text-align: center;
  transform: translate3d(var(--move-x), var(--move-y), 0);
  will-change: transform;
}

.intro-cn {
  font-size: 33px;
  line-height: 39px;
}

.intro-en {
  font-size: 24px;
  line-height: 28px;
}

.details {
  position: absolute;
  inset: 0;
  opacity: var(--detail-alpha);
  transform: translate3d(0, var(--detail-y), 0);
  will-change: opacity, transform;
}

.contact,
.follow {
  position: absolute;
  top: 594px;
  font-size: 24px;
  line-height: 36px;
}

.contact {
  left: 188px;
  width: 610px;
}

.follow {
  left: 967px;
  width: 400px;
}

.details h2 {
  font: inherit;
}

.details p {
  white-space: nowrap;
}

/*
  两张花纹直接相对于整个页面定位，
  不受正文缩放容器宽度限制。
*/
.ornaments {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(176px * var(--scale));
  opacity: var(--pattern-alpha);
  transform: translate3d(0, var(--pattern-y), 0);
  will-change: opacity, transform;
}

.gold-pattern {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224832/%E4%B9%98%E4%BA%91%E7%BB%A3.png);
}

.embroidery-crop {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 52.8409%;
  overflow: hidden;
  src: url(https://res.cloudinary.com/ab6obbr1/image/upload/v1790224832/%E4%B9%98%E4%BA%91%E7%BB%A3.png)
}

.embroidery-crop img {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-48.416%);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 12px/24px Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
  opacity: var(--hint-alpha);
  transform: translateX(-50%);
  cursor: pointer;
}

.scroll-cue span {
  display: block;
  font-size: 20px;
  line-height: 22px;
}

.scroll-cue:hover {
  color: #503727;
}

.scroll-cue:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

/* 无动效模式直接显示第二屏 */
html:not(.motion-ready) .intro {
  transform: translate3d(38px, -157px, 0);
}

/* 手机适配 */
@media (max-width: 700px) {
  .stage {
    min-height: 760px;
  }

  .composition {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .navigation {
    left: 7%;
    top: 26px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 86%;
    height: auto;
    font-size: 10px;
    line-height: 18px;
  }

  .navigation li:nth-child(n) {
    position: static;
  }

  .heading {
    left: 7%;
    top: 88px;
    width: 200px;
    height: 90px;
  }

  .heading-art {
    transform: scale(0.68);
    transform-origin: left top;
  }

  .intro {
    left: 7%;
    top: 43%;
    width: 86%;
  }

  .intro-cn {
    font-size: 19px;
    line-height: 1.8;
    text-wrap: balance;
  }

.intro-en {
    max-width: 420px;
    margin: 12px auto 0;
    font-size: 15px;
    line-height: 1.45;
}

.desktop-break {
    display: none;
}

.contact,
.follow {
    left: 9%;
    width: 82%;
    font-size: 15px;
    line-height: 26px;
}

.contact {
    top: 59%;
}

.follow {
    top: 74%;
}

.details p {
    white-space: normal;
}

.ornaments {
    width: 100%;
    height: 82px;
}

.embroidery-crop {
    width: 100%;
    height: 38px;
}

.scroll-cue {
    bottom: 36px;
}

html.motion-ready .about-story {
    height: calc(max(100svh, 760px) + 140svh);
}

html.motion-ready .stage {
    height: max(100svh, 760px);
    top: min(0px, calc(100svh - 760px));
}

html:not(.motion-ready) .intro {
    transform: translate3d(0, -120px, 0);
}
}

@media (prefers-reduced-motion: reduce) {
.intro,
.details,
.ornaments {
    will-change: auto;
    transition: none;
}

.scroll-cue {
    display: none;
}
}
/* ===== 加载字体 ===== */

/* 中文标题 */
@font-face {
  font-family: "AboutTitle";
  src:
    local("HYFanXiaoGeYiLi"),
    local("HYFanXiaoGeYiLiHYFanXiaoGeYiLi"),
    url("./fonts/HYFanXiaoGeYiLi.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 中文正文 */
@font-face {
  font-family: "AboutChinese";
  src:
    local("HBKangXiZiDianNeiFuJian"),
    local("汉标康熙字典内府简"),
    url("./fonts/HBKangXiZiDianNeiFuJian.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 英文 */
@font-face {
  font-family: "AboutEnglish";
  src:
    local("Jaldi Regular"),
    local("Jaldi"),
    url("./fonts/Jaldi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ===== 字体统一设置 ===== */

.about-story {
  --font-title: "AboutTitle", "STKaiti", "KaiTi", serif;
  --font-chinese: "AboutChinese", "Songti SC", "SimSun", serif;
  --font-english: "AboutEnglish", Arial, "AboutChinese", sans-serif;

  color: #816955;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0;
}


/* ===== 关于我们 ===== */

.heading-cn {
  display: block;
  font-family: var(--font-title);
  font-size: 64px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
}


/* ===== About Us ===== */

.heading-en {
  display: block;
  font-family: var(--font-english);
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
}


/* ===== 中文介绍 ===== */

.intro-cn {
  font-family: var(--font-chinese);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  text-align: center;
}


/* ===== 英文介绍 ===== */

.intro-en {
  font-family: var(--font-english);
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
}


/* ===== 顶部导航 ===== */

.navigation {
  font-family: var(--font-english);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
}


/* ===== 联系我们、关注我们 ===== */

.contact,
.follow {
  font-family: var(--font-chinese);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

.details h2 {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

/* HTML 中带 lang="en" 的英文部分使用 Jaldi */
.details [lang="en"] {
  font-family: var(--font-english);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}


/* ===== 手机端：保留之前的适配字号 ===== */

@media (max-width: 700px) {
  .heading-cn {
    font-size: 42px;
    line-height: 54px;
  }

  .heading-en {
    font-size: 24px;
    line-height: 32px;
  }

  .intro-cn {
    font-size: 19px;
    line-height: 1.8;
  }

  .intro-en {
    font-size: 15px;
    line-height: 1.45;
  }

  .navigation {
    font-size: 10px;
    line-height: 18px;
  }

  .contact,
  .follow {
    font-size: 15px;
    line-height: 26px;
  }
}
/* 关于我们：以整页宽度作为标题尺寸和位置的基准 */
.about-story > .stage {
  container-type: inline-size;
}

/* 标题位置：与“新生”相同，不再受内容画布缩放影响 */
.about-story > .stage > .heading {
  position: absolute;
  z-index: 10;
  top: 6.6875cqw;
  left: 5.5%;
  right: auto;
  bottom: auto;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  transform: none;

  color: #816955;
  opacity: 1;
  visibility: visible;
  font-synthesis: initial;
}

/* 中文：完全采用“新生”的字体格式 */
.about-story > .stage > .heading .heading-cn {
  display: block;
  position: static;
  margin: 0;
  padding: 0;

  font-family:
    "HYFanXiaoGeYiLi",
    "华文隶书",
    "LiSu",
    "KaiTi",
    serif;
  font-size: clamp(24px, 3.8cqw, 72px);
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 英文：与 Renewal 的字号、字体和间距一致 */
.about-story > .stage > .heading .heading-en {
  display: block;
  position: static;
  margin: 0.12em 0 0 0.25em;
  padding: 0;

  font-family: Calibri, Arial, sans-serif;
  font-size: clamp(16px, 2.6cqw, 46px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 导航同步定位，避免与标题重叠 */
.about-story > .stage > .navigation {
  position: absolute;
  z-index: 30;
  top: 3.875cqw;
  left: 43.6%;
  right: 4.7%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: none;

  font-family: Calibri, Arial, sans-serif;
  font-size: clamp(12px, 1.4cqw, 24px);
  font-weight: 400;
  line-height: 1.3;
}

.about-story > .stage > .navigation li:nth-child(n) {
  position: static;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* 与“新生”使用相同的手机端设置 */
@media (max-width: 600px) {
  .about-story > .stage > .heading {
    top: 7.5cqw;
  }

  .about-story > .stage > .heading .heading-cn {
    font-size: 23px;
  }

  .about-story > .stage > .heading .heading-en {
    font-size: 14px;
  }

  .about-story > .stage > .navigation {
    top: 1.875cqw;
    left: 5.5%;
    right: 5.5%;
    gap: 6px;
    font-size: 10px;
  }
}
/* 手机自适应补丁：放在全部原样式之后；沿用原动画的 700px 断点。 */
@media (max-width: 700px) {
  html, body { width: 100%; margin: 0; }
  .main { min-width: 0; }

  /* 首页 */
  #home-screen .header { position: relative; padding: 12px 5.5%; }
  #home-screen .header-container { flex-direction: column; gap: 8px; }
  #home-screen .header-navigation { width: 100%; min-width: 0; }
  #home-screen .main-navigation { justify-content: space-between; gap: 16px; overflow-x: auto; }
  #home-screen .main-navigation-link { display: flex; align-items: center; min-height: 44px; font-size: 12px; white-space: nowrap; }
  #home-screen .auth-box { align-self: flex-end; }
  #home-screen .header-controls { gap: 8px; }
  #home-screen .header-controls-button { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  #home-screen .home-page-content { min-height: 580px; padding: 50px 7% 120px; }
  #home-screen .text-center { width: 100%; margin: 0; }
  #home-screen .title-row { flex-wrap: wrap; gap: 24px; }
  #home-screen .text-center-h1 { font-size: clamp(64px, 18vw, 100px); letter-spacing: 2px; }
  #home-screen .slash { height: 48px; margin: 0 0 0 10px; flex-shrink: 0; }
  #home-screen .english-name { font-size: 12px; letter-spacing: 0.15em; }
  #home-screen .home-slogan { font-size: clamp(25px, 6.6vw, 40px); line-height: 1.5; letter-spacing: 1px; }
  #home-screen .description { font-size: 16px; line-height: 1.7; letter-spacing: 0.03em; }
  #home-screen .side-caption { position: static; margin: 0 0 30px; padding: 0 0 0 12px; font-size: 11px; line-height: 1.5; }
  #home-screen .side-caption br { display: none; }
  #home-screen .page-index { display: none; }
  #home-screen .explore { left: 7%; bottom: 35px; gap: 20px; font-size: 16px; }
  #home-screen .arrow { width: 44px; height: 44px; font-size: 22px; }

  /* 何为湘绣 */
  #xiang-about { min-height: 0; padding: 64px 7%; }
  #xiang-about .xiang-about-title { font-size: 32px; line-height: 1.3; }
  #xiang-about .xiang-about-subtitle { margin-top: 8px; font-size: 22px; line-height: 1.3; }
  #xiang-about .xiang-about-text { margin-top: 28px; font-size: 18px; line-height: 1.7; overflow-wrap: anywhere; }
  #xiang-about .xiang-about-text p + p { margin-top: 18px; }

  /* 千年一线：手机改为纵向时间线 */
  #traceability { height: auto; padding: 56px 7%; }
  #traceability .thread-stage { position: relative; top: auto; height: auto; overflow: visible; }
  #traceability .thread-track { width: 100%; min-width: 0; height: auto; background: none; animation: none; transform: none; font-size: 16px; }
  #traceability .traceability-heading { position: static; margin-bottom: 32px; animation: none; opacity: 1; transform: none; }
  #traceability .traceability-heading h2 { font-size: 32px; line-height: 1.3; }
  #traceability .traceability-heading p { margin-top: 8px; font-size: 20px; line-height: 1.4; }
  #traceability .traceability-axis,
  #traceability .traceability-dot,
  #traceability .traceability-thread { display: none; }
  #traceability .traceability-events { border-left: 1px solid #b79b80; margin-left: 6px; padding-left: 24px; }
  #traceability .traceability-event { position: relative; inset: auto; padding: 0 0 30px; white-space: normal; animation: none; opacity: 1; }
  #traceability .traceability-event:last-child { padding-bottom: 0; }
  #traceability .traceability-event::before { content: ""; position: absolute; left: -30px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #816955; }
  #traceability .traceability-event h3 { font-size: 23px; line-height: 1.4; }
  #traceability .traceability-event p { margin-top: 6px; font-size: 16px; line-height: 1.6; }

  /* 经典作品：上下图文，两个仕女圆图并排 */
  #masterpiece .classics-container { padding: 16px 7% 56px; }
  #masterpiece .classics-navigation { margin-bottom: 30px; }
  #masterpiece .classics-navigation ul { width: 100%; gap: 16px; overflow-x: auto; }
  #masterpiece .classics-navigation a { display: flex; align-items: center; min-height: 44px; font-size: 12px; white-space: nowrap; }
  #masterpiece .classics-heading { margin-bottom: 28px; }
  #masterpiece .classics-heading h2 { font-size: 32px; }
  #masterpiece .classics-heading > p { font-size: 24px; line-height: 1.4; }
  #masterpiece .classic-row { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 32px 0; }
  #masterpiece .classic-peacock { padding-top: 0; }
  #masterpiece .classic-row > .classic-picture { grid-row: 1; }
  #masterpiece .classic-row > .classic-copy { grid-row: 2; }
  #masterpiece .classic-picture { width: 100%; max-width: 440px; margin-inline: auto; border-radius: 18px; }
  #masterpiece .classic-number { margin-bottom: 12px; font-size: 12px; letter-spacing: 1px; }
  #masterpiece .classic-name { font-size: clamp(30px, 8vw, 44px); line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }
  #masterpiece .classic-chinese { margin-top: 10px; font-size: 25px; line-height: 1.4; letter-spacing: 1px; }
  #masterpiece .classic-line { width: 64px; margin: 22px 0; }
  #masterpiece .classic-description { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
  #masterpiece .classic-lady { padding: 32px 0; }
  #masterpiece .lady-pictures { width: 100%; gap: 16px; }
  #masterpiece .lady-picture { border-radius: 50%; }
  #masterpiece .lady-pictures figcaption { margin-top: 10px; font-size: 14px; }
  #masterpiece .lady-description { width: 100%; margin-top: 24px; }

  /* 新生：图片改为手机双列展示 */
  #renewal { aspect-ratio: auto; padding-top: 150px; }
  #renewal::before { display: none; }
  #renewal .xe-renewal-art,
  #renewal .xe-renewal-products { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; height: auto; padding: 24px 7%; clip-path: none; }
  #renewal .xe-renewal-products { background: #f5ead5; }
  #renewal .xe-renewal-piece { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1; margin: 0; border-radius: 16px; transform: none; }
  #renewal .xe-renewal-piece img { width: 100%; height: 100%; opacity: 1; }
  #renewal .xe-renewal-art img { object-fit: cover; }
  #renewal .xe-renewal-products img { object-fit: contain; }

  /* 新生与关于我们：手机标题位置、字号一致 */
  #renewal .xe-renewal-heading,
  .about-story > .stage > .heading { position: absolute; top: 76px; left: 5.5%; right: auto; bottom: auto; width: auto; height: auto; margin: 0; padding: 0; transform: none; z-index: 10; font-synthesis: initial; }
  #renewal .xe-renewal-heading h2,
  .about-story > .stage > .heading .heading-cn { display: block; margin: 0; font-family: "HYFanXiaoGeYiLi", "华文隶书", "LiSu", "KaiTi", serif; font-size: clamp(24px, 5.3vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: .08em; }
  #renewal .xe-renewal-heading p,
  .about-story > .stage > .heading .heading-en { display: block; margin: .12em 0 0 .25em; font-family: Calibri, Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.15; letter-spacing: 0; }

  /* 导航可局部横滑，页面本身不横向滚动 */
  #renewal .xe-renewal-nav,
  .about-story > .stage > .navigation { position: absolute; top: 12px; left: 5.5%; right: 5.5%; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: auto; height: 44px; margin: 0; padding: 0; overflow-x: auto; list-style: none; font-family: Calibri, Arial, sans-serif; font-size: 12px; line-height: 1.3; z-index: 30; }
  #renewal .xe-renewal-nav a,
  .about-story > .stage > .navigation li:nth-child(n) { position: static; flex-shrink: 0; display: flex; align-items: center; min-height: 44px; white-space: nowrap; }

  /* 关于我们：保留先移动正文、后显示详情的动画 */
  .about-story { --about-stage-height: max(100svh, var(--about-min-height, 760px)); }
  .about-story > .stage { height: var(--about-stage-height); min-height: 760px; }
  html.motion-ready .about-story { height: calc(var(--about-stage-height) + 140svh); }
  html.motion-ready .about-story > .stage { top: min(0px, calc(100svh - var(--about-stage-height))); }
  .about-story .composition { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; display: flex; flex-direction: column; gap: 28px; padding: 140px 7% 106px; }
  .about-story .intro { position: relative; inset: auto; top: calc(var(--about-stage-height) * .17); width: 100%; flex-shrink: 0; }
  .about-story .intro-cn { font-size: clamp(17px, 4.3vw, 20px); line-height: 1.7; }
  .about-story .intro-en { max-width: 100%; margin: 12px auto 0; font-size: 15px; line-height: 1.5; }
  .about-story .desktop-break { display: none; }
  .about-story .details { position: relative; inset: auto; display: grid; gap: 18px; flex-shrink: 0; margin-top: auto; }
  .about-story .contact,
  .about-story .follow { position: static; inset: auto; width: auto; font-size: 14px; line-height: 24px; }
  .about-story .details p { white-space: normal; overflow-wrap: anywhere; }
  .about-story .ornaments { top: auto; bottom: 0; width: 100%; height: 82px; }
  .about-story .gold-pattern { width: 100%; height: 100%; object-fit: cover; }
  .about-story .embroidery-crop { left: 0; top: auto; bottom: 0; width: 100%; height: 38px; }
  html:not(.motion-ready) .about-story .intro { top: 0; transform: none; }
}