/* Base Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    max-width: 1440px;
    margin: auto;
    background-color: #f2f2f0;
    color: #161616;
    font-family: 'Times New Roman', serif;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

a:focus-visible, input:focus-visible {
    outline: 2px solid #ef9c00;
    outline-offset: 3px;
}

h1, h2, h3 {
    font-family: 'Majesti Banner', 'Times New Roman', serif;
}

.header {
    background-color: #d0d0ce;
    padding: .85rem 1.8rem;
}

.header-container {
    display: flex;
    justify-content: flex-end;
}

.main-navigation {
    display: flex;
    list-style: none;
    gap: 3.2rem;
}

.main-navigation__link {
    text-decoration: none;
    font-size: 1.25rem;
}

.header-controls {
    display: none;
}

/* 首页始终保持六列三行 */

.articles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: 'a b c d e top' 'f g h i j blank' 'k l m n o bottom';
    border-top: 1px solid #555;
    border-left: 1px solid #555;
}

.articles::after {
    content: '';
    grid-area: blank;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}

.article {
    min-width: 0;
    position: relative;
    aspect-ratio: 1.08;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article span {
    position: absolute;
    left: .25rem;
    top: .25rem;
    font-size: .85rem;
}

.article img {
    width: 40%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}


.articles .a {
    grid-area:a;
}

.articles .b {
    grid-area:b;
}

.articles .c {
    grid-area:c;
}

.articles .d {
    grid-area:d;
}

.articles .e {
    grid-area:e;
}

.articles .f {
    grid-area:f;
}

.articles .g {
    grid-area:g;
}

.articles .h {
    grid-area:h;
}

.articles .i {
    grid-area:i;
}

.articles .j {
    grid-area:j;
}

.articles .k {
    grid-area:k;
}

.articles .l {
    grid-area:l;
}

.articles .m {
    grid-area:m;
}

.articles .n {
    grid-area:n;
}

.articles .o {
    grid-area:o;
}

.articles .top {
    grid-area: top;
}

.articles .bottom {
    grid-area: bottom;
}

.articles .text {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: .25rem;
    font-size: 1rem;
    line-height: 1.1;
}

.articles .bottom {
    justify-content: space-between;
}

h1 {
    font-size: 9.3rem;
    line-height: 1;
    letter-spacing: -.045em;
    color: #aaa;
    margin: 0;
    padding: 1px 1px 0.12em;
}



.Origin {
    display: grid;
    grid-template-columns: 83% 17%;
    background-color: #000;
    border-block: 1px solid #777;
}

.Origin .left {
    min-width: 0;
    padding: .5rem 1.2rem 0;
}

.Origin .main-navigation {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    color: #eee;
    font-size: .8rem;
    line-height: 1.15;
}

.Origin .cards {
    position: relative;
    height: 41.5rem;
    margin-top: 1.6rem;
}

.Origin .cards article {
    position: absolute;
    color: #f3f0e9;
    padding: .85rem;
    display: grid;
    grid-template-columns: 43% 57%;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: .55rem 0;
}

.Origin .cards .title {
    grid-area: title;
    border-bottom: 1px solid #c4bdb4;
    padding-bottom: .25rem;
    font-size: 1.25rem;
    line-height: 1.02;
    font-weight: normal;
}

.Origin .cards .data {
    grid-area: date;
    font-family: Arial, sans-serif;
    font-size: .6rem;
    font-weight: normal;
    line-height: 1.3;
}

.Origin .cards .text {
    grid-area: text;
    padding: 0 .4rem;
    font-family: Arial, sans-serif;
    font-size: .58rem;
    font-weight: normal;
    line-height: 1.5;
    min-width: 0;
}

.Origin .cards .text br {
    display: block;
    content: '';
    margin-top: .7rem;
}

.Origin .cards .small {
    grid-area: caption;
    font-family: Arial, sans-serif;
    font-size: .34rem;
    font-weight: normal;
    line-height: 1.3;
}

.Origin .cards img {
    grid-area: picture;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.Origin .content01 {
    left: 31%;
    top: 5.5rem;
    width: 40%;
    height: 18rem;
    background-color: #705137;
    z-index: 3;
    grid-template-areas: 'title title' 'date picture' 'text picture' 'text caption';
}

.Origin .content02 {
    left: 17.5%;
    top: 8.4rem;
    width: 28%;
    height: 24rem;
    background-color: #999796;
    z-index: 5;
    grid-template-areas: 'title title' 'date date' 'picture text' 'picture caption';
}

.Origin .content03 {
    left: 35%;
    top: 23rem;
    width: 40%;
    height: 13rem;
    background-color: #493232;
    z-index: 2;
    grid-template-areas: 'title title' 'text date' 'text picture' 'text caption';
}

.Origin .content03 .title {
    font-size: .9rem;
}

.Origin .content03 .text {
    font-size: .49rem;
}

.Origin .content04 {
    left: 0;
    top: 4rem;
    width: 31%;
    height: 22rem;
    background-color: #4d4d4d;
    z-index: 1;
    grid-template-areas: 'title title' 'date date' 'picture text' 'caption text';
}

.Origin .content05 {
    left: 70%;
    top: 1.8rem;
    width: 27%;
    height: 26.5rem;
    background-color: #a87549;
    z-index: 1;
    grid-template-areas: 'title title' 'date date' 'picture text' 'caption text';
}

.Origin .content05 .title {
    font-size: 1.08rem;
}

.Origin .Origin-right {
    min-width: 0;
    background-color: #fff;
    padding: .45rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.Origin .Origin-right h2 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.Origin .Origin-right .big {
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 2.5rem;
}

.Origin .Origin-right .small {
    font-family: Arial, sans-serif;
    font-size: .9rem;
    font-weight: normal;
    line-height: 1.5;
}

.Origin .Origin-right .small br {
    display: none;
}

.process {
    background-color: #fff;
}

.process > h2 {
    font-size: 3.65rem;
    line-height: 1.1;
    color: #aaa;
    padding: .2rem 1.4rem;
    border-bottom: 1px solid #888;
}

.process-content {
    display: grid;
    grid-template-columns: 20% 53% 27%;
    min-height: 46rem;
}

.steps {
    align-self: center;
    padding-left: 2.4rem;
}

.steps p {
    font-size: 1.4rem;
    color: #888;
    margin: .75rem 0;
}

.steps .using {
    color: #f39a00;
    position: relative;
    padding-left: 1.2rem;
}

.steps .using::before {
    content: '';
    position: absolute;
    left: -1.85rem;
    top: .5rem;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background-color: #f39a00;
}

.picture {
    display: flex;
    align-items: center;
    justify-content: center;
}

.picture img {
    width: 85%;
    height: 28rem;
    object-fit: contain;
}

.process-right {
    border-left: 1px solid #888;
    padding: 14rem 2rem 4rem;
}

.process-right img {
    width: 100%;
    height: 8rem;
    object-fit: contain;
    border: 1px solid #999;
}

.process-right .title {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.3;
    margin: 1.7rem 0 2.5rem;
}

.process-right .text {
    font-family: Arial, sans-serif;
    font-size: .8rem;
    font-weight: normal;
    line-height: 1.5;
}

.process-right br {
    display: none;
}



.motifs {
    background-color: #030303;
    color: #eee;
    text-align: center;
}

.motifs > h2, .archive > h2, .legacy > h2 {
    text-align: center;
    font-size: 3rem;
    padding: .7rem .5rem;
}

.motifs > h2 {
    border-bottom: 1px solid #7e7c7c;
}

.motif-gallery {
    position: relative;
    padding: 7rem 0 7.8rem;
}

.motif-gallery > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.motif-gallery:focus-within {
    outline: 2px solid #d59a40;
    outline-offset: -2px;
}

.motif-slide {
    display: none;
}

#motif-1:checked ~ .slide1, #motif-2:checked ~ .slide2, #motif-3:checked ~ .slide3, #motif-4:checked ~ .slide4 {
    display: block;
}

.motif-slide img {
    margin: auto;
    width: 23rem;
    height: 23rem;
    object-fit: cover;
    border-radius: 50%;
    mask-image: radial-gradient(circle, black 40%, transparent 71%);
}

.motif-slide h3 {
    font-size: 1.2rem;
    margin: .4rem 0;
}

.motif-slide p {
    max-width: 32rem;
    margin: auto;
    font-family: Arial, sans-serif;
    font-size: .65rem;
    font-weight: normal;
    line-height: 1.5;
    color: #999;
}

.previous, .next {
    position: absolute;
    top: 43%;
    color: #777;
    font-family: Arial, sans-serif;
    font-size: 3.5rem;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
    padding: .5rem 1rem;
}

.previous {
    left: 2%;
}

.next {
    right: 2%;
}



.archive {
    background: linear-gradient(#93a1ad, #f4f4f2 65%);
}

.archive > h2 {
    padding-top: 1.7rem;
}

.archive-items {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34rem;
    padding: 1.5rem 4%;
}

.archive-item {
    position: relative;
    flex: 0 0 22%;
    margin: 0 -1.1%;
}

.archive-item img {
    width: 100%;
    height: 19rem;
    object-fit: cover;
    border-radius: .6rem;
}

.archive-item.b, .archive-item.d {
    z-index: 2;
}

.archive-item.b img, .archive-item.d img {
    height: 21rem;
}

.archive-item.c {
    z-index: 3;
}

.archive-item.c img {
    height: 24rem;
}

.archive-caption {
    padding: 2.5rem 0 7rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
}

.archive-banner img {
    width: 100%;
    height: 38rem;
    object-fit: cover;
}


.legacy {
    padding: 2rem 0 7rem;
}

.Masters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    max-width: 64rem;
    margin: 4rem auto 0;
    gap: 3.5rem 2rem;
}

.master {
    text-align: center;
    min-width: 0;
}

.master img {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border-radius: 50%;
    margin: auto;
}

.master p {
    font-size: .75rem;
    line-height: 1.25;
    max-width: 11rem;
    margin: .7rem auto 0;
}

.footer {
    background-color: #fff;
}

.footer-content {
    padding: 4rem 2rem;
    text-align: center;
}

.footer-content p {
    margin-bottom: .75rem;
    font-size: .9rem;
}

.content-big {
    font-weight: bold;
}

.back-to-top {
    font-family: Arial, sans-serif;
    font-size: .85rem;
    font-weight: bold;
    line-height: normal;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid #999;
    padding: 1rem .3rem 5rem;
    font-size: .8rem;
}


@media (max-width: 1440px) {
    html {
        font-size: 1.111111vw;
    }

    body {
        width: 100%;
    }

}


@media (min-width: 601px) and (max-width: 1100px) {
    html {
        font-size: 1.111111vw;
    }

    .Origin {
        grid-template-columns: 83% 17%;
    }

    .process-content {
        grid-template-columns: 20% 53% 27%;
    }

    .Masters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    

}

/* 手机：不强制最小宽度，不变成单列；允许用户双指放大阅读 */

@media (max-width: 600px) {
    html {
        font-size: 1.111111vw;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .articles {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .Origin {
        grid-template-columns: 83% 17%;
    }

    .process-content {
        grid-template-columns: 20% 53% 27%;
    }

    .Masters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .previous, .next {
        padding: 1.5rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

}



.container .articles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
        "a b c d e top"
        "f g h i j blank"
        "k l m n o bottom";
}

.container .articles .article {
    min-width: 0;
    aspect-ratio: 1.08;
}

.container .articles .article img {
    width: 40%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.container .articles .article span,
.container .articles .text p,
.header .main-navigation__link {
    font-family: "Times New Roman", serif;
}

.container .articles .text {
    aspect-ratio: auto;
    padding: 4px;
    line-height: 1.15;
}

.container .articles .text p {
    overflow-wrap: break-word;
}

.container > h1 {
    font-size: 9.3rem;
    white-space: nowrap;
}

/* 平板：三列图片加一列文字，图片按 01 到 15 排列 */

@media (min-width: 601px) and (max-width: 1100px) {
    .container .articles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "a b c top"
            "d e f blank"
            "g h i blank"
            "j k l bottom"
            "m n o bottom";
    }

    .container .articles .article span {
        font-size: 12px;
        top: 5px;
        left: 5px;
    }

    .container .articles .text {
        font-size: 15px;
        padding: 5px;
    }

    .header .main-navigation__link {
        font-size: 16px;
    }
}


@media (max-width: 600px) {
    .container .articles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "a top"
            "b top"
            "c top"
            "d top"
            "e top"
            "f blank"
            "g blank"
            "h blank"
            "i blank"
            "j blank"
            "k bottom"
            "l bottom"
            "m bottom"
            "n bottom"
            "o bottom";
    }

    .container .articles .article span {
        font-size: 12px;
        top: 5px;
        left: 5px;
    }

    .container .articles .text {
        font-size: 15px;
        padding: 6px;
        line-height: 1.3;
    }

    .header {
        padding: 14px 10px;
    }

    .header .main-navigation {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 16px;
    }

    .header .main-navigation__link {
        font-size: 14px;
    }

    .container > h1 {
        font-size: 10.3vw;
        padding-bottom: 0.15em;
    }
}

/* 手机图片分组：每次两张，电脑和平板不显示切换控件 */

.pair-choice,
.pair-controls,
.pair-empty {
    display: none;
}

@media (max-width: 600px) {
    .pair-choice {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
    }

    .container .articles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "first top"
            "second bottom"
            "controls bottom";
    }

    .container .articles::after {
        display: none;
    }

    .container .articles .article:not(.text) {
        display: none;
        aspect-ratio: 1;
        min-height: 180px;
    }

    .container .articles .text {
        font-size: 14px;
        line-height: 1.3;
        padding: 8px;
    }

    .container .articles .bottom {
        gap: 18px;
    }

    .pair-controls {
        display: block;
        grid-area: controls;
        border-right: 1px solid #555;
        border-bottom: 1px solid #555;
    }

    .pair-buttons {
        display: none;
        align-items: center;
        justify-content: space-between;
        padding: 4px;
        font-size: 12px;
    }

    .pair-buttons label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 22px;
        cursor: pointer;
    }

    .pair-choice:focus-visible ~ .articles .pair-controls {
        outline: 2px solid #ef9c00;
        outline-offset: -2px;
    }

    .pair-empty {
        grid-area: second;
        aspect-ratio: 1;
        min-height: 180px;
        border-right: 1px solid #555;
        border-bottom: 1px solid #555;
    }

    #pair-1:checked ~ .articles .a {
        display: flex;
        grid-area: first;
    }

    #pair-1:checked ~ .articles .b {
        display: flex;
        grid-area: second;
    }

    #pair-1:checked ~ .articles .pair-buttons-1 {
        display: flex;
    }

    #pair-2:checked ~ .articles .c {
        display: flex;
        grid-area: first;
    }

    #pair-2:checked ~ .articles .d {
        display: flex;
        grid-area: second;
    }

    #pair-2:checked ~ .articles .pair-buttons-2 {
        display: flex;
    }

    #pair-3:checked ~ .articles .e {
        display: flex;
        grid-area: first;
    }

    #pair-3:checked ~ .articles .f {
        display: flex;
        grid-area: second;
    }

    #pair-3:checked ~ .articles .pair-buttons-3 {
        display: flex;
    }

    #pair-4:checked ~ .articles .g {
        display: flex;
        grid-area: first;
    }

    #pair-4:checked ~ .articles .h {
        display: flex;
        grid-area: second;
    }

    #pair-4:checked ~ .articles .pair-buttons-4 {
        display: flex;
    }

    #pair-5:checked ~ .articles .i {
        display: flex;
        grid-area: first;
    }

    #pair-5:checked ~ .articles .j {
        display: flex;
        grid-area: second;
    }

    #pair-5:checked ~ .articles .pair-buttons-5 {
        display: flex;
    }

    #pair-6:checked ~ .articles .k {
        display: flex;
        grid-area: first;
    }

    #pair-6:checked ~ .articles .l {
        display: flex;
        grid-area: second;
    }

    #pair-6:checked ~ .articles .pair-buttons-6 {
        display: flex;
    }

    #pair-7:checked ~ .articles .m {
        display: flex;
        grid-area: first;
    }

    #pair-7:checked ~ .articles .n {
        display: flex;
        grid-area: second;
    }

    #pair-7:checked ~ .articles .pair-buttons-7 {
        display: flex;
    }

    #pair-8:checked ~ .articles .o {
        display: flex;
        grid-area: first;
    }

    #pair-8:checked ~ .articles .pair-buttons-8 {
        display: flex;
    }

    #pair-8:checked ~ .articles .pair-empty {
        display: block;
    }
}

/* Origin 手机翻阅；原电脑和平板排版保留 */

.history-choice,
.history-tabs,
.history-controls {
    display: none;
}

@media (max-width: 600px) {
    .Origin {
        display: flex;
        flex-direction: column;
    }

    .Origin .Origin-right {
        order: -1;
        padding: 22px 16px;
        gap: 16px;
        border-left: 0;
    }

    .Origin .Origin-right h2 {
        font-size: 32px;
        line-height: 1.05;
    }

    .Origin .Origin-right h2 br {
        display: none;
    }

    .Origin .Origin-right .big {
        font-size: 13px;
        line-height: 1.4;
        margin: 0 0 12px;
    }

    .Origin .Origin-right .big br {
        display: none;
    }

    .Origin .Origin-right .small {
        font-size: 14px;
        line-height: 1.5;
    }

    .Origin .left {
        width: 100%;
        padding: 16px 12px 20px;
    }

    .Origin .menu {
        display: none;
    }

    .history-choice {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .history-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
    }

    .history-tabs label {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        border: 1px solid #777;
        color: #eee;
        font-size: 15px;
        cursor: pointer;
    }

    .Origin .cards {
        height: auto;
        min-height: 0;
        margin: 0;
    }

    .Origin .cards article {
        display: none;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        padding: 18px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 220px auto auto;
        grid-template-areas:
            "title"
            "date"
            "picture"
            "caption"
            "text";
        gap: 14px;
    }

    .Origin .cards article .title {
        font-family: "Times New Roman", serif;
        font-size: 26px;
        line-height: 1.1;
        padding-bottom: 12px;
    }

    .Origin .cards article .data {
        font-size: 12px;
        line-height: 1.4;
    }

    .Origin .cards article img {
        width: 100%;
        height: 220px;
        object-fit: contain;
    }

    .Origin .cards article .small {
        font-size: 11px;
        line-height: 1.4;
    }

    .Origin .cards article .text {
        padding: 0;
        font-size: 15px;
        line-height: 1.6;
    }

    .history-controls {
        display: block;
        margin-top: 14px;
    }

    .history-buttons {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #eee;
        font-size: 11px;
    }

    .history-buttons label {
        display: flex;
        align-items: center;
        min-height: 44px;
        cursor: pointer;
    }

    .history-choice:focus-visible ~ .history-tabs {
        outline: 2px solid #ef9c00;
        outline-offset: 3px;
    }
    }


/*手机*/

.history-hint {
    display: none;
}

@media (max-width: 600px) {
    .Origin .history-tabs {
        gap: 8px;
        margin-bottom: 10px;
    }

    .Origin .history-tabs a {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-bottom: 1px solid #777;
        color: #eee;
        font-size: 14px;
        text-decoration: none;
    }

    .Origin .history-tabs a:focus-visible {
        outline: 2px solid #ef9c00;
    }

    .Origin .history-hint {
        display: flex;
        justify-content: space-between;
        margin: 0 0 16px;
        color: #c4bdb4;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .Origin .cards {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        padding: 0 0 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #a87549 #252525;
    }

    .Origin .cards article {
        display: grid;
        flex: 0 0 90%;
        min-width: 0;
        scroll-snap-align: start;
        scroll-margin-top: 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .Origin .cards article:last-child {
        margin-right: 10%;
    }

    .Origin .cards article .title {
        font-size: 24px;
    }

    .Origin .cards:focus-visible {
        outline: 2px solid #ef9c00;
        outline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .Origin .cards {
        scroll-behavior: auto;
    }
}

.mobile-exhibition {
    display: none;
}

@media (max-width:600px) {
    .desktop-original {
        display: none;
    }

    .mobile-exhibition {
        display: block;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 48px 24px 54px;
        font: 15px/1.65 Arial,sans-serif;
        color: #292c26;
        background: #f0efe8;
    }

    .mobile-exhibition h2 {
        font: normal clamp(44px,13.5vw,76px)/.96 'Times New Roman',serif;
        letter-spacing: -2px;
        margin: 18px 0 30px;
    }

    .mobile-exhibition h2 em {
        font-style: italic;
        font-family: inherit;
    }

    .mobile-exhibition h3 {
        font: normal 30px/1.15 Georgia,serif;
        letter-spacing: -.5px;
        margin: 8px 0 14px;
    }

    .mobile-exhibition .ex-kicker {
        font: 10px/1.5 'Courier New',monospace;
        letter-spacing: 1.4px;
    }

    .mobile-exhibition .ex-hint {
        font: 10px/1.6 'Courier New',monospace;
        letter-spacing: 1px;
        color: #797a6c;
    }

    .mobile-exhibition :focus-visible {
        outline: 2px solid #ad653f;
        outline-offset: 4px;
    }

    .ex-process {
        background: radial-gradient(ellipse at center,#fffef9,#eeece3);
    }

    .step-choice {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .step-rail {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #bdb7a7;
    }

    .step-rail label {
        flex: 1;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font: 12px 'Courier New',monospace;
        color: #929083;
        cursor: pointer;
        border-bottom: 2px solid transparent;
    }

    #making-1:checked~.step-rail label[for=making-1],#making-2:checked~.step-rail label[for=making-2],#making-3:checked~.step-rail label[for=making-3],#making-4:checked~.step-rail label[for=making-4] {
        color: #9d4737;
        border-color: #9d4737;
    }

    .step-choice:focus-visible~.step-rail {
        outline: 2px solid #9d4737;
        outline-offset: 3px;
    }

    .needle-stage {
        margin: 18px 0 26px;
    }

    .needle-stage img {
        width: 100%;
        height: 300px;
        object-fit: contain;
        mix-blend-mode: multiply;
        transition: transform .7s ease;
    }

    .needle-stage figcaption {
        text-align: right;
        font: 9px 'Courier New',monospace;
        letter-spacing: 1px;
        color: #8f8775;
    }

    #making-1:checked~.needle-stage img {
        transform: rotate(-12deg) scale(.88);
    }

    #making-2:checked~.needle-stage img {
        transform: rotate(-4deg) scale(.96);
    }

    #making-3:checked~.needle-stage img {
        transform: rotate(6deg) scale(1.05);
    }

    .step-stories {
        border-top: 1px solid #bbb5a7;
        padding-top: 18px;
        min-height: 224px;
    }

    .step-story {
        display: none;
    }

    .step-story>p:last-of-type {
        font-size: 15px;
        color: #686758;
    }

    #making-1:checked~.step-stories .step-1,#making-2:checked~.step-stories .step-2,#making-3:checked~.step-stories .step-3,#making-4:checked~.step-stories .step-4 {
        display: block;
        animation: gentle-in .35s ease;
    }

    .next-step {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: flex-end;
        font: 11px 'Courier New',monospace;
        cursor: pointer;
        margin-top: 10px;
    }

    .ex-motifs {
        background: #11150f;
        color: #fff;
        padding: 48px 0 58px;
    }

    .ex-motifs>h2,.ex-motifs>.ex-kicker,.ex-motifs>.ex-hint {
        margin-left: 24px;
        margin-right: 24px;
    }

    .ex-motifs h2 {
        font-size: clamp(58px,18vw,100px);
        color: #fff;
    }

    .ex-motifs>.ex-hint {
        color: #fff;
        margin-bottom: 16px;
    }

    .motif-reel,.work-reel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        gap: 16px;
        padding: 0 24px 18px;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .motif-sheet {
        flex: 0 0 94%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .motif-sheet img {
        width: 100%;
        height: 360px;
        object-fit: contain;
        background: #090c08;
        margin-bottom: 20px;
    }

    .motif-sheet h3 {
        font-size: 34px;
    }

    .motif-sheet>p:last-child {
        font-size: 14px;
        line-height: 1.7;
        color: #fff;
        padding-right: 14px;
    }

    .motif-sheet>.ex-kicker {
        color: #fff;
    }

    .ex-archive {
        background: #becbcd;
        padding: 52px 0 34px;
    }

    .ex-archive>h2,.ex-archive>.ex-kicker,.ex-archive>.ex-hint {
        margin-left: 24px;
        margin-right: 24px;
    }

    .ex-archive>.ex-hint {
        color: #536567;
        margin-bottom: 16px;
    }

    .work-reel {
        gap: 24px;
        padding-top: 16px;
        padding-bottom: 30px;
        align-items: start;
        scrollbar-color: #6f898d transparent;
    }

    .work-sheet {
        flex: 0 0 85%;
        min-width: 0;
        padding: 12px;
        background: #f1edde;
        scroll-snap-align: start;
        box-shadow: 0 10px 16px #243f4820;
    }

    .work-sheet:nth-child(odd) {
        transform: rotate(-2deg);
    }

    .work-sheet:nth-child(even) {
        transform: rotate(2deg);
        margin-top: 12px;
    }

    .work-sheet img {
        width: 100%;
        height: 310px;
        object-fit: contain;
        background: #e6e0d0;
    }

    .work-sheet .ex-kicker {
        margin: 16px 0 9px;
        color: #77705b;
    }

    .work-sheet h3 {
        font: 18px/1.5 Georgia,serif;
        margin: 0 0 8px;
    }

    .swipe-note {
        text-align: center;
        font: 10px 'Courier New',monospace;
        letter-spacing: .5px;
        margin-top: 8px;
    }

    .ex-walk {
        background: #214b58;
        color: #f3efdb;
        padding: 46px 0 30px;
    }

    .ex-walk>h2,.ex-walk>.ex-kicker {
        margin-left: 24px;
        margin-right: 24px;
    }

    .ex-walk>.ex-kicker {
        color: #bed1cf;
    }

    .ex-walk h2 {
        font-size: clamp(43px,12.5vw,70px);
        margin-bottom: 24px;
    }

    .scroll-intro {
        padding: 0 24px 26px;
    }

    .scroll-intro>p:first-child {
        font: 20px/1.4 Georgia,serif;
        margin-bottom: 12px;
        letter-spacing: 1px;
    }

    .scroll-intro>p:last-child {
        font-size: 13px;
        line-height: 1.9;
        max-width: 320px;
        color: #c8d7d4;
    }

    .silk-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #b9c4a5 #173a45;
        border-block: 1px solid #b4c7bc44;
        background: #436d77;
    }

    .silk-canvas {
        position: relative;
        width: 1100px;
        max-width: none;
        aspect-ratio: 1807/712;
    }

    .silk-canvas>img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
    }

    .silk-hotspot {
        position: absolute;
        left: var(--x);
        top: var(--y);
        transform: translate(-50%,-50%);
        z-index: 2;
        font-size: 14px;
    }

    .silk-hotspot[open] {
        z-index: 5;
    }

    .silk-hotspot summary {
        position: relative;
        list-style: none;
        width: 46px;
        height: 46px;
        border: 1px solid #f8f4d9;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #214b58d9;
        box-shadow: 0 0 0 6px #f7f3d21a,0 3px 12px #0002;
        cursor: pointer;
        color: #fff5cf;
        font: 12px 'Courier New',monospace;
        transition: background .2s,transform .2s;
    }

    .silk-hotspot summary::-webkit-details-marker {
        display: none;
    }

    .silk-hotspot summary:hover {
        transform: scale(1.1);
    }

    .silk-hotspot[open] summary {
        background: #f3ebd1;
        color: #294b51;
    }

    .silk-note {
        position: absolute;
        width: 235px;
        left: 50%;
        transform: translateX(-50%);
        padding: 16px 18px;
        background: #f6f0dc;
        color: #28474c;
        box-shadow: 0 8px 30px #18343c44;
        border-radius: 2px;
        font: 13px/1.8 Arial,sans-serif;
        animation: note-in .25s ease;
    }

    .pop-up .silk-note {
        bottom: 60px;
    }

    .pop-down .silk-note {
        top: 60px;
    }

    .silk-note::after {
        content: '';
        position: absolute;
        left: calc(50% - 6px);
        width: 12px;
        height: 12px;
        background: #f6f0dc;
        transform: rotate(45deg);
    }

    .pop-up .silk-note::after {
        bottom: -6px;
    }

    .pop-down .silk-note::after {
        top: -6px;
    }

    .silk-note .note-index {
        font: 9px/1.5 'Courier New',monospace;
        letter-spacing: .5px;
        color: #71816d;
        margin-bottom: 9px;
    }

    .silk-note h3 {
        font: 20px/1.3 Georgia,serif;
        letter-spacing: 0;
        margin: 0 0 9px;
    }

    .silk-note .note-close {
        display: block;
        margin-top: 10px;
        font-size: 10px;
        color: #7c846f;
    }

    .scroll-footer {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin: 18px 24px 26px;
        font: 9px/1.6 'Courier New',monospace;
        letter-spacing: .3px;
        color: #c4d6cf;
    }

    .whole-work {
        margin: 0 24px;
        border-top: 1px solid #aec5ba66;
    }

    .whole-work summary {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        cursor: pointer;
        font-size: 13px;
    }

    .whole-work summary::-webkit-details-marker {
        display: none;
    }

    .whole-work[open] summary span {
        transform: rotate(45deg);
    }

    .whole-work img {
        width: 100%;
        height: auto;
    }

    .whole-work>p {
        font-size: 12px;
        line-height: 1.8;
        margin: 12px 0;
        color: #c2d2ca;
    }

    .ex-people {
        background: #eeede5;
    }

    .people-intro {
        font-size: 14px;
        color: #75776a;
        margin-bottom: 30px;
    }

    .person-entry {
        border-top: 1px solid #96998a;
    }

    .person-entry:last-child {
        border-bottom: 1px solid #96998a;
    }

    .person-entry summary {
        display: grid;
        grid-template-columns: 18px 64px minmax(0,1fr) 18px;
        gap: 10px;
        align-items: center;
        min-height: 104px;
        list-style: none;
        cursor: pointer;
        padding: 14px 0;
    }

    .person-entry summary::-webkit-details-marker {
        display: none;
    }

    .person-entry img {
        width: 64px;
        height: 72px;
        object-fit: cover;
        border-radius: 38% 38% 2px 2px;
        filter: saturate(.65);
    }

    .person-no {
        font: 10px 'Courier New',monospace;
        color: #818171;
    }

    .person-label {
        font: 22px/1.1 Georgia,serif;
        letter-spacing: -.4px;
    }

    .person-plus {
        font-size: 20px;
        color: #70795c;
    }

    .person-entry[open] .person-plus {
        transform: rotate(45deg);
    }

    .person-entry[open] img {
        filter: none;
    }

    .person-info {
        padding: 0 24px 24px 28px;
    }

    .person-info h3 {
        font-size: 20px;
        color: #8a6a41;
    }

    .person-info p {
        font-size: 14px;
        color: #666b5d;
    }

    .footer-content {
        background: #d7dace;
        padding: 40px 24px;
    }

    .footer-content p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .footer-content .content-big {
        font: 26px/1.1 Georgia,serif;
        max-width: 260px;
        margin: 0 auto 20px;
    }

    .back-to-top {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 12px;
    }

    .footer-bottom {
        background: #d7dace;
        font-size: 11px;
        padding: 18px 24px 28px;
    }

    @keyframes gentle-in {
        from {
            opacity: .4;
            transform: translateY(7px);
        }

        to {
            opacity: 1;
            transform: none;
        }

    }

    @keyframes note-in {
        from {
            opacity: 0;
            translate: 0 6px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }

    }

}

@media (prefers-reduced-motion:reduce) {
    .mobile-exhibition * {
        animation: none!important;
        transition: none!important;
    }

}

@media (max-width:600px) {
    .ex-process,.ex-motifs,.ex-archive,.ex-people {
        --accent: #b8c77c;
        --rule: #939b9c55;
    }

    .ex-process h2,.ex-motifs h2,.ex-archive h2,.ex-people h2 {
        font-family: Impact,'Arial Narrow',Arial,sans-serif;
        font-weight: 800;
        font-stretch: condensed;
        font-style: normal;
        letter-spacing: -1.5px;
        line-height: .98;
    }

    .ex-process h2 em,.ex-motifs h2 em,.ex-archive h2 em,.ex-people h2 em {
        font-family: inherit;
        font-style: normal;
    }

    .ex-process:before,.ex-people:before {
        content: '';
        position: absolute;
        inset: 0 20px;
        border-inline: 1px solid var(--rule);
        pointer-events: none;
        z-index: 0;
    }

    .ex-process {
        background: #f3f4f1;
        padding: 28px 20px 34px;
    }

    .ex-process>.ex-kicker {
        padding: 0 12px;
        color: #6f797b;
    }

    .ex-process h2 {
        font-size: clamp(37px,10.8vw,62px);
        color: #899398;
        margin: 16px 0 0;
        padding: 0 12px 20px;
        border-bottom: 1px solid var(--rule);
        position: relative;
        z-index: 1;
    }

    .ex-process .step-rail {
        position: absolute;
        left: 20px;
        top: 190px;
        display: flex;
        flex-direction: column;
        width: 110px;
        border: 0;
        border-left: 1px solid #9eaa88;
        z-index: 3;
    }

    .ex-process .step-rail label {
        min-height: 48px;
        flex: auto;
        border: 0;
        justify-content: flex-start;
        padding-left: 18px;
        gap: 8px;
        font: 11px 'Courier New',monospace;
        color: #adb4b1;
        position: relative;
    }

    .ex-process #making-1:checked~.step-rail label[for=making-1],.ex-process #making-2:checked~.step-rail label[for=making-2],.ex-process #making-3:checked~.step-rail label[for=making-3],.ex-process #making-4:checked~.step-rail label[for=making-4] {
        color: #455837;
    }

    .ex-process #making-1:checked~.step-rail label[for=making-1]:before,.ex-process #making-2:checked~.step-rail label[for=making-2]:before,.ex-process #making-3:checked~.step-rail label[for=making-3]:before,.ex-process #making-4:checked~.step-rail label[for=making-4]:before {
        content: '';
        width: 8px;
        height: 8px;
        background: #94a752;
        position: absolute;
        left: -4px;
        top: 20px;
    }

    .ex-process .needle-stage {
        margin: 14px 0 18px;
        position: relative;
        height: 380px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .ex-process .needle-stage img {
        width: 87%;
        height: 300px;
        object-fit: contain;
        transform-origin: 70% 70%;
        margin-bottom: 20px;
    }

    .ex-process .needle-stage figcaption {
        position: absolute;
        right: 12px;
        bottom: 0;
        color: #959d93;
        font-size: 9px;
    }

    .ex-process .step-stories {
        position: relative;
        margin: 0 12px;
        padding-top: 16px;
        border-color: #939b9c55;
        min-height: 220px;
    }

    .ex-process .step-story>.ex-kicker {
        color: #9ca491;
    }

    .ex-process .step-story h3 {
        font: normal 24px/1.1 'Courier New',monospace;
        text-transform: uppercase;
        max-width: 250px;
        letter-spacing: -1px;
        margin: 12px 0;
    }

    .ex-process .step-story>p:last-of-type {
        font-size: 14px;
        line-height: 1.7;
        max-width: 290px;
        color: #6f7871;
    }

    .ex-process .next-step {
        font-size: 10px;
        color: #647250;
        justify-content: space-between;
    }

    .ex-process .next-step:before {
        content: '( TAP A PHASE )';
        color: #8a9285;
    }

    .ex-motifs {
        background: #060806;
        color: #fff;
        padding: 34px 0 40px;
    }

    .ex-motifs>.ex-kicker {
        color: #fff;
        font-size: 9px;
        margin-inline: 24px;
    }

    .ex-motifs h2 {
        position: relative;
        z-index: 2;
        font-size: clamp(44px,12.5vw,72px);
        color: #fff;
        margin: 24px 24px -20px;
        pointer-events: none;
    }

    .motif-choice {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .motif-theatre {
        position: relative;
        min-height: 560px;
    }

    .motif-theatre .motif-sheet {
        display: none;
        padding: 0 24px;
    }

    #phone-motif-1:checked~.motif-theatre .theatre-1,#phone-motif-2:checked~.motif-theatre .theatre-2,#phone-motif-3:checked~.motif-theatre .theatre-3,#phone-motif-4:checked~.motif-theatre .theatre-4 {
        display: block;
        animation: gentle-in .55s ease;
    }

    .motif-theatre .motif-sheet>img {
        width: calc(100% + 48px);
        max-width: none;
        margin: 0 -24px 18px;
        height: 380px;
        background: #060806;
        object-fit: contain;
        mask-image: radial-gradient(ellipse 66% 67% at center,#000 50%,transparent 96%);
    }

    .motif-theatre .motif-sheet>.ex-kicker {
        color: #fff;
        font-size: 9px;
    }

    .motif-theatre .motif-sheet>h3 {
        font: normal 32px/1.1 'Times New Roman',serif;
        margin: 8px 0 12px;
    }

    .motif-theatre .motif-sheet>p:not(.ex-kicker) {
        font-size: 13px;
        line-height: 1.7;
        color: #fff;
        max-width: 285px;
        min-height: 46px;
    }

    .motif-caption {
        border-top: 1px solid #838b633b;
        margin-top: 20px;
    }

    .motif-caption summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 48px;
        cursor: pointer;
        font: 10px 'Courier New',monospace;
        color: #fff;
        list-style: none;
    }

    .motif-caption summary::-webkit-details-marker {
        display: none;
    }

    .motif-caption[open] summary span {
        transform: rotate(45deg);
    }

    .motif-caption p {
        font-size: 13px;
        line-height: 1.8;
        color: #fff;
        padding-bottom: 18px;
    }

    .motif-selector {
        display: flex;
        margin: 22px 24px 0;
        border-block: 1px solid #a9b58a55;
    }

    .motif-selector label {
        flex: 1;
        min-height: 65px;
        padding: 10px 3px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        text-align: center;
        font: 9px 'Courier New',monospace;
        color: #fff;
        cursor: pointer;
    }

    .motif-selector label span {
        font-size: 12px;
    }

    #phone-motif-1:checked~.motif-selector label[for=phone-motif-1],#phone-motif-2:checked~.motif-selector label[for=phone-motif-2],#phone-motif-3:checked~.motif-selector label[for=phone-motif-3],#phone-motif-4:checked~.motif-selector label[for=phone-motif-4] {
        background: #b8c77c;
        color: #18230e;
    }

    .motif-choice:focus-visible~.motif-selector {
        outline: 2px solid #b8c77c;
        outline-offset: 4px;
    }

    .ex-motifs .motif-bottom {
        margin: 24px 24px 0;
        font-size: 9px;
        color: #fff;
    }

    .ex-archive {
        background: #c4ced1;
        padding-top: 34px;
        padding-bottom: 36px;
        position: relative;
    }

    .ex-archive>.ex-kicker {
        color: #647375;
        font-size: 9px;
    }

    .ex-archive h2 {
        font-size: clamp(78px,25vw,136px);
        margin: 32px 24px -26px;
        color: #273337;
        position: relative;
        z-index: 2;
        pointer-events: none;
        line-height: .84;
    }

    .ex-archive>.ex-hint {
        margin: 0 24px;
        position: absolute;
        top: 37px;
        right: 0;
        font-size: 8px;
        max-width: 120px;
        text-align: right;
        color: #647375;
    }

    .ex-archive .work-reel {
        padding: 0 24px 28px;
        gap: 20px;
        scroll-padding-left: 24px;
        align-items: stretch;
    }

    .ex-archive .work-sheet {
        flex: 0 0 90%;
        background: transparent;
        box-shadow: none;
        padding: 0;
        transform: none!important;
        margin-top: 0!important;
        position: relative;
    }

    .ex-archive .work-sheet img {
        height: 410px;
        width: 100%;
        object-fit: contain;
        background: #a9b8bd;
        padding: 38px 14px 20px;
        border: 1px solid #71858b66;
    }

    .ex-archive .work-sheet:nth-child(even) img {
        background: #b7c1bc;
    }

    .ex-archive .work-sheet:nth-child(3) img {
        background: #c1bbac;
    }

    .ex-archive .work-sheet>.ex-kicker {
        border-top: 1px solid #6a808655;
        margin: 16px 0 8px;
        padding-top: 12px;
        color: #697a7d;
        font-size: 9px;
    }

    .ex-archive .work-sheet h3 {
        font-size: 19px;
        line-height: 1.5;
        font-weight: normal;
        margin: 0;
        max-width: 270px;
        color: #293c43;
    }

    .ex-archive .swipe-note {
        font-size: 9px;
        color: #61777d;
        text-align: right;
        margin: 0 24px;
    }

    .ex-people {
        background: #ebece7;
        padding: 34px 32px 48px;
    }

    .ex-people>.ex-kicker {
        color: #7d877c;
        font-size: 9px;
    }

    .ex-people h2 {
        font-size: clamp(39px,11vw,65px);
        color: #39443a;
        margin: 25px 0;
    }

    .ex-people .people-intro {
        font: 11px/1.8 'Courier New',monospace;
        color: #7d8979;
        max-width: 270px;
        margin-bottom: 30px;
    }

    .ex-people .people-list {
        position: relative;
    }

    .ex-people .person-entry {
        border-color: #87958266;
    }

    .ex-people .person-entry summary {
        grid-template-columns: 17px 72px minmax(0,1fr) 16px;
        gap: 11px;
        min-height: 114px;
        padding: 16px 0;
    }

    .ex-people .person-entry img {
        width: 72px;
        height: 82px;
        border-radius: 0;
        filter: grayscale(.8);
        transition: filter .4s;
    }

    .ex-people .person-label {
        font: 20px/1.1 'Times New Roman',serif;
        letter-spacing: -.5px;
    }

    .ex-people .person-no {
        align-self: start;
        padding-top: 3px;
        font-size: 9px;
        color: #819171;
    }

    .ex-people .person-entry[open] img {
        filter: none;
    }

    .ex-people .person-entry[open] {
        background: #dce2cf;
    }

    .ex-people .person-info {
        padding: 0 18px 23px 28px;
    }

    .ex-people .person-info h3 {
        color: #51603a;
        font-size: 20px;
    }

    .ex-people .person-info p {
        font-size: 13px;
        line-height: 1.7;
        color: #657057;
    }

}

@media (max-width:600px) {
    body .mobile-exhibition h2,body .Origin .Origin-right h2 {
        font-family: 'Arial Narrow',Arial,Helvetica,sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: clamp(22px, 6vw, 32px);
        line-height: 1.06;
        letter-spacing: -1.2px;
        text-transform: none;
    }

    body .mobile-exhibition h2 em {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: normal;
        letter-spacing: inherit;
    }

    body .ex-motifs h2,body .ex-archive h2 {
        margin-bottom: 24px;
    }

    body .ex-archive h2 {
        margin-top: 30px;
    }

    body .ex-people {
        padding: 36px 24px 50px;
    }

    body .ex-people:before {
        display: none;
    }

    body .ex-people h2 {
        max-width: 100%;
        text-align: center;
        margin: 24px 0 18px;
    }

    body .ex-people>.ex-kicker {
        text-align: center;
    }

    body .ex-people .people-intro {
        text-align: center;
        max-width: none;
        margin: 0 0 32px;
        font: 13px/1.6 Arial,sans-serif;
    }

    body .ex-people .people-list {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 30px 18px;
        align-items: start;
    }

    .person-circle {
        min-width: 0;
        text-align: center;
    }

    .person-circle>img {
        width: clamp(90px,27vw,140px);
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 50%;
        margin: 0 auto 14px;
        filter: none;
    }

    body .ex-people .person-circle>h3 {
        font: normal 19px/1.15 'Times New Roman',serif;
        letter-spacing: 0;
        margin: 0 0 8px;
        overflow-wrap: break-word;
    }

    body .ex-people .circle-info h3 {
        font: 12px/1.4 Arial,sans-serif;
        color: #6d795f;
        letter-spacing: 1px;
        margin: 0 0 8px;
    }

    body .ex-people .circle-info p {
        font: 12px/1.5 Arial,sans-serif;
        color: #606858;
        max-width: 180px;
        margin: auto;
    }

    body .ex-process {
        padding: 26px 20px 30px;
        background: #f6f7f3;
    }

    body .ex-process h2 {
        padding: 0 12px 18px;
        margin-top: 16px;
        color: #879397;
    }

    .making-scene {
        position: relative;
        display: grid;
        grid-template-columns: 90px minmax(0,1fr);
        min-height: 360px;
        align-items: center;
    }

    body .ex-process .making-scene .step-rail {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        align-self: start;
        margin-top: 22px;
        grid-column: 1;
        grid-row: 1;
        z-index: 3;
    }

    body .ex-process .making-scene .step-rail label {
        min-height: 48px;
        padding-left: 12px;
        font-size: 10px;
        gap: 7px;
    }

    body .ex-process .making-scene .needle-stage {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        height: 360px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        pointer-events: none;
    }

    body .ex-process .making-scene .needle-stage img {
        width: 80%;
        height: 300px;
        margin: 40px -2% 0 0;
        object-fit: contain;
        transform-origin: center;
        transition: transform .6s ease;
    }

    body .ex-process .making-scene .needle-stage figcaption {
        font-size: 8px;
        right: 12px;
        bottom: 10px;
    }

    body .ex-process #making-1:checked~.making-scene label[for=making-1],body .ex-process #making-2:checked~.making-scene label[for=making-2],body .ex-process #making-3:checked~.making-scene label[for=making-3],body .ex-process #making-4:checked~.making-scene label[for=making-4] {
        color: #465b38;
    }

    body .ex-process #making-1:checked~.making-scene label[for=making-1]:before,body .ex-process #making-2:checked~.making-scene label[for=making-2]:before,body .ex-process #making-3:checked~.making-scene label[for=making-3]:before,body .ex-process #making-4:checked~.making-scene label[for=making-4]:before {
        content: '';
        position: absolute;
        left: -4px;
        top: 20px;
        width: 8px;
        height: 8px;
        background: #9aae5f;
    }

    #making-1:checked~.making-scene img {
        transform: rotate(-12deg) scale(.86);
    }

    #making-2:checked~.making-scene img {
        transform: rotate(-4deg) scale(.94);
    }

    #making-3:checked~.making-scene img {
        transform: rotate(5deg) scale(1.02);
    }

    #making-4:checked~.making-scene img {
        transform: rotate(0) scale(1);
    }

    .step-choice:focus-visible~.making-scene .step-rail {
        outline: 2px solid #7d944c;
        outline-offset: 3px;
    }

    body .ex-process .step-stories {
        margin: 8px 12px 0;
        min-height: 212px;
        padding-top: 18px;
    }

    body .ex-process .step-story h3 {
        font: normal 22px/1.15 'Courier New',monospace;
        letter-spacing: -.5px;
        margin: 12px 0;
    }

    body .ex-process .step-story>p:last-of-type {
        font-size: 14px;
        line-height: 1.65;
    }

}

@media (max-width:600px) {
    body .mobile-exhibition,body .mobile-exhibition * {
        font-family: Arial,sans-serif!important;
    }

    body .mobile-exhibition h2,body .mobile-exhibition h2 em,body .Origin .Origin-right h2 {
        font-family: 'Majesti Banner','Times New Roman',serif!important;
        font-weight: 700;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        line-height: 1.1;
    }

    body .mobile-exhibition h3 {
        font-family: 'Majesti Banner','Times New Roman',serif!important;
        font-style: normal;
        letter-spacing: normal;
    }

    body .ex-people .person-circle>h3,body .ex-people .circle-info h3 {
        font-family: Arial,sans-serif!important;
    }

    body .ex-process .step-story h3 {
        font-family: Arial,sans-serif!important;
        text-transform: none;
        font-size: 24px;
        letter-spacing: normal;
    }

    body .header .main-navigation__link {
        font-family: 'Times New Roman',serif;
    }

    body .footer-content .content-big {
        font-family: Arial,sans-serif;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: normal;
    }

    body .ex-archive>.ex-walk {
        margin-top: 32px;
        padding-top: 30px;
    }

    body .ex-archive>.ex-walk .scroll-intro>p:first-child {
        font-family: 'Majesti Banner','Times New Roman',serif!important;
    }

}


.art-study {
    display: none;
}

@media (min-width:601px) {
    .art-study {
        display: block;
        background: #ece9df;
        color: #264751;
        padding: 52px clamp(24px,4vw,64px) 40px;
        font: 15px/1.7 Arial,sans-serif;
        border-top: 1px solid #83959855;
    }

    .art-study-heading {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 48px;
        align-items: end;
        margin-bottom: 34px;
    }

    .art-study .art-overline {
        font: 11px/1.5 Arial,sans-serif;
        letter-spacing: 1.8px;
        color: #6f8588;
        margin-bottom: 16px;
    }

    .art-study h3 {
        font: 700 clamp(38px,4.4vw,64px)/1.04 'Majesti Banner','Times New Roman',serif;
        letter-spacing: -1px;
        margin: 0;
    }

    .art-study-intro {
        max-width: 440px;
        padding-bottom: 3px;
    }

    .art-study-intro .art-chinese {
        font: 22px/1.5 'Times New Roman',serif;
        letter-spacing: 2px;
        margin: 0 0 16px;
        color: #355964;
    }

    .art-study-intro>p {
        font-size: 14px;
        line-height: 1.8;
        color: #586f74;
    }

    .art-study-intro .art-instruction {
        font-size: 10px;
        letter-spacing: 1px;
        margin-top: 22px;
        color: #647d79;
    }

    .art-study-frame {
        background: #305866;
        padding: 12px 12px 0;
        box-shadow: 0 14px 30px #28465215;
    }

    .art-study-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: #d3d7b8 #305866;
        overscroll-behavior-x: contain;
    }

    .art-study-scroll:focus-visible {
        outline: 2px solid #d0c19b;
        outline-offset: 3px;
    }

    .art-study-canvas {
        position: relative;
        width: 100%;
        min-width: 1000px;
        aspect-ratio: 1807/712;
    }

    .art-study-canvas>img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
    }

    .art-pin {
        position: absolute;
        left: var(--x);
        top: var(--y);
        transform: translate(-50%,-50%);
        z-index: 1;
    }

    .art-pin[open] {
        z-index: 5;
    }

    .art-pin summary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        list-style: none;
        border: 1px solid #f7ebc6;
        border-radius: 50%;
        background: #244d5ace;
        color: #fff4d0;
        font: 12px Arial,sans-serif;
        cursor: pointer;
        box-shadow: 0 0 0 5px #eee7c322;
        transition: background .2s,transform .2s;
    }

    .art-pin summary::-webkit-details-marker {
        display: none;
    }

    .art-pin summary:hover {
        transform: scale(1.08);
    }

    .art-pin summary:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 4px;
    }

    .art-pin[open] summary {
        background: #f4edda;
        color: #274c57;
    }

    .art-popover {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 248px;
        padding: 16px 18px;
        background: #f6f0dd;
        color: #365761;
        box-shadow: 0 6px 24px #142c3b44;
        line-height: 1.6;
    }

    .art-pin.above .art-popover {
        bottom: 56px;
    }

    .art-pin.below .art-popover {
        top: 56px;
    }

    .art-popover:after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        left: calc(50% - 5px);
        transform: rotate(45deg);
        background: #f6f0dd;
    }

    .above .art-popover:after {
        bottom: -5px;
    }

    .below .art-popover:after {
        top: -5px;
    }

    .art-popover .art-overline {
        font-size: 9px;
        letter-spacing: .7px;
        margin-bottom: 8px;
        color: #819080;
    }

    .art-study .art-popover h4 {
        font: 700 21px/1.12 'Majesti Banner','Times New Roman',serif;
        margin: 0 0 10px;
    }

    .art-popover>p:not(.art-overline) {
        font: 13px/1.6 Arial,sans-serif;
        margin: 0;
    }

    .art-popover>span {
        display: block;
        font: 10px/1.5 Arial,sans-serif;
        color: #929784;
        margin-top: 10px;
    }

    .art-frame-caption {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 15px 8px;
        color: #d4dfd4;
        font: 9px/1.5 Arial,sans-serif;
        letter-spacing: 1px;
    }

    .art-frame-caption .tablet-slide {
        display: none;
    }

    .art-reading {
        display: grid;
        grid-template-columns: .8fr repeat(3,1fr);
        gap: 28px;
        margin-top: 40px;
        border-top: 1px solid #83959866;
        padding-top: 26px;
    }

    .art-reading>.art-overline {
        font-size: 10px;
        padding-top: 4px;
    }

    .art-reading h4 {
        font: 700 18px/1.3 'Majesti Banner','Times New Roman',serif;
        margin: 0 0 12px;
    }

    .art-reading p:not(.art-overline) {
        font: 13px/1.7 Arial,sans-serif;
        color: #6b7e7f;
    }

}

@media (min-width:601px) and (max-width:1100px) {
    .art-study {
        padding: 32px 24px;
    }

    .art-study-heading {
        gap: 24px;
        grid-template-columns: 1fr 1.1fr;
    }

    .art-study h3 {
        font-size: 38px;
    }

    .art-study-intro .art-chinese {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .art-study-intro>p {
        font-size: 13px;
    }

    .art-reading {
        grid-template-columns: repeat(3,1fr);
        gap: 20px;
    }

    .art-reading>.art-overline {
        grid-column: 1/-1;
        margin-bottom: 0;
    }

    .art-frame-caption .tablet-slide {
        display: inline;
    }

}

@media (prefers-reduced-motion:reduce) {
    .art-pin summary {
        transition: none;
    }

}

@media (min-width:601px) {
    .art-study-canvas {
        min-width: 1200px;
    }

}